.packages {
  --packages-gap: var(--font-size);
  --packages-width: calc(var(--font-size) * 26);

  display: grid;
  padding-inline: var(--font-size);
  position: relative;
}

.packages > * {
  font-size: var(--font-size-xxx-small);
  letter-spacing: var(--letter-spacing);
}

.packages__container {
  display: grid;
  margin-inline: auto;
  width: min(100%, var(--packages-width));
}

.packages__list {
  display: grid;
  gap: var(--packages-gap);
}

.packages__package {
  --package-gap: calc(var(--font-size) * 0.55);
  --package-space: calc(var(--font-size) * 1.5);
  --package-shadow-lifted:
    0 0 0 1px oklch(var(--oklch-black) / 0.02),
    0 0.7em 2.6em -1.2em oklch(var(--oklch-black) / 0.08),
    0 1.25em 3.6em -1.5em oklch(var(--oklch-black) / 0.115),
    0 0.9em 1.6em -1.6em oklch(var(--oklch-black) / 0.16),
    0 1.7em 2.2em -2.2em oklch(var(--oklch-black) / 0.195),
    0 2.45em 2.8em -2.6em oklch(var(--oklch-black) / 0.23)
  ;

  align-content: start;
  background: var(--color-white);
  box-shadow: var(--box-shadow-card);
  color: inherit;
  display: grid;
  font-weight: 400;
  gap: var(--package-gap);
  padding: var(--package-space);
  position: relative;
  text-decoration: none;
  transition: box-shadow var(--transition-slow), opacity var(--transition-slow), scale var(--transition-slow);
  will-change: scale;
}

.packages__package:before {
  aspect-ratio: 1;
  background: url('/assets/images/general/icon-check.svg') center / 45% auto no-repeat var(--color-green);
  border-radius: 100%;
  content: '';
  filter: blur(1.5px);
  opacity: 0;
  pointer-events: none;
  position: absolute;
  right: 0;
  scale: 0.75;
  top: 0;
  transition: filter var(--transition), opacity var(--transition), scale var(--transition);
  translate: 40% -40%;
  will-change: transform;
  width: calc(var(--font-size) * 0.85);
}

.packages__package:focus-visible {
  box-shadow: var(--package-shadow-lifted);
}

.packages__package:focus-visible:before {
  filter: none;
  opacity: 1;
  scale: 1;
}

.packages__package header {
  display: grid;
  gap: calc(var(--package-gap) + 0.4em);
  text-align: center;
}

.packages__offer {
  padding-top: calc(var(--space-large) - var(--package-gap) - 0.125em);
}

.packages__offer .button {
  flex: 1;
}

.packages__offer .button span {
  text-align: center;
  text-wrap: balance;
}

.packages__package header h2 {
  font-size: var(--font-size-xxxxx-large);
  font-weight: 600;
  letter-spacing: var(--letter-spacing-tight);
  line-height: var(--line-height-x-tight);
  margin-bottom: -0.24em;
  margin-top: -0.19em;
  text-wrap: balance;
}

.packages__package header h2 img {
  display: inline-block;
  height: 0.9em;
  margin-left: calc(-0.9em * 882 / 740 - 0.175em);
  margin-right: 0.175em;
  scale: 1.2;
  transform-origin: right center;
  vertical-align: -0.1em;
  width: auto;
}

.packages__package header p {
  font-size: var(--font-size-xxx-large);
  letter-spacing: var(--letter-spacing);
  line-height: var(--line-height-tight);
  margin-bottom: -0.31em;
  margin-top: -0.26em;
  text-wrap: pretty;
}

.packages__note {
  color: var(--color-ink-5);
  font-size: var(--font-size-x-large);
  letter-spacing: var(--letter-spacing-loose);
  line-height: var(--line-height-tight);
  margin-bottom: -0.335em;
  margin-top: -0.25em;
  text-align: center;
  text-wrap: pretty;
}

.packages__intro {
  display: grid;
  font-size: var(--font-size);
  margin-inline: auto;
  position: relative;
  text-align: center;
  text-wrap: pretty;
  width: min(100%, 26em);
  z-index: 1;
}

.packages__intro p {
  font-size: var(--font-size-medium);
  font-weight: 400;
  letter-spacing: var(--letter-spacing);
  line-height: var(--line-height-tight);
  margin-bottom: -0.29em;
  margin-top: -0.29em;
}

.packages__intro p strong {
  font-weight: 600;
}

.packages__table {
  --table-background: oklch(var(--oklch-white) / 0.5);
  --table-hover: oklch(var(--oklch-ink) / 0.03);
  --table-line: color-mix(in srgb, var(--color-canvas) 89.5%, var(--color-ink));
  --table-width: var(--packages-width);
  --table-headroom: calc(var(--font-size) * 5);

  display: grid;
  margin-inline: auto;
  margin-top: calc(var(--packages-gap) - var(--table-headroom));
  overflow-x: auto;
  padding-top: var(--table-headroom);
  width: min(100%, var(--table-width));
}

.packages__table table {
  background: var(--table-background);
  border-collapse: collapse;
  font-size: var(--font-size);
  letter-spacing: var(--letter-spacing);
  min-width: 40rem;
  text-align: left;
  width: 100%;
}

.packages__table th,
.packages__table td {
  border: var(--line-thickness) solid var(--table-line);
  font-size: var(--font-size-xx-small);
  font-weight: 400;
  letter-spacing: var(--letter-spacing);
  line-height: var(--line-height-tight);
  padding: 1.125em 1.375em;
  vertical-align: middle;
}

.packages__table tbody th {
  white-space: nowrap;
}

.packages__table tbody th > span {
  display: block;
  font-weight: 600;
  letter-spacing: var(--letter-spacing);
}

.packages__table tbody th small {
  display: block;
  font-size: inherit;
  font-weight: 400;
  letter-spacing: var(--letter-spacing);
}

.packages__table tbody th small span {
  color: var(--color-ink-5);
  font-size: calc(var(--font-size) * 0.4375);
  letter-spacing: var(--letter-spacing);
}

.packages__table tbody td {
  white-space: nowrap;
}

.packages__table tbody td:last-child {
  text-wrap: pretty;
  white-space: normal;
}

.packages__term {
  white-space: nowrap;
}

.packages__table .pricing__helper {
  --helper-size: 1em;

  margin-left: 0.175em;
  margin-top: 0;
  vertical-align: calc(var(--helper-size) * -0.2162);
}

.packages__table .pricing__helper summary {
  background: none;
  width: var(--helper-size);
}

.packages__table .pricing__helper summary > span {
  font-size: inherit;
  line-height: 0;
}

.packages__table .pricing__helper small {
  font-size: 84.375%;
}

.packages__table .pricing__helper svg {
  display: block;
  height: var(--helper-size);
  width: var(--helper-size);
}

@media(hover: hover) {

  .packages__package:hover {
    box-shadow: var(--package-shadow-lifted);
    scale: 1.03;
  }

  .packages__package:hover:before {
    filter: none;
    opacity: 1;
    scale: 1;
  }

  .packages__package:hover .button--glow:after {
    opacity: 1;
  }

  .packages__list:has(.packages__package:hover) .packages__package:not(:hover) {
    opacity: 0.4;
    scale: 0.985;
  }

  .packages__package:active {
    scale: 1.01;
    transition: box-shadow var(--transition-slow), opacity var(--transition-slow), scale var(--transition);
  }

  .packages__table th,
  .packages__table td {
    transition: background-color var(--transition);
  }

  .packages__table tbody tr:hover > * {
    background-color: var(--table-hover);
  }

}

@media(max-width: 63.99em) {

  .packages__table {
    border-image: linear-gradient(to bottom, transparent var(--table-headroom), var(--table-line) 0) 1;
    border-inline: var(--line-thickness) solid;
    overscroll-behavior-x: none;
    scrollbar-width: thin;
  }

  .packages__table tr > :first-child {
    border-left: none;
  }

  .packages__table tr > :last-child {
    border-right: none;
  }

  /* Hidden popovers hang left so they don't widen the scroll */
  .packages__table .pricing__helper small {
    translate: -100% 0;
  }

  .packages__table .pricing__helper[open] small,
  .packages__table .pricing__helper:hover small,
  .packages__table .pricing__helper summary:focus-visible small {
    translate: -50% 0;
  }

}

@media(min-width: 64em) {

  .packages {
    padding-inline: calc(var(--font-size) * 3);
  }

  .packages__container {
    width: min(100%, 74em);
  }

  .packages__package {
    --package-space: calc(var(--font-size) * 1.3125);
  }

  .packages__list {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }

  .packages__table {
    --table-width: 74em;

    overflow: visible;
  }

  .packages__table .pricing__helper small {
    width: 23em;
  }

}

@media(prefers-reduced-motion: reduce) {

  .packages__package,
  .packages__package:before,
  .packages__package:hover,
  .packages__package:hover:before,
  .packages__package:active,
  .packages__list:has(.packages__package:hover) .packages__package:not(:hover) {
    scale: none;
  }

}

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

  .packages__package {
    background: var(--color-ink-3);
  }

  .packages__table {
    --table-background: oklch(var(--oklch-ink) / 0.01);
    --table-hover: oklch(var(--oklch-ink) / 0.03);
    --table-line: color-mix(in srgb, var(--color-canvas) 83%, var(--color-ink));
  }

  .packages__package header p {
    color: oklch(var(--oklch-ink) / 0.75);
  }

  .packages__note,
  .packages__table tbody th small span {
    color: oklch(var(--oklch-ink) / 0.65);
  }

}