:root {
  --size: 0.0625rem;
  --background: 0 0% 11%;
  --light: 60 3% 95%;
  --light-gray: 197 12% 76%;
  --muted: 60 3% 15%;
  --purple: 251 60% 51%;
  --black: 60 1% 25%;
  --green: 142 69% 58%;
  --green-dark: 142 37% 17%;
  --light-green: 142 69% 95%;
  --light-ring: 47 10% 83%;
  --brand: 244 26% 22%;
  --brand-light: 235 100% 87%;
  --tootip: 45, 40%, 98%;
}
.animation-gradient-move {
  color: transparent;
  animation: gradient-move 2s ease-in infinite;
}
.color-gradient-move {
  background: linear-gradient(90deg, hsl(var(--green)) 0, hsl(var(--green) / .85) 40%, hsl(var(--green) / .5) 50%, hsl(var(--green) / .85) 60%, hsl(var(--green)) 100%);
  background-size: 200% 100%;
  background-clip: text;
  -webkit-background-clip: text;
}
.transition-colors {
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 0.15s;
}
@-moz-keyframes gradient-move {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: 0 0;
  }
}
@-webkit-keyframes gradient-move {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: 0 0;
  }
}
@-o-keyframes gradient-move {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: 0 0;
  }
}
@keyframes gradient-move {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: 0 0;
  }
}
body {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif;
  background: hsl(var(--background)) !important;
  margin: 0;
  padding: 0;
}
.layout-price {
  text-align: center;
  padding-inline: calc(var(--size) * 16);
  max-width: 992px;
  margin: calc(var(--size) * 64) auto;
  color: hsl(var(--light-gray));
}
.layout-flex {
  display: flex;
  gap: calc(var(--size) * 16);
  flex-direction: column;
}
.section-icon {
  width: calc(var(--size) * 46);
  height: calc(var(--size) * 47);
  margin: 0 auto;
}
.section-title {
  font-size: calc(var(--size) * 30);
  font-weight: 500;
  color: #fff;
}
.section-paragraph {
  font-size: calc(var(--size) * 16);
  margin-top: calc(var(--size) * 0);
  margin-bottom: calc(var(--size) * 20);
  color: hsl(var(--light-gray));
}
.section-paragraph--my-0 {
  margin-block: calc(var(--size) * 0);
}
.section-paragraph--center {
  text-align: center;
}
svg {
  color: currentColor;
  fill: currentColor;
}
.plan_badge {
  visibility: hidden;
  background: hsl(var(--green-dark));
  color: hsl(var(--green));
  font-size: calc(var(--size) * 14);
  font-weight: 400;
  padding: calc(var(--size) * 4) calc(var(--size) * 8);
  border-radius: calc(var(--size) * 99999);
  margin-inline: auto 0;
  min-height: calc(var(--size) * 32);
  display: flex;
  align-items: center;
  column-gap: calc(var(--size) * 2);
}
.plan_badge__attr::after {
  content: attr(data-saved);
}
.plan_badge--hidden {
  visibility: hidden;
}
.plan_badge--brand {
  padding: calc(var(--size) * 4) calc(var(--size) * 12);
  font-size: calc(var(--size) * 12);
  background: hsl(var(--brand));
  visibility: visible;
  color: hsl(var(--brand-light));
  min-height: fit-content;
}
:has(>tool-tip) {
  position: relative;
  display: flex;
  align-items: center;
}
:has(>tool-tip):hover tool-tip {
  opacity: 1;
  transition: opacity 0.3s ease, transform 0.2s ease, z-index 0.2s ease;
  z-index: 9999;
}
tool-tip {
  position: absolute;
  z-index: -1;
  user-select: none;
  box-shadow: 0 0 6px rgba(0, 0, 0, 0.1);
  padding: calc(var(--size) * 8) calc(var(--size) * 12);
  border-radius: calc(var(--size) * 4);
  font-size: calc(var(--size) * 12);
  opacity: 0;
  top: calc((100% + var(--size) * 4) * -1);
  transform: translateX(-50%) translateY(-70%);
  left: 50%;
  transition: opacity 0.3s ease, transform 0.2s ease, z-index 0.2s ease;
  min-width: calc(var(--size) * 186);
  background-color: hsl(var(--tootip));
  color: hsl(var(--background));
}
tool-tip:after {
  content: '';
  position: absolute;
  bottom: -10px;
  left: 50%;
  transform: translateX(-50%);
  width: 10px;
  height: 10px;
  background-color: transparent;
}
tool-tip:hover {
  opacity: 1;
  z-index: 9999;
}
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: calc(var(--size) * 8) calc(var(--size) * 16);
  font-size: calc(var(--size) * 14);
  font-weight: 500;
  text-decoration: none;
  border-radius: calc(var(--size) * 6);
  background: transparent;
  transition: background 0.3s ease, color 0.3s ease;
  color: hsl(var(--light));
  cursor: pointer;
  border: calc(var(--size) * 1) solid hsl(var(--black));
  background: hsl(var(--muted));
  min-height: calc(var(--size) * 18);
}
.btn:hover,
.btn:visited {
  background: hsl(var(--muted));
  color: hsl(var(--light));
}
.btn--primary,
.btn--primary:hover,
.btn--primary:visited {
  background: hsl(var(--purple));
  color: hsl(var(--light));
}
.btn--full-width {
  width: auto;
  text-align: center;
}
.button_toggle {
  display: none;
}
.button_toggle_label {
  width: calc(var(--size) * 36);
  height: calc(var(--size) * 20);
  background: hsl(var(--black));
  border-radius: calc(var(--size) * 10);
  position: relative;
  cursor: pointer;
  transition: background-color 0.3s ease;
}
.button_toggle_label::after {
  content: '';
  width: calc(var(--size) * 16);
  height: calc(var(--size) * 16);
  background: hsl(var(--light));
  border-radius: 50%;
  position: absolute;
  top: calc(var(--size) * 2);
  left: calc(var(--size) * 2);
  transition: left 0.3s ease;
}
select,
::picker(select) {
  appearance: none;
}
.slct {
  padding: calc(var(--size) * 8) calc(var(--size) * 12);
  background: hsl(var(--background));
  border-radius: calc(var(--size) * 6);
  border: calc(var(--size) * 1) solid hsl(var(--black));
  box-shadow: 0 1px 2px 0 rgba(0,0,0,0.05);
  font-size: calc(var(--size) * 14);
  white-space: nowrap;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  color: hsl(var(--light));
  cursor: pointer;
  position: relative;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' fill='darkgray' viewBox='0 0 24 24' width='16px' height='16px' aria-hidden='true'><path fill='darkgray' d='M11.526 15.582a.75.75 0 0 0 1.004-.052l5-5a.75.75 0 1 0-1.06-1.06L12 13.94 7.53 9.47a.75.75 0 1 0-1.06 1.06l5 5z'></path></svg>");
  background-repeat: no-repeat;
  background-position: calc(100% - var(--size) * 12) center;
  background-size: 16px 16px;
  min-height: calc(var(--size) * 36);
}
.slct:focus {
  outline: calc(var(--size) * 1) solid hsl(var(--light-ring));
}
.slct__content,
.slct--full-width {
  width: 100%;
}
.slct option {
  background: hsl(var(--background));
  color: hsl(var(--light));
  font-size: calc(var(--size) * 14);
}
.plan__header {
  display: flex;
  flex-direction: column;
  align-items: start;
  gap: calc(var(--size) * 14);
}
.plan__title {
  font-size: calc(var(--size) * 20);
  font-weight: 500;
  margin: 0;
  color: hsl(var(--light));
}
.plan__title--h4 {
  font-size: calc(var(--size) * 14);
  font-weight: 500;
}
.plan__title--left {
  text-align: left;
}
.plan__description {
  font-size: calc(var(--size) * 14);
  color: hsl(var(--light));
  margin: 0;
  min-height: calc(var(--size) * 44);
  text-align: left;
  text-wrap: pretty;
}
@media (min-width: 512px) {
  .plan__description {
    min-height: calc(var(--size) * 66);
  }
}
.plan__price {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  column-gap: calc(var(--size) * 8);
  row-gap: calc(var(--size) * 6);
  align-items: center;
  color: hsl(var(--light-gray));
  min-height: calc(var(--size) * 70);
}
.plan__price--static {
  font-size: calc(var(--size) * 20);
}
.plan__price-currency {
  font-size: calc(var(--size) * 30);
  font-weight: 700;
  color: hsl(var(--light));
}
.plan__price-credit-info {
  font-size: calc(var(--size) * 14);
  color: hsl(var(--light-gray));
  width: 100%;
  flex-basis: 100%;
  text-align: left;
}
.plan__paragraph {
  font-size: calc(var(--size) * 14);
  color: hsl(var(--light-gray));
}
.plan__features {
  font-size: calc(var(--size) * 14);
  list-style: none;
  padding: 0;
  margin: 0;
  text-align: left;
  color: hsl(var(--light));
  display: flex;
  flex-direction: column;
  gap: calc(var(--size) * 16);
}
.plan__features li {
  display: flex;
  align-items: center;
  gap: calc(var(--size) * 4);
}
.plan__features li svg {
  width: calc(var(--size) * 16);
  height: calc(var(--size) * 16);
  flex-shrink: 0;
  color: currentColor;
}
.plan_action-toggle {
  border-block: calc(var(--size) * 1) solid hsl(var(--black));
  margin-inline: calc(var(--size) * -16);
  padding: calc(var(--size) * 8) calc(var(--size) * 16);
  display: flex;
  align-items: center;
  gap: calc(var(--size) * 12);
  color: hsl(var(--light-gray));
  min-height: calc(var(--size) * 46);
}
.plan_action-toggle:has(.button_toggle:checked) .button_toggle_label::after {
  left: calc(var(--size) * 18);
}
.plan_action-toggle:has(.button_toggle:checked) .button_toggle_label {
  background: hsl(var(--purple));
}
.plan_action-toggle:has(.button_toggle:checked) .plan_badge {
  visibility: visible;
}
.plan_toggle {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: calc(var(--size) * 12);
  position: relative;
}
.plan_toggle_description {
  font-size: calc(var(--size) * 14);
  color: hsl(var(--light-gray));
}
.plan {
  background-color: hsl(var(--background));
  border: calc(var(--size) * 1) solid hsl(var(--black));
  border-radius: calc(var(--size) * 12);
  padding: calc(var(--size) * 16);
  padding-bottom: calc(var(--size) * 24);
  color: hsl(var(--light));
}
.plan--featured {
  background-color: hsl(var(--muted));
}
.plan_action-button {
  display: flex;
  flex-direction: column;
  gap: calc(var(--size) * 8);
}
.plans {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: calc(var(--size) * 16);
}
@media (min-width: 512px) {
  .plans {
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: calc(var(--size) * 24);
  }
}