/* ============================================================
   KLIPPSTER SITE BASE
   The rules that were byte-identical in index.html, downloads.html and 404.html, and only
   those. site/ has no build step, so each page carried its own copy; identical copies can
   be lifted here without any page rendering differently, which is the whole test applied.

   What deliberately did NOT move, because the pages genuinely disagree and the difference
   looks intended rather than accidental:
     .wrap     index is 1180px / 28px, the other two 1120px / clamp(20px,4vw,40px)
     .btn      404 runs a size smaller (15px / 13px 21px)
     .reveal   index transitions on an IntersectionObserver class, the others animate on load
     footer    a marketing footer and a one-line one are not the same component
   Two supersets stayed with their page for the same reason: index adds backdrop-filter to
   .btn-ghost, downloads and 404 add margin:0 to .eyebrow.

   Load after site-nav.css and before the page's own <style>, so the cascade order every one
   of these rules had is the order it still has.
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

a { color: inherit; text-decoration: none; }

/* ---- the eyebrow: mono caps behind a short magenta rule ---- */
.eyebrow {
  font-family: var(--font-mono); font-size: 12.5px; letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--ink-3);
  display: inline-flex; align-items: center; gap: 10px;
}
.eyebrow::before { content: ""; width: 22px; height: 1px;
                   background: linear-gradient(90deg, var(--fan-mag), transparent); }

/* ---- the two button skins. .btn itself stays per page: 404 runs a size smaller. ---- */
.btn-primary {
  color: #06131a; background: var(--grad-k);
  box-shadow: 0 10px 30px -10px rgba(var(--glow-k), 0.5), inset 0 1px 0 rgba(255,255,255,0.4);
}
.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 42px -12px rgba(var(--glow-k), 0.6), inset 0 1px 0 rgba(255,255,255,0.5);
}
.btn-ghost { color: var(--ink); background: var(--surface-2); border-color: var(--hairline-strong); }
.btn-ghost:hover { transform: translateY(-2px); border-color: rgba(255,255,255,0.3);
                   background: rgba(255,255,255,0.08); }