/* =========================================================================
 * MXDR Service — block 3, Key Benefits.
 *
 * A carousel of screenshots in perspective: the slides are laid out by --delta
 * and --abs-delta (written by JS, as in the carousel of home block 4). The
 * active one is in the middle, its neighbours stand at the sides and rotated;
 * anything further than two is invisible. No rAF at rest: all the movement is
 * CSS transitions.
 * ====================================================================== */

.lmx-mb-inner{position:relative;width:100%;min-height:100vh;background:linear-gradient(160deg,#f7f8fa 0%,#eceef1 55%,#e4e7eb 100%);font-family:var(--lmx-ms-display,'Outfit','Hanken Grotesk',sans-serif);padding:0 var(--lmx-section-padding-x);box-sizing:border-box;overflow:hidden;--ms-scale:1;--mb-ink:#20242a;--mb-accent:#52C7C6}
.lmx-mb-inner *{box-sizing:border-box}
.lmx-mb-inner::before{content:'';position:absolute;inset:0;background:url(/wp-content/uploads/2026/08/lmntrix-fog-texture-web.webp) center/cover no-repeat;mix-blend-mode:multiply;opacity:.2;pointer-events:none}

/* --- header ----------------------------------------------------------------- */
.lmx-mb-head{position:relative;text-align:center;padding-top:max(14px,calc(34px * var(--ms-scale,1)))}
.lmx-mb-pill{display:inline-block;padding:max(7px,calc(12px * var(--ms-scale,1))) max(14px,calc(26px * var(--ms-scale,1)));background:#fff;border:1px solid #e2e5ea;border-radius:999px;box-shadow:0 2px 8px rgba(21,24,29,.05);color:#262b33;font-size:max(9px,calc(12px * var(--ms-scale,1)));font-weight:600;letter-spacing:.18em;text-transform:uppercase}
.lmx-mb-title{margin:max(10px,calc(20px * var(--ms-scale,1))) 0 0 !important;font-family:var(--lmx-ms-display) !important;font-weight:600 !important;font-size:max(26px,calc(44px * var(--ms-scale,1))) !important;line-height:1.14 !important;letter-spacing:-.01em;color:var(--mb-ink) !important}

/* --- carousel --------------------------------------------------------------- */
.lmx-mb-carousel{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:max(8px,calc(16px * var(--ms-scale,1)));margin-top:max(14px,calc(30px * var(--ms-scale,1)))}
.lmx-mb-arrow{--lmx-arrow-scale:var(--ms-scale,1);background:#fff;box-shadow:0 8px 20px rgba(21,24,29,.10);border-color:#e2e5ea}
/* The stage is the width of the active slide with a 16/9 height: the side slides spill past its edges (overflow visible) while scrollHeight does not grow. */
.lmx-mb-stage{position:relative;width:min(100%,max(420px,calc(760px * var(--ms-scale,1))));aspect-ratio:16/9;margin:0 auto;perspective:1600px;perspective-origin:50% 45%}
/* The slide width follows the proportions of its own image (--mb-ar is written
   by the renderer from the attachment size; 16/9 = 1.7778 is the fallback). The
   frame height always equals the stage height: 56.25% of the stage width ×
   --mb-ar gives the width, and the frame's aspect-ratio returns the same
   height. That way the image is seen whole, the proportions are kept, there are
   no empty bars at the sides and the slide never overflows the stage. */
.lmx-mb-slide{position:absolute;left:50%;top:50%;width:min(100%,calc(56.25% * var(--mb-ar,1.7778)));margin:0;transform:translate(-50%,-50%) translateX(calc(var(--delta,0) * 64%)) translateZ(calc(var(--abs-delta,0) * -260px)) rotateY(calc(var(--delta,0) * -24deg));opacity:calc(1 - var(--abs-delta,0) * .42);transition:transform .6s cubic-bezier(.3,.09,.18,1),opacity .5s ease;will-change:transform;pointer-events:none}
.lmx-mb-slide.is-active{pointer-events:auto}
.lmx-mb-slide.is-hidden{opacity:0;visibility:hidden}
/* The image frame: a neutral backdrop instead of white — the image is fitted
   whole and the bars at the edges must read as a mat, not as emptiness. The
   active frame is the lightbox button, so the button's own styles are reset. */
.lmx-mb-screen{position:relative;width:100%;aspect-ratio:var(--mb-ar,1.7778);background:#e6e9ed;border-radius:10px;border:1px solid rgba(21,24,29,.10);box-shadow:0 30px 60px rgba(21,24,29,.16),0 2px 0 rgba(255,255,255,.8) inset;overflow:hidden}
.lmx-mb-screen--zoom{display:block;padding:0;margin:0;font:inherit;color:inherit;-webkit-appearance:none;appearance:none;cursor:zoom-in;text-align:left}
.lmx-mb-screen--zoom:disabled{cursor:default}
.lmx-mb-screen--zoom:focus-visible{outline:2px solid var(--mb-accent,#52C7C6);outline-offset:3px}
.lmx-mb-zoom-hint{position:absolute;right:10px;bottom:10px;z-index:2;display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:50%;background:rgba(11,15,16,.62);color:#fff;opacity:0;transform:translateY(4px);transition:opacity .22s ease,transform .22s ease;pointer-events:none}
.lmx-mb-zoom-hint svg{width:17px;height:17px}
.lmx-mb-slide.is-active .lmx-mb-screen--zoom:hover .lmx-mb-zoom-hint,
.lmx-mb-slide.is-active .lmx-mb-screen--zoom:focus-visible .lmx-mb-zoom-hint{opacity:1;transform:none}
.lmx-mb-screen::after{content:'';position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 1px rgba(255,255,255,.6);pointer-events:none}
/* The whole image: contain with the proportions kept. There used to be cover
   anchored to the top edge here — the screenshots had their edges cropped. */
.lmx-mb-inner .lmx-mb-img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:center;display:block}
.lmx-mb-noimg{position:absolute;inset:0;background:linear-gradient(135deg,#f4f5f7,#dfe3e8)}

.lmx-mb-counter{display:flex;justify-content:center;align-items:baseline;gap:6px;margin-top:max(8px,calc(16px * var(--ms-scale,1)));font-family:var(--lmx-ms-display)}
.lmx-mb-counter-num{font-weight:600;font-size:max(14px,calc(18px * var(--ms-scale,1)));color:var(--mb-ink)}
.lmx-mb-counter-sep,.lmx-mb-counter-total{font-weight:400;font-size:max(12px,calc(15px * var(--ms-scale,1)));color:#8a8e96}

/* --- benefit chain ----------------------------------------------------------- */
.lmx-mb-chainwrap{position:relative;margin-top:max(10px,calc(22px * var(--ms-scale,1)));padding-top:max(14px,calc(28px * var(--ms-scale,1)))}
/* The arc under the chain: the top of a huge light circle. */
.lmx-mb-arcwrap{position:absolute;left:calc(-1 * var(--lmx-section-padding-x));right:calc(-1 * var(--lmx-section-padding-x));top:0;bottom:0;overflow:hidden;pointer-events:none}
.lmx-mb-arc{position:absolute;left:50%;top:0;width:120%;aspect-ratio:1/1;transform:translateX(-50%);border-radius:50%;background:linear-gradient(180deg,rgba(255,255,255,.9),rgba(255,255,255,0) 18%);border-top:2px solid rgba(255,255,255,.95);box-shadow:0 -12px 30px rgba(255,255,255,.7),0 -1px 0 rgba(21,24,29,.06);pointer-events:none}
.lmx-mb-chain{position:relative;list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(var(--mb-n,5),minmax(0,1fr));gap:max(8px,calc(16px * var(--ms-scale,1)))}
.lmx-mb-chain[data-count="3"]{--mb-n:3;max-width:900px;margin:0 auto}
.lmx-mb-chain[data-count="4"]{--mb-n:4;max-width:1180px;margin:0 auto}
.lmx-mb-chain[data-count="5"]{--mb-n:5}
.lmx-mb-chain[data-count="6"]{--mb-n:6}
.lmx-mb-ben{margin:0;text-align:center}
.lmx-mb-ben-btn{display:flex;flex-direction:column;align-items:center;gap:max(8px,calc(14px * var(--ms-scale,1)));width:100%;background:transparent;border:none;padding:6px 4px;cursor:pointer;color:var(--mb-ink);font-family:var(--lmx-ms-display)}
.lmx-mb-ben-btn:focus-visible{outline:2px solid #15181d;outline-offset:2px;border-radius:14px}
.lmx-mb-ben-ring{position:relative;display:flex;align-items:center;justify-content:center;width:max(56px,calc(78px * var(--ms-scale,1)));height:max(56px,calc(78px * var(--ms-scale,1)));border-radius:50%;background:#fff;border:1px solid #e0e4e9;box-shadow:0 10px 22px rgba(21,24,29,.10);transition:border-color .25s ease,box-shadow .25s ease,transform .25s ease}
.lmx-mb-ben-num{position:absolute;left:-6px;top:-6px;display:flex;align-items:center;justify-content:center;width:max(20px,calc(26px * var(--ms-scale,1)));height:max(20px,calc(26px * var(--ms-scale,1)));border-radius:50%;background:#fff;border:1px solid #e0e4e9;font-family:var(--lmx-ms-font,'Hanken Grotesk',sans-serif);font-weight:600;font-size:max(10px,calc(12px * var(--ms-scale,1)));color:#4a515b;transition:background .25s ease,color .25s ease,border-color .25s ease}
.lmx-mb-ben-icon{display:block;width:46%;height:46%;color:#2a2f36}
.lmx-mb-ben-icon svg{width:100%;height:100%;display:block}
.lmx-mb-ben-title{font-weight:600;font-size:max(13px,calc(17px * var(--ms-scale,1)));line-height:1.25;color:var(--mb-ink)}
.lmx-mb-ben-desc{font-family:var(--lmx-ms-font,'Hanken Grotesk',sans-serif);font-weight:400;font-size:max(11.5px,calc(14px * var(--ms-scale,1)));line-height:1.45;color:#5b626c;max-width:230px}
.lmx-mb-ben-btn:hover .lmx-mb-ben-ring{border-color:var(--mb-accent);transform:translateY(-2px)}
.lmx-mb-ben.is-active .lmx-mb-ben-ring{border:2px solid var(--mb-accent);box-shadow:0 0 0 6px rgba(82,199,198,.12),0 14px 26px rgba(21,24,29,.12)}
.lmx-mb-ben.is-active .lmx-mb-ben-num{background:var(--mb-accent);border-color:var(--mb-accent);color:#04211F}
.lmx-mb-ben.is-active .lmx-mb-ben-icon{color:var(--mb-ink)}

/* Fallback grid (fewer than three items): no carousel, the screenshots side by side. */
.lmx-mb-inner.is-static .lmx-mb-stage{position:static;height:auto;perspective:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;max-width:1000px;margin:0 auto}
.lmx-mb-inner.is-static .lmx-mb-slide{position:static;transform:none;opacity:1;width:100%;pointer-events:auto;visibility:visible}
.lmx-mb-inner.is-static .lmx-mb-carousel{grid-template-columns:1fr}
.lmx-mb-inner.is-static .lmx-mb-chain{grid-template-columns:repeat(2,minmax(0,1fr));max-width:800px;margin:0 auto}

/* --- desktop ---------------------------------------------------------------- */
@media (min-width:1025px){
.lmx-mb-inner{display:grid;align-content:center;height:100%;min-height:100%}
}

/* --- narrow screens ---------------------------------------------------------- */
@media (max-width:1024px){
.lmx-mb-inner{min-height:0;height:auto;padding:84px var(--lmx-section-padding-x) 64px}
.lmx-mb-title{font-size:30px !important}
.lmx-mb-carousel{grid-template-columns:auto minmax(0,1fr) auto;gap:8px;margin-top:20px}
.lmx-mb-stage{height:auto;aspect-ratio:16/9;perspective:none;max-width:100%}
/* The side slides are not drawn: they would create horizontal overflow. The
   width uses the same formula as on desktop: the stage is 16/9 here too, and a
   square image at width:100% would end up taller than it. */
.lmx-mb-slide{width:min(100%,calc(56.25% * var(--mb-ar,1.7778)));transform:translate(-50%,-50%);opacity:0;visibility:hidden;transition:opacity .35s ease}
.lmx-mb-slide.is-active{opacity:1;visibility:visible}
.lmx-mb-arrow{width:44px;height:44px}
.lmx-mb-chain,.lmx-mb-chain[data-count="3"],.lmx-mb-chain[data-count="4"],.lmx-mb-chain[data-count="5"],.lmx-mb-chain[data-count="6"]{grid-template-columns:1fr;gap:10px;max-width:520px;margin:0 auto}
.lmx-mb-ben-btn{flex-direction:row;text-align:left;align-items:center;gap:14px;padding:10px 8px;min-height:44px;display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;column-gap:14px;row-gap:2px}
.lmx-mb-ben-ring{grid-row:1/3;width:56px;height:56px}
.lmx-mb-ben-title{font-size:15px}
.lmx-mb-ben-desc{max-width:none;font-size:13px}
.lmx-mb-arcwrap{display:none}
.lmx-mb-chainwrap{padding-top:10px}
.lmx-mb-inner.is-static .lmx-mb-stage{grid-template-columns:1fr}
}
@media (max-width:480px){
.lmx-mb-carousel{grid-template-columns:1fr;gap:10px}
.lmx-mb-arrow{display:none}
}

/* --- less motion ------------------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
.lmx-mb-inner *,.lmx-mb-inner *::before,.lmx-mb-inner *::after{transition:none !important;animation:none !important}
}