/* nav2: the simplified header (T-0518 preview). Three links, one search, one button.
   Everything else is one keystroke away in the command palette, or one thumb away in the dock.
   Colours are BRAND.json tokens only. */
.nav.nav2{position:fixed;top:14px;left:0;right:0;z-index:60;background:none!important;border:0!important;box-shadow:none!important;pointer-events:none;transition:top .35s ease}
/* the old header painted a full-width blurred strip once you scrolled; the capsule carries its own
   background, so the strip goes (Trace 2026-09-23: "the blur on each side isn't necessary") */
.nav.nav2,.nav.nav2.is-scrolled,.nav.nav2.is-scrolled[data-nav-theme]{background:none!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;border-color:transparent!important;box-shadow:none!important}
.nav2 .nav2__bar{pointer-events:auto;position:relative;margin:0 auto;max-width:calc(var(--maxw,1200px) - 2 * var(--gutter,24px));width:calc(100% - 2 * var(--gutter,24px));display:flex;align-items:center;gap:6px;
  padding:8px 8px 8px 18px;border-radius:999px;background:rgba(28,30,31,.72);backdrop-filter:saturate(160%) blur(18px);-webkit-backdrop-filter:saturate(160%) blur(18px);
  box-shadow:0 24px 60px -28px rgba(40,42,43,.6),inset 0 0 0 1px rgba(255,255,255,.08);transition:max-width .45s cubic-bezier(.2,.8,.2,1),padding .3s ease,background .35s ease,box-shadow .35s ease}
/* the signature: a slow gradient hairline running around the pill */
.nav2 .nav2__bar:before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;background:conic-gradient(from var(--nav2-a,0deg),#9a3fc1,#3a43ad,#4cd1f4,transparent 40%,transparent 70%,#9a3fc1);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:.9;pointer-events:none}
@property --nav2-a{syntax:"<angle>";initial-value:0deg;inherits:false}
@keyframes nav2spin{to{--nav2-a:360deg}}
.nav2 .nav2__brand img,.nav2 .nav2__links a,.nav2 .nav2__find,.nav2 .nav2__cta,.nav2 .nav2__signin{transition:all .35s cubic-bezier(.2,.8,.2,1)}
.nav2 .nav2__find-t{display:inline}
/* on scroll the bar condenses to a compact capsule: search becomes an icon, Sign in steps aside */
.nav2.is-scrolled .nav2__bar{max-width:640px;padding:5px 5px 5px 14px;background:rgba(28,30,31,.88)}
.nav2.is-scrolled .nav2__brand img{height:21px}
.nav2.is-scrolled .nav2__links a{padding:9px 12px;font-size:14px}
.nav2.is-scrolled .nav2__find{height:36px;width:36px;padding:0;justify-content:center}
.nav2.is-scrolled .nav2__find-t,.nav2.is-scrolled .nav2__find kbd,.nav2.is-scrolled .nav2__signin{display:none}
.nav2.is-scrolled .nav2__cta{height:38px;padding:0 16px;font-size:14px}
@media (max-width:1100px){.nav2 .nav2__find{width:42px;padding:0;justify-content:center}.nav2 .nav2__find-t,.nav2 .nav2__find kbd{display:none}}
.nav2 .nav2__brand{display:flex;align-items:center;margin-right:auto}
.nav2 .nav2__brand img{height:26px;display:block}
.nav2 .nav2__links{position:relative;display:flex;gap:2px}
.nav2 .nav2__links a{position:relative;z-index:1;color:rgba(255,255,255,.94);text-decoration:none;font:500 15px/1 Poppins,system-ui,sans-serif;padding:11px 16px;border-radius:999px;transition:color .2s}
.nav2 .nav2__links a[aria-current="page"]{color:#fff}
/* one pill that slides to whatever you point at */
.nav2 .nav2__ink{position:absolute;z-index:0;top:0;height:100%;border-radius:999px;background:rgba(255,255,255,.1);box-shadow:inset 0 -2px 0 #4cd1f4;opacity:0;transition:transform .35s cubic-bezier(.2,.8,.2,1),width .35s cubic-bezier(.2,.8,.2,1),opacity .2s}
.nav2 .nav2__find{display:flex;align-items:center;gap:10px;height:42px;padding:0 12px 0 14px;border-radius:999px;border:0;background:rgba(255,255,255,.08);color:rgba(255,255,255,.74);font:500 14px Poppins,system-ui,sans-serif;cursor:pointer;white-space:nowrap;flex:none;transition:background .2s,color .2s}
.nav2 .nav2__find:hover{background:rgba(255,255,255,.14);color:#fff}
.nav2 .nav2__find svg{width:17px;height:17px}
.nav2 kbd{font:600 11px ui-monospace,SF Mono,Menlo,monospace;padding:3px 6px;border-radius:6px;background:rgba(255,255,255,.1);color:rgba(255,255,255,.74)}
.nav2 .nav2__signin{white-space:nowrap;flex:none;color:rgba(255,255,255,.74);text-decoration:none;font:500 14px Poppins,system-ui,sans-serif;padding:11px 12px;border-radius:999px}
.nav2 .nav2__signin:hover{color:#fff}
.nav2 .nav2__cta{height:44px;padding:0 20px;border-radius:999px;display:inline-flex;align-items:center;gap:8px;white-space:nowrap}
.nav2 .nav2__live{width:8px;height:8px;border-radius:50%;background:#4cd1f4;box-shadow:0 0 0 0 rgba(76,209,244,.7);animation:nav2pulse 2s infinite}
@keyframes nav2pulse{70%{box-shadow:0 0 0 8px rgba(76,209,244,0)}100%{box-shadow:0 0 0 0 rgba(76,209,244,0)}}
.nav2 .nav2__burger,.nav2 .nav__mobile{display:none!important}

/* ---------- command palette ---------- */
.pal{position:fixed;inset:0;z-index:200;display:grid;place-items:start center;padding:12vh 16px 16px;background:rgba(28,30,31,.55);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);opacity:0;transition:opacity .18s ease}
.pal[hidden]{display:none}.pal.is-open{opacity:1}
.pal__box{width:min(640px,100%);border-radius:18px;background:#ffffff;color:#282a2b;box-shadow:0 0 80px -10px rgba(76,209,244,.45),0 24px 60px -28px rgba(40,42,43,.6);overflow:hidden;transform:translateY(8px) scale(.98);transition:transform .22s cubic-bezier(.2,.8,.2,1)}
.pal.is-open .pal__box{transform:none}
.pal__top{display:flex;align-items:center;gap:12px;padding:18px 20px;border-bottom:1px solid #e4e8f0}
.pal__top svg{width:20px;height:20px;color:#5b6168;flex:none}
.pal__in{flex:1;border:0;outline:0;font:500 18px Poppins,system-ui,sans-serif;color:#282a2b;background:transparent}
.pal__in::placeholder{color:#5b6168}
.pal__list{max-height:min(56vh,460px);overflow:auto;padding:8px;margin:0;list-style:none}
.pal__h{font:600 11px/1 Poppins,sans-serif;letter-spacing:.1em;text-transform:uppercase;color:#5b6168;padding:14px 12px 8px}
.pal__it a{display:flex;align-items:center;gap:12px;padding:11px 12px;border-radius:12px;color:#282a2b;text-decoration:none}
.pal__it .pal__ico{width:32px;height:32px;border-radius:10px;display:grid;place-items:center;background:#f2f3f9;color:#3a43ad;flex:none}
.pal__it .pal__ico svg{width:17px;height:17px}
.pal__it b{display:block;font:600 15px Poppins,sans-serif}
.pal__it a>span:last-child{min-width:0;flex:1}
.pal__it span.pal__d{display:block;font-size:13px;color:#5b6168;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.pal__it.is-active a{background:#f2f3f9}
.pal__it.is-active .pal__ico{background:linear-gradient(110deg,#9a3fc1 0%,#3a43ad 52%,#4cd1f4 100%);color:#fff}
.pal__foot{display:flex;gap:16px;align-items:center;padding:12px 20px;border-top:1px solid #e4e8f0;font-size:12.5px;color:#5b6168}
.pal__foot kbd{font:600 11px ui-monospace,SF Mono,Menlo,monospace;padding:2px 6px;border-radius:6px;background:#f7f8fb;border:1px solid #e4e8f0;color:#282a2b}
.pal__empty{padding:28px 20px;color:#5b6168;font-size:15px}
.pal__empty a{color:#3a43ad}

/* ---------- phone: header shrinks to brand + sign in, a dock does the rest ---------- */
.dock{display:none}
@media (max-width:860px){
  .nav.nav2{top:10px}
  .nav2 .nav2__bar{padding:8px 8px 8px 16px}
  .nav2 .nav2__links,.nav2 .nav2__find,.nav2 .nav2__cta{display:none}
  .dock{display:flex;position:fixed;z-index:70;left:50%;transform:translateX(-50%);bottom:calc(12px + env(safe-area-inset-bottom,0px));gap:2px;padding:6px;border-radius:24px;
    background:rgba(28,30,31,.82);backdrop-filter:saturate(160%) blur(18px);-webkit-backdrop-filter:saturate(160%) blur(18px);box-shadow:0 24px 60px -28px rgba(40,42,43,.8),inset 0 0 0 1px rgba(255,255,255,.08)}
  .dock a,.dock button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;width:62px;height:54px;border:0;border-radius:18px;background:none;color:rgba(255,255,255,.74);text-decoration:none;font:500 10.5px Poppins,sans-serif;cursor:pointer}
  .dock svg{width:21px;height:21px}
  .dock [aria-current="page"]{color:#fff;background:rgba(255,255,255,.1)}
  .dock .dock__go{width:58px;height:58px;margin:-12px 4px 0;border-radius:20px;color:#fff;background:linear-gradient(110deg,#9a3fc1 0%,#3a43ad 52%,#4cd1f4 100%);box-shadow:0 0 80px -10px rgba(76,209,244,.45)}
  body{padding-bottom:calc(84px + env(safe-area-inset-bottom,0px))}
  .pal{padding-top:8vh}
  .pal__foot{display:none}
  /* the phone bar is already just the logo and Sign in: it never condenses, and Sign in stays */
  .nav2.is-scrolled .nav2__bar{max-width:none;padding:8px 8px 8px 16px}
  .nav2.is-scrolled .nav2__signin{display:inline-block}
  .nav2.is-scrolled .nav2__brand img{height:26px}
  .pal__in{font-size:17px}
  /* the header floats, so the first section starts below it */
  .hero{padding-top:5.5rem!important}
  /* the site's back-to-top button sits above the dock, never under it */
  .to-top{bottom:calc(92px + env(safe-area-inset-bottom,0px))!important}
}
@media (prefers-reduced-motion:reduce){.nav2 .nav2__bar:before,.nav2 .nav2__live{animation:none}}
@media print{.nav.nav2,.dock,.pal{display:none!important}}

/* ---------- the capsule takes the colour of the section under it ----------
   main.js already sets data-nav-theme from the section beneath the header (dark, light).
   Over a light section: white glass, the colour logo, ink text, the gradient hairline stays. */
.nav2 .nav2__brand img.nav2__logo-c{display:none}
.nav2[data-nav-theme="light"] .nav2__brand img.nav2__logo-w,.nav2[data-nav-theme="paper"] .nav2__brand img.nav2__logo-w{display:none}
.nav2[data-nav-theme="light"] .nav2__brand img.nav2__logo-c,.nav2[data-nav-theme="paper"] .nav2__brand img.nav2__logo-c{display:block}
.nav2[data-nav-theme="light"] .nav2__bar,.nav2[data-nav-theme="paper"] .nav2__bar,
.nav2.is-scrolled[data-nav-theme="light"] .nav2__bar,.nav2.is-scrolled[data-nav-theme="paper"] .nav2__bar{
  background:rgba(255,255,255,.84);box-shadow:0 24px 60px -28px rgba(40,42,43,.32),0 0 80px -10px rgba(76,209,244,.18),inset 0 0 0 1px rgba(40,42,43,.04)}
.nav2[data-nav-theme="light"] .nav2__bar:before,.nav2[data-nav-theme="paper"] .nav2__bar:before{opacity:1;padding:1.5px}
.nav2[data-nav-theme="light"] .nav2__links a,.nav2[data-nav-theme="paper"] .nav2__links a{color:#2a2d30}
.nav2[data-nav-theme="light"] .nav2__ink,.nav2[data-nav-theme="paper"] .nav2__ink{background:#f2f3f9;box-shadow:inset 0 -2px 0 #3a43ad}
.nav2[data-nav-theme="light"] .nav2__find,.nav2[data-nav-theme="paper"] .nav2__find{background:#f2f3f9;color:#5b6168}
.nav2[data-nav-theme="light"] .nav2__find:hover,.nav2[data-nav-theme="paper"] .nav2__find:hover{background:#ebecf5;color:#282a2b}
.nav2[data-nav-theme="light"] kbd,.nav2[data-nav-theme="paper"] kbd{background:#ffffff;color:#5b6168;box-shadow:inset 0 0 0 1px #e4e8f0}
.nav2[data-nav-theme="light"] .nav2__signin,.nav2[data-nav-theme="paper"] .nav2__signin{color:#5b6168}
.nav2[data-nav-theme="light"] .nav2__signin:hover,.nav2[data-nav-theme="paper"] .nav2__signin:hover{color:#282a2b}
.nav2 .nav2__links a,.nav2 .nav2__find,.nav2 .nav2__signin{transition:color .35s ease,background .35s ease,padding .35s cubic-bezier(.2,.8,.2,1),font-size .35s cubic-bezier(.2,.8,.2,1),width .35s cubic-bezier(.2,.8,.2,1),height .35s cubic-bezier(.2,.8,.2,1)}

/* ---------- auto-hide while scrolling down (nav2.js adds .nav2-hidden on <html>) ---------- */
.nav.nav2 .nav2__bar{transition:transform .35s cubic-bezier(.2,.8,.2,1),max-width .45s cubic-bezier(.2,.8,.2,1),padding .3s ease,background .35s ease,box-shadow .35s ease}
@media (max-width:860px){
  .nav2-hidden .nav.nav2 .nav2__bar{transform:translateY(calc(-100% - 24px))}
  .dock{transition:transform .35s cubic-bezier(.2,.8,.2,1),opacity .25s ease}
  .nav2-hidden .dock{transform:translate(-50%,calc(100% + 28px));opacity:0;pointer-events:none}
  .nav2-hidden .to-top{bottom:calc(16px + env(safe-area-inset-bottom,0px))!important}
}
.nav2-autohide-all.nav2-hidden .nav.nav2 .nav2__bar{transform:translateY(calc(-100% - 24px))}
@media (prefers-reduced-motion:reduce){.nav.nav2 .nav2__bar,.dock{transition:none}}

/* ---------- /product (and any page with a pinned scroll story, body.has-rail): the header is NOT sticky ----------
   Keyed on a static body class, never a has() selector at the root: GSAP writes inline styles every frame and a
   root has() rule makes the browser re-match the whole document each time (the flicker Trace saw 2026-09-23).
   Trace 2026-09-23: "No sticky header on this page - the scrolling is SUPER choppy." The page pins its
   own headline where a fixed header would sit, and a fixed blurred bar over the dolly repaints every
   frame. Here the header sits in the page flow and scrolls away, no dock, no auto-hide. */
.has-rail .nav.nav2{position:relative!important;top:auto!important;padding-top:14px}
.has-rail .nav2 .nav2__bar{backdrop-filter:none;-webkit-backdrop-filter:none;background:rgba(28,30,31,.92);transform:none!important;transition:none}
.has-rail .dock{display:none!important}
body.has-rail{padding-bottom:0}
/* /product on a phone: the dolly's headline beats sit in the middle of the screen, not under where a
   header would be (Trace 2026-09-23: "the header text needs to be like in the center of the screen on
   mobile"). GSAP animates only their opacity, so the transform is free. Scoped to the pinned-story page. */
@media (max-width:900px){
  .has-rail .ph-beat{top:50%;transform:translateY(-50%)}
}
@media (max-width:900px) and (prefers-reduced-motion:reduce){
  .has-rail .ph-beat[data-b="1"]{transform:none}
}
/* On a has-rail page the header scrolls away with the page, so it must never animate while it is still on screen:
   main.js keeps toggling .is-scrolled and data-nav-theme as you scroll, which here would shrink and recolour a
   header that is leaving (Trace 2026-09-23: "it's still shaky on scroll ... it's flickering"). Lock it: full
   size, dark, no transitions. */
.has-rail .nav2 .nav2__bar,.has-rail .nav2 .nav2__bar *,.has-rail .nav2 .nav2__bar:before{transition:none!important;animation:none!important}
.has-rail .nav2.is-scrolled .nav2__bar,.has-rail .nav2[data-nav-theme] .nav2__bar{max-width:calc(var(--maxw,1200px) - 2 * var(--gutter,24px));padding:8px 8px 8px 18px;background:rgba(28,30,31,.92);box-shadow:0 24px 60px -28px rgba(40,42,43,.6),inset 0 0 0 1px rgba(255,255,255,.08)}
.has-rail .nav2.is-scrolled .nav2__brand img{height:26px}
.has-rail .nav2[data-nav-theme] .nav2__brand img.nav2__logo-w{display:block}
.has-rail .nav2[data-nav-theme] .nav2__brand img.nav2__logo-c{display:none}
.has-rail .nav2.is-scrolled .nav2__links a,.has-rail .nav2[data-nav-theme] .nav2__links a{padding:11px 16px;font-size:15px;color:rgba(255,255,255,.94)}
.has-rail .nav2[data-nav-theme] .nav2__ink{background:rgba(255,255,255,.1);box-shadow:inset 0 -2px 0 #4cd1f4}
.has-rail .nav2[data-nav-theme] .nav2__find{background:rgba(255,255,255,.08);color:rgba(255,255,255,.74)}
.has-rail .nav2[data-nav-theme] kbd{background:rgba(255,255,255,.1);color:rgba(255,255,255,.74);box-shadow:none}
.has-rail .nav2[data-nav-theme] .nav2__signin{color:rgba(255,255,255,.74)}
.has-rail .nav2.is-scrolled .nav2__cta{height:44px;padding:0 20px;font-size:16px}
@media (min-width:1101px){
  .has-rail .nav2.is-scrolled .nav2__find{height:42px;width:auto;padding:0 12px 0 14px}
  .has-rail .nav2.is-scrolled .nav2__find-t{display:inline}
  .has-rail .nav2.is-scrolled .nav2__find kbd{display:inline}
}
@media (min-width:861px){.has-rail .nav2.is-scrolled .nav2__signin{display:inline-block}}