/* ═══ SFTi — THE TRACTION PILL. One card, both public pages. ═══════════════════════════

   Operator ask (2026-08-20): a small pill showing signup + visit counts, "for expansion and
   funding later", inserted into the gap between the pinned header's gold line and the first
   chapter's content — WITHOUT moving anything else on the page.

   ★ WHY ABSOLUTE, NOT FLOW. `main` already reserves `calc(var(--header-clearance) + 1.5rem)` of
   top padding so its content clears the FIXED header (app/shared/css/header.css) — that reserve
   IS the gap the operator is pointing at. Adding this pill in normal flow would need to grow that
   reserve (pushing the first chapter down) or steal from it (pushing the chapter up). Either way,
   something moves. Positioned `absolute` against `main` (which already declares
   `position: relative` in both index/ and shop/'s own layout.css), the pill paints INSIDE the
   existing reserve instead of adding to it — main's padding, `--header-clearance`, and every
   chapter's position are all untouched.

   ★ WHY `--header-clearance`, NOT A NEW MEASUREMENT. It is already the exact, live-measured
   distance from the viewport top to the header's real bottom edge (app/shared/js/header-
   clearance.js, ResizeObserver-driven) — reusing it means the pill tracks the header's true
   height (including the safe-area inset on a notched phone) with no second source of truth to
   drift out of sync.

   ★ IT SCROLLS OFF, IT DOES NOT DOCK. Unlike the header (fixed) or the chapter head (sticky at
   the same `--header-clearance` offset), this pill is a normal (non-fixed, non-sticky) descendant
   of `main` — so as the page scrolls, it moves up and off-screen with the rest of the top-of-page
   content, well before the chapter head arrives to dock in the same band. The two never occupy
   the viewport at once. */

.traction-pill {
  position: absolute;
  top: calc(var(--header-clearance) + 0.5rem);
  left: 50%;
  transform: translateX(-50%);
  z-index: 5;                 /* above main's own canvas + the aperture's bleed, below the chapter head (12) */

  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.4rem 0.95rem;
  border-radius: 999px;

  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  box-shadow: 0 0 14px rgba(212, 175, 55, 0.18);
  backdrop-filter: none;      /* #218 — no filter on anything that can end up in a fixed/sticky ancestor's paint path */

  font-family: 'Rajdhani', sans-serif;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--text-secondary);
  white-space: nowrap;
  pointer-events: none;       /* decoration, not a control — nothing to tap */
}

.traction-pill-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent-gold);
  box-shadow: 0 0 6px var(--accent-gold);
  flex-shrink: 0;
}

#traction-pill-text {
  color: var(--text-primary);
}

@media (min-width: 769px) {
  .traction-pill { font-size: 0.74rem; padding: 0.45rem 1.1rem; }
}