/* 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}}

/* T-0540 (Trace 2026-09-24, a Windows user at 1240x536): the header floats over the page, so the homepage hero
   reserves the bar at EVERY width, not only phones (<=860 has its own 5.5rem above). The bar ends 74px from
   the top; the hero keeps that plus breathing room, fills the screen, and centres its content below the bar. */
@media (min-width:861px){.hero{padding-top:calc(74px + clamp(1rem,4vh,3rem))!important;min-height:100vh;min-height:100svh}}
/* T-0540 landscape phones (568x320 to 844x390): a bottom dock took a fifth of the screen and sat on the page
   title. On short screens the five icons move UP into the top bar, between the logo and Sign in, icons only
   (the labels stay in the page for screen readers), and hide with the bar while scrolling down. */
@media (max-width:860px) and (max-height:500px){
  .dock{top:14px;bottom:auto;left:auto;right:calc(var(--gutter,24px) + 88px);transform:none;padding:0;gap:0;
    background:none;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none;z-index:61}
  .dock a,.dock button{width:42px;height:42px;gap:0;font-size:0}
  .dock svg{width:19px;height:19px}
  .dock .dock__go{width:40px;height:40px;margin:1px 3px 0;border-radius:13px;box-shadow:none}
  .nav2-hidden .dock{transform:translateY(calc(-100% - 30px));opacity:0;pointer-events:none}
  body{padding-bottom:0}
  .hero{padding-top:4.75rem!important}
  .page-hero{padding-top:4.75rem}
}