html {
  scroll-behavior: smooth;
}

body {
  font-family: 'CerebriSans', -apple-system, BlinkMacSystemFont, 'Roboto', sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #fff;
  margin: 0 auto;
  background: #23232C;
  font-size: 18px;
  text-align: center;
}

.limited-width {
  max-width: 1200px;
  padding-left: 24px;
  padding-right: 24px;
  margin: 0 auto;
}

.hero {
  width: 100%;
  min-height: 100vh;
  position: relative;
}

.hero .limited-width {
  padding-top: 4.5em;
}

.hero-bg {
  width: 100%;
  height: 100%;
  background-image: linear-gradient(180deg, #23232C 0%, hsl(240, 10%, 38.5%) 100%);
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  padding-bottom: 200px;
}

.hero-bg.without-padding-bottom {
  padding-bottom: 0;
}

.hero-bg:before {
  background-color: initial;
  background-image: linear-gradient(180deg, hsla(240, 11%, 15%, 0) 0, hsla(240, 11%, 15%, .028) 11.87%, hsla(240, 11%, 15%, .104) 22.5%, hsla(240, 11%, 15%, .216) 32.18%, hsla(240, 11%, 15%, .352) 41.25%, hsla(240, 11%, 15%, .5) 50%, hsla(240, 11%, 15%, .648) 58.75%, hsla(240, 11%, 15%, .784) 67.82%, hsla(240, 11%, 15%, .896) 77.5%, hsla(240, 11%, 15%, .972) 88.13%, hsl(240, 11%, 15%) 100%);
  left: 0;
  bottom: 0px;
  content: "";
  height: 200px;
  position: absolute;
  width: 100%;
}

.hero-bg:after {
  /* fix transition from hsl to body rgb */
  background-image: linear-gradient(180deg, hsl(240, 11%, 15%) 0%, #23232C 100%);
  left: 0;
  bottom: -60px;
  content: "";
  height: 60px;
  position: absolute;
  width: 100%;
}

h1,
h2,
h3 {
  letter-spacing: -.01em;
  text-wrap: balance;
  max-width: 840px;
  margin: 0.95em auto 0.2em;
  line-height: 1.3;
}

h3.normal-margin {
  margin: 1em auto;
}

h1 {
  font-size: 40px;
}

h2 {
  font-size: 39px;
}

h3 {
  font-size: 27px;
}

ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

a {
  text-decoration: none;
  color: #fff;
}

header {
  position: fixed;
  width: 100%;
  left: 0;
  right: 0;
  top: 0;
  z-index: 3;
  transition: 250ms background ease-in-out, 250ms border-bottom ease-in-out;
  border-bottom: 1px solid transparent;
  box-sizing: border-box;
  will-change: background, border-bottom;
}

header.active {
  background: rgba(27, 27, 31, 0.51);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.09);
}

header nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 1200px;
  margin: 0 auto;
  padding: .75em 24px;
  box-sizing: border-box;
}

header nav ul li.demo-button-li,
header nav ul li.my-license-li {
  display: none;
}

header p {
  margin: 0;
}

header nav ul {
  display: flex;
  align-items: center;
  gap: 1.75em;
  font-size: .93em;
}

header nav ul li {
  opacity: .8;
  transition: all 150ms ease-in-out;
}

header nav ul li:hover {
  opacity: 1;
}

header nav .logo {
  display: flex;
  align-items: center;
  gap: .5em;
  font-size: 20px;
  font-weight: 600;
}

header nav .logo-img {
  width: 30px;
  height: 30px;
}

.subheadline {
  font-size: 22px;
  line-height: 1.55;
  text-wrap: balance;
  margin: 1.1em auto 1.5em; /* margin-bottom: 1.5em forsubheadline not necessarily inside intro */
  max-width: 840px;
  opacity: .9;
}

.hero h1 {
  margin-bottom: 0;
}

.hero-buttons {
  display: flex;
  gap: 1em;
  margin: 0 auto;
  justify-content: center;
}

section .subheadline {
  opacity: .85;
}

section .intro {
  margin-bottom: 2.4em;
}

.subheadline.full-opacity {
  opacity: 1;
}

.pro-max-text {
  color: transparent;
  background-clip: text;
  font-weight: 600;
  background-color: #FA8BFF;
  background-image: linear-gradient(45deg, #FA8BFF 0%, #2BD2FF 52%, #2BFF88 90%);
}

.scrollable-features-list,
.three-features,
.features,
.pricing .tiers {
  display: flex;
  gap: 1.18em;
}

.three-features,
.features,
.pricing .tiers {
  flex-direction: column;
}

.three-features,
.features {
  padding: 0 24px;
}

.limited-width .three-features,
.limited-width .features,
.limited-width .pricing .tiers {
  padding: 0;
}

.features.two-columns,
.two-columns {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
}

.scrollable-features-list {
  flex-direction: row;
  padding: 0 24px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE/Edge */
}

.scrollable-features-list::-webkit-scrollbar {
  display: none; /* Chrome, Safari, Opera */
}

.tile {
  background: rgba(255, 255, 255, 0.05);
  background-image: linear-gradient(180deg, #2C3E50, #4CA0AE);
}

.three-features,
.features {
  display: flex;
  max-width: 1200px;
  margin: auto;
}

.features li {
  flex: 1;
  text-align: left;
}

.features .feature-card video {
  width: 100%;
  height: 300px;
  object-fit: cover;
  display: block;
}

.three-features li {
  flex: 1;
  border-radius: 20px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.three-features li,
.features li.feature-card.with-gradient,
.card.with-gradient {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.05) 0%, transparent 100%);
  border: 0px;
  border-top: 1.5px solid rgba(255, 255, 255, 0.1);
}

.features li.feature-card,
.pricing .tier {
  flex: 1;
  border-radius: 28px;
  overflow: hidden;
}

.card,
.features li.feature-card,
.pricing .tier {
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .05);
}

.card {
  border-radius: 20px;
  padding: 1.3em 1.9em;
}

.testimonial.card {
  padding: 2em;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.three-features li .caption,
.features li .caption {
  text-align: left;
  font-size: 22px;
  font-weight: 600;
}

.three-features li .caption {
  padding: 1.5em;
  flex: 1;
}

.feature-card img {
  width: calc(100% - 2em);
  max-width: 330px;
  height: auto;
  margin: auto;
  display: block;
}

.features li.feature-card .caption {
  padding: 1.5em 1.5em 2.5em;
}

.features li.feature-card .caption:has(.title) {
  padding: 1.5em;
}

.features li.feature-card .caption .title {
  margin: 0;
  font-size: 1.25em;
}

.features li.feature-card .caption .description {
  font-weight: 500;
  font-size: 20px;
  margin-bottom: 0;
  opacity: .8;
}

.three-features li .tile,
.features li .tile {
  flex: 1;
}

.three-features li .tile {
  min-height: 300px;
}

.features li .tile {
  min-height: 420px;
}

.features li.feature-card:has(.title) .tile {
  min-height: 300px;
}

.scrollable-features-list li {
  max-width: 696px;
  text-align: left;
  flex: 0 0 260px;
}

/* To-do: remove after all videos/images are added */
.scrollable-features-list li .tile:empty {
  min-width: 260px;
  height: 314px;
}

.scrollable-features-list li .tile {
  height: 450px;
  border-radius: 28px;
}

.scrollable-features-list li > img,
.scrollable-features-list li > picture img,
.scrollable-features-list li > video,
.scrollable-features-list li > .card-illustration {
  max-width: 696px;
  height: 314px;
  border-radius: 28px;
  object-fit: cover;
  border: 1px solid rgba(255, 255, 255, .1);
  box-sizing: content-box;
  overflow: hidden;
}

.scrollable-features-list li > img,
.scrollable-features-list li > picture img,
.scrollable-features-list li > video {
  display: block;
  width: auto;
  max-width: 260px;
  min-width: 200px;
}

.scrollable-features-list li .caption p {
  max-width: 600px;
  margin: 0;
  padding: 1.3em calc(28px / 2); /* 28px is border-radius */
  font-size: 19px;
  line-height: 1.5;
  -webkit-text-size-adjust: 100%; /* Prevent iOS from zooming in on text */
}

.features li .caption { 
  padding: 1em 15px;
  line-height: 1.5;
}

.testimonial-text {
  font-size: 19px;
  padding: 0;
  margin: 0;
  line-height: 1.6;
  text-wrap: balance;
  text-align: left;
}

.testimonial-author {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  margin-top: 2em;
  text-align: left;
}

.testimonial-author p {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin: 0;
}

.testimonial-author a {
  opacity: .6;
}

.testimonial-avatar {
  width: 45px;
  height: 45px;
  object-fit: contain;
  border-radius: 100%;
  margin-right: 1em;
}

.less-opacity,
.span-less-opacity span {
  opacity: .6;
}

.little-less-opacity,
.span-little-less-opacity span {
  opacity: .8;
}

.browser-feature .caption img {
  width: 1em;
  height: 1em;
  margin-left: .15em;
  vertical-align: sub;
}

.three-features li > img {
  width: 100%;
  height: auto;
}

.browser-feature .caption img:first-of-type {
  margin-left: .3em;
}

.testimonials {
  gap: 24px;
}

.testimonials li {
  flex: 1;
}

.hide-on-mobile {
  display: none;
}

.mobile-only {
  display: block;
}

.tablet-and-desktop-only {
  display: none !important;
}

.changes-images-wrapper {
  margin: 3em auto;
  position: relative;
}

.changes-main-image-wrapper {
  width: 100%;
  position: relative;
}

.changes-main-image {
  width: 100%;
}

.changes-main-image {
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, .13);
}

.changes-demo {
  border-radius: 18px;

  position: relative;
  margin-left: auto;
  margin-top: -15%;
  width: 100%;

  z-index: 2;
}

.changes-demo-image {
  width: 100%;
  height: auto;
  border-bottom-left-radius: 18px;
  border-bottom-right-radius: 18px;
}

.changes-demo-image.after {
  display: none;
}

.changes-image-gradient {
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 18px;
  mix-blend-mode: overlay;
  transform: translate3d(0, 0, 0);
  z-index: 2;
  left: 1px;
  top: 1px;

  background-image: linear-gradient(180deg, #FFFFFF 0%, rgba(255, 255, 255, 0) 30%);
  background-image: radial-gradient(74% 79% at 53% -8%, #FFFFFF 0px, rgba(255, 255, 255, 0) 96.3%);
}

.changes-main-image {
  -webkit-mask-image: linear-gradient(180deg, hsla(0, 0%, 0%, 1) 75%, hsla(0, 0%, 0%, 0.972) 77.97%, hsla(0, 0%, 0%, 0.896) 80.63%, hsla(0, 0%, 0%, 0.784) 83.05%, hsla(0, 0%, 0%, 0.648) 85.31%, hsla(0, 0%, 0%, 0.5) 87.5%, hsla(0, 0%, 0%, 0.352) 89.69%, hsla(0, 0%, 0%, 0.216) 91.96%, hsla(0, 0%, 0%, 0.104) 94.37%, hsla(0, 0%, 0%, 0.028) 97.03%, hsla(0, 0%, 0%, 0) 100%);
}

.browser {
  background: #3B3534;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* overflow: hidden; hides box-shadow on :after */
  font-family: -apple-system, BlinkMacSystemFont, 'Roboto', sans-serif;
  box-shadow: -10px -10px 80px 5px rgba(0, 0, 0, .5);
}

.browser:after {
  content: '';
  display: block;
  height: 100%;
  position: absolute;
  top: 0;
  width: 100%;

  border-radius: 18px;
  box-shadow:
    rgba(255, 255, 255, 0.2) 0px 0px 0px 1px inset,
    rgba(0, 0, 0, 0.9) 0px 0px 0px 1px;
}

.browser-top {
  width: calc(100% - 2px); /* border */
  height: 51px;
  display: flex;
  align-items: center;
  text-align: center;
  justify-content: center;
  border-bottom: 1px solid black;
  position: relative;
  z-index: 3;
}

.browser-address {
  border: 1px solid #534E4D;
  font-size: 14px;
  padding: 6px 16px;
  border-radius: 6px;
  color: rgba(255, 255, 255, .95);

  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  max-width: 30%;

  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
}

.browser-extension {
  width: 21px;
  position: absolute;
  right: 20px;
}

.browser-buttons {
  position: absolute;
  left: 20px;
  display: flex;
  align-items: center;
}

.browser-buttons > div {
  display: inline-block;
  margin-right: 8px;
  background: #333;
  width: 10px;
  height: 10px;
  border-radius: 5px;
  border: 0.5px solid rgba(0,0,0,.12);
  box-sizing: border-box;
  margin-top: 0;
}

.browser-buttons .browser-close {
  background: #ff5e57;
}

.browser-buttons .browser-minimize {
  background: #ffbb2e;
}

.browser-buttons .browser-maximize {
  background: #38c149;
}

.browser-lock {
  font-size: 10px;
  margin-right: 7px;
  transform: translateY(-1px);
}

.changes-demo.browser .cursor {
  z-index: 3;
  position: absolute;
  width: 30px;
  top: 52px;
  filter: drop-shadow(0px 0px 5px rgba(0, 0, 0, 0.8));
  margin-left: -20px;
  margin-top: 5px;
  transition: all 0.5s ease-in-out;
}

.changes-demo.browser .cursor,
.changes-demo.browser .cursor.before {
  margin-left: -5px;
  margin-top: 1px;
}

.changes-demo.browser .cursor.after {
  margin-left: 25px;
  margin-top: 0px;
}

@keyframes placeHolderShimmer {
  0%{
    background-position: -468px 0
  }
  100%{
    background-position: 468px 0
  }
}

.animated-background-loading {
  animation-duration: 1.25s;
  animation-fill-mode: forwards;
  animation-iteration-count: infinite;
  animation-name: placeHolderShimmer;
  animation-timing-function: linear;
  background: darkgray;
  background: linear-gradient(to right, rgb(255 255 255 / 5%) 10%, rgb(255 255 255 / 19%) 18%, rgb(255 255 255 / 5%) 33%);
  background-size: 936px 104px;
}

.animated-background-loading:after {
  position: absolute;
  content: 'Loading...';
}

.browser-address.animated-background-loading:after {
  content: none;
}

.sub-explainer {
  display: flex;
  border-top: 1px solid rgba(255, 255, 255, .15);
  margin: 0 auto 5em;
  max-width: 1000px;
  gap: 35px;

  flex-direction: column;
  /* flex-direction: column; margin-top: -200px; margin-left: 100px; width: 45%; border-top: 0px;*/
}

.sub-explainer.with-margin-top {
  margin-top: 80px;
}

.sub-explainer.with-less-margin-top {
  margin-top: 60px;
}

.sub-explainer > p {
  flex: 1;
  margin: 0;
  border-top: 0px;
  padding-top: 20px;
  font-size: 20px;
  text-align: left;
  font-weight: 500;
  line-height: 1.5;
  /*padding-top: 50px;*/
}

.sub-explainer strong {
  font-weight: 600;
}

.sub-explainer i,
.sub-explainer svg {
  transform: scale(.9);
  margin-right: 3px;
}

.sub-explainer.zero-margin-bottom {
  margin-bottom: 0;
}

section.changes {
  background-image: linear-gradient(transparent 79%, #23232C 100%), linear-gradient(#23232C 0, transparent 21%), linear-gradient(75deg, #074246 0, rgba(0, 0, 0, .19) 46.5%, #256568 100%);
}

section.padding-bottom {
  padding-bottom: 1em;
}

.demo-img-wrapper {
  perspective: 1200px;
  max-width: 1200px;
  margin: 5em 24px 0;
}

.demo-img {
  width: 100%;
  height: auto;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

.play-button {
  width: 80px;
  height: 80px;
  font-size: 1.8rem;
  background: rgba(0, 0, 0, .7);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  color: #fff;
  box-shadow: 0 6px 100px 4px rgba(0,0,0,1);
  opacity: 1;
  transition: all .25s ease;
  margin: auto;
  position: absolute;
  top: 0; left: 0; bottom: 0; right: 0;
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);

  transition: 500ms background-position;

  background-color: rgba(25, 25, 29, 0.95);
  background-image: repeating-linear-gradient(119deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 7.1%, rgba(255, 255, 255, 0.1) 25.3%, transparent 45.3%);
  box-shadow: 0 6px 100px 4px rgba(0,0,0,0.5), rgb(0 0 0 / 10%) 0px 0px 0 1px inset, rgb(255 255 255 / 20%) 0.5px 0.5px 0 0 inset, rgb(255 255 255 / 10%) 0 0 0 1px inset, rgb(0 0 0 / 10%) 0px 2px 4px 0px, rgb(255 255 255 / 5%) 0px 0px 0px 1px inset, rgb(0 0 0 / 7%) 0px 1px 2px, rgb(0 0 0 / 7%) 0px 2px 4px, rgb(0 0 0 / 7%) 0px 4px 8px, rgb(0 0 0 / 7%) 0px 8px 16px, rgb(0 0 0 / 7%) 0px 16px 32px, rgb(0 0 0 / 7%) 0px 32px 64px, rgb(255 255 255 / 5%) 0px 0px 0px 1px inset, rgb(255 255 255 / 6%) 1px 1px 0 0 inset, rgb(255 255 255 / 4%) 0 0 0 1px inset;

  background-size: 250%;
}

.demo-img-wrapper:hover .play-button {
  background-position: 100% center;
}

.demo-img,
.play-button {
  transform-style: preserve-3d;
  will-change: transform, opacity;
  animation-fill-mode: forwards;
  animation-duration: 1s;
  animation-timing-function: linear;
  animation-play-state: paused;
}

.demo-img,
.play-button {
  -webkit-animation-name: screenPerspective;
  animation-name: screenPerspective;
  -webkit-animation-delay: calc(var(--scroll) * -21s);
  animation-delay: calc(var(--scroll) * -21s);
}

@keyframes screenPerspective {
  from {
    transform: translate3d(0, -12.66%, 0) scale3d(0.85, 0.85, 1) rotateX(20deg);
  }
  to {
    transform: translate3d(0, 0, 0) scale3d(1, 1, 1) rotateX(0deg);
  }
}

@-webkit-keyframes screenPerspective {
  from {
    -webkit-transform: translate3d(0, -12.66%, 0) scale3d(0.85, 0.85, 1) rotateX(20deg);
  }
  to {
    -webkit-transform: translate3d(0, 0, 0) scale3d(1, 1, 1) rotateX(0deg);
  }
}

.lightspeed-text {
  text-shadow: -2px 0 0 rgba(255, 255, 255, 0.4), -4px 0 1px rgba(255, 255, 255, 0.3), -8px 0 2px rgba(255, 255, 255, 0.2), -12px 0 4px rgba(255, 255, 255, 0.12), -18px 0 6px rgba(255, 255, 255, 0.08), -25px 0 8px rgba(255, 255, 255, 0.04);
  text-shadow: rgba(184, 252, 255, 0.4) -2px 0 0, rgba(184, 252, 255, 0.3) -4px 0 1px, rgba(184, 252, 255, 0.2) -8px 0 2px, rgba(184, 252, 255, 0.12) -12px 0 4px, -18px 0 6px rgba(184, 252, 255, 0.08);
  text-shadow: rgba(184, 252, 255, 0.4) -2px 0 0, rgba(184, 252, 255, 0.3) -4px 0 1px, rgba(184, 252, 255, 0.2) -8px 0 2px, rgba(184, 252, 255, 0.15) -12px 0 4px, rgba(184, 252, 255, 0.12) -18px 0 6px, rgba(184, 252, 255, 0.1) -24px 0 8px, rgba(184, 252, 255, 0.09) -32px 0 10px, rgba(184, 252, 255, 0.08) -40px 0 14px, rgba(184, 252, 255, 0.07) -50px 0 18px, rgba(184, 252, 255, 0.06) -60px 0 24px, rgba(184, 252, 255, 0.055) -70px 0 30px, rgba(184, 252, 255, 0.05) -80px 0 36px, rgba(184, 252, 255, 0.045) -90px 0 42px, rgba(184, 252, 255, 0.04) -100px 0 50px, rgba(184, 252, 255, 0.1) -110px 0 60px;
  text-shadow: rgba(184, 252, 255, 0.4) -2px 0 0, rgba(184, 252, 255, 0.3) -4px 0 1px, rgba(184, 252, 255, 0.2) -8px 0 2px, rgba(184, 252, 255, 0.15) -12px 0 4px, rgba(184, 252, 255, 0.12) -18px 0 6px, rgba(184, 252, 255, 0.1) -24px 0 8px, rgba(184, 252, 255, 0.09) -32px 0 10px, rgba(184, 252, 255, 0.08) -40px 0 14px, rgba(184, 252, 255, 0.07) -50px 0 18px, rgba(184, 252, 255, 0.06) -60px 0 24px, rgba(184, 252, 255, 0.055) -70px 0 30px, rgba(184, 252, 255, 0.05) -80px 0 36px;
}

.paddlenav ul {
  display: flex;
  gap: 1em;
  justify-content: flex-end;
  max-width: 1200px;
  margin: 1em auto 0;
  padding: 0 24px;
}

.paddlenav-arrow {
  width: 36px;
  height: 36px;
  border-radius: 60px;
  border: 0;
  background: rgba(80, 80, 96, 0.72);
  color: rgba(255, 255, 255, 0.8);
  padding: 0;
  transition: all 150ms ease-in-out;
}

.paddlenav-arrow:hover {
  background: rgba(87, 87, 103, 0.7256);
  color: #fff;
}

.paddlenav-arrow:active {
  background: rgba(71, 71, 87, 0.7424);
  color: #fff;
}

.paddlenav-arrow svg {
  width: 36px;
  height: 36px;
  pointer-events: none;
}

.paddlenav-arrow[disabled] {
  opacity: .36;
  pointer-events: none;
}

.pricing {
  background-image: linear-gradient(#23232C 0, transparent 21%), radial-gradient(100% 71% at 50% -11%, rgba(0, 251, 255, .23) 20%, transparent 100%);
  background-image: linear-gradient(180deg, #23232C80 1.7%, rgba(0, 0, 0, 0) 9.7%), linear-gradient(#23232C 0, transparent 21%), radial-gradient(100% 71% at 50% -11%, rgba(0, 251, 255, .23) 20%, transparent 100%);
}

.pricing .tiers {
  gap: 2em;
  margin-bottom: 3em;
  padding: 0;
}

.pricing .tier {
  padding: 1.5em;
  text-align: left;

  background: rgba(0, 0, 0, 0.15);
  border: none;
  border-top: 1.5px solid rgba(255, 255, 255, 0.1);

  transition: all 500ms cubic-bezier(0.4, 0, 0.2, 1);

  display: flex;
  flex-direction: column;

  max-width: 400px;
  margin: 0 auto;
}

.pricing .tier .pricing-features {
  display: flex;
  flex-direction: column;
  flex: 1;
}

.pricing .tier .name {
  font-weight: 600;
  font-size: 28px;
  display: inline-block;
  align-self: flex-start;
}

.pricing .tier .price-container {
  margin: 1em 0 1.5em;
}

.pricing .tier .name {
  margin: 0;
}

.pricing .tier .frequency,
.pricing .tier .price-container {
  margin-top: 0;
}

.pricing .tier .frequency {
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}

.pricing .tier .price {
  margin: .6em 0 1em;
}

.pricing .tier .price span {
  font-weight: 600;
  font-size: 32px;
}

.pricing .pricing-features {
  text-align: left;
  gap: unset;
  line-height: 2;
  font-size: .95em;
}

.pricing .pricing-features,
.billing-text {
  opacity: .8;
}

.pricing .pricing-features li {
  margin: 0;
}

.pricing .pricing-features svg {
  margin-right: 5px;
}

.pricing .highlight {
  transform: scale(1.05);
  background: linear-gradient(0deg, #17171E, #23232A) padding-box, linear-gradient(45deg, #FA8BFF 0%, #2BD2FF 52%, #2BFF88 90%) border-box;
  border: 3px solid transparent;
  box-shadow: 0 15px 25px rgba(0, 0, 0, 0.15), 0 5px 10px rgba(0, 0, 0, 0.05);
  box-shadow: #2DDAEA1F 0 0px 60px;
}

.yearly-better {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  font-size: 12px;
  padding: 3px 9px;
  border-radius: 20px;
  display: none;
  margin-left: 8px;
  vertical-align: middle;
}

.mini-switch {
  appearance: none;
  background-color: #c9cbcd;
  border-radius: 72px;
  border: none;
  height: 20px;
  margin: 0;
  position: relative;
  width: 30px;
  cursor: default;
  vertical-align: sub;
  margin-right: 5px;
}

.mini-switch::before {
  bottom: -6px;
  content: "";
  left: -6px;
  position: absolute;
  right: -6px;
  top: -6px;
}

.mini-switch,
.mini-switch::after {
  transition: all 100ms ease-out;
}

.mini-switch::after {
  background-color: #fff;
  border-radius: 50%;
  content: "";
  height: 14px;
  left: 3px;
  position: absolute;
  top: 3px;
  width: 14px;
}

.mini-switch:hover {
  background-color: #babdc0;
  transition-duration: 0s;
}

.mini-switch:checked {
  background-color: #6e79d6;
}

.mini-switch:checked::after {
  background-color: #fff;
  left: 13px;
}

.mini-switch:focus:not(.focus-visible) {
  outline: 0;
}

.mini-switch:checked:hover {
  background-color: #535db3;
}


/* Price slot machine animation */
.price-amount {
  display: inline-flex;
  align-items: baseline;
  position: relative;
}

.price-amount .digit {
  display: inline-block;
  height: 1em;
  overflow: hidden;
  position: relative;
  vertical-align: baseline;
}

.price-amount .digit-roller {
  display: flex;
  flex-direction: column;
  transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.price-amount .digit-roller span {
  height: 1em;
  line-height: 1;
}

input.button,
button {
  border: 0;
  font-size: 18px;
  font-family: 'CerebriSans', -apple-system, BlinkMacSystemFont, 'Roboto', sans-serif;
}

.button {
  padding: 0.85em 1.5em;
  background-color: rgba(255, 255, 255, 0.1);
  color: #fff;
  border-radius: 100px;
  display: inline-block;
  box-sizing: border-box;
  border-top: 1.5px solid rgba(255, 255, 255, 0.1);
  text-shadow: rgb(0 0 0 / 5%) 1px 1px 4px;
  transition: all 150ms ease-out;
  cursor: pointer;
  font-weight: normal;

  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}

.button:active {
  transform: scale(0.97);
}

header nav .button,
.button.mini {
  padding: 0.4em 1.25em;
}

.button.mini {
  background-color: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.8);
  font-size: 15px;
}

header nav .button {
  opacity: 1;
}

.button:hover {
  background-color: rgba(255, 255, 255, 0.15);
}

.button.primary.white {
  background-color: #fff;
  color: #000;
}

.button.primary.white:hover,
.pricing .tier.highlight:hover .buy-button.blue {
  transform: scale(1.05);
}

.pricing .tier.highlight:hover .buy-button.blue:active {
  transform: scale(1);
}

.button.primary.blue {
  background-color: #0171E3;
  color: #fff;
}

.button svg {
  margin-right: 6px;
}

.pricing .buy-button {
  width: 100%;
  text-align: center;
  margin-top: 2.5em;
}

.demo-button {
  display: none;
}


footer {
  margin-top: 5em;
  border-top: 1px solid rgba(255, 255, 255, .1);
  background-color: rgba(0, 0, 0, .1);
  background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.33) 0%, transparent 100%);
  padding: 1.95em;
}

footer .limited-width {
  padding: 0;
}

footer .bottom {
  margin-top: 1.5em;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-direction: column;
  gap: 10px;
}

footer .bottom .logo-img {
  width: 25px;
  height: auto;
  margin-right: 0;
}

footer ul {
  margin: 1em 0;
}

p.small-p.small-font {
  font-size: 14px;
}

.big-lineheight {
  line-height: 1.7;
}

.pricing p.small-p.small-font {
  opacity: .5;
}

footer p.small {
  font-size: 14px;
  opacity: .8;
}

footer .socials svg,
footer .link-list li a,
footer .bottom .logo-img {
  opacity: .7;
  transition: all 150ms ease-in-out;
}

footer .socials a:hover svg,
footer .link-list li a:hover,
footer .bottom .logo-img:hover {
  opacity: 1;
}

footer .bottom .logo-img:hover {
  filter: drop-shadow(0px 0px 33px rgba(255, 255, 255, 0.66));
}

footer .socials svg {
  fill: #fff;
}

footer .socials > *:not(:last-child) {
  margin-right: .9em;
}

footer .link-list {
  display: flex;
  text-align: left;
  justify-content: space-between;
  flex-direction: column;
}

footer .links-category {
  flex: 0 0 200px;
}

footer .link-list li {
  line-height: 2.3;
  font-size: 16px;
}

.color-palette-demo-wrapper {
  margin: 20px 1.5em;
}

.color-palette-demo {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  flex-direction: row;
  gap: 8px;
  max-width: 280px;
  max-height: 300px;
  overscroll-behavior: contain;
  box-sizing: content-box;
  margin: 0 auto;

  background: rgba(25, 25, 29, .95);
  padding: 20px;
  border-radius: 32px;

  box-shadow: rgb(0 0 0 / 10%) 0px 0px 0 1px inset, rgb(255 255 255 / 20%) 0.5px 0.5px 0 0 inset, rgb(255 255 255 / 10%) 0 0 0 1px inset, rgb(0 0 0 / 10%) 0px 2px 4px 0px, rgb(255 255 255 / 5%) 0px 0px 0px 1px inset, rgb(0 0 0 / 7%) 0px 1px 2px, rgb(0 0 0 / 7%) 0px 2px 4px, rgb(0 0 0 / 7%) 0px 4px 8px, rgb(0 0 0 / 7%) 0px 8px 16px, rgb(0 0 0 / 7%) 0px 16px 32px, rgb(0 0 0 / 7%) 0px 32px 64px, rgb(255 255 255 / 5%) 0px 0px 0px 1px inset, rgb(255 255 255 / 6%) 1px 1px 0 0 inset, rgb(255 255 255 / 4%) 0 0 0 1px inset;
}

.color-palette-demo li {
  box-shadow: rgb(255 255 255 / 20%) 0px 0px 0px 1px inset, rgb(0 0 0 / 10%) 0px 0px 0px 1px;
}

.color-palette-demo li:hover {
  box-shadow: rgb(255 255 255 / 60%) 0px 0px 0px 2px;
}

.color-palette-demo li {
  width: 28px;
  height: 28px;
  /* margin: 4px; */
  display: inline-block;
  border-radius: 30px;
  box-sizing: border-box;
  cursor: pointer;
  flex: initial;
  transition: opacity 200ms;
}

.eyedropper-demo {
  background-blend-mode: soft-light, normal;
  background-image: radial-gradient(152.67% 67.91% at 50% 0, #000000 0, transparent 100%), radial-gradient(351.45% 153.58% at 50% 0, #040404 0, #225B77 30.45%, #D1DBDE 59.45%);
  display: flex;
  justify-content: center;
  gap: 20px;
  align-items: center;
  padding: 30px;

  /* demo diff: for styles to work */
  --highlight-color: rgba(42, 245, 152, 1);
  --main-background: rgba(25, 25, 29, .95);
}

.eyedropper-demo .art-wrapper {
  background: rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 8px;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  border: 1px solid rgba(255, 255, 255, .1);
  position: relative;
}

.eyedropper-demo .art-title {
  font-size: 11px;
  opacity: .5;
  margin-bottom: 5px;
}

.eyedropper-demo img {
  width: 130px;
  border-radius: 12px;
}

.eyedropper-demo .square {
  width: 80px;
  height: 80px;
  background-image: conic-gradient(from 315deg at 50% 50%, #15445D 36.8%, #D1DBDE 100%), conic-gradient(from 135deg at 50% 50%, #15445D 36.8%, #D1DBDE 100%);
  background-blend-mode: multiply, normal;
  border-radius: 8px;
}

.eyedropper-demo .square.dois {
  background-image: repeating-linear-gradient(rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, 0.77) 30%, rgba(255, 255, 255, 0) 60%), repeating-linear-gradient(rgba(255, 255, 255, 0.77) 0, rgba(255, 255, 255, 0) 30%, rgba(255, 255, 255, 0.77) 60%);
  background-position: 0 0, 100% 0;
  background-size: 50% 100%, 50% 100%;
  background-repeat: no-repeat, no-repeat;
  background-blend-mode: normal, normal;
}

.eyedropper-demo .art-wrapper:not(.main) {
  display: none;
}

.css-pro-color-eyedropper-popup-for-mobile {
  display: flex;
  align-items: center;
  min-width: 133px !important;
  position: absolute;
  padding: 6px !important;
  padding-right: 18px !important;
  flex-direction: row;
  margin-top: 15px !important;
  height: 47px;
  color: white;
  text-align: center;
  white-space: nowrap;
  font-size: 13px;
  line-height: 25px;
  direction: ltr;
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
  font-variant-numeric: tabular-nums;
  font-weight: 500;
  border-radius: 32px !important;
  background: rgba(25, 25, 29, .95);
  border: 1px solid rgba(255, 255, 255, .1);
  box-shadow: rgba(0,0,0,.1) 0 0 0 1px inset,rgba(255,255,255,.2) .5px .5px 0 0 inset,rgba(255,255,255,.1) 0 0 0 1px inset,rgba(0,0,0,.1) 0 2px 4px 0,rgba(255,255,255,.05) 0 0 0 1px inset!important;
}

.css-pro-color-eyedropper-for-mobile-colorshow {
  width: 33px;
  height: 33px;
  border-radius: 40px;
  display: inline-block;
}

.css-pro-color-eyedropper-for-mobile-colorname {
  display: inline-block;
  margin: 0 0 0 10px !important;
  line-height: initial !important;
  color: #fff;
  font-size: 15px;
  font-weight: 500;
}

.eyedropper-demo .css-pro-color-eyedropper-popup-for-mobile img.cursor {
  position: absolute;
  width: 30px;
  top: -27px;
  left: -28px;
}

/* Fake ruler lines for mobile */
.fn-dimensions-for-mobile {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 0;
  height: 0;
  z-index: 3;
  pointer-events: none;
}

.fn-dimensions-for-mobile img.cursor {
  position: absolute;
  width: 30px;
  top: -14px;
  left: -14px;
  z-index: 6;
}

.fn-dimensions-for-mobile .fn-axis {
  position: absolute;
  background: #fff;
  top: 0;
  left: 0;
  z-index: 5;
}

.fn-dimensions-for-mobile .fn-axis:before,
.fn-dimensions-for-mobile .fn-axis:after {
  content: "";
  position: absolute;
  background: inherit;
}

.fn-dimensions-for-mobile .x.fn-axis {
  height: 1px;
  width: 100px;
  transform: translateX(-50px);
}

.fn-dimensions-for-mobile .x.fn-axis:before,
.fn-dimensions-for-mobile .x.fn-axis:after {
  left: 0;
  height: 6px;
  top: -2px;
  width: 1px;
  transform: translateY(-.5px);
}

.fn-dimensions-for-mobile .x.fn-axis:after {
  left: 100%;
}

.fn-dimensions-for-mobile .y.fn-axis {
  width: 1px;
  height: 100px;
  transform: translateY(-50px);
}

.fn-dimensions-for-mobile .y.fn-axis:before,
.fn-dimensions-for-mobile .y.fn-axis:after {
  left: -2px;
  height: 1px;
  top: 0;
  width: 6px;
  transform: translateX(-.5px);
}

.fn-dimensions-for-mobile .y.fn-axis:after {
  top: 100%;
}

.fn-dimensions-for-mobile .fn-tooltip {
  position: absolute;
  left: 7px;
  bottom: 6px;
  padding: 1px 10px;
  color: white;
  font-family: -apple-system, BlinkMacSystemFont, 'Roboto', sans-serif;
  font-size: 13px;
  line-height: 25px;
  white-space: nowrap;
  background: rgba(57, 57, 57, 0.7);
  font-variant-numeric: tabular-nums;
  backdrop-filter: blur(10px) invert(0.15);
  -webkit-backdrop-filter: blur(10px) invert(0.15);
  border-radius: 32px;
  box-shadow: rgba(0, 0, 0, .1) 0px 0px 0 1px inset, rgba(255, 255, 255, .2) 0.5px 0.5px 0 0 inset, rgba(255, 255, 255, .1) 0 0 0 1px inset, rgba(0, 0, 0, 0.1) 0px 2px 4px 0px, rgba(255, 255, 255, 0.05) 0px 0px 0px 1px inset !important;
}

.feature-card.color-eyedropper,
.feature-card.ruler {
  display: flex;
  flex-direction: column;
}

.eyedropper-demo,
.ruler-demo {
  cursor: crosshair;
  user-select: none;
  -webkit-user-select: none;
}

.ruler-illustration {
  position: relative;
  overflow: hidden;
  height: 100%;
}

.ruler-illustration .components {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.ruler-illustration .components > * {
  position: absolute;
  background: linear-gradient(130deg, #fff, rgba(255, 255, 255, .15));
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .1) inset;
}

.ruler-illustration .components > svg {
  box-shadow: none;
  background: none;
}

.ruler-illustration .components .triangle {
  border-color: #fff;
  -webkit-mask-image: radial-gradient(black, transparent);
}

.ruler-illustration .components .rounded {
  border-radius: 12px;
}

.ruler-illustration .components .circle {
  border-radius: 50%;
}

.ruler-illustration .square,
.ruler-illustration .circle,
.ruler-illustration .rounded {
  width: 80px;
  height: 80px;
}

.ruler-illustration .square.big,
.ruler-illustration .circle.big {
  width: 100px;
  height: 100px;
}

.ruler-illustration .square.small,
.ruler-illustration .circle.small {
  width: 30px;
  height: 30px;
}

.ruler-illustration .square {
  border-radius: 6px;
}

.card-illustration {
  background-origin: border-box;
}

.card-illustration.convert-units .units-dropdown {
  box-shadow: rgb(0 0 0 / 10%) 0px 0px 0 1px inset, rgb(255 255 255 / 20%) 0.5px 0.5px 0 0 inset, rgb(255 255 255 / 10%) 0 0 0 1px inset, rgb(0 0 0 / 10%) 0px 2px 4px 0px, rgb(255 255 255 / 5%) 0px 0px 0px 1px inset, rgb(0 0 0 / 7%) 0px 1px 2px, rgb(0 0 0 / 7%) 0px 2px 4px, rgb(0 0 0 / 7%) 0px 4px 8px, rgb(0 0 0 / 7%) 0px 8px 16px, rgb(0 0 0 / 7%) 0px 16px 32px, rgb(0 0 0 / 7%) 0px 32px 64px, rgb(255 255 255 / 5%) 0px 0px 0px 1px inset, rgb(255 255 255 / 6%) 1px 1px 0 0 inset, rgb(255 255 255 / 4%) 0 0 0 1px inset;
}

.card-illustration img.cursor {
  width: 30px;
}

.card-illustration.convert-units {
  display: flex;
  align-items: center;
  height: auto;
  position: relative;
  background-image: linear-gradient(180deg, #1C2833 0%, #31666F 100%);
}

.card-illustration.convert-units .convert-units-graphics-wrapper {
  zoom: .75;
  margin: auto;
  position: relative;
}

.card-illustration.convert-units .units-background {
  width: 307px;
  mix-blend-mode: lighten;
  transform: translate3d(0, 0, 0);
}

.card-illustration.convert-units ul.units-dropdown {
  background: #2E2727;
  border-radius: 8px;
  padding: 4px;
  font-size: 13px;
  width: 85px;
  position: absolute;
  opacity: 0;
}

.card-illustration.convert-units .units-dropdown li {
  padding: 4px;
  padding-left: 20px;
  border-radius: 5px;
  font-family: -apple-system, BlinkMacSystemFont, 'Roboto', sans-serif;
  font-weight: 500;
  color: rgba(255, 255, 255, .9);
}

.card-illustration.convert-units .units-dropdown li.disabled {
  cursor: not-allowed;
  opacity: .5;
}

.card-illustration.convert-units .units-dropdown li.selected {
  position: relative;
}

.card-illustration.convert-units .units-dropdown li.selected:before,
.card-illustration.convert-units .units-dropdown li.selected:after {
  content: '';
  position: absolute;
  background: #fff;
  border-radius: 2px;
}

.card-illustration.convert-units .units-dropdown li.selected:before {
  width: 2px;
  height: 7px;
  transform: rotate(-35deg);
  margin-left: -11px;
  margin-top: 6px;
}

.card-illustration.convert-units .units-dropdown li.selected:after {
  width: 2px;
  height: 10px;
  transform: rotate(27deg);
  left: 13px;
  margin-top: 3px;
}

.card-illustration.convert-units .input-example,
.card-illustration.convert-units .units-dropdown,
.card-illustration.convert-units .cursor {
  position: absolute;
}

.card-illustration.convert-units .input-example,
.card-illustration.convert-units .units-dropdown {
  left: calc(50% + 4px);
}

.card-illustration.convert-units .input-example {
  top: calc(50% - 41px);
}

.card-illustration.convert-units .units-dropdown {
  top: 50%;
}

.card-illustration.convert-units .cursor {
  top: calc(50% - 55px);
  left: calc(50% + 113px);
}

.card-illustration.convert-units .input-example {
  border-radius: 6px;
  display: inline-block;
  box-sizing: border-box;
  min-width: 85px;
  min-width: 100px;
  font: 400 13.3333px -apple-system, BlinkMacSystemFont, 'Roboto', sans-serif;
  margin: initial;
  padding: initial;
  padding: 5px 8px;
  letter-spacing: initial;
  box-shadow: 0 0 0 1px #76f0a0;
}

.card-illustration.convert-units .input-value {
  padding: 6px 4px;
  margin: 0;
  border: 0;
  outline: 0;
  background: none;
  color: #fff;
  line-height: initial;
  font-size: 14px;
  box-shadow: none;
  box-sizing: border-box;
  vertical-align: initial;
  /*
  only would work if you add display: inline-block
  max-width: 1px;
  white-space: nowrap;
  overflow: hidden;
  */
}

.card-illustration.color-picker {
  display: flex;
  justify-content: space-around;
  align-items: center;
  flex-direction: column;
  gap: 15px;
  padding: 0 30px;
  background-image: conic-gradient(from -.5turn at bottom right, deeppink, cyan, rebeccapurple);
}

.card-illustration.color-picker video {
  zoom: .93;
  border-radius: 9px;
  min-width: 198px;
  height: 300px;
  box-shadow: rgb(0 0 0 / 20%) 0px 4px 24px;
  outline: 0.5px solid rgba(255, 255, 255, 0.2);
}

.card-illustration.color-picker .button-example {
  appearance: none;
  background-color: #37b975;
  border-radius: 60px;
  box-sizing: border-box;
  color: #fff;
  display: inline-block;
  font-size: 14px;
  padding: 7px 16px;
  text-align: center;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  margin-top: 15px;
}

/* Lazy Video Loading States - reuses placeHolderShimmer keyframes */
video.lazy-video,
video.video-loading {
  background: linear-gradient(to right, rgb(255 255 255 / 5%) 10%, rgb(255 255 255 / 15%) 18%, rgb(255 255 255 / 5%) 30%);
  background-size: 936px 100%;
  animation: placeHolderShimmer 1.5s linear infinite;
}

video.video-loaded {
  animation: lazyFadeIn 0.3s ease-out forwards;
  background: none;
}

@keyframes lazyFadeIn {
  from { opacity: 0.9; }
  to { opacity: 1; }
}

/* Lazy Image Loading States - reuses placeHolderShimmer keyframes */
img.lazy-img.animated-background-loading {
  background: linear-gradient(to right, rgb(255 255 255 / 5%) 10%, rgb(255 255 255 / 15%) 18%, rgb(255 255 255 / 5%) 30%);
  background-size: 936px 100%;
  animation: placeHolderShimmer 1.5s linear infinite;
}

img.lazy-img.animated-background-loading::after {
  content: none;
}

img.lazy-img:not(.animated-background-loading) {
  animation: lazyFadeIn 0.3s ease-out forwards;
}

.padding-7 {
  padding-top: 3em;
}

#css-pro-color-eyedropper-popup {
  display: none;
}

#rulerImg {
  display: none;
}

.pop {
  animation: pop 500ms ease forwards;
}

@keyframes pop {
  0% { transform: scale(1); }
  50% { transform: scale(1.15); }
}

div.loading-demo {
  bottom: 2vh;
  left: 0;
  right: 0;
  margin: auto;
  position: fixed;

  display: none;

  z-index: 2147483647;
  -webkit-font-smoothing: antialiased;
  font-weight: 400;
  color: #fff;
  font-family: -apple-system, BlinkMacSystemFont, 'Roboto', sans-serif;
  width: 300px;
  text-shadow: none !important;
  border: 0;
  font-size: 14px;
  height: initial;
  line-height: 24px;
  transition: 0.1s ease-in all;
  text-transform: initial;
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
  outline: 0 !important;

  background: rgba(25, 25, 29, .95);
  box-shadow: rgba(0, 0, 0, .1) 0px 0px 0 1px inset, rgba(255, 255, 255, .2) 0.5px 0.5px 0 0 inset, rgba(255, 255, 255, .1) 0 0 0 1px inset, rgba(0, 0, 0, 0.1) 0px 2px 4px 0px, rgba(255, 255, 255, 0.05) 0px 0px 0px 1px inset, rgba(0, 0, 0, 0.07) 0px 1px 2px, rgba(0, 0, 0, 0.07) 0px 2px 4px, rgba(0, 0, 0, 0.07) 0px 4px 8px, rgba(0, 0, 0, 0.07) 0px 8px 16px, rgba(0, 0, 0, 0.07) 0px 16px 32px, rgba(0, 0, 0, 0.07) 0px 32px 64px, rgba(255, 255, 255, 0.05) 0px 0px 0px 1px inset, rgba(255, 255, 255, .06) 1px 1px 0 0 inset, rgba(255, 255, 255, .04) 0 0 0 1px inset;
  padding: 14px 10px;
  border-radius: 32px;
}

/* Styles for my-license, contact */
/* View transition animations */
.view-panel {
  transition: opacity 150ms ease-out, 
              filter 150ms ease-out,
              transform 150ms ease-out;
  will-change: opacity, filter, transform;
}

.view-panel.hidden {
  display: none !important;
}

.view-panel.fade-out {
  opacity: 0;
  filter: blur(2px);
  transform: scale(0.98);
  pointer-events: none;
}

.view-panel.fade-in {
  opacity: 1;
  filter: blur(0);
  transform: scale(1);
}

.view-panel.preparing {
  opacity: 0;
  filter: blur(2px);
  transform: scale(0.98);
}

.form-wrapper h1 {
  margin-bottom: 0;
}

.form-wrapper input[type="text"],
.form-wrapper input[type="email"],
.form-wrapper textarea,
.form-wrapper label {
  margin: 1em auto;
}

input[type="text"],
input[type="email"],
textarea {
  font-family: 'CerebriSans', -apple-system, BlinkMacSystemFont, 'Roboto', sans-serif;
  padding: 0.85em 1em;
  min-width: min(100%, 450px);
  font-size: 18px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #fff;
  outline: none;
  box-sizing: border-box;
  text-align: left;
}

textarea {
  display: block;
  margin: auto;
  resize: vertical;
  min-height: 170px;
  max-height: 500px;
}

input[type="text"]:focus,
input[type="email"]:focus,
textarea:focus {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.4);
  box-shadow: 0 0 0 1px rgba(42, 245, 152, 1);
}

input[type="text"].big-input,
input[type="email"].big-input {
  font-family: SF Mono, Source Code Pro, Consolas, Menlo, monospace;
  color: #b3ffdc;
  display: block;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

/* Fix Chrome autofill background override */
input[type="text"]:-webkit-autofill,
input[type="text"]:-webkit-autofill:hover,
input[type="text"]:-webkit-autofill:focus,
input[type="text"]:-webkit-autofill:active,
input[type="email"]:-webkit-autofill,
input[type="email"]:-webkit-autofill:hover,
input[type="email"]:-webkit-autofill:focus,
input[type="email"]:-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0 1000px #4A4A54 inset !important;
  -webkit-text-fill-color: #b3ffdc !important;
  caret-color: #b3ffdc;
}

input[type="text"]:-webkit-autofill:focus,
input[type="email"]:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1px rgba(42, 245, 152, 1), 0 0 0 1000px #4A4A54 inset !important;
}

.form-wrapper .button.primary {
  margin-top: 1em;
  margin-bottom: 3em;
  margin-left: auto;
  margin-right: auto;
}

.links-under-button {
  display: flex;
  gap: 0.5em;
  margin: auto;
  justify-content: center;
  flex-wrap: wrap;
}

.button.deactivate:hover {
  background: rgba(224, 67, 67, 0.48);
}

.activations-list {
  display: flex;
  flex-direction: column;
  gap: 1em;
  margin: 2.5em auto 6em;
  max-width: 750px;
}

.activation.card {
  background: rgba(0, 0, 0, .2);
  display: flex;
  align-items: center;
  flex-direction: column;
  text-align: left;
  gap: 1em;
}

.activation.card .desktop-icon {
  margin-right: 8px;
}

.activation.card button {
  margin-left: auto;
  border-left: none;
  border-right: none;
  border-bottom: none;
  width: 100%;
}

.button [data-icon] {
  vertical-align: calc(-.125em - 1px);
}

.browsers-download {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 30px;
  margin-bottom: 3em;
}

.browsers-download img {
  width: 35px;
  height: auto;
}

#activations {
  margin-top: 3em;
  margin-bottom: 1em;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.animated-spinner {
  animation: spin 700ms linear infinite;
}


@media screen and (min-width: 375px) {
  .pricing .tier {
    padding: 2em;
  }

  .sub-explainer > p {
    font-size: 22px;
  }

  .yearly-better {
    display: inline-block;
  }
}

@media screen and (min-width: 735px) {
  h1 {
    font-size: 60px;
  }

  h2 {
    font-size: 55px;
    line-height: 1.22;
  }

  header nav {
    padding: .75em 2em;
  }

  .limited-width {
    padding-left: 2em;
    padding-right: 2em;
  }

  .demo-img-wrapper {
    margin: 5em 2em 0;
  }

  .play-button {
    width: 130px;
    height: 130px;
    font-size: 2.2rem;
  }

  section .intro {
    margin-bottom: 4em;
  }

  section:not(:has(.demo-button)) .intro {
    margin-bottom: 4.8em;
  }

  .paddlenav ul {
    padding: 0 2em;
  }

  header nav ul li.my-license-li {
    display: initial;
  }

  .hero .limited-width {
    padding-top: 6em;
  }

  .three-features,
  .features {
    flex-direction: row;
  }

  .card-illustration.color-picker .button-example {
    margin-top: 0;
  }

  .card-illustration.convert-units {
    padding: 0 50px;
  }

  .card-illustration.convert-units .convert-units-graphics-wrapper,
  .card-illustration.color-picker video {
    zoom: 1;
  }

  .pricing .tiers {
    padding: unset;
  }

  .features.two-columns,
  .two-columns {
    grid-template-columns: repeat(2, 1fr);
  }

  .scrollable-features-list {
    flex-direction: row;
    padding: 0 2em;
  }

  .scrollable-features-list li {
    flex: 0 0 644px;
  }

  .scrollable-features-list li.custom-width {
    flex: 1;
  }

  .scrollable-features-list li > img,
  .scrollable-features-list li > picture img,
  .scrollable-features-list li > video {
    max-width: 644px;
  }

  /* To-do: remove after all videos/images are added */
  .scrollable-features-list li .tile:empty {
    min-width: 644px;
  }

  .scrollable-features-list li > img,
  .scrollable-features-list li > picture img,
  .scrollable-features-list li > video,
  .scrollable-features-list li > .card-illustration {
    height: 416px;
  }

  .scrollable-features-list li .tile:empty {
    height: 416px;
  }

  .scrollable-features-list li > img,
  .scrollable-features-list li > picture img,
  .scrollable-features-list li > video {
    min-width: 300px;
  }

  .features li.feature-card .caption:has(.title) {
    padding: 2.5em;
  }

  .hide-on-mobile {
    display: initial;
  }

  .mobile-only {
    display: none !important;
  }

  .tablet-and-desktop-only {
    display: block !important;
  }

  .changes-demo.browser .cursor {
    top: 55px;
  }

  .changes-demo.browser .cursor,
  .changes-demo.browser .cursor.before {
    margin-left: -10px;
    margin-top: 3px;
  }

  .changes-demo.browser .cursor.after {
    margin-left: 40px;
    margin-top: 0px;
  }

  .changes-demo,
  .changes-main-image-wrapper,
  .changes-images-wrapper {
    width: 90%;
  }

  .browser-address {
    max-width: 70%;
  }

  .sub-explainer strong {
    letter-spacing: -.01em;
  }

  .sub-explainer {
    margin: 0 auto 7em;
  }

  .sub-explainer > p {
    font-size: 26px;
  }

  .pricing .tier {
    padding: 2.5em;
  }

  footer {
    padding: 1.95em 3.3333em;
  }

  footer .bottom {
    gap: initial;
    flex-direction: row;
  }

  footer .link-list {
    flex-direction: row;
    flex-wrap: wrap;
  }

  .eyedropper-demo .art-wrapper,
  .eyedropper-demo .art-wrapper:not(.main) {
    display: flex;
  }

  .eyedropper-demo .art-wrapper:nth-child(3) {
    transform: translate(0px, 30px);
  }

  .eyedropper-demo .art-wrapper:nth-child(4) {
    transform: translate(0px, -23px);
  }

  .card-illustration.color-picker {
    flex-direction: row;
    padding: 0 70px;
  }

  .padding-7 {
    padding-top: 7em;
  }

  section.padding-bottom {
    padding-bottom: 5em;
  }
}

@media screen and (min-width: 900px) {
  .scrollable-features-list li {
    flex: 1;
  }

  .scrollable-features-list li > img,
  .scrollable-features-list li > picture img,
  .scrollable-features-list li > video {
    max-width: 696px;
  }

  /* To-do: remove after all videos/images are added */
  .scrollable-features-list li .tile:empty {
    min-width: 696px;
  }

  .activation.card {
    flex-direction: row;
  }

  .activation.card button {
    width: auto;
  }
}

@media screen and (min-width: 1024px) {
  .demo-button {
    display: inline-block;
  }

  header nav ul li.demo-button-li {
    display: initial;
  }

  .scrollable-features-list li > img,
  .scrollable-features-list li > picture img,
  .scrollable-features-list li > video,
  .scrollable-features-list li > .card-illustration {
    height: 450px;
  }

  .scrollable-features-list li > img,
  .scrollable-features-list li > picture img,
  .scrollable-features-list li > video {
    min-width: 400px;
  }

  .scrollable-features-list li .tile:empty {
    height: 450px;
  }

  .sub-explainer {
    flex-direction: row;
    gap: 75px;
  }

  .sub-explainer.with-margin-top {
    margin-top: 110px;
  }

  .sub-explainer.with-less-margin-top {
    margin-top: 90px;
  }

  .features .feature-card video {
    height: 350px;
  }

  .color-palette-demo-wrapper {
    margin: 20px auto auto;
  }

  .fn-dimensions-for-mobile {
    /* starts with display: none because it's gonna getScreenshot first */
    /* we're showing it after #ruler-img is loaded */
    display: none;
  }

  .pricing .tiers {
    flex-direction: row;
    margin-bottom: 6em;
  }

  .pricing .tier:nth-child(1) {
    transform: perspective(450px) rotateY(5deg) scale(0.98);
  }

  .pricing .tier:nth-child(1):hover {
    transform: perspective(450px) rotateY(0deg) scale(1);
  }

  .pricing .tier:nth-child(3) {
    transform: perspective(450px) rotateY(-5deg) scale(0.98);
  }

  .pricing .tier:nth-child(3):hover {
    transform: perspective(450px) rotateY(0deg) scale(1);
  }

  footer .limited-width {
    padding: 0 2em;
  }

  footer {
    margin-top: 8em;
  }
}

@media screen and (min-width: 1080px) {
  
}

@media screen and (min-width: 1150px) {
  .sub-explainer {
    gap: 60px;
  }

  .hide-on-desktop {
    display: none;
  }

  .card-illustration.color-picker {
    gap: 50px;
  }

  .card-illustration.color-picker video {
    border-color: rgba(255, 255, 255, .15);
  }

  .eyedropper-demo .art-wrapper {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}

@media screen and (min-width: 1200px) {
  .limited-width {
    padding-left: 0;
    padding-right: 0;
  }

  .scrollable-features-list {
    padding: 0 15%;
  }

  .demo-img-wrapper {
    margin: 5em auto 0;
  }

  .three-features,
  .features {
    padding: unset;
  }

  .changes-demo,
  .changes-main-image-wrapper {
    width: 80%;
  }

  .changes-demo.browser .cursor {
    top: 60px;
  }

  .changes-demo.browser .cursor,
  .changes-demo.browser .cursor.before {
    margin-left: -20px;
  }

  .changes-demo.browser .cursor.after {
    margin-left: 50px;
  }
}

/* Activations explainer tooltip */
u.activations-explainer {
  text-decoration: underline rgba(255, 255, 255, 0.3);
  text-underline-offset: 2px;
}

[data-theme="explainer-tippy"] .tippy-content {
  padding: 8px 13px;
  line-height: 1.7;
}