@import url('https://fonts.googleapis.com/css?family=Work+Sans:400,500,700&display=swap');

:root {
  /* 48 / 16 / 20 / 28 / 24 / 32 */
  --typography__fontSize--xxxs: 12px;
  --typography__fontSize--xxs: 14px;
  --typography__fontSize--xs: 16px;
  --typography__fontSize--sm: 18px;
  --typography__fontSize--md: 20px;
  --typography__fontSize--lg: 32px;
  --typography__fontSize--xl: 48px;
  --typography__fontSize--xxl: 56px;

  --typography__font--heading: 'Libre Franklin', 'Spartan MB', sans-serif;
  /* 800 / 600 / 400 */

  --typography__font--default: "Proxima Nova", system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji;
  /* 300 / 500 */

  --taupe: #F9F9F9;
  --purple: #300A75;
  --purple-dark: #170041;
  --gray: #E2E2E2;
  --black: #252525;
  --blue: #1f73b7;

  --grid__width: 1136px;
  --grid__width--sm: 680px;
  --spacing__rhythmUnit: 0.5rem;
  --border__width--default: 0.125rem;

  --spacing__vertical--1: var(--spacing__rhythmUnit);
  --spacing__vertical--2: calc(2 * var(--spacing__rhythmUnit));
  --spacing__vertical--3: calc(3 * var(--spacing__rhythmUnit));

}

@font-face {
  font-family: 'Spartan MB';
  src: url('./font/spartanmb-bold-webfont-webfont.woff2') format('woff2'),
       url('./font/spartanmb-bold-webfont-webfont.woff') format('woff');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Spartan MB';
  src: url('./font/spartanmb-extra-bold-webfont.woff2') format('woff2'),
       url('./font/spartanmb-extra-bold-webfont.woff') format('woff');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Spartan MB';
  src: url('./font/spartanmb-semibold-webfont-webfont.woff2') format('woff2'),
       url('./font/spartanmb-semibold-webfont-webfont.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

.f--xxs {
  font-size: var(--typography__fontSize--xxs);
}
.mt--md {
  margin-top: calc(2 * var(--spacing__rhythmUnit));
}
html {
  /* Set parent font size */
  font-size: var(--typography__fontSize);
}

body {
  background: var(--taupe);
  /* Set base line-height */
  color: var(--black);
  line-height: var(--spacing__vertical--2);
  margin: calc(4 * var(--spacing__vertical--1)) auto 0;
  -webkit-font-smoothing: antialiased;
}
.u-hold {
  overflow: hidden;
}
.spacing__vertical--1 {
  padding-bottom: var(--spacing__vertical--1);
}

.spacing__vertical--2 {
  padding-bottom: var(--spacing__vertical--2);
}

.spacing__vertical--3 {
  padding-bottom: var(--spacing__vertical--3);
}
.container {
  margin: 0 auto;
  width: var(--grid__width);
}
.font-md {
  font-size: var(--typography__fontSize--md);
}
.font-lg {
  font-size: var(--typography__fontSize--lg);
}

span.highlight {
  color: var(--purple);

}
p.subline {
  font-family: var(--typography__font--heading);
  font-size: var(--typography__fontSize--sm);
  font-weight: 600;
  line-height: 1rem;
  letter-spacing: -1px;
  margin-bottom: calc(8 * var(--spacing__rhythmUnit));
  /*max-width: 30%;*/
}
p.subline > * {
  vertical-align: middle;;
}
p.subline img {
  height: 21px;
  width: 28px;
  margin-right: var(--spacing__rhythmUnit);
  
}
a {
  color: #000;
  font-size: var(--typography__fontSize--xxs);
  text-decoration: none;
  transition: 0.21s;
}
p {
  font-family: var(--typography__font--default);
  font-weight: 400;
}
input::placeholder,
textarea::placeholder {
  opacity: .25;
}
input:focus,
textarea:focus {
  border: 2px var(--purple) solid !important;
  outline: none;
}
header {
  align-items: center;
  display: flex;
  justify-content: space-between;
}
header .app-name {
  display: flex;
  justify-content: flex-start;
  white-space: nowrap;
}
header .app-name a {
  align-items: center;
  display: inline-flex;
}
header img {
  height: auto;
  margin-right: var(--spacing__vertical--2);
  width: calc(20 * var(--spacing__rhythmUnit));
}
header h1 {
  font-family: var(--typography__font--heading);
  font-size: var(--typography__fontSize--sm);
  font-weight: 800;
  line-height: var(--typography__fontSize--sm);
}
nav {
  display: flex;
  font-family: var(--typography__font--heading);
  font-size: var(--typography__fontSize--xxs);
  font-weight: 600;
  line-height: calc(5 * var(--spacing__rhythmUnit));
}
#footer nav {
  justify-content: space-between;
  width: 360px;
}
#closer {
  font-family: var(--typography__font--heading);
  margin: calc(2 * var(--spacing__rhythmUnit)) auto calc(4 * var(--spacing__rhythmUnit));
}
#closer > * {
  font-size: calc(1.5 * var(--spacing__rhythmUnit));
  margin-right: calc(4 * var(--spacing__rhythmUnit));
}
#closer > .fl-right {
  float: right;
  margin-right: 0;
}
.desktop div,
.desktop > a,
.desktop > span {
  display: inline-block;
  padding: 0 calc(4 * var(--spacing__rhythmUnit));
  position: relative;
}
.desktop .has-sub:hover {
  cursor: default;
}
.desktop .has-sub:hover .sub {
  background: #fff;
  display: flex;
  left: calc(-3 * var(--spacing__rhythmUnit));
  padding: calc(3 * var(--spacing__rhythmUnit)) calc(6 * var(--spacing__rhythmUnit)) calc(3 * var(--spacing__rhythmUnit)) calc(5 * var(--spacing__rhythmUnit));
  position: absolute;
  top: calc(5 * var(--spacing__rhythmUnit));
  white-space: nowrap;
}
.desktop .sub {
  box-shadow: 0 8px 24px rgb(0 0 0 / 13%);
  display: none;
  flex-direction: row;
  vertical-align: top;
}
.desktop .sub .column {
  padding: 0 calc(8 * var(--spacing__rhythmUnit)) 0 0;
}
.desktop .sub a {
  display: block;
  font-family: var(--typography__font--heading);
  font-size: var(--typography__fontSize--xxs);
  font-weight: 600;
  margin-bottom: var(--spacing__vertical--2);
  text-align: left;
}
.desktop .sub a small {
  display: block;
  font-family: var(--typography__font--default);
  font-weight: normal;
  line-height: var(--spacing__rhythmUnit);
}
.mobile .menu {
  display: none;
}
.btn {
  border-radius: 30px;
  display: inline-block;
  font-family: var(--typography__font--heading);
  font-weight: 600;
  line-height: calc(5 * var(--spacing__rhythmUnit));
  margin: 0;
  padding: 0 calc(3 * var(--spacing__rhythmUnit));
}
.btn:hover {
  cursor: pointer;
}
.btn__primary {
  background: var(--purple);
  color: #fff;
  -webkit-appearance: none;
  line-height: calc(5 * var(--spacing__rhythmUnit));
    padding: 0 calc(3 * var(--spacing__rhythmUnit));
}
.btn__primary:hover {
  background: var(--purple-dark);
}
.btn__primary--disabled {
  cursor: default;
  opacity: .5;
}
.btn__secondary {
  border: var(--border__width--default) #300A75 solid;
  color: #300A75;
  line-height: calc(4.5 * var(--spacing__rhythmUnit) - var(--border__width--default));
  -webkit-appearance: none;
}
.btn__secondary:hover {
  background: var(--purple-dark);
  border-color: var(--purple-dark);
  color: #fff;
}
.btn__secondary--black {
  border-color: #000;
  color: #000;
}
.btn__secondary--black:hover {
  background: #000;
  color: white;
}
.btn:disabled,
.btn--disabled {
  background: var(--gray);
  cursor: not-allowed;
  border-color: var(--gray);
}
.lds-ellipsis {
  display: inline-block;
  position: relative;
  width: 64px;
  height: 28px;
}
.lds-ellipsis div {
  position: absolute;
  top: 16px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: #fff;
  animation-timing-function: cubic-bezier(0, 1, 1, 0);
}
.lds-ellipsis div:nth-child(1) {
  left: 6px;
  animation: lds-ellipsis1 0.6s infinite;
}
.lds-ellipsis div:nth-child(2) {
  left: 6px;
  animation: lds-ellipsis2 0.6s infinite;
}
.lds-ellipsis div:nth-child(3) {
  left: 26px;
  animation: lds-ellipsis2 0.6s infinite;
}
.lds-ellipsis div:nth-child(4) {
  left: 45px;
  animation: lds-ellipsis3 0.6s infinite;
}
@keyframes lds-ellipsis1 {
  0% {
    transform: scale(0);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes lds-ellipsis3 {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(0);
  }
}
@keyframes lds-ellipsis2 {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(19px, 0);
  }
}
@keyframes slideInFromBottom {
  0% {
    transform: translateY(50px);
  }
  100% {
    transform: translateX(0);
  }
}
@keyframes slideFromLeftToRight {
  0% {
    transform: translateX(100px);
  }
  100% {
    transform: translateX(0);
  }
}
@keyframes slideFromRightToLeft {
  0% {
    transform: translateX(-130px);
  }
  100% {
    transform: translateX(0);
  }
}


.type--app .single-trust p,
.type--app .single-trust img,
.type--app #hero h1,
.type--app #hero .subline,
.type--app #hero .btn {
  animation: 1s cubic-bezier(0.77, 0, 0.175, 1) 0s 1 slideInFromBottom;
}
.type--app #hero .subline {  animation-delay: 30ms; }
.type--app #hero .btn {  animation-delay: 90ms; }
.type--app .single-trust p { animation-delay: 120ms; }
.type--app .single-trust img { animation-delay: 140ms; }
#hero {
  background: url(../img/hero-bg.png) no-repeat right top;
  background-size: 675px;
  height: calc(66 * var(--spacing__rhythmUnit));
  margin-top: calc(5 * var(--spacing__rhythmUnit));
}
.post #hero {
  background: url(../img/hero-bg.png) no-repeat right 48%;
    background-size: 600px 355px;
    height: calc(44 * var(--spacing__rhythmUnit));
    margin-top: calc(3 * var(--spacing__rhythmUnit));
    background-clip: content-box;
    
}
.post #hero h1,
.post #hero .subline {
  margin: inherit;
  max-width: 800px;
}
#hero.style--orange {
  background-image: url(../img/hero-bg-orange.png);
}
#hero.style--magenta {
  background-image: url(../img/hero-bg-magenta2.png);
}
#hero h1 {
  color: var(--purple-dark);
  font-family: var(--typography__font--heading);
  font-size: var(--typography__fontSize--xl);
  font-weight: 800;
  letter-spacing: -2px;
  line-height: calc(0.72 * 1.618em);
  margin: 0 auto calc(2 * var(--spacing__rhythmUnit)) auto;
  padding-top: calc(16 * var(--spacing__rhythmUnit) );
}
#hero .btn:nth-of-type(1) {
  margin-right: var(--spacing__rhythmUnit);
}

#hero.hero--product {
  height: auto;
  padding-top: calc(6 * var(--spacing__rhythmUnit));
  width: calc(var(--grid__width) + (13 * var(--spacing__rhythmUnit)));
}
#hero.hero--product h1 {
  margin-bottom: calc(6 * var(--spacing__rhythmUnit));
}
.hero--product .product-demo {
  box-shadow: 0 6px 16px 0 rgba(0,0,0,0.20);
  margin-left: calc(-4 * var(--spacing__rhythmUnit));
  width: calc(var(--grid__width) + (8 * var(--spacing__rhythmUnit)));
}
.hero--product .product-demo__browser,
.hero--product .product-demo__img {
}

.hero--product .product-demo video {
  display: block;
  width: 100%;
}
.hero--product .product-demo__img {
  background: #FFFFFF;
}
#flagship {
  margin: calc(15 * var(--spacing__rhythmUnit)) auto;
}
#flagship .visual-demo {
  display: flex;
  justify-content: center;
}
#flagship .visual-demo__large {
  flex-direction: column;
}
#flagship .product-demo {
  margin-left: calc(-4 * var(--spacing__rhythmUnit));
}
.full-width {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  left: calc(-1 * ((100vw - var(--grid__width)) / 2));
  position: relative;
  width: 100vw;
}
.full-width--border {
  /* background: #fcfcfc; */
  border-bottom: 1px var(--gray) solid;
  border-top: 1px var(--gray) solid;
  margin: 8em 0;
}
.full-width__middle {
    max-width: var(--grid__width);
    position: relative;
}
#stats {
  align-items: flex-start;
  
  display: flex;
  font-family: var(--typography__font--default);
  flex-wrap: wrap;
  justify-content: space-around;
  margin: 4em 0;
}
#stats .stat {
  margin: 2em 0;
  width: 30%;
}
#stats .stat p.title {
  font-size: var(--typography__fontSize--xl);
  font-weight: 800;
  letter-spacing: -1px;
  line-height: 1.618em;
  margin: 0;
}
#stats .stat p.subtitle {
  font-size: var(--typography__fontSize--md);
  line-height: 1.4em;
  margin: 0;

}
#stats .stat p.subtitle {
  font-weight: 600;
}
#stats .stat p.subtitle strong {
  display: block;
  font-weight: 800;
}
#pitch {
  margin: 4em 0;
  max-width: 700px;
}
#pitch .title {
  font-size: var(--typography__fontSize--xl);
  font-weight: 700;
  letter-spacing: -1px;
  line-height: 1.2em;
  margin: 0 0 1rem;
}
#pitch .desc {
  font-size: var(--typography__fontSize--md);
  font-weight: 500;
  line-height: 1.4em;
  margin: 0 0 1rem;
}
#pitch .btn {

}
.product-demo {
  box-shadow: 0 6px 16px 0 rgba(0,0,0,0.20);
  border-radius: 6px 6px 0 0;
  display: table;
  /* width: calc(var(--grid__width)); */
}
.product-demo__browser {
  background: var(--gray);
  border-radius: 6px 6px 0 0;
  display: block;
  height: calc(2 * var(--spacing__rhythmUnit));
  width: 100%;
}
.product-demo__img {
  display: none;
  height: auto;
  margin-bottom: calc(-0.5 * var(--spacing__rhythmUnit));
  max-width: calc(var(--grid__width) - 400px);
  width: auto;
}
.product-demo__img.active {
  display: block;
  image-rendering: -webkit-optimize-contrast;
  transform: translateZ(0);
}
.product-reasons {
  font-family: var(--typography__font--default);
  line-height: calc(3 * var(--spacing__rhythmUnit));
  margin-left: calc(6 * var(--spacing__rhythmUnit));
  margin-top: calc(4 * var(--spacing__rhythmUnit));
  max-width: 310px;
}
.product-reasons strong {
  font-family: var(--typography__font--heading);
  font-size: calc(2.2 * var(--spacing__rhythmUnit));
  font-weight: 600;
}
.product-reasons__below h2.arrow-1:before {
  transform: rotate(90deg);
}
.product-reasons h2 {
  font-size: calc(2 * var(--spacing__rhythmUnit));
  font-weight: 400;
  margin: calc(4 * var(--spacing__rhythmUnit)) auto;
  position: relative;
}
.product-reasons h2:hover {
  cursor: pointer;
}
/*#flagship .product-reasons h2:hover:before,*/
.product-reasons h2.active:before {
  display: block;
}
.product-reasons h2:before {
  content: '';
  display: none;
  height: 22px;
  left: calc(-10 * var(--spacing__rhythmUnit));
  position: absolute;
  top: var(--spacing__rhythmUnit);
  width: 64px;
}
.product-reasons h2.arrow-1:before {
  background: url(../img/arrow-left-1.svg) no-repeat;
}
.product-reasons h2.arrow-2:before {
  background: url(../img/arrow-left-2.svg) no-repeat;
  width: 71px;
}
.product-reasons h2.arrow-3:before {
  background: url(../img/arrow-left-3.svg) no-repeat;
  height: 31px;
  width: 71px;
}
.product-payoffs {
  display: flex;
  justify-content: space-evenly;
  margin-top: calc(24 * var(--spacing__rhythmUnit));
}
.product-payoffs .product-payoffs__payoff {
  flex: 1;
  padding: 0 2em;
}
.product-payoffs .payoff-title {
  font-family: var(--typography__font--default);
  font-weight: 800;
  line-height: calc(3 * var(--spacing__rhythmUnit));
}
.product-payoffs .payoff-desc {
  font-family: var(--typography__font--default);
  line-height: calc(3 * var(--spacing__rhythmUnit));
}
/* ==========================================================================
   Product Tour
   ========================================================================== */
#productTour {
  padding: calc(8 * var(--spacing__rhythmUnit)) 0;
}
/* ==========================================================================
   Hero
   ========================================================================== */
#hero.hero--form {
  height: calc(76 * var(--spacing__rhythmUnit));
}
/* ==========================================================================
   Hero: Form
   ========================================================================== */
.hero--form {
  display: flex;
  justify-content: space-between;
}
.hero--form .text {
  width: calc(50 * var(--spacing__rhythmUnit));
}
.hero--form .text .subline {
  line-height: calc(3 * var(--spacing__rhythmUnit));
}
.hero--form form {
  background: #fff;
  border-radius: calc(2 * var(--spacing__rhythmUnit));
  box-sizing: border-box;
  box-shadow: 0 6px 16px 0 rgba(0,0,0,0.20);
  height: calc(68 * var(--spacing__rhythmUnit));
  margin-right: calc(8 * var(--spacing__rhythmUnit));
  margin-top: calc(8 * var(--spacing__rhythmUnit));
  padding: calc(4 * var(--spacing__rhythmUnit));
  text-align: center;
  width: calc(45 * var(--spacing__rhythmUnit));
}
.hero--form .desc {
  font-family: var(--typography__font--heading);
  font-size: var(--typography__fontSize--xxs);
  font-weight: 400;
  line-height: calc(3 * var(--spacing__rhythmUnit));
  margin-top: 0;
  text-align: left;
}
.hero--form label,
.overlay--form label {
  font-family: var(--typography__font--default);
  font-size: calc(0.8 * var(--typography__fontSize--xxs));
  display: block;
  margin-bottom: var(-spacing__rhythmUnit);
  text-align: left;
}
.hero--form input[type=text],
.hero--form textarea,
.overlay--form input[type=text],
.overlay--form textarea {
  border: 2px #D8DCDE solid;
  border-radius: calc(0.5 * var(--spacing__rhythmUnit));
  box-sizing: border-box;
  font-size: var(--typography__fontSize--xxs);
  line-height: calc(3 * var(--spacing__rhythmUnit));
  margin-bottom: calc(2 * var(--spacing__rhythmUnit));
  padding: var(--spacing__rhythmUnit);
  width: 100%;
}
.hero--form textarea,
.overlay--form textarea {
  height: calc(22 * var(--spacing__rhythmUnit));
  line-height: 1.5em;
}
.hero--form .btn,
.overlay--form .btn {
  border: 0;
  font-size: var(--typography__fontSize--xxs);
  margin: 0 auto;
}
.overlay--form hr {
  left: inherit;
  height: var(--spacing__rhythmUnit);
  margin: calc(6 * var(--spacing__rhythmUnit)) 0;
  width: 100%;
}
.overlay--form img {
  height: calc(12 * var(--spacing__rhythmUnit));
  margin: calc(5 * var(--spacing__rhythmUnit)) calc(2 * var(--spacing__rhythmUnit)) 0;
  width: auto;
  vertical-align: middle;
}
.overlay--form img:nth-of-type(even) {
  height: calc(2 * var(--spacing__rhythmUnit));
  width: auto;
  vertical-align: middle;
}



/* ==========================================================================
   Product: Single feature
   ========================================================================== */
.product-single-feature {
  display: flex;
  justify-content: center;
  margin: calc(12 * var(--spacing__rhythmUnit)) calc(-8 * var(--spacing__rhythmUnit)) calc(24 * var(--spacing__rhythmUnit));
}
.product-single-feature .desc {}
.product-single-feature .cta {}
.product-single-feature .product-demo {
  margin-left: 4em;
}
.product-single-feature .product-demo__browser {}
.product-single-feature .product-demo__img {}
.product-single-feature:nth-child(odd) {
  flex-direction: row-reverse;
}
.product-single-feature:nth-child(even) {
  flex-direction: row;
}
.product-single-feature:nth-child(odd) .product-reasons {
  margin-left: 0;
  margin-right: calc(6 * var(--spacing__rhythmUnit));
}

.product-single-feature:nth-child(even) .product-reasons h2:before {
  display: block;
}

.product-single-feature:nth-child(odd) .product-reasons h2:before {
  display: none;
}
.product-single-feature:nth-child(odd) .product-reasons h2:after {
  display: block;
}
.product-single-feature:nth-child(odd) .product-reasons h2:after {
  background: url(../img/arrow-left-1.svg) no-repeat;
  content: '';
  height: 22px;
  right: calc(-10 * var(--spacing__rhythmUnit));
  transform: rotate(180deg);
  position: absolute;
  top: var(--spacing__rhythmUnit);
  width: 64px;
}
/* ==========================================================================
   Full page overlay
   ========================================================================== */

.full-page-overlay {
  align-items: center;
  display: flex;
  height: 100vh;
  left: 0;
  position: fixed;
  top: 0;
  width: 100vw;
  z-index: 2100;
}
.full-page-overlay .bg {
  background: rgb(0,0,0,.6);
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
}

.overlay--form {
  background: #fff;
  border-radius: calc(2 * var(--spacing__rhythmUnit));
  box-sizing: border-box;
  box-shadow: 0 6px 16px 0 rgba(0,0,0,0.20);
  margin: 0 auto;
  padding: calc(8 * var(--spacing__rhythmUnit)) calc(12 * var(--spacing__rhythmUnit));
  position: relative;
  text-align: center;
  width: calc(120 * var(--spacing__rhythmUnit));
  z-index: 200;
}
.overlay--form .esc {
  cursor: pointer;
  position: absolute;
  right: calc(3 * var(--spacing__rhythmUnit));
  top: calc(3 * var(--spacing__rhythmUnit));
}
.overlay--form .heading {
  font-family: var(--typography__font--heading);
  font-size: var(--typography__fontSize--sm);
  font-weight: 800;
  line-height: var(--typography__fontSize--sm);
}
.overlay--form .desc {
  font-family: var(--typography__font--heading);
  font-size: var(--typography__fontSize--xxs);
  font-weight: 400;
  line-height: calc(3 * var(--spacing__rhythmUnit));
  margin: 0 auto calc(3 * var(--spacing__rhythmUnit));
  max-width: calc(76 * var(--spacing__rhythmUnit));
}
.overlay--form .half {
  display: inline-block;
  width: calc(50% - var(--spacing__rhythmUnit)) !important;
}

.overlay--form .half:nth-child(odd) {
  margin-right: 12px;
}
.overlay--form .center {
  display: block;
  margin: 0 auto;
  text-align: center;
}
.overlay--form .btn {
  margin-top: calc(3 * var(--spacing__rhythmUnit));
}
.overlay--form .field--helper {
  content: '.zendesk.com';
}
/* ==========================================================================
   Other reusable elems
   ========================================================================== */
.single-payoff {
  padding: calc(8 * var(--spacing__rhythmUnit)) 0 calc(10 * var(--spacing__rhythmUnit));
}
.single-payoff p {
  font-family: var(--typography__font--heading);
  font-size: var(--typography__fontSize--lg);
  font-weight: 600;
  line-height: 1em;
  text-align: center;
}
.single-payoff img {
  margin-top: calc(3 * var(--spacing__rhythmUnit));
  max-width: 100%;
}
.single-trust {
  margin-bottom: 6em;
}
.single-trust p {
  font-size: var(--typography__fontSize--xl);
  font-weight: 900;
  letter-spacing: -2px;
  line-height: 1em;
  text-align: center;
}
.single-trust p span {
  color: var(--purple-dark);
}
.single-trust .customer-logos {
  display: flex;
  justify-content: space-around;
}
.single-trust .customer-logos img {
  height: 30px;
}
.single-features {
  border-radius: var(--spacing__rhythmUnit);
  background: var(--purple);
  margin: 2em -4em;
  overflow: hidden;
  padding: 2em 0 !important;
}
.single-features:first-of-type {
  margin: 4em 0;
}
.feature {
  display: flex;
  justify-content: space-around;
}
.feature:nth-of-type(odd) {

  animation: 45s linear 0s 1 slideFromLeftToRight;
  animation-iteration-count: infinite;
animation-direction: alternate;
}
.feature:nth-of-type(even) {

  animation: 45s linear 0s 1 slideFromRightToLeft;
  animation-iteration-count: infinite;
animation-direction: alternate;
}
.feature:nth-of-type(odd) {
  margin-left: -125px;
}
.feature p {
  background-color: var(--purple-dark);
  border-radius: calc(2 * var(--spacing__rhythmUnit));
  box-sizing: content-box;
  color: #bbb;
  display: flex;
  font-weight: 600;
  line-height: 1.5rem;
  margin: 0.5em 1em;
  padding: 1em 2em;
  height: fit-content;
  width: fit-content;
  /* max-width: 361px; */
  /* overflow-y: hidden; */
  min-height: 4rem;
  /* align-items: center; */
  flex-direction: column;
  justify-content: center;
  min-width: 250px;
}
.feature strong {
  color: white;
  white-space: nowrap;
}
hr {
  border: 0;
  background: #f7f7f7;
  height: 10px;
  left: calc(-1 * ((100vw - var(--grid__width)) / 2));
  position: relative;
  width: 100vw;
}
.u-hidden {
  display: none;
}
.u-half {
  width: 50%;
}
.u-third {
  width: 40%;
}
#pricing {
  display: flex;
  justify-content: space-between;
  flex: auto;
  padding: calc(15 * var(--spacing__rhythmUnit)) 0;
  order: 2;
  transition: 1s all linear;
}
#pricing .price-block::before {
  background: url(../img/pricing-bg.png) no-repeat var(--spacing__rhythmUnit);
  background-size: contain;
  content: '';
  color: #fff;
  display: block;
  left: 0;
  position: absolute;
  top: 0;
  height: 100%;
  width: 100%;
  z-index: -100;
}
#pricing .price-block:nth-of-type(1)::before,
#pricing .price-block:nth-of-type(3)::before {
  filter: grayscale(20%);
  opacity: 0.9;
  transform: scale(0.88);
}
#pricing .price-block:nth-of-type(1)::before {

  transform: rotate(177deg);
}
#pricing .price-block:nth-of-type(3)::before {
  transform: rotate(3deg);
}
#pricing .price-block:nth-of-type(1) .btn,
#pricing .price-block:nth-of-type(3) .btn {
  filter: grayscale(40%);
  opacity: 0.9;
}
#pricing .price-block:nth-of-type(2)::before{
  transform: scale(1.11);
}
#pricing .price-block {
  color: #fff;
  flex-grow: 1;
  height: auto;
  padding: calc(8 * var(--spacing__rhythmUnit)) 0;
  text-align: center;
  flex-basis: calc(36 * var(--spacing__rhythmUnit));
  flex-grow: 0;
  flex-shrink: 0;
  position: relative;
}

#pricing .price-desc {
  flex-grow: 1;
  margin: calc(7 * var(--spacing__rhythmUnit)) 0 0 calc(10 * var(--spacing__rhythmUnit));
}
#pricing .amount {
  display: block;
  font-family: var(--typography__font--heading);
  font-size: var(--typography__fontSize--xl);
  font-weight: 800;
  line-height: 1em;
}
#pricing .contract {
  display: block;
  font-family: var(--typography__font--heading);
  font-size: var(--typography__fontSize--sm);
  font-weight: 800;
  line-height: calc(5 * var(--spacing__rhythmUnit));
}
#pricing .btn {
  box-shadow: 0 2px 11px 0 rgba(0,0,0,0.50);
  margin: calc(3 * var(--spacing__rhythmUnit)) auto calc(5 * var(--spacing__rhythmUnit));
  padding: 0 calc(7 * var(--spacing__rhythmUnit));
}

#pricing .price-desc .price-heading {
  font-family: var(--typography__font--heading);
  font-size: var(--typography__fontSize--md);
  font-weight: 800;
  line-height: 1em;
  margin: 1rem auto;
}
#pricing .price-desc .price-heading__sub {
  font-size: var(--typography__fontSize--xs);
}
#pricing .price-desc__text {
  font-family: var(--typography__font--default);
  font-size: var(--typography__fontSize--xxs);
  line-height: 1em;
}
#pricing .price-desc__text p {
  line-height: calc(3 * var(--spacing__rhythmUnit));
  margin: 1em 0;
  max-width: calc(50 * var(--spacing__rhythmUnit));
}

#pricing.pricing__plans .amount {
  font-size: var(--typography__fontSize--lg);
  margin-top: calc(2 * var(--spacing__rhythmUnit));
}
#pricing.pricing__plans .contract {
  font-size: var(--typography__fontSize--xxs);
}
#pricing.pricing__plans .btn {
  margin-bottom: calc(2 * var(--spacing__rhythmUnit));
}

/* TODO: Tailormade scrollbar x on windows */
/* TODO: Remove autocomplete on input fields */
#tailormadeZendesk {
  background: url(../img/bg-purple-heart.svg) no-repeat center;
  background-size: cover;
  color: #fff;
  height: auto;
  left: calc(-1 * ((100vw - var(--grid__width)) / 2));
  position: relative;
  width: 100vw;
}
#tailormadeZendesk .tailormade-heading,
#tailormadeZendesk .tailormade-cta {
  align-items: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
#tailormadeZendesk .tailormade-heading {
  padding: calc(8 * var(--spacing__rhythmUnit)) 0;
}
#tailormadeZendesk .tailormade-cta {
  padding-bottom: calc(10 * var(--spacing__rhythmUnit));
}
#tailormadeZendesk .tailormade-heading .tailormade-heading__image {
  height: calc(6 * var(--spacing__rhythmUnit));
  /* margin-right: calc(4 * var(--spacing__rhythmUnit)); */
}
#tailormadeZendesk .tailormade-heading .tailormade-heading__text {
  font-family: var(--typography__font--heading);
  font-size: var(--typography__fontSize--sm);
  font-weight: 500;
  line-height: 1em;
  margin-bottom: 0;
}
.tailormade-heading__p {
  display: block;
}

#tailormadeZendesk .tailormade-cta .btn__primary {
  background: #fff;
  color: var(--purple);
}
#tailormadeZendesk .tailormade-cta .btn__primary:hover {
  background: rgba(255,255,255,.8);
}
#tailormadeZendesk .tailormade-cta .btn__secondary {
  border-color: #fff;
  color: #fff;
}
#tailormadeZendesk .tailormade-cta .btn__secondary:hover {
  background: rgba(255,255,255,.8);
  border-color: transparent;
  color: var(--purple);
}
#tailormadeZendesk .tailormade-cta .btn:nth-of-type(1) {
  margin-right: var(--spacing__rhythmUnit);
}

#singleHighlight {
  background: url(../img/bg-pencil.jpg) no-repeat center top;
  background-size: cover;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  left: calc(-1 * ((100vw - var(--grid__width)) / 2));
  padding: calc(12 * var(--spacing__rhythmUnit)) 0;
  /* padding: calc(12 * var(--spacing__rhythmUnit)) 0 calc(20 * var(--spacing__rhythmUnit)) 50%; */
  position: relative;
  width: 100vw;
}
#singleHighlight .single-highlight-group {
  left: calc(-12 * var(--spacing__rhythmUnit));
  max-width: var(--grid__width);
  position: relative;
}
#singleHighlight .single-highlight-heading {
  font-family: var(--typography__font--heading);
  font-size: var(--typography__fontSize--lg);
  font-weight: 800;
  line-height: 1em;
}
#singleHighlight .single-highlight-desc__text {
  line-height: calc(3 * var(--spacing__rhythmUnit));
  max-width: calc(80 * var(--spacing__rhythmUnit));
}

#footer {
  align-items: center;
  background: var(--taupe);
  display: flex;
  justify-content: space-between;
  left: calc(-1 * ((100vw - var(--grid__width)) / 2));
  padding: calc(3 * var(--spacing__rhythmUnit)) 0;
  position: relative;
  width: 100vw;
}
#footer .company-name {
  margin-left: calc(1 * ((100vw - var(--grid__width)) / 2));
  width: calc(var(--grid__width) - 360px);
}
#footer .company-name img {
  height: calc(2 * var(--spacing__rhythmUnit));
}
#footer nav {
  margin-right: calc(1 * ((100vw - var(--grid__width)) / 2));
}
#footer.story {
  align-content: space-between;
  flex-direction: row;
}
#footer.story nav {
  margin-left: calc(1 * ((100vw - var(--grid__width)) / 2));
  width: 100vw;
}
#footer.story .column {
  display: block;
  min-width: 300px;
}
#footer.story p {
  font-size: var(--typography__fontSize--xss);
  font: var(--typography__font--heading);
  font-weight: 600;
}
#footer.story a {
  display: block;
  font: var(--typography__font--default);
  font-size: var(--typography__fontSize--xxs);
  font-weight: normal;
  line-height: 1.51rem;
  margin: var(--spacing__rhythmUnit) 0;
  padding: 0;
}

#origin {
  font-family: var(--typography__font--default);
  font-size: var(--typography__fontSize--xxs);
  font-weight: 300;
  line-height: 1em;
  margin: calc(6 * var(--spacing__rhythmUnit)) auto;
  text-align: center;
}
#trialApp {
  width: calc(80 * var(--spacing__rhythmUnit))
}
#trialApp .btn__primary {
  margin: 0;
}
#trialApp label {
  margin-bottom: calc(2 * var(--spacing__rhythmUnit));
}
.nav-fixed+.nav-sticky-marker {
  min-height: 60px;
}
.nav-fixed {
  background: #fff;
  box-shadow: 0 8px 24px rgba(0,0,0,.13);
  box-sizing: border-box;
  left: 0;
  padding: 1em calc(calc(100vw - 1136px) / 2);
  position: fixed;
  top: 0;
  transform: translateZ(0);
  width: 100vw;
  z-index: 1000;
}
/* ==========================================================================
   Type: App

   ========================================================================== */
   .type--app {}
   .type--app .product-demo__img,
   .type--app .product-reasons {
     max-width: 100%;
   }
   
/* ==========================================================================
   Type: Story

   ========================================================================== */
.type--story {}
.type--story .subline {
  color: var(--purple);
  font-family: var(--typography__font--default);
  font-size: var(--typography__fontSize--xxs);
  margin: calc(2 * var(--spacing__rhythmUnit)) 0 0;
  text-transform: uppercase;
}
.type--story #hero .subline+h1 {
  padding-top: 0;
}
.type--story #hero h1 {
  font-size: var(--typography__fontSize--xxl);
  margin: calc(2 * var(--spacing__rhythmUnit)) 0 calc(3 * var(--spacing__rhythmUnit));

}
#hero.hero--product {
  margin-top: calc(8 * var(--spacing__rhythmUnit));
  min-height: 500px;
}
#hero .intro {
  font-size: var(--typography__fontSize--xs);
  line-height: 1.618em;
  margin: calc(3 * var(--spacing__rhythmUnit)) 0;
  max-width: 50%;
}
.type--story .product-reasons {
  max-width: 380px;
}
.type--story .product-reasons h1,
.type--story .product-reasons h2,
.type--story .product-reasons h3 {
  color: var(--purple-dark);
  font-size: var(--typography__fontSize--lg);
  line-height: calc(1.218 * var(--typography__fontSize--lg));
}
.type--story .product-reasons strong {
  color: var(--purple-dark);
  font-size: var(--typography__fontSize--xs);
  line-height: calc(1.218 * var(--typography__fontSize--xs));

}
.type--story .product-reasons div strong {
  font-size: var(--typography__fontSize--sm);

}
.type--story .product-single-feature .product-demo {
  margin: 0;
}
.type--story .product-single-feature:nth-child(odd) {
  flex-direction: row;
}
.type--story .product-single-feature:nth-child(even) {
  flex-direction: row-reverse;
}

.type--story .product-single-feature:nth-child(odd) .product-reasons {
  margin-right: 0;
  margin-left: calc(6 * var(--spacing__rhythmUnit));
}
.type--story .product-single-feature:nth-child(even) .product-reasons {
  margin-left: 0;
  margin-right: calc(6 * var(--spacing__rhythmUnit));
}
.type--story .product-single-feature .product-reasons h2:before,
.type--story .product-single-feature .product-reasons h2:after {
  display: none;
}
nav.mobile {
  display: none;
}
/* ==========================================================================
   Mobile adjustments
   ========================================================================== */
 
@media (max-width: 1280px) {}
@media (max-width: 1024px) {
  body {
    margin: calc(0 * var(--spacing__vertical--1)) auto 0;
  }
  .full-width {
    left: 0;
    margin: 2em 0;
  }
  .hidden-xs {
    display: none;
  }
  nav.mobile {
    display: inline-flex;
  }
  .hamburger {
    font: inherit;
    display: inline-flex;
    align-items: center;
    overflow: visible;
    margin: 0;
    padding: 0;
    cursor: pointer;
    transition-timing-function: linear;
    transition-duration: .15s;
    transition-property: opacity,filter;
    text-transform: none;
    color: inherit;
    border: 0;
    background-color: transparent;
}

.hamburger.is-active:hover,.hamburger:hover {
    opacity: 1
}

.hamburger.is-active .hamburger-inner,.hamburger.is-active .hamburger-inner:after,.hamburger.is-active .hamburger-inner:before {
   
}

.hamburger-box {
    position: relative;
    display: inline-block;
    width: 24px;
    height: 20px;
}

.hamburger-inner {
    top: 50%;
    display: block;
    margin-top: -2px
}

.hamburger-inner,.hamburger-inner:after,.hamburger-inner:before {
    position: absolute;
    width: 24px;
    height: 2px;
    transition-timing-function: ease;
    transition-duration: .15s;
    transition-property: transform;
    border-radius: 2px;
    background-color: #000
}

.hamburger-inner:after,.hamburger-inner:before {
    display: block;
    content: ""
}

.hamburger-inner:before {
    top: -8px
}

.hamburger-inner:after {
    bottom: -8px
}

.hamburger--spin .hamburger-inner {
  transition-timing-function: cubic-bezier(.55,.055,.675,.19);
  transition-duration: .22s
}

.hamburger--spin .hamburger-inner:before {
  transition: top .1s ease-in .25s,opacity .1s ease-in
}

.hamburger--spin .hamburger-inner:after {
  transition: bottom .1s ease-in .25s,transform .22s cubic-bezier(.55,.055,.675,.19)
}

.hamburger--spin.is-active .hamburger-inner {
  transition-delay: .12s;
  transition-timing-function: cubic-bezier(.215,.61,.355,1);
  transform: rotate(225deg)
}

.hamburger--spin.is-active .hamburger-inner:before {
  top: 0;
  transition: top .1s ease-out,opacity .1s ease-out .12s;
  opacity: 0
}

.hamburger--spin.is-active .hamburger-inner:after {
  bottom: 0;
  transition: bottom .1s ease-out,transform .22s cubic-bezier(.215,.61,.355,1) .12s;
  transform: rotate(-90deg)
}

.hamburger--spin-r .hamburger-inner {
  transition-timing-function: cubic-bezier(.55,.055,.675,.19);
  transition-duration: .22s
}

.hamburger--spin-r .hamburger-inner:before {
  transition: top .1s ease-in .25s,opacity .1s ease-in
}

.hamburger--spin-r .hamburger-inner:after {
  transition: bottom .1s ease-in .25s,transform .22s cubic-bezier(.55,.055,.675,.19)
}

.hamburger--spin-r.is-active .hamburger-inner {
  transition-delay: .12s;
  transition-timing-function: cubic-bezier(.215,.61,.355,1);
  transform: rotate(-225deg)
}

.hamburger--spin-r.is-active .hamburger-inner:before {
  top: 0;
  transition: top .1s ease-out,opacity .1s ease-out .12s;
  opacity: 0
}

.hamburger--spin-r.is-active .hamburger-inner:after {
  bottom: 0;
  transition: bottom .1s ease-out,transform .22s cubic-bezier(.215,.61,.355,1) .12s;
  transform: rotate(90deg)
}
  .container {
    overflow-x: hidden;
    overflow-y: scroll;
    width: 100%;
  }
  .container > header,
  .container > section {
    padding: 0 calc(3 * var(--spacing__rhythmUnit));
  }

  header {
    flex-wrap: wrap;
    
    position: relative;
  }
  nav.desktop {
    background-color: var(--taupe);
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    left: 0;
    height: 100vh;
    justify-content: flex-start;
    margin-bottom: calc(3 * var(--spacing__vertical--3));
    overflow-y: scroll;
    padding: 0 calc(3 * var(--spacing__rhythmUnit)) calc(3 * var(--spacing__vertical--3));

    overflow-y: scroll;
    opacity: 0;
    position: absolute;
    transition: opacity 0.3s linear, visibility 0.5s linear;
    top: 60px;
    visibility: hidden;
    width: 100vw;
    z-index: 1000;
  }
    nav.desktop .has-sub,
    nav.desktop a:not(.btn) {
      border-bottom: 1px #e2e2e2 solid;
      font-size: var(--typography__fontSize--xs);
      line-height: calc(2 * 1.618em);
      margin: 0;
      padding: 0;
    }
    nav.desktop .has-sub::after {
      
        content: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20185.34%20185.34%22%20xml%3Aspace%3D%22preserve%22%3E%3Cpath%20style%3D%22fill%3A%23010002%22%20d%3D%22M51.7%20185.34a10.72%2010.72%200%200%201-7.6-18.32l74.37-74.35L44.1%2018.32A10.72%2010.72%200%201%201%2059.3%203.15l81.94%2081.93c4.2%204.2%204.2%2010.99%200%2015.17L59.29%20182.2a10.68%2010.68%200%200%201-7.58%203.15z%22%2F%3E%3C%2Fsvg%3E');
        display: inline-block;
        width: 16px;
        height: auto;
        right: 0;
        top: 0;
        position: absolute;
        transform-origin: 50%; 
        transform: rotate(90deg);
        transition: transform .3s ease-out;
    }
    nav.desktop .has-sub.is-open::after {
        
          transform: rotate(270deg);
      }
    
    nav.desktop a {
      font-size: var(--typography__fontSize--xs);
    }
    nav.desktop span {
      margin: var(--spacing__vertical--3) 0;
      padding: 0;
      text-align: center;
    }
    nav.desktop .sub {
      background: transparent !important;
      box-shadow: none;
      box-sizing: border-box;
      display: none !important;
      left: 0 !important;
      padding: 0 !important;
      position: relative !important;
      top: 0 !important;
      white-space: unset !important;
    }
    nav.desktop .sub.is-open {
      display: block !important;
      margin-bottom: var(--spacing__vertical--1);
    }
    nav.desktop .column > small {
      display: block;
      font-size: var(--typography__fontSize--xxxs);
      line-height: 1.618rem;
      font-weight: normal;
      margin-top: var(--spacing__vertical--2);
    }
    nav.desktop .sub .column {
      box-sizing: border-box;
      display: block;
      padding: 0 var(--spacing__vertical--1);
      width: 100%;
    }
    nav.desktop a {
      border: 0;
      display: inline-block;
      font-size: var(--typography__fontSize--xs);
    }
    nav.desktop .sub a {
      border: 0;
      width: 100%;
    }
    nav.desktop .sub a small {
      display: none;
    }
  
  .is-active nav.desktop {
   
    opacity: 1;
    visibility: visible;
    
  }
  .nav-sticky-marker {
    min-height: 0;
  }
  .nav-fixed+.nav-sticky-marker {
    min-height: 60px;
  }
  .nav-fixed {
    background-color: hsla(0,0%,100%,.8);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    backdrop-filter: blur(20px) saturate(180%);
    box-shadow: 0 8px 24px rgba(0,0,0,.13);
    box-sizing: border-box;
    left: 0;
    position: fixed;
    top: 0;
    transform: translateZ(0);
    width: 100vw;
    z-index: 1000;
  }
  .nav-icon {
    display: block;
    margin: 1em 0;
    width: 30px;
    z-index: 1000;
  }


  .nav-icon:after,
  .nav-icon:before,
  .nav-icon div {
    background-color: #000;
    border-radius: 8px;
    content: '';
    display: block;
    height: 2px;
    margin: 6px 0;
    transition: all .2s ease-in-out;
  }
  .open .nav-icon:before {
    transform: translateY(8px) rotate(135deg);
  }
  .open .nav-icon:after {
    transform: translateY(-8px) rotate(-135deg);
  }
  .open .nav-icon div {
    transform: scale(0);
  }
  header.open {
  }

  .open .mobile .menu {
    background: #fff;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: calc(100vh - 60px);
    padding-bottom: 120px;
    width: 100vw;
    position: absolute;
    top: 60px;
    left: 0;
    z-index: 1000;
  }
  .open .mobile .menu > a,
  .open .mobile .menu > span {
    display: block;
    margin: calc(1 * var(--spacing__rhythmUnit));
    text-align: center;
  }
  .open .mobile .menu > span {
    margin: calc(4 * var(--spacing__rhythmUnit));
  }
  .open .mobile .menu .sub {
    display: none;
  }
  .open .mobile .menu .sub.open {
    display: block;
  }
  .open .mobile .menu .sub a {
    display: block;
    font-family: var(--typography__font--default);
    font-size: var(--typography__fontSize--xxs);
    font-weight: 200;
    text-align: center;
  }
  #hero {
    background-size: 100%;
    min-height: calc(35 * var(--spacing__rhythmUnit));
    height: auto;
    padding: 0 calc(5 * var(--spacing__rhythmUnit));
  }
  #hero h1 {
    color: var(--purple-dark);
    font-size: var(--typography__fontSize--lg);
    padding-top: calc(5 * var(--spacing__rhythmUnit) )
  }
  #hero.hero--product h1 {
    font-size: var(--typography__fontSize--lg);
    line-height:  var(--typography__fontSize--lg);
    padding-top: 0;
  }
  #hero .subline {
    font-size: var(--typography__fontSize--xs);
    img {
      height: var(--typography__fontSize--xs);
      width: auto;
    }
  }
  .container > header {
      padding: calc(2.5 * var(--spacing__rhythmUnit));
  }
  header .app-name h1 {
    font-weight: 600;
  }
  header .app-name img {
    height: calc(2.5 * var(--spacing__rhythmUnit));
    width: auto;
  }
  header nav {
    justify-content: flex-end;
  }
  header nav a {
    margin: 0 calc(3 * var(--spacing__rhythmUnit));
  }

  .single-trust {
    margin: calc(4*var(--spacing__vertical--3)) 0;
    p {
      font-weight: 700;
      font-size: var(--typography__fontSize--md);
      letter-spacing: -1px;
    }
    .customer-logos {
      box-sizing: border-box;
      flex-basis: 100%;
      flex-wrap: wrap;
      img {
        display: block;
        margin: var(--spacing__vertical--3);
        max-height: calc(3 * var(--spacing__vertical--3));
      }
    }
  }
  
  #stats {
    flex-direction: column;
    margin: 2em 0;
  }
  #stats .stat {
    margin: 40px;
    width: 100%;
  }
  #stats .stat p.title {
    font-size: var(--typography__fontSize--lg);
  }
  #stats .stat p.subtitle {
    font-size: var(--typography__fontSize--sm);
  }

  #pitch {
    margin: 2em 0;
  }

  #flagship .visual-demo {
    flex-direction: column;
  }
  #flagship .product-reasons h2:before {
    left: calc(-8 * var(--spacing__rhythmUnit));
    transform: rotate(90deg);
  }
  #flagship .product-demo {
    margin-left: inherit;
    width: calc(100vw - calc(6 * var(--spacing__rhythmUnit)));
  }
  .single-payoff p {
    font-size: var(--typography__fontSize--sm);
  }
  .product-single-feature:nth-child(odd),
  .product-single-feature:nth-child(even) {
    flex-direction: column;
  }
  .product-single-feature:nth-child(odd) .product-reasons,
  .product-single-feature:nth-child(even) .product-reasons {
    margin-right: 0;
    margin-left: calc(3 * var(--spacing__rhythmUnit));
  }
  .product-single-feature .product-reasons h2:after,
  .product-single-feature .product-reasons h2:before,
  .product-single-feature .btn__primary {
    display: none !important;
  }
  .product-reasons {
    margin-top: calc(1 * var(--spacing__rhythmUnit));
  }
  hr {
    left: 0;
  }
  #pricing {
    flex-direction: column;
    padding: calc(12 * var(--spacing__rhythmUnit)) calc(3 * var(--spacing__rhythmUnit));
  }
  #pricing .price-block,
  #pricing .price-desc {
    flex-basis: 0;
    margin: 0;
  }
  #pricing .price-block {
    background-position: 86%;
    background-size: 85% 100%;
    margin-bottom: calc(4 * var(--spacing__rhythmUnit));
    margin-left: calc(-4 * var(--spacing__rhythmUnit));
  }

  #tailormadeZendesk {}
    #tailormadeZendesk .tailormade-heading,
    #tailormadeZendesk .tailormade-cta {
      flex-direction: column;
      padding: 0;
    }
    #tailormadeZendesk {
      background-position-x: 35%;
      padding: calc(6 * var(--spacing__rhythmUnit)) 0;
    }
    #tailormadeZendesk .tailormade-heading .tailormade-heading__image {
      margin: 0;
    }
    #tailormadeZendesk .tailormade-heading .tailormade-heading__text {
      line-height: calc(3  * var(--spacing__rhythmUnit));
      text-align: center;
    }
    #footer {
      left: 0;
    }
  /*.product-single-feature .product-reasons:nth-child(odd) h2:after,
  .product-single-feature .product-reasons:nth-child(even) h2:before {
    transform: rotate(90deg);
  }

  /*header nav *:nth-child(2),
  header nav *:nth-child(3),*/
  #hero .btn__secondary,
  /*.product-reasons,*/
  .product-payoffs,
  /*#pricing,
  #tailormadeZendesk,
  #tailormadeZendesk .btn__primary,*/
  #singleHighlight,
  /*hr,*/
  #footer {
    display: none;
  }
  #tailormadeZendesk,
  #singleHighlight {
    width: 100%;
    box-sizing: border-box;
    left: 0;
  }
  #singleHighlight {
    padding: calc(9 * var(--spacing__rhythmUnit)) calc(6 * var(--spacing__rhythmUnit)) calc(12 * var(--spacing__rhythmUnit)) ;
  }

  #tailormadeZendesk .tailormade-heading .tailormade-heading__text {
    font-size: var(--typography__fontSize--xxs);
  }
  .overlay--form {
    border-radius: 0;
    height: 100%;
    overflow-y: scroll;
    padding: calc(2 * var(--spacing__rhythmUnit)) calc(2 * var(--spacing__rhythmUnit)) calc(14 * var(--spacing__rhythmUnit));
    width: 100%;
  }
  .product-payoffs .product-payoffs__payoff {
    margin: 0 1em;
    width: auto;
  }
  #hero.hero--product {
    background-position-y: 91%;
    box-sizing: border-box;
    padding: calc(6 * var(--spacing__rhythmUnit)) calc(2 * var(--spacing__rhythmUnit));
    width: 100vw;
  }
  .hero--product .product-demo {
    box-shadow: 0 6px 16px 0 rgba(0,0,0,0.20);
    margin-left: inherit;
    width: 100%;
}
  .product-single-feature {

      margin: 0 calc(2 * var(--spacing__rhythmUnit)) calc(6 * var(--spacing__rhythmUnit));
  }
  .product-demo {
    border-radius: 6px 6px 0 0;
    width: calc(100vw - calc(4 * var(--spacing__rhythmUnit)));
    box-sizing: border-box;
  }
  header h1 {
    font-size: var(--typography__fontSize--xxs);
    line-height: 1rem;
  }
/*
  hr,
  #tailormadeZendesk,
  #singleHighlight,
  #footer {
    left: calc(-1 * ((100vw - var(--grid__width--sm)) / 2));
    width: 100vw;
  }
  #singleHighlight {
    padding: calc(12 * var(--spacing__rhythmUnit)) 0 calc(20 * var(--spacing__rhythmUnit)) 10%;
  }*/
  #footer .company-name {
    margin-left: calc(1 * ((100vw - var(--grid__width--sm)) / 2));
    width: calc(var(--grid__width--sm) - 360px);
  }
  #footer nav {
    margin-right: calc(1 * ((100vw - var(--grid__width--sm)) / 2));
  }
}

/* ==========================================================================
   Pricing template
   ========================================================================== */
.plans {
  display: flex;
  flex-direction: row;
}
.plan {
  background: #fff;
  font-family: var(--typography__font--default);
  height: max-content;
  margin-right: var(--spacing__vertical--3);
  max-width: 250px;
  padding: 2rem;
}
.plan--name {
  font-family: var(--typography__font--heading);
  font-size: var(--typography__fontSize--sm);
  font-weight: 700;
  line-height: 1.618em;
  text-align: center;
}
.plan--price {
  font-family: var(--typography__font--heading);
  font-size: var(--typography__fontSize--lg);
  font-weight: 700;
  line-height: 1.618em;
  text-align: center;
}
.plan--center {
  line-height: 1.618em;
  text-align: center;
}
.plan--center + .row--group {
  margin-top: 1.618em;
}
.row--group,
.row--item {
  border-top: 2px var(--taupe) solid;
  margin: 0 -3rem;
  padding: var(--spacing__rhythmUnit) calc(2* var(--spacing__vertical--3));
}
.row--group {
  color: var(--purple-dark);
  font-size: var(--typography__fontSize--xxs);
  font-weight: 800;
  text-transform: uppercase;
}
.row--item {}

.plan .btn {
  box-sizing: border-box;
  width: 100%;
}

/* ==========================================================================
   Post template
   ========================================================================== */
.post #article {
  max-width: 600px;
  padding-bottom: calc(4 * var(--spacing__vertical--3));
}
#article,
#article > td {
  font-size: var(--typography__fontSize--sm);
  
  font-family: var(--typography__font--default);

}
#article h1,
#article h2,
#article h3,
#article h4,
#article h5 {
  font-family: var(--typography__font--heading);
  font-size: var(--typography__fontSize--md);
  font-weight: 700;
  line-height: 1.618em;
  margin-top: calc(2 * var(--typography__fontSize--md));
}
#article p,
#article ul,
#article ol,
#article table {
  font-size: var(--typography__fontSize--xxs);
  line-height: 1.618em;
}
#article a {
  color: var(--blue)
}
#article code {
  background: #eee;
  border-radius: 3px;
  color: #252525;
  font-size: 12px;
  line-height: 1.618em;
  padding: .25em .5em;
}

#article table {
  border-collapse: collapse;
  text-align: left;
white-space: nowrap;
  max-width: 800px;
}
#article table th,
#article table td {
  box-sizing: content-box;
  padding: .5em 3em .5em .75em;
}
#article tr {
  border-bottom: 1px solid rgb(233, 235, 237);
}
#article img {    
  background-color: white;
  box-shadow: rgba(0,0,0,.07) 0 13px 10px;
  padding: 1em;
  max-width: 100%;
}
.tags {
  margin-top: calc(1 * var(--spacing__vertical--3));
  display: block;
}
.tags span {
  background-color: #eee;
  border-radius: 1em;
  color: #777;
  display: inline-block;
  font-weight: 700;
  margin-right: .5em;
  margin-top: .5em;
  padding: .25em .75em;
  white-space: nowrap;
}
/**
 * iPad with portrait orientation.

@media all and (device-width: 768px) and (device-height: 1024px) and (orientation:portrait){
  .container {
    width: var(--grid__width--sm);
  }
  .overlay--form {
    border-radius: 0;
    height: 100%;
    width: 100%;
  }
  .product-payoffs .product-payoffs__payoff {
    margin: 0 1em;
    width: auto;
  }
  hr,
  #tailormadeZendesk,
  #singleHighlight,
  #footer {
    left: calc(-1 * ((100vw - var(--grid__width--sm)) / 2));
    width: 100vw;
  }
  #singleHighlight {
    padding: calc(12 * var(--spacing__rhythmUnit)) 0 calc(20 * var(--spacing__rhythmUnit)) 10%;
  }
  #footer .company-name {
    margin-left: calc(1 * ((100vw - var(--grid__width--sm)) / 2));
    width: calc(var(--grid__width--sm) - 360px);
  }
  #footer nav {
    margin-right: calc(1 * ((100vw - var(--grid__width--sm)) / 2));
  }
}

/**
 * iPad with landscape orientation.

@media all and (device-width: 1024px) and (device-height: 768px) and (orientation:landscape){
  .container {
    width: var(--grid__width--sm);
  }
  .overlay--form {
    border-radius: 0;
    height: 100%;
    width: 100%;
  }
  .product-payoffs .product-payoffs__payoff {
    margin: 0 1em;
    width: auto;
  }
  hr,
  #tailormadeZendesk,
  #singleHighlight,
  #footer {
    left: calc(-1 * ((100vw - var(--grid__width--sm)) / 2));
    width: 100vw;
  }
  #singleHighlight {
    padding: calc(12 * var(--spacing__rhythmUnit)) 0 calc(20 * var(--spacing__rhythmUnit)) 10%;
  }
  #footer .company-name {
    margin-left: calc(1 * ((100vw - var(--grid__width--sm)) / 2));
    width: calc(var(--grid__width--sm) - 360px);
  }
  #footer nav {
    margin-right: calc(1 * ((100vw - var(--grid__width--sm)) / 2));
  }
}