/* ════════════════════════════════════════════════════════════════════════
   ReimburseOS — canonical global nav (gnv pass, 2026-06-11)
   Loads AFTER rebellion.css and layers dropdowns + density + breakpoints
   onto the shared header.nav / .drawer chrome. Animation contract:
   transform + opacity only; reduced-motion collapses to instant states.
   ════════════════════════════════════════════════════════════════════════ */

/* ════════════════════════════════════════════════════════════════════════
   density + OVERFLOW-PROOF structure (T4 ultra pass 2026-06-12)
   The canonical menu is wide. It now lives in ONE measurable cluster
   (.nav__desktop = links + actions + CTA) so global-nav.js can collapse it
   by MEASURED fit (priority+ pattern), never by a guessed px breakpoint
   that clips differently across OS / font-rendering / browser zoom / scrollbar
   width — the exact root cause of "different laptops show a cut-off menu".
   The nav track is slightly wider than body content so the cluster breathes;
   the cluster is content-sized and always measurable (incl. when collapsed).
   ════════════════════════════════════════════════════════════════════════ */
#main-nav .nav__in{ min-height:84px; padding:8px 0; gap:16px;
  max-width:1280px; padding-left:24px; padding-right:24px; box-sizing:border-box; }
#main-nav .brand{ flex:0 0 auto; }
#main-nav .brand__logo-img{ height:44px; max-width:min(260px,52vw); width:auto; }
@media(max-width:640px){ #main-nav .nav__in{ min-height:60px; } #main-nav .brand__logo-img{ height:40px; } }

/* the desktop cluster: ONE measurable, content-sized, never-wrapping unit */
#main-nav .nav__desktop{ display:flex; align-items:center; gap:clamp(14px,1.4vw,22px);
  white-space:nowrap; flex:0 0 auto; min-width:0; }
#main-nav .nav__links{ display:flex; align-items:center; gap:clamp(13px,1.2vw,20px); }
/* priority+: JS drops these (lowest priority first) before going full-burger;
   every dropped item still lives in the drawer, so nothing is ever unreachable */
#main-nav .nav__desktop [data-collapsed]{ display:none !important; }

#main-nav .nav__links > a:not(.nav__signin):not(.nav__signup),
#main-nav .nav__dd-trigger{
  font-size:14.5px; font-weight:500; color:rgba(255,255,255,.74); letter-spacing:-.005em;
  text-decoration:none; white-space:nowrap; transition:color .22s ease;
}
#main-nav .nav__links > a:hover, #main-nav .nav__links > a:focus-visible{ color:#fff; }
#main-nav .nav__signin, #main-nav .nav__signup{ white-space:nowrap; font-size:13.5px!important; }
#main-nav .nav__links > a.is-active{ color:#9af5ff; }
#main-nav .nav__cta{ white-space:nowrap; flex:0 0 auto; }

/* ── dropdowns ─────────────────────────────────────────────────────────── */
.nav__dd{ position:relative; display:inline-flex; align-items:center; }
.nav__dd-trigger{ display:inline-flex; align-items:center; gap:6px; cursor:pointer; background:none; border:none; padding:0; font-family:inherit; }
.nav__dd:hover .nav__dd-trigger, .nav__dd:focus-within .nav__dd-trigger, .nav__dd.is-open .nav__dd-trigger{ color:#fff; }
.nav__dd-caret{ display:inline-block; font-size:9px; line-height:1; opacity:.6;
  transition:transform .28s cubic-bezier(.22,.61,.36,1), opacity .25s; }
.nav__dd:hover .nav__dd-caret, .nav__dd:focus-within .nav__dd-caret, .nav__dd.is-open .nav__dd-caret{ transform:rotate(180deg); opacity:1; }
.nav__dd-menu{ position:absolute; top:calc(100% + 16px); left:50%;
  transform:translateX(-50%) translateY(10px); min-width:264px; padding:8px;
  background:linear-gradient(180deg,rgba(14,18,30,.98),rgba(8,11,20,.985));
  border:1px solid rgba(255,255,255,.10); border-radius:16px;
  box-shadow:0 30px 72px -26px rgba(0,0,0,.88), 0 0 0 1px rgba(0,229,255,.05);
  -webkit-backdrop-filter:blur(18px); backdrop-filter:blur(18px);
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .22s cubic-bezier(.22,.61,.36,1), transform .22s cubic-bezier(.22,.61,.36,1), visibility .22s;
  z-index:80; }
.nav__dd-menu::before{ content:""; position:absolute; top:-18px; left:0; right:0; height:18px; }
.nav__dd-menu::after{ content:""; position:absolute; top:-6px; left:50%; transform:translateX(-50%) rotate(45deg);
  width:12px; height:12px; background:rgba(14,18,30,.98);
  border-left:1px solid rgba(255,255,255,.10); border-top:1px solid rgba(255,255,255,.10); }
.nav__dd:hover .nav__dd-menu, .nav__dd:focus-within .nav__dd-menu, .nav__dd.is-open .nav__dd-menu{
  opacity:1; visibility:visible; pointer-events:auto; transform:translateX(-50%) translateY(0); }
.nav__dd-menu a{ display:flex; align-items:flex-start; gap:11px; position:relative; z-index:1;
  padding:10px 12px; border-radius:11px; color:rgba(255,255,255,.86); text-decoration:none;
  transition:background .18s, color .18s; }
.nav__dd-menu a .dd-ic{ font-size:15px; line-height:1.4; opacity:.95; flex-shrink:0; width:18px; text-align:center; }
.nav__dd-menu a .dd-tx{ display:flex; flex-direction:column; }
.nav__dd-menu a .dd-tx b{ font-weight:600; font-size:14px; line-height:1.3; letter-spacing:-.01em; }
.nav__dd-menu a .dd-tx small{ font-size:11.5px; line-height:1.3; color:#75879b; margin-top:2px; }
.nav__dd-menu a:hover, .nav__dd-menu a:focus-visible{ background:rgba(0,229,255,.10); color:#fff; }
.nav__dd-menu a:hover .dd-tx small{ color:rgba(255,255,255,.6); }
.nav__dd-menu a.is-active .dd-tx b{ color:#9af5ff; }

/* ── OVERFLOW-PROOF collapse ──────────────────────────────────────────────
   global-nav.js measures the cluster's real width against the available
   space and adds .nav--compact when (and ONLY when) it would not fit, after
   first trying to drop [data-nav-collapse] items in priority order. Because
   the decision is measured live, it is immune to the cross-machine font /
   zoom / scrollbar differences that used to clip the CTA on some laptops.

   Pre-JS safety net: a conservative media query collapses to the burger
   below 1240px so a no-JS / pre-hydration paint can never show a clipped
   desktop nav. JS then refines upward (it can still collapse a wide window
   whose font rendering overflows, or expand one that fits). */
@media(max-width:1239.98px){ html:not(.nav-js) #main-nav .nav__desktop{ position:absolute; visibility:hidden; pointer-events:none; }
  html:not(.nav-js) #main-nav .nav__burger{ display:grid; } }

/* compact = full burger. The cluster stays in the DOM, absolutely positioned
   and hidden, so its natural width remains measurable for the expand check. */
#main-nav.nav--compact .nav__desktop{ position:absolute; left:-9999px; top:0; visibility:hidden;
  pointer-events:none; width:max-content; }
#main-nav.nav--compact .nav__cta{ display:none; }   /* CTA lives in the drawer when compact */
#main-nav.nav--compact .nav__burger{ display:grid; }
#main-nav .nav__burger{ display:none; }

/* ── premium burger: CSS-drawn (renders pixel-identical on every OS, unlike
   the unicode ☰ that varies by platform), 44x44 tap target, ringed glass ── */
#main-nav .nav__burger{ width:44px; height:44px; padding:0; margin:0; place-items:center;
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.12); border-radius:12px;
  color:#fff; cursor:pointer; -webkit-tap-highlight-color:transparent; font-size:0; line-height:0; }
#main-nav .nav__burger .nav__burger-bars{ position:relative; width:19px; height:13px; display:block; }
#main-nav .nav__burger .nav__burger-bars i{ position:absolute; left:0; right:0; height:2px; border-radius:2px;
  background:currentColor; transition:transform .32s cubic-bezier(.22,1,.36,1), opacity .2s ease; }
#main-nav .nav__burger .nav__burger-bars i:nth-child(1){ top:0; }
#main-nav .nav__burger .nav__burger-bars i:nth-child(2){ top:50%; transform:translateY(-50%); }
#main-nav .nav__burger .nav__burger-bars i:nth-child(3){ bottom:0; }
/* when the drawer is open the burger morphs to an X (global-nav.js mirrors the
   drawer's open state onto the nav as .is-drawer-open) */
#main-nav.is-drawer-open .nav__burger-bars i:nth-child(1){ top:50%; transform:translateY(-50%) rotate(45deg); }
#main-nav.is-drawer-open .nav__burger-bars i:nth-child(2){ opacity:0; }
#main-nav.is-drawer-open .nav__burger-bars i:nth-child(3){ bottom:auto; top:50%; transform:translateY(-50%) rotate(-45deg); }

/* premium glass hairline + subtle top sheen on the bar (compositor-cheap) */
#main-nav.nav::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:1px; pointer-events:none;
  background:linear-gradient(90deg, transparent, rgba(0,229,255,.18) 28%, rgba(154,245,255,.22) 50%, rgba(0,229,255,.18) 72%, transparent);
  opacity:0; transition:opacity .5s ease; }
#main-nav.nav.scrolled::after{ opacity:1; }

/* body scroll-lock while the drawer is open (set by global-nav.js, with a
   scrollbar-width compensation var so the page never shifts under the overlay) */
body.nav-drawer-lock{ overflow:hidden !important; touch-action:none; padding-right:var(--nav-sbw,0px); }

/* ── LOW-PERF mode (weak CPU / low RAM / Save-Data) ──────────────────────────
   backdrop-filter blur is the single most expensive compositor effect on old
   GPUs. Drop it for solid, opaque chrome — keeps the look near-identical while
   removing the per-frame blur recomputation. Set estate-wide by global-nav.js. */
html.low-perf #main-nav.nav,
html.low-perf #main-nav.nav.scrolled{ -webkit-backdrop-filter:none !important; backdrop-filter:none !important; background:rgba(4,6,11,.94) !important; }
html.low-perf .nav__dd-menu{ -webkit-backdrop-filter:none !important; backdrop-filter:none !important; background:linear-gradient(180deg,#0e1220,#080b14) !important; }
html.low-perf .drawer{ -webkit-backdrop-filter:none !important; backdrop-filter:none !important; }
html.low-perf #main-nav.nav::after{ animation:none !important; }

/* ── drawer: grouped canonical menu ────────────────────────────────────── */
.drawer{ padding-top:max(18px, env(safe-area-inset-top)); padding-bottom:max(56px, calc(env(safe-area-inset-bottom) + 40px));
  padding-left:max(24px, env(safe-area-inset-left)); padding-right:max(24px, env(safe-area-inset-right)); }
.drawer .gnv-h{ margin:20px 0 4px; font:600 10.5px/1 'IBM Plex Mono',ui-monospace,monospace;
  letter-spacing:.18em; text-transform:uppercase; color:rgba(0,229,255,.7); }
.drawer .gnv-h:first-of-type{ margin-top:6px; }
.drawer a.gnv-sub{ padding-left:10px; }

@media (prefers-reduced-motion:reduce){
  .nav__dd-menu{ transition:opacity .12s linear, visibility .12s; transform:translateX(-50%); }
  .nav__dd:hover .nav__dd-menu, .nav__dd:focus-within .nav__dd-menu, .nav__dd.is-open .nav__dd-menu{ transform:translateX(-50%); }
  .nav__dd-caret{ transition:none; }
}

/* ════════════════════════════════════════════════════════════════════════
   GNV-FEEL — additive interaction-polish layer (appended 2026-06-12)
   Refines how the canonical menu FEELS. Zero changes to menu structure,
   link sets, ordering, density, or breakpoints owned above; this layer
   only adds hover/focus physics, dropdown + drawer easing, active-page
   indication, and focus-visible rings. Transform + opacity motion only;
   every effect has a prefers-reduced-motion pair at the end of the block.
   ════════════════════════════════════════════════════════════════════════ */
:root{
  --gnv-spring:cubic-bezier(.34,1.26,.42,1);  /* gentle overshoot for small physics */
  --gnv-out:cubic-bezier(.22,1,.36,1);        /* long settle for entrances */
  --gnv-in:cubic-bezier(.4,0,1,1);            /* quick exits */
}

/* 1 ── top-level links: 1px lift + underline spring ──────────────────── */
#main-nav .nav__links > a:not(.nav__signin):not(.nav__signup),
#main-nav .nav__dd-trigger{
  position:relative;
  transition:color .22s ease, transform .3s var(--gnv-spring);
}
#main-nav .nav__links > a:not(.nav__signin):not(.nav__signup)::after,
#main-nav .nav__dd-trigger::after{
  content:""; position:absolute; left:1px; right:1px; bottom:-9px; height:2px;
  border-radius:2px; pointer-events:none;
  background:linear-gradient(90deg, rgba(0,229,255,0), #00e5ff 28%, #9af5ff 72%, rgba(154,245,255,0));
  transform:scaleX(0); opacity:.95;
  transition:transform .34s var(--gnv-spring);
}
#main-nav .nav__dd-trigger::after{ right:16px; } /* bar sits under the label, not the caret */
#main-nav .nav__links > a:not(.nav__signin):not(.nav__signup):hover,
#main-nav .nav__links > a:not(.nav__signin):not(.nav__signup):focus-visible,
#main-nav .nav__dd:hover .nav__dd-trigger,
#main-nav .nav__dd:focus-within .nav__dd-trigger,
#main-nav .nav__dd.is-open .nav__dd-trigger{ transform:translateY(-1px); }
#main-nav .nav__links > a:not(.nav__signin):not(.nav__signup):hover::after,
#main-nav .nav__links > a:not(.nav__signin):not(.nav__signup):focus-visible::after,
#main-nav .nav__dd:hover .nav__dd-trigger::after,
#main-nav .nav__dd:focus-within .nav__dd-trigger::after,
#main-nav .nav__dd.is-open .nav__dd-trigger::after{ transform:scaleX(1); }

/* active page: the underline stays lit and the link carries the tint.
   The :not chain mirrors the base link selector so the active state
   outranks it in the cascade without touching the canonical rule. */
#main-nav .nav__links > a.is-active:not(.nav__signin):not(.nav__signup),
#main-nav .nav__dd-trigger.is-active{ color:#9af5ff; }
#main-nav .nav__links > a.is-active:not(.nav__signin):not(.nav__signup)::after,
#main-nav .nav__dd--here .nav__dd-trigger::after{ transform:scaleX(1); }

/* sign-in / create-account chips: restrained lift (base transition is
   declared !important, so the full list is restated to extend it) */
#main-nav .nav__signin, #main-nav .nav__signup{
  transition:border-color .25s, color .25s, transform .3s var(--gnv-spring)!important;
}
#main-nav .nav__signin:hover, #main-nav .nav__signup:hover{ transform:translateY(-1px); }
#main-nav .nav__signin:active, #main-nav .nav__signup:active{ transform:translateY(0) scale(.97); }

/* platform CTA: tactile press pairing its existing hover lift */
#main-nav .nav__cta:active{ transform:translateY(0) scale(.98); }

/* 2 ── brand: quiet, slow, no theatrics ──────────────────────────────── */
#main-nav .brand__logo-img{ transition:transform .6s var(--gnv-out); transform-origin:left center; }
#main-nav .brand:hover .brand__logo-img{ transform:scale(1.02); }
#main-nav .brand:active .brand__logo-img{ transform:scale(.995); }

/* 3 ── dropdown physics: dimensional open, quick exit, cascading rows ── */
.nav__dd-menu{
  transform-origin:top center; will-change:transform,opacity;
  transform:translateX(-50%) translateY(9px) scale(.97);
  transition:opacity .16s var(--gnv-in), transform .16s var(--gnv-in), visibility 0s .16s;
}
:is(.nav__dd:hover, .nav__dd:focus-within, .nav__dd.is-open) .nav__dd-menu{
  transform:translateX(-50%) translateY(0) scale(1);
  transition:opacity .3s var(--gnv-out), transform .34s cubic-bezier(.26,1.18,.36,1), visibility 0s;
}
.nav__dd-menu a{ opacity:0; transform:translateY(5px); transition:none; }
:is(.nav__dd:hover, .nav__dd:focus-within, .nav__dd.is-open) .nav__dd-menu a{
  opacity:1; transform:none;
  transition:opacity .3s var(--gnv-out), transform .3s var(--gnv-out), background .18s, color .18s;
}
:is(.nav__dd:hover, .nav__dd:focus-within, .nav__dd.is-open) .nav__dd-menu a:nth-child(1){ transition-delay:.02s,.02s,0s,0s; }
:is(.nav__dd:hover, .nav__dd:focus-within, .nav__dd.is-open) .nav__dd-menu a:nth-child(2){ transition-delay:.055s,.055s,0s,0s; }
:is(.nav__dd:hover, .nav__dd:focus-within, .nav__dd.is-open) .nav__dd-menu a:nth-child(3){ transition-delay:.09s,.09s,0s,0s; }
:is(.nav__dd:hover, .nav__dd:focus-within, .nav__dd.is-open) .nav__dd-menu a:nth-child(4){ transition-delay:.125s,.125s,0s,0s; }
:is(.nav__dd:hover, .nav__dd:focus-within, .nav__dd.is-open) .nav__dd-menu a:nth-child(n+5){ transition-delay:.16s,.16s,0s,0s; }
:is(.nav__dd:hover, .nav__dd:focus-within, .nav__dd.is-open) .nav__dd-menu a:hover,
:is(.nav__dd:hover, .nav__dd:focus-within, .nav__dd.is-open) .nav__dd-menu a:focus-visible{ transform:translateX(3px); }

/* 4 ── mobile drawer: animated sheet, reachable overflow, sticky close ─ */
.drawer{
  display:flex;                /* replaces the display toggle so open/close can animate */
  visibility:hidden; opacity:0; pointer-events:none;
  transform:translateY(14px);
  justify-content:flex-start;  /* centered columns clip tall menus; top-anchor + scroll */
  overflow-y:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch;
  padding:18px 24px 56px;
  transition:opacity .24s var(--gnv-in), transform .24s var(--gnv-in), visibility 0s .24s;
}
.drawer.open{
  visibility:visible; opacity:1; pointer-events:auto; transform:none;
  transition:opacity .34s var(--gnv-out), transform .38s var(--gnv-out), visibility 0s;
}
@keyframes gnvDrawerItem{ from{ opacity:0; transform:translateY(12px); } to{ opacity:1; transform:none; } }
.drawer.open > a, .drawer.open .gnv-h{ animation:gnvDrawerItem .5s var(--gnv-out) backwards; }
.drawer.open > :nth-child(-n+4){ animation-delay:.04s; }
.drawer.open > :nth-child(n+5):nth-child(-n+7){ animation-delay:.09s; }
.drawer.open > :nth-child(n+8):nth-child(-n+10){ animation-delay:.14s; }
.drawer.open > :nth-child(n+11):nth-child(-n+13){ animation-delay:.19s; }
.drawer.open > :nth-child(n+14):nth-child(-n+16){ animation-delay:.24s; }
.drawer.open > :nth-child(n+17){ animation-delay:.29s; }
.drawer a{ transition:color .2s, transform .18s var(--gnv-out); }
.drawer a:not(.btn):hover{ color:#9af5ff; }
.drawer a:active{ transform:scale(.97); }
.drawer a.is-active:not(.btn){ color:#9af5ff; }
.drawer .x{
  position:sticky; top:6px; align-self:flex-end; z-index:5; order:-1;
  width:44px; height:44px; padding:0; margin:0 -6px 2px 0;
  display:grid; place-items:center; font-size:21px; line-height:1;
  border-radius:13px; color:#fff; cursor:pointer;
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.14);
  transition:transform .24s var(--gnv-spring), background .2s, border-color .2s;
}
.drawer .x:hover{ background:rgba(255,255,255,.1); border-color:rgba(255,255,255,.26); transform:scale(1.05); }
.drawer .x:active{ transform:scale(.92); }

/* 5 ── burger: tactile, ringed ─────────────────────────────────────────── */
#main-nav .nav__burger{ border-radius:11px; transition:transform .22s var(--gnv-spring); }
#main-nav .nav__burger:hover{ transform:scale(1.06); }
#main-nav .nav__burger:active{ transform:scale(.88); }

/* 6 ── focus-visible rings, one language everywhere ────────────────────── */
#main-nav a:focus-visible, #main-nav button:focus-visible,
.drawer a:focus-visible, .drawer button:focus-visible{
  outline:2px solid rgba(0,229,255,.9); outline-offset:3px; border-radius:10px;
}

/* 7 ── reduced motion: every effect above collapses to calm fades ──────── */
@media (prefers-reduced-motion:reduce){
  #main-nav .nav__links > a, #main-nav .nav__dd-trigger,
  #main-nav .nav__signin, #main-nav .nav__signup,
  #main-nav .nav__cta, #main-nav .nav__burger, #main-nav .brand__logo-img{
    transition:color .15s linear, border-color .15s linear, background .15s linear;
    transform:none!important;
  }
  #main-nav .nav__signin, #main-nav .nav__signup{ transition:border-color .15s linear, color .15s linear!important; }
  #main-nav .nav__links > a::after, #main-nav .nav__dd-trigger::after{ transition:none; }
  .nav__dd-menu{ transform:translateX(-50%); will-change:auto; transition:opacity .12s linear, visibility .12s; }
  :is(.nav__dd:hover, .nav__dd:focus-within, .nav__dd.is-open) .nav__dd-menu{ transform:translateX(-50%); transition:opacity .12s linear, visibility 0s; }
  .nav__dd-menu a:nth-child(n),
  :is(.nav__dd:hover, .nav__dd:focus-within, .nav__dd.is-open) .nav__dd-menu a:nth-child(n){
    opacity:1; transform:none!important; transition:background .18s, color .18s; transition-delay:0s;
  }
  .drawer{ transform:none; transition:opacity .14s linear, visibility 0s .14s; }
  .drawer.open{ transform:none; transition:opacity .14s linear, visibility 0s; }
  .drawer.open > a, .drawer.open .gnv-h{ animation:none; }
  .drawer a, .drawer .x{ transform:none!important; transition:color .15s linear, background .15s linear, border-color .15s linear; }
  #main-nav .nav__burger-bars i{ transition:opacity .12s linear; }   /* morph snaps, no rotate easing */
  #main-nav.nav::after{ transition:none; }
}