nextjs-app/components/AdmissionsView.module.css

@@ -442,6 +442,58 @@
   line-height: 1;
 }
 
+/* ─── Easy-to-miss callouts ──────────────────────────── */
+
+.calloutGroup {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  margin-top: 0.7rem;
+}
+
+.callout {
+  display: flex;
+  gap: 0.55rem;
+  padding: 0.6rem 0.75rem;
+  background: var(--accent-gold-bg, rgba(201, 162, 39, 0.12));
+  border: 1px solid rgba(201, 162, 39, 0.28);
+  border-left: 3px solid var(--accent-gold, #c9a227);
+  border-radius: 8px;
+}
+
+.calloutIcon {
+  flex-shrink: 0;
+  width: 1.05rem;
+  height: 1.05rem;
+  margin-top: 0.1rem;
+  border-radius: 50%;
+  background: var(--accent-gold, #c9a227);
+  color: #fff;
+  font-size: 0.72rem;
+  font-weight: 800;
+  line-height: 1.05rem;
+  text-align: center;
+}
+
+.calloutText {
+  min-width: 0;
+}
+
+.calloutTitle {
+  font-size: 0.82rem;
+  font-weight: 700;
+  color: var(--accent-gold-text, #7a6800);
+  line-height: 1.3;
+  margin-bottom: 0.15rem;
+}
+
+.calloutBody {
+  font-size: 0.82rem;
+  color: var(--text-secondary, #5c564d);
+  line-height: 1.5;
+  margin: 0;
+}
+
 /* ─── Tips ───────────────────────────────────────────── */
 
 .tips {

nextjs-app/components/AdmissionsView.tsx

@@ -54,6 +54,9 @@ interface Step {
   title: string;
   body: string;
   highlight?: 'deadline' | 'offer';
+  /* Easy-to-miss, deadline-sensitive warnings surfaced as callout boxes
+     rather than buried in the body prose. */
+  callouts?: { title: string; body: string }[];
   /* How SchoolCompare helps at this stage of the journey */
   tool?: { label: string; href: string };
 }
@@ -61,7 +64,17 @@ interface Step {
 const SECONDARY_STEPS: Step[] = [
   {
     title: 'Check entry criteria',
-    body: 'Look at each school\'s admissions policy — catchment areas, faith criteria, sibling priority, and aptitude tests vary widely. Two deadlines catch parents out: grammar and other selective schools need separate entrance-test registration months earlier (often by September), and faith schools often want a supplementary information form sent directly to the school alongside the council application.',
+    body: 'Look at each school\'s admissions policy — catchment areas, faith criteria, sibling priority, and aptitude tests vary widely.',
+    callouts: [
+      {
+        title: 'Selective schools register earlier',
+        body: 'Grammar and other selective schools need separate entrance-test registration months earlier — often by September, well before the 31 October deadline.',
+      },
+      {
+        title: 'Faith schools may need an extra form',
+        body: 'Many faith schools require a supplementary information form (SIF) sent directly to the school, on top of the council application.',
+      },
+    ],
     tool: { label: 'Find schools & view their admissions history', href: '/' },
   },
   {
@@ -100,7 +113,13 @@ const SECONDARY_STEPS: Step[] = [
 const PRIMARY_STEPS: Step[] = [
   {
     title: 'Research entry criteria',
-    body: 'Faith schools, language units, and distance-based catchments differ by school. Start by reading each school\'s admissions policy — and note that faith schools often require a supplementary information form sent directly to the school, in addition to the council application.',
+    body: 'Faith schools, language units, and distance-based catchments differ by school. Start by reading each school\'s admissions policy on their website or the council\'s website.',
+    callouts: [
+      {
+        title: 'Faith schools may need an extra form',
+        body: 'Many faith schools require a supplementary information form (SIF) sent directly to the school, in addition to the council application.',
+      },
+    ],
     tool: { label: 'Find schools & view their admissions history', href: '/' },
   },
   {
@@ -307,6 +326,19 @@ export function AdmissionsView() {
                 {step.date && <div className={styles.stepDate}>{step.date}</div>}
                 <div className={styles.stepTitle}>{step.title}</div>
                 <p className={styles.stepBody}>{step.body}</p>
+                {step.callouts && step.callouts.length > 0 && (
+                  <div className={styles.calloutGroup}>
+                    {step.callouts.map((c) => (
+                      <div key={c.title} className={styles.callout}>
+                        <span className={styles.calloutIcon} aria-hidden="true">!</span>
+                        <div className={styles.calloutText}>
+                          <div className={styles.calloutTitle}>{c.title}</div>
+                          <p className={styles.calloutBody}>{c.body}</p>
+                        </div>
+                      </div>
+                    ))}
+                  </div>
+                )}
                 {step.tool && (
                   <a
                     href={step.tool.href}
@@ -355,6 +387,19 @@ export function AdmissionsView() {
                 {step.date && <div className={styles.stepDate}>{step.date}</div>}
                 <div className={styles.stepTitle}>{step.title}</div>
                 <p className={styles.stepBody}>{step.body}</p>
+                {step.callouts && step.callouts.length > 0 && (
+                  <div className={styles.calloutGroup}>
+                    {step.callouts.map((c) => (
+                      <div key={c.title} className={styles.callout}>
+                        <span className={styles.calloutIcon} aria-hidden="true">!</span>
+                        <div className={styles.calloutText}>
+                          <div className={styles.calloutTitle}>{c.title}</div>
+                          <p className={styles.calloutBody}>{c.body}</p>
+                        </div>
+                      </div>
+                    ))}
+                  </div>
+                )}
                 {step.tool && (
                   <a
                     href={step.tool.href}