Show all eight generations in the depth-over-width matrix

Extended the "2 → 4 → 8 → 16 → 32" visual to the full doubling
2→4→8→16→32→64→128→256 (510 positions), keeping the 30-position first
milestone in the caption. Matrix is now data-driven (data-n) with
icons capped at 12 + a "+" for deeper generations so 256 stays compact;
compact icon styling + horizontal scroll safety.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

public/bridge.js

@@ -12,8 +12,12 @@
     if(h&&c.bridgeHeadline)h.textContent=c.bridgeHeadline;
     const qs=window.location.search; if(qs){document.querySelectorAll('a[href="/start"]').forEach(a=>a.href='/start'+qs)}
   }catch(e){}
-  for(const id of ['p8','p16']){
+  // fill each generation's crowd from data-n; cap the rendered icons so the
-    const node=document.getElementById(id); if(!node)continue;
+  // deeper generations (up to 256) stay compact — the number label is the truth
-    const count=id==='p8'?8:16; for(let i=0;i<count;i++){const s=document.createElement('span');s.className='person';node.appendChild(s)}
+  const ICON_CAP=12;
-  }
+  document.querySelectorAll('.people[data-n]').forEach(node=>{
+    const n=parseInt(node.dataset.n,10)||0, show=Math.min(n,ICON_CAP);
+    for(let i=0;i<show;i++){const s=document.createElement('span');s.className='person';node.appendChild(s)}
+    if(n>ICON_CAP){const d=document.createElement('span');d.className='person-more';d.textContent='+';node.appendChild(d)}
+  });
 })();

public/index.html

@@ -10,7 +10,7 @@
 <section class="section" style="padding-bottom:0"><div class="wrap"><div class="section-head"><div class="eyebrow">Watch first</div><h2>See how simple this is.</h2><p>A quick walkthrough of the team build in action. Watch this before you dive into the strategy below.</p></div><div class="video-card" style="max-width:880px;margin:0 auto"><iframe class="video-frame" style="display:block;width:100%;height:auto;aspect-ratio:16/9" width="880" height="495" src="https://www.youtube-nocookie.com/embed/VOhwBiAO7to" title="RM Circle Premium team build walkthrough video" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe></div></div></section>
 <section id="strategy" class="section"><div class="wrap"><div class="section-head"><div class="eyebrow">The strategy</div><h2>Simple enough to duplicate.</h2><p>Each position gets two directs to qualify, then retires its link and helps the next two positions repeat the process. Late signups on a qualified link are a welcome bonus — they pay that member and spill downward as depth.</p></div><div class="grid-3"><article class="card"><div class="card-icon">2</div><h3>Get exactly two</h3><p>Use your position's link until two direct positions are placed beneath you and your position is qualified.</p></article><article class="card"><div class="card-icon">↘</div><h3>Move the effort down</h3><p>Retire your link and help each of your two directs use their own links until they each have two — that's what qualifies them. If someone still joins through your link anyway, it's a bonus: it pays you and spills down as depth.</p></article><article class="card"><div class="card-icon">↑</div><h3>Upgrade responsibly</h3><p>Use earned POL to advance when practical. Active builders may also choose to self-fund, but only within their own risk tolerance.</p></article></div></div></section>
 <section class="section"><div class="wrap"><div class="section-head"><div class="eyebrow">Moving-link workflow</div><h2>Qualify. Then the effort moves down.</h2></div><div class="flow"><div class="flow-step"><b>Step 1</b><strong>Use link</strong><p>Share the current position's referral link.</p></div><div class="flow-step"><b>Step 2</b><strong>Get 2</strong><p>Place exactly two direct positions.</p></div><div class="flow-step"><b>Step 3</b><strong>Retire link</strong><p>Late signups still spill down — bonus depth, not a problem.</p></div><div class="flow-step"><b>Step 4</b><strong>Help your 2</strong><p>Shift the team effort to their links.</p></div><div class="flow-step"><b>Step 5</b><strong>Repeat</strong><p>Keep the qualification wave moving down.</p></div></div></div></section>
-<section class="section"><div class="wrap"><div class="section-head"><div class="eyebrow">Depth over width</div><h2>2 → 4 → 8 → 16 → 32</h2><p>The first major team milestone is 30 correctly placed positions across the first four generations: 2 + 4 + 8 + 16.</p></div><div class="matrix" aria-label="Matrix growth illustration"><div class="matrix-group"><div class="people"><span class="person"></span><span class="person"></span></div><b>2</b></div><div class="matrix-group"><div class="people"><span class="person"></span><span class="person"></span><span class="person"></span><span class="person"></span></div><b>4</b></div><div class="matrix-group"><div class="people" id="p8"></div><b>8</b></div><div class="matrix-group"><div class="people" id="p16"></div><b>16</b></div></div><div class="notice"><strong>Team principle:</strong> once your two are in place, retire your link and shift to helping them get <em>their</em> two — their own directs are the only thing that qualifies their positions to catch payments. And if an extra signup comes through your link anyway, it's a bonus, not a problem: it still pays your position the entry reward and spills downward to fill an open slot in your leg. Spillover never qualifies the people below, though — so the team effort always moves down.</div></div></section>
+<section class="section"><div class="wrap"><div class="section-head"><div class="eyebrow">Depth over width</div><h2>2 → 4 → 8 → 16 → 32 → 64 → 128 → 256</h2><p>Each generation doubles. A full eight-generation team is <strong>510 positions</strong> (2+4+8+16+32+64+128+256) — but the first milestone that matters is the <strong>30 positions</strong> in your first four generations: 2 + 4 + 8 + 16.</p></div><div class="matrix" aria-label="Matrix growth illustration — eight generations, each double the last"><div class="matrix-group"><div class="people" data-n="2"></div><b>2</b></div><div class="matrix-group"><div class="people" data-n="4"></div><b>4</b></div><div class="matrix-group"><div class="people" data-n="8"></div><b>8</b></div><div class="matrix-group"><div class="people" data-n="16"></div><b>16</b></div><div class="matrix-group"><div class="people" data-n="32"></div><b>32</b></div><div class="matrix-group"><div class="people" data-n="64"></div><b>64</b></div><div class="matrix-group"><div class="people" data-n="128"></div><b>128</b></div><div class="matrix-group"><div class="people" data-n="256"></div><b>256</b></div></div><div class="notice"><strong>Team principle:</strong> once your two are in place, retire your link and shift to helping them get <em>their</em> two — their own directs are the only thing that qualifies their positions to catch payments. And if an extra signup comes through your link anyway, it's a bonus, not a problem: it still pays your position the entry reward and spills downward to fill an open slot in your leg. Spillover never qualifies the people below, though — so the team effort always moves down.</div></div></section>
 <section class="section" id="proof"><div class="wrap"><div class="section-head"><div class="eyebrow">Live payment proof</div><h2>Real payouts, straight from the blockchain.</h2><p>Every payment in this program happens on a public smart contract on Polygon — nobody can fake, hide, or edit it. Below are the latest member payouts, read live from the contract. Tap any row to verify the transaction yourself on Polygonscan.</p></div><div id="payoutTotals" class="pp-totals"></div><div id="payoutFeed" class="pp-feed"><div class="empty">Reading the blockchain…</div></div><div class="pp-note">Data is read directly from the RM Circle smart contract (<a href="https://polygonscan.com/address/0x33BdAEEfd6d17D80aE53816c916dFb26c4fB2DAF" target="_blank" rel="noopener noreferrer" style="color:var(--teal)">0x33Bd…2DAF</a>) on Polygon Mainnet. Member numbers are on-chain IDs, not names. Past payouts are not a promise of future results. <a href="/contract" style="color:var(--gold)">How the contract works — and why the rules can't change →</a></div></div></section>
 <section class="section"><div class="wrap"><div class="card" style="text-align:center;padding:34px"><div class="eyebrow">Ready to start?</div><h2 style="font-size:38px;margin:10px 0">See the current team placement.</h2><p style="max-width:680px;margin:0 auto 20px;color:var(--muted)">The onboarding page automatically shows the sponsor position the team is currently helping. Always use the sponsor shown there instead of an old screenshot or saved link.</p><a class="btn btn-primary" href="/start">Open Getting Started Instructions →</a></div></div></section>
 </main><footer class="wrap disclaimer">This independent team page is educational and is not an earnings guarantee or investment advice. Cryptocurrency and smart-contract participation involve risk, including possible loss of funds. Never use funds you cannot afford to lose. Results depend on actual participation, qualification, upgrades, smart-contract behavior, and the market value of POL.<div class="footer-links"><a href="/training">Training</a><a href="/start">Getting Started</a><a href="/my">Member Dashboard</a><a href="/contract">Contract Security</a><a href="/admin">Team Admin</a><a href="/disclaimer">Disclaimers</a></div></footer>

public/styles.css

@@ -126,3 +126,10 @@ 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)}
+
+/* Eight-generation matrix illustration — compact icons so 256 stays tidy */
+.matrix{overflow-x:auto;padding-bottom:10px}
+.matrix .people{max-width:112px;gap:4px}
+.matrix .person{width:12px;height:16px}
+.matrix .person::before{width:6px;height:6px;left:3px;top:-4px}
+.person-more{color:var(--teal);font-weight:900;align-self:center;font-size:15px;line-height:1;margin-left:2px}