/* CardCue Pro — shared site chrome (2026-08-18).
   ONE canonical header for every page. Before this, the site had three
   different navs: index (#nav + .nav-brandline, 52-72px lockup, tagline,
   hamburger), eleven subpages (<nav> + .nav-inner, 40-56px lockup, no
   tagline, no hamburger), and pricing (.nav + .nav-in, 36px lockup). A
   visitor clicking a footer link watched the header change size and lose
   its tagline.

   Linked AFTER each page's inline <style>, so these rules win on the
   shared class names without editing the pages' own CSS. Tokens are
   declared with fallbacks so this file stands alone on any page. */

:root{
  --cc-accent:#0a5cd6; --cc-accent-dark:#084cb0;
  --cc-ink:#1a1a1a; --cc-ink2:#5b5b66; --cc-pill:980px;
}

/* ---- bar ---- */
nav#nav{position:fixed;top:0;left:0;right:0;z-index:200;
  background:rgba(251,251,253,.8);
  backdrop-filter:saturate(180%) blur(20px);
  -webkit-backdrop-filter:saturate(180%) blur(20px);
  border-bottom:1px solid rgba(0,0,0,.06)}
nav#nav .nav-inner{max-width:1080px;margin:0 auto;padding:10px 24px;display:flex;
  align-items:center;justify-content:space-between;gap:16px;min-height:44px}

/* ---- brand + descriptor ---- */
nav#nav .nav-brandline{display:flex;align-items:center;gap:11px;min-width:0}
nav#nav .nav-logo{display:inline-flex;align-items:center;text-decoration:none;
  color:var(--ink,var(--cc-ink))}
nav#nav .nav-logo img{height:clamp(52px,7vw,72px);width:auto;display:block}
nav#nav .nav-tag{font-size:12px;font-weight:500;letter-spacing:.1px;
  color:var(--ink2,var(--cc-ink2));white-space:nowrap;padding-left:11px;
  border-left:1px solid rgba(0,0,0,.14)}
nav#nav .nav-tag .tag-short{display:none}

/* ---- links ---- */
nav#nav .nav-links{display:flex;gap:26px;align-items:center}
nav#nav .nav-links a{font-size:12.5px;font-weight:400;text-decoration:none;
  color:var(--ink2,var(--cc-ink2));transition:color .15s ease}
nav#nav .nav-links a:hover{color:var(--ink,var(--cc-ink));opacity:1}
nav#nav .nav-cta{background:var(--accent,var(--cc-accent));color:#fff!important;
  padding:7px 18px;border-radius:var(--pill,var(--cc-pill));font-weight:500;
  font-size:13px;transition:background .2s;white-space:nowrap}
nav#nav .nav-cta:hover{background:var(--accent-dark,var(--cc-accent-dark));opacity:1}

/* ---- hamburger ---- */
nav#nav .nav-toggle{display:none;background:transparent;border:0;padding:10px;
  margin:-10px;width:44px;height:44px;cursor:pointer;align-items:center;
  justify-content:center;flex-shrink:0}
nav#nav .nav-toggle .bar{display:block;width:22px;height:2px;
  background:var(--ink,var(--cc-ink));border-radius:2px;position:relative;
  transition:transform .25s ease,opacity .2s ease}
nav#nav .nav-toggle .bar + .bar{margin-top:5px}
nav#nav.nav-open .nav-toggle .bar:nth-child(1){transform:translateY(7px) rotate(45deg)}
nav#nav.nav-open .nav-toggle .bar:nth-child(2){opacity:0}
nav#nav.nav-open .nav-toggle .bar:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* Page content clears the fixed bar. Subpages previously sized this for a
   56px lockup; the canonical one is taller. */
body.cc-chrome{padding-top:92px}

@keyframes ccNavSlide{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}

/* ---- mobile: 720px switchover, same as the homepage ---- */
@media(max-width:720px){
  nav#nav .nav-inner{padding:10px 18px}
  nav#nav .nav-toggle{display:inline-flex}
  nav#nav .nav-links{position:absolute;top:100%;left:0;right:0;flex-direction:column;
    align-items:stretch;gap:0;padding:8px 18px 18px;
    background:rgba(250,251,252,.95);
    backdrop-filter:blur(24px) saturate(1.8);
    -webkit-backdrop-filter:blur(24px) saturate(1.8);
    border-bottom:1px solid rgba(0,0,0,.06);
    box-shadow:0 10px 30px rgba(0,0,0,.06);display:none}
  nav#nav.nav-open .nav-links{display:flex;animation:ccNavSlide .22s ease}
  nav#nav .nav-links a{padding:14px 6px;font-size:16px;font-weight:600;
    color:var(--ink,var(--cc-ink));border-bottom:1px solid rgba(0,0,0,.06)}
  nav#nav .nav-links a:last-child{border-bottom:0}
  nav#nav .nav-cta{margin-top:12px;text-align:center;padding:14px 20px;font-size:15px}
  body.cc-chrome{padding-top:76px}
}
/* Descriptor degrades rather than disappearing. Thresholds measured on the
   homepage: full string 118px at 11px type, short form 82px. */
@media(max-width:360px){
  nav#nav .nav-tag{font-size:11px;padding-left:9px}
  nav#nav .nav-tag .tag-long{display:none}
  nav#nav .nav-tag .tag-short{display:inline}
}
@media(max-width:320px){ nav#nav .nav-tag{display:none} }