Half-sheet handouts on /flyers: 5 vibrant angle designs (pocket, two, phone, graveyard, stop-waiting), 2 per letter page with cut line, personalized QR + angle-matched links; chatbot + AI prompt + tools card synced

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

public/flyers.html

@@ -37,13 +37,57 @@
   .t-blue h2 .k{color:#2947c9}
   .t-navy .fl-hd{background:linear-gradient(135deg,#0b1d2e,#071421)}
   .t-navy h2 .k{color:#c98a12}
+  /* ---- half-sheet handouts (2 per letter page, cut in half) ---- */
+  .hs-page{margin:0 auto 26px;max-width:680px}
+  .hs{position:relative;aspect-ratio:8.5/5.5;border-radius:14px;overflow:hidden;color:#fff;display:flex;flex-direction:column;
+    box-shadow:0 10px 30px rgba(0,0,0,.35);font-family:Inter,system-ui,sans-serif;
+    -webkit-print-color-adjust:exact;print-color-adjust:exact}
+  .hs-top{display:flex;align-items:center;gap:10px;padding:14px 22px 0}
+  .hs-ring{width:34px;height:34px;border:3px solid #f3be43;border-radius:50%;display:flex;align-items:center;justify-content:center;flex:0 0 auto}
+  .hs-ring span{font-family:Georgia,serif;font-weight:700;font-size:13px;color:#f3be43}
+  .hs-brand{font-weight:900;font-size:13px;letter-spacing:1.5px}
+  .hs-eye{margin-left:auto;font-weight:800;font-size:9.5px;letter-spacing:2px;opacity:.85;text-align:right}
+  .hs-main{flex:1;display:flex;gap:16px;padding:8px 22px 10px;align-items:center}
+  .hs-left{flex:1;min-width:0}
+  .hs-left h2{font-size:29px;line-height:1.04;font-weight:900;margin:0 0 8px;letter-spacing:-.5px;text-transform:uppercase}
+  .hs-left h2 .k{-webkit-text-fill-color:currentColor}
+  .hs-left .pitch{font-size:12px;line-height:1.45;margin:0 0 10px;opacity:.92}
+  .hs-chips{display:flex;flex-wrap:wrap;gap:6px}
+  .hs-chip{font-size:9.5px;font-weight:800;letter-spacing:.6px;padding:4px 9px;border-radius:999px;border:1.5px solid rgba(255,255,255,.55);background:rgba(0,0,0,.25)}
+  .hs-chip.gold{border-color:#f3be43;color:#ffd977}
+  .hs-qrbox{flex:0 0 auto;background:#fff;border-radius:12px;padding:10px 12px 8px;text-align:center;color:#10151b;box-shadow:0 4px 14px rgba(0,0,0,.35)}
+  .hs-qrbox .q{width:118px;height:118px;line-height:0;margin:0 auto}
+  .hs-qrbox .q svg{width:100%;height:100%}
+  .hs-qrbox .scan{font-size:9.5px;font-weight:800;letter-spacing:1.5px;margin-top:4px}
+  .hs-link{font-size:11px;font-weight:800;word-break:break-all;margin-top:2px}
+  .hs-foot{display:flex;align-items:center;gap:10px;padding:0 22px 10px}
+  .hs-disc{font-size:8.5px;line-height:1.35;opacity:.75}
+  .hs-print{position:absolute;top:10px;right:10px;z-index:5}
+  .hs-copy{display:none}
+  .hs-cut{display:none}
+  /* vibrant themes (match the banner kit looks) */
+  .h-volt{background:linear-gradient(120deg,#1b0733 0%,#3d0d7a 45%,#6a14b8 100%)}
+  .h-volt h2 .k{color:#ffcf3f}
+  .h-ember{background:linear-gradient(120deg,#160406 0%,#4a0a12 55%,#8a1020 100%)}
+  .h-ember h2 .k{color:#ff9d2e}
+  .h-aqua{background:linear-gradient(120deg,#02201f 0%,#04544d 55%,#0a8f7d 100%)}
+  .h-aqua h2 .k{color:#ffd977}
+  .h-royal{background:linear-gradient(120deg,#060d2b 0%,#12246e 55%,#2140c0 100%)}
+  .h-royal h2 .k{color:#68d6ff}
+  .h-noir{background:linear-gradient(120deg,#05090f 0%,#0b1d2e 60%,#14314d 100%)}
+  .h-noir h2 .k{color:#f3be43}
+  @media (max-width:560px){.hs{aspect-ratio:auto}.hs-main{flex-direction:column;align-items:stretch}.hs-qrbox{align-self:center}}
   @media print{
     @page{size:letter;margin:0}
     body{background:#fff!important}
-    header,footer,nav,.chat-fab,.chat-panel,#rmcTrBtn,#rmcTrPanel,.flw>.section-head,.fl-id,.fl-intro,.fl-print{display:none!important}
+    header,footer,nav,.chat-fab,.chat-panel,#rmcTrBtn,#rmcTrPanel,.flw>.section-head,.fl-id,.fl-intro,.fl-print,.hs-print,.hs-intro{display:none!important}
     .flw{max-width:none;padding:0;margin:0}
     .fl{box-shadow:none;border-radius:0;margin:0;max-width:none;width:100%;height:100vh;aspect-ratio:auto;page-break-after:always}
-    body.print-one .fl:not(.printing){display:none!important}
+    .hs-page{max-width:none;margin:0;height:100vh;page-break-after:always;display:flex;flex-direction:column}
+    .hs-page .hs{border-radius:0;box-shadow:none;flex:1;aspect-ratio:auto;display:flex}
+    .hs-copy{display:flex}
+    .hs-cut{display:flex;justify-content:center;align-items:center;gap:8px;border-top:2.5px dashed #98a2ad;font-size:10px;color:#667;padding:2px 0;background:#fff}
+    body.print-one .fl:not(.printing),body.print-one .hs-page:not(.printing){display:none!important}
   }
 </style></head>
 <body>
@@ -52,6 +96,8 @@
   <div class="section-head" style="max-width:760px"><div class="eyebrow">For the team · belly-to-belly</div><h1 style="font-size:clamp(28px,5vw,42px);margin:8px 0 8px">Printable <span class="gold">Flyers.</span></h1><p class="fl-intro">Old-school still works. Print these, put them up — coffee shops, gyms, community boards, laundromats — and let the QR do the talking. Each flyer carries <strong style="color:var(--text)">your</strong> invite link and QR, plus tear-off tabs people can take with them. Enter your ID and every flyer personalizes to you.</p></div>
   <div class="fl-id"><label style="font-weight:700">Your member ID:</label><input id="flIdInput" inputmode="numeric" placeholder="e.g. 21"><span class="micro" style="color:var(--muted)">Tip: print in color for impact, or black-and-white to save ink — the QR scans either way.</span></div>
   <div id="flyers"></div>
+  <div class="section-head hs-intro" style="max-width:760px;margin-top:34px"><div class="eyebrow" style="color:var(--gold)">NEW · Half-sheet handouts</div><h2 style="font-size:clamp(24px,4vw,34px);margin:8px 0 8px">Bold <span class="gold">Handouts.</span> Two per page.</h2><p class="fl-intro">Full-color designs with the same energy as the team banners — one for every angle. Each prints <strong style="color:var(--text)">two copies on a single letter page</strong> with a cut line down the middle: print, cut, and you've got a stack of handouts to leave anywhere. Your QR and link are on every one.</p></div>
+  <div id="halfsheets"></div>
 </main>
 <script src="/qrlib.js"></script>
 <script src="/flyers.js"></script>