Index: src/views/pages/connect.ejs
===================================================================
--- src/views/pages/connect.ejs	(revision 02021042f8346f4cca62228062484c41e0df8bcd)
+++ src/views/pages/connect.ejs	(revision 439f09574e5643c1bfc9e6787974389afdb0802b)
@@ -4,4 +4,27 @@
   <% if (typeof success !== 'undefined' && success) { %><div class="alert alert-success"><%= success %></div><% } %>
   <% if (typeof error !== 'undefined' && error) { %><div class="alert alert-error"><%= error %></div><% } %>
+
+  <%# FEP-633c §2 + §3.6: who guards this account, and how available each of
+      them is. Connect is the "who am I connected to" page, and a guardian is
+      the one connection a ward should never have to hunt for. Availability in
+      buddy-list language on the responsibility axis; the labels are UI, the
+      wire keeps the spec terms. Never public: this page is the owner's. %>
+  <% if (typeof myGuardians !== 'undefined' && myGuardians.length) { %>
+    <section class="conn-guardians">
+      <h2 class="conn-gtitle">&#128737; <%= t('msg.guardians_label') %></h2>
+      <ul class="conn-glist">
+        <% myGuardians.forEach(function(g){
+             var _st = g.availability === 'away' ? 'away' : (g.availability === 'dormant' ? 'dormant' : 'active');
+             var _lbl = _st === 'away' ? t('msg.g_away', { date: g.awayUntil ? formatDate(g.awayUntil) : '?' })
+                      : (_st === 'dormant' ? t('msg.g_offline') : t('msg.g_available')); %>
+          <li class="conn-guardian">
+            <span class="conn-gdot conn-gdot--<%= _st %>" aria-hidden="true"></span>
+            <span class="conn-ghandle"><%= g.handle %></span>
+            <span class="conn-gstate"><%= _lbl %></span>
+          </li>
+        <% }); %>
+      </ul>
+    </section>
+  <% } %>
 
   <form method="post" action="/news/follow" class="tl-follow">
@@ -83,4 +106,21 @@
 
 <style>
+  /* Guardians (FEP-633c 3.6): the buddy-list dot on the responsibility axis.
+     Green available, yellow declared away with an end, grey observed dormant
+     (one answer restores). Set apart from the follow list on purpose: these
+     are not people you chose to follow, they are the ones looking after you. */
+  .conn-guardians { margin: 0 0 1.25rem; padding: .8rem 1rem; border-radius: 12px;
+    border: 1px solid color-mix(in srgb, var(--ink, #000) 10%, transparent);
+    background: color-mix(in srgb, var(--ink, #000) 2.5%, transparent);
+    border-left: 3px solid #35a2ff; }
+  .conn-gtitle { margin: 0 0 .5rem; font-size: .95rem; }
+  .conn-glist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .35rem; }
+  .conn-guardian { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
+  .conn-gdot { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; }
+  .conn-gdot--active { background: #4caf7d; }
+  .conn-gdot--away { background: #e0a83a; }
+  .conn-gdot--dormant { background: #8a93a3; }
+  .conn-ghandle { font-weight: 600; }
+  .conn-gstate { color: var(--ink-soft, #888); font-size: .82rem; }
   .tl-wrap { max-width: 640px; margin: 1rem auto; padding: 0 1rem; }
   .tl-title { margin: 0 0 .75rem; }
Index: src/views/pages/messages.ejs
===================================================================
--- src/views/pages/messages.ejs	(revision 02021042f8346f4cca62228062484c41e0df8bcd)
+++ src/views/pages/messages.ejs	(revision 439f09574e5643c1bfc9e6787974389afdb0802b)
@@ -22,30 +22,4 @@
     </div>
     <% }); %>
-  <% } %>
-
-  <%# FEP-633c §2: the ward always sees who guards it (committed relations). %>
-  <% if (typeof myGuardians !== 'undefined' && myGuardians.length) { %>
-    <div class="alert" style="display:flex;align-items:center;gap:12px;flex-wrap:wrap;border-left:3px solid #35a2ff;">
-      <span style="font-size:1.4em;">&#128737;</span>
-      <div style="flex:1;min-width:200px;">
-        <strong><%= t('msg.guardians_label') %></strong><br>
-        <%# Availability (FEP-633c 3.6): the ward sees the real size of its
-            safety net, in buddy-list language on the responsibility axis.
-            Labels are UI (Robins besluit); the wire keeps the spec terms.
-            Owner-only by construction: this page is the owner's. %>
-        <span class="msg-guardians">
-          <% myGuardians.forEach(function(g){
-               var _st = g.availability === 'away' ? 'away' : (g.availability === 'dormant' ? 'dormant' : 'active');
-               var _lbl = _st === 'away' ? t('msg.g_away', { date: g.awayUntil ? formatDate(g.awayUntil) : '?' })
-                        : (_st === 'dormant' ? t('msg.g_offline') : t('msg.g_available')); %>
-            <span class="msg-guardian">
-              <span class="msg-gdot msg-gdot-<%= _st %>" aria-hidden="true"></span>
-              <%= g.handle %>
-              <span class="msg-gstate"><%= _lbl %></span>
-            </span>
-          <% }); %>
-        </span>
-      </div>
-    </div>
   <% } %>
 
@@ -145,14 +119,4 @@
 
 <style>
-  /* Availability of the ward's guardians (FEP-633c 3.6): the buddy-list dot
-     on the responsibility axis. Green available, yellow declared away, grey
-     observed dormant (one answer restores). */
-  .msg-guardians { display: flex; flex-wrap: wrap; gap: .35rem 1rem; }
-  .msg-guardian { display: inline-flex; align-items: center; gap: .35rem; white-space: nowrap; }
-  .msg-gdot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
-  .msg-gdot-active { background: #4caf7d; }
-  .msg-gdot-away { background: #e0a83a; }
-  .msg-gdot-dormant { background: #8a93a3; }
-  .msg-gstate { color: var(--ink-soft, #888); font-size: .82rem; }
   .msg-wrap { max-width: 640px; margin: 1rem auto; padding: 0 1rem; }
   .msg-title { margin: 0 0 .9rem; }