/* Small, interruptible movements for the existing pricing layout. */
.index-site.page-pricing .pricing-audience {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.index-site.page-pricing .pricing-audience[hidden] { display: none; }
.index-site.page-pricing .pricing-audience::before {
  content: '';
  position: absolute;
  inset: 4px auto 4px 4px;
  width: calc((100% - 12px) / 2);
  border-radius: 3px;
  background: var(--index-night);
  pointer-events: none;
  transition: transform 300ms cubic-bezier(.22, 1, .36, 1);
}
.index-site.page-pricing .pricing-audience:has([data-audience="team"][aria-selected="true"])::before {
  transform: translateX(calc(100% + 4px));
}
.index-site.page-pricing .pricing-audience button {
  position: relative;
  z-index: 1;
  transition: color 180ms ease, background-color 180ms ease;
}
.index-site.page-pricing .pricing-audience button[aria-selected="true"] { background: transparent; }
.index-site.page-pricing .plans-section:not([hidden]) .plan-card {
  animation: pricing-card-in 280ms cubic-bezier(.22, 1, .36, 1) backwards;
}
.index-site.page-pricing .plans-section:not([hidden]) .plan-card:nth-child(2) { animation-delay: 35ms; }
.index-site.page-pricing .plans-section:not([hidden]) .plan-card:nth-child(3) { animation-delay: 70ms; }
.index-site.page-pricing .plan-card {
  transition: border-color 200ms ease, box-shadow 200ms ease;
}
@media (hover: hover) and (pointer: fine) {
  .index-site.page-pricing .plan-card:hover {
    border-color: var(--index-mist);
    box-shadow: 0 8px 24px rgba(51, 59, 73, .06);
  }
}
.index-site.page-pricing .faq-item[open] .faq-body,
.index-site.page-pricing .compare-disclosure[open] .compare-wrap {
  animation: pricing-detail-in 200ms ease-out;
}
@keyframes pricing-card-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes pricing-detail-in {
  from { opacity: 0; transform: translateY(3px); }
  to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .index-site.page-pricing .pricing-audience::before,
  .index-site.page-pricing .pricing-audience button,
  .index-site.page-pricing .plan-card { transition: none; }
  .index-site.page-pricing .plans-section:not([hidden]) .plan-card,
  .index-site.page-pricing .faq-item[open] .faq-body,
  .index-site.page-pricing .compare-disclosure[open] .compare-wrap { animation: none; }
}