/* SsrCat physical card material + spring tilt. Scoped to pricing cards only. */
.pricing-table .card-deck {
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  align-items: stretch;
  gap: 14px;
  margin: 0;
}

.pricing-table .card-deck > .pricing-tilt {
  position: relative;
  z-index: 1;
  flex: 0 0 calc((100% - 42px) / 4);
  max-width: calc((100% - 42px) / 4);
  min-width: 0;
  margin: 0;
  display: block;
  aspect-ratio: 5 / 7;
  border-radius: 5% / 3.6%;
}

/* Sibling cards compete at the host level, so raise the whole active host—not
   only its inner card—when a card expands across a neighbour. */
.pricing-table .card-deck > .pricing-tilt.is-holo-host-active {
  z-index: 20;
}

/* One-time subscription-card entrance. It runs on the host element so the
   existing inner 3D tilt, holographic film and click interaction stay intact. */
@media (prefers-reduced-motion: no-preference) {
  .pricing-card-reveal-ready #pricing .card-deck > .pricing-tilt {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity .72s cubic-bezier(.16, 1, .3, 1), transform .72s cubic-bezier(.16, 1, .3, 1);
    will-change: opacity, transform;
  }

  .pricing-card-reveal-ready #pricing.is-cards-revealed .card-deck > .pricing-tilt {
    opacity: 1;
    transform: translateY(0);
  }

  .pricing-card-reveal-ready #pricing.is-cards-revealed .card-deck > .pricing-tilt:nth-child(1) { transition-delay: .02s; }
  .pricing-card-reveal-ready #pricing.is-cards-revealed .card-deck > .pricing-tilt:nth-child(2) { transition-delay: .1s; }
  .pricing-card-reveal-ready #pricing.is-cards-revealed .card-deck > .pricing-tilt:nth-child(3) { transition-delay: .18s; }
  .pricing-card-reveal-ready #pricing.is-cards-revealed .card-deck > .pricing-tilt:nth-child(4) { transition-delay: .26s; }
}

.pricing-table .pricing-tilt > .holo-card {
  width: 100%;
  height: 100%;
  margin: 0;
  transform: none;
  will-change: auto;
}

.pricing-table .pricing-tilt::part(container),
.pricing-table .pricing-tilt::part(tilt) {
  border-radius: inherit;
}

.pricing-table .pricing-tilt::part(tilt) {
  overflow: visible;
  /* The custom tilt is applied to .holo-card, not this web-component layer.
     Disable its independent shadow so it cannot detach into a black blob. */
  box-shadow: none !important;
}

.pricing-table .pricing-tilt::part(tilt)::before {
  z-index: 10;
}

.pricing-table .holo-card {
  --pointer-x: 50%;
  --pointer-y: 50%;
  --background-x: 50%;
  --background-y: 50%;
  --rotate-x: 0deg;
  --rotate-y: 0deg;
  --current-scale: 1;
  --base-scale: 1;
  --hover-scale: 1.035;
  --shadow-x: 0px;
  --shadow-y: 18px;
  --accent-rgb: 29, 233, 182;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  aspect-ratio: 5 / 7;
  border-radius: 5% / 3.6%;
  transform: perspective(680px) rotateX(var(--rotate-x)) rotateY(var(--rotate-y)) scale3d(var(--current-scale), var(--current-scale), 1);
  transform-style: preserve-3d;
  transform-origin: center center;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.2);
  will-change: transform, box-shadow;
  backface-visibility: hidden;
  transition: box-shadow .25s ease;
}

/* Repeating SsrCat logo foil. The component exposes animated pointer variables
   on the slotted card, so the rainbow shifts with the physical tilt. */
.pricing-table .holo-card::before {
  content: "";
  position: absolute;
  inset: -2px;
  z-index: 1;
  border-radius: inherit;
  opacity: calc(.1 + var(--hover-tilt-opacity, 0) * .48);
  background:
    conic-gradient(
      from var(--hover-tilt-angle, 215deg)
      at var(--gradient-x, 50%) var(--gradient-y, 50%),
      #ff5da2,
      #ffd76a,
      rgba(var(--accent-rgb), .95),
      #55e7ff,
      #8d72ff,
      #ff5da2
    ),
    linear-gradient(
      calc(var(--hover-tilt-angle, 215deg) + 90deg),
      transparent 18%,
      rgba(255,255,255,.95) 46%,
      transparent 72%
    );
  background-size: 175% 175%, 235% 235%;
  background-position:
    calc(var(--hover-tilt-x, .5) * 100%) calc(var(--hover-tilt-y, .5) * 100%),
    calc((1 - var(--hover-tilt-x, .5)) * 100%) calc((1 - var(--hover-tilt-y, .5)) * 100%);
  background-repeat: no-repeat;
  -webkit-mask-image:
    url("../img/card-foil-logo.png?v=20260701-6"), url("../img/card-foil-logo.png?v=20260701-6"), url("../img/card-foil-logo.png?v=20260701-6"), url("../img/card-foil-logo.png?v=20260701-6"),
    url("../img/card-foil-logo.png?v=20260701-6"), url("../img/card-foil-logo.png?v=20260701-6"), url("../img/card-foil-logo.png?v=20260701-6"), url("../img/card-foil-logo.png?v=20260701-6"),
    url("../img/card-foil-logo.png?v=20260701-6"), url("../img/card-foil-logo.png?v=20260701-6"), url("../img/card-foil-logo.png?v=20260701-6"), url("../img/card-foil-logo.png?v=20260701-6"),
    url("../img/card-foil-logo.png?v=20260701-6"), url("../img/card-foil-logo.png?v=20260701-6"), url("../img/card-foil-logo.png?v=20260701-6"), url("../img/card-foil-logo.png?v=20260701-6"),
    url("../img/card-foil-logo.png?v=20260701-6"), url("../img/card-foil-logo.png?v=20260701-6"), url("../img/card-foil-logo.png?v=20260701-6"), url("../img/card-foil-logo.png?v=20260701-6");
  mask-image:
    url("../img/card-foil-logo.png?v=20260701-6"), url("../img/card-foil-logo.png?v=20260701-6"), url("../img/card-foil-logo.png?v=20260701-6"), url("../img/card-foil-logo.png?v=20260701-6"),
    url("../img/card-foil-logo.png?v=20260701-6"), url("../img/card-foil-logo.png?v=20260701-6"), url("../img/card-foil-logo.png?v=20260701-6"), url("../img/card-foil-logo.png?v=20260701-6"),
    url("../img/card-foil-logo.png?v=20260701-6"), url("../img/card-foil-logo.png?v=20260701-6"), url("../img/card-foil-logo.png?v=20260701-6"), url("../img/card-foil-logo.png?v=20260701-6"),
    url("../img/card-foil-logo.png?v=20260701-6"), url("../img/card-foil-logo.png?v=20260701-6"), url("../img/card-foil-logo.png?v=20260701-6"), url("../img/card-foil-logo.png?v=20260701-6"),
    url("../img/card-foil-logo.png?v=20260701-6"), url("../img/card-foil-logo.png?v=20260701-6"), url("../img/card-foil-logo.png?v=20260701-6"), url("../img/card-foil-logo.png?v=20260701-6");
  -webkit-mask-size: 35px auto;
  mask-size: 35px auto;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position:
    10% 8%, 37% 8%, 63% 8%, 90% 8%,
    10% 29%, 37% 29%, 63% 29%, 90% 29%,
    10% 50%, 37% 50%, 63% 50%, 90% 50%,
    10% 71%, 37% 71%, 63% 71%, 90% 71%,
    10% 92%, 37% 92%, 63% 92%, 90% 92%;
  mask-position:
    10% 8%, 37% 8%, 63% 8%, 90% 8%,
    10% 29%, 37% 29%, 63% 29%, 90% 29%,
    10% 50%, 37% 50%, 63% 50%, 90% 50%,
    10% 71%, 37% 71%, 63% 71%, 90% 71%,
    10% 92%, 37% 92%, 63% 92%, 90% 92%;
  mix-blend-mode: color-dodge;
  filter: saturate(1.35) brightness(.88) contrast(1.12);
  transform: none;
  pointer-events: none;
  backface-visibility: hidden;
  will-change: background-position, opacity, filter;
  transition: opacity .28s ease, filter .28s ease;
}

/* Pointer-positioned glare hotspot. */
.pricing-table .holo-card::after {
  content: "";
  position: absolute;
  inset: -2px;
  z-index: 2;
  border-radius: inherit;
  opacity: 0;
  background:
    radial-gradient(farthest-corner circle at var(--pointer-x) var(--pointer-y),
      rgba(255,255,255,.78) 0%,
      rgba(255,255,255,.34) 12%,
      rgba(var(--accent-rgb), .12) 28%,
      rgba(0,0,0,.08) 56%,
      transparent 78%);
  mix-blend-mode: overlay;
  filter: brightness(.92) contrast(1.55);
  pointer-events: none;
  backface-visibility: hidden;
  transition: opacity .28s ease;
}

.pricing-table .holo-card.is-holo-active::before {
  opacity: .58;
}

.pricing-table .holo-card.is-holo-active::after {
  opacity: .74;
}

.pricing-table .holo-card.is-holo-active {
  z-index: 8;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.24),
    0 0 35px rgba(var(--accent-rgb), .11);
}

.pricing-table .holo-card .card-body {
  position: relative;
  z-index: 4;
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 1.45rem 1rem 1.1rem;
  transform: translateZ(28px);
  transform-style: preserve-3d;
  backface-visibility: hidden;
}

.pricing-table .holo-card .card-title.pt-3 {
  padding-top: .35rem !important;
  font-size: 1.05rem;
  letter-spacing: -.02em;
}

.pricing-table .holo-card .card-title.mb-0 {
  padding-top: 1rem !important;
  font-size: 2.45rem;
  line-height: 1;
  letter-spacing: -.055em;
  text-shadow: 0 3px 14px rgba(0,0,0,.12);
}

.pricing-table .holo-card .pricing-list {
  flex-grow: 1;
  margin-top: 1.35rem;
  margin-bottom: 1.5rem;
}

.pricing-table .holo-card .pricing-list li {
  margin-bottom: .72rem;
  font-size: .86rem;
  line-height: 1.4;
}

.pricing-table .holo-card .btn {
  position: relative;
  z-index: 6;
  transform: translateZ(8px);
  width: 72%;
  align-self: center;
  padding: .58rem .55rem;
  font-size: .8rem;
}

.pricing-table .holo-mint {
  --accent-rgb: 29, 233, 182;
}

.pricing-table .holo-rainbow {
  --accent-rgb: 97, 191, 238;
  --base-scale: 1;
  --hover-scale: 1.035;
  --current-scale: var(--base-scale);
  z-index: 3;
  border-color: rgba(97, 191, 238, .35);
  box-shadow: 0 22px 55px rgba(0, 150, 190, .12);
}

.pricing-table .holo-gold {
  --accent-rgb: 255, 184, 72;
}

.pricing-table .holo-violet {
  --accent-rgb: 178, 130, 255;
}

.pricing-table .holo-coming-soon .btn.disabled {
  pointer-events: none;
  opacity: .58;
}

.pricing-table .holo-badge {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 7;
  padding: 4px 8px;
  border: 1px solid rgba(255,255,255,.35);
  border-radius: 999px;
  color: #06120f;
  background: linear-gradient(110deg, #73f8d5, #7ccfff);
  box-shadow: 0 6px 20px rgba(29,233,182,.22);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .08em;
  transform: translateZ(34px);
}

html.theme-day .pricing-table .holo-card::before {
  filter: brightness(.88) contrast(1.08);
}

html.theme-day .pricing-table .holo-card.is-holo-active::after {
  opacity: .5;
}

@media (hover: none), (pointer: coarse) {
  .pricing-table .holo-card,
  .pricing-table .holo-rainbow {
    --current-scale: 1;
    transform: none;
  }

  .pricing-table .holo-card::before {
    inset: -2px;
    opacity: .16;
    animation: none;
    -webkit-mask-size: 35px auto;
    mask-size: 35px auto;
  }

  .pricing-table .holo-card::after {
    display: none;
  }

  .pricing-table .holo-card.is-holo-tap::before {
    opacity: .5;
  }
}

@media (max-width: 767.98px) {
  .pricing-table .card-deck {
    gap: 12px;
  }

  .pricing-table .card-deck > .pricing-tilt {
    flex-basis: calc(50% - 6px);
    max-width: calc(50% - 6px);
  }

  .pricing-table .pricing-tilt::part(container) {
    touch-action: pan-y;
  }

  .pricing-table .holo-card .card-body {
    padding: .72rem .52rem .58rem;
  }

  .pricing-table .holo-card .card-title.pt-3 {
    padding-top: .15rem !important;
    margin-bottom: .4rem;
    font-size: .84rem;
  }

  .pricing-table .holo-card .card-title.mb-0 {
    padding-top: .45rem !important;
    font-size: 1.72rem;
  }

  .pricing-table .holo-card .text-muted {
    margin-top: .35rem !important;
    font-size: .68rem;
  }

  .pricing-table .holo-card .pricing-list {
    margin-top: .62rem;
    margin-bottom: .68rem;
  }

  .pricing-table .holo-card .pricing-list li {
    margin-bottom: .34rem;
    font-size: .68rem;
    line-height: 1.2;
  }

  .pricing-table .holo-card .btn {
    width: 78%;
    padding: .4rem .2rem;
    font-size: .66rem;
  }
}

@keyframes materialMobileSweep {
  from { background-position: 15% 35%, center; }
  to { background-position: 85% 65%, center; }
}

@media (prefers-reduced-motion: reduce) {
  .pricing-table .holo-card,
  .pricing-table .holo-card::before,
  .pricing-table .holo-card::after {
    animation: none !important;
    transition: none !important;
    transform: none !important;
  }
}

/* Credit-card style pricing layout inspired by the provided reference. */
.pricing-table .holo-card {
  --card-bg-a: #c7f6dc;
  --card-bg-b: #55d66a;
  --card-bg-c: #f8fff0;
  --card-ink: #07110d;
  --card-muted: rgba(7, 17, 13, .58);
  border: 0;
  color: var(--card-ink);
  background:
    radial-gradient(circle at 18% 20%, rgba(255,255,255,.28), transparent 32%),
    linear-gradient(145deg, var(--card-bg-a) 0%, var(--card-bg-b) 56%, var(--card-bg-c) 100%);
  /* Directional contact shadow follows the same variables as the 3D card;
     the second, centered layer keeps a soft shadow under the full bottom edge. */
  box-shadow:
    var(--shadow-x) var(--shadow-y) 30px -10px rgba(0,0,0,.34),
    0 20px 42px -19px rgba(0,0,0,.30),
    inset 0 1px 0 rgba(255,255,255,.26);
}

.pricing-table .holo-card.is-holo-active {
  box-shadow:
    var(--shadow-x) var(--shadow-y) 34px -10px rgba(0,0,0,.44),
    0 23px 48px -20px rgba(0,0,0,.36),
    inset 0 1px 0 rgba(255,255,255,.28),
    0 0 35px rgba(var(--accent-rgb), .09);
}

.pricing-table .holo-card::before {
  /* Keep the foil on one card-sized compositing surface. Oversizing a blurred
     mixed-blend layer inside a 3D transform can show a rectangular GPU seam. */
  inset: 0;
  z-index: 8;
  display: block;
  opacity: var(--surface-shine-opacity, 0);
  background:
    linear-gradient(115deg,
      transparent 0%,
      rgba(255, 110, 205, .12) 18%,
      rgba(255, 230, 120, .22) 32%,
      rgba(120, 255, 220, .18) 46%,
      rgba(90, 176, 255, .2) 60%,
      rgba(188, 130, 255, .14) 76%,
      transparent 100%
    ),
    radial-gradient(
      farthest-corner circle at var(--surface-glare-x, 50%) var(--surface-glare-y, 50%),
      rgba(255, 255, 255, .28) 0%,
      rgba(255, 255, 255, .08) 28%,
      transparent 64%
    );
  /* Keep both films exactly card-sized. Moving an oversized background image
     leaves an L-shaped source edge under color-dodge on some GPU renderers. */
  background-size: 100% 100%, 100% 100%;
  background-repeat: no-repeat;
  background-position: center, center;
  -webkit-mask-image: none;
  mask-image: none;
  mix-blend-mode: color-dodge;
  filter: brightness(calc(.82 + var(--surface-from-center, 0) * .42)) contrast(1.35) saturate(1.12);
  pointer-events: none;
  backface-visibility: hidden;
  will-change: opacity;
  transition: filter .22s ease;
}

.pricing-table .holo-card::after {
  /* Same-size inner surface prevents the glare texture from being tiled while
     the card is strongly tilted. The parent already clips it to the card edge. */
  inset: 0;
  border-radius: inherit;
  z-index: 9;
  display: block;
  opacity: var(--surface-glare-opacity, 0);
  background-image:
    radial-gradient(
      farthest-corner circle at var(--surface-glare-x, 50%) var(--surface-glare-y, 50%),
      rgba(255, 255, 255, .42) 0%,
      rgba(255, 255, 255, .28) 18%,
      rgba(255, 255, 255, .08) 42%,
      rgba(0, 0, 0, .08) 74%,
      rgba(0, 0, 0, .24) 104%,
      rgba(0, 0, 0, .5) 145%
    );
  background-repeat: no-repeat;
  mix-blend-mode: hard-light;
  filter: brightness(.96) contrast(1.16) saturate(.95);
  pointer-events: none;
  backface-visibility: hidden;
  will-change: opacity;
  transition: filter .22s ease;
}

.pricing-table .holo-card.is-holo-active::before {
  opacity: var(--surface-shine-opacity, 0);
}

.pricing-table .holo-card.is-holo-active::after {
  opacity: var(--surface-glare-opacity, 0);
}

html.theme-day .pricing-table .holo-card.is-holo-active::before {
  opacity: var(--surface-shine-opacity, 0);
}

html.theme-day .pricing-table .holo-card.is-holo-active::after {
  opacity: var(--surface-glare-opacity, 0);
}

.pricing-table .holo-card .card-body {
  z-index: 5;
  justify-content: space-between;
  padding: 1rem 1rem .82rem;
  text-align: left;
  transform: translateZ(28px);
}

.pricing-table .plan-card-top {
  position: relative;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 28px;
  color: rgba(7, 17, 13, .56);
  font-size: .92rem;
  font-weight: 900;
  letter-spacing: .02em;
  text-transform: none;
}

.pricing-table .plan-card-top::before {
  content: "";
  position: absolute;
  inset: -2px 0;
  z-index: 2;
  opacity: 0;
  background:
    radial-gradient(circle at var(--pointer-x, 50%) var(--pointer-y, 50%),
      rgba(255,255,255,.65) 0%,
      rgba(255,255,255,.18) 18%,
      transparent 46%),
    conic-gradient(
      from var(--hover-tilt-angle, 215deg)
      at var(--gradient-x, 50%) var(--gradient-y, 50%),
      #f8b7ff 0deg,
      #9fe9ff 58deg,
      #a7ffd0 122deg,
      #fff0a6 184deg,
      #ffb8b8 248deg,
      #c7b7ff 304deg,
      #f8b7ff 360deg
    );
  background-size: 150% 150%, 180% 180%;
  background-position:
    calc(var(--hover-tilt-x, .5) * 100%) calc(var(--hover-tilt-y, .5) * 100%),
    calc((1 - var(--hover-tilt-x, .5)) * 100%) calc((1 - var(--hover-tilt-y, .5)) * 100%);
  -webkit-mask-image: url("../img/pricing-card-logo.png");
  mask-image: url("../img/pricing-card-logo.png");
  -webkit-mask-size: var(--brand-holo-logo-w, 34px) var(--brand-holo-logo-h, 27px);
  mask-size: var(--brand-holo-logo-w, 34px) var(--brand-holo-logo-h, 27px);
  -webkit-mask-position: right 50%;
  mask-position: right 50%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  mix-blend-mode: color-dodge;
  filter: saturate(1.18) brightness(1.04);
  pointer-events: none;
  transition: opacity .24s ease, filter .24s ease;
}

.pricing-table .plan-card-top > span:first-child {
  position: relative;
  z-index: 3;
  color: rgba(7, 17, 13, .56);
  background: none;
  transition: color .24s ease, filter .24s ease, text-shadow .24s ease;
}

.pricing-table .plan-card-top > span:first-child::after {
  content: attr(data-holo-text);
  position: absolute;
  inset: 0;
  z-index: 1;
  opacity: 0;
  color: transparent;
  background:
    radial-gradient(circle at var(--pointer-x, 50%) var(--pointer-y, 50%),
      rgba(255,255,255,.65) 0%,
      rgba(255,255,255,.18) 18%,
      transparent 46%),
    conic-gradient(
      from var(--hover-tilt-angle, 215deg)
      at var(--gradient-x, 50%) var(--gradient-y, 50%),
      #f8b7ff 0deg,
      #9fe9ff 58deg,
      #a7ffd0 122deg,
      #fff0a6 184deg,
      #ffb8b8 248deg,
      #c7b7ff 304deg,
      #f8b7ff 360deg
    );
  background-size:
    var(--brand-film-1-w, 364px) var(--brand-film-1-h, 510px),
    var(--brand-film-2-w, 494px) var(--brand-film-2-h, 692px);
  background-position:
    var(--brand-film-1-x, 0px) var(--brand-film-1-y, 0px),
    var(--brand-film-2-x, 0px) var(--brand-film-2-y, 0px);
  -webkit-background-clip: text;
  background-clip: text;
  mix-blend-mode: color-dodge;
  filter: contrast(1.12) saturate(1.16) brightness(1.04);
  pointer-events: none;
  transition: opacity .24s ease, filter .24s ease;
}

.pricing-table .holo-card.is-holo-active .plan-card-top > span:first-child,
.pricing-table .pricing-tilt:hover .plan-card-top > span:first-child {
  color: rgba(7, 17, 13, .58);
  filter: saturate(1.04) brightness(.96);
  text-shadow: 0 0 6px rgba(var(--accent-rgb), .04);
}

.pricing-table .holo-card.is-holo-active .plan-card-top > span:first-child::after,
.pricing-table .pricing-tilt:hover .plan-card-top > span:first-child::after {
  opacity: .24;
  filter: saturate(1.08) brightness(.94);
}

.pricing-table .holo-card.is-holo-active .plan-card-top::before,
.pricing-table .pricing-tilt:hover .plan-card-top::before {
  opacity: .72;
  filter: saturate(1.24) brightness(1.06);
}

.pricing-table .plan-card-logo-wrap {
  position: relative;
  display: block;
  z-index: 3;
  width: 34px;
  height: 27px;
  flex: 0 0 auto;
}

.pricing-table .plan-card-logo {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: .62;
  mix-blend-mode: multiply;
  transition: opacity .24s ease, filter .24s ease;
}

.pricing-table .holo-card.is-holo-active .plan-card-logo,
.pricing-table .pricing-tilt:hover .plan-card-logo {
  opacity: .42;
  filter: saturate(1.08) brightness(.94);
}

.pricing-table .plan-watermark {
  position: absolute;
  left: var(--card-watermark-left, 46%);
  top: var(--card-watermark-top, 46%);
  z-index: 2;
  width: var(--card-watermark-size, 145%);
  transform: translate(-50%, -50%) rotate(var(--card-watermark-rotate, 15deg)) translateZ(2px);
  pointer-events: none;
}

.pricing-table .plan-watermark img {
  display: block;
  width: 100%;
  height: auto;
  opacity: var(--card-watermark-opacity, .05);
  /* Do not soften the mark: on Safari a fractional blur becomes very visible
     after the card is promoted into a 3D compositing layer. */
  filter: none;
  mix-blend-mode: multiply;
  image-rendering: auto;
}

.pricing-table .plan-card-main {
  position: relative;
  z-index: 5;
  margin-top: auto;
  margin-bottom: .2rem;
}

.pricing-table .holo-card .card-title.pt-3 {
  padding-top: 0 !important;
  margin-bottom: .25rem;
  color: var(--card-ink);
  font-size: .92rem;
  font-weight: 900;
  letter-spacing: -.02em;
  text-shadow: none;
}

.pricing-table .plan-price {
  display: flex;
  align-items: flex-end;
  gap: .35rem;
  margin-bottom: .18rem;
}

.pricing-table .plan-price-value {
  color: var(--card-ink);
  font-size: 2.35rem;
  font-weight: 950;
  line-height: .92;
  letter-spacing: -.035em;
}

.pricing-table .plan-price-cycle {
  padding-bottom: .2rem;
  color: var(--card-muted);
  font-size: .72rem;
  font-weight: 850;
  letter-spacing: .01em;
}

.pricing-table .holo-card .pricing-list {
  position: relative;
  z-index: 5;
  flex-grow: 0;
  min-height: 92px;
  margin: .45rem 0 .95rem;
  padding: 0;
}

.pricing-table .holo-card .pricing-list li {
  margin-bottom: .34rem;
  color: rgba(7, 17, 13, .72);
  font-size: .7rem;
  font-weight: 780;
  line-height: 1.18;
}

.pricing-table .plan-card-bottom {
  position: relative;
  z-index: 6;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 34px;
  gap: .5rem;
  margin: 0 -1rem -.82rem;
  padding: .62rem .82rem .7rem;
  background: rgba(255, 250, 225, .9);
  /* The footer is a transformed child. Give it matching corners as a fallback
     for browsers that do not fully clip a 3D child to its parent's radius. */
  border-radius: 0 0 5% 5% / 0 0 3.6% 3.6%;
}

/* Browser-safe clipping for the translated content plane. This covers macOS
   Safari as well as mobile Safari, Chromium and Firefox. */
.pricing-table .holo-card .card-body {
  overflow: hidden;
  border-radius: inherit;
  clip-path: inset(0 round 5% / 3.6%);
  -webkit-mask-image: -webkit-radial-gradient(white, black);
}

.pricing-table .plan-code {
  color: rgba(7, 17, 13, .42);
  font-size: .62rem;
  font-weight: 850;
  letter-spacing: .02em;
  white-space: nowrap;
}

.pricing-table .holo-card .btn {
  width: auto;
  min-width: 56px;
  align-self: auto;
  padding: .34rem .56rem;
  border: 0;
  border-radius: 999px;
  color: #07110d;
  background: rgba(255,255,255,.48);
  box-shadow: inset 0 0 0 1px rgba(7,17,13,.12);
  font-size: .62rem;
  font-weight: 900;
  line-height: 1;
  transform: translateZ(8px);
}

.pricing-table .holo-card .btn:hover {
  color: #07110d;
  background: rgba(255,255,255,.72);
}

.pricing-table .holo-mint {
  --accent-rgb: 90, 214, 106;
  --card-bg-a: #bff6d9;
  --card-bg-b: #58d66a;
  --card-bg-c: #f2ffe6;
}

.pricing-table .holo-rainbow {
  --accent-rgb: 219, 238, 18;
  --card-bg-a: #e8ff16;
  --card-bg-b: #b6cd00;
  --card-bg-c: #ffff86;
}

.pricing-table .holo-gold {
  --accent-rgb: 255, 214, 88;
  --card-bg-a: #ffe05e;
  --card-bg-b: #ffd457;
  --card-bg-c: #fff59d;
}

.pricing-table .holo-violet {
  --accent-rgb: 195, 176, 235;
  --card-bg-a: #d6c7f2;
  --card-bg-b: #aa95db;
  --card-bg-c: #fbf2ff;
}

.pricing-table .holo-badge {
  top: 42px;
  right: 12px;
  padding: 3px 7px;
  border: 0;
  color: rgba(7, 17, 13, .66);
  background: rgba(255,255,255,.42);
  box-shadow: none;
  font-size: 8px;
  transform: translateZ(34px);
}

@media (hover: none), (pointer: coarse) {
  /* iOS rasterises transformed child layers separately. Keep the watermark
     crisp and clip the content layer itself so the footer cannot escape the
     rounded card corner as a square slab. */
  .pricing-table .plan-watermark img {
    filter: none;
    transform: translateZ(0);
  }

  .pricing-table .holo-card .card-body {
    overflow: hidden;
    border-radius: inherit;
    -webkit-mask-image: -webkit-radial-gradient(white, black);
  }

  .pricing-table .plan-card-bottom {
    border-radius: 0 0 5% 5% / 0 0 3.6% 3.6%;
  }

  .pricing-table .holo-card::before {
    opacity: .38;
    -webkit-mask-image: none;
    mask-image: none;
  }

  .pricing-table .holo-card.is-holo-tap::before {
    opacity: .55;
  }
}

@media (max-width: 767.98px) {
  .pricing-table .holo-card .card-body {
    padding: .72rem .68rem .56rem;
  }

  .pricing-table .plan-card-top {
    --brand-holo-text-w: 40px;
    --brand-holo-text-h: 17px;
    --brand-holo-logo-w: 27px;
    --brand-holo-logo-h: 22px;
    min-height: 22px;
    font-size: .7rem;
  }

  .pricing-table .plan-card-logo-wrap {
    width: 27px;
    height: 22px;
  }

  .pricing-table .holo-card .card-title.pt-3 {
    font-size: .7rem;
  }

  .pricing-table .plan-price-value {
    font-size: 1.55rem;
  }

  .pricing-table .plan-price-cycle {
    padding-bottom: .12rem;
    font-size: .55rem;
  }

  .pricing-table .holo-card .pricing-list {
    min-height: 68px;
    margin: .28rem 0 .46rem;
  }

  .pricing-table .holo-card .pricing-list li {
    margin-bottom: .22rem;
    font-size: .52rem;
    line-height: 1.12;
  }

  .pricing-table .plan-card-bottom {
    min-height: 28px;
    margin: 0 -.68rem -.56rem;
    padding: .48rem .58rem .52rem;
  }

  .pricing-table .plan-code {
    font-size: .46rem;
  }

  .pricing-table .holo-card .btn {
    min-width: 42px;
    padding: .28rem .38rem;
    font-size: .5rem;
  }

  .pricing-table .holo-badge {
    top: 34px;
    right: 9px;
    font-size: 7px;
  }
}

/* iPad mini starts at 768px: retain four cards, but compress only their
   internal typography and spacing so the 5:7 card never loses its footer. */
@media (min-width: 768px) and (max-width: 991.98px) {
  .pricing-table .holo-card .card-body {
    padding: .72rem .54rem .58rem;
  }

  .pricing-table .plan-card-top {
    --brand-holo-text-w: 42px;
    --brand-holo-text-h: 18px;
    --brand-holo-logo-w: 28px;
    --brand-holo-logo-h: 23px;
    min-height: 23px;
    font-size: .72rem;
  }

  .pricing-table .plan-card-logo-wrap {
    width: 28px;
    height: 23px;
  }

  .pricing-table .holo-card .card-title.pt-3 {
    margin-bottom: .28rem;
    font-size: .78rem;
  }

  .pricing-table .plan-price {
    gap: .24rem;
    margin-bottom: .12rem;
  }

  .pricing-table .plan-price-value {
    font-size: 1.65rem;
  }

  .pricing-table .plan-price-cycle {
    padding-bottom: .13rem;
    font-size: .56rem;
  }

  .pricing-table .holo-card .pricing-list {
    min-height: 67px;
    margin: .34rem 0 .5rem;
  }

  .pricing-table .holo-card .pricing-list li {
    margin-bottom: .23rem;
    font-size: .55rem;
    line-height: 1.12;
  }

  .pricing-table .plan-card-bottom {
    min-height: 28px;
    gap: .35rem;
    margin: 0 -.54rem -.58rem;
    padding: .47rem .52rem .52rem;
  }

  .pricing-table .plan-code {
    font-size: .49rem;
  }

  .pricing-table .holo-card .btn {
    min-width: 43px;
    padding: .28rem .4rem;
    font-size: .52rem;
  }
}

/* Click-to-expand 3D card viewer. */
body.card-popover-open {
  overflow: hidden;
}

.card-popover {
  position: fixed;
  inset: 0;
  z-index: 12000;
  opacity: 0;
  background: rgba(5, 10, 12, .18);
  -webkit-backdrop-filter: blur(0);
  backdrop-filter: blur(0);
  transition: opacity .32s ease, background .32s ease, backdrop-filter .32s ease;
}

.card-popover.is-open {
  opacity: 1;
  background: rgba(5, 10, 12, .78);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}

.card-popover-stage {
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(78vw, 380px);
  aspect-ratio: 5 / 7;
  perspective: 1100px;
  transform-style: preserve-3d;
  transform:
    translate(calc(-50% + var(--from-x)), calc(-50% + var(--from-y)))
    scale(var(--from-scale)) rotateY(-55deg) rotateX(10deg);
  opacity: .45;
  transition: transform .78s cubic-bezier(.16, 1, .3, 1), opacity .35s ease;
}

.card-popover.is-open .card-popover-stage {
  transform: translate(-50%, -50%) scale(1) rotateY(0) rotateX(0);
  opacity: 1;
}

.card-popover.is-closing {
  opacity: 0;
  pointer-events: none;
}

.card-popover.is-closing .card-popover-stage {
  transform: translate(-50%, -50%) scale(.72) rotateY(38deg) rotateX(-8deg);
  opacity: 0;
  transition-duration: .38s;
}

.card-popover-flipper {
  position: absolute;
  inset: 0;
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
  will-change: transform;
  transition: transform .82s cubic-bezier(.22, .61, .36, 1);
}

.card-popover-flipper.is-flipping {
  pointer-events: none;
}

.card-popover-flipper.is-flipped {
  -webkit-transform: translate3d(0, 0, 0) rotateY(180deg);
  transform: translate3d(0, 0, 0) rotateY(180deg);
}

.card-popover-face {
  position: absolute;
  inset: 0;
  border-radius: 5% / 3.6%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  /* Flatten each complete face into one composited plane. Safari otherwise
     promotes the card body's translateZ/glare layers independently and can
     keep one stale front-facing frame while the parent is turning. */
  transform-style: flat;
  -webkit-transform-style: flat;
  isolation: isolate;
  will-change: transform;
}

.card-popover-front {
  overflow: visible;
  visibility: visible;
  opacity: 1;
  -webkit-transform: rotateY(0deg) translateZ(.1px);
  transform: rotateY(0deg) translateZ(.1px);
}

.card-popover-front .pricing-tilt-expanded {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  transform: none;
}

.card-popover-front .pricing-tilt-expanded > .holo-card {
  width: 100%;
  height: 100%;
}

.card-popover-front .pricing-tilt-expanded .holo-card .card-body {
  padding:
    var(--detail-body-pad-top, 1.25rem)
    var(--detail-body-pad-right, 1.25rem)
    var(--detail-body-pad-bottom, 1rem)
    var(--detail-body-pad-left, 1.25rem);
  transform: translateZ(28px);
}

.card-popover-front .pricing-tilt-expanded .plan-card-top {
  --brand-holo-text-w: calc(var(--detail-top-font-size, 1.12rem) * 3.9);
  --brand-holo-text-h: calc(var(--detail-top-font-size, 1.12rem) * 1.35);
  --brand-holo-logo-w: var(--detail-logo-width, 46px);
  --brand-holo-logo-h: var(--detail-logo-height, 38px);
  min-height: var(--detail-top-min-height, 38px);
  font-size: var(--detail-top-font-size, 1.12rem);
}

.card-popover-front .pricing-tilt-expanded .plan-card-logo-wrap {
  width: var(--detail-logo-width, 46px);
  height: var(--detail-logo-height, 38px);
}

.card-popover-front .pricing-tilt-expanded .holo-card .card-title.pt-3 {
  margin-bottom: var(--detail-title-margin-bottom, .45rem);
  font-size: var(--detail-title-font-size, 1.12rem);
}

.card-popover-front .pricing-tilt-expanded .plan-price {
  gap: var(--detail-price-gap, .6rem);
  margin-bottom: var(--detail-price-margin-bottom, .35rem);
}

.card-popover-front .pricing-tilt-expanded .plan-price-value {
  font-size: var(--detail-price-font-size, 3.45rem);
}

.card-popover-front .pricing-tilt-expanded .plan-price-cycle {
  padding-bottom: var(--detail-cycle-pad-bottom, .32rem);
  font-size: var(--detail-cycle-font-size, .95rem);
}

.card-popover-front .pricing-tilt-expanded .holo-card .pricing-list {
  min-height: var(--detail-list-min-height, 122px);
  margin-top: var(--detail-list-margin-top, .68rem);
  margin-bottom: var(--detail-list-margin-bottom, .9rem);
}

.card-popover-front .pricing-tilt-expanded .holo-card .pricing-list li {
  margin-bottom: var(--detail-list-item-margin-bottom, .5rem);
  font-size: var(--detail-list-item-font-size, .9rem);
}

.card-popover-front .pricing-tilt-expanded .plan-card-bottom {
  min-height: var(--detail-bottom-min-height, 48px);
  gap: var(--detail-bottom-gap, .8rem);
  margin:
    var(--detail-bottom-margin-top, 0)
    var(--detail-bottom-margin-right, -1.2rem)
    var(--detail-bottom-margin-bottom, -1rem)
    var(--detail-bottom-margin-left, -1.2rem);
  padding:
    var(--detail-bottom-pad-top, .85rem)
    var(--detail-bottom-pad-right, 1rem)
    var(--detail-bottom-pad-bottom, .95rem)
    var(--detail-bottom-pad-left, 1rem);
}

.card-popover-front .pricing-tilt-expanded .plan-code {
  font-size: var(--detail-code-font-size, .8rem);
}

.card-popover-front .pricing-tilt-expanded .holo-card .btn {
  min-width: var(--detail-btn-min-width, 70px);
  padding:
    var(--detail-btn-pad-top, .46rem)
    var(--detail-btn-pad-right, .7rem)
    var(--detail-btn-pad-bottom, .46rem)
    var(--detail-btn-pad-left, .7rem);
  font-size: var(--detail-btn-font-size, .76rem);
}

.card-popover-front .pricing-tilt-expanded .holo-badge {
  top: var(--detail-badge-top, 48px);
  right: var(--detail-badge-right, 15px);
  font-size: var(--detail-badge-font-size, 10px);
}

.card-popover-back {
  overflow: hidden;
  visibility: visible;
  opacity: 1;
  color: #171b18;
  background: #fffdf6;
  box-shadow: 0 32px 90px rgba(0,0,0,.55);
  -webkit-transform: rotateY(180deg) translateZ(.1px);
  transform: rotateY(180deg) translateZ(.1px);
}

/* WebKit occasionally ignores backface-visibility for one compositor frame.
   Gate the two faces only while they are edge-on; the 3D rotation itself stays
   continuous, but the stale plane never has an opportunity to flash through. */
@keyframes ssrcat-front-to-back-front-face {
  0%, 18% { opacity: 1; }
  22%, 100% { opacity: 0; }
}

@keyframes ssrcat-front-to-back-back-face {
  0%, 18% { opacity: 0; }
  22%, 100% { opacity: 1; }
}

@keyframes ssrcat-back-to-front-front-face {
  0%, 18% { opacity: 0; }
  22%, 100% { opacity: 1; }
}

@keyframes ssrcat-back-to-front-back-face {
  0%, 18% { opacity: 1; }
  22%, 100% { opacity: 0; }
}

.card-popover-flipper.is-webkit-flip.is-flipping.is-flip-to-back .card-popover-front {
  animation: ssrcat-front-to-back-front-face .82s linear both;
}

.card-popover-flipper.is-webkit-flip.is-flipping.is-flip-to-back .card-popover-back {
  animation: ssrcat-front-to-back-back-face .82s linear both;
}

.card-popover-flipper.is-webkit-flip.is-flipping.is-flip-to-front .card-popover-front {
  animation: ssrcat-back-to-front-front-face .82s linear both;
}

.card-popover-flipper.is-webkit-flip.is-flipping.is-flip-to-front .card-popover-back {
  animation: ssrcat-back-to-front-back-face .82s linear both;
}

.card-popover-flipper.is-flip-settled.is-flipped .card-popover-front {
  visibility: hidden;
  pointer-events: none;
}

.card-popover-flipper.is-flip-settled:not(.is-flipped) .card-popover-back {
  visibility: hidden;
  pointer-events: none;
}

.sub-back-card {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  container-type: inline-size;
  overflow: hidden;
  border-radius: inherit;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  background: #fffdf6;
  box-shadow: inset 0 0 0 1px rgba(10, 15, 12, .07);
}

.sub-back-hero {
  position: relative;
  flex: 0 0 38%;
  overflow: hidden;
  border-radius: 18px;
  border-radius: clamp(12px, 4.74cqw, 18px);
  margin: 12px 12px 0;
  margin: clamp(8px, 3.16cqw, 12px) clamp(8px, 3.16cqw, 12px) 0;
  background:
    linear-gradient(180deg, rgba(255,255,255,.3), transparent 42%),
    radial-gradient(circle at 22% 22%, rgba(255,255,255,.45), transparent 36%),
    linear-gradient(135deg, #bff6d9 0%, #58d66a 58%, #f8ff9f 100%);
}

.sub-back-theme-basic .sub-back-hero {
  background:
    linear-gradient(180deg, rgba(255,255,255,.3), transparent 42%),
    radial-gradient(circle at 22% 22%, rgba(255,255,255,.45), transparent 36%),
    linear-gradient(135deg, #bff6d9 0%, #58d66a 58%, #f2ffe6 100%);
}

.sub-back-theme-premium .sub-back-hero {
  background:
    linear-gradient(180deg, rgba(255,255,255,.28), transparent 42%),
    radial-gradient(circle at 22% 22%, rgba(255,255,255,.45), transparent 36%),
    linear-gradient(135deg, #e8ff16 0%, #b6cd00 52%, #ffff86 100%);
}

.sub-back-theme-usage .sub-back-hero {
  background:
    linear-gradient(180deg, rgba(255,255,255,.28), transparent 42%),
    radial-gradient(circle at 22% 22%, rgba(255,255,255,.48), transparent 36%),
    linear-gradient(135deg, #ffe05e 0%, #ffd457 52%, #fff59d 100%);
}

.sub-back-theme-soon .sub-back-hero {
  background:
    linear-gradient(180deg, rgba(255,255,255,.28), transparent 42%),
    radial-gradient(circle at 22% 22%, rgba(255,255,255,.42), transparent 36%),
    linear-gradient(135deg, #d6c7f2 0%, #aa95db 54%, #fbf2ff 100%);
}

.sub-back-hero::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 38%;
  background: linear-gradient(180deg, transparent, rgba(0,0,0,.38));
}

.sub-back-pill {
  position: absolute;
  top: 12px;
  top: clamp(8px, 3.16cqw, 12px);
  left: 12px;
  left: clamp(8px, 3.16cqw, 12px);
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  gap: clamp(3px, 1.32cqw, 5px);
  padding: 7px 12px;
  padding: clamp(5px, 1.84cqw, 7px) clamp(8px, 3.16cqw, 12px);
  border-radius: 999px;
  color: rgba(20, 24, 20, .78);
  background: rgba(255,255,255,.82);
  box-shadow: 0 8px 20px rgba(0,0,0,.1);
  font-size: .72rem;
  font-size: clamp(.58rem, 3.03cqw, .72rem);
  font-weight: 900;
}

.sub-back-pill .sub-back-diamond {
  color: #ffca2d;
  font-size: .7rem;
  font-size: clamp(.56rem, 2.95cqw, .7rem);
}

.sub-back-watermark {
  position: absolute;
  left: 50%;
  top: 53%;
  width: 82%;
  height: auto;
  opacity: .18;
  filter: none;
  mix-blend-mode: multiply;
  transform: translate(-50%, -50%) rotate(-8deg);
}

.sub-back-body {
  display: flex;
  flex: 1;
  min-height: 0;
  flex-direction: column;
  padding: 11px 16px 11px;
  padding: clamp(7px, 2.9cqw, 11px) clamp(11px, 4.21cqw, 16px);
}

.sub-back-heading {
  flex: 0 0 auto;
  padding-bottom: 8px;
  padding-bottom: clamp(5px, 2.1cqw, 8px);
  border-bottom: 1px solid rgba(16, 20, 17, .08);
}

.sub-back-heading strong {
  display: block;
  color: #181d19;
  font-size: 1.05rem;
  font-size: clamp(.82rem, 4.42cqw, 1.05rem);
  line-height: 1.12;
  letter-spacing: -.04em;
}

.sub-back-heading span {
  display: block;
  margin-top: 4px;
  margin-top: clamp(2px, 1.05cqw, 4px);
  color: rgba(24, 29, 25, .48);
  font-size: .66rem;
  font-size: clamp(.52rem, 2.78cqw, .66rem);
  font-weight: 800;
}

.sub-back-offer {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  flex: 1 1 0;
  min-height: 0;
  gap: 10px;
  gap: clamp(6px, 2.63cqw, 10px);
  align-items: center;
  padding: 3px 0;
  border-bottom: 1px solid rgba(16, 20, 17, .08);
}

.sub-back-offer:last-of-type {
  border-bottom: 0;
}

.sub-back-plan-label {
  display: flex;
  align-items: center;
  gap: 6px;
  gap: clamp(4px, 1.58cqw, 6px);
  min-width: 0;
}

.sub-back-plan-label strong {
  display: block;
  color: #1c221d;
  flex: 0 0 auto;
  max-width: 100%;
  overflow: hidden;
  font-size: .92rem;
  font-size: clamp(.7rem, 3.87cqw, .92rem);
  line-height: 1.1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sub-back-price {
  text-align: right;
}

.sub-back-price strong {
  display: block;
  color: #111611;
  font-size: 1.1rem;
  font-size: clamp(.86rem, 4.63cqw, 1.1rem);
  line-height: .95;
  letter-spacing: -.05em;
}

.sub-back-price span {
  display: block;
  margin-top: 4px;
  margin-top: clamp(2px, 1.05cqw, 4px);
  color: rgba(24, 29, 25, .45);
  font-size: .6rem;
  font-size: clamp(.46rem, 2.53cqw, .6rem);
  font-weight: 900;
  line-height: 1.1;
  white-space: nowrap;
}

.sub-back-offer-primary .sub-back-price strong {
  color: #0f9f7e;
}

.sub-back-theme-usage .sub-back-offer {
  grid-template-columns: minmax(0, 1fr);
  align-content: center;
  align-items: start;
  gap: 0;
}

.sub-back-theme-usage .sub-back-price {
  margin-top: 8px;
  margin-top: clamp(5px, 2.1cqw, 8px);
  text-align: left;
}

.sub-back-hint {
  flex: 0 0 auto;
  margin-top: auto;
  padding-top: 8px;
  padding-top: clamp(4px, 2.1cqw, 8px);
  color: rgba(24, 29, 25, .38);
  font-size: .58rem;
  font-size: clamp(.46rem, 2.44cqw, .58rem);
  font-weight: 800;
  text-align: center;
}

.card-popover-close {
  position: absolute;
  top: max(18px, env(safe-area-inset-top));
  right: max(18px, env(safe-area-inset-right));
  width: 42px;
  height: 42px;
  padding: 0;
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 50%;
  color: #fff;
  background: rgba(255,255,255,.08);
  font-size: 28px;
  line-height: 38px;
  cursor: pointer;
  outline: none;
  transition: background .2s ease, transform .2s ease;
}

.card-popover-flip {
  position: absolute;
  top: max(18px, env(safe-area-inset-top));
  right: max(70px, calc(env(safe-area-inset-right) + 52px));
  width: 42px;
  height: 42px;
  padding: 0;
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 50%;
  color: #fff;
  background: rgba(255,255,255,.08);
  font-size: 25px;
  line-height: 40px;
  cursor: pointer;
  outline: none;
  transition: background .2s ease, transform .35s cubic-bezier(.16, 1, .3, 1);
}

.card-popover-flip:hover,
.card-popover-flip:focus-visible,
.card-popover-flip[aria-pressed="true"] {
  background: rgba(255,255,255,.18);
}

.card-popover-flip:hover,
.card-popover-flip:focus-visible {
  transform: rotate(180deg);
}

.card-popover-close:hover,
.card-popover-close:focus-visible {
  background: rgba(255,255,255,.18);
  transform: rotate(90deg);
}

@media (max-width: 767.98px) {
  .card-popover-stage {
    width: min(82vw, 350px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .card-popover,
  .card-popover-stage,
  .card-popover-flipper {
    transition-duration: .01ms !important;
  }
}

/* Reduce browser/plugin hover-image preview triggers without changing layout. */
img[data-ssrcat-image-shield] {
  pointer-events: none;
  -webkit-user-drag: none;
  -webkit-touch-callout: none;
  user-select: none;
}