/* ============================================================================
   AI HEALTH, LIVE — Office page, AI health section. After Metronome's hero.

   Metronome: a browser dashboard over a colour video; its charts draw left to
   right (clip-path inset(0 100% 0 0) to 0), then two floating cards rise in from
   opacity 0 / translateY(16px), staggered; a donut sits in the notification.
   Kept on a fixed 1120x600 stage. The video becomes a CSS gradient that drifts.
   Builder-safe: no keyframes here (HEALTH block in css/motion.css). Resting state
   is the finished frame.
   ========================================================================== */

.mt-band{overflow:hidden}   /* a stale --s can never widen the page */
.mt{--s:1;position:relative;max-width:100%;width:calc(1120px * var(--s));height:calc(600px * var(--s));margin:34px auto 0}
.mt-stage{position:absolute;left:0;top:0;width:1120px;height:600px;transform:scale(var(--s));transform-origin:0 0;
  border-radius:8px;overflow:hidden;contain:layout paint;font-family:var(--ui);color:var(--ink);background:#d6dcf4}
.mt-foot{margin:14px auto 0;text-align:center;font-size:12.5px;color:var(--t4)}
.mt-bg{position:absolute;left:-15%;top:-15%;width:130%;height:130%;display:block;
  background:radial-gradient(520px 420px at 12% 18%,rgba(43,179,217,.85),transparent 70%),
             radial-gradient(560px 460px at 88% 22%,rgba(79,190,150,.55),transparent 70%)   /* the logo green, not purple */,
             radial-gradient(640px 520px at 70% 92%,rgba(41,70,182,.85),transparent 72%),
             radial-gradient(520px 420px at 20% 90%,rgba(145,161,224,.9),transparent 70%),#c9d1f0}
/* JS plays it on arrival; without JS these never match and the frame is whole */
.js .mt:not(.go) .mt-seat,.js .mt:not(.go) .mt-note,.js .mt:not(.go) .mt-sb,.js .mt:not(.go) .mt-late,.js .mt:not(.go) .mt-ann{opacity:0}
.js .mt:not(.go) .mt-sa{opacity:1}
.js .mt:not(.go) .mt-plot{clip-path:inset(0 100% 0 0)}

/* ---- the browser: the Office Overview as it looks in the product ----------
   Light sidebar, a breadcrumb bar with the two actions, the greeting, then AI
   health as the app lays it out: Productivity and AI usage cards, each with its
   figure, a trend pill, a line of context and the chart; the workforce below. */
.mt-win{position:absolute;left:80px;top:56px;width:940px;height:600px;border-radius:8px;overflow:hidden;
  background:#fafbfc;border:1px solid rgba(255,255,255,.6);
  /* glass frame, as on the home hero shot: a translucent white band with bright hairlines,
     drawn as box-shadow rings so the window and its callouts keep their positions */
  box-shadow:0 0 0 1px rgba(255,255,255,.3),0 0 0 14px rgba(255,255,255,.2),0 0 0 15px rgba(255,255,255,.45),0 34px 70px -30px rgba(2,37,79,.45)}
.mt-win>span{position:absolute;display:block}
.mt-bar{left:0;top:0;width:100%;height:34px;display:flex !important;align-items:center;justify-content:center;
  background:#f3f5f8;border-bottom:1px solid var(--line)}
.mt-dots{position:absolute;left:14px;top:12px;display:flex;gap:6px}
.mt-dots i{display:block;width:10px;height:10px;border-radius:50%;background:#dbe3ed}
.mt-url{display:flex;align-items:center;gap:6px;width:300px;height:22px;justify-content:center;border-radius:5px;
  background:#fff;border:1px solid var(--line);font-size:11.5px;color:var(--mute)}

.mt-side{left:0;top:34px;bottom:0;width:188px;padding:14px 12px;background:#fff;border-right:1px solid #e6edf5;display:flex !important;flex-direction:column;gap:1px}
.mt-mark{display:block;height:19px;margin:0 6px 12px;background:url(../assets/img/manelink-wordmark.svg) no-repeat left center/contain}
.mt-ws{position:relative;display:block;margin-bottom:8px;padding:7px 10px;border:1px solid #e1e8f1;border-radius:6px;font-size:12.5px;font-weight:500;color:var(--ink)}
.mt-ws::after{content:"";position:absolute;right:11px;top:11px;width:5px;height:5px;border:solid #46556b;border-width:0 1.5px 1.5px 0;transform:rotate(45deg)}
.mt-find{position:relative;display:flex;align-items:center;margin-bottom:8px;padding:6px 8px 6px 28px;border:1px solid #e1e8f1;border-radius:6px;background:#f7f9fc;font-size:12px;color:var(--t4)}
.mt-find::before{content:"";position:absolute;left:10px;top:9px;width:8px;height:8px;border:1.5px solid #8793a6;border-radius:50%}
.mt-find::after{content:"";position:absolute;left:18px;top:18px;width:4px;height:1.5px;background:#8793a6;transform:rotate(45deg)}
.mt-find em{margin-left:auto;padding:1px 5px;border:1px solid #e1e8f1;border-radius:4px;background:#fff;font-style:normal;font-size:10px;color:#46556b}
.mt-grp{display:block;margin:10px 0 3px;padding:0 10px;font-size:10.5px;font-weight:500;letter-spacing:.04em;color:#6b778a}
.mt-nav{display:flex;align-items:center;gap:10px;height:27px;padding:0 10px;border-radius:6px;font-size:12.5px;color:#1c2636}
.mt-nav img{filter:grayscale(1) brightness(.5);opacity:.85}
.mt-nav em{margin-left:auto;font-style:normal;font-size:11.5px;color:#46556b}
.mt-nav em.mt-red{color:#e5484d}
.mt-nav.on{background:#eaf0f8;color:#040d1c;font-weight:500}
.mt-nav.on img{filter:none;opacity:1}

.mt-top{left:188px;right:0;top:34px;height:46px;display:flex !important;align-items:center;gap:8px;padding:0 18px;border-bottom:1px solid #e6edf5}
.mt-crumb{margin-right:auto;font-size:13px;color:#6b778a}
.mt-crumb b{margin-left:4px;font-weight:500;color:var(--navy)}
.mt-tb{padding:5px 11px;border:1px solid #e1e8f1;border-radius:6px;background:#fff;font-size:12px;font-weight:500;color:var(--ink)}
.mt-tb.mt-tp{border-color:var(--blue);background:var(--blue);color:#fff}
.mt-hi{left:212px;top:96px;display:flex !important;flex-direction:column;gap:3px;font:600 22px/1.15 var(--display);color:#0b1220}
.mt-hi small{font:400 12.5px var(--ui);color:#3d4a5c}

.mt-sh2{left:212px;right:24px;top:158px;display:flex !important;align-items:baseline;gap:8px}
.mt-sh2 b{font-size:14px;font-weight:600;color:var(--navy)}
.mt-sh2 small{font-size:12px;color:#46556b}
.mt-sh2 em{margin-left:auto;font-size:12px;font-style:normal;color:var(--blue)}
.mt-sh3{top:436px}

.mt-card{top:184px;width:346px;height:236px;display:flex !important;flex-direction:column;padding:14px 16px;border:1px solid #e4ecf5;border-radius:8px;background:#fff}
.mt-c1{left:212px}
.mt-c2{left:570px}
.mt-ch{display:flex;align-items:baseline}
.mt-ch b{font-size:14px;font-weight:600;color:var(--navy)}
.mt-ch em{margin-left:auto;font-size:12px;font-style:normal;color:#3d4a5c}
.mt-kpi{display:flex;align-items:baseline;gap:8px;margin-top:10px}
.mt-kpi strong{font:600 26px/1 var(--display);letter-spacing:-.01em;color:var(--navy)}
.mt-kpi small{font-size:12.5px;color:#3d4a5c}
.mt-pill{margin-left:auto;align-self:center;padding:3px 9px;border:1px solid #e1e8f1;border-radius:999px;background:#fff;font:500 11px var(--ui);font-style:normal;color:var(--ink)}
.mt-up,.mt-dn{color:var(--ink)}
.mt-sub{display:block;margin-top:8px;font-size:11.5px;color:#6b778a}
.mt-chart{display:flex;flex:1 1 auto;margin-top:12px;min-height:0}
.mt-plot{position:relative;flex:1;background-repeat:no-repeat,repeat-y;background-position:center,0 0;background-size:100% 100%,100% 33.33%}
.mt-prod{background-image:url(../assets/art/mt-prod.svg),linear-gradient(180deg,rgba(208,221,236,.6) 1px,transparent 1px)}
.mt-cost{background-image:url(../assets/art/mt-cost.svg),linear-gradient(180deg,rgba(208,221,236,.6) 1px,transparent 1px)}
.mt-end{position:absolute;right:-5px;display:block;width:10px;height:10px;border-radius:50%;background:var(--blue);border:2px solid #fff;
  box-shadow:0 0 0 0 rgba(41,70,182,.45)}
.mt-prod .mt-end{top:calc(16.7% - 5px)}   /* the last point of the productivity curve */
.mt-cost .mt-end{top:calc(56.7% - 5px)}   /* the last point of the cost curve */

.mt-seats{left:212px;right:24px;top:462px;display:grid !important;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.mt-sc{display:flex;align-items:center;gap:10px;height:48px;padding:0 12px;border:1px solid #e4ecf5;border-radius:8px;background:#fff}
.mt-sc>i{position:relative;flex:0 0 auto;width:28px;height:28px;border-radius:50%;background-size:cover;background-position:center;background-color:var(--sky)}
.mt-sc>i.mt-run::after{content:"";position:absolute;right:-2px;bottom:-2px;width:8px;height:8px;border-radius:50%;border:2px solid #fff;background:#1f9d6b}
.mt-sc>span{display:flex;flex-direction:column;gap:1px;min-width:0}
.mt-sc b{font-size:12.5px;font-weight:600;color:var(--ink)}
.mt-sc small{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:11.5px;color:#46556b}

/* ---- the story's parts. Rest (JS or motion off) is the END: after-values, the
   "under the median" marker, both cards, the stage unlocked. -------------------- */
.mt-sw{display:inline-grid}
.mt-sw>span{grid-area:1/1}
.mt-sa{opacity:0}
.mt-med{position:absolute;left:0;right:0;top:40%;height:0;border-top:1.5px dashed #9aa7b8}   /* the median, $0.48 */
.mt-medl{position:absolute;right:0;top:calc(40% - 17px);font:500 10.5px var(--ui);font-style:normal;color:#6b778a}
.mt-ann{position:absolute;padding:4px 9px;border-radius:6px;background:#fff;border:1px solid #e4ecf5;font:600 11px var(--ui);font-style:normal;white-space:nowrap;
  color:var(--navy);box-shadow:0 8px 18px -8px rgba(2,37,79,.3)}
.mt-a1{left:6%;top:calc(33% + 8px);opacity:0}
.mt-a1::before,.mt-a2::before{content:"";position:absolute;left:12px;top:-4px;width:7px;height:7px;border-radius:50%;background:var(--blue);box-shadow:0 0 0 2px #fff}
.mt-a2{left:34%;top:calc(40% + 10px);background:#e7f6ee;border-color:#cdebd9;color:var(--green)}
.mt-a2::before{background:var(--green)}
.mt-unl{font-weight:600;color:var(--green) !important}

/* ---- the floating cards ------------------------------------------------- */
.mt-seat,.mt-note{position:absolute;z-index:3;border-radius:8px;background:#fff;overflow:hidden;
  box-shadow:0 26px 50px -22px rgba(2,37,79,.42),0 6px 16px -8px rgba(2,37,79,.16)}
.mt-seat{left:790px;top:176px;width:310px;padding:12px}
.mt-tiles{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.mt-tile{display:flex;flex-direction:column;gap:2px;padding:10px 12px;border-radius:6px;background:var(--cloud)}
.mt-tile small{font-size:10.5px;color:var(--t4)}
.mt-tile small+b,.mt-tile b+small{margin-top:1px}
.mt-tile b{font-size:13.5px;font-weight:600;color:var(--navy);line-height:1.25}
.mt-tile b+small{margin-top:8px}
.mt-sm{font-size:13px}
.mt-prog{position:relative;display:block;height:6px;margin-top:6px;border-radius:4px;background:#e7e9f4}
.mt-prog i{position:absolute;left:0;top:0;bottom:0;width:100%;display:block;border-radius:4px;background:var(--blue)}
.mt-rate{display:block;margin-top:8px;padding:10px 12px;border-radius:6px;background:var(--cloud)}
.mt-rr{display:grid;grid-template-columns:1.35fr 1fr .9fr .8fr;gap:6px;font-size:11.5px;color:var(--ink)}
.mt-rh{margin-bottom:6px;font-size:10.5px;color:var(--t4)}
.mt-win2{color:var(--blue-d);font-weight:600}
.mt-note{left:28px;top:432px;width:340px}   /* laid over the Productivity chart, deliberately */
.mt-nh{display:flex;justify-content:space-between;align-items:center;padding:10px 16px;background:var(--sky);font-size:12px;color:var(--ink)}
.mt-nh span:first-child{display:flex;align-items:center;gap:7px}
.mt-nb{display:flex;align-items:center;gap:14px;padding:16px}
.mt-nb>span{display:flex;flex-direction:column;gap:10px;flex:1}
.mt-nb b{font-size:15px;font-weight:500;line-height:1.35;color:var(--ink)}
.mt-nb small{font-size:10.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--t4)}
.mt-donut{flex:none;display:block;width:84px;height:84px;background:url(../assets/art/mt-donut.svg) no-repeat center/100% 100%}


/* ---- breakpoints: a floor for --s; the page script sets the exact fit ---- */
@media (max-width:991px){ .mt{--s:.64} }
@media (max-width:767px){ .mt{--s:.38} }
@media (max-width:479px){ .mt{--s:.25} }

/* the three target cards sit under the dashboard (product page) */
.mt-nums{margin-top:40px}
.mt-hero .mt{margin-top:0}
/* no backdrop of its own: the window and its glass frame sit on the page's blue fade */
.mt-stage{background:transparent}
.mt-bg{display:none}