/* shim.css — minimal CSS supporting site.js (vanilla webflow.js replacement) */

/* ---- mobile nav: show the menu when site.js opens it ---- */
@media (max-width: 991px) {
  .w-nav .w-nav-menu { display: none; }
  .w-nav.vanilla-nav-open .w-nav-menu {
    display: block;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #fff;
    max-height: calc(100vh - 70px);
    overflow-y: auto;
    box-shadow: 0 12px 24px rgba(0, 0, 0, .08);
    z-index: 999;
  }
  /* dropdown lists inside the mobile menu flow inline when opened */
  .w-nav.vanilla-nav-open .w-dropdown-list.w--open {
    position: static;
    box-shadow: none;
  }
}
html.vanilla-no-scroll, html.vanilla-no-scroll body { overflow: hidden; }

/* ---- dropdowns: rely on Webflow's exported .w--open rules, but make sure
       lists are hidden when closed even if a stray inline style exists ---- */
.w-dropdown-list { display: none; }
.w-dropdown-list.w--open { display: block; }

/* ---- tabs ---- */
.w-tab-pane { display: none; }
.w-tab-pane.w--tab-active { display: block; }

/* ---- slider layout (site.js translates slides) ---- */
.w-slider-mask { overflow: hidden; white-space: nowrap; }
.w-slider-mask .w-slide {
  display: inline-block;
  width: 100%;
  white-space: normal;
  vertical-align: top;
  will-change: transform;
}
.w-slider-dot {
  display: inline-block;
  width: 10px; height: 10px;
  margin: 0 4px;
  border-radius: 50%;
  background: rgba(0, 0, 0, .25);
  cursor: pointer;
}
.w-slider-dot.w-active { background: rgba(0, 0, 0, .75); }

/* ---- marquee: duplicated logo strips become one infinite CSS loop ---- */
.vanilla-marquee {
  display: flex !important;
  width: max-content;
  animation: vanilla-marquee-scroll 30s linear infinite;
}
.vanilla-marquee > * { flex: 0 0 auto; }
.vanilla-marquee:hover { animation-play-state: paused; }
@keyframes vanilla-marquee-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(calc(-100% / var(--marquee-items, 2))); }
}
@media (prefers-reduced-motion: reduce) {
  .vanilla-marquee { animation: none; }
}

/* ---- lightbox overlay ---- */
.vanilla-lightbox-overlay{position:fixed;inset:0;background:rgba(0,0,0,.85);display:flex;align-items:center;justify-content:center;z-index:9999;cursor:pointer}
.vanilla-lightbox-frame{width:min(90vw,960px);aspect-ratio:16/9;border:0;background:#000;cursor:default}
.vanilla-lightbox-img{max-width:90vw;max-height:85vh;cursor:default}

/* ---- intrinsic sizing ----------------------------------------------------
   width/height attributes are added to <img> to reserve space and stop layout
   shift (CLS). The Webflow sheet sets img{max-width:100%} but NOT height:auto,
   so without this rule a shrunk image would keep its attribute height and
   distort. Scoped to images that actually carry both attributes. */
img[width][height] { height: auto; }

/* ---- nav background once the page is scrolled -----------------------------
   site.js sets the background colour inline, sampled from whatever sits behind
   the bar at the top of that page, because these pages do not agree on nav text
   colour (near-white on the dark home hero, dark navy on /pricing). All this
   rule adds is the separation from the content scrolling underneath. No
   transition: a transition on background-color leaves a CSSTransition running
   on this element, and while it runs it pins the painted value — measured on
   /pricing, where even an inline !important background stayed transparent. */
.navbar-v2.bg-transparent.cj-nav-solid {
  box-shadow: 0 1px 0 rgba(0, 0, 0, .12), 0 6px 18px rgba(0, 0, 0, .10);
}