.mb-hero__grid {
  position:absolute;
  inset:0;
  background-image:linear-gradient(var(--line-1) 1px,transparent 1px),linear-gradient(90deg,var(--line-1) 1px,transparent 1px),var(--grad-ai-soft);
  background-size:var(--sp-16) var(--sp-16),var(--sp-16) var(--sp-16),100% 100%;
  opacity:.55;
}

.mb-hero__layout,
.mb-scan__layout,
.mb-pos__layout,
.mb-reports__layout {
  display:grid;
  min-width:0;
  align-items:center;
  gap:var(--sp-10);
}

.mb-hero__platforms {
  display:flex;
  margin:0 0 var(--sp-8);
  padding:0;
  flex-wrap:wrap;
  gap:var(--sp-2);
  list-style:none;
}

.mb-hero__platforms li {
  padding:var(--sp-1) var(--sp-3);
  border:1px solid var(--line-2);
  border-radius:var(--r-pill);
  background:var(--glass-bg);
  color:var(--fg-2);
  font-size:var(--fs-xs);
}

.mb-hero__devices {
  position:relative;
  width:min(100%,420px);
  aspect-ratio:1;
  margin:auto;
}

.mb-device {
  position:absolute;
  padding:var(--sp-1);
  overflow:hidden;
  border:1px solid var(--line-brand);
  border-radius:var(--r-lg);
  background:var(--bg-1);
  box-shadow:var(--shadow-3);
}

.mb-device img {
  width:100%;
  height:100%;
  object-fit:cover;
}

.mb-device--android,
.mb-device--ios {
  bottom:3%;
  width:29%;
  aspect-ratio:9 / 19;
}

.mb-device--android {
  left:4%;
  transform:rotate(-4deg);
}

.mb-device--ios {
  left:33%;
  z-index:2;
  transform:rotate(3deg);
}

.mb-device--ipad {
  top:12%;
  right:0;
  width:72%;
  aspect-ratio:16 / 10;
  transform:rotate(-2deg);
}

.mb-role-tabs__list {
  display:flex;
  margin-bottom:var(--sp-5);
  gap:var(--sp-2);
  overflow-x:auto;
}

.mb-role-tab {
  min-height:var(--btn-h-sm);
  padding:var(--sp-2) var(--sp-4);
  flex:none;
  border:1px solid var(--line-2);
  border-radius:var(--r-pill);
  background:var(--bg-0);
  color:var(--fg-2);
  font-size:var(--fs-sm);
}

.mb-role-tab[aria-selected="true"] {
  border-color:var(--line-brand);
  color:var(--brand-300);
}

.mb-role-panel {
  display:grid;
  min-width:0;
  padding:var(--sp-6);
  align-items:start;
  gap:var(--sp-6);
  border:1px solid var(--line-1);
  border-radius:var(--r-lg);
  background:var(--bg-0);
}

.mb-role-panel__who {
  margin:var(--sp-2) 0 0;
  color:var(--teal-300);
  font-size:var(--fs-sm);
}

.mb-role-panel__lead {
  margin:var(--sp-3) 0 0;
  color:var(--fg-2);
  max-width:34em;
}

/* 库管首页那四个待办数字，是这一屏最有说服力的部分，单独排一行。 */
.mb-role-todos {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  margin-top:var(--sp-5);
  gap:var(--sp-3);
}

.mb-role-todo {
  display:grid;
  padding:var(--sp-4);
  gap:2px;
  border:1px solid var(--line-brand);
  border-radius:var(--r-md);
  background:var(--bg-1);
}

.mb-role-todo__label {
  color:var(--fg-1);
  font-size:var(--fs-sm);
  font-weight:var(--fw-semi);
}

.mb-role-todo__unit {
  color:var(--fg-3);
  font-size:var(--fs-xs);
}

.mb-role-panel__cap {
  margin:var(--sp-6) 0 var(--sp-3);
  color:var(--fg-3);
  font-family:var(--font-num);
  font-size:var(--fs-xs);
}

.mb-role-panel__list {
  display:flex;
  margin:0;
  padding:0;
  flex-wrap:wrap;
  gap:var(--sp-2);
  list-style:none;
}

.mb-role-panel__list li {
  padding:6px var(--sp-4);
  border:1px solid var(--line-1);
  border-radius:var(--r-pill);
  background:var(--bg-1);
  color:var(--fg-2);
  font-size:var(--fs-sm);
}

/* tabs.js 用 [hidden] 收起未选中的面板，但上面的 display:grid 会盖掉
   [hidden] 的 UA 规则。用属性选择器提高特异性，不占用全站的强制覆盖配额。 */
.mb-role-panel[hidden] {
  display:none;
}

.mb-role-panel + .mb-role-panel {
  margin-top:var(--sp-5);
}

.mb-role-tabs.is-tabs-ready .mb-role-panel + .mb-role-panel {
  margin-top:0;
}

.mb-role-panel__device {
  width:min(100%,150px);
  margin:auto;
}

.mb-roles__supplement {
  margin:var(--sp-6) 0;
  padding:var(--sp-5);
  border-left:2px solid var(--brand-500);
  background:var(--bg-0);
}

.mb-platform-notes {
  display:grid;
  margin:0;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:1px;
  overflow:hidden;
  border:1px solid var(--line-1);
  border-radius:var(--r-md);
  background:var(--line-1);
}

.mb-platform-notes div {
  padding:var(--sp-4);
  background:var(--bg-0);
}

.mb-platform-notes dt {
  color:var(--fg-3);
  font-size:var(--fs-xs);
}

.mb-platform-notes dd {
  margin:0;
  font:var(--fs-sm) var(--font-num);
}

/* 外框统一由 .shot / .shot--tight 提供；这里只留外边距。 */
.mb-phone-shot,
.mb-pos__visual,
.mb-print__visual,
.mb-ipad__visual {
  margin:var(--sp-8) auto 0;
}

.mb-phone-shot,
.mb-pos__visual {
  width:min(100%,250px);
}

.mb-print__cards .card,
.mb-ipad__extras .card,
.mb-app {
  height:100%;
}

.mb-pos__heading {
  display:flex;
  flex-wrap:wrap;
  align-items:flex-start;
  gap:var(--sp-3);
}

.mb-report-group {
  padding:var(--sp-5);
  border-left:2px solid var(--line-brand);
}

.mb-report-group h3 {
  font-size:var(--fs-h4);
}

.mb-report-group p,
.mb-reports__catalog,
.mb-ipad__closing p {
  margin:0;
  color:var(--fg-2);
}

.mb-reports__catalog {
  margin-top:var(--sp-6);
  padding-top:var(--sp-6);
  border-top:1px solid var(--line-1);
}

/* 与同节其他块对齐：撑满内容宽度，不再限宽 980。 */
.mb-ipad__visual {
  max-width:none;
}

.mb-ipad__steps,
.mb-ipad__extras,
.mb-ipad__closing {
  margin-top:var(--sp-8);
}

.mb-ipad__scope {
  margin:var(--sp-8) 0 0;
  padding:var(--sp-4);
  border:1px solid var(--line-gold);
  border-radius:var(--r-md);
  color:var(--gold-300);
  text-align:center;
}

.mb-ipad__closing {
  display:grid;
  padding-top:var(--sp-8);
  align-items:center;
  gap:var(--sp-5);
  border-top:1px solid var(--line-1);
}

.mb-app {
  display:flex;
  flex-direction:column;
}

.mb-app .btn {
  width:100%;
  margin-top:var(--sp-6);
}/* The stacked phone composition should leave the next section discoverable
   on compact phone viewports. A full-width 420px square dominates 390px
   screens and pushes the role preview below the fold. */
@media (max-width:639px) {
  .mb-hero {
    padding-top:calc(var(--nav-h) + var(--sp-6));
    padding-bottom:var(--sp-6);
  }

  .mb-hero__layout {
    gap:var(--sp-6);
  }

  .mb-hero__devices {
    width:min(100%,300px);
  }

  .mb-hero .hero__actions {
    gap:var(--sp-2);
  }

  .mb-hero .hero__actions .btn {
    --h:48px;
  }
}

@media (max-width:359px) {
  .mb-hero__devices {
    width:min(100%,250px);
  }
}

@media (min-width:640px) {
  .mb-role-panel {
    grid-template-columns:minmax(0,1fr) 180px;
    gap:var(--sp-10);
  }
  .mb-role-todos {
    grid-template-columns:repeat(4,minmax(0,1fr));
  }
  .mb-platform-notes {
    grid-template-columns:repeat(4,minmax(0,1fr));
  }
  .mb-ipad__closing {
    grid-template-columns:minmax(0,1fr) auto;
  }
}

@media (min-width:640px) and (max-width:759px) {
  .mb-hero__devices {
    width: min(100%,360px);
  }
}

@media (min-width:900px) {
  .mb-hero__layout,
  .mb-scan__layout,
  .mb-pos__layout,
  .mb-reports__layout {
    grid-template-columns:minmax(0,7fr) minmax(260px,5fr);
  }
  .mb-ipad__steps {
    grid-template-columns:repeat(3,minmax(0,1fr));
  }
  .mb-ipad__steps .flow__item::after {
    top:50%;
    right:calc(-1 * var(--sp-4));
    bottom:auto;
    transform:translateY(-50%) rotate(-45deg);
  }
}

@media (prefers-reduced-motion:reduce) {
  .mb-device {
    transform:none;
  }
}