/* SMB mobile menu (2026-10-10). Drawer built by /js/smb-mobile-menu.js. Only active <=991px
   (Webflow nav collapse = "medium"); above that every rule here is inert and the desktop nav is unchanged. */

.smbm, .smbm-burger { display: none; }

@media (max-width: 991px) {
  /* hide the Webflow hamburger + its white overlay panel once our drawer is wired up */
  html.smbm-on .uui-navbar01_component .w-nav-button,
  html.smbm-on .uui-navbar01_component .w-nav-overlay { display: none !important; }

  .smbm-burger {
    display: inline-flex; flex-direction: column; justify-content: center; align-items: center; gap: 5px;
    width: 46px; height: 46px; padding: 0; margin: -23px 0 0 0; flex: 0 0 auto;
    position: absolute !important; top: 50%; right: 6px;
    border: 1px solid #e4e7ec; border-radius: 12px; background: #ffffff; cursor: pointer;
    box-shadow: 0 1px 2px rgba(16,24,40,.06), 0 1px 3px rgba(16,24,40,.10);
    -webkit-tap-highlight-color: transparent; z-index: 5;
    transition: transform .15s ease, box-shadow .15s ease;
  }
  .smbm-burger span { display: block; width: 20px; height: 2px; border-radius: 2px; background: #0f1d36; transition: width .2s ease; }
  .smbm-burger span:nth-child(2) { width: 14px; margin-left: 6px; }
  .smbm-burger:active { transform: scale(.96); }
  .smbm-burger:focus-visible { outline: 3px solid #D4A84B; outline-offset: 2px; }

  html.smbm-locked, html.smbm-locked body { overflow: hidden !important; overscroll-behavior: none; }

  .smbm {
    display: block; position: fixed; inset: 0; z-index: 2147483000; visibility: hidden; pointer-events: none;
    font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased; color: #e8edf6; line-height: 1.35; text-align: left;
    transition: visibility 0s linear .36s;
  }
  .smbm *, .smbm *::before, .smbm *::after { box-sizing: border-box; }
  .smbm.is-open { visibility: visible; pointer-events: auto; transition: visibility 0s; }

  .smbm-backdrop {
    position: absolute; inset: 0; background: rgba(6, 12, 26, .55);
    -webkit-backdrop-filter: blur(8px) saturate(120%); backdrop-filter: blur(8px) saturate(120%);
    opacity: 0; transition: opacity .3s ease;
  }
  .smbm.is-open .smbm-backdrop { opacity: 1; }

  .smbm-panel {
    position: absolute; top: 0; right: 0; bottom: 0; width: min(420px, calc(100vw - 32px));
    display: flex; flex-direction: column; overflow: hidden;
    background:
      radial-gradient(120% 60% at 100% 0%, rgba(124, 58, 237, .30) 0%, rgba(124, 58, 237, 0) 60%),
      radial-gradient(90% 50% at 0% 100%, rgba(37, 99, 235, .28) 0%, rgba(37, 99, 235, 0) 65%),
      linear-gradient(180deg, #0f1d36 0%, #0b1528 100%);
    border-left: 1px solid rgba(212, 168, 75, .35);
    box-shadow: -24px 0 60px rgba(0, 0, 0, .45);
    border-radius: 20px 0 0 20px;
    transform: translateX(104%); transition: transform .36s cubic-bezier(.22, .8, .24, 1);
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  .smbm.is-open .smbm-panel { transform: translateX(0); }

  /* header */
  .smbm-head {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 14px 16px 14px 16px; padding-top: calc(14px + env(safe-area-inset-top, 0px));
    border-bottom: 1px solid rgba(255, 255, 255, .08);
  }
  .smbm-brand { display: flex; align-items: center; gap: 12px; min-width: 0; text-decoration: none; color: #ffffff; }
  .smbm-logo {
    width: 42px; height: 42px; flex: 0 0 42px; border-radius: 11px;
    background: #ffffff url(/images/smb-logo-s.svg) center / 100% 100% no-repeat;
    box-shadow: 0 0 0 1px rgba(212, 168, 75, .55), 0 6px 16px rgba(0, 0, 0, .35);
  }
  .smbm-brand-t { display: flex; flex-direction: column; font-family: "Plus Jakarta Sans", "Inter", system-ui, sans-serif; font-weight: 800; font-size: 16px; letter-spacing: -.01em; white-space: nowrap; }
  .smbm-brand-t small { font-family: "Inter", system-ui, sans-serif; font-weight: 500; font-size: 12px; letter-spacing: .01em; color: #9fb0cc; margin-top: 2px; }
  .smbm-close {
    width: 46px; height: 46px; flex: 0 0 46px; display: inline-flex; align-items: center; justify-content: center;
    border-radius: 12px; border: 1px solid rgba(255, 255, 255, .14); background: rgba(255, 255, 255, .06);
    color: #ffffff; cursor: pointer; padding: 0; -webkit-tap-highlight-color: transparent;
    transition: background .15s ease, border-color .15s ease;
  }
  .smbm-close .smbm-ic { width: 22px; height: 22px; }

  /* scroll body */
  .smbm-body { flex: 1 1 auto; overflow-y: auto; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.18) transparent; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; padding: 6px 16px 20px; }
  .smbm-body::-webkit-scrollbar { width: 4px; }
  .smbm-body::-webkit-scrollbar-thumb { background: rgba(255,255,255,.18); border-radius: 4px; }
  .smbm-label {
    margin: 18px 4px 8px; font-size: 11.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #D4A84B;
  }

  .smbm-ic { width: 20px; height: 20px; flex: 0 0 auto; display: block; }
  .smbm-tile {
    width: 38px; height: 38px; flex: 0 0 38px; display: inline-flex; align-items: center; justify-content: center;
    border-radius: 10px; color: #a9c4ff;
    background: linear-gradient(145deg, rgba(37, 99, 235, .28), rgba(124, 58, 237, .20));
    border: 1px solid rgba(122, 165, 255, .22);
  }
  .smbm-tile-sm { width: 34px; height: 34px; flex-basis: 34px; border-radius: 9px; }
  .smbm-tile-sm .smbm-ic { width: 18px; height: 18px; }

  .smbm-main { display: flex; flex-direction: column; gap: 4px; }
  .smbm-row {
    display: flex; align-items: center; gap: 14px; min-height: 56px; padding: 8px 10px; border-radius: 14px;
    color: #ffffff; text-decoration: none; font-size: 16.5px; font-weight: 600; letter-spacing: -.005em;
    transition: background .15s ease; -webkit-tap-highlight-color: transparent;
  }
  .smbm-row-t { flex: 1 1 auto; min-width: 0; }
  .smbm-chev { width: 18px; height: 18px; flex: 0 0 auto; color: #6f82a6; transition: transform .15s ease, color .15s ease; }
  .smbm-row[aria-current="page"] { background: rgba(212, 168, 75, .10); box-shadow: inset 3px 0 0 #D4A84B; }
  .smbm-row[aria-current="page"] .smbm-tile { color: #ecd08f; border-color: rgba(212, 168, 75, .45); background: rgba(212, 168, 75, .14); }

  /* featured: Advanced Visibility */
  .smbm-feature {
    display: block; position: relative; margin: 14px 0 4px; padding: 16px 16px 14px; border-radius: 16px;
    text-decoration: none; color: #ffffff; overflow: hidden;
    background:
      linear-gradient(135deg, rgba(212, 168, 75, .16) 0%, rgba(124, 58, 237, .16) 55%, rgba(37, 99, 235, .18) 100%),
      #101f3b;
    border: 1px solid rgba(212, 168, 75, .55);
    box-shadow: 0 10px 30px rgba(0, 0, 0, .30), inset 0 1px 0 rgba(255, 255, 255, .06);
  }
  .smbm-feature::before {
    content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px;
    background: linear-gradient(90deg, #b8862f, #ecd08f, #b8862f);
  }
  .smbm-feature-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
  .smbm-pill {
    font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: #0b1528;
    background: linear-gradient(90deg, #D4A84B, #ecd08f); padding: 4px 9px; border-radius: 999px;
  }
  .smbm-price { font-family: "Plus Jakarta Sans", "Inter", system-ui, sans-serif; font-weight: 800; font-size: 15px; color: #ecd08f; }
  .smbm-feature-t { display: flex; align-items: center; gap: 8px; font-family: "Plus Jakarta Sans", "Inter", system-ui, sans-serif; font-weight: 800; font-size: 17px; line-height: 1.25; letter-spacing: -.01em; }
  .smbm-gold { color: #D4A84B; }
  .smbm-feature-d { display: block; margin-top: 6px; font-size: 14px; line-height: 1.5; color: #c3cddc; }
  .smbm-feature-cta { display: inline-flex; align-items: center; gap: 4px; margin-top: 10px; min-height: 28px; font-size: 14px; font-weight: 700; color: #ecd08f; }
  .smbm-feature-cta .smbm-chev { color: #ecd08f; }

  /* accordions */
  .smbm-acc { border-radius: 14px; background: rgba(255, 255, 255, .035); border: 1px solid rgba(255, 255, 255, .08); margin-bottom: 8px; }
  .smbm-acc-btn {
    all: unset; box-sizing: border-box; cursor: pointer; display: flex; align-items: center; gap: 10px; width: 100%;
    min-height: 54px; padding: 10px 14px; font-size: 15.5px; font-weight: 650; color: #ffffff; border-radius: 14px;
    -webkit-tap-highlight-color: transparent;
  }
  .smbm-acc-btn > span:first-child { flex: 1 1 auto; }
  .smbm-acc-btn:focus-visible { outline: 3px solid #D4A84B; outline-offset: -3px; }
  .smbm-count { font-size: 12px; font-weight: 700; color: #9fb0cc; background: rgba(255, 255, 255, .08); border-radius: 999px; padding: 2px 8px; }
  .smbm-acc-ic { width: 20px; height: 20px; color: #9fb0cc; transition: transform .25s ease; }
  .smbm-acc.is-open .smbm-acc-ic { transform: rotate(180deg); color: #D4A84B; }
  .smbm-acc-panel { display: grid; grid-template-rows: 0fr; visibility: hidden; transition: grid-template-rows .28s ease, visibility 0s linear .28s; }
  .smbm-acc.is-open .smbm-acc-panel { grid-template-rows: 1fr; visibility: visible; transition: grid-template-rows .28s ease, visibility 0s; }
  .smbm-acc-inner { overflow: hidden; min-height: 0; padding: 0 6px; }
  .smbm-acc.is-open .smbm-acc-inner { padding-bottom: 6px; }
  .smbm-sub {
    display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 8px 8px; border-radius: 12px;
    text-decoration: none; color: #ffffff; transition: background .15s ease;
    border-top: 1px solid rgba(255, 255, 255, .05);
  }
  .smbm-sub[aria-current="page"] { background: rgba(212, 168, 75, .10); }
  .smbm-sub-txt { display: flex; flex-direction: column; min-width: 0; }
  .smbm-sub-t { font-size: 15px; font-weight: 600; line-height: 1.3; }
  .smbm-sub-d { font-size: 13px; color: #9fb0cc; line-height: 1.35; margin-top: 2px; }

  .smbm-minor { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 12px; }
  .smbm-minor a {
    display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, .12); color: #dbe4f3; text-decoration: none; font-size: 14px; font-weight: 600;
    transition: background .15s ease, border-color .15s ease;
  }
  .smbm-minor a .smbm-ic { width: 18px; height: 18px; color: #a9c4ff; }

  /* footer CTAs */
  .smbm-foot {
    flex: 0 0 auto; display: flex; flex-direction: column; gap: 10px; padding: 14px 16px 16px;
    border-top: 1px solid rgba(255, 255, 255, .08);
    background: linear-gradient(180deg, rgba(11, 21, 40, .6), #0b1528);
  }
  .smbm-btn {
    display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; border-radius: 14px;
    text-decoration: none; font-weight: 800; font-size: 15.5px; letter-spacing: .01em; -webkit-tap-highlight-color: transparent;
    font-family: "Plus Jakarta Sans", "Inter", system-ui, sans-serif; transition: transform .12s ease, filter .15s ease, background .15s ease;
  }
  .smbm-btn:active { transform: scale(.985); }
  .smbm-btn-call { color: #ecd08f; border: 1.5px solid rgba(212, 168, 75, .75); background: rgba(212, 168, 75, .08); }
  .smbm-btn-join {
    color: #ffffff; background: linear-gradient(100deg, #2563eb 0%, #4f46e5 55%, #7c3aed 100%);
    box-shadow: 0 10px 24px rgba(37, 99, 235, .35), inset 0 1px 0 rgba(255, 255, 255, .25);
  }
  .smbm a:focus-visible, .smbm-close:focus-visible { outline: 3px solid #D4A84B; outline-offset: 2px; }
}

@media (max-width: 359px) {
  .smbm-brand-t small { display: none; }
}


@media (max-width: 991px) {
  .smbm-feature[aria-current="page"] { border-color: #ecd08f; box-shadow: 0 0 0 2px rgba(236, 208, 143, .35), 0 10px 30px rgba(0, 0, 0, .30); }

}

/* ---- Interaction states (owner 2026-10-10: touched items went near-black on iOS). ----
   Every text element gets an explicit colour in every state, so no Webflow a:hover / a:active /
   .w--current / dropdown-link rule can leak through. Gold = #D4A84B. Hover only on real hover
   devices; touch uses :active + .is-touch (set by the JS touch handlers). */
@media (max-width: 991px) {
  html .smbm a, html .smbm button { -webkit-tap-highlight-color: transparent !important; text-decoration: none !important; outline-color: #D4A84B; }

  /* base (all states) */
  html .smbm a.smbm-row, html .smbm a.smbm-row:link, html .smbm a.smbm-row:visited,
  html .smbm a.smbm-row .smbm-row-t,
  html .smbm a.smbm-sub, html .smbm a.smbm-sub:link, html .smbm a.smbm-sub:visited,
  html .smbm a.smbm-sub .smbm-sub-t,
  html .smbm button.smbm-acc-btn, html .smbm button.smbm-acc-btn > span:first-child,
  html .smbm a.smbm-feature, html .smbm a.smbm-feature .smbm-feature-t,
  html .smbm a.smbm-brand, html .smbm a.smbm-brand .smbm-brand-t,
  html .smbm a.smbm-btn-join, html .smbm a.smbm-btn-join span,
  html .smbm button.smbm-close { color: #ffffff !important; }
  html .smbm a.smbm-sub .smbm-sub-d, html .smbm a.smbm-brand .smbm-brand-t small { color: #9fb0cc !important; }
  html .smbm a.smbm-feature .smbm-feature-d { color: #c3cddc !important; }
  html .smbm .smbm-minor a, html .smbm .smbm-minor a:link, html .smbm .smbm-minor a:visited { color: #dbe4f3 !important; }
  html .smbm a.smbm-btn-call, html .smbm a.smbm-btn-call span { color: #ecd08f !important; }
  html .smbm a.smbm-row .smbm-tile, html .smbm a.smbm-sub .smbm-tile { color: #a9c4ff !important; }
  html .smbm a.smbm-row[aria-current="page"] .smbm-tile { color: #ecd08f !important; }

  /* pressed / touched (all devices) */
  html .smbm a.smbm-row:active, html .smbm a.smbm-row.is-touch,
  html .smbm a.smbm-sub:active, html .smbm a.smbm-sub.is-touch,
  html .smbm button.smbm-acc-btn:active, html .smbm button.smbm-acc-btn.is-touch,
  html .smbm .smbm-minor a:active, html .smbm .smbm-minor a.is-touch { background-color: rgba(212, 168, 75, .12) !important; }

  html .smbm a.smbm-row:active, html .smbm a.smbm-row.is-touch,
  html .smbm a.smbm-row:active .smbm-row-t, html .smbm a.smbm-row.is-touch .smbm-row-t,
  html .smbm a.smbm-row:active .smbm-chev, html .smbm a.smbm-row.is-touch .smbm-chev,
  html .smbm a.smbm-row:active .smbm-tile, html .smbm a.smbm-row.is-touch .smbm-tile,
  html .smbm a.smbm-sub:active, html .smbm a.smbm-sub.is-touch,
  html .smbm a.smbm-sub:active .smbm-sub-t, html .smbm a.smbm-sub.is-touch .smbm-sub-t,
  html .smbm a.smbm-sub:active .smbm-tile, html .smbm a.smbm-sub.is-touch .smbm-tile,
  html .smbm button.smbm-acc-btn:active, html .smbm button.smbm-acc-btn.is-touch,
  html .smbm button.smbm-acc-btn:active > span:first-child, html .smbm button.smbm-acc-btn.is-touch > span:first-child,
  html .smbm button.smbm-acc-btn:active .smbm-acc-ic, html .smbm button.smbm-acc-btn.is-touch .smbm-acc-ic,
  html .smbm .smbm-minor a:active, html .smbm .smbm-minor a.is-touch,
  html .smbm .smbm-minor a:active .smbm-ic, html .smbm .smbm-minor a.is-touch .smbm-ic,
  html .smbm a.smbm-feature:active .smbm-feature-t, html .smbm a.smbm-feature.is-touch .smbm-feature-t,
  html .smbm a.smbm-brand:active .smbm-brand-t, html .smbm a.smbm-brand.is-touch .smbm-brand-t,
  html .smbm button.smbm-close:active, html .smbm button.smbm-close.is-touch,
  html .smbm a.smbm-btn-call:active, html .smbm a.smbm-btn-call.is-touch,
  html .smbm a.smbm-btn-call:active span, html .smbm a.smbm-btn-call.is-touch span { color: #D4A84B !important; }
  html .smbm a.smbm-sub:active .smbm-sub-d, html .smbm a.smbm-sub.is-touch .smbm-sub-d { color: #c9a24a !important; }
  html .smbm a.smbm-row:active .smbm-tile, html .smbm a.smbm-row.is-touch .smbm-tile,
  html .smbm a.smbm-sub:active .smbm-tile, html .smbm a.smbm-sub.is-touch .smbm-tile { border-color: rgba(212, 168, 75, .55) !important; background: rgba(212, 168, 75, .14) !important; }
  html .smbm a.smbm-feature:active, html .smbm a.smbm-feature.is-touch { border-color: #ecd08f !important; }
  html .smbm a.smbm-btn-call:active, html .smbm a.smbm-btn-call.is-touch { background: rgba(212, 168, 75, .18) !important; }
  html .smbm a.smbm-btn-join:active, html .smbm a.smbm-btn-join.is-touch { filter: brightness(1.1); }
  html .smbm button.smbm-close:active, html .smbm button.smbm-close.is-touch { border-color: rgba(212, 168, 75, .6) !important; }

  /* keyboard focus */
  html .smbm a.smbm-row:focus-visible, html .smbm a.smbm-sub:focus-visible, html .smbm .smbm-minor a:focus-visible { background-color: rgba(212, 168, 75, .12) !important; }
  html .smbm a.smbm-row:focus-visible .smbm-row-t, html .smbm a.smbm-sub:focus-visible .smbm-sub-t,
  html .smbm button.smbm-acc-btn:focus-visible > span:first-child, html .smbm .smbm-minor a:focus-visible { color: #D4A84B !important; }
}

@media (max-width: 991px) and (hover: hover) and (pointer: fine) {
  html .smbm a.smbm-row:hover, html .smbm a.smbm-sub:hover, html .smbm button.smbm-acc-btn:hover,
  html .smbm .smbm-minor a:hover { background-color: rgba(212, 168, 75, .10) !important; }
  html .smbm a.smbm-row:hover .smbm-row-t, html .smbm a.smbm-row:hover .smbm-chev, html .smbm a.smbm-row:hover .smbm-tile,
  html .smbm a.smbm-sub:hover .smbm-sub-t, html .smbm a.smbm-sub:hover .smbm-tile,
  html .smbm button.smbm-acc-btn:hover > span:first-child, html .smbm button.smbm-acc-btn:hover .smbm-acc-ic,
  html .smbm .smbm-minor a:hover, html .smbm .smbm-minor a:hover .smbm-ic,
  html .smbm a.smbm-feature:hover .smbm-feature-t, html .smbm a.smbm-brand:hover .smbm-brand-t,
  html .smbm button.smbm-close:hover, html .smbm a.smbm-btn-call:hover, html .smbm a.smbm-btn-call:hover span { color: #D4A84B !important; }
  html .smbm a.smbm-row:hover .smbm-chev { transform: translateX(2px); }
  html .smbm a.smbm-row:hover .smbm-tile, html .smbm a.smbm-sub:hover .smbm-tile { border-color: rgba(212, 168, 75, .55) !important; background: rgba(212, 168, 75, .14) !important; }
  html .smbm .smbm-minor a:hover, html .smbm button.smbm-close:hover { border-color: rgba(212, 168, 75, .6) !important; }
  html .smbm a.smbm-btn-call:hover { background: rgba(212, 168, 75, .16) !important; }
  html .smbm a.smbm-btn-join:hover { filter: brightness(1.08); }
  html .smbm a.smbm-feature:hover .smbm-feature-cta .smbm-chev { transform: translateX(3px); }
  .smbm-burger:hover span:nth-child(2) { width: 20px; margin-left: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .smbm, .smbm *, .smbm-burger, .smbm-burger * { transition-duration: 0s !important; transition-delay: 0s !important; }
}

/* Tablet (768-991): the header also shows JOIN + phone buttons, so slide them left to clear the menu button. */
@media (min-width: 768px) and (max-width: 991px) {
  html.smbm-on .w-nav .code-embed-87, html.smbm-on .w-nav .code-embed-61 { transform: translateX(-58px); }
}