From b7f2b3ef3f15b4940600f659e9d49230ac1caff2 Mon Sep 17 00:00:00 2001
From: martbost <martybostick@gmail.com>
Date: Thu, 10 Sep 2026 08:01:12 -0500
Subject: [PATCH] Join page: How it works and The packages span full width
 below the fold; sign-up card sticks beside the ledger example

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
---
 public/join.html | 40 +++++++++++++++++++++++++++-------------
 1 file changed, 27 insertions(+), 13 deletions(-)

diff --git a/public/join.html b/public/join.html
index 6ad5b8c..4f177b7 100644
--- a/public/join.html
+++ b/public/join.html
@@ -15,7 +15,9 @@
   .jn-hero p.lead{margin:0 0 20px;text-align:left;max-width:640px}
   .jn-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:26px;align-items:start;margin-top:8px}
   @media(max-width:860px){.jn-grid{grid-template-columns:1fr}}
-  .jn-cap{border-color:var(--mint);box-shadow:0 0 60px rgba(67,232,195,.12)}
+  .jn-cap{border-color:var(--mint);box-shadow:0 0 60px rgba(67,232,195,.12);position:sticky;top:18px}
+  @media(max-width:860px){.jn-cap{position:static}}
+  .jn-grid>div:first-child .mockup{margin:0}
   .jn-cap h3{margin:0 0 6px}
   .jn-cap input{width:100%}
   .jn-cap .btn{width:100%;text-align:center}
@@ -24,11 +26,19 @@
   .jn-chips span b{color:var(--mint);font-weight:700}
   .jn-spon{display:flex;align-items:center;gap:10px;margin:0 0 6px}
   .jn-spon img{width:34px;height:34px;border-radius:50%;object-fit:cover;border:1px solid var(--line-strong)}
-  .jn-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:14px}
+  .jn-full{margin-top:44px}
+  .jn-h{display:flex;justify-content:space-between;align-items:baseline;gap:16px;flex-wrap:wrap;margin:0 0 14px}
+  .jn-h h2{font-size:26px;margin:0}
+  .jn-h p{margin:0;font-size:14.5px}
+  .jn-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
+  .jn-steps .card h3{font-size:19px;margin:8px 0 8px;min-height:2.4em}
+  .jn-steps .card p{margin:0}
   @media(max-width:700px){.jn-steps{grid-template-columns:1fr}}
   .jn-steps .card{margin:0}
   .jn-steps .n{font-family:var(--mono);color:var(--mint);font-size:12px;letter-spacing:.1em}
-  .jn-ladder{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin-top:14px}
+  .jn-ladder{display:grid;grid-template-columns:repeat(5,1fr);gap:12px}
+  @media(max-width:900px){.jn-ladder{grid-template-columns:repeat(3,1fr)}}
+  @media(max-width:560px){.jn-ladder{grid-template-columns:repeat(2,1fr)}}
   .jn-pk{border:1px solid var(--line);border-radius:12px;padding:14px;text-align:center;background:var(--panel)}
   .jn-pk .p{font-family:var(--disp);font-size:26px;font-weight:800}
   .jn-pk .c{color:var(--mint);font-weight:700;font-size:13.5px}
@@ -71,16 +81,6 @@
       </div>
       <p class="small muted" style="margin:10px 0 0">One purchase, one transaction, four payments. <a href="/ledger" target="_blank" rel="noopener">Open the real ledger →</a> <span id="jnStats"></span></p>
 
-      <h2 style="font-size:24px;margin:30px 0 4px">How it works</h2>
-      <div class="jn-steps">
-        <div class="card"><div class="n">STEP 1</div><h3>Join free by email</h3><p class="muted small">A 6-digit code, no password. You get an invite link and welcome credits to try real ads.</p></div>
-        <div class="card"><div class="n">STEP 2</div><h3>Advertise or earn</h3><p class="muted small">Seven ad formats. View ads to earn credits, or buy a package from $5 when you want reach.</p></div>
-        <div class="card"><div class="n">STEP 3</div><h3>Get paid in the same transaction</h3><p class="muted small">Anyone who buys through your link pays you 50 percent, on-chain, the moment it happens.</p></div>
-      </div>
-
-      <h2 style="font-size:24px;margin:30px 0 4px">The packages</h2>
-      <p class="muted small" style="margin:0">Priced in dollars, settled in POL at the live rate. One credit is one cent of ad delivery.</p>
-      <div class="jn-ladder" id="jnLadder"></div>
     </div>
 
     <div class="card jn-cap" id="jnCap">
@@ -100,6 +100,20 @@
     </div>
   </div>
 
+  <section class="jn-full">
+    <div class="jn-h"><h2>How it works</h2><p class="muted">Three steps. The first one takes a minute and costs nothing.</p></div>
+    <div class="jn-steps">
+      <div class="card"><div class="n">STEP 1</div><h3>Join free by email</h3><p class="muted small">A 6-digit code, no password. You get an invite link and welcome credits to try real ads.</p></div>
+      <div class="card"><div class="n">STEP 2</div><h3>Advertise or earn</h3><p class="muted small">Seven ad formats. View ads to earn credits, or buy a package from $5 when you want reach.</p></div>
+      <div class="card"><div class="n">STEP 3</div><h3>Get paid in the same transaction</h3><p class="muted small">Anyone who buys through your link pays you 50 percent, on-chain, the moment it happens.</p></div>
+    </div>
+  </section>
+  <section class="jn-full">
+    <div class="jn-h"><h2>The packages</h2><p class="muted">Priced in dollars, settled in POL at the live rate. One credit is one cent of ad delivery.</p></div>
+    <div class="jn-ladder" id="jnLadder"></div>
+    <p class="small muted" style="margin:14px 0 0;text-align:center">Every package pays 50 / 20 / 10 up the line the moment it sells, on a public ledger. <a href="#jnCap">Join free</a> and look around first.</p>
+  </section>
+
   <div class="jn-foot">
     InstantAdPay · <a href="/contract">Contract</a> · <a href="/terms">Terms</a> · <a href="/privacy">Privacy</a> · <a href="/disclaimer">Disclaimer</a>
   </div>