/* =========================================================================
 * LMNTRIX MDR — block 2, Key Benefits.
 *
 * The carousel, the header (pill, H2), the arrows and the counter come from
 * the shared Key Benefits component of the service pages
 * (assets/css/mxdr-service/block3-benefits.css, classes .lmx-mb-*). Here: the
 * benefits grid under the carousel (.lmx-kb-*) — four across on desktop, two
 * columns on tablet, one on a phone. The numbered rings repeat the rings of
 * the service chain (a white circle, a shadow, the number badge at the top
 * left), and the icon is an <img> from the media library.
 * ====================================================================== */

.lmx-kb-inner{--kb-ink:#20242a}

/* Printed tracks in the corners — a hint of the reference background, pure CSS. */
.lmx-kb-circuit{position:absolute;right:0;top:0;width:34%;height:34%;pointer-events:none;opacity:.55;
  background:
    linear-gradient(90deg,transparent 0 62%,rgba(21,24,29,.10) 62% calc(62% + 1px),transparent calc(62% + 1px)) 0 0/100% 46% no-repeat,
    linear-gradient(180deg,transparent 0 46%,rgba(21,24,29,.10) 46% calc(46% + 1px),transparent calc(46% + 1px)) 0 0/100% 100% no-repeat,
    radial-gradient(circle at 62% 46%,rgba(21,24,29,.16) 0 3px,transparent 4px),
    radial-gradient(circle at 92% 24%,rgba(21,24,29,.14) 0 3px,transparent 4px)}

/* The carousel is slightly shorter than on the service pages: two rows of benefits sit under it. */
.lmx-kb-inner .lmx-mb-stage{width:min(100%,max(400px,calc(700px * var(--ms-scale,1))))}
.lmx-kb-inner .lmx-mb-carousel{margin-top:max(12px,calc(26px * var(--ms-scale,1)))}

/* --- grid ----------------------------------------------------------------- */
.lmx-kb-gridwrap{position:relative;margin-top:max(10px,calc(22px * var(--ms-scale,1)));padding-top:max(12px,calc(22px * var(--ms-scale,1)))}
/* The “shelf” arcs under the rows: the tops of huge light circles clipped by a layer. */
.lmx-kb-rails{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-kb-rails i{position:absolute;left:50%;width:130%;aspect-ratio:1/1;transform:translateX(-50%);border-radius:50%;background:linear-gradient(180deg,rgba(255,255,255,.9),rgba(255,255,255,0) 14%);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)}
.lmx-kb-rails i:first-child{top:0}
.lmx-kb-rails i:last-child{top:50%}

.lmx-kb-grid{position:relative;list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));column-gap:max(14px,calc(30px * var(--ms-scale,1)));row-gap:max(14px,calc(30px * var(--ms-scale,1)))}
.lmx-kb-grid[data-count="4"],.lmx-kb-grid[data-count="5"],.lmx-kb-grid[data-count="6"]{grid-template-columns:repeat(3,minmax(0,1fr));max-width:1200px;margin:0 auto}
.lmx-kb-grid[data-count="4"]{grid-template-columns:repeat(2,minmax(0,1fr));max-width:900px}
.lmx-kb-item{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:max(10px,calc(18px * var(--ms-scale,1)));align-items:start;margin:0;padding-top:max(6px,calc(10px * var(--ms-scale,1)))}

.lmx-kb-ring{position:relative;display:flex;align-items:center;justify-content:center;width:max(56px,calc(84px * var(--ms-scale,1)));height:max(56px,calc(84px * var(--ms-scale,1)));border-radius:50%;background:#fff;border:1px solid #e0e4e9;box-shadow:0 10px 22px rgba(21,24,29,.10),inset 0 0 0 5px #f3f4f6}
.lmx-kb-num{position:absolute;left:-5px;top:-5px;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}
.lmx-kb-icon{display:block;width:50%;height:50%;color:#2a2f36}
.lmx-kb-icon img{width:100%;height:100%;display:block;object-fit:contain}

.lmx-kb-title{margin:0 !important;font-family:var(--lmx-ms-display) !important;font-weight:600 !important;font-size:max(14px,calc(18px * var(--ms-scale,1))) !important;line-height:1.25 !important;letter-spacing:0;color:var(--kb-ink) !important}
.lmx-kb-desc{margin:max(4px,calc(8px * var(--ms-scale,1))) 0 0 !important;max-width:290px;font-family:var(--lmx-ms-font,'Hanken Grotesk',sans-serif) !important;font-weight:400;font-size:max(12px,calc(14.5px * var(--ms-scale,1))) !important;line-height:1.45 !important;color:#5b626c !important}

/* --- narrow screens -------------------------------------------------------- */
@media (max-width:1024px){
.lmx-kb-circuit,.lmx-kb-rails{display:none}
.lmx-kb-gridwrap{margin-top:26px;padding-top:0}
.lmx-kb-grid,.lmx-kb-grid[data-count="4"],.lmx-kb-grid[data-count="5"],.lmx-kb-grid[data-count="6"]{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 16px;max-width:none}
.lmx-kb-item{padding-top:0}
.lmx-kb-ring{width:56px;height:56px}
.lmx-kb-title{font-size:15px !important}
.lmx-kb-desc{max-width:none;font-size:13px !important}
}
@media (max-width:640px){
.lmx-kb-grid,.lmx-kb-grid[data-count="4"],.lmx-kb-grid[data-count="5"],.lmx-kb-grid[data-count="6"]{grid-template-columns:1fr;max-width:520px;margin:0 auto}
}