*{
    -webkit-font-smoothing: antialiased;
    text-rendering:optimizeLegibility;
  }
  

  :root{
    --menu-height: 81px;
  }

    
  html{scroll-behavior: smooth; overflow-x: hidden;}

  body,p{font-size: 16px;  color: #5d656d;}

  .bg-white-translucent{
      background:rgba(255, 255, 255, 0.8);
      backdrop-filter: blur(10px);
  }

  
  .show-on-desktop{
    display: block;
  }

  a{text-decoration: none;}

  a.anchor {
    display: block;
    position: relative;
    top: -90px;
    visibility: hidden;
}

  h1{line-height: 1.1em; letter-spacing: -1px;}

  h1,h2{margin-bottom:var(--margin-small);}
  h2{line-height: 1em; letter-spacing: -0.5px;}

  h3,h4{line-height: 1.2em;}
  h4,h3{margin-bottom:var(--margin-small)}

  h5{font-family: var(--h1-bold-font);}
  
  label,strong{color: #000;}
  
  label{font-family: var(--body-font);}

  p strong{font-family: 'Albert Sans Regular';}

  .inputs:focus ~ .placeholder-label, .inputs:valid ~ .placeholder-label{
    font-size: 16px;
  }

  .inputs{line-height: 1.5em;}

  .form-input{
    margin-bottom: 36px;
  }

  .link{
    color: var(--primary-color);
    text-decoration: none;
    cursor: pointer;
  }




 


  .button.primary-accent-gradient{
      background:linear-gradient(135deg, var(--primary-color) 0%, var(--accent-color) 100%);
      border:none;
      padding:14px 12px
  }


  .site-container.overflow-x-hidden{ overflow-x:hidden}

  /*=======================================================
  // RADAR BACKGROUND
  /======================================================*/

  .radar-background{
    position: absolute;
    width:25vw;
    height:25vw;

  }
  .radar-background:after,
  .radar-background:before{
    content: ' ';
    width:100%;
    height: 100%;
    border-radius: 50%;
    position: absolute;
    opacity: 0;
    border:1px solid #39baff9f;
    animation: radar-pulse 7s infinite linear;
  
  }


  .radar-1, .radar-3{
    top:-7vw;
    left:-6vw;
  }

  .radar-2, .radar-4{
    top:calc(100% - 25vw);
    right:-6vw;
  }
  
  .radar-1::after{
    animation-delay: 1s;
  }

  .radar-1::before{
    animation-delay: 2s;
  }

  .radar-3::after{
    animation-delay: 3s;
  }

  .radar-3::before{
    animation-delay: 4s;
  }

  .radar-2::after{
    animation-delay: 4s;
  }
  

  .radar-2::before{
    animation-delay: 5s;
  }

  

  .radar-4::after{
    animation-delay: 6s;
  }

  .radar-4::before{
    animation-delay: 7s;
  }


  @keyframes radar-pulse{
    0%{
      opacity: 0;
      transform: scale(0);
    }
    50%{
      opacity: 1;
      transform: scale(1);
    }
    100%{
      opacity: 0;
      transform: scale(2);
    }
  }

  /*=======================================================
  // VIDEOS
  /======================================================*/

  .video-item {
      cursor:pointer;
      position: relative;
  }

  .video-item:hover:after,
  .video-item.playing:after {
      content:'';
      position:absolute;
      top:0;
      left:0;
      right:0;
      bottom:0;
      background:rgba(0,0,0,0.03);
      z-index:1;
  }

  video::cue {
      font-family: var(--body-font-bold);
      /* Outline text */
      text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
      background:none
  }

  /*=======================================================
  // ELEMEMTS
  /======================================================*/

  .choose-app:hover{
    box-shadow: var(--elevation);
    transform: translate3d(0,-16px,0);
  }

  .visual img{
    height: auto;
    width: auto;
  }

  .double-phone-visual{
    position: relative;
    height: 80vh;
    max-height: 900px;
    width: 40vw;
    max-width: 640px;
    margin: 0 auto 0 5vw;
    transform: rotate(-35deg);
  }

  .double-phone-visual img{
    display: block;
    width: auto;
    max-height: 80vh;
    max-width: 337px;
    position: absolute;
    z-index: 0;
    height: auto;
    animation: floating-device 4s infinite ease-in-out;
  }

  .double-phone-visual img:nth-child(2){
    z-index: 1;
    transform: translate3d(70%,30%,0);
    animation: floating-device-2 4s infinite ease-in-out reverse;
   
  }

 


  @keyframes floating-device{
    0%{
        transform: translate3d(0,0,0)
    }
    50%{
        transform: translate3d(-1%,1%,0)
    }
    100%{
        transform: translate3d(0,0,0)
    }
  }

  @keyframes floating-device-2{
    0%{
        
        transform: translate3d(69%,31%,0)
    }
    50%{
      transform: translate3d(70%,30%,0)
    }
    100%{
      transform: translate3d(69%,31%,0)
    }
  }

  .feature-hero{
    max-height: 63vh;
  }

  .feature-hero figure{
    height:69vh; z-index:1; overflow:initial
  }

  .feature-hero figure img{
    width:150%!important; max-width:150%!important; height:auto; transform:translate(-10%,10%)
  }

  .hero-wrapper{
      perspective-origin: 50%;
      max-width: 1280px;
      width: 100%;
      margin:-60px auto 0;
      z-index: 1;
      align-items: center;
  }

  .dotted-background{
    background:url(/assets/images/pattern.svg);
    background-repeat: repeat-x;
    background-position: top center;
    background-size: 512px;
  }


  .dotted-background-white{
    background:url(/assets/images/pattern-white.svg);
    background-repeat: repeat;
    background-position: top center;
    background-size: 512px;
  }

  .hero-title{font-size: 320%; font-family: var(--h1-font); line-height: 1.1em;}



  .border-bottom-dash{border-bottom: 1px dashed rgba(0,0,0,0.1);}

  .border-bottom-dash.font-body-large{
    margin-bottom: var(--margin-medium); 
    padding-bottom: var(--padding-medium);
  }


  .defer-media-load{
    opacity: 0;
    transform: translate3d(10%,0,0);
  }

  .defer-media-load.loaded{
    opacity: 1;
    transform: translate3d(0%,0,0);
  }

  img:not([src]) {
    visibility: hidden;
 }

  /*=======================================================
  // SINGLE PAGE
  /======================================================*/

  .single-page{max-width:800px; margin:0 auto}

  .single-page h5{padding: var(--padding-xsmall) 0}

 
  .single-page .font-body-large{margin-bottom: var(--margin-medium); padding-bottom: var(--padding-medium);}

  .single-page img{display: block; width: 100%; margin:var(--margin-small) 0}

  .single-page a{color: var(--secondary-color); font-weight: bold;}

  .single-page ul{padding: 0 var(--padding-medium) var(--padding-medium); line-height: 1.5em;}

 

  /*=======================================================
  // FORMS
  /======================================================*/

  .form-wrapper{
    max-width:1280px; margin:0 auto;padding-top:56px
  }

  .form-wrapper .bg-dark.radius{border-radius: var(--radius) 0 0 var(--radius);}

  .form-grid{
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 28px;
    align-items: flex-start;
  }

  .tiny-label{font-size: 80%; text-transform: uppercase; letter-spacing: 1.5px; font-family: var(--body-bold-font);}

  .label-checkbox{
    display: grid;
    grid-template-columns: 21px 1fr 16px;
    gap: 12px;
    padding-bottom: var(--padding-small);
    align-items: center;
    line-height: 1em;
  }

  .label-checkbox input{
    width:16px;
    height: 16px;
  }

  .label-checkbox .fa{
    font-size: 17px;
    color:#888

  }

  .label-checkbox p{
    line-height: 1.5em;
    margin-top:-5px
  }

  .inputs{color: #000; font-family: var(--body-font);}

  .field-icon{
      position: absolute;
      top:auto;
      bottom:11px;
      right:0;
      font-size: 17px!important;
      display: flex;
      justify-content: center;
      align-items: center;
      width:30px;
  }

  .inputs:focus ~ .field-icon,
  .inputs:focus ~ label{
      color: var(--primary-color)!important;
  }

  .inputs::placeholder{
    color: #9da7af;
    font-family: var(--body-font);
  }

  

  .label-grid{
    font-family: var(--body-bold-font);
    display: grid;
    grid-template-columns: 1fr auto; 
    align-items: center;
    padding:10px 0 10px;
  }




  .form-wrapper.accent .inputs:focus ~ .field-icon,
  .form-wrapper.accent .inputs:focus ~ label{
      color: var(--accent-color)!important;
  }

  .form-wrapper.accent .link{color: var(--accent-color);}


  .mailer-log{
      display:none;
  }

  .mailer-log.show{
      display:block;
  }


  .contact-finish{
      z-index: -1;
      visibility: hidden;
      transition: 0.3s ease-in;
  }

  .contact-finish .padding{
      transform: translate3d(10%,0,0);
      opacity: 0;
  }


  .contact-finish.show{
      z-index: 1;
      visibility: visible;
      opacity: 1;
  }
  .contact-finish.show .padding{
      transform: translate3d(0,0,0);
      transition: 0.3s ease-in;
      transition-delay: 0.15s;
      opacity: 1;
  }

  .remark-input{display: none;}

  /*=======================================================
  // ICONS / LOGOS
  /======================================================*/

  .logo{background: black; width: 48px; height: 48px; border-radius: 50%; margin:0 0 var(--margin-small)}

  .brand-logos{
    margin:var(--margin-small) auto 0 0;
    grid-template-columns: 100px 100px 100px;
    align-items: center;
    column-gap: 36px;
    row-gap: 16px;
  }
  .brand-logos img{
    display: block;
    width: 100%;
    /* Overlay on png */
    filter:  grayscale(1) brightness(0%);
  }

  .icon-size-44{
    width:44px;
    height: 44px;
  }

  .icon-stack{
      width:280px; 
      height:280px; 
      margin-top:-10%; 
      box-shadow:0 7px 0 #849aa8; 
      transform: rotateX(45deg); 
      border-radius:15%;
      position: relative;
      z-index: 1;
  }

  .brand-logo{
    max-width:160px; 
    margin:0 auto; 
    display:block;
    height: auto;
    width: 100%;
  }

  .brand-icons{
    align-items: center;
  }

  .brand-icons img{
    max-width: 28px;
  }

  .brand-icons a{text-decoration: none;}
  .brand-icons .fa{font-size: 28px; color: #000; font-size: 24px;}


  
  @keyframes fade-in {
    0%{opacity: 0;}
    100%{opacity: 1;}
    
  }


  /*=======================================================
  // BUTTONS
  /======================================================*/

  #video-play-btn{
    cursor: pointer;
  }

  #video-play-btn:hover{
    box-shadow: var(--elevation-high);
    background-color: var(--primary-color);
    transform: scale(1.1);
  }

  #video-hero{
    z-index: -1;
    opacity: 0;
  }


  #video-hero video{
    height:80%;
    width: auto;
    aspect-ratio: 16/9;
  }

  @media screen and (orientation: portrait) {
    
    #video-hero video{
      width:100%;
      height: auto;
      border-radius: 0;
    }

  }

  #video-hero.show{
    z-index: 10;
    opacity: 1;
  }

  .outline-button-small{
    padding: 8px 14px;
    max-width: 180px;
  }
  .button-small{
    padding:10px 16px;
    max-width: 190px;
  }

  .text-button-small{
    font-family: var(--body-bold-font);
  }

  .text-button-small.align-left{
    padding-left:0;
    text-align: left;
    
  }

  .button-with-icon{
    display: flex;
    align-items: center;
    gap: 8px;
    max-width: 190px;
  }

  .button-with-icon .fa{
    font-family: 'Fontawesome';
    font-size: 15px;
    transition: .6s cubic-bezier(0.075, 0.82, 0.165, 1);
    position: relative;
  }

  
  .button-with-icon:hover .fa{
    transform: translate3d(50%,0,0);
  }

  .button{
    padding:12px
  }

  .button.connecting:after{
      box-sizing: border-box;
      width: 32px;
      height: 32px;
      border-radius: 100%;
      border: 2px solid rgba(255, 255, 255, 0);
      border-top-color: #fff;
      -webkit-animation: turn 1s infinite linear;
      animation: turn 1s infinite linear;
      display:block;
      content:"";
      text-indent: -9999px;
      background: none;
  }	 

  .button.connecting:after{position: absolute; top: 10px; right: 10px; width: 24px; height: 24px; }

  /*=======================================================
  // BACKGROUNDS
  /======================================================*/
  
  .world-map{
    background: var(--dark-color) url(../images/world-map.png) center 48px no-repeat;
    background-size: 130%;
  }

  .bg-primary-30{
    background: #1B9CFC0f
  }

  .bg-accent-30{
    background: #ffc0480f
  }

  /*=======================================================
  // NAV
  /======================================================*/

  #main-nav{
      position: sticky; 
      top:0;
      z-index: 2;

  }



  .menu > a{
      display: block;
      font-size: 90%;
      font-family: var(--body-bold-font);
      text-transform: uppercase;
      padding:var(--padding-small) var(--padding);
      color: #000;
      cursor: pointer;
  }


  /* === Sub Nav === */
  #main-nav .menu a{
    font-family: var(--body-bold-font);
  }


  #mobile-nav{
      position:sticky;
      top:0;
      left:0;
      right:0;
      z-index: 4;
  }

  #mobile-nav.bg-white{
      box-shadow: var(--elevation-high);
  }

  #mobile-nav-icon{
      padding:var(--padding-xsmall) var(--padding-small);
      border-radius:40px;
      background:rgba(255,255,255,0.5);
  }


  #mobile-nav-modal{
      position: fixed;
      inset: 0 0;
      background: rgba(0,0,0,0.3);
      backdrop-filter: blur(3px);
      z-index: -1;
      visibility: hidden;
      opacity: 0;
      
  }


  #mobile-nav-modal.show{
      z-index: 5;
      visibility: visible;
      opacity: 1;
  }

  #mobile-nav-modal-inner{
      position: fixed;
      top:0;
      bottom: 0;
      left:10vw;
      right:0;
      opacity: 0;
      transform: translate3d(10%,0%,0);
      border-radius: var(--radius) 0 0 var(--radius);
  }

  #mobile-nav-modal.show #mobile-nav-modal-inner{

      opacity: 1;
      transform: translate3d(0,0%,0);
  }
  

  #mobile-nav-modal .sub-nav-item{
    display: grid;
    grid-template-columns:24px 1fr!important;
    padding:var(--padding-xsmall) 0;
    align-items: center;
    line-height: 1.2em;
    gap: 12px;
  }

  #mobile-nav-modal .sub-nav-item .fa{font-size: 17px; justify-self: center;}
  #mobile-nav-modal .sub-nav-item span{
    font-size: 12px;
  }

  #mobile-nav-modal .sub-nav-item strong{
    font-size: 14px;
  }

  .sub-nav-item span {
      color: #5d656d;
  }


  .bg-dark h2,
  .bg-dark strong{
    color: #fff;
  }

  .bg-dark p,
  .bg-dark span{
    color: #adbdcc;
  }


  


  /*=======================================================
  // LISTS
  /======================================================*/
  
  .check-list-grid{
    display:inline-grid;
    grid-template-columns: 1fr 1fr; 
    column-gap:16px;
  }

  .check-list-item{
    font-size: 95%;
    display: flex;
    gap:8px;
    margin-bottom: var(--margin-small);
  }

  .check-list-item .fa{font-size: 17px;}

  /*=======================================================
  // GRIDS
  /======================================================*/

  .grid-auto-40{
    grid-template-columns: 1fr 40%; 
  }

  /*=== Components Grid ===*/

  .compontent-item{
    padding: var(--padding-small) var(--padding);
    border-radius: 10px;
    transition: 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  }

  .compontent-item:hover{
    transform: translate3d(0,-5%,0);
    box-shadow: var(--elevation-high);
    background: #fff;
  }

  .component-item-icon{
    position: relative;
    width: 44px;
    height: 44px;
    margin: var(--margin-xsmall) auto 0;
    display: flex;
    align-items: center;
    justify-content: center;
    
  }

  .component-item-icon::after{
    background: var(--accent-color);
    content: ' ';
    position: absolute;
    border-radius: 50%;
    width: 44px;
    height: 44px;
    left: 50%;
    top: 50%;
    transform: translate3d(-50%,-50%,0) scale(0);
    opacity: 0;
    transition: 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  }


  .compontent-item:hover .component-item-icon{
    animation: float-hover 1s linear infinite;
  }

  @keyframes float-hover{
    0%{
        transform:translate3d(0%,-0%,0)
    }
    50%{
        transform:translate3d(0%,-10%,0)
    }
    100%{
        transform:translate3d(0%,0%,0)
    }
  }

  .compontent-item:hover .component-item-icon::after{
    transform: translate3d(-50%,-50%,0) scale(1);
    opacity: 1;
  }

  .compontent-item:hover .component-item-icon .fa{
    color: #fff!important;
    font-size: 17px;
    position: relative;
    z-index: 1;
  }


  /*=== Features Grid ===*/
  .features-grid .fa{padding-top:var(--padding-small)}


  /*=== Layout Grids ===*/

  .grid-45-auto{grid-template-columns: 45% 1fr;}

  .grid-x4{grid-template-columns: 1fr 1fr 1fr 1fr;}
  .grid-x2{grid-template-columns: 50% 50%;}
  .grid-65-auto{
    grid-template-columns: 65% 1fr; 
    gap:28px;
    max-width:1280px; 
    width:100%; 
    margin:0 auto;
    z-index:1
  }

  .grid-60-auto{
    grid-template-columns: 60% 1fr; gap:30px
  }

  .grid-auto-30{
    grid-template-columns: 1fr 30%;
  }

  .snippet-grid{
    display: grid;
    grid-template-columns:1fr 1fr 1fr 1fr; 
    gap:28px
  }

  .snippet-grid.x3{
    grid-template-columns:1fr 1fr 1fr; 
  }

 

  .divided-grid > div,
  .snippet-grid.divided > div{
    padding:0 16px;
    border-left: 1px dashed rgba(0,0,0,0.1);
  }

  .bg-dark .divided-grid > div,
  .bg-dark .snippet-grid.divided > div{
    border-left: 1px dashed rgba(255,255,255,0.1);
  }


  .divided-grid .fa{margin-top: var(--margin-small);}

  .snippet-grid.x2{
    grid-template-columns:1fr 1fr; 
  }


  .snippet-grid h5{font-size: 100%;}



  /*=======================================================
  // PRICING TABLE
  /======================================================*/

  .pricing-table-header{
      border-radius: 4px;
      padding:44px!important;
      color: #fff;
  }

  .pricing-table-header h3{
      color: #fff;
      text-transform: uppercase;
      font-size: 120%;
  }

  .pricing-table-header span,
  .pricing-table-header strong{
      color: #fff;
  }

  .pricing-table-row.grid{
      font-size: 90%;
      grid-template-columns:15px 1fr!important; 
      gap:8px!important
  }

  .pricing-table-row i{
      font-size:15px;
      
  }

  .pricing-table-row .fa-check-circle{
      color:var(--accent-color)
  }

  .pricing-table-column:nth-child(2){
      z-index:1; transform:translate3d(0,-18px,0)
  }

  .pricing-table-column:nth-child(1) .fa-check-circle{
      color:var(--primary-color)
  }

  .pricing-table-column:nth-child(3) .fa-check-circle{
      color:var(--dark-color)
  }

  .pricing-table-column:nth-child(3) > .padding-small{
      padding-left:28px
  }

  .pricing-table-column:nth-child(1) .pricing-table-header{
      background: var(--primary-color); 
  }

  .pricing-table-column:nth-child(2) .pricing-table-header{
      background: var(--accent-color); 
  }

  .pricing-table-column:nth-child(3) .pricing-table-header{
      background: var(--dark-color); 
  }


  /*=======================================================
  // WHITE PAPER STYLES
  /======================================================*/

  .article,.article p{
      font-size: 17px;
      line-height: 1.7em;
  }
  

  .article-contents ul{
      list-style: none;
      font-size:13px;
      
  }

  

  .article-contents li{
      margin-top: 8px;
  }

  .article h2{
      font-size: 140%;
      margin:0;
      padding-top:44px;
      padding-bottom:var(--padding-small);
      clear:both;

  }

  .article h3{
      font-size:100%;
      padding-top: var(--margin-medium);
      font-family: var(--body-bold-font);
      padding-bottom: var(--margin-xsmall);
      margin-bottom: 0
  }

  .chart{
      border-radius: var(--radius);
      margin: 16px 0 32px ;
  }

  .chart{
      background:#162b41;
      border-radius: var(--radius);
      padding:16px;
  }

  .chart span{
      display:block;
      text-align:center;
      font-size:13px;
      line-height:1.5em;
      margin-top:16px;
      color:#fff;
      opacity:0.5
  }

  .chart a{
      color:#fff;
      text-decoration:underline;
      display:block;
  }

  .article ul{
      list-style: none;
      padding:0 var(--padding-small);
  }

  .article ol{
      padding:0 var(--padding-small);
  }

  .article li{
      margin-bottom: var(--margin-small);
  }

  .citations li {
    margin-bottom: 8px;
    word-break: break-all;
}


  .article a, .citations a, .article-contents a{
      color:var(--primary-color);
  }

  .list-tiles{
      display: flex;
      flex-wrap: wrap;
      padding: 16px 0 32px ;
  }

  .list-tiles > div{
      width:200px;
      font-size: 15px;
      line-height: 1.5em;
  }

  .list-tiles > div span{
      margin-top: var(--margin-xsmall);
      display: block;
  }

  .pull-quote{
      margin:0 var(--margin-medium) 16px;
      font-size: 110%;
      position: relative;
      line-height: 1.5em;
      float:right;
      width:40%;
      color:#000;
      font-family:var(--body-bold-font);
  }

  .pull-quote:after{
      content: ' ';
      position: absolute;
      inset:0;
      border: 6px solid #000;
      border-radius: 20px;
  }

  .pull-quote-inner{
      border-radius: 12px 15px 23px 23px;
      padding: 32px;
      background-color:var(--accent-color-50);
      transform: translate3d(12px,12px, 0);
  }

  .pull-quote-char{
      width: 44px;
      height: 0px;
      padding: 22px 0 0;
      text-align: center;
      font-family: sans-serif;
      background:#fff;
      font-size: 600%;
      position: absolute;
      left: 20%;
      top: 0;
      transform: translate(-50%, -50%);
      font-family:sans-serif;
      z-index: 1;
  }

  
  /*=======================================================
  // FOOTER
  /======================================================*/

  .footer-grid{grid-template-columns:1fr 1fr 1fr 1fr; gap:30px; align-items: flex-start;}

  footer ul{padding-bottom: 20px;}
  footer ul li{list-style: none;}
  footer ul li a{display: block; color: #adbdcc; text-decoration: none; padding:var(--padding-xsmall) 0 0; font-size: 90%;}

  footer p{font-size: 90%;padding: 0 0 20px;}

  footer a{color: #adbdcc; text-decoration: none;}

  footer a:hover{color: var(--secondary-color)}


  footer .copyright{font-size: 90%;}


  /*==================================================
    // PRIVACY
    /=================================================*/

    #privacy-cookie{
      position: fixed; 
      bottom:2.5vw; 
      left:2.5vw;
      right: 2.5vw;
      z-index:3; 
      transform: translate3d(0,100%,0);
      opacity: 0;
      transition: 0.3s cubic-bezier(0.075, 0.82, 0.165, 1);
      
  }

  #privacy-cookie.show{
      transform: translate3d(0,0%,0);
      opacity: 1;
  }
  
  #privacy-cookie p{margin: 0; padding: 0;}

  #privacy-cookie-grid{
      margin:0 auto; 
      max-width:640px; 
      border-radius:30px; 
      display: grid;
      grid-template-columns: 64px 1fr 42px;
      padding:15px; 
      box-shadow: var(--elevation-high);
      align-items: center;
  }

  .cookie-icon{width: 36px; height: 36px; margin:0; display: flex; align-items: center; justify-items: center;}

  .cookie-icon .fa{font-size: 28px;}

  /*=======================================================
  // ADAPTION
  /======================================================*/

  .show-on-mobile{display:none}

  .reseller-hero-slide{max-height: 880px; overflow: hidden;}

  .grid-with-stack-icon{
    grid-template-columns:600px auto; 
    gap:30px;
    align-items:center
  }

  .brand-grid{
    grid-template-columns: 1fr 1fr 1fr 1fr;
    align-items: center; 
    gap: 44px;
  }
  

  #get-started-grid{ grid-template-columns:  1fr 1fr; column-gap:60px}

  #get-started-grid > .flex{padding:0 var(--padding-medium)}

  
  
  .process-items{
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    gap: 8px;
  }

  .process-items article{
    text-align: center;
    transition: 0.6s cubic-bezier(0.075, 0.82, 0.165, 1);
    transition-property: all;
  }

  .process-items article:hover{
    box-shadow: var(--elevation-high);
    background: var(--dark-color);
    transform: translate3d(0,-5%,0);
    z-index: 1;
  }

  .process-items article p{
    opacity: 0;
  }

  .process-items article:hover .fa{
    font-size: 36px;
    animation: 1s float-hover infinite;
  }

  .process-items article:hover p,
  .process-items article:hover strong{
    color: #fff;
    opacity: 1;
  }

  @media screen and (max-width:1024px) {


    
    
    

    .hero-title,
    h1{font-size: 250%;}
    h2{font-size: 200%;}
    h3{font-size: 160%;}
    
    body,p{font-size: 15px;}

    .font-body-large{font-size: 110%;}


    .icon-stack{
      width: 200px;
      height: 200px;
    }

    .form-grid{
      grid-template-columns: 1fr;
    }

    .grid-45-auto{
      grid-template-columns: 50% 1fr;
    }

  }


  @media screen and (min-width:767px) and (orientation: portrait) {

    .show-on-desktop{
      display: none;
    }

    .feature-hero{
      max-height: none;
    }
  
    .feature-hero figure{
      height:auto; 
    }

    .addons-grid{grid-template-columns: 1fr 1fr!important;}

    .pricing-table{
      grid-template-columns: 1fr 1fr 1fr!important;
      margin-left:var(--padding-small);
      margin-right:var(--padding-small);
    }

    .pricing-table-column{
      width: auto!important;
    }

    #sub-nav-container{
      transform: translate3d(-50%,0,0)!important;
    }
    

    .article-contents{
      display: none;
    }
    .article-container{
      display: block!important;
    }

    .double-phone-visual{
      height: 40vh;
    }

    #get-started-grid{grid-template-columns: 1fr 1fr; row-gap: 28px;}

    #get-started-grid > div:first-of-type{grid-column: span 2;}

    .hero-wrapper{
      padding-top: 5vh;
      grid-template-columns: 60% 1fr !important;
    }

    .reseller-hero-slide{max-height: none; overflow: hidden;}

    .check-list-grid{grid-template-columns: 1fr;}

    .product-chooser{
      grid-template-columns: 1fr!important;
    }

    
    .footer-grid{
      grid-template-columns: 1fr 1fr 1fr;
    }

    .footer-grid > a{
      grid-column: span 3;
    }

    .grid-with-stack-icon{
      grid-template-columns: 1fr auto;
    }

    
    .grid-x4{grid-template-columns: 1fr 1fr!important;}

    .product-chooser-item{max-width: 500px; margin: 0 auto;}

    .form-wrapper{ margin: 0 auto;}

    .snippet-grid{
      grid-template-columns: 1fr 1fr;
    }

    

    .phablet-flex-column-reverse{
      display: flex;
      flex-direction: column-reverse;
      gap: 0!important;
    }

    .phablet-flex-column-reverse .visual{
      width: 90%;
      margin: 0 auto;
    }

    .phablet-flex-column-reverse .visual img{
      margin: 0!important;
      width: 100%!important;
    }

    .phablet-flex-column{
      display: flex;
      flex-direction: column;
      gap: 0!important;
    }


    /*=== Multi-shot right */
    .multi-shot-right .visual{
      margin:-28% 0 -21%
    }

    .multi-shot-right .visual img{
      width:450px;
    }

  }

   html{overflow-x: hidden;}

  @media screen and (max-width:900px), screen and (orientation: portrait) {

    .radar-background{
      position: absolute;
      width:50vw;
      height:50vw;

    }
    
    .radar-2, .radar-4{
      display: none;  
    }

    #main-nav .menu a:nth-child(4),
    #main-nav .menu a:nth-child(5){
      display: none;
    }

  }

  @media screen and (max-width:767px) {


    
   

    .show-on-desktop{
      display: none;
    }

    .feature-hero figure img{
      transform: none!important;
      margin-left: -33px;
    }

    .feature-hero .grid{
      gap:0!important
    }

    .padding-top-mobile{padding-top:28px;}
    .padding-bottom-mobile{padding-bottom:28px;}

    .video-grid{
      display: flex!important;
      flex-direction: column-reverse;
      gap:0!important
    }

    body.overflow{
      max-height: none!important;
      overflow-y: unset!important;
    }

    .pricing-table{
      overflow-x: auto;
      scroll-snap-type: x mandatory;
      display: flex;
      box-sizing: border-box;
      gap:16px!important;
      justify-content: flex-start;
      padding:0 var(--padding) 28px;
    }

    /* iOS Patches */
    .pricing-table:after{
        content:' ';
        width:var(--padding);
        display:block;
        flex-shrink: 0;
    }

    .pricing-table-column{
      width: 80vw!important;
      scroll-snap-align: center;
      flex-shrink: 0;
      transform: translate3d(0,0,0)!important;
    }

    .double-phone-visual{
      position: relative;
      transform: rotate(0deg);
    }

    .double-phone-visual img{
      position: relative;
      transform: translate3d(0,0,0)!important;
      animation: none!important;
      
    }

    .double-phone-visual img:nth-child(2){
      display: none;
    }

    .pull-quote{
        margin: 16px 16px 28px -2px;
        width: calc(100% - 16px);
        float: none;
    }

    .article-container.grid{
      display: block;
    }

    .article-contents{display:none;}

    .article-banner,
    .chart{
      margin-left:calc(0px - var(--padding));
      margin-right:calc(0px - var(--padding));
      border-radius: 0;
    }

    .article img{
      width: calc(100% + var(--padding) + var(--padding)) !important;
      margin-left: calc(0px - var(--padding));
      margin-right: calc(0px - var(--padding));
      border-radius: 0;
    }


    .chart img{
      width: 100%!important;
      margin: 0!important;
    }
    
    .chart canvas{
        width: 100%!important;
    }

    .article-banner{
      width:calc(100% + var(--padding) + var(--padding))!important;
    }

    .list-tiles > div{
      width:calc(42% - var(--padding-small))
    }

    .list-tiles > div span{font-size:13px}
    
    .pricing-table.grid{
      grid-template-columns: 320px!important;
    }

    .pricing-table-column{
        margin-top:44px!important
    }

    .pricing-table-column:nth-child(3) > .padding-small{
      padding-left:var(--padding-small)!important
    }

    .hero-title,
    h1{font-size: 220%;}
    h2{font-size: 200%;}
    h3{font-size: 160%;}


    .reseller-hero-slide{max-height: none;}

    .show-on-mobile{display:block}
    .hide-on-mobile{display: none;}

    .menu{display: none!important;}

   

    /*=== Elements === */

    
    .visual{
      width: 90%!important;
      margin-left: auto;
      margin-right: auto;
      display: block;
    }

    .visual img{
      max-width: 80% !important;
      height: auto !important;
      width: auto !important;
      display: block;
      margin: 0 auto;
    }


    .multi-shot-visual.visual{
      margin:28px -6% 28px auto!important;
    }


    .stripes{z-index: -1; opacity: 0.3;}
    .app-peek{display: none;}

    .multi-shot{
      position: relative;
    }

    .multi-shot .position-absolute{
      position: static;
    }

    .multi-shot img{
      width: 100%!important;
    }

    

    .form-wrapper .bg-dark.radius{border-radius: var(--radius) var(--radius) 0 0;}

    .single-page{padding-top: 28px;}


    /*=== Flex ===*/
    .button-flex-container{
      flex-wrap: wrap;
    }

    .button-flex-container a{flex-shrink: 0;}

    .mobile-flex-column-reverse{
      display: flex;
      flex-direction: column-reverse;
      gap: 0!important;
    }


    
    /*=== Grids ===*/
    .footer-grid,
    .grid{grid-template-columns: 1fr!important; row-gap: 30px;}

    .snippet-grid,
    .compontents-grid{grid-template-columns: 1fr!important; row-gap: 0;}

    .artboard{display: none}

    .compontent-item{padding: 8px 28px;}

    .check-list-grid{
      grid-template-columns: 1fr!important;
    }

    footer .copyright-wrapper{display: block!important;}

    #get-started-grid > .flex{padding:8px 0}


    .features-grid{gap: 0;}
    .features-grid .fa{margin-top: 0;}

    .divided-grid > div,
    .snippet-grid.divided > div{
      padding:8px 0 ;
      border-left: none!important;
      border-top: 1px dashed rgba(0,0,0,0.1);
    }

    .bg-dark .divided-grid > div,
    .bg-dark .snippet-grid.divided > div{
      border-left: none;
      border-top: 1px dashed rgba(255,255,255,0.1);
    }

    .hero-wrapper{
      padding-top: 10vh;
    }

    .grid-mobile-x2{grid-template-columns: 1fr 1fr!important;}

    .visual{width: 90%!important; margin: 16px auto!important; height: auto!important;}


    .product-chooser{
      grid-template-columns: 1fr!important;
    }

    .roadmap .bg-white{position: relative; z-index: 1;}


    .brand-logos{
      grid-template-columns: 90px 90px 90px !important;
      gap: 28px !important;
    }
    


  }


  /*=======================================================
  // ADAPTION
  /======================================================*/


  @media screen and  (prefers-color-scheme: dark)  {

    /*=== Root ===*/

    :root{
      --light-blue-grey: #051d33;
    }


    /*=== Fonts ===*/
    h1,h2,h3,h4,h5{
      color: #fefefe;
    }
    .inputs,
    strong,
    label{color: #fefefe;}


    .inputs::placeholder{
      opacity: 0.3;
    }

    .tiny-label,
    body,p{
      color: #9da7af;
    }


    .menu > span,.sub-nav-item strong{
      color: #fefefe;
    }

    /*=== Backgrounds ===*/
    .bg-dark{
      background:var(--dark-dark-color);
    }

    .bg-white-translucent{
      background: rgba(22, 43, 65, 0.6);
    }

    .border.bg-white{
      border:1px solid rgba(0,0,0,0.2)
    }

    .pull-quote-char {
      background: var(--dark-color);
      color: #fff;
    }

    .pull-quote{
      color: #fff;
    }

   

    .pull-quote:after{
      border-color: #fff;
    }


    /*=== Borders ===*/
    .divided-grid > div,
    .snippet-grid.divided > div{
      border-left: 1px dashed rgba(255,255,255,0.1);
    }

    fieldset{border-bottom: 1px solid rgba(255,255,255,0.1)}

    .roadmap::after{
        border-left: 2px dashed rgba(255, 255, 255, 0.1);
    }
    
    /*=== Elements ===*/
    #mobile-nav-icon .fa{color: #fff!important;}
    #mobile-nav-icon{background: rgba(0,0,0,0.1)!important;}

    .brand-logo{
        filter: grayscale(1) invert(1);
    }

    .brand-logos img{
      filter:grayscale(1) brightness(0%) invert(1);
    }

    .brand-icons .fa{color: #fff;}

    #main-nav a{
      color: #fff;
    }

    .bg-white{
      background: var(--dark-color);
    }

    

    .frost-overlay.light::before{
      background: linear-gradient(0deg,var(--dark-color) 0%,rgba(52, 73, 95,0.3) 100%);
    }
    .frost-overlay.light::after{
      background: linear-gradient(50deg,var(--dark-color) 0%,rgba(52, 73, 95,0.3) 100%);
    }



    #privacy-cookie-grid{border: 1px solid var(--dark-color);}

    .fa.color-dark{
      color:var(--dark-dark-color);
    }

    .pricing-table-column:nth-child(3) .pricing-table-header{
      background-color: var(--dark-dark-color);
    }


  }




  @media print{
    #main-nav{display: none;}
    section{page-break-inside: avoid;}
  }