Give the join confirmation its own page instead of a banner below the fold

On a phone the /join grid collapses to one column, so the success
banner rendered below the entire pitch column and the 303 landed the
parent at the top of an apparently unchanged page. The empty form
underneath then read as a failed send.

?sent=1 now returns a dedicated confirmation body: banner first, what
happens next, and no form to resubmit.

app/app.py

@@ -511,8 +511,28 @@ SOURCE_JS = """<script>
 (function(){var s=document.getElementById('source');if(!s)return;s.addEventListener('change',function(){var v=s.value;document.getElementById('source-place').style.display=v==='Other school or daycare'?'block':'none';document.getElementById('source-other').style.display=v==='Other'?'block':'none';});})();
 </script>"""
 
-def join_body(sent=False):
+def thanks_body():
-    success = '<div class="success">Thanks! Your note is on its way. A leader will be in touch soon.</div>' if sent else ''
+    return """
+<section style="padding:72px 0 40px"><div class="wrap" style="max-width:760px">
+<div class="success" style="font-size:1.05rem;padding:20px 24px;margin-bottom:30px">Thanks! Your note is on its way. A leader will be in touch soon.</div>
+<div class="eyebrow dark">Join Pack &amp; Troop 73</div>
+<h1 class="arch" style="margin:0 0 16px;font-weight:800;font-size:clamp(2rem,4.5vw,3rem);line-height:1.05;letter-spacing:-.015em;color:#1E2F52;max-width:16ch">We got it. Here is what happens next.</h1>
+<p style="margin:0 0 30px;color:#5A6272;font-size:1.08rem;max-width:560px">No commitment, and your first visit is always free. There is nothing to do between now and Tuesday.</p>
+<div style="display:flex;flex-direction:column;gap:16px;margin-bottom:30px">
+<div class="rrow"><span class="k arch" style="min-width:32px;font-size:20px">1</span><span class="v" style="font-size:15.5px"><strong>Your form is in.</strong> It went straight to our volunteer leaders' phones.</span></div>
+<div class="rrow"><span class="k arch" style="min-width:32px;font-size:20px">2</span><span class="v" style="font-size:15.5px"><strong>Hear back within a day or two</strong> from a real Pack or Troop 73 parent, with the right den or troop and directions.</span></div>
+<div class="rrow"><span class="k arch" style="min-width:32px;font-size:20px">3</span><span class="v" style="font-size:15.5px"><strong>Visit a Tuesday</strong> at St. Luke's: Pack 6:00, Troop 7:30. Sneakers and a water bottle are all you need.</span></div>
+</div>
+<div class="note">If a couple of days go by with nothing, check your spam folder, then send the form again. We would rather hear twice than miss you.</div>
+<div style="display:flex;gap:12px;flex-wrap:wrap;margin-top:30px">
+<a class="cta" href="/calendar" style="font-size:15px;padding:13px 26px">See the year ahead</a>
+<a class="cta" href="/cubs" style="font-size:15px;padding:13px 26px;background:#1E2F52;color:#fff">What a meeting looks like</a>
+</div>
+<img src="/static/img/circle-game.jpg" alt="Scouts cheering during a pack game" style="width:100%;height:260px;object-fit:cover;border-radius:16px;margin-top:36px">
+</div></section>"""
+
+
+def join_body():
     faq_html = "".join(f'<div class="faq"><div class="q">{q}</div><div class="a">{a}</div></div>' for q, a in FAQ)
     return f"""
 <section style="padding:72px 0 30px"><div class="wrap" style="display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:52px;align-items:start">
@@ -525,7 +545,7 @@ def join_body(sent=False):
 <div class="rrow"><span class="k arch" style="min-width:32px;font-size:20px">3</span><span class="v" style="font-size:15.5px"><strong>Visit a Tuesday</strong> at St. Luke's: Pack 6:00, Troop 7:30. Sneakers recommended.</span></div>
 </div>
 <img src="/static/img/circle-game.jpg" alt="Scouts cheering during a pack game" style="width:100%;height:280px;object-fit:cover;border-radius:16px"></div>
-<div>{success}
+<div>
 <form class="lead" method="post" action="/join">
 <div class="ft">Interest form</div>
 <div class="frow">
@@ -562,7 +582,9 @@ def join_body(sent=False):
 
 @app.get("/join", response_class=HTMLResponse)
 def join_get(sent: int = 0):
-    return page("Join us · Pack & Troop 73", join_body(bool(sent)))
+    if sent:
+        return page("Thanks · Pack & Troop 73", thanks_body())
+    return page("Join us · Pack & Troop 73", join_body())
 
 @app.get("/contact")
 def contact_redirect():