/* ============================================================
   gnav.css — the site header (gnav.js) for pages that do NOT load
   /ui-kit.css: MERPY (desktop only; its phone app bar stays its own).
   A COPY of the "BUTTER-STYLE HEADER" block in /ui-kit.css (2026-10-04).
   Keep the two in sync when the header changes.
   ============================================================ */
html.bh-on body > nav[aria-label="Main navigation"],
html.bh-on nav.navbar,
html.bh-on header.app-header { display: none !important; }
html.bh-on { --nav-h: 76px; --bh-ease: cubic-bezier(0.16, 1, 0.3, 1); }

.bh {
  position: sticky; top: 0; z-index: 900; pointer-events: none;
  padding: 14px clamp(12px, 3vw, 32px) 6px;
  view-transition-name: cz-nav;
  font-family: var(--font-body);
}
.bh-in {
  display: flex; justify-content: space-between; align-items: flex-start; gap: 12px;
  transition: transform 700ms var(--bh-ease), opacity 500ms var(--bh-ease);
}
.bh.bh-hide .bh-in { transform: translateY(calc(-100% - 24px)); opacity: 0; }
.bh-isle {
  pointer-events: auto; display: flex; align-items: center; gap: 4px; height: 56px; padding: 0 8px 0 10px;
  background: color-mix(in srgb, var(--surface) 96%, transparent);   /* no backdrop blur: it re-rendered under the sticky header every scroll frame */
  border: 1.5px solid var(--line); border-radius: 18px;
  box-shadow: 0 10px 30px -22px rgba(43, 26, 18, 0.45);
  transition: box-shadow 400ms var(--bh-ease), background 400ms var(--bh-ease), border-color 400ms var(--bh-ease);
}
.bh.bh-scrolled .bh-isle { box-shadow: 0 14px 34px -18px rgba(43, 26, 18, 0.5); border-color: var(--line-strong); }
.bh-right { padding: 0 8px; gap: 6px; }

.bh-logo { display: inline-flex; align-items: center; gap: 9px; padding: 0 14px 0 2px; text-decoration: none; color: var(--text); }
.bh-tile { width: 34px; height: 34px; display: block; transition: transform 600ms cubic-bezier(.34, 1.4, .5, 1); }
.bh-logo:hover .bh-tile { transform: rotate(-8deg) scale(1.06); }
.bh-word { font: 900 19px/1 "Inter", sans-serif; letter-spacing: -0.02em; text-transform: uppercase; }
.bh-word b { color: var(--accent-2); font-weight: 900; }

/* rolling labels */
.bh-roll { position: relative; display: inline-grid; overflow: hidden; vertical-align: top; line-height: 1.25; }
.bh-roll > span { grid-area: 1 / 1; transition: transform 560ms var(--bh-ease); }
.bh-roll > span + span { transform: translateY(105%); }
a:hover > .bh-roll > span:first-child, a:focus-visible > .bh-roll > span:first-child { transform: translateY(-105%); }
a:hover > .bh-roll > span + span, a:focus-visible > .bh-roll > span + span { transform: none; }

.bh .bh-links {   /* style.css styles every <nav> as a top bar; undo that here */
  position: static; display: flex; align-items: center; flex-wrap: nowrap; gap: 0; min-height: 0; padding: 0; margin: 0;
  background: none; border: 0; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; z-index: auto;
}
.bh-link {
  position: relative; padding: 8px 13px; border-radius: 11px; text-decoration: none;
  font-size: 15.5px; font-weight: 600; color: var(--text); white-space: nowrap;
  transition: background 300ms var(--bh-ease);
}
.bh-link:hover { background: color-mix(in srgb, var(--text) 6%, transparent); }
.bh-link.is-on::after {
  content: ""; position: absolute; left: 50%; bottom: 2px; width: 5px; height: 5px; margin-left: -2.5px;
  border-radius: 50%; background: var(--accent);
}

/* ⋮ → Close */
.bh-more {
  position: relative; display: grid; place-items: center; width: 40px; height: 40px; margin-left: 2px;
  border: 0; border-radius: 12px; background: transparent; color: var(--text); cursor: pointer; overflow: hidden;
  font: 700 14.5px var(--font-body);
  transition: width 560ms var(--bh-ease), background 300ms var(--bh-ease), color 300ms var(--bh-ease);
}
.bh-more:hover { background: color-mix(in srgb, var(--text) 6%, transparent); }
.bh-more > span { grid-area: 1 / 1; transition: transform 520ms var(--bh-ease), opacity 360ms var(--bh-ease); }
.bh-dots svg { width: 22px; height: 22px; display: block; }
.bh-close { opacity: 0; transform: translateY(110%); white-space: nowrap; }
html.bh-open .bh-more { width: 74px; background: var(--text); color: var(--bg); }
html.bh-open .bh-dots { opacity: 0; transform: translateY(-110%) rotate(90deg); }
html.bh-open .bh-close { opacity: 1; transform: none; }

/* right island */
.bh-btn {
  display: grid; place-items: center; height: 40px; min-width: 40px; padding: 0 8px; border: 0; border-radius: 12px;
  background: transparent; color: var(--text); cursor: pointer; font: 800 13.5px var(--font-body); letter-spacing: .02em;
  transition: background 300ms var(--bh-ease), transform 200ms var(--bh-ease);
}
.bh-btn:hover { background: color-mix(in srgb, var(--text) 6%, transparent); }
.bh-btn:active { transform: scale(.94); }
.bh-btn img { width: 22px; height: 22px; display: block; }
html[data-theme="dark"] .bh-btn img, html[data-theme="dark"] .bh-mi-ic img, html[data-theme="dark"] .bh-df img, html[data-theme="dark"] .bh-df-ic img { filter: drop-shadow(0 0 .6px rgba(255, 240, 225, .9)); }
.bh-login { padding: 8px 12px; border-radius: 11px; text-decoration: none; color: var(--text); font-size: 15.5px; font-weight: 600; white-space: nowrap; transition: background 300ms var(--bh-ease); }
.bh-login:hover { background: color-mix(in srgb, var(--text) 6%, transparent); }
.bh-cta {
  display: inline-flex; align-items: center; height: 40px; padding: 0 16px; border-radius: 12px; text-decoration: none; white-space: nowrap;
  background: var(--ink, #2b1a12); color: #fff8ef; font-size: 15px; font-weight: 700;
  transition: background 300ms var(--bh-ease), transform 200ms var(--bh-ease);
}
html[data-theme="dark"] .bh-cta { background: #fbeee0; color: #1a110c; }
.bh-cta:hover { background: var(--accent); color: #fff; }
.bh-cta:active { transform: scale(.97); }
.bh-login[hidden] { display: none; }

/* the dropdown, out of the left island */
.bh-drop {
  position: absolute; left: clamp(12px, 3vw, 32px); top: calc(100% + 2px); width: min(620px, calc(100vw - 24px));
  pointer-events: none; visibility: hidden;
  clip-path: inset(0 0 100% 0 round 22px);
  transition: clip-path 700ms var(--bh-ease), visibility 0s linear 700ms;
}
html.bh-open .bh-drop { pointer-events: auto; visibility: visible; clip-path: inset(0 0 0 0 round 22px); transition: clip-path 760ms var(--bh-ease), visibility 0s; }
.bh-drop-in {
  background: color-mix(in srgb, var(--surface) 94%, transparent);
  -webkit-backdrop-filter: blur(18px) saturate(1.3); backdrop-filter: blur(18px) saturate(1.3);
  border: 1.5px solid var(--line-strong); border-radius: 22px; padding: 10px;
  box-shadow: 0 30px 60px -30px rgba(43, 26, 18, 0.55);
}
.bh-menu { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
.bh-mi {
  display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 16px; text-decoration: none; color: var(--text);
  opacity: 0; transform: translateY(16px);
  transition: background 300ms var(--bh-ease), opacity 500ms var(--bh-ease), transform 700ms var(--bh-ease);
}
html.bh-open .bh-mi { opacity: 1; transform: none; transition-delay: 0s, calc(140ms + var(--i) * 45ms), calc(140ms + var(--i) * 45ms); }
.bh-mi:hover { background: color-mix(in srgb, var(--text) 6%, transparent); }
.bh-mi-ic { width: 46px; height: 46px; flex: none; display: grid; place-items: center; border-radius: 14px; border: 2px solid var(--edge); background: var(--t0); }
.bh-mi-ic.t1 { background: var(--t1); } .bh-mi-ic.t2 { background: var(--t2); } .bh-mi-ic.t3 { background: var(--t3); }
.bh-mi-ic.t4 { background: var(--t4); } .bh-mi-ic.t5 { background: var(--t5); }
.bh-mi-ic img { width: 28px; height: 28px; }
.bh-mi-t { display: grid; gap: 1px; min-width: 0; flex: 1; }
.bh-mi-t b { font-size: 15.5px; font-weight: 800; }
.bh-mi-t small { font-size: 12.5px; font-weight: 600; color: var(--muted); line-height: 1.35; }
.bh-mi-go { width: 18px; height: 18px; color: var(--muted); opacity: 0; transform: translate(-6px, 6px); transition: opacity 300ms var(--bh-ease), transform 500ms var(--bh-ease); }
.bh-mi:hover .bh-mi-go { opacity: 1; transform: none; color: var(--accent); }
.bh-mi-go svg { width: 18px; height: 18px; display: block; }
.bh-drop-foot { display: flex; gap: 6px; margin-top: 8px; padding-top: 10px; border-top: 1.5px dashed var(--line-strong); flex-wrap: wrap; }
.bh-df {
  flex: 1 1 150px; display: flex; align-items: center; gap: 9px; padding: 10px 12px; border-radius: 13px; border: 0; cursor: pointer;
  background: color-mix(in srgb, var(--text) 5%, transparent); color: var(--text); text-decoration: none;
  font: 700 14px var(--font-body); transition: background 300ms var(--bh-ease);
}
.bh-df:hover { background: color-mix(in srgb, var(--text) 10%, transparent); }
.bh-df img, .bh-df-ic img { width: 22px; height: 22px; display: block; }
.bh-df em { margin-left: auto; font-style: normal; font-weight: 800; color: var(--muted); font-size: 13px; }
.bh-overlay {
  position: fixed; inset: 0; z-index: 850; pointer-events: none; opacity: 0;
  background: color-mix(in srgb, var(--bg) 55%, transparent);
  transition: opacity 600ms var(--bh-ease);
}
html.bh-open .bh-overlay { opacity: 1; pointer-events: auto; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }   /* blur only while open */

/* intro: first page of a visit */
@keyframes bhDrop { from { opacity: 0; transform: translateY(-22px) scale(.98); } }
@keyframes bhRise { from { opacity: 0; transform: translateY(60%); } }
html.bh-intro .bh-left  { animation: bhDrop 1000ms var(--bh-ease) 60ms both; }
html.bh-intro .bh-right { animation: bhDrop 1000ms var(--bh-ease) 180ms both; }
html.bh-intro .bh-link .bh-roll > span:first-child,
html.bh-intro .bh-login .bh-roll > span:first-child,
html.bh-intro .bh-cta .bh-roll > span:first-child { animation: bhRise 900ms var(--bh-ease) both; }
html.bh-intro .bh-link:nth-child(1) .bh-roll > span:first-child { animation-delay: 280ms; }
html.bh-intro .bh-link:nth-child(2) .bh-roll > span:first-child { animation-delay: 340ms; }
html.bh-intro .bh-link:nth-child(3) .bh-roll > span:first-child { animation-delay: 400ms; }
html.bh-intro .bh-link:nth-child(4) .bh-roll > span:first-child { animation-delay: 460ms; }
html.bh-intro .bh-login .bh-roll > span:first-child { animation-delay: 420ms; }
html.bh-intro .bh-cta .bh-roll > span:first-child { animation-delay: 500ms; }

/* tablets: drop the inline links, the ⋮ menu has them */
@media (max-width: 1080px) { .bh .bh-links { display: none; } .bh-logo { padding-right: 6px; } }
/* phones: logo + ⋮ left, theme + language right; the bottom tab bar does the rest */
@media (max-width: 700px) {
  html.bh-on { --nav-h: 64px; }
  .bh { padding: 10px 10px 4px; }
  .bh-isle { height: 50px; border-radius: 16px; }
  .bh-login, .bh-cta { display: none !important; }
  .bh-word { font-size: 17px; }
  .bh-tile { width: 30px; height: 30px; }
  .bh-drop { left: 10px; width: calc(100vw - 20px); }
  .bh-menu { grid-template-columns: 1fr; }
  .bh-mi { padding: 10px; }
  .bh-mi-ic { width: 42px; height: 42px; }
}
@media (prefers-reduced-motion: reduce) {
  .bh *, .bh-overlay { transition-duration: 1ms !important; animation: none !important; }
}

/* Lenis smooth scrolling (lenis.css 1.3.26) */
html.lenis, html.lenis body { height: auto; }
html.lenis { scroll-behavior: auto !important; }
.lenis:not(.lenis-autoToggle).lenis-stopped { overflow: clip; }
.lenis [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-smooth iframe { pointer-events: none; }

/* Page transitions, Butter-smooth (2026-10-03): a longer, softer ease and
   a little more travel than before. */
::view-transition-old(root) { animation: czPageOut 280ms cubic-bezier(.4, 0, 1, 1) both; }
::view-transition-new(root) { animation: czPageIn2 720ms cubic-bezier(.16, 1, .3, 1) 60ms both; }
@keyframes czPageIn2 { from { opacity: 0; transform: translateY(18px); } }
::view-transition-group(root) { animation-duration: 0s; }
/* each app's global button/link skin must not reach the header */
.bh button.bh-more, .bh button.bh-btn, .bh button.bh-df, .bh a.bh-cta, .bh a.bh-login, .bh a.bh-link {
  box-shadow: none !important; border: 0 !important; min-height: 0; text-transform: none; letter-spacing: normal;
}
.bh button.bh-btn { letter-spacing: .02em; }
html.bh-on .pay-top { display: none; }   /* pay page: the shared header replaces its little brand bar */

/* Header wordmark, animated (2026-10-03): letters rise in on every page,
   and roll one by one to a fresh copy on hover (a left-to-right wave). */
.bh-word { display: inline-flex; }
.bh-ch { position: relative; display: inline-grid; overflow: hidden; line-height: 1.1; padding-bottom: .04em; }
.bh-ch > span { grid-area: 1 / 1; transition: transform 620ms var(--bh-ease); transition-delay: calc(var(--c) * 32ms); }
.bh-ch > span + span { transform: translateY(110%); }
.bh-ch.acc { color: var(--accent-2); }
.bh-logo:hover .bh-ch > span:first-child, .bh-logo:focus-visible .bh-ch > span:first-child { transform: translateY(-110%); }
.bh-logo:hover .bh-ch > span + span, .bh-logo:focus-visible .bh-ch > span + span { transform: none; }
@media (prefers-reduced-motion: reduce) { .bh-ch > span { transition: none; animation: none !important; } }

/* scroll performance (2026-10-03): the header moves on the GPU; heavy fixed layers are isolated */
.bh-in { will-change: transform; }
.bh-isle { transform: translateZ(0); }


/* phone-only header pieces (from the PHONE APP SHELL block in /ui-kit.css) */
.bh-back, .bh-hello, .bh-left > .bh-title, .bh-more2, .bh-legal { display: none; }

/* The big footer's CSS is /footer.css (shared with Marcade). */

.ms-bottomnav { display: none; }   /* phone only (shown in the block below) */

/* ============================================================
   PHONE app bar, ⋮ sheet and bottom island — COPY of the header parts of
   "PHONE APP SHELL" in /ui-kit.css (not its button/box rules). Keep in sync.
   ============================================================ */
@media (max-width: 700px) {
  html.bh-on { --nav-h: 68px; }
  /* ---- app bar ---- */
  .bh { padding: calc(10px + env(safe-area-inset-top, 0px)) 16px 10px; transition: background 300ms var(--bh-ease), box-shadow 300ms var(--bh-ease); }
  .bh.bh-scrolled { background: color-mix(in srgb, var(--bg) 96%, transparent); box-shadow: 0 1px 0 var(--line); }
  .bh.bh-hide .bh-in { transform: none; opacity: 1; }          /* apps keep their top bar */
  .bh-in { align-items: center; will-change: auto; }
  .bh-isle, .bh.bh-scrolled .bh-isle { height: auto; padding: 0; gap: 8px; background: none; border: 0; box-shadow: none; transform: none; }
  .bh-left { min-width: 0; flex: 1; }
  .bh-left > .bh-logo, .bh-left > .bh-more { display: none; }
  .bh-hello { display: flex; align-items: center; gap: 11px; min-width: 0; text-decoration: none; color: var(--text); }
  .bh-av { width: 44px; height: 44px; flex: none; display: grid; place-items: center; overflow: hidden; border-radius: 50%; background: var(--t0); box-shadow: 0 0 0 2px var(--surface), 0 6px 16px -8px rgba(43, 26, 18, .45); }
  .bh-av img { width: 40px; height: 40px; display: block; }
  .bh-title { display: grid; min-width: 0; line-height: 1.2; }
  .bh-left > .bh-title { display: grid; }
  .bh-title small { font-size: 12.5px; font-weight: 600; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .bh-title b { font-size: 18px; font-weight: 800; letter-spacing: -0.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .bh-back {
    width: 42px; height: 42px; flex: none; display: grid; place-items: center; border-radius: 50%;
    background: var(--surface); color: var(--text); border: 1px solid var(--line);
    box-shadow: 0 6px 16px -10px rgba(43, 26, 18, .45);
  }
  .bh-back svg { width: 22px; height: 22px; display: block; }
  .bh-back:active { transform: scale(.92); }
  .bh-right { gap: 8px; padding: 0; flex: none; }
  html .bh button.bh-btn {
    width: 42px; height: 42px; min-width: 0; padding: 0; border-radius: 50%;
    background: var(--surface); border: 1px solid var(--line) !important;
    box-shadow: 0 6px 16px -10px rgba(43, 26, 18, .45) !important;
  }
  .bh-btn.bh-more2 { display: grid; }
  .bh-btn.bh-more2 svg { width: 20px; height: 20px; display: block; }
  html.bh-open .bh button.bh-more2 { background: var(--text); color: var(--bg); }
  .bh-lang-code { font-size: 12.5px; }

  /* ---- ⋮ menu as a bottom sheet ---- */
  html.bh-open .bh { z-index: 1300; }
  .bh-overlay { z-index: 1250; }
  .bh-drop, html.bh-open .bh-drop {
    position: fixed; left: 10px; right: 10px; top: auto; width: auto;
    bottom: calc(76px + env(safe-area-inset-bottom, 0px));
    clip-path: inset(100% 0 0 0 round 22px); transform: none;
    transition: clip-path 640ms var(--bh-ease), visibility 0s linear 640ms;
  }
  html.bh-open .bh-drop { clip-path: inset(0 0 0 0 round 22px); transition: clip-path 700ms var(--bh-ease), visibility 0s; }
  .bh-drop-in {
    position: relative; max-height: 82vh; overflow-y: auto; overscroll-behavior: contain;
    padding: 10px 10px 12px;
    border: 1.5px solid var(--line-strong); border-radius: 22px;
    background: var(--surface); -webkit-backdrop-filter: none; backdrop-filter: none;
    box-shadow: 0 -20px 50px -20px rgba(43, 26, 18, .45);
  }
  .bh-mi { padding: 10px 8px; border-radius: 16px; }
  .bh-mi-ic { border: 0; border-radius: 14px; }
  .bh-drop-foot { border-top: 1px solid var(--line); }
  .bh-legal { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 14px; margin: 10px 0 0; padding-top: 10px; border-top: 1px solid var(--line); font-size: 12.5px; font-weight: 600; color: var(--muted); }
  .bh-legal a { color: var(--muted); }

  /* ---- bottom bar = the desktop header's left island (bottom-nav.js) ---- */
  .bh-btn.bh-more2, html .bh button.bh-more2 { display: none; }     /* the ⋮ lives in the bottom island */
  .ms-bottomnav.ms-island {
    left: 10px; right: 10px; bottom: calc(10px + env(safe-area-inset-bottom, 0px));
    display: flex; align-items: center; gap: 2px; height: 58px; padding: 0 6px 0 8px;
    background: color-mix(in srgb, var(--surface) 96%, transparent);
    border: 1.5px solid var(--line); border-top: 1.5px solid var(--line); border-radius: 18px;
    box-shadow: 0 14px 34px -16px rgba(43, 26, 18, .5);
    font-family: var(--font-body);
  }
  html[data-theme="dark"] .ms-bottomnav.ms-island { box-shadow: 0 14px 34px -12px rgba(0, 0, 0, .7); }
  .ms-bi-home { flex: none; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; }
  .ms-bi-tile { width: 34px; height: 34px; display: block; transition: transform 600ms cubic-bezier(.34, 1.4, .5, 1); }
  html[data-theme="dark"] .ms-bi-tile { content: url("/images/favicon-dark.svg?v=132"); }
  .ms-bi-home:active .ms-bi-tile { transform: rotate(-8deg) scale(.94); }
  .ms-bi-links { flex: 1; min-width: 0; display: flex; justify-content: space-around; align-items: center; }
  .ms-bi-link {
    position: relative; padding: 9px 7px; border-radius: 11px; text-decoration: none; white-space: nowrap;
    font-size: 14px; font-weight: 600; letter-spacing: -0.01em; color: var(--text);
    -webkit-tap-highlight-color: transparent; transition: background 300ms var(--ease);
  }
  .ms-bi-link:active { background: color-mix(in srgb, var(--text) 7%, transparent); }
  .ms-bi-link.is-on { font-weight: 800; }
  .ms-bi-link.is-on::after {
    content: ""; position: absolute; left: 50%; bottom: 1px; width: 5px; height: 5px; margin-left: -2.5px;
    border-radius: 50%; background: var(--accent);
  }
  @media (max-width: 360px) { .ms-bi-link { font-size: 12.5px; padding: 9px 4px; } }
  html body .ms-bottomnav button.ms-bi-more {
    flex: none; position: relative; display: grid; place-items: center; width: 40px; height: 40px; min-height: 0; padding: 0;
    border: 0; border-radius: 12px; background: transparent; color: var(--text); box-shadow: none; overflow: hidden;
    font: 700 14px var(--font-body); text-transform: none; letter-spacing: normal; cursor: pointer;
    transition: width 560ms var(--bh-ease, ease), background 300ms, color 300ms;
  }
  .ms-bi-more > span { grid-area: 1 / 1; transition: transform 520ms var(--bh-ease, ease), opacity 360ms; }
  .ms-bi-more .bh-dots svg { width: 22px; height: 22px; display: block; }
  .ms-bi-more .bh-close { opacity: 0; transform: translateY(110%); white-space: nowrap; }
  html.bh-open body .ms-bottomnav button.ms-bi-more { width: 64px; background: var(--text); color: var(--bg); }
  html.bh-open .ms-bi-more .bh-dots { opacity: 0; transform: translateY(-110%) rotate(90deg); }
  html.bh-open .ms-bi-more .bh-close { opacity: 1; transform: none; }
  html.bh-open .ms-bottomnav { z-index: 1350; }               /* stays above the menu, so Close is right there */
  html.has-bottomnav body { padding-bottom: calc(90px + env(safe-area-inset-bottom, 0px)); }
  html.has-bottomnav .uk-toast-wrap { bottom: calc(96px + env(safe-area-inset-bottom, 0px)); }
  .ms-bottomnav { position: fixed; top: auto; z-index: 1150; min-height: 0; }
}

/* =====================================================================
   MOTION v4 — snappy (2026-10-11). The site felt laggy: long eases
   (700–1100ms), a 300ms wait before every link in older browsers, new
   pages held hidden until they staggered in, and Lenis making the scroll
   trail behind the wheel. Scrolling is native now (gnav.js), and every
   motion is short, transform/opacity only and starts at once. This block
   sits last so it wins; keep its copies (arcade.css, gnav.css) in sync.
   ===================================================================== */
/* the header hides/returns, menu opens/closes, labels roll: quick */
.bh-in { transition: transform 280ms cubic-bezier(.2, .8, .2, 1), opacity 200ms ease; }
.bh-roll > span { transition: transform 340ms cubic-bezier(.2, .8, .2, 1); }
.bh-more { transition: width 300ms cubic-bezier(.2, .8, .2, 1), background 180ms ease, color 180ms ease; }
.bh-more > span { transition: transform 300ms cubic-bezier(.2, .8, .2, 1), opacity 180ms ease; }
.bh-drop { transition: clip-path 240ms cubic-bezier(.4, 0, .2, 1), visibility 0s linear 240ms; }
html.bh-open .bh-drop { transition: clip-path 360ms cubic-bezier(.2, .8, .2, 1), visibility 0s; }
.bh-overlay { transition: opacity 240ms ease; }
.bh-ch > span { transition: transform 380ms cubic-bezier(.2, .8, .2, 1); transition-delay: calc(var(--c) * 20ms); }
html.bh-intro .bh-left, html.bh-intro .bh-right { animation-duration: 520ms; }
html.bh-intro .bh-right { animation-delay: 40ms; }
html.bh-intro .bh-link .bh-roll > span:first-child, html.bh-intro .bh-login .bh-roll > span:first-child,
html.bh-intro .bh-cta .bh-roll > span:first-child { animation-duration: 480ms; }
.bh-tile, .ms-bi-tile { transition-duration: 320ms; }

/* =========================================================
   THREE PARTS NAV (2026-10-21): MaliTools · MaliWikis · MaliGames
   The tile goes home, the wordmark to its part's hub, and a crumb names the
   app inside it (Bills, Trips, EVs …). The header links are the three parts,
   each with a dropdown; the ⋮ menu lists the parts with their apps as chips.
   A copy of this block is at the end of gnav.css (MERPY): keep them in sync.
   ========================================================= */
.bh-logo { padding: 0 8px 0 2px; }
.bh-wordlink { display: inline-flex; align-items: center; padding: 0 8px 0 0; text-decoration: none; color: var(--text); }
.bh-wordlink:hover .bh-ch > span:first-child, .bh-wordlink:focus-visible .bh-ch > span:first-child { transform: translateY(-110%); }
.bh-wordlink:hover .bh-ch > span + span, .bh-wordlink:focus-visible .bh-ch > span + span { transform: none; }
/* the app under the part (2026-10-21): "MALITOOLS / [sticker] Bills". The
   slash and the lighter, smaller name make it a sub-heading of the wordmark,
   and a hairline then separates the brand from the three part links. */
.bh-sep { padding: 0 8px 0 2px; font-size: 20px; font-weight: 300; line-height: 1; color: color-mix(in srgb, var(--muted) 70%, transparent); }
.bh-crumb {
  display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 10px 0 6px; margin-right: 4px; border-radius: 10px;
  color: var(--muted); text-decoration: none; font-size: 14px; font-weight: 700; white-space: nowrap;
  transition: background 240ms var(--bh-ease), color 240ms var(--bh-ease);
}
.bh-crumb img { width: 22px; height: 22px; flex: none; }
.bh-crumb:hover, .bh-crumb:focus-visible { color: var(--text); background: color-mix(in srgb, var(--text) 6%, transparent); }
html[data-theme="dark"] .bh-crumb img { filter: drop-shadow(0 0 .6px rgba(255, 240, 225, .9)); }
.bh .bh-links { position: relative; margin-left: 10px; padding-left: 14px; }
.bh .bh-links::before {
  content: ""; position: absolute; left: 0; top: 50%; width: 1.5px; height: 24px; margin-top: -12px; border-radius: 1px;
  background: var(--line-strong);
}

/* a part and its dropdown */
.bh-grp { position: relative; display: flex; align-items: center; }
.bh .bh-grp > .bh-link { padding-right: 4px; }
.bh .bh-grp-btn {
  width: 22px; height: 30px; display: grid; place-items: center; padding: 0; margin-right: 4px; border: 0; border-radius: 8px;
  background: none; color: var(--muted); cursor: pointer; box-shadow: none;
}
.bh-grp-btn svg { width: 15px; height: 15px; transition: transform 240ms var(--bh-ease); }
.bh-grp-btn:hover { color: var(--text); }
.bh-sub {
  position: absolute; left: -8px; top: calc(100% + 10px); z-index: 5; width: 340px; padding: 8px;
  background: color-mix(in srgb, var(--surface) 97%, transparent); border: 1.5px solid var(--line-strong); border-radius: 18px;
  box-shadow: 0 26px 50px -26px rgba(43, 26, 18, .55);
  opacity: 0; visibility: hidden; transform: translateY(-6px); pointer-events: none;
  transition: opacity 200ms var(--bh-ease), transform 260ms var(--bh-ease), visibility 0s linear 260ms;
}
.bh-sub::before { content: ""; position: absolute; left: 0; right: 0; top: -12px; height: 12px; }   /* keeps hover alive across the gap */
.bh-grp:hover .bh-sub, .bh-grp:focus-within .bh-sub, .bh-grp.is-open .bh-sub {
  opacity: 1; visibility: visible; transform: none; pointer-events: auto; transition-delay: 0s;
}
.bh-grp:hover .bh-grp-btn svg, .bh-grp.is-open .bh-grp-btn svg { transform: rotate(180deg); }
.bh-grp.is-shut .bh-sub { opacity: 0; visibility: hidden; pointer-events: none; }
.bh-sub-head { display: grid; gap: 2px; padding: 10px 12px 12px; margin-bottom: 4px; border-bottom: 1.5px dashed var(--line-strong); text-decoration: none; color: var(--text); }
.bh-sub-head b { font-size: 15px; font-weight: 900; }
.bh-sub-head small { font-size: 12.5px; font-weight: 600; color: var(--muted); line-height: 1.35; }
.bh-sub-head span { font-size: 12.5px; font-weight: 800; color: var(--accent); }
.bh-sub-list { display: grid; gap: 2px; }
.bh-sub-i { display: flex; align-items: center; gap: 11px; padding: 8px 10px; border-radius: 12px; text-decoration: none; color: var(--text); transition: background 200ms var(--bh-ease); }
a.bh-sub-i:hover, a.bh-sub-i:focus-visible { background: color-mix(in srgb, var(--text) 6%, transparent); }
.bh-sub-i.is-on { background: color-mix(in srgb, var(--accent) 12%, transparent); }
.bh-sub-i.is-soon { opacity: .6; }
.bh-sub-i em { margin-left: auto; font-style: normal; font-size: 11px; font-weight: 800; padding: 2px 8px; border-radius: 999px; background: color-mix(in srgb, var(--text) 8%, transparent); color: var(--muted); }
.bh-sub-ic { width: 36px; height: 36px; flex: none; display: grid; place-items: center; border-radius: 11px; background: color-mix(in srgb, var(--text) 6%, transparent); }
.bh-sub-ic img { width: 24px; height: 24px; }
.bh-sub-t { display: grid; gap: 1px; min-width: 0; }
.bh-sub-t b { font-size: 14.5px; font-weight: 800; }
.bh-sub-t small { font-size: 12px; font-weight: 600; color: var(--muted); line-height: 1.3; }
html[data-theme="dark"] .bh-sub-ic img { filter: drop-shadow(0 0 .6px rgba(255, 240, 225, .9)); }

/* ⋮ menu: one part per row, its apps as chips */
.bh-mg { grid-column: 1 / -1; display: grid; gap: 2px; padding-bottom: 6px; }
.bh-mg + .bh-mg { border-top: 1.5px dashed var(--line-strong); padding-top: 6px; }
.bh-chips {
  display: flex; flex-wrap: wrap; gap: 6px; padding: 0 12px 4px 70px;
  opacity: 0; transform: translateY(12px); transition: opacity 400ms var(--bh-ease), transform 500ms var(--bh-ease);
}
html.bh-open .bh-chips { opacity: 1; transform: none; transition-delay: calc(180ms + var(--i) * 45ms); }
.bh-chip {
  display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px 0 8px; border-radius: 999px;
  background: color-mix(in srgb, var(--text) 6%, transparent); color: var(--text); text-decoration: none;
  font-size: 13.5px; font-weight: 700; white-space: nowrap; transition: background 200ms var(--bh-ease);
}
a.bh-chip:hover { background: color-mix(in srgb, var(--text) 11%, transparent); }
.bh-chip.is-on { background: color-mix(in srgb, var(--accent) 18%, transparent); }
.bh-chip.is-soon { opacity: .6; }
.bh-chip em { font-style: normal; font-size: 11px; font-weight: 800; color: var(--muted); }
.bh-chip img { width: 20px; height: 20px; }
html[data-theme="dark"] .bh-chip img { filter: drop-shadow(0 0 .6px rgba(255, 240, 225, .9)); }
.bh-mg-more { display: contents; }
.bh-mi-sm { padding: 9px 12px; }
.bh-mi-sm .bh-mi-ic { width: 38px; height: 38px; border-radius: 12px; }
.bh-mi-sm .bh-mi-ic img { width: 24px; height: 24px; }
@media (max-width: 1080px) { .bh-crumb { margin-right: 0; } }
@media (max-width: 700px) {
  .bh-left > .bh-wordlink, .bh-left > .bh-sep, .bh-left > .bh-crumb { display: none; }
  .bh-chips { padding-left: 12px; }
  .bh-mi-sm { grid-column: auto; }
}
@media (prefers-reduced-motion: reduce) { .bh-sub, .bh-chips { transition: none; } }