/* ===========================================================
   手机端（窄屏，以及竖屏平板）
   设计稿 375x812（含 57px 状态栏），页面本体 375x755。
   1rem = 10px @375 宽；上限 13px，防止大屏手机/竖屏平板上字太大。
   两屏整屏吸附：背景大图固定不动，只有前景内容切换。
   =========================================================== */

html{font-size:min(calc(100vw / 37.5),13px)}

/* 高度用 dvh 显式给死：移动端地址栏收起/展开时视口会变，
   固定定位算出来的高度和实际可视高度可能对不上，两屏吸附就会停在中间。 */
.mb{
  position:fixed;left:0;top:0;right:0;
  height:100vh;height:100dvh;
  overflow:hidden;
}

/* ---------------- 固定背景 ---------------- */
.mb-bg{
  position:absolute;inset:0;z-index:0;
  background:url(../img/mobile-bg.webp) center bottom / cover no-repeat,#FBF1DF;
}
.no-webp .mb-bg{background-image:url(../img/mobile-bg.jpg)}
/* 设计稿里那两团柔光，用径向渐变还原，省两张图 */
.mb-bg::after{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(56% 30% at 49% 41%,rgba(255,250,242,.85),rgba(255,250,242,0) 70%),
    radial-gradient(46% 22% at 93% 76%,rgba(255,250,242,.7),rgba(255,250,242,0) 70%);
}

/* ---------------- 顶栏 ---------------- */
.mb-top{
  position:absolute;left:0;top:0;right:0;height:7rem;z-index:30;
  background:#fff;
}
/* 微信引导横幅（见 base.css .wx）盖在视口顶部时藏掉自己的顶栏：
   两条顶栏几乎同高，叠着会在毛玻璃底下透出一团模糊的 logo 残影；
   设计稿里横幅下面直接就是页面背景 */
.wx-guide .mb-top{visibility:hidden}
.mb-brand{position:absolute;left:2.4rem;top:1.6rem;height:3.8rem}
.mb-brand__mark{position:absolute;left:0;top:0;width:3.8rem;height:3.8rem;border-radius:.83rem}
.mb-brand__word{position:absolute;left:4.6rem;top:.8rem;width:9.3rem;height:2.2rem}
/* 右边距写 2.15rem 而不是和 logo 一样的 2.4rem：logo 是小圆角方块、左边缘接近直线，
   按钮是全圆角胶囊、只有正中一点碰到边，视觉上会显得离边更远。
   按圆角平均内缩量算差 2.6px，往外挪 .25rem 之后两边看起来才是齐的。 */
.mb-dl{
  position:absolute;right:2.15rem;top:1.9rem;width:6.4rem;height:3.2rem;
  border-radius:7.5rem;background:var(--g-btn);
  font-size:1.6rem;font-weight:500;line-height:3.2rem;text-align:center;color:var(--c-ink);
}
.mb-dl:active{transform:scale(.96)}

/* ---------------- 滚动容器 / 整屏吸附 ---------------- */
.mb-scroller{
  position:absolute;inset:0;z-index:10;
  overflow-y:scroll;overflow-x:hidden;
  scroll-snap-type:y mandatory;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
}
.mb-scroller::-webkit-scrollbar{display:none}

.mb-panel{
  position:relative;
  width:100%;max-width:37.5rem;margin:0 auto;
  height:100%;                 /* = 滚动容器高度，保证一屏正好一页 */
  padding-top:7rem;
  scroll-snap-align:start;scroll-snap-stop:always;
  display:flex;flex-direction:column;align-items:center;
}
/* 按设计稿的纵向节奏分配剩余空间，屏幕高矮都能自然伸缩 */
.mb-sp{flex:1 1 0;min-height:0;display:block}

/* ================= 第 1 屏：下载 ================= */
.mb-logo{
  flex:none;width:7.7rem;height:7.7rem;border-radius:1.5rem;
  box-shadow:0 0 .89rem rgba(255,217,61,.6);
}

.mb-h1{
  position:relative;flex:none;
  font-size:3.6rem;font-weight:700;line-height:4.8rem;text-align:center;white-space:nowrap;
}
/* 「傻瓜比价」这四个字在设计稿里不是排出来的字，是 logo 字形（顶栏那张 wordmark.svg），
   深灰黑，不再是原来的橙色。设计稿的做法是把原来那四个字设成全透明、再把 logo 图层压上去，
   这里直接换成一张图：
     位置  图左边缘接着「用」字收尾处（画板 98+36=134），顶边 318 —— 行盒顶边是 311，差 7px
     宽高  139 x 33.44（wordmark.svg 是 133x32，等比放大 1.045 倍）
     右边距 5px  原来那四个字占 4x36=144，图只有 139。补上差额，这一行仍然是 180 宽，
                 整行的居中位置、以及压在它下面那条涂鸦的对位都不用跟着动。 */
.mb-h1__word{
  display:inline-block;vertical-align:top;
  width:13.9rem;height:3.3444rem;margin:.7rem .5rem 0 0;
}
/* 这条带子在设计稿里不是居中的 —— 它压在第一行的「傻瓜比价」上，
   所以中心比整行中心偏右 1.85rem。蒙版参数是按设计稿拟合出来的。 */
.mb-h1__hl{
  position:absolute;left:50%;top:1.339rem;
  width:15.6414rem;height:5.5482rem;margin-left:-5.9707rem;
  display:flex;align-items:center;justify-content:center;
}
.mb-h1__hl::before{
  content:"";width:15.4311rem;height:4.8263rem;
  transform:rotate(2.7deg);
  background:url(../img/hl-mobile.png) .0989rem -2.7097rem / 15.2049rem 10.9082rem no-repeat;
}

.mb-badge{
  position:relative;flex:none;
  width:29.5rem;height:2.3rem;border-radius:.6rem;background:var(--c-badge-m);
}
.mb-badge__spark{position:absolute;left:1.3rem;top:.6rem;width:1.2rem;height:1.2rem}
.mb-badge span{
  position:absolute;left:3rem;top:.4rem;
  font-size:1.2rem;font-weight:500;line-height:1.6rem;letter-spacing:.06rem;color:var(--c-brown);
}

.mb-cta{
  flex:none;width:25.4rem;height:5.6rem;border-radius:5.9rem;
  background:var(--g-btn);
  box-shadow:0 .2rem 1.6rem rgba(226,154,0,.55);
  font-size:2.4rem;font-weight:500;line-height:5.6rem;text-align:center;color:var(--c-ink);
  transition:transform .15s ease;
}
.mb-cta:active{transform:scale(.97)}
.mb-note{
  flex:none;font-size:1.2rem;font-weight:500;line-height:1.2rem;
  letter-spacing:-.06rem;color:var(--c-brown);white-space:nowrap;
}

/* ================= 第 2 屏：视频 =================
   设计稿 5952:193（2026-09-10 改版：标题从「1分钟」放大数字 + 副标题两段式并成一整行，
   视频框从 279×402 放大到 330×483、外面那圈白边去掉）。
   这一屏与它的页码点默认 hidden，由 home-video.js 拉到后台配置后再亮出来。
   纵向节奏（画板 812 高、顶栏到 127）：54 空 → 标题 28 → 47 空 → 视频 483 → 73 空，
   与 index.html 里那几个 flex 权重一一对应。 */
.mb-vh{
  position:relative;flex:none;
  height:2.8rem;white-space:nowrap;
  font-size:2.8rem;font-weight:700;line-height:2.8rem;text-align:center;color:var(--c-ink);
}
.mb-vh__t{position:relative}
/* 涂鸦与第 1 屏同一张图、同一组拟合参数（README「涂鸦高亮块」），只是位置按本屏设计稿换算：
   旋转后的外框在画板 (180.02,177.16)、156.366×54.459，中心落在 (258.20,204.39)；
   标题行盒顶边在画板 181、整行居中于 375 宽，所以容器顶边比行盒高 3.84px、
   中心比屏幕中心（187.5）偏右 70.70px（margin-left = -半宽 7.8183rem + 7.0703rem）。 */
.mb-vh__hl{
  position:absolute;left:50%;top:-.384rem;
  width:15.6366rem;height:5.4459rem;margin-left:-.748rem;
  display:flex;align-items:center;justify-content:center;
}
.mb-vh__hl::before{
  content:"";width:15.4311rem;height:4.8263rem;
  transform:rotate(2.7deg);
  background:url(../img/hl-mobile.png) .0989rem -2.7097rem / 15.2049rem 10.9082rem no-repeat;
}
/* 卡片：330×483 圆角 23，封面直接裁在圆角里 —— 没有白边框也没有柔光。设计稿里那张
   279×402 的白卡（Rectangle 56）连同它的黄色柔光整个落在视频框内侧，一点都露不出来。
   封面按 cover 裁：设计稿那张图比卡片略高、上下居中裁掉，object-fit:cover 是同一种裁法。 */
.mb-vcard{
  flex:none;width:33rem;height:48.3rem;
}
.mb-vcard__in{
  position:relative;width:100%;height:100%;
  border-radius:2.3rem;overflow:hidden;
  background:#FFD93D url(../img/logo.png) center / 42% auto no-repeat;
}
.mb-vcard__cover{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:center;
}
.mb-vcard__cover:not(.is-ready){visibility:hidden}
/* 设计稿在封面上压了一层 4% 的墨色（Rectangle 4275）；只压封面，不压播放键 */
.mb-vcard__in::after{
  content:"";position:absolute;inset:0;z-index:1;
  background:rgba(42,42,42,.04);pointer-events:none;
}
/* 未播放时彻底不渲染播放器：iOS Safari 会把 video 当原生媒体层处理，即使透明且
   pointer-events:none，也可能吞掉从卡片范围起手的纵向滚动。播放态才显示播放器。 */
.mb-vcard__player{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;background:#000;
  display:none;
}
.mb.is-video-playing .mb-scroller{z-index:100;overflow:hidden}
.mb-vcard.is-playing{
  position:fixed;inset:0;z-index:101;
  width:100%;height:100vh;height:100dvh;max-width:none;background:#000;
}
.mb-vcard.is-playing .mb-vcard__in{border-radius:0}
.mb-vcard.is-playing .mb-vcard__player{object-fit:contain}
.mb-vcard.is-playing .mb-vcard__player{display:block;z-index:2}
.mb-vcard.is-playing .mb-vplay{display:none}
.mb-vclose{
  display:none;position:absolute;z-index:5;
  top:max(1.6rem,env(safe-area-inset-top));right:1.6rem;
  width:4rem;height:4rem;border-radius:50%;
  background:rgba(0,0,0,.55);color:#fff;font-size:3rem;font-weight:300;line-height:4rem;text-align:center;
}
.mb-vcard.is-playing .mb-vclose{display:block}
.mb-vcontrols{
  display:none;position:absolute;z-index:4;left:1.6rem;right:1.6rem;
  bottom:max(2rem,env(safe-area-inset-bottom));height:4.8rem;padding:0 1.2rem;
  align-items:center;gap:1rem;border-radius:1.2rem;
  color:#fff;background:rgba(0,0,0,.58);backdrop-filter:blur(.6rem);
}
.mb-vcard.is-playing .mb-vcontrols{display:flex}
.mb-vcard.uses-native-player .mb-vcontrols,
.mb-vcard.uses-miui-player .mb-vclose{display:none}
.mb-vcontrols button{flex:none;width:3.2rem;height:3.2rem;color:#fff;font-size:1.8rem;line-height:1}
.mb-vcontrols button svg{display:block;width:2.2rem;height:2.2rem;margin:auto;fill:currentColor}
.mb-vcontrols__toggle[data-paused="false"] .mb-vicon-play,
.mb-vcontrols__toggle[data-paused="true"] .mb-vicon-pause,
.mb-vcontrols__mute[data-muted="false"] .mb-vicon-muted,
.mb-vcontrols__mute[data-muted="true"] .mb-vicon-sound{display:none}
.mb-vcontrols__time{flex:none;min-width:3.8rem;font-size:1.2rem;text-align:center;font-variant-numeric:tabular-nums}
.mb-vcontrols__progress{
  flex:1;min-width:0;height:1.6rem;background:transparent;
  -webkit-appearance:none;appearance:none;
}
.mb-vcontrols__progress::-webkit-slider-runnable-track{height:.4rem;border-radius:.2rem;background:rgba(255,255,255,.75)}
.mb-vcontrols__progress::-webkit-slider-thumb{
  width:1.6rem;height:1.6rem;margin-top:-.6rem;border:0;border-radius:50%;background:#FFD93D;
  -webkit-appearance:none;appearance:none;
}
.mb-vcontrols__progress::-moz-range-track{height:.4rem;border:0;border-radius:.2rem;background:rgba(255,255,255,.75)}
.mb-vcontrols__progress::-moz-range-thumb{width:1.6rem;height:1.6rem;border:0;border-radius:50%;background:#FFD93D}
.mb-vplay{
  position:absolute;left:50%;top:50%;z-index:3;
  width:7.4rem;height:7.4rem;margin:-3.7rem 0 0 -3.7rem;
  border-radius:50%;
  transition:transform .15s ease;
}
.mb-vplay svg{display:block;width:100%;height:100%}
.mb-vplay:active{transform:scale(.94)}
.mb-vplay:disabled{opacity:.72}
.mb-vstatus{
  position:absolute;left:50%;top:calc(50% + 5rem);z-index:3;transform:translateX(-50%);
  padding:.7rem 1.2rem;border-radius:1rem;white-space:nowrap;
  color:#fff;background:rgba(0,0,0,.55);font-size:1.3rem;
}

/* ================= 第 3 屏：介绍 ================= */
.mb-h2{
  position:relative;flex:none;
  font-size:3.2rem;font-weight:700;line-height:3.6rem;text-align:center;white-space:nowrap;
}
.mb-h2__hl{
  position:absolute;left:50%;top:-3.5781rem;
  width:17.4623rem;height:8.8798rem;margin-left:-7.5745rem;
  display:flex;align-items:center;justify-content:center;
}
.mb-h2__hl::before{
  content:"";width:17.0775rem;height:7.0247rem;
  transform:rotate(4.1449deg);
  background:url(../img/hl-intro.png) .8761rem -1.2422rem / 13.3963rem 11.6266rem no-repeat;
}
/* 文字定位起来，纯靠文档顺序压在涂鸦上面。
   不能用 z-index:-1 —— 外面那层滚动容器带 -webkit-overflow-scrolling:touch，
   iOS Safari / 微信 X5 会把负层级的元素丢到整个滚动图层背后，涂鸦直接消失。 */
.mb-h1__t,.mb-h2__t{position:relative}

.mb-h2sub{
  flex:none;font-size:1.8rem;font-weight:600;line-height:1.8rem;
  text-align:center;white-space:nowrap;
}

.mb-grid{
  flex:none;display:grid;
  grid-template-columns:repeat(2,12.8rem);
  gap:1.2rem 1.6rem;
}
.mb-card{
  position:relative;width:12.8rem;height:15.4rem;
  border-radius:1rem;background:#fff;
  box-shadow:0 0 1.5rem rgba(255,226,61,.5);
  font-family:var(--f-card);
}
.mb-card__tile{
  position:absolute;left:2.7rem;top:1.6rem;width:7.4rem;height:7.4rem;
  border-radius:50%;display:block;
}
.mb-card__tile img{position:absolute;left:1.25rem;top:1.25rem;width:4.9rem;height:4.9rem}
.mb-card--compare .mb-card__tile img{left:1.48rem;top:1.45rem;width:4.03rem;height:4.09rem}
.mb-card--coupon  .mb-card__tile{background:var(--t-coupon-m)}
.mb-card--compare .mb-card__tile{background:var(--t-compare-m)}
.mb-card--gift    .mb-card__tile{background:var(--t-gift-m)}
.mb-card--wallet  .mb-card__tile{background:var(--t-wallet-m)}

.mb-card__t{
  position:absolute;left:0;right:0;top:10.341rem;
  font-size:1.2rem;font-weight:700;line-height:1.2rem;text-align:center;color:var(--c-ink-2);
}
.mb-card__d{
  position:absolute;left:0;right:0;top:12.141rem;
  font-size:1rem;font-weight:500;line-height:1rem;text-align:center;color:var(--c-sub-2);
}
.mb-card__bar{
  position:absolute;left:50%;top:14.041rem;margin-left:-1.25rem;
  width:2.5rem;height:.2rem;border-radius:2.5rem;
}
.mb-card--coupon  .mb-card__bar{background:var(--b-coupon)}
.mb-card--compare .mb-card__bar{background:var(--b-compare)}
.mb-card--gift    .mb-card__bar{background:var(--b-gift)}
.mb-card--wallet  .mb-card__bar{background:var(--b-wallet)}

/* ================= 上滑提示 + 页码点 =================
   设计稿没有这两样，但不给提示用户不会知道能上滑，
   不需要的话把这两块和 index.html 里对应的两个节点删掉即可。 */
.mb-hint{
  position:absolute;left:50%;bottom:2.4rem;z-index:20;
  transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;gap:.5rem;
  padding:1.5rem 1.6rem 1rem;border-radius:2rem;
  /* 下面正好压着汉堡/纸袋，不垫一层底色的话这行字基本看不清 */
  background:rgba(255,255,255,.62);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  color:var(--c-brown);
  transition:opacity .3s ease,visibility .3s ease;
  cursor:pointer;-webkit-tap-highlight-color:transparent;
}
.mb-hint.is-off{opacity:0;visibility:hidden}
.mb-hint:active{transform:translateX(-50%) scale(.96)}
.mb-hint__t{font-size:1.2rem;font-weight:600;letter-spacing:.1rem}
.mb-hint__a{width:2.4rem;height:1.4rem;animation:mb-down 1.6s ease-in-out infinite}
@keyframes mb-down{0%,100%{transform:translateY(-.3rem);opacity:.5}50%{transform:translateY(.3rem);opacity:1}}

.mb-dots{
  position:absolute;right:1.2rem;top:50%;z-index:20;
  transform:translateY(-50%);
  display:flex;flex-direction:column;gap:.8rem;
}
.mb-dot{
  width:.6rem;height:.6rem;border-radius:50%;
  background:rgba(151,81,5,.28);
  transition:background .25s ease,height .25s ease;
}
.mb-dot.is-on{background:var(--c-brown);height:1.8rem;border-radius:.3rem}

/* 横屏时高度很紧，收掉多余提示 */
@media (max-width:768px) and (orientation:landscape){
  .mb-hint{display:none}
}