feat(hub): say what MeshBay is on the sign-in page

The browser sign-in page now carries the project's pitch beside the form:
what MeshBay is, the applications, what it is for, and what meshbay.org
does and never sees, with links to the downloads and the legal pages.
Text on the left and the form on the right on a desktop; one column,
form first, below 1000px. Not shown in the desktop application, whose
user has already downloaded it. All ten catalogues carry the text.

Every claim is held to MESHBAY_DESIGN.md 2.3: the page says content never
reaches the hub, not that the hub can read nothing (T3), and "end-to-end"
means device to node.

Signed out there is no sidebar, so the 960px main column sat at the left
of the window and the sign-in, register and reset forms were centred in
it (x=290 in 1440). `.page-center` pages now lift that cap.

test_welcome_layout_measured.py measures the real stylesheet in Chrome:
no horizontal overflow from 320 to 1440px, form first on narrow screens,
form right of the text on desktops, pair centred in the window.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01D9MCBBWSm9GhBESmqzJxNy

1 files changed, 157 insertions, 2 deletions

diff --git a/packages/meshbay-hub/src/meshbay_hub/static/style.css b/packages/meshbay-hub/src/meshbay_hub/static/style.css
index d51e5b0..ff6fe57 100644
--- a/packages/meshbay-hub/src/meshbay_hub/static/style.css
+++ b/packages/meshbay-hub/src/meshbay_hub/static/style.css
@@ -478,8 +478,11 @@ a:hover { text-decoration: underline; }
    exactly that much — 48px, and a scrollbar on sign-in at every window size.
    Measured, not deduced: `.page-center` ended at 795 and `main` at 819.
    The page brings its own 24px, so dropping main's here changes nothing
-   visible and removes the duplicated arithmetic rather than adding more. */
-.main:has(> .page-center) { padding: 0; } 
+   visible and removes the duplicated arithmetic rather than adding more.
+   `max-width` goes too: signed out there is no sidebar, so the 960px column sat
+   at the left of the window and a "centred" form was centred in that — at
+   x=290 in a 1440px window. */
+.main:has(> .page-center) { padding: 0; max-width: none; }
 
 /* ── Sticky chrome ────────────────────────────────────────────────────────── */
 
@@ -631,6 +634,158 @@ a:hover { text-decoration: underline; }
   color: var(--text-dim);
 }
 
+/* ── Welcome (sign-in page, browser only) ─────────────────────────────────── */
+
+/* What MeshBay is on the left, the form on the right and level with the
+   title; stacked, form first, once the text would be narrower than the form.
+   The form comes first in the markup (first on a phone, first to the
+   keyboard) and `row-reverse` is what moves it right. Headings are
+   `.welcome-pitch .welcome-h` rather than a bare class so they outrank
+   `.main h2`. */
+.welcome {
+  display: flex;
+  flex-direction: row-reverse;
+  align-items: flex-start;
+  justify-content: center;
+  gap: 96px;
+  width: 100%;
+  max-width: 1180px;
+}
+.welcome > .login-card { flex: 0 0 380px; }
+
+.welcome-pitch {
+  flex: 1 1 0;
+  min-width: 0;
+  max-width: 660px;
+  color: var(--text-secondary);
+  font-size: 0.95rem;
+  line-height: 1.5;
+}
+.welcome-pitch p { margin-bottom: 10px; }
+
+.welcome-apps, .welcome-uses, .welcome-never { list-style: none; }
+
+.welcome-title {
+  margin-bottom: 10px;
+  color: var(--text);
+  font-size: 1.9em;
+  font-weight: 700;
+  line-height: 1.2;
+  letter-spacing: -0.02em;
+  text-wrap: balance;
+}
+.welcome-lead { font-size: 1.05em; }
+
+.welcome-apps { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 14px; }
+.welcome-apps li {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 5px 12px;
+  border: 1px solid var(--border);
+  border-radius: 999px;
+  background: var(--bg-surface);
+  color: var(--text);
+  font-size: 0.88em;
+}
+.welcome-apps .icon { color: var(--accent); }
+
+.welcome-e2e {
+  display: flex;
+  align-items: flex-start;
+  gap: 10px;
+  padding: 8px 14px;
+  border-left: 3px solid var(--accent);
+  border-radius: 0 6px 6px 0;
+  background: var(--accent-bg);
+  color: var(--text);
+}
+.welcome-e2e .icon { margin-top: 0.3em; color: var(--accent); }
+
+.welcome-pitch .welcome-h {
+  margin: 18px 0 8px;
+  color: var(--text-dim);
+  font-size: 0.78em;
+  font-weight: 600;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+}
+
+.welcome-uses { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 18px; }
+.welcome-uses li {
+  display: flex;
+  align-items: flex-start;
+  gap: 10px;
+  color: var(--text);
+  font-size: 0.92em;
+  line-height: 1.45;
+}
+.welcome-use-icon {
+  display: inline-flex;
+  flex: 0 0 auto;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  border-radius: 8px;
+  background: var(--accent-bg);
+  color: var(--accent);
+  font-size: 17px;
+}
+
+.welcome-hub {
+  margin-top: 18px;
+  padding: 12px 18px;
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  background: var(--bg-surface);
+  font-size: 0.92em;
+}
+.welcome-pitch .welcome-hub .welcome-h { margin-top: 0; }
+.welcome-pitch .welcome-hub-never { margin-bottom: 6px; color: var(--text); font-weight: 600; }
+.welcome-never { display: flex; flex-direction: column; gap: 4px; color: var(--text); }
+.welcome-never li { display: flex; align-items: flex-start; gap: 8px; }
+.welcome-never .icon { margin-top: 0.3em; color: var(--success); }
+.welcome-pitch .welcome-hub-free {
+  margin: 10px 0 0;
+  padding-top: 8px;
+  border-top: 1px solid var(--border);
+  color: var(--text);
+  font-weight: 500;
+}
+
+.welcome-links {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 12px 20px;
+  margin-top: 14px;
+}
+.welcome-cta {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  padding: 10px 18px;
+  border-radius: 6px;
+  background: var(--accent);
+  color: var(--accent-text);
+  font-size: 0.95em;
+  font-weight: 600;
+}
+.welcome-cta:hover { background: var(--accent-hover); text-decoration: none; }
+.welcome-legal { color: var(--text-secondary); font-size: 0.9em; }
+.welcome-legal:hover { color: var(--accent); }
+
+@media (max-width: 1000px) {
+  .welcome { flex-direction: column; align-items: center; gap: 36px; }
+  .welcome > .login-card { flex: none; }
+  .welcome-pitch { flex: none; width: 100%; max-width: 520px; }
+}
+@media (max-width: 520px) {
+  .welcome-title { font-size: 1.6em; }
+  .welcome-uses { grid-template-columns: 1fr; }
+}
+
 /* ── Form elements ────────────────────────────────────────────────────────── */
 
 input[type="text"],