Beef up /my cold-visitor "Start here" panel for promoted-link traffic

The dashboard serves two audiences — the member and prospects who click a
promoted link. Expanded the cold-visitor intro into a proper "New here? Start
here" panel at the top: what it is + 3 get-started steps + CTAs (join under this
member / watch training / strategy), and reframes the member detail below as
live proof. Member's own view still hides it.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

public/my.html

@@ -4,7 +4,14 @@
 <main class="wrap" style="padding:26px 0 60px">
 <section id="idPrompt" class="login-panel" style="margin:8vh auto"><h1>Your position, live from the blockchain.</h1><p>Enter your RM Circle member ID to see your payments, your team, and your lineage — everything verified on Polygon.</p><form id="idForm"><div class="field"><label for="memberId">Your member ID</label><input id="memberId" class="input" inputmode="numeric" placeholder="e.g. 46" required></div><button class="btn btn-primary" style="width:100%">Show My Dashboard</button><div id="idError" class="micro" style="color:var(--danger)"></div></form></section>
 <section id="dash" class="hidden">
-<div id="coldIntro" class="hidden cold-intro"><button id="coldIntroClose" class="cold-intro-x" title="Dismiss">×</button><div class="eyebrow">New here? What you're looking at</div><p style="margin:8px 0 12px;line-height:1.6">This is a live member dashboard for the <strong>RM Circle Premium team build</strong> — a team-first strategy on the Polygon blockchain where every payment happens on a public smart contract that nobody can fake or edit. The plan is simple: <strong>get your 2, then help your 2 get their 2.</strong> Every number on this page is this member's real position, read straight from the blockchain.</p><div style="display:flex;gap:10px;flex-wrap:wrap"><a id="coldIntroJoin" class="btn btn-primary btn-sm" href="/join">Read your invitation from this member →</a><a class="btn btn-secondary btn-sm" href="/">How the strategy works</a></div><p class="micro" style="margin:10px 0 0">Independent team training resource • Participation involves risk • No income is guaranteed</p></div>
+<div id="coldIntro" class="hidden cold-intro"><button id="coldIntroClose" class="cold-intro-x" title="Dismiss">×</button><div class="eyebrow">New to The RM Circle? Start here</div><h2 style="margin:7px 0 8px;font-size:clamp(21px,3.5vw,26px)">Here's what this is — and how to join.</h2><p style="margin:0 0 15px;line-height:1.6;color:var(--muted)">The <strong style="color:var(--text)">RM Circle Premium team build</strong> is a team-first strategy on the Polygon blockchain. Every payment happens on a public smart contract that no one can fake, pause, or edit — and the plan is simple: <strong style="color:var(--text)">get your 2, then help your 2 get their 2.</strong></p>
+<div class="gs-steps">
+  <div class="gs-step"><span class="gs-n">1</span><div><strong>See how it works</strong><span>Watch the 60-second overview and how the pay-flow works — plain English, no jargon.</span></div></div>
+  <div class="gs-step"><span class="gs-n">2</span><div><strong>Get set up</strong><span>A Polygon wallet plus POL to enter. The training videos walk you through every step.</span></div></div>
+  <div class="gs-step"><span class="gs-n">3</span><div><strong>Join the team</strong><span>Enter through your invite — you'll be placed on the team and start building your own 2.</span></div></div>
+</div>
+<div style="display:flex;gap:10px;flex-wrap:wrap;margin-top:16px"><a id="coldIntroJoin" class="btn btn-primary btn-sm" href="/join">See how to join →</a><a class="btn btn-secondary btn-sm" href="/training">Watch the training</a><a class="btn btn-secondary btn-sm" href="/">How the strategy works</a></div>
+<p class="micro" style="margin:13px 0 0">Everything below is <strong>this member's real, live position</strong>, read straight from the blockchain — proof it pays exactly as described. Participation involves risk • No income is guaranteed.</p></div>
 <div style="display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:6px"><div><div class="eyebrow">Member position</div><h1 style="margin:6px 0 0">Position <span class="gold" id="dTitle">#—</span> <span id="dVerified" class="live-badge" style="vertical-align:middle;margin-left:8px"><span class="dot"></span> Verified on-chain</span> <span id="dQualified"></span></h1></div><button id="switchId" class="btn btn-secondary btn-sm">Look up another ID</button></div>
 <div id="dFacts" class="facts" style="grid-template-columns:repeat(3,1fr);margin:18px 0"></div>
 <div id="dNextStep"></div>

public/my.js

@@ -65,7 +65,7 @@
       const seenBefore=d._priorId===String(d.id); // they've viewed this position before (likely their own)
       const dismissed=sessionStorage.getItem('ctb.introDismissed')==='1';
       if(intro){
-        if(!seenBefore&&!dismissed){intro.classList.remove('hidden');document.getElementById('coldIntroJoin').href='/join/'+d.id;}
+        if(!seenBefore&&!dismissed){intro.classList.remove('hidden');const cij=document.getElementById('coldIntroJoin');cij.href='/join/'+d.id;cij.textContent='See how to join under #'+d.id+' →';}
         else intro.classList.add('hidden');
       }
     }catch(e){}

public/styles.css

@@ -161,6 +161,12 @@ a.brand{text-decoration:none;color:inherit}
 .cold-intro{position:relative;background:linear-gradient(145deg,rgba(78,214,203,.08),rgba(243,190,67,.06));border:1px solid rgba(78,214,203,.3);border-radius:16px;padding:18px 40px 16px 20px;margin-bottom:20px}
 .cold-intro-x{position:absolute;top:10px;right:12px;appearance:none;background:none;border:0;color:var(--muted);font-size:20px;cursor:pointer;line-height:1}
 .cold-intro-x:hover{color:var(--text)}
+.gs-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
+.gs-step{display:flex;gap:11px;align-items:flex-start;background:rgba(7,20,33,.5);border:1px solid rgba(78,214,203,.18);border-radius:12px;padding:13px 14px}
+.gs-n{flex:0 0 auto;width:26px;height:26px;border-radius:8px;background:#173a52;border:1px solid #2a627b;color:var(--teal);font-weight:900;display:grid;place-items:center;font-size:14px}
+.gs-step strong{display:block;font-size:15px;margin-bottom:3px}
+.gs-step span{color:var(--muted);font-size:13px;line-height:1.45}
+@media(max-width:640px){.gs-steps{grid-template-columns:1fr}}
 
 /* Eight-generation matrix illustration — compact icons so 256 stays tidy */
 .matrix{overflow-x:auto;padding-bottom:10px}