button {
  background-color: transparent;
  cursor: pointer;
}

button,
input,
optgroup,
select,
textarea {
  font-family: inherit;
  font-size: 100%;
  line-height: 1.15;
  outline: none;
}

fieldset {
  padding: 0.35em 0.75em 0.625em;
}

*,
*:before,
*:after {
  padding: 0;
  margin: 0;
  border: 0;
  box-sizing: border-box;
}

html {
  line-height: var(--text-regular-line-height);
  -webkit-text-size-adjust: 100%;
  height: 100%;
  width: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 90px;
}

html:has(.top-banner) {
  padding-top: 48px;
  scroll-padding-top: 120px;

  .header {
    top: 48px;
  }

  .price-tables__scroll-wrap {
    top: 112px;
  }

  .aside-bar,
  .integration__list {
    top: 138px;
  }
}

body {
  font-size: 16px;
  font-weight: 400;
  -ms-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  color: var(--text-color);
  font-family: "Poppins", Arial, "Helvetica Neue", Helvetica, sans-serif;
}

ul li {
  list-style: none;
}

:root {
  /* Colors */
  --dark-bg: #1b224e;
  --dark-blue: #0D1343;
  --lighter-blue: #242C56;
  --light-bg: #f5f7fc;
  --darker-bg: #BACBDE29;
  --stroke: #eef1f7;
  --grey-hover: #D1D5DD;
  --white: #ffffff;
  --blue-dark: #3247cb;
  --blue: #5278ff;
  --cyan: #E2ECFF;
  --blue-light: #c0d6ff;
  --green-dark: #1E803F;
  --green: #3CA955;
  --darker-green: #00260F;
  --breadcrumbs-hover: #D9F0DE;
  --success: #F0F9F2;
  --fail: #FFF4F4;
  --green-light: #73db71;
  --green-secondary: #3CA95529;
  --orange-dark: #f84d42;
  --orange: #fe7a50;
  --orange-light: #ffc061;
  --gradient-orange: #FE8450;
  --gradient-sunny: #FFAF51;
  --lilac: #C48DF4;
  --title-color: #303030;
  --text-color: #55555a;
  --secondary-color: #91a2b6;
  --disabled-bg-color: #e7eaf0;
  --active-color: #16602f;
  --overlay-color: rgba(40, 44, 49, 0.32);
  --shadow-color: rgba(38, 38, 62, 0.04);
  --shadow-cards-color: rgba(122, 133, 147, 0.18);
  --shadow-review-color: rgba(122, 133, 147, 0.35);
  --border-color-on-blue: #323B62;
  --search-highlight: rgb(217, 240, 222);
  --outline: 4px solid color-mix(in oklab, var(--green) 32%, transparent);
  --input-hover: color-mix(in oklab, var(--green), var(--title-color) 12%);
  --animation-duration: 0.3s;
  /* Font sizes */
  /* 50px */
  --h1-desktop: 3.125rem;
  /* 34px */
  --h1-mobile: 2.125rem;
  /* 44px */
  --blog-h1-desktop: 2.75rem;
  /* 32px */
  --blog-h1-mobile: 2rem;
  /* 32px */
  --h2-desktop: 2rem;
  /* 28px */
  --h2-mobile: 1.75rem;
  /* 28px */
  --h3-desktop: 1.75rem;
  /* 24px */
  --h3-mobile: 1.5rem;
  /* 22px */
  --h4-desktop: 1.375rem;
  /* 20px */
  --h4-mobile: 1.25rem;
  /* 20px */
  --h5-desktop: 1.25rem;
  /* 18px */
  --h5-mobile: 1.125rem;
  /* 20px */
  --text-large-desktop: 1.25rem;
  /* 18px */
  --text-large-mobile: 1.125rem;
  /* 18px */
  --text-medium-desktop: 1.125rem;
  /* 16px */
  --text-medium-mobile: 1rem;
  /* 16px */
  --text-regular: clamp(calc(1rem - 1px),2vw,1rem);
  /* 14px */
  --text-small: 0.875rem;
  /* 12px */
  --text-micro: 0.75rem;
  /* Line heights */
  --h1-line-height: 1.28;
  --blog-h1-line-height: 1.32;
  --h2-line-height: 1.31;
  --h3-line-height: 1.43;
  --h4-line-height: 1.55;
  --h5-line-height: 1.5;
  --text-large-line-height: 1.5;
  --text-medium-line-height: 1.56;
  --text-regular-line-height: 1.62;
  --text-small-line-height: 1.43;
  --text-micro-line-height: 1.5;
  /* Gutters */
  /* 4px */
  --g1: 0.25rem;
  /* 8px */
  --g2: 0.5rem;
  /* 12px */
  --g3: 0.75rem;
  /* 16px */
  --g4: 1rem;
  /* 20px */
  --g5-desktop: 1.25rem;
  /* 16px */
  --g5-mobile: 1rem;
  /* 24px */
  --g6-desktop: 1.5rem;
  /* 20px */
  --g6-mobile: 1.25rem;
  /* 32px */
  --g7-desktop: 2rem;
  /* 24px */
  --g7-mobile: 1.5rem;
  /* 40px */
  --g8-desktop: 2.5rem;
  /* 32px */
  --g8-mobile: 2rem;
  /* 48px */
  --g9-desktop: 3rem;
  /* 32px */
  --g9-mobile: 2rem;
  /* 64px */
  --g10-desktop: 4rem;
  /* 40px */
  --g10-mobile: 2.5rem;
  /* 80px */
  --g11-desktop: 5rem;
  /* 48px */
  --g11-mobile: 3rem;
  /* 104px */
  --g12-desktop: 6.5rem;
  /* 64px */
  --g12-mobile: 4rem;
  /* 160px */
  --g13-desktop: 10rem;
  /* 96px */
  --g13-mobile: 6rem;
  /* 232px */
  --g14-desktop: 12.875rem;
  /* 144px */
  --g14-mobile: 9rem;
}

body._lock {
  overflow: hidden;
  overflow: clip;
}

@media (max-width: 991px) {
  html {
    scrollbar-width: none;
  }

  html::-webkit-scrollbar {
    width: 0;
  }
}

.container {
  margin: 0 auto;
  max-width: 1240px;
  padding: 0 clamp(1rem, 2vw, 2rem);
}

h1,
.blog-h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
  font-weight: 500;
  color: var(--title-color);
}

h1,
.h1 {
  font-size: clamp(var(--h1-mobile), 5vw, var(--h1-desktop));
  line-height: var(--h1-line-height);
  margin: clamp(3rem, 8vw, 5rem) 0 clamp(2rem, 6vw, 4rem) 0;
}

.blog-h1 {
  font-size: clamp(var(--blog-h1-mobile), 5vw, var(--blog-h1-desktop));
  line-height: var(--blog-h1-line-height);
  margin: 2rem 0 1rem 0;
}

h2,
.h2 {
  font-size: clamp(var(--h2-mobile), 3vw, var(--h2-desktop));
  line-height: var(--h2-line-height);
  margin: 2rem 0 1rem 0;
}

h3,
.h3 {
  font-size: clamp(var(--h3-mobile), 3vw, var(--h3-desktop));
  line-height: var(--h3-line-height);
  margin: 2rem 0 1rem 0;
}

h4,
.h4 {
  font-size: clamp(var(--h4-mobile), 2vw, var(--h4-desktop));
  line-height: var(--h4-line-height);
  margin: 2rem 0 1rem 0;
}

h5,
.h5 {
  font-size: clamp(var(--h5-mobile), 2vw, var(--h5-desktop));
  line-height: var(--h5-line-height);
  margin: 2rem 0 1rem 0;
}

.text-large,
.text-large p {
  font-size: clamp(var(--text-large-mobile), 2vw, var(--text-large-desktop));
  line-height: var(--text-large-line-height);
}

p,
.text-medium {
  font-size: clamp(var(--text-medium-mobile), 2vw, var(--text-medium-desktop));
  line-height: var(--text-medium-line-height);
}

ul,
ol,
.text-regular {
  font-size: var(--text-regular);
  line-height: clamp(24px,2vw,26px);
}

figcaption,
.text-small {
  font-size: var(--text-small);
  line-height: var(--text-small-line-height);
}

.text-micro {
  font-size: var(--text-micro);
  line-height: var(--text-micro-line-height);
}

figcaption {
  color: var(--text-color);
  margin-top: 0.5rem;
}

figure {
  margin: 2rem 0 1rem 0;
}

blockquote {
  padding-left: clamp(var(--g10-mobile), 7vw, var(--g11-desktop));
  margin: clamp(var(--g10-mobile), 6vw, var(--g10-desktop)) 0;
  background: url('/img/flowlu/quote.svg') left top / 32px auto no-repeat;
}

@media (max-width: 991px) {
  blockquote {
    background: url('/img/flowlu/quote.svg') left top / 24px auto no-repeat;
  }
}

blockquote p {
  font-weight: 500;
  font-size: clamp(var(--h4-mobile), 3vw, var(--h3-desktop));
  line-height: var(--h3-line-height);
  color: var(--title-color);
  margin: 0;
}

blockquote img {
  border-radius: 50%;
  width: 48px;
  height: 48px;
  flex: 0 0 48px;
}

blockquote figure {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin: 1.5rem 0 0 0;
}

figure .zoom-cursor.popup-link {
  pointer-events: none;
}

blockquote figure figcaption {
  margin: 0;
  display: flex;
  flex-direction: column;
}

blockquote strong {
  color: var(--title-color);
  font-size: var(--text-regular);
  line-height: var(--text-regular-line-height);
  font-weight: 400;
}

blockquote em {
  margin: 0;
  color: var(--secondary-color);
  font-size: var(--text-small);
  line-height: var(--text-small-line-height);
  font-style: normal;
}

pre {
  white-space: normal;
  font-family: "Poppins", Arial, "Helvetica Neue", Helvetica, sans-serif;
  font-size: clamp(var(--text-large-mobile), 2vw, var(--text-large-desktop));
  line-height: var(--text-large-line-height);
  padding: clamp(var(--g8-mobile), 3vw, var(--g8-desktop)) clamp(var(--g9-mobile), 5vw, var(--g9-desktop));
  background-color: var(--light-bg);
  border-radius: clamp(12px, 2vw, 20px);
  color: var(--title-color);
  border-left: 4px solid var(--green);
  margin: 2rem 0;
}

p {
  margin: 1rem 0;
}

a {
  color: var(--green);
  text-decoration: none;
}

a.text_dotted{
  border-bottom: 1px dotted var(--green);
}

@media (any-hover: hover) {
  a:not(.btn):hover {
    color: var(--green-dark);
  }
}

ul,
ol {
  list-style: none;
  margin: 1rem 0;
}

ul li,
ol li {
  position: relative;
}

ul li:not(:last-of-type),
ol li:not(:last-of-type) {
  margin-bottom: 0.5rem;
}

ul li {
  padding-left: 1rem;
}

ul li:before {
  content: "";
  position: absolute;
  top: 9px;
  left: 0;
  background-color: var(--text-color);
  width: 4px;
  height: 4px;
  border-radius: 50%;
}

ol {
  counter-reset: point;
}

ol li:before {
  padding-right: 0.75rem;
  counter-increment: point;
  content: counter(point) ".";
}

ol p {
  display: inline;
}

hr {
  border-bottom: 1px solid var(--disabled-bg-color);
  margin-top: clamp(var(--g7-mobile), 3vw, var(--g7-desktop));
  margin-bottom: clamp(var(--g7-mobile), 3vw, var(--g7-desktop));
}