Tools: section jump-menu (9 anchor buttons under the page intro)

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

public/tools.html

@@ -7,7 +7,19 @@
 <section class="section"><div class="wrap" style="max-width:960px">
 <div class="section-head" style="max-width:820px"><div class="eyebrow">For the team</div><h1 style="font-size:clamp(30px,5vw,46px);margin:8px 0 10px">Promo <span class="gold">Tools.</span></h1><p>Everything you need to invite people to the team — share-ready videos, social posts, email swipes, banners, and your personal invite link. Grab what you want, personalize it, and send. Keep it honest: these link to educational content, not income promises.</p></div>
 
-<h2 style="font-size:30px;margin:26px 0 14px">🎬 Video clips</h2>
+<div id="toolsNav" style="display:flex;flex-wrap:wrap;gap:8px;margin:18px 0 8px">
+  <a class="btn btn-secondary btn-sm" href="#videos">🎬 Videos</a>
+  <a class="btn btn-secondary btn-sm" href="#invite-link">🔗 Your link</a>
+  <a class="btn btn-secondary btn-sm" href="#telegram">📱 Telegram</a>
+  <a class="btn btn-secondary btn-sm" href="#text-a-friend">📲 Text a friend</a>
+  <a class="btn btn-secondary btn-sm" href="#social-posts">📣 Social posts</a>
+  <a class="btn btn-secondary btn-sm" href="#email-swipes">✉️ Email swipes</a>
+  <a class="btn btn-secondary btn-sm" href="#banners">🖼️ Banners</a>
+  <a class="btn btn-secondary btn-sm" href="#official-media">🏢 Official media</a>
+  <a class="btn btn-secondary btn-sm" href="#objections">💬 Objections</a>
+</div>
+
+<h2 id="videos" style="font-size:30px;margin:26px 0 14px;scroll-margin-top:16px">🎬 Video clips</h2>
 <p style="color:var(--muted);margin:0 0 18px">Send these on WhatsApp, Telegram, text, or social. Tap <strong style="color:var(--text)">Copy link</strong> to share, or right-click the video to save it.</p>
 
 <div class="tool-card"><div class="tool-head"><div><div class="eyebrow" style="color:var(--gold)">Flagship promo · 60s · UPDATED</div><h3>The RM Circle — team build overview</h3><p>The new experience in 60 seconds: one-tap join, card funding, and a real live member dashboard — plus the Get 2 · Help 2 · Teach 2 play. Best all-round invite clip.</p></div><button class="btn btn-teal btn-sm copy-btn" data-copy="https://rmcircle.team/v/rmc-combined-16284edbab.mp4">Copy link</button></div><video class="video-frame" style="display:block;width:100%;height:auto;aspect-ratio:16/9;border-radius:14px;margin-top:12px" controls preload="none" poster="/v/rmc-combined-poster.jpg" src="/v/rmc-combined-16284edbab.mp4"></video></div>
@@ -36,12 +48,12 @@ https://rmcircle.team?v=pocket</pre></div>
 
 <div class="tool-card"><div class="tool-head"><div><div class="eyebrow" style="color:var(--teal)">Teaching · 2 min</div><h3>Messages — reach your team without email</h3><p>The wallet-verified messaging system: how to sign in, send, and how your downline gets notified. Great for onboarding new members.</p></div><button class="btn btn-teal btn-sm copy-btn" data-copy="https://rmcircle.team/v/rmc-clip-messages.mp4">Copy link</button></div><video class="video-frame" style="display:block;width:100%;height:auto;aspect-ratio:16/9;border-radius:14px;margin-top:12px" controls preload="none" poster="/v/rmc-clip-messages-poster.jpg" src="/v/rmc-clip-messages.mp4"></video></div>
 
-<h2 style="font-size:30px;margin:36px 0 14px">🔗 Your invite link</h2>
+<h2 id="invite-link" style="font-size:30px;margin:36px 0 14px;scroll-margin-top:16px">🔗 Your invite link</h2>
 <p style="color:var(--muted);margin:0 0 14px">Enter your RM Circle ID to build your personal invite page link — it shows a live preview when shared and points people to the current join steps.</p>
 <div class="tool-card"><div style="display:flex;gap:10px;flex-wrap:wrap;align-items:center"><input id="toolId" class="input" style="max-width:220px" placeholder="Your ID (e.g. 21)" inputmode="numeric"><span style="color:var(--muted);font-size:15px">→</span><code id="shareLink" class="share-link">https://rmcircle.team/join/…</code><button class="btn btn-teal btn-sm" id="copyShare">Copy link</button></div><p class="micro" style="margin:10px 0 0">Tip: always confirm the current sponsor on the <a href="/start" style="color:var(--teal)">Getting Started page</a> before someone buys — placements rotate.</p>
 <div id="personalNote" class="callout" style="display:none;margin-top:12px;border-color:rgba(123,224,161,.5)">✅ <strong>#—</strong> — every post and swipe below has been personalized with <em>your</em> invite link (<span class="pnl" style="color:var(--teal)"></span>). Copy and share as-is; people who click land in your team. Wrong ID? Change it in the box above.</div></div>
 
-<h2 id="telegram" style="font-size:30px;margin:36px 0 14px">📱 Promote on Telegram — the Mini App</h2>
+<h2 id="telegram" style="font-size:30px;margin:36px 0 14px;scroll-margin-top:16px">📱 Promote on Telegram — the Mini App</h2>
 <p style="color:var(--muted);margin:0 0 18px">Our team has a <strong style="color:var(--text)">Telegram Mini App</strong>: tap a special t.me link and the whole tour — your invite page, the videos, the join flow — opens <em>instantly inside Telegram</em>. No browser, no typing a website. It's the best link to use anywhere on Telegram: groups, channels, DMs, forwards. Enter your ID above and everything below is personalized with <strong style="color:var(--text)">your</strong> links.</p>
 
 <div class="tool-card"><div class="tool-head"><div><div class="eyebrow">Step 0 · one-time setup · 2 min</div><h3 style="font-size:20px">Get connected first (then forward this to your two)</h3></div><button class="btn btn-teal btn-sm copy-btn" data-copy="📱 NEW: our team's Mini App — your dashboard right inside Telegram
@@ -120,7 +132,7 @@ https://t.me/RMCircleBot/join?startapp=YOURID
 
 Nothing to install, no sign-up. If it's not for you, zero worries — I just wanted you to actually see it instead of me explaining badly. 🙂</pre></div>
 
-<h2 id="text-a-friend" style="font-size:30px;margin:36px 0 14px">📲 Text a friend — SMS, WhatsApp &amp; any messenger</h2>
+<h2 id="text-a-friend" style="font-size:30px;margin:36px 0 14px;scroll-margin-top:16px">📲 Text a friend — SMS, WhatsApp &amp; any messenger</h2>
 <p style="color:var(--muted);margin:0 0 18px">Short, low-pressure messages sized for a text — one per angle video, matched to its landing page. On your phone, <strong style="color:var(--text)">Text it</strong> opens your messaging app with the message ready to send, <strong style="color:var(--text)">WhatsApp</strong> pre-fills it there, and <strong style="color:var(--text)">Telegram</strong> shares your in-Telegram invite. <strong style="color:var(--text)">Copy</strong> works for everything else — Messenger, Instagram DMs, wherever. Enter your ID at the top and every message carries your link.</p>
 
 <div class="tool-card"><div class="tool-head"><div><div class="eyebrow">Text 1 · general · your moving link</div><h3 style="font-size:20px">"Thought of you"</h3></div><button class="btn btn-teal btn-sm copy-btn" data-copy="Hey — I've been building something with a team and there's finally a simple way to show it instead of me explaining badly. 2-minute look, no sign-up: https://rmcircle.team — if it's not your thing, zero worries.">Copy</button></div><pre class="swipe">Hey — I've been building something with a team and there's finally a simple way to show it instead of me explaining badly. 2-minute look, no sign-up: https://rmcircle.team — if it's not your thing, zero worries.</pre><div class="share-row" data-tglead="Take the 2-minute tour — it opens right inside Telegram:" style="display:flex;gap:8px;flex-wrap:wrap;margin-top:10px"><a class="btn btn-teal btn-sm share-sms" href="#">📱 Text it</a><a class="btn btn-secondary btn-sm share-wa" href="#" target="_blank" rel="noopener">🟢 WhatsApp</a><a class="btn btn-secondary btn-sm share-tg" href="#" target="_blank" rel="noopener">✈️ Telegram</a></div></div>
@@ -133,7 +145,7 @@ Nothing to install, no sign-up. If it's not for you, zero worries — I just wan
 
 <div class="tool-card"><div class="tool-head"><div><div class="eyebrow">Text 5 · 🪦 Side Hustle Graveyard angle</div><h3 style="font-size:20px">"We've buried a few"</h3></div><button class="btn btn-teal btn-sm copy-btn" data-copy="How many side hustles have we watched die between us? 🪦 This one's different enough that I actually joined. 90-second look, worst case you get a laugh: https://rmcircle.team/join/YOURID?v=graveyard">Copy</button></div><pre class="swipe">How many side hustles have we watched die between us? 🪦 This one's different enough that I actually joined. 90-second look, worst case you get a laugh: https://rmcircle.team/join/YOURID?v=graveyard</pre><div class="share-row" data-angle="graveyard" data-tglead="Different from every side hustle we've buried — 90-second look, right in Telegram:" style="display:flex;gap:8px;flex-wrap:wrap;margin-top:10px"><a class="btn btn-teal btn-sm share-sms" href="#">📱 Text it</a><a class="btn btn-secondary btn-sm share-wa" href="#" target="_blank" rel="noopener">🟢 WhatsApp</a><a class="btn btn-secondary btn-sm share-tg" href="#" target="_blank" rel="noopener">✈️ Telegram</a></div></div>
 
-<h2 style="font-size:30px;margin:36px 0 14px">📣 Social posts</h2>
+<h2 id="social-posts" style="font-size:30px;margin:36px 0 14px;scroll-margin-top:16px">📣 Social posts</h2>
 <p style="color:var(--muted);margin:0 0 18px">Copy-paste ready for X/Twitter, Facebook, or anywhere. Tap <strong style="color:var(--text)">Copy</strong>, tweak a word or two so it sounds like you, and post. Swap in your personal invite link where it fits.</p>
 
 <div class="tool-card"><div class="tool-head"><div><div class="eyebrow">Post 1 · X / Twitter · the hook</div><h3 style="font-size:20px">"Two ways you get paid"</h3></div><button class="btn btn-teal btn-sm copy-btn" data-copy="Two ways you get paid in our RM Circle team build:
@@ -254,7 +266,7 @@ No income is guaranteed — results depend on team effort, and crypto involves r
 
 <div class="brand-voice-cta"><div class="bv-txt"><h3>✍️ Want these in <span class="gold">your own</span> voice?</h3><p>These are starting points — the best posts sound like <em>you</em>. Branded Voice trains an AI on how you actually write, then generates posts, emails, and more in your voice. Learn how at mybrandedvoice.com.</p></div><a class="btn btn-primary" href="https://mybrandedvoice.com" target="_blank" rel="noopener">Learn more →</a></div>
 
-<h2 style="font-size:30px;margin:36px 0 14px">✉️ Email &amp; message swipes</h2>
+<h2 id="email-swipes" style="font-size:30px;margin:36px 0 14px;scroll-margin-top:16px">✉️ Email &amp; message swipes</h2>
 <p style="color:var(--muted);margin:0 0 18px">Copy, swap <strong style="color:var(--text)">[name]</strong> and <strong style="color:var(--text)">[your link]</strong>, and send. Written to inform, not to promise — keep it that way.</p>
 
 <h3 style="font-size:18px;color:var(--teal);letter-spacing:.5px;margin:6px 0 12px">Short — texts, DMs &amp; one-liners</h3>
@@ -349,7 +361,7 @@ Watch the short training, look at the live payment feed, then ask me anything.
 
 — [you]</pre></div>
 
-<h2 style="font-size:30px;margin:38px 0 14px">🖼️ Banners &amp; graphics</h2>
+<h2 id="banners" style="font-size:30px;margin:38px 0 14px;scroll-margin-top:16px">🖼️ Banners &amp; graphics</h2>
 <p style="color:var(--muted);margin:0 0 8px">A matched set in every standard size. <strong style="color:var(--text)">Download</strong> to attach or upload, or <strong style="color:var(--text)">Copy URL</strong> to hotlink. When you place one, link it to your personal invite link from the builder above.</p>
 <div class="banner-grid">
   <div class="banner-cell"><div class="prev"><img src="/banners/rmc-banner-telegram-1280x720.png" alt="1280x720 Telegram banner" loading="lazy"></div><div class="meta"><span class="sz">1280×720</span><span class="use">Telegram post / group ad — pair with YOUR t.me invite link in the caption (get it from the Telegram section above)</span></div><div class="acts"><a class="btn btn-teal btn-sm" href="/banners/rmc-banner-telegram-1280x720.png" download>Download</a><button class="btn btn-secondary btn-sm copy-btn" data-copy="https://rmcircle.team/banners/rmc-banner-telegram-1280x720.png">Copy URL</button></div></div>
@@ -366,7 +378,7 @@ Watch the short training, look at the live payment feed, then ask me anything.
 
 <div class="tool-card"><div class="tool-head"><div><div class="eyebrow" style="color:var(--gold)">Graphic · NEW</div><h3>The napkin — the whole Method in one image</h3><p>Get your 2, help your 2 get theirs, teach them to do the same — sketched over coffee. Post it with your invite link; it starts more conversations than any banner.</p></div><button class="btn btn-teal btn-sm copy-btn" data-copy="https://rmcircle.team/v/rmc-napkin.jpg">Copy link</button></div><img src="/v/rmc-napkin.jpg" alt="The Circle Method napkin" style="display:block;width:100%;border-radius:14px;margin-top:12px"></div>
 
-<h2 style="font-size:30px;margin:38px 0 6px">🏢 Official RM Circle media</h2>
+<h2 id="official-media" style="font-size:30px;margin:38px 0 6px;scroll-margin-top:16px">🏢 Official RM Circle media</h2>
 <p style="color:var(--muted);margin:0 0 14px">Provided by the RM Circle creators — ready-made social videos and graphics. Copy a link (or right-click to save), post it, and put <strong style="color:var(--text)">your invite link</strong> in the caption or description so clicks land in your team.</p>
 <style>
   .off-acc { background:#0b1e30; border:1px solid #27445e; border-radius:18px; margin:0 0 14px; overflow:hidden; }
@@ -414,7 +426,7 @@ Watch the short training, look at the live payment feed, then ask me anything.
       <div class="off-card"><a href="/official/rmc-official-img-15.jpg" target="_blank" rel="noopener"><img src="/official/rmc-official-img-15.jpg" alt="Official RM Circle graphic 15" loading="lazy" style="display:block;width:100%;height:auto;border-radius:12px"></a><button class="btn btn-teal btn-sm copy-btn" style="width:100%;margin-top:8px" data-copy="https://rmcircle.team/official/rmc-official-img-15.jpg">Copy link</button></div>
   </div>
 </details>
-<h2 style="font-size:30px;margin:44px 0 8px">💬 Objection handling <span style="font-size:15px;color:var(--muted);font-weight:700">· for team leaders</span></h2>
+<h2 id="objections" style="font-size:30px;margin:44px 0 8px;scroll-margin-top:16px">💬 Objection handling <span style="font-size:15px;color:var(--muted);font-weight:700">· for team leaders</span></h2>
 <p style="color:var(--muted);margin:0 0 18px">The walls every builder hits — with honest answers that hold up. Tap one open: you get the <strong style="color:var(--teal)">truth</strong> (so you never say something a prospect can poke a hole in) and a <strong style="color:var(--gold)">ready-to-send reply</strong> to copy. Golden rule: lead with a <em>real</em> example, never a promise.</p>
 <div class="obj-wrap">