@charset "UTF-8";
@keyframes bounce {
  0%, 20%, 60%, 100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
  40% {
    -webkit-transform: translateY(-5px);
    transform: translateY(-5px);
  }
  80% {
    -webkit-transform: translateY(-5px);
    transform: translateY(-5px);
  }
}
@keyframes rotateIn {
  from {
    -webkit-transform-origin: center;
    transform-origin: center;
    -webkit-transform: rotate3d(0, 0, 1, -90deg);
    transform: rotate3d(0, 0, 1, -90deg);
    opacity: 0.5;
  }
  to {
    -webkit-transform-origin: center;
    transform-origin: center;
    -webkit-transform: rotate3d(0, 0, 1, 0deg);
    transform: rotate3d(0, 0, 1, 0deg);
    opacity: 1;
  }
}
@keyframes fadein {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes backgroundShimmer {
  0% {
    background-position: -668px 0;
  }
  100% {
    background-position: 468px 0;
  }
}
.card {
  border-radius: 1.5rem;
}
.card .card-banner {
  color: #29323d;
  background: #ffe533;
}
.card .price-subtext {
  user-select: none;
}
.card .d2\.5 {
  font-size: 3.75rem;
}

@media (min-width: 1400px) {
  .card .d2\.5 {
    font-size: 4rem;
  }
}
@media (min-width: 1900px) {
  .card .d2\.5 {
    font-size: 3.25rem;
  }
}
.pricing-seats {
  height: 2.5rem;
  display: flex;
  justify-content: stretch;
  align-items: center;
}
.pricing-seats .icon {
  --icon-size: 1.25rem;
  color: var(--active-color);
  margin-right: 0.375rem;
}
.pricing-seats .input {
  width: 100%;
}
.pricing-seats .input select {
  width: 100%;
  border: 2px solid var(--active-color);
  font-size: 1.125rem;
}

.price-crossed {
  font-size: 0.5em;
  vertical-align: super;
  color: var(--body-muted-color);
  position: relative;
}

.price-crossed::after {
  content: "";
  background: #f54c52;
  transform: rotate(-25deg);
  transform-origin: center;
  position: absolute;
  top: 40%;
  left: -10%;
  right: 0;
  height: 3px;
  opacity: 0.95;
  box-sizing: content-box;
  width: 125%;
  border-radius: 1rem;
}

.pricing-promo {
  position: relative;
  padding-bottom: 5px;
  background: radial-gradient(ellipse at 50% 100%, #201156 33%, #0a061d 100%);
  min-height: 142px;
}
.pricing-promo .container {
  background: none;
  position: relative;
  z-index: 4;
}
.pricing-promo .pricing-promo-images {
  position: absolute;
  top: 0;
  bottom: 5px;
  left: 0;
  right: 0;
  z-index: 1;
}
.pricing-promo {
  /* Cyber Week 2025 Promo */
}
.pricing-promo.bf2025-promo .h2 {
  font-size: 2.25rem;
  font-weight: 800;
  letter-spacing: -0.2pt;
  --gradient-start: #8c76db;
  --gradient-end: currentColor;
  background-image: linear-gradient(to top, var(--gradient-start) 0%, var(--gradient-end) 30%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.pricing-promo.bf2025-promo .lead {
  color: #8672cf;
  text-shadow: #201156 0px 4px 20px, #201156 2px 2px 3px;
}
.pricing-promo.bf2025-promo::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  right: 0;
  height: 5px;
  background: repeating-linear-gradient(to right, #ad00ff 0%, #3815b6 50%, #ad00ff 100%);
  width: 100%;
  background-size: 200% auto;
  background-position: 0 100%;
  animation: gradient 6s infinite;
  animation-fill-mode: forwards;
  animation-timing-function: linear;
}
.pricing-promo.bf2025-promo .pricing-promo-images {
  --frame-left: clamp(-110px, calc(50% - 720px), 9999px);
  --frame-right: clamp(0px, calc(50% + 480px), 125%);
  background-image: url("/img/imagery/bf2025-doggy.png"), url("/img/imagery/bf2025-astronaut.png"), url("/img/imagery/bf2025-stars.png");
  background-repeat: no-repeat;
  background-size: 274px 167px, 440px 168px, 1482px auto;
  background-position: var(--frame-left) center, var(--frame-right) center, center 10px;
  animation: float-both 10s ease-in-out infinite;
}
@keyframes float-both {
  0% {
    background-position: var(--frame-left) 20px, var(--frame-right) -10px, center 10px;
  }
  50% {
    background-position: var(--frame-left) -15px, var(--frame-right) 15px, center 10px;
  }
  100% {
    background-position: var(--frame-left) 20px, var(--frame-right) -10px, center 10px;
  }
}
@keyframes gradient {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: -200% 0;
  }
}

.g2-badges .badge svg {
  width: 100%;
  max-height: 9rem;
}

.review-logo,
.review-logo svg {
  display: block;
  width: 7rem;
}

.review-logo-lg,
.review-logo-lg svg {
  display: block;
  width: 10rem;
}

.features .tooltiptext {
  visibility: hidden; /* Hidden by default */
  width: 130px;
  background-color: black;
  color: #ffffff;
  text-align: center;
  padding: 5px 0;
  border-radius: 6px;
  position: absolute;
  z-index: 1; /* Ensure tooltip is displayed above content */
}

.table tbody {
  font-size: 1rem;
}
.table tbody td {
  vertical-align: middle;
}

@media (max-width: 576px) {
  /* Unfix tables on narrow phone screens */
  .table-container {
    margin-left: -1rem;
    margin-right: -1rem;
  }
  table tr td,
  table tr th {
    overflow-wrap: break-word;
    hyphens: auto;
    font-size: 0.8125rem;
  }
  table tr td.h4,
  table tr th.h4 {
    font-size: 1rem;
  }
  table tr td button,
  table tr th button {
    max-width: 100%;
    overflow-wrap: break-word;
    hyphens: auto;
  }
}
.more-info {
  text-decoration-line: underline;
  text-decoration-style: dashed;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--body-muted-color);
  text-underline-offset: 0.25em;
  appearance: none;
  text-align: left;
  display: inline;
  font: inherit;
}

.more-info::after {
  content: " ▾";
  color: var(--body-muted-color);
}

.currency_symbol {
  min-width: 0.6em;
  display: inline-block;
  font-variant-numeric: tabular-nums;
}

/*
	Popover styles
*/
wa-popover {
  font-weight: normal;
}

wa-popover::part(body) {
  box-shadow: 0 8px 12px -2px rgba(0, 0, 0, 0.1019607843), 0 4px 8px -3px rgba(0, 0, 0, 0.1019607843);
  border-radius: 1rem;
  padding: 1rem 1.25rem;
  border-color: #c9d3dd;
  background: #f7f8f9;
  user-select: unset;
  text-wrap: pretty;
}

/* BF-2025 Themed price cards */
.theme-bf2025 {
  --well-bg: url('/img/imagery/bf2025-stars.png') center 120% no-repeat,
  	linear-gradient(235deg, #3f40a6 0%, #8b07e950 50%, #8b07e900 100%);
  --well-color: white;
  --well-icon-color: white;
  --heading-color: white;
  --body-muted-color: #c2b6ec7f;
  --button-main-bg: #8b07e9;
  --button-main-hover-bg: #750adc;
  --container-filter: brightness(100);
}

.card.theme-bf2025 {
  position: relative;
  background-color: #10092e;
  background-size: 1200px auto;
}

.card.theme-bf2025 .card-banner {
  color: white;
  background: #750adc;
}