Reorganise landing: group the 30 links into six numbered journey stages

Replaces the flat crowded quicklink wall with six numbered stage cards (Start here, Apply to study, Residence and healthcare, Move and settle in, Everyday student life, After your first year), each with an icon, a one-line description, and its topic links. New guide-cats/guide-cat styles; section retitled to Find your way through the guide.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

css/pages/_guide.css

@@ -674,27 +674,95 @@
 .guide-section { max-width: 1080px; margin: 56px auto; padding: 0 24px; }
 .guide-section > h2 { font-size: 26px; color: #101828; text-align: center; margin: 0 0 6px; }
 .guide-section > .guide-section-sub { text-align: center; color: #667085; margin: 0 0 28px; }
-.guide-quicklinks {
+/* Stage cards: the guide grouped into six journey stages. */
+.guide-cats {
     display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
+    grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
+    gap: 22px;
+    align-items: start;
+}
+.guide-cat {
+    border: 1px solid #EAECF0;
+    border-radius: 16px;
+    background: #FFFFFF;
+    padding: 22px 22px 14px;
+    box-shadow: 0 1px 2px rgba(16, 24, 40, .04);
+    transition: box-shadow .15s ease, border-color .15s ease;
+}
+.guide-cat:hover {
+    border-color: #D8E3E8;
+    box-shadow: 0 12px 28px rgba(16, 24, 40, .08);
+}
+.guide-cat-head {
+    display: flex;
+    align-items: flex-start;
     gap: 14px;
+    padding-bottom: 14px;
+    margin-bottom: 8px;
+    border-bottom: 1px solid #F2F4F7;
+}
+.guide-cat-num {
+    flex-shrink: 0;
+    width: 38px;
+    height: 38px;
+    border-radius: 10px;
+    background: #2D738C;
+    color: #fff;
+    font-weight: 700;
+    font-size: 17px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+.guide-cat-heading h3 {
+    display: flex;
+    align-items: center;
+    gap: 9px;
+    margin: 2px 0 4px;
+    font-size: 17px;
+    font-weight: 700;
+    color: #101828;
+    line-height: 22px;
+    text-align: left;
+}
+.guide-cat-heading h3 i {
+    color: #2D738C;
+    font-size: 15px;
+}
+.guide-cat-heading p {
+    margin: 0;
+    font-size: 13.5px;
+    color: #667085;
+    line-height: 20px;
+}
+.guide-cat-links {
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
 }
 .guide-quicklink {
     display: flex;
     align-items: center;
-    gap: 12px;
-    padding: 16px 18px;
-    border: 1px solid #EAECF0;
-    border-radius: 12px;
-    background: #FFFFFF;
-    color: #101828;
+    gap: 11px;
+    padding: 9px 10px;
+    border-radius: 8px;
+    color: #344054;
     font-weight: 500;
-    font-size: 15px;
+    font-size: 14.5px;
     text-decoration: none;
-    transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease;
+    transition: background .15s ease, color .15s ease;
+}
+.guide-quicklink:hover {
+    background: #F2F7F9;
+    color: #1D5C72;
+}
+.guide-quicklink i {
+    color: #2D738C;
+    font-size: 15px;
+    width: 20px;
+    text-align: center;
+    flex-shrink: 0;
 }
-.guide-quicklink:hover { border-color: #2D738C; transform: translateY(-2px); box-shadow: 0 8px 20px rgba(16,24,40,0.06); }
-.guide-quicklink i { color: #2D738C; font-size: 18px; width: 22px; text-align: center; }
 
 /* ---------- Notice / before-you-rely blocks on landing ---------- */
 .guide-notice {