/* ============================================================================
   MYLIGHTS LIVE DEMO (2026-08-26) — the drawn handset from LightOps'
   phone-demo.jsx, ported to the static site so the website and the FSM show
   the SAME demo the same way. The hard-won details carried over verbatim:
   - the demo renders at a real phone's 375-wide logical viewport and scales
     to the glass with ZOOM, not transform — a transform-scaled iframe
     receives unmapped touch coordinates (mobile taps died on this once);
   - a real status bar (live clock, signal, wifi, battery) sits in a 34px
     band and the app starts BELOW it;
   - the screen wears a dark cover until the demo has painted, so the boot
     reads as the phone turning on instead of an iframe flashing;
   - the glass promotes to its own compositing layer (translateZ + isolation)
     because iOS Safari otherwise skips corner clipping on scaled children.
   The website addition: the demo boots ON TAP. A full app iframe on page
   load would drag LCP down on every page that shows a phone; the poster IS
   the app's real dashboard, so nothing looks missing before the tap.
   ============================================================================ */
/* THE WHOLE PHONE HAS TO FIT ON SCREEN (Ryan, 2026-08-27). At 320px wide the
   handset is 693px tall, and a laptop viewport minus the 89px fixed header and
   the ~46px promo bar leaves about 665 — so the bottom of the phone sat under
   the promo bar and you could never see the demo entire. The width is now
   capped by the AVAILABLE height as well: 210px covers the header, the promo
   bar and a little breathing room, and 375/812 converts that height back into
   a width. Tall screens still get the full 320. */
.ml-demo{position:relative;width:100%;
  max-width:min(320px, calc((100vh - 210px) * 375 / 812));
  max-width:min(320px, calc((100dvh - 210px) * 375 / 812));
  margin:0 auto;
  aspect-ratio:375/812;border-radius:44px;flex-shrink:0;
  background:linear-gradient(160deg,#2a3250,#0a0e1c 30%,#0a0e1c 70%,#1c2340);
  box-shadow:0 24px 70px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.22),
    inset 0 -1px 0 rgba(255,255,255,.08),0 0 0 2.5px #3a4364}
.ml-btnL,.ml-btnR{position:absolute;width:5.5px;pointer-events:none}
.ml-btnL{left:-5.5px;border-radius:3px 0 0 3px;
  background:linear-gradient(90deg,#8d99c9,#3a4467);box-shadow:-1px 0 3px rgba(0,0,0,.4)}
.ml-btnR{right:-5.5px;border-radius:0 3px 3px 0;
  background:linear-gradient(270deg,#8d99c9,#3a4467);box-shadow:1px 0 3px rgba(0,0,0,.4)}
.ml-glass{position:absolute;inset:10px;border-radius:34px;overflow:hidden;
  background:#0b1126;transform:translateZ(0);isolation:isolate}
.ml-status{position:absolute;top:0;left:0;right:0;height:34px;display:flex;
  align-items:center;justify-content:space-between;padding:0 20px 0 26px;
  color:#fff;font-size:12.5px;font-weight:700;pointer-events:none;z-index:3;
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text",Helvetica,Arial,sans-serif}
.ml-status .icons{display:inline-flex;align-items:center;gap:5px}
.ml-screen{position:absolute;top:34px;left:0;right:0;bottom:0;overflow:hidden}
.ml-screen iframe{width:375px;border:none;background:#0b1126;
  color-scheme:dark;display:block}
.ml-poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:top center;display:block}
.ml-cover{position:absolute;inset:0;background:#0b1126;opacity:1;
  transition:opacity .45s ease;pointer-events:none;z-index:2}
.ml-cover.is-off{opacity:0}
.ml-island{position:absolute;top:17px;left:50%;transform:translateX(-50%);
  width:74px;height:20px;border-radius:12px;background:#050810;
  box-shadow:inset 0 0 3px rgba(255,255,255,.12);pointer-events:none;z-index:4}
.ml-homebar{position:absolute;bottom:16px;left:50%;transform:translateX(-50%);
  width:34%;height:4px;border-radius:3px;background:rgba(255,255,255,.85);
  pointer-events:none;z-index:4}
/* the tap-to-boot invitation, sitting on the glass until the demo starts */
.ml-start{position:absolute;inset:0;z-index:5;display:flex;flex-direction:column;
  align-items:center;justify-content:flex-end;padding-bottom:56px;gap:10px;
  background:linear-gradient(180deg,rgba(5,8,16,0) 55%,rgba(5,8,16,.72) 100%);
  border:none;cursor:pointer;border-radius:34px}
.ml-start span{display:inline-flex;align-items:center;gap:8px;
  background:#52b662;color:#fff;border-radius:15px;padding:12px 22px;
  font-size:15px;font-weight:800;letter-spacing:-.01em;
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text",Helvetica,Arial,sans-serif;
  box-shadow:0 8px 24px rgba(0,0,0,.45);text-shadow:1px 1px 2px rgba(0,0,0,.35)}
.ml-start:hover span{background:#3d9c4c}
.ml-demo.is-live .ml-start{display:none}
.ml-under{margin:14px auto 0;text-align:center;font-size:13.5px}
.ml-under a{color:var(--brand-blue,#0b7db3);font-weight:700;text-decoration:none}
.ml-under a:hover{text-decoration:underline}