/* THE BRAND ANCHOR — backstage-pass.overskill.app (Todd, 2026-08-17).
   Public/sales surfaces and each direction's landing hero anchor LOOSELY to
   this layer: the measured palette, the real lockup, Be Vietnam Pro.
   In-app product screens do NOT load or obey this file. */

@font-face {
  font-family: "Be Vietnam Pro";
  src: url("/fonts/design/be-vietnam-pro-400.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Be Vietnam Pro";
  src: url("/fonts/design/be-vietnam-pro-600.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Be Vietnam Pro";
  src: url("/fonts/design/be-vietnam-pro-800.woff2") format("woff2");
  font-weight: 800; font-style: normal; font-display: swap;
}

:root {
  --bsp-gold: #e0b669;
  --bsp-gold-light: #f0d59a;
  --bsp-gold-mid: #ecc57e;
  --bsp-gold-deep: #b8860b;
  --bsp-gold-hair-25: #e0b66940;
  --bsp-gold-hair-40: #e0b66966;
  --bsp-gold-hair-60: #e0b66999;
  --bsp-black: #030303;
  --bsp-ink: #202123;
  --bsp-raised: #232225;
  --bsp-raised-2: #2b292d;
  --bsp-paper: #F1F2F4;
  --bsp-paper-2: #eeeef0;
  --bsp-live: #e5484d;
  --bsp-muted: #b5b2bc;
  --bsp-muted-2: #9ca3af;
  --bsp-font: "Be Vietnam Pro", ui-sans-serif, system-ui, sans-serif;
  --bsp-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --bsp-dur: 0.5s;
}

/* The real lockup: gold broadcast-waves mark + two-tone wordmark. */
.bsp-lockup { display: inline-flex; align-items: center; gap: 9px; text-decoration: none; }
.bsp-lockup svg { width: 33px; height: 24px; flex: none; display: block; }
.bsp-lockup .word {
  font-family: var(--bsp-font); font-weight: 800; letter-spacing: -0.025em;
  font-size: 24px; line-height: 1; color: var(--bsp-paper-2); white-space: nowrap;
}
.bsp-lockup .word b { color: var(--bsp-gold); font-weight: 800; }
.bsp-lockup--lg svg { width: 44px; height: 32px; }
.bsp-lockup--lg .word { font-size: 32px; }
/* On light canvases the white half goes ink; the gold half is the constant. */
.bsp-lockup--on-light .word { color: var(--bsp-ink); }

/* The anchor CTA: gold pill, near-black text — the site's primary action. */
.bsp-cta {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-family: var(--bsp-font); font-weight: 600; font-size: 1rem;
  background: var(--bsp-gold); color: var(--bsp-black);
  border: 0; border-radius: 999px; padding: 16px 34px; text-decoration: none;
  transition: transform var(--bsp-dur) var(--bsp-ease), background var(--bsp-dur) var(--bsp-ease);
}
.bsp-cta:hover { background: var(--bsp-gold-light); transform: translateY(-1px); }
.bsp-gold { color: var(--bsp-gold); }
.bsp-hairline { border: 0; border-top: 1px solid var(--bsp-gold-hair-25); }