/* ===========================================================
   手机端（窄屏，以及竖屏平板）
   设计稿 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;
}
.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 屏：介绍 ================= */
.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-up 1.6s ease-in-out infinite}
@keyframes mb-up{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}
}