/* Top navigation for the homepage and /how-it-works (one file, so both stay identical).
   Geist, uppercase with wide letter spacing, 44px hit areas, a thin underline on hover / focus / current page.
   The bar is its own compositing layer and its blurred background is a permanent layer that only fades in
   (toggling backdrop-filter while iOS moves the toolbar is what made bars shake). */
.nav { position: fixed; top: 0; left: 0; right: 0; z-index: 30; padding-top: env(safe-area-inset-top); -webkit-transform: translateZ(0); transform: translateZ(0); -webkit-backface-visibility: hidden; backface-visibility: hidden; }
.nav::before { content: ''; position: absolute; inset: 0; z-index: -1; background: rgba(0, 0, 0, 0.86); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-bottom: 1px solid rgba(255, 255, 255, 0.07); pointer-events: none; }
.nav, .nav.scrolled { border-bottom: 0; }   /* style.css adds a 1px border on scroll: it made the bar 1px taller (a jump) */
.nav.fade::before { opacity: 0; transition: opacity 0.25s ease; }          /* over a hero: fades in once you scroll */
.nav.fade.scrolled::before { opacity: 1; }
.nav-in { display: flex; align-items: center; gap: 28px; width: 100%; max-width: 1360px; height: 80px; margin: 0 auto; padding: 0 var(--gut, 32px); }

.brand { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; color: #fff; text-decoration: none; flex: none; }
.brand img { width: 34px; height: auto; }
.brand .script { font-size: 36px; line-height: 1; padding: 2px 4px 6px 0; }

.links { display: flex; align-items: center; gap: 4px; margin-left: auto; }
.links a { position: relative; display: inline-flex; align-items: center; height: 44px; padding: 0 16px; color: rgba(255, 255, 255, 0.72); text-decoration: none;
  font: 500 13px/1 Geist, system-ui, sans-serif; letter-spacing: 0.16em; text-transform: uppercase; transition: color 0.15s ease; }
.links a::after { content: ''; position: absolute; left: 16px; right: 16px; bottom: 9px; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform 0.2s ease; }
.links a:hover, .links a:focus-visible, .links a[aria-current] { color: #fff; }
.links a:hover::after, .links a:focus-visible::after, .links a[aria-current]::after { transform: scaleX(1); }
.links a:focus-visible, .lang button:focus-visible, .menu-btn:focus-visible, .brand:focus-visible { outline: 2px solid #fff; outline-offset: 2px; border-radius: 2px; }

.nav-r { display: flex; align-items: center; gap: 18px; flex: none; }
.lang { display: inline-flex; align-items: center; color: rgba(255, 255, 255, 0.3); font: 500 12px/1 Geist, system-ui, sans-serif; letter-spacing: 0.14em; }
.lang button { min-width: 36px; height: 44px; padding: 0 6px; background: none; border: 0; color: rgba(255, 255, 255, 0.5); font: inherit; letter-spacing: inherit; cursor: pointer; transition: color 0.15s ease; }
.lang button:hover { color: #fff; }
.lang button[aria-pressed="true"] { color: #fff; }
.nav .go.sm { height: 42px; padding: 0 20px; font-size: 14px; }
.menu-btn { display: none; height: 44px; padding: 0 2px 0 12px; background: none; border: 0; color: #fff; font: 500 13px/1 Geist, system-ui, sans-serif; letter-spacing: 0.16em; text-transform: uppercase; cursor: pointer; }

/* phone menu: full screen, below the bar; the page behind doesn't scroll */
.sheet { position: fixed; inset: 0; z-index: 29; background: #000; display: flex; flex-direction: column; justify-content: center; gap: 4px; padding: calc(96px + env(safe-area-inset-top)) var(--gut, 20px) calc(48px + env(safe-area-inset-bottom)); }
.sheet[hidden] { display: none; }
.sheet a { color: #fff; text-decoration: none; font: 700 40px/1.25 Geist, system-ui, sans-serif; letter-spacing: -0.03em; padding: 6px 0; }
.sheet a[aria-current] { color: rgba(255, 255, 255, 0.5); }
.sheet .lang { margin-top: 32px; font-size: 14px; }
body.sheet-on { overflow: hidden; }

@media (max-width: 860px) {
  .nav-in { height: 64px; gap: 12px; padding-left: max(var(--gut, 20px), env(safe-area-inset-left)); padding-right: max(var(--gut, 20px), env(safe-area-inset-right)); }
  .links, .nav-r > .lang { display: none; }
  .nav-r { margin-left: auto; gap: 10px; }
  .menu-btn { display: inline-flex; align-items: center; }
  .brand img { width: 28px; } .brand .script { font-size: 30px; }
  .nav .go.sm { height: 40px; padding: 0 16px; font-size: 13.5px; }
}
@media (prefers-reduced-motion: reduce) { .links a, .links a::after, .nav.fade::before { transition: none; } }