/* The navigation floats above the page. Its material follows the surface beneath it. */
:root { --nav-offset: clamp(10px, 1.4vw, 20px); --nav-size: 62px; --nav-clear: calc(var(--nav-offset) + var(--nav-size) + 22px); }
html { scroll-padding-block-start: var(--nav-clear); }
#mast, body[data-page=pricing] #mast {
  --ink:#161719; --ink-inverse:#fff; --muted:#4c5055; --accent:#111315; --chip:#e4e5e6;
  --glass:rgba(252,252,253,.79); --glass-edge:rgba(25,27,32,.11); --glass-solid:#f6f6f7;
  position:fixed; z-index:12; inset:var(--nav-offset) 0 auto; width:min(1220px,calc(100% - clamp(24px,8vw,128px)));
  margin-inline:auto; background:transparent; border:0; color:var(--ink); color-scheme:light;
}
#mast[data-tone=dark] {
  --ink:#fafafa; --ink-inverse:#161719; --muted:#dbdbdf; --accent:#fff; --chip:#47494c;
  --glass:rgba(42,44,47,.78); --glass-edge:rgba(255,255,255,.15); --glass-solid:#282a2c;
  color:var(--ink); color-scheme:dark;
}
#mast .top, #mast #drawer:not([hidden]) {
  background:var(--glass-solid); border:1px solid var(--glass-edge);
  box-shadow:0 6px 25px -12px #11141a39;
}
@supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))) {
  #mast .top, #mast #drawer:not([hidden]) {
    background:var(--glass);
    -webkit-backdrop-filter:blur(20px) saturate(125%);
    backdrop-filter:blur(20px) saturate(125%);
  }
}
#mast .top {
  width:100%; margin:0; height:var(--nav-size); padding:0 9px 0 23px; border-radius:999px;
}
#mast .brand {width:97px;}
#mast[data-tone=dark] .brand {filter:invert(1);}
#mast .wide-nav {gap:4px;}
#mast .wide-nav a {padding:9px 16px;border-radius:99px;font-size:14px;line-height:20px;}
#mast .wide-nav a[aria-current],#mast .wide-nav a:hover {background:var(--chip);color:var(--ink);}
#mast .wide-nav a[aria-current]::after {content:none;}
#mast .top-actions {gap:15px;}
#mast .sign-in {white-space:nowrap;}
#mast .top-cta {min-height:40px;}
#mast .top-cta:hover {opacity:.83;transform:none;}
#mast #drawer:not([hidden]) {inset:calc(100% + 7px) 0 auto; border-radius:22px; padding:8px;}
#mast #drawer a {padding:13px 17px; border-radius:15px; font-size:15px; color:var(--ink);}
#mast #drawer a:hover,#mast #drawer [aria-current] {background:var(--chip);}
#mast .top :focus-visible {outline-offset:2px;}
body:not([data-page=home]) #main-content {padding-top:var(--nav-clear);}
body[data-page=home] #foot {background:#0d0e0f;color:#f7f7f5;border-color:#292b2d;--muted:#bec1c5;--accent:#fff;}
body[data-page=home] #foot .brand {filter:invert(1);}
.hero-track {position:relative;background:#101214;}
.hero-track .context-hero {position:sticky;top:0;padding-top:calc(var(--nav-clear) + clamp(3px,1vw,15px));}
.hero-travel {height:clamp(240px,40svh,440px);pointer-events:none;}
.hero-track .context-hero {
  background-color:color-mix(in srgb,#101214,#fcfcfd calc(var(--intro-light,1) * 100%));
  background-image:none;
}
.hero-track .context-hero::before {
  content:"";position:absolute;inset:0;z-index:-2;pointer-events:none;
  background:linear-gradient(180deg,transparent 0%,transparent 27%,#eef4fc29 75%,#edf2f936);
  opacity:var(--intro-light,1);
}
/* At the middle gray, use stronger ink for copy that normally has a muted color. */
.context-hero {--contrast-ink:#050608;}
.context-hero[data-tone=dark] {--contrast-ink:white;}
.hero-track .intro h1 em {
  color:color-mix(in srgb,var(--accent),var(--contrast-ink) var(--intro-contrast,0%));
}
.hero-track :is(.intro-text,.intro-actions small,.hero-trust,.source-status) {
  color:color-mix(in srgb,var(--muted),var(--contrast-ink) var(--intro-contrast,0%));
}
.context-hero[data-tone=dark] {
  background:#101214;
  --accent:#d1d5da; --surface:#1b1e21; --line:#35383b; --muted:#b3b7bc;
}
.context-hero[data-tone=dark] .hero-pills button {background:#1e2124;border-color:#3a3e42;}
.context-hero[data-tone=dark] .hero-pills svg {color:#e2e4e7;}
.context-hero[data-tone=dark] .hero-pills button:hover {background:#303337;border-color:#64696e;}
.context-hero[data-tone=dark] .showcase-bed::before {background:#25282c;}
.context-hero[data-tone=dark] .showcase-shell {background:#1b1e21;box-shadow:0 14px 48px #0003;}
.context-hero[data-tone=dark] .orbit-lines {color:#9099a6;}
.context-hero[data-tone=dark] .hero-primary:hover {background:#e4e5e7;}
.hero-mode-slot {display:grid;place-items:center;min-height:37px;}
.hero-mode-slot.is-floating .modes {
  position:fixed; z-index:5; left:50%; transform:translateX(-50%);
  bottom:calc(14px + env(safe-area-inset-bottom,0px)); padding:5px; gap:3px;
  border:1px solid #ffffff40; background:#202327; box-shadow:0 6px 24px #0004;
}
.hero-mode-slot.is-floating .modes button {
  min-height:44px; padding:9px 21px; gap:8px; color:#d5d8dc; font-size:16px;
}
.hero-mode-slot.is-floating .modes button svg {width:19px;height:19px;}
.hero-mode-slot.is-floating .modes button:hover {color:white;}
.hero-mode-slot.is-floating .modes button[aria-pressed=true] {background:#f5f6f7;color:#17191c;}
@media(min-width:701px) {
  .hero-mode-slot.is-floating .modes {bottom:24px;}
  .hero-mode-slot.is-floating .modes button {min-height:47px;padding-inline:23px;}
}
@media (max-width:980px) {
  :root {--nav-size:54px;}
  #mast .top {display:flex;padding-inline:18px 7px;}
  #mast .wide-nav,#mast .top-actions>.sign-in {display:none;}
  #mast .top-actions {margin-left:auto;}
  #mast .mobile-toggle {display:inline-flex;}
  #mast #drawer:not([hidden]) {position:absolute;display:grid;}
  #mast .top-actions {gap:7px;}
  #mast .brand {width:84px;}
  #mast .top-cta {min-height:36px;}
  #mast .mobile-toggle {width:40px;height:40px;}
}
@media (max-width:500px) {
  :root {--nav-clear:calc(var(--nav-offset) + var(--nav-size) + 16px);}
  #mast {width:calc(100% - 20px);}
  #mast .top {padding-inline:15px 5px;}
  #mast .brand {width:73px;}
  #mast .top-actions {gap:4px;}
  #mast .top-cta {padding:8px 12px;min-height:34px;}
  #mast .lang {padding-inline:5px;}
  #mast .mobile-toggle {width:35px;}
}
@media(max-width:360px) {
  #mast .brand {width:64px;}
  #mast .lang svg {display:none;}
  #mast .top-actions {gap:2px;}
}
@media (prefers-reduced-motion:reduce) {
  .hero-travel {height:0;}
}