/* Global header + dropdown menu for every inner page (injected by header.js). Same look as the home page's. */
.hd,.hmenu{--c:#e5fcc9;--g:#054634;--gd:#022d21;--mute:rgba(255,255,255,.66);--bs:44px;font-family:'Google Sans Flex',system-ui,sans-serif}
.hd{position:fixed;top:0;left:0;right:0;z-index:40;display:flex;align-items:center;justify-content:space-between;height:72px;padding-inline:max(16px,9vw);transition:background .3s,backdrop-filter .3s}
.hd.s{background:rgba(2,45,33,.82);backdrop-filter:blur(12px)}
.hd .logo img{display:block;height:28px;width:auto}
.hd .logo{margin-right:14px}
.hd .acts{display:flex;align-items:center;gap:10px}
.hd .btn{display:inline-flex;align-items:center;height:var(--bs);padding:0 20px;border-radius:99px;background:#fff;color:var(--g);font:600 15px 'Google Sans Flex',system-ui,sans-serif;text-decoration:none;white-space:nowrap}
.hd .burger{display:grid;place-items:center;width:var(--bs);aspect-ratio:1;border:0;border-radius:50%;background:var(--c);cursor:pointer}
.hd .burger i,.hd .burger i::before{display:block;width:18px;height:2px;border-radius:2px;background:var(--g)}
.hd .burger i{position:relative;transform:translateY(-3px)}.hd .burger i::before{content:'';position:absolute;top:6px}
/* the menu: a dropdown panel under the burger (native popover, so Esc and an outside click close it). Shared by the home page (#menu) and every inner page (.hmenu). */
:is(.hmenu,#menu){position:fixed;inset:auto;top:80px;right:max(16px,9vw);width:min(340px,calc(100vw - 32px));height:auto;max-height:calc(100svh - 100px);margin:0;padding:10px;border:1px solid rgba(229,252,201,.18);border-radius:24px;background:#022d21;color:#e5fcc9;font-family:'Google Sans Flex',system-ui,sans-serif;box-shadow:0 30px 80px rgba(0,0,0,.45);overflow:auto;
  opacity:0;translate:0 -10px;scale:.97;transform-origin:top right;transition:opacity .25s,translate .35s cubic-bezier(.2,.8,.2,1),scale .35s cubic-bezier(.2,.8,.2,1),display .35s allow-discrete,overlay .35s allow-discrete}
:is(.hmenu,#menu):popover-open{opacity:1;translate:0;scale:1}
@starting-style{:is(.hmenu,#menu):popover-open{opacity:0;translate:0 -10px;scale:.97}}
:is(.hmenu,#menu)::backdrop{background:transparent}
:is(.hmenu,#menu) nav{display:grid;gap:2px}
:is(.hmenu,#menu) nav a{display:flex;align-items:center;justify-content:space-between;padding:13px 16px;border-radius:14px;color:#fff;font-size:20px;font-weight:600;letter-spacing:-.02em;text-decoration:none;
  opacity:0;translate:0 8px;transition:opacity .3s calc(var(--i) * 45ms + 60ms),translate .4s cubic-bezier(.2,.8,.2,1) calc(var(--i) * 45ms + 60ms),background .2s,color .2s}
:is(.hmenu,#menu):popover-open nav a{opacity:1;translate:0}
:is(.hmenu,#menu) nav a::after{content:"→";opacity:0;translate:-8px 0;transition:opacity .25s,translate .25s}
:is(.hmenu,#menu) nav a:hover,:is(.hmenu,#menu) nav a:focus-visible{background:#e5fcc9;color:#054634;outline:none}
:is(.hmenu,#menu) nav a:hover::after,:is(.hmenu,#menu) nav a:focus-visible::after{opacity:1;translate:0}
:is(.hmenu,#menu) .x{display:none}   /* the burger turns into the close button */
:is(.hmenu,#menu) p{margin:8px 6px 4px;padding:12px 10px 4px;border-top:1px solid rgba(229,252,201,.14);color:rgba(255,255,255,.6);font-size:13px}:is(.hmenu,#menu) p a{color:#e5fcc9}
/* while the menu is open the burger becomes an X */
.burger i,.burger i::before{transition:transform .35s cubic-bezier(.2,.8,.2,1),top .35s}
body:has(:is(.hmenu,#menu):popover-open) .burger i{transform:rotate(45deg)}
body:has(:is(.hmenu,#menu):popover-open) .burger i::before{top:0;transform:rotate(90deg)}
/* the pages' own breadcrumb sits under the header now, with no second logo */
.mhead .crumb,.bhero .crumb{top:88px}
.mhead .crumb a.logo,.bhero .crumb .logo{display:none}
@media(max-width:820px){.hd .btn{display:none}}
/* trek pages carry their own corner logo (a.brand); the global header replaces it */
body:has(.hd) a.brand{display:none}

/* the navigation bar: one bar on every page, a cream pill that slides to the hovered item, and a short dropdown under each; the burger and its menu only when it doesn't fit */
.tnav{position:absolute;left:50%;translate:-50% 0;display:flex;gap:2px;padding:4px;border-radius:99px;background:rgba(2,36,25,.45);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(229,252,201,.14);font-family:'Google Sans Flex',system-ui,sans-serif}
.tpill{position:absolute;top:4px;bottom:4px;left:0;width:0;border-radius:99px;background:#e5fcc9;opacity:0;transition:left .45s cubic-bezier(.2,.8,.2,1),width .45s cubic-bezier(.2,.8,.2,1),opacity .25s}
.ti{position:relative;z-index:1}
.ti>a{display:block;padding:9px 16px;border-radius:99px;color:#fff;font-size:15px;font-weight:600;text-decoration:none;white-space:nowrap;transition:color .3s}
.ti.on>a{color:#054634}
.dd{position:absolute;top:calc(100% + 8px);left:0;min-width:210px;padding:8px;border:1px solid rgba(229,252,201,.18);border-radius:16px;background:#022d21;box-shadow:0 24px 60px rgba(0,0,0,.4);opacity:0;visibility:hidden;translate:0 -6px;scale:.97;transform-origin:top left;
  transition:opacity .2s .12s,translate .3s .12s cubic-bezier(.2,.8,.2,1),scale .3s .12s cubic-bezier(.2,.8,.2,1),visibility 0s .32s}
.dd::before{content:"";position:absolute;left:0;right:0;top:-10px;height:10px}   /* keeps the hover alive across the gap */
.ti:hover>.dd,.ti:focus-within>.dd{opacity:1;visibility:visible;translate:0;scale:1;transition-delay:0s}
.dd a{display:flex;align-items:center;justify-content:space-between;padding:9px 14px;border-radius:10px;color:#fff;font-size:14px;font-weight:500;text-decoration:none;white-space:nowrap;transition:background .25s,color .25s}
.ti:hover>.dd a,.ti:focus-within>.dd a{animation:ddin .4s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--i) * 45ms + 60ms)}
@keyframes ddin{from{opacity:0;translate:0 6px}}
.dd a::after{content:"92";opacity:0;translate:-6px 0;transition:opacity .25s,translate .25s}
.dd a:hover,.dd a:focus-visible{background:rgba(229,252,201,.1);color:#e5fcc9;outline:none}.dd a:hover::after,.dd a:focus-visible::after{opacity:1;translate:0}
@media (prefers-reduced-motion:reduce){.tpill,.dd{transition:none}.dd a{animation:none!important}}
@media (min-width:1201px){.burger{display:none!important}}
@media (max-width:1200px){.tnav{display:none}}
.skip{position:fixed;left:16px;top:-64px;z-index:100;padding:10px 18px;border-radius:99px;background:#e5fcc9;color:#054634;font:600 14px 'Google Sans Flex',system-ui,sans-serif;text-decoration:none;transition:top .2s}.skip:focus{top:12px}
/* sign-in: "Sign in" (a person icon on phones), then the profile picture once a passport is saved (header.js) */
.me{display:inline-flex;align-items:center;gap:8px;height:var(--bs,44px);padding:0 16px 0 12px;border-radius:99px;box-shadow:inset 0 0 0 1.5px rgba(229,252,201,.4);color:#e5fcc9;font:600 15px 'Google Sans Flex',system-ui,sans-serif;text-decoration:none;transition:background .3s,box-shadow .3s}
.me:hover{background:rgba(229,252,201,.1)}
.me svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.me.in{justify-content:center;width:var(--bs,44px);padding:0;overflow:hidden;background:#054634;box-shadow:0 0 0 2px #e5fcc9;font-size:18px;font-weight:800}
.me.in:hover{box-shadow:0 0 0 2px #e5fcc9,0 0 0 6px rgba(229,252,201,.25)}
.me.in img{width:100%;height:100%;object-fit:cover}
.hd.lt .me:not(.in){color:#054634;box-shadow:inset 0 0 0 1.5px rgba(5,70,52,.4)}
@media (max-width:600px){.me:not(.in){width:var(--bs,44px);padding:0;justify-content:center}.me:not(.in) span{display:none}}
@media (max-width:600px){#top .acts .btn{display:none}}   /* home on phones: logo, sign-in, menu, like the inner pages (the hero has its own waitlist button) */