html,
body {
  overflow-x: hidden;           /* no horizontal scroll anywhere */
  overscroll-behavior-x: none;  /* disable iOS rubber-band swipe */
}
/*=================================================================
  CUSTOM.CSS
  Centralized custom styles for pricing tables, affiliate section,
  buttons, full-bleed backgrounds, and global overrides
=================================================================*/

/*----------------------------------------
  Prevent unwanted horizontal scrolling
----------------------------------------*/
html,body {
  margin:0;padding:0;
  font-family: 'Poppins', system-ui,-apple-system,BlinkMacSystemFont,sans-serif;
  background:#fff;color:#111;
  text-align:left;overflow-x:hidden;
}

/*----------------------------------------
  Full-bleed background helper
----------------------------------------*/
.full-bleed {
  position: relative;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  background-image: #0997d9;
}
.full-bleed::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: inherit;
  z-index: -1;
}

/*=================================================================
  PRICING TABLE SECTION (namespace .pricing-section)
=================================================================*/
.pricing-section {
  font-family: 'Poppins', sans-serif;
  overflow-x: hidden;
}

/* layout adjustments */
.pricing-section .pricing-cards .columns {
  margin: 0 -1rem;
  flex-wrap: wrap;
}
.pricing-section .pricing-cards .column {
  padding: 0 1rem;
  margin-bottom: 2rem;
  flex: 1 1 100%;
  max-width: 100%;
}
@media (min-width: 769px) {
  .pricing-section .pricing-cards .column {
    flex: 1 1 25%;
    max-width: 25%;
  }
}

/* card styling */
.pricing-section .plan-card {
  background: #ffffff;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.05);
  padding: 2rem 1.5rem;
  display: flex;
  flex-direction: column;
  height: 100%;
}
.pricing-section .plan-title {
  font-size: 1.5rem;
  font-weight: 700;
  color: #4f46e5;
  margin-bottom: 0.5rem;
  text-align: center;
}
.pricing-section .plan-price {
  font-size: 2.5rem;
  font-weight: 700;
  margin-bottom: 1rem;
  text-align: center;
}
.pricing-section .plan-price .currency {
  font-size: 1rem;
  vertical-align: super;
}
.pricing-section .features {
  list-style: none;
  padding: 0;
  margin: 1rem 0;
  flex-grow: 1;
}
.pricing-section .features li {
  border-bottom: 1px solid #eee;
  padding: 0.5rem 0;
  font-size: 0.95rem;
}
.pricing-section .plan-cta {
  text-align: center;
  margin-top: 1rem;
}


/* "Sign Up" button inside pricing */
.plan-button {
  display: inline-block;
  padding: 0.75rem 1.5rem;
  border-radius: 2rem;
  background-image: linear-gradient(135deg, #0997d9, #ff0090);
  color: #fff !important;
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  font-size: 1rem;
  text-decoration: none;
  text-align: center;
  border: none;
  transition: filter 0.2s ease, box-shadow 0.2s ease;
}
.plan-button:hover,
.plan-button:focus {
  filter: brightness(1.1);
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  outline: none;
}

/*=================================================================
  AFFILIATE SECTION STYLES
=================================================================*/
.affiliate-section {
  font-family: 'Poppins', sans-serif;
  padding: 3rem 0;
}


/* Commission tables */
.commission-table,
.example-table {
  width: 100%;
  border-collapse: collapse;
  margin: 1 auto;
}
.commission-table th,
.commission-table td,
.example-table th,
.example-table td {
  padding: 0.75rem 1rem;
  text-align: left;
  border-bottom: 1px solid #eee;
}
.commission-table th {
  background: none;
  font-weight: 700;
}

/* tooltips on headers */
.tooltip-header { position: relative; }
.tooltip-icon {
  display: inline-block;
  margin-left: 0.25rem;
  width: 1em;
  height: 1em;
  line-height: 1em;
  text-align: center;
  border-radius: 50%;
  background: #0997d9;
  color: #fff;
  font-size: 0.75rem;
  cursor: help;
}
.tooltip-text {
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(-0.5rem);
  background: rgba(0,0,0,0.8);
  color: #fff;
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
  white-space: nowrap;
  font-size: 0.75rem;
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.2s ease;
  z-index: 1000;
}
.tooltip-icon:hover + .tooltip-text,
.tooltip-icon:focus + .tooltip-text {
  visibility: visible;
  opacity: 1;
}

@media (max-width: 767px) {
  .commission-table thead { display: none; }
  .commission-table tr { display: block; margin-bottom: 1.5rem; }
  .commission-table td {
    display: flex;
    justify-content: space-between;
    padding: 0.5rem;
  }
  .commission-table td:before {
    content: attr(data-label);
    font-weight: 600;
  }
}

/* Responsive, centered bonus tier grid */
.bonus-tiers {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1rem;
  max-width: 1200px;    /* adjust to your main content width */
  margin: 0 auto;       /* center the whole grid */
  padding: 0 1rem;      /* 1rem breathing room at the edges */
}
.tier-card {
  background: #fff;
  border: 2px solid transparent;
  border-image: #0997d9) 1;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
  padding: 1.5rem;
  flex: 1 1 200px;
  text-align: center;
  transition: border-color 0.3s ease, transform 0.3s ease;
}
.tier-card:hover {
  border-color: #0997d9;
  transform: translateY(-4px);
}
.tier-silver { border-image: linear-gradient(135deg, #C0C0C0, #999) 1; }
.tier-gold   { border-image: linear-gradient(135deg, #FFD700, #FFC107) 1; }
.tier-platinum { border-image: linear-gradient(135deg, #E5E4E2, #D4D3D2) 1; }

/* Branded gradient button for example payout toggle */
.deep-dive summary {
  display: block;
  width: 100%;
  text-align: center;
  padding: 0.75rem 1rem;
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  font-size: 1rem;
  color: #fff;
  background: #0997d9;
  border: none;
  border-radius: 8px;
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
  text-decoration: none;
  transition: background-position 0.4s ease, transform 0.2s ease, box-shadow 0.2s ease;
  background-size: 200% 200%;
  background-position: left center;
}
.deep-dive summary:hover {
  background-position: right center;
  transform: translateY(-2px);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
  outline: none;
}
.deep-dive table { margin-top: 1rem; }


/* Callouts */ {
  background: rgba(9,151,217,0.1);
  border-left: 4px solid #0997d9;
  padding: 0.75rem 1rem;
  margin-bottom: 0.75rem;
}

/* Affiliate primary & standardized button classes */
/* Applies to both gradient and contrast variants */
.bnt,
.bnt-contrast {
  display: inline-block;
  padding: 0.75rem 1.5rem;
  border-radius: 2rem;
  text-decoration: none;
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  font-size: 1rem;
  white-space: nowrap;
  position: relative;
  overflow: hidden;
  border: none;
}

/* Gradient button base */
.bnt {
  background-image: #0997d9,) !important;
  color: #fff !important;
}

/* White-bg contrast text */
.bnt-contrast {
  background-color: #fff !important;
}
.bnt-contrast .gradient-text {
  background-image: linear-gradient(135deg, #0997d9 0%,);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Hover / focus: underline text, add subtle glow */
.bnt:hover,
.bnt:focus,
.bnt-contrast:hover,
.bnt-contrast:focus {
  text-decoration: underline;
  text-decoration-color: #fff;
  text-underline-offset: 4px;
  text-decoration-thickness: 2px;
  filter: brightness(1.1) !important;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1) !important;
  outline: none !important;
}

/*=================================================================
  CASE STUDY POPUP
=================================================================***/
:root {
  --kcs_bg:#ffffff;
  --kcs_text:#111;
  --kcs_muted:#666;
  --kcs_primary:#0997d9;
  --kcs_primary_2:#0997d9;
  --kcs_radius:20px;
}

.kannect_popup {position:fixed;inset:0;display:none;z-index:99999;}
.kannect_popup[aria-hidden="false"] {display:flex;align-items:center;justify-content:center;}

.kcs_overlay {
  position:absolute;inset:0;
  background:rgba(0,0,0,.45);backdrop-filter:blur(2px);
}

.kcs_dialog {
  position:relative;
  max-width:600px;
  width:90%;
  background:
    linear-gradient(var(--kcs_bg), var(--kcs_bg)) padding-box,
    linear-gradient(135deg,var(--kcs_primary) 0%,var(--kcs_primary_2) 100%) border-box;
  border:4px solid transparent;
  border-radius:var(--kcs_radius);
  box-shadow:0 12px 36px rgba(0,0,0,.18);
  padding:32px 24px;
  text-align:center;
  animation:kcs_pop .25s ease-out;
  font-family:'Poppins',sans-serif;
}

@keyframes kcs_pop {from{opacity:0;transform:translateY(20px);}to{opacity:1;transform:translateY(0);}}

.kcs_close {
  position:absolute;top:10px;right:14px;
  font-size:28px;background:transparent;border:0;cursor:pointer;color:var(--kcs_text);
}

.kcs_header h2 {margin:0 0 10px;font-size:1.5rem;font-weight:700;}
.kcs_subtitle {margin:0 0 20px;font-size:1rem;color:var(--kcs_muted);line-height:1.5;}

/* CHECKLIST: Centered rows with icon + text */
.kcs_points {
  list-style:none;
  margin:0 auto 24px;
  padding:0;
  display:table !important;
  border-collapse:separate;
  border-spacing:0 12px;
  margin-left:auto;
  margin-right:auto;
}

.kcs_points > li,
.kcs_item {
  display:table-row !important;
}

/* icon cell */
.kcs_icon {
  display:table-cell !important;
  width:32px !important;
  height:32px !important;
  vertical-align:middle !important;
  text-align:right !important; /* checkmark hugs text */
  padding-right:12px !important;
}

/* text cell */
.kcs_item > span {
  display:table-cell !important;
  vertical-align:middle !important;
  text-align:left !important;
  color:var(--kcs_text);
  line-height:1;
  font-size:1rem;
  white-space:normal;
}

/* center the whole list */
.kcs_points {
  margin:0 auto 24px;
  text-align:center;
}
.kcs_highlight_text {
    font-weight: 700;
    font-size: 1.2rem;
    color: #111;
    margin: 0 0 -0.5rem;
    text-align: center;  /* or left if you prefer */
  }


/* Buttons */
.kcs_actions {display:inline-flex;align-items:center;gap:12px;justify-content:center;flex-wrap:wrap;gap:12px;margin-top:12px;}
.kcs_btn {padding:12px 18px;border-radius:12px;font-weight:700;text-decoration:none;}
.kcs_btn_primary {
  color:#fff;
  background:linear-gradient(135deg,var(--kcs_primary) 0%,var(--kcs_primary_2) 100%);
  box-shadow:0 6px 16px rgba(9,151,217,.25);
}
.kcs_btn_ghost {background:transparent;border:1px solid #ddd;color:var(--kcs_text);}
.kcs_privacy {margin-top:16px;font-size:.8rem;color:var(--kcs_muted);}
/* Mobile friendly popup tweaks */
.kannect_popup{ padding:12px; }     /* prevents edge clipping on tiny screens */

.kcs_dialog img{ max-width:100%; height:auto; }

/* Phones */
@media (max-width: 600px){
  .kcs_dialog{
    width:min(94vw, 560px);
    max-height:calc(100dvh - 24px);
    overflow:auto;
    -webkit-overflow-scrolling:touch;
    padding:20px 16px;
    border-width:3px;
    border-radius:16px;
  }

  .kcs_header h2{ font-size:clamp(1.125rem, 4.5vw, 1.35rem); }
  .kcs_subtitle{ font-size:.95rem; }

  /* checklist sizing */
  .kcs_points{ gap:10px; max-width:92vw; }
  .kcs_icon{ width:28px !important; height:28px !important; }
  .kcs_item > span{ font-size:.95rem; line-height:1.45; }

  /* buttons stack and fill width */
  .kcs_actions{
    flex-direction:column;
    gap:10px;
  }
  .kcs_actions .btn,
  .kcs_actions .btn-gradient,
  .kcs_actions .btn.btn-contrast.gradient-text-btn{
    width:100%;
    padding:.9rem 1rem;
  }

  .kcs_privacy{ font-size:.8rem; }
}
.kcs_close {
  top: 8px;
  right: 10px;
  font-size: 32px;
  padding: 4px;
  z-index: 1;
}

.kcs_dialog {
  padding-top: 48px !important; /* move content down below close button */
}

.kcs_header {
  margin-top: 10px;
}
/* Very small phones: gentle scale so nothing overflows */
@media (max-width: 360px){
  .kcs_dialog{
    transform:scale(.94);
    transform-origin:center;
  }
}
/* respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .kcs_dialog{ animation:none; }
}
/* Restore FA icons after global overrides */                    /* FINAL FIX — override the global font reset for FA */
.fas, .far, .fal, .fab,
.fas::before, .far::before, .fal::before, .fab::before {
  font-family: "Font Awesome 5 Free", "Font Awesome 5 Brands" !important;
  font-weight: 900 !important; /* or 400 depending on icon type */
  font-style: normal !important;
  display: inline-block !important;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
}
/*=================================================================
  MOBILE OPTIMIZATIONS
=================================================================***/
@media (max-width: 767px) {
  /* Pricing adjustments */
  .pricing-section .plan-title { font-size: 1.25rem; }
  .pricing-section .plan-price { font-size: 2rem; }
  .pricing-section .features li { font-size: 0.9rem; }
  .pricing-section .plan-button { width: 100%; max-width: 320px; }

  /* Bonus tiers stack vertically */
  .bonus-tiers { flex-direction: column; gap: 1.5rem; }

  /* Deep-dive summary full width */
  .deep-dive summary { width: 100%; text-align: center; }

  /* Affiliate section padding */
  .affiliate-section { padding: 2rem 1rem; }

  /* Commission tables tighter padding */
  .commission-table th,
  .commission-table td,
  .example-table th,
  .example-table td {
    padding: 0.5rem 0.75rem;
  }

  /* Buttons full-width on mobile */
  .bnt,
  .bnt-contrast { display: block; margin: 0 auto; width: 100%; max-width: 320px; }
}

  .desktop-only  { display: block; }
  .mobile-only   { display: none;  }

  @media (max-width: 767px) {
    .desktop-only { display: none !important; }
    .mobile-only  { display: block !important; }
  }
  .table-container { overflow-x:auto; margin-bottom:2rem; }
  .commission-table {
    width:100%; border-collapse:collapse; text-align:center;
  }
  .commission-table th,
  .commission-table td {
    padding:0.75em 0.5em; border:1px solid #ddd;
  }
  @media(max-width:600px){
    .commission-table { font-size:0.9rem; }
    .commission-table th, .commission-table td { white-space:nowrap; }
  }
  .tier-card { background:#fafafa; }
  .tier-card .subtext { margin-top:0.5em; }
  /*=================================================================
  Commission Table: 2/3 width, centered, scrollable
  =================================================================*/
  .table-scroll {
    width: 66.6666vw;            /* two-thirds of the viewport */
    max-width: 800px;            /* optional cap so it never blows out */
    margin: 1.5rem auto;         /* vertical spacing + auto-center */
    padding: 0 1rem;             /* gutter on very narrow screens */
    overflow-x: auto;            /* keep horizontal scroll if table is wider */
    -webkit-overflow-scrolling: touch;
  }

  .table-scroll .commission-table {
    width: 100% !important;      /* fill its container fully */
    min-width: 300px;            /* ensure usability on the smallest phones */
  }

  .table-scroll {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
  }

  @media (min-width: 640px) {
    .table-scroll {
      padding-left: 1rem;
      padding-right: 1rem;
    }
  }

  @media (min-width: 768px) {
    .table-scroll {
      padding-left: 1.5rem;
      padding-right: 1.5rem;
    }
  }


  /* alias BulKit’s btn-contrast to your white-contrast pill */
  .btn-contrast {
    /* copy of .bnt-contrast rules */
    display: inline-block;
    background-color: #fff !important;
    padding: 0.75rem 2rem;
    border-radius: 2rem;
    position: relative;
    overflow: hidden;
    text-decoration: none;
    white-space: nowrap;
    text-align: center;  /* ensure text is always centered */
  }

  .btn-contrast .gradient-text {
    background-image: linear-gradient(135deg, #0997d9 0%, #ff0090 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }

  /* hover underline + glow */
  .btn-contrast:hover,
  .btn-contrast:focus {
    text-decoration: underline;
    text-decoration-color: #fff;
    text-underline-offset: 4px;
    text-decoration-thickness: 2px;
    filter: brightness(1.1) !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1) !important;
    outline: none !important;
  }
  /* ensure our white‐contrast button text is bold */
  .btn-contrast .gradient-text {
    font-weight: 700;
  }

  /* White‐bg, gradient‐text “contrast” button */
.bnt-contrast {
  background-color: #fff !important;
  padding: 0.75rem 1.0rem;
  border-radius: 2rem;
  font-weight: 700;
  font-size: 1rem;
  border: none;
}

.bnt-contrast .gradient-text {
  background-image: linear-gradient(135deg, #0997d9 0%, #ff0090 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

  /*–– Hero-section white button with gradient text and hover highlight ––*/
  .hero-wrapper .bnt-contrast {
    display: inline-block;
    background-color: #fff;              /* white pill background */
    padding: 0.75rem 1.5rem;             /* comfortable click area */
    border-radius: 2rem;                 /* pill shape */
    text-decoration: none;
    white-space: nowrap;
    position: relative;
    transition: box-shadow 0.2s ease;
  }

  /* clip the gradient into the text */
  .hero-wrapper .bnt-contrast .gradient-text {
    background-image: linear-gradient(135deg, #0997d9 0%, #ff0090 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    font-size: 1rem;
    line-height: 1;
  }

  /* hover/focus highlight */
  .hero-wrapper .bnt-contrast:hover,
  .hero-wrapper .bnt-contrast:focus {
    box-shadow: 0 0 0 3px rgba(255,255,255,0.8); /* white glow outline */
    outline: none;
  }
  /* Override hover glow to solid white for gradient and contrast buttons */
  .bnt:hover,
  .bnt:focus,
  .bnt-contrast:hover,
  .bnt-contrast:focus {
    box-shadow: 0 0 8px rgba(255,255,255,0.6) !important;
  }
  /* Allow buttons to show their hover glow */
  .bnt,
  .bnt-contrast {
    overflow: visible !important;
  }
  /* Specifically target the white-contrast buttons */
  .bnt-contrast:hover,
  .bnt-contrast:focus,
  .btn-contrast:hover,
  .btn-contrast:focus {
    /* Underline in your blue brand color */
    text-decoration: underline;
    text-decoration-color: #0997d9 !important;
    text-underline-offset: 4px;
    text-decoration-thickness: 2px;

    /* Re-apply the white hover glow */
    box-shadow: 0 0 8px rgba(255,255,255,0.6) !important;
    outline: none !important;
  }
  /* Make the deep-dive toggle pill-shaped like other gradient buttons */
  .deep-dive summary.bnt {
    display: inline-block;        /* don’t stretch full-width */
    width: auto !important;       /* revert any 100% width */
    padding: 0.75rem 1.5rem;       /* match other pill buttons */
    border-radius: 2rem !important; /* big pill radius */
  }
    /* Navbar buttons: horizontal flex with gap */
  .st-nav-secondary .nav {
    display: flex;
    align-items: center;
    gap: 1rem;           /* space between Login & Signup */
    margin-top: 0 !important;
  }

  /* Slim down the pills in the navbar */
  .st-nav-secondary .btn-outline-gradient,
  .st-nav-secondary .btn-contrast.gradient-text-btn {
    padding: 0.5rem 1rem !important;
    font-size: 0.9rem;   /* adjust as needed to match your other navbar text */
  }

  /* Mobile: stack and full-width */
  @media (max-width: 767px) {
    .st-nav-secondary .nav {
      flex-direction: column;
      gap: 0rem;
    }
    .st-nav-secondary .btn-outline-gradient,
    .st-nav-secondary .btn-contrast.gradient-text-btn {
      width: 100%;
      text-align: center;
    }
  }
  /* Desktop — move the fixed nav down by 10px and add a little vertical padding */
  @media (min-width: 768px) {
    /* push the whole nav off the top */
    nav#main-nav.fixed-top {
      top: 0px !important;
    }
    /* give the inside a bit of breathing room */
    nav#main-nav .container {
      padding-top: 0.5rem;
      padding-bottom: 0.5rem;
    }
  }

  /* Mobile — flex-center the logo and toggler in the same line */
  @media (max-width: 767px) {
    nav#main-nav .container {
      display: flex !important;
      align-items: center;
      justify-content: space-between;
      padding: 1rem 0rem !important;  /* adjust vertical padding to taste */
    }

    /* reset any weird top offsets you added before */
    .navbar-toggler,
    .navbar-brand {
      position: relative !important;
      top: 5 !important;
      margin: 5 !important;
    }

    /* ensure the brand/logo is vertically centered too */
    .navbar-brand img.logo {
      margin: 5 !important;
      padding: 0 !important;
    }
    .navbar-brand img.logo {
      display: inline-block;
      vertical-align: middle;
      max-height: 40px;       /* adjust if you need it bigger/smaller */
    }
    @media (max-width: 767px) {
      /* when the mobile nav <li> has .st-popup-active (i.e. menu is open), hide the toggler */
      .st-nav-section.st-nav-mobile.st-popup-active .navbar-toggler {
        display: none !important;
      }
  }


  /* -------------------------------------------------------------------
     Footer social icons: transparent background + white icons
     ------------------------------------------------------------------- */
     .btn-contrast.text-primary {
       /* white background pill */
       background-color: #fff !important;
       color: #0997d9 !important;
       padding: 0.5rem !important;
       box-shadow: none !important;
       border: none !important;
     }
     .btn-contrast.text-primary i {
       font-size: 1.5rem;
     }
/*——————————————————————————————————————
  Cookie banner: force-zero button margins
——————————————————————————————————————*/
.alert.cookiealert .cookiealert__action button {
  margin: 0 !important;       /* kill any built-in button margin */
  padding: 0.5rem 1rem !important; /* re-size if you like */
}

/*——————————————————————————————————————
  Cookie banner: exact gap between text & button
——————————————————————————————————————*/
.alert.cookiealert .cookiealert__message p {
  margin-bottom: 0rem !important; /* your desired gap */
}

@media (max-width: 767px) {
  .alert.cookiealert .cookiealert__action {
    margin-top: 0 !important;      /* no extra gap from utility classes */
  }
}
/*——————————————————————————————————————
  Mobile Hamburger Menu: open and close
——————————————————————————————————————*/
/* 1. Re-show the wrapper/nav so it’s actually in the DOM */
.navbar {
  display: block !important;
}

/* 2. Force the toggler visible on *all* breakpoints */
.navbar-toggler {
  display: inline-block !important;
  pointer-events: auto !important;
  z-index: 2000 !important;    /* sit on top of everything */
}

/* 3. Undo the bootstrap “hide on expand” rules */
.navbar-expand-sm .navbar-toggler,
.navbar-expand-md .navbar-toggler,
.navbar-expand-lg .navbar-toggler {
  display: inline-block !important;
}

/* 4. Make sure the collapsed menu (st-popup) sits under the toggler */
.st-popup {
  z-index: 1999 !important;
}