/* Products menu cards that play in CSS only, so no script loads on every page. */

/* Models & hardware: the page's "What it takes to run" card stepping through four models, 4 s each. */
.mh-mcard{position:absolute;inset:0;display:flex;flex-direction:column;background:var(--bg);color:var(--fg);border:1px solid var(--line);border-radius:8px;overflow:hidden}
.mh-mcard-top{padding:10px 14px;border-bottom:1px solid var(--line);font-size:11px;color:var(--muted)}
.mh-mcard-slides{position:relative;flex:1}
.mh-mcard-slide{position:absolute;inset:0;padding:22px 24px;opacity:0;animation:mh-mcard 16s ease infinite both;animation-delay:calc(var(--i) * 4s)}
.mh-mcard-use{margin:0;font-size:11px;line-height:16px;color:var(--muted)}
.mh-mcard-name{margin:6px 0 0;font-size:26px;line-height:32px;font-weight:450;letter-spacing:-.025em}
.mh-mcard-for{margin:6px 0 0;font-size:13px;line-height:19px;color:var(--muted);min-height:38px}
.mh-mcard-mem{display:flex;justify-content:space-between;align-items:baseline;margin:20px 0 0;font-size:12px;color:var(--muted)}
.mh-mcard-mem b{color:var(--fg);font-size:14px;font-weight:500}
.mh-mcard-gauge{position:relative;display:block;height:9px;margin-top:10px}
.mh-mcard-gauge::before{content:'';position:absolute;left:0;right:0;top:4px;height:1px;background:var(--line)}
.mh-mcard-gauge i{position:absolute;left:0;top:4px;width:100%;height:1px;background:var(--fg);transform-origin:left;transform:scaleX(var(--p));animation:mh-mcard-fill 16s cubic-bezier(.22,1,.36,1) infinite both;animation-delay:calc(var(--i) * 4s)}
.mh-mcard-gauge b{position:absolute;top:0;left:calc(var(--p) * 100%);width:9px;height:9px;margin-left:-4.5px;border-radius:50%;background:var(--ip-accent,#00d4ff);box-shadow:0 0 0 3px var(--bg);animation:mh-mcard-dot 16s cubic-bezier(.22,1,.36,1) infinite both;animation-delay:calc(var(--i) * 4s)}
.mh-mcard dl{margin:18px 0 0}
.mh-mcard dl div{display:grid;grid-template-columns:88px minmax(0,1fr);gap:12px;padding:8px 0;border-top:1px solid var(--line);font-size:12px;line-height:17px}
.mh-mcard dt{color:var(--muted)}
.mh-mcard dd{margin:0}
@keyframes mh-mcard{0%{opacity:0;transform:translateY(4px)}3%,22%{opacity:1;transform:none}25%,100%{opacity:0;transform:none}}
@keyframes mh-mcard-fill{0%,4%{transform:scaleX(0)}14%,100%{transform:scaleX(var(--p))}}
@keyframes mh-mcard-dot{0%,4%{left:0}14%,100%{left:calc(var(--p) * 100%)}}
@media(prefers-reduced-motion:reduce){.mh-mcard-slide,.mh-mcard-gauge i,.mh-mcard-gauge b{animation:none}.mh-mcard-slide[style*="--i:0"]{opacity:1}}

/* Bridge mobile: the real iPhone (the /bridge phone frame) with a chat playing on its screen. The lines reuse the
   Bridge card's timing (bridge-menu.css: bx-menu-line, appearing in turn on an 18 s loop). Screen positions are the
   phone frame's own (scripts/bridge-page-frames.mjs). */
.bm-menu{position:absolute;inset:0;display:flex;justify-content:center;background:var(--surface);border:1px solid var(--line);border-radius:8px;overflow:hidden}
.bm-menu-phone{position:relative;flex:none;width:300px;height:fit-content;margin-top:18px;container-type:inline-size;--u:calc(100cqw * 1206 / 1306 / 402);--ink:#0d0d0d;--dim:#77777c;--bubble:#ececee;--edge:#e6e6e8;--screen:#fff}
.bm-menu-phone img{display:block;width:100%;height:auto}
.bm-menu-dark{display:none!important}
.bm-menu-screen{position:absolute;inset:0}
.bm-menu-title{position:absolute;left:20.8%;top:8.9%;width:48.7%;height:5%;margin:0;padding-left:calc(2 * var(--u));display:flex;flex-direction:column;justify-content:center;background:var(--screen)}
.bm-menu-title b{font-size:calc(17 * var(--u));line-height:1.25;font-weight:600;color:var(--ink);white-space:nowrap}
.bm-menu-title small{font-size:calc(13 * var(--u));line-height:1.25;color:var(--dim);white-space:nowrap}
.bm-menu-chat{position:absolute;left:3.8%;width:92.3%;top:18.5%;height:69%;display:flex;flex-direction:column;gap:calc(14 * var(--u));padding:calc(14 * var(--u)) calc(18 * var(--u));background:var(--screen);overflow:hidden}
.bm-menu-chat p{margin:0;max-width:92%;font-size:calc(17 * var(--u));line-height:1.45;color:var(--ink)}
.bm-menu-chat .bm-menu-user{align-self:flex-end;max-width:72%;padding:calc(12 * var(--u)) calc(16 * var(--u));border-radius:calc(22 * var(--u));background:var(--bubble)}
.bm-menu-chat .bm-menu-action{display:flex;align-items:center;gap:calc(6 * var(--u));color:var(--dim);font-size:calc(16 * var(--u))}
.bm-menu-chat .bm-menu-action::after{content:'';width:calc(6 * var(--u));height:calc(6 * var(--u));border:solid currentColor;border-width:1.2px 1.2px 0 0;transform:rotate(45deg)}
.bm-menu-chat .bm-menu-action.is-created{align-self:stretch;max-width:100%;gap:calc(12 * var(--u));padding:calc(12 * var(--u)) calc(14 * var(--u));border:1px solid var(--edge);border-radius:calc(14 * var(--u));color:var(--ink);font-weight:500}
.bm-menu-chat .bm-menu-action.is-created::after{display:none}
.bm-menu-chat .bm-menu-action.is-created::before{content:'';flex:none;width:calc(30 * var(--u));height:calc(30 * var(--u));border-radius:calc(8 * var(--u));background:var(--bubble) no-repeat center/45% url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238e8e93' stroke-width='1.8' stroke-linejoin='round'%3E%3Cpath d='M6 3h8l4 4v14H6z'/%3E%3Cpath d='M14 3v4h4M9 13h6M9 17h4'/%3E%3C/svg%3E")}
:root[data-theme=dark] .bm-menu-phone{--ink:#f2f2f2;--dim:#8e8e93;--bubble:#2a2a2c;--edge:#2f2f31;--screen:#000}
:root[data-theme=dark] .bm-menu-light{display:none!important}:root[data-theme=dark] .bm-menu-dark{display:block!important}
@media(prefers-color-scheme:dark){:root:not([data-theme=light]) .bm-menu-phone{--ink:#f2f2f2;--dim:#8e8e93;--bubble:#2a2a2c;--edge:#2f2f31;--screen:#000}:root:not([data-theme=light]) .bm-menu-light{display:none!important}:root:not([data-theme=light]) .bm-menu-dark{display:block!important}}