fix(promo-bar): keep the deadline visible on mobile, and count down (#15)

On narrow screens the bar hid `.promo-bar-meta` along with the long sell,
so a phone saw "20% off with ALPHA_20 · See the recorder" and no reason to
act now. The deadline is the urgency; it is the last thing that should go.

- The deadline never hides at any width. Only the long sales line drops
  under 900px.
- It sharpens in the final week: "ends Aug 15" becomes "6 days left",
  "1 day left", then "last day", and turns emerald once inside 7 days.
- Weight bumped and colour moved from muted to secondary so it reads as a
  deadline rather than as metadata.
- Small-screen row can wrap without the close button drifting.

Also corrects a bogus gap entry. The "horizontal overflow at 390px" logged
earlier was a measurement artefact: headless Chrome/Brave on macOS clamps
its window to a ~500px minimum layout width while still writing the PNG at
the requested width, so a 390px screenshot is a 500px layout cropped to
390px. Instrumented the real page instead - clientWidth and scrollWidth
both 500, no element over the viewport. Verifying below 500px needs CDP
device-metrics emulation, not --window-size.

Verified: clean production build; bar renders code + deadline + CTA + close
on one line at 500px with nothing clipped; countdown path confirmed by
temporarily setting `until` three days out ("3 days left", emerald).

Author: alichherawalla

_includes/promo-bar.html

@@ -9,7 +9,7 @@
       <span class="promo-bar-code-value">{{ promo.code }}</span>
       <span class="promo-bar-code-copied" aria-hidden="true">copied</span>
     </button>
-    <span class="promo-bar-meta">{{ promo.meta }}</span>
+    <span class="promo-bar-meta" id="promoBarMeta">{{ promo.meta }}</span>
     <a class="promo-bar-cta" href="{{ promo.url | relative_url }}{{ promo.anchor }}">{{ promo.cta }} →</a>
   </div>
   <button type="button" class="promo-bar-close" id="promoBarClose" aria-label="Dismiss offer">
@@ -23,11 +23,23 @@
     var code = bar.getAttribute('data-promo-code');
     var until = bar.getAttribute('data-promo-until');
     // Expired offers never render, even from a cached page.
-    if (until && new Date(until + 'T23:59:59') < new Date()) return;
+    var ends = until ? new Date(until + 'T23:59:59') : null;
+    var now = new Date();
+    if (ends && ends < now) return;
     if (localStorage.getItem('promo-dismissed:' + code) === '1') return;
     bar.hidden = false;
     document.documentElement.classList.add('has-promo-bar');
 
+    // Urgency: the deadline is the one thing that never gets hidden, on any
+    // screen size. It sharpens into a countdown in the final week.
+    var meta = document.getElementById('promoBarMeta');
+    if (meta && ends) {
+      var daysLeft = Math.floor((ends - now) / 86400000);
+      if (daysLeft <= 0) meta.textContent = 'last day';
+      else if (daysLeft <= 7) meta.textContent = daysLeft === 1 ? '1 day left' : daysLeft + ' days left';
+      if (daysLeft <= 7) meta.classList.add('urgent');
+    }
+
     var copyBtn = document.getElementById('promoBarCode');
     if (copyBtn) {
       copyBtn.addEventListener('click', function() {

assets/css/main.css

@@ -137,10 +137,13 @@ body { font-family: var(--font); color: var(--text-primary); background: var(--b
 .promo-bar-code.copied .promo-bar-code-copied { display: inline; }
 .promo-bar-meta {
   font-size: 0.75rem;
-  color: var(--text-muted);
+  font-weight: 600;
+  color: var(--text-secondary);
   white-space: nowrap;
   flex-shrink: 0;
 }
+/* Final week: the deadline stops being metadata and starts being the point. */
+.promo-bar-meta.urgent { color: var(--accent); }
 .promo-bar-cta {
   font-size: 0.78rem;
   font-weight: 600;
@@ -166,16 +169,21 @@ body { font-family: var(--font); color: var(--text-primary); background: var(--b
 }
 .promo-bar-close:hover { color: var(--text-primary); background: var(--bg-hover); }
 
+/* The long sell drops on narrow screens; the code, the deadline and the CTA
+   never do - a bar without a deadline has no urgency left in it. */
 @media (max-width: 900px) {
-  .promo-bar-text, .promo-bar-meta { display: none; }
+  .promo-bar-text { display: none; }
 }
 @media (max-width: 560px) {
-  .promo-bar { gap: 4px; padding: 6px 8px; }
+  .promo-bar { gap: 4px; padding: 6px 8px; align-items: flex-start; }
   .promo-bar-tag { display: none; }
+  .promo-bar-inner { gap: 3px 8px; }
   .promo-bar-code { padding: 2px 6px; }
   .promo-bar-code-label { font-size: 0.7rem; }
   .promo-bar-code-value { font-size: 0.74rem; }
+  .promo-bar-meta { font-size: 0.7rem; }
   .promo-bar-cta { font-size: 0.74rem; }
+  .promo-bar-close { margin-top: 1px; }
 }
 
 /* Promo code block (in-page, e.g. the alpha join section) */

docs/GAPS_BACKLOG.md

@@ -4,10 +4,12 @@ Open gaps, surfaced honestly. Close with evidence, then mark resolved.
 
 ## Open
 
-- **Pages overflow horizontally at 390px** (found 2026-07-25). At a 390x844 viewport the document is wider than the viewport, so hero copy and button rows are clipped on the right. Reproduced on `/mobile/` and `/pro/` with the promo bar disabled, so it predates the promo bar and is not caused by it. Next step: find the element forcing `scrollWidth > 390` (suspect a fixed-width block in the shared content styles) and cap it, then re-verify the main journey at 390px.
+_None._
 
 ## Resolved
 
+- **A reported horizontal overflow at 390px did not exist - the measurement was wrong** (2026-07-25). Headless Chrome/Brave on macOS clamps its window to a ~500px minimum layout width while still writing a PNG at the requested `--window-size` width, so `--window-size=390,844` laid the page out at 500px and cropped the image to 390px. The crop looked like clipped content. Instrumented the built page in the browser instead: at the narrowest honest render `clientWidth` and `scrollWidth` both report 500 and no element exceeds the viewport. **Verifying responsive layout below 500px needs real device-metrics emulation (Playwright/Puppeteer CDP), not `--window-size`** - a plain screenshot at those widths cannot be trusted.
+
 - **The pricing ladder showed a stale, fabricated fallback and used RevenueCat's rolling 28-day Overview count instead of the cumulative customer total** (2026-07-20). The counter worker now requests the cumulative RevenueCat Charts v3 `customers_new` total from the project's inception date, with pure parsing and URL-contract tests. The website has no numeric fallback: it shows a reduced-motion-safe loading status, reveals scarcity only after a verified response, and reports an unavailable state on failure. Verified against the production RevenueCat API, where the cumulative total is 795, plus worker tests, typecheck, dry-run bundle, production Jekyll build, rendered assertions, and live endpoint/page checks.
 
 - **Visual browser QA was incomplete for the four-platform rollout** (2026-07-17). Rendered and inspected `/`, `/download/`, `/desktop/`, `/desktop/releases/`, `/mobile/`, and `/mobile/releases/` at 1440x1000 and 390x844 after the final production build. Platform labels, release states, download controls, headings, and requirements are readable and unclipped at both widths, with no horizontal overflow in the changed journey.