/* ===========================================================================
   Why choose DeX - layered stage console.

   Assembled from layered Figma exports: Slider-N.svg is the deck (three
   stacked sheets, transparent, no popups baked in) and every popup card is its
   own transparent SVG, so the panel background stays fixed while only the deck
   turns and the popups ease in on their own timing.
   =========================================================================== */

.rt-choose-us-v1 {
  width: 100%;
  padding: clamp(44px, 5vw, 76px) 0 clamp(72px, 8vw, 124px);
  overflow: hidden;
  background:
    radial-gradient(circle at 9% 16%, rgba(96, 177, 255, 0.28), transparent 28%),
    radial-gradient(circle at 91% 82%, rgba(var(--dex-yellow-rgb), 0.18), transparent 24%),
    radial-gradient(circle, rgba(255, 255, 255, 0.075) 1px, transparent 1.3px) 0 0 / 24px 24px,
    linear-gradient(145deg, #1e40af 0%, #2451bd 58%, #2f6cdf 100%);
}

.rt-choose-us-v1 .rt-container {
  width: min(100%, 1760px);
  max-width: 1760px;
  padding-right: clamp(14px, 2.2vw, 40px);
  padding-left: clamp(14px, 2.2vw, 40px);
}

.dex-choose-v2 {
  position: relative;
}

.dex-choose-v2-heading {
  display: grid;
  justify-items: center;
  max-width: 820px;
  margin: 0 auto clamp(34px, 4.4vw, 62px);
  text-align: center;
}

.dex-choose-v2-heading > p {
  margin: 0 0 13px;
  color: var(--dex-yellow);
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0.13em;
  line-height: 1.2;
  text-transform: uppercase;
}

.dex-choose-v2-heading > h2 {
  max-width: 780px;
  margin: 0;
  color: #ffffff;
  font-size: clamp(40px, 5.2vw, 70px);
  font-weight: 800;
  letter-spacing: -0.045em;
  line-height: 0.98;
  text-wrap: balance;
}

.dex-choose-v2-heading > h2 .rt-heading-gradient {
  background-image: linear-gradient(90deg, #93c5fd 0%, #d7e8ff 34%, #fbbf24 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.dex-choose-v2-heading > span {
  max-width: 690px;
  margin-top: 20px;
  color: rgba(255, 255, 255, 0.76);
  font-size: clamp(16px, 1.35vw, 19px);
  line-height: 1.6;
  text-wrap: balance;
}

.dex-choose-v2-showcase {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(var(--dex-blue-rgb), 0.11);
  border-radius: clamp(26px, 3vw, 44px);
  /* Matched to the stage screenshots' own baked background - sampled off the
     PNGs: a flat #f2f6fb carrying a 20px dot grid in #cddedf, with transparent
     corners. The panel used to be a cyan-white gradient on a 16px blue grid,
     so every poster sat on a visibly different surface and its rounded corners
     let the section colour through. One continuous background means only the
     dashboard reads as moving. */
  background:
    radial-gradient(circle, #cddedf 1px, transparent 1.3px) 0 0 / 20px 20px,
    /* The blue rising out of the panel's bottom edge. Sampled straight off the
       original artwork - identical down the left and right edges, so it is a
       plain vertical rise across the full width, with the deck covering the
       middle of it. Stops are the solved alpha of #2864EA over #f2f6fb at each
       depth, which is why the ramp accelerates rather than being linear. */
    linear-gradient(
      180deg,
      rgba(40, 100, 234, 0) 52%,
      rgba(40, 100, 234, 0.155) 66%,
      rgba(40, 100, 234, 0.353) 73.5%,
      rgba(40, 100, 234, 0.551) 81.5%,
      rgba(40, 100, 234, 0.744) 89%,
      rgba(40, 100, 234, 0.887) 94.5%,
      rgba(40, 100, 234, 1) 100%
    ),
    #f2f6fb;
  background-origin: padding-box, border-box, padding-box;
  background-repeat: repeat, no-repeat, repeat;
  box-shadow: 0 30px 80px rgba(17, 47, 111, 0.12);
  /* Tighter perspective than before: 1800px across a ~1200px stage barely
     foreshortens. The reference uses 2000px across a 720px card, a far
     stronger ratio, which is why its deck reads as a solid object in space. */
  perspective: 1250px;
  perspective-origin: 50% 45%;
}

.dex-choose-v2-tabs-wrap {
  position: relative;
  z-index: 4;
  padding: clamp(24px, 2.9vw, 44px) clamp(20px, 4vw, 66px) clamp(12px, 1.5vw, 20px);
}

.dex-choose-v2-tabs {
  display: flex;
  flex-wrap: nowrap;
  gap: clamp(18px, 2.2vw, 38px);
  align-items: center;
  justify-content: center;
}

.dex-choose-v2-mobile-label {
  display: none;
}

.dex-choose-v2-tab {
  position: relative;
  flex: 0 0 auto;
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: center;
  min-width: 0;
  padding: 6px 6px;
  border: 0;
  color: #7c8ea3;
  background: transparent;
  font: inherit;
  cursor: pointer;
  transition: color 240ms ease, transform 240ms ease;
}

.dex-choose-v2-tab::after {
  content: "";
  position: absolute;
  top: 50%;
  right: calc(-1 * clamp(18px, 2.2vw, 38px) - 3px);
  width: clamp(18px, 2.2vw, 38px);
  height: 2px;
  border-radius: 999px;
  background:
    linear-gradient(
      90deg,
      var(--dex-blue) 0 var(--dex-choose-fill, 0%),
      #cbd7dd var(--dex-choose-fill, 0%) 100%
    );
  transform: translateY(-50%);
  transition: transform 240ms ease;
}

.dex-choose-v2-tab:last-child::after,
.dex-choose-v2-tab:last-child::before {
  display: none;
}

.dex-choose-v2-tab::before {
  content: "";
  position: absolute;
  top: 50%;
  right: calc(-1 * clamp(18px, 2.2vw, 38px) - 3px);
  z-index: 1;
  width: 5px;
  height: 5px;
  border-top: 2px solid #cbd7dd;
  border-right: 2px solid #cbd7dd;
  transform: translateY(-50%) rotate(45deg);
  transition: border-color 240ms ease;
}

.dex-choose-v2-tab.is-complete::before,
.dex-choose-v2-tab.is-current::before {
  border-top-color: var(--dex-blue);
  border-right-color: var(--dex-blue);
}

.dex-choose-v2-tab > i {
  display: grid;
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  place-items: center;
  border-radius: 8px;
  color: currentColor;
}

.dex-choose-v2-tab > i img {
  width: 19px;
  height: 19px;
  /* The workflow icons are authored in DeX blue; grey them back for stages that
     are not live so the rail reads as a sequence with one active step. */
  opacity: 0.55;
  filter: grayscale(1);
  transition: opacity 240ms ease, filter 240ms ease;
}

.dex-choose-v2-tab.is-current > i img,
.dex-choose-v2-tab.is-complete > i img {
  opacity: 1;
  filter: none;
}

.dex-choose-v2-tab svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
}

.dex-choose-v2-tab > span {
  min-width: 0;
  font-size: clamp(9.5px, 0.82vw, 13px);
  font-weight: 800;
  letter-spacing: 0.06em;
  line-height: 1.2;
  text-transform: uppercase;
  white-space: nowrap;
}

.dex-choose-v2-tab.is-complete,
.dex-choose-v2-tab.is-current {
  color: var(--dex-blue);
}

.dex-choose-v2-tab.is-current {
  color: var(--dex-blue);
}

.dex-choose-v2-tab.is-current > i {
  color: var(--dex-blue);
  background: transparent;
  box-shadow: none;
}

.dex-choose-v2-tab:hover,
.dex-choose-v2-tab:focus-visible {
  color: var(--dex-blue-dark);
  outline: none;
}

.dex-choose-v2-tab:focus-visible > i {
  box-shadow: 0 0 0 3px #fff, 0 0 0 6px rgba(var(--dex-blue-rgb), 0.32);
}

.dex-choose-v2-stage-stack {
  position: relative;
  z-index: 2;
  width: calc(100% - clamp(20px, 3vw, 48px));
  aspect-ratio: 1600 / 699;
  margin: 0 auto;
  overflow: visible;
  border-radius: 0 0 clamp(18px, 2.4vw, 34px) clamp(18px, 2.4vw, 34px);
  isolation: isolate;
}

.dex-choose-v2-stage-stack::before,
.dex-choose-v2-stage-stack::after {
  content: "";
  display: none;
  position: absolute;
  top: 8%;
  left: 20.45%;
  width: 61.2%;
  height: 92%;
  border: 1px solid rgba(var(--dex-blue-rgb), 0.16);
  border-radius: clamp(18px, 2.4vw, 34px);
  background: linear-gradient(145deg, #ffffff 0%, #e3f1fa 100%);
  box-shadow: 0 16px 34px rgba(31, 45, 64, 0.13);
  transition: transform 1s ease-in-out, clip-path 1s ease-in-out, opacity 1s ease-in-out;
  pointer-events: none;
}

.dex-choose-v2-stage-stack::before {
  z-index: 4;
  opacity: 0.72;
}

.dex-choose-v2-stage-stack::after {
  z-index: 5;
  opacity: 0.94;
}

.dex-choose-v2-stage-stack[data-tilt="left"]::before {
  clip-path: inset(0 calc(100% - 34px) 0 0 round clamp(18px, 2.4vw, 34px));
  transform: translate3d(-24px, 14px, 0) rotate(-1.35deg);
}

.dex-choose-v2-stage-stack[data-tilt="left"]::after {
  clip-path: inset(0 calc(100% - 22px) 0 0 round clamp(18px, 2.4vw, 34px));
  transform: translate3d(-12px, 7px, 0) rotate(-0.7deg);
}

.dex-choose-v2-stage-stack[data-tilt="right"]::before {
  clip-path: inset(0 0 0 calc(100% - 34px) round clamp(18px, 2.4vw, 34px));
  transform: translate3d(24px, 14px, 0) rotate(1.35deg);
}

.dex-choose-v2-stage-stack[data-tilt="right"]::after {
  clip-path: inset(0 0 0 calc(100% - 22px) round clamp(18px, 2.4vw, 34px));
  transform: translate3d(12px, 7px, 0) rotate(0.7deg);
}

.dex-choose-v2-poster {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 3;
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: visible;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  isolation: isolate;
  transform-style: preserve-3d;
  transition: transform 1s ease-in-out, box-shadow 1s ease-in-out;
  will-change: transform;
}

.dex-choose-v2-poster[data-tilt="left"] {
  transform: translateZ(34px) rotateX(3.2deg) rotateY(-11deg) rotateZ(-0.9deg);
  box-shadow: none;
}

.dex-choose-v2-poster[data-tilt="right"] {
  transform: translateZ(34px) rotateX(3.2deg) rotateY(11deg) rotateZ(0.9deg);
  box-shadow: none;
}

.dex-choose-v2-poster:focus-visible {
  outline: 3px solid var(--dex-yellow);
  outline-offset: 4px;
}

.dex-choose-v2-scene {
  position: absolute;
  inset: 0;
  z-index: 1;
  opacity: 0;
  transform: translate3d(0, 2.4%, -70px) scale(0.968);
  transition:
    opacity 240ms linear,
    transform 1s cubic-bezier(0.22, 1, 0.36, 1);
  pointer-events: none;
}

.dex-choose-v2-scene.is-active {
  z-index: 2;
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
  /* Held back so the deck is already turning before the page appears. */
  transition:
    opacity 240ms linear 150ms,
    transform 1s cubic-bezier(0.22, 1, 0.36, 1);
}

.dex-choose-v2-scene.is-entering.is-from-right { opacity: 0; transform: translate3d(1.2%, 2.4%, -70px) scale(0.968); }

.dex-choose-v2-scene.is-entering.is-from-left { opacity: 0; transform: translate3d(-1.2%, 2.4%, -70px) scale(0.968); }

.dex-choose-v2-scene.is-leaving.is-to-left { opacity: 0; transform: translate3d(-1.6%, 1.4%, -90px) scale(0.978); }

.dex-choose-v2-scene.is-leaving.is-to-right { opacity: 0; transform: translate3d(1.6%, 1.4%, -90px) scale(0.978); }

.dex-choose-v2-deck {
  position: absolute;
  top: 5%;
  left: 50%;
  z-index: 1;
  display: block;
  width: auto;
  height: 90%;
  max-width: none;
  transform: translateX(-50%);
  -webkit-mask-image: linear-gradient(180deg, #000 88%, rgba(0, 0, 0, 0) 100%);
  mask-image: linear-gradient(180deg, #000 88%, rgba(0, 0, 0, 0) 100%);
}

.dex-choose-v2-popup {
  position: absolute;
  z-index: 3;
  display: block;
  height: auto;
  max-width: none;
  aspect-ratio: var(--popup-ratio, 1.4);
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 500ms cubic-bezier(0.34, 1.56, 0.64, 1), transform 500ms cubic-bezier(0.34, 1.56, 0.64, 1);
  pointer-events: none;
}

.dex-choose-v2-scene.is-active .dex-choose-v2-popup {
  opacity: 1;
  transform: translateY(0);
  /* site-config.js works the delay out per side: left from 200ms, right from
     800ms, 200ms apart within each. */
  transition-delay: var(--popup-delay, 200ms);
}

.dex-choose-v2-scene:not(.is-active) .dex-choose-v2-popup {
  transition-delay: 0ms;
  transition-duration: 260ms;
}

.dex-choose-v2-popup {
  width: calc(var(--popup-w, 400) / 1309 * 68%);
}

.dex-choose-v2-popup.is-left { left: 0;   top: 38%; }

.dex-choose-v2-popup.is-left-top { left: 0;   top: 22%; }

.dex-choose-v2-popup.is-left-bottom { left: 0;   top: 56%; }

.dex-choose-v2-popup.is-right { right: 0;  top: 32%; }

.dex-choose-v2-popup.is-right-top { right: 0;  top: 26%; }

.dex-choose-v2-popup.is-right-bottom { right: 0;  top: 58%; }

.dex-choose-v2-popup.is-right-wide { right: 0;  bottom: 12%; }

@media (prefers-reduced-motion: reduce) {
.dex-choose-v2-popup { opacity: 1; transform: none; transition: none; }
}

.dex-choose-v2-glow {
  position: absolute;
  top: -30%;
  left: -16%;
  z-index: 3;
  width: 18%;
  height: 160%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.42), transparent);
  filter: blur(10px);
  opacity: 0;
  transform: rotate(8deg);
  pointer-events: none;
}

.dex-choose-v2-poster:hover .dex-choose-v2-glow {
  animation: dexChooseV2Sweep 1.2s ease-out;
}

.dex-choose-v2-caption {
  /* The reference frame ends at the deck - no caption strip inside the panel.
     Kept in the DOM so the live region still announces the stage. */
  display: none;
  position: relative;
  z-index: 3;
  grid-template-columns: minmax(0, 1fr);
  gap: 28px;
  align-items: end;
  padding: clamp(24px, 3vw, 42px) clamp(24px, 4vw, 64px) clamp(28px, 3.6vw, 52px);
}

.dex-choose-v2-caption > div:first-child {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: 14px;
  align-items: baseline;
  max-width: 820px;
}

.dex-choose-v2-caption span {
  grid-row: 1 / span 2;
  color: var(--dex-blue);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.12em;
  line-height: 1.4;
}

.dex-choose-v2-caption strong {
  color: #102451;
  font-size: clamp(20px, 2vw, 29px);
  font-weight: 800;
  line-height: 1.15;
}

.dex-choose-v2-caption p {
  max-width: 690px;
  margin: 7px 0 0;
  color: #526079;
  font-size: clamp(13px, 1.15vw, 16px);
  line-height: 1.5;
}

@media screen and (max-width: 991px) {
.dex-choose-v2-heading {
    max-width: 720px;
  }
.dex-choose-v2-tabs-wrap {
    overflow-x: auto;
    scrollbar-width: none;
    overscroll-behavior-inline: contain;
  }
.dex-choose-v2-tabs-wrap::-webkit-scrollbar {
    display: none;
  }
.dex-choose-v2-tabs {
    min-width: 700px;
  }
.dex-choose-v2-caption {
    grid-template-columns: minmax(0, 1fr) 150px;
  }
}

@media screen and (max-width: 767px) {
.rt-choose-us-v1 {
    padding: 48px 0 72px;
  }
.rt-choose-us-v1 .rt-container {
    padding-right: 14px;
    padding-left: 14px;
  }
.dex-choose-v2-heading {
    justify-items: center;
    margin-bottom: 30px;
    padding: 0 6px;
    text-align: center;
  }
.dex-choose-v2-heading > p {
    margin-bottom: 10px;
    font-size: 11px;
  }
.dex-choose-v2-heading > h2 {
    max-width: 360px;
    font-size: clamp(34px, 10.4vw, 44px);
    line-height: 1.02;
    text-wrap: pretty;
  }
.dex-choose-v2-heading > span {
    margin-top: 16px;
    font-size: 14px;
    line-height: 1.55;
    text-wrap: pretty;
  }
.dex-choose-v2-showcase {
    overflow: hidden;
    border: 1px solid rgba(var(--dex-blue-rgb), 0.12);
    border-radius: 24px;
    background:
      radial-gradient(circle, #cddedf 1px, transparent 1.3px) 0 0 / 16px 16px,
      linear-gradient(
        180deg,
        rgba(40, 100, 234, 0) 52%,
        rgba(40, 100, 234, 0.155) 66%,
        rgba(40, 100, 234, 0.353) 73.5%,
        rgba(40, 100, 234, 0.551) 81.5%,
        rgba(40, 100, 234, 0.744) 89%,
        rgba(40, 100, 234, 0.887) 94.5%,
        rgba(40, 100, 234, 1) 100%
      ),
      #f2f6fb;
    background-origin: padding-box, border-box, padding-box;
    background-repeat: repeat, no-repeat, repeat;
    box-shadow: 0 22px 46px rgba(1, 13, 43, 0.24);
  }
.dex-choose-v2-tabs-wrap {
    overflow: visible;
    padding: 22px 18px 8px;
  }
.dex-choose-v2-tabs {
    min-width: 0;
    gap: 7px;
  }
.dex-choose-v2-tab {
    display: block;
    height: 24px;
    padding: 0;
  }
.dex-choose-v2-tab::after {
    top: auto;
    right: 0;
    bottom: 8px;
    width: 100%;
    height: 4px;
    background: rgba(var(--dex-blue-rgb), 0.12);
    transform: none;
  }
.dex-choose-v2-tab:last-child::after {
    display: block;
  }
.dex-choose-v2-tab > i,
  .dex-choose-v2-tab > span {
    display: none;
  }
.dex-choose-v2-tab.is-complete::after,
  .dex-choose-v2-tab.is-current::after {
    background: var(--dex-yellow);
  }
.dex-choose-v2-tab.is-current {
    transform: none;
  }
.dex-choose-v2-tab:focus-visible {
    border-radius: 8px;
    outline: 2px solid #ffffff;
    outline-offset: 1px;
  }
.dex-choose-v2-mobile-label {
    display: block;
    margin: 8px 0 2px;
    color: var(--dex-blue);
    font-size: 18px;
    font-weight: 850;
    letter-spacing: 0.035em;
  }
.dex-choose-v2-stage-stack {
    width: 100%;
    aspect-ratio: 1180 / 720;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }
.dex-choose-v2-stage-stack::before,
  .dex-choose-v2-stage-stack::after {
    top: 16%;
    left: 20.45%;
    z-index: 0;
    width: 61.2%;
    height: 56%;
    clip-path: none !important;
  }
.dex-choose-v2-stage-stack::after {
    z-index: 1;
  }
.dex-choose-v2-stage-stack[data-tilt="left"]::before {
    transform: translate3d(-12px, 10px, 0) rotate(-2deg);
  }
.dex-choose-v2-stage-stack[data-tilt="left"]::after {
    transform: translate3d(-6px, 5px, 0) rotate(-1deg);
  }
.dex-choose-v2-stage-stack[data-tilt="right"]::before {
    transform: translate3d(12px, 10px, 0) rotate(2deg);
  }
.dex-choose-v2-stage-stack[data-tilt="right"]::after {
    transform: translate3d(6px, 5px, 0) rotate(1deg);
  }
.dex-choose-v2-poster {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }
.dex-choose-v2-poster[data-tilt="left"] {
    transform: translateZ(18px) rotateX(2.6deg) rotateY(-9deg) rotateZ(-1.15deg);
    box-shadow: none;
  }
.dex-choose-v2-poster[data-tilt="right"] {
    transform: translateZ(18px) rotateX(2.6deg) rotateY(9deg) rotateZ(1.15deg);
    box-shadow: none;
  }
.dex-choose-v2-deck {
    top: 50%;
    width: 96%;
    height: auto;
    transform: translate(-50%, -50%);
  }
.dex-choose-v2-popup {
    width: calc(var(--popup-w, 400) / 1309 * 92%);
  }
.dex-choose-v2-popup.is-left { left: -2%;  top: 30%; }
.dex-choose-v2-popup.is-left-top { left: -2%;  top: 16%; }
.dex-choose-v2-popup.is-left-bottom { left: -2%;  top: 54%; }
.dex-choose-v2-popup.is-right { right: -2%; top: 26%; }
.dex-choose-v2-popup.is-right-top { right: -2%; top: 20%; }
.dex-choose-v2-popup.is-right-bottom { right: -2%; top: 58%; }
.dex-choose-v2-popup.is-right-wide { right: -2%; bottom: 6%; }
.dex-choose-v2-float-card {
    width: var(--mobile-card-width);
    border-radius: 12px;
  }
.dex-choose-v2-float-card.is-left,
  .dex-choose-v2-float-card.is-left-top {
    top: 48%;
    left: -1%;
  }
.dex-choose-v2-float-card.is-left-top {
    top: 35%;
  }
.dex-choose-v2-float-card.is-left-bottom {
    top: 62%;
    left: -1%;
  }
.dex-choose-v2-float-card.is-right,
  .dex-choose-v2-float-card.is-right-wide,
  .dex-choose-v2-float-card.is-right-top,
  .dex-choose-v2-float-card.is-right-bottom {
    right: -1%;
    bottom: 4%;
  }
.dex-choose-v2-float-card.is-right-top {
    top: 48%;
    bottom: auto;
  }
.dex-choose-v2-float-card.is-right-bottom {
    right: 4%;
    bottom: 5%;
  }
.dex-choose-v2-float-card.is-right-wide {
    right: -2%;
    bottom: 3%;
  }
.dex-choose-v2-image.is-entering.is-from-right,
  .dex-choose-v2-image.is-leaving.is-to-right {
    transform: translate3d(4%, -25%, 10px) rotate(1deg) scale(0.98);
  }
.dex-choose-v2-image.is-entering.is-from-left,
  .dex-choose-v2-image.is-leaving.is-to-left {
    transform: translate3d(-4%, 25%, 10px) rotate(-1deg) scale(0.98);
  }
.dex-choose-v2-caption {
    display: block;
    margin: -78px 0 0;
    padding: 30px 20px 22px;
    border-top: 1px solid rgba(var(--dex-blue-rgb), 0.1);
    border-radius: 0;
    background: rgba(255, 255, 255, 0.96);
    box-shadow: none;
  }
.dex-choose-v2-caption > div:first-child {
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: 10px;
  }
.dex-choose-v2-caption span {
    font-size: 9px;
  }
.dex-choose-v2-caption strong {
    display: none;
  }
.dex-choose-v2-caption p {
    min-height: 63px;
    margin-top: 6px;
    font-size: 13px;
  }
.dex-choose-v2-progress {
    margin-top: 18px;
  }
}

@media (prefers-reduced-motion: reduce) {
.dex-choose-v2-image,
  .dex-choose-v2-tab,
  .dex-choose-v2-poster,
  .dex-choose-v2-floats,
  .dex-choose-v2-float-card,
  .dex-choose-v2-stage-stack::before,
  .dex-choose-v2-stage-stack::after {
    transition: none;
  }
.dex-choose-v2-progress > i,
  .dex-choose-v2-poster:hover .dex-choose-v2-glow {
    animation: none;
  }
}

.dex-choose-v2-caption.is-swapping > div > * {
  animation: dexChooseCaptionRise 520ms cubic-bezier(0.34, 1.56, 0.64, 1) backwards;
}

.dex-choose-v2-caption.is-swapping > div > *:nth-child(1) { animation-delay: 120ms; }

.dex-choose-v2-caption.is-swapping > div > *:nth-child(2) { animation-delay: 240ms; }

.dex-choose-v2-caption.is-swapping > div > *:nth-child(3) { animation-delay: 360ms; }

@media (prefers-reduced-motion: reduce) {
.dex-choose-v2-caption.is-swapping > div > * { animation: none; }
}

@media screen and (max-width: 767px) {
.dex-choose-v2-tabs {
    justify-content: stretch;
  }
.dex-choose-v2-tab {
    flex: 1 1 0;
  }
.dex-choose-v2-tab::after,
  .dex-choose-v2-tab:last-child::after {
    display: block;
    left: 0;
    right: auto;
    width: 100%;
  }
.dex-choose-v2-tab::before,
  .dex-choose-v2-tab:last-child.is-current::before {
    display: none;
  }
}

@keyframes dexChooseV2Sweep {
  0% { left: -16%; opacity: 0; }
  18% { opacity: 0.8; }
  100% { left: 108%; opacity: 0; }
}

@keyframes dexChooseCaptionRise {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}