/* The pinned bar on every page but the homepage: the homepage's own bar in its dark dress,
   rule for rule. The homepage keeps its copy inside index.html; change one, change the other.
   The homepage draws its whole page at .8 on anything wider than a phone, so the bar does too. */
.nav { font-family: 'SF Pro Display', -apple-system, BlinkMacSystemFont, sans-serif; position: fixed; top: 0; left: 0; right: 0; margin: 0 auto; z-index: 90; zoom: .8; width: fit-content; max-width: calc(100% - 28px); display: flex; align-items: center; gap: 30px; height: 58px; padding: 0 7px 0 21px; border-radius: 0 0 24px 24px; background: linear-gradient(180deg, rgba(18,18,18,.92), rgba(13,13,13,.78)); color: #d4d4d8; -webkit-backdrop-filter: blur(16px) saturate(1.5); backdrop-filter: blur(16px) saturate(1.5); box-shadow: inset 0 -1px 0 rgba(255,255,255,.07), inset 1px 0 0 rgba(255,255,255,.04), inset -1px 0 0 rgba(255,255,255,.04), 0 10px 26px rgba(0,0,0,.45); transition: height .3s cubic-bezier(.2,.8,.2,1), gap .3s cubic-bezier(.2,.8,.2,1), padding .3s cubic-bezier(.2,.8,.2,1), background .3s, box-shadow .3s; }
.nav.is-stuck { height: 52px; gap: 26px; padding: 0 6px 0 19px; border-radius: 0 0 21px 21px; }
.nav a { text-decoration: none; color: #a1a1aa; }
.nav a:not(.btn-dark):hover { color: #fafafa; }
.nav .logo img { height: 25px; display: block; filter: invert(1); transition: height .3s cubic-bezier(.2,.8,.2,1); }
.nav.is-stuck .logo img { height: 22px; }
.nav .links { display: flex; gap: 28px; }
.nav .links a { position: relative; font-size: 17.5px; letter-spacing: .005em; transition: color .2s; }
.nav .links a::after { content: ''; position: absolute; left: 0; right: 0; bottom: -6px; height: 1.5px; border-radius: 2px; background: currentColor; transform: scaleX(0); transition: transform .26s cubic-bezier(.2,.8,.2,1); }
.nav .links a:hover::after, .nav .links a:focus-visible::after { transform: scaleX(1); }

/* the one bright thing in the bar: the white pill with a dark circled arrow */
.nav .btn-dark { position: relative; isolation: isolate; display: inline-flex; align-items: center; justify-content: center; gap: normal; height: 36px; padding: 0 15px 0 5px; border-radius: 999px; background: #fafafa; color: #0d0d0d; font-family: 'Clash Display', sans-serif; font-weight: 500; font-size: 14.5px; letter-spacing: .002em; white-space: normal; text-decoration: none; box-shadow: 0 10px 28px rgba(0,0,0,.45), inset 0 -1px 0 rgba(0,0,0,.08); transition: transform .22s, box-shadow .28s; }
.nav.is-stuck .btn-dark { height: 33px; padding: 0 14px 0 5px; font-size: 14px; }
.nav .btn-dark::before { content: ''; position: absolute; inset: 0; z-index: -1; border-radius: inherit; opacity: .08; background: radial-gradient(95% 60% at 50% 2%, rgba(255,255,255,.42), rgba(255,255,255,0) 55%), linear-gradient(309deg, rgba(255,255,255,.29) 0%, rgba(255,255,255,.02) 34%, rgba(255,255,255,0) 56%, rgba(180,200,235,.13) 100%), linear-gradient(180deg, rgba(255,255,255,.2) 0%, rgba(244,248,255,.1) 52%, rgba(230,236,248,.14) 100%); }
.nav .btn-dark::after { content: ''; position: absolute; inset: 0; z-index: -1; border-radius: inherit; opacity: .12; mix-blend-mode: screen; background: linear-gradient(90deg, rgba(255,120,160,.32), rgba(255,255,255,0) 35%, rgba(160,210,255,.28) 72%, rgba(120,255,220,.24)), linear-gradient(90deg, rgba(120,200,255,.22), rgba(255,255,255,0) 45%, rgba(255,140,200,.2)); }
.nav .btn-dark .ic { flex: none; display: grid; place-items: center; width: 24px; height: 24px; margin: 0 8px 0 0; border-radius: 50%; background: #0d0d0d; color: #fafafa; border-color: #0d0d0d; box-shadow: inset 0 0 0 1px rgba(255,255,255,.3), inset 0 1px 3px rgba(255,255,255,.14), inset 0 -4px 8px rgba(0,0,0,.42); transition: width .3s cubic-bezier(.2,.8,.2,1), height .3s cubic-bezier(.2,.8,.2,1); }
.nav.is-stuck .btn-dark .ic { width: 22px; height: 22px; }
.nav .btn-dark .ic svg { width: 8.5px; height: 8.5px; fill: currentColor; transition: transform .26s cubic-bezier(.2,.8,.2,1); }
.nav .btn-dark:hover { color: #0d0d0d; background: #fafafa; transform: none; box-shadow: inset 0 0 0 1px rgba(255,255,255,.34), inset 0 1px 2px rgba(255,255,255,.26), inset 0 -3px 6px rgba(0,0,0,.3), 0 0 0 6px rgba(48,211,195,.14), 0 8px 20px rgba(10,15,28,.3); }
.nav .btn-dark:hover .ic svg { transform: translate(1.5px, -1.5px); }

/* the button wording follows the version this visitor was given on the homepage */
.nav .cta-b, .nav .cta-c, .nav .cta-c-only { display: none; }
html[data-cta="b"] .nav .cta-a, html[data-cta="c"] .nav .cta-a { display: none; }
html[data-cta="b"] .nav .cta-b, html[data-cta="c"] .nav .cta-c { display: inline; }
html[data-cta="c"] .nav .cta-c-only { display: revert; }

/* the phone menu behind the bar: hidden on anything wider */
.nav-burger { display: none; flex-direction: column; align-items: center; justify-content: center; gap: 4px; width: 34px; height: 34px; margin: 0 2px 0 0; padding: 0; border: 0; background: none; font: inherit; color: inherit; border-radius: 10px; flex: none; cursor: pointer; }
.nav-burger span { display: block; width: 18px; height: 1.6px; border-radius: 2px; background: #d4d4d8; transition: transform .26s cubic-bezier(.2,.8,.2,1), opacity .18s; }
.nav-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(5.6px) rotate(45deg); }
.nav-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-5.6px) rotate(-45deg); }
.nav-sheet { display: none; position: absolute; top: calc(100% + 8px); left: 8px; right: 8px; flex-direction: column; padding: 8px; border-radius: 16px; background: #141414; box-shadow: 0 16px 40px rgba(0,0,0,.55), inset 0 0 0 1px #202020; }
.nav-sheet.open { display: flex; animation: navSheetIn .22s cubic-bezier(.2,.8,.2,1); }
.nav-sheet a { padding: 13px 14px; border-radius: 11px; font-size: 16px; }
.nav-sheet a:hover { background: #1f1f1f; }
.nav-sheet a:active { background: rgba(17,17,20,.06); }
@keyframes navSheetIn { from { opacity: 0; transform: translateY(-6px); } }
@media (min-width: 761px) { .nav-sheet, .nav-burger { display: none !important; } }

/* on a phone the bar spans the screen and keeps just the logo and the menu */
@media (max-width: 760px) {
  .nav, .nav.is-stuck { zoom: 1; left: 0; right: 0; width: auto; max-width: none; height: 56px; gap: 10px; padding: 0 10px 0 16px; border-radius: 0 0 18px 18px; }
  .nav .logo { margin-right: auto; }
  .nav .logo img, .nav.is-stuck .logo img { height: 22px; }
  .nav .links { display: none; }
  .nav .btn-dark, .nav.is-stuck .btn-dark { display: none; height: 38px; padding: 0 14px 0 6px; font-size: 14px; white-space: nowrap; }
  .nav .btn-dark .ic, .nav.is-stuck .btn-dark .ic { width: 24px; height: 24px; margin-right: 7px; }
  .nav .nav-burger { display: inline-flex; }
}
@media (max-width: 380px) {
  .nav, .nav.is-stuck { padding: 0 8px 0 12px; gap: 8px; }
  .nav .logo img, .nav.is-stuck .logo img { height: 19px; }
  .nav .btn-dark, .nav.is-stuck .btn-dark { font-size: 12.5px; padding: 0 11px 0 5px; }
  .nav .btn-dark .ic, .nav.is-stuck .btn-dark .ic { width: 22px; height: 22px; margin-right: 6px; }
}
@media (prefers-reduced-motion: reduce) { .nav-burger span, .nav-sheet.open { animation: none; transition: none; } }