/* Scraped Elementor pages bring their own full stylesheets. Keep global CSS
   minimal so it never overrides the original site styling. */
html,
body {
  margin: 0;
  padding: 0;
  /* Twenty Twenty-One defaults --global--color-background to mint #d1e4dd.
     Scraped `body.custom-background { background:#fff }` targets real <body>,
     but we put WP body classes on a wrapper div — so navigations flash mint. */
  background-color: #fff;
  /* Elementor kit primary = Nunito. Without this (and with fonts blocked
     cross-origin), chrome + hero fall back to system sans and diverge from prod. */
  font-family: "Nunito", Sans-serif;
}

html {
  --global--color-background: #fff;
}

/* Kill horizontal scroll without breaking position:sticky.
   overflow-x:hidden on html/body forces overflow-y to auto and creates a
   scrollport that kills sticky headers (and the megamenu with them). */
html,
body {
  overflow-x: clip;
  max-width: 100%;
}

/* Sticky site header (Elementor header template). The header element itself is
   transparent — its inner container is white — so paint it white to avoid a
   see-through strip when it overlays scrolled content. Sticks flush under the
   fixed Simple Banner via --crm-banner-h (0 when banner is hidden on mobile). */
header.elementor-location-header {
  position: sticky !important;
  top: var(--crm-banner-h, 0px) !important;
  z-index: 1000 !important;
  background: #fff;
  width: 100%;
  max-width: 100vw;
}

/* Native sticky only — Elementor's sticky JS inserts a spacer that doubles
   header height every other frame and flutters scroll by ~108px. */
header.elementor-location-header .e-con[data-settings*="sticky"],
header.elementor-location-header .e-con.elementor-sticky,
header.elementor-location-header .e-con.elementor-sticky--active {
  position: sticky !important;
  top: var(--crm-banner-h, 0px) !important;
  left: auto !important;
  bottom: auto !important;
  width: 100% !important;
  max-width: 100% !important;
  margin-top: 0 !important;
  transform: none !important;
  z-index: 1001 !important;
  background: #fff;
}

header.elementor-location-header .elementor-sticky__spacer {
  display: none !important;
  height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  min-height: 0 !important;
}

/* Elementor kit adds margin-top:25px + padding-top:25px on the sticky nav row —
   with a fixed Simple Banner that reads as a large white gap. */
header.elementor-location-header > .elementor-section {
  margin-top: 0 !important;
}

header.elementor-location-header > .elementor-section.elementor-element-1830ceb9 {
  padding-top: 8px !important;
}

/* Product heroes use margin-top:-5% (Elementor) to tuck under an overlay
   header. Our header is sticky-in-flow, so that pull-up leaves ~19px under
   the nav and the eyebrow looks glued to the menu. Keep the section's own
   padding; only kill the negative top margin on the first page section. */
.elementor[data-elementor-type="wp-page"] > .elementor-top-section:first-child,
.elementor[data-elementor-type="wp-page"] > .e-con.e-parent:first-child {
  margin-top: 0 !important;
  --margin-top: 0px !important;
}

/* Megamenu posts only: Elementor's item-ratio box + fit-image transform leave
   a tall empty band under the photo. Pack those cards to real image height.
   Do NOT apply on page blog grids — they need the fixed ratio (e.g. 0.66)
   so mixed landscape/square thumbs stay even (see email-marketing articles). */
.elementskit-megamenu-panel .elementor-widget-posts .elementor-posts-container,
.elementskit-megamenu-panel .elementor-widget-posts .elementor-posts-container.elementor-has-item-ratio {
  align-items: start !important;
  grid-auto-rows: auto !important;
  grid-template-rows: none !important;
}

.elementskit-megamenu-panel .elementor-widget-posts .elementor-post {
  height: auto !important;
  min-height: 0 !important;
  align-self: start !important;
}

.elementskit-megamenu-panel .elementor-widget-posts .elementor-post__text {
  flex-grow: 0 !important;
  margin-top: 0 !important;
}

.elementskit-megamenu-panel .elementor-widget-posts .elementor-post__thumbnail,
.elementskit-megamenu-panel .elementor-widget-posts .elementor-post__thumbnail__link {
  padding-bottom: 0 !important;
  height: auto !important;
  min-height: 0 !important;
  overflow: hidden;
}

.elementskit-megamenu-panel .elementor-widget-posts .elementor-post__thumbnail img {
  position: static !important;
  inset: auto !important;
  top: auto !important;
  left: auto !important;
  width: 100% !important;
  height: auto !important;
  max-width: 100% !important;
  max-height: none !important;
  transform: none !important;
  object-fit: initial !important;
  display: block;
  border-radius: inherit;
}

/* Megamenu Play / App Store: Elementor grids on `.e-con-inner` (not the
   outer e-con). Fixed 135px badges overflowed the gray column and stacked.
   Flex row + fluid badge width; Play PNG was cropped to drop empty padding. */
.elementskit-megamenu-panel .elementor-element-7a305760 {
  --margin-left: 8px !important;
  --margin-right: 8px !important;
  margin-left: 8px !important;
  margin-right: 8px !important;
}

.elementskit-megamenu-panel .elementor-element-7a305760 > .e-con-inner {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  grid-template-columns: none !important;
  grid-auto-flow: unset !important;
}

.elementskit-megamenu-panel .elementor-element-7a305760 .elementor-widget-image,
.elementskit-megamenu-panel .elementor-element-231e2a83,
.elementskit-megamenu-panel .elementor-element-5cc2e165 {
  width: auto !important;
  max-width: calc(50% - 4px) !important;
  flex: 1 1 0 !important;
  min-width: 0 !important;
}

.elementskit-megamenu-panel .elementor-element-7a305760 .elementor-widget-image > .elementor-widget-container,
.elementskit-megamenu-panel .elementor-element-231e2a83 > .elementor-widget-container,
.elementskit-megamenu-panel .elementor-element-5cc2e165 > .elementor-widget-container {
  padding: 0 !important;
}

.elementskit-megamenu-panel a[href*="play.google.com"] img,
.elementskit-megamenu-panel a[href*="apps.apple.com"] img,
.elementskit-megamenu-panel .elementor-element-7a305760 .elementor-widget-image img {
  width: 110px !important;
  max-width: 110px !important;
  height: 34px !important;
  max-height: 34px !important;
  object-fit: contain !important;
  object-position: center !important;
  display: block !important;
  margin-inline: auto !important;
}

/* Page posts grids: scraped inline height:% beats Elementor's ratio crop.
   Force cover inside the padding-bottom ratio box (matches prod). */
.elementor-widget-posts:not(:is(.elementskit-megamenu-panel *))
  .elementor-posts-container.elementor-has-item-ratio
  .elementor-post__thumbnail {
  overflow: hidden;
  position: relative;
}

.elementor-widget-posts:not(:is(.elementskit-megamenu-panel *))
  .elementor-posts-container.elementor-has-item-ratio
  .elementor-post__thumbnail
  img {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  transform: none !important;
  object-fit: cover !important;
  object-position: center !important;
}

/* Blogs archive (page-id-9741): Elementor left masonry on with no item-ratio CSS,
   so square thumbs dwarf landscape ones. Force a shared 16:9 crop box. */
.page-id-9741 .elementor-widget-posts .elementor-post__thumbnail {
  position: relative !important;
  display: block;
  width: 100%;
  height: 0 !important;
  padding-bottom: 56.25% !important;
  overflow: hidden;
}

.page-id-9741 .elementor-widget-posts .elementor-post__thumbnail img {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  transform: none !important;
  object-fit: cover !important;
  object-position: center !important;
}

/* Full-width mega menu. ElementsKit's panel is already 100vw wide but is
   absolutely positioned against the nav, so it starts mid-page and overflows
   right. Pin it to the viewport, flush to the bottom of the menu row so there's
   no dead gap for the cursor to cross (crossing it drops :hover and closes the
   panel). Desktop only — tablet/mobile use the off-canvas menu. --crm-header-h
   is set from JS to the live menu-row bottom (varies by breakpoint). */
@media (min-width: 1025px) {
  .elementskit-dropdown-menu-full_width .elementskit-megamenu-panel {
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    top: var(--crm-megamenu-top, calc(var(--crm-header-h, 80px) + var(--crm-banner-h, 0px))) !important;
    width: 100% !important;
    max-width: 100vw !important;
  }

  /* Closed megamenu must not paint a white sheet over the hero.
     display:none — visibility:hidden alone still leaves a full-viewport
     hit-box in some Chromium builds and covers page content on load. */
  .elementskit-navbar-nav > li:not(:hover):not(:focus-within) > .elementskit-megamenu-panel {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }

  .elementskit-navbar-nav > li:hover > .elementskit-megamenu-panel,
  .elementskit-navbar-nav > li:focus-within > .elementskit-megamenu-panel {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }

  /* Hover bridge: fixed panel sits below the sticky header; without this,
     the cursor crosses a dead gap, :hover drops, and the menu vanishes. */
  .elementskit-navbar-nav > li > .elementskit-megamenu-panel::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: -28px;
    height: 28px;
    background: transparent;
  }
}

/* —— Mobile / tablet header / off-canvas —— */
@media (max-width: 1024px) {
  /* Header CTAs are only elementor-hidden-mobile (<768). On tablet they sit
     next to the hamburger and overlap search — hide buttons only; keep search. */
  header.elementor-location-header .elementor-element-5b491a23 .elementor-widget-button,
  header.elementor-location-header .elementor-element-5b491a23 .elementor-widget-html {
    display: none !important;
  }

  header.elementor-location-header .elementor-element-5b491a23 {
    flex: 0 0 auto !important;
    width: auto !important;
  }

  /* Classic Elementor section (logo | nav | CTAs) — pin logo left, nav right. */
  header.elementor-location-header .elementor-section > .elementor-container > .elementor-row {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
  }

  header.elementor-location-header .elementor-element-410d3383 {
    flex: 0 0 auto !important;
    width: auto !important;
  }

  header.elementor-location-header .elementor-element-26fe488 {
    flex: 1 1 auto !important;
    width: auto !important;
    display: flex !important;
    justify-content: flex-end !important;
    margin-left: auto !important;
  }

  /* Logo left, hamburger flush right.
     :not(:is(.elementskit-megamenu-panel *)) — these chrome rules must not
     hit Solutions/Resources megamenu columns (same .e-con.e-child:nth-child(2)
     shape; margin-left:auto was shoving “By Company Size” ~100px right). */
  header.elementor-location-header .e-con.e-parent:not(:is(.elementskit-megamenu-panel *)) {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    max-width: 100% !important;
    gap: 0 !important;
  }

  header.elementor-location-header
    .e-con.e-parent:not(:is(.elementskit-megamenu-panel *))
    > .e-con.e-child {
    flex-wrap: nowrap !important;
    align-items: center !important;
  }

  /* Logo column: hug content */
  header.elementor-location-header
    .e-con.e-parent:not(:is(.elementskit-megamenu-panel *))
    > .e-con.e-child:first-child {
    flex: 0 0 auto !important;
    width: auto !important;
    max-width: none !important;
  }

  /* Nav column: fill remaining width and pin hamburger to the right edge.
     Elementor's --justify-content:center wins unless the widget itself gets
     margin-left:auto (justify-content alone was not moving it). */
  header.elementor-location-header
    .e-con.e-parent:not(:is(.elementskit-megamenu-panel *))
    > .e-con.e-child:nth-child(2) {
    flex: 1 1 auto !important;
    display: flex !important;
    justify-content: flex-end !important;
    --justify-content: flex-end !important;
    min-width: 0 !important;
    width: auto !important;
    margin-left: auto !important;
  }

  header.elementor-location-header .elementor-widget-ekit-nav-menu {
    margin-left: auto !important;
    margin-right: 0 !important;
    width: auto !important;
    max-width: none !important;
    flex: 0 0 auto !important;
  }

  header.elementor-location-header .elementor-widget-ekit-nav-menu .elementor-widget-container,
  header.elementor-location-header .elementor-widget-ekit-nav-menu .ekit-wid-con {
    display: flex !important;
    justify-content: flex-end !important;
    width: auto !important;
  }

  header.elementor-location-header a[href="/"] img,
  header.elementor-location-header img[src*="crm-logo"],
  header.elementor-location-header img[src*="crm-favicon"] {
    max-height: 36px !important;
    width: 36px !important;
    height: 36px !important;
    object-fit: contain;
    border-radius: 50%;
  }

  button.elementskit-menu-hamburger {
    display: block !important;
    float: none !important;
    margin: 0 !important;
    position: relative !important;
    left: auto !important;
    right: auto !important;
    color: transparent !important;
    border: none !important;
    width: 44px !important;
    height: 44px !important;
    padding: 10px !important;
    /* Always paint CSS bars. The <i> is :empty (glyph is ::before), so the
       old :empty fallback stacked gradient + icon → smudged bottom bar. */
    background: linear-gradient(
      #111 0 2px,
      transparent 2px 8px,
      #111 8px 10px,
      transparent 10px 16px,
      #111 16px 18px
    ) !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: 22px 18px !important;
  }

  button.elementskit-menu-hamburger > .ekit-menu-icon {
    display: none !important;
  }

  /* Top-level drawer rows: label left, chevron right. */
  .elementskit-menu-container .elementskit-navbar-nav > li {
    display: block !important;
    width: 100% !important;
  }

  .elementskit-menu-container .elementskit-navbar-nav > li > a,
  .elementskit-menu-container .elementskit-navbar-nav > li > .elementskit-menu-link {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    box-sizing: border-box !important;
    text-align: left !important;
    padding: 14px 20px !important;
    gap: 12px;
  }

  .elementskit-menu-container .elementskit-navbar-nav > li > a .elementskit-submenu-indicator,
  .elementskit-menu-container .elementskit-navbar-nav > .elementskit-dropdown-has > .elementskit-submenu-indicator {
    margin-left: auto !important;
    flex: 0 0 auto;
  }

  /* Channel row sometimes uses a bare span + indicator as siblings */
  .elementskit-menu-container .elementskit-navbar-nav > .elementskit-dropdown-has {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    width: 100% !important;
  }

  .elementskit-menu-container .elementskit-navbar-nav > .elementskit-dropdown-has > a,
  .elementskit-menu-container .elementskit-navbar-nav > .elementskit-dropdown-has > .ekit-menu-nav-link,
  .elementskit-menu-container .elementskit-navbar-nav > .elementskit-dropdown-has > span:not(.elementskit-submenu-indicator) {
    flex: 1 1 auto !important;
    text-align: left !important;
  }

  .elementskit-menu-container .elementskit-navbar-nav > .elementskit-dropdown-has > .elementskit-submenu-indicator {
    margin-left: auto !important;
    margin-right: 16px !important;
  }

  .elementskit-menu-container .elementskit-navbar-nav > .elementskit-dropdown-has > .elementskit-dropdown,
  .elementskit-menu-container .elementskit-navbar-nav > .elementskit-dropdown-has > .elementskit-megamenu-panel {
    flex: 0 0 100% !important;
    width: 100% !important;
  }

  /* Brand mark at top of the off-canvas drawer (mobile menu). */
  .elementskit-menu-container .elementskit-nav-identity-panel {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px;
    width: 100% !important;
    padding: 14px 16px !important;
    box-sizing: border-box;
    background: #fff;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  }

  .elementskit-menu-container .crm-mobile-menu-brand {
    display: flex !important;
    align-items: center;
    flex: 0 0 auto;
    padding: 0;
    margin: 0;
    border: 0;
  }

  .elementskit-menu-container .crm-mobile-menu-brand img {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: block;
  }

  .elementskit-menu-container .elementskit-menu-close {
    margin-left: auto !important;
  }

  /* Drawer CTAs (Login / Book demo are hidden from the mobile header). */
  .elementskit-menu-container .crm-mobile-menu-ctas {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 16px;
    margin-top: auto;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
  }

  .elementskit-menu-container .crm-mobile-cta-login,
  .elementskit-menu-container .crm-mobile-cta-demo {
    display: block;
    text-align: center;
    text-decoration: none;
    font-weight: 600;
    padding: 12px 16px;
    border-radius: 8px;
  }

  .elementskit-menu-container .crm-mobile-cta-login {
    color: #111;
    border: 1px solid rgba(0, 0, 0, 0.15);
    background: #fff;
  }

  .elementskit-menu-container .crm-mobile-cta-demo {
    color: #fff;
    /* Match header Elementor Book Demo (#1d40bc), not purple. */
    background: #1d40bc;
  }

  /*
   * Overlay must sit UNDER the drawer. Same z-index + later DOM order made
   * every tap hit the overlay (closing the menu) instead of nav items.
   */
  .elementskit-menu-overlay.elementskit-menu-offcanvas-elements.active {
    z-index: 9998 !important;
    left: 0 !important;
    opacity: 1 !important;
    visibility: visible !important;
  }

  .elementskit-menu-container.elementskit-menu-offcanvas-elements.active {
    z-index: 10001 !important;
    background: #fff !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
  }

  .elementskit-menu-container.elementskit-menu-offcanvas-elements.active
    > .elementskit-nav-identity-panel {
    order: -2;
    flex: 0 0 auto;
  }

  .elementskit-menu-container.elementskit-menu-offcanvas-elements.active
    > .elementskit-navbar-nav {
    order: 0;
    flex: 1 1 auto;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  .elementskit-menu-container.elementskit-menu-offcanvas-elements.active
    > .crm-mobile-menu-ctas {
    order: 2;
    flex: 0 0 auto;
  }

  .elementskit-menu-offcanvas-elements.active {
    z-index: 10000 !important;
  }

  html.crm-mobile-menu-open,
  html.crm-mobile-menu-open body {
    overflow: hidden !important;
  }

  /*
   * ElementsKit only sets display:block on open megamenus; opacity/visibility
   * stay hidden (hover rules are desktop-only). Force accordion-style expand
   * inside the off-canvas drawer.
   */
  .elementskit-menu-container.active .elementskit-megamenu-panel.elementskit-dropdown-open,
  .elementskit-menu-offcanvas-elements.active .elementskit-megamenu-panel.elementskit-dropdown-open {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: none !important;
    position: static !important;
    width: 100% !important;
    max-width: 100% !important;
    left: auto !important;
    top: auto !important;
    margin: 0 !important;
    box-shadow: none !important;
    padding: 0 8px 12px !important;
    background: #f7f7f9 !important;
  }

  .elementskit-menu-container.active .elementskit-dropdown.elementskit-dropdown-open,
  .elementskit-menu-offcanvas-elements.active .elementskit-dropdown.elementskit-dropdown-open {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    max-height: none !important;
    position: static !important;
  }

  /* Compact megamenu: keep nav lists (Solutions/Resources/AI agents),
     hide desktop-only media / fluff. Product hub cards stay as icon-boxes. */
  .elementskit-menu-offcanvas-elements.active .elementskit-megamenu-panel .elementor-widget-image,
  .elementskit-menu-offcanvas-elements.active .elementskit-megamenu-panel .elementor-widget-image-box,
  .elementskit-menu-offcanvas-elements.active .elementskit-megamenu-panel .elementor-widget-video,
  .elementskit-menu-offcanvas-elements.active .elementskit-megamenu-panel .elementor-widget-html,
  .elementskit-menu-offcanvas-elements.active .elementskit-megamenu-panel .elementor-widget-posts {
    display: none !important;
  }

  /*
   * Desktop megamenus are multi-column. On mobile force every container /
   * grid into a single full-width column so Solutions/Resources lists
   * don't sit in narrow side columns at different offsets.
   */
  .elementskit-menu-offcanvas-elements.active .elementskit-megamenu-panel .e-con,
  .elementskit-menu-offcanvas-elements.active .elementskit-megamenu-panel .e-con.e-flex,
  .elementskit-menu-offcanvas-elements.active .elementskit-megamenu-panel .e-con.e-grid {
    display: flex !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    gap: 0 !important;
    --flex-direction: column !important;
    --justify-content: flex-start !important;
    --align-items: stretch !important;
    --container-widget-width: 100% !important;
    --width: 100% !important;
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .elementskit-menu-offcanvas-elements.active .elementskit-megamenu-panel .e-con > .e-con,
  .elementskit-menu-offcanvas-elements.active .elementskit-megamenu-panel .e-con > .elementor-widget {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 auto !important;
    margin: 0 !important;
    margin-left: 0 !important;
  }

  /* Section labels (By Team / By Industry live in text-editor + headings). */
  .elementskit-menu-offcanvas-elements.active .elementskit-megamenu-panel .elementor-widget-text-editor {
    display: block !important;
    margin: 10px 0 0 !important;
    padding: 8px 16px 2px !important;
    text-align: left !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    opacity: 0.65;
    line-height: 1.3 !important;
  }

  .elementskit-menu-offcanvas-elements.active .elementskit-megamenu-panel .elementor-widget-text-editor p {
    margin: 0 !important;
    text-align: left !important;
  }

  .elementskit-menu-offcanvas-elements.active .elementskit-megamenu-panel .elementor-widget-heading {
    display: block !important;
    margin: 8px 0 0 !important;
    padding: 8px 16px 2px !important;
    text-align: left !important;
  }

  .elementskit-menu-offcanvas-elements.active .elementskit-megamenu-panel .elementor-heading-title {
    font-size: 12px !important;
    line-height: 1.3 !important;
    margin: 0 !important;
    text-align: left !important;
    opacity: 0.65;
    font-weight: 600 !important;
  }

  /* Icon lists = the actual Solutions / Resources / agent links. */
  .elementskit-menu-offcanvas-elements.active .elementskit-megamenu-panel .elementor-widget-icon-list {
    display: block !important;
    margin: 0 !important;
    width: 100% !important;
  }

  .elementskit-menu-offcanvas-elements.active .elementskit-megamenu-panel .elementor-icon-list-items {
    display: block !important;
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
  }

  /* Some scraped icon-list rows have no <a> (icon+text are direct <li>
     children). Flex the <li> so those still sit icon|label on one row. */
  .elementskit-menu-offcanvas-elements.active .elementskit-megamenu-panel .elementor-icon-list-item {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 10px !important;
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .elementskit-menu-offcanvas-elements.active .elementskit-megamenu-panel .elementor-icon-list-item:not(:has(> a)) {
    padding: 11px 16px !important;
  }

  .elementskit-menu-offcanvas-elements.active .elementskit-megamenu-panel .elementor-icon-list-item > a {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 10px !important;
    text-align: left !important;
    width: 100% !important;
    box-sizing: border-box !important;
    padding: 11px 16px !important;
  }

  .elementskit-menu-offcanvas-elements.active .elementskit-megamenu-panel .elementor-icon-list-icon {
    position: static !important;
    flex: 0 0 auto !important;
    display: inline-flex !important;
    align-items: center !important;
    margin: 0 !important;
    top: auto !important;
    left: auto !important;
  }

  .elementskit-menu-offcanvas-elements.active .elementskit-megamenu-panel .elementor-icon-list-text {
    text-align: left !important;
    flex: 1 1 auto !important;
    width: auto !important;
    padding-left: 0 !important;
  }

  /* Icon-box hub cards: left-align, denser rows. */
  .elementskit-menu-offcanvas-elements.active .elementskit-megamenu-panel .elementor-widget-icon-box {
    margin: 0 !important;
  }

  .elementskit-menu-offcanvas-elements.active .elementskit-megamenu-panel .elementor-icon-box-wrapper {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    text-align: left !important;
    gap: 12px !important;
    padding: 10px 12px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .elementskit-menu-offcanvas-elements.active .elementskit-megamenu-panel .elementor-icon-box-icon {
    flex: 0 0 auto !important;
    margin: 0 !important;
  }

  .elementskit-menu-offcanvas-elements.active .elementskit-megamenu-panel .elementor-icon-box-content {
    flex: 1 1 auto !important;
    text-align: left !important;
    width: auto !important;
  }

  .elementskit-menu-offcanvas-elements.active .elementskit-megamenu-panel .elementor-icon-box-title,
  .elementskit-menu-offcanvas-elements.active .elementskit-megamenu-panel .elementor-icon-box-title a {
    margin: 0 !important;
    font-size: 15px !important;
    text-align: left !important;
    justify-content: flex-start !important;
  }

  .elementskit-menu-offcanvas-elements.active .elementskit-megamenu-panel .elementor-icon-box-description {
    margin: 4px 0 0 !important;
    font-size: 12px !important;
    opacity: 0.7;
    text-align: left !important;
  }

  /* Kill Elementor icon-box “position: top / centered” on mobile drawer. */
  .elementskit-menu-offcanvas-elements.active .elementskit-megamenu-panel .elementor-position-top .elementor-icon-box-wrapper,
  .elementskit-menu-offcanvas-elements.active .elementskit-megamenu-panel .elementor-position-left .elementor-icon-box-wrapper {
    flex-direction: row !important;
  }

  /* Pricing (and other leaf links) should match accordion row contrast. */
  .elementskit-menu-container .elementskit-navbar-nav > li > a {
    color: #111 !important;
    opacity: 1 !important;
  }

  /* Chevron affordance on open accordion rows. */
  .elementskit-menu-container .elementskit-dropdown-has.crm-submenu-open > a,
  .elementskit-menu-container .elementskit-dropdown-has.crm-submenu-open > .elementskit-menu-link {
    font-weight: 600;
  }
}

/* Hide drawer brand + CTAs on desktop mega-menu panel. */
@media (min-width: 1025px) {
  .elementskit-menu-container .crm-mobile-menu-brand,
  .elementskit-menu-container .crm-mobile-menu-ctas {
    display: none !important;
  }
}

/* Blog TOC: hide the forever-spinner once we (or Elementor) built a list. */
.elementor-toc__body:has(.elementor-toc__list-wrapper) .elementor-toc__spinner-container,
.elementor-widget-table-of-contents:has(.elementor-toc__list-wrapper) .elementor-toc__spinner {
  display: none !important;
}

/*
 * Elementor Pro sticky uses position:fixed + a spacer and rewrites scroll
 * offsets every frame against our sticky header — that bounce is the
 * “screen flutter” on blog posts. Native sticky is enough.
 */
@media (min-width: 1025px) {
  .elementor-widget-table-of-contents,
  .elementor-widget-table-of-contents.elementor-sticky,
  .elementor-widget-table-of-contents.elementor-sticky--active {
    position: sticky !important;
    top: calc(var(--crm-header-h, 80px) + 8px) !important;
    bottom: auto !important;
    left: auto !important;
    width: auto !important;
    max-width: 100% !important;
    transform: none !important;
    margin-top: 0 !important;
  }

  .elementor-sticky__spacer:has(+ .elementor-widget-table-of-contents),
  .elementor-widget-table-of-contents + .elementor-sticky__spacer,
  .elementor-element:has(> .elementor-widget-table-of-contents) + .elementor-sticky__spacer {
    display: none !important;
    height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
  }
}

.elementor-toc__list-wrapper {
  list-style: decimal;
  padding-left: 1.25rem;
  margin: 0;
}

.elementor-toc__list-item {
  margin: 0.35rem 0;
}

.elementor-toc__header-link {
  color: inherit;
  text-decoration: none;
}

.elementor-toc__header-link:hover {
  text-decoration: underline;
}

/* Footer icon-list items we wrapped in anchors. */
.elementor-location-footer .crm-footer-link,
.elementor-location-footer .elementor-icon-list-item > a.crm-footer-link {
  color: inherit;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
}

/* Desktop: hide Elementor's tablet/mobile nav dropdown. Pricing's nested
   `nav { display: revert !important }` otherwise keeps it visible and duplicates
   footer legal links (horizontal + vertical). */
@media (min-width: 1025px) {
  .elementor-nav-menu--dropdown-tablet .elementor-nav-menu--dropdown,
  .elementor-nav-menu--dropdown-tablet .elementor-menu-toggle {
    display: none !important;
  }
}

/* Inline channel icons — preserve HTML width/height attributes */
.elementor-widget-text-editor img {
  display: inline-block;
  vertical-align: middle;
}

/* Responsive safety for Elementor containers that refuse to wrap. */
@media (max-width: 767px) {
  .elementor-location-footer .e-con.e-grid,
  .elementor-location-footer .e-con[class*="e-con"] {
    max-width: 100% !important;
  }

  img,
  video,
  iframe {
    max-width: 100%;
    height: auto;
  }

  .elementor-widget-html {
    max-width: 100%;
    overflow-x: auto;
  }
}

/* Elementor entrance animations: reveal content when JS never runs */
.elementor-invisible {
  visibility: visible !important;
  opacity: 1 !important;
  animation: none !important;
  transform: none !important;
}

/* Elementor tabs: first panel visible when .elementor-active never gets set */
.elementor-widget-tabs .elementor-tab-content.elementor-active,
.elementor-widget-tabs .elementor-tab-content[hidden="false"] {
  display: block !important;
}

.elementor-widget-tabs .elementor-tab-content[hidden="hidden"] {
  display: none !important;
}

/* Simple Banner sits above sticky header — height drives --crm-banner-h.
   Site CSS hides .simple-banner under 600px; TopBanner measures 0 then.
   Mid widths used to wrap WhatsApp onto the white nav (banner stayed 30px
   tall while the link painted at y≈50). Let the bar grow with its content. */
.simple-banner {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1997;
  width: 100%;
  height: auto !important;
  min-height: 30px;
  overflow: hidden;
}

.simple-banner .simple-banner-text {
  font-weight: 700;
  padding: 3px 8px;
  min-height: 30px;
  height: auto !important;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}

/* Contact row: `gap` in scraped HTML is ignored without flex */
.simple-banner .simple-banner-text > div {
  display: flex !important;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px 24px;
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
}

.simple-banner .simple-banner-text > div > span {
  display: inline-flex !important;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px 20px;
}

.simple-banner .simple-banner-text a {
  color: #fff;
  text-decoration: none;
  white-space: nowrap;
}

body:has(.simple-banner) {
  padding-top: var(--crm-banner-h, 0px);
}

/* Phone + Login bar eats the fold when numbers wrap — hide on small screens
   (matches original WP behavior under ~600px). Header still has hamburger. */
@media (max-width: 640px) {
  .simple-banner {
    display: none !important;
  }
  body:has(.simple-banner) {
    padding-top: 0 !important;
  }
  html {
    --crm-banner-h: 0px !important;
  }
}

/* ElementsKit global search modal — dark overlay, white pill input (WP widget-styles). */
.mfp-bg.ekit-promo-popup {
  background-color: rgba(0, 0, 0, 0.87) !important;
}

.mfp-wrap .ekit_modal-searchPanel .ekit-search-panel,
.ekit_modal-searchPanel:not(.mfp-hide) .ekit-search-panel {
  max-width: 800px;
  margin: 1.75rem auto;
  background: transparent !important;
  padding: 0 !important;
  border-radius: 0 !important;
}

.mfp-wrap .ekit_modal-searchPanel .ekit-search-group,
.ekit_modal-searchPanel:not(.mfp-hide) .ekit-search-group {
  position: relative;
}

.mfp-wrap .ekit_modal-searchPanel .ekit-search-group input.ekit_search-field,
.mfp-wrap .ekit_modal-searchPanel .ekit-search-group input[type="search"],
.ekit_modal-searchPanel:not(.mfp-hide) .ekit-search-group input.ekit_search-field,
.ekit_modal-searchPanel:not(.mfp-hide) .ekit-search-group input[type="search"] {
  height: 70px;
  background-color: transparent !important;
  border-radius: 50px;
  border: 2px solid #fff !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff;
  padding: 0 70px 0 30px;
  width: 100%;
  box-sizing: border-box;
}

.mfp-wrap .ekit_modal-searchPanel .ekit-search-group input::placeholder,
.ekit_modal-searchPanel:not(.mfp-hide) .ekit-search-group input::placeholder {
  color: #fff !important;
  opacity: 1;
}

.mfp-wrap .ekit_modal-searchPanel .ekit_search-button,
.ekit_modal-searchPanel:not(.mfp-hide) .ekit_search-button {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  height: 100%;
  width: 70px;
  background: transparent !important;
  border: 0;
  color: #fff !important;
  fill: #fff !important;
  border-radius: 0 50px 50px 0;
  cursor: pointer;
}

.ekit_modal-searchPanel:not(.mfp-hide) {
  background: rgba(0, 0, 0, 0.87) !important;
}

/* Elementor video lightbox fallback (elementorFrontend absent in static replay). */
.crm-video-lightbox {
  position: fixed;
  inset: 0;
  z-index: 100001;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  box-sizing: border-box;
  background: rgba(0, 0, 0, 0.9);
}

.crm-video-lightbox__frame {
  width: min(960px, 100%);
  background: #000;
}

.crm-video-lightbox__frame video,
.crm-video-lightbox__frame iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

.crm-video-lightbox__close {
  position: fixed;
  top: 16px;
  right: 16px;
  z-index: 1;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
}

.elementor-custom-embed-image-overlay[data-elementor-open-lightbox="yes"] {
  cursor: pointer;
}

/* —— Worker-rendered blog pages: hide ElementsKit dropdowns without JS —— */
@media (min-width: 1025px) {
  .elementskit-navbar-nav > li:not(:hover):not(:focus-within) > .elementskit-dropdown,
  .elementskit-navbar-nav > li:not(:hover):not(:focus-within) > .elementskit-submenu-panel {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }
  .elementskit-navbar-nav > li:hover > .elementskit-dropdown,
  .elementskit-navbar-nav > li:focus-within > .elementskit-dropdown,
  .elementskit-navbar-nav > li:hover > .elementskit-submenu-panel,
  .elementskit-navbar-nav > li:focus-within > .elementskit-submenu-panel {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }

  /* Products megamenu: keep panel transparent so Elementor column
     backgrounds (#EBEFF2 left rail, white middle, image card right) show. */
  .elementskit-navbar-nav > li:hover > .elementskit-megamenu-panel,
  .elementskit-navbar-nav > li:focus-within > .elementskit-megamenu-panel {
    background: transparent !important;
    box-shadow: 0 12px 40px rgba(10, 13, 22, 0.12) !important;
    z-index: 10050 !important;
    overflow: auto !important;
    max-height: calc(100vh - var(--crm-header-h, 80px) - var(--crm-banner-h, 0px) - 8px) !important;
  }

  /* Reinforce Products template column paints (post-9993) without JS. */
  .elementor-9993 .elementor-element-63807591 > .elementor-widget-wrap {
    background-color: #ebeff2 !important;
  }
  .elementor-9993 .elementor-element-cd99a2d > .elementor-widget-wrap,
  .elementor-9993 .elementor-element-786bcc86 > .elementor-widget-wrap,
  .elementor-9993 .elementor-element-43d855ef > .elementor-widget-wrap {
    background-color: #fff !important;
  }
}

/* Blog pages: keep sticky header solid white with dark nav (hero is blue). */
body.crm-ai-blog header.elementor-location-header,
body.crm-blogs-home header.elementor-location-header,
body.crm-ai-blog header.elementor-location-header .e-con,
body.crm-blogs-home header.elementor-location-header .e-con,
body.crm-ai-blog .elementskit-menu-container,
body.crm-blogs-home .elementskit-menu-container {
  background-color: #fff !important;
  background-image: none !important;
}

body.crm-ai-blog header.elementor-location-header .elementskit-navbar-nav > li > a,
body.crm-blogs-home header.elementor-location-header .elementskit-navbar-nav > li > a,
body.crm-ai-blog header.elementor-location-header .elementskit-navbar-nav > li > .elementskit-menu-link,
body.crm-blogs-home header.elementor-location-header .elementskit-navbar-nav > li > .elementskit-menu-link {
  color: #273171 !important;
}

/* Off-canvas overlay closed until hamburger JS adds .active */
.elementskit-menu-overlay {
  display: none !important;
  pointer-events: none !important;
}
.elementskit-menu-overlay.elementskit-menu-offcanvas-elements.active {
  display: block !important;
  pointer-events: auto !important;
}

/* Keep footer visible and stacked below blog content */
footer.elementor-location-footer {
  clear: both;
  display: block !important;
  position: relative;
  z-index: 1;
  background: #fff;
  margin-top: 0;
}

/* GTranslate floating switcher: desktop only (clashes with mobile hamburger). */
@media (max-width: 1024px) {
  .gt_switcher_wrapper,
  .gtranslate_wrapper,
  #gt-wrapper-74938867 {
    display: none !important;
  }
}