/* =========================================================================
 * /demo/ — block 1, the “XDR DEMO” hero.
 *
 * Text on the left, the platform screenshot on the right running to the edge
 * of the screen. The screenshot is an absolute layer under the text: its left
 * edge dissolves with a mask (mask-image), so the boundary of the image is
 * invisible and the text reads on a clean background. Above the screenshot, at
 * the top left, there is a soft teal glow. On narrow screens the screenshot
 * moves below the text as a separate block.
 * ====================================================================== */

.lmx-dh-inner{position:relative;width:100%;min-height:100%;background:#05090b;color:#fff;font-family:var(--lmx-ms-font,'Hanken Grotesk',Helvetica,Arial,sans-serif);padding:0 var(--lmx-section-padding-x);box-sizing:border-box;overflow:hidden;display:grid;align-items:center;--ms-scale:1;--dh-accent:#52C7C6}
.lmx-dh-inner *{box-sizing:border-box}

/* --- platform screenshot ------------------------------------------------- */
.lmx-dh-shot{position:absolute;right:0;top:50%;transform:translateY(-50%);width:min(62%,1280px);z-index:0;pointer-events:none}
/* Two masks at once: on the left the frame dissolves into the background, top and bottom the edge fades softly. */
.lmx-dh-shot-img{display:block;width:100%;height:auto;
	-webkit-mask-image:linear-gradient(90deg,rgba(0,0,0,0) 0%,rgba(0,0,0,.35) 12%,rgba(0,0,0,1) 34%,rgba(0,0,0,1) 100%),linear-gradient(180deg,rgba(0,0,0,0) 0%,rgba(0,0,0,1) 9%,rgba(0,0,0,1) 88%,rgba(0,0,0,0) 100%);
	mask-image:linear-gradient(90deg,rgba(0,0,0,0) 0%,rgba(0,0,0,.35) 12%,rgba(0,0,0,1) 34%,rgba(0,0,0,1) 100%),linear-gradient(180deg,rgba(0,0,0,0) 0%,rgba(0,0,0,1) 9%,rgba(0,0,0,1) 88%,rgba(0,0,0,0) 100%);
	-webkit-mask-composite:source-in;mask-composite:intersect}
.lmx-dh-glow{position:absolute;left:-6%;top:-14%;width:52%;height:64%;background:radial-gradient(circle at 40% 40%,rgba(82,199,198,.24),rgba(82,199,198,0) 68%);filter:blur(6px)}

/* --- text ---------------------------------------------------------------- */
.lmx-dh-text{position:relative;z-index:1;max-width:min(620px,46%);padding:max(40px,calc(60px * var(--ms-scale,1))) 0}
.lmx-dh-eyebrow{display:flex;align-items:center;gap:max(10px,calc(18px * var(--ms-scale,1)));margin:0 0 max(14px,calc(22px * var(--ms-scale,1))) !important;font-family:var(--lmx-ms-font) !important;font-weight:500;font-size:max(11px,calc(13px * var(--ms-scale,1))) !important;letter-spacing:.34em;text-transform:uppercase;color:var(--dh-accent) !important}
.lmx-dh-eyebrow-line{display:block;width:max(36px,calc(64px * var(--ms-scale,1)));height:1px;background:rgba(82,199,198,.55)}
.lmx-dh-title{margin:0 0 max(16px,calc(26px * var(--ms-scale,1))) !important;font-family:var(--lmx-ms-display,'Outfit','Poppins',sans-serif) !important;font-weight:300 !important;font-size:max(46px,calc(var(--lmx-h1-size,108px) * var(--ms-scale,1))) !important;line-height:1 !important;letter-spacing:-.01em;color:#fff !important;text-transform:uppercase}
.lmx-dh-desc{margin:0 0 max(26px,calc(44px * var(--ms-scale,1))) !important;font-family:var(--lmx-ms-font) !important;font-weight:300 !important;font-size:max(15px,calc(19px * var(--ms-scale,1))) !important;line-height:1.65 !important;color:rgba(255,255,255,.78) !important;max-width:560px}

/* --- play button --------------------------------------------------------- */
/* Video button: only the circle lights up; the whole group has neither border nor background. */
.lmx-dh-play{display:inline-flex;align-items:center;gap:max(14px,calc(22px * var(--ms-scale,1)));background:none;border:0;border-radius:999px;padding:0;margin:0;cursor:pointer;color:#fff;box-shadow:none;overflow:visible}
.lmx-dh-play:hover,.lmx-dh-play:focus,.lmx-dh-play:active{background:none;box-shadow:none;transform:none}
.lmx-dh-play-icon{display:grid;place-items:center;width:max(48px,calc(68px * var(--ms-scale,1)));height:max(48px,calc(68px * var(--ms-scale,1)));border:1px solid rgba(82,199,198,.75);border-radius:50%;color:var(--dh-accent);transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease}
.lmx-dh-play-icon svg{width:46%;height:46%;display:block}
.lmx-dh-play-label{font-family:var(--lmx-ms-font) !important;font-weight:500;font-size:max(12px,calc(15px * var(--ms-scale,1)));letter-spacing:.28em;text-transform:uppercase;color:#fff;transition:color .25s ease}
.lmx-dh-play:hover .lmx-dh-play-icon,.lmx-dh-play:focus-visible .lmx-dh-play-icon{transform:scale(1.06);border-color:var(--dh-accent);background:rgba(82,199,198,.14);box-shadow:0 0 0 6px rgba(82,199,198,.12),0 0 22px rgba(82,199,198,.35)}
.lmx-dh-play:hover .lmx-dh-play-label,.lmx-dh-play:focus-visible .lmx-dh-play-label{color:var(--dh-accent)}
/* Keyboard focus is a rounded outline following the group, not a square. */
.lmx-dh-play:focus-visible{outline:2px solid var(--dh-accent);outline-offset:8px;border-radius:999px}

/* --- narrow screens ------------------------------------------------------ */
@media (max-width:1024px){
.lmx-dh-inner{display:block;padding-top:92px;padding-bottom:56px;min-height:0}
.lmx-dh-shot{position:relative;top:auto;right:auto;transform:none;width:calc(100% + var(--lmx-section-padding-x) * 2);margin:28px calc(var(--lmx-section-padding-x) * -1) 0}
.lmx-dh-shot-img{-webkit-mask-image:linear-gradient(90deg,rgba(0,0,0,0) 0%,rgba(0,0,0,1) 18%,rgba(0,0,0,1) 100%);mask-image:linear-gradient(90deg,rgba(0,0,0,0) 0%,rgba(0,0,0,1) 18%,rgba(0,0,0,1) 100%)}
.lmx-dh-text{max-width:none;padding:0}
.lmx-dh-title{font-size:56px !important}
.lmx-dh-desc{font-size:17px !important;max-width:none}
}
@media (max-width:480px){
.lmx-dh-title{font-size:42px !important}
.lmx-dh-desc{font-size:16px !important}
.lmx-dh-play-label{font-size:12px;letter-spacing:.2em}
}

/* --- less motion --------------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
.lmx-dh-play-icon,.lmx-dh-play-label{transition:none}
.lmx-dh-play:hover .lmx-dh-play-icon,.lmx-dh-play:focus-visible .lmx-dh-play-icon{transform:none}
}