/* Hero graphic concepts for /microsoft-time-tracking. Only the right column
   changes: the copy, buttons, nav and gradient are the live page's own.
   All static. Each concept is drawn in the live image's 830 x 720 frame; --u
   is one frame pixel, so the graphic scales with its column like the live
   image does. */

.mh { position: relative; width: 100%; container-type: inline-size; --u: calc(100cqw / 830); }
.mh[hidden] { display: none; }
.mh-stage { position: relative; width: 100%; aspect-ratio: 830 / 720; isolation: isolate; }
.mh-stage > svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }

/* anything placed by its centre in frame pixels */
.mh-at {
  position: absolute; left: calc(var(--x) * var(--u)); top: calc(var(--y) * var(--u));
  width: calc(var(--w) * var(--u)); height: calc(var(--h, var(--w)) * var(--u));
  margin: calc(var(--h, var(--w)) * var(--u) / -2) 0 0 calc(var(--w) * var(--u) / -2);
}

/* app chips (round, like the live graphic) and app tiles (squircles) */
.mh-chip, .mh-tile { display: grid; place-items: center; background: linear-gradient(180deg, #fff 35%, #f5f2fc 100%); }
.mh-chip { border-radius: 50%; box-shadow: 0 calc(12 * var(--u)) calc(28 * var(--u)) rgba(26, 4, 92, .3), 0 calc(2 * var(--u)) calc(5 * var(--u)) rgba(26, 4, 92, .16); }
.mh-tile { border-radius: calc(var(--w) * .24 * var(--u)); box-shadow: 0 calc(14 * var(--u)) calc(30 * var(--u)) rgba(26, 4, 92, .28), 0 calc(2 * var(--u)) calc(5 * var(--u)) rgba(26, 4, 92, .14); }
.mh-chip > img, .mh-tile > img { width: calc(var(--s, .5) * 100%); height: auto; display: block; }

/* the Track app icon: the live graphic's purple disc and white mark */
/* so the purple lifts off the purple-blue ground: a glossy sheen over the
   top, a light rim, and a deep-blue shadow (the old purple one went muddy
   over the blue). No ring or shaded base: together they read as a ledge.
   A flat gradient was tried and dropped (Matt, 2026-10-22) */
.mh-track {
  display: grid; place-items: center; border-radius: 50%;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .3) 0%, rgba(255, 255, 255, .08) 40%, rgba(255, 255, 255, 0) 58%),
    linear-gradient(225deg, #9c58ef 0%, #7536d9 50%, #5b20c8 100%);
  box-shadow:
    inset 0 calc(1.5 * var(--u)) 0 rgba(255, 255, 255, .6),
    inset 0 0 0 1px rgba(255, 255, 255, .3),
    0 calc(20 * var(--u)) calc(44 * var(--u)) rgba(8, 6, 52, .3),
    0 calc(3 * var(--u)) calc(8 * var(--u)) rgba(8, 6, 52, .16);
}
.mh-track > img { width: 60%; height: auto; display: block; }

/* A Grid: launcher tiles; empty frosted tiles fade out inside the frame */
.mh-track.is-tile { border-radius: calc(var(--w) * .2 * var(--u)); }
.mh-track.is-tile > img { width: 46%; }
.mh-track.is-banner { border-radius: calc(30 * var(--u)); }
.mh-track.is-banner > img { width: 54%; }
.mh-ghost { border-radius: calc(var(--w) * .24 * var(--u)); background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .13); }
.mh-field { position: absolute; inset: 0; overflow: hidden; }
.mh-field {
  -webkit-mask: radial-gradient(closest-side, #000 55%, transparent 100%);
  mask: radial-gradient(closest-side, #000 55%, transparent 100%);
}

/* B Fan */
.mh-link { fill: none; stroke: rgba(255, 255, 255, .32); stroke-width: 1.3; }
.mh-node { fill: #fff; opacity: .85; }
.mh-halo { fill: rgba(255, 255, 255, .05); stroke: rgba(255, 255, 255, .18); stroke-width: 1.2; }

/* the render page: one frame, transparent, at 1 frame pixel = 1px */
.mh-render { width: 830px; }

/* the concept page shows each option as a plain image, like the live one */
.mh-img { display: block; width: 100%; height: auto; }

/* where the hero stacks (Webflow's 991px breakpoint and down) the image would
   fall under the copy: it goes instead, for every option and Live (Matt,
   2026-10-22; the live page still shows it there) */
@media screen and (max-width: 991px) { .hero-lr__r { display: none; } }

/* the concept switcher (designer chrome, not page content) */
.mh-switch {
  position: fixed; left: 16px; bottom: 16px; z-index: 1000;
  display: flex; align-items: center; gap: 4px; padding: 5px;
  background: #16112a; border-radius: 10px; box-shadow: 0 8px 24px rgba(0, 0, 0, .3);
  font: 500 13px/1 Saans, system-ui, sans-serif;
}
.mh-switch__label { color: #9b93b8; padding: 0 8px 0 6px; }
.mh-switch a { color: #fff; text-decoration: none; padding: 8px 10px; border-radius: 6px; white-space: nowrap; }
.mh-switch a:hover { background: rgba(255, 255, 255, .08); }
.mh-switch a.is-on { background: #fff; color: #16112a; }
@media (max-width: 900px) { .mh-switch__label { display: none; } .mh-switch { left: 8px; right: 8px; bottom: 8px; flex-wrap: wrap; justify-content: center; } .mh-switch a { padding: 8px 7px; } }