@font-face { font-family: "GT Zirkon"; font-weight: 400; src: url("/assets/fonts/GT-Zirkon-Book.ttf") format("truetype"), url("/assets/fonts/GT-Zirkon-Book.woff") format("woff"), url("/assets/fonts/GT-Zirkon-Book.woff2") format("woff2");}@font-face { font-family: "GT Zirkon"; font-weight: 700; src: url("/assets/fonts/GT-Zirkon-Black.ttf") format("truetype"), url("/assets/fonts/GT-Zirkon-Black.woff") format("woff"), url("/assets/fonts/GT-Zirkon-Black.woff2") format("woff2");}:root { /* ─── Typography ─────────────────────────────────── */ --main-font: "GT Zirkon"; --font-stack: "GT Zirkon", sans-serif; --rem-reset: 62.5%; --font-size-80: 8rem; --font-size-64: 6.4rem; --font-size-48: 4.84rem; --font-size-36: 3.6rem; --font-size-30: 3rem; --font-size-28: 2.8rem; --font-size-24: 2.4rem; --font-size-23: 2.3rem; --font-size-20: 2rem; --font-size-18: 1.8rem; --font-size-16: 1.6rem; --font-size-14: 1.4rem; --line-height-regular: 1.5; --line-height-headings: 1.2; --line-height-display: 1.1; --tracking-regular: -0.01em; --tracking-headings: -0.04em; --tracking-uppercase: 0.1em; /* ─── Colors — base palette ──────────────────────── */ --clr-white: #ffffff; --clr-black: #000000; --clr-mid-grey: #777777; --clr-grey: #3D3E43; --clr-grey-light: #ECF0F5; --clr-grey-lines: #D2DFE3; --clr-white-bg: #F5FAFC; --clr-purple: #5B185E; --clr-purple-deep: #3E163F; --clr-pink: #F5DDF6; --clr-blue-rich: #134FEA; --clr-blue-soft: #0071AF; --clr-blue-medium: #33CCFF; --clr-blue-light: #ADEBFF; --clr-blue-dark: #23376B; --clr-teal: #068EAC; --clr-orange: #FFBF25; --clr-bg-blockquote: #E6F3F7; /* ─── Colors — semantic aliases ──────────────────── */ --clr-cta-primary: var(--clr-orange); --clr-cta-bold: var(--clr-blue-rich); --clr-panel: var(--clr-grey-light); --clr-icon-background: var(--clr-blue-light); --clr-light-bg: var(--clr-white-bg); --clr-icon-foreground: var(--clr-blue-soft); /* ─── Border radius ──────────────────────────────── */ --radius-buttons: 2px; --radius-sm: 4px; --radius-mid: 6px; --radius-panels: 12px; --radius-media: 12px; --radius-tabs: 20px; /* ─── Resolved Sass color function values ─────────  Source: compiled output of _site/css/main.css  Do not change these values without recompiling Sass first. */ --clr-cta-primary-hover: #fbb100; --clr-cta-bold-hover: #1042c4; --clr-ghost-hover:  #e6ecfd; --clr-white-hover:  #f2f2f2; --clr-purple-light-65: #f1cff3; --clr-grey-light-65:  #e5e5e7; --clr-purple-light-50: #e092e3; --clr-grey-light-60:  #d7d8db;}*,::after,::before { box-sizing: border-box;}html,body { margin: 0; padding: 0;}html { font-size: var(--rem-reset); -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; scroll-behavior: smooth; scroll-padding-top: 12em;}body { background: var(--clr-light-bg); font-family: var(--font-stack); font-weight: 400; font-size: var(--font-size-20); /* Set base font size */ line-height: var(--line-height-regular); letter-spacing: var(--tracking-regular); /* Set base font tracking */ text-rendering: optimizeLegibility;}h1,h2,h3,h4,label,strong,b { font-weight: 700; /* Set font weights */}body.no-scroll { margin: 0; height: 100%; overflow: hidden;}.heading-display { font-size: var(--font-size-64); letter-spacing: var(--tracking-regular); line-height: var(--line-height-display); text-align: center; @media (max-width: 1024px) { font-size: var(--font-size-48); } @media (max-width: 767px) { font-size: var(--font-size-36); }}h1 { margin: 0 0 30px; font-size: var(--font-size-48); letter-spacing: var(--tracking-headings); line-height: var(--line-height-headings); @media (max-width: 1199px) { font-size: var(--font-size-36); } @media (max-width: 767px) { font-size: var(--font-size-28); margin-bottom: 20px; }}h2 { font-size: var(--font-size-28); margin: 36px 0 24px; letter-spacing: var(--tracking-headings); line-height: var(--line-height-headings); @media (max-width: 767px) { font-size: var(--font-size-24); }}h3 { font-size: var(--font-size-20); margin: 0;}p { margin: 0 0 24px;}li { margin: 0 0 12px; &:last-of-type { margin: 0 0 24px; }}ul { padding: 0 0 0 1em;}a { color: var(--clr-blue-rich); text-decoration: none; &:hover { text-decoration: underline; }}.align-center { text-align: center;}.pr-md-0 { @media (max-width: 991px) { padding-right: 0; }}.mb-mobile-40 { @media (max-width: 767px) { margin-bottom: 40px; }}.mb-0 { margin-bottom: 0 !important;}.pl-0 { padding-left: 0 !important;}/* Text decorations */.text-decorations { display: inline-block; position: relative; z-index: 1; &::before { content: ""; display: inline-block; background-size: contain; background-repeat: no-repeat; background-position: center center; position: absolute; left: 50%; top: 30%; transform: translate(-50%, -50%); width: 110%; height: 200%; z-index: -1; }}.circled-text-img { &::before { background-image: url(/assets/img/circled-text-img.png); }}.underline-text-img { &::before { background-image: url(/assets/img/underline-text-img.png); top: auto; bottom: 0; transform: translate(-50%, 50%); height: 100%; }}/* Content styles */.content-media, .content-image { @media (max-width: 991px) { text-align: center; } img { width: 100%; max-width: 552px; border-radius: var(--radius-media); } video { width: 100%; max-width: 552px; border-radius: var(--radius-media); }}/* Media classes */.md-ten-percent { width: 100%; max-width: 10% !important; @media (max-width: 991px) { max-width: 100% !important; }}.md-twenty-percent { width: 100%; max-width: 20% !important; @media (max-width: 991px) { max-width: 100% !important; }}.md-thirty-percent { width: 100%; max-width: 30% !important; @media (max-width: 991px) { max-width: 100% !important; }}.md-forty-percent { width: 100%; max-width: 40% !important; @media (max-width: 991px) { max-width: 100% !important; }}.md-fifty-percent { width: 100%; max-width: 50% !important; @media (max-width: 991px) { max-width: 100% !important; }}.md-sixty-percent { width: 100%; max-width: 60% !important; @media (max-width: 991px) { max-width: 100% !important; }}.md-seventy-percent { width: 100%; max-width: 70% !important; .with-line { max-width: 100% !important; @media (max-width: 991px) {  max-width: 100% !important; } } @media (max-width: 991px) { max-width: 100% !important; }}.md-eighty-percent { width: 100%; max-width: 80% !important; .with-line { max-width: 100% !important; @media (max-width: 991px) {  max-width: 100% !important; } } @media (max-width: 991px) { max-width: 100% !important; }}.md-ninety-percent { width: 100%; max-width: 90% !important; @media (max-width: 991px) { max-width: 100% !important; }}.md-100-percent { width: 100%; max-width: 100% !important; @media (max-width: 991px) { max-width: 100% !important; }}.content-media.md-sixty-percent { img { max-width: 100% !important; }}.page-inner.content-right { .content-wrap.md-forty-percent { padding: 0 0 0 10px; @media (max-width: 767px) {  padding: 0; } }}.sm-100-percent { @media (max-width: 767px) { width: 100%; max-width: 100% !important; }}.mobile-flex-column { @media (max-width: 767px) { flex-direction: column !important; }}.mobile-w-100 { @media (max-width: 767px) { width: 100% !important; max-width: 100% !important; }}/* Skip to content link */.skip-to-content-link { display: block; background: var(--clr-orange); color: var(--clr-black); margin: 20px; padding: 8px 24px; position: absolute; transform: translateY(-200%); transition: transform 0.2s; font-size: var(--font-size-24);}.skip-to-content-link:focus { transform: translateY(0%);}/* News strip */.news-strip { margin: 10px 10px 0; background: var(--clr-blue-rich); color: var(--clr-white); border-radius: var(--radius-mid); box-sizing: border-box; p { padding: 0.5em 1em; margin: 0; font-size: var(--font-size-18); text-align: center; letter-spacing: var(--tracking-regular); @media (max-width: 767px) {  font-size: var(--font-size-16); } } a { color: inherit; text-decoration: underline; &:hover {  text-decoration: none; } }}/* Header and Navigation */.primary-header { width: 100%; box-sizing: border-box; padding: 30px 50px; display: flex; flex-direction: row; background: white; align-items: center; justify-content: space-between; font-size: var(--font-size-18); @media (max-width: 767px) { padding: 20px 15px; } .site-logo { display: block; text-indent: -9999em; width: 132px; height: 24px; background: url('/assets/svg/logo.svg') center no-repeat; } .btn-nav { display: none; position: relative; padding: 0px; width: 30px; height: 30px; border: none; z-index: 998; background-color: transparent; @media (max-width: 1200px) {  display: block; } &:hover, &:focus {  outline: none; } &--line {  display: inline-block;  height: 3px;  width: 24px;  background-color: var(--clr-blue-dark);  position: absolute;  top: 0px;  left: 50%;  transform: translateX(-50%);  &:first-child {  top: 8px;  }  &:last-child {  top: auto;  bottom: 8px;  } } &.active {  .btn-nav--line {  background-color: #fff;  }  .btn-nav--line:first-child {  transform: translate(-50%, -50%) rotate(45deg);  top: 50%;  }  .btn-nav--line:last-child {  transform: translate(-50%, -50%) rotate(-45deg);  bottom: 40%;  } } } .nav-primary { @media (max-width: 1200px) {  position: fixed;  top: 0;  left: 0;  right: 0;  width: 100%;  max-width: 100%;  bottom: 100vh;  background-color: var(--clr-purple-deep);  z-index: -5;  padding-top: 100px;  padding-bottom: 50px;  min-height: 100vh;  overflow-y: scroll;  opacity: 0; } @media (max-width: 767px) {  padding-top: 80px; } } ul,li { list-style: none; margin: 0; padding: 0; @media (max-width: 991px) {  padding: 5px 0; } } ul { display: flex; align-items: center; @media (max-width: 1200px) {  opacity: 0;  display: block;  text-align: center; } } li.btn-item { @media (max-width: 1200px) {  padding-top: 91px; } } li { position: relative; display: inline-flex; margin: 0 0 0 30px; list-style: none; &:first-of-type {  margin: 0; } @media (max-width: 1200px) {  display: block;  margin: 0; } } .vertical-rule { padding: 12px 0 10px; width: 1px; height: 12px; background-color: var(--clr-grey-light); @media (max-width: 1200px) {  display: none; } } a { color: var(--clr-black); text-decoration: none; @media (max-width: 1200px) {  color: #fff;  font-size: var(--font-size-30);  line-height: 30px;  &.cta--primary {  color: var(--clr-black);  font-size: var(--font-size-18);  } } } a[href="#"] { cursor: default; } .nav-link { display: inline-block; box-sizing: border-box; padding: 15px 0 10px; border-bottom: 4px solid var(--clr-white); &.blue--medium:hover,&.blue--medium.active { border-bottom-color: var(--clr-blue-medium); } &.blue--soft:hover,&.blue--soft.active { border-bottom-color: var(--clr-blue-soft); } &.purple:hover,&.purple.active { border-bottom-color: var(--clr-purple); } &.teal:hover,&.teal.active { border-bottom-color: var(--clr-teal); } &.orange:hover,&.orange.active { border-bottom-color: var(--clr-orange); } &:hover,&.active { border-bottom-color: var(--clr-purple); } @media (max-width: 1200px) {  display: inline-block;  padding: 21px 16px;  border: none; } } /* Dropdown nav */ li:hover, li:focus-within { cursor: pointer; } .use-case ul { -moz-column-count: 4; -moz-column-gap: 20px; -webkit-column-count: 2; -webkit-column-gap: 20px; column-count: 2; column-gap: 20px; } ul li ul { visibility: hidden; opacity: 0; width: max-content; /* 250px */ min-width: 264px; position: absolute; transition: all 0.5s ease; left: -6px; top: 42px; display: none; @media (max-width: 1200px) {  display: block;  visibility: visible;  opacity: 1;  position: static;  width: 100%;  background-color: transparent; } li {  display: block;  margin: 18px 0 0;  @media (max-width: 1200px) {  margin: 24px 0 0;  }  a {  display: inline-block;  padding: 2px 0 2px 36px;  background-position: left center;  background-repeat: no-repeat;  background-size: 24px 24px;  &.icon-data-analytics { background-image: url('/assets/svg/icon-data-analytics.svg'); }  &.icon-diple { background-image: url('/assets/svg/icon-diple.svg'); }  &.icon-dna { background-image: url('/assets/svg/icon-dna.svg'); }  &.icon-easy { background-image: url('/assets/svg/icon-easy.svg'); }  &.icon-styles { background-image: url('/assets/svg/icon-styles.svg'); }  &.icon-sales { background-image: url('/assets/svg/icon-sales.svg'); }  &.icon-insights { background-image: url('/assets/svg/icon-insights.svg'); }  &.icon-learning { background-image: url('/assets/svg/icon-learning.svg'); }  &.icon-recruitment { background-image: url('/assets/svg/icon-recruitment.svg'); }  &.icon-support-team { background-image: url('/assets/svg/icon-support-team.svg'); }  &.icon-blog { background-image: url('/assets/svg/icon-blog.svg'); }  &.icon-support { background-image: url('/assets/svg/icon-support.svg'); }  &.icon-events { background-image: url('/assets/svg/icon-events.svg'); }  &.icon-help { background-image: url('/assets/svg/icon-help.svg'); }  &.icon-whitepapers { background-image: url('/assets/svg/icon-whitepapers.svg'); }  &.icon-case-studies { background-image: url('/assets/svg/icon-case-studies.svg'); }  &.icon-install { background-image: url('/assets/svg/icon-install.svg'); }  &.icon-tri-stars { background-image: url('/assets/svg/icon-tri-stars.svg'); }  &.icon-recruitment-agency { background-image: url('/assets/svg/icon-recruitment-agency.svg'); }  &.icon-lead { background-image: url('/assets/svg/icon-lead.svg'); }  &.icon-sales-enablement { background-image: url('/assets/svg/icon-sales-enablement.svg'); }  &.icon-customer-success { background-image: url('/assets/svg/icon-customer-success.svg'); }  &.icon-account-based-marketing { background-image: url('/assets/svg/icon-account-based-marketing.svg'); }  &.icon-content-marketing { background-image: url('/assets/svg/icon-content-marketing.svg'); }  &.icon-contest-microsite { background-image: url('/assets/svg/icon-contest-microsite.svg'); }  &.icon-product-microsite { background-image: url('/assets/svg/icon-product-microsite.svg'); }  @media (max-width: 1200px) {   font-size: var(--font-size-24);   line-height: 24px;   background-image: none !important;   padding: 0;   color: #fff;  }  }  a:hover {  text-decoration: none;  color: var(--clr-blue-soft);  } } } .dropdown { z-index: 10; box-sizing: border-box; padding: 24px; z-index: 20; background: var(--clr-white); box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.05), 0px 30px 40px -24px rgba(0, 0, 0, 0.1); border-radius: var(--radius-mid);  @media(max-width: 1200px) {  background-color: transparent;  box-shadow: none;  padding: 0;  padding-bottom: 21px; } } @media (max-width: 991px) { ul li:hover > ul, ul li:focus-within > ul, ul li ul:hover, ul li ul:focus {  visibility: hidden;  opacity: 1;  display: none !important; } .show-ul ul.dropdown {  display: block !important;  li {  a {   color: #33CCFF;  }  } } li#link-dropdown a.nav-link {  position: relative;  &:before {  position: absolute;  content: '';  background: url('/assets/svg/icon-caret.svg');  background-repeat: no-repeat;  filter: invert(100%);  width: 22px;  height: 15px;  top: 4px;  right: -17px;  transition: all ease-in 200ms;  } } li.show-ul a.nav-link {  &:before {  transform: rotate(180deg);  } } } ul li:hover > ul, ul li:focus-within > ul, ul li ul:hover, ul li ul:focus { visibility: visible; opacity: 1; display: block; } ul li ul li { clear: both; &:first-child {  @media (max-width: 1200px) {  padding-top: 9px;  } } }}.js-nav-primary,.js-btn-nav{ transition: .1s all ease-out;}.primary-header.active { position: absolute; top: 0; .site-logo { background: url('/assets/svg/logo-light.svg') center no-repeat; z-index: 998; } li.btn-item { padding-top: 20px; } .nav-primary { @media (max-width: 1200px) {  z-index: 997;  bottom: 0;  opacity: 1; } ul {  opacity: 1; } ul li {  a.nav-link {  font-size: 2rem;  display: block;  padding: 15px 10px 0;  text-transform: uppercase;  line-height: 24px;  }  &:first-child {  a {   padding-top: 0;  }  }  ul {  padding: 0  }  ul.dropdown li {  margin: 0;  a {   font-size: 1.8rem;   display: block;   padding: 12.5px 10px 0;   text-transform: uppercase;  }  } } @media (max-width: 991px) {  ul li {  a.nav-link {   display: inline-block;   padding-top: 0;  }  a.nav-link.active {   color: #FFBF25;  }  ul.dropdown li {   a {   padding-top: 0;   display: inline-block;   }  }  } } }}.show-ul ul.dropdown { display: block !important;}/* Content page */.page-wrapper { position: relative; z-index: 10; background: var(--clr-white-bg); padding: 60px 0 90px; overflow: hidden; @media (max-width: 991px) { padding: 60px 0; } @media (max-width: 767px) { padding: 30px 0; } &.small-padding-top { padding-top: 42px; } &.large-padding-top { padding-top: 90px; @media (max-width: 767px) {  padding: 30px 0; } @media (max-width: 991px) {  padding: 30px 0; } } &.small-padding-bottom { padding-bottom: 42px; @media (max-width: 767px) {  padding-bottom: 0; } @media (max-width: 991px) {  padding-bottom: 0; } } &.white { background: var(--clr-white); } &.dark-bg { background: var(--clr-grey-light); }}.page-inner { margin: 0 auto; width: 100%; max-width: 1158px; /* 1128px + padding (15px + 15px) */ padding: 0 15px; .narrow { padding: 0 90px; @media (max-width: 1199px) {  padding: 0 70px; } @media (max-width: 767px) {  padding: 0; } } .content-wrapper h2 { font-size: var(--font-size-28); @media (max-width: 767px) {  font-size: var(--font-size-24); } @media (max-width: 575px) {  font-size: var(--font-size-20); } } h2 { font-size: var(--font-size-48); margin: 12px 0 24px -0.075em; @media (max-width: 991px) {  font-size: var(--font-size-36); } @media (max-width: 767px) {  font-size: var(--font-size-36); } @media (max-width: 575px) {  font-size: var(--font-size-28); } &.headline {  text-align: center;  margin-bottom: 42px; } &.headline-left {  text-align: left;  margin-bottom: 42px; } } .intro-text { margin: 0 0 42px; width: 650px; max-width: 100%; color: var(--clr-grey); } &.bottom-spacing { padding-bottom: 42px; @media (max-width: 767px) {  padding-bottom: 36px;  &:last-of-type {  padding-bottom: 0;  } } } &.bottom-spacing-xl { padding-bottom: 100px; @media (max-width: 991px) {  padding-bottom: 36px; } @media (max-width: 767px) {  padding-bottom: 36px; } } &.bottom-spacing-home { padding-bottom: 60px; @media (max-width: 767px) {  padding-bottom: 42px; } } &.content-right { .content-wrap {  padding: 0 0 0 60px;  @media (max-width: 991px) {  padding: 0 0 0 30px;  }  @media (max-width: 767px) {  padding: 0;  } } } &.content-left { .content-wrap {  @media (max-width: 991px) {  padding: 0 30px 0 0;  }  @media (max-width: 767px) {  padding: 0;  } } } @media (max-width: 767px) { &.content-left {  padding-bottom: 50px;  .content-wrap {  order: 2;  }  .content-media {  order: 1;  margin-bottom: 10px;  } } &.content-right {  padding-bottom: 50px;  .content-wrap {  padding: 0;  } } }}.flex-contents { display: flex; justify-content: space-between; align-items: center; overflow: hidden; &.md-flex-direction { @media (max-width: 991px) {  flex-direction: column; } } &.flex-50>* { width: 50%; @media (max-width: 991px) {  width: 100%; } } &.align-top { align-items: flex-start; } &.sidebar-content { @media (max-width: 1199px) {  flex-direction: column; } } &.align-top-md { @media (min-width: 768px) {  align-items: flex-start; } }}.panels { justify-content: normal; gap: 60px; flex-wrap: wrap; flex-direction: row; @media (max-width: 991px) { gap: 30px; } @media (max-width: 767px) { gap: 40px 0; flex-direction: column; &:last-of-type {  margin-bottom: 0; } }}.panel-group { margin: 60px auto 0;}.panel { width: 100%; max-width: 29%; align-self: baseline; @media (max-width: 767px) { max-width: 100%; text-align: center; &.text-left {  text-align: left; } } img { margin: 0 0 9px; width: 100%; max-width: 54px; } hr { margin: 0 0 18px; width: 54px; max-width: 15%; border: none; height: 3px; background: var(--clr-blue-medium); } h3 { margin: 0 0 6px; font-size: var(--font-size-24); min-height: 3em; } p { margin: 0; font-size: var(--font-size-16); } @media (max-width: 767px) { &:last-of-type {  margin-bottom: 12px; } }}.panel-numbers { box-sizing: border-box; margin: 90px auto 0; padding: 60px; text-align: center; background: var(--clr-panel); border-radius: var(--radius-panels); @media (max-width: 1199px) { padding: 50px 30px; } @media (max-width: 767px) { padding: 40px 30px; } @media (max-width: 375px) { padding: 40px 28px; } @media (max-width: 374px) { padding: 40px 20px; } h2 { margin: 0 auto 30px; font-size: var(--font-size-48); max-width: 100%; @media (max-width: 767px) {  font-size: var(--font-size-36); } @media (max-width: 575px) {  font-size: var(--font-size-28); } @media (max-width: 374px) {  font-size: var(--font-size-24); } } p { margin: 0 auto 60px; width: 740px; max-width: 80%; @media (max-width: 767px) {  max-width: 100%;  margin: 0 auto 40px; } &.numbers {  width: 100%;  max-width: 100%;  margin: 0;  font-size: var(--font-size-16);  @media (max-width: 767px) {  max-width: 60%;  }  @media (max-width: 575px) {  max-width: 100%;  } } span, cite {  display: block; } .number-large {  margin: 0 0 .05em;  line-height: 1;  font-size: var(--font-size-80);  @media (max-width: 767px) {  font-size: var(--font-size-64);  } } cite {  margin: .75em 0 0;  font-size: var(--font-size-14);  text-transform: uppercase;  letter-spacing: var(--tracking-uppercase);  color: var(--clr-mid-grey);  font-style: normal; } }}.number-wrap { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 50px; @media (max-width: 1199px) { gap: 30px; } @media (max-width: 767px) { gap: 40px; flex-direction: column; }}.video-shadow,.image-shadow { box-shadow: 0px 20px 60px -20px rgba(0, 0, 0, 0.1);}.purple-gradient { padding-top: 90px; padding-bottom: 90px; background: url('/assets/img/bg-gradient--row.png') top right no-repeat var(--clr-purple-deep); color: var(--clr-white); .add-page{ .page-quote{  background-color: rgba(255, 255, 255, 0.05);  p:before{  background: url(/assets/svg/icon-quote-white.svg) no-repeat center center;  } } @media (max-width: 414px){  .page-quote{   margin-bottom: 1.2em;  } } } @media (max-width: 767px) { padding-top: 40px; padding-bottom: 40px; }}.sidebar-nav { width: 264px; padding: 24px 0 0 30px; box-sizing: border-box; border-left: 1px solid var(--clr-grey-light-65); @media (max-width: 1199px) { border-left: none; margin-bottom: 30px; text-align: center; width: 100%; padding: 0; } ul, li { margin: 0; padding: 0; list-style: none; } li { font-weight: 700; font-size: var(--font-size-20); margin: 0 0 12px; line-height: 1; &:first-of-type {  margin: 0 0 18px;  @media (max-width: 1199px) {  margin: 0 0 10px;  } } @media (max-width: 1199px) {  display: inline-block;  margin: 0;  &:not(:last-child) {  margin-right: 12px;  }  &:first-child {  width: 100%;  margin-right: 0;  } } } a { font-size: var(--font-size-16); font-weight: 400; color: var(--clr-black); text-decoration: none; &:hover {  text-decoration: underline;  &.active {  text-decoration: none;  cursor: default;  } } &.active {  color: var(--clr-grey);  border-bottom: 1px dashed var(--clr-purple-light-50) } }}.eyebrow { font-weight: 700; font-size: var(--font-size-16); color: var(--clr-blue-soft); &.light-eyebrow { color: var(--clr-blue-medium); }}a.arrow { display: inline-block; font-size: var(--font-size-16); color: var(--clr-blue-rich); img { transition: .1s; margin-left: 4px; } &:hover { text-decoration: none; img {  margin-left: 6px; } }}.header-link { display: flex; align-items: center; justify-content: space-between; @media (max-width: 767px) { flex-direction: column; margin-bottom: 30px; align-items: flex-start; } a.arrow:hover { text-decoration: underline; img {  margin-left: 4px; } }}.learn-more-wrap { max-width: 100%; display: flex; /* flex-wrap: wrap; */ justify-content: space-between; align-items: flex-start; gap: 30px; @media (max-width: 767px) { flex-direction: column; }}.learn-more-panel,.learn-more-wrap article { box-sizing: border-box; padding: 24px; background: var(--clr-panel); border-radius: var(--radius-panels); width: 32%; @media (max-width: 767px) { width: 100%; margin-bottom: 30px; } h3 { font-size: var(--font-size-28); margin: 0 0 18px; line-height: 1; } p { font-size: var(--font-size-16); margin: 0 0 12px; }}.learn-more-wrap.add-page { max-width: 100%; display: flex; gap: 44px; flex-wrap: wrap; align-items: stretch; flex-direction: row; margin-top: 30px; @media (max-width: 414px) {  gap: 0px; }}.add-page .learn-more-panel { width: 30%; @media (max-width: 414px){   width: 100%; }}.learn-more-wrap article { background: none; margin: 12px 0 0; padding: 0; a.blog-image { display: block; margin: 0 0 18px; max-height: 210px; overflow: hidden; border-radius: var(--radius-media); box-shadow: inset 0 0 40px rgba(0, 0, 0, 0.05); } img { max-width: 100%; } a { color: var(--clr-black); &:hover {  text-decoration: none; } } h3 { font-size: var(--font-size-24); margin: 0 0 9px; line-height: var(--line-height-headings) } p { margin: 0; font-size: var(--font-size-16); color: var(--clr-mid-grey); }}.tabbed-navigation { padding: 60px 0 30px; border-bottom: 1px solid var(--clr-grey-light-60); &.no-border { padding: 20px 0; border-bottom: none; @media (max-width: 767px) {  padding-top: 0; } } ul, li { margin: 0; padding: 0; } ul { display: flex; font-size: var(--font-size-16); justify-content: center; flex-direction: row; align-items: center; @media (max-width: 767px) {  flex-wrap: wrap;  gap: 1rem; } } li { list-style: none; } button, .toggle-nav li { margin: 0 3px; display: inline-block; padding: 10px 18px; border: none; font-family: inherit; font-size: inherit; border-radius: var(--radius-tabs); background: none; line-height: 1; &:hover, &.active {  background: var(--clr-purple-light-65);  cursor: pointer; } }}.toggle-img { width: 100%; max-width: 100%; display: none; margin: 30px 0 0; border-radius: var(--radius-media); text-align: left; &.visible { display: block; gap: 20px; img {  max-width: 100%; } } @media (min-width: 767px) { picture {  grid-area: img; } h3 {  grid-area: title;  align-self: flex-end; } p {  grid-area: text; } &.visible {  grid-template-columns: 300px auto;  grid-template-rows: min-content;  grid-template-areas:  "title img"  "text img"; } }}.tabbed-content { margin-bottom: 72px; @media (max-width: 767px) { margin-bottom: 30px; }}.inspiration-items { margin: 0; padding: 42px 0 12px; display: flex; max-width: 100%; flex-wrap: wrap; justify-content: space-between; img { display: block; max-width: 100%; margin: 0 0 2.4rem; border-radius: var(--radius-mid); border: 1px solid var(--clr-grey-light); } li { display: none; max-width: 48%; width: 100%; margin: 0 0 48px; padding: 0; list-style: none; @media (max-width: 767px) {  max-width: 100%; } &.visible {  display: block; } } .inspiration-items-copy{ display: grid; justify-content: space-between; gap: 1rem; grid-template-areas:  "div a" "p p";  div{  margin-top: 6px;  display: flex;  flex-wrap: wrap;  gap: .8rem;  grid-area: div;   h2 {  width: 100%;  margin: 0;  font-size: var(--font-size-20);  }   span {  font-size: var(--font-size-16);  font-weight: 400;  color: var(--clr-mid-grey);  margin-right: 8px;  background-color: var(--clr-grey-light);  border-radius: 42px;  padding: 3px 12px;  } }  .link-preview {  font-size: var(--font-size-16);  grid-area: a;  justify-self: right; }   p{  grid-area: p;  font-size: var(--font-size-16);  margin: 0; } }}.content-wrapper { width: 100%; max-width: 840px; @media (max-width: 1199px) { max-width: 100%; }}.content-wrap { box-sizing: border-box; padding: 0 60px 0 0; @media (max-width: 991px) { padding: 0; }}.container-404 { margin: 0 auto; padding: 42px 0; max-width: 90%; text-align: center; width: 400px; h1 { margin: 0 0 12px; } p { margin: 0; } img { display: block; margin: 0 0 24px; width: 100%; }}.comparison-members { h2 { text-align: center; font-size: var(--font-size-48); max-width: 740px; }}/* Events page */.events_intro { display: flex; justify-content: space-evenly; align-items: center; min-height: 400px; gap: 1em; background-color: var(--clr-purple-deep); color: var(--clr-white); padding: 1em; border-radius: 12px; margin-bottom: 1em; text-align: center; @media (max-width: 992px) { flex-wrap: wrap; } img { max-width: 96px; } h1 { font-size: var(--font-size-64); } p { max-width: 744px; } img:first-child { align-self: flex-end; padding-bottom: 2em; } img:last-child { align-self: flex-start; padding-top: 2em; }}.events_news { display: flex; gap: 3rem; justify-content: center; align-items: flex-start; flex-wrap: wrap; @media (min-width: 1200px) { justify-content: space-between; }}.key-events { flex: 1 0 360px; display: flex; align-items: flex-start; gap: 1em; width: 100%;}.table-wrapper { background: #F5FAFC;}.add-page.tablestyle { max-width: 100%; display: flex; gap: 0px; flex-wrap: wrap; align-items: stretch; flex-direction: row; .learn-more-panel:nth-child(1), .learn-more-panel:nth-child(5), .learn-more-panel:nth-child(9) { border-left: 0px solid #ccc; } .learn-more-panel:nth-child(4), .learn-more-panel:nth-child(8), .learn-more-panel:nth-child(12) { border-right: 0px solid #ccc; } .learn-more-panel:nth-child(9), .learn-more-panel:nth-child(10), .learn-more-panel:nth-child(11), .learn-more-panel:nth-child(12) { border-bottom: 0px solid #ccc; } @media (max-width: 767px){ .learn-more-panel:nth-child(even){  border-right: 0px;  } .learn-more-panel:nth-child(9), .learn-more-panel:nth-child(10) {  border-bottom: 1px solid #ccc!important; } } @media (max-width: 500px){ .learn-more-panel{  border-right: 0px!important;  } .learn-more-panel:nth-child(9), .learn-more-panel:nth-child(10), .learn-more-panel:nth-child(11) {  border-bottom: 1px solid #ccc!important; } } .learn-more-panel {  width: 25%;  border-radius: 0px;  border-right: 1px solid #ccc;  border-bottom: 1px solid #ccc;  background: none; @media (max-width: 767px){  width: 50%;  margin-bottom: 0px;   } @media (max-width: 500px){  width: 100%;  margin-bottom:0px; } a{  display:none; } h3{  letter-spacing: -0.8px;  font-size: 2rem; } p {  font-size: 1.4rem;  margin: 0 0 12px; } }}/* // CTA before footer */.footer-cta { width: 100%; padding: 90px 2%; box-sizing: border-box; background: url('/assets/img/bg-gradient--footer.png') center center no-repeat var(--clr-purple); background-size: cover; color: var(--clr-white); text-align: center; @media (max-width: 767px) { padding: 90px 30px; } h2 { margin: 0 auto 30px; width: 800px; max-width: 100%; font-size: var(--font-size-48); @media (max-width: 767px) {  font-size: var(--font-size-28); } } p { margin: 0 auto 30px; width: 800px; max-width: 100%; }}/* CTA section (used across platform, comparisons, academy) */.comparisons-cta { background-image: url('/assets/img/bg-comparisons-cta.png'); background-size: cover; background-repeat: no-repeat; display: grid; justify-items: center; padding: 80px 15px; text-align: center; color: white; h2 { font-size: var(--font-size-48); margin: 0 0 16px; } ul { display: flex; gap: 44px; flex-wrap: wrap; justify-content: center; align-items: center; width: 100%; max-width: 1128px; li {  list-style: none;  img {  margin-right: 20px;  vertical-align: middle;  } } }}/* CTA before lessons footer in Academy section */.lessons-cta { display: flex; justify-content: center; align-items: center; flex-direction: column; h2{ font-size: var(--font-size-36); margin-bottom: 16px; } p{ font-size: var(--font-size-18); max-width: 592px; margin-bottom: 40px; }}/* Main footer */footer { width: 100%; padding: 64px 0; display: flex; gap: 56px; flex-direction: column; align-items: center; background: linear-gradient(91.5deg, rgba(255, 255, 255, 0.35) 25.21%, rgba(255, 255, 255, 0) 90.55%), #E7F5FA; @media (max-width: 1200px) { padding: 64px 15px; } a { color: var(--clr-black); } section:first-child { width: 100%; max-width: 1128px; display: grid; gap: 6.07rem; grid-template-columns: repeat(auto-fit, minmax(min(176px, 150px), 1fr)); grid-template-rows: auto;  @media (max-width: 1200px) {  gap: 1rem; } a{  @media (max-width: 992px) {  grid-column: 1/-1;  } } a img{  max-width: 100%; } div {  display: flex;  flex-direction: column;  gap: 8px;  font-size: var(--font-size-16);  h4 {  margin: 0 0 8px;  color: var(--clr-mid-grey);  font-weight: 400;  } } } section:last-child { width: 100%; max-width: 1128px; padding-top: 24px; display: flex; justify-content: space-between; border-top: 1px solid var(--clr-grey-light); ; div {  font-size: var(--font-size-14);  &:last-child a {  margin-left: 24px;  } } }}/* Buttons */.cta { display: inline-block; padding: 12px 24px; border: none; border-radius: var(--radius-buttons); font-size: var(--font-size-18); font-family: inherit; line-height: var(--line-height-regular); cursor: pointer; text-decoration: none; color: inherit; img { display: inline-block; margin-left: 10px; } &:hover { text-decoration: none; } &.margin-bottom { margin: 0 0 18px; }}.cta-landing { /* display: inline-block; */ padding: 14px 0; width: 280px; border: none; border-radius: var(--radius-buttons); font-size: var(--font-size-18); font-family: inherit; line-height: var(--line-height-regular); cursor: pointer; text-decoration: none; display: flex; justify-content: center; align-items: center; color: inherit; img { display: inline-block; margin-left: 10px; } &:hover { text-decoration: none; } &.margin-bottom { margin: 0 0 18px; }}.cta--mt20 { margin-top: 20px; @media (max-width: 767px) { margin-top: 0; }}.cta--primary { background: var(--clr-cta-primary); &:hover { background: var(--clr-cta-primary-hover); }}.cta--bold { background: var(--clr-cta-bold); color: var(--clr-white); &:hover { background: var(--clr-cta-bold-hover); }}.cta--ghost { color: var(--clr-cta-bold); background: none; border: 1px solid var(--clr-cta-bold); &:hover { background: var(--clr-ghost-hover); } &.disabled { border-color: var(--clr-grey); color: var(--clr-grey); cursor: default; &:hover {  background: none;  cursor: default; } }}.cta--white { color: var(--clr-black); background: var(--clr-white); &:hover { background: var(--clr-white-hover); }}/* Contact form */.contact-page { max-width: 95%; width: 900px; @media (max-width: 767px) {  padding-bottom: 30px; }}.site-form { border-top: 8px solid var(--clr-purple); box-sizing: border-box; margin: 54px auto 30px; @media (max-width: 767px) {  margin-top: 30px; } padding: 30px; width: 420px; max-width: 95%; background: var(--clr-white); box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.02), 0px 20px 30px -4px rgba(0, 0, 0, 0.1); border-radius: var(--radius-sm); @media (max-width: 575px) {  padding: 25px; } @media (max-width: 374px) {  padding: 15px; } .cta {  width: 100%;  margin: 30px 0 0;  text-align: center;  box-sizing: border-box; } label {  display: block;  margin: 0 0 12px;  font-size: var(--font-size-14);  color: var(--clr-grey);  &.select {   margin: 0;   display: inline-block;   font-size: var(--font-size-18);   font-weight: normal;   color: var(--clr-black);  } } fieldset {  margin: 0;  padding: 0;  border: none;  display: flex;  gap: 30px;  legend {   text-indent: -999em;   height: 0;   margin: 0;   padding: 0;  }  @media (max-width: 575px) {   gap: 25px;  }  @media (max-width: 374px) {   gap: 15px;  }  input {   width: 50%;  } } input[type=text], input[type=email], select, textarea {  box-sizing: border-box;  display: block;  margin: 0 0 24px;  padding: 12px 18px;  font-size: var(--font-size-18);  width: 100%;  border: none;  background: var(--clr-panel);  border-radius: var(--radius-sm);  font-family: inherit;  color: var(--clr-black); } textarea {  margin: 0;  min-height: 6.67em; } select {  appearance: none;  -moz-appearance: none;  -webkit-appearance: none;  background-image: url(/assets/svg/select-arr.svg);  background-repeat: no-repeat;  background-position: 96% 50%;  background-size: 24px;  padding-right: 42px; }}div.site-form { margin-bottom: 0;}.contact-page p { margin: 0; font-size: var(--font-size-16); text-align: center;}/* Social proof row */.social-proof { position: relative; z-index: 10; padding: 42px 0; width: 100%; background: var(--clr-white); text-align: center; @media (max-width: 767px) { padding-right: 24px; padding-left: 24px; }}.social-proof--logos { margin: 0 auto; display: inline-block; align-items: center; width: 1158px; max-width: 100%;}.social-proof--subline { margin: 0 auto; display: flex; align-items: center; width: 1158px; max-width: 100%;}.social-proof--logos { padding: 24px 15px 0; position: relative; overflow: hidden; border-top: 1px solid var(--clr-grey-light); justify-content: space-between; @media (max-width: 767px) { flex-wrap: wrap; } @media (min-width: 768px) and (max-width: 1199px) { flex-wrap: wrap; } img { width: 100%; max-width: 100px; width: auto; margin: 15px; vertical-align: middle; @media (min-width: 768px) and (max-width: 1199px) {  margin: 10px; } @media (max-width: 767px) {  max-width: 80px;  margin: 10px; } @media (max-width: 374px) {  max-width: 65px; } &:nth-child(3) {  max-width: 120px; } &.logo-small {  max-width: 50px;  @media (max-width: 767px) {  max-width: 40px;  }  @media (max-width: 991px) {  max-width: 40px;  } } }}.social-proof--subline { justify-content: center; padding: 30px 0 0; font-size: var(--font-size-14); a { line-height: 1; &:nth-of-type(2) {  padding-bottom: 2px;  line-height: 1px;  margin-left: 10px; } }}.page-wrapper.press-release { padding-top: 0; padding-bottom: 0; background: #FFF;}.press-release { .page-inner { padding-top: 50px; padding-bottom: 0; /*border-bottom: 1px solid #ECF0F5;*/ .pr-logo { img { height: 64px; } } .pr-title { h2 { font-size: 3.6rem; margin-left: 27.5rem; margin-right: 27.5rem; margin-bottom: 25px; } } @media (max-width: 767px) { .pr-title { h2 {  font-size: 2.8rem;  margin-left: 0;  margin-right: 0; } } } @media (min-width: 768px) and (max-width: 1024px) { .pr-title { h2 {  margin-left: 10rem;  margin-right: 10rem; } } } }}.faq-page { padding: 3em 0; .content-wrapper { p { font-size: 1.8rem; line-height: 27px; &:last-of-type { margin-bottom: 0; } } }}.sidebar-nav { width: 230px; ul { display: flex; flex-direction: column; gap: .5em; } @media (max-width: 1199px) { border-left: none; margin-bottom: 30px; text-align: center; padding: 0; width: 100%; } @media (min-width: 1300px) { position: sticky; left: calc((100% - (230px + 840px))/2); top: 0; }}.faq-list { break-before: column; margin-bottom: 40px; &:first-of-type { padding-top: 40px; } &:last-of-type { margin-bottom: 0; } h3 { margin-bottom: 15px; }}.faq-item { margin-bottom: 15px; page-break-inside: avoid;   /* Theoretically FF 20+ */ break-inside: avoid-column;   /* Chrome, Safari, IE 11 */ &:last-of-type { margin-bottom: 0; } .faq-question { background-color: #ECF0F5; padding: 15px; display: flex; justify-content: space-between; align-items: center; color: #000; border-radius: 8px; &:hover { text-decoration: none; cursor: pointer; } img, svg { transition: all ease-in 200ms; } &.active { border-radius: 8px 8px 0 0; img, svg { transform: rotate(45deg); } } h3{margin: 0;} h4 { font-size: 2rem; font-weight: 400; line-height: 30px; margin: 0; margin-right: 20px; } } .faq-answer { max-height: 0; overflow: hidden; padding: 0; transition: max-height 0.2s ease, padding 0.2s ease; background-color: #ECF0F5; border-bottom-left-radius: 8px; border-bottom-right-radius: 8px; &.open {  max-height: 1000px;  padding: 0 15px 15px; } p {  font-size: 1.8rem;  line-height: 27px;  color: #3D3E43;  &:last-of-type {  margin-bottom: 0;  } } li {  font-size: 1.8rem;  line-height: 27px;  color: #3D3E43;  &:last-of-type {  margin-bottom: 0;  } } ul {  padding-left: 45px;  margin-top: 0; } }}.policies{ padding: 3em 0;}.creative-agency.page-inner { max-width: 45%; @media (max-width: 414px) { max-width: 90%; }}.faq-home{ width: 100%; max-width: 1128px; padding: 9rem 15px; margin-inline: auto; @media (min-width: 1128px) { padding: 9rem 0; } h2{ margin: 0 0 2.4rem; } & > div{ display: grid; grid-template-columns: repeat(auto-fit, minmax(396px, 1fr)); gap: 1.2rem; article{  width: 100%; .faq-question, .faq-answer{ background-color: white; } h3{ font-weight: 400; } } }}.accordion-element { padding: 3em 0; .content-wrapper { p { font-size: 1.8rem; line-height: 27px; &:last-of-type { margin-bottom: 0; } } }}.sidebar-nav { width: 230px; ul { display: flex; flex-direction: column; gap: .5em; } @media (max-width: 1199px) { border-left: none; margin-bottom: 30px; text-align: center; padding: 0; width: 100%; } @media (min-width: 1300px) { position: sticky; left: calc((100% - (230px + 840px))/2); top: 0; }}.accordion-list { break-before: column; margin-bottom: 40px; &:first-of-type { padding-top: 40px; } &:last-of-type { margin-bottom: 0; } h3 { margin-bottom: 15px; }}.accordion-item { margin-bottom: 15px; page-break-inside: avoid;   /* Theoretically FF 20+ */ break-inside: avoid-column;   /* Chrome, Safari, IE 11 */ &:last-of-type { margin-bottom: 0; } .accordion-question { background-color: #ECF0F5; padding: 15px; display: flex; justify-content: space-between; align-items: center; color: #000; border-radius: 8px; &:hover { text-decoration: none; cursor: pointer; } img, svg { transition: all ease-in 200ms; } &.active { border-radius: 8px 8px 0 0; img, svg { transform: rotate(45deg); } } h3{ margin: 0; font-weight: normal; } h4 { font-size: 2rem; font-weight: 400; line-height: 30px; margin: 0; margin-right: 20px; } @media (max-width: 414px){ svg {  width: 100% !important;  height: 100% !important;  max-width: 28px; } } } .accordion-question svg {  padding: 6px;  width: 24px;  height: 24px;  background: #A8ECFE;  border-radius: 200px; } .accordion-question svg path {  fill: #2E4AE4; } .accordion-answer { display: none; &.open { display: block; } background-color: #ECF0F5; padding: 0 15px 15px; border-bottom-left-radius: 8px; border-bottom-right-radius: 8px; hr {  margin: 0;  padding-bottom: 10px;  border-top: 1px #0000001a solid;  border-left: 0;  border-right: 0;  border-bottom: 0; } p { font-size: 1.8rem; line-height: 27px; color: #3D3E43; &:last-of-type { margin-bottom: 0; } } li { font-size: 1.8rem; line-height: 27px; color: #3D3E43; &:last-of-type { margin-bottom: 0; } } ul { padding-left: 45px; margin-top: 0; } } }.policies{ padding: 3em 0;}.accordion-style.page-inner { max-width: 1128px; @media (max-width: 414px) { max-width: 90%; }}.design-services-page{ .accordion-style.page-inner{ max-width: 60%; }}.accordion-home{ width: 100%; max-width: 1128px; padding: 9rem 15px; margin-inline: auto; @media (min-width: 1128px) { padding: 9rem 0; } h2{ margin: 0 0 2.4rem; } & > div{ display: grid; grid-template-columns: repeat(auto-fit, minmax(396px, 1fr)); gap: 1.2rem; article{ width: 100%; .accordion-question, .accordion-answer{ background-color: white; } h3{ font-weight: 400; } } }}/* Homepage Hero */.hero-wrapper { width: 100%; padding: 70px 0 0; background: linear-gradient(180deg, #FFFFFF 0%, rgba(255, 255, 255, 0) 100%), #E7F1F3; &.white { background: var(--clr-white); } &.padding-bottom { padding-bottom: 70px; }} .hero-content { position: relative; z-index: 5; display: flex; margin: 0 auto; width: 100%; width: 940px; max-width: 90%; flex-direction: column; justify-content: space-around; align-items: center; text-align: center; h1 { width: 90%; @media (max-width: 767px) {  width: 100%; } } p { width: 74%; margin: 0 0 30px; @media (max-width: 767px) {  width: 100%; } } .cta-margin { margin-bottom: 45px; } .hero-media { margin: 30px 0 0; font-size: 0; img {  max-width: 940px;  width: 100%; } video {  box-shadow: 0px 20px 60px -20px rgba(0, 0, 0, 0.55);  border-radius: var(--radius-media) var(--radius-media) 0 0;  max-width: 100%;  width: 100%; } }}.hero-content.sub-pages{ width: 1440px; .hero-media { margin: 30px 0 0; font-size: 0; img {  max-width: 1440px;  width: 100%; } }}.hero-content.add-pages { width: 1128px; .hero-media { margin: 30px 0 0; font-size: 0; img {  max-width: 1128px;  width: 100%; } }}.intro-row,.hero-content { p { color: var(--clr-grey); }}.intro-row { br { @media (max-width: 767px) {  display: none !important; } @media (max-width: 991px) {  display: none !important; } }}.intro-row { padding: 60px 0 60px; background: var(--clr-white); h1, p { &:last-of-type {  margin: 0; } } h1 { &:last-of-type {  @media (max-width: 991px) {  margin-bottom: 20px;  } } }}.intro-row p:last-of-type { margin-bottom: 0; }.split-bg-wrapper { padding: 30px 0; background:url('/assets/svg/bg-split-white-grey.svg') repeat-x center; @media (max-width: 767px) { padding: 0; }}.split-bg-wrapper-flipped { margin: 0; padding: 30px 0; background:url('/assets/svg/bg-split-grey-white.svg') repeat-x center; &.dark { background:url('/assets/svg/bg-split-dark-grey-white.svg') repeat-x center; }}.feature-highlight { width: 1128px; max-width: 95%; margin: 0 auto; padding: 40px 90px; box-sizing: border-box; background: var(--clr-white); box-shadow: 0px 15px 20px -10px rgba(0, 0, 0, 0.1); border-radius: var(--radius-panels); display: flex; text-align: left; @media (max-width: 767px) { padding: 30px 15px; flex-direction: column; text-align: center; align-items: center; } img { display: block; margin: 0 30px 0 0; width: 100%; max-width: 72px; height: 72px; @media (max-width: 767px) {  margin: 0;  margin-bottom: 16px; } } h3 { margin: 0 0 6px; font-size: var(--font-size-24); } p { margin: 0; font-size: var(--font-size-16); }}.quote { background: var(--clr-panel); box-sizing: border-box; margin: 0 auto; padding: 60px; border-radius: var(--radius-panels); display: flex; width: 90%; align-items: center; &.wide-quote { width: 100%; } @media (max-width: 991px) { padding: 40px 20px; } @media (max-width: 767px) { flex-direction: column; } &.no-background { padding: 30px 0 0; background: none; @media (max-width: 767px) {  padding: 0 0 18px; } } .quote-image { display: block; max-width: 100%; min-width: 200px; margin: 0; border-radius: 50%; @media (max-width: 767px) {  max-width: 140px; } } blockquote { margin: 0; padding: 0 0 0 30px; @media (max-width: 767px) {  padding: 0;  padding-top: 20px;  text-align: center; } } p { font-size: var(--font-size-36); @media (max-width: 767px) {  font-size: var(--font-size-24); } }}.quote-flex { justify-content: normal; gap: 60px; flex-wrap: wrap; flex-direction: row; @media (max-width: 991px) { gap: 50px 30px; }}.page-quote { margin: 0; width: 100%; max-width: 46%; @media (max-width: 767px) { max-width: 100%; } p { font-size: var(--font-size-24); }}.add-page { .page-quote { background-color: #ECF0F5; padding: 24px; border-radius: 12px; margin: 0; flex: 1 0 400px; max-width: 48%; min-height: 368px; @media (max-width: 414px){  max-width: 100%; } }}.quote,.page-quote { p { line-height: var(--line-height-headings); margin: 0 0 12px; letter-spacing: var(--tracking-headings); &::before {  display: block;  margin: 0 0 18px;  width: 20px;  height: 18px;  background: url('/assets/svg/icon-quote.svg') no-repeat center center;  background-size: cover;  content: "";  @media (max-width: 767px) {  margin: 0 auto;  margin-bottom: 12px;  } } } cite { margin: 0; font-style: normal; color: var(--clr-grey); font-size: var(--font-size-16); }}/* Comparison main landing */.comparisons-header { background-color: white; background-color: white; box-shadow: 0 0 0 100vmax white; clip-path: inset(0 -100vmax); display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; width: 100%; max-width: 1128px; margin-inline: auto; padding: 30px 0 80px; @media (max-width: 1200px) { padding: 30px 15px 80px; } h1 { font-size: clamp(1.5em, var(--font-size-64), 2.8em); margin: 0 0 2.4rem; max-width: 500px; } p { max-width: 552px; margin: 0; }}.comparisons-gallery { display: grid; padding: 90px 15px; & > p{ width: 100%; max-width: 1128px; margin-inline: auto; &:last-of-type{  margin-bottom: 9rem; } }}.comparisons-gallery-article { display: grid; gap: 48px; grid-template-columns: repeat(auto-fit, minmax(auto, 522px)); margin-bottom: 9rem; align-items: center; h2 { margin: 0; font-size: var(--font-size-36); } div:last-child { display: flex; flex-direction: column; gap: 16px; justify-content: center;  p, a{  margin: 0;  font-size: var(--font-size-16); } }}.comparisons-gallery-img { position: relative; background-color: var(--clr-purple); width: 100%; max-width: 552px; height: 260px; border-radius: 12px; overflow: hidden; img { position: absolute; top: 0; left: 0; width: 100%; -o-object-fit: contain;  object-fit: contain; }}.comparisons-question { background-color: white; display: grid; justify-items: center; padding: 80px 15px; text-align: center; h2 { font-size: var(--font-size-48); margin: 0; } p { max-width: 742px; margin: 16px 0 40px; }}/* Comparisons landings */.hero-wrapper-comparison { width: 100%; background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #FFFFFF 100%), linear-gradient(0deg, #E7F1F3, #E7F1F3), #FFFFFF; display: flex; flex-direction: column; align-items: center; small { font-size: var(--font-size-14); letter-spacing: var(--tracking-regular); margin-top: 10px; } & .hero-content { padding: 70px 0; span {  margin-bottom: 24px; } h1 {  width: 100%;  max-width: 800px;  font-size: clamp(1.5em, 64px, 2.8em); } p {  font-size: var(--font-size-20);  width: 100%;  max-width: 750px; } }}.hero-comparison-nav { display: flex; justify-content: space-between; width: 100%; padding: 30px 50px; @media (max-width: 767px) { padding-bottom: 20px 15px; }}.hero-comparison-media img { width: 100%; max-width: 1128px; display: inline-block;}.proof-comparison { position: relative; padding: 42px 0; width: 100%; background: var(--clr-white); text-align: center; display: grid; gap: 3rem; justify-items: center; &>em { position: relative; margin: 0; padding-bottom: 10px; width: 100%; max-width: 1128px; display: flex; flex-direction: column; gap: 20px; align-items: center; justify-content: center; font-size: var(--font-size-14); text-transform: uppercase; font-style: normal; @media (min-width: 1024px) {  flex-direction: row; } span {  background-color: var(--clr-grey-light);  content: "";  display: block;  height: 1px;  position: relative;  width: 100%;  max-width: calc((1128px - 400px) / 2); } } div { padding: 0 0 30px; } @media (max-width: 767px) { padding: 42px 24px; } & .social-proof-comparison { margin: 0; padding: 0 24px 24px; display: grid; justify-items: center; width: 100%; max-width: 1128px; img {  margin-bottom: 30px; } }}.proof-comparison--logos { position: relative; overflow: hidden; border-bottom: 1px solid var(--clr-grey-light); justify-content: space-between; width: 100%; max-width: 1128px; @media (max-width: 767px) { flex-wrap: wrap; } @media (min-width: 768px) and (max-width: 1199px) { flex-wrap: wrap; } img { width: 100%; max-width: 100px; min-height: 12px; width: auto; margin: 15px; vertical-align: middle; @media (min-width: 768px) and (max-width: 1199px) {  margin: 10px; } @media (max-width: 767px) {  max-width: 80px;  margin: 10px; } @media (max-width: 374px) {  max-width: 65px; } &:nth-child(3) {  max-width: 120px; } &.logo-small {  max-width: 50px;  @media (max-width: 767px) {  max-width: 40px;  }  @media (max-width: 991px) {  max-width: 40px;  } } }}.comparison-analytics { background-color: #FFFFFF; h2 { font-size: var(--font-size-36); }}.comparison-content-media { display: grid; gap: 1rem; grid-template-columns: 1fr 1fr; img { max-width: 200px; }}.comparison-content { background-color: #FFFFFF; overflow-x: auto; display: grid; justify-items: center; padding: 70px 0 120px; @media (max-width: 1200px) { padding: 30px 15px 80px; } table { border-collapse: collapse; margin: 0; padding: 0; width: 100%; max-width: 1128px; margin: 0 auto; table-layout: fixed; font-size: var(--font-size-16); text-align: left; caption {  font-size: var(--font-size-16);  margin: .5em 0 .75em; } thead tr {  border-top: none; } tr {  border-top: 1px solid var(--clr-grey-light);  border-bottom: 1px solid var(--clr-grey-light); } th {  background-color: #FFFFFF; } td {  vertical-align: top;  padding: 24px 0;  &:not(:last-child) {  padding-right: 24px;  }  &:first-child {  padding-right: 120px;  }  @media screen and (max-width: 992px) {  padding: 24px;  } } td img {  margin: 16px 4px 16px 0;  vertical-align: middle; } th {  letter-spacing: .1em;  text-transform: uppercase;  font-weight: 400; } } @media screen and (max-width: 600px) { table {  border: 0;  tr {  border-bottom: 3px solid var(--clr-grey-light);  display: block;  margin-bottom: .625em;  }  td {  border-bottom: 1px solid var(--clr-grey-light);  display: block;  font-size: .8em;  }  td::before {  content: attr(data-label);  float: left;  font-weight: bold;  text-transform: uppercase;  }  td:last-child {  border-bottom: 0;  } } }}.comparison-benefits { display: flex; flex-direction: column; gap: 16px; align-items: center; background: url('/assets/img/bg-gradient--row.png'); background-position: center center; background-repeat: no-repeat; background-size: cover; /* width: 100%; */ padding: 90px clamp(0.5rem, 240px, 20vw); text-align: center; &:not(span) { color: white; } h2 { font-size: var(--font-size-48); margin: 0 0 8px; } h2, >p { width: 100%; max-width: 580px; } div { width: 100%; max-width: 1128px; display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 456px)); gap: 24px; justify-content: center; text-align: left; } div article img { margin-bottom: 24px; } div article h3 { margin-bottom: 8px; }}.comparison-members h2 { max-width: 720px; margin-bottom: 40px;}.comparison-testimonials { padding: 90px clamp(0.5rem, 140px, 2rem) 30px; background-color: white;}.testimonials--title { margin: 0 auto; width: 100%; max-width: 1128px; span { margin-bottom: 16px; } h2 { font-size: var(--font-size-48); margin: 0; } span, h2 { display: block; width: 100%; max-width: 540px; }}.use { background-color: var(--clr-white-bg); span, h2 { display: block; width: 100%; max-width: 540px; margin: 0 auto; text-align: center; } span { margin-bottom: 16px; }}.use-tabs { background-color: var(--clr-grey-light); border-radius: var(--radius-media); margin-top: 30px; padding: 32px clamp(1rem, 56px, 5.6rem); .toggle-img.visible { display: grid; }}.comparison-discover { font-size: var(--font-size-24); border-radius: 12px; h2 { margin: 16px 0; line-height: var(--line-height-display); } ul { margin: 16px 0; } li { line-height: var(--line-height-display); } li, p { font-size: var(--font-size-18); } blockquote { display: flex; flex-direction: column; gap: 16px; background-color: white; font-size: var(--font-size-18); padding: 30px; margin: 0; width: 100%; p {  margin: 0; } p::before {  display: block;  margin-bottom: 16px;  width: 20px;  height: 18px;  background: url('/assets/svg/icon-quote.svg') no-repeat center center;  background-size: cover;  content: "";  @media (max-width: 767px) {  margin: 0 auto;  margin-bottom: 12px;  } } } cite { display: block; width: 100%; font-style: normal; font-size: 16px; }}.form-comparison { h3 { margin: 72px auto 0; text-align: center; text-transform: capitalize; } form { margin-top: 12px; }}