@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap');

/* ============================================================
   SponsorBound shared chrome — linked by index, how-it-works, app.
   Owns: the Poppins face, the button system, and the brand header
   (bar + centered nav + hamburger panel). Page-specific tone stays
   inline on each page and overrides this file, e.g. index's
   transparent header over video, its logo drop-shadow, and its
   quiet-button text-shadow.
   ============================================================ */

:root{
  /* BUTTON SYSTEM - identical tokens on every page.
     LIGHT surface: solid = black fill/white text, hover --btn-solid-h; outline = white fill + hairline, hover --btn-soft.
     DARK surface (black header, video, image bands): solid = white fill/black text, hover STAYS white + --btn-lift.
     Never darken a light button that sits on imagery - a neutral grey reads cream against a warm photo.
     One radius (--btn-r) for every button. Weight 600 solid/outline, 500 quiet. */
  --btn-r:11px;
  --btn-solid:#000000; --btn-solid-h:#1c1c1c;
  --btn-soft:#EDEFF2;
  --btn-lift:0 8px 22px rgba(0,0,0,.32);
}

/* ---------- header + nav ---------- */
header{background:#000;color:#fff;padding:14px 0;position:sticky;top:0;z-index:50;line-height:1}
.hdr-inner{max-width:1200px;margin:0 auto;padding:0 22px;display:flex;align-items:center;justify-content:space-between;gap:16px}
.logo{height:31px;width:auto;display:block}
.actions{display:none;align-items:center;gap:10px}
.hdr-right{display:flex;align-items:center;gap:16px}
.desknav{display:none;align-items:center;gap:22px;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)}
.navlink{color:#fff;font-family:inherit;font-size:14px;font-weight:500;text-decoration:none;white-space:nowrap;opacity:.82;transition:opacity .15s}
.navlink:hover{opacity:1}
.navlink.current{opacity:1;cursor:default}
.login-desk{display:none}

/* ---------- button system ---------- */
.btn{font-family:inherit;font-weight:500;font-size:14px;line-height:1.25;cursor:pointer;text-decoration:none;padding:9px 16px;border-radius:var(--btn-r);border:1px solid transparent;transition:.15s;white-space:nowrap;background:none;color:inherit}
.btn-quiet{color:#fff}
.btn-quiet:hover{background:rgba(255,255,255,.14)}
.btn-line{background:#fff;color:#000;font-weight:600}
.btn-line:hover{background:#fff;box-shadow:var(--btn-lift)}

/* ---------- hamburger + panel: full-width black on mobile, black dropdown on desktop ---------- */
.menuwrap{position:static;display:block}
.hamburger{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;padding:0;background:none;border:none;cursor:pointer;border-radius:var(--btn-r);transition:background .15s}
.hamburger:hover{background:rgba(255,255,255,.14)}
.navmenu{position:absolute;left:0;right:0;top:100%;background:#000;border-top:1px solid rgba(255,255,255,.10);padding:10px 22px 18px;display:none;z-index:60}
.navmenu.open{display:block;animation:navfade .18s ease}
/* mobile: each item is its own row, separated by a hairline (matches the panel's top edge) */
.navitem{display:block;width:100%;text-align:center;background:none;border:none;border-top:1px solid rgba(255,255,255,.10);font-family:inherit;font-size:16px;font-weight:500;color:#fff;text-decoration:none;padding:13px 4px;border-radius:8px;cursor:pointer;white-space:nowrap}
.navitem:hover{background:rgba(255,255,255,.08)}
.navmenu>.navitem:first-child{border-top:none}
/* group boundary between marketing and auth items: a gap, not a competing line */
.navsep{height:1px;background:none;margin:8px 0}
.navauth-in{display:none}
.navtry{color:#000;background:#fff;text-align:center;font-weight:600;margin-top:6px;border-top:none}
.navtry:hover{background:#fff}
.navlogout{color:#ff6b6b}
.navlogout:hover{background:rgba(255,107,107,.12)}
header.is-authed .navauth-out{display:none}
header.is-authed .navauth-in{display:block}
/* logged in: drop the marketing links entirely — desktop inline nav, mobile panel, and their separator */
header.is-authed .desknav,
header.is-authed .panel-mkt,
header.is-authed .navsep{display:none}
/* with the marketing group gone, the first account item is now the top row — no leading hairline */
header.is-authed .navauth-in:first-of-type{border-top:none}
body.menu-open{overflow:hidden}

/* panel: fade only — no transform, so it stays butted to the header with no slide or seam */
@keyframes navfade{from{opacity:0}to{opacity:1}}
/* fade-up used only by app.html's .screen.active entrance */
@keyframes sbfade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.navmenu.open{animation:none}}

@media(min-width:768px){
  .hdr-inner{position:relative}
  .logo{height:38px}
  .desknav{display:flex}
  .login-desk{display:inline-flex}
  header:not(.is-authed) .actions{display:flex}
  .menuwrap{display:none;position:relative}
  header.is-authed .menuwrap{display:block}
  .navmenu{left:auto;right:0;top:calc(100% + 10px);min-width:210px;border:1px solid rgba(255,255,255,.12);border-radius:13px;box-shadow:0 16px 44px rgba(0,0,0,.5);padding:8px}
  .navitem{font-size:14.5px;padding:11px 12px;border-top:0;text-align:left}
  .panel-mkt,.navsep{display:none}
  body.menu-open{overflow:auto}
}