.overview-content {
  overflow: hidden;
}
.overview-content a {
  text-decoration: none;
}
.overview-content button {
  font-size: 1em;
  color: inherit;
  background: unset;
  border: unset;
  outline: unset;
  cursor: pointer;
}
.overview-content sup {
  font-size: 0.5667em;
  line-height: normal;
  vertical-align: super;
}
.overview-content sup a,
.overview-content .sup a {
  font-size: 1em !important;
  margin: 0 !important;
  padding: 0 !important;
  color: inherit;
  text-decoration: none !important;
  border: none !important;
  outline: none !important;
  background: unset !important;
}
.overview-content video {
  background-color: transparent;
  -webkit-tap-highlight-color: transparent;
  -webkit-focus-ring-color: transparent;
  object-fit: cover;
}
.overview-content .web-img {
  display: block;
}
.overview-content .mobile-img,
.st-features .block-img-mobile {
  display: none;
}
.overview-content .m-show {
  display: none;
}
.overview-content .mercusys-red {
  color: #e00015;
}

/* ===========================================================
   st-features: 吸顶 pin 舞台
   阶段：
     1) section 进入视口顶部 → st-stage 固定（吸顶）
     2) 进入即一次性弹出文字与 a-phone（不随滚动联动）
     3) 继续滚动 → 6 张图从 a-phone 背后散出到左右两侧
   =========================================================== */
/* st-features: overflow:hidden 裁掉 st-bg 超出 max-width 的部分 */
.st-features {
  font-size: 16px;
  max-width: 120em;
  margin: 0 auto;
  position: relative;
  overflow: hidden;
}

/* 背景层：独立 120em 宽，和 st-stage 同高、同步吸顶。
   背景图 50% 100% 底部居中、background-size:120em。
   超出 st-features 视区宽的部分由父级 overflow:hidden 裁掉，不会撑开页面。 */
.st-features .st-bg {
  position: absolute;
  top: 0;
  left: 50%;
  width: 120em;
  height: 64.453125em;
  transform: translateX(-50%);
  background: url(./img/a-bg.jpg) 50% 100% no-repeat;
  background-size: 120em;
  z-index: 1;
}
.st-features .st-bg.fixed {
  position: fixed;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
}
/* pin 结束后贴 section 底部（st-features 后面被 st-how 白底覆盖，不需要保持 fixed） */
.st-features .st-bg.end {
  position: absolute;
  top: auto;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
}

/* st-stage：103.125 × 64.453125 em，承载文字/phone/scatter。
   pin 时同步 fixed，与 st-bg 对齐。
   overflow:hidden 把散开图超出 stage 边界的部分裁掉，保留在板块内。 */
.st-features .st-stage {
  position: relative;
  width: 103.125em;
  height: 64.453125em;
  margin: 0 auto;
  overflow: hidden;
  z-index: 2;
}
.st-features .st-stage.fixed {
  position: fixed;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
}
/* pin 结束后贴 section 底部（st-features 后面被 st-how 白底覆盖） */
.st-features .st-stage.end {
  position: absolute;
  top: auto;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
}
.st-features .st-stage.hidden {
  opacity: 0;
}

/* 文字层：居中偏上显示（往上 8em），第一屏直接可见，无上浮动画 */
.st-features .st-text {
  position: absolute;
  top: 43%;
  left: 50%;
  transform: translate(-50%, calc(-50% - 8em));
  text-align: center;
  z-index: 4;
  opacity: 1;
}
.st-features .st-text h2 {
  font-size: 5.625em;
  font-weight: 500;
  line-height: 1.2;
  padding-bottom: 0.25em;
}
.st-features .st-text p {
  font-size: 1.6875em;
  font-weight: 400;
  line-height: 1.5;
}

/* a-phone：固定显示在 a-bg 下底居中，直接显示（无上浮动画） */
.st-features .st-phone {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 32em;
  transform: translate(-50%, 0);
  opacity: 1;
  z-index: 6;
}

/* Explore More 按钮（移动端版）：在 st-text 内，文本下面显示，PC 隐藏 */
.st-features .st-explore {
  display: inline-block;
  padding: 0.6em 1.8em;
  font-size: 1.25em;
  font-weight: 500;
  line-height: 1.4;
  color: #000;
  text-decoration: none;
  border: 1px solid #000;
  border-radius: 1.6em;
  background: transparent;
  cursor: pointer;
  box-sizing: border-box;
}
.st-features .st-explore-mobile {
  display: none;
}

/* 6 张散开图：壳子尺寸/位置 = phone 尺寸/位置，
   内部图 left:50%/top:50% 自然锚到壳子中心 = phone 中心 */
.st-features .st-scatter {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 32em; /* 和 phone 同宽 */
  height: 33.07em; /* phone 高度 = 32 × 713/690，固定高度 */
  transform: translateX(-50%);
  z-index: 5; /* 在 phone（z-index:6）之下，从手机背后散出 */
  pointer-events: none;
}
.st-features .st-scatter .scatter-img {
  position: absolute;
  left: 0;
  top: 0;
  /* 初始：所有图锚定在壳子左上角（= phone 左上角），
     坐标系为相对 phone 左上角的绝对 em 偏移，与图自身宽度无关 */
  transform: translate(0, 0);
  opacity: 0;
  will-change: transform, opacity;
}
/* 散开图的初始尺寸（em）—— 6 张图原始尺寸差异较大，统一缩放到相近比例 */
.st-features .st-scatter .scatter-img-1 {
  width: 13em;
} /* 269x355 */
.st-features .st-scatter .scatter-img-2 {
  width: 16em;
} /* 349x381 */
.st-features .st-scatter .scatter-img-3 {
  width: 14.625em;
} /* 312x88  横向 */
.st-features .st-scatter .scatter-img-4 {
  width: 10em;
} /* 216x213 */
.st-features .st-scatter .scatter-img-5 {
  width: 14.625em;
} /* 312x124 横向 */
.st-features .st-scatter .scatter-img-6 {
  width: 14.625em;
} /* 312x124 横向 */

/* 响应式：与旧版一致 */
@media (min-width: 1921px) {
  .st-features {
    font-size: 0.8333vw;
  }
}
@media (max-width: 1680px) {
  .st-features {
    font-size: 14px;
  }
}
@media (max-width: 1440px) {
  .st-features {
    font-size: 12px;
  }
}

@media (max-width: 736px) {
  .st-features {
    font-size: 10.35px;
    background: url(./m/a.jpg) 50% 100% no-repeat;
    background-size: 100%;
    padding-bottom: 90vw;
  }
  .st-features .st-stage {
    width: auto;
    height: auto;
  }
  .st-features .st-bg {
    display: none;
  }
  .st-features .st-text {
    position: relative;
    top: auto;
    left: auto;
    transform: none;
    opacity: 1;
    padding: 13vw 6vw 0;
  }
  .st-features .st-text {
    font-size: 1.5vw;
  }
  .st-features .st-text p {
    font-size: 3em;
  }
  /* 移动端：Explore More 按钮跟在文本下面，居中显示 */
  .st-features .st-explore-mobile {
    display: inline-block;
    margin-top: 2em;
    font-size: 2.5em;
    color: #ffffff;
    border-color: #ffffff;
  }
}
@media (max-width: 414px) {
  .st-features {
    font-size: 2.5vw;
  }
}

/* ===========================================================
   st-how: How It Works —— 三卡片板块
   结构沿用 st-features：font-size + max-width + w-container
   =========================================================== */
.st-how {
  font-size: 16px;
  max-width: 120em;
  margin: 0 auto;
  padding: 5em 0;
  position: relative;
}

/* 容器：和 st-features 同结构，限制实际内容宽度 */
.st-how .w-container {
  width: 87.5em;
  max-width: 100%;
  margin: 0 auto;
  position: relative;
}

/* 标题 */
.st-how .st-title {
  margin-bottom: 3.75em;
}
.st-how .st-title h2 {
  font-size: 2.8125em;
  font-weight: 500;
  line-height: 1.2;
}

/* 三卡片并列 */
.st-how .st-cards {
  display: flex;
  justify-content: space-between;
  gap: 0.5em;
}

/* 单卡片：<a>，左右布局（左图标 + 右内容） */
.st-how .st-card {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 1.5em;
  padding: 2.5em 2em;
  background-color: #ffffff; /* 默认白底 */
  border: 1px solid #e6e6e6; /* 灰色边 */
  border-radius: 1em;
  cursor: pointer;
  text-decoration: none;
  transition:
    background-color 0.3s ease,
    border-color 0.3s ease,
    color 0.3s ease;
  color: #1a1a1a; /* 默认黑字 */
}
/* 卡片选中态：渐变背景 #2287ec → #49aaff（左上到右下），文案变白 */
.st-how .st-card.active {
  background: linear-gradient(135deg, #2287ec 0%, #49aaff 100%);
  border-color: transparent;
  color: #ffffff;
}
/* 卡片 hover 态：与 active 同样的渐变背景 + 白字 */
.st-how .st-card:hover {
  background: linear-gradient(135deg, #2287ec 0%, #49aaff 100%);
  border-color: transparent;
  color: #ffffff;
}

/* 图标位（后续填图） */
.st-how .st-card-icon {
  flex: 0 0 4em;
  width: 3.28125em;
  height: 3.28125em;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1em;
  position: relative;
}
.st-how .st-card-icon img {
  max-width: 100%;
  max-height: 100%;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  transition: opacity 0.3s ease;
}
/* 默认显示 -1 图标，激活时显示 -2 图标 */
.st-how .st-card-img-active {
  opacity: 0;
}
.st-how .st-card.active .st-card-img-default {
  opacity: 0;
}
.st-how .st-card.active .st-card-img-active {
  opacity: 1;
}
/* hover 态：图标切换为 -1（active 图），与渐变背景配套 */
.st-how .st-card:hover .st-card-img-default {
  opacity: 0;
}
.st-how .st-card:hover .st-card-img-active {
  opacity: 1;
}

/* 右侧内容：上下排 */
.st-how .st-card-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.5em;
}
.st-how .st-card-title {
  display: block;
  font-size: 1.6875em;
  font-weight: 500;
  line-height: 1.2;
}
.st-how .st-card-desc {
  display: block;
  font-size: 1.21875em;
  font-weight: 300;
  line-height: 1.5;
  margin: 0;
}

/* ===========================================================
   st-cards-mini: 精简卡片条（fixed 吸顶，JS 控制显隐）
   - st-how 的 st-cards 滚出视口顶（不可见）后显示（贴 #header 下方）
   - st-simple 滚出视口顶后隐藏
   - 滚到哪个板块，对应卡片高亮（JS 加 .active）
   =========================================================== */
.st-cards-mini {
  font-size: 16px;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 50;
  display: flex;
  justify-content: center;
  gap: 0.5em;
  padding: 1em 0;
  background-color: #ffffff;
  border-bottom: 1px solid #e6e6e6;
  transform: translateY(-100%);
  opacity: 0;
  transition: transform 0.3s ease, opacity 0.3s ease;
  pointer-events: none;
}
/* 显示态：st-how 滚出顶后、st-simple 滚出顶前 */
.st-cards-mini.show {
  transform: translateY(0px);
  opacity: 1;
  pointer-events: auto;
}
.st-card-mini {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.8em;
  max-width: 28em;
  padding: 1em 1.5em;
  border-radius: 1em;
  border: 1px solid #e6e6e6;
  background-color: #ffffff;
  color: #1a1a1a;
  text-decoration: none;
  cursor: pointer;
  transition:
    background-color 0.3s ease,
    border-color 0.3s ease,
    color 0.3s ease;
}
/* 高亮态：渐变背景 + 白字 + 切到 -1 图标，与 st-card.active 一致 */
.st-card-mini.active {
  background: linear-gradient(135deg, #2287ec 0%, #49aaff 100%);
  border-color: transparent;
  color: #ffffff;
}
.st-card-mini-img {
  width: 2em;
  height: 2em;
  object-fit: contain;
  transition: opacity 0.3s ease;
}
/* 两张图标层叠在同一位置，便于切换 */
.st-card-mini-img-active {
  position: absolute;
  opacity: 0;
}
.st-card-mini {
  position: relative;
}
.st-card-mini-icon {
  position: relative;
  width: 2em;
  height: 2em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.st-card-mini-icon .st-card-mini-img {
  position: absolute;
  top: 0;
  left: 0;
}
.st-card-mini.active .st-card-mini-img-default {
  opacity: 0;
}
.st-card-mini.active .st-card-mini-img-active {
  opacity: 1;
}
.st-card-mini-title {
  font-size: 1.125em;
  font-weight: 500;
  line-height: 1.2;
  white-space: nowrap;
}

/* 响应式 */
@media (min-width: 1921px) {
  .st-cards-mini {
    font-size: 0.8333vw;
  }
}
@media (max-width: 1680px) {
  .st-cards-mini {
    font-size: 14px;
  }
}
@media (max-width: 1440px) {
  .st-cards-mini {
    font-size: 12px;
  }
}
@media (max-width: 736px) {
  .st-cards-mini {
    display: none;
  }
}

/* 响应式：与 st-how 同步 */
@media (min-width: 1921px) {
  .st-how {
    font-size: 0.8333vw;
  }
}
@media (max-width: 1680px) {
  .st-how {
    font-size: 14px;
  }
}
@media (max-width: 1440px) {
  .st-how {
    font-size: 12px;
  }
}
@media (max-width: 736px) {
  .st-how {
    font-size: 10.35px;
  }
  .st-how .st-title {
    padding: 0 20px;
    margin-bottom: 2em;
  }
  .st-how .st-title h2 {
    font-size: 2.5em;
    font-weight: 500;
    line-height: 1.5;
  }

  .st-how .st-cards {
    display: block;
    padding: 0 20px;
  }
  .st-how .st-card {
    margin-bottom: 2em;
  }
}
@media (max-width: 414px) {
  .st-features {
    font-size: 2.5vw;
  }
}
/* ===========================================================
   st-setup / st-use: 双 bg 切换板块（参考 test 方案，左右布局）
   - section: font-size + max-width + position:relative
   - .box: 默认 relative；pin 中 fixed；pin 结束 absolute bottom:0
   - .img: 图片容器，固定高度
   - .bg: 层叠背景图层，opacity 切换，每张内各带一份 .menu
   - .menu: 左侧按钮列表，绝对定位贴左
   =========================================================== */
.st-setup,
.st-use,
.st-simple {
  font-size: 16px;
  max-width: 120em;
  margin: 0 auto;
  position: relative;
}
.st-setup,
.st-simple {
  background-color: #f7f7f7;
}
.st-use {
  background-color: #181a24;
}

/* box：吸顶切换的容器 */
.st-setup .box,
.st-use .box,
.st-simple .box {
  position: relative;
}
.st-setup .box.fixed,
.st-use .box.fixed {
  position: fixed;
  top: 0;
  left: 50%;
  width: 100%;
  transform: translateX(-50%);
}
.st-setup .box.end,
.st-use .box.end {
  position: absolute;
  top: auto;
  bottom: 0;
  left: 0;
  width: 100%;
}

/* img：图片容器，固定高度，承载层叠 bg */
.st-setup .img,
.st-use .img,
.st-simple .img {
  height: 52em;
  position: relative;
  overflow: hidden;
  padding-bottom: 10em;
}
.st-setup .bg-card,
.st-use .bg-card,
.st-simple .bg-card {
  position: relative;
}
.st-setup .card-text,
.st-use .card-text,
.st-simple .card-text {
  position: absolute;
  left: 3em;
  top: 2em;
  width: 39em;
}
.st-use .card-text.white,
.st-simple .card-text.white {
  color: #fff;
}
.st-setup .card-text p.title,
.st-use .card-text p.title,
.st-simple .card-text p.title {
  font-size: 1.6875em;
  font-weight: 500;
  line-height: 1.2;
  padding-bottom: 0.25em;
}
/* 标题 */
.st-setup .st-title,
.st-use .st-title,
.st-simple .st-title {
  font-size: 3em;
  font-weight: 500;
  line-height: 1.2;
  position: absolute;
  top: -2em;
  width: 20em;
}

.st-setup .st-title {
  color: #1a1a1a;
}
.st-simple .st-title {
  color: #1a1a1a;
}
.st-use .st-title {
  color: #ffffff;
}

/* bg：每张图层，撑满 .img，默认隐藏，active 显示
   内部是左右布局：左侧 .menu + 右侧 .bg-img */
.st-setup .bg,
.st-use .bg,
.st-simple .bg {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 0.5em;
  padding-top: 13em;
  box-sizing: border-box;
  opacity: 0;
  transition: opacity linear 500ms;
}
.st-setup .bg.active,
.st-use .bg.active,
.st-simple .bg.active {
  opacity: 1;
}

/* 右侧图片 */
.st-setup .bg-img,
.st-use .bg-img,
.st-simple .bg-img {
  width: 60em;
  height: auto;
  display: block;
  padding-left: 1.5em;
}
.st-setup .bg-img img,
.st-use .bg-img img,
.st-simple .bg-img img{
  width: 100%;
  height: auto;
}
/* 公共 title 和 menu（.box > .st-title、.box > .menu）：
   Web 端由 JS 复制进每个 .bg 内使用，原公共部分隐藏；
   移动端不复制，直接显示在 .img 之前 */
.st-setup .box > .st-title,
.st-use .box > .st-title,
.st-simple .box > .st-title,
.st-setup .box > .menu,
.st-use .box > .menu,
.st-simple .box > .menu {
  display: none;
}

/* st-simple：只有一个 bg，不做 pin 滚动效果，直接平铺展示
   覆盖 st-setup/st-use 的固定高度 + absolute 层叠，改为自适应 */
.st-simple .img {
  height: auto;
  overflow: visible;
}
.st-simple .bg {
  position: relative;
  top: auto;
  left: auto;
  right: auto;
  bottom: auto;
  opacity: 1;
}

/* menu：左侧按钮列表 */
.st-setup .bg .menu,
.st-use .bg .menu,
.st-simple .bg .menu {
  position: relative;
  top: auto;
  left: auto;
  transform: none;
  list-style: none;
  margin: 0;
  padding: 0;
  flex: 0 0 26em;
  width: 26em;
  display: flex;
  flex-direction: column;
  gap: 1.5em;
  z-index: 5;
}

/* li：单个卡片按钮 */
.st-setup .menu li,
.st-use .menu li,
.st-simple .menu li {
  padding: 2em 2.5em;
  border-radius: 1em;
  cursor: pointer;
  transition:
    background-color 0.3s ease,
    border-color 0.3s ease,
    color 0.3s ease;
}
.st-setup .menu li {
  background-color: #ffffff;
  border: 3px solid #e6e6e6;
  color: #1a1a1a;
}
.st-simple .menu li {
  background-color: #ffffff;
  border:3px solid #e6e6e6;
  color: #1a1a1a;
}
.st-use .menu li {
  background-color: #23262f;
  border: 3px solid #2e323d;
  color: #ffffff;
}
.st-setup .menu li.active,
.st-use .menu li.active,
.st-simple .menu li.active {
  border-color: #59a5f1;
}

.st-setup .menu li p,
.st-use .menu li p,
.st-simple .menu li p {
  font-size: 1.125em;
  font-weight: 400;
  line-height: 1.5;
}

/* 响应式 */
@media (min-width: 1921px) {
  .st-setup,
  .st-use,
  .st-simple {
    font-size: 0.8333vw;
  }
}
@media (max-width: 1680px) {
  .st-setup,
  .st-use,
  .st-simple {
    font-size: 14px;
  }
}
@media (max-width: 1440px) {
  .st-setup,
  .st-use,
  .st-simple {
    font-size: 12px;
  }
}

/* ===========================================================
   移动端：st-setup / st-use / st-simple 布局
   - 公共 menu 在 .box > .menu 位置（HTML 提取出来），移动端直接显示
   - 依旧点击按钮切换 .bg（opacity 切换，不并排）
   - 布局上下排：公共 menu（含 title + 横向按钮）→ .img 内 active 的 bg（文本上、图片下）
   - 图片通过 <picture> + <source media> 自动切换 ./m/ 下图片
   =========================================================== */
@media (max-width: 736px) {
  .st-setup,
  .st-use,
  .st-simple {
    font-size: 12px;
    padding: 0 16px;
    box-sizing: border-box;
  }

  /* box：默认 relative，不需要 pin */
  .st-setup .box,
  .st-use .box,
  .st-simple .box {
    position: relative;
  }

  /* 公共 title（.box > .st-title）：移动端显示，作为第一行 */
  .st-setup .box > .st-title,
  .st-use .box > .st-title,
  .st-simple .box > .st-title {
    display: block;
    position: relative;
    top: auto;
    width: auto;
    font-size: 2.5em;
    line-height: 1.3;
    padding: 1.5em 0 0.5em 0;
  }

  /* 公共 menu（.box > .menu）：移动端显示，横向平铺按钮 */
  .st-setup .box > .menu,
  .st-use .box > .menu,
  .st-simple .box > .menu {
    display: flex;
    position: relative;
    flex-direction: row;
    gap: 0.8em;
    width: 100%;
    margin: 0 0 1.5em 0;
    padding: 0;
    list-style: none;
  }
  /* 公共 menu 内的 li 横向平铺 */
  .st-setup .box > .menu li,
  .st-use .box > .menu li,
  .st-simple .box > .menu li {
    flex: 1 1 0;
    padding: 1em 1.2em;
  }

  /* img：作为板块容器，定位上下文，高度由当前显示的 bg 撑开 */
  .st-setup .img,
  .st-use .img,
  .st-simple .img {
    height: auto;
    overflow: visible;
    position: relative;
  }

  /* bg：移动端两个 bg 绝对定位层叠在同一位置，display 切换显示哪个
     （PC 端的 opacity:0 + .active opacity:1 在移动端被覆盖为 display 切换） */
  .st-setup .bg,
  .st-use .bg,
  .st-simple .bg {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: auto;
    width: 100%;
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: 1em;
    padding-top: 0;
    opacity: 1;
    transition: none;
  }
  /* active 的 bg 用 display 切换显示 */
  .st-setup .bg.active,
  .st-use .bg.active,
  .st-simple .bg.active {
    display: flex;
    opacity: 1;
  }
  /* 让 .img 容器能被当前 active bg 撑开高度：通过 JS 给 .img 设置 min-height
     兜底：默认让第一个 bg（active）撑开，但绝对定位无法撑开父级，
     所以这里用一个占位机制——给 .img 设置 position relative 后由 JS 同步高度。
     CSS 兜底：若 JS 未执行，至少让 st-simple（仅一个 bg）显示 */

  /* bg-card：内部上下排，文本在上、图片在下 */
  .st-setup .bg-card,
  .st-use .bg-card,
  .st-simple .bg-card {
    position: relative;
    display: flex;
    flex-direction: column-reverse;
    gap: 1em;
  }
  .st-setup .card-text,
  .st-use .card-text,
  .st-simple .card-text {
    position: relative;
    left: auto;
    top: auto;
    width: auto;
    flex: 0 0 auto;
  }
  .st-setup .card-text p.title,
  .st-use .card-text p.title,
  .st-simple .card-text p.title {
    font-size: 1.75em;
    line-height: 1.3;
    padding-bottom: 0.4em;
  }
  .st-setup .card-text p.desc,
  .st-use .card-text p.desc,
  .st-simple .card-text p.desc {
    font-size: 1.5em;
    line-height: 1.5;
  }

  /* picture.bg-img：作为容器，宽度 100% */
  .st-setup .bg-img,
  .st-use .bg-img,
  .st-simple .bg-img {
    display: block;
    width: 100%;
    height: auto;
    padding-left: 0;
    margin-bottom: 5em;
  }
  /* picture 内部 img：撑满 picture，高度自适应 */
  .st-setup .bg-img img,
  .st-use .bg-img img,
  .st-simple .bg-img img {
    display: block;
    width: 100%;
    height: auto;
  }
  .st-simple .card-text.white {
    color: #000;
  }
}
@media (max-width: 414px) {
  .st-setup,
  .st-use,
  .st-simple {
    font-size: 2.5vw;
  }
}

/* ===========================================================
   st-finale: 最后板块 —— 视窗内收 + f-2 交叉淡入 + 文案
   - section 顶到视口顶 → finale-stage fixed 吸顶（全屏）
   - 阶段 A：clip-path inset 从 0 内收到目标（居中、f-2 比例、宽 80%）
   - 阶段 B：bg1(f.png) → bg2(f-2.png) 交叉淡入 + 文案淡入，窗保持目标尺寸
   - pin 结束：贴 section 底，保持终态
   注意：是视窗（clip-path）修改，不是图缩放
   =========================================================== */
.st-finale {
  font-size: 16px;
  max-width: 120em;
  margin: 0 auto;
  position: relative;
  background-color: #f7f7f7;
}

/* finale-stage：全屏舞台，pin 时 fixed 吸顶 */
.st-finale .finale-stage {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
}
.st-finale .finale-stage.fixed {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
}
.st-finale .finale-stage.end {
  position: absolute;
  top: auto;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100vh;
}

/* 背景图层：铺满 stage，cover 居中；图不缩放，仅 clip-path 内收 */
.st-finale .finale-bg {
  position: absolute;
  inset: 0;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  clip-path: inset(0 0 0 0);
  will-change: clip-path, opacity;
}
.st-finale .finale-bg1 {
  background-image: url(./img/f.png);
  z-index: 1;
  opacity: 1;
}
.st-finale .finale-bg2 {
  background-image: url(./img/f-2.png);
  z-index: 2;
  opacity: 0;
}

/* 文案层：居中，默认不可见，阶段 B 淡入 + 从下方 2em 上浮 */
.st-finale .finale-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, calc(-50% + 2em));
  text-align: center;
  z-index: 3;
  opacity: 0;
  width: 90%;
  max-width: 72em;
  will-change: opacity, transform;
  transition: opacity 0.3s ease;
}
.st-finale .finale-text h2 {
  font-size: 5em;
  font-weight: 500;
  line-height: 1.2;
  padding-bottom: 0.3em;
}
.st-finale .finale-text .finale-sub {
  font-size: 1.75em;
  font-weight: 500;
  line-height: 1.3;
  margin-bottom: 1.2em;
}
.st-finale .finale-text .finale-desc {
  font-size: 1.25em;
  font-weight: 400;
  line-height: 1.6;
  max-width: 40em;
  margin: 0 auto;
}

/* 响应式 */
@media (min-width: 1921px) {
  .st-finale {
    font-size: 0.8333vw;
  }
}
@media (max-width: 1680px) {
  .st-finale {
    font-size: 14px;
  }
}
@media (max-width: 1440px) {
  .st-finale {
    font-size: 12px;
  }
}

/* 移动端：JS 不执行 pin，直接展示 f-2 + 文案 */
@media (max-width: 736px) {
  .st-finale {
    font-size: 10.35px;
    background: url("./m/f.jpg") 50% 100% no-repeat;
    background-size: 100%;
    padding-bottom: 133vw;
  }
  .st-finale .finale-stage {
    height: auto;
  }
  .st-finale .finale-bg1 {
    display: none;
  }
  .st-finale .finale-bg2 {
    display: none;
  }
  .st-finale .finale-text {
    opacity: 1;
  }
  .st-finale .finale-text h2 {
    font-size: 2.5em;
    padding: 1.5em 0 0.25em;
  }
  .st-finale .finale-text {
    position: relative;
    top: auto;
    left: auto;
    transform: none;
    text-align: left;
    padding: 0 20px 1.5em;
    width: auto;
  }
  .st-finale .finale-text .finale-sub {
    font-size: 1.75em;
    margin-bottom: 0;
    padding-bottom: 0.5em;
  }
  .st-finale .finale-text .finale-desc {
    font-size: 1.5em;
  }
}
.st-note {
  font-size: 16px;
  margin: 0 auto;
}
.st-note .w-container {
  width: 73.125em;
  margin: 0 auto;
}
.st-note .w-container .text {
  padding: 2em 0 2em;
  text-align: left;
}
.st-note p {
  font-size: 1.25em;
  font-weight: 300;
  line-height: 1.5;
}
@media (min-width: 1921px) {
  .st-note {
    font-size: 0.8333vw;
  }
}
@media (max-width: 1680px) {
  .st-note {
    font-size: 14px;
  }
}
@media (max-width: 1440px) {
  .st-note {
    font-size: 12px;
  }
}
@media (max-width: 736px) {
  .st-note {
    font-size: 10.35px;
  }
  .st-note .w-container {
    width: auto;
  }
  .st-note .text {
    padding: 0 0 2em;
    text-align: center;
  }

  .st-note p {
    font-size: 1.35em;
    font-weight: 300;
    line-height: 1.5;
    padding: 0 5vw;
  }
}
@media (max-width: 414px) {
  .st-note {
    font-size: 2.5vw;
  }
}