/* One header for every page (Steve, 2026-09-27): logo + crumb, the same menu in the same spot everywhere,
   and a second row (the audience pill bar) only on the eight audience pages.
   Everything is scoped to header.vs-nav so it outranks the older pages' own header, .row,
   .wordmark, .header-cta and centered .site-nav rules without editing those pages' CSS. */

header.vs-nav{position:sticky;top:0;z-index:50;margin:0;padding:0;border:0;border-bottom:1px solid transparent;background:rgba(255,255,255,.82);-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px);transition:border-color .3s;font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","SF Pro Display",Inter,"Segoe UI",system-ui,sans-serif}
header.vs-nav.scrolled{border-bottom-color:rgba(0,0,0,.07)}
header.vs-nav .wrap.row{position:relative;display:flex;align-items:center;justify-content:flex-start;gap:34px;max-width:1180px;height:62px;margin:0 auto;padding:0 32px;box-sizing:border-box}
header.vs-nav .brand{display:flex;align-items:center;gap:10px;font-size:17px;font-weight:600;letter-spacing:-.2px;color:#1d1d1f;text-decoration:none;white-space:nowrap}
header.vs-nav .brand img{display:block;width:28px;height:28px;border-radius:7px}
/* breadcrumb: "Tellie / Creators". The logo block always reserves the width of the longest crumb,
   so the menu starts at the same spot on every page, the homepage included */
header.vs-nav .row>:first-child{flex:none;min-width:196px}   /* "Tellie / After 10 days", the longest, measures 193px */
header.vs-nav .nv-where{display:flex;align-items:center;white-space:nowrap}
header.vs-nav .crumb{margin-left:7px;font-size:17px;font-weight:500;letter-spacing:-.2px;color:#86868b}
header.vs-nav.nv-dark .crumb{color:#8f8c96}
header.vs-nav .row>.site-nav{position:static;transform:none;left:auto;top:auto;display:flex;align-items:center;gap:28px}
header.vs-nav .site-nav a{font-size:14px;font-weight:400;color:#424245;text-decoration:none;white-space:nowrap}
header.vs-nav .site-nav a:hover{color:#1d1d1f}
/* each link reserves its bold width, so lighting the current page never nudges its neighbors */
header.vs-nav .site-nav a[data-t]{display:inline-flex;flex-direction:column;align-items:center}
header.vs-nav .site-nav a[data-t]::after{content:attr(data-t);height:0;overflow:hidden;visibility:hidden;font-weight:650;pointer-events:none;user-select:none}
/* where you are: bold orange, the same on every page */
header.vs-nav .site-nav a[aria-current="page"],header.vs-nav .site-nav a.on{color:#d96400;font-weight:650}
header.vs-nav .site-nav a.nav-buy{color:#6d3f7d;font-weight:600}
header.vs-nav .site-nav a.nav-buy:hover{color:#4f2a5c}
header.vs-nav .nav-right{margin-left:auto;display:flex;align-items:center;gap:16px}
header.vs-nav .nav-right a.nv-cta{display:inline-flex;align-items:center;gap:8px;margin:0;padding:9px 16px;border:0;border-radius:999px;background:#ff7a00;color:#fff;font-size:14px;font-weight:600;line-height:21px;letter-spacing:normal;white-space:nowrap;text-decoration:none;box-shadow:none;transition:background .2s}
header.vs-nav .nav-right a.nv-cta:hover{background:#d96400;color:#fff}
header.vs-nav .nv-cta svg.apple{width:15px;height:15px;margin:0;fill:currentColor;flex:none}
header.vs-nav .nv-cta svg:not(.apple){width:14px;height:14px;flex:none}
header.vs-nav .header-link{display:inline-flex;align-items:center;gap:6px;font-size:14px;color:#424245;text-decoration:none}
header.vs-nav .header-link:hover{color:#1d1d1f}
header.vs-nav .header-link .lbl{display:none}   /* /developers: GitHub and npm as icons (they keep their aria-label and title) */
header.vs-nav .header-link svg{width:16px;height:16px}
header.vs-nav .navToggle{margin-left:10px}
/* /developers: its GitHub and npm icons step aside where the menu needs the room (the hero links to both) */
@media (max-width:1100px){header.vs-nav .header-link{display:none}}
/* laptops: a little tighter so the full menu still fits beside the longest crumb down to 991px */
@media (max-width:1180px){
  header.vs-nav .wrap.row{gap:24px}
  header.vs-nav .row>.site-nav{gap:20px}
}
/* below that the menu folds into the hamburger (mobile-nav.js); the crumb stays and shortens if it must */
@media (max-width:990px){
  header.vs-nav .row>.site-nav{display:none}
  header.vs-nav .navToggle{display:inline-flex}
  header.vs-nav .wrap.row{gap:10px;padding:0 16px}
  header.vs-nav .row>:first-child{flex:0 1 auto;min-width:0}
  header.vs-nav .nv-where{min-width:0;overflow:hidden}
  header.vs-nav .nv-where .brand{flex:none}
  header.vs-nav .crumb{min-width:0;overflow:hidden;text-overflow:ellipsis}
  header.vs-nav .nav-right a.nv-cta{padding:8px 13px;font-size:13.5px}
}
/* phones: no room for the crumb beside Download and the menu button, so it goes (the page's own headline says where you are) */
@media (max-width:560px){header.vs-nav .crumb{display:none}}

/* the one dark page (/rewards) */
header.vs-nav.nv-dark{background:rgba(10,10,12,.78)}
header.vs-nav.nv-dark.scrolled{border-bottom-color:rgba(255,255,255,.08)}
header.vs-nav.nv-dark .brand{color:#f1efe9}
header.vs-nav.nv-dark .site-nav a{color:#c9c6cf}
header.vs-nav.nv-dark .site-nav a:hover{color:#fff}
header.vs-nav.nv-dark .site-nav a[aria-current="page"],header.vs-nav.nv-dark .site-nav a.on{color:#ff9a3d}
header.vs-nav.nv-dark .site-nav a.nav-buy{color:#c8a2d8}

/* second row: only on the eight audience pages (the approved /video pill bar) */
.subnav{display:flex;justify-content:flex-start;margin:18px 0 0;padding:2px 32px;overflow-x:auto;scrollbar-width:none;font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","SF Pro Display",Inter,"Segoe UI",system-ui,sans-serif}
.subnav::-webkit-scrollbar{display:none}
.subnav nav{display:inline-flex;align-items:center;gap:2px;margin:0 auto;padding:4px;border-radius:999px;background:rgba(0,0,0,.045)}
.subnav nav a{display:inline-flex;align-items:center;gap:7px;flex:none;padding:8px 15px;border-radius:999px;font-size:14.5px;font-weight:500;line-height:1.2;color:#424245;text-decoration:none;transition:background .2s,color .2s}
.subnav nav a:hover{background:#fff;color:#d96400;box-shadow:0 1px 3px rgba(0,0,0,.08)}
.subnav nav a[aria-current="page"]{background:#fff;color:#d96400;font-weight:650;box-shadow:0 1px 3px rgba(0,0,0,.10),0 0 0 .5px rgba(0,0,0,.04)}
.subnav .uc-icon{width:16px;height:16px;flex:none}
.subnav + .ih{padding-top:56px}
@media (max-width:860px){.subnav{margin-top:12px;padding:2px 16px}.subnav + .ih{padding-top:36px}}

/* /features: the first section under the hero keeps the italic but not the highlighter band, so the page has one hero */
.serifline.plain{background:none}
/* /features jump bar: centering an overflowing row cuts off its first chips (seen at ~1000px wide);
   start-align the scroller and let the pill track center itself only when it fits. Same fix as .uc-bar. */
.chips-in{justify-content:flex-start;max-width:none}
.chips-in .grp-pills{margin:0 auto}

/* PRO badges are links to /pro now: same badge, a darker plum on hover */
a.pro,a.pro:hover{color:#fff;text-decoration:none}
a.pro:hover{background:#4f2a5c}