From dcc8202efb94f1ac63ea54c8515ff44368e13122 Mon Sep 17 00:00:00 2001
From: martbost <martybostick@gmail.com>
Date: Tue, 1 Sep 2026 09:40:07 -0500
Subject: [PATCH] Angle squeeze pages: fit headline, video and CTA above the
 fold

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 public/join.js | 12 ++++++++----
 1 file changed, 8 insertions(+), 4 deletions(-)

diff --git a/public/join.js b/public/join.js
index 9084de5..38cbdcc 100644
--- a/public/join.js
+++ b/public/join.js
@@ -150,10 +150,14 @@
   document.documentElement.setAttribute('data-squeeze','1');
   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+(new URLSearchParams(location.search).get('direct')==='1'?'?direct=1':'')+'">Show me how it works →</a></div>'+
+  // Headline, video and button must all sit above the fold: the video is
+  // sized from the viewport height (nav + headline + button ≈ 360px), and
+  // the card shrinks to fit it rather than holding the full-page 860px width.
+  s.style.padding='16px 0 28px';
+  s.innerHTML='<h1 style="font-size:clamp(30px,4.4vw,54px);letter-spacing:-1.5px;line-height:1.02;margin:0 auto 12px">'+a.h+'</h1>'+
+    '<div class="video-card" style="width:fit-content;max-width:min(860px,100%);margin:0 auto">'+
+    '<video id="hookPlayer" class="video-frame" style="display:block;width:auto;max-width:100%;height:auto;max-height:calc(100vh - 360px);min-height:180px;aspect-ratio:16/9" controls preload="metadata" poster="'+a.p+'" src="'+a.v+'"></video></div>'+
+    '<div class="hero-actions" style="margin-top:16px"><a id="hookCta" class="btn btn-primary" style="font-size:18px;padding:14px 30px;font-weight:800" href="'+location.pathname+(new URLSearchParams(location.search).get('direct')==='1'?'?direct=1':'')+'">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');