/* Modern runtime overrides for three historical mobile campaigns.
   Loaded after each generated legacy stylesheet; keep every rule page-scoped. */

:where(
  .legacy-mobile-special-874,
  .legacy-mobile-special-1263,
  .legacy-mobile-special-1344
),
:where(
  .legacy-mobile-special-874,
  .legacy-mobile-special-1263,
  .legacy-mobile-special-1344
) * {
  box-sizing: border-box !important;
}

.modern-mobile-special-back {
  position: fixed;
  z-index: 90;
  top: max(8px, env(safe-area-inset-top));
  left: max(8px, env(safe-area-inset-left));
  display: inline-flex;
  min-width: 44px;
  height: 44px;
  padding: 0 12px 0 8px;
  align-items: center;
  justify-content: center;
  border: 1px solid rgb(255 255 255 / 28%);
  border-radius: 22px;
  background: rgb(8 26 49 / 58%);
  box-shadow: 0 4px 16px rgb(0 0 0 / 18%);
  color: #fff;
  cursor: pointer;
  font: 500 14px/1 system-ui, -apple-system, "Segoe UI", sans-serif;
  gap: 2px;
  touch-action: manipulation;
  backdrop-filter: blur(8px);
}

.modern-mobile-special-back svg {
  display: block !important;
  width: 24px !important;
  height: 24px !important;
  max-width: none !important;
  fill: none;
  stroke: currentcolor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
}

.modern-mobile-special-back:focus-visible,
.legacy-mobile-special-874 :is(.switch, .slide_down):focus-visible,
.legacy-mobile-special-1263 a:focus-visible,
.legacy-mobile-special-1344 :is(input, button, a):focus-visible {
  outline: 3px solid #20c4e0 !important;
  outline-offset: 3px;
}

/* 874: vertical, viewport-sized story. */
.legacy-mobile-special-874[data-special-experience="immersive"] {
  position: fixed !important;
  z-index: 1;
  inset: 0;
  width: 100vw !important;
  height: var(--modern-special-viewport-height, 100dvh) !important;
  min-height: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  background: #eee;
  overscroll-behavior: none;
  touch-action: none;
}

.legacy-mobile-special-874 > div:not(.sr-only),
.legacy-mobile-special-874 .swiper-container {
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  overflow: hidden !important;
}

.legacy-mobile-special-874 .swiper-wrapper {
  display: flex !important;
  width: 100% !important;
  height: auto !important;
  flex-direction: column;
  will-change: transform;
  transition: transform 760ms cubic-bezier(0.22, 0.75, 0.22, 1) !important;
}

.legacy-mobile-special-874 .swiper-wrapper[data-animating="false"],
.legacy-mobile-special-874 .swiper-wrapper[data-dragging="true"] {
  transition: none !important;
}

.legacy-mobile-special-874 .swiper-slide {
  width: 100% !important;
  height: var(--modern-special-viewport-height, 100dvh) !important;
  min-height: var(--modern-special-viewport-height, 100dvh) !important;
  flex: 0 0 var(--modern-special-viewport-height, 100dvh);
  overflow: hidden;
}

.legacy-mobile-special-874 .swiper-content {
  max-width: calc(100% - 32px);
  padding-top: env(safe-area-inset-top);
}

.legacy-mobile-special-874 .swiper-content p {
  font-size: clamp(16px, 2.5vw, 21px) !important;
  line-height: 1.55 !important;
}

.legacy-mobile-special-874 .first-screen img {
  width: clamp(102px, 20vw, 154px) !important;
  height: auto !important;
}

.legacy-mobile-special-874 .switch {
  z-index: 85;
  top: max(8px, env(safe-area-inset-top)) !important;
  right: max(8px, env(safe-area-inset-right)) !important;
  display: flex;
  width: 44px !important;
  height: 44px !important;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgb(255 255 255 / 16%);
  cursor: pointer;
  touch-action: manipulation;
}

.legacy-mobile-special-874 .switch img {
  display: block !important;
  width: 32px !important;
  height: 32px !important;
}

.legacy-mobile-special-874 .slide_down {
  bottom: calc(8px + env(safe-area-inset-bottom)) !important;
  display: flex;
  width: 44px !important;
  height: 44px !important;
  margin: 0 0 0 -22px !important;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  cursor: pointer;
  touch-action: manipulation;
}

.legacy-mobile-special-874 .slide_down img {
  display: block !important;
  width: 33px !important;
  height: 33px !important;
}

.legacy-mobile-special-874 .chat_down {
  bottom: calc(12px + env(safe-area-inset-bottom)) !important;
}

/* 1263: scrollable immersive story with viewport-aware scene changes. */
.legacy-mobile-special-1263[data-special-experience="immersive"] {
  position: relative;
  width: 100% !important;
  height: var(--modern-special-viewport-height, 100dvh) !important;
  min-height: 0 !important;
  padding: 0 !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  background: #fff;
  overscroll-behavior-y: contain;
  scroll-behavior: smooth;
  scroll-snap-type: y proximity;
  -webkit-overflow-scrolling: touch;
}

.legacy-mobile-special-1263 > div:first-of-type,
.legacy-mobile-special-1263 .content_box {
  position: relative;
  width: 100% !important;
  min-height: 100%;
  isolation: isolate;
}

.legacy-mobile-special-1263 .bg_item {
  position: fixed !important;
  z-index: 0;
  inset: 0;
  display: block !important;
  width: 100% !important;
  height: var(--modern-special-viewport-height, 100dvh) !important;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 260ms ease, visibility 260ms ease;
}

.legacy-mobile-special-1263[data-special-background="bg2"] .bg2,
.legacy-mobile-special-1263[data-special-background="bg4"] .bg4,
.legacy-mobile-special-1263[data-special-background="bg6"] .bg6 {
  opacity: 1;
  visibility: visible;
}

.legacy-mobile-special-1263 .screen_chunk {
  position: relative;
  z-index: 1;
  width: 100% !important;
  height: var(--modern-special-viewport-height, 100dvh) !important;
  min-height: var(--modern-special-viewport-height, 100svh) !important;
  overflow: hidden;
  scroll-snap-align: start;
  scroll-snap-stop: normal;
}

.legacy-mobile-special-1263 .screen_bg1 .banner_text h1 {
  font-size: clamp(34px, 9vw, 52px) !important;
  line-height: 1.15 !important;
}

.legacy-mobile-special-1263 .screen_bg1 .banner_text p,
.legacy-mobile-special-1263 :is(.screen_bg3, .screen_bg5, .screen_bg7) .text_box p {
  font-size: clamp(14px, 2.3vw, 18px) !important;
  line-height: 1.65 !important;
}

.legacy-mobile-special-1263 :is(.screen_bg3, .screen_bg5, .screen_bg7) .text_box h2 {
  font-size: clamp(18px, 3.2vw, 25px) !important;
  line-height: 1.45 !important;
}

.legacy-mobile-special-1263 :is(.screen_bg2, .screen_bg4, .screen_bg6) .text_box p {
  font-size: clamp(21px, 4.2vw, 32px) !important;
  line-height: 1.5 !important;
}

.legacy-mobile-special-1263 .screen_bg1 > a {
  position: absolute;
  right: 0;
  bottom: max(72px, calc(52px + env(safe-area-inset-bottom)));
  left: 0;
  display: flex;
  width: max-content;
  min-height: 44px;
  margin: auto;
  align-items: center;
  justify-content: center;
  border-radius: 24px;
  touch-action: manipulation;
}

.legacy-mobile-special-1263 .screen_bg1 .apply_btn {
  position: static !important;
  display: flex;
  width: auto !important;
  min-width: 170px;
  height: 44px !important;
  min-height: 44px;
  margin: 0 !important;
  padding: 0 34px !important;
  align-items: center;
  justify-content: center;
  line-height: 1 !important;
}

.legacy-mobile-special-1263 .load_icon {
  z-index: 24 !important;
  right: max(16px, env(safe-area-inset-right)) !important;
  bottom: max(20px, calc(12px + env(safe-area-inset-bottom))) !important;
  display: block !important;
  width: 60px !important;
  height: 60px !important;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(10px);
  transition: opacity 220ms ease, transform 220ms ease, visibility 220ms ease;
}

.legacy-mobile-special-1263[data-special-floating-download="true"] .load_icon {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
}

.legacy-mobile-special-1263 .load_icon a,
.legacy-mobile-special-1263 .load_icon img {
  display: block !important;
  width: 60px !important;
  height: 60px !important;
  border-radius: 50%;
  touch-action: manipulation;
}

.legacy-mobile-special-1263 .bottom_chunk {
  position: relative;
  z-index: 2;
  min-height: var(--modern-special-viewport-height, 100svh);
  padding: clamp(46px, 8vw, 76px) clamp(20px, 6vw, 56px)
    calc(80px + env(safe-area-inset-bottom)) !important;
  scroll-snap-align: start;
}

.legacy-mobile-special-1263 .bottom_chunk :is(h2, p) {
  font-size: clamp(15px, 2.4vw, 19px) !important;
  line-height: 1.7 !important;
}

.legacy-mobile-special-1263 .bottom_chunk h2 {
  font-size: clamp(20px, 3.2vw, 27px) !important;
}

.legacy-mobile-special-1263 .bottom_chunk .load_btn {
  display: flex;
  width: min(240px, 72vw) !important;
  min-height: 50px;
  margin-top: clamp(48px, 10vh, 80px) !important;
  align-items: center;
  justify-content: center;
  font-size: clamp(20px, 4vw, 28px) !important;
  line-height: 1 !important;
  touch-action: manipulation;
}

/* 1344: standard mobile task page. It deliberately participates in the
   unified header/bottom navigation instead of imitating an empty H5 shell. */
.legacy-mobile-special-1344[data-special-experience="standard"] {
  width: 100% !important;
  min-height: 100svh;
  padding: 0 !important;
  overflow-x: clip !important;
  background: #f4f7fa;
  color: #14243a;
}

.legacy-mobile-special-1344 > div:first-of-type,
.legacy-mobile-special-1344 .client-right-mob {
  width: 100% !important;
  min-width: 0 !important;
  background: #fff;
}

.legacy-mobile-special-1344 .screen-chunk {
  position: relative !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  overflow: hidden;
}

.legacy-mobile-special-1344 .screen-chunk.banner {
  min-height: clamp(320px, 68dvh, 560px) !important;
  background-position: center;
}

.legacy-mobile-special-1344 .banner h1 {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  width: min(92%, 760px) !important;
  height: auto !important;
  margin: 0 !important;
  transform: translate(-50%, -50%) !important;
}

.legacy-mobile-special-1344 .banner h1 img {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  max-width: 100% !important;
}

.legacy-mobile-special-1344 .banner .fx-logo {
  bottom: max(24px, calc(16px + env(safe-area-inset-bottom))) !important;
}

.legacy-mobile-special-1344 .screen-chunk.text-desc .inner-box,
.legacy-mobile-special-1344 .screen-chunk.apply .inner-box,
.legacy-mobile-special-1344 .screen-chunk.contact .inner-box {
  position: static !important;
  top: auto !important;
  left: auto !important;
  display: block !important;
  width: min(100%, 760px) !important;
  height: auto !important;
  margin: 0 auto !important;
  transform: none !important;
}

.legacy-mobile-special-1344 .screen-chunk.text-desc .inner-box {
  padding: clamp(30px, 8vw, 68px) clamp(20px, 6vw, 48px) !important;
}

.legacy-mobile-special-1344 .screen-chunk.text-desc .inner-box p {
  margin: 0 !important;
  color: #24364b !important;
  font-size: clamp(16px, 2.4vw, 19px) !important;
  font-weight: 500 !important;
  line-height: 1.85 !important;
  text-align: justify;
  text-indent: 2em;
}

.legacy-mobile-special-1344 .screen-chunk.apply {
  padding: clamp(34px, 8vw, 68px) clamp(18px, 5vw, 40px)
    calc(clamp(34px, 8vw, 68px) + min(var(--modern-special-keyboard-inset, 0px), 320px));
  background: #dceff8 !important;
  scroll-margin-top: calc(var(--fx-mobile-header-height, 52px) + 12px);
}

.legacy-mobile-special-1344 .apply .inner-box h2 {
  margin: 0 0 20px !important;
  font-size: clamp(21px, 4.8vw, 30px) !important;
  line-height: 1.4 !important;
}

.legacy-mobile-special-1344 .apply .inner-box > p {
  margin: 4px 0 0 !important;
  font-size: clamp(15px, 2.4vw, 18px) !important;
  line-height: 1.55 !important;
}

.legacy-mobile-special-1344 .special-1344-form {
  display: grid;
  width: min(100%, 560px);
  margin: 26px auto 0;
  gap: 16px;
}

.legacy-mobile-special-1344 .special-1344-form .input-box {
  width: 100% !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  text-align: left;
}

.legacy-mobile-special-1344 .special-1344-label {
  display: block;
  margin-bottom: 7px;
  color: #1a3653;
  font: 600 14px/20px system-ui, -apple-system, "Segoe UI", sans-serif;
}

.legacy-mobile-special-1344 .special-1344-form input {
  position: static !important;
  top: auto !important;
  display: block;
  width: 100% !important;
  height: 48px !important;
  min-height: 48px;
  padding: 0 14px !important;
  border: 1px solid #4ca8cd !important;
  border-radius: 6px !important;
  background: #fff;
  color: #14243a !important;
  font: 16px/1.4 system-ui, -apple-system, "Segoe UI", sans-serif;
  scroll-margin-block: 120px;
}

.legacy-mobile-special-1344 .special-1344-form input:invalid:not(:placeholder-shown) {
  border-color: #d64a4a !important;
}

.legacy-mobile-special-1344 .special-1344-form .submit {
  display: inline-flex;
  width: min(100%, 220px) !important;
  min-width: 120px;
  height: 48px !important;
  min-height: 48px;
  margin: 10px auto 0 !important;
  padding: 0 24px;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 6px !important;
  background: #1676d2 !important;
  box-shadow: 0 8px 20px rgb(22 118 210 / 20%);
  color: #fff !important;
  cursor: pointer;
  font: 600 16px/1 system-ui, -apple-system, "Segoe UI", sans-serif !important;
  touch-action: manipulation;
}

.legacy-mobile-special-1344 .special-1344-form .submit:disabled {
  cursor: wait;
  opacity: 0.62;
}

.legacy-mobile-special-1344 .special-1344-form-status {
  min-height: 24px;
  margin: 0 !important;
  color: #16713c !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  line-height: 24px !important;
  text-align: center !important;
}

.legacy-mobile-special-1344 .special-1344-form-status[data-kind="error"] {
  color: #b42318 !important;
}

.legacy-mobile-special-1344 .screen-chunk.contact {
  background: #fff;
}

.legacy-mobile-special-1344 .screen-chunk.contact .inner-box {
  padding: clamp(38px, 9vw, 74px) 20px
    calc(clamp(42px, 10vw, 82px) + env(safe-area-inset-bottom)) !important;
}

.legacy-mobile-special-1344 .contact .inner-box > p {
  margin: 6px 0 0 !important;
  font-size: clamp(15px, 2.4vw, 18px) !important;
  line-height: 1.6 !important;
}

.legacy-mobile-special-1344 .contact .code {
  margin-top: clamp(34px, 8vw, 68px) !important;
}

.legacy-mobile-special-1344 .contact .code img {
  display: block !important;
  width: 135px !important;
  height: 135px !important;
  max-width: 100% !important;
}

@media (max-width: 1199px) {
  body:has(.legacy-mobile-special-document[data-special-experience="immersive"]) {
    height: 100%;
    padding-bottom: 0 !important;
    overflow: hidden !important;
  }

  body:has(.legacy-mobile-special-document[data-special-experience="standard"]) {
    padding-bottom: calc(
      var(--fx-mobile-nav-height) + env(safe-area-inset-bottom)
    ) !important;
    background: #f4f7fa;
  }

  body:has(.legacy-mobile-special-document[data-special-experience="standard"])
    .fx-mobile-header {
    display: grid !important;
  }

  body:has(.legacy-mobile-special-document[data-special-experience="standard"])
    .fx-mobile-bottom-nav {
    display: grid !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .legacy-mobile-special-874 .swiper-wrapper,
  .legacy-mobile-special-874 :is(.switch, .slide_down),
  .legacy-mobile-special-1263,
  .legacy-mobile-special-1263 :is(.bg_item, .load_icon),
  .legacy-mobile-special-1344 * {
    scroll-behavior: auto !important;
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
  }
}