/* ==========================================================================
   方案 A · 移动端信息规则层
   —————————————————————————————————————————————————————————————————————————
   这个文件只在小屏生效，靠 <link media> 控制，桌面端根本不参与层叠：

     竖屏手机   (max-width: 720px)
     横屏手机   (max-width: 940px) and (max-height: 460px) and (orientation: landscape)

   为什么不用 orientation 单独判断：iPad 竖屏是 768px 宽，按 orientation
   算属于「竖屏」，但它该看桌面版式。所以主判据是宽度，横屏手机用
   「窄 + 矮 + 横」这组条件兜住 —— 手机横过来是 812×375，宽度已经超过 720，
   但高度只有 375；加 max-height 是为了别把 900×430 的小桌面窗口也算成手机

   规则分三类，全部由 HTML 上的 data-m 标注驱动，不改渲染逻辑：
     data-m="rail"    竖着堆的卡片改成横向滑动轨道（省掉整屏整屏的滚动）
     data-m="two"     窄卡片压成两列，不要一列到底
     data-m-fold="N"  长文/长墙折叠到 N 像素，给「展开」按钮
     data-m="hide"    桌面才需要的装饰，手机直接不渲染

   加载顺序在 main.css 之后，同权重靠后者胜出，所以基本不用 !important
   ========================================================================== */

/* ---------- 1. 纵向空间压缩 ----------
   桌面每个区块上下各 96px 留白，手机上这就是纯粹的滚动成本 */
.container { width: calc(100% - 32px); }

.all-block { padding: 42px 0; }
.all-block--tight { padding: 34px 0; }

.sec-head { margin-bottom: 20px; gap: 6px; }
/* SERVICES / WHO WE ARE 这类英文眉标是桌面版的呼吸感，手机上每个都白占一行 */
.sec-eyebrow { display: none; }
.sec-title { font-size: 22px; letter-spacing: -.3px; }
.sec-sub { margin-top: 8px; font-size: 13.5px; line-height: 1.75; }
.sec-more { font-size: 13.5px; }

[data-m~="hide"] { display: none !important; }

/* ---------- 2. 首屏 ---------- */
.hero__inner { padding: calc(var(--header-h) + 26px) 0 32px; }
.hero__eyebrow { font-size: 12.5px; padding: 6px 12px; }
.hero__title { font-size: 30px; line-height: 1.25; }
.hero__desc { margin-top: 14px; font-size: 14px; line-height: 1.8; }
.hero__cta { margin-top: 22px; gap: 10px; }
.hero__cta .btn { flex: 1; min-width: 0; padding: 0 16px; font-size: 14.5px; height: 46px; }
.hero__stats { margin-top: 26px; gap: 18px 0; }
.hero__stat-num { font-size: 26px; }
.hero__stat-label { font-size: 12px; }

.page-hero__inner { padding: calc(var(--header-h) + 22px) 0 28px; }
/* 桌面版给首屏留了 660 / 380px 的最小高度撑气势，小屏上那是凭空多出来的空白。
   main.css 里只在 ≤720px 解了 .hero，横屏手机是 844px 宽，够不着，这里统一解掉 */
.hero { min-height: 0; }
.page-hero { min-height: 0; }
.page-hero__title { font-size: 26px; }
.page-hero__desc { margin-top: 10px; font-size: 14px; }
.page-hero__crumb { margin-bottom: 10px; font-size: 12px; }

/* ---------- 3. 横向轨道 ----------
   一列到底的卡片是移动端最大的滚动来源：4 张入口卡竖排就是 3 屏。
   改成横滑之后占 1 屏，且「还有更多」这件事靠露边提示，不用文字说明 */
[data-m~="rail"] {
  display: grid !important;
  grid-auto-flow: column;
  grid-template-columns: none !important;
  grid-auto-columns: 78%;
  gap: 12px;
  /* 出血到屏幕两侧，第一张卡与容器左对齐，最后一张右边留出 padding */
  width: calc(100% + 32px);
  /* !important 是为了压掉个别区块写在 HTML 里的 max-width / margin-inline: auto
     内联样式，那两条会让出血宽度算歪，把页面顶出 16px 横向滚动 */
  max-width: none !important;
  margin-inline: -16px !important;
  padding: 4px 16px 14px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  scroll-padding-left: 16px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
[data-m~="rail"]::-webkit-scrollbar { display: none; }
[data-m~="rail"] > * { scroll-snap-align: start; min-width: 0; height: auto; }

/* 窄卡（截图、流程步骤）一屏放得下一张半，给「可以滑」的暗示 */
[data-m~="rail-sm"] { grid-auto-columns: 62%; }

/* 轨道进度条 —— 由 mobile.js 注入，替代看不见的滚动条 */
.m-railbar {
  position: relative;
  height: 3px;
  margin: 0 auto 4px;
  width: 64px;
  border-radius: 2px;
  background: var(--line);
  overflow: hidden;
}
.m-railbar i {
  position: absolute;
  inset: 0 auto 0 0;
  border-radius: 2px;
  background: var(--primary);
  transform-origin: left center;
}

/* ---------- 4. 两列压缩 ----------
   图标 + 短标题 + 两行描述的格子，竖排太浪费，两列刚好 */
[data-m~="two"] {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 10px;
}
[data-m~="two"] .feature { padding: 18px 14px; }
[data-m~="two"] .feature__icon { width: 40px; height: 40px; margin-bottom: 12px; }
[data-m~="two"] .feature__title { font-size: 15px; }
[data-m~="two"] .feature__desc {
  margin-top: 8px;
  font-size: 12.5px;
  line-height: 1.7;
  display: -webkit-box;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ---------- 5. 折叠 ----------
   长文和企业墙不删，只是默认收起来。想看的人点开，不想看的人少滚十屏 */
[data-m-folded] { position: relative; overflow: hidden; }
[data-m-folded]::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 72px;
  background: linear-gradient(180deg, transparent, var(--fold-bg, var(--surface)));
  pointer-events: none;
}
/* 蒙版颜色要跟所在区块的底色一致，否则折叠处会出现一道色带 */
.all-block--soft { --fold-bg: var(--surface-2); }
.all-block--gray { --fold-bg: var(--surface-3); }
/* 照片带上的折叠：渐隐到带底的深海军蓝，展开按钮走毛玻璃 */
.band-photo { --fold-bg: #0e2142; }
.band-photo .m-more {
  background: rgba(255, 255, 255, .12);
  border-color: rgba(255, 255, 255, .3);
  color: #fff;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

.m-more {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: 100%;
  height: 38px;
  margin-top: 12px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--primary);
  font-size: 13.5px;
  font-weight: 500;
}
.m-more svg { transition: transform .25s var(--ease); }
.m-more.is-open svg { transform: rotate(180deg); }

/* ---------- 6. 卡片压缩 ---------- */
.entry-card { padding: 20px 18px; }
.entry-card__icon { width: 44px; height: 44px; margin-bottom: 14px; }
.entry-card__title { font-size: 18px; }
.entry-card__desc {
  margin-top: 8px;
  font-size: 13px;
  line-height: 1.75;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.entry-card__list { margin-top: 12px; gap: 6px; }
.entry-card__link { margin-top: 14px; font-size: 13px; }

.plan { padding: 22px 20px; }
.plan__name { font-size: 17px; }
.plan__tagline { font-size: 12.5px; }
.plan__price { margin-top: 12px; }
.plan__num { font-size: 32px; }
.plan__features { margin-top: 14px; }
.plan__features li { font-size: 12.8px; line-height: 1.7; padding-left: 22px; }
.plan .btn { height: 42px; font-size: 14px; }

.step { padding: 18px 16px; }
.step__num { font-size: 22px; }
.step__title { font-size: 15.5px; }
.step__desc { margin-top: 6px; font-size: 12.8px; line-height: 1.75; }

.card__body { padding: 14px 16px 16px; }
.card__desc { font-size: 12.8px; line-height: 1.75; }
.thumb { aspect-ratio: 16 / 9; }

.quote { padding: 20px 18px; }
.quote__text { font-size: 13px; line-height: 1.8; }

.guarantee { padding: 16px 16px; gap: 12px; }
.guarantee__title { font-size: 14.5px; }
.guarantee__desc { margin-top: 5px; font-size: 12.6px; line-height: 1.75; }

.advisor { padding: 20px 18px 18px; }
.advisor__bio p { font-size: 12.8px; line-height: 1.8; }

.faq-q { padding: 15px 0; font-size: 14.5px; }
.faq-a__inner { font-size: 13px; line-height: 1.85; }

.prose p { font-size: 13.8px; line-height: 1.85; }

.notice { font-size: 13px; padding: 14px 16px; }

/* ---------- 7. 截图实录 ---------- */
.shot__img { height: 200px; }
.shot__cap {
  margin-top: 8px;
  font-size: 12.3px;
  line-height: 1.6;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ---------- 8. 企业墙 ----------
   桌面是 2 列 × 5 格，手机改成 1 列 × 4 格，配合折叠只默认露 3 个方向 */
.logowall { grid-template-columns: 1fr; gap: 16px; }
.logowall__label { margin-bottom: 8px; padding-bottom: 7px; }
.logowall__label b { font-size: 13.5px; }
.logowall__label i { font-size: 10px; }
/* 每组 5 家，就排 5 列 —— 排 4 列会剩一个孤零零的单格 */
.logowall__grid { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 5px; }
.logo-tile { aspect-ratio: 5 / 3; padding: 6px; border-radius: 6px; }

/* ---------- 9. 表格改卡片 ----------
   9 行 × 3 列的交付流程横向滚，手机上等于看不了。
   拆成一行一张卡，表头靠 render.js 写进 td 的 data-th */
.table-scroll { overflow: visible; border: 0; }
/* 桌面版给表格留了 min-width: 660px 强制横向滚动，这里要显式解掉 */
.table-scroll .data-table { min-width: 0; }
.table-scroll .data-table td:first-child { white-space: normal; }
.data-table, .data-table tbody, .data-table tr, .data-table td { display: block; width: 100%; }
.data-table thead { display: none; }

.data-table tr {
  margin-bottom: 10px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--surface);
}

.data-table td {
  display: flex;
  gap: 14px;
  justify-content: space-between;
  align-items: baseline;
  padding: 7px 0;
  border-bottom: 1px dashed var(--line-2);
  font-size: 12.8px;
  line-height: 1.7;
  color: var(--ink-2);
  text-align: right;
}
.data-table td::before {
  content: attr(data-th);
  flex: 0 0 auto;
  color: var(--ink-4);
  font-size: 12px;
  text-align: left;
}
.data-table td:last-child { border-bottom: 0; padding-bottom: 0; }

/* 第一列是这张卡的标题 */
.data-table td:first-child {
  display: block;
  padding: 0 0 9px;
  margin-bottom: 4px;
  border-bottom: 1px solid var(--line);
  color: var(--ink);
  font-size: 14.5px;
  font-weight: 600;
  text-align: left;
}
.data-table td:first-child::before { display: none; }

/* ---------- 10. 捷报跑马灯 ----------
   两行反向滚在手机上信息密度过高，收成一行 */
.marquee__row--rev { display: none; }
.win { width: 78vw; padding: 18px 16px; }
.win__tag { font-size: 11.5px; }
.win__flow { font-size: 12.8px; }
.win__highlight { font-size: 15px; }
.win__note {
  font-size: 12.3px;
  line-height: 1.7;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ---------- 11. 页脚折叠 ----------
   三列链接 + 两个二维码在手机上是最后 3 屏，没人滚到这里还要看目录 */
.site-footer { padding-top: 34px; }
.footer__main { gap: 22px; padding-bottom: 24px; }
.footer__intro { font-size: 12.6px; line-height: 1.8; }
.footer__cols { flex-direction: column; gap: 0; width: 100%; }
.footer__col { width: 100%; border-bottom: 1px solid rgba(255, 255, 255, .1); }

.footer__col-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0;
  padding: 13px 0;
  font-size: 14px;
  cursor: pointer;
}
.footer__col-title::after {
  content: "";
  width: 7px; height: 7px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translate(-2px, -2px);
  opacity: .5;
  transition: transform .25s var(--ease);
}
.footer__col.is-open .footer__col-title::after { transform: rotate(225deg) translate(-2px, -2px); }

/* 用 max-height 而不是 grid 0fr：ul 下面是 4 个平级 li，
   0fr 只压得住第一行，剩下三行会被 grid-auto-rows 按内容撑开 */
.footer__col ul {
  overflow: hidden;
  max-height: 0;
  transition: max-height .3s var(--ease);
}
.footer__col.is-open ul { max-height: 260px; }
.footer__col ul li:last-child { padding-bottom: 10px; }

.footer__intro {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.footer__contact { font-size: 12.5px; }
.footer__phone { font-size: 20px; }

.footer__qrs { gap: 14px; margin-top: 16px; }
.footer__qr { font-size: 11.5px; }
.footer__qr .qr-img, .footer__qr .qr-placeholder { width: 96px; height: 96px; }
.footer__copy { font-size: 11.5px; }

/* ---------- 12. 横屏手机 ----------
   宽度够了但高度只有 375px：竖向留白要再压一档，横向轨道则可以一屏两张 */
@media (orientation: landscape) {
  .all-block { padding: 34px 0; }
  /* 横过来的时候刘海在左边或右边，正文要躲开安全区，否则第一个字被切掉。
     只加 padding 不动宽度：容器是 border-box，背景照样铺满，文字往里让 */
  .container {
    width: calc(100% - 56px);
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
  }
  .dock { padding-left: calc(12px + env(safe-area-inset-left)); padding-right: calc(12px + env(safe-area-inset-right)); }
  .to-top { right: calc(14px + env(safe-area-inset-right)); }

  .hero__inner { padding: calc(var(--header-h) + 16px) 0 22px; }
  .hero__title { font-size: 26px; }
  .hero__stats { margin-top: 18px; }
  .hero__stat { width: 25%; }
  .page-hero__inner { padding: calc(var(--header-h) + 14px) 0 20px; }

  [data-m~="rail"] {
    grid-auto-columns: 44%;
    width: calc(100% + 56px);
    margin-inline: -28px !important;
    padding-inline: 28px;
    scroll-padding-left: 28px;
  }
  [data-m~="rail-sm"] { grid-auto-columns: 32%; }
  [data-m~="two"] { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }

  .logowall { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .logowall__grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }

  .win { width: 42vw; }

  /* 横屏时吸底条会吃掉本来就不多的高度，压扁一档 */
  .dock { padding-top: 5px; padding-bottom: calc(5px + env(safe-area-inset-bottom)); }
  .dock__item { min-height: 38px; font-size: 11px; }
  body { padding-bottom: calc(50px + env(safe-area-inset-bottom)); }
}

/* ==========================================================================
   以下是「移动端为主场」之后补的一轮 —— 上面是把桌面版塞进手机，
   这里开始按手机自己的规矩来
   ========================================================================== */

/* ---------- 13. 触屏行为 ----------
   全站的 hover 位移 / 阴影是给鼠标设计的。触屏上点一下之后 :hover 会一直粘着，
   卡片浮起来不落下，看起来像卡住了。有指针设备时不动，纯触屏一律换成按压反馈 */
@media (hover: none) {
  .card:hover, .entry-card:hover, .plan:hover, .step:hover, .feature:hover,
  .quote:hover, .shot__btn:hover, .advisor:hover, .win:hover, .guarantee:hover,
  .logo-tile:hover, .stat-tile:hover, .btn:hover, .btn--primary:hover,
  .btn--accent:hover, .btn--ghost:hover, .btn--outline:hover {
    transform: none;
  }
  .card:hover, .entry-card:hover, .plan:hover, .step:hover, .feature:hover,
  .quote:hover, .advisor:hover, .win:hover, .guarantee:hover, .logo-tile:hover {
    box-shadow: var(--sh-1);
    border-color: var(--line);
  }
  .card:hover .thumb__img, .feature:hover .feature__icon,
  .btn:hover .btn__arrow, .entry-card:hover .entry-card__link svg,
  .sec-more:hover svg, .sample__play:hover { transform: none; }

  /* 换成按下去有反应，松开就还原 */
  .entry-card:active, .card:active, .plan:active, .step:active,
  .quote:active, .guarantee:active, .shot__btn:active, .faq-q:active {
    background: var(--surface-2);
  }
  .btn:active { transform: scale(.975); }
}

/* iOS 点击时的灰色方块盖在圆角卡片上很难看，关掉，用上面的 :active 代替 */
* { -webkit-tap-highlight-color: transparent; }

/* ---------- 14. 页头 ----------
   74px 是桌面版的呼吸感。手机上它是常驻的，等于每一屏都少一截 */
:root { --header-h: 58px; }

.site-header__inner { gap: 14px; }
.logo { font-size: 17px; gap: 9px; }
.logo__mark, .logo__mark--img { width: 30px; height: 30px; border-radius: 9px; }
.site-header .btn { height: 36px; padding: 0 14px; font-size: 13.5px; }

/* 汉堡按钮点击区放大到 44px，图形还是 18px */
.nav-toggle { width: 44px; height: 44px; }

/* 展开的导航面板：每项 52px，够手指点 */
.nav { top: calc(var(--header-h) - 2px); padding: 6px 0; }
.nav__item { padding: 16px 20px; font-size: 15.5px; }

/* ---------- 15. 手风琴 ----------
   data-m="acc" 的容器，子项在手机上收成「标题一行 + 点开看正文」。
   服务保障这类「六条各一段」的内容，折叠只能露出前两条，
   手风琴能把六条标题一次全给出来，用户自己挑要看哪条 */
[data-m~="acc"] {
  display: block !important;
  border-radius: var(--r);
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--surface);
}

[data-m~="acc"] > * {
  display: block;
  padding: 0;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background: none;
}
[data-m~="acc"] > * + * { border-top: 1px solid var(--line-2); }

/* 标题整行可点，右侧一个箭头 */
[data-m~="acc"] > * > .m-acc-head {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 52px;
  padding: 13px 14px;
  text-align: left;
  font-size: 14.5px;
  font-weight: 550;
  line-height: 1.5;
  color: var(--ink);
}
[data-m~="acc"] > * > .m-acc-head > span { flex: 1; }
/* 标题左边的前导物统一收成 30px 的方章：图标、序号、头像走同一套尺寸，
   否则八条流程排下来左边缘会参差不齐 */
[data-m~="acc"] .guarantee__icon,
[data-m~="acc"] .m-acc-head > .step__num,
[data-m~="acc"] .m-acc-head > .avatar {
  flex: 0 0 auto;
  width: 30px; height: 30px;
  min-width: 0;
  margin: 0;
  border-radius: 8px;
  font-size: 12px;
  padding: 0;
}
[data-m~="acc"] .m-acc-head > .avatar svg { width: 17px; height: 17px; }

/* 卡片自带的装饰（引号大字符之类）在手风琴里会跟右侧箭头叠在一起 */
[data-m~="acc"] > *::before,
[data-m~="acc"] > *::after { display: none; }
.m-acc-head__chev {
  flex: 0 0 auto;
  width: 8px; height: 8px;
  border-right: 1.7px solid var(--ink-4);
  border-bottom: 1.7px solid var(--ink-4);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform .25s var(--ease);
}
[data-m~="acc"] > .is-open .m-acc-head__chev { transform: rotate(225deg) translate(-2px, -2px); }

[data-m~="acc"] .m-acc-body {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .28s var(--ease);
}
[data-m~="acc"] > .is-open .m-acc-body { grid-template-rows: 1fr; }
[data-m~="acc"] .m-acc-body > div { min-height: 0; overflow: hidden; }
[data-m~="acc"] .m-acc-body p {
  padding: 0 14px 14px;
  margin: 0;
  font-size: 12.8px;
  line-height: 1.8;
  color: var(--ink-2);
}

/* 正文左边要对齐标题，而不是对齐序号/图标。
   这条必须排在上面的 padding 简写之后，否则会被它覆盖掉 */
[data-m~="acc"] .m-acc-body p { padding-left: 56px; }
[data-m~="acc"] .m-acc-body--flush p { padding-left: 14px; }
/* 卡片原本给正文留的最小高度在这里会撑出空白 */
[data-m~="acc"] .m-acc-body p { min-height: 0; }

/* ---------- 16. 品牌卡 ----------
   桌面版是竖排大卡：132px logo 居中 + 标题 + 两条。手机上占掉大半屏，
   信息量却只有两行，压成横条 */
.plan--brand {
  display: grid;
  grid-template-columns: 54px 1fr;
  gap: 4px 14px;
  align-items: center;
  text-align: left;
  padding: 16px;
}
.brand-logo { width: 54px; height: 54px; margin: 0; grid-row: span 2; }
.plan--brand .plan__name { font-size: 16px; }
.plan--brand .plan__tagline { font-size: 12px; }
.plan--brand .plan__features {
  grid-column: 1 / -1;
  margin-top: 12px !important;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}

/* ---------- 17. 底部 CTA ---------- */
.cta-band { padding: 40px 0; }
.cta-band__title { font-size: 20px; }
.cta-band__desc { margin-top: 10px; font-size: 13.2px; line-height: 1.75; }
.cta-band__btns { margin-top: 20px; gap: 10px; }
.cta-band__btns .btn { flex: 1; min-width: 0; height: 46px; padding: 0 14px; font-size: 14.5px; }

/* ---------- 18. 回到顶部 ----------
   页面还是有 8 屏上下，看到底想回头找上面的档位，只能一路往回滑。
   滚过两屏才出现，位置避开吸底条 */
.to-top {
  position: fixed;
  right: 14px;
  bottom: calc(62px + 14px + env(safe-area-inset-bottom));
  z-index: 150;
  width: 42px; height: 42px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, .92);
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  border: 1px solid var(--line);
  box-shadow: var(--sh-2);
  color: var(--ink-2);
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity .25s var(--ease), transform .25s var(--ease), visibility .25s;
}
.to-top.is-in { opacity: 1; visibility: visible; transform: none; }
.to-top:active { background: var(--surface-3); }

/* ---------- 19. 其余零碎 ---------- */
/* 首屏的 CTA 两个按钮等宽，别一大一小 */
.hero__cta .btn { flex: 1 1 0; }

/* 表单元素与可点区域最小 44px（iOS 人机指南下限） */
.faq-q { min-height: 48px; }
.dock__item { min-height: 50px; }

/* 二维码在页脚只是「有这么个东西」，96px 够扫也够长按识别 */
.footer__qr .qr-img, .footer__qr .qr-placeholder { width: 88px; height: 88px; }

/* ---------- 12. 照片带上的手风琴 ----------
   band-photo 里的 step 白卡在窄屏也去掉：行文字反白，行间细分隔线 */
.band-photo [data-m~="acc"] {
  background: none;
  border: 0;
  box-shadow: none;
}
.band-photo [data-m~="acc"] > * {
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  border-bottom: 1px solid rgba(255, 255, 255, .16);
}
.band-photo [data-m~="acc"] > *:last-child { border-bottom: 0; }
.band-photo .m-acc-head { color: #fff; }
.band-photo .m-acc-head__chev { border-color: rgba(255, 255, 255, .65); }
.band-photo .m-acc-body p { color: rgba(255, 255, 255, .75); }
.band-photo [data-m~="acc"] .m-acc-head > .step__num { background: rgba(255, 255, 255, .16); color: #fff; }