From 0839e58dd1de98145e215147c2d93d1b3a3e57c5 Mon Sep 17 00:00:00 2001
From: martbost <martybostick@gmail.com>
Date: Sat, 22 Aug 2026 08:45:11 -0500
Subject: [PATCH] Angle links render a pure squeeze step: headline + hook video
 + one proceed button; click-through loads the full invite page

---
 public/join.js | 61 +++++++++++++++++++++-----------------------------
 1 file changed, 26 insertions(+), 35 deletions(-)

diff --git a/public/join.js b/public/join.js
index 70635e6..eb0ef12 100644
--- a/public/join.js
+++ b/public/join.js
@@ -102,48 +102,39 @@
   load();
 })();
 
-// Angle-matched landing: ?v=<hook> serves BOTH arrivals — link-clickers get the
-// hook video right on the page under the matched headline; people who already
-// watched it skip ahead. When the hook video ends, the page auto-advances to
-// the overview + join steps. Nobody ever leaves the site.
+// Angle-matched landing: ?v=<hook> renders a NON-DISTRACTING squeeze step —
+// matched headline, the hook video, one proceed button. Nothing else. Clicking
+// through loads the full invite page (same path, no query); attribution
+// (angle:<hook>) is already stamped in sessionStorage by track.js.
 (function(){
   var ANGLES={
-    pocket:{h:'You already <span class="gold">found the money</span>.',w:'You saw where it goes. Here’s how the flip actually works.',
+    pocket:{h:'You already <span class="gold">found the money</span>.',
       v:'/v/rmc-pocket-change-b403fb2f75.mp4',p:'/v/rmc-pocket-change-poster.jpg'},
-    phone:{h:'Time your phone started <span class="gold">paying YOU</span>.',w:'You saw who’s profiting. Here’s how the phone starts paying you back.',
+    phone:{h:'Time your phone started <span class="gold">paying YOU</span>.',
       v:'/v/rmc-phone-32ac648844.mp4',p:'/v/rmc-phone-poster.jpg'},
-    two:{h:'You know two people.<br><span class="gold">That’s all this takes.</span>',w:'You’ve got your two in mind. Here’s exactly what this is.',
+    two:{h:'You know two people.<br><span class="gold">That’s all this takes.</span>',
       v:'/v/rmc-two-people-4102f2d719.mp4',p:'/v/rmc-two-people-poster.jpg'},
-    graveyard:{h:'This one runs on <span class="gold">teamwork</span> — not your transmission.',w:'You’ve buried enough hustles. Here’s why this one’s built different.',
+    graveyard:{h:'This one runs on <span class="gold">teamwork</span> — not your transmission.',
       v:'/v/rmc-graveyard-290fabee9d.mp4',p:'/v/rmc-graveyard-poster.jpg'}
   };
   var a=ANGLES[new URLSearchParams(location.search).get('v')];
   if(!a)return;
-  var head=document.getElementById('angleHead');
-  if(head){
-    var inv=document.getElementById('invId');var idTxt=inv?inv.outerHTML:'';
-    head.innerHTML=a.h;
-    var sub=document.getElementById('invSub');
-    if(sub)sub.innerHTML='Personally invited by <span class="gold">Member '+idTxt+'</span> — this page is their real position, read live from the blockchain.';
-  }
-  // the overview section becomes step two, with a bridge headline
-  var wh=document.getElementById('angleWatchHead'); if(wh)wh.textContent=a.w;
-  var overviewSection=null, ov=document.getElementById('angleVideo');
-  if(ov)overviewSection=ov.closest('section');
-  // insert the hook video as its own section ABOVE the overview
-  if(overviewSection&&overviewSection.parentNode){
-    var s=document.createElement('section');
-    s.className='section'; s.style.paddingBottom='0'; s.id='hookVideo';
-    s.innerHTML='<div class="wrap"><div class="section-head"><div class="eyebrow">Ninety seconds</div>'+
-      '<h2>Watch this first.</h2>'+
-      '<p>Already seen it? <a href="#afterHook" id="hookSkip" style="color:var(--teal)">Skip to how it works ↓</a></p></div>'+
-      '<div class="video-card" style="max-width:880px;margin:0 auto">'+
-      '<video id="hookPlayer" class="video-frame" style="display:block;width:100%;height:auto;aspect-ratio:16/9" controls preload="metadata" poster="'+a.p+'" src="'+a.v+'"></video></div></div>';
-    overviewSection.parentNode.insertBefore(s,overviewSection);
-    overviewSection.id='afterHook';
-    var hp=document.getElementById('hookPlayer');
-    if(hp)hp.addEventListener('ended',function(){
-      overviewSection.scrollIntoView({behavior:'smooth',block:'start'});
-    });
-  }
+  var main=document.querySelector('main');
+  if(!main)return;
+  // clear the stage: hide everything, including the nav's competing buttons
+  Array.prototype.forEach.call(main.children,function(el){el.style.display='none';});
+  var nav=document.querySelector('.nav-actions'); if(nav)nav.style.display='none';
+  var s=document.createElement('section');
+  s.className='hero wrap';
+  s.innerHTML='<h1 style="margin-top:10px">'+a.h+'</h1>'+
+    '<div class="video-card" style="max-width:860px;margin:22px auto 0">'+
+    '<video id="hookPlayer" class="video-frame" style="display:block;width:100%;height:auto;aspect-ratio:16/9" controls preload="metadata" poster="'+a.p+'" src="'+a.v+'"></video></div>'+
+    '<div class="hero-actions" style="margin-top:26px"><a id="hookCta" class="btn btn-primary" style="font-size:19px;padding:16px 34px;font-weight:800" href="'+location.pathname+'">Show me how it works →</a></div>'+
+    '<div class="micro" style="margin-top:14px">Independent team training resource • Participation involves risk • No income is guaranteed</div>';
+  main.appendChild(s);
+  var hp=document.getElementById('hookPlayer'),cta=document.getElementById('hookCta');
+  if(hp&&cta)hp.addEventListener('ended',function(){
+    cta.style.boxShadow='0 0 0 4px rgba(243,190,67,.45)';
+    cta.scrollIntoView({behavior:'smooth',block:'center'});
+  });
 })();