nextjs-app/components/HomeView.module.css

@@ -922,6 +922,29 @@
   color: var(--accent-gold-text, #7a6800);
 }
 
+/* Safeguarding is a separate binary met/not-met judgement, not a graded area,
+   so it sits below the five-point list behind a divider with its own chip. */
+.rcSafeguarding {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.5rem;
+  margin-top: 0.05rem;
+  padding-top: 0.35rem;
+  border-top: 1px dashed var(--border-color, #e5dfd5);
+}
+
+.rcSep {
+  color: var(--text-muted, #8a847a);
+  font-style: italic;
+}
+
+.rcChipMet {
+  background: transparent;
+  color: var(--accent-teal, #2d7d7d);
+  border: 1px solid rgba(45, 125, 125, 0.4);
+}
+
 .ofstedMeta {
   font-size: 0.6rem;
   color: var(--text-muted, #6d685f);

nextjs-app/components/HowItWorksSection.tsx

@@ -19,12 +19,12 @@ export function HowItWorksSection() {
     { label: 'Ofsted', a: 'Outstanding', b: 'Good', aHi: true },
   ];
   // Report card (Ofsted's framework from Nov 2025): one rating per area of
-  // school life on a five-point scale, plus a stand-alone safeguarding outcome.
+  // school life on a five-point scale. Safeguarding is judged separately, as a
+  // binary met/not-met outcome — kept out of this list and shown on its own.
   const reportCard: Array<{ area: string; grade: string; good: boolean }> = [
     { area: 'Achievement', grade: 'Strong', good: true },
     { area: 'Curriculum & teaching', grade: 'Expected standard', good: false },
     { area: 'Attendance & behaviour', grade: 'Strong', good: true },
-    { area: 'Safeguarding', grade: 'Met', good: true },
   ];
 
   return (
@@ -62,8 +62,8 @@ export function HowItWorksSection() {
                 <div className={styles.att8BarWrap}>
                   <div className={styles.att8BarHead}><span>This school</span><span>National avg 45.9</span></div>
                   <div className={styles.att8Track}>
-                    <div className={styles.att8Fill} style={{ width: '68%' }} />
-                    <div className={styles.att8NatLine} style={{ left: '57%' }} />
+                    <div className={styles.att8Fill} style={{ width: '54.8%' }} />
+                    <div className={styles.att8NatLine} style={{ left: '45.9%' }} />
                   </div>
                 </div>
                 <div className={styles.att8Score}>
@@ -97,6 +97,10 @@ export function HowItWorksSection() {
                   </div>
                 ))}
               </div>
+              <div className={styles.rcSafeguarding}>
+                <span className={styles.rcArea}>Safeguarding <span className={styles.rcSep}>· separate check</span></span>
+                <span className={`${styles.rcChip} ${styles.rcChipMet}`}>Met</span>
+              </div>
               <div className={styles.ofstedMeta}>Full inspection · March 2026</div>
             </div>
           </div>