/* Product stage: the live app on a macOS-style desktop. No drawn hardware, so the app itself is
   the subject and stays readable; it settles into place once as it scrolls into view. */
.stage{max-width:none}
.stage .section-bar{margin-bottom:0;gap:8px;justify-content:center;text-align:center}
.stage .screen-tabs{margin:18px auto 22px;position:relative;z-index:3}
.stage .capture-caption{margin:18px auto 0;max-width:760px;text-align:center}

.stage-frame{position:relative;width:var(--W,1180px);height:calc(var(--W,1180px) * .70);margin:0 auto;border-radius:28px;overflow:hidden;
  box-shadow:0 50px 120px -30px #000c,0 0 0 1px #ffffff1f;isolation:isolate;
  opacity:0;transform:translateY(48px) scale(.965);transition:opacity .9s cubic-bezier(.2,.8,.2,1),transform 1.1s cubic-bezier(.2,.8,.2,1)}
.stage-frame.is-in{opacity:1;transform:none}
/* the window opens a beat after the desktop arrives, like launching the app */
.stage-frame .mbx-slot{opacity:0;transform:translateY(18px) scale(.94);transition:opacity .6s .35s,transform .9s .35s cubic-bezier(.2,.9,.25,1)}
.stage-frame.is-in .mbx-slot{opacity:1;transform:none}

/* 1280-wide design surface, scaled to the frame */
.stage-frame .mbx-desktop{position:absolute;left:0;top:0;width:1280px;height:896px;transform-origin:0 0;transform:scale(var(--ds,.92));
  background:radial-gradient(900px 640px at 16% 8%,#7fb6ff 0%,#0000 60%),radial-gradient(820px 640px at 92% 86%,#f4a6da 0%,#0000 62%),radial-gradient(760px 520px at 72% 6%,#ab98f4 0%,#0000 60%),linear-gradient(160deg,#3f66c9,#7a4fc1 55%,#c6609f)}
.stage-frame .mbx-desktop:after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,#0000 55%,#0003)}
.mbx-menubar{position:absolute;left:0;right:0;top:0;height:34px;display:flex;align-items:center;gap:18px;padding:0 20px;font-size:15px;color:#fff;background:#ffffff26;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);z-index:2;font-weight:500}
.mbx-menubar span,.mbx-menubar b{white-space:nowrap}.mbx-menubar b{font-weight:700}.mbx-menubar .sp{flex:1}
.mbx-menubar .mb-i{display:inline-flex;align-items:center}
.mbx-menubar .mb-status{display:inline-flex;align-items:center;gap:7px;cursor:pointer;border-radius:8px;padding:3px 8px;margin:-3px -8px;position:relative;outline:none}
.mbx-menubar .mb-status img{display:inline-block;width:18px;height:18px;border-radius:5px;margin:0}
.mbx-menubar .mb-status em{font-style:normal;font-variant-numeric:tabular-nums;font-weight:600}
.mbx-menubar .mb-status:hover,.mbx-menubar .mb-status.is-open,.mbx-menubar .mb-status:focus-visible{background:#ffffff40}
.mbx-menubar .mb-status.pulse:after{content:"";position:absolute;inset:-2px;border-radius:10px;border:2px solid #fff;opacity:0;animation:mpPulse 1.8s ease-out infinite}
@keyframes mpPulse{0%{opacity:.9;transform:scale(1)}100%{opacity:0;transform:scale(1.7)}}

.stage-frame .mbx-slot{position:absolute;left:30px;top:56px;width:1220px;height:812px;z-index:3}
.mbx-slot .app-embed{height:100%;width:100%;margin:0;border-radius:0;overflow:visible;box-shadow:none;transform:none!important}
.mbx-slot .mm-app{position:relative;height:100%}
/* The demo window keeps one design size and scales as a unit; its content scrolls inside,
   as in the real app, instead of being shrunk to fit. */
.mbx-slot .mm-window{position:absolute;left:50%;top:50%;width:1180px;height:800px;display:flex;flex-direction:column;transform:translate(-50%,-50%);transform-origin:center;
  border-radius:14px;box-shadow:0 40px 90px #0008,0 0 0 1px #ffffff2a}
.mbx-slot .mm-viewport{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:auto;scrollbar-width:thin;scrollbar-color:#8886 transparent;background:var(--mm-canvas)}
.mbx-slot .mm-viewport .mm-content{min-height:0;max-height:none;margin:0 auto;transform:none}
.mbx-slot .mm-lens-folder-list{max-height:none;overflow:visible}

/* the mock desktop is a picture of a screen: nothing on it is selectable */
.mbx-menubar,.mbx-menubar *,.mp,.mp *{-webkit-user-select:none;user-select:none}

/* MacMonitor menu bar panel (opens from the status item) */
.mp{--mp-bg:#141417f2;--mp-card:#1e1f24;--mp-text:#f5f5f7;--mp-muted:#9a9aa3;--mp-track:#2a2b32;--mp-line:#ffffff1f;
  position:absolute;right:150px;top:40px;width:392px;border-radius:22px;padding:14px;background:var(--mp-bg);color:var(--mp-text);
  box-shadow:0 30px 70px #0008,0 0 0 1px var(--mp-line);backdrop-filter:blur(24px) saturate(1.5);-webkit-backdrop-filter:blur(24px) saturate(1.5);z-index:4;font:13px/1.25 -apple-system,"SF Pro Text",system-ui,sans-serif;
  transform-origin:88% 0;transform:scale(.9) translateY(-8px);opacity:0;pointer-events:none;transition:opacity .22s,transform .3s cubic-bezier(.2,.9,.3,1.15)}
:root[data-theme=light] .mp{--mp-bg:#f6f5faf2;--mp-card:#fff;--mp-text:#17171a;--mp-muted:#6b6b76;--mp-track:#e8e6ef;--mp-line:#0000001a}
.mp.is-open{opacity:1;transform:none;pointer-events:auto}
.stage-frame .mp{max-height:840px}
.mp-tabs{position:relative;display:flex;gap:3px;padding:4px;border-radius:16px;background:var(--mp-card)}
.mp-hl{position:absolute;top:4px;left:4px;height:30px;width:calc((100% - 8px - 9px)/4);border-radius:12px;background:#f5f5f7;transition:transform .35s cubic-bezier(.3,.9,.3,1),background .3s}
:root[data-theme=light] .mp-hl{background:#d8e8fb}
.mp-tabs button{position:relative;z-index:1;flex:1;height:30px;border:0;background:none;color:var(--mp-muted);font-size:14px;cursor:pointer;border-radius:12px;font-family:inherit}
.mp-tabs button.is-on{color:#17171a}
.mp-body{position:relative;margin-top:10px;height:318px}
.mp-page{position:absolute;inset:0;opacity:0;transform:translateY(8px);pointer-events:none;transition:opacity .3s,transform .3s}
.mp-page.is-on{opacity:1;transform:none;pointer-events:auto}
.mp-insight{display:flex;justify-content:space-between;gap:10px;background:#e0b43e;color:#17171a;border-radius:14px;padding:12px 14px;font-weight:700;font-size:13px}
.mp-card{background:var(--mp-card);border-radius:16px;padding:4px 12px;margin-top:8px}
.mp-row{display:flex;align-items:center;gap:10px;min-height:48px;border-bottom:1px solid var(--mp-line);transition:opacity .3s,transform .3s,max-height .3s,min-height .3s}
.mp-row:last-child{border-bottom:0}
.mp-dot{flex:none;width:26px;height:26px;border-radius:8px;display:grid;place-items:center;color:#17171a;font-size:13px}
.mp-name{flex:1;font-weight:600;min-width:0}.mp-name small{display:block;font-weight:400;color:var(--mp-muted);font-size:11px;margin-top:1px}
.mp-bar{flex:none;width:58px;height:5px;border-radius:3px;background:var(--mp-track);overflow:hidden}.mp-bar i{display:block;height:100%;background:var(--c)}
.mp-val{flex:none;min-width:48px;text-align:right;font:600 12px ui-monospace,Menlo,monospace}
.mp-x{flex:none;width:22px;height:22px;border-radius:11px;border:0;background:var(--mp-track);color:var(--mp-muted);font-size:10px;cursor:pointer;display:grid;place-items:center}
.mp-x:hover{background:#e5484d;color:#fff}
.mp-row.gone{opacity:0;transform:translateX(24px);min-height:0;max-height:0;overflow:hidden;border:0}
.mp-big{font-size:40px;font-weight:800;letter-spacing:-.03em;line-height:1}.mp-big small{font-size:14px;font-weight:600;color:var(--mp-muted);margin-left:4px}
.mp-sub{color:var(--mp-muted);font-size:11px;margin-top:4px}
.mp-spark{display:block;width:100%;height:46px;margin-top:8px}.mp-spark path{fill:none;stroke:var(--c);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.mp-foot{display:flex;align-items:center;gap:12px;margin-top:10px}
.mp-open{flex:1;height:34px;border-radius:17px;border:0;background:#f5f5f7;color:#17171a;font:700 13px inherit;font-family:inherit;cursor:pointer}
:root[data-theme=light] .mp-open{background:#17171a;color:#fff}
.mp-foot span{color:var(--mp-muted);font-size:17px}

/* narrow windows: the app on its own, no desktop */
.stage-plain{display:none;width:100%}
.stage.is-plain .stage-frame{display:none}
.stage.is-plain .stage-plain{display:block}

@media (prefers-reduced-motion:reduce){
  .stage-frame,.stage-frame .mbx-slot{opacity:1;transform:none;transition:none}
  .mbx-menubar .mb-status.pulse:after{animation:none}
}