diff --git a/AGENTS.md b/AGENTS.md
index 83f2f1d..5b11e4f 100644
--- a/AGENTS.md
+++ b/AGENTS.md
@@ -710,6 +710,13 @@ session with **no other memory of this project**. So:
   re-add a stacked toolbar or the footer subtraction. The "New here?" welcome
   banner (logged-out only) still occupies ~69px *in flow* on first visit — it's
   dismissible and the dismissal is persisted (`skatespots_welcome_dismissed`).
+  ⚠️ **The banner MUST be the first child of the map container, ABOVE the
+  toolbar** (fixed 2026-10-01). The toolbar is `absolute top-0` inside the same
+  container, so as a later sibling the banner sat at the container's top and the
+  floating toolbar **painted over it** (owner screenshot: search bar covering the
+  banner). Now the banner is first and the toolbar **drops into flow**
+  (`showWelcomeBanner ? 'relative border-b bg-black/95' : 'absolute …gradient'`)
+  so it can't cover it; `md:static` is unchanged on desktop.
   ⚠️ The floating toolbar sits over Leaflet's default **top-left zoom control**,
   so `MapPage` passes `className="h-full ss-map-floating-toolbar"` and
   `index.css` offsets `.leaflet-top.leaflet-left` by `4.25rem` **only under
diff --git a/src/pages/MapPage.tsx b/src/pages/MapPage.tsx
index bcab143..794c7ca 100644
--- a/src/pages/MapPage.tsx
+++ b/src/pages/MapPage.tsx
@@ -1051,11 +1051,57 @@ export default function MapPage() {
       {/* Full-height map container: subtract header + bottom nav on mobile, header only on desktop */}
       {/* 100dvh handles iOS Safari URL bar shrink correctly */}
       <div className="relative h-[calc(100dvh-var(--header-mobile)-var(--bottom-nav))] md:h-[calc(100vh-4rem)] flex flex-col">
+        {/* Welcome Banner — shown once to logged-out visitors. It lives ABOVE
+            the toolbar (both in flow) because the toolbar floats over the map:
+            as a later sibling the banner would sit at the container's top and
+            the floating toolbar would paint over it. */}
+        {showWelcomeBanner && (
+          <div className="relative z-10 bg-gradient-to-r from-[#ff0040]/90 via-black/95 to-[#ccff00]/20 border-b border-[#ff0040]/40 backdrop-blur">
+            <div className="container px-4 py-2.5 flex items-center gap-3">
+              <span className="text-xl flex-shrink-0">🛹</span>
+              <div className="flex-1 min-w-0">
+                <p className="text-sm font-black text-white uppercase tracking-wide leading-tight">New here?</p>
+                <p className="text-xs text-white/70 leading-tight">Discover skate spots, events &amp; the community.</p>
+              </div>
+              {/* Desktop-only: grab the mobile app via Zapstore */}
+              <a
+                href="https://zapstore.dev/apps/org.skatespots.app"
+                target="_blank"
+                rel="noopener noreferrer"
+                className="hidden md:inline-flex flex-shrink-0 items-center gap-1.5 px-3 py-1.5 rounded-full border-2 border-[#ccff00]/50 text-[#ccff00] text-xs font-black uppercase tracking-wide hover:bg-[#ccff00]/10 active:scale-95 transition-all"
+              >
+                <Smartphone className="h-3.5 w-3.5" />
+                Get on Zapstore
+              </a>
+              <Link
+                to="/onboarding"
+                className="flex-shrink-0 px-3 py-1.5 rounded-full bg-[#ccff00] text-black text-xs font-black uppercase tracking-wide hover:bg-[#ccff00]/90 active:scale-95 transition-transform"
+              >
+                Get Started
+              </Link>
+              <button
+                onClick={() => setWelcomeDismissed(true)}
+                className="flex-shrink-0 w-7 h-7 flex items-center justify-center rounded-full hover:bg-white/10 text-white/40 hover:text-white transition-colors"
+                aria-label="Dismiss"
+              >
+                <X className="h-3.5 w-3.5" />
+              </button>
+            </div>
+          </div>
+        )}
+
         {/* ── Toolbar ──
             Mobile: floats OVER the map (absolute) so the map fills the whole
             screen; the gradient fades into the map and the transparent wrapper
-            passes touches through to it. Desktop keeps the in-flow bar. */}
-        <div className="pointer-events-none absolute inset-x-0 top-0 z-[1000] bg-gradient-to-b from-black/85 via-black/55 to-transparent pb-5 md:static md:z-auto md:border-b md:border-white/8 md:bg-black/95 md:pb-0 md:backdrop-blur">
+            passes touches through to it. Desktop keeps the in-flow bar. With the
+            welcome banner present it drops into flow so it can't cover it. */}
+        <div className={cn(
+          'pointer-events-none inset-x-0 top-0 z-[1000]',
+          showWelcomeBanner
+            ? 'relative border-b border-white/8 bg-black/95'
+            : 'absolute bg-gradient-to-b from-black/85 via-black/55 to-transparent pb-5',
+          'md:static md:z-auto md:border-b md:border-white/8 md:bg-black/95 md:pb-0 md:backdrop-blur',
+        )}>
           <div className="pointer-events-auto px-3 py-2">
             {/* Single row: search pill + view toggle + filter button */}
             <div className="flex items-center gap-2">
@@ -1581,42 +1627,6 @@ export default function MapPage() {
           </div>
         </div>
 
-        {/* Welcome Banner — shown once to logged-out visitors */}
-        {showWelcomeBanner && (
-          <div className="relative z-10 bg-gradient-to-r from-[#ff0040]/90 via-black/95 to-[#ccff00]/20 border-b border-[#ff0040]/40 backdrop-blur">
-            <div className="container px-4 py-2.5 flex items-center gap-3">
-              <span className="text-xl flex-shrink-0">🛹</span>
-              <div className="flex-1 min-w-0">
-                <p className="text-sm font-black text-white uppercase tracking-wide leading-tight">New here?</p>
-                <p className="text-xs text-white/70 leading-tight">Discover skate spots, events &amp; the community.</p>
-              </div>
-              {/* Desktop-only: grab the mobile app via Zapstore */}
-              <a
-                href="https://zapstore.dev/apps/org.skatespots.app"
-                target="_blank"
-                rel="noopener noreferrer"
-                className="hidden md:inline-flex flex-shrink-0 items-center gap-1.5 px-3 py-1.5 rounded-full border-2 border-[#ccff00]/50 text-[#ccff00] text-xs font-black uppercase tracking-wide hover:bg-[#ccff00]/10 active:scale-95 transition-all"
-              >
-                <Smartphone className="h-3.5 w-3.5" />
-                Get on Zapstore
-              </a>
-              <Link
-                to="/onboarding"
-                className="flex-shrink-0 px-3 py-1.5 rounded-full bg-[#ccff00] text-black text-xs font-black uppercase tracking-wide hover:bg-[#ccff00]/90 active:scale-95 transition-transform"
-              >
-                Get Started
-              </Link>
-              <button
-                onClick={() => setWelcomeDismissed(true)}
-                className="flex-shrink-0 w-7 h-7 flex items-center justify-center rounded-full hover:bg-white/10 text-white/40 hover:text-white transition-colors"
-                aria-label="Dismiss"
-              >
-                <X className="h-3.5 w-3.5" />
-              </button>
-            </div>
-          </div>
-        )}
-
         {/* Main Content */}
         {/* `isolate` creates a stacking context so the map's internal z-indexes
             (Leaflet panes, our overlays up to z-[2000]) stay INSIDE the map. Without