From 353b1865953c5e5ba4fa7df3b636a7c2262e3dc2 Mon Sep 17 00:00:00 2001
From: Alex Godoroja <alex@vulturelabs.io>
Date: Fri, 19 Jun 2026 16:50:03 -0700
Subject: [PATCH] publish: gate the form on mobile, show 'open on desktop'
 message

---
 .gitignore              |  1 +
 src/pages/publish.astro | 27 +++++++++++++++++++++++++++
 2 files changed, 28 insertions(+)

diff --git a/.gitignore b/.gitignore
index 0d43c03..cbd3fcf 100644
--- a/.gitignore
+++ b/.gitignore
@@ -11,3 +11,4 @@ worker/.wrangler/
 worker/coverage/
 
 .env
+.gstack/
diff --git a/src/pages/publish.astro b/src/pages/publish.astro
index 8cbf426..62c3f65 100644
--- a/src/pages/publish.astro
+++ b/src/pages/publish.astro
@@ -54,12 +54,39 @@ const canonicalUrl = 'https://pilotprotocol.network/publish';
   </div>
 </section>
 
+<section id="mobile-gate">
+  <div class="wrap">
+    <div class="mg-card">
+      <div class="mg-icon">🖥️</div>
+      <h1>Publishing needs a desktop</h1>
+      <p>Open <b>pilotprotocol.network/publish</b> on a desktop browser to submit your app.</p>
+      <a class="mg-link" href="/app-store">← Back to the App Store</a>
+    </div>
+  </div>
+</section>
+
 <Footer />
 
 <style is:global>
   /* GLOBAL (the wizard DOM is JS-injected, so Astro-scoped styles can't reach it),
      namespaced under #publish, and forced LIGHT + large regardless of the site theme. */
 
+  /* ── mobile gate: the multi-step form needs a desktop; on small screens swap
+     the whole publish experience for a "open on desktop" message. ── */
+  #mobile-gate { display: none; }
+  @media (max-width: 768px) {
+    #intro, #form-view { display: none !important; }
+    #mobile-gate { display: block; }
+  }
+  #mobile-gate .wrap { padding: 0 22px; }
+  #mobile-gate .mg-card { max-width: 460px; margin: 0 auto; padding: 80px 0 96px; text-align: center; }
+  #mobile-gate .mg-icon { font-size: 46px; line-height: 1; margin-bottom: 18px; }
+  #mobile-gate h1 { font-size: 28px; font-weight: 600; letter-spacing: -0.01em; margin: 0 0 14px; }
+  #mobile-gate p { color: var(--ink-dim); font-size: 16px; line-height: 1.55; margin: 0 0 24px; }
+  #mobile-gate p b { color: var(--ink); }
+  #mobile-gate .mg-link { color: var(--accent); font-size: 15px; text-decoration: none; }
+  #mobile-gate .mg-link:hover { text-decoration: underline; }
+
   /* ── intro / presentation (site-themed hero) ── */
   #intro .req-list { list-style:none; padding:0; margin:26px 0 0; display:grid; gap:11px; max-width:660px; }
   #intro .req-list li { padding-left:28px; position:relative; line-height:1.55; font-size:16px; }