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"],