body {
  --section-clip-path-height: 120px;

  --avenir-next: "Avenir Next", sans-serif;
  --min-padding-x-text: 10vw;
  --min-padding-x-graphics: 5.5vw;
  --margin-x: 46px;
  --color-orange: #ff9d0e;
  --color-purple: #6b63e6;
  --color-teal: #73fff5;
  --color-text: #545454;
  --color-blue-background: #f4fcff;
  --color-yellow-background: #fdf7ef;
  --color-purple-background: #f9f8ff;
  box-sizing: border-box;
}
  @media (max-width: 960px) {body {
    --section-clip-path-height: 68px
}
  }
  @media (max-width: 480px) {body {
    --section-clip-path-height: 32px
}
  }
  @media (max-width: 480px) {body {
    --margin-x: 32px
}
  }
  body *,
  body *::before,
  body *::after {
    box-sizing: border-box;
  }
  body h1 {
    white-space: pre-line;
  }
  body h5 {
    margin: 0;
  }
  body hr {
    margin: 0;
    border: none;
  }
  body ul,
  body ol {
    list-style: none;
    padding: 0;
    margin: 0;
  }
  body a.button-link {
    z-index: 2;
    padding: 0 41px;
    border-radius: 30px;
    filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));

    font-weight: 700;
    font-size: 18px;
    line-height: 2.5;

    display: grid;
    grid-template-columns: 1fr auto;
    column-gap: 19px;
    align-items: center;
  }
  body a.button-link:hover {
      transition: all 0.3s;
    }
  body a.button-link:hover img {
        filter: invert();
        transition: all 0.3s;
      }
  @media (max-width: 480px) {
  body a.button-link {
      padding: 0 31px;
      column-gap: 15px;
      margin-top: 8px
  }
    }

footer.footer div.container {
    padding: 0;
  }

section.Hero {
  z-index: 0;
  background: linear-gradient(130deg, #7c73ff 5%, #463ce0 60%);
  clip-path: polygon(
    0 0,
    100% 0,
    100% calc(100% - var(--section-clip-path-height)),
    0 100%
  );

  padding: 98px var(--min-padding-x-text) 143px;
  display: grid;
  row-gap: 24px;
  justify-items: center;
  align-content: center;
  color: white;
}

@media (max-width: 960px) {

section.Hero {
    padding: 70px var(--min-padding-x-text) 110px;
    row-gap: 19px
}
  }

@media (max-width: 480px) {

section.Hero {
    padding: 46px var(--min-padding-x-text) 75px;
    row-gap: 14px
}
  }

section.Hero > img {
    z-index: 1;
    position: absolute;
    top: 2%;
    left: 50%;
    transform: translateX(-50%);
    mix-blend-mode: multiply;
    opacity: 0.85;
    object-fit: cover;
    width: 100%;
    max-width: 100%;
  }

section.Hero h1 {
    z-index: 2;
    font-family: var(--avenir-next);
    font-weight: 400;
    font-style: normal;
    text-align: center;
    font-size: 75px;
    line-height: 1.04;
  }

@media (max-width: 960px) {

section.Hero h1 {
      font-size: 56px;
      line-height: 1.08
  }
    }

@media (max-width: 480px) {

section.Hero h1 {
      font-size: 40px;
      line-height: 1.12
  }
    }

section.Hero p {
    z-index: 2;
    max-width: 559px;
    text-align: center;
    font-weight: 400;
    font-size: 31px;
    line-height: 1.4;
  }

@media (max-width: 960px) {

section.Hero p {
      max-width: 448px;
      font-size: 25px
  }
    }

@media (max-width: 480px) {

section.Hero p {
      font-size: 20px
  }
    }

section.Hero a {
    background-color: var(--color-teal);
    color: black;
  }

section.Hero a:hover {
      color: white;
      background-color: var(--color-orange);
    }

section.CaseStudies {
  --margin-top: 47px;
  --heanding-to-cards: 94px;
  --heading-height: 55px;
  margin-top: var(--margin-top);
  padding: 0 var(--margin-x);
  display: grid;
  row-gap: var(--heanding-to-cards);
  justify-content: center;
  position: relative;
}

@media (max-width: 768px) {

section.CaseStudies {
    --margin-top: 60px;
    --heanding-to-cards: 50px;
    --heading-height: 40px
}
  }

@media (max-width: 480px) {

section.CaseStudies {
    padding: 0 23px
}
  }

section.CaseStudies > * {
    max-width: 1156px;
  }

section.CaseStudies h1 {
    font-family: var(--avenir-next);
    font-weight: 500;
    font-size: 48px;
    line-height: var(--heading-height);
  }

@media (max-width: 768px) {

section.CaseStudies h1 {
      font-family: 'Roboto', sans-serif;
      font-weight: 700;
      font-size: 33px;
      text-align: center;
      padding: 0 30px
  }
    }

section.CaseStudies ul {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 10vw;
    align-items: start;
    position: relative;
  }

section.CaseStudies ul::after {
      content: "";
      background-image: url("/img/data-ops/end-quote.svg");
      background-size: contain;
      background-repeat: no-repeat;
      position: absolute;
      --icon-width: 8.5vw;
      right: 0;
      top: calc(
        (
            var(--heanding-to-cards) + var(--heading-height) + var(--margin-top) +
              var(--section-clip-path-height) / 2
          ) * -1
      );
      width: var(--icon-width);
      height: calc(var(--icon-width) * 0.79);
    }

@media (max-width: 480px) {

section.CaseStudies ul::after {
        left: 50%;
        transform: translate(-50%, -80%);
        --icon-width: 30vw
    }
      }

@media (max-width: 960px) {

section.CaseStudies ul {
      column-gap: 6vw
  }
    }

@media (max-width: 768px) {

section.CaseStudies ul {
      grid-template-columns: 1fr;
      row-gap: 32px;
      padding-bottom: 64px
  }
    }

section.CaseStudies ul li {
      --offset-y: 99px;
      --card-padding-top: 51px;
      --purple-light: #9494ff;

      max-width: 488px;
      padding: var(--card-padding-top) 32px 26px;
      display: grid;
      row-gap: 35px;
      border: 7px solid #f2f3f6;
      position: relative;
    }

@media (max-width: 960px) {

section.CaseStudies ul li {
        --card-padding-top: 42px
    }
      }

@media (max-width: 960px) {

section.CaseStudies ul li {
        padding: var(--card-padding-top) 24px 26px
    }
      }

section.CaseStudies ul li::before {
        content: "";
        position: absolute;
        top: var(--card-padding-top);
        left: 0;
        bottom: 0;
        width: 14px;
        transform: translateX(-50%);
        background-color: white;
      }

section.CaseStudies ul li p {
        color: var(--color-text);
        font-size: 18px;
        line-height: 1.56;
        white-space: pre-line;
        position: relative;
      }

section.CaseStudies ul li p::before,
        section.CaseStudies ul li p::after {
          content: "";
          background-image: url("/img/data-ops/end-quote.svg");
          background-size: contain;
          background-repeat: no-repeat;
          filter: grayscale() brightness(85%);
          width: 9px;
          height: 10px;
          margin-bottom: 6px;
          display: inline-block;
          margin-left: 4px;
        }

section.CaseStudies ul li p::before {
          margin: 0;
          position: absolute;
          left: 0;
          top: 0;
          transform: translateX(-15px) rotate(180deg);
        }

section.CaseStudies ul li .person {
        display: grid;
        row-gap: 5px;
      }

section.CaseStudies ul li .person h4 {
          color: #6B63E6;
          font-size: 18px;
          line-height: 21px;
          font-weight: 400;
        }

section.CaseStudies ul li .person h5 {
          color: var(--purple-light);
          font-size: 15px;
          font-weight: 400;
        }

section.CaseStudies ul li a {
        justify-self: center;
        color: var(--purple-light);
        background-color: transparent;
        border: 1px solid var(--purple-light);
        filter: none;
      }

section.CaseStudies ul li a .right-arrow {
          width: 28px;
          height: 29px;
          background-color: var(--purple-light);
          clip-path: path(
            "M18.6783 12.833H5.83329C5.19163 12.833 4.66663 13.358 4.66663 13.9997C4.66663 14.6414 5.19163 15.1664 5.83329 15.1664H18.6783V17.2547C18.6783 17.7797 19.3083 18.0364 19.67 17.663L22.9133 14.408C23.135 14.1747 23.135 13.813 22.9133 13.5797L19.67 10.3247C19.3083 9.95135 18.6783 10.2197 18.6783 10.733V12.833V12.833Z"
          );
        }

@media (max-width: 480px) {

section.CaseStudies ul li a {
          width: max-content
      }
        }

section.CaseStudies ul li a:hover {
          color: white;
          background-color: var(--purple-light);
          transition: all 0.3s;
        }

section.CaseStudies ul li a:hover .right-arrow {
            transition: all 0.3s;
            background-color: white;
          }

section.CaseStudies ul li:first-child {
        margin-bottom: var(--offset-y);
      }

@media (max-width: 768px) {

section.CaseStudies ul li:first-child {
          margin-bottom: unset
      }
        }

section.CaseStudies ul li:last-child {
        margin-top: var(--offset-y);
      }

@media (max-width: 768px) {

section.CaseStudies ul li:last-child {
          margin-top: unset
      }
        }

section.CaseStudies ul li img.logo {
        width: 50%;
      }

section.Demo {
  margin: 100px 0 0;
  background: #6b63e6;
  background-image: url(/img/landing/pipe-pattern.svg);
  background-size: 50%;
  background-position: -0px -15px;

  display: flex;
  justify-content: center;
}

section.Demo .container {
    max-width: 1156px;
    display: grid;
    grid-template-columns: 1fr auto;
    column-gap: 7vw;
  }

@media (max-width: 670px) {

section.Demo .container {
      grid-template-columns: unset;
      row-gap: 120px;
      justify-items: center
  }
      
      section.Demo .container .description {
        text-align: center;
      }
    }

section.Demo .container .description {
      margin-top: 100px;
      color: white;
      display: grid;
      row-gap: 10px;
      align-content: start;
    }

section.Demo .container .description h2 {
        font-family: var(--avenir-next);
        font-size: 34px;
        line-height: 1.2;
        max-width: 470px;
      }

@media (max-width: 768px) {

section.Demo .container .description h2 {
          font-size: 24px
      }
        }

section.Demo .container .description p {
        font-size: 17px;
        line-height: 1.5;
        opacity: 0.75;
        max-width: 440px;
      }

section.Demo .container .form-container {
      --row-gap: 26px;

      background-color: white;
      box-shadow: 0px 10px 25px 0 rgba(0, 0, 0, 0.2);
      border-radius: 20px;
      width: 50vw;
      max-width: 500px;
      padding: 50px 0 20px;
      margin: -50px 0;
      display: grid;
      row-gap: var(--row-gap);
      justify-items: center;
      align-content: start;
    }

@media (max-width: 670px) {

section.Demo .container .form-container {
        width: 85vw
    }
      }

section.Demo .container .form-container h3 {
        color: #243651;
        line-height: 1;
      }

section.Demo .container .form-container .hbspt-form {
        width: 100%;
      }

section.Demo .container .form-container .hbspt-form .submitted-message p {
            text-align: center;
            margin-top: 50px;
            padding: 20px;
            border: 1px solid #6b63e6;
            margin: 50px;
            border-radius: 5px;
            background: #d0cdfc;
            color: #5e55da;
          }

section.Demo .container .form-container .hbspt-form .hs-richtext p, section.Demo .container .form-container .hbspt-form .hs-form-booleancheckbox p {
            line-height: 18px;
            color: #6A6A6A;
            font-size: 12px;
            padding: 0;
          }

section.Demo .container .form-container .hbspt-form ul.inputs-list {
          padding: 0px;
        }

section.Demo .container .form-container .hbspt-form li.hs-form-booleancheckbox {
          color: white;
          display: flex;
          flex-direction: row;
        }

section.Demo .container .form-container .hbspt-form label {
          position: absolute;
          margin-left: 20px;
          opacity: 0;
        }

section.Demo .container .form-container .hbspt-form .field {
          margin-top: 15px;
        }

section.Demo .container .form-container .hbspt-form input[type="text"],
        section.Demo .container .form-container .hbspt-form input[type="email"],
        section.Demo .container .form-container .hbspt-form input[type="tel"],
        section.Demo .container .form-container .hbspt-form textarea {
          width: calc(100% - 40px);
          margin: 5px 20px;
          padding: 10px;
          border-radius: 5px;
          border: 1px solid rgba(0, 0, 0, 0.2);
        }

section.Demo .container .form-container .hbspt-form input[type="text"]:focus, section.Demo .container .form-container .hbspt-form input[type="email"]:focus, section.Demo .container .form-container .hbspt-form input[type="tel"]:focus, section.Demo .container .form-container .hbspt-form textarea:focus {
            border: 1px solid #6B63E6;
          }

section.Demo .container .form-container .hbspt-form .hs-error-msg {
          opacity: 1;
          color: red;
          font-size: 14px;
        }

section.Demo .container .form-container .hbspt-form .hs-submit {
          display: flex;
          justify-content: center;
        }

section.Demo .container .form-container .hbspt-form input[type="submit"] {
          border-radius: 100px;
          cursor: pointer;
          outline: none;
          box-shadow: none;
          border: none;
          display: inline-block;
          text-decoration: none;
          background: #6B63E6;
          color: white;
          font-weight: 500;
          background-image: url(/img/right-arrow-knockout.svg),
          linear-gradient(0deg, #6b63e6 50%, #8881ea 100%);
          background-repeat: no-repeat;
          background-position: calc(100% - 40px) center, top left;
          background-size: 15px 9px, 100% 100%;
          padding: 19px 64px 21px 40px;
          transition: background-position 0.2s linear,
          background-image 0.2s linear;
          position: relative;
          z-index: 2;
          font-size: 1em;
        }

section.Demo .container .form-container .hbspt-form input[type="submit"]:hover {
            background-image: url(/img/right-arrow-knockout.svg),
            linear-gradient(0deg, #8983eb 50%, #a09bef 100%);
            background-position: calc(100% - 38px) center, top left;
          }

section.Demo .container .form-container .hbspt-form .legal-consent-container {
          background: #fff;
          font-size: 12px !important;
          padding: 0;
        }

section.Demo .container .form-container .hbspt-form .actions {
          margin-top: 50px;
          display: flex;
          justify-content: center;
        }

section.Demo .container .form-container .hbspt-form .hs-form-booleancheckbox label {
          position: relative;
          opacity: 1;
          width: 100%;
          text-align: left;
        }

section.Demo .container .form-container .hbspt-form .hs-form-booleancheckbox label span {
            margin: 0px;
            padding: 0;
            line-height: 18px;
            color: #6A6A6A;
            font-size: 12px;
          }

section.Demo .container .form-container .hbspt-form .hs-form-booleancheckbox label p {
            margin-left: 10px;
          }

section.Demo .container .form-container .hbspt-form .hs-form-booleancheckbox label .quote {
            text-align: center;
            margin-bottom: 92px;
          }

section.Demo .container .form-container .hbspt-form .hs-form-booleancheckbox label .quote blockquote {
              font-weight: 300;
              font-style: italic;
              color: #6A6A6A;
              font-size: 24px;
              line-height: 40px;
              letter-spacing: -0.2px;
              max-width: 960px;
              margin: 0 auto;
              padding: 5px;
            }

@media screen and (min-width: 768px) {

section.Demo .container .form-container .hbspt-form .hs-form-booleancheckbox label .quote blockquote {
                font-size: 34px;
                line-height: 48px;
                letter-spacing: -0.4px
            }
              }

section.Demo .container .form-container .hbspt-form .hs-form-booleancheckbox label .quote cite {
              display: block;
              width: 100%;
              margin-top: 33px;
            }

section.Demo .container .form-container .hbspt-form .hs-form-booleancheckbox label .quote cite img {
                width: 120px;
                height: 41px;
              }

@keyframes fade-in-with-opacity {
  from {
    opacity: 0;
  }
}

.section-heading {
  color: black;
  font-family: var(--avenir-next);
  font-weight: 500;
  font-size: 48px;
  line-height: 1.13;
  text-align: center;
}

@media (max-width: 480px) {

.section-heading {
    font-size: 33px;
    line-height: 1.2;
    text-align: unset
}
  }

.section-paragraphs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 3.75vw;
  color: var(--color-text);
}

@media (max-width: 480px) {

.section-paragraphs {
    grid-template-columns: unset;
    row-gap: 12px
}
  }

.section-paragraphs > p {
    margin-top: 37px;
    max-width: 400px;
    font-size: 20px;
    line-height: 1.55;
  }

@media (max-width: 480px) {

.section-paragraphs > p {
      font-size: 16px;
      line-height: 1.5
  }

      .section-paragraphs > p:last-child {
        margin-top: unset;
      }
    }

.section-paragraphs > p:last-child {
      font-size: 16px;
      line-height: 1.5;
    }

figure {
  --transition-time: 500ms;
  --path-width: 4.5px;
  --path-color: #c9c9ff;
  margin-block-start: 0;
  margin-block-end: 0;
  margin-inline-start: 0;
  margin-inline-end: 0;
}

figure .etleap-halo {
    --halo-side: 377px;
    position: relative;
    z-index: 0;
    background: rgba(255, 255, 255, 0.5);
    clip-path: circle(50%);
    width: var(--halo-side);
    height: var(--halo-side);
    align-self: center;
  }

figure .etleap-ring {
    --ring-side: 196px;
    position: relative;
    z-index: 2;
    justify-self: center;
    align-self: center;
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--ring-side);
    height: var(--ring-side);
    border-radius: 50%;
    background: white;
    border: 5.34755px solid #ada4f5;
    box-sizing: border-box;
    box-shadow: 0 2.37669px 21.9844px -4.15921px rgba(163, 148, 255, 0.85);
  }

figure .etleap-ring img {
      width: 153px;
    }

figure .path {
    --x-offset: calc(var(--path-width) * -1);
    --path-radius: 30px;
    position: relative;
    z-index: 1;
    height: 100%;
    width: 100%;
    border-color: var(--path-color);
    border-width: var(--path-width);
  }

.source-product {
  position: absolute;
  width: 135px;
  height: 56px;
  background: white;
  border: 1px solid #ffe6c0;
  border-radius: 9px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) translateZ(-2px);
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 6px 16px;
  opacity: 0;
  pointer-events: none;
  cursor: default;
  transition-duration: calc(var(--transition-time) * 0.75);
}

.source-product a {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }

.source-product a img {
      max-width: 100%;
      max-height: 100%;
    }

.source-product.more {
    font-weight: 400;
    font-size: 15px;
    line-height: 1.27;
    background-color: transparent;
  }

.source-product.show {
    transition-delay: calc(var(--transition-time) * 0.6);
    opacity: 1;
    transform: translate(-50%, -50%) translateZ(-1px);
  }

.source-product.show a {
      cursor: pointer;
      pointer-events: auto;
    }

.source-product.one.show {
    top: -46px;
    left: calc(50% + 18px);
  }

.source-product.two.show {
    top: -46px;
    left: -22px;
  }

.source-product.three.show {
    transform: translateZ(-1px);
    left: -155px;
    top: 9px;
  }

.source-product.four.show {
    transform: translateZ(-1px);
    top: calc(100% - 58px - 5px);
    left: -155px;
  }

.source-product.five.show {
    top: calc(100% + 29px + 16px);
    left: -22px;
  }

.source-product.more.show {
    top: calc(100% + 29px + 16px);
    left: calc(50% + 18px);
  }

#extract-load section.Overview {
    background-color: white;
    padding: 65px var(--margin-x) calc(var(--section-clip-path-height) + 72px);
    clip-path: polygon(
      0 0,
      100% 0,
      100% calc(100% - var(--section-clip-path-height)),
      0 100%
    );

    display: grid;
    justify-items: center;
  }

#extract-load section.Overview .section-heading {
      margin-bottom: 70px;
    }

@media (max-width: 480px) {

#extract-load section.Overview .section-heading {
        text-align: center;
        margin-bottom: 42px
    }
      }

#extract-load section.Overview .steps {
      --card-gap: 8vw;
      --card-width: 250px;
      max-width: 990px;
      display: grid;
      justify-items: center;
      justify-content: center;
    }

@media (max-width: 960px) {

#extract-load section.Overview .steps {
        --card-gap: 4vw
    }
      }

#extract-load section.Overview .steps hr {
        z-index: 0;
        border: 3px solid #f2f3f6;
        width: calc(var(--card-width) * 2 + var(--card-gap) * 2);
        transform: translateY(36px);
      }

@media (max-width: 768px) {

#extract-load section.Overview .steps hr {
          display: none
      }
        }

#extract-load section.Overview .steps ol {
        z-index: 1;
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        column-gap: var(--card-gap);
      }

@media (max-width: 768px) {

#extract-load section.Overview .steps ol {
          grid-template-columns: unset;
          row-gap: 42px
      }
        }

#extract-load section.Overview .steps ol li {
          width: var(--card-width);
          justify-items: center;
          display: grid;
          text-align: center;
        }

@media (max-width: 960px) {

#extract-load section.Overview .steps ol li {
            max-width: var(--card-width);
            width: auto
        }
          }

#extract-load section.Overview .steps ol li img {
            padding: 17px;
            background: white;
            box-shadow: 0 3.73366px 49.2px -10.53px rgba(0, 0, 0, 0.15);
            margin-bottom: 34px;
          }

#extract-load section.Overview .steps ol li h2 {
            font-family: var(--avenir-next);
            font-weight: 500;
            font-size: 27px;
            line-height: 37px;
          }

#extract-load section.Overview .steps ol li h3 {
            font-family: var(--avenir-next);
            font-weight: 500;
            font-size: 20px;
            line-height: 27px;
          }

#extract-load section.Overview .steps ol li p {
            margin-top: 18px;
            color: var(--color-text);
            font-weight: 400;
            font-size: 18px;
            line-height: 26px;
          }

#extract-load section.Overview ul.cards {
      --cards-offset: 112px;
      margin-top: 133px;
      display: grid;
      grid-template-columns: 1fr 1fr;
      max-width: 1115px;
      column-gap: 3vw;
    }

@media (max-width: 768px) {

#extract-load section.Overview ul.cards {
        --cards-offset: 0px;
        grid-template-columns: unset;
        grid-template-rows: 1fr 1fr;
        row-gap: 60px
    }
      }

@media (max-width: 480px) {

#extract-load section.Overview ul.cards {
        grid-template-rows: unset
    }
      }

#extract-load section.Overview ul.cards li {
        display: grid;
        row-gap: 23px;
        align-content: start;

        padding: 0 60px 90px;
        border: 1px solid #6b63e6;
        border-radius: 13px;
        box-shadow: 0 12.73px 65.2px -24.53px rgba(0, 0, 0, 0.15);
      }

#extract-load section.Overview ul.cards li:first-child {
          margin-bottom: var(--cards-offset);
        }

#extract-load section.Overview ul.cards li:last-child {
          margin-top: var(--cards-offset);
        }

@media (max-width: 960px) {

#extract-load section.Overview ul.cards li {
          padding: 0 30px 45px;
          row-gap: 16px
      }
        }

@media (max-width: 768px) {

#extract-load section.Overview ul.cards li {
          max-width: 460px
      }
        }

#extract-load section.Overview ul.cards li img {
          --side: 90px;
          width: var(--side);
          height: var(--side);
          padding: 20px;
          background-color: white;
          box-shadow: 0 3.73366px 49.2px -10.53px rgba(0, 0, 0, 0.15);
          border-radius: 9.33415px;
          margin-top: calc(var(--side) / 2 * -1);
          margin-bottom: 17px;
        }

#extract-load section.Overview ul.cards li img.plug {
            padding: 13px;
          }

@media (max-width: 768px) {

#extract-load section.Overview ul.cards li img {
            --side: 70px;
            padding: 15px
        }

            #extract-load section.Overview ul.cards li img.plug {
              padding: 10px;
            }
          }

#extract-load section.Overview ul.cards li h2 {
          font-family: var(--avenir-next);
          font-weight: 500;
          font-size: 35px;
          line-height: 1.23;
        }

@media (max-width: 960px) {

#extract-load section.Overview ul.cards li h2 {
            font-size: 30px
        }
          }

@media (max-width: 768px) {

#extract-load section.Overview ul.cards li h2 {
            font-size: 25px
        }
          }

#extract-load section.Overview ul.cards li p {
          color: var(--color-text);
          font-weight: 400;
          font-size: 16px;
          line-height: 1.5;
        }

#extract-load section.Source {
    background-color: #fbfaff;
    margin-top: calc(var(--section-clip-path-height) * -1);
    padding: 211px var(--margin-x) calc(30px + var(--section-clip-path-height));
    display: grid;
    justify-items: center;
    overflow: hidden;
  }

#extract-load section.Source .section-heading {
      max-width: 688px;
    }

#extract-load section.Source figure.sources {
      --vertical-path-gap: 30px;
      --path-radius: 22px;
      --path-width: 5px;
      --card-height: 97px;
      margin-top: 80px;
      display: grid;
      width: 100%;
      max-width: 1145px;
      grid-template-columns: 1fr 40px 590px;
      grid-template-rows: 210px 90px 30px 30px 30px 90px 210px;
    }

#extract-load section.Source figure.sources .small-screen {
        display: none;
      }

@media (max-width: 1200px) {

#extract-load section.Source figure.sources {
        grid-template-columns: 1fr 30px 0.8fr;
        position: relative
    }
      }

@media (max-width: 960px) {

#extract-load section.Source figure.sources {
        --path-column-width: 11vw;
        --path-offset-y: calc(var(--card-height) / 2);
        --path-offset-x: calc(var(--path-column-width) / 3);
        --reverse-path-offset-x: calc(var(--path-offset-x) * -1);
        --reverse-path-offset-y: calc(var(--path-offset-y) * -1);
        grid-template-columns: 1fr var(--path-column-width) 1fr;
        grid-template-rows: 136px 136px auto auto;
        justify-items: center;
        margin-left: -16px;
        margin-right: -16px;
        width: 115%;
        justify-self: center;
        margin-bottom: 100px
    }
        #extract-load section.Source figure.sources .large-screen {
          display: none;
        }

        #extract-load section.Source figure.sources hr.path.small-screen {
          display: block;
          width: 50%;
          height: 100%;
          border: var(--path-width) solid var(--path-color);
          border-bottom-style: none;
          position: relative;
          z-index: 0;
        }

          #extract-load section.Source figure.sources hr.path.small-screen.databases {
            grid-column: 1;
            grid-row: 1 / span 3;
            justify-self: end;
            border-left-style: none;
            border-top-right-radius: var(--path-radius);
            transform: translate(var(--path-offset-x), var(--path-offset-y));
          }

          #extract-load section.Source figure.sources hr.path.small-screen.applications {
            grid-column: 3;
            grid-row: 2 / span 3;
            justify-self: start;
            border-right-style: none;
            border-top-left-radius: var(--path-radius);
            transform: translate(
              var(--reverse-path-offset-x),
              var(--reverse-path-offset-y)
            );
          }

          #extract-load section.Source figure.sources hr.path.small-screen.files {
            grid-column: 1;
            grid-row: 2 / span 2;
            justify-self: end;
            border-left-style: none;
            border-top-right-radius: var(--path-radius);
            transform: translateY(var(--path-offset-y));
          }

          #extract-load section.Source figure.sources hr.path.small-screen.streams {
            grid-column: 3;
            grid-row: 3 / span 2;
            justify-self: start;
            border-right-style: none;
            border-top-left-radius: var(--path-radius);
            transform: translateY(var(--reverse-path-offset-y));
          }

        #extract-load section.Source figure.sources img.moving-dot.small-screen {
          display: block;
          position: relative;
          z-index: 5;
          width: 21px;
          height: 7px;
        }

          #extract-load section.Source figure.sources img.moving-dot.small-screen.databases {
            grid-column: 1;
            grid-row: 1;
            justify-self: end;
            align-self: end;
            transform-origin: right;
            --dot-offset-x: calc(var(--path-offset-x) - 3px);
            transform: translateX(var(--dot-offset-x)) translateY(-32px)
              rotate(90deg);
          }

          #extract-load section.Source figure.sources img.moving-dot.small-screen.applications {
            grid-column: 3;
            grid-row: 1;
            justify-self: start;
            align-self: end;
            transform-origin: left;
            --dot-offset-x: calc(var(--reverse-path-offset-x) + 3px);
            transform: translateX(var(--dot-offset-x)) translateY(-18px)
              rotate(90deg);
          }

          #extract-load section.Source figure.sources img.moving-dot.small-screen.files {
            grid-column: 1;
            grid-row: 2;
            justify-self: end;
            align-self: end;
            transform-origin: right;
            transform: translateX(-3px) translateY(-32px) rotate(90deg);
          }

          #extract-load section.Source figure.sources img.moving-dot.small-screen.streams {
            grid-column: 3;
            grid-row: 2;
            justify-self: start;
            align-self: end;
            transform-origin: left;
            transform: translateX(3px) translateY(-18px) rotate(90deg);
          }

        #extract-load section.Source figure.sources article.source-product-modal.small-screen {
          grid-column: 1 / -1;
          grid-row: 1 / span 3;
          align-self: start;
          max-width: 420px;
          background-color: white;
          position: relative;
          z-index: 10;
          display: none;
          justify-items: center;
          align-content: start;
          row-gap: 16px;
          border: 1px solid #ffe6c0;
          box-shadow: 0 18px 44px -13px rgba(0, 0, 0, 0.1);
          border-radius: 9px;
          padding: 25px 21px 24px;
          transform: translateY(-16px);
          animation: fade-in-with-opacity 0.5s;
        }

          #extract-load section.Source figure.sources article.source-product-modal.small-screen.show {
            display: grid;
          }

          #extract-load section.Source figure.sources article.source-product-modal.small-screen h4 {
            font-family: var(--avenir-next);
            font-weight: 500;
            font-size: 16px;
            line-height: 1;
          }

          #extract-load section.Source figure.sources article.source-product-modal.small-screen p {
            max-width: 322px;
            font-weight: 400;
            font-size: 15px;
            line-height: 1.27;
            color: var(--color-text);
            justify-self: center;
          }

          #extract-load section.Source figure.sources article.source-product-modal.small-screen ul {
            justify-self: stretch;
            display: grid;
            grid-template-columns: auto auto;
            justify-content: space-evenly;
            column-gap: 22px;
            row-gap: 14px;
          }

            #extract-load section.Source figure.sources article.source-product-modal.small-screen ul li {
              position: unset;
              transform: unset;
              opacity: unset;
              border: 1px solid #ffe6c0;
              border-radius: 9px;
            }

              #extract-load section.Source figure.sources article.source-product-modal.small-screen ul li a {
                pointer-events: auto;
              }

          #extract-load section.Source figure.sources article.source-product-modal.small-screen .close {
            position: absolute;
            top: 12px;
            right: 12px;
            color: var(--color-text);
            opacity: 0.65;
            font-size: 32px;
            line-height: 17px;
            cursor: pointer;
          }
            #extract-load section.Source figure.sources article.source-product-modal.small-screen.databases h4,
            #extract-load section.Source figure.sources article.source-product-modal.small-screen.databases li a {
              color: #ff9d0e;
              border-color: #ffe6c0;
            }

          #extract-load section.Source figure.sources article.source-product-modal.small-screen.applications {
            border-color: var(--path-color);
          }

            #extract-load section.Source figure.sources article.source-product-modal.small-screen.applications h4,
            #extract-load section.Source figure.sources article.source-product-modal.small-screen.applications li,
            #extract-load section.Source figure.sources article.source-product-modal.small-screen.applications li a {
              color: #9494ff;
              border-color: var(--path-color);
            }

          #extract-load section.Source figure.sources article.source-product-modal.small-screen.files {
            border-color: #b7edda;
          }

            #extract-load section.Source figure.sources article.source-product-modal.small-screen.files h4,
            #extract-load section.Source figure.sources article.source-product-modal.small-screen.files li,
            #extract-load section.Source figure.sources article.source-product-modal.small-screen.files li a {
              color: #10dc93;
              border-color: #b7edda;
            }

          #extract-load section.Source figure.sources article.source-product-modal.small-screen.streams {
            border-color: #88d5f2;
          }

            #extract-load section.Source figure.sources article.source-product-modal.small-screen.streams h4,
            #extract-load section.Source figure.sources article.source-product-modal.small-screen.streams li,
            #extract-load section.Source figure.sources article.source-product-modal.small-screen.streams li a {
              color: #00adee;
              border-color: #88d5f2;
            }
      }

#extract-load section.Source figure.sources .moving-dots {
        grid-column: 2;
        grid-row: 1 / -1;
        height: 100%;
        position: relative;
      }

#extract-load section.Source figure.sources .moving-dots > * {
          position: absolute;
          z-index: 5;
          width: 21px;
          height: 6px;
        }

#extract-load section.Source figure.sources .moving-dots .orange {
          top: 200px;
          transform: translateX(-8px) rotate(90deg);
        }

#extract-load section.Source figure.sources .moving-dots .purple {
          top: 325px;
        }

#extract-load section.Source figure.sources .moving-dots .green {
          bottom: 325px;
        }

#extract-load section.Source figure.sources .moving-dots .blue {
          bottom: 200px;
          transform: translateX(-8px) rotate(-90deg);
        }

#extract-load section.Source figure.sources .etleap-ring,
      #extract-load section.Source figure.sources .etleap-double-halo {
        grid-column: 3;
        grid-row: 1 / -1;
      }

@media (max-width: 960px) {

#extract-load section.Source figure.sources .etleap-ring,
      #extract-load section.Source figure.sources .etleap-double-halo {
          grid-column: 1 / -1;
          grid-row: 4
      }
        }

#extract-load section.Source figure.sources .etleap-double-halo {
        --side: 590px;
        align-self: center;
        width: var(--side);
        height: var(--side);
        background-color: #f8f7ff;
        border-radius: 50%;
        position: relative;
        z-index: 0;
      }

@media (max-width: 1200px) {

#extract-load section.Source figure.sources .etleap-double-halo {
          --side: 51vw;
          position: absolute;
          top: 50%;
          left: 69%;
          transform: translate(-50%, -50%)
      }
        }

@media (max-width: 960px) {

#extract-load section.Source figure.sources .etleap-double-halo {
          --side: 80vw;
          left: 50%
      }
        }

#extract-load section.Source figure.sources .etleap-double-halo::after {
          content: "";
          position: absolute;
          top: 50%;
          left: 50%;
          --side-inner: calc(var(--side) * 0.65);
          width: var(--side-inner);
          height: var(--side-inner);
          background-color: #f4f2ff;
          border-radius: 50%;
          transform: translate(-50%, -50%);
        }

#extract-load section.Source figure.sources .etleap-ring.large {
        --side: 230px;
        width: var(--side);
        height: var(--side);
      }

#extract-load section.Source figure.sources .etleap-ring.large img {
          width: 179px;
        }

@media (max-width: 1200px) {

#extract-load section.Source figure.sources .etleap-ring.large {
          --side: 20vw;
          margin-left: 38%
      }

          #extract-load section.Source figure.sources .etleap-ring.large img {
            width: 120px;
          }
        }

@media (max-width: 960px) {

#extract-load section.Source figure.sources .etleap-ring.large {
          --side: min(39vw, 230px);
          margin: 0
      }

          #extract-load section.Source figure.sources .etleap-ring.large img {
            width: min(30vw, 179px);
          }
        }

#extract-load section.Source figure.sources hr.path.end {
        z-index: 1;
        border: var(--path-width) solid var(--path-color);
        width: 60%;
        height: 75%;
        grid-column: 2 / span 2;
        transition-property: max-height;
        transition-duration: calc(var(--transition-time) * 1);
        transition-timing-function: linear;
      }

#extract-load section.Source figure.sources hr.path.end.databases {
          grid-row: 1 / span 2;
          border-top-style: none;
          border-right-style: none;
          align-self: end;
          justify-self: start;
          border-bottom-left-radius: var(--path-radius);
          height: 100vh;
          max-height: 140px;
        }

#extract-load section.Source figure.sources hr.path.end.applications {
          grid-row: 2 / span 2;
          margin-left: calc(var(--vertical-path-gap) * -1);
          border-top-style: none;
          border-right-style: none;
          border-bottom-left-radius: var(--path-radius);
          align-self: end;
          height: 100vh;
          max-height: 38px;
          transition-timing-function: linear;
        }

#extract-load section.Source figure.sources hr.path.end.applications.offset-up {
            max-height: 110px;
          }

#extract-load section.Source figure.sources hr.path.end.applications.offset-up-small {
            max-height: 56px;
          }

#extract-load section.Source figure.sources hr.path.end.applications.offset-down {
            max-height: 21px;
          }

#extract-load section.Source figure.sources hr.path.end.files {
          grid-row: 5 / span 2;
          margin-left: calc(var(--vertical-path-gap) * -1);
          border-bottom-style: none;
          border-right-style: none;
          border-top-left-radius: var(--path-radius);
          align-self: start;
          justify-self: start;
          height: 100vh;
          max-height: 42px;
        }

#extract-load section.Source figure.sources hr.path.end.files.offset-up-small {
            max-height: 20px;
          }

#extract-load section.Source figure.sources hr.path.end.streams {
          grid-row: 6 / span 2;
          border-bottom-style: none;
          border-right-style: none;
          border-top-left-radius: var(--path-radius);
          max-height: 148px;
        }

#extract-load section.Source figure.sources ul.networking {
        position: relative;
        z-index: 2;
        grid-column: 3;
        grid-row: 1 / -1;
        align-self: center;
        justify-self: start;
        background-color: white;
        opacity: 0.98;
        border-radius: 11px;
        font-weight: 400;
        font-size: 15px;
        line-height: 1.13;
        text-align: center;
        padding: 6px 15px;
      }

@media (max-width: 960px) {

#extract-load section.Source figure.sources ul.networking {
          grid-row: 3;
          grid-column: 1 / -1;
          justify-self: center;
          padding: 6px 18px;
          margin: 26px 0 49px
      }
        }

#extract-load section.Source figure.sources ul.networking li {
          padding: 14px 0;
        }

#extract-load section.Source figure.sources ul.networking li:not(:last-child) {
            border-bottom: 1px solid #989a9d;
          }

@media (max-width: 960px) {

#extract-load section.Source figure.sources ul.networking li {
            padding: 10px 0
        }
          }

#extract-load section.Source figure.sources ul.networking::before {
          position: absolute;
          content: "networking";
          text-transform: uppercase;
          left: 50%;
          top: -30px;
          transform: translateX(-50%);
          font-weight: 400;
          font-size: 16px;
          line-height: 1.31;
          text-align: center;
          color: #939393;
        }

@media (max-width: 960px) {

#extract-load section.Source figure.sources ul.networking::before {
            left: -16px;
            top: 50%;
            transform: translate(-50%, -50%) rotate(-90deg)
        }
          }

#extract-load section.Source figure.sources .source-card {
        padding: 0 15px 0 21px;
        background-color: white;
        border: 1px solid #ffe6c0;
        border-radius: 9.33415px;
        position: relative;
        z-index: 1;
        cursor: pointer;

        --card-width: 225px;
        width: var(--card-width);
        height: 50vh;
        max-height: var(--card-height);
        display: flex;
        justify-content: start;
        transform-style: preserve-3d;
        transition-duration: var(--transition-time);
        transition-property: all;
        transition-timing-function: linear;
      }

#extract-load section.Source figure.sources .source-card:hover {
          box-shadow: 0px 18px 44px -13px rgba(0, 0, 0, 0.1);
        }

#extract-load section.Source figure.sources .source-card:hover h4 {
            transition-duration: 200ms !important;
          }

#extract-load section.Source figure.sources .source-card > *:not(.source-product):not(p) {
          position: absolute;
          transition-duration: var(--transition-time);
          transition-property: all;
          transition-timing-function: linear;
        }

#extract-load section.Source figure.sources .source-card h4 {
          font-family: var(--avenir-next);
          font-weight: 500;
          font-size: 16px;

          left: 21px;
          top: 50%;
          transform: translateY(-50%);
        }

#extract-load section.Source figure.sources .source-card img.source-icon {
          opacity: 1;
          max-height: 60px;
          max-width: 56px;
          top: 50%;
          right: 21px;
          transform: translateY(-50%);
        }

#extract-load section.Source figure.sources .source-card.databases:hover h4 {
              color: #ff9d0e;
            }

#extract-load section.Source figure.sources .source-card.applications {
          border-color: var(--path-color);
        }

#extract-load section.Source figure.sources .source-card.applications:hover h4 {
              color: #9494ff;
            }

#extract-load section.Source figure.sources .source-card.files {
          border-color: #b7edda;
        }

#extract-load section.Source figure.sources .source-card.files:hover h4 {
              color: #10dc93;
            }

#extract-load section.Source figure.sources .source-card.streams {
          border-color: #88d5f2;
        }

#extract-load section.Source figure.sources .source-card.streams:hover h4 {
              color: #00adee;
            }

#extract-load section.Source figure.sources .source-card.small-screen {
          display: none;
        }

@media (max-width: 960px) {

#extract-load section.Source figure.sources .source-card.small-screen {
            display: flex
        }
            #extract-load section.Source figure.sources .source-card.small-screen.databases {
              grid-row: 1;
              grid-column: 1;
            }
            #extract-load section.Source figure.sources .source-card.small-screen.applications {
              grid-row: 1;
              grid-column: 3;
              align-self: end;
            }
            #extract-load section.Source figure.sources .source-card.small-screen.files {
              grid-row: 2;
              grid-column: 1;
            }
            #extract-load section.Source figure.sources .source-card.small-screen.streams {
              grid-row: 2;
              grid-column: 3;
              align-self: end;
            }
          }

@media (max-width: 768px) {

#extract-load section.Source figure.sources .source-card.small-screen {
            display: grid;
            grid-template-rows: 30px auto;
            justify-items: start;
            height: 80px;
            width: 150px
        }

            #extract-load section.Source figure.sources .source-card.small-screen img {
              position: unset;
              transform: unset;
              align-self: end;
            }

            #extract-load section.Source figure.sources .source-card.small-screen h4 {
              position: unset;
              transform: unset;
              margin: 12px 0;
            }
          }

@media (max-width: 480px) {

#extract-load section.Source figure.sources .source-card.small-screen {
            padding: 0 12px;
            width: 120px
        }

            #extract-load section.Source figure.sources .source-card.small-screen h4 {
              font-size: 14px;
              font-family: unset;
            }
          }

#extract-load section.Source figure.sources .source-cards-container {
        width: 100%;
        height: 100%;
        position: relative;
        grid-column: 1;
        grid-row: 1 / -1;
      }

#extract-load section.Source figure.sources ul.source-cards {
        --path-start-width: 6.1vw;
        --row-gap: 48px;
        position: absolute;
        top: 50%;
        right: 0;
        transform: translateY(-50%);
        display: grid;
        row-gap: var(--row-gap);
        align-content: end;
        justify-content: end;
        padding-right: calc(45px + var(--path-start-width));
        margin-bottom: calc(var(--path-width) + 2px);
      }

#extract-load section.Source figure.sources ul.source-cards li.source-card::before {
            position: absolute;
            right: -30px;
            top: 50%;
            transform: translateY(-50%);
            pointer-events: none;
          }

#extract-load section.Source figure.sources ul.source-cards li.source-card::after {
            position: absolute;
            content: "";
            pointer-events: none;
            width: var(--path-start-width);
            height: 10vh;
            max-height: 50px;
            top: 50%;
            left: calc(var(--card-width) + 49px);
            border: var(--path-width) solid var(--path-color);
            transition-property: max-height;
            transition-duration: calc(var(--transition-time) * 1);
            transition-timing-function: linear;
          }

#extract-load section.Source figure.sources ul.source-cards li.source-card p {
            position: relative;
            font-weight: 400;
            font-size: 15px;
            line-height: 1.27;
            color: var(--color-text);
            opacity: 0;
            margin: 58px 0 28px;
            transition-duration: calc(var(--transition-time) * 0.75);
          }

#extract-load section.Source figure.sources ul.source-cards li.source-card.expanded {
            max-height: 145px;
            grid-template-columns: 1fr;
            grid-template-rows: auto auto;
            align-content: center;
            box-shadow: 0px 18px 44px -13px rgba(0, 0, 0, 0.1);
          }

#extract-load section.Source figure.sources ul.source-cards li.source-card.expanded h4 {
              transform: unset;
              top: 24px;
            }

#extract-load section.Source figure.sources ul.source-cards li.source-card.expanded p {
              opacity: 1;
              transition-delay: calc(var(--transition-time) / 2);
            }

#extract-load section.Source figure.sources ul.source-cards li.source-card.expanded img.source-icon {
              opacity: 0;
            }

#extract-load section.Source figure.sources ul.source-cards li.source-card.databases::before {
              content: url("/img/extract-load/moving-dot-orange.svg");
            }

#extract-load section.Source figure.sources ul.source-cards li.source-card.databases::after {
              border-left-style: none;
              border-bottom-style: none;
              border-top-right-radius: var(--path-radius);
              height: 100vh;
              max-height: 145px;
            }

#extract-load section.Source figure.sources ul.source-cards li.source-card.databases .source-product a {
              color: #ff9d0e;
            }

#extract-load section.Source figure.sources ul.source-cards li.source-card.databases.expanded {
              transform: translateY(-51px);
            }

#extract-load section.Source figure.sources ul.source-cards li.source-card.databases.expanded h4 {
                color: #ff9d0e;
              }

#extract-load section.Source figure.sources ul.source-cards li.source-card.databases.expanded::after {
                max-height: 120px;
              }

#extract-load section.Source figure.sources ul.source-cards li.source-card.databases.offset-up::after {
              max-height: 160px;
            }

#extract-load section.Source figure.sources ul.source-cards li.source-card.applications::before {
              content: url("/img/extract-load/moving-dot-purple.svg");
            }

#extract-load section.Source figure.sources ul.source-cards li.source-card.applications::after {
              border-left: none;
              border-bottom: none;
              border-top-right-radius: var(--path-radius);
              width: calc(var(--path-start-width) - var(--vertical-path-gap));
              max-height: 30px;
              transition-timing-function: linear;
            }

#extract-load section.Source figure.sources ul.source-cards li.source-card.applications.expanded {
              margin: calc(99px - var(--row-gap)) 0;
            }

#extract-load section.Source figure.sources ul.source-cards li.source-card.applications.expanded h4 {
                color: #9494ff;
              }

#extract-load section.Source figure.sources ul.source-cards li.source-card.applications.offset-down::after {
              max-height: 15px;
            }

#extract-load section.Source figure.sources ul.source-cards li.source-card.applications.offset-up::after {
              max-height: 60px;
            }

#extract-load section.Source figure.sources ul.source-cards li.source-card.applications .source-product {
              border-color: #c9c9ff;
            }

#extract-load section.Source figure.sources ul.source-cards li.source-card.applications .source-product a {
                color: #9494ff;
              }

#extract-load section.Source figure.sources ul.source-cards li.source-card.files::before {
              content: url("/img/extract-load/moving-dot-green.svg");
            }

#extract-load section.Source figure.sources ul.source-cards li.source-card.files::after {
              top: unset;
              bottom: calc(50% - var(--path-width));
              border-bottom-right-radius: var(--path-radius);
              border-top: none;
              border-left: none;
              width: calc(var(--path-start-width) - var(--vertical-path-gap));
              height: 100vh;
              max-height: 35px;
            }

#extract-load section.Source figure.sources ul.source-cards li.source-card.files.expanded {
              margin: calc(99px - var(--row-gap)) 0;
            }

#extract-load section.Source figure.sources ul.source-cards li.source-card.files.expanded h4 {
                color: #10dc93;
              }

#extract-load section.Source figure.sources ul.source-cards li.source-card.files.offset-up-small::after {
              max-height: 20px;
            }

#extract-load section.Source figure.sources ul.source-cards li.source-card.files.offset-down::after {
              max-height: 106px;
            }

#extract-load section.Source figure.sources ul.source-cards li.source-card.files.offset-down-small::after {
              max-height: 46px;
            }

#extract-load section.Source figure.sources ul.source-cards li.source-card.files .source-product {
              border-color: #b7edda;
            }

#extract-load section.Source figure.sources ul.source-cards li.source-card.files .source-product a {
                color: #10dc93;
              }

#extract-load section.Source figure.sources ul.source-cards li.source-card.streams::before {
              content: url("/img/extract-load/moving-dot-blue.svg");
            }

#extract-load section.Source figure.sources ul.source-cards li.source-card.streams::after {
              top: unset;
              bottom: calc(50% - var(--path-width));
              border-bottom-right-radius: var(--path-radius);
              border-top: none;
              border-left: none;
              height: 100vh;
              max-height: 100px;
            }

#extract-load section.Source figure.sources ul.source-cards li.source-card.streams.expanded {
              transform: translateY(51px);
            }

#extract-load section.Source figure.sources ul.source-cards li.source-card.streams.expanded h4 {
                color: #00adee;
              }

#extract-load section.Source figure.sources ul.source-cards li.source-card.streams.expanded::after {
                max-height: 120px;
              }

#extract-load section.Source figure.sources ul.source-cards li.source-card.streams.offset-down::after {
              max-height: 200px;
            }

#extract-load section.Source figure.sources ul.source-cards li.source-card.streams .source-product {
              border-color: #88d5f2;
            }

#extract-load section.Source figure.sources ul.source-cards li.source-card.streams .source-product a {
                color: #00adee;
              }

#extract-load section.Destination {
    z-index: 1;
    position: relative;
    padding: 177px var(--margin-x) 164px;
    background-color: var(--color-yellow-background);
    display: grid;
    justify-items: center;
    justify-content: center;
    margin-top: calc(var(--section-clip-path-height) * -1);
    clip-path: polygon(
      0 0,
      100% var(--section-clip-path-height),
      100% calc(100% - var(--section-clip-path-height)),
      0 100%
    );
  }

#extract-load section.Destination .section-heading {
      max-width: 650px;
    }

#extract-load section.Destination figure.overview {
      --path-width: 5px;
      --path-width-nagative: calc(var(--path-width) * -1);
      width: 100%;
      margin-top: 35px;
      max-width: calc(400px * 2 + 3.75vw);
      display: grid;
      grid-template-columns: auto 1fr 2.18fr auto;
      grid-template-rows: 64px 64px 45px 45px 64px 64px;
    }

@media (max-width: 480px) {

#extract-load section.Destination figure.overview {
        grid-template-columns: 42px 1fr;
        grid-template-rows: 1fr 1fr 1.8fr 85px 85px;
        position: relative
    }
        #extract-load section.Destination figure.overview .path {
          --path-radius: 11px;
        }
      }

#extract-load section.Destination figure.overview .etleap-halo,
      #extract-load section.Destination figure.overview .etleap-ring {
        grid-column: 1;
        grid-row: 1 / -1;
      }

@media (max-width: 768px) {

#extract-load section.Destination figure.overview .etleap-halo,
      #extract-load section.Destination figure.overview .etleap-ring {
          --halo-side: 226px;
          --ring-side: 118px
      }

          #extract-load section.Destination figure.overview .etleap-halo img, #extract-load section.Destination figure.overview .etleap-ring img {
            width: 92px;
          }
        }

@media (max-width: 480px) {

#extract-load section.Destination figure.overview .etleap-halo,
      #extract-load section.Destination figure.overview .etleap-ring {
          --ring-side: 153px;
          --halo-side: 299px;
          grid-row: 1 / span 2;
          grid-column: 2
      }
        }

@media (max-width: 480px) {
        #extract-load section.Destination figure.overview .etleap-halo {
          position: absolute;
          z-index: -1;
          grid-row: 1 / span 2;
          grid-column: 2;
          justify-self: center;
        }
      }

#extract-load section.Destination figure.overview .path > hr {
          position: absolute;
          z-index: 2;
          background-color: rgba(107, 99, 230, 0.35);
          width: 21px;
          height: 7px;
          transform: translateX(-15px);
        }

#extract-load section.Destination figure.overview .path.redshift {
          grid-row: 2;
        }

#extract-load section.Destination figure.overview .path.redshift.start {
            grid-column: 1 / span 2;
            border-bottom-style: solid;
            border-right-style: solid;
            border-bottom-right-radius: var(--path-radius);
            height: 55%;
            width: 60%;
            align-self: end;
            justify-self: end;
          }

@media (max-width: 480px) {

#extract-load section.Destination figure.overview .path.redshift.start {
              display: none
          }
            }

#extract-load section.Destination figure.overview .path.redshift.end {
            grid-column: 3;
            border-top-style: solid;
            border-left-style: solid;
            border-top-left-radius: 30px;
            height: 55%;
            transform: translateX(var(--path-width-nagative));
            position: relative;
          }

@media (max-width: 480px) {

#extract-load section.Destination figure.overview .path.redshift.end {
              grid-column: 2;
              grid-row: 2 / span 2;
              border-bottom-style: solid;
              border-top-left-radius: var(--path-radius);
              border-bottom-left-radius: var(--path-radius);
              align-self: end;
              justify-self: start;
              width: 50%;
              height: calc(100% - 22px)
          }
            }

#extract-load section.Destination figure.overview .path.redshift.end::before,
            #extract-load section.Destination figure.overview .path.redshift.end::after {
              content: "";
              z-index: 2;
              background-color: #6B63E6;
              width: 7px;
              height: 7px;
              clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
              position: absolute;
              right: -3.5px;
              top: calc(var(--path-width) * -1 - 1px);
            }

#extract-load section.Destination figure.overview .path.redshift.end::before {
              right: unset;
              left: max(40%, 30px);
            }

@media (max-width: 480px) {

#extract-load section.Destination figure.overview .path.redshift.end::before {
                right: unset;
                left: -6px;
                top: calc(50% + 18px)
            }
              }

#extract-load section.Destination figure.overview .path.redshift.end > hr {
              top: calc(var(--path-width) * -1 - 1px);
              left: max(40%, 30px);
            }

@media (max-width: 540px) {

#extract-load section.Destination figure.overview .path.redshift.end > hr {
                width: 14px
            }
              }

@media (max-width: 480px) {

#extract-load section.Destination figure.overview .path.redshift.end > hr {
                right: unset;
                left: -6px;
                top: 50%;
                height: 21px;
                width: 7px;
                transform: unset
            }
              }

#extract-load section.Destination figure.overview .path.s3 {
          grid-row: 5;
        }

#extract-load section.Destination figure.overview .path.s3.start {
            grid-column: 1 / span 2;
            border-top-right-radius: var(--path-radius);
            border-top-style: solid;
            border-right-style: solid;
            height: 55%;
            width: 60%;
            justify-self: end;
            align-self: start;
          }

@media (max-width: 480px) {

#extract-load section.Destination figure.overview .path.s3.start {
              display: none
          }
            }

#extract-load section.Destination figure.overview .path.s3.end {
            grid-column: 3;
            border-bottom-left-radius: var(--path-radius);
            border-bottom-style: solid;
            border-left-style: solid;
            height: 55%;
            align-self: end;
            transform: translateX(var(--path-width-nagative));
          }

@media (max-width: 480px) {

#extract-load section.Destination figure.overview .path.s3.end {
              grid-column: 2;
              grid-row: 2 / -1;
              height: calc(100% + 22px);
              width: 60%;
              border-top-left-radius: var(--path-radius);
              border-top-style: solid;
              transform: translateX(-42px)
          }
            }

#extract-load section.Destination figure.overview .path.s3.end::before,
            #extract-load section.Destination figure.overview .path.s3.end::after {
              content: "";
              z-index: 2;
              background-color: #6B63E6;
              width: 7px;
              height: 7px;
              clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
              position: absolute;
              right: -3.5px;
              bottom: calc(var(--path-width) * -1 - 1px);
            }

#extract-load section.Destination figure.overview .path.s3.end::before {
              right: unset;
              left: max(40%, 30px);
            }

@media (max-width: 480px) {

#extract-load section.Destination figure.overview .path.s3.end::before {
                right: unset;
                left: -6px;
                top: calc(80% + 18px)
            }
              }

#extract-load section.Destination figure.overview .path.s3.end > hr {
              right: unset;
              left: max(40%, 30px);
              bottom: calc(var(--path-width) * -1 - 1px);
            }

@media (max-width: 540px) {

#extract-load section.Destination figure.overview .path.s3.end > hr {
                width: 14px
            }
              }

@media (max-width: 480px) {

#extract-load section.Destination figure.overview .path.s3.end > hr {
                right: unset;
                left: -6px;
                top: 80%;
                height: 21px;
                width: 7px;
                transform: unset
            }
              }

#extract-load section.Destination figure.overview .path.snowflake {
          grid-column: 1 / span 3;
          grid-row: 3;
          height: var(--path-width);
          background-color: var(--path-color);
          width: 75%;
          justify-self: end;
          align-self: end;
        }

@media (max-width: 480px) {

#extract-load section.Destination figure.overview .path.snowflake {
            background-color: unset;
            height: 100%;
            width: 60%;
            transform: translateX(-23px);
            grid-column: 2;
            grid-row: 2 / span 3;
            border-bottom-style: solid;
            border-left-style: solid;
            border-top-style: solid;
            border-top-left-radius: var(--path-radius);
            border-bottom-left-radius: var(--path-radius);
            align-self: end;
            justify-self: start
        }
          }

#extract-load section.Destination figure.overview .path.snowflake::before,
          #extract-load section.Destination figure.overview .path.snowflake::after {
            content: "";
            z-index: 2;
            background-color: #6B63E6;
            width: 7px;
            height: 7px;
            clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
            position: absolute;
            right: -3.5px;
            top: 50%;
            transform: translateY(-50%);
          }

@media (max-width: 480px) {

#extract-load section.Destination figure.overview .path.snowflake::before,
          #extract-load section.Destination figure.overview .path.snowflake::after {
              display: none
          }
            }

#extract-load section.Destination figure.overview .path.snowflake::before {
            right: 14%;
          }

@media (max-width: 480px) {

#extract-load section.Destination figure.overview .path.snowflake::before {
              display: block;
              right: unset;
              left: -6px;
              top: calc(70% + 18px)
          }
            }

#extract-load section.Destination figure.overview .path.snowflake hr {
            right: 14%;
            top: 50%;
            transform: translateX(-2px) translateY(-50%);
          }

@media (max-width: 480px) {

#extract-load section.Destination figure.overview .path.snowflake hr {
              transform: unset;
              right: unset;
              left: -6px;
              top: 70%;
              height: 21px;
              width: 7px
          }
            }

#extract-load section.Destination figure.overview .destination-card {
        width: 232px;
        padding: 16px 0;
        margin-left: 20px;
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 14px;
        background-color: white;
        box-shadow: 0 4.52131px 59.5792px -12.7514px rgba(0, 0, 0, 0.15);
        border-radius: 11.3033px;
        align-self: center;
        grid-column: 4;
      }

#extract-load section.Destination figure.overview .destination-card img {
          height: 37px;
        }

@media (max-width: 768px) {

#extract-load section.Destination figure.overview .destination-card {
          width: unset;
          padding: 12px 8px;
          display: grid;
          row-gap: 10px;
          justify-items: center
      }
          #extract-load section.Destination figure.overview .destination-card img {
            height: 30px;
          }
          #extract-load section.Destination figure.overview .destination-card h4 {
            font-size: 16px;
          }
        }

@media (max-width: 480px) {

#extract-load section.Destination figure.overview .destination-card {
          justify-self: center;
          align-self: end;
          display: flex;
          width: 232px;
          z-index: 5;
          --local-offset-y: calc(50% - 3px);
          transform: translateY(var(--local-offset-y))
      }

          #extract-load section.Destination figure.overview .destination-card img {
            height: 37px;
          }
          #extract-load section.Destination figure.overview .destination-card h4 {
            font-size: 18px;
          }
        }

#extract-load section.Destination figure.overview .destination-card.redshift {
          grid-row: 1 / span 2;
        }

@media (max-width: 480px) {

#extract-load section.Destination figure.overview .destination-card.redshift {
            grid-row: 3;
            grid-column: 2
        }
          }

#extract-load section.Destination figure.overview .destination-card.snowflake {
          grid-row: 3 / span 2;
        }

@media (max-width: 480px) {

#extract-load section.Destination figure.overview .destination-card.snowflake {
            grid-row: 4;
            grid-column: 2
        }
          }

#extract-load section.Destination figure.overview .destination-card.s3 {
          grid-row: 5 / span 2;
        }

@media (max-width: 480px) {

#extract-load section.Destination figure.overview .destination-card.s3 {
            grid-row: 5;
            grid-column: 2
        }
          }

#extract-load section.Destination section.Warehouse {
      display: grid;
      justify-items: center;
    }

#extract-load section.Destination section.Warehouse .section-heading {
        margin-top: 115px;
        max-width: 650px;
      }

#extract-load section.Destination section.Warehouse p {
        margin-top: 33px;
        max-width: 650px;
        font-size: 20px;
        line-height: 1.6;
        text-align: center;
        color: var(--color-text);
      }

@media (max-width: 480px) {

#extract-load section.Destination section.Warehouse p {
          font-size: 16px;
          line-height: 1.5;
          text-align: unset
      }
        }

#extract-load section.Destination section.Warehouse ul {
        margin-top: 60px;
        display: grid;
        grid-template-columns: 1fr 1fr;
        column-gap: 3.7vw;
        max-width: 1125px;
      }

@media (max-width: 480px) {

#extract-load section.Destination section.Warehouse ul {
          grid-template-columns: unset;
          row-gap: 22px
      }
        }

#extract-load section.Destination section.Warehouse ul li {
          padding: 47px 58px 72px;
          background: white;
          box-shadow: 0 12.73px 66.2px -31.53px rgba(0, 0, 0, 0.12);
          border-radius: 13px;
          display: grid;
          grid-template-rows: 62px 1fr;
          row-gap: 30px;
          align-items: start;
        }

@media (max-width: 768px) {

#extract-load section.Destination section.Warehouse ul li {
            padding: 26px 20px 44px;
            grid-template-rows: 38px 1fr;
            row-gap: 20px
        }
          }

@media (max-width: 480px) {

#extract-load section.Destination section.Warehouse ul li {
            grid-template-rows: 62px 1fr
        }
          }

#extract-load section.Destination section.Warehouse ul li .snowflake-logo {
            height: 55px;
          }

@media (max-width: 768px) {

#extract-load section.Destination section.Warehouse ul li .snowflake-logo {
              height: 36px
          }
            }

@media (max-width: 480px) {

#extract-load section.Destination section.Warehouse ul li .snowflake-logo {
              height: 55px
          }
            }

#extract-load section.Destination section.Warehouse ul li .redshift-logos {
            display: flex;
            justify-content: start;
            align-items: center;
            gap: 12px;
          }

#extract-load section.Destination section.Warehouse ul li .redshift-logos img:first-child {
              height: 55px;
            }

#extract-load section.Destination section.Warehouse ul li .redshift-logos img:last-child {
              width: 126px;
            }

@media (max-width: 768px) {
              #extract-load section.Destination section.Warehouse ul li .redshift-logos img:first-child {
                height: 38px;
              }
              #extract-load section.Destination section.Warehouse ul li .redshift-logos img:last-child {
                width: 90px;
              }
            }

@media (max-width: 480px) {
              #extract-load section.Destination section.Warehouse ul li .redshift-logos img:first-child {
                height: 55px;
              }

              #extract-load section.Destination section.Warehouse ul li .redshift-logos img:last-child {
                width: 126px;
              }
            }

#extract-load section.Destination section.Warehouse ul li p {
            margin-top: unset;
            text-align: unset;
            font-size: 16px;
            line-height: 1.5;
          }

#extract-load section.Destination section.Lake {
      margin-top: 159px;
      display: grid;
      justify-items: center;
    }

#extract-load section.Destination section.Lake .section-heading {
        max-width: 614px;
      }

#extract-load section.Destination section.Lake p.main {
        margin-top: 24px;
        font-size: 18px;
        line-height: 1.33;
        color: var(--color-text);
        display: none;
      }

@media (max-width: 768px) {

#extract-load section.Destination section.Lake p.main {
          display: block
      }
        }

@media (max-width: 480px) {

#extract-load section.Destination section.Lake p.main {
          font-size: 16px;
          line-height: 1.5
      }
        }

#extract-load section.Destination section.Lake .paragraphs {
        display: grid;
        grid-template-columns: 1fr 1fr;
        column-gap: 48px;
        row-gap: 10px;
        color: var(--color-text);
      }

#extract-load section.Destination section.Lake .paragraphs > * {
          max-width: 400px;
        }

@media (max-width: 768px) {

#extract-load section.Destination section.Lake .paragraphs {
          grid-template-columns: unset
      }
          #extract-load section.Destination section.Lake .paragraphs > * {
            max-width: unset;
          }
        }

#extract-load section.Destination section.Lake .paragraphs p.main {
          grid-row: 1 / span 2;
          font-size: 20px;
          line-height: 1.6;
        }

@media (max-width: 768px) {

#extract-load section.Destination section.Lake .paragraphs p.main {
            display: none
        }
          }

#extract-load section.Destination section.Lake .paragraphs p.sub-a,
        #extract-load section.Destination section.Lake .paragraphs p.sub-b {
          font-size: 18px;
          line-height: 1.33;
        }

@media (max-width: 480px) {

#extract-load section.Destination section.Lake .paragraphs p.sub-a,
        #extract-load section.Destination section.Lake .paragraphs p.sub-b {
            font-size: 16px;
            line-height: 1.5
        }
          }

#extract-load section.Destination section.Lake figure.lake {
        --path-gap: 22px;
        --path-connection-offset-y: 88px;
        margin: 60px 0 79px;
        width: 90vw;
        max-width: 1209px;
        display: grid;
        grid-template-columns: auto minmax(4vw, 1fr) auto;
        grid-template-rows: 80px 146px 107px 107px auto;
        position: relative;
      }

@media (max-width: 960px) {

#extract-load section.Destination section.Lake figure.lake {
          grid-template-rows: 80px auto 107px 107px auto
      }
        }

@media (max-width: 768px) {

#extract-load section.Destination section.Lake figure.lake {
          grid-template-columns: 58px 1fr;
          grid-template-rows: 1fr 1fr auto auto
      }
        }

#extract-load section.Destination section.Lake figure.lake .etleap-halo,
        #extract-load section.Destination section.Lake figure.lake .etleap-ring {
          grid-column: 1;
          grid-row: 2 / span 4;
          align-self: center;
        }

@media (max-width: 1200px) {

#extract-load section.Destination section.Lake figure.lake .etleap-halo,
        #extract-load section.Destination section.Lake figure.lake .etleap-ring {
            --halo-side: 30vw;
            --ring-side: calc(var(--halo-side) * 0.6)
        }
            #extract-load section.Destination section.Lake figure.lake .etleap-halo img, #extract-load section.Destination section.Lake figure.lake .etleap-ring img {
              width: calc(var(--ring-side) * 0.78);
            }
          }

@media (max-width: 768px) {

#extract-load section.Destination section.Lake figure.lake .etleap-halo,
        #extract-load section.Destination section.Lake figure.lake .etleap-ring {
            --ring-side: 183px;
            --halo-side: 352px;
            grid-column: 2;
            grid-row: 1 / span 2
        }
          }

@media (max-width: 768px) {
          #extract-load section.Destination section.Lake figure.lake .etleap-halo {
            position: absolute;
            justify-self: center;
            z-index: -1;
          }
        }

#extract-load section.Destination section.Lake figure.lake .path-name {
          --gap-to-path: 20px;
          grid-column: 2;
          grid-row: 2;
          font-weight: 700;
          font-size: 20px;
          line-height: 23px;
          letter-spacing: 2px;
          text-transform: uppercase;
          color: #9494f8;
          justify-self: end;
          align-self: end;
          margin-bottom: var(--gap-to-path);
          transform: translateX(-4.5vw);
        }

@media (max-width: 768px) {

#extract-load section.Destination section.Lake figure.lake .path-name {
            grid-column: 1;
            grid-row: 3;
            align-self: end;
            transform-origin: right;
            transform: translate(-20px, -150px) rotate(90deg);
            margin: 0
        }
          }

#extract-load section.Destination section.Lake figure.lake .path-name.data {
            grid-row: 5;
            color: #478d28;
            align-self: start;
            margin-bottom: unset;
            margin-top: var(--gap-to-path);
          }

@media (max-width: 768px) {

#extract-load section.Destination section.Lake figure.lake .path-name.data {
              grid-row: 4;
              transform-origin: right;
              align-self: end;
              transform: translate(-34px, -150px) rotate(90deg);
              margin: 0
          }
            }

#extract-load section.Destination section.Lake figure.lake .lake-box {
          position: relative;
          z-index: 2;
          grid-column: 3;
          grid-row: 1 / -1;
          border: 2px dashed rgba(82, 41, 172, 0.3);
          padding: 14px 2.3vw;
        }

@media (max-width: 768px) {

#extract-load section.Destination section.Lake figure.lake .lake-box {
            grid-column: 2;
            grid-row: 3 / span 2;
            margin-top: 50px
        }
          }

#extract-load section.Destination section.Lake figure.lake .lake-box h3 {
            display: flex;
            justify-content: start;
            align-items: center;
            font-weight: 700;
            font-size: 22px;
            line-height: 26px;
            letter-spacing: 2px;
            text-transform: uppercase;
            color: #5632ae;
            opacity: 0.5;
          }

#extract-load section.Destination section.Lake figure.lake .lake-box h3 img {
              height: 48px;
            }

#extract-load section.Destination section.Lake figure.lake .block {
          --border-radius: 9.3px;
          --border-purple: #9494f8;
          position: relative;
          z-index: 2;
          padding: 18px 1.8vw;
          grid-column: 3;
          grid-row: 2 / span 2;
          display: grid;
          grid-template-columns: 340px auto;
          justify-self: stretch;
          justify-items: center;
          align-self: end;
          align-items: start;
          column-gap: 23px;
          border: 1px solid var(--border-purple);
          box-sizing: border-box;
          box-shadow: 0 3.73366px 49.2px -10.53px rgba(0, 0, 0, 0.15);
          border-radius: var(--border-radius);
          margin: 0 2.2vw calc(var(--path-gap) / 2);
        }

@media (max-width: 960px) {

#extract-load section.Destination section.Lake figure.lake .block {
            grid-template-columns: unset;
            row-gap: 12px
        }
            #extract-load section.Destination section.Lake figure.lake .block h3 {
              grid-row: 1;
            }
          }

@media (max-width: 768px) {

#extract-load section.Destination section.Lake figure.lake .block {
            grid-column: 2;
            grid-row: 3
        }
            #extract-load section.Destination section.Lake figure.lake .block.glue {
              margin-top: calc(50px + 82px);
            }
          }

#extract-load section.Destination section.Lake figure.lake .block h3 {
            max-width: 173px;
            opacity: 0.7;
            display: flex;
            gap: 14px;
            align-items: center;
            align-self: center;
            font-weight: 400;
            font-size: 18px;
            line-height: 21px;
            color: var(--color-text);
            text-align: center;
          }

#extract-load section.Destination section.Lake figure.lake .block h3 img {
              height: 37px;
            }

#extract-load section.Destination section.Lake figure.lake .block.glue ul.card {
            position: relative;
            z-index: 3;
          }

#extract-load section.Destination section.Lake figure.lake .block.glue ul.card::before {
              z-index: 4;
              content: url("/img/extract-load/lake-schema.svg");
              width: 25px;
              height: 25px;
              position: absolute;
              left: 0;
              top: 103px;
              transform: translateX(-50%);
            }

@media (max-width: 768px) {

#extract-load section.Destination section.Lake figure.lake .block.glue ul.card::before {
                top: unset;
                bottom: var(--path-connection-offset-y)
            }
              }

#extract-load section.Destination section.Lake figure.lake .block.s3 {
            grid-row: 4 / span 2;
            margin-bottom: 24px;
            margin-top: calc(var(--path-gap) / 2);
            border-color: #478d28;
          }

@media (max-width: 768px) {

#extract-load section.Destination section.Lake figure.lake .block.s3 {
              grid-row: 4
          }
            }

#extract-load section.Destination section.Lake figure.lake .block ul.card {
            width: 100%;
            background-color: white;
            border: 1px solid var(--border-purple);
            box-shadow: 0 3.73366px 49.2px -10.53px rgba(0, 0, 0, 0.15);
            border-radius: var(--border-radius);
            padding: 18px 16px;
            display: grid;
            row-gap: 15px;
            align-content: start;
          }

#extract-load section.Destination section.Lake figure.lake .block ul.card li {
              padding: 12px 14px 10px;
              background-color: #e1e1ff;
              border-radius: var(--border-radius);
              font-weight: 700;
              font-size: 20px;
              line-height: 23px;
              color: var(--color-text);
            }

#extract-load section.Destination section.Lake figure.lake .block ul.card.s3 {
              border-color: #488e29;
              position: relative;
            }

#extract-load section.Destination section.Lake figure.lake .block ul.card.s3 li {
                background-color: #eaf6e3;
              }

#extract-load section.Destination section.Lake figure.lake .block ul.card.s3 hr.dot {
                position: absolute;
                z-index: 3;
                left: -36px;
                top: 83px;
                background-color: #61a43833;
                height: 4px;
                width: 20px;
                border-radius: 3px;
              }

@media (max-width: 960px) {

#extract-load section.Destination section.Lake figure.lake .block ul.card.s3 hr.dot {
                  top: 34px
              }
                }

@media (max-width: 768px) {

#extract-load section.Destination section.Lake figure.lake .block ul.card.s3 hr.dot {
                  top: unset;
                  bottom: var(--path-connection-offset-y)
              }
                }

#extract-load section.Destination section.Lake figure.lake .block ul.card.s3 hr.dot.in {
                  left: -26px;
                  width: 28px;
                }

@media (max-width: 768px) {

#extract-load section.Destination section.Lake figure.lake .block ul.card.s3 hr.dot.in {
                    top: unset;
                    bottom: var(--path-connection-offset-y)
                }
                  }

#extract-load section.Destination section.Lake figure.lake .block ul.card.s3 hr.dot::after {
                  position: absolute;
                  right: 0;
                  z-index: 4;
                  content: "";
                  width: 4px;
                  height: 4px;
                  border-radius: 2px;
                  background-color: #61a438;
                }

#extract-load section.Destination section.Lake figure.lake hr.path {
          --show-top-half: polygon(0 0, 100% 0, 100% 50%, 0 50%);
          --show-lower-half: polygon(0 50%, 100% 50%, 100% 100%, 0 100%);
          border-radius: var(--path-radius);
        }

#extract-load section.Destination section.Lake figure.lake hr.path.schema {
            grid-row: 3;
          }

#extract-load section.Destination section.Lake figure.lake hr.path.schema.start {
              width: 50%;
              justify-self: end;
              align-self: end;
              margin-bottom: calc(var(--path-gap) / 2);
              grid-column: 1;
              border-bottom-style: dashed;
              border-right-style: dashed;
              clip-path: var(--show-lower-half);
            }

@media (max-width: 768px) {

#extract-load section.Destination section.Lake figure.lake hr.path.schema.start {
                clip-path: unset;
                margin: 0;
                grid-column: 1 / span 2;
                grid-row: 2 / span 2;
                align-self: start;
                justify-self: start;
                transform: translate(14px, 9px);
                height: calc(100% - var(--path-connection-offset-y) - 49px);
                border-right-style: none;
                border-top-style: dashed;
                border-left-style: dashed
            }
              }

#extract-load section.Destination section.Lake figure.lake hr.path.schema.end {
              width: 50%;
              align-self: end;
              margin-bottom: calc(var(--path-gap) / 2);
              grid-column: 2 / span 2;
              border-left-style: dashed;
              border-top-style: dashed;
              transform: translateX(var(--x-offset));
              clip-path: var(--show-top-half);
            }

@media (max-width: 768px) {

#extract-load section.Destination section.Lake figure.lake hr.path.schema.end {
                display: none
            }
              }

#extract-load section.Destination section.Lake figure.lake hr.path.data {
            grid-row: 4;
          }

#extract-load section.Destination section.Lake figure.lake hr.path.data.start {
              width: 50%;
              justify-self: end;
              grid-column: 1;
              border-top-style: solid;
              border-right-style: solid;
              margin-top: calc(var(--path-gap) / 2);
              clip-path: var(--show-top-half);
            }

@media (max-width: 768px) {

#extract-load section.Destination section.Lake figure.lake hr.path.data.start {
                clip-path: unset;
                grid-column: 1 / span 2;
                grid-row: 2 / span 3;
                align-self: start;
                justify-self: start;
                transform: translateY(-9px);
                height: calc(100% - var(--path-connection-offset-y) - 35px);
                border-right-style: none;
                border-left-style: solid;
                border-bottom-style: solid;
                margin-top: 0
            }
              }

#extract-load section.Destination section.Lake figure.lake hr.path.data.end {
              width: 50%;
              grid-column: 2 / span 2;
              border-left-style: solid;
              border-bottom-style: solid;
              margin-top: calc(var(--path-gap) / 2);
              transform: translateX(var(--x-offset));
              clip-path: var(--show-lower-half);
            }

@media (max-width: 768px) {

#extract-load section.Destination section.Lake figure.lake hr.path.data.end {
                display: none
            }
              }

#extract-load section.CDC {
    z-index: 0;
    margin-top: calc(var(--section-clip-path-height) * -1);
    padding: 204px var(--margin-x) 234px;
    background-color: var(--color-blue-background);
    clip-path: polygon(
      0 0,
      100% 0,
      100% 100%,
      0 calc(100% - var(--section-clip-path-height))
    );
    display: grid;
    justify-items: center;
  }

@media (max-width: 768px) {

#extract-load section.CDC {
      padding-top: 140px;
      padding-bottom: 140px
  }
    }

#extract-load section.CDC .section-heading {
      max-width: 620px;
    }

#extract-load section.CDC .section-heading span {
        display: inline-block;
      }

#extract-load section.CDC .content {
      margin-top: 85px;
      display: grid;
      grid-template-columns: 1.08fr 1fr;
      column-gap: 7.6vw;
      align-items: start;
    }

@media (max-width: 768px) {

#extract-load section.CDC .content {
        grid-template-columns: unset
    }
      }

@media (max-width: 480px) {

#extract-load section.CDC .content {
        margin-top: 46px
    }
      }

#extract-load section.CDC .content .info-and-screen {
        max-width: 520px;
        display: grid;
      }

#extract-load section.CDC .content .info-and-screen h3 {
          font-family: var(--avenir-next);
          font-size: 35px;
          line-height: 1.23;
        }

@media (max-width: 480px) {

#extract-load section.CDC .content .info-and-screen h3 {
            font-size: 25px
        }
          }

#extract-load section.CDC .content .info-and-screen p {
          margin-top: 25px;
          font-size: 16px;
          line-height: 1.5;
          color: var(--color-text);
        }

#extract-load section.CDC .content .info-and-screen .caption {
          max-width: 50%;
          font-family: var(--avenir-next);
          font-size: 20px;
          line-height: 1.3;
          color: var(--color-text);
          justify-self: right;
          transform: translate(32%, 160px);
        }

@media (max-width: 960px) {

#extract-load section.CDC .content .info-and-screen .caption {
            transform: translate(32%, 120px)
        }
          }

@media (max-width: 768px) {

#extract-load section.CDC .content .info-and-screen .caption {
            transform: unset;
            max-width: unset;
            justify-self: start;
            grid-row: 4
        }
          }

#extract-load section.CDC .content .info-and-screen img {
          border-top-left-radius: 4px;
          width: 110%;
        }

@media (max-width: 768px) {

#extract-load section.CDC .content .info-and-screen img {
            margin: 36px 0 16px
        }
          }

#extract-load section.CDC .content ul {
        margin-top: 176px;
        display: grid;
        row-gap: 38px;
      }

@media (max-width: 768px) {

#extract-load section.CDC .content ul {
          margin-top: 37px
      }
        }

#extract-load section.CDC .content ul li {
          background: white;
          box-shadow: 0 12.73px 66.2px -31.53px rgba(0, 0, 0, 0.12);
          border-radius: 13px;
          padding: 38px 58px 62px;
          max-width: 480px;
          display: grid;
          row-gap: 15px;
        }

@media (max-width: 960px) {

#extract-load section.CDC .content ul li {
            padding: 28px 28px 49px
        }
          }

#extract-load section.CDC .content ul li p {
            font-size: 16px;
            line-height: 1.5;
            color: var(--color-text);
          }

#extract-load section.CaseStudies ul li p::before,
    #extract-load section.CaseStudies ul li p::after {
      content: none;
    }

#extract-load section.CaseStudies ul::after {
      background-image: url("/img/extract-load/end-quote-blue.svg");
    }

#extract-load section.DemoSection {
    margin-top: 128px;
  }

@media (max-width: 480px) {

#extract-load section.DemoSection {
      margin-top: 60px
  }
    }