.cmp-vs-page {
  --vsx-ink: var(--on-surface);
  --vsx-muted: var(--on-surface-variant);
  --vsx-panel: var(--surface-bright);
  --vsx-line: color-mix(in srgb, var(--on-surface-variant) 16%, transparent);
  --vsx-rival: var(--info);
  background: var(--surface) !important;
  color: var(--vsx-ink) !important;
}

.cmp-vs-page > header,
.cmp-vs-page > section {
  max-width: 1180px !important;
  margin-inline: auto !important;
  padding-left: clamp(18px, 4vw, 48px) !important;
  padding-right: clamp(18px, 4vw, 48px) !important;
  box-sizing: border-box !important;
}

.cmp-vs-page .vsx-sr {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  white-space: nowrap !important;
}

.vsx-hero {
  display: grid !important;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) !important;
  gap: clamp(28px, 4vw, 56px) !important;
  align-items: center !important;
  padding-top: clamp(32px, 5vw, 64px) !important;
  padding-bottom: clamp(32px, 5vw, 64px) !important;
}

.vsx-hero__copy {
  display: grid !important;
  gap: 24px !important;
  justify-items: start !important;
  min-width: 0 !important;
}

.vsx-hero__title {
  display: grid !important;
  gap: 0 !important;
  margin: 0 !important;
  color: var(--vsx-ink) !important;
  font-family: 'Be Vietnam Pro', sans-serif !important;
  line-height: 1.08 !important;
  letter-spacing: -1.5px !important;
  text-wrap: balance !important;
}

.vsx-hero__top,
.vsx-hero__sub {
  display: block !important;
}

.vsx-hero__sub {
  font-size: inherit !important;
  line-height: 1.15 !important;
  letter-spacing: inherit !important;
}

.vsx-hero__lede {
  margin: 0 !important;
  max-width: 56ch !important;
  color: var(--vsx-muted) !important;
}

.vsx-hero__cta {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 12px !important;
  margin: 0 !important;
}

.vsx-vs {
  display: flex !important;
  align-items: center !important;
  justify-content: space-around !important;
  gap: 16px !important;
  min-height: 300px !important;
  padding: 30px !important;
  border: 1px solid var(--vsx-line) !important;
  border-radius: 28px !important;
  background: radial-gradient(
    circle at 62% 45%,
    color-mix(in srgb, var(--primary) 20%, var(--vsx-panel)),
    var(--vsx-panel) 70%
  ) !important;
  box-sizing: border-box !important;
}

.vsx-vs__app {
  display: grid !important;
  justify-items: center !important;
  gap: 8px !important;
}

.vsx-vs__tile {
  display: grid !important;
  place-items: center !important;
  width: 66px !important;
  height: 66px !important;
  border-radius: 18px !important;
  background: var(--vsx-rival) !important;
}

.vsx-vs__tile img {
  width: 36px !important;
  height: 36px !important;
  filter: brightness(0) invert(1) !important;
}

.vsx-vs__name {
  color: var(--vsx-ink) !important;
}

.vsx-vs__badge {
  display: grid !important;
  place-items: center !important;
  width: 44px !important;
  height: 44px !important;
  border-radius: 50% !important;
  background: var(--surface-container) !important;
  color: var(--vsx-muted) !important;
}

.vsx-vs__loo {
  width: 190px !important;
  max-width: 100% !important;
  height: auto !important;
}

.cmp-vs-page > section.vsx-thesis {
  display: grid !important;
  grid-template-columns: 170px minmax(0, 1fr) !important;
  gap: 40px !important;
  align-items: center !important;
  padding-top: 44px !important;
  padding-bottom: 44px !important;
}

.vsx-thesis__loo {
  width: 170px !important;
  height: auto !important;
}

.vsx-thesis__text {
  display: grid !important;
  gap: 14px !important;
}

.vsx-thesis__text h2,
.vsx-import__text h2,
.vsx-h2 {
  margin: 0 !important;
  color: var(--vsx-ink) !important;
  font-family: 'Be Vietnam Pro', sans-serif !important;
  line-height: 1.15 !important;
  text-wrap: balance !important;
}

.vsx-thesis__text p,
.vsx-import__text p {
  margin: 0 !important;
  max-width: 64ch !important;
  color: var(--vsx-muted) !important;
}

.vsx-h2 {
  text-align: center !important;
  margin-bottom: 28px !important;
}

:is(.vsx-accent, .qzx-accent) {
  color: var(--primary) !important;
}

:is(.vsx-under, .qzx-under) {
  position: relative !important;
  display: inline-block !important;
  color: var(--primary) !important;
}

:is(.vsx-under, .qzx-under)::after {
  content: '' !important;
  position: absolute !important;
  inset-inline: 2% !important;
  bottom: -4px !important;
  height: 7px !important;
  background: currentColor !important;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 10' preserveAspectRatio='none'%3E%3Cpath d='M2 7 C 30 1, 70 1, 98 5' stroke='%23000' stroke-width='3' fill='none' stroke-linecap='round'/%3E%3C/svg%3E")
    no-repeat 0 0 / 100% 100% !important;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 10' preserveAspectRatio='none'%3E%3Cpath d='M2 7 C 30 1, 70 1, 98 5' stroke='%23000' stroke-width='3' fill='none' stroke-linecap='round'/%3E%3C/svg%3E")
    no-repeat 0 0 / 100% 100% !important;
}

.cmp-vs-page > section.vsx-comp {
  background: transparent !important;
}

.vsx-comp > .container {
  max-width: 820px !important;
  padding: 0 !important;
  margin-inline: auto !important;
}

.vsx-comp .comp-row {
  grid-template-columns: minmax(0, 1fr) var(--comp-edu-w) var(--comp-col-w) !important;
}

.vsx-comp .comp-eduloo-col {
  inset-inline-end: calc(var(--comp-pad-x) + var(--comp-col-w)) !important;
}

.vsx-comp .comp-tool-logo {
  filter: none !important;
}

.vsx-choose {
  padding-top: 56px !important;
  padding-bottom: 32px !important;
}

.vsx-choose__grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 20px !important;
  max-width: 980px !important;
  margin-inline: auto !important;
}

.vsx-choose__card {
  display: grid !important;
  align-content: start !important;
  gap: 18px !important;
  padding: 28px !important;
  border-radius: 28px !important;
}

.vsx-choose__card--eduloo {
  box-shadow: 0 24px 50px -34px var(--primary) !important;
}

.vsx-choose__head {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
}

.vsx-choose__head .action-card-title {
  margin: 0 !important;
}

.vsx-choose__logo {
  display: grid !important;
  place-items: center !important;
  flex: none !important;
  width: 40px !important;
  height: 40px !important;
  border-radius: 12px !important;
  overflow: hidden !important;
}

.vsx-choose__logo img {
  width: 100% !important;
  height: 100% !important;
}

.vsx-choose__logo--rival {
  background: var(--vsx-rival) !important;
}

.vsx-choose__logo--rival img {
  width: 22px !important;
  height: 22px !important;
  filter: brightness(0) invert(1) !important;
}

.vsx-choose__sub {
  display: block !important;
  color: var(--vsx-muted) !important;
}

.vsx-checks {
  display: grid !important;
  gap: 12px !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

.vsx-checks li {
  display: grid !important;
  grid-template-columns: 24px minmax(0, 1fr) !important;
  gap: 12px !important;
  align-items: start !important;
  margin: 0 !important;
  color: var(--vsx-ink) !important;
}

.vsx-checks .mark {
  display: inline-grid !important;
  place-items: center !important;
  width: 22px !important;
  height: 22px !important;
  margin-top: 1px !important;
  border-radius: 50% !important;
  background: color-mix(in srgb, var(--success) 18%, transparent) !important;
  color: color-mix(in srgb, var(--success) 70%, var(--on-surface)) !important;
}

.vsx-checks .mark.is-accent {
  background: var(--primary-fill, var(--primary)) !important;
  color: var(--on-primary) !important;
}

.vsx-checks .mark .icon {
  font-size: 11px !important;
}

.vsx-choose__cta {
  margin: 4px 0 0 !important;
  justify-content: flex-start !important;
}

.vsx-tools {
  padding-top: 48px !important;
  padding-bottom: 48px !important;
}

.vsx-tools .stt-bento {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}

.vsx-tools .stt-tile.vsx-tile {
  height: 500px !important;
  padding: 30px 16px 0 !important;
  text-decoration: none !important;
}

.vsx-tools .vsx-tile:nth-child(1) {
  --stt-px: 0px;
}

.vsx-tools .vsx-tile:nth-child(2) {
  --stt-px: -305px;
}

.vsx-tools .vsx-tile:nth-child(3) {
  --stt-px: -610px;
}

.vsx-tools .vsx-tile:nth-child(4) {
  --stt-px: -915px;
}

.vsx-tools .vsx-tile .vsx-tile__title {
  margin: 0 !important;
  max-width: 16ch !important;
}

.vsx-tile__link {
  margin-top: 10px !important;
  color: var(--primary) !important;
}

.vsx-tile__stage {
  align-items: flex-start !important;
  margin-top: 18px !important;
}

.base-phone-3d.vsx-phone {
  --phone-3d-tilt: rotateY(-3deg) rotateX(9deg) rotateZ(0deg);
}

.vsx-phone .base-phone-3d__shadow {
  transform: translateX(10px) scaleX(1) !important;
}

.base-phone-3d.vsx-phone--tile {
  --phone-3d-w: 176px;
  --phone-3d-r: 30px;
  padding: 0 20px !important;
}

.cmp-vs-page > section.vsx-import {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 260px !important;
  gap: 36px !important;
  align-items: center !important;
  padding-top: 36px !important;
  padding-bottom: 20px !important;
}

.vsx-import__text {
  display: grid !important;
  gap: 12px !important;
}

.vsx-import__link {
  justify-self: start !important;
  color: var(--primary) !important;
  text-decoration: none !important;
}

.vsx-import__stage {
  display: grid !important;
  justify-items: center !important;
}

.base-phone-3d.vsx-phone--import {
  --phone-3d-w: 190px;
  --phone-3d-r: 32px;
  padding: 6px 24px 18px !important;
}

@media (max-width: 1239px) {
  .vsx-tools .stt-bento {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 860px) {
  .vsx-hero,
  .vsx-choose__grid,
  .cmp-vs-page > section.vsx-thesis,
  .cmp-vs-page > section.vsx-import {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  .cmp-vs-page > section.vsx-thesis {
    justify-items: center !important;
    gap: 20px !important;
  }
  .vsx-thesis__loo {
    width: 120px !important;
  }
  .vsx-vs {
    min-height: 220px !important;
  }
}

@media (max-width: 767px) {
  .vsx-tools .stt-bento {
    grid-template-columns: minmax(0, 1fr) !important;
    max-width: 420px !important;
  }
  .vsx-tools .stt-tile.vsx-tile {
    height: 460px !important;
  }
}

@media (max-width: 640px) {
  .vsx-comp .comp-row {
    grid-template-columns: minmax(0, 1fr) var(--comp-edu-w) var(--comp-col-w) !important;
  }
}

/* >>> type-scale */
html body:not([data-mobile]):not([data-admin]) .vsx-hero__title {
  font-size: clamp(32px, 7.7vw, 37px) !important;
  font-weight: 700 !important;
  line-height: 1.06 !important;
  letter-spacing: -1.2px !important;
}
html body:not([data-mobile]):not([data-admin]) .vsx-hero__sub {
  line-height: 1.06 !important;
}
@media (min-width: 768px) {
  html body:not([data-mobile]):not([data-admin]) .vsx-hero__title {
    font-size: clamp(44px, 4.4vw, 62px) !important;
    letter-spacing: clamp(-2.17px, -0.154vw, -1.54px) !important;
  }
}
html body:not([data-mobile]):not([data-admin]) .vsx-hero__lede {
  font-size: 17px !important;
  font-weight: 400 !important;
  line-height: 1.65 !important;
}
html body:not([data-mobile]):not([data-admin]) .vsx-thesis__text h2,
html body:not([data-mobile]):not([data-admin]) .vsx-import__text h2,
html body:not([data-mobile]):not([data-admin]) .vsx-h2 {
  font-size: 34px !important;
  font-weight: 600 !important;
}
html body:not([data-mobile]):not([data-admin]) .vsx-thesis__text p,
html body:not([data-mobile]):not([data-admin]) .vsx-import__text p {
  font-size: 17px !important;
  font-weight: 400 !important;
  line-height: 1.7 !important;
}
html
  body:not([data-mobile]):not([data-admin])
  .vsx-choose__head
  .action-card-title {
  font-family: 'Be Vietnam Pro', sans-serif !important;
  font-size: 22px !important;
  font-weight: 600 !important;
  letter-spacing: -0.44px !important;
  line-height: 1.15 !important;
}
html body:not([data-mobile]):not([data-admin]) .vsx-choose__sub,
html body:not([data-mobile]):not([data-admin]) .vsx-vs__name {
  font-size: 13px !important;
  font-weight: 400 !important;
}
html body:not([data-mobile]):not([data-admin]) .vsx-vs__name {
  font-weight: 600 !important;
}
html body:not([data-mobile]):not([data-admin]) .vsx-vs__badge {
  font-size: 13px !important;
  font-weight: 700 !important;
}
html body:not([data-mobile]):not([data-admin]) .vsx-checks li {
  font-size: 15px !important;
  font-weight: 400 !important;
  line-height: 1.5 !important;
}
html
  body:not([data-mobile]):not([data-admin])
  .vsx-tools
  .vsx-tile
  .vsx-tile__title {
  font-size: 22px !important;
  font-weight: 600 !important;
  letter-spacing: -0.6px !important;
  line-height: 1.12 !important;
}
html body:not([data-mobile]):not([data-admin]) .vsx-tile__link,
html body:not([data-mobile]):not([data-admin]) .vsx-import__link {
  font-size: 15px !important;
  font-weight: 600 !important;
}
@media (max-width: 767px) {
  html body:not([data-mobile]):not([data-admin]) .vsx-thesis__text h2,
  html body:not([data-mobile]):not([data-admin]) .vsx-import__text h2,
  html body:not([data-mobile]):not([data-admin]) .vsx-h2 {
    font-size: 28px !important;
  }
}
/* <<< type-scale */

.cmp-vs-page .vsx-hero__cta a.hero-cta--secondary {
  padding-inline: 28px !important;
}