/* Shared Driveless header — one header on every page. Generated from the homepage. */
#top{
  position:sticky;top:0;z-index:50;background:color-mix(in srgb,var(--paper,#FFFFFF) 88%,transparent);
  backdrop-filter:saturate(150%) blur(14px);-webkit-backdrop-filter:saturate(150%) blur(14px);
  border-bottom:1px solid var(--line,#E6E6E9);
}

#top .inner{
  max-width:var(--wrap,1240px);margin:0 auto;padding:13px 24px;
  display:flex;align-items:center;justify-content:space-between;gap:20px;
}

#top .brand{display:flex;align-items:center;gap:10px;font-weight:800;color:var(--ink,#111113);letter-spacing:-.02em;font-size:18px;}

#top nav{display:flex;gap:4px;}

#top nav a{
  padding:7px 13px;border-radius:999px;font-size:14px;font-weight:500;color:var(--muted);
  text-decoration:none;white-space:nowrap;transition:color .2s,background .2s;
}

#top nav a:hover{color:var(--ink,#111113);background:var(--sunk,#F6F6F8);}

#top .tag{font-family:"IBM Plex Mono",ui-monospace,Menlo,monospace;font-size:12px;letter-spacing:.12em;color:var(--muted);text-transform:uppercase;}
@media (max-width:1080px){#top nav{display:none;}}

/* ============ site-specific ============ */
#top .inner{max-width:var(--wrap,1240px);}

#top .cta{display:flex;gap:8px;align-items:center;}

#top nav a{font-size:14px;}
@media (max-width:980px){ #top nav{display:none;} #top .cta .btn:first-child{display:none;} }
@media (max-width:640px){
  section{padding-left:16px;padding-right:16px}
  h1.big{font-size:clamp(34px,10.5vw,46px);line-height:.98}
  h2.big{font-size:clamp(26px,7.6vw,34px)}
  .hero .sub{font-size:16.5px}
  .why{grid-template-columns:1fr;gap:10px}
  .why .w{padding:18px 18px 20px}
  .flow.three{grid-template-columns:1fr}
  .flow .fc{transform:none!important}
  .pt{padding:14px}
  .band{border-radius:18px;padding:22px 18px}
  .bgrid{gap:10px}
  .cur{gap:2px;padding:4px}
  .cur button{padding:7px 10px;font-size:12.5px}
  .marq{padding:14px 0}
  .marq .run{gap:32px;animation-duration:22s}
  .marq .it{font-size:14px}
  .badge{position:static;margin:0 0 12px;display:inline-flex}
  .lab{font-size:10px;letter-spacing:.1em;padding:6px 12px 6px 10px}
  .nums{grid-template-columns:1fr}
  .cities span{font-size:12px}
  .btn.lg{width:100%;justify-content:center}
  #top .cta .btn:not(.dark){display:none}
}


/* ═══════════ v6: mobile menu, why-section, speed strip, CTAs ═══════════ */
.burger{display:none;width:40px;height:40px;border:1px solid var(--line,#E6E6E9);border-radius:11px;background:var(--paper,#FFFFFF);cursor:pointer;
  flex-direction:column;justify-content:center;align-items:center;gap:4px;padding:0}

.burger i{display:block;width:16px;height:1.8px;background:var(--ink,#111113);border-radius:2px;transition:transform .35s var(--ease,cubic-bezier(.16,1,.3,1)),opacity .25s var(--ease,cubic-bezier(.16,1,.3,1))}

.burger[aria-expanded="true"] i:nth-child(1){transform:translateY(5.8px) rotate(45deg)}

.burger[aria-expanded="true"] i:nth-child(2){opacity:0}

.burger[aria-expanded="true"] i:nth-child(3){transform:translateY(-5.8px) rotate(-45deg)}

#mnav{position:sticky;top:57px;z-index:49;background:var(--paper,#FFFFFF);border-bottom:1px solid var(--line,#E6E6E9);
  padding:10px 16px 16px;display:flex;flex-direction:column;gap:2px}

#mnav a{font-size:16px;font-weight:600;color:var(--ink,#111113);text-decoration:none;padding:12px 4px;border-bottom:1px solid var(--line,#E6E6E9)}

#mnav a.btn{margin-top:12px;border-bottom:0;justify-content:center}
@media (max-width:980px){
  .burger{display:flex}
  .vsx{grid-template-columns:1fr}
  .strip{grid-template-columns:1fr}
  .strip .sr{flex-direction:row;flex-wrap:wrap;align-items:center}
}
@media (max-width:640px){
  .mbar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:60;gap:8px;padding:10px 14px;
    padding-bottom:calc(10px + env(safe-area-inset-bottom,0px));background:color-mix(in srgb,var(--paper,#FFFFFF) 94%,transparent);
    backdrop-filter:saturate(180%) blur(12px);border-top:1px solid var(--line,#E6E6E9)}
  .mbar .btn{flex:1;justify-content:center;font-size:15px;padding:13px 10px}
  footer{padding-bottom:86px}
  #mnav{top:53px}
  .freecard{flex-direction:column;align-items:flex-start}
  .freecard .btn{width:100%;justify-content:center}
  .strip .sr{flex-direction:column;align-items:stretch}
  .strip .manual{justify-content:space-between}
  .strip .manual button{flex:1}
  .tube em{font-size:10.5px;padding:0 9px}
  .vsr.us .tube em{padding-left:calc(4% + 11px)}
}
@media (max-width:820px){
  /* the film gets the room it needs */
  #film{height:330vh}
  #film .sticky{height:100svh;padding-top:58px;padding-bottom:62px;box-sizing:border-box}
  #film .fhead{margin-bottom:12px}
  #film .fhead h2.big{font-size:clamp(18px,4.9vw,25px);line-height:1.04;max-width:24ch}
  #film .fhead .lab{font-size:9.5px;padding:5px 11px 5px 9px}
  #film .cap{font-size:13px;line-height:1.45;min-height:2.9em;margin-top:9px;max-width:44ch}
  .fread{gap:14px;margin-top:12px}
  .fread .ro b{font-size:15px}
  .fread .ro span{font-size:8.5px;letter-spacing:.1em}
  .fread .prog{max-width:280px;height:26px}

  /* every control a thumb has to hit */
  .cur button{padding:11px 14px;font-size:13px}
  .toggle button{padding:10px 15px;font-size:13.5px;min-height:44px;display:inline-flex;align-items:center;justify-content:center}
  .toggle{padding:3px}
  .strip .manual button{padding:12px 10px;font-size:13px}
  .snd{padding:10px 15px;font-size:12px}
  #mnav a{padding:15px 4px;font-size:16.5px}
  footer .cols a{padding:9px 0;display:block}
  #top .inner{min-height:56px}
  #top .brand{padding:8px 0}
  .btn{min-height:44px}
  .seg label{min-height:46px;display:flex;align-items:center;justify-content:center}
  .form input,.form select{min-height:50px;font-size:16px}
}


/* menu CTA must keep its own colours, and the drive's badge strip must span the card */
#mnav a.btn{color:var(--ink,#111113)}

#mnav a.btn.dark{color:#fff;background:var(--ink,#111113);border-color:var(--ink,#111113)}
@media (max-width:360px){
  /* the header runs out of room: the menu and the bottom bar both carry Download */
  #top .cta{display:none}
  #top .inner{gap:10px}
}

.btn,.sp-btn,.sp-toggle button,.cur button,.strip .manual button,.snd,.burger,#top nav a{
  transition:background var(--t-fast,180ms) var(--out,cubic-bezier(.33,1,.68,1)),border-color var(--t-fast,180ms) var(--out,cubic-bezier(.33,1,.68,1)),
             color var(--t-fast,180ms) var(--out,cubic-bezier(.33,1,.68,1)),transform var(--t-fast,180ms) var(--spring),box-shadow var(--t-fast,180ms) var(--out,cubic-bezier(.33,1,.68,1))}


/* nav: condenses, then steps aside on the way down */
#top{transition:transform var(--t-base,420ms) var(--spring),box-shadow var(--t-base,420ms) var(--out,cubic-bezier(.33,1,.68,1)),
     background var(--t-base,420ms) var(--out,cubic-bezier(.33,1,.68,1));will-change:transform}

#top.scrolled{box-shadow:0 1px 0 var(--line,#E6E6E9),0 8px 24px rgba(0,0,0,.04);
  background:color-mix(in srgb,var(--paper,#FFFFFF) 82%,transparent);backdrop-filter:saturate(180%) blur(14px)}

#top.scrolled .inner{padding-top:8px;padding-bottom:8px}

#top .inner{transition:padding var(--t-base,420ms) var(--spring)}

#top.up{transform:translateY(-102%)}
@media (prefers-reduced-motion: reduce){
  .rv,.feat.rv .fcard,.sp-grid.rv .sp-card,.avail.rv span,.sp-list li,.next.rv li{
    opacity:1!important;transform:none!important;transition:none!important}
  #top.up{transform:none}
  [data-par]{transform:none!important}
}


/* ═══════════ header: floating glass pill (reference-style) ═══════════ */
#top{position:fixed;top:14px;left:50%;transform:translateX(-50%);
  width:calc(100% - 28px);max-width:1180px;z-index:50;
  border:1px solid rgba(255,255,255,.6);border-radius:999px;
  background:rgba(255,255,255,.38);
  -webkit-backdrop-filter:blur(22px) saturate(180%);backdrop-filter:blur(22px) saturate(180%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.55),0 8px 28px rgba(17,17,19,.06);
  transition:background var(--t-base,420ms) var(--out,cubic-bezier(.33,1,.68,1)),box-shadow var(--t-base,420ms) var(--out,cubic-bezier(.33,1,.68,1)),
             border-color var(--t-base,420ms) var(--out,cubic-bezier(.33,1,.68,1)),transform var(--t-base,420ms) var(--spring),
             top var(--t-base,420ms) var(--spring)}

#top .inner{max-width:none;padding:8px 9px 8px 20px;min-height:0;gap:16px}

#top.scrolled{background:rgba(255,255,255,.62);border-color:rgba(255,255,255,.8);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7),0 12px 34px rgba(17,17,19,.10)}

#top.scrolled .inner{padding-top:8px;padding-bottom:8px}

#top.up{transform:translateX(-50%) translateY(-190%)}

#top nav a{font-weight:600;color:var(--text,#45454B)}

#top nav a:hover{background:rgba(17,17,19,.06);color:var(--ink,#111113)}


/* Book a demo: slides out of the pill once the second section is behind you */
#top .cta{display:flex;align-items:center;overflow:hidden;max-width:0;opacity:0;margin-left:0;
  transform:translateX(8px);pointer-events:none;
  transition:max-width .55s var(--spring),opacity .3s var(--out,cubic-bezier(.33,1,.68,1)),transform .55s var(--spring),margin .55s var(--spring)}

#top.cta-on .cta{max-width:190px;opacity:1;margin-left:2px;transform:none;pointer-events:auto}

#top .cta .btn.demo{white-space:nowrap;background:var(--ink,#111113);color:#fff;border-color:var(--ink,#111113);padding:11px 20px}

#top .cta .btn.demo:hover{background:#000}


/* the mobile menu hangs under the pill, in the same glass */
#mnav{position:fixed;top:72px;left:14px;right:14px;z-index:49;border-radius:22px;border:1px solid rgba(255,255,255,.7);
  background:rgba(255,255,255,.82);-webkit-backdrop-filter:blur(22px) saturate(180%);backdrop-filter:blur(22px) saturate(180%);
  box-shadow:0 18px 44px rgba(17,17,19,.12);padding:8px 18px 18px}

#mnav a{border-bottom:1px solid rgba(17,17,19,.07)}

#mnav a:last-of-type{border-bottom:0}
@media (max-width:980px){
  #top .inner{padding-left:16px}
  #top .cta{display:flex}
  #top .cta .btn.demo{padding:10px 16px;font-size:13.5px}
}
@media (max-width:640px){
  #top{top:10px;width:calc(100% - 20px)}
  #mnav{top:66px;left:10px;right:10px}
}
@media (max-width:380px){
  #top .inner{padding-left:14px;gap:8px}
  #top.cta-on .cta{max-width:130px}
  #top .cta .btn.demo{padding:9px 12px;font-size:12.5px}
}


/* ═══════════ header v2: invisible glass strip, floating chips, always sticky ═══════════ */
#top{position:fixed;top:0;left:0;right:0;width:100%;max-width:none;transform:none;
  background:transparent;border:0;border-radius:0;box-shadow:none;
  -webkit-backdrop-filter:blur(16px) saturate(140%);backdrop-filter:blur(16px) saturate(140%);
  -webkit-mask-image:linear-gradient(to bottom,#000 72%,rgba(0,0,0,.45) 88%,transparent 100%);
          mask-image:linear-gradient(to bottom,#000 72%,rgba(0,0,0,.45) 88%,transparent 100%);
  transition:-webkit-backdrop-filter var(--t-base,420ms) var(--out,cubic-bezier(.33,1,.68,1)),backdrop-filter var(--t-base,420ms) var(--out,cubic-bezier(.33,1,.68,1))}

#top.scrolled{background:transparent;border:0;box-shadow:none;
  -webkit-backdrop-filter:blur(20px) saturate(150%);backdrop-filter:blur(20px) saturate(150%)}

#top.up{transform:none}
                       /* it never leaves: a sticky header */
#top .inner{max-width:var(--wrap,1240px);margin:0 auto;padding:13px 24px 20px;gap:14px;
  display:flex;align-items:center;justify-content:space-between}

#top.scrolled .inner{padding:13px 24px 20px}


/* the controls are solid chips floating on the blur */
#top .brand{background:#fff;border-radius:999px;padding:11px 20px 11px 17px;
  box-shadow:0 2px 10px rgba(17,17,19,.07),0 0 0 1px rgba(17,17,19,.04);font-size:17px}

#top nav{background:#fff;border-radius:999px;padding:5px 7px;gap:2px;
  box-shadow:0 2px 10px rgba(17,17,19,.07),0 0 0 1px rgba(17,17,19,.04)}

#top nav a{padding:9px 15px;font-size:14px;font-weight:600;color:var(--text,#45454B)}

#top nav a:hover{background:var(--sunk,#F6F6F8);color:var(--ink,#111113)}

#top .cta .btn.demo{border-radius:999px;padding:13px 22px;font-size:14.5px;
  box-shadow:0 4px 16px rgba(17,17,19,.18)}

#top .burger{background:#fff;border:0;border-radius:999px;width:46px;height:46px;
  box-shadow:0 2px 10px rgba(17,17,19,.07),0 0 0 1px rgba(17,17,19,.04)}


#mnav{top:82px}
@media (max-width:640px){
  #top .inner{padding:10px 14px 18px;gap:10px}
  #top .brand{padding:9px 15px 9px 13px;font-size:15.5px}
  #top .burger{width:42px;height:42px}
  #mnav{top:72px}
}

/* ── self-contained fallbacks so the header also works on pages that do not
      load the main site stylesheet (brief/, 404) ── */
#mnav[hidden],#top [hidden]{display:none!important}
#top .btn,#mnav .btn{display:inline-flex;align-items:center;gap:8px;padding:11px 18px;border-radius:99px;
  font-size:14.5px;font-weight:700;text-decoration:none;border:1px solid var(--line2,#EDEDF0);
  color:var(--ink,#111113);background:var(--paper,#FFFFFF);white-space:nowrap;cursor:pointer;
  font-family:inherit;transition:background .18s,border-color .18s,color .18s,transform .18s}
#top .btn:hover,#mnav .btn:hover{transform:translateY(-1px);border-color:var(--ink,#111113)}
#mnav .btn.dark{background:var(--ink,#111113);color:#fff;border-color:var(--ink,#111113)}
#mnav .btn.lg{padding:15px 24px;font-size:16px;justify-content:center}
#top .cta .btn.demo{background:var(--ink,#111113);color:#fff;border-color:var(--ink,#111113)}
#top .cta .btn.demo:hover{background:#000}
#top .brand{display:flex;align-items:center;gap:10px;font-weight:800;color:var(--ink,#111113);
  letter-spacing:-.02em;text-decoration:none}
#top nav{display:flex}
#top nav a{border-radius:999px;text-decoration:none}
#mnav a{text-decoration:none}