/* ══ mobile nav as a bottom sheet ══════════════════════════════
   The menu now rises from the bottom of the screen like a native
   app drawer: rounded top corners, a drag-handle hint, big
   thumb-friendly rows, and a dimmed backdrop. Closing: tap the
   dark area (the existing outside-click handler) or the X. */
@media(max-width:960px){
  /* backdrop-filter on .nav-in made it the containing block for the
     fixed sheet, pinning the sheet to the header instead of the
     viewport. Move the glass blur to a pseudo-element - same look,
     no containing-block side effect. */
  header.nav .nav-in{
    position:relative!important;isolation:isolate}
  header.nav .nav-in::before{
    content:'';position:absolute;inset:-1px;z-index:-1;border-radius:inherit}
  .nav-links{
    inset:auto 0 0 0!important;top:auto!important;bottom:0!important;
    border-radius:24px 24px 0 0!important;
    max-height:82dvh!important;overflow-y:auto!important;
    padding:22px 14px calc(20px + env(safe-area-inset-bottom,0px))!important;
    background:rgba(255,255,255,.98)!important;border-top:1px solid var(--line);
    box-shadow:0 -30px 80px rgba(10,27,61,.12)!important;
    transform:translateY(102%)!important;opacity:1!important;
    transition:transform .38s cubic-bezier(.32,.72,.28,1)!important;
    z-index:120!important}
  .nav-links::before{
    content:'';position:absolute;top:9px;left:50%;transform:translateX(-50%);
    width:44px;height:5px;border-radius:99px}
  .nav-links.open{transform:none!important}
  body:has(.nav-links.open) #a11yBtn,
  body:has(.nav-links.open) .a11y-btn,
  body:has(.nav-links.open) #ai-fab,
  body:has(.nav-links.open) .ai-teaser,
  body:has(.nav-links.open) #tqStickyCta{
    opacity:0!important;pointer-events:none!important}
  body:has(.nav-links.open)::before{
    content:'';position:fixed;inset:0;z-index:98}
  /* rows: big, rounded, thumb-friendly */
  .nav-links>li{}
  .nav-links>li>a,.nav-links>li>button{
    display:flex!important;align-items:center!important;justify-content:space-between!important;
    width:100%!important;padding:16px 14px!important;
    font-size:17px!important;font-weight:600!important;
    border:none;border-radius:14px!important;
    background:none;color:var(--navy-900);
    transition:background .2s!important}
  .nav-links>li>a:active,.nav-links>li>button:active,
  .nav-links>li.open>button{}
  .nav-links>li+li{margin-top:2px!important}
  .nav-links>li>button svg{width:18px;height:18px;opacity:.55;transition:transform .25s}
  .nav-links>li.open>button svg{transform:rotate(180deg)}
  .nav-links .mobile-cta{
    margin-top:10px!important;border-radius:14px!important;
    color:var(--blue-600);justify-content:center!important;
    font-weight:700!important}
  /* mega panels inside the sheet: dark icon tiles + one-line headlines */
  .nav-links .mega-headline h3{display:flex!important;flex-wrap:wrap!important;
    gap:0 4px!important;font-size:16px!important;line-height:1.35!important}
  .nav-links .mega-headline h3 br{display:none!important}
  /* no tile behind the icons - the glyph sits straight on the sheet,
     so nothing can flash a stray shade while the panel opens */
  header.nav .nav-links .mega .mega-ic,
  header.nav .nav-links .mega .mega-ic.svc-ic,
  header.nav .nav-links .mega .mega-item:hover .mega-ic{border-radius:0!important;
    width:30px!important;height:30px!important;
    transition:none!important}
  .nav-links .mega-ic svg{width:100%!important;height:100%!important;overflow:visible}
  /* the built-in light plate inside each 40x40 icon goes away too */
  .nav-links .mega-ic svg > rect:first-child{}
  /* ONE light-blue tone - but only for shapes that actually declare a
     paint. Outline icons (the "who we are" set) carry no fill attr and
     inherit stroke from currentColor, so they must NOT be filled or
     they turn into solid blobs. Selector weights are deliberate: the
     plate + inner-white rules must out-specify the general one. */
  .nav-links .mega-ic svg [stroke]:not([stroke="none"]){}
  .nav-links .mega-ic svg [fill]:not([fill="none"]){}
  .nav-links .mega-ic svg text[fill]:not([fill="none"]){}
  /* shapes that were white sit INSIDE a glyph - keep them dark so the
     detail (windows, dividers) still reads instead of blobbing out */
  .nav-links .mega-ic svg [fill="#fff"]:not([fill="none"]),
  .nav-links .mega-ic svg [fill="#FFF"]:not([fill="none"]),
  .nav-links .mega-ic svg [fill="#ffffff"]:not([fill="none"]),
  .nav-links .mega-ic svg [fill="#FFFFFF"]:not([fill="none"]),
  .nav-links .mega-ic svg [fill="white"]:not([fill="none"]){fill:#0A1B3D!important}
  /* the built-in light plate inside each 40x40 icon disappears */
  .nav-links .mega-ic svg > rect:first-child[fill][width]{}
  /* coins panel inside the sheet: compact 2-column grid */
  .coins-mega .mega-inner{display:block!important}
  .coins-mega .mega-headline{display:flex!important;flex-direction:row!important;
    align-items:center!important;justify-content:space-between!important;
    gap:10px!important;margin-bottom:6px!important}
  .coins-mega .mega-headline h3{font-size:15px!important;line-height:1.3!important;
    display:flex!important;flex-wrap:wrap!important;gap:0 4px!important}
  .coins-mega .mega-headline h3 br{display:none!important}
  .coins-mega .coins-all-link{display:none!important}
  .coins-mega .mega-col + .mega-col{}
  #coinsMegaCols{display:grid!important;grid-template-columns:1fr 1fr!important;
    gap:0 8px!important;align-items:start!important;
    border-top:1px solid rgba(10,27,61,.096)!important;
    padding-top:6px!important;margin-top:4px!important}
  .coins-col{min-width:0!important;width:auto!important}
  .coin-row{display:flex!important;align-items:center!important;
    justify-content:space-between!important;width:100%!important;
    padding:9px 12px!important}
  .coin-row-right{display:flex!important;align-items:center!important;gap:7px!important;min-width:0}
  .coin-row-left{flex:none}
  .coin-ic{width:26px!important;height:26px!important}
  .coin-name{font-size:12px!important;white-space:nowrap}
  .coin-sym{font-size:10px!important}
  .coin-price{font-size:12px!important;white-space:nowrap}
  .coin-pct{font-size:10px!important}
  /* a soft fade + bouncing chevron pinned to the sheet's visible
     bottom - the cue that the menu continues below */
  .nav-links::after{
    content:'\2304';position:sticky;bottom:calc(-20px - env(safe-area-inset-bottom,0px));
    display:flex;align-items:flex-end;justify-content:center;flex:none;
    height:46px;margin:-34px -14px calc(-20px - env(safe-area-inset-bottom,0px));z-index:5;font-size:24px;line-height:.6;
    pointer-events:none;animation:tqSheetHint 1.6s ease-in-out infinite}
}
@keyframes tqSheetHint{0%,100%{transform:translateY(0)}50%{transform:translateY(4px)}}