/* Mesh shell: the floating header (serif wordmark, glass nav pill, black "Get Mesh" capsule) and the minimal footer.
   Markup is stamped by scripts/sync-shell.mjs between <!-- mv:nav --> and <!-- mv:footer --> markers.
   Depends on tokens.css and glass.css. The phone menu is a native popover: it opens, closes on Escape
   and on outside click without JavaScript; site.js only closes it after an in-page link. */

html[data-sky="dark"]{--on-sky:#F9F9FA;--on-sky-2:rgba(249,249,250,.74);--glass-card-live:var(--glass-card-night)}
html[data-sky="dark"] .seg{background:rgba(255,255,255,.62)}
html[data-sky="dark"] .mv-nav .btn-glass-circle,html[data-sky="dark"] .mv-nav__menu{background:rgba(255,255,255,.62)}

/* ---------- Wordmark on the sky in light phases: ink on a glass plate (scrolled nav is already glass) ---------- */
html[data-sky="light"] .mv-nav:not(.is-scrolled) .mv-brand{padding:0 .4em;border-radius:var(--r-pill);background:var(--glass-sheet)}

.skip-link{position:absolute;left:var(--s-4);top:var(--s-2);z-index:calc(var(--z-menu) + 1);padding:var(--s-2) var(--s-4);border-radius:var(--r-pill);background:var(--ink);color:var(--ink-on);font:600 var(--t-sm)/var(--lh-ui) var(--font-ui);text-decoration:none;transform:translateY(-200%)}
.skip-link:focus{transform:none;outline:none;box-shadow:var(--focus-ring)}

/* Header: floats on the sky. Once the page scrolls it gains a frosted strip so content never runs under bare text. */
.mv-nav{position:sticky;top:0;z-index:var(--z-nav);transition:background-color var(--dur-3) var(--ease-out),box-shadow var(--dur-3) var(--ease-out)}
.mv-nav.is-scrolled{background:var(--glass-card-live,var(--glass-card));box-shadow:0 1px 0 var(--hairline-glass),var(--lift-1);-webkit-backdrop-filter:blur(var(--glass-blur));backdrop-filter:blur(var(--glass-blur))}
.mv-nav__in{display:flex;align-items:center;gap:var(--s-5);max-width:var(--wrap);min-height:var(--nav-h);margin:0 auto;padding:0 var(--gutter)}
.mv-brand{display:inline-flex;align-items:center;min-height:var(--tap-min);color:var(--on-sky);font:500 1.875rem/1 var(--font-display);letter-spacing:-.015em;text-transform:lowercase;text-decoration:none;white-space:nowrap;transition:color var(--dur-3) var(--ease-out)}
.mv-nav.is-scrolled .mv-brand{color:var(--ink)}
.mv-brand:hover{text-decoration:none}
.mv-brand b{font-weight:inherit}

.mv-nav__links{margin:0 auto;padding:4px;list-style:none}
.mv-nav__links li{display:contents;margin:0}
.mv-nav__links a .tape{all:unset}
.mv-nav__cta{flex:none}
.mv-nav__menu{display:none;margin-left:auto}

/* Tablet and phone: the pill moves into the drawer. */
@media (max-width:1099px){
  .mv-nav__in{gap:var(--s-3)}
  .mv-nav__links{display:none}
  .mv-nav__cta{flex:0 1 auto;min-width:0;margin-left:auto}
  .mv-nav__menu{display:inline-flex;flex:none;margin-left:0;white-space:nowrap}
}
@media (max-width:479px){
  .mv-brand{font-size:1.625rem}
  .mv-nav__cta{padding:0 var(--s-4);min-height:44px}
  .mv-nav__menu{padding:0 var(--s-4);min-height:44px}
}

/* Drawer: a glass sheet over a dimmed sky. */
.mv-menu{position:fixed;inset:calc(var(--nav-h) - 8px) var(--s-3) auto var(--s-3);width:auto;max-height:calc(100dvh - var(--nav-h) - var(--s-4));margin:0;padding:var(--s-5);overflow:auto;border:1px solid var(--glass-stroke);border-radius:var(--r-card);background:var(--glass-sheet);color:var(--ink);box-shadow:var(--lift-3);-webkit-backdrop-filter:blur(var(--glass-blur)) saturate(1.1);backdrop-filter:blur(var(--glass-blur)) saturate(1.1);transition:opacity var(--dur-2) var(--ease-out),translate var(--dur-2) var(--ease-out),display var(--dur-2) allow-discrete,overlay var(--dur-2) allow-discrete}
.mv-menu:popover-open{opacity:1;translate:0 0}
@starting-style{.mv-menu:popover-open{opacity:0;translate:0 calc(-1 * var(--s-2))}}
.mv-menu::backdrop{background:rgba(0,0,0,.12)}
.mv-menu__links{display:grid;gap:0;margin:0 0 var(--s-5);padding:0;list-style:none}
.mv-menu__links li + li{border-top:1px solid var(--hairline-glass)}
.mv-menu__links a{display:flex;align-items:center;justify-content:space-between;min-height:52px;padding:0 var(--s-1);color:var(--ink);font:500 var(--t-md)/1 var(--font-ui);text-decoration:none}
.mv-menu__links a::after{content:"";width:8px;height:8px;border-top:1.6px solid rgba(29,29,31,.45);border-right:1.6px solid rgba(29,29,31,.45);rotate:45deg}
.mv-menu__links a[aria-current]{font-weight:600}
.mv-menu__links a:focus-visible{outline:none;box-shadow:var(--focus-ring);border-radius:var(--r-chip)}
.mv-menu__cta{margin:0 0 var(--s-5)}
.mv-menu__cta .btn,.mv-menu__cta .tape--button{width:100%}
.mv-menu__mail{margin:0;font:400 var(--t-sm)/var(--lh-ui) var(--font-ui);color:var(--ink-2)}
@media (min-width:1100px){.mv-menu{display:none}}
@supports not selector(:popover-open){
  .mv-nav__menu,.mv-menu{display:none}
  @media (max-width:1099px){.mv-nav__in{flex-wrap:wrap;padding-block:var(--s-2)}.mv-nav__links{display:flex;flex-wrap:wrap;order:3;width:100%;margin:0}}
}

/* Footer: one slim glass bar. Legal links, the company, the page's own disclaimer. */
.mv-foot{padding:var(--s-8) var(--s-4) var(--s-8)}
.mv-foot__bar{max-width:var(--wrap);margin:0 auto;padding:var(--s-6) clamp(var(--s-5),3vw,var(--s-8));background:var(--glass-sheet)}
.mv-foot__row{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-3) var(--s-8)}
.mv-foot .mv-brand{color:var(--ink);font-size:1.75rem}
.mv-foot__links{display:flex;flex-wrap:wrap;gap:0 var(--s-5);margin:0 0 0 auto;padding:0;list-style:none}
.mv-foot__links a{display:inline-flex;align-items:center;min-height:var(--tap-min);color:var(--ink);font:500 var(--t-sm)/var(--lh-ui) var(--font-ui);text-decoration:none}
.mv-foot__links a:hover{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.25em}
.mv-foot__links a[aria-current="page"]{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:.25em}
.mv-foot__links a:focus-visible{outline:none;box-shadow:var(--focus-ring);border-radius:6px}
.mv-foot__tail{display:grid;gap:var(--s-1);margin-top:var(--s-3);padding-top:var(--s-4);border-top:1px solid var(--hairline-white)}
.mv-foot__tail p{margin:0;max-width:none;font:400 var(--t-xs)/var(--lh-ui) var(--font-ui);color:var(--ink-2)}
.mv-foot__tail a{color:inherit}
@media (max-width:759px){.mv-foot__links{margin-left:0}.mv-foot{padding-inline:var(--s-3)}}

@media (prefers-reduced-motion:reduce){
  .mv-menu,.mv-nav,.mv-brand{transition:none}
}