/* ============================================================================
   Atlas mobile navigation overlay — ONE shared component for every page.
   Figma 774:58836 "open menu", 393 x 852.

   Replaces the three mobile menus the site used to carry:
     .abh-menu   (/about, atlas-ab-hero.css/js)
     .afx-mmenu  (/article, atlas-chrome-m.css/js)
     .mobile-menu(legacy .nav-glass pages, site.css/site.js)

   Markup: fragments/mobilenav.html. Behaviour: assets/atlas-mobilenav.js.
   Rolled out by outputs/roll_mobilenav.py. Prefix: afx-mnav-.

   FIGMA -> CSS conversions applied (see ABOUT-CONVENTIONS.md §3):
     LAYER_BLUR / BACKGROUND_BLUR radius is ~2x the CSS blur():
       34 -> blur(17px)   146 -> blur(73px)
     EXCEPT the main backdrop, which takes the frame's full 40 — see the note
     on .afx-mnav-backdrop.
     A gradient stroke is a masked pseudo-element, never a border-color.

   DECLARED DEVIATIONS (also listed in fragments/mobilenav.html):
   1. The panel's own base fill #051F1D is NOT painted. It sits UNDER the
      backdrop image layer in Figma and never shows; painting it opaque would
      destroy the see-through that is the whole point of this design.
   2. The frame draws five flat links. We ship the current six-item IA with
      accordions, so the resting rows adopt the hover variant's geometry
      (345 wide, radius 16, padding 16, gap 4) rather than the 40px/gap-32
      flat rows. Pitch is 76px vs the frame's 72px; every row clears the 44px
      tap target, which the drawn 40px row does not.
   3. Hover/active paints the plate fill but keeps padding 16 (height 72)
      instead of the variant's padding 12/height 64 — swapping padding on
      hover would reflow the whole column under the pointer.
   4. Second-level (child) rows are 18px / line-height 24 — the same step the
      frame uses for the Log in / Get Funded labels.
   5. Parents that own children carry a caret. The frame has no accordions, so
      it draws none; without it there is no way to tell a toggle from a link.
   6. The language panel is 240 tall, not 200: the frame draws five rows, the
      site ships six locales. Row geometry is the frame's, exactly.
   7. On a page with no announcement bar (data-bar="false") the overlay's bar
      strip is suppressed and the navbar moves to y=8, so the overlay chrome
      lands where that page's own chrome is.
   ========================================================================= */

/* ------------------------------------------------------------------ reset */
.afx-mnav *, .afx-mnav *::before, .afx-mnav *::after { box-sizing: border-box; }

/* =========================================================== the burger ===
   Lives in the page navbar. Figma 774:58846 draws the CLOSE button; the
   burger is the same 48x48 beige pill and morphs into it.                  */
.afx-mnav-burger { display: none; }

@media (max-width: 1100px) {
  .afx-mnav-burger {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    width: 48px;
    height: 48px;
    flex: none;
    padding: 0;
    border: 0;
    border-radius: var(--r-round);
    background: var(--af-beige);
    box-shadow: 0 8px 12px 0 rgba(0,0,0,.08);
    cursor: pointer;
    transition: transform var(--t-instant) var(--e-out);
  }
  .afx-mnav-burger span {
    display: block;
    width: 18px;
    height: 2px;
    border-radius: 2px;
    background: var(--af-slate-teal);
    transition: transform var(--t-fast) var(--e-out);
  }
  .afx-mnav-burger:active { transform: scale(.96); }
  /* the page navbar's desktop-only furniture, once the burger is in charge */
  .nav-glass .afx-mnav-burger { margin-left: 4px; }
}

/* ================================================================ scroll ==
   The page behind must not move while the overlay is open, and must not jump
   when it closes. overflow:hidden on both scrollers freezes the position in
   place — no position:fixed body, so scrollTop is never reset and there is
   nothing to restore.                                                       */
html.afx-mnav-lock,
html.afx-mnav-lock body { overflow: hidden; }

/* ================================================================ overlay ==
   774:58836 — 393 x 852, clipsContent. Covers the WHOLE viewport.
   Above 1100px there is a desktop link row, so the overlay does not exist.  */
.afx-mnav { display: none; }

@media (max-width: 1100px) {

/* iOS SAFARI, 3 Aug 2026 — the root must NEVER carry opacity < 1.
   An ancestor with a fractional opacity creates a stacking context that cuts a
   descendant's backdrop-filter off from its backdrop root, and WebKit does not
   re-sample when the opacity animation ends. That is why the blur was missing
   "most of the time" on a real handset while devtools' phone view looked fine:
   whether you got the blur depended on whether the compositor happened to
   repaint after the fade. The root now only toggles visibility; the fade lives
   on .afx-mnav-panel, which is a SIBLING of the backdrop, not its parent. */
.afx-mnav {
  display: block;
  position: fixed;
  inset: 0;
  z-index: 1000;
  visibility: hidden;
  pointer-events: none;
  transition: visibility 0s linear var(--t-base);
}
.afx-mnav[data-open="true"] {
  visibility: visible;
  pointer-events: auto;
  transition: visibility 0s linear 0s;
}
/* The fade sits on the PANEL only. It must never sit on the backdrop, and
   never on an ancestor of it:
     - an ancestor with fractional opacity severs backdrop-filter from its
       backdrop root on WebKit, and the blur silently stops working;
     - animating opacity ON the filtered element re-runs a full-viewport blur
       every frame of the transition. On a phone GPU, over a photographic hero,
       that stalls for seconds and paints black while it composites — which is
       exactly the "everything goes black, then it eventually loads".
   So: the backdrop is static and always opaque-to-itself; only the panel
   animates. */
.afx-mnav-panel {
  opacity: 0;
  transition: opacity var(--t-base) var(--e-out);
}
.afx-mnav[data-open="true"] .afx-mnav-panel {
  opacity: 1;
}

/* 774:58837 "Overlay" — in Figma an image fill of the page behind + a teal
   wash, with LAYER_BLUR 40 over the lot. In CSS that is a real
   backdrop-filter: the page genuinely shows through, blurred. The wash's
   middle stop is 40% alpha, which is what lets it read through.
   NOTE (ABOUT-CONVENTIONS §3): never combine this with mix-blend-mode —
   Chrome renders that pair as an opaque plate. There is no blend mode here. */
.afx-mnav-backdrop {
  position: absolute;
  inset: 0;
  /* NO backdrop-filter here. See the note below — it is opt-in, not default. */
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(11,88,82,.80) 0%, rgba(4,30,28,.94) 72%),
    linear-gradient(89.8deg, #053F3B 0%, rgba(5,63,59,.84) 40%,
                    rgba(5,63,59,.84) 60%, #053F3B 100%),
    var(--af-hero-glow);
}

/* ===========================================================================
   WHY THE BLUR IS OPT-IN AND OFF ON PHONES  —  3 Aug 2026

   A full-viewport backdrop-filter forces WebKit to rasterise the ENTIRE
   backdrop root before it can sample it. On this site that root contains, on
   every single page, a decorative glow div carrying `filter: blur(258px)` over
   a 1693x956 box — and on the home page three further nested backdrop-filters
   in the hero. Blur cost is O(area x radius); asking a phone GPU to resolve
   that stack before it can paint the menu took ~15s to open and ~5s to close,
   painting half the viewport black while it ground through it. Desktop and
   devtools' phone view never showed it because they have the memory bandwidth
   to absorb it.

   So the scrim above is a static, tuned approximation of the blurred result —
   no sampling, no compositing of the page, opens in one frame. The blur is
   restored only where there is a real pointer, i.e. a laptop or desktop, where
   it is affordable and where the design is reviewed.

   Do not move this back to an unconditional backdrop-filter without testing on
   a physical handset. It is not a Chrome-vs-Safari difference; it is a cost.
   =========================================================================== */
@media (hover: hover) and (pointer: fine) {
  .afx-mnav-backdrop {
    background: linear-gradient(89.8deg, #053F3B 0%, rgba(5,63,59,.58) 40%,
                                rgba(5,63,59,.58) 60%, #053F3B 100%);
    backdrop-filter: blur(28px);
    -webkit-backdrop-filter: blur(28px);
  }
}


/* while the overlay is open the page's burger sits at the SAME 48x48 box as
   the close button. On a real touch device the close fires, the overlay hides,
   and the synthesised click then lands on the burger underneath and reopens it
   — which reads as "the close button does nothing". Take the burger out of
   hit-testing for as long as the overlay is up. */
.afx-mnav-open .afx-mnav-burger {
  pointer-events: none;
}

/* the dialog itself — same box as the frame */
.afx-mnav-panel {
  position: absolute;
  inset: 0;
  overflow: hidden;            /* clipsContent */
  font-family: var(--font-alt);
}

/* ---------------------------------------------------- 774:58859 bar, y=0
   Carries the shared .afx-bar class as well, so the announcement bar inside
   the overlay is the same component as the one on the page — one set of
   styles, in atlas-chrome.css.                                             */
.afx-mnav-bar {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 56px;
  z-index: 2;
  /* self-sufficient: the legacy .nav-glass pages never loaded
     atlas-chrome.css, so .afx-bar's own rules may not be present */
  display: flex;
  flex-direction: row;
  gap: 12px;
  padding: 8px 10px;
  justify-content: center;
  align-items: center;
  background: var(--af-bar);
}
.afx-mnav[data-bar="false"] .afx-mnav-bar { display: none; }

/* Four market pills do not fit 393. Same scroll rail atlas-chrome.css gives
   the page-level bar below 720, duplicated here for the same reason the flex
   rules above are duplicated: the legacy .nav-glass pages never load
   atlas-chrome.css, and this overlay is 393 wide on every page. */
.afx-mnav-bar {
  justify-content: flex-start;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.afx-mnav-bar::-webkit-scrollbar { display: none; }
.afx-mnav-bar .afx-bar__pill { flex: none; scroll-snap-align: start; }
.afx-mnav-bar .afx-bar__rule { flex: none; }

/* -------------------------------------------- 774:58838 navbar, 377x64@8,64
   fill rgba(255,255,255,.1), radius 48, GLASS, 1px INSIDE gradient stroke at
   20%. left/right 8 rather than a fixed 377 so it tracks the viewport above
   393 and lands on exactly 377 at 393.                                     */
.afx-mnav-nav {
  position: absolute;
  top: 64px;
  left: 8px;
  right: 8px;
  height: 64px;
  z-index: 3;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  padding: 8px;
  border-radius: var(--r-48);
  background: var(--w-10);
  /* DECLARED DEVIATION: Figma GLASS exposes no radius and has no CSS
     equivalent; approximated with a backdrop blur, same as .afx-nav. */
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}
.afx-mnav[data-bar="false"] .afx-mnav-nav { top: 8px; }
.afx-mnav-nav::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: var(--af-hair-nav);
  opacity: .2;                 /* the stroke's own opacity in the file */
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask-composite: exclude;
  pointer-events: none;
}

.afx-mnav-brand { display: flex; align-items: center; padding: 0 14px; text-decoration: none; }
.afx-mnav-brand img { display: block; width: 135px; height: 18px; filter: brightness(0) invert(1); }

.afx-mnav-actions { display: flex; flex-direction: row; align-items: center; gap: 8px; }

/* 774:58844 — globe, 48x48, radius 50, fill rgba(255,255,255,.06),
   1px INSIDE rgba(255,255,255,.17), icon 24x24 */
.afx-mnav-globe {
  width: 48px; height: 48px;
  flex: none;
  display: flex; align-items: center; justify-content: center;
  padding: 0;
  border: 1px solid var(--w-17);
  border-radius: var(--r-50);
  background: var(--w-06);
  cursor: pointer;
  transition: background-color var(--t-fast) var(--e-out),
              transform var(--t-instant) var(--e-out);
}
.afx-mnav-globe img { display: block; width: 24px; height: 24px; }
.afx-mnav-globe:active { transform: scale(.97); }

/* 774:58846 — close, 48x48, radius 120, fill #F9F9F7,
   shadow 0 8 12 rgba(0,0,0,.08), glyph 28x28 in #263F42 */
.afx-mnav-close {
  width: 48px; height: 48px;
  flex: none;
  display: flex; align-items: center; justify-content: center;
  padding: 0;
  border: 0;
  border-radius: var(--r-round);
  background: var(--af-beige);
  box-shadow: 0 8px 12px 0 rgba(0,0,0,.08);
  color: var(--af-slate-teal);
  cursor: pointer;
  transition: background-color var(--t-fast) var(--e-out),
              transform var(--t-instant) var(--e-out);
}
.afx-mnav-close svg { display: block; width: 28px; height: 28px; }
.afx-mnav-close:active { transform: scale(.96); }

/* ------------------------------------------------- 774:58848 link column
   justify: CENTER — the column is vertically centred in the space between
   the navbar and the bottom pair. Six parents plus an open accordion exceed
   852 on a short handset, so this region scrolls while the bar, navbar and
   buttons stay put.
   `margin-block: auto` rather than justify-content: center, because a
   centred flex child gets its overflowing top edge clipped and unreachable. */
.afx-mnav-scroll {
  position: absolute;
  top: 128px;                  /* navbar bottom */
  bottom: 136px;               /* bottom pair (112) + its 24 inset */
  left: 0; right: 0;
  z-index: 1;
  /* site.css styles the bare `nav` element (height 84, padding, gap,
     space-between). Everything it sets has to be declared back, or the legacy
     pages collapse this region. */
  width: auto; height: auto; max-width: none;
  margin: 0; padding: 0; gap: 0;
  align-items: stretch;
  justify-content: flex-start;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.afx-mnav[data-bar="false"] .afx-mnav-scroll { top: 72px; }
.afx-mnav-scroll::-webkit-scrollbar { width: 0; height: 0; }

.afx-mnav-list {
  margin: auto;                /* the CENTER justify, overflow-safe */
  padding: 0;
  width: 345px;
  max-width: calc(100% - 48px);
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 4px;                    /* 774:58918 — the column gap in the live variant */
}

/* a top-level row: 774:58849 type on 774:58918 geometry */
.afx-mnav-row,
.afx-mnav-t {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  min-height: 72px;
  margin: 0;
  padding: 16px;
  border: 0;
  border-radius: var(--r-16);
  background: transparent;
  font-family: var(--font-alt);
  font-weight: var(--w-medium);
  font-size: 32px;
  line-height: 40px;
  text-align: center;
  color: var(--af-white);
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--t-fast) var(--e-out),
              transform var(--t-instant) var(--e-out);
}
.afx-mnav-row:active, .afx-mnav-t:active { transform: scale(.98); }
/* The open parent no longer gets its own plate: in the redraw the plate is
   the whole item (see .afx-mnav-item[data-open="true"] below), and a second
   lighter pill behind just the label is a box inside a box. */
.afx-mnav-row[aria-current="page"] { background: var(--w-16); }

.afx-mnav-caret {
  width: 14px; height: 14px;
  flex: none;
  opacity: .55;
  transition: transform var(--t-base) var(--e-out), opacity var(--t-fast) var(--e-out);
}
.afx-mnav-item[data-open="true"] .afx-mnav-caret { transform: rotate(180deg); opacity: 1; }

/* ---------------------------------------------------------- the accordion */
/* ------------------------------------------- 3121:238888 accordion, open
   The redraw wraps an OPEN parent and its children in one dark plate:
   345 wide, radius 16, black at 16%, padding 16, gap 16. Closed parents are
   unchanged, so nothing moves until the reader opens something. */
.afx-mnav-item[data-open="true"] {
  /* 16 top, 8 bottom — the plate is not symmetrically padded; reading 16
     off paddingTop alone makes it 8px too tall. */
  padding: 16px 8px 8px;
  border-radius: var(--r-16);
  background: rgba(0,0,0,.16);
}
/* the open parent's own label goes lime and its caret flips to point up */
.afx-mnav-item[data-open="true"] > .afx-mnav-t {
  color: var(--af-lime);
  min-height: 40px;
  padding: 0;
  background: transparent;
  gap: 12px;
}
.afx-mnav-item[data-open="true"] > .afx-mnav-t .afx-mnav-caret {
  width: 24px; height: 24px;
  transform: rotate(180deg);
  opacity: 1;
}

/* 3140:13911 — the child panel, 329 wide, radius 12, white at 8%, gap 4. */
.afx-mnav-sub {
  list-style: none;
  margin: 16px 0 0;
  padding: 0;
  display: none;
  flex-direction: column;
  gap: 4px;
  border-radius: var(--r-12);
  background: var(--w-08);
}
.afx-mnav-item[data-open="true"] > .afx-mnav-sub { display: flex; }

.afx-mnav-sublink,
.afx-mnav-soonrow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 64px;
  padding: 20px 16px;
  border-radius: var(--r-12);
  font-family: var(--font-alt);
  font-weight: var(--w-medium);
  font-size: 24px;
  line-height: 24px;
  text-align: center;
  text-decoration: none;
  color: var(--w-80);
  transition: background-color var(--t-fast) var(--e-out),
              color var(--t-fast) var(--e-out),
              transform var(--t-instant) var(--e-out);
}
.afx-mnav-sublink[aria-current="page"] { color: var(--af-white); background: var(--w-08); }
.afx-mnav-sublink:active { transform: scale(.98); }
.afx-mnav-soonrow { color: var(--w-40); cursor: default; }
.afx-mnav-soon {
  flex: none;
  padding: 3px 8px;
  border-radius: var(--r-pill);
  background: var(--w-08);
  font-family: var(--font-ui);
  font-weight: var(--w-medium);
  font-size: 11px;
  line-height: 14px;
  letter-spacing: .2px;
  color: var(--w-56);
  white-space: nowrap;
}

/* ------------------------------------------------- 774:58854 bottom pair
   345 wide at x=24, column, gap 8, sitting 24 above the panel bottom.      */
.afx-mnav-cta {
  position: absolute;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  width: 345px;
  max-width: calc(100% - 48px);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
/* 774:58855 Log in — 345x52, radius 50, fill rgba(255,255,255,.16),
   1px INSIDE rgba(255,255,255,.08), BACKGROUND_BLUR 34 -> blur(17px),
   shadow 0 8 12 rgba(0,0,0,.08), Saans 500 / 18 / 24, #FFFFFF */
.afx-mnav-login,
.afx-mnav-get {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 52px;
  border-radius: var(--r-50);
  box-shadow: 0 8px 12px 0 rgba(0,0,0,.08);
  font-family: var(--font-alt);
  font-weight: var(--w-medium);
  font-size: 18px;
  line-height: 24px;
  text-decoration: none;
  transition: background-color var(--t-fast) var(--e-out),
              transform var(--t-instant) var(--e-out);
}
.afx-mnav-login {
  background: var(--w-16);
  border: 1px solid var(--w-08);
  backdrop-filter: blur(17px);
  -webkit-backdrop-filter: blur(17px);
  color: var(--af-white);
}
/* 774:58857 Get Funded — 345x52, radius 120, fill #F9F9F7, ink #263F42.
   Set explicitly, never inherited. */
.afx-mnav-get {
  border-radius: var(--r-round);
  background: var(--af-beige);
  color: var(--af-slate-teal);
}
.afx-mnav-login:active, .afx-mnav-get:active { transform: scale(.98); }

/* ------------------------------------------------- 774:58889 language panel
   112x200 at x=273 y=136 — i.e. left-aligned with the globe, 8 below the
   navbar. radius 12, fill rgba(0,0,0,.12), 1px INSIDE gradient hairline at
   35%, BACKGROUND_BLUR 146 -> blur(73px),
   shadow 9px 10px 24px rgba(38,63,66,.28).                                 */
.afx-mnav-lang { position: relative; flex: none; }
.afx-mnav-langmenu {
  position: absolute;
  top: calc(100% + 16px);      /* globe bottom 120 -> panel top 136 */
  left: 0;
  width: 112px;
  margin: 0;
  padding: 4px;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
  border-radius: var(--r-12);
  background: rgba(0,0,0,.12);
  backdrop-filter: blur(73px);
  -webkit-backdrop-filter: blur(73px);
  box-shadow: 9px 10px 24px 0 rgba(38,63,66,.28);
  z-index: 5;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px) scale(.97);
  transform-origin: top left;
  transition: opacity var(--t-fast) var(--e-out),
              transform var(--t-fast) var(--e-out),
              visibility 0s linear var(--t-fast);
}
.afx-mnav-lang[data-open="true"] .afx-mnav-langmenu {
  opacity: 1; visibility: visible; transform: none; transition-delay: 0s;
}
.afx-mnav-langmenu::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: var(--af-hair);
  opacity: .35;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask-composite: exclude;
  pointer-events: none;
}
/* rows 104x32, radius 8, padding 8 12, gap 8, flag 16x16 r100,
   Saans 500 / 16 / 16; the current locale carries rgba(255,255,255,.08) */
.afx-mnav-langitem { width: 104px; }
.afx-mnav-langlink {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  width: 104px;
  height: 32px;
  padding: 8px 12px;
  border-radius: var(--r-8);
  background: transparent;
  color: var(--af-white);
  text-decoration: none;
  font-family: var(--font-alt);
  font-weight: var(--w-medium);
  font-size: 16px;
  line-height: 16px;
  transition: background-color var(--t-fast) var(--e-out);
}
.afx-mnav-langlink[aria-current="true"] { background: var(--w-08); }
.afx-mnav-langflag {
  width: 16px; height: 16px; flex: none;
  border-radius: 50%;
  overflow: hidden;
  display: block;
}

/* ----------------------------------------------------------------- motion
   Transform and opacity only, house tokens only. The chrome drops in, the
   column and the buttons rise. Durations/easings are never hand-written. */
.afx-mnav-bar, .afx-mnav-nav { transform: translateY(-8px); transition: transform var(--t-base) var(--e-out); }
.afx-mnav-list { transform: translateY(10px); transition: transform var(--t-slow) var(--e-out); }
.afx-mnav-cta { transform: translate(-50%, 12px); transition: transform var(--t-slow) var(--e-out); }
.afx-mnav[data-open="true"] .afx-mnav-bar,
.afx-mnav[data-open="true"] .afx-mnav-nav  { transform: none; }
.afx-mnav[data-open="true"] .afx-mnav-list { transform: none; }
.afx-mnav[data-open="true"] .afx-mnav-cta  { transform: translate(-50%, 0); }

/* ------------------------------------------------------------------ focus */
.afx-mnav :focus-visible {
  outline: 2px solid var(--af-lime);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ------------------------------------------------------------------ hover
   Every hover rule lives here, and nowhere else, or it sticks after a tap. */
@media (hover: hover) and (pointer: fine) {
  .afx-mnav-globe:hover { background-color: var(--w-10); }
  .afx-mnav-close:hover { background-color: var(--af-white); }
  .afx-mnav-row:hover,
  .afx-mnav-t:hover { background-color: var(--w-16); }
  .afx-mnav-sublink:hover { background-color: var(--w-08); color: var(--af-white); }
  .afx-mnav-login:hover { background-color: var(--w-25); }
  .afx-mnav-get:hover { background-color: var(--af-white); }
  .afx-mnav-langlink:hover { background-color: var(--w-08); }
  .afx-mnav-burger:hover  { background-color: var(--af-white); }
}

} /* end @media (max-width: 1100px) */

/* ================================================ mobile navbar alignment
   The burger is a fourth control in an action cluster that was drawn for
   three, and at 393 it pushed itself off the right edge of the page navbar
   (measured: x=389 in a 393 viewport, and 52px of horizontal overflow on
   /article). Below 760 the navbar therefore takes the geometry the mobile
   Figma frames already draw for it — 377 x 64 at x=8, brand + globe + burger,
   no Log in / Get Funded — which is also exactly where the overlay draws its
   own navbar, so the burger and the X land in the same place.
   /about scopes its own copy of this through .abh-stage .afx-nav--ab and
   out-specifies these rules; it already matches.                            */
@media (max-width: 760px) {
  .afx-nav {
    width: calc(100% - 16px);
    max-width: none;
    height: 64px;
    margin: 8px auto 0;
    padding: 8px;
  }
  /* 650:127450 — 0/14 around the wordmark, 135x18 */
  .afx-nav__brand { margin-left: 0; padding: 0 14px; }
  .afx-nav__logo,
  .afx-nav__logo img { width: 135px; height: 18px; }
  .afx-nav__actions { gap: 8px; padding-right: 0; }
  .afx-nav__globe { width: 48px; height: 48px; }
  /* the mobile frames draw neither button in the bar */
  .afx-nav__login,
  .afx-nav__cta { display: none; }
}

/* ==================================================== legacy nav alignment
   The .nav-glass pages (site.css) inset their navbar by --pad and let it size
   itself, so the overlay's 377x64 pill at x=8 landed 12px off theirs. Bring
   the legacy bar onto the same geometry below 760 so the burger and the X sit
   in the same place. DECLARED DEVIATION from site.css, minimal and scoped.  */
@media (max-width: 760px) {
  .nav-glass {
    margin: 8px !important;
    width: calc(100% - 16px) !important;
    min-height: 64px;
    padding: 8px 8px 8px 16px;
  }
}


/* A pointer-driven open moves focus to the close button for keyboard users;
   Chrome then paints a focus ring even though the gesture was a tap. Suppress
   the ring for that case only — keyboard opens still get it. */
html[data-afx-pointer="true"] .afx-mnav-close:focus-visible { outline: none; }

/* 3140:13913 — the 24px child glyph. Inherits the row's colour, so it goes
   white by default and lime on the page you are already on, exactly as the
   desktop dropdown rows do. */
.afx-mnav-subic {
  width: 24px;
  height: 24px;
  flex: none;
  opacity: .9;
}
.afx-mnav-sublink[aria-current="page"] .afx-mnav-subic { opacity: 1; }

/* 3121:238957 draws a full-bleed image fill behind the menu. That fill is a
   SCREENSHOT of the page the frame sits on, not a texture — Figma cannot do a
   live backdrop, so the designer pasted the page in. Reproducing it as a real
   image would paint one fixed page behind every menu on every page AND cover
   the backdrop-filter that already shows the actual page through, blurred.
   Not shipped. The existing .afx-mnav-backdrop is the correct reading. */