.pricing {
  --pricing-border: max(1px, 0.05em) solid oklch(var(--oklch-black) / 0.1);
  --pricing-package-padding: 1.625em;

  background: var(--color-white);
  border-radius: var(--border-radius);
  box-shadow: var(--box-shadow);
  display: grid;
  margin-inline: auto;
  position: relative;
  width: min(100%, 40em);
}

.pricing__demo {
  bottom: calc(100% + var(--space-neutral));
  display: grid;
  position: absolute;
  text-align: center;
  width: 100%;
}

.pricing__demo p {
  margin-bottom: -0.375em;
  margin-top: -0.35em;
  text-wrap: balance
}

.pricing__packages {
  border-bottom: var(--pricing-border);
  display: grid;
  position: relative;
}

.pricing__package {
  align-content: start;
  color: inherit;
  display: grid;
  flex: 1;
  font-weight: inherit;
  gap: calc(var(--border-radius) / 2);
  padding: calc(var(--border-radius) / 2);
  text-align: center;
  text-decoration: none;
  text-wrap: pretty;
}

.pricing__package header {
  display: grid;
}

.pricing__package header a {
  background: oklch(var(--oklch-ink) / 0.05);
  border-radius: calc(var(--border-radius) / 2);
  color: inherit;
  display: grid;
  font-weight: inherit;
  gap: var(--space-neutral);
  padding: var(--pricing-package-padding);
  text-decoration: none;
}

.pricing__package header h2 {
  font-size: var(--font-size-x-large);
  font-weight: 600;
  letter-spacing: var(--letter-spacing-tight);
  margin-bottom: -0.375em;
  margin-top: -0.3875em;
}

.pricing__package header h3 {
  font-size: var(--font-size-medium);
  letter-spacing: var(--letter-spacing);
  line-height: var(--line-height-tight);
  margin-bottom: -0.275em;
  margin-top: -0.4875em;
}

.pricing__package header dl {
  display: grid;
  gap: var(--space-medium);
  padding-top: var(--space-neutral);
  position: relative;
  text-align: center;
  text-wrap: pretty;
}

.pricing__package header dl:before {
  background: oklch(var(--oklch-ink) / 0.25);
  content: '';
  height: max(1px, 0.05em);
  left: 50%;
  position: absolute;
  transform: translate(-50%, -50%);
  width: 1.3em;
}

.pricing__package header dl dt {
  font-weight: 600;
  margin-bottom: -0.375em;
  margin-top: -0.55em;
}

.pricing__package header dl dd {
  font-size: var(--font-size-small);
  letter-spacing: var(--letter-spacing);
  line-height: var(--line-height-tight);
  margin-bottom: -0.2875em;
  margin-top: -0.4875em;
  text-wrap: balance;
}

.pricing__package header .button {
  pointer-events: none;
}

.pricing__package article {
  display: grid;
  padding: var(--pricing-package-padding);
}

.pricing__package article ul {
  display: grid;
  gap: 0.4em;
  list-style: none;
  margin-bottom: -0.3875em;
  margin-top: -0.3625em;
  text-align: left;
}

.pricing__package article ul li {
  padding-left: 1.3em;
  position: relative;
}

.pricing__package article ul li:before {
  align-items: start;
  background: url('/assets/images/general/icon-checkmark.svg') left center / 0.7625em auto no-repeat;
  content: '';
  display: flex;
  height: 1em;
  justify-content: center;
  left: 0;
  line-height: 1;
  pointer-events: none;
  position: absolute;
  top: 0.2125em;
  width: 1em;
}

.pricing__package--pro {
  border-bottom: var(--pricing-border);
}

.pricing__helper {
  align-items: center;
  display: none;
  height: 1.4625em;
  justify-content: center;
  position: relative;
  vertical-align: top;
  width: 1.4625em;
  z-index: 1;
}

.pricing__helper button {
  background: oklch(var(--oklch-ink) / 0.1);
  border-radius: 100%;
  color: var(--color-ink);
  cursor: pointer;
  display: grid;
  font-size: var(--font-size-small);
  min-height: 1.625em;
  min-width: 1.625em;
  place-content: center;
}

.pricing__helper small {
  backdrop-filter: blur(0.3em);
  -webkit-backdrop-filter: blur(0.3em);
  background: oklch(var(--oklch-ink) / 0.9);
  border-radius: calc(var(--border-radius) / 2);
  bottom: calc(100% + 0.4em);
  color: var(--color-white);
  filter: blur(0.2em);
  font-size: var(--font-size-small);
  letter-spacing: var(--letter-spacing-loose);
  line-height: var(--line-height-tight);
  opacity: 0;
  padding: 0.9em 1.3em;
  pointer-events: none;
  position: absolute;
  text-align: center;
  text-wrap: balance;
  transition:
    filter var(--transition),
    opacity var(--transition),
    transform var(--transition)
  ;
  transform: scale(0.9) translateY(1em);
  transform-origin: center top;
  width: 20em;
  will-change: transform;
}



@media(hover: hover) {

  .pricing__package header a {
    transition: background var(--transition);
  }

  .pricing__package header a:focus,
  .pricing__package header a:hover {
    background: oklch(var(--oklch-ink) / 0.075);
  }

  .pricing__package header a:focus .button,
  .pricing__package header a:hover .button {
    background: var(--color-blue-hover);
  }

  .pricing__helper {
    display: inline-flex;
  }

  .pricing__helper:focus small,
  .pricing__helper:hover small {
    filter: blur(0);
    opacity: 1;
    transform: scale(1);
  }

}



@media(min-width: 64em) {

  .pricing {
    margin: calc(-1 * var(--space-medium));
    margin-bottom: 0;
    width: auto;
  }

  .pricing__demo {
    bottom: 100%;
    height: 5em;
    place-content: center;
  }

  .pricing__packages {
    display: flex;
  }

  .pricing__packages:after {
    background: oklch(var(--oklch-black) / 0.1);
    content: '';
    height: 100%;
    left: 50%;
    pointer-events: none;
    position: absolute;
    top: 0;
    transform: translateX(-50%);
    width: max(1px, 0.05em);
  }

  .pricing__package--pro {
    border-bottom: none;
  }

  .pricing__package--free header a {
    align-items: center;
    display: flex;
    gap: var(--space-large);
  }

  .pricing__package--free header h3 {
    flex: 1;
  }

}



@media(prefers-color-scheme: dark) {

  .pricing {
    --pricing-border: max(1px, 0.05em) solid oklch(var(--oklch-slate-1) / 0.6);

    background: var(--color-slate-3);
  }

  .pricing__packages:after {
    background: oklch(var(--oklch-slate-1) / 0.6);
  }

  .pricing__package header a {
    background: oklch(var(--oklch-slate-1) / 0.4);
  }

  .pricing__package article ul li:before {
    background-image: url('/assets/images/general/icon-checkmark-dark.svg');
  }

  .pricing__helper small {
    background: oklch(var(--oklch-ink) / 0.75);
    color: var(--color-ink-inverted);
  }

  @media(hover: hover) {

    .pricing__package:focus header a,
    .pricing__package:hover header a {
      background: oklch(var(--oklch-slate-1) / 0.5);
    }

  }

}