.lmx-b4-inner{position:relative;width:100%;min-height:100vh;background:linear-gradient(135deg,#f7f8fa 0%,#eceef1 50%,#dde1e6 100%);font-family:'Hanken Grotesk',Helvetica,Arial,sans-serif;padding:0 var(--lmx-section-padding-x);box-sizing:border-box;overflow:visible;--block4-scale:1;--lmx-btn-height:max(42px,calc(53px * var(--block4-scale,1)));--lmx-btn-padding-x:max(20px,calc(30px * var(--block4-scale,1)));--lmx-btn-font-size:max(11px,calc(13px * var(--block4-scale,1)));--lmx-h1-font-family:'Outfit','Poppins',sans-serif;--lmx-h1-size:max(32px,calc(75px * var(--block4-scale,1)))}
.lmx-b4-kinetic-canvas{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;display:block}
/* the carousel is lifted above the grid together with the rest of the content */
.lmx-b4-carousel,.lmx-b4-header{position:relative;z-index:1}
.lmx-b4-content{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%}
.lmx-b4-inner *{box-sizing:border-box}
.lmx-btn{display:inline-flex;align-items:center;height:var(--lmx-btn-height);padding:0 var(--lmx-btn-padding-x);font-size:var(--lmx-btn-font-size) !important;font-weight:700;text-transform:uppercase;text-decoration:none !important;cursor:pointer;box-sizing:border-box;white-space:nowrap;transition:background .25s ease,border-color .25s ease,color .25s ease,transform .25s ease,box-shadow .25s ease;font-family:'Hanken Grotesk',Helvetica,Arial,sans-serif;position:relative;overflow:hidden}

.lmx-b4-header{text-align:center;max-width:980px;margin:0 auto}
.lmx-b4-eyebrow{color:#5b6169 !important;font-size:max(11px,calc(13.5px * var(--block4-scale,1))) !important;font-weight:700;letter-spacing:.15em;text-transform:uppercase}
.lmx-b4-title{margin:max(8px,calc(18px * var(--block4-scale,1))) 0 0 !important;font-family:var(--lmx-h1-font-family) !important;font-weight:300 !important;font-size:var(--lmx-h1-size) !important;line-height:1.17 !important;letter-spacing:-.005em;color:#454951 !important}
.lmx-b4-title-strong{color:#454951 !important;font-weight:300 !important}
.lmx-b4-desc{margin:max(10px,calc(20px * var(--block4-scale,1))) auto 0 !important;max-width:720px;font-size:max(14px,calc(17px * var(--block4-scale,1))) !important;line-height:1.65 !important;font-weight:300;color:#5b6169 !important}

.lmx-b4-carousel{position:relative;width:100%;min-height:max(230px,calc(440px * var(--block4-scale,1)));margin-top:max(14px,calc(40px * var(--block4-scale,1)))}
.lmx-b4-carousel-viewport{position:relative;width:100%;height:100%;overflow:hidden}
.lmx-b4-card{position:absolute;top:50%;left:50%;width:max(240px,calc(430px * var(--block4-scale,1)));padding:max(26px,calc(46px * var(--block4-scale,1))) max(22px,calc(38px * var(--block4-scale,1)));border-radius:20px;background:#fff;box-shadow:0 20px 46px rgba(20,24,30,.1),0 2px 10px rgba(20,24,30,.05);text-align:center;transform:translate(-50%,-50%) translateX(calc(var(--delta,0) * max(180px,calc(320px * var(--block4-scale,1))))) scale(var(--lvl-scale,1));opacity:var(--lvl-opacity,1);filter:var(--lvl-filter,none);transition:transform .55s cubic-bezier(.4,0,.2,1),opacity .55s ease,filter .55s ease;pointer-events:auto}

.lmx-b4-card[data-lvl="0"]{--lvl-scale:1;--lvl-opacity:1;--lvl-filter:none}
.lmx-b4-card[data-lvl="1"]{--lvl-scale:.88;--lvl-opacity:.75;--lvl-filter:blur(1px)}
.lmx-b4-card[data-lvl="2"]{--lvl-scale:.76;--lvl-opacity:.45;--lvl-filter:blur(3px)}
.lmx-b4-card[data-lvl="3"]{--lvl-scale:.65;--lvl-opacity:.2;--lvl-filter:blur(5px)}
.lmx-b4-card.is-hidden{opacity:0 !important;pointer-events:none}
.lmx-b4-card.is-active{box-shadow:0 30px 60px rgba(20,24,30,.16),0 6px 16px rgba(20,24,30,.08)}
.lmx-b4-card-icon{width:max(44px,calc(68px * var(--block4-scale,1)));height:max(44px,calc(68px * var(--block4-scale,1)));margin:0 auto;color:#15181d}
.lmx-b4-card-icon svg{width:100%;height:100%;display:block}
.lmx-b4-card-title{margin:max(8px,calc(16px * var(--block4-scale,1))) 0 0 !important;font-size:max(16px,calc(24px * var(--block4-scale,1))) !important;font-weight:600 !important;color:#15181d !important;font-family:'Hanken Grotesk',Helvetica,Arial,sans-serif !important}
.lmx-b4-card-desc{margin:max(6px,calc(12px * var(--block4-scale,1))) 0 0 !important;font-size:max(12px,calc(15.5px * var(--block4-scale,1))) !important;line-height:1.6 !important;font-weight:300;color:#5b6169 !important}

/* The arrow itself is a shared component (.lmx-arrow, nav-arrows.css); only
   the binding of its size to this block's scale lives here. */
.lmx-b4-arrow{--lmx-arrow-scale:var(--block4-scale,1)}
.lmx-b4-dot:focus-visible{outline:2px solid #15181d;outline-offset:3px}
.lmx-b4-footer{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;margin-top:max(8px,calc(14px * var(--block4-scale,1)))}
.lmx-b4-counter{display:flex;align-items:baseline;gap:8px}
.lmx-b4-counter-num{font-family:'Outfit',sans-serif !important;font-weight:300 !important;font-size:max(24px,calc(38px * var(--block4-scale,1))) !important;color:#15181d !important;line-height:1 !important}
.lmx-b4-counter-label{font-size:max(11px,calc(13px * var(--block4-scale,1))) !important;color:#5d626b !important;font-weight:400}
.lmx-b4-nav-row{display:flex;align-items:center;justify-content:center;gap:max(14px,calc(22px * var(--block4-scale,1)));margin-top:max(8px,calc(14px * var(--block4-scale,1)))}
.lmx-b4-dots{display:flex;align-items:center;gap:8px}
.lmx-b4-dot{position:relative;width:7px;height:7px;border-radius:4px;background:rgba(21,24,29,.22);border:none;padding:0;cursor:pointer;transition:background .2s ease,width .2s ease}
/* The dot itself stays seven pixels, but the pressable area is 26×26: seven
   pixels cannot be hit with a finger, and enlarging the dot would change the
   drawing of the block. */
.lmx-b4-dot::after{content:'';position:absolute;top:50%;left:50%;width:26px;height:26px;transform:translate(-50%,-50%)}
.lmx-b4-dot.is-active{width:22px;background:#15181d}

@media (min-width:1025px){
.lmx-b4-inner{display:grid;grid-template-rows:1fr auto;height:100%;min-height:100%}
}
@media (max-width:1024px){
.lmx-b4-inner{display:block !important;height:auto !important;min-height:0 !important;padding:90px 42px 70px}
.lmx-b4-title{font-size:34px !important}
.lmx-b4-carousel{height:380px;margin-top:30px}
.lmx-b4-card{width:78vw;max-width:340px}
.lmx-b4-card:not(.is-active){opacity:0 !important;pointer-events:none}
}
@media (max-width:600px){
.lmx-b4-inner{padding:70px 24px 50px}
.lmx-b4-title{font-size:28px !important}
.lmx-b4-desc{font-size:15px !important}
.lmx-b4-carousel{height:340px}
}

/* The system “reduce motion” setting is respected: the cards stop sliding
   apart and the background grid is not drawn at all. */
@media (prefers-reduced-motion:reduce){
.lmx-b4-card{transition:none}
.lmx-b4-kinetic-canvas{display:none}
.lmx-b4-dot{transition:none}
}

/* --- short laptops (2026-09-21): the copy of the block on the core pages
   (Platform). The lower bounds of the sizes (heading, description, card
   padding, counter) are smaller and the card is wider — the description wraps
   shorter; at 0.4 the section fits a 600–650px window without inner scrolling.
   The home page does not change. */
@media (min-width:1025px) and (max-height:680px){
.lmx-cp .lmx-b4-title{font-size:max(24px,calc(40px * var(--block4-scale,1))) !important}
.lmx-cp .lmx-b4-desc{max-width:880px;margin-top:6px !important;font-size:max(13.5px,calc(17px * var(--block4-scale,1))) !important;line-height:1.5 !important}
.lmx-cp .lmx-b4-carousel{margin-top:8px;min-height:max(200px,calc(440px * var(--block4-scale,1)))}
.lmx-cp .lmx-b4-card{width:max(290px,calc(430px * var(--block4-scale,1)));padding:max(18px,calc(46px * var(--block4-scale,1))) max(20px,calc(38px * var(--block4-scale,1)))}
.lmx-cp .lmx-b4-card-icon{width:max(36px,calc(68px * var(--block4-scale,1)));height:max(36px,calc(68px * var(--block4-scale,1)))}
.lmx-cp .lmx-b4-card-desc{line-height:1.45 !important}
.lmx-cp .lmx-b4-footer{margin-top:4px}
.lmx-cp .lmx-b4-counter-num{font-size:max(18px,calc(38px * var(--block4-scale,1))) !important}
.lmx-cp .lmx-b4-nav-row{margin-top:4px}
}