/* Bento wall preview: same tiles, positions and crops as the promo film, scaled as one board. */
.bento-wall {
  /* board content is 3440 x 2040 design px; outer tiles sit flush with the section edges; fit the width and keep it within one screen */
  --ratio: 3440 / 2040;
  position: relative;
  width: min(1320px, 100%, calc((100svh - 120px) * 3440 / 2040));
  aspect-ratio: var(--ratio);
  margin: 40px auto 0;
}
.bento-board { position: absolute; left: 0; top: 0; width: 3440px; height: 2040px; transform-origin: 0 0; }

.bento-board .tile { position: absolute; border-radius: 44px; background: #fff; overflow: hidden;
  box-shadow: 0 2px 0 rgba(0,0,0,.02), 0 40px 80px -40px rgba(80,50,30,.28), inset 0 0 0 1px rgba(0,0,0,.04); }
.bento-board .hd { position: absolute; left: 64px; top: 56px; right: 64px; z-index: 3; }
.bento-board .no { display: inline-flex; align-items: center; gap: 14px; font-size: 26px; font-weight: 700; letter-spacing: .14em; color: #e5574f; }
.bento-board .no b { display: inline-grid; place-items: center; width: 52px; height: 52px; border-radius: 16px; background: #fff0ec; letter-spacing: 0; font-size: 24px; }
.bento-board .tt { margin: 22px 0 0; font-size: 66px; font-weight: 800; letter-spacing: .04em; line-height: 1.18; color: #111; word-break: break-all; }
.bento-board .tt em { font-style: normal; background: linear-gradient(90deg, #e5574f, #ff8a6b); -webkit-background-clip: text; background-clip: text; color: transparent; }
.bento-board .sb { margin: 16px 0 0; font-size: 30px; color: #8a8580; letter-spacing: .06em; line-height: 1.55; word-break: break-all; }
.bento-board .side .hd { right: auto; width: 38%; top: 50%; transform: translateY(-50%); }
.bento-board .shot { position: absolute; overflow: hidden; border-radius: 26px; background: #fff; box-shadow: 0 30px 60px -30px rgba(60,40,30,.35), 0 0 0 1px rgba(0,0,0,.05); }
.bento-board .shot img { position: absolute; left: 0; top: 0; width: 1440px; height: 900px; max-width: none; transform-origin: 0 0; }
.bento-board .cover { position: absolute; }
.bento-board .cover img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 9%, #000 91%, transparent 100%), linear-gradient(to bottom, transparent 0%, #000 7%, #000 90%, transparent 100%);
  -webkit-mask-composite: source-in; mask-composite: intersect; }
.bento-board .chip { position: absolute; padding: 14px 26px; border-radius: 999px; font-size: 26px; font-weight: 700; color: #fff; white-space: nowrap; box-shadow: 0 18px 40px -16px rgba(0,0,0,.45); }
.bento-board .chip.coral { background: linear-gradient(90deg, #e5574f, #ff8a6b); }
.bento-board .chip.green { background: #1f9d6b; }

/* phones: tiles stack, each scaled on its own */
.bento-wall.is-stacked { width: 100%; aspect-ratio: auto; }
.bento-wall.is-stacked .bento-board { position: relative; width: 100%; height: auto; transform: none !important; display: flex; flex-direction: column; gap: 14px; }
.bento-wall.is-stacked .slot { position: relative; width: 100%; }
.bento-wall.is-stacked .tile { left: 0 !important; top: 0 !important; transform-origin: 0 0; }

/* 私有化部署卡片左侧的安全面板，对应宣传片里该卡片演示结束时的画面 */
.bento-board .sec { position: absolute; padding: 22px 26px 18px; border-radius: 28px; background: rgba(255,255,255,.94); box-shadow: 0 30px 60px -26px rgba(60,40,30,.45), 0 0 0 1px rgba(229,87,79,.16); }
.bento-board .sec__hd { display: flex; align-items: center; gap: 16px; padding-bottom: 16px; margin-bottom: 6px; border-bottom: 1px solid #f0eae5; }
.bento-board .sec__hd b { display: block; font-size: 28px; color: #111; letter-spacing: .04em; }
.bento-board .sec__hd span { display: flex; align-items: center; gap: 8px; margin-top: 4px; font-size: 19px; color: #8a8580; }
.bento-board .sec__hd span::before { content: ''; width: 9px; height: 9px; border-radius: 50%; background: #1f9d6b; box-shadow: 0 0 0 4px rgba(31,157,107,.15); }
.bento-board .sec ul { margin: 0; padding: 0; list-style: none; }
.bento-board .sec li { display: flex; align-items: center; gap: 14px; padding: 11px 0; font-size: 23px; font-weight: 700; color: #3a3532; white-space: nowrap; }
.bento-board .sec li i { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: #1f9d6b; color: #fff; font-size: 17px; font-weight: 800; font-style: normal; flex: none; }