/* CSS Fluid Responsive 

  html { font-size: calc(0.5991091314031181rem + 0.4454342984409799vw); }
  @media screen and (max-width:1440px) { html { font-size: calc(0.5991091314031181rem + 0.4454342984409799vw); } }
  @media screen and (max-width:991px) { html { font-size: calc(0.44698660714285715rem + 0.8928571428571428vw); } }
  @media screen and (max-width:767px) { html { font-size: calc(0.6671006944444444rem + 0.6944444444444444vw); } }
  @media screen and (max-width:479px) { html { font-size: calc(0.7494769874476988rem + 0.8368200836820083vw); } } */
  
  
/* Make text look crisper and more legible in all browsers */
body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Focus state style for keyboard navigation for the focusable elements */
*[tabindex]:focus-visible:not(.menu-button),
  input[type="file"]:focus-visible {
   outline: 0.125rem solid #4d65ff;
   outline-offset: 0.125rem;
}

/* Set color style to inherit */
.inherit-color * {
    color: inherit;
}

/* Get rid of top margin on first element in any rich text element */
.w-richtext > :not(div):first-child, .w-richtext > div:first-child > :first-child {
  margin-top: 0 !important;
}

/* Get rid of bottom margin on last element in any rich text element */
.w-richtext>:last-child, .w-richtext ol li:last-child, .w-richtext ul li:last-child {
	margin-bottom: 0 !important;
}


/* Make sure containers never lose their center alignment */
.container-medium,.container-small, .container-large {
	margin-right: auto !important;
  margin-left: auto !important;
}

/* 
Make the following elements inherit typography styles from the parent and not have hardcoded values. 
Important: You will not be able to style for example "All Links" in Designer with this CSS applied.
Uncomment this CSS to use it in the project. Leave this message for future hand-off.
*/
/*
a,
.w-input,
.w-select,
.w-tab-link,
.w-nav-link,
.w-dropdown-btn,
.w-dropdown-toggle,
.w-dropdown-link {
  color: inherit;
  text-decoration: inherit;
  font-size: inherit;
}
*/

/* Apply "..." after 3 lines of text */
.text-style-3lines {
	display: -webkit-box;
	overflow: hidden;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
}

/* Apply "..." after 2 lines of text */
.text-style-2lines {
	display: -webkit-box;
	overflow: hidden;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}

/* Adds inline flex display */
.display-inlineflex {
  display: inline-flex;
}

/* These classes are never overwritten */
.hide {
  display: none !important;
}

@media screen and (max-width: 991px) {
    .hide, .hide-tablet {
        display: none !important;
    }
}
  @media screen and (max-width: 767px) {
    .hide-mobile-landscape{
      display: none !important;
    }
}
  @media screen and (max-width: 479px) {
    .hide-mobile{
      display: none !important;
    }
}
 
.margin-0 {
  margin: 0rem !important;
}
  
.padding-0 {
  padding: 0rem !important;
}

.spacing-clean {
padding: 0rem !important;
margin: 0rem !important;
}

.margin-top {
  margin-right: 0rem !important;
  margin-bottom: 0rem !important;
  margin-left: 0rem !important;
}

.padding-top {
  padding-right: 0rem !important;
  padding-bottom: 0rem !important;
  padding-left: 0rem !important;
}
  
.margin-right {
  margin-top: 0rem !important;
  margin-bottom: 0rem !important;
  margin-left: 0rem !important;
}

.padding-right {
  padding-top: 0rem !important;
  padding-bottom: 0rem !important;
  padding-left: 0rem !important;
}

.margin-bottom {
  margin-top: 0rem !important;
  margin-right: 0rem !important;
  margin-left: 0rem !important;
}

.padding-bottom {
  padding-top: 0rem !important;
  padding-right: 0rem !important;
  padding-left: 0rem !important;
}

.margin-left {
  margin-top: 0rem !important;
  margin-right: 0rem !important;
  margin-bottom: 0rem !important;
}
  
.padding-left {
  padding-top: 0rem !important;
  padding-right: 0rem !important;
  padding-bottom: 0rem !important;
}
  
.margin-horizontal {
  margin-top: 0rem !important;
  margin-bottom: 0rem !important;
}

.padding-horizontal {
  padding-top: 0rem !important;
  padding-bottom: 0rem !important;
}

.margin-vertical {
  margin-right: 0rem !important;
  margin-left: 0rem !important;
}
  
.padding-vertical {
  padding-right: 0rem !important;
  padding-left: 0rem !important;
}

/* Hide scrollbar for Chrome, Safari and Opera */
.sidebar::-webkit-scrollbar {
  display: none;
}

/* Hide scrollbar for IE, Edge and Firefox */
.sidebar {
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}

/* Desktop nav: centered links, marketplace + burger group on the right */
@media screen and (min-width: 1097px) {
  .navbar .navbar_content {
    position: relative;
  }

  .navbar .nav_buttons-wrap {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    grid-column-gap: 1.25rem;
  }

  .navbar .nav_burger-wrap .nav_mobile {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0;
    padding: 0;
  }

  .navbar .nav_burger-wrap .menu-button {
    display: none;
  }

  .navbar .nav_burger-wrap {
    position: static;
  }
}

/* Collapsed nav 768px–1096px */
@media screen and (min-width: 768px) and (max-width: 1096px) {
  .navbar .navbar_content {
    border-radius: 4.5rem;
  }

  .navbar .nav_buttons-wrap {
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    grid-column-gap: 1.25rem;
    grid-row-gap: 0;
    flex-shrink: 0;
  }

  .navbar .login-wrap {
    display: flex;
    align-items: center;
    flex-shrink: 0;
  }

  .navbar .login-wrap .button {
    margin-top: 0;
  }

  .navbar .nav_burger-wrap {
    position: relative;
    flex-shrink: 0;
  }

  .navbar .menu-button {
    float: none;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    padding: 0;
  }

  .navbar .nav-button_component {
    grid-row-gap: 0.35rem;
    background-color: var(--brand--green);
    border: 1px solid #fff3;
    border-radius: 0.75rem;
    width: 3.25rem;
    height: 3.25rem;
    padding-left: 0.75rem;
    padding-right: 0.75rem;
  }

  .navbar .nav-button_line {
    background-color: var(--brand--white);
  }
}

/* ---------------------------------------------------------------------------
   Animations replacing Webflow IX2. Webflow's runtime used to drive the
   hero text rotator, the customer-logo marquee, sparkle pulses, and
   scroll-triggered section fade-ups. With the runtime gone we replace the
   most visible ones here. All respect prefers-reduced-motion.
   --------------------------------------------------------------------------- */

/* Hero rotator: cycles through the 5 product names ("PocketQuery", "Lively
   Blogs", …) in the homepage H1. The hero uses three .wrapper instances
   (desktop / mobile-landscape / mobile); each contains a .slide with five
   evenly-tall .text-block children, so translating .slide by -20% per step
   advances by exactly one row. */
@keyframes lively-hero-rotate {
  0%,  16% { transform: translateY(0); }
  20%, 36% { transform: translateY(-20%); }
  40%, 56% { transform: translateY(-40%); }
  60%, 76% { transform: translateY(-60%); }
  80%, 96% { transform: translateY(-80%); }
  100%     { transform: translateY(0); }
}
.section_hero-front .wrapper > .slide {
  animation: lively-hero-rotate 12.5s ease-in-out infinite;
}

/* Customer-logo marquee in section_companies. The inline script in
   BaseLayout clones the .logo_container once so a 0 → -50% translate
   loops seamlessly. */
@keyframes lively-logo-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.companies_logos .logo_container {
  display: flex;
  animation: lively-logo-marquee 40s linear infinite;
  width: max-content;
  min-width: max-content;
  will-change: transform;
}
.companies_logos:hover .logo_container { animation-play-state: paused; }

/* Sparkle: bouncy one-shot entrance on page load (matches the live site's
   IX2 effect — fades in from 18% opacity, scale bounces 0.72 → 0.95 → 0.76
   → 1, slight upward translate). Settles still after ~1.5s. */
@keyframes lively-sparkle-in {
  0%   { opacity: 0.18; transform: translateY(12%) scale(0.72); }
  35%  { opacity: 1;    transform: translateY(0)   scale(0.95); }
  60%  { opacity: 1;    transform: translateY(0)   scale(0.76); }
  100% { opacity: 1;    transform: translateY(0)   scale(1); }
}
.sparkle,
.sparkle-blurry {
  animation: lively-sparkle-in 1.5s ease-out 1 both;
}

/* Scroll-triggered fade-up. Applied via JS (BaseLayout) to a curated set
   of headings and cards so unrelated [data-w-id] elements are unaffected.
   The .is-visible class is added by an IntersectionObserver. */
.lively-fade-up {
  opacity: 0;
  transform: translateY(2rem);
  transition: opacity 0.7s ease-out, transform 0.7s ease-out;
  will-change: opacity, transform;
}
.lively-fade-up.is-visible {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .section_hero-front .wrapper > .slide,
  .companies_logos .logo_container,
  .sparkle,
  .sparkle-blurry,
  .testimonial_right > .w-dyn-list:not(.collection-list-wrapper-2) > .testimonials_content.w-dyn-items.lively-testimonials-track { animation: none; }
  .lively-fade-up { opacity: 1; transform: none; transition: none; }
  .faq_bottom-wrap,
  .faq_item .icon-1x1-faq .path-2,
  .navbar .nav-button_line { transition: none; }
}

/* FAQ accordion — replaces Webflow IX2 on .faq_item blocks. */
.faq_bottom-wrap {
  height: 0;
  overflow: hidden;
  transition: height 0.35s ease;
}
.faq_item .icon-1x1-faq .path-2 {
  transform-box: fill-box;
  transform-origin: center;
  transition: transform 0.35s ease;
  transform: rotate(0deg);
}
.faq_item.lively-faq-open .icon-1x1-faq .path-2 {
  transform: rotate(180deg);
}

/* Homepage testimonials ticker — replaces Webflow IX2 vertical carousel.
   JS clones the card list once; -50% translateY loops seamlessly. */
@keyframes lively-testimonials-scroll {
  from { transform: translateY(0); }
  to { transform: translateY(-50%); }
}
.testimonial_right > .w-dyn-list:not(.collection-list-wrapper-2) > .testimonials_content.w-dyn-items.lively-testimonials-track {
  animation: lively-testimonials-scroll 75s linear infinite;
  will-change: transform;
}
.testimonial_right:hover > .w-dyn-list:not(.collection-list-wrapper-2) > .testimonials_content.w-dyn-items.lively-testimonials-track {
  animation-play-state: paused;
}

@media screen and (max-width: 1096px) {
  .navbar {
    position: relative;
    z-index: 1000;
  }

  .navbar .navbar_content {
    overflow: visible;
    position: relative;
  }

  .navbar .nav_burger-wrap {
    position: relative;
    display: flex;
    align-items: center;
    flex-shrink: 0;
  }

  .navbar .nav_buttons-wrap {
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    grid-column-gap: 1.25rem;
    flex-shrink: 0;
  }

  .navbar .login-wrap .button {
    margin-top: 0;
  }

  .navbar .menu-button {
    outline: none;
    -webkit-tap-highlight-color: transparent;
  }

  .navbar .menu-button:focus,
  .navbar .menu-button:focus-visible {
    outline: none;
    outline-offset: 0;
    box-shadow: none;
  }

  .navbar .nav-button_line {
    transition: transform 0.2s cubic-bezier(0.25, 1, 0.5, 1),
                opacity 0.15s cubic-bezier(0.25, 1, 0.5, 1);
  }

  /* IX2 btn-menu-open / btn-menu-close from live Webflow site */
  .navbar .menu-button.w--open .nav-button_line.is-first {
    transform: translateY(0.4rem) rotate(45deg);
  }

  .navbar .menu-button.w--open .nav-button_line.is-second {
    transform: scale(0);
    opacity: 0;
  }

  .navbar .menu-button.w--open .nav-button_line.is-third {
    transform: translateY(-0.4rem) rotate(-45deg);
  }

  .navbar .nav_mobile:not(.lively-mobile-open) {
    display: none;
  }

  .navbar .nav_mobile.lively-mobile-open {
    display: block;
    position: absolute;
    top: calc(100% + 0.75rem);
    right: -40px;
    left: auto;
    width: max-content;
    min-width: 12rem;
    margin-top: 0;
    z-index: 1001;
  }
  .navbar .nav_mobile.lively-mobile-open .navbar_list {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    width: 100%;
    background: var(--brand--white, #fff);
    border-radius: 0.75rem;
    overflow: clip;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    padding: 0.25rem 0;
  }
  .navbar .nav_mobile.lively-mobile-open .nav_links {
    width: 100%;
    text-align: center;
    padding: 0.75rem 1rem;
  }
}

@media screen and (max-width: 776px) {
  .navbar .nav_mobile.lively-mobile-open {
    right: -20px;
  }
}

/* “Our latest posts” carousel — overrides Webflow .w-slider / .text-sm / .blog_slider-mask */
.section_more .padding-global.padding-section-medium {
  overflow: visible;
}

.section_more-slider-bleed {
  --section-more-pad: 2.5rem;
  --section-more-container: 70.5rem;
  box-sizing: border-box;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-top: 4rem;
  padding-left: max(
    var(--section-more-pad),
    calc((100vw - var(--section-more-container)) / 2)
  );
  padding-right: 0;
  overflow: visible;
}

.section_more .la-slider.w-slider {
  position: relative;
  text-align: left;
  height: auto;
  background: transparent;
  overflow: visible;
}

.section_more .la-slider .la-slider-track {
  display: flex;
  gap: 1.5rem;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  max-width: none;
  width: 100%;
  padding-bottom: 0.5rem;
  padding-right: var(--section-more-pad, 2.5rem);
}

.section_more .la-slider .la-slider-track::-webkit-scrollbar {
  display: none;
}

.section_more .la-slider .la-slider-slide {
  flex: 0 0 22.5rem;
  max-width: 22.5rem;
  scroll-snap-align: start;
  margin-right: 0;
}

.section_more .blog_card .card_wrap {
  display: flex;
  width: 100%;
  text-align: left;
}

.section_more .blog_card-content {
  align-items: flex-start;
  width: 100%;
  text-align: left;
}

.section_more .blog_card-buttons,
.section_more .tag_group {
  width: 100%;
  justify-content: flex-start;
  align-items: flex-start;
}

.section_more .blog_card-info {
  width: 100%;
  text-align: left;
  align-items: flex-start;
}

.section_more .blog_card .text-sm,
.section_more .blog_card .text-2xl,
.section_more .blog_card-info .text-2xl.is-card,
.section_more .blog_card-info .text-base {
  text-align: left;
  align-self: flex-start;
}

.section_more .card_button .card_button-text {
  align-self: center;
}

.section_more .la-slider .la-slider-prev,
.section_more .la-slider .la-slider-next {
  background: transparent;
  border: 0;
  cursor: pointer;
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
}

.section_more .la-slider .la-slider-prev[disabled],
.section_more .la-slider .la-slider-next[disabled] {
  opacity: 0.4;
  cursor: default;
}

/* Nav holds both arrows; buttons must not use Webflow w-slider-arrow-* positioning */
.section_more .la-slider-nav {
  position: absolute;
  top: 3rem;
  right: 0;
  z-index: 2;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 1.9rem;
  transform: translateY(-7.2rem);
}

.section_more .la-slider-nav .arrow,
.section_more .la-slider-nav .arrow.is-eft,
.section_more .la-slider-nav .w-slider-arrow-left,
.section_more .la-slider-nav .w-slider-arrow-right {
  position: relative;
  inset: auto;
  top: auto;
  right: auto;
  bottom: auto;
  left: auto;
  transform: none;
  width: 2.5rem;
  height: 2.5rem;
  margin: 0;
  font-size: inherit;
  overflow: visible;
  border-radius: 2.5rem;
  justify-content: center;
  align-items: center;
  display: flex;
  flex: 0 0 auto;
  cursor: pointer;
  color: inherit;
  -webkit-tap-highlight-color: transparent;
}

.section_more .la-slider-nav .arrow.is-eft {
  background-color: transparent;
}

/* Legacy Webflow w-slider on app pages (no Webflow JS) */
.section_more .w-slider:not(.la-slider) {
  position: relative;
  text-align: left;
  height: auto;
  background: transparent;
  overflow: visible;
}

.section_more .w-slider:not(.la-slider) .w-slider-mask {
  display: flex;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  white-space: normal;
  height: auto;
}

.section_more .w-slider:not(.la-slider) .w-slider-mask::-webkit-scrollbar {
  display: none;
}

.section_more .w-slider:not(.la-slider) .w-slide {
  flex: 0 0 22.5rem;
  max-width: 22.5rem;
  scroll-snap-align: start;
  display: block;
  width: 22.5rem;
  height: auto;
  position: relative;
  vertical-align: initial;
}

.section_more .w-slider:not(.la-slider) .w-slider-arrow-left,
.section_more .w-slider:not(.la-slider) .w-slider-arrow-right {
  cursor: pointer;
  z-index: 2;
}

.section_more .w-slider:not(.la-slider) .w-slider-arrow-left[aria-disabled="true"],
.section_more .w-slider:not(.la-slider) .w-slider-arrow-right[aria-disabled="true"] {
  opacity: 0.35;
  cursor: default;
  pointer-events: none;
}

@media screen and (max-width: 991px) {
  .section_more-slider-bleed {
    --section-more-pad: 1.25rem;
    margin-top: 2rem;
  }

  .section_more .la-slider-nav {
    top: 2%;
    transform: translateY(-6.8rem);
  }
}

@media screen and (max-width: 767px) {
  .section_more .la-slider.w-slider {
    display: flex;
    flex-direction: column;
    padding-bottom: 0;
  }

  .section_more .la-slider-nav {
    position: static;
    transform: none;
    top: auto;
    right: auto;
    justify-content: center;
    gap: 2rem;
    margin-top: 1.5rem;
  }
}

@media screen and (max-width: 479px) {
  .section_more-slider-bleed {
    --section-more-pad: 1rem;
  }

  .section_more .la-slider .la-slider-slide {
    flex-basis: 85vw;
    max-width: 85vw;
  }
}

/* Footer newsletter — Webflow .w-form-done defaults to display:none */
[data-newsletter] .w-form-done[hidden],
[data-newsletter] .w-form-fail[hidden] {
  display: none !important;
}

[data-newsletter] .w-form-done:not([hidden]),
[data-newsletter] .w-form-fail:not([hidden]) {
  display: block;
  background-color: transparent;
  padding: 0;
  text-align: left;
  color: var(--brand--black, #060b13);
}