:root {
  --font-family-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
  --line-height-headers: 1.1;
  --line-height-body: 1.5;
  --font-size-xs: 0.75rem;
  --font-size-s: 0.875rem;
  --font-size-m: 1rem;
  --font-size-l: 1.125rem;
  --font-size-xl: 1.25rem;
  --font-size-xxl: 1.5rem;
  --font-size-xxxl: 2rem;
  --font-size-xxxxl: 2.5rem;
  --color-text-header: hsl(0, 1%, 16%);
  --color-text-body: hsl(0, 5%, 25%);
  --color-text-muted: hsl(0, 1%, 44%);
  --color-text-white: hsl(255, 100%, 100%);
  --color-text-dark: #151415;
  --color-text-gray: #616061;
  --color-text-white: #F9F8FC;
  --color-text-down: #EB4747;
  --color-text-success: #47EB9C;
  --color-text-purple: #7047EB;
  --color-text-green: #01B295;
  --space-xxxs: 0.25rem;
  --space-xxs: 0.375rem;
  --space-xs: 0.5rem;
  --space-s: 0.75rem;
  --space-m: 1rem;
  --space-l: 1.5rem;
  --space-xl: 2rem;
  --space-xxl: 2.5rem;
  --space-xxxl: 3rem;
  --space-xxxxl: 4rem;
  --color-primary: hsl(256, 48%, 42%);
  --color-primary-rotate: hsl(236, 48%, 42%);
  --color-primary-bg: hsl(0, 85%, 96%);
  --color-secondary: hsl(101, 45%, 56%);
  --color-secondary-rotate: hsl(120, 45%, 56%);
  --color-tertiary: hsl(49, 89%, 64%);
  --color-glint: hsl(210, 100%, 82%);
  --color-white: hsl(0, 0%, 100%);
  --color-background: var(--color-white)
  --color-light: hsl(0, 6%, 93%);
  --color-dark: var(--color-text-header);
  --border-radius: 0.5rem;
  --border-radius-full: 100rem;
  --border: solid 2px var(--gray-300);
  --shadow-large: 2px 4px 10px hsl(0 0% 0% / 0.1);
  --shadow-small: 1px 3px 6px hsl(0 0% 0% / 0.1);
  --base-white: #ffffff;
  --base-black: #000000;
  --gray-25: #fcfcfd;
  --gray-50: #f9fafb;
  --gray-100: #f2f4f7;
  --gray-200: #eaecf0;
  --gray-300: #d0d5dd;
  --gray-400: #98a2b3;
  --gray-500: #667085;
  --gray-600: #475467;
  --gray-700: #344054;
  --gray-800: #1d2939;
  --gray-900: #101828;
  --primary-25: #fcfaff;
  --primary-50: #f9f5ff;
  --primary-100: #f4ebff;
  --primary-200: #e9d7fe;
  --primary-300: #d6bbfb;
  --primary-400: #b692f6;
  --primary-500: #9e77ed;
  --primary-600: #7f56d9;
  --primary-700: #6941c6;
  --primary-800: #53389e;
  --primary-900: #120a2d;
  --error-25: #fffbfa;
  --error-50: #fef3f2;
  --error-100: #fee4e2;
  --error-200: #fecdca;
  --error-300: #fda29b;
  --error-400: #f97066;
  --error-500: #f04438;
  --error-600: #d92d20;
  --error-700: #b42318;
  --error-800: #912018;
  --error-900: #7a271a;
  --warning-25: #fffcf5;
  --warning-50: #fffaeb;
  --warning-100: #fef0c7;
  --warning-200: #fedf89;
  --warning-300: #fec84b;
  --warning-400: #fdb022;
  --warning-500: #f79009;
  --warning-600: #dc6803;
  --warning-700: #b54708;
  --warning-800: #93370d;
  --warning-900: #7a2e0e;
  --success-25: #f6fef9;
  --success-50: #ecfdf3;
  --success-100: #d1fadf;
  --success-200: #a6f4c5;
  --success-300: #6ce9a6;
  --success-400: #32d583;
  --success-500: #12b76a;
  --success-600: #039855;
  --success-700: #027a48;
  --success-800: #05603a;
  --success-900: #054f31;
  --gray-blue-25: #fcfcfd;
  --gray-blue-50: #f8f9fc;
  --gray-blue-100: #eaecf5;
  --gray-blue-200: #d5d9eb;
  --gray-blue-300: #b3b8db;
  --gray-blue-400: #717bbc;
  --gray-blue-500: #4e5ba6;
  --gray-blue-600: #3e4784;
  --gray-blue-700: #363f72;
  --gray-blue-800: #293056;
  --gray-blue-900: #101323;
  --gray-cool-25: #fcfcfd;
  --gray-cool-50: #f9f9fb;
  --gray-cool-100: #eff1f5;
  --gray-cool-200: #dcdfea;
  --gray-cool-300: #b9c0d4;
  --gray-cool-400: #7d89b0;
  --gray-cool-500: #5d6b98;
  --gray-cool-600: #4a5578;
  --gray-cool-700: #404968;
  --gray-cool-800: #30374f;
  --gray-cool-900: #111322;
  --gray-modern-25: #fcfcfd;
  --gray-modern-50: #f8fafc;
  --gray-modern-100: #eef2f6;
  --gray-modern-200: #e3e8ef;
  --gray-modern-300: #cdd5df;
  --gray-modern-400: #9aa4b2;
  --gray-modern-500: #697586;
  --gray-modern-600: #4b5565;
  --gray-modern-700: #364152;
  --gray-modern-800: #202939;
  --gray-modern-900: #121926;
  --gray-neutral-25: #fcfcfd;
  --gray-neutral-50: #f9fafb;
  --gray-neutral-100: #f3f4f6;
  --gray-neutral-200: #e5e7eb;
  --gray-neutral-300: #d2d6db;
  --gray-neutral-400: #9da4ae;
  --gray-neutral-500: #6c737f;
  --gray-neutral-600: #4d5761;
  --gray-neutral-700: #384250;
  --gray-neutral-800: #1f2a37;
  --gray-neutral-900: #111927;
  --gray-iron-25: #fcfcfc;
  --gray-iron-50: #fafafa;
  --gray-iron-100: #f4f4f5;
  --gray-iron-200: #e4e4e7;
  --gray-iron-300: #d1d1d6;
  --gray-iron-400: #a0a0ab;
  --gray-iron-500: #70707b;
  --gray-iron-600: #51525c;
  --gray-iron-700: #3f3f46;
  --gray-iron-800: #26272b;
  --gray-iron-900: #18181b;
  --gray-true-25: #fcfcfc;
  --gray-true-50: #fafafa;
  --gray-true-100: #f5f5f5;
  --gray-true-200: #e5e5e5;
  --gray-true-300: #d6d6d6;
  --gray-true-400: #a3a3a3;
  --gray-true-500: #737373;
  --gray-true-600: #525252;
  --gray-true-700: #424242;
  --gray-true-800: #292929;
  --gray-true-900: #141414;
  --gray-warm-25: #fdfdfc;
  --gray-warm-50: #fafaf9;
  --gray-warm-100: #f5f5f4;
  --gray-warm-200: #e7e5e4;
  --gray-warm-300: #d7d3d0;
  --gray-warm-400: #a9a29d;
  --gray-warm-500: #79716b;
  --gray-warm-600: #57534e;
  --gray-warm-700: #44403c;
  --gray-warm-800: #292524;
  --gray-warm-900: #1c1917;
  --moss-25: #fafdf7;
  --moss-50: #f5fbee;
  --moss-100: #e6f4d7;
  --moss-200: #ceeab0;
  --moss-300: #acdc79;
  --moss-400: #86cb3c;
  --moss-500: #669f2a;
  --moss-600: #4f7a21;
  --moss-700: #3f621a;
  --moss-800: #335015;
  --moss-900: #2b4212;
  --green-light-25: #fafef5;
  --green-light-50: #f3fee7;
  --green-light-100: #e3fbcc;
  --green-light-200: #d0f8ab;
  --green-light-300: #a6ef67;
  --green-light-400: #85e13a;
  --green-light-500: #66c61c;
  --green-light-600: #4ca30d;
  --green-light-700: #3b7c0f;
  --green-light-800: #326212;
  --green-light-900: #2b5314;
  --green-25: #f6fef9;
  --green-50: #edfcf2;
  --green-100: #d3f8df;
  --green-200: #aaf0c4;
  --green-300: #73e2a3;
  --green-400: #3ccb7f;
  --green-500: #16b364;
  --green-600: #099250;
  --green-700: #087443;
  --green-800: #095c37;
  --green-900: #084c2e;
  --teal-25: #f6fefc;
  --teal-50: #f0fdf9;
  --teal-100: #ccfbef;
  --teal-200: #99f6e0;
  --teal-300: #5fe9d0;
  --teal-400: #2ed3b7;
  --teal-500: #15b79e;
  --teal-600: #0e9384;
  --teal-700: #107569;
  --teal-800: #125d56;
  --teal-900: #134e48;
  --cyan-25: #f5feff;
  --cyan-50: #ecfdff;
  --cyan-100: #cff9fe;
  --cyan-200: #a5f0fc;
  --cyan-300: #67e3f9;
  --cyan-400: #22ccee;
  --cyan-500: #06aed4;
  --cyan-600: #088ab2;
  --cyan-700: #0e7090;
  --cyan-800: #155b75;
  --cyan-900: #164c63;
  --blue-light-25: #f5fbff;
  --blue-light-50: #f0f9ff;
  --blue-light-100: #e0f2fe;
  --blue-light-200: #b9e6fe;
  --blue-light-300: #7cd4fd;
  --blue-light-400: #36bffa;
  --blue-light-500: #0ba5ec;
  --blue-light-600: #0086c9;
  --blue-light-700: #026aa2;
  --blue-light-800: #065986;
  --blue-light-900: #0b4a6f;
  --blue-25: #f5faff;
  --blue-50: #eff8ff;
  --blue-100: #d1e9ff;
  --blue-200: #b2ddff;
  --blue-300: #84caff;
  --blue-400: #53b1fd;
  --blue-500: #2e90fa;
  --blue-600: #1570ef;
  --blue-700: #175cd3;
  --blue-800: #1849a9;
  --blue-900: #194185;
  --blue-dark-25: #f5f8ff;
  --blue-dark-50: #eff4ff;
  --blue-dark-100: #d1e0ff;
  --blue-dark-200: #b2ccff;
  --blue-dark-300: #84adff;
  --blue-dark-400: #528bff;
  --blue-dark-500: #2970ff;
  --blue-dark-600: #155eef;
  --blue-dark-700: #004eeb;
  --blue-dark-800: #0040c1;
  --blue-dark-900: #00359e;
  --indigo-25: #f5f8ff;
  --indigo-50: #eef4ff;
  --indigo-100: #e0eaff;
  --indigo-200: #c7d7fe;
  --indigo-300: #a4bcfd;
  --indigo-400: #8098f9;
  --indigo-500: #6172f3;
  --indigo-600: #444ce7;
  --indigo-700: #3538cd;
  --indigo-800: #2d31a6;
  --indigo-900: #2d3282;
  --violet-25: #fbfaff;
  --violet-50: #f5f3ff;
  --violet-100: #ece9fe;
  --violet-200: #ddd6fe;
  --violet-300: #c3b5fd;
  --violet-400: #a48afb;
  --violet-500: #875bf7;
  --violet-600: #7839ee;
  --violet-700: #6927da;
  --violet-800: #5720b7;
  --violet-900: #491c96;
  --purple-25: #fafaff;
  --purple-50: #f4f3ff;
  --purple-100: #ebe9fe;
  --purple-200: #d9d6fe;
  --purple-300: #bdb4fe;
  --purple-400: #9b8afb;
  --purple-500: #7a5af8;
  --purple-600: #6938ef;
  --purple-700: #5925dc;
  --purple-800: #4a1fb8;
  --purple-900: #3e1c96;
  --fuchsia-25: #fefaff;
  --fuchsia-50: #fdf4ff;
  --fuchsia-100: #fbe8ff;
  --fuchsia-200: #f6d0fe;
  --fuchsia-300: #eeaafd;
  --fuchsia-400: #e478fa;
  --fuchsia-500: #d444f1;
  --fuchsia-600: #ba24d5;
  --fuchsia-700: #9f1ab1;
  --fuchsia-800: #821890;
  --fuchsia-900: #6f1877;
  --pink-25: #fef6fb;
  --pink-50: #fdf2fa;
  --pink-100: #fce7f6;
  --pink-200: #fcceee;
  --pink-300: #faa7e0;
  --pink-400: #f670c7;
  --pink-500: #ee46bc;
  --pink-600: #dd2590;
  --pink-700: #c11574;
  --pink-800: #9e165f;
  --pink-900: #851651;
  --rose-25: #fff5f6;
  --rose-50: #fff1f3;
  --rose-100: #ffe4e8;
  --rose-200: #fecdd6;
  --rose-300: #fea3b4;
  --rose-400: #fd6f8e;
  --rose-500: #f63d68;
  --rose-600: #e31b54;
  --rose-700: #c01048;
  --rose-800: #a11043;
  --rose-900: #89123e;
  --orange-dark-25: #fff9f5;
  --orange-dark-50: #fff4ed;
  --orange-dark-100: #ffe6d5;
  --orange-dark-200: #ffd6ae;
  --orange-dark-300: #ff9c66;
  --orange-dark-400: #ff692e;
  --orange-dark-500: #ff4405;
  --orange-dark-600: #e62e05;
  --orange-dark-700: #bc1b06;
  --orange-dark-800: #97180c;
  --orange-dark-900: #771a0d;
  --orange-25: #fefaf5;
  --orange-50: #fef6ee;
  --orange-100: #fdead7;
  --orange-200: #f9dbaf;
  --orange-300: #f7b27a;
  --orange-400: #f38744;
  --orange-500: #ef6820;
  --orange-600: #e04f16;
  --orange-700: #b93815;
  --orange-800: #932f19;
  --orange-900: #772917;
  --yellow-25: #fefdf0;
  --yellow-50: #fefbe8;
  --yellow-100: #fef7c3;
  --yellow-200: #feee95;
  --yellow-300: #fde272;
  --yellow-400: #fac515;
  --yellow-500: #eaaa08;
  --yellow-600: #ca8504;
  --yellow-700: #a15c07;
  --yellow-800: #854a0e;
  --yellow-900: #713b12;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

* {
  margin: 0;
  padding: 0;
}

html {
  overflow-y: scroll;
  height: 100%;
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  min-width: 320px;
  background-color: white;
  color: var(--color-text-dark);
  line-height: var(--line-height-body);
  font-family: var(--font-family-sans);
}

img,
picture,
svg {
  display: block;
  max-width: 100%;
}

input,
button,
textarea,
select {
  font: inherit;
}

textarea {
  resize: vertical;
}

button {
  border: 0;
  outline: 0;
}
button:hover {
  cursor: pointer;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  color: var(--color-text-header);
  line-height: var(--line-height-headers);
  font-weight: 600;
}

h1 {
  font-size: var(--font-size-xxxl);
}

h2 {
  font-size: var(--font-size-xxl);
}

h3 {
  font-size: var(--font-size-xl);
}

h4 {
  font-size: var(--font-size-l);
}

p {
  margin-bottom: 16px;
  line-height: 24px;
}

a {
  color: var(--color-primary);
  text-decoration: none;
  transition: color 200ms;
}
a:hover, a:focus, a:active {
  color: var(--color-primary-rotate);
}

table, caption, tbody, tfoot, thead, tr, th, td {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}

table {
  border-spacing: 0;
}

.t-title {
  font-family: "Space Grotesk", sans-serif;
  font-size: 64px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  letter-spacing: 0.64px;
}

.t-subtitle {
  font-size: 20px;
  font-style: normal;
  font-weight: 500;
  line-height: 32px; /* 160% */
  letter-spacing: 0.2px;
  color: var(--color-text-body);
}

.t-subheading {
  font-size: 10px;
  font-weight: 700;
  line-height: 24px; /* 240% */
  letter-spacing: 1.1px;
  text-transform: uppercase;
  margin-left: 1px;
}

.t-display-large {
  font-family: "Space Grotesk", sans-serif;
  font-size: 32px;
  line-height: 40px;
  font-weight: 600;
  letter-spacing: 0.56px;
}
@media (min-width: 640px) {
  .t-display-large {
    font-size: 48px;
    line-height: 56px;
  }
}

.t-display-medium {
  font-family: "Space Grotesk", sans-serif;
  font-size: 24px;
  line-height: 32px;
  font-weight: 600;
  letter-spacing: 0.56px;
}
@media (min-width: 640px) {
  .t-display-medium {
    font-size: 32px;
    line-height: 40px;
  }
}

.t-display-small {
  font-family: "Space Grotesk", sans-serif;
  font-size: 20px;
  line-height: 28px;
  font-style: normal;
  font-weight: 600;
}
@media (min-width: 640px) {
  .t-display-small {
    font-size: 24px;
    line-height: 32px;
  }
}

.t-display-small-inter {
  font-size: 16px;
  line-height: 24px;
  font-style: normal;
  font-weight: 500;
}
@media (min-width: 640px) {
  .t-display-small-inter {
    font-size: 20px;
    line-height: 32px;
  }
}

.t-display-x-small {
  font-family: "Space Grotesk", sans-serif;
  font-size: 16px;
  line-height: 24px;
  font-style: normal;
  font-weight: 500;
}

.t-body-large {
  font-size: 20px;
  font-weight: 500;
  line-height: 32px; /* 160% */
  letter-spacing: 0.2px;
}

.t-body-medium {
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 24px; /* 150% */
  letter-spacing: 0.16px;
}
.t-body-medium--bold {
  font-weight: 500;
}

.t-body-small {
  font-size: 13px;
  font-style: normal;
  font-weight: 400;
  line-height: 20px;
}

.t-align-left {
  text-align: left;
}

.t-align-center {
  text-align: center;
}

.t-color-purple {
  color: var(--color-text-purple);
}

.t-color-green {
  color: var(--color-text-green);
}

.t-opacity-8 {
  opacity: 0.8;
}

.color-gray-800 {
  color: var(--gray-800);
}

.color-gray-600 {
  color: var(--gray-600);
}

.text-markup h2 {
  font-size: 1.4285714em;
  margin-top: 1.6em;
  margin-bottom: 0.8em;
  line-height: 1.4;
  scroll-margin-top: 1.6em;
}
.text-markup p {
  color: var(--color-text-body);
}

.hero--soft {
  position: relative;
}
.hero--soft__background {
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: cover;
  width: 100%;
  min-width: 320px;
  min-height: 720px;
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  z-index: -1;
}
.hero--soft__background--content-overlay {
  bottom: -120px;
}
.hero--soft__background.no-webp, .hero--soft__background.no-js {
  background-image: url("../images/background/background-drop.png");
}
.hero--soft__background.webp {
  background-image: url("../images/background/background-drop.webp");
}
.hero--soft__background::before {
  display: block;
  position: absolute;
  bottom: 0px;
  opacity: 0.2;
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.05) 0%, rgba(0, 0, 0, 0) 100%);
  height: 48px;
  width: 100%;
  content: "";
}
.hero--soft__button {
  padding: 1em 2em;
  min-width: 18em;
  border-radius: 200px;
  background: #49159E;
  color: var(--color-text-white);
  font-size: 16px;
  font-weight: 500;
  line-height: 32px;
  letter-spacing: 0.2px;
  text-align: center;
  border: 5px solid rgba(255, 255, 255, 0.91);
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0) 100%), #6941C6;
  box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
  transition: background-color 400ms ease-out;
  z-index: 5000;
}
.hero--soft__button:hover {
  background-color: #3f1287;
  transition: background-color 1s ease-out;
  color: white;
}

section.hero-overlap {
  position: relative;
}

.btn {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 0.5em;
  font-size: var(--font-size-s);
  padding: var(--space-s) var(--space-s);
  border-radius: var(--border-radius);
  background-origin: border-box;
  background-color: transparent;
  border: solid 0px transparent;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  outline: none;
  transition: filter 400ms, color 200ms;
  height: 3rem;
}
.btn:hover, .btn:focus, .btn:focus-within, .btn:active {
  transition: filter 600ms, color 200ms;
}
.btn--small {
  padding: var(--space-xxxs) var(--space-xs);
  line-height: var(--font-size-xl);
  height: 1.75rem;
}
.btn--primary {
  border-radius: 12px;
  background: #F0E6FF;
  color: #6941C6;
  transition: background-color 400ms;
}
.btn--primary:hover, .btn--primary:focus, .btn--primary:focus-within, .btn--primary:active {
  background: #e4d2ff;
}
.btn--secondary {
  color: var(--color-black);
  background-image: linear-gradient(to right, var(--color-white), var(--color-white));
  border: solid 1px var(--gray-300);
}
.btn--secondary:hover, .btn--secondary:focus, .btn--secondary:focus-within, .btn--secondary:active {
  color: var(--color-dark);
  filter: saturate(1.1) brightness(95%);
}
.btn--light {
  color: var(--color-dark);
  background-color: var(--color-light);
}
.btn--light:hover, .btn--light:focus, .btn--light:focus-within, .btn--light:active {
  color: var(--color-dark);
  filter: brightness(92%);
}
.btn--dark {
  color: var(--color-white);
  border-color: var(--color-dark);
  background-color: var(--color-dark);
}
.btn--dark:hover, .btn--dark:focus, .btn--dark:focus-within, .btn--dark:active {
  color: var(--color-white);
}

.checkbox {
  /* Style the custom radio button */
  /* Style the custom radio button when checked */
  /* Style the text label */
  /* Move the checkbox label to the left */
}
.checkbox input[type=radio] {
  display: none;
}
.checkbox input[type=radio] + .checkbox-label:before {
  content: "";
  display: inline-block;
  width: 16px;
  height: 16px;
  outline: 1px solid var(--gray-300);
  border-radius: 50%;
  margin-right: 8px;
  vertical-align: middle;
}
.checkbox input[type=radio]:checked + .checkbox-label:before {
  background-color: var(--primary-600);
  border: 4px solid white;
  outline: 1px solid var(--primary-600);
  margin-top: 4px;
}
.checkbox .checkbox-label {
  cursor: pointer;
}
.checkbox .checkbox-label {
  display: flex;
  align-items: flex-start;
}
.checkbox .checkbox-label:before {
  order: -1;
}
.checkbox .checkbox-label--right {
  margin-left: auto; /* Push the light label to the right */
}

.checkbox-group__item {
  /* Hide the default radio button */
  /* Style the custom radio button */
  /* Style the custom radio button when checked */
  /* Style the text label */
  /* Move the checkbox label to the left */
}
.checkbox-group__item input[type=radio] {
  display: none;
}
.checkbox-group__item input[type=radio] + .checkbox-label:before {
  content: "";
  display: inline-block;
  width: 16px;
  height: 16px;
  outline: 1px solid var(--gray-300);
  border-radius: 50%;
  margin-right: 8px;
  vertical-align: middle;
}
.checkbox-group__item input[type=radio]:checked + .checkbox-label:before {
  background-color: var(--primary-600);
  border: 4px solid white;
  outline: 1px solid var(--primary-600);
}
.checkbox-group__item .checkbox-label {
  cursor: pointer;
}
.checkbox-group__item .checkbox-label {
  display: flex;
  align-items: center;
}
.checkbox-group__item .checkbox-label:before {
  order: -1;
}
.checkbox-group__item .checkbox-label--right {
  margin-left: auto; /* Push the light label to the right */
}

.radio-container__body {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
}

.form-check__support-text {
  font-size: var(--font-size-s);
  line-height: var(--font-size-l);
  color: var(--gray-500);
}

#menu-icon {
  display: inline-block;
  padding: 10px;
}

#menu-icon .bar {
  margin: 6px 3px;
  width: 25px;
  height: 2px;
  background: var(--gray-500);
  transition: margin 0.2s, transform 0.2s;
  -webkit-transition: margin 0.2s, -webkit-transform 0.2s;
  transition: margin 0.2s, -webkit-transform 0.2s;
  -o-transition: margin 0.2s, transform 0.2s;
  transition: margin 0.2s, transform 0.2s;
  transition: margin 0.2s, transform 0.2s, -webkit-transform 0.2s;
}

#menu-icon:not(.close):hover {
  padding: 6px 10px;
}

#menu-icon:not(.close):hover .bar {
  margin: 5px 3px;
}

#menu-icon.close .bar {
  background: var(--gray-700);
}

#menu-icon.close .bar:first-child {
  -webkit-transform: translateY(4px) rotate(45deg);
  -ms-transform: translateY(4px) rotate(45deg);
  transform: translateY(4px) rotate(45deg);
}

#menu-icon.close .bar:last-child {
  -webkit-transform: translateY(-4px) rotate(-45deg);
  -ms-transform: translateY(-4px) rotate(-45deg);
  transform: translateY(-4px) rotate(-45deg);
}

.navigation--mobile__overlay {
  display: none;
  position: fixed;
  z-index: 1000;
  top: 0px;
  left: 0;
  width: 100%;
  height: 100%;
  padding: 8em 1.5em 1.5em 1.5em;
  background-color: white;
  align-items: center;
  justify-content: center;
  transition: transform 0.3s ease-in-out;
}

.navigation--mobile-overlay__content {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.navigation--mobile-overlay-content__block {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-bottom: 20px;
  text-align: left;
}
.navigation--mobile-overlay-content__block h3 {
  font-size: 1em;
  color: var(--gray-500);
  font-weight: 400;
}
.navigation--mobile-overlay-content__menu {
  list-style: none;
}
.navigation--mobile-overlay-content__menu li {
  padding: 10px 10px 10px 0;
  text-decoration: none;
}
.navigation--mobile-overlay-content__menu li a {
  color: var(--gray-900);
  font-weight: 400;
}
.navigation--mobile-overlay-content__menu--large li {
  font-size: 1.5em;
}

.open-button {
  cursor: pointer;
  padding: 10px 15px;
  border: none;
  background-color: #333;
  color: white;
  border-radius: 5px;
}

.navigation {
  display: flex;
  position: fixed;
  width: 100%;
  top: 0;
  z-index: 9999;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  transition: 0.4s;
  border-bottom: 1px solid #EAEAEA;
}
.navigation--desktop {
  background-color: transparent;
  backdrop-filter: blur(2px);
}

.nav-buttons {
  display: flex;
}
.nav-buttons .btn {
  font-weight: 400;
}

.navigation--desktop {
  display: none;
}

#navigation--desktop-logo {
  width: 90%;
  transition: 0.4s;
}

@media (min-width: 640px) {
  .navigation--mobile {
    display: none;
  }
  .navigation--desktop {
    display: flex;
    padding: 20px 20px;
  }
  .nav-buttons {
    gap: 12px;
  }
}
@media (min-width: 1024px) {
  .navigation--desktop {
    padding: 20px 20px;
  }
}
@media (min-width: 1212px) {
  .navigation--desktop {
    padding: 20px 60px;
  }
}
.page-header {
  padding: 12rem 1rem 1rem 1rem;
  max-width: 640px;
  margin: 0 auto;
}
.page-header h1 {
  font-size: 3.5rem;
  margin-bottom: 0.5rem;
}
.page-header p {
  opacity: 0.8;
  font-weight: 400;
}
.page-header--small h1 {
  font-size: 3rem;
  margin-bottom: 0.5rem;
}

.page-header-pricing,
.page-header-blog,
.page-header-blog-post {
  padding: 6.5em 0 0 0;
  margin: 0 auto;
}
.page-header-pricing h1,
.page-header-blog h1,
.page-header-blog-post h1 {
  font-size: 2.5rem;
  line-height: 3rem;
  margin-bottom: 0.3rem;
}
.page-header-pricing p,
.page-header-blog p,
.page-header-blog-post p {
  opacity: 0.8;
  font-weight: 400;
}
.page-header-pricing .page-header__content,
.page-header-blog .page-header__content,
.page-header-blog-post .page-header__content {
  margin-left: 2em;
  margin-right: 2em;
}
.page-header-pricing--small h1,
.page-header-blog--small h1,
.page-header-blog-post--small h1 {
  font-size: 3rem;
  margin-bottom: 0.5rem;
}
@media (min-width: 640px) {
  .page-header-pricing h1,
  .page-header-blog h1,
  .page-header-blog-post h1 {
    font-size: 3.5rem;
    margin-bottom: 0.5rem;
    line-height: 4rem;
  }
}

.chosen-container {
  width: 100% !important;
}

.form {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xl);
  width: 100%;
}
.form .form-intro p {
  font-size: var(--font-size-s);
  color: var(--gray-600);
}
.form fieldset {
  border: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-l);
  width: inherit;
}
.form fieldset legend {
  margin-bottom: var(--space-s);
}
.form fieldset.fieldset--tightspace {
  gap: var(--space-xs);
}
.form ::placeholder {
  color: var(--gray-400);
}
.form hr {
  width: 100%;
  border-top: 1px solid var(--gray-200);
  border-bottom: 0;
}
.form label, .form legend {
  font-size: var(--font-size-s);
  line-height: var(--font-size-xl);
  color: var(--gray-700);
  font-weight: 500;
  color: var(--gray-700);
}
.form .input-container {
  display: flex;
  flex-direction: column;
  gap: var(--space-xxs);
  flex: 1;
}
.form .radio-container {
  display: flex;
  flex-direction: row;
  gap: var(--space-xxs);
  width: 100%;
}
.form .form-check {
  display: flex;
  gap: var(--space-xs);
}
.form .form-check__text {
  font-weight: 500;
  display: block;
}
.form .form-actions {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
.form .input-group {
  display: flex;
  gap: 0;
  width: 100%;
}
.form .input-group .form__select {
  padding: var(--space-xxs) 2em var(--space-xxs) var(--space-xs) !important;
}
.form .input-group *:first-child {
  border-top-right-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  border-right: 0;
}
.form .input-group *:last-child {
  border-left: 0;
  border-top-left-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
  padding-left: 0 !important;
}
.form .input-group--with-icon {
  display: flex;
  align-items: center;
}
.form .input-group--with-icon .input-group--icon {
  height: 100%;
  padding: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.form .input-group--with-icon .input-group--icon svg {
  color: var(--gray-400);
}
.form__group, .form__input, .form__text-area, .form .chosen-container ul {
  flex: 1;
  width: 100%;
}
.form__input, .form__text-area, .form__select, .form .chosen-container ul {
  color: var(--gray-900);
  font-size: var(--font-size-s);
  display: block;
  padding: var(--space-xxs) var(--space-xs);
  border: var(--border);
  border-radius: var(--border-radius);
  outline: none;
  transition: box-shadow 250ms;
}
.form__input:focus, .form__text-area:focus, .form__select:focus, .form .chosen-container ul:focus {
  box-shadow: 0 0 0 2px var(--color-glint);
}
.form__input--large, .form__text-area--large, .form__select--large, .form .chosen-container ul--large {
  padding: 0.75em 0.875em;
}
.form__input--invalid, .form__text-area--invalid, .form__select--invalid, .form .chosen-container ul--invalid {
  border-color: var(--color-primary);
}
.form__input:disabled, .form__text-area:disabled, .form__select:disabled, .form .chosen-container ul:disabled {
  cursor: default;
  background-color: rgba(239, 239, 239, 0.3);
}
.form__select {
  padding: var(--space-s) 4em var(--space-s) var(--space-m);
  font-size: var(--font-size-s);
  border: var(--border);
  border-radius: var(--border-radius);
  outline: none;
  transition: box-shadow 250ms;
  -moz-appearance: none;
  -webkit-appearance: none;
  appearance: none;
  background: url("data:image/svg+xml;utf8,<svg viewBox='0 0 140 140' width='12' height='12' xmlns='http://www.w3.org/2000/svg'><g><path d='m121.3,34.6c-1.6-1.6-4.2-1.6-5.8,0l-51,51.1-51.1-51.1c-1.6-1.6-4.2-1.6-5.8,0-1.6,1.6-1.6,4.2 0,5.8l53.9,53.9c0.8,0.8 1.8,1.2 2.9,1.2 1,0 2.1-0.4 2.9-1.2l53.9-53.9c1.7-1.6 1.7-4.2 0.1-5.8z' fill='black'/></g></svg>") no-repeat;
  background-position: right 12px top 50%;
}
.form__select:disabled {
  cursor: default;
  background-color: rgba(239, 239, 239, 0.3);
}
.form__validation-error .form__input, .form__validation-error .form__select {
  border-color: var(--error-300);
}
.form__hint-text {
  font-size: var(--font-size-xs);
  line-height: 1.25rem;
  color: var(--gray-500);
}
.form .form__validation-error-text {
  color: var(--error-500);
  line-height: 1.25rem;
  font-size: var(--font-size-xs);
}
.form .checkbox-group {
  display: flex;
  flex-direction: column;
}
.form .checkbox-group__item {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
  gap: var(--space-xs);
  padding: var(--space-s) var(--space-m);
  width: 100%;
  border: 1px solid var(--gray-200);
  border-radius: 0.5em;
  cursor: pointer;
}
.form .checkbox-group__item:has(input:checked) {
  background: var(--primary-50);
  border: 1px solid var(--primary-600);
  color: var(--primary-800);
}
.form .checkbox-group__item:has(input:checked) .form__select {
  border: 1px solid var(--primary-600);
  color: var(--primary-800);
}
.form .checkbox-group__item--with-dropdown {
  padding: var(--space-xs) var(--space-s) var(--space-xs) var(--space-m);
}
.form .checkbox-group__item--with-dropdown .form__select {
  padding: var(--space-xs) 3em var(--space-xs) var(--space-s);
}
.form .checkbox-label {
  font-weight: 500;
  display: flex;
  align-items: center;
  width: 100%;
}
.form .checkbox-label--light {
  font-weight: 400;
}

.input-icon-container {
  position: relative;
}
.input-icon-container input {
  padding-left: 2.5em;
}

.input-icon {
  position: absolute;
  top: 50%;
  left: 10px;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
}

.featured-icon {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 72px;
  height: 72px;
  background: var(--gray-100);
  border: 10px solid var(--gray-50);
  border-radius: 999px;
}
.featured-icon object {
  width: 28px;
  height: 28px;
}
.featured-icon--md {
  width: 40px;
  height: 40px;
  color: var(--gray-600);
  border: 4px solid var(--gray-50);
}
.featured-icon--md object {
  width: 20px;
  height: 20px;
}
.featured-icon--up {
  background: var(--success-500);
  border: 12px solid var(--success-600);
}
.featured-icon--down {
  background: var(--error-500);
  border: 12px solid var(--error-600);
}
.featured-icon--warning {
  background: var(--warning-500);
  border: 12px solid var(--warning-600);
}
.featured-icon--paused {
  background: var(--gray-500);
  border: 12px solid var(--gray-600);
}
.featured-icon--primary {
  background: var(--primary-100);
  border: 12px solid var(--primary-50);
}

.section-header {
  display: flex;
  gap: 1em;
  flex-direction: column;
}
.section-header .body {
  display: flex;
  flex-direction: column;
  gap: 1em;
}

.hero {
  margin: 0 auto;
  padding: 164px 0 0 0;
  position: relative;
}
.hero .t-subtitle {
  color: var(--color-text-gray);
}
.hero__background {
  width: 100%;
  min-width: 320px;
  height: 760px;
  background: #F9F6FD;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
}
@media (min-width: 640px) {
  .hero__background {
    height: 760px;
  }
}
@media (min-width: 768px) {
  .hero__background {
    height: 90vh;
  }
}
.hero__background-2 {
  width: 100%;
  min-width: 320px;
  height: 760px;
  background: #1F0B3F;
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: -2;
}
@media (min-width: 640px) {
  .hero__background-2 {
    height: 760px;
  }
}
@media (min-width: 768px) {
  .hero__background-2 {
    height: 90vh;
  }
}
.hero__monitors {
  margin-top: 56px;
  overflow: hidden;
}
.hero__monitors-visual {
  margin-left: 16px;
  width: 130%;
}
.hero__monitors-visual-image {
  border-radius: 24px;
  margin: 16px auto 0;
  overflow-x: hidden;
  border: 12px solid rgba(0, 0, 0, 0.07);
  box-shadow: 0px 12px 40px 0px rgba(20, 6, 43, 0.1);
}
.hero__monitors-visual-image--desktop {
  display: none;
}
.hero__content {
  padding: 0 20px;
}
.hero__actions {
  margin: 48px auto 0 auto;
  text-align: center;
}
.hero__button {
  padding: 16px 24px;
  border-radius: 200px;
  background: #49159E;
  color: var(--color-text-white);
  font-size: 16px;
  font-weight: 500;
  line-height: 32px;
  letter-spacing: 0.2px;
  border: 4px solid rgba(0, 0, 0, 0.15);
  box-shadow: 0px 0px 12px 0px rgba(73, 21, 158, 0.35);
  transition: background-color 400ms ease-out;
}
.hero__button:hover {
  background-color: #3f1287;
  transition: background-color 1s ease-out;
}
@media (min-width: 640px) {
  .hero__monitors {
    margin-top: 0px;
    overflow-x: hidden;
    padding-right: 40px;
    padding-left: 40px;
    padding-bottom: 40px;
    margin-right: auto;
    margin-left: auto;
    display: grid;
    position: relative;
    overflow: initial;
  }
  .hero__monitors-visual {
    position: none;
    width: 100%;
    height: auto;
    z-index: 1;
    display: grid;
    justify-items: center;
    margin-top: 64px;
    user-select: none;
    position: relative;
    margin-left: 0;
  }
  .hero__monitors-visual-image--mobile {
    display: none;
  }
  .hero__monitors-visual-image--desktop {
    display: block;
    transform: perspective(1200px) translateX(0px) translateY(-10px) scale(0.979392) rotate(0deg) rotateX(8deg) rotateY(0deg) translateZ(0px);
    transition: all ease-in 400ms;
  }
  .hero__monitors-visual .straight {
    transform: perspective(1200px) translateX(0px) translateY(0) scale(0.979392) rotate(0deg) rotateX(0) rotateY(0deg) translateZ(0px);
  }
}

.intro {
  position: relative;
  background-color: #1F0B3F;
}
.intro::before {
  content: " ";
  display: block;
  position: absolute;
  width: 100%;
  height: 156px;
  bottom: 0px;
  left: 0;
  right: 0;
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0) 100%);
}
.intro .container {
  grid-column-gap: 0rem;
  grid-row-gap: 0rem;
  grid-template-rows: auto;
  grid-template-columns: 1fr;
  grid-auto-columns: 1fr;
  display: grid;
  overflow: hidden;
  max-width: 1212px;
  margin: 0 auto;
}
.intro-copy h2, .intro-copy p {
  color: var(--color-text-white);
  font-size: 32px;
  font-weight: 400;
  line-height: 48px;
  letter-spacing: 0.4px;
  margin-bottom: 56px;
}
.intro .down {
  color: var(--color-text-down);
}
.intro .success {
  color: var(--color-text-success);
}
.intro .intro-copy {
  justify-self: center;
  padding-left: 20px;
  padding-right: 20px;
  padding-top: 80px;
  padding-bottom: 80px;
  width: 100%;
  max-width: 606px;
  display: block;
}
.intro .intro-flower {
  display: none;
  max-width: 646px;
  width: 100%;
  height: 100%;
  min-height: 25rem;
  position: relative;
  overflow: hidden;
}
.intro .intro-flower picture {
  display: none;
}
.intro .intro-flower img {
  width: 120%;
  max-width: 600px;
  opacity: 1;
  display: block;
  position: relative;
  align-self: center;
}
@media (min-width: 640px) {
  .intro {
    flex-direction: row;
  }
  .intro .container {
    padding: 80px 0;
    grid-template-columns: 1.5fr 0.7fr;
  }
  .intro-copy h2, .intro-copy p {
    color: var(--color-text-white);
    font-size: 40px;
    font-weight: 400;
    line-height: 56px;
    letter-spacing: 0.4px;
    margin-bottom: 56px;
  }
  .intro .intro-flower {
    display: flex;
  }
  .intro .intro-flower picture {
    display: flex;
  }
}
@media (min-width: 768px) {
  .intro .container {
    grid-template-columns: 1.5fr 0.7fr;
  }
  .intro .intro-copy {
    padding-left: 80px;
    padding-right: 40px;
  }
  .intro .intro-flower {
    display: flex;
  }
  .intro .intro-flower img {
    width: 150%;
  }
}
@media (min-width: 1024px) {
  .intro .container {
    grid-template-columns: 1fr 1fr;
  }
}

.feature-overview {
  background-color: #FCFAFF;
  padding: 140px 20px 240px 20px;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: auto;
}
.feature-overview.no-webp, .feature-overview.no-js {
  background-image: url("../images/features-bg-layer.png");
}
.feature-overview.webp {
  background-image: url("../images/features-bg-layer.webp");
}
.feature-overview .section-header {
  margin-bottom: 80px;
}
.feature-overview .rows {
  max-width: 1212px;
  margin: 0 auto;
  display: grid;
  grid-template-rows: 1fr 1fr;
  gap: 40px;
}
.feature-overview .rows .row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
}
.feature-overview .rows .row-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  flex: 1;
  transition-delay: calc(120ms * var(--order));
}
.feature-overview .rows .row-item .title,
.feature-overview .rows .row-item .body {
  font-size: 20px;
  font-weight: 400;
  line-height: 32px;
  /* 160% */
  letter-spacing: 0.2px;
}
.feature-overview .rows .row-item .title {
  font-weight: 700;
}
.feature-overview .rows .row-item .icon {
  display: flex;
  padding: 16px;
  justify-content: center;
  align-items: center;
  border-radius: 24px;
  background: #F2EBFF;
}
.feature-overview .rows .row-item .icon object {
  align-self: flex-start;
}

@media (min-width: 640px) {
  .feature-overview {
    padding: 220px 40px 220px 40px;
  }
  .feature-overview .section-header {
    margin-bottom: 80px;
  }
  .feature-overview .section-header * {
    text-align: center;
  }
  .feature-overview .rows .row {
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    font-size: 20px;
    line-height: 32px;
  }
  .feature-overview .rows .row .icon {
    padding: 24px;
  }
}
@media (min-width: 640px) and (min-width: 1024px) {
  .feature-overview {
    padding: 140px 80px 140px 80px;
    height: 100vh;
    min-height: 1200px;
    display: flex;
    justify-content: center;
    flex-direction: column;
    gap: 3em;
  }
  .feature-overview .rows .row {
    grid-template-columns: 1fr 1fr 1fr 1fr;
  }
}
.features {
  background-color: #ffffff;
}
.features__layout {
  grid-column-gap: 0rem;
  grid-row-gap: 0rem;
  grid-template-rows: auto;
  grid-template-columns: auto;
  grid-auto-columns: 1fr;
  display: grid;
  overflow: hidden;
}
.features__text {
  justify-self: center;
  padding-left: 20px;
  padding-right: 20px;
  width: 100%;
  max-width: 606px;
  display: block;
}
.features__text-content {
  padding: 4em 0 4em 0;
  max-width: 30em;
  display: flex;
  flex-direction: column;
  gap: 2em;
  letter-spacing: 0.24px;
}
.features__image {
  background: linear-gradient(0deg, #5C3BC0 0%, #5C3BC0 100%), #6C45DF;
  padding-top: 80px;
  padding-left: 40px;
  grid-area: span 1/span 1/span 1/span 1;
  width: 100%;
  height: 60%;
  min-height: 25rem;
  position: relative;
  display: flex;
  overflow: hidden;
}
.features__image--green-background {
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0) 100%), #01B295;
}
.features__image--horizontal-center {
  justify-content: center;
  padding-left: 0;
}
.features__image--vertical-center {
  align-items: center;
  padding-top: 0;
}
.features__image--status-updates {
  align-items: center;
  padding-top: 5rem;
}
.features__image picture {
  display: flex;
  position: absolute;
  bottom: 50px;
}
.features__image img {
  width: 150%;
  max-width: 800px;
  opacity: 1;
  display: block;
  position: relative;
  align-self: center;
}
@media (min-width: 640px) {
  .features__text {
    justify-self: center;
  }
}
@media (min-width: 768px) {
  .features__text {
    justify-self: end;
    padding-left: 80px;
    padding-right: 4rem;
  }
  .features__text--start {
    justify-self: start;
    padding-left: 80px;
  }
  .features__text-content {
    padding: 10em 0 10em 0;
  }
  .features__layout {
    grid-template-rows: auto;
    grid-template-columns: 1fr 1fr;
  }
  .features__image {
    height: 100%;
    min-height: 35rem;
  }
  .features picture {
    bottom: auto;
  }
}
@media (min-width: 1024px) {
  .features__text {
    max-width: 727px;
    padding-left: 120px;
    padding-right: 120px;
  }
}

.three-steps {
  background-color: #0A0617;
  padding: 0 40px;
}
.three-steps section {
  display: grid;
  align-items: center;
  grid-template-areas: "three-steps-title" "three-steps-box";
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  max-width: 1212px;
  margin: 0 auto;
  padding: 80px 0;
}
.three-steps-title {
  margin-bottom: 80px;
}
.three-steps-title h2 {
  color: #FFF;
  font-size: 80px;
  font-style: normal;
  font-weight: 800;
  line-height: 112px;
  letter-spacing: 1.4px;
}
.three-steps-title h2 span {
  display: block;
}
.three-steps-title .opacity-80 {
  opacity: 0.8;
}
.three-steps-title .opacity-60 {
  opacity: 0.6;
}
.three-steps-box {
  display: flex;
  flex-direction: column;
  gap: 68px;
}
.three-steps-box__number {
  color: #30FEFE;
  font-size: 40px;
  font-weight: 800;
  letter-spacing: 0.4px;
  margin-bottom: 1rem;
}
.three-steps-box__title {
  color: #F0F0F0;
  opacity: 0.9;
  font-size: 24px;
  font-weight: 700;
  line-height: 32px;
  /* 133.333% */
  letter-spacing: 0.24px;
  margin-bottom: 0.5rem;
}
.three-steps-box__body {
  color: #F0F0F0;
  opacity: 0.9;
  font-size: 20px;
  font-weight: 500;
  line-height: 32px;
  /* 160% */
  letter-spacing: 0.2px;
}
@media (min-width: 640px) {
  .three-steps {
    padding: 0 80px;
    height: 120vh;
  }
  .three-steps-title {
    margin-right: 80px;
  }
  .three-steps section {
    height: 120vh;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr;
  }
}
@media (min-width: 768px) {
  .three-steps {
    height: 120vh;
  }
  .three-steps-title h2 {
    font-size: 100px;
    line-height: 120px;
  }
  .three-steps section {
    grid-template-columns: 1.4fr 0.8fr;
    grid-template-rows: 1fr;
  }
}
@media (min-width: 1024px) {
  .three-steps section {
    grid-template-columns: 1.4fr 0.8fr;
    grid-template-rows: 1fr;
  }
  .three-steps-title h2 {
    font-size: 140px;
    line-height: 160px;
  }
}

.pricing-section {
  background-color: #FAF8FC;
  padding: 140px 20px;
  display: flex;
  flex-direction: column;
  gap: 32px;
  align-items: center;
}
.pricing-section .pricing-columns, .pricing-section .pricing-section-features {
  margin: 0 auto;
  max-width: 1212px;
}
.pricing-section .pricing-columns {
  display: flex;
  flex-direction: column;
  gap: 2em;
}
.pricing-section .pricing-column {
  display: flex;
  gap: 1em;
  flex-direction: row;
}
.pricing-section .pricing-column .featured-icon {
  flex-shrink: 0;
}
.pricing-section .pricing-column__content {
  display: flex;
  flex-direction: column;
  margin-top: 1.25em;
  gap: 0.5em;
}
.pricing-section .pricing-column__content p {
  color: var(--gray-600);
}
.pricing-section__content {
  max-width: 1212px;
  gap: 56px !important;
  align-items: center;
  flex-direction: column;
}
.pricing-section-features {
  width: 100%;
  border-radius: 16px;
  border: 1px solid var(--Gray-200, #EAECF0);
  background: var(--Base-White, #FFF);
  box-shadow: 0px 4px 6px -2px rgba(16, 24, 40, 0.03), 0px 12px 16px -4px rgba(16, 24, 40, 0.08);
}
.pricing-section-features__header, .pricing-section-features__list, .pricing-section-features__action {
  display: flex;
  padding: 2em;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  align-self: stretch;
  border-bottom: 1px solid #EAECF0;
}
.pricing-section-features__list ul {
  list-style: none;
}
.pricing-section-features__list ul li {
  padding-left: 2em;
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"><rect width="24" height="24" rx="12" fill="%23D1FADF"/><path fill-rule="evenodd" clip-rule="evenodd" d="M17.096 7.39016L9.93602 14.3002L8.03602 12.2702C7.68602 11.9402 7.13602 11.9202 6.73602 12.2002C6.34602 12.4902 6.23602 13.0002 6.47602 13.4102L8.72602 17.0702C8.94602 17.4102 9.32601 17.6202 9.75601 17.6202C10.166 17.6202 10.556 17.4102 10.776 17.0702C11.136 16.6002 18.006 8.41016 18.006 8.41016C18.906 7.49016 17.816 6.68016 17.096 7.38016V7.39016Z" fill="%2312B76A"/></svg>');
  background-repeat: no-repeat;
  margin-bottom: 1em;
}
.pricing-section-features__list-group {
  flex-direction: column;
  display: flex;
}
@media (min-width: 640px) {
  .pricing-section-features__list-group {
    flex-direction: row;
    gap: 2em;
  }
}
@media (min-width: 768px) {
  .pricing-section {
    padding: 140px 80px;
    gap: 72px;
  }
  .pricing-section__content {
    flex-direction: row;
    gap: 120px !important;
  }
  .pricing-section-features__list-group {
    flex-direction: column;
  }
}
@media (min-width: 1024px) {
  .pricing-section {
    padding: 140px 80px;
    gap: 72px;
  }
  .pricing-section__content {
    flex-direction: row;
    gap: 120px !important;
  }
  .pricing-section-features__list-group {
    flex-direction: row;
    gap: 2em;
  }
}

.benefits {
  background-color: #FAF8FC;
  padding: 140px 20px;
  display: flex;
  flex-direction: column;
  gap: 72px;
}
.benefits .section-header {
  text-align: center;
}
.benefits .benefits-cards {
  display: grid;
  grid-gap: 32px;
  align-items: center;
  grid-template-columns: auto;
  grid-template-rows: repeat(3, 1fr);
  max-width: 1212px;
  margin: 0 auto;
  align-items: start;
}
.benefits .benefits-column {
  display: grid;
  grid-gap: 32px;
}
.benefits .benefits-card {
  background-color: lightgray;
  border-radius: 16px;
  padding: 48px 24px 240px 24px;
  box-shadow: 0px 2px 10px 0px rgba(84, 84, 84, 0.13);
  border: 1px solid rgba(51, 51, 51, 0.15);
}
.benefits .benefits-card__title {
  font-size: 24px;
  font-weight: 700;
  line-height: 32px;
  letter-spacing: 0.24px;
  margin-bottom: 24px;
}
.benefits .benefits-card__body {
  line-height: 26px;
  letter-spacing: 0.16px;
}
.benefits .blue-sat {
  background-color: #0090C4;
  background-repeat: no-repeat;
  background-position-y: 140px;
  background-size: cover;
  padding-bottom: 180px;
  color: white;
}
.benefits .blue-sat.no-webp, .benefits .blue-sat.no-js {
  background-image: url("../images/sat1.jpg");
}
.benefits .blue-sat.webp {
  background-image: url("../images/sat1.webp");
}
.benefits .white-airport {
  background-color: #fff;
  background-size: 374px 138px;
  background-repeat: no-repeat;
  background-position-y: 300px;
  background-position-x: center;
}
.benefits .white-airport.no-webp, .benefits .white-airport.no-js {
  background-image: url("../images/router@2x.jpg");
}
.benefits .white-airport.webp {
  background-image: url("../images/router@2x.webp");
}
.benefits .black-speedometer {
  background-color: #000103;
  background-repeat: no-repeat;
  background-position-y: 200px;
  background-position-x: center;
  padding-bottom: 200px;
  color: #fff;
}
.benefits .black-speedometer.no-webp, .benefits .black-speedometer.no-js {
  background-image: url("../images/speedometer.png");
}
.benefits .black-speedometer.webp {
  background-image: url("../images/speedometer.webp");
}
.benefits .white-apps {
  background-color: #ffffff;
  background-size: 589px 507px;
  background-repeat: no-repeat;
  background-position-y: 220px;
  background-position-x: center;
}
.benefits .white-apps.no-webp, .benefits .white-apps.no-js {
  background-image: url("../images/apps@2x.png");
}
.benefits .white-apps.webp {
  background-image: url("../images/apps@2x.webp");
}
.benefits .black-phone {
  background-color: #000;
  background-repeat: no-repeat;
  background-position-x: left;
  background-size: cover;
  color: #fff;
}
.benefits .black-phone.no-webp, .benefits .black-phone.no-js {
  background-image: url("../images/device.png");
}
.benefits .black-phone.webp {
  background-image: url("../images/device.webp");
}
.benefits .blue-tweet {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.2) 0%, rgba(33, 165, 247, 0.2) 100%), #21A7F9;
  background-size: 357px 199px;
  background-repeat: no-repeat;
  background-position-y: bottom;
  background-position-x: center;
}
.benefits .blue-tweet.no-webp, .benefits .blue-tweet.no-js {
  background-image: url("../images/tweet@2x.png");
}
.benefits .blue-tweet.webp {
  background-image: url("../images/tweet@2x.webp");
}
@media (min-width: 640px) {
  .benefits {
    padding: 140px 80px;
  }
}
@media (min-width: 768px) {
  .benefits .benefits-cards {
    grid-gap: 32px;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: auto;
  }
  .benefits .benefits-column {
    grid-gap: 32px;
  }
  .benefits .white-airport {
    background-position-y: 340px;
    background-position-x: 40px;
  }
}
@media (min-width: 1024px) {
  .benefits {
    padding: 140px 80px;
  }
  .benefits .benefits-cards {
    grid-gap: 32px;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: auto;
  }
  .benefits .benefits-column {
    grid-gap: 32px;
  }
}

.target {
  background-color: #ffffff;
  padding: 80px 20px;
}
.target .section-header {
  text-align: center;
  margin-bottom: 120px;
}
.target .target-cards {
  max-width: 1212px;
  margin: 54px auto;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.target .target-card__icon-title {
  display: flex;
  gap: 24px;
  align-items: center;
}
.target .target-card {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 48px 24px;
  border-radius: 16px;
  background-color: #FAF8FC;
  transition-delay: calc(180ms * var(--order));
}
.target .target-card__icon {
  display: flex;
  flex-wrap: wrap;
  align-self: center;
  padding: 20px;
  border-radius: 200px;
  background: #E9E2FF;
  flex-grow: 0;
}
.target .target-card__icon-wrap {
  display: flex;
  flex-wrap: wrap;
  align-self: center;
  background: linear-gradient(180deg, rgba(233, 226, 255, 0.2) 0%, rgba(233, 226, 255, 0) 100%);
  padding: 16px;
  border-radius: 200px;
  flex-grow: 0;
}
.target .target-card__title {
  display: flex;
  align-self: center;
}
.target .target-card__body {
  color: #2A292B;
}
.target .target-card__body p {
  line-height: 32px;
}
@media (min-width: 640px) {
  .target .target-card__icon-title {
    display: flex;
    flex-direction: column;
    gap: 24px;
    align-items: start;
  }
  .target .target-cards {
    max-width: 1212px;
    margin: 54px auto;
    display: flex;
    flex-direction: row;
    gap: 32px;
  }
}
@media (min-width: 768px) {
  .target {
    padding: 100px 80px;
  }
}
.get-started {
  background-color: #2A0C5B;
  background-position: center center;
  background-repeat: no-repeat;
  padding: 80px 20px;
}
.get-started.no-webp, .get-started.no-js {
  background-image: url("../images/gst-bg-min.png");
}
.get-started.webp {
  background-image: url("../images/gst-bg.webp");
}
.get-started-container {
  margin: 24px auto;
  padding: 56px 24px;
  border-radius: 24px;
  background-color: #12002F;
}
.get-started-container .section-header {
  text-align: center;
}
.get-started-container .section-header .body {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.get-started-container .section-header h2 {
  color: #FBFCFD;
  opacity: 0.9;
}
.get-started-container .section-header .get-started-subtitle {
  color: #FBFCFD;
  opacity: 0.6;
}
.get-started-container .actions {
  margin-top: 48px;
  display: flex;
  justify-content: center;
  width: 100%;
}
.get-started-container .actions button {
  padding: 16px 24px;
  border-radius: 16px;
  background: #49159E;
  color: var(--color-text-white);
  font-size: 16px;
  font-weight: 500;
  line-height: 32px;
  letter-spacing: 0.2px;
  border: 4px solid rgba(0, 0, 0, 0.15);
  box-shadow: 0px 0px 12px 0px rgba(73, 21, 158, 0.35);
  transition: background-color 400ms ease-out;
}
.get-started-container .actions button:hover {
  background-color: #3f1287;
  transition: background-color 1s ease-out;
}
@media (min-width: 640px) {
  .get-started {
    padding: 120px 80px;
  }
  .get-started-container {
    max-width: 985px;
    margin: 120px auto;
    padding: 60px;
    border-radius: 40px;
  }
}
.vision {
  background-color: white;
  padding: 40px 0 40px 0;
}
.vision section {
  display: grid;
  align-items: center;
  margin: 0 auto;
  grid-column-gap: 2rem;
  grid-row-gap: 2rem;
  grid-template-rows: auto;
  grid-template-columns: auto;
  grid-auto-columns: 1fr;
}
.vision section .vision-content {
  max-width: 606px;
  display: flex;
  flex-direction: column;
  gap: 56px;
  justify-self: center;
  padding: 20px;
}
.vision section .vision-content .section-header .body {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.vision section .vision-content .section-header .body h2 {
  font-size: 40px;
  line-height: 48px;
}
.vision section .vision-image {
  display: none;
  width: 100%;
  height: 100%;
  min-height: 25rem;
  position: relative;
  display: flex;
  overflow: hidden;
  align-items: center;
}
.vision section .vision-image picture {
  position: absolute;
  width: 150%;
}
.vision section .vision-image img {
  position: relative;
}
@media (min-width: 640px) {
  .vision {
    padding: 180px 0 80px 0;
  }
  .vision section {
    grid-column-gap: 120px;
    grid-row-gap: 0rem;
    grid-template-rows: auto;
    grid-template-columns: 1fr 1fr;
    grid-auto-columns: 1fr;
  }
  .vision section .vision-content {
    justify-self: end;
    padding-left: 80px;
  }
}
.contact {
  background: #FBFCFD;
  width: 100%;
  padding: 20px;
}
.contact .section-header {
  text-align: center;
  margin-bottom: 48px;
}
.contact .section-header .body h2 {
  margin-bottom: 12px;
}
.contact section {
  max-width: 1212px;
  margin: 0 auto;
}
.contact .contact-cards {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.contact .contact-cards a {
  display: inline-flex;
  flex: 1 1;
}
.contact .contact-card {
  display: inline-flex;
  flex: 1 1;
  padding: 32px;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  border-radius: 24px;
  border: 1px solid #EAEBEC;
  background: linear-gradient(180deg, rgba(195, 195, 195, 0.02) 0%, rgba(212, 212, 212, 0) 100%), #FFF;
  opacity: 0.9;
  background-image: url("../svg/icons/arrow-filled.svg");
  background-repeat: no-repeat;
  background-position: top 16px right 24px;
  box-shadow: rgba(0, 0, 0, 0.18) 0px 0.602187px 0.602187px -1.25px, rgba(0, 0, 0, 0.16) 0px 2.28853px 2.28853px -2.5px, rgba(0, 0, 0, 0.063) 0px 10px 10px -3.75px;
  transition: background-image 400ms ease-out, background-position 400ms ease-out;
}
.contact .contact-card:hover {
  opacity: 1;
  background-image: url("../svg/icons/arrow-filled.svg");
  background-position: top 16px right 16px;
  transition: background-image 400ms ease-out, background-position 400ms ease-out;
}
.contact .contact-card__title {
  line-height: 32px;
}
.contact .contact-card__body {
  width: 100%;
  line-height: 28px;
  color: #151415;
}
@media (min-width: 768px) {
  .contact {
    padding: 80px;
  }
  .contact .contact-cards {
    flex-direction: row;
    gap: 40px;
  }
}
.testimonials {
  background-color: #FBFCFD;
  padding: 80px 20px;
}
.testimonials .section-header {
  text-align: center;
}
.testimonials .testimonial-cards {
  max-width: 1212px;
  margin: 54px auto;
  display: flex;
  flex-direction: column;
  gap: 32px;
}
.testimonials .testimonial-card {
  display: flex;
  padding: 32px;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  border-radius: 16px;
  background: #FFF;
  flex-shrink: no-shrink;
  transition-delay: calc(180ms * var(--order));
}
.testimonials .testimonial-card__container {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.testimonials .testimonial-card__name {
  color: #313131;
  font-weight: 500;
  line-height: 32px;
  font-size: 20px;
  letter-spacing: 0.2px;
}
.testimonials .testimonial-card__title {
  color: #767676;
  font-weight: 500;
  line-height: 20px;
  font-size: 14px;
  letter-spacing: 0.1px;
}
.testimonials .testimonial-card__body {
  color: #454545;
  line-height: 32px;
}
@media (min-width: 768px) {
  .testimonials .testimonial-cards {
    flex-direction: row;
  }
}

.blog {
  background-color: #FBFCFD;
  padding: 80px 20px;
}
.blog .section-header {
  text-align: center;
}

.faq {
  background-color: #fff;
  padding: 80px 20px;
}
.faq .faq-container {
  max-width: 1212px;
  margin: 54px auto;
  display: flex;
  flex-direction: column;
  gap: 56px;
}
.faq .accordion {
  font-size: 20px;
  font-weight: 500;
  line-height: 32px;
  letter-spacing: 0.2px;
  background-color: #fff;
  color: #444;
  cursor: pointer;
  padding: 40px 80px 40px 0;
  width: 100%;
  border-top: 1px solid #444;
  text-align: left;
  outline: none;
  position: relative;
}
.faq .accordion:hover {
  background-position: center right 40px;
  color: #161616;
  border-top: 1px solid #151415;
  transition: all 500ms ease-in;
}
.faq .active,
.faq .accordion:hover {
  background-color: #fff;
  transition: all 400ms ease-out;
}
.faq .accordion__button {
  position: absolute;
  right: 24px;
  top: calc(50% - 8px);
  width: 16px;
  height: 16px;
  /* Vertical line */
  /* horizontal line */
}
.faq .accordion__button:before, .faq .accordion__button:after {
  content: "";
  position: absolute;
  background-color: #444;
  transition: transform 0.25s ease-out;
}
.faq .accordion__button:before {
  top: 0;
  left: 50%;
  width: 2px;
  height: 100%;
  margin-left: -1px;
}
.faq .accordion__button:after {
  top: 50%;
  left: 0;
  width: 100%;
  height: 2px;
  margin-top: -1px;
}
.faq .accordion:hover, .faq .accordion.active {
  cursor: pointer;
}
.faq .accordion:hover .accordion__button:before, .faq .accordion.active .accordion__button:before {
  transform: rotate(90deg);
}
.faq .accordion:hover .accordion__button:after, .faq .accordion.active .accordion__button:after {
  transform: rotate(180deg);
}
.faq .accordion.active:hover {
  cursor: pointer;
}
.faq .accordion.active:hover .accordion__button:before {
  transform: rotate(0deg);
}
.faq .accordion.active:hover .accordion__button:after {
  transform: rotate(0deg);
}
.faq .panel {
  padding: 0px 0 30px;
  display: none;
  background-color: white;
  overflow: hidden;
  color: #505050;
  line-height: 32px;
  max-width: 600px;
}
@media (min-width: 768px) {
  .faq {
    padding: 80px 80px;
  }
}

.pricing-calculator-button {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  top: 35px;
}

.pricing-columns {
  max-width: 1212px;
  margin: 54px auto;
  display: flex;
  flex-direction: column;
  gap: 32px;
}
@media (min-width: 768px) {
  .pricing-columns {
    flex-direction: row;
  }
}

.pricing-column {
  flex: 1 1 0px;
  display: flex;
  flex-direction: column;
  gap: 1em;
}
.pricing-column__content {
  display: flex;
  flex-direction: column;
  gap: 1.25em;
}
.pricing-column__content p {
  color: #2D2D2D;
}

.slider-container {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-bottom: 20px;
}
.slider-container-value__amount {
  min-width: 7em;
  display: flex;
  flex-direction: column;
  gap: 0.25em;
}
.slider-container-value__total {
  min-width: 5em;
  color: #6941C6;
  text-align: right;
}
.slider-container__slider-x-axis {
  margin: 1em -0.75em 0;
  display: flex;
  justify-content: space-between;
}
.slider-container__slider-x-axis span {
  display: inline-block;
  text-align: center;
  width: 24px;
  font-size: 12px;
  opacity: 0.5;
}
.slider-container__values {
  display: flex;
  justify-content: space-between;
}
@media (min-width: 1024px) {
  .slider-container {
    flex-direction: row;
    gap: 40px;
    margin-top: 1.5em;
  }
  .slider-container__slider {
    flex-grow: 1;
    order: -1;
    margin-top: 0.5em;
  }
}

.calculator-group {
  display: flex;
  flex-direction: column;
  gap: 40px;
}
.calculator-group__header {
  display: flex;
  justify-content: space-between;
  align-items: end;
}
.calculator-group-header__total-label {
  display: none;
}
@media (min-width: 1024px) {
  .calculator-group-header__total-label {
    display: inline-block;
  }
}
.calculator-group__list {
  display: flex;
  flex-direction: column;
  gap: 72px;
}

.calculator-slider {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.calculator-slider__values {
  flex-grow: 1;
}
@media (min-width: 1024px) {
  .calculator-slider {
    flex-direction: row;
    gap: 40px;
  }
  .calculator-slider__meta {
    width: 300px;
  }
}

.ui-widget.ui-widget-content {
  border: 0;
  border-radius: 2px;
  height: 0.375em;
  background: var(--Gray-200, #EAECF0);
  box-shadow: 0px 1px 1px 0px rgba(210, 210, 210, 0.25) inset;
}

.ui-widget-header {
  border-radius: 2px;
  background: #6941C6;
  border: 0;
}

.ui-slider .ui-slider-handle {
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: #4F1CC4;
  box-shadow: 0px 0px 3px 0px rgba(47, 27, 95, 0.15);
  width: 1.5em;
  height: 20px;
  top: -0.4em;
  margin-left: -0.75em;
}

.total-billing {
  padding-top: 2em;
  border-top: 1px solid black;
  display: flex;
  justify-content: space-between;
}
.total-billing__total {
  min-width: 5em;
  color: #6941C6;
  text-align: right;
}

.featured-post {
  max-width: 1212px;
  width: 100%;
  height: 512px;
  background-size: cover;
  background-position: center;
  border-radius: 1.5rem;
  top: 200px;
  padding: 1em 1em 1.5em;
  display: flex;
  align-items: end;
  border-radius: 32px;
  box-shadow: 0px 4px 24px 0px rgba(75, 69, 84, 0.12);
  transform: scale(1);
  transition: transform 1s;
  background-color: linear-gradient(0deg, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.5) 100%), linear-gradient(180deg, rgba(0, 0, 0, 0) 36.98%, rgba(0, 0, 0, 0.5) 100%);
}
.featured-post:hover, .featured-post:focus {
  cursor: pointer;
  transition: transform 1s;
  transform: scale(1.01);
}
.featured-post h2 {
  color: var(--primary-50);
  font-size: 32px;
  font-style: normal;
  font-weight: 600;
  line-height: 42px;
}
.featured-post__content {
  max-width: 640px;
}
.featured-post__image-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  height: 512px;
  border-radius: 1.5rem;
  background-color: var(--gray-200);
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  z-index: -1;
}
.featured-post__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.post-read-time {
  color: var(--primary-50);
  font-size: 14px;
  margin-top: 0.75em;
  margin-bottom: 0;
}

.blog-cards {
  max-width: 1212px;
  margin: 2.5em auto;
  display: flex;
  flex-direction: column;
  gap: 32px;
  flex-wrap: wrap;
}
.blog-cards .blog-card {
  display: flex;
  width: 100%;
  height: 240px;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  overflow: hidden;
  border-radius: 1rem;
  position: relative;
  transition-delay: calc(180ms * var(--order));
}
.blog-cards .blog-card .image-1.no-webp, .blog-cards .blog-card .image-1.no-js {
  background-image: url("../images/blog/blog-1.jpg");
}
.blog-cards .blog-card .image-1.webp {
  background-image: url("../images/blog/blog-1.webp");
}
.blog-cards .blog-card .image-2.no-webp, .blog-cards .blog-card .image-2.no-js {
  background-image: url("../images/blog/blog-2.jpg");
}
.blog-cards .blog-card .image-2.webp {
  background-image: url("../images/blog/blog-2.webp");
}
.blog-cards .blog-card .image-3.no-webp, .blog-cards .blog-card .image-3.no-js {
  background-image: url("../images/blog/blog-3.jpg");
}
.blog-cards .blog-card .image-3.webp {
  background-image: url("../images/blog/blog-3.webp");
}
.blog-cards .blog-card__image {
  width: 100%;
  height: 100%;
  background-color: black;
  /* fallback color */
  background-position: center;
  background-size: cover;
  transition: transform 0.5s;
}
.blog-cards .blog-card__image::before {
  content: " ";
  display: block;
  height: 100%;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  transition: all 2s;
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.5) 100%), linear-gradient(180deg, rgba(0, 0, 0, 0) 36.98%, rgba(0, 0, 0, 0.5) 100%);
}
.blog-cards .blog-card__title {
  position: absolute;
  left: 1em;
  right: 1em;
  bottom: 1em;
  z-index: 1;
}
.blog-cards .blog-card__title h4 {
  color: white;
  font-size: 24px;
  font-weight: 600;
  line-height: 32px;
  letter-spacing: 0.24px;
}
.blog-cards .blog-card__title .post-read-time {
  margin-top: 12px;
  margin-bottom: 0;
}
.blog-cards .blog-card:hover .blog-card__image:before,
.blog-cards .blog-card:focus .blog-card__image:before {
  transition: all 2s;
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.45) 0%, rgba(0, 0, 0, 0.45) 100%), linear-gradient(180deg, rgba(0, 0, 0, 0) 36.98%, rgba(0, 0, 0, 0.5) 100%);
}
.blog-cards .blog-card:hover .blog-card__image,
.blog-cards .blog-card:focus .blog-card__image {
  transition: transform 1s;
  transform: scale(1.05);
}

@media (min-width: 640px) {
  .featured-post {
    padding: 1.5em 1.5em 2.5em 1.5em;
  }
  .blog-cards {
    flex-direction: row;
  }
  .blog-cards .blog-card {
    height: 539px;
    flex: 0 0 calc(34.2% - 32px);
  }
  .blog-cards .blog-card__title {
    left: 1.5em;
    right: 1.5em;
    bottom: 2.5em;
  }
  .blog-cards--dy-grid .blog-card {
    flex: 0 0 calc(50% - 16px);
  }
  .blog-cards--dy-grid .blog-card:nth-child(3n) {
    flex-basis: 100%;
  }
  .blog-cards--dy-grid .blog-card:last-child:not(:nth-child(even)) {
    flex-basis: 100%;
  }
}
.blog-post__meta span {
  display: block;
}
.blog-post__lead-image-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  height: 540px;
  border-radius: 0.5em;
  background-color: var(--gray-200);
}
.blog-post__lead-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.blog-post__quote {
  border-left: 2px solid var(--primary-700);
  padding-left: 1.5em;
  margin-bottom: 3em;
}
.blog-post__quote p {
  color: var(--gray-900);
  font-size: 1.5em;
  font-weight: 500;
  line-height: 2em;
}
.blog-post__quote span.blog-post__quote-author {
  font-size: 0.875em;
  color: var(--gray-600);
}
.blog-post__content {
  margin-top: 6em;
  margin-bottom: 6em;
}
.blog-post__content h2 {
  margin-bottom: 1rem;
}
.blog-post__content p, .blog-post__content ul, .blog-post__content ol {
  color: var(--gray-600);
  font-size: 18px;
  line-height: 28px;
}
.blog-post__content ul, .blog-post__content ol {
  margin: 1.5em;
  display: flex;
  flex-direction: column;
  gap: 0.875em;
}
.blog-post__content section {
  margin-bottom: 2em;
}
.blog-post__content section:last-child {
  margin-bottom: 0;
}
.blog-post__block {
  padding: 2em;
  margin: 3em 0;
  background-color: var(--gray-50);
  border-radius: 1em;
}
.blog-post__media {
  margin: 3rem 0;
}
.blog-post__media-caption {
  color: var(--gray-600);
  margin-top: 1em;
  font-size: 0.875em;
}
.blog-post__intro {
  margin-bottom: 2em;
  padding-bottom: 2em;
  border-bottom: 1px solid var(--gray-200);
}
.blog-post__share {
  display: flex;
  padding: 1.5em 0;
  gap: 0.5em;
  border-top: 1px solid var(--gray-200);
}
.blog-post__share .btn {
  min-width: 46px;
}

.content-view {
  max-width: 1200px;
  margin: 0 auto;
}
.content-view--640 {
  max-width: 640px;
  padding: 1rem;
  margin: 0 auto;
}

.container--header {
  display: flex;
  flex: 0 0 100%;
  align-items: center;
}
.container--sspace-m {
  padding: 0 20px;
  margin: 0 auto;
}
.container--sspace-l {
  padding: 0 40px;
  margin: 0 auto;
}
.container--medium {
  max-width: 1212px;
}
.container--small {
  max-width: 640px;
}

.container__title {
  flex-grow: 1;
}

header {
  padding: var(--space-l) 0;
  border-bottom: 1px solid var(--gray-200);
}

.footer {
  background-color: #ffffff;
  padding: 242px 20px;
  background-repeat: no-repeat;
  background-position: left -200px bottom -200px;
  background-size: auto;
  background-image: url("../images/em-footer-bg.png");
}
.footer .container {
  margin: 20px auto 20px;
  max-width: 1172px;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1.5rem 0;
}
.footer .footer-text {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: 400px;
  color: var(--color-text-gray);
}
.footer .footer-text p {
  font-weight: 400;
  font-size: 14px;
  line-height: 24px;
}
.footer .footer-logo {
  width: 120px;
  margin-bottom: 1em;
}
.footer .footer-block h3 {
  font-size: 1rem;
  margin-bottom: 0.75rem;
}
.footer ul {
  list-style: none;
  padding-right: 40px;
}
.footer ul a {
  color: var(--color-text-muted);
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 24px; /* 200% */
  letter-spacing: 0.2px;
}
.footer ul a:hover {
  color: var(--color-text-dark);
}

@media (min-width: 768px) {
  .footer {
    padding: 242px 80px;
  }
  .footer .container {
    flex-direction: row;
    justify-content: space-between;
  }
}
.group {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--space-xs);
}
.group--stretch {
  justify-content: space-between;
}

.flex {
  display: flex;
}

.sections {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--space-xxl);
}

section .space-between {
  display: flex;
  flex-direction: column;
  gap: var(--space-l);
}

.section__container {
  margin: var(--space-l);
}

section.content {
  max-width: 1212px;
  margin: 54px auto;
  display: flex;
  flex-direction: row;
  position: relative;
}
section.content .container {
  width: 100%;
}
section.content--stack {
  flex-direction: column;
}
section.content--space-xl {
  gap: 72px;
}
section.content--2-columns {
  display: flex;
  gap: 40px;
}
section.content--2-columns > * {
  flex: 1;
}

/*# sourceMappingURL=application.sass.css.map */