/* ----------- Variables ----------- */

:root {
  /* Accent colors */
  --accent-primary: #FF5925;
  --accent-secondary: #BFE5D8;

  /* Neutral colors */
  --dark-primary: #222426;
  --dark-secondary: rgba(34, 36, 38, 0.70);
  --dark-tertiary: rgba(34, 36, 38, 0.50);
  --dark-quaternary: rgba(34, 36, 38, 0.30);
  --dark-alt: #1F3125;
  --light-primary: #F4F5F2;
  --light-secondary: #E6E9DE;
  --light-tertiary: #DFDDC6;
  --light-quaternary: #fff;

  /* Appearance */
  --border-color: var(--dark-primary);
  --border: 2px solid var(--border-color);
  --hover-color: ;

  /* Animation */
  --transition: all 0.4s ease-in-out;

  /* Corners */
  --container-radius: 0;
  --btn-radius: 1000px;

  /* Fonts */
  --root-font-size-m: 16px;
  --root-font-size-d: 18px;
  --font-primary: 'Inter', Arial, Helvetica, sans-serif;
  --font-primary-regular: 400;
  --font-primary-medium: 500;
  --font-primary-bold: 700;
  --font-primary-black: 900;
  --font-secondary: 'campaign', Arial, Helvetica, sans-serif;
  --font-secondary-regular: 400;
  --font-secondary-medium: 500;
  --font-secondary-bold: 700;
  --font-secondary-black: 900;
  --font-tertiary: 'permanent-marker', 'Courier New', Courier, monospace;
  --font-tertiary-regular: 400;

  /* Layout */
  --layout-regular: 70rem;
  --layout-narrow: 46rem;
  --layout-px-sm: 1rem;
  --layout-px-md: 2rem;
}

/* ------------------------------------- */

/* ----------- Global styles ----------- */

::selection {
  background-color: var(--light-tertiary);
  color: var(--accent-primary);
}

* {
  box-sizing: border-box;
}

html {
  font-size: var(--root-font-size-m);
  min-height: 100%;
}

@media only screen and (min-width: 768px) {
  html {
    font-size: var(--root-font-size-d);
  }
}

body {
  -webkit-overflow-scrolling: touch;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: antialiased;
  background-color: var(--light-primary);
  color: var(--dark-primary);
  font-family: var(--font-primary);
  height: 100vh;
  margin:  0;
  overflow-x: hidden;
  padding: 0;
}

main {
  flex-grow: 1; /* Makes footer stick to bottom when little content in the main container  */
}

a {
  color: var(--accent-primary);
  display: inline-block;
  transition: var(--transition);
}

a:visited {
  color: var(--dark-primary);
}

a:hover {
  color: var(--hover-color);
  text-decoration: none;
}

a:focus,
button:focus {
  outline: none;
}

figure {
  margin: 0;
  padding: 0;
}

img {
  width: 100%;
}

/* ------------------------------------- */

/* ----------- Layout ----------- */

.wrapper {
  display: flex;
  flex-direction: column;
  height: 100vh;
  position: relative;
}

.layout {
  margin-left: auto;
  margin-right: auto;
  padding-left:  var(--layout-px-sm);
  padding-right: var(--layout-px-sm);
  width: 100%;
}

@media only screen and (min-width: 1700px) {
  .layout {
    max-width: 86rem;
    padding-left:  var(--layout-px-md);
    padding-right: var(--layout-px-md);
  }
}

.layout--narrow {
  max-width: var(--layout-narrow);
}

.layout--regular {
  max-width: var(--layout-regular);
}

.section {
  margin-bottom: 2rem;
  padding-bottom: 4rem;
  padding-top:    4rem;
}

@media only screen and (min-width: 768px) {
  .section {
    padding-bottom: 9.6rem;
    padding-top:    9.6rem;
  }
}

.side-by-side {
  align-items: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

@media only screen and (min-width: 768px) {
  .side-by-side {
    flex-direction: row;
  }

  .side-by-side  > * {
    flex-basis: 50%;
  }

  .side-by-side-reverse {
    flex-direction: row-reverse;
  }
}

/* ------------------------------------- */

/* ----------- Typography ----------- */

/* Paragraph */

p {
  color: var(--dark-secondary);
  font-size: 1rem;
  line-height: 1.5;
  margin: 0 0 1em 0;
}

.paragraph--xs {
  font-size: 0.78rem;
  line-height: 1.3;
}

.paragraph--sm {
  font-size: 0.89rem;
  line-height: 1.5;
}

.paragraph {
  font-size: 1rem;
  line-height: 1.5;
}

.paragraph--lg {
  font-size: 1.3rem;
  line-height: 1.5;
}

.paragraph--xl {
  font-size: 2.2rem;
  line-height: 1.3;
}

.paragraph--inverted {
  color: var(--light-primary);
}

b,
strong {
  font-weight: 700;
}

/* Headings */

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-secondary);
  font-weight: var(--font-secondary-medium);
  font-style: normal;
}

h1 {
  margin: 0 0 0.25em 0;
}

h2,
h3,
h4 {
  margin: 0 0 0.5em 0;
}

h5,
h6 {
  margin: 0;
}

.heading {
  font-family: var(--font-secondary);
  font-weight: var(--font-secondary-medium);
  line-height: 1.2;
}

.heading--primary {
  font-size: 3rem;
  font-weight: var(--font-secondary-black);
  letter-spacing: -0.2rem;
  line-height: 1.1;
}

.heading--secondary {
  font-size: 1.9rem;
}

.heading--tertiary {
  font-size: 1.4rem;
}

.heading--quaternary {
  font-size: 1.2rem;
}

.heading--quinary {
  font-size: 1rem;
}

.subheading { 
  color: var(--dark-primary);
  font-size: 1rem;
}

@media only screen and (min-width: 1024px) {
  .heading--secondary {
    font-size: 2.4rem;
  }
  
  .heading--tertiary {
    font-size: 1.8rem;
  }
  
  .heading--quaternary {
    font-size: 1.3rem;
  }
  
  .heading--quinary {
    font-size: 1.167rem;
  }

  .subheading { 
    font-size: 1.167rem;
  }
}

.heading--inverted {
  color: var(--light-primary);
}

.label {
  color: var(--dark-tertiary);
  display: inline-block;
  font-size: 0.8rem;
  font-weight: var(--font-secondary-regular);
  letter-spacing: 0.3em;
  line-height: 1;
  text-transform: uppercase;
}

/* Lists */

ul.no-list,
ol.no-list {
  list-style-type: none;
  padding-left: 0; 
}

article ul li,
article ol li {
  line-height: 1.5;
  padding-bottom: 0.5em;
  padding-top:    0.5em;
}

article li ul,
article li ol {
  padding-bottom: 0.5em;
  padding-top:    0.5em;
}

/* ------------------------------------- */

/* ----------- Buttons ----------- */

/* General Button Styles */

button,
input[type=submit] {
  background: transparent;
  border: none;
  margin: 0;
  padding: 0;
}

button,
.button,
input[type=submit] {
  -webkit-appearance: none;
  -moz-appearance: none;
  align-items: center;
  appearance: none;
  background-color: transparent;
  border: none;
  border-color: transparent;
  border-radius: var(--btn-radius);
  box-shadow: none;
  color: inherit;
  cursor: pointer;
  display: inline-flex;
  font-family: var(--font-secondary);
  font-size: 1rem;
  flex-shrink: 0;
  font-style: normal;
  font-weight: var(--font-secondary-bold);
  letter-spacing: 0;
  outline: none;
  overflow: hidden;
  padding: 1em 1.56em;
  position: relative;
  text-decoration: none;
  transition: var(--transition);
}

/* Primary Button */

.button--primary,
.button--primary:visited {
  background-color: var(--accent-primary);
  color: var(--light-quaternary);
  fill: var(--light-quaternary);
}

.button--primary > * {
  position: relative;
  z-index: 1;
}

.button--primary::after {
  background: radial-gradient(123.32% 162.82% at 89.23% 142.31%, rgba(255, 204, 126, 0.00) 35.80%, rgba(255, 204, 126, 0.00) 57.12%, rgba(255, 228, 157, 0.40) 64.76%, rgba(255, 53, 89, 0.40) 100%);
  content: "";
  display: block;
  height: 100%;
  opacity: 1;
  left: 0;
  position: absolute;
  top: 0;
  transition: var(--transition);
  width: 100%;
}

.button--primary:hover::after {
  opacity: 0;
}

.button--primary:hover {
  background: radial-gradient(29.86% 75.82% at 55.25% -92.74%, rgba(255, 204, 126, 0.00) 35.80%, rgba(255, 204, 126, 0.00) 57.12%, rgba(255, 228, 157, 0.40) 64.76%, rgba(255, 53, 89, 0.40) 100%);
  background-color: var(--accent-primary);
  color: var(--light-quaternary);
  fill: var(--light-quaternary);
}

.button--primary:active {
  background: var(--accent-primary);
  color: var(--light-quaternary);
  fill: var(--light-quaternary);
}

/* Secondary Button */

.button--secondary,
.button--secondary:visited {
  border: 2px solid var(--dark-primary);
  color: var(--dark-primary);
  fill: var(--dark-primary);
}

.button--secondary:hover {
  background-color: var(--light-secondary);
  border-color: var(--light-secondary);
  color: var(--dark-primary);
  fill: var(--dark-primary);
}

.button--secondary:active {
  background-color: var(--light-secondary);
  border-color: var(--light-secondary);
  color: var(--dark-primary);
  fill: var(--dark-primary);
}

/* Tertiary Button */

.button--tertiary,
.button--tertiary:visited {
  background-color: var(--dark-primary);
  border: 2px solid var(--dark-primary);
  color: var(--light-primary);
  fill: var(--light-primary);
}

.button--tertiary:hover {
  background-color: transparent;
  border: 2px solid var(--dark-primary);
  color: var(--dark-primary);
  fill: var(--dark-primary);
}

.button--tertiary:active {
  background-color: transparent;
  border: 2px solid var(--dark-primary);
  color: var(--dark-primary);
  fill: var(--dark-primary);
}

/* Inverted Button */

.button--primary.inverted,
.button--primary.inverted:visited {
  background: var(--light-primary);
  background-color: var(--light-primary);
  border-color: var(--light-primary);
  color: var(--dark-primary);
  fill: var(--dark-primary);
}

.button--primary.inverted::after {
  display: none;
}

.button--primary.inverted:hover {
  background: var(--dark-primary);
  background-color: var(--dark-primary);
  border-color: var(--dark-primary);
  color: var(--light-primary);
  fill: var(--light-primary);
}

.button--primary.inverted:active {
  background: var(--dark-primary);
  background-color: var(--dark-primary);
  border-color: var(--dark-primary);
  color: var(--light-primary);
  fill: var(--light-primary);
}

.button--secondary.inverted,
.button--secondary.inverted:visited {
  background: transparent;
  border-color: var(--light-primary);
  color: var(--light-primary);
  fill: var(--light-primary);
}

.button--secondary.inverted:hover {
  background-color: rgb(223 221 198 / 5%);
  border-color: rgb(223 221 198 / 40%);
  color: var(--light-primary);
  fill: var(--light-primary);
}

.button--secondary.inverted:active {
  background-color: rgb(223 221 198 / 5%);
  border-color: rgb(223 221 198 / 40%);
  color: var(--light-primary);
  fill: var(--light-primary);
}

/* Ghost Button */

.button--ghost,
.button--ghost:visited {
  background: none;
  background-color: transparent;
  border: none;
  color: var(--dark-primary);
  fill: var(--dark-primary);
}

.button--ghost:hover {
  background: none;
  background-color: transparent;
  color: var(--accent-primary);
  fill: var(--accent-primary);
}

.button--ghost:active {
  background: none;
  background-color: transparent;
  color: var(--accent-primary);
  fill: var(--accent-primary);
}

.button--ghost svg {
  opacity: 0;
  transform: translateX(-0.2em);
  transition: all 0.6s cubic-bezier(.5,2.5,.7,.7);
}

.button--ghost:hover svg {
  opacity: 1;
  transform: translateX(0.2em) scale(1.1);
}

.button--ghost svg {
  opacity: 0;
}

.button--offset {
  margin-left:  -1.56em;
  margin-right: -1.56em;
}

/* Button Sizing */

.button--xs {
  font-size: 0.78rem;
}

.button--sm {
  font-size: 0.89rem;
}

.button--md {
  font-size: 1rem;
}

.button--lg {
  font-size: 1.3rem;
}

.button--xl {
  font-size: 1.67rem;
}

/* Button Icons */

.button__icon {
  align-items: center;
  display: flex;
  justify-content: center;
}

.button__icon svg {
  fill: inherit;
  height: 1em;
  margin-right: 0.4em;
  width:  1em;
}

.button.button--icon-right .button__icon {
  order: 1;
}

.button.button--icon-right .button__icon svg {
  margin-left: 0.4em;
  margin-right: 0;
}

/* Button Stack */

.button-stack {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
}

.button-stack > * {
  margin-bottom: 1rem;
  margin-left:  0.4rem;
  margin-right: 0.4rem;
}

/* ------------------------------------- */

.topbar {
  background-color: var(--accent-secondary);
  color: #295C52;
  font-size: 0.8rem;
  font-weight: 500;
  padding: 0.8em;
  text-align: center;
}

.topbar svg {
  width: 0.8em;
}

/* ----------- Header ----------- */

.header {
  margin-left: auto;
  margin-right: auto;
  padding-bottom: 1rem;
  padding-top: 1rem;
  text-align: center;
  width: 100%;
}

@media only screen and (min-width: 640px){
  .header {
    align-items: center;
    display: flex;
    justify-content: space-between;
  }
}

/* Logo */

.logo {
  color: var(--dark-primary);
  display: block;
  line-height: 0;
  position: relative;
  text-decoration: none;
  transition: var(--transition);
}

.logo:visited {
  color: var(--dark-primary);
}

.logo:hover {
  color: var(--accent-primary);
  text-decoration: none;
}

/* Navigation */

.nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin-bottom: 0;
  margin-top: 0;
  padding-bottom: 1rem;
  padding-left: 0;
  padding-top: 1rem;
}

@media only screen and (min-width: 640px){
  .nav {
    padding-bottom: 0.4rem;
    padding-top:    0.4rem;
  }
}

.nav__item {
  flex-shrink: 0;
  font-size: 0.89rem;
}

@media only screen and (min-width: 640px){
  .nav__item {
    font-size: 0.78rem;
  }
}

.nav__item a {
  color: var(--dark-secondary);
  padding: 0.8em 1em;
  text-decoration: none;
}

.nav__item a:visited {
  color: var(--dark-secondary);
}

.nav__item a:hover {
  color: var(--dark-primary);
}

.nav__item.active {
  cursor: text;
}

.nav__item.active a {
  color: var(--dark-quaternary);
  cursor: none;
  pointer-events: none;
}

.nav__item.active a:visited {
  color: var(--dark-quaternary);
}

.nav__item--featured a {
  font-weight: var(--font-primary-medium);
}

/* ----------------------------------- */

/* ----------- Footer ----------- */

.footer {
  background-color: var(--accent-primary);
  background: radial-gradient(107.62% 89.39% at 50.00% 132.83%, rgba(255, 204, 126, 0.00) 25.70%, rgba(255, 204, 126, 0.00) 45.78%, rgba(255, 228, 157, 0.40) 53.17%, rgba(255, 89, 37, 0.40) 100%), #FF5925;
  font-size: 1.125rem;
  width: 100%;
}

.footer--simple {
  position: initial;
}

.footer-bg {
  background: linear-gradient(180deg, #F4F5F2 0%, #F4F5F2 89.05%, #FF5925 89.06%, #FF5925 100%);
}

.footer__cta {
  padding-top: 10rem;
  position: relative;
}

.footer__meta {
  align-items: center;
  color: var(--light-tertiary);
  display: flex;
  flex-direction: column-reverse;
  font-size: 0.78rem;
  justify-content: space-between;
  margin: 0 auto;
  margin-bottom: 1rem;
  max-width: 34rem;
  opacity: 0.8;
}

.footer__meta a,
.footer__meta a:visited {
  color: var(--light-tertiary);
}

.footer .nav {
  align-items: baseline;
  display: flex;
  flex-shrink: 0;
  padding: 0;
}

.footer .nav__item a,
.footer .nav__item a:visited {
  color: var(--light-primary);
}

@media only screen and (min-width: 640px) {
  .footer__meta {
    align-items: baseline;
    flex-direction: row;
  }
}

@media only screen and (min-width: 1200px) {
  .footer__cta {
    padding-bottom: 12rem;
    padding-top: 14rem;
  }
}

/* ----------------------------------- */

/* ----------- Hero ----------- */

.hero {
  border: 2px solid var(--accent-primary);
  overflow: hidden;
  padding: 0;
  position: relative;
}

.hero::before {
  background-image: url('../img/al-hero-question-feed.svg');
  background-position: top left;
  background-repeat: no-repeat;
  content: "";
  display: block;
  height: 61px;
  left: -2px;
  position: absolute;
  top: -2px;
  width: 2401px;
}

.hero::after {
  background-image: url('../img/al-hero-question-feed.svg');
  background-position: top left;
  background-repeat: no-repeat;
  content: "";
  display: block;
  height: 61px;
  right: -2px;
  position: absolute;
  bottom: -2px;
  width: 2401px;
}

.hero__wrapper {
  padding-bottom: 6.5rem;
  padding-top: 8rem;
  position: relative;
}

.chip {
  background-color: #D8EFE7;
  color: #295C52;
  display: inline-block;
  font-size: 0.875rem;
  font-weight: 500;
  margin-bottom: 1rem;
  padding: 0.3em 0.5em;
}

@media only screen and (min-width: 1024px) {
  .hero__heading {
    font-size: 5.25rem;
  }
}

@media only screen and (min-width: 640px) and (max-width: 1024px) {
  .hero__heading {
    padding-left:  2rem;
    padding-right: 2rem;
  }

  .hero__subheading {
    padding-left:  4rem;
    padding-right: 4rem;
  }
}

@media only screen and (min-width: 768px) {
  .hero__wrapper {
    padding-bottom: 12rem;
    padding-top:    12rem;
  }

  .hero__wrapper::before {
    background-image: url(../img/al-hero-question-feed.svg);
    background-position: top left;
    background-repeat: no-repeat;
    content: "";
    display: block;
    height: 61px;
    position: absolute;
    right: 59px;
    top: -2px;
    transform: rotate(270deg);
    transform-origin: top right;
    width: 2401px;
  }
  
  .hero__wrapper::after {
    background-image: url(../img/al-hero-question-feed.svg);
    background-position: top left;
    background-repeat: no-repeat;
    bottom: -67px;
    content: "";
    display: block;
    height: 61px;
    position: absolute;
    left: -2px;
    transform: rotate(270deg);
    transform-origin: top left;
    width: 2401px;
  }

  .demo-hero {
    padding-top: 7rem;
  }
}

/* ----------------------------------- */

/* ----------- Features ----------- */

.features {
  align-items: stretch;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 0;
}

.features__option {
  background-color: #fff;
  cursor: pointer;
  margin-bottom: 1rem;
  flex-basis: 5.5rem;
  flex-grow: 1;
  max-height: 46rem;
  overflow: hidden;
  position: relative;
  transition: 1s cubic-bezier(0.05, 0.61, 0.41, 0.95);
}

.features__option:last-of-type {
  margin-bottom: 0;
}

.features__option.active {
  flex-basis: 100rem;
  padding: 2rem 0;
}

.features__option:not(.active) {
  flex-grow: 0;
}

.features__option:nth-child(1) {
  --feature-markee: url('../img/markee-square.svg');
}

.features__option:nth-child(2) {
  --feature-markee: url('../img/markee-rhombus.svg');
}

.features__option:nth-child(3) {
  --feature-markee: url('../img/markee-circle.svg');
}

.features__option:nth-child(4) {
  --feature-markee: url('../img/markee-triangle.svg');
}

.features__option:not(.active)::after {
  background-color: var(--dark-primary);
  content: "";
  display: block;
  width: calc(100% - (50px + 5.2rem));
  top: 50%;
  position: absolute;
  right: 2rem;
  transform: translateY(-50%);
  height: 2px;
}

.features__option:not(.active)::before {
  background-image: var(--feature-markee);
  background-position: center center;
  background-repeat: no-repeat;
  content: "";
  display: block;
  height: 50px;
  bottom: 50%;
  position: absolute;
  left: 2rem;
  transform: translateY(50%);
  width: 50px;
}

.features__visual {
  margin-bottom: 2rem;
  margin-top: 0;
  max-width: 366px;
  transform: translateY(-2rem) scale(0.7) rotate(-15deg) ;
  transition: transform 1s cubic-bezier(0.05, 0.61, 0.41, 0.95);
}

.features__text {
  padding-left: 2.6rem;
  padding-right: 2.6rem;
  transform: translateY(-4rem);
  transition: transform 1s cubic-bezier(0.05, 0.61, 0.41, 0.95);
}

.features__option:not(.active) .features__visual,
.features__option:not(.active) .features__text {
  opacity: 0;
  
}

.features__option.active .features__text {
  opacity: 1;
  transform: translateY(0);
}

.features__option.active .features__visual {
  opacity: 1;
  transform: translateY(0) scale(1) rotate(0);
}

@media only screen and (min-width: 860px) {
  .features {
    flex-direction: row;
  }

  .features__option {
    margin-bottom: 0;
    margin-right: 1rem;
    min-width: 5.5rem;
  }

  .features__option:last-of-type {
    margin-right: 0;
  }

  .features__option.active {
    padding: 5rem 2.6rem;
  }

  .features__option:not(.active)::after {
    height: calc(100% - (50px + 8rem));
    left: 50%;
    top: 3rem;
    transform: translateX(-50%);
    width: 2px;
  }

  .features__option:not(.active)::before {
    height: 50px;
    left: 50%;
    bottom: 3rem;
    transform: translateX(-50%);
    width: 50px;
  }
}

/* ----------------------------------- */

/* ----------- Process ----------- */

.process__visual {
  align-items: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-top: 2rem;
}

.process__visual > * {
  margin-bottom: 1rem;
  margin-left:  1rem;
  margin-right: 1rem;
}

.process__visual-arrow {
  transform: rotate(90deg);
}

.process__visual-answer {
  transform: rotate(0);
  transition: all 0.5s cubic-bezier(0.075, 0.82, 0.165, 1);
}

.process__visual-answer:hover {
  transform: rotate(135deg);
}

.process__visual-question {
  transform: rotate(0);
  transform-origin: bottom left;
  transition: all 0.5s cubic-bezier(0.075, 0.82, 0.165, 1);
}

.process__visual-question:hover {
  transform: rotate(-15deg);
}

.process__visual-knowledge {
  transform: rotate(0);
  transform-origin: bottom right;
  transition: all 0.5s cubic-bezier(0.075, 0.82, 0.165, 1);
}

.process__visual-knowledge:hover {
  transform: rotate(15deg);
}

@media only screen and (min-width: 768px) {
  .process__visual {
    flex-direction: row;
  }

  .process__visual-arrow {
    transform: rotate(0);
  }
}

/* ----------------------------------- */

/* ----------- Benefits ----------- */

.benefits {
  padding-bottom: 4rem;
  padding-top:    4rem;
}

.benefits__item {
  position: relative;
}

.benefits__visual {
  margin: 0;
  max-width: 20rem;
  padding: 0;
}

.benefits__visual img {
  display: block;
  width: 100%;
}

@media only screen and (min-width: 768px) {
  .benefits__visual {
    margin-right: 2rem;
  }
}

/* ----------------------------------- */

/* ----------- Cards ----------- */

.card-list {
  align-items: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.card-list .card {
  flex-basis: 45%;
  margin-bottom: 1rem;
  width: 100%;
}

.card-list .card:last-of-type {
  margin-right: 0;
}

.card {
  background-color: rgb(255 89 37 / 0%);
  border: 2px solid var(--accent-primary);
  display: block;
  text-decoration: none;
  transition: var(--transition);
}

a.card:hover {
  background-color: rgb(255 89 37 / 10%);
}

.card img {
  display: block;
}

.card__img {
  align-items: center;
  aspect-ratio: 1.7;
  display: flex;
  justify-content: center;
}

.card__label {
  border-top: 2px solid var(--accent-primary);
  color: var(--accent-primary);
  display: block;
  font-family: var(--font-primary);
  font-size: 0.89rem;
  font-weight: var(--font-primary-bold);
  letter-spacing: 1.96px;
  text-align: center;
  padding: 1.8em;
  text-transform: uppercase;
  white-space: nowrap;
}

@media only screen and (min-width: 640px) {
  .card-list {
    flex-direction: row;
    justify-content: space-between;
  }

  .card-list .card {
    flex-basis: calc(100% / 3);
    margin-bottom: 0;
    margin-right: 1rem;
  }
}

/* ----------------------------------- */

/* ----------- Demo ----------- */

.mockup {
  border: 2px solid var(--accent-primary);
  margin-bottom: 2.4rem;
}

.mockup__topbar {
  border-bottom: 2px solid var(--accent-primary);
  display: flex;
  justify-content: center;
  padding: 1rem;
  text-align: center;
}

.mockup__topbar-dots {
  display: flex;
  opacity: 0.2;
  margin-right: 1rem;
}

.mockup__topbar-dots span {
  background-color: var(--accent-primary);
  border-radius: 50%;
  display: block;
  height: 14px;
  margin-right: 14px;
  width: 14px;
}

.mockup__topbar-row {
  background-color: var(--accent-primary);
  border-radius: 1000px;
  height: 14px;
  max-width: 58rem;
  opacity: 0.2;
  padding-left: 1rem;
  padding-right: 1rem;
  width: 100%;
}

.mockup__container {
  padding-bottom: 3rem;
  padding-left: 2rem;
  padding-right: 2rem;
  padding-top: 2rem;
}

.mockup__title {
  font-size: 2rem;
  margin-bottom: 3rem;
}

.overview__top {
  align-items: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-bottom: 2rem;
}

@media only screen and (min-width: 768px) {
  .mockup {
    margin-bottom: 5rem;
  }

  .mockup__title {
    font-size: 3rem;
    margin-bottom: 5rem;
  }

  .overview__top {
    flex-direction: row;
    padding-bottom: 4rem;
    padding-top: 4rem;
  }

  .overview__top  > * {
    flex-basis: 50%;
  }
}

.overview__img {
  align-items: center;
  aspect-ratio: 1;
  background-color: rgba(78, 79, 36, 0.08);
  border-radius: 40px;
  display: flex;
  justify-content: center;
  padding: 2rem;
}

.overview__img svg {
  width: 100%;
}

.overview__text {
  max-width: 26rem;
  padding: 2rem;
}

.overview__text svg {
  max-width: 352px;
}

.overview__heading {
  font-family: var(--font-tertiary);
  font-weight: var(--font-tertiary-regular);
  font-size: 2.4rem;
}

.overview__cols {
  align-items: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.overview__col { 
  margin-bottom: 1.167rem;
  max-width: 214px;
  text-align: center;
}

.overview__col svg {
  width: 100%;
}

.overview__theme-switcher {
  align-items: center;
  border-radius: 100px;
  border: 2px solid var(--dark-primary);
  display: flex;
  justify-content: center;
  margin: 0 0 3rem 0;
  max-width: 16rem;
  padding: 0;
  position: relative;
}

.overview__theme-switcher::before {
  content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='23' height='23' viewBox='0 0 23 23' fill='none'%3E%3Cpath d='M9.68465 1.37786C9.94425 0.704578 10.7005 0.36924 11.3737 0.628862C11.8328 0.805924 12.3797 0.986592 12.9913 1.18867C15.4245 1.9926 18.8833 3.13537 21.9268 5.73798C22.4752 6.20694 22.5397 7.0317 22.0707 7.58015C21.6018 8.12859 20.7771 8.19303 20.2287 7.72407C17.6207 5.49387 14.8127 4.55828 12.3996 3.75425C11.707 3.52351 11.047 3.3036 10.4336 3.06704C9.76036 2.80741 9.42505 2.05114 9.68465 1.37786Z' fill='%23222426'/%3E%3Cpath d='M10.4881 13.7946C7.0517 14.1857 3.8501 14.8737 1.97253 15.3821C1.27606 15.5708 0.55857 15.159 0.369966 14.4625C0.181362 13.766 0.593068 13.0484 1.28954 12.8598C3.28423 12.3196 6.61546 11.6054 10.1926 11.1982C13.7425 10.7941 17.6707 10.6755 20.7918 11.4115C21.4941 11.5771 21.9292 12.2808 21.7636 12.9831C21.598 13.6855 20.8944 14.1206 20.1922 13.9549C17.518 13.3243 13.9518 13.4003 10.4881 13.7946Z' fill='%23222426'/%3E%3Cpath d='M22.1608 18.7801C22.7802 18.41 22.9824 17.6078 22.6123 16.9884C22.2422 16.3689 21.4401 16.1667 20.8207 16.5368C19.8588 17.1116 18.2889 17.9871 16.7289 18.7329C15.9487 19.1059 15.188 19.4382 14.5174 19.6835C13.8232 19.9375 13.3146 20.0644 13.0086 20.0878C12.2892 20.1426 11.7504 20.7703 11.8052 21.4899C11.8601 22.2094 12.4878 22.7482 13.2072 22.6934C13.8809 22.642 14.6627 22.4129 15.415 22.1377C16.1907 21.8539 17.0324 21.4841 17.8558 21.0905C19.503 20.303 21.1448 19.3872 22.1608 18.7801Z' fill='%23222426'/%3E%3C/svg%3E");
  left: -2rem;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

.overview__theme-switcher::after {
  content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='19' height='26' viewBox='0 0 19 26' fill='none'%3E%3Cpath d='M1.4003 7.74353C0.780856 8.11362 0.578716 8.91579 0.948804 9.53523C1.31889 10.1547 2.12106 10.3568 2.7405 9.98672C4.52034 8.92335 7.41844 7.30716 10.3047 5.92741C11.748 5.23745 13.1713 4.6148 14.4401 4.1507C15.7324 3.67799 16.7747 3.40378 17.4858 3.34957C18.2052 3.29473 18.744 2.66701 18.6892 1.94753C18.6344 1.22804 18.0066 0.689234 17.2872 0.744076C16.2084 0.826304 14.8929 1.2027 13.5425 1.69666C12.1686 2.19921 10.6642 2.85926 9.17769 3.56988C6.2043 4.99129 3.23425 6.64783 1.4003 7.74353Z' fill='%23222426'/%3E%3Cpath d='M9.38592 12.6308C11.55 12.2527 13.5781 11.5769 14.692 11.1349C15.3627 10.8687 16.1222 11.1967 16.3883 11.8674C16.6545 12.5381 16.3265 13.2976 15.6558 13.5637C14.4193 14.0543 12.2162 14.789 9.83561 15.2049C7.50745 15.6116 4.76099 15.7602 2.59593 14.8389C1.93197 14.5563 1.62278 13.789 1.90533 13.1251C2.18789 12.4611 2.95518 12.1519 3.61914 12.4345C5.05793 13.0468 7.16945 13.018 9.38592 12.6308Z' fill='%23222426'/%3E%3Cpath d='M9.78769 24.4255C9.38559 25.0247 8.57391 25.1844 7.97475 24.7823C7.71092 24.6052 7.38881 24.4175 7.02298 24.2043C5.52412 23.3307 3.29121 22.0293 1.32417 19.2809C0.904213 18.6941 1.03945 17.878 1.62623 17.458C2.213 17.0381 3.02912 17.1733 3.44908 17.7601C5.0565 20.006 6.69423 20.9694 8.17099 21.8381C8.6066 22.0943 9.02821 22.3423 9.4309 22.6126C10.0301 23.0147 10.1898 23.8264 9.78769 24.4255Z' fill='%23222426'/%3E%3C/svg%3E");
  position: absolute;
  right: -1.8rem;
  top: 50%;
  transform: translateY(-50%);
}

.overview__theme-switcher button {
  color: var(--dark-tertiary);
  font-size: 0.78rem;
  font-weight: 500;
  transition: var(--transition);
}

.overview__theme-switcher button:hover {
  background-color: var(--light-secondary);
  color: var(--dark-primary);
}

.overview__theme-switcher button.active {
  color: var(--dark-primary);
  cursor: none;
  pointer-events: none;
}

.parts__cards {
  align-items: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-bottom: 4rem;
  padding-top: 12rem;
}

.parts__cards-list {
  margin-bottom: 0.5rem;
  max-width: 952px;
}

.parts__cards-lines {
  max-width: 476px;
}

.parts__cols {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  padding-top: 2rem;
  padding-bottom: 4rem;
}

.parts__cols svg {
  margin-bottom: 1.167rem;
  margin-right: 0.5rem;
  max-width: 440px;
}

@media only screen and (min-width: 640px) {
  .overview__cols {
    flex-direction: row;
    justify-content: space-around;
  }

  .overview__col {
    flex-basis: calc(100% / 3);
    margin-bottom: 0;
  }

  .overview__theme-switcher {
    margin-bottom: 5rem;
  }

  .parts__cards {
    padding-bottom: 6rem;
  }

  .parts__cards-list {
    margin-bottom: 1.67rem;
  }

  .parts__cols {
    flex-direction: row;
    padding-bottom: 6rem;
  }

  .parts__cols svg {
    margin-bottom: 0;
  }
}

@media only screen and (min-width: 768px) {
  .overview__text {
    margin-left: 4rem;
    padding: 0
  }

  .overview__img svg {
    width: 249px;
  }
}

/* ----------------------------------- */

/* ----------- Widget ----------- */

.widget {
  --widget-bg: #fff;
  --widget-border-radius: 12px;
  --widget-bg-highlights: #F4F5F2;
  --widget-border-color: #CCCEC8;
  --widget-text-color: #222426;
  --widget-primary-btn-color: #222426;
  --widget-primary-btn-text-color: #fff;
  --widget-secondary-btn-color: #F4F5F2;
  --widget-secondary-btn-text-color: #222426;
  --widget-shadow: 0px 14px 54px 0px rgba(34, 36, 38, 0.04);
  background-color: var(--widget-bg);
  border-radius: var(--widget-border-radius);
  /* box-shadow: var(--widget-shadow); */
  margin-bottom: 3rem;
  padding: 1rem;
}

.widget--highlights {
  margin-bottom: 6rem;
}

.widget--highlights::before {
  content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='39' height='40' viewBox='0 0 39 40' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M22.3271 0.23332C23.1333 0.40834 23.6451 1.20384 23.4701 2.01013C22.255 7.60764 16.1539 18.7237 1.4939 18.7237C0.668843 18.7237 0 18.0549 0 17.2298C0 16.4048 0.668843 15.7359 1.4939 15.7359C14.2638 15.7359 19.517 6.13653 20.5503 1.37632C20.7253 0.570039 21.5208 0.0582996 22.3271 0.23332Z' fill='%23222426'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M21.7801 39.6205C20.9649 39.4935 20.407 38.7296 20.5341 37.9144C20.9602 35.1802 22.2357 31.1089 24.7254 27.6807C27.2398 24.2185 31.0811 21.3131 36.5508 21.3131C37.3759 21.3131 38.0447 21.982 38.0447 22.807C38.0447 23.6321 37.3759 24.3009 36.5508 24.3009C32.3002 24.3009 29.2696 26.5081 27.1429 29.4364C24.9915 32.3988 23.8569 35.9962 23.4862 38.3745C23.3592 39.1897 22.5953 39.7476 21.7801 39.6205Z' fill='%23222426'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M21.8437 0.00944075C21.0237 0.101394 20.4336 0.840613 20.5256 1.66053C20.9377 5.33513 22.1796 10.8558 24.6102 15.5066C27.0163 20.1106 30.8416 24.3009 36.5508 24.3009C37.3759 24.3009 38.0447 23.6321 38.0447 22.807C38.0447 21.982 37.3759 21.3131 36.5508 21.3131C32.5397 21.3131 29.4931 18.3992 27.2581 14.1227C25.0477 9.8931 23.8794 4.75727 23.4948 1.32754C23.4028 0.50762 22.6636 -0.0825129 21.8437 0.00944075Z' fill='%23222426'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M22.248 39.6193C23.0625 39.4879 23.6164 38.7212 23.485 37.9066C22.8931 34.2359 21.1176 28.7662 17.6679 24.1754C14.1904 19.5476 8.93857 15.7359 1.4939 15.7359C0.668843 15.7359 0 16.4048 0 17.2298C0 18.0549 0.668843 18.7237 1.4939 18.7237C7.76422 18.7237 12.2084 21.8835 15.2793 25.9702C18.3779 30.0938 20.003 35.0814 20.5353 38.3823C20.6667 39.1968 21.4335 39.7506 22.248 39.6193Z' fill='%23222426'/%3E%3C/svg%3E");
  left: -1rem;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

.widget--highlights::after {
  content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='31' height='40' viewBox='0 0 31 40' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M14.3894 0.206644C15.2104 0.288131 15.81 1.01976 15.7285 1.84079C15.3686 5.46646 14.2833 10.9203 12.1576 15.5165C10.0807 20.0069 6.69968 24.301 1.4939 24.301C0.668843 24.301 0 23.6321 0 22.8071C0 21.982 0.668843 21.3132 1.4939 21.3132C4.81005 21.3132 7.45371 18.5693 9.44576 14.2623C11.3889 10.061 12.4166 4.95796 12.7553 1.5457C12.8368 0.724671 13.5684 0.125157 14.3894 0.206644Z' fill='%23222426'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M14.0354 39.624C13.2183 39.51 12.6483 38.7552 12.7623 37.938C13.1826 34.926 14.4445 30.4208 16.9134 26.6238C19.3944 22.8083 23.2367 19.5205 28.7825 19.5205C29.6076 19.5205 30.2764 20.1893 30.2764 21.0144C30.2764 21.8394 29.6076 22.5083 28.7825 22.5083C24.608 22.5083 21.5784 24.9305 19.4183 28.2525C17.2462 31.593 16.0979 35.6529 15.7214 38.3509C15.6074 39.1681 14.8526 39.7381 14.0354 39.624Z' fill='%23222426'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M14.0603 0.0112278C13.2414 0.111507 12.6588 0.856683 12.759 1.67563C13.174 5.06428 14.4229 10.1491 16.8683 14.4346C19.3054 18.7056 23.1407 22.5083 28.7825 22.5083C29.6076 22.5083 30.2764 21.8394 30.2764 21.0144C30.2764 20.1893 29.6076 19.5205 28.7825 19.5205C24.704 19.5205 21.6674 16.8164 19.4634 12.9539C17.2677 9.10594 16.1065 4.43061 15.7247 1.31248C15.6244 0.493541 14.8792 -0.0890509 14.0603 0.0112278Z' fill='%23222426'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M14.4441 39.6246C15.2616 39.5129 15.8337 38.7597 15.722 37.9422C15.3518 35.2328 14.2408 31.1785 12.0618 27.7563C9.87375 24.3197 6.45555 21.3132 1.4939 21.3132C0.668843 21.3132 0 21.982 0 22.8071C0 23.6321 0.668843 24.301 1.4939 24.301C5.05418 24.301 7.6607 26.4069 9.54151 29.3609C11.4314 32.3292 12.4334 35.9437 12.7617 38.3467C12.8734 39.1642 13.6266 39.7363 14.4441 39.6246Z' fill='%23222426'/%3E%3C/svg%3E");
  position: absolute;
  right: -1rem;
  top: 50%;
  transform: translateY(-50%);
}

.widget-highlights {
  display: grid;
  grid-gap: 0.75rem;
  grid-template-columns: repeat(2, 1fr);
  margin: 0;
}

.widget-highlights__item {
  /* align-items: center; */
  /* align-self: stretch; */
  /* background-color: var(--widget-bg-highlights); */
  /* border-radius: calc(var(--widget-border-radius) / 2); */
  display: flex;
  font-size: 1rem;
  /* padding: 2.67em 0.89em 2.67em 1.67em ; */
  flex-direction: column;
  letter-spacing: -0.05em;
  margin-bottom: 1rem;
  max-width: 100%;

  background-color: transparent;
  border-radius: 4px;
  box-shadow: 0px 2px 4px 0px rgba(188, 193, 176, 0.04), 0px 4px 8px 0px rgba(188, 193, 176, 0.06), 0px 6px 16px 0px rgba(188, 193, 176, 0.08), 0px 12px 42px 0px rgba(188, 193, 176, 0.08);
  /* cursor: pointer; */
  padding: 1.5rem;
  transition: all 0.4s ease-in-out;
}

.widget-highlights__item:last-of-type {
  margin-bottom: 0;
}

.widget-highlights__item header {
  display: flex;
}

.widget-highlights__item h6 {
  font-family: var(--font-primary);
  font-weight: 500;
  font-size: 0.875rem;
  margin: 0;
  letter-spacing: 0;
}

.widget-highlights__item .icon {
  align-items: center;
  display: flex;
  justify-content: center;
  margin-right: 0.7rem;
}

.widget-highlights__item p {
  color: #818A8F;
  font-size: 0.875rem;
  margin: 0;
  letter-spacing: 0;
  padding-left: 1.6rem;
}

.widget-form {
  border-radius: calc(var(--widget-border-radius) / 2);
  border: 1px solid var(--widget-border-color);
  display: flex;
  flex-direction: column;
  margin-top: 1rem;
  padding: 0.67rem;
}

.widget-form__input {
  border: none;
  color: var(--widget-text-color);
  flex-grow: 1;
  padding: 2em 1em 2.6em;
}

.widget-form__input::placeholder {
  opacity: 0.5;
}

.widget-form__btn {
  background-color: var(--widget-primary-btn-color);
  border-radius: calc(var(--widget-border-radius) / 2);
  color: var(--widget-primary-btn-text-color);
  justify-content: center;
}

.widget-answer {
  max-width: 35rem;
  padding: 2rem;
  position: relative;
}

.widget-answer::after {
  content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='58' viewBox='0 0 48 58' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M43.5786 18.0231C43.9137 18.7047 43.9358 19.4444 43.8446 20.1018C43.6646 21.3995 43.0091 22.7485 42.1873 24.0322C41.3471 25.3446 40.2394 26.731 38.9951 28.1236C36.5056 30.9099 33.3577 33.8441 30.413 36.4305C29.3133 37.3964 28.2363 38.3186 27.2265 39.171C29.336 38.7457 31.6489 38.3874 33.918 38.1545C36.8184 37.8567 39.7238 37.7555 42.0688 38.0098C43.2363 38.1364 44.3482 38.3593 45.2762 38.7381C46.1778 39.1062 47.1438 39.7206 47.6311 40.7791C48.18 41.9714 47.6958 43.104 47.2149 43.8206C46.7135 44.5676 45.9515 45.2852 45.1058 45.9542C43.3925 47.3095 40.9281 48.7787 38.2182 50.2149C32.7726 53.101 26.0228 56.0161 21.4708 57.8199C20.6169 58.1583 19.6504 57.7404 19.3121 56.8865C18.9737 56.0326 19.3916 55.0661 20.2455 54.7277C24.7357 52.9484 31.3629 50.0838 36.6607 47.276C39.3226 45.8652 41.5715 44.509 43.0422 43.3456C43.7508 42.7851 44.1902 42.3374 44.4186 42.0169C44.3289 41.9601 44.2006 41.8916 44.0192 41.8176C43.4933 41.6029 42.7228 41.4263 41.7103 41.3166C39.6954 41.0981 37.0506 41.1765 34.2577 41.4632C31.4794 41.7485 28.6302 42.2318 26.233 42.7891C23.772 43.3612 21.9774 43.9692 21.1757 44.4377C21.0342 44.5203 20.8942 44.5987 20.7684 44.661C20.7073 44.6912 20.6217 44.7316 20.5249 44.7681C20.5235 44.7686 20.5216 44.7693 20.5195 44.7702C20.4675 44.7901 20.2057 44.8905 19.8744 44.8882C19.7079 44.8871 19.2062 44.8612 18.757 44.4542C18.2232 43.9707 18.1781 43.3476 18.2201 43.0077C18.2573 42.7065 18.3677 42.4899 18.4109 42.4094C18.4659 42.3067 18.5214 42.2278 18.5562 42.1809C18.6749 42.0208 18.8175 41.8828 18.8902 41.8133C19.2325 41.4858 19.9311 40.9041 20.7926 40.1925C20.9968 40.0239 21.2135 39.8451 21.4418 39.6569C23.2037 38.2042 25.6474 36.1892 28.218 33.9314C31.1269 31.3765 34.1579 28.5453 36.5148 25.9074C37.6938 24.5879 38.6763 23.3475 39.386 22.2389C40.0593 21.1871 40.4128 20.3672 40.5269 19.7825C40.501 19.785 40.4736 19.788 40.4446 19.7915C40.1232 19.8308 39.7017 19.9283 39.1766 20.0996C37.0316 20.7995 33.918 22.4731 30.5669 24.5814C27.2507 26.6679 23.8231 29.1024 21.0849 31.2332C19.7156 32.2988 18.5325 33.2778 17.6288 34.0906C16.6786 34.9453 16.165 35.5048 16.0035 35.7516C15.8979 35.9129 15.7283 36.1502 15.4876 36.3529C15.2903 36.5191 14.6412 36.9924 13.7706 36.719C12.9735 36.4686 12.6878 35.794 12.6156 35.608C12.5133 35.3443 12.4725 35.0842 12.4517 34.9053C12.3716 34.2157 12.4316 33.1328 12.5267 31.9552C12.6204 30.7956 12.7653 29.3714 12.9251 27.801C12.9356 27.6979 12.9461 27.5942 12.9567 27.4899C13.1298 25.7883 13.3187 23.9127 13.4844 21.9688C13.817 18.0675 14.0496 13.9559 13.8795 10.5039C13.7944 8.77705 13.6107 7.27011 13.31 6.06363C13.0141 4.87593 12.6439 4.14252 12.2894 3.74846C12.2502 3.77085 12.2006 3.80248 12.1402 3.84695C11.6069 4.23924 10.8587 5.16449 10.004 6.72828C8.3351 9.78189 6.6378 14.5574 5.43048 19.8942C4.22527 25.2218 3.53736 30.9814 3.81202 35.9868C4.09111 41.0728 5.34228 44.9994 7.62354 47.106C8.29833 47.7291 8.34021 48.7812 7.71709 49.456C7.09397 50.1308 6.04181 50.1727 5.36703 49.5496C2.10295 46.5354 0.782831 41.4893 0.490893 36.1691C0.194527 30.7682 0.935851 24.688 2.18633 19.1603C3.43469 13.642 5.21952 8.54702 7.08538 5.13311C7.99809 3.46314 9.03047 2.00537 10.1692 1.16769C10.7541 0.737399 11.4985 0.373823 12.3589 0.373048C13.273 0.372225 14.0475 0.780061 14.6344 1.38685C15.5993 2.38451 16.1727 3.7955 16.5374 5.2594C16.9104 6.75589 17.1108 8.49925 17.2016 10.3402C17.3831 14.0236 17.1339 18.3171 16.7985 22.2513C16.6303 24.2251 16.4388 26.1249 16.2658 27.8263C16.2557 27.9255 16.2457 28.0239 16.2358 28.1216C16.1225 29.2348 16.0191 30.2518 15.9361 31.1477C16.821 30.3777 17.8765 29.5154 19.0422 28.6082C21.861 26.4146 25.379 23.9158 28.7957 21.7662C32.1775 19.6384 35.584 17.7732 38.1448 16.9376C38.7962 16.725 39.4377 16.5637 40.0409 16.49C40.6285 16.4181 41.2876 16.4153 41.9148 16.6153C42.5936 16.8317 43.2158 17.2852 43.5786 18.0231ZM44.5606 41.7748C44.5612 41.7747 44.5597 41.7803 44.5546 41.7921C44.5576 41.7809 44.5601 41.775 44.5606 41.7748Z' fill='%23222426'/%3E%3C/svg%3E");
  position: absolute;
  right: -2.4rem;
  top: -3.4rem;
}

.widget-answer h3 {
  font-family: var(--font-primary);
  font-size: 1.3em;
  font-weight: 500;
  margin: 0;
  margin-bottom: 0.5em;
}

.widget-answer p {
  margin: 0;
}

/* .widget-answer__audio {
  align-items: center;
  display: flex;
}

.widget-answer__audio button {
  margin-left: -0.4rem;
  padding: 0.7rem;
}

.widget-answer__audio progress[value] {
  appearance: none;
  border: none;
  display: block;
  height: 1px;
  padding-right: 2rem;
  width: 100%;
}

.widget-answer__audio progress[value]::-webkit-progress-bar {
  background-color: #22242629;
}

.widget-answer__audio progress[value]::-webkit-progress-value {
  background-color: #222426 !important;
  cursor: pointer;
  height: 3px !important;
  position: relative;
  top: -1px;
  transition: all 0.3s ease-in-out;
} */

/* Audio player */

.voice-player {
  --voice-accent-color: var(--dark-primary);
  --voice-text-color: var(--dark-secondary);
  --voice-bg-color: var(--light-primary);
  --voice-track-color: var(--dark-tertiary);
  --voice-radius: 0;
  align-items: center;
  border-radius: var(--voice-radius) !important;
  display: flex;
  padding: 0.6rem 0 1rem;
  position: relative;
  width: 100%;
}

.voice-player__button {
  color: var(--voice-accent-color) !important;
  flex-grow: 0;
  flex-shrink: 0;
  opacity: 1;
  padding: 0.45rem;
  transition: var(--transition);
}

.voice-player__button:hover {
  opacity: 0.8;
  transform: scale(0.95);
}

.voice-player__button.restart {
  align-items: center;
  display: none;
  justify-content: center;
  padding: 0.3rem;
}

.voice-player__track {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  padding-left: 0.5rem;
  padding-right: 1rem;
  position: relative;
}

.voice-player__text {
  color: var(--voice-text-color) !important;
  font-size: 12px;
  line-height: 1;
  text-align: left;
}

.voice-player__text.credits {
  color: rgba(0, 0, 0, 0.3) !important;
  display: inline-block;
  opacity: 0;
  padding-top: 12px;
  text-decoration: none;
}

.voice-player:hover .voice-player__text.credits {
  opacity: 1;
}

.voice-player__track label {
  display: flex;
  justify-content: space-between;
  margin-bottom: 12px;
}

.voice-player__track progress[value]   {
  -webkit-appearance: none;
  appearance: none;
  border: none;
  display: block;
  height: 1px;
  width: 100%;
}

.voice-player__track progress[value]::-webkit-progress-bar {
  background-color: var(--voice-track-color);
}

.voice-player__track progress[value]::-webkit-progress-value {
  background-color: var(--voice-accent-color) !important;
  cursor: pointer;
  height: 3px !important;
  position: relative;
  top: -1px;
  transition: var(--transition);
}

.voice-player__track progress[value]::-webkit-progress-value:hover {
  background-color: var(--voice-track-color) !important;
} 

.widget-subscribe {
  max-width: 46rem;
  padding: 2rem;
}

.widget-subscribe button {
  background-color: var(--widget-secondary-btn-color);
  color: var(--widget-secondary-btn-text-color);
}

@media only screen and (min-width: 420px) {
  /* .widget-highlights {
    align-items: center;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
  } */

  .widget-highlights__item {
    flex-basis: 47%;
  }

  .widget-highlights__item:nth-of-type(odd) {
    margin-right: 1rem;
  }

  .widget-highlights__item:nth-of-type(3) {
    margin-bottom: 0;
  }
}

@media only screen and (min-width: 640px) {
  .widget-form {
    flex-direction: row;
  }

  .widget-form__input {
    margin-right: 0.67rem;
    padding: 0 1em 0;
  }
}

@media only screen and (min-width: 860px) {
  .widget {
    padding: 1.78rem;
  }

  .widget-answer,
  .widget-subscribe {
    padding: 3rem;
  }
}

@media only screen and (min-width: 860px) {
  .widget-highlights {
    justify-content: space-between;
  }

  .widget-highlights__item {
    flex-basis: 24%;
    margin: 0;
  }

  .widget-highlights__item:nth-of-type(odd) {
    margin-right: 0;
  }
}

@media only screen and (min-width: 1024px) {
  .widget-highlights__item {
    padding-right: 2em;
  }
}

/* ----------------------------------- */

/* ----------- Notes ----------- */

.notes-wrapper {
  position: relative;
}

.note {
  color: var(--dark-primary);
  display: flex;
  font-family: var(--font-tertiary);
  font-size: 1.33rem;
  font-weight: var(--font-tertiary-regular);
}

.note > * {
  display: block;
}

.note--widget {
  align-items: flex-end;
  display: flex;
  max-width: 15rem;
  right: 0rem;
  top: -5rem;
}

.note--widget svg {
  margin-right: 1rem;
}

.notes-wrapper--theme-switcher,
.overview__theme-switcher {
  max-width: 14rem;
}

.notes-wrapper--answer{
  margin-bottom: 8rem;
  max-width: 35rem;
}

.note svg {
  flex-shrink: 0;
}

.note--embedded {
  align-items: center;
  display: flex;
  flex-direction: column;
  max-width: 28rem;
  text-align: center;
}

.note--embedded svg {
  margin-bottom: 1rem;
  margin-top: 1rem;
}

.note--loose {
  position: absolute;
  z-index: 1;
}

.note--answer-top {
  left: -15rem;
  max-width: 16rem;
  top: 5rem;
}

.note--answer-top span {
  margin-right: 1rem;
  padding-top: 1rem;
}

.note--answer-bottom {
  align-items: flex-end;
  bottom: -3rem;
  right: -16rem;
}

.note--answer-bottom span {
  margin-left: 1rem;
}

@media only screen and (min-width: 860px) {
  .note--answer-bottom {
    bottom: -2.5rem;
    right: -4rem;
  }
}

/* ----------------------------------- */

/* ----------- Pricing ----------- */
  
.pricing-plan {
  background-color: var(--light-quaternary);
  margin-bottom: 1rem;
  padding-left: clamp(2rem, 6vw, 6rem);
  padding-right: clamp(2rem, 6vw, 6rem);
  padding-bottom: clamp(3rem, 7vw, 7rem);
  padding-top: clamp(3rem, 7vw, 7rem);
}

.pricing-plan.featured {
  overflow: hidden;
  position: relative;
}

.pricing-plan__badge {
  background-color: var(--accent-primary);
  color: var(--light-quaternary);
  display: inline-block;
  font-family: var(--font-secondary);
  font-size: 0.75rem;
  font-weight: var(--font-secondary-bold);
  left: -2rem;
  padding: 0.5em 3.5em;
  position: absolute;
  transform: rotate(-30deg);
  top: 0.8rem;
}

.pricing-plan__header {
  margin-bottom: 3rem;
}

.pricing-plan__title {
  line-height: 1;
  margin-bottom: 0.875rem;
}

.pricing-plan__price {
  align-items: center;
  display: flex;
  margin-bottom: 1rem;
}

.pricing-plan__price-numbers {
  align-items: center;
  display: flex;
  margin-right: 0.6rem;
  margin-left: -1rem;
}

.pricing-plan__price-numbers * {
  margin-left: 1rem;
}

.pricing-plan__label {
  font-size: 0.875rem;
  color: var(--dark-secondary);
}

.pricing-plan__features-item {
  color: var(--dark-secondary);
  font-size: 0.875rem;
  line-height: 1;
  margin-bottom: 1rem;
}

.pricing-plan__features-item:last-of-type {
  margin-bottom: 0;
}

@media only screen and (min-width: 860px) { 
  .pricing-plans {
    display: flex;
    justify-content: center;
    margin-bottom: 0;
  }

  .pricing-plan {
    flex-basis: 30rem;
    margin-bottom: 0;
    margin-left: 1rem;
    margin-right: 1rem;
  }
}

/* ----------------------------------- */

/* ----------- Helpers ----------- */

/* Typography */

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

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

.text-align-r {
  text-align: right;
}

.text-highlight-accent {
  color: var(--accent-primary);
}

.text-highlight-dark {
  color: var(--dark-primary);
}

.text-accent {
  font-family: var(--font-secondary);
}

.text-regular {
  font-weight: 400;
}

.text-medium {
  font-weight: 500;
}

.text-bold {
  font-weight: 700;
}

.text-black {
  font-weight: 900;
}

/* Backgrounds */

.bg-light-primary {
  background-color: var(--light-primary);
}

.bg-light-secondary {
  background-color: var(--light-secondary);
}

.bg-light-tertiary {
  background-color: #fff;
}

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

.bg-accent {
  background-color: var(--accent-primary);
}

.bg-gradient-primary {
  background: radial-gradient(237.08% 175.00% at 123.66% 123.66%, rgba(255, 204, 126, 0.00) 35.80%, rgba(255, 204, 126, 0.00) 57.12%, rgba(255, 228, 157, 0.40) 64.76%, rgba(255, 53, 89, 0.40) 100%), #FF5925;
}

.bg-gradient-secondary {
  background: linear-gradient(158deg, #E6E9DE 0%, rgba(188, 229, 215, 0.2) 100%), #F4F5F2;
}

/* Border */

.border {
  border: 2px solid var(--accent-primary);
}

.border-top {
  border-top: 2px solid var(--accent-primary);
}

.border-right {
  border-right: 2px solid var(--accent-primary);
}

.border-bottom {
  border-bottom: 2px solid var(--accent-primary);
}

.border-left {
  border: 2px solid var(--accent-primary);
}

/* Divider */

.divider-accent {
  position: relative;
}

.divider-accent::after {
  background-color: var(--accent-primary);
  bottom: 0;
  content: "";
  display: block;
  height: 2px;
  left: 50%;
  position: absolute;
  transform: translateX(-50%);
  width: 15rem;
}

/* Layout */

.centered {
  margin-left:  auto;
  margin-right: auto;
}

.flex {
  display: flex;
}

.flex-justify-center {
  justify-content: center;
}

.flex-align-start {
  align-items: flex-start;
}

.overflow {
  overflow: hidden;
}

/* Spacing */

.px-0 {
  padding-left: 0;
  padding-right:    0;
}

.py-0 {
  padding-bottom: 0;
  padding-top:    0;
}

.py-xs {
  padding-bottom: 0.9rem;
  padding-top:    0.9rem;
}

.py-sm {
  padding-bottom: 1.5rem;
  padding-top:    1.5rem;
}

.py-md {
  padding-bottom: 2.5rem;
  padding-top:    2.5rem;
}

.py-lg {
  padding-bottom: 4rem;
  padding-top:    4rem;
}

.py-xl {
  padding-bottom: 6rem;
  padding-top:    6rem;
}

.py-2xl {
  padding-bottom: 8rem;
  padding-top:    8rem;
}

.pb-xs {
  padding-bottom: 0.8rem;
}

.pb-sm {
  padding-bottom: 1.2rem;
}

.pb-md {
  padding-bottom: 2rem;
}

.pb-lg {
  padding-bottom: 2.6rem;
}

.pb-xl {
  padding-bottom: 4rem;
}

.pt-xs {
  padding-top: 0.8rem;
}

.pt-sm {
  padding-top: 1.2rem;
}

.pt-md {
  padding-top: 2rem;
}

.pt-lg {
  padding-top: 2.6rem;
}

.pt-xl {
  padding-top: 4rem;
}

.mb-xs {
  margin-bottom: 0.8rem;
}

.mb-sm {
  margin-bottom: 1.2rem;
}

.mb-md {
  margin-bottom: 2rem;
}

.mb-lg {
  margin-bottom: 2.6rem;
}

.mb-xl {
  margin-bottom: 4rem;
}

/* Width */

.mw-24 {
  max-width: 24rem;
}

.mw-28 {
  max-width: 28rem;
}

.mw-32 {
  max-width: 32rem;
}

.mw-38 {
  max-width: 38rem;
}

.mw-46 {
  max-width: 46rem;
}

.mw-58 {
  max-width: 58rem;
}

/* Mobile */

@media only screen and (max-width: 767px) {
  .m-hide {
    display: none;
  }
}

/* ----------------------------------- */

/* ----------- JS-related styles ----------- */

.js-slidein-start {
  opacity: 0;
  transform: translateY(30px);
  transition-duration: 0.6s;
  transition-property: opacity,transform;
  transition-timing-function: ease-in-out;
}

.js-slidein-end {
  opacity: 1;
  transform: translateY(0);
}

.js-disabled,
.js-disabled:visited {
  color: #CBD6E2;
  cursor: not-allowed;
  pointer-events:none;
}

/* .c-btn.js-disabled {
  background: #CBD6E2;
  color: #fff;
  cursor: not-allowed;
  pointer-events:none;
}

.c-btn--simple.js-disabled {
  background: transparent;
  color: #94A7BC;
  cursor: not-allowed;
  pointer-events:none;
} */

.js-hide {
  display: none;
}

/* ----------------------------------- */