@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; } } }}/* Academy landing */.academy-header { position: relative; width: 100%; background-color: white; display: flex; flex-direction: column; align-items: center; @media (max-width: 1280px) { padding: 0 15px; } h1{ font-size: var(--font-size-24); margin: 0; } nav { display: flex; justify-content: space-between; align-items: center; padding: 30px 0; width: 100%; max-width: 1128px; @media (max-width: 767px) {  justify-content: center;  flex-wrap: wrap;  gap: 1em; } a {  margin: 0;  &:first-child {  display: flex;  gap: 0.5rem;  align-items: center;  color: var(--clr-blue-dark);  font-size: var(--font-size-23);  font-weight: 900;  text-transform: capitalize;  &:hover {   text-decoration: none;  }  }  &:last-child {  font-size: var(--font-size-18);  color: var(--clr-grey);  text-align: right;  }  @media (max-width: 1280px) {  padding-bottom: 20px 15px;  } } } hr { width: 100%; height: 1px; margin: 0; border: none; border-bottom: 1px solid var(--clr-grey-light); } section { width: 100%; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 3rem; padding: 80px 0; max-width: 1128px; h1 {  font-size: clamp(1.5em, 64px, 3em);  margin: 0;  max-width: 576px; } p {  width: 100%;  max-width: 360px;  margin: 0; } }}.academy-video { display: flex; justify-content: center; align-items: center; width: 100%; max-width: 1128px; height: 640px; margin: 0 auto 60px; @media (max-width: 1280px) { padding: 0 15px; } @media (max-width: 992px) { max-width: 700px; height: 400px; } @media (max-width: 440px) { max-width: 360px; height: 160px; }}.academy-categorys { width: 100%; display: flex; justify-content: center; @media (max-width: 1280px) { padding: 0 15px 60px; } ul { width: 100%; max-width: 1128px; padding: 0; margin: 0; display: flex; gap: 1rem 3rem; flex-wrap: wrap; justify-content: center; align-items: center; @media (max-width: 767px) {  flex-direction: column; } li {  list-style: none;  margin: 0 0 2rem;  width: auto;  padding: 1rem 1.5rem;  text-align: center;  font-size: var(--font-size-16);  display: inline-block;  border-radius: 42px;  background: none;  line-height: 1;  transition: 0.3s ease;  &:hover,  &.active {  background: var(--clr-purple-light-65);  cursor: pointer;  }  a {  color: var(--clr-grey);  } } hr {  width: 100%;  height: 1px;  margin: 0;  border-top: 1px solid var(--clr-grey-light); } }}.tutorials { font-size: var(--font-size-36); margin: 0; @media (max-width: 1280px) { padding: 0 15px; }}.courses { width: 100%; max-width: 1128px; margin: 32px auto 54px; @media (max-width: 1280px) { padding: 0 15px; } @media (max-width: 767px) { padding: 0 15px; } &>div { display: flex; gap: 2.4rem; flex-wrap: wrap; padding: 32px 0 64px; @media (max-width: 911px) {  justify-content: center; } } p { max-width: 600px; margin: 16px 0 0; padding-bottom: 8px; font-size: var(--font-size-18); }}.courses_home { width: 100%; max-width: 1128px; margin: 64px auto 54px; @media (max-width: 1280px) { padding: 0 15px; } @media (max-width: 767px) { padding: 0 15px; } &>div { display: flex; gap: 2.4rem; flex-wrap: wrap; padding: 32px 0 64px; @media (max-width: 911px) {  justify-content: center; } } p { max-width: 600px; margin: 16px 0 0; padding-bottom: 8px; font-size: var(--font-size-18); }}.tutorial { position: relative; width: 264px; height: 301px; background-color: white; display: inline-block; border-radius: var(--radius-panels); transition: all .3s ease; color: var(--clr-black); .tutorial_img { overflow: hidden; border-radius: 12px 12px 0 0; height: 160px; width: 100%; img {  -o-object-fit: cover;  object-fit: cover;  transition: transform .3s ease;  max-width: 100%; } }}/* Flat rules for image containment (ensures compatibility alongside CSS nesting above) */.tutorial .tutorial_img { overflow: hidden; border-radius: 12px 12px 0 0; height: 160px; width: 100%;}.tutorial .tutorial_img img { -o-object-fit: cover; object-fit: cover; transition: transform .3s ease; max-width: 100%;}.tutorial { &:hover { box-shadow: 0 11px 33px #e0e0e0; text-decoration: none; } &:hover img { transform: scale(1.1); } .tutorial_info { width: 100%; height: 141px; padding: 16px 24px; display: flex; gap: 1rem; flex-direction: column; justify-content: space-between; h3 {  font-weight: 350;  letter-spacing: var(--tracking-headings);  line-height: var(--line-height-headings); } div {  display: flex;  justify-content: space-between; } div span {  color: var(--clr-mid-grey);  font-size: var(--font-size-14); } }}.academy-help { width: 100%; background-color: var(--clr-grey-light); padding: 90px 15px; h2 { text-align: center; font-size: var(--font-size-48); } p { text-align: center; margin: 0; } a{ font-size: var(--font-size-16); } ul { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 360px)); gap: 1rem; justify-content: center; padding: 60px 0 0; } li { list-style: none; text-align: center; h3 {  font-size: 2.4rem; } p {  font-size: var(--font-size-16); } }}/* Academy lessons landing */.lessons-header { position: relative; width: 100%; background-color: white; display: flex; flex-direction: column; align-items: center; @media (max-width: 1280px) { padding: 0 15px; } nav { display: flex; justify-content: space-between; align-items: center; padding: 30px 0; width: 100%; max-width: 1224px; @media (max-width: 992px) {  justify-content: center;  flex-wrap: wrap;  gap: 1em; } a {  margin: 0;  &:first-child {  display: flex;  gap: 0.5rem;  align-items: center;  color: var(--clr-blue-dark);  font-size: var(--font-size-23);  font-weight: 900;  text-transform: capitalize;  &:hover {   text-decoration: none;  }  }  &:last-child {  font-size: var(--font-size-18);  color: var(--clr-grey);  text-align: right;  }  @media (max-width: 1280px) {  padding-bottom: 20px 15px;  } } } hr { width: 100%; height: 1px; margin: 0; border-top: 1px solid var(--clr-grey-light); } section { width: 100%; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 3rem; padding: 80px 0; max-width: 1128px; h1 {  font-size: clamp(48px, var(--font-size-64), 6rem);  margin: 0;  max-width: 576px; } p {  width: 100%;  max-width: 360px;  margin: 0; } }}/* Lessons content */.academy-lesson { position: relative; width: 100%; max-width: 1224px; margin: 40px auto 80px; display: flex; flex-wrap: wrap; gap: 2.4rem; flex-direction: row-reverse; justify-content: center; align-items: flex-start; @media (min-width: 1240px) { justify-content: space-between; } p, li { font-size: var(--font-size-18); } section { width: 100%; max-width: 808px; background-color: var(--clr-white); padding: 40px; border-radius: 12px; h1 {  margin-bottom: 16px;  font-size: clamp(1.5em, 48px, 2.5em); } h2 {  margin: 32px 0 16px; } span {  font-size: var(--font-size-16);  color: var(--clr-mid-grey);  padding: 0 4px; } >div:not(div:last-child) {  border-top: 1px solid var(--clr-grey-light);  margin-top: 32px; } .wistia_responsive_padding {  margin-bottom: 3rem; } } aside { width: 100%; max-width: 390px; background-color: var(--clr-white); padding: 32px 0; }}.lesson-resources { background-color: var(--clr-grey-light); padding: 24px; margin-bottom: 90px; border-radius: var(--radius-panels); h3 { font-size: var(--font-size-24); font-weight: 300; } ul { padding: 0; li {  list-style: none; } }}/* Academy lessons menu */.lessons-menu { border-radius: 12px; @media (min-width: 1240px) { position: sticky; left: calc((100% - (390px + 808px))/2); top: 0; } a:not(.accordion_content a) { display: inline-block; margin: 1.5rem 2.2rem; font-size: var(--font-size-16); img {  margin-right: 16px; } @media (max-width: 1024px) {  display: none; } }}.accordion { max-width: 100%; .contentBox { position: relative; margin: 0; border-top: 1px solid var(--clr-grey-light); .label {  position: relative;  margin: 1.5rem 2.2rem;  text-transform: uppercase;  font-weight: 400;  font-size: var(--font-size-16);  cursor: pointer;  &::before {  content: url("/assets/svg/icon-plus.svg");  width: 16px;  height: 16px;  font-weight: normal;  padding: 0;  position: absolute;  right: 0;  transition: all 0.15s ease-in-out;  } } .accordion_content {  position: relative;  margin: 0 24px;  background-color: white;  height: min-content;  max-height: 0;  overflow: hidden;  display: flex;  gap: 1em;  flex-direction: column;  transition: all 200ms linear;  border-left: 1px solid var(--clr-grey-light);  a {  font-weight: 300;  color: var(--clr-black);  margin: 0 24px;  font-size: var(--font-size-16);  letter-spacing: var(--tracking-regular);  } } &.active .accordion_content {  max-height: 1200px;  margin: 24px 24px; } &.active .label::before {  transform: rotate(45deg);  transform-origin: center center; } }}.academy_menu_active { color: var(--clr-black) !important; text-decoration: underline 1px dashed #e092e3; text-underline-offset: 4px;}.previous-next-lesson { display: flex; justify-content: space-between; align-items: center; gap: 2.4rem; flex-wrap: wrap; @media (max-width: 767px) { justify-content: center; } a { width: 100%; max-width: 240px; text-align: center; }}.blog_main { width: 100%; max-width: 1128px; background-color: var(--clr-white); padding: 4em 0; display: flex; justify-content: center; align-items: flex-start; text-align: center; gap: 3em; flex-wrap: wrap; @media (min-width: 1023px) { justify-content: space-between; text-align: left; flex-wrap: nowrap; } img { width: 100%; max-width: 672px; border-radius: var(--radius-media); }}.blog_card { display: flex; gap: 16px; flex-direction: column; justify-content: space-between;}.blog_card aside { display: flex; gap: 8px; align-items: center; color: var(--clr-mid-grey);}.blog_card aside span { font-size: var(--font-size-14);}.blog_card a { align-self: center;}@media (min-width: 1023px) { .blog_card a { align-self: flex-start; }}.blog_card a,.blog_card h3 { font-weight: 300; margin: 0;}.blog_card h3 { min-height: 48px;}.blog_card h2 { margin: 0; font-weight: 350; font-size: var(--font-size-36);}.blog_card p { color: var(--clr-mid-grey); font-size: var(--font-size-16); margin: 0;}.blog_card ul { display: flex; flex-wrap: wrap; gap: 8px; padding: 0; margin: 0; justify-content: center; align-items: center;}@media (min-width: 1024px) { .blog_card ul { justify-content: flex-start; text-align: left; }}.blog_card ul li { font-size: var(--font-size-14); padding: 3px 12px; text-transform: capitalize; color: var(--clr-mid-grey); background-color: var(--clr-grey-light); border-radius: 42px;}.blog_card ul li:last-of-type { margin: 0;}.blog_card hr { border: none; border-bottom: solid 1px var(--clr-grey-lines); width: 100%; margin: 1rem 0;}.cat_post { list-style: none; background-color: var(--clr-grey-light); border-radius: 8px; margin: 0; display: flex; align-items: center; a { font-size: var(--font-size-14); text-transform: capitalize; color: var(--clr-mid-grey); }}.blog-categories { width: 100%; max-width: 920px; padding: 46px 0 32px; margin: 0 auto; display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; align-items: center;}@media (max-width: 767px) { .blog-categories { padding: 46px 15px 32px; }}.blog-categories li { list-style: none; margin: 0 0 2rem; width: auto; padding: 1rem 1.5rem; text-align: center; font-size: var(--font-size-16); display: inline-block; border-radius: 42px; background: none; line-height: 1; transition: 0.3s ease;}.blog-categories li a { color: var(--clr-black); font-size: var(--font-size-16);}.blog-categories li:hover,.blog-categories li.active { background: var(--clr-purple-light-65); cursor: pointer; border-radius: 42px;}.blog_populars { margin: 0 auto; width: 100%; max-width: 1128px;}@media (max-width: 1280px) { .blog_populars { padding: 0 15px; }}.blog_populars hr { border: none; border-bottom: 1px solid var(--clr-grey-lines); margin: 0;}.blog_populars h2 { font-size: var(--font-size-36);}.blog_populars div:not(article div) { display: grid; gap: 2rem; align-items: flex-end; justify-content: center;}.blog_populars div:not(article div) article { display: flex; gap: 1.5rem; justify-content: center; align-items: center; width: 100%; padding-bottom: 16px; border-bottom: 1px solid var(--clr-grey-lines);}@media (max-width: 600px) { .blog_populars div:not(article div) article { flex-wrap: wrap; }}.blog_populars div:not(article div) article div { display: flex; flex-direction: column; overflow: hidden; border-radius: 8px;}.blog_populars div:not(article div) article img { width: 200px; height: 118px; -o-object-fit: cover; object-fit: cover; transition: transform 200ms ease-in;}.blog_populars div:not(article div) article img:hover { transform: scale(1.1);}.blog_populars div:not(article div) article h3 { margin: 0.5rem 0 1rem;}.blog_populars div:not(article div) article h3 a { color: var(--clr-black);}@media (min-width: 992px) { .blog_populars div:not(article div) { grid-template-columns: 1fr 1fr; }}.blog_populars .blog_card { gap: 0; justify-content: center;}.blog_populars h3 { margin-bottom: 1em;}.blog_populars blockquote { font-size: clamp(1em, 20px, 3em); font-weight: 700; line-height: var(--line-height-headings); background-color: var(--clr-grey-light); padding: 4rem; border-radius: 12px;}.blog_populars blockquote p { margin: 0;}.blog_populars blockquote em { font-weight: 400; color: var(--clr-grey); line-height: var(--line-height-regular); font-size: clamp(1em, 20px, 3em);}.blog_populars blockquote::before { content: '"'; font-size: 2em; font-family: "Times New Roman", serif;}.blog_content_home { display: grid; gap: 1em; grid-template-columns: repeat(auto-fill, minmax(354px, 1fr)); padding: 1em 15px 1.5em;}.blog_content_home li { list-style: none; margin: 0;}.blog_content_home li a { width: 100%;}@media (max-width: 320px) { .blog_content_home li a { width: 88%; }}.blog_content_home li a .tutorial_img { height: 190px;}.blog_content_home li:nth-child(1) { order: 1;}.blog_content_home li:nth-child(2) { order: 2;}.blog_content_home li:nth-child(3) { order: 3;}.blog_content_home li:nth-child(4) { order: 4;}.blog_content_home li:nth-child(5) { order: 5;}.blog_content_home li:nth-child(6) { order: 6;}.blog_content_home li:nth-child(7) { order: 8;}.blog_content_home li:nth-child(8) { order: 9;}.blog_content_home li:nth-child(9) { order: 10;}.blog_content_home li:nth-child(10) { order: 11;}.blog_content_home li:nth-child(11) { order: 12;}.blog_content_home li:nth-child(12) { order: 13;}.blog_content_home li .blog_card { justify-content: space-between; gap: 8px; height: 235px; padding: 22px 24px;}.blog_content_home li .blog_card h3 { margin: 0;}.blog_content_home li .blog_card span { font-size: var(--font-size-14); color: var(--clr-grey);}.blog_content_home li .blog_card div { justify-self: end; display: grid; gap: 16px;}.blog_content_home li .blog_card div ul { border-top: 1px solid var(--clr-grey-lines); padding-top: 16px;}.blog_content_home li .blog_card div ul li { font-size: var(--font-size-14);}.blog_content_home .suscription_blog { border-radius: var(--radius-panels); order: 7; margin: 80px 0; padding: 3em 1em; color: var(--clr-white); display: flex; flex-direction: column; gap: 1em; text-align: center; align-items: center; grid-column-start: 1; grid-column-end: -1;}.blog_content_home .suscription_blog h2 { margin: 0 auto;}.blog_content_home .suscription_blog p { max-width: 720px; margin: 0;}.blog_content_home .suscription_blog form { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; width: 100%; max-width: 550px;}.blog_content_home .suscription_blog form label { flex-grow: 2;}.blog_content_home .suscription_blog form label input { width: 100%; height: 50px; padding: 1rem; border: 1px solid var(--clr-white); color: white; background: transparent; font-size: var(--font-size-18);}.blog_content_home .suscription_blog form label input::-webkit-input-placeholder { color: var(--clr-white); font-size: var(--font-size-16); font-weight: 300;}.blog_content_home .suscription_blog form label input::-moz-placeholder { color: var(--clr-white); font-size: var(--font-size-16); font-weight: 300;}.blog_content_home .suscription_blog form label input:-ms-input-placeholder { color: var(--clr-white); font-size: var(--font-size-16); font-weight: 300;}.blog_content_home .suscription_blog form label input::-ms-input-placeholder { color: var(--clr-white); font-size: var(--font-size-16); font-weight: 300;}.blog_content_home .suscription_blog form label input::placeholder { color: var(--clr-white); font-size: var(--font-size-16); font-weight: 300;}.blog_content_home .suscription_blog form label input:focus,.blog_content_home .suscription_blog form label input:active { border-color: transparent;}.blog_content_home .suscription_blog form button { margin: 0; background-color: var(--clr-white); height: 50px; padding: 12px 24px; border: 1px solid var(--clr-white); display: flex; justify-content: center; align-items: center; gap: 4px; font-size: var(--font-size-18); color: var(--clr-grey);}@media (max-width: 767px) { .blog_content_home .suscription_blog form button { width: 100%; }}.blog_content_home .suscription_blog form button:hover { background: var(--clr-white-hover);}.blog_content_home .blog_card { padding: 1em; gap: 0;}.blog_content_home .blog_card h3 { line-height: var(--line-height-headings); font-weight: 400; margin-bottom: 1rem;}.blog_content_home .tutorial { height: -webkit-max-content; height: -moz-max-content; height: max-content;}.blog_content_home li a { width: 100%; display: block;}.blog_content_home li a .tutorial_img { height: 190px;}.blog_content_home .tutorial { height: -webkit-max-content; height: -moz-max-content; height: max-content;}.blog_content { display: grid; gap: 1em; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); padding: 1em 15px 3em;}.blog_content li { list-style: none; margin: 0;}.blog_content li a { width: 100%;}@media (max-width: 320px) { .blog_content li a { width: 88%; }}.blog_content li a .tutorial_img { height: 190px;}.blog_content li:nth-child(1) { order: 1;}.blog_content li:nth-child(2) { order: 2;}.blog_content li:nth-child(3) { order: 3;}.blog_content li:nth-child(4) { order: 4;}.blog_content li:nth-child(5) { order: 5;}.blog_content li:nth-child(6) { order: 6;}.blog_content li:nth-child(7) { order: 8;}.blog_content li:nth-child(8) { order: 9;}.blog_content li:nth-child(9) { order: 10;}.blog_content li:nth-child(10) { order: 11;}.blog_content li:nth-child(11) { order: 12;}.blog_content li:nth-child(12) { order: 13;}.blog_content li .blog_card { justify-content: space-between; gap: 8px; height: 169px; padding: 16px 24px;}.blog_content li .blog_card h3 { margin: 0;}.blog_content li .blog_card span { font-size: var(--font-size-14); color: var(--clr-grey);}.blog_content li .blog_card div { justify-self: end; display: grid; gap: 16px;}.blog_content li .blog_card div ul { border-top: 1px solid var(--clr-grey-lines); padding-top: 16px;}.blog_content li .blog_card div ul li { font-size: var(--font-size-14);}.blog_content .suscription_blog { border-radius: var(--radius-panels); order: 7; margin: 80px 0; padding: 3em 1em; color: var(--clr-white); display: flex; flex-direction: column; gap: 1em; text-align: center; align-items: center; grid-column-start: 1; grid-column-end: -1;}.blog_content .suscription_blog h2 { margin: 0 auto;}.blog_content .suscription_blog p { max-width: 720px; margin: 0;}.blog_content .suscription_blog form { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; width: 100%; max-width: 550px;}.blog_content .suscription_blog form label { flex-grow: 2;}.blog_content .suscription_blog form label input { width: 100%; height: 50px; padding: 1rem; border: 1px solid var(--clr-white); color: white; background: transparent; font-size: var(--font-size-18);}.blog_content .suscription_blog form label input::-webkit-input-placeholder { color: var(--clr-white); font-size: var(--font-size-16); font-weight: 300;}.blog_content .suscription_blog form label input::-moz-placeholder { color: var(--clr-white); font-size: var(--font-size-16); font-weight: 300;}.blog_content .suscription_blog form label input:-ms-input-placeholder { color: var(--clr-white); font-size: var(--font-size-16); font-weight: 300;}.blog_content .suscription_blog form label input::-ms-input-placeholder { color: var(--clr-white); font-size: var(--font-size-16); font-weight: 300;}.blog_content .suscription_blog form label input::placeholder { color: var(--clr-white); font-size: var(--font-size-16); font-weight: 300;}.blog_content .suscription_blog form label input:focus,.blog_content .suscription_blog form label input:active { border-color: transparent;}.blog_content .suscription_blog form button { margin: 0; background-color: var(--clr-white); height: 50px; padding: 12px 24px; border: 1px solid var(--clr-white); display: flex; justify-content: center; align-items: center; gap: 4px; font-size: var(--font-size-18); color: var(--clr-grey);}@media (max-width: 767px) { .blog_content .suscription_blog form button { width: 100%; }}.blog_content .suscription_blog form button:hover { background: var(--clr-white-hover);}.blog_content .blog_card { padding: 1em; gap: 0;}.blog_content .blog_card h3 { line-height: var(--line-height-headings); font-weight: 400; margin-bottom: 1rem;}.blog_content .tutorial { height: -webkit-max-content; height: -moz-max-content; height: max-content;}/* Flat rules for blog_content card layout */.blog_content li { list-style: none; margin: 0;}.blog_content li a { width: 100%; display: block;}.blog_content li a .tutorial_img { height: 190px;}.blog_content .tutorial { height: -webkit-max-content; height: -moz-max-content; height: max-content;}.pagination { display: flex; justify-content: center; gap: 1rem; width: 100%; max-width: 1128px; padding: 1em 15px 3em; margin: 0 auto; border-top: 1px solid var(--clr-grey-lines); text-align: center;}.pagination a:not(.first_last_paginator) { display: inline-block; padding: 16px 20px; background: none; line-height: 1; transition: 0.3s ease;}.pagination a:not(.first_last_paginator):hover { cursor: pointer;}.pagination span,.pagination .first_last_paginator { display: inline-block; padding: 16px 20px; background: none; line-height: 1; transition: 0.3s ease; color: var(--clr-mid-grey);}.pagination .pagination_active { background: var(--clr-purple-light-65); cursor: pointer; border-radius: 50%;}.categories-page { width: 100%; display: grid; gap: 1em; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); padding: 1em 15px 3em;}.categories-page li { list-style: none; margin: 0;}.categories-page li .tutorial { height: auto; width: 100%;}.categories-page li .blog_card { justify-content: space-between; gap: 8px; height: min-content; min-height: 185px; padding: 16px 24px;}.categories-page li .blog_card h3 { margin: 0;}.categories-page li .blog_card span { font-size: var(--font-size-14); color: var(--clr-grey);}.categories-page li .blog_card div { justify-self: end; display: grid; gap: 16px;}.categories-page li .blog_card div ul { border-top: 1px solid var(--clr-grey-lines); padding-top: 16px;}.categories-page li .blog_card div ul li { font-size: var(--font-size-14);}.categories-page .category-hero { grid-column-start: 1; grid-column-end: -1; display: flex; flex-wrap: wrap; align-items: center; margin-bottom: 4em;}.categories-page .category-hero img { border-radius: 12px; -webkit-border-radius: 12px; -moz-border-radius: 12px; -ms-border-radius: 12px; -o-border-radius: 12px; flex: 2; width: 100%; max-width: 744px;}.categories-page .category-hero .blog_card { flex: 1; max-width: 744px;} .categories-text { margin: 0 auto 4em; width: 100%; max-width: 1128px; text-align: center; }.post-header { position: -webkit-sticky; position: sticky; top: 0; z-index: 100;}.article_hero { background-color: var(--clr-white); div:not(.article_hero_tags) { width: 100%; max-width: 1128px; margin: 0 auto; padding: 1.5em 0; display: flex; flex-direction: column; align-items: flex-start; gap: 1rem; @media (min-width: 1024px) {  padding: 4em 0 3em; } aside {  display: flex;  gap: 8px;  align-items: center;  color: var(--clr-mid-grey);  span {  font-size: var(--font-size-14);  } } h1 {  margin: 0;  max-width: 840px; } .article_hero_tags {  display: flex;  gap: 1rem;  a {  background-color: var(--clr-white-bg);  color: var(--clr-mid-grey);  border-radius: 42px;  padding: 6px 12px;  font-size: var(--font-size-14);  } } img {  width: max-content;  max-width: 100%;  border-radius: var(--radius-media);  margin: 2em 0 0; } } @media (max-width: 1280px) { padding: 0 15px; }}.posts { position: relative; width: 100%; display: flex; justify-content: center; align-items: flex-start; flex-direction: row-reverse; background-color: var(--clr-white); @media (max-width: 1280px) { padding: 0 15px; } @media (max-width: 992px) { align-items: center; flex-direction: column; } p, li { font-size: var(--font-size-20); } article { width: 100%; max-width: 744px; margin: 0 auto; h2 {  /* font-size: var(--font-size-36); */  margin: 0 0 16px; }  h3 {  /* font-size: 2.8rem; */  margin: 0 0 16px; }  img:not(.social-proof--logos img) {  width: 100%;  max-width: fit-content;  border-radius: var(--radius-media);  z-index: 1;  display: block;  margin: 0 auto; }  .social-proof--logos {  border-top: none;  padding: 0 32px;  display: flex;  gap: 24px;  justify-content: space-between;  flex-wrap: wrap;  img {  margin: 0;  }  } .post-cite{  display: grid;  gap: 2rem;  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));  margin-bottom: 2rem;  align-items: center; } table {  border-collapse: collapse;  margin: 0;  padding: 0;  width: 100%;  max-width: 1128px;  margin: 24px 0;  table-layout: fixed;  font-size: var(--font-size-16);  text-align: left;  caption {  font-size: var(--font-size-16);  margin: 0.5em 0 0.75em;  }  thead tr {  border-top: none;  }  tr {  border-top: 1px solid var(--clr-grey-light);  border-bottom: 1px solid var(--clr-grey-light);  display: flex;  gap: 2em;  align-items: center;  }  th {  background-color: #ffffff;  }  td {  vertical-align: top;  padding: 24px 0;  min-width: calc(100% - 85%);  @media screen and (max-width: 992px) {   padding: 24px;  }  }  th {  letter-spacing: 0.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: 0.625em;  }  td {   border-bottom: 1px solid var(--clr-grey-light);   display: block;   font-size: 0.8em;  }  td::before {   content: attr(data-label);   float: left;   font-weight: bold;   text-transform: uppercase;  }  td:last-child {   border-bottom: 0;  }  } } } #share-buttons { width: 100%; display: flex; justify-content: center; align-items: center; gap: 0.5rem; max-width: 50vw; position: relative; top: 40px; @media (min-width: 992px) {  flex-direction: column;  position: -webkit-sticky;  position: sticky;  left: calc((100% - 744px) / 3);  top: 130px;  max-width: 3em; } @media (min-width: 1400px) {  left: calc((100% - 744px) / 2.5); } h4 {  font-weight: 300;  font-size: var(--font-size-20);  text-align: center;  margin: 0;  grid-column: span 3; } a {  background-color: var(--clr-blue-light);  border-radius: 100%;  display: grid;  place-content: center;  width: 40px;  height: 40px;  cursor: pointer;  svg {  width: 1em;  height: 1em;  fill: var(--clr-blue-soft);  } } } blockquote { background-color: var(--clr-bg-blockquote); position: relative; margin: 3em 0; padding: 1em; p {  margin: 0; } &::before {  content: "";  position: relative;  top: 0;  left: 0;  background: url("/assets/svg/icon-quote.svg") no-repeat;  height: 32px;  display: block;  width: 100%;  font-size: 3em; } }}.article_footer { display: flex; flex-wrap: wrap; gap: 1em; justify-content: space-between; width: 100%; border-bottom: 1px solid var(--clr-grey-lines); border-top: 1px solid var(--clr-grey-lines); padding: 1.5em 0; ul { padding: 0; margin: 0; display: flex; justify-content: center; align-items: center; gap: 1rem; li {  margin: 0;  border-radius: 42px;  a {  padding: 8px 12px;  } } } aside { display: flex; gap: 8px; align-items: center; color: var(--clr-mid-grey); } span { font-size: var(--font-size-14); }}.post_footer { background-color: white; width: 100%; margin: 0; padding: 4.5em 15px; display: flex; justify-content: center; align-items: center; flex-direction: column; .suscription_blog { width: 100%; max-width: 1128px; border-radius: var(--radius-panels); order: 7; margin: 0 auto; padding: 3em 1em; color: var(--clr-white); display: flex; flex-direction: column; gap: 1em; align-items: center; background: url("/assets/img/bg-gradient--footer.png") center center no-repeat var(--clr-purple); background-size: cover; h2 {  margin: 0 auto;  font-size: var(--font-size-48); } p {  max-width: 720px;  margin: 0; } form {  display: flex;  flex-wrap: wrap;  justify-content: center;  align-items: center;  width: 100%;  max-width: 550px;  label {  flex-grow: 2;  input {   width: 100%;   height: 50px;   padding: 1rem;   border: 1px solid var(--clr-white);   background: transparent;   color: white;   &::-webkit-input-placeholder {   color: var(--clr-white);   font-size: var(--font-size-16);   font-weight: 300;   }   &::-moz-placeholder {   color: var(--clr-white);   font-size: var(--font-size-16);   font-weight: 300;   }   &:-ms-input-placeholder {   color: var(--clr-white);   font-size: var(--font-size-16);   font-weight: 300;   }   &::-ms-input-placeholder {   color: var(--clr-white);   font-size: var(--font-size-16);   font-weight: 300;   }   &::placeholder {   color: var(--clr-white);   font-size: var(--font-size-16);   font-weight: 300;   }   &:focus,   &:active {   border-color: transparent;   }  }  }  button {  margin: 0;  background-color: var(--clr-white);  height: 50px;  padding: 1rem 2em;  border: 1px solid var(--clr-white);  display: flex;  justify-content: center;  align-items: center;  gap: 4px;  font-size: var(--font-size-18);  color: var(--clr-grey);  @media (max-width: 767px) {   width: 100%;  }  &:hover {   background: var(--clr-white-hover);  }  } } }}.suscription { background-color: var(--clr-white); display: grid; place-content: center; padding: 4.5em 0;}.post_related { background-color: var(--clr-white); display: flex; flex-direction: column; justify-content: center; align-items: center; div { width: 100%; max-width: 1128px; .blog_card {  height: auto; } }}