/* shared structure for both looks */
.choose-plan {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.choose-plan .choose-plan-intro :is(h1, h2, h3) {
  margin: 0 0 16px;
  font-size: var(--heading-font-size-l);
  line-height: 1.15;
  color: var(--text-color);
}

.choose-plan .choose-plan-intro p {
  margin: 0;
  color: #6b7280;
  font-size: var(--body-font-size-s);
  line-height: 1.6;
}

.choose-plan .choose-plan-plans {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

/* plan colours, picked by plan name */
.choose-plan .choose-plan-plan {
  --plan-bg: #e8f0ff;
  --plan-color: #788cb2;
  --plan-text: #2f4365;
  --plan-tick: var(--plan-text);

  display: flex;
  flex-direction: column;
  background-color: var(--plan-bg);
  text-align: left;
}

.choose-plan .choose-plan-plan.plan-gold {
  --plan-bg: #fff7e8;
  --plan-color: #fcaf17;
  --plan-text: #b37c10;
}

.choose-plan .choose-plan-plan.plan-platinum {
  --plan-bg: #fbede7;
  --plan-color: #e8672f;
  --plan-text: #e8672f;
}

.choose-plan .choose-plan-features ul {
  list-style: none;
  margin: 0 0 16px;
  padding: 0;
}

.choose-plan .choose-plan-features li {
  position: relative;
}

.choose-plan .choose-plan-features li::before {
  content: "";
  position: absolute;
  left: 0;
}

.choose-plan .choose-plan-features li.choose-plan-footnote::before {
  content: none;
}

/* optional call to action: full-width outline button, no arrow (as on the live site) */
.choose-plan .choose-plan-cta {
  margin: auto 0 0;
  padding-top: 24px;
}

.choose-plan .choose-plan-cta p {
  margin: 0;
}

.choose-plan a.button.choose-plan-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin: 0;
  border: 1px solid #141414;
  border-radius: 999px;
  padding: 10px 24px;
  background: transparent;
  color: #141414;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.5;
  text-decoration: none;
  transition: background 0.2s ease, color 0.2s ease;
}

.choose-plan a.button.choose-plan-button:hover,
.choose-plan a.button.choose-plan-button:focus-visible {
  background: #fff7e8;
  color: #141414;
  text-decoration: none;
}

.choose-plan a.button.choose-plan-button:focus-visible {
  outline: 2px solid #141414;
  outline-offset: 2px;
}

/* default look: values follow the live choosePlanCards component (mobile first).
   :not(.icons, .choose-plan-v2) keeps these rules off the other looks */

/* like the live site the block sets its own side padding (16px, 45px on desktop),
   so the section and wrapper padding around it are cleared */
main > .section.choose-plan-container:has(> div > .choose-plan:not(.icons, .choose-plan-v2)) {
  padding-inline: 0;
}

main > .section.choose-plan-container > div:has(> .choose-plan:not(.icons, .choose-plan-v2)) {
  max-width: none;
  padding-inline: 0;
}

.choose-plan:not(.icons, .choose-plan-v2) {
  padding-inline: 16px;
}

.choose-plan:not(.icons, .choose-plan-v2) .choose-plan-intro {
  text-align: left;
}

.choose-plan:not(.icons, .choose-plan-v2) .choose-plan-intro :is(h1, h2, h3) {
  margin: 0 0 2px;
  color: #141414;
  font-size: 24px;
  font-weight: 800;
  line-height: 33.6px;
}

.choose-plan:not(.icons, .choose-plan-v2) .choose-plan-intro p {
  color: #8c8e90;
  font-size: 12px;
  font-weight: 500;
  line-height: 16px;
  letter-spacing: 0.5px;
}

/* mobile: cards overlap slightly like stacked sheets */
.choose-plan:not(.icons, .choose-plan-v2) .choose-plan-plan {
  position: relative;
  z-index: 0;
  border-radius: 10px;
  padding: 17px 15px;
}

.choose-plan:not(.icons, .choose-plan-v2) .choose-plan-plan:where(:nth-child(1)) {
  z-index: 3;
}

.choose-plan:not(.icons, .choose-plan-v2) .choose-plan-plan:where(:nth-child(2)) {
  z-index: 2;
}

.choose-plan:not(.icons, .choose-plan-v2) .choose-plan-plan:where(:nth-child(3)) {
  z-index: 1;
}

.choose-plan:not(.icons, .choose-plan-v2) .choose-plan-plan:where(:not(:first-child)) {
  margin-top: -26px;
  padding-top: 26px;
}

.choose-plan:not(.icons, .choose-plan-v2) .choose-plan-header :is(h1, h2, h3, h4) {
  margin: 0 0 8px;
  color: var(--plan-color);
  font-size: 30px;
  font-weight: 600;
  line-height: 22px;
  letter-spacing: 0.5px;
}

.choose-plan:not(.icons, .choose-plan-v2) .choose-plan-features {
  flex: 1 1 auto;
}

/* group labels such as "Includes:" and "Warranty" */
.choose-plan:not(.icons, .choose-plan-v2) .choose-plan-features p {
  margin: 0 0 8px;
  color: #75787b;
  font-size: 12px;
  font-weight: 400;
  line-height: 16.8px;
}

/* padding, not margin, so the last item's margin adds to the 16px group gap as on the live site */
.choose-plan:not(.icons, .choose-plan-v2) .choose-plan-features ul {
  margin: 0;
  padding-bottom: 16px;
}

.choose-plan:not(.icons, .choose-plan-v2) .choose-plan-features li {
  display: flex;
  align-items: center;
  margin: 0 0 2px;
  color: var(--plan-text);
  font-size: 12px;
  font-weight: 400;
  line-height: 20px;
}

/* 8x6 tick from the live site, in each plan's text colour */
.choose-plan:not(.icons, .choose-plan-v2) .choose-plan-features li::before {
  position: static;
  flex: none;
  width: 8px;
  height: 6px;
  margin-right: 10px;
  background-color: var(--plan-tick);
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 6'%3E%3Cpath d='M7.76458 1.38965L3.40584 5.78964C3.26784 5.92899 3.08631 6.00428 2.89912 5.99981C2.71193 5.99534 2.53353 5.91145 2.40115 5.76564L0.221779 3.36565C0.152395 3.29185 0.0970515 3.20358 0.0589787 3.10597C0.0209058 3.00837 0.000865626 2.90339 2.74288e-05 2.79717C-0.000810769 2.69095 0.0175697 2.5856 0.0540966 2.48729C0.0906235 2.38897 0.144565 2.29965 0.212774 2.22454C0.280983 2.14942 0.362093 2.09002 0.451372 2.0498C0.540651 2.00957 0.636311 1.98933 0.732769 1.99025C0.829227 1.99117 0.924553 2.01324 1.01318 2.05517C1.10181 2.0971 1.18197 2.15804 1.24899 2.23445L2.93655 4.09285L6.78241 0.210458C6.9244 0.067029 7.11232 -0.00840648 7.30483 0.000745265C7.49733 0.00989701 7.67865 0.102887 7.80889 0.259258C7.93913 0.415629 8.00763 0.622573 7.99932 0.834563C7.99101 1.04655 7.90657 1.24623 7.76458 1.38965Z'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* footnotes (lines starting with *): small, no tick */
.choose-plan:not(.icons, .choose-plan-v2) .choose-plan-features .choose-plan-footnote {
  display: block;
  margin: 10px 0 0;
  color: #97836a;
  font-size: 11px;
  line-height: 15px;
}

/* a footnote under a list sits close to it and keeps 22px above the button, as on the live site */
.choose-plan:not(.icons, .choose-plan-v2) .choose-plan-features p.choose-plan-footnote {
  margin: -12px 0 22px;
}

.choose-plan:not(.icons, .choose-plan-v2) .choose-plan-cta {
  padding-top: 0;
}

.choose-plan:not(.icons, .choose-plan-v2) a.button.choose-plan-button {
  padding: 6px 24px;
  font-size: 14px;
  line-height: 22px;
}

/* icons variant: header image with the plan name, white cards with a shadow */
.choose-plan.icons .choose-plan-intro {
  text-align: center;
}

.choose-plan.icons .choose-plan-intro :is(h1, h2, h3) {
  margin-bottom: 8px;
  font-weight: 700;
}

.choose-plan.icons .choose-plan-plans {
  align-items: start;
  gap: 24px;
}

.choose-plan.icons .choose-plan-plan {
  --plan-bg: #fcd9c8;
  --plan-tick: #222;

  border-radius: 10px;
  padding: 0;
  overflow: hidden;
  background-color: #fff;
  box-shadow: 0 4px 24px rgb(0 0 0 / 8%);
}

.choose-plan.icons .choose-plan-plan.plan-gold {
  --plan-bg: #ffecc8;
  --plan-tick: #c8912e;
}

.choose-plan.icons .choose-plan-plan.plan-platinum {
  --plan-bg: #ddd6ea;
  --plan-tick: #e0643c;
}

.choose-plan.icons .choose-plan-header {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: 110px;
  padding: 0 24px 14px;
  background-color: var(--plan-bg);
}

.choose-plan.icons .choose-plan-header.has-image {
  aspect-ratio: 322 / 137;
  min-height: 0;
}

.choose-plan.icons .choose-plan-header-image {
  position: absolute;
  inset: 0;
  line-height: 0;
}

.choose-plan.icons .choose-plan-header-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.choose-plan.icons .choose-plan-header :is(h1, h2, h3, h4) {
  position: relative;
  margin: 0;
  color: #222;
  font-size: 28px;
  font-weight: 700;
}

.choose-plan.icons .choose-plan-features {
  padding: 24px 24px 20px;
  color: #222;
  font-size: var(--body-font-size-s);
  line-height: 1.5;
}

.choose-plan.icons .choose-plan-features p {
  margin: 0 0 8px;
  color: #555;
  font-size: 15px;
  font-weight: 600;
}

.choose-plan.icons .choose-plan-features ul {
  margin: 0 0 20px;
}

.choose-plan.icons .choose-plan-features ul:last-child {
  margin-bottom: 0;
}

.choose-plan.icons .choose-plan-features li {
  margin: 0 0 8px;
  padding-left: 24px;
}

/* thin tick like the AEM component */
.choose-plan.icons .choose-plan-features li::before {
  top: 0.45em;
  width: 12px;
  height: 12px;
  background-color: var(--plan-tick);
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.5l5 5L20 6.5'/%3E%3C/svg%3E") center / contain no-repeat;
}

.choose-plan.icons .choose-plan-features li.choose-plan-footnote {
  margin-top: 4px;
  padding-left: 0;
  color: #666;
  font-size: 13px;
}

.choose-plan.icons .choose-plan-features li.choose-plan-footnote::before {
  content: none;
}

.choose-plan.icons .choose-plan-cta {
  margin: 0;
  padding: 0 24px 24px;
}

/* tablet */
@media (width >= 600px) {
  .choose-plan.icons .choose-plan-plans {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* desktop: icons look */
@media (width >= 900px) {
  .choose-plan.icons .choose-plan-plans {
    grid-template-columns: repeat(3, 1fr);
    gap: 48px;
  }

  .choose-plan.icons .choose-plan-intro {
    margin-bottom: 24px;
  }

  .choose-plan.icons .choose-plan-header {
    padding: 0 32px 16px;
  }

  .choose-plan.icons .choose-plan-header :is(h1, h2, h3, h4) {
    font-size: 34px;
  }

  .choose-plan.icons .choose-plan-features {
    padding: 28px 32px 24px;
    font-size: 18px;
  }

  .choose-plan.icons .choose-plan-cta {
    padding: 0 32px 28px;
  }
}

/* desktop: default look, intro on the left and the plans beside it, full page width */
@media (width >= 992px) {
  .choose-plan:not(.icons, .choose-plan-v2) {
    display: grid;
    grid-auto-columns: minmax(0, 1fr);
    grid-auto-flow: column;
    align-items: stretch;
    gap: 32px;
    padding-inline: 45px;
  }

  .choose-plan:not(.icons, .choose-plan-v2) .choose-plan-plans {
    display: contents;
  }

  .choose-plan:not(.icons, .choose-plan-v2) .choose-plan-intro {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 8px 0;
  }

  .choose-plan:not(.icons, .choose-plan-v2) .choose-plan-intro :is(h1, h2, h3) {
    margin: 0 0 16px;
    font-size: 40px;
    line-height: 1.1;
  }

  .choose-plan:not(.icons, .choose-plan-v2) .choose-plan-intro p {
    font-size: 18px;
    font-weight: 400;
    line-height: 1.5;
  }

  .choose-plan:not(.icons, .choose-plan-v2) .choose-plan-plan {
    margin-top: 0;
    border-radius: 8px;
    padding: 40px 30px 32px;
  }

  .choose-plan:not(.icons, .choose-plan-v2) .choose-plan-header :is(h1, h2, h3, h4) {
    margin: 0 0 20px;
    font-size: 35px;
  }

  .choose-plan:not(.icons, .choose-plan-v2) .choose-plan-features p {
    color: #8c8e90;
    line-height: 22px;
  }

  .choose-plan:not(.icons, .choose-plan-v2) .choose-plan-features li {
    margin-bottom: 10px;
    font-size: 14px;
    line-height: 1.4;
  }

  .choose-plan:not(.icons, .choose-plan-v2) .choose-plan-cta {
    padding-top: 24px;
  }

  .choose-plan:not(.icons, .choose-plan-v2) a.button.choose-plan-button {
    padding: 10px 24px;
    font-size: 16px;
  }
}

/*
 * choose-plan-v2: white cards with an image header (values follow the live AEM
 * choosePlan component). Mobile is a swipeable row of cards with dots; desktop
 * shows the cards side by side, centred, under a centred heading.
 */
main > .section.choose-plan-container > div:has(> .choose-plan.choose-plan-v2) {
  padding-inline: 18px;
}

.choose-plan.choose-plan-v2 {
  --choose-plan-v2-card: 322px;

  gap: 0;
}

.choose-plan.choose-plan-v2 .choose-plan-intro {
  margin: 0 0 16px 16px;
  text-align: left;
}

.choose-plan.choose-plan-v2 .choose-plan-intro :is(h1, h2, h3) {
  margin: 0;
  color: #1d1d1f;
  font-size: 32px;
  font-weight: 800;
  line-height: 41.6px;
}

.choose-plan.choose-plan-v2 .choose-plan-intro p {
  margin: 8px 0 0;
  color: #75787b;
  font-size: 14px;
  line-height: 22px;
}

/* the row scrolls sideways; the padding keeps the card shadows from being clipped */
.choose-plan.choose-plan-v2 .choose-plan-plans {
  position: relative;
  display: flex;
  align-items: stretch;
  gap: 16px;
  margin-top: -15px;
  padding: 15px 16px 30px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: 16px;
  scrollbar-width: none;
}

.choose-plan.choose-plan-v2 .choose-plan-plans::-webkit-scrollbar {
  display: none;
}

.choose-plan.choose-plan-v2 .choose-plan-plan {
  --plan-bg: #fcd9c8;
  --plan-tick: #1d1d1f;

  flex: 0 0 min(var(--choose-plan-v2-card), 100% - 10px);
  border-radius: 8px;
  overflow: hidden;
  background-color: #fff;
  box-shadow: 1px 6px 25px -4px rgb(16 24 40 / 16%);
  scroll-snap-align: start;
}

.choose-plan.choose-plan-v2 .choose-plan-plan.plan-gold {
  --plan-bg: #ffecc8;
  --plan-tick: #b37c10;
}

.choose-plan.choose-plan-v2 .choose-plan-plan.plan-platinum {
  --plan-bg: #ddd6ea;
  --plan-tick: #e8672f;
}

/* header: the authored image fills it (plan colour without one), the name sits on top */
.choose-plan.choose-plan-v2 .choose-plan-header {
  position: relative;
  flex: none;
  height: 136px;
  margin-bottom: 15px;
  overflow: hidden;
  background-color: var(--plan-bg);
}

.choose-plan.choose-plan-v2 .choose-plan-header-image {
  position: absolute;
  inset: 0;
  line-height: 0;
}

.choose-plan.choose-plan-v2 .choose-plan-header-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: right center;
}

.choose-plan.choose-plan-v2 .choose-plan-header :is(h1, h2, h3, h4) {
  position: absolute;
  bottom: 28px;
  left: 34px;
  margin: 0;
  color: #232426;
  font-size: 32px;
  font-weight: 800;
  line-height: 22px;
  letter-spacing: 0.5px;
}

.choose-plan.choose-plan-v2 .choose-plan-features {
  padding-left: 35px;
}

/* group labels such as "Included" and "Warranty" */
.choose-plan.choose-plan-v2 .choose-plan-features p {
  margin: 0 0 8px;
  color: #4c4c4c;
  font-size: 12px;
  font-weight: 700;
  line-height: 14.4px;
}

/* stylelint-disable-next-line no-descending-specificity -- never on the same block as .icons */
.choose-plan.choose-plan-v2 .choose-plan-features ul {
  margin: 0 0 20px;
}

.choose-plan.choose-plan-v2 .choose-plan-features li {
  display: flex;
  align-items: center;
  gap: 11px;
  margin: 0 0 5px;
  color: #1d1d1f;
  font-size: 14px;
  font-weight: 400;
  line-height: 22px;
}

/* 8x6 tick in each plan's colour */
.choose-plan.choose-plan-v2 .choose-plan-features li::before {
  position: static;
  flex: none;
  width: 8px;
  height: 6px;
  background-color: var(--plan-tick);
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 6'%3E%3Cpath d='M7.76458 1.38965L3.40584 5.78964C3.26784 5.92899 3.08631 6.00428 2.89912 5.99981C2.71193 5.99534 2.53353 5.91145 2.40115 5.76564L0.221779 3.36565C0.152395 3.29185 0.0970515 3.20358 0.0589787 3.10597C0.0209058 3.00837 0.000865626 2.90339 2.74288e-05 2.79717C-0.000810769 2.69095 0.0175697 2.5856 0.0540966 2.48729C0.0906235 2.38897 0.144565 2.29965 0.212774 2.22454C0.280983 2.14942 0.362093 2.09002 0.451372 2.0498C0.540651 2.00957 0.636311 1.98933 0.732769 1.99025C0.829227 1.99117 0.924553 2.01324 1.01318 2.05517C1.10181 2.0971 1.18197 2.15804 1.24899 2.23445L2.93655 4.09285L6.78241 0.210458C6.9244 0.067029 7.11232 -0.00840648 7.30483 0.000745265C7.49733 0.00989701 7.67865 0.102887 7.80889 0.259258C7.93913 0.415629 8.00763 0.622573 7.99932 0.834563C7.99101 1.04655 7.90657 1.24623 7.76458 1.38965Z'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* footnotes (lines starting with *): small, no tick */
.choose-plan.choose-plan-v2 .choose-plan-features .choose-plan-footnote {
  width: 95%;
  color: #4c4e52;
  font-size: 11px;
  font-weight: 300;
  line-height: 16px;
}

/* the button sits at the bottom so buttons line up across the row */
.choose-plan.choose-plan-v2 .choose-plan-cta {
  margin: auto 0 30px 33px;
  padding: 0 15px;
}

.choose-plan.choose-plan-v2 a.button.choose-plan-button {
  display: inline-flex;
  gap: 10px;
  box-sizing: border-box;
  width: auto;
  height: 38px;
  border: 1px solid #232426;
  border-radius: 45px;
  padding: 0 18px;
  background: transparent;
  color: #222;
  font-size: 14px;
  font-weight: 700;
  line-height: 22px;
  text-transform: uppercase;

  /* the live button changes colour instantly */
  transition: none;
}

.choose-plan.choose-plan-v2 a.button.choose-plan-button::after {
  content: "";
  flex: none;
  width: 17px;
  height: 20px;
  background-color: currentcolor;
  mask: url("../../icons/arrow-icon-new.svg") left center / 20px 20px no-repeat;
}

/* like the live site, hover (and keyboard focus) fills the button with cream */
.choose-plan.choose-plan-v2 a.button.choose-plan-button:hover,
.choose-plan.choose-plan-v2 a.button.choose-plan-button:focus-visible {
  border-color: #232426;
  background: #fff7e8;
  color: #222;
}

/* slider dots (mobile): the current plan is a wider dark bar */
.choose-plan.choose-plan-v2 .choose-plan-dots {
  display: flex;
  align-items: center;
  gap: 11px;
  padding-left: 16px;
}

.choose-plan.choose-plan-v2 .choose-plan-dot {
  width: 8px;
  height: 8px;
  margin: 0;
  border: 0;
  border-radius: 6px;
  padding: 0;
  background-color: #606060;
  opacity: 0.25;
  cursor: pointer;
  transition: width 0.2s ease;
}

.choose-plan.choose-plan-v2 .choose-plan-dot[aria-current="true"] {
  width: 19px;
  background-color: #4d4d4d;
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .choose-plan.choose-plan-v2 .choose-plan-dot {
    transition: none;
  }
}

@media (width >= 992px) {
  main > .section.choose-plan-container > div:has(> .choose-plan.choose-plan-v2) {
    padding-inline: 32px;
  }

  .choose-plan.choose-plan-v2 .choose-plan-intro {
    margin: 0 0 40px;
    text-align: center;
  }

  .choose-plan.choose-plan-v2 .choose-plan-intro :is(h1, h2, h3) {
    color: #000;
    line-height: 35.2px;
  }

  .choose-plan.choose-plan-v2 .choose-plan-plans {
    align-items: flex-start;
    justify-content: center;
    gap: 38px;
    margin-top: 0;
    padding: 0 45px;
    overflow: visible;
    scroll-snap-type: none;
  }

  .choose-plan.choose-plan-v2 .choose-plan-plan {
    flex: 0 0 var(--choose-plan-v2-card);
  }

  .choose-plan.choose-plan-v2 .choose-plan-header {
    margin-bottom: 20px;
  }

  .choose-plan.choose-plan-v2 .choose-plan-header :is(h1, h2, h3, h4) {
    bottom: 22px;
  }

  .choose-plan.choose-plan-v2 .choose-plan-cta {
    margin: 0 0 35px 33px;
    padding: 0;
  }

  .choose-plan.choose-plan-v2 a.button.choose-plan-button {
    padding: 0 20px;
  }

  .choose-plan.choose-plan-v2 .choose-plan-dots {
    display: none;
  }
}

/* the AEM component brings the lists in to 30px at these widths */
@media (width >= 991px) and (width <= 1200px) {
  .choose-plan.choose-plan-v2 .choose-plan-features {
    padding-left: 30px;
  }
}

/*
 * between 992px and 1439px the AEM site shrinks the page (body zoom 0.7 to 0.9).
 * Sites that already zoom the body set --body-zoom, so the block only adds the
 * difference and is not shrunk twice.
 */
@media (width >= 992px) and (width < 1100px) {
  .choose-plan.choose-plan-v2 {
    zoom: calc(0.7 / var(--body-zoom, 1));
  }
}

@media (width >= 1100px) and (width < 1200px) {
  .choose-plan.choose-plan-v2 {
    zoom: calc(0.75 / var(--body-zoom, 1));
  }
}

@media (width >= 1200px) and (width < 1280px) {
  .choose-plan.choose-plan-v2 {
    zoom: calc(0.8 / var(--body-zoom, 1));
  }
}

@media (width >= 1280px) and (width < 1366px) {
  .choose-plan.choose-plan-v2 {
    zoom: calc(0.85 / var(--body-zoom, 1));
  }
}

@media (width >= 1366px) and (width < 1440px) {
  .choose-plan.choose-plan-v2 {
    zoom: calc(0.9 / var(--body-zoom, 1));
  }
}