/* =========================================================================
 * The site's single flat wheel (inc/capability-wheel.php): Core Capabilities
 * on the MXDR service pages, the home “Prevention, Detection And Response”
 * wheel and its copy on Platform, “Why LMNTRIX MDR”, the Active Defense
 * strategies, the Active Offense hub and the Integrations landing.
 *
 * The stage is 720×720 design pixels and is scaled by a single --mc-fit. The
 * segments are <g> elements inside one SVG; the label buttons are real
 * <button> elements over the SVG. The geometry is the same in every state
 * (2026-09-24): the active segment does NOT move — it gets a teal outline, a
 * glow and a light teal surface; transitions of 150–300 ms touch only
 * opacity/fill/filter. The --sx/--sy variables are still in the markup but no
 * longer affect anything. A dark section uses the .lmx-mc-inner--dark modifier
 * (palette below).
 * ====================================================================== */

.lmx-mc-inner{position:relative;width:100%;min-height:100vh;background:linear-gradient(160deg,#f7f8fa 0%,#eef0f3 55%,#e6e9ed 100%);font-family:var(--lmx-ms-display,'Outfit','Hanken Grotesk',sans-serif);padding:0 var(--lmx-section-padding-x);box-sizing:border-box;--ms-scale:1;--mc-ink:#20242a;--mc-accent:#52C7C6}
.lmx-mc-inner *{box-sizing:border-box}
.lmx-mc-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:.22;pointer-events:none}

/* --- header (the pill and the heading — as in home block 12) --------------- */
.lmx-mc-head{position:relative;text-align:center;padding-top:max(14px,calc(34px * var(--ms-scale,1)))}
.lmx-mc-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-mc-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(--mc-ink) !important}
/* The optional intro under the heading (the cap_intro field). */
.lmx-mc-intro{margin:max(8px,calc(14px * var(--ms-scale,1))) auto 0 !important;max-width:780px;font-family:var(--lmx-ms-font,'Hanken Grotesk',Helvetica,Arial,sans-serif) !important;font-weight:300;font-size:max(13px,calc(17px * var(--ms-scale,1))) !important;line-height:1.55 !important;letter-spacing:0;color:rgba(32,36,42,.74) !important}

/* --- frame: the wheel on the left, the card on the right ------------------ */
.lmx-mc-body{position:relative;display:grid;grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);align-items:center;gap:max(16px,calc(48px * var(--ms-scale,1)));margin-top:max(4px,calc(10px * var(--ms-scale,1)))}

/* overflow:hidden keeps scrollHeight honest: the stage is in design pixels. */
.lmx-mc-wheel{position:relative;width:min(100%,max(440px,calc(680px * var(--ms-scale,1))));aspect-ratio:1/1;margin:0 auto;overflow:hidden}
.lmx-mc-scene{position:absolute;left:50%;top:0;width:720px;height:720px;margin-left:-360px;transform:scale(var(--mc-fit,1));transform-origin:50% 0}
.lmx-mc-svg{position:absolute;left:0;top:0;width:720px;height:720px;display:block;overflow:visible}

/* --- segments -------------------------------------------------------------- */
.lmx-mc-seg{transform-box:fill-box;transform-origin:center;transition:transform .55s cubic-bezier(.3,.09,.18,1),opacity .5s ease;transition-delay:calc(var(--i,0) * 70ms)}
.lmx-mc-seg-ring{opacity:0;transition:opacity .25s ease,filter .25s ease}
.lmx-mc-seg-top{transition:fill .25s ease}
.lmx-mc-seg.is-hover .lmx-mc-seg-ring{opacity:.45}
.lmx-mc-seg.is-active .lmx-mc-seg-ring{opacity:1}
.lmx-mc-seg.is-active .lmx-mc-seg-top{fill:url(#lmx-mc-top-active)}
.lmx-mc-scene.is-settled .lmx-mc-seg{transition-delay:0ms}
/* The active segment stays in place: no translate — only an outline and a glow. */
.lmx-mc-scene.is-settled .lmx-mc-seg.is-active{transform:none}
.lmx-mc-scene.is-settled .lmx-mc-seg.is-active .lmx-mc-seg-ring{filter:drop-shadow(0 0 6px rgba(82,199,198,.8)) drop-shadow(0 0 18px rgba(82,199,198,.35))}
.lmx-mc-hub-logo{pointer-events:none}

/* Segment button: a <button> with an icon and a label; the area is ≥ 44px. */
.lmx-mc-seg-btn{position:absolute;transform:translate(-50%,-50%);width:186px;min-height:132px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px;background:transparent;border:none;padding:10px;cursor:pointer;color:#262b33;font-family:var(--lmx-ms-display);transition:transform .55s cubic-bezier(.3,.09,.18,1),opacity .5s ease;transition-delay:calc(var(--i,0) * 70ms);z-index:3}
.lmx-mc-scene.is-settled .lmx-mc-seg-btn{transition-delay:0ms}
.lmx-mc-scene.is-settled .lmx-mc-seg-btn.is-active{transform:translate(-50%,-50%)}
.lmx-mc-seg-btn:focus-visible{outline:2px solid #15181d;outline-offset:2px;border-radius:14px}
/* The label and the icon of the active segment are NOT repainted (fix of the evening of 2026-09-24): only the segment itself is highlighted — outline, glow, fill; teal text inside read as a second selection. */
.lmx-mc-seg-icon{display:block;width:40px;height:40px;color:#2a2f36}
.lmx-mc-seg-icon svg{width:100%;height:100%;display:block}
.lmx-mc-seg-label{font-size:16px;font-weight:600;line-height:1.25;text-align:center;letter-spacing:.005em}
/* With six segments the labels sit closer together — slightly more compact. */
.lmx-mc-wheel[data-count="6"] .lmx-mc-seg-btn{width:160px}
.lmx-mc-wheel[data-count="6"] .lmx-mc-seg-label{font-size:14.5px}
.lmx-mc-wheel[data-count="6"] .lmx-mc-seg-icon{width:34px;height:34px}

/* --- card (modelled on the card of block 12) ------------------------------ */
.lmx-mc-card{position:relative;max-width:600px;width:100%;justify-self:start;background:#fff;border-radius:26px;box-shadow:0 20px 44px rgba(21,24,29,.09);padding:max(18px,calc(34px * var(--ms-scale,1))) max(18px,calc(36px * var(--ms-scale,1)))}
.lmx-mc-panels{display:grid}
.lmx-mc-panel{grid-area:1/1;opacity:0;transform:translateX(12px);visibility:hidden;pointer-events:none;transition:opacity .16s ease,transform .16s ease,visibility 0s .16s}
.lmx-mc-panel.is-active{opacity:1;transform:none;visibility:visible;pointer-events:auto;transition:opacity .3s ease .15s,transform .3s ease .15s,visibility 0s}
.lmx-mc-panel-eyebrow{margin:0 0 max(8px,calc(12px * var(--ms-scale,1))) !important;font-family:var(--lmx-ms-font,'Hanken Grotesk',Helvetica,Arial,sans-serif) !important;font-weight:700;font-size:max(10px,calc(12px * var(--ms-scale,1))) !important;letter-spacing:.2em;text-transform:uppercase;color:var(--mc-accent) !important;line-height:1.3 !important}
.lmx-mc-panel-head{display:flex;align-items:center;gap:max(10px,calc(18px * var(--ms-scale,1)));padding-bottom:max(10px,calc(18px * var(--ms-scale,1)));border-bottom:1px solid #eef0f3}
.lmx-mc-panel-icon{display:block;flex:0 0 auto;width:max(36px,calc(56px * var(--ms-scale,1)));height:max(36px,calc(56px * var(--ms-scale,1)));color:#2a2f36}
.lmx-mc-panel-icon svg{width:100%;height:100%;display:block}
.lmx-mc-panel-title{margin:0 !important;font-family:var(--lmx-ms-display) !important;font-weight:600 !important;font-size:max(19px,calc(27px * var(--ms-scale,1))) !important;line-height:1.2 !important;color:var(--mc-ink) !important}

.lmx-mc-features{list-style:none;margin:max(8px,calc(12px * var(--ms-scale,1))) 0 0;padding:0;display:flex;flex-direction:column}
.lmx-mc-feature{margin:0;border-bottom:1px solid #eef0f3}
.lmx-mc-feature:last-child{border-bottom:none}
.lmx-mc-feature-in{display:flex;align-items:center;gap:max(10px,calc(18px * var(--ms-scale,1)));width:100%;padding:max(9px,calc(14px * var(--ms-scale,1))) max(2px,calc(6px * var(--ms-scale,1)));color:#333a43;text-decoration:none !important;border-radius:14px;transition:background .2s ease}
a.lmx-mc-feature-in:hover{background:#f2fbfb}
a.lmx-mc-feature-in:focus-visible{outline:2px solid #15181d;outline-offset:2px}
.lmx-mc-feature-icon{flex:0 0 auto;display:flex;align-items:center;justify-content:center;width:max(38px,calc(56px * var(--ms-scale,1)));height:max(38px,calc(56px * var(--ms-scale,1)));border-radius:50%;border:1px solid #e3e6eb;background:#fbfbfc;color:#3a414b}
.lmx-mc-feature-icon svg{width:46%;height:46%;display:block}
.lmx-mc-feature-text{flex:1 1 auto;display:flex;flex-direction:column;gap:3px;min-width:0}
.lmx-mc-feature-title{font-family:var(--lmx-ms-display);font-weight:600;font-size:max(13.5px,calc(17px * var(--ms-scale,1)));line-height:1.3;color:var(--mc-ink)}
.lmx-mc-feature-desc{font-family:var(--lmx-ms-font,'Hanken Grotesk',sans-serif);font-weight:400;font-size:max(12px,calc(14.5px * var(--ms-scale,1)));line-height:1.4;color:#5b626c}
.lmx-mc-feature-chev{flex:0 0 auto;width:max(13px,calc(16px * var(--ms-scale,1)));height:max(13px,calc(16px * var(--ms-scale,1)));color:#5b626c}
.lmx-mc-feature-chev svg{width:100%;height:100%;display:block}

/* Fallback list of segments (when fewer than four are enabled). */
.lmx-mc-list{list-style:none;margin:0 0 16px;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.lmx-mc-list-btn{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border-radius:999px;border:1px solid #e2e5ea;background:#f6f7f9;cursor:pointer;font-family:var(--lmx-ms-display);font-weight:600;font-size:14px;color:#262b33}
.lmx-mc-list-btn .lmx-mc-seg-icon{width:22px;height:22px}
.lmx-mc-list-btn.is-active{border-color:var(--mc-accent);background:#f2fbfb}
.lmx-mc-inner.is-list .lmx-mc-body{grid-template-columns:1fr}
.lmx-mc-inner.is-list .lmx-mc-card{max-width:760px;justify-self:center}

/* --- card navigation ------------------------------------------------------- */
.lmx-mc-arrow{--lmx-arrow-scale:var(--ms-scale,1)}
.lmx-mc-cardnav{display:flex;align-items:center;justify-content:space-between;margin-top:max(12px,calc(22px * var(--ms-scale,1)));padding-top:max(8px,calc(14px * var(--ms-scale,1)));border-top:1px solid #eef0f3}
.lmx-mc-cardnav .lmx-arrow:not(:disabled):hover{border-color:var(--mc-accent);background:transparent;color:#15181d}
.lmx-mc-count{display:flex;align-items:baseline;gap:6px;font-family:var(--lmx-ms-display)}
.lmx-mc-count-num{font-weight:600;font-size:max(13px,calc(16px * var(--ms-scale,1)));color:var(--mc-ink)}
.lmx-mc-count-sep,.lmx-mc-count-total{font-weight:400;font-size:max(11px,calc(14px * var(--ms-scale,1)));color:#8a8e96}

/* --- assembly on entry ----------------------------------------------------- */
.lmx-mc-scene.is-closed .lmx-mc-seg{opacity:0;transform:translateY(22px) scale(.96)}
.lmx-mc-scene.is-closed .lmx-mc-seg-btn{opacity:0;transform:translate(-50%,calc(-50% + 22px))}
.lmx-mc-card{transition:opacity .5s ease .1s,transform .5s ease .1s}
.lmx-mc-inner.is-entering .lmx-mc-card{opacity:0;transform:translateX(26px)}
.lmx-mc-scene.no-anim,.lmx-mc-scene.no-anim *,.lmx-mc-inner.no-anim .lmx-mc-card{transition:none !important;animation:none !important}

/* --- dark section (.lmx-mc-inner--dark) -----------------------------------
   The same geometry and mechanics; the surface of the plates, the side, the
   hub, the card and the text are in the site's dark palette, with the shared
   teal accent. */
.lmx-mc-inner--dark{background:#050708;--mc-ink:#ffffff}
.lmx-mc-inner--dark::before{background:repeating-linear-gradient(90deg,rgba(255,255,255,.028) 0 1px,transparent 1px 64px),repeating-linear-gradient(0deg,rgba(255,255,255,.028) 0 1px,transparent 1px 64px);mix-blend-mode:normal;opacity:1}
.lmx-mc-inner--dark .lmx-mc-pill{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.14);color:#fff;box-shadow:none}
.lmx-mc-inner--dark .lmx-mc-intro{color:rgba(255,255,255,.72) !important}
.lmx-mc-inner--dark .lmx-mc-seg-top{fill:#151b20;stroke:#151b20}
.lmx-mc-inner--dark .lmx-mc-seg.is-active .lmx-mc-seg-top{fill:#12292b;stroke:#12292b}
.lmx-mc-inner--dark .lmx-mc-seg-side{fill:#0a0e11;stroke:#0a0e11}
.lmx-mc-inner--dark .lmx-mc-seg-edge{stroke:#2a333a}
.lmx-mc-inner--dark .lmx-mc-floor{opacity:0}
.lmx-mc-inner--dark .lmx-mc-hubg circle{fill:#0f1418;stroke:#2a333a}
.lmx-mc-inner--dark .lmx-mc-seg-btn{color:#fff}
.lmx-mc-inner--dark .lmx-mc-seg-icon{color:#dfe5e8}
.lmx-mc-inner--dark .lmx-mc-seg-btn:focus-visible{outline-color:#fff}
.lmx-mc-inner--dark .lmx-mc-card{background:linear-gradient(180deg,rgba(17,23,27,.94),rgba(7,10,13,.97));border:1px solid rgba(82,199,198,.2);box-shadow:0 30px 70px rgba(0,0,0,.5)}
.lmx-mc-inner--dark .lmx-mc-panel-head,.lmx-mc-inner--dark .lmx-mc-feature,.lmx-mc-inner--dark .lmx-mc-cardnav{border-color:rgba(255,255,255,.1)}
.lmx-mc-inner--dark .lmx-mc-panel-icon{color:#dfe5e8}
.lmx-mc-inner--dark .lmx-mc-panel-desc{color:rgba(255,255,255,.72) !important}
.lmx-mc-inner--dark .lmx-mc-feature-in{color:#fff}
.lmx-mc-inner--dark a.lmx-mc-feature-in:hover{background:rgba(82,199,198,.08)}
.lmx-mc-inner--dark .lmx-mc-feature-icon{border-color:rgba(255,255,255,.12);background:rgba(255,255,255,.04);color:#dfe5e8}
.lmx-mc-inner--dark .lmx-mc-feature-title{color:#fff}
.lmx-mc-inner--dark .lmx-mc-feature-desc,.lmx-mc-inner--dark .lmx-mc-feature-chev,.lmx-mc-inner--dark .lmx-mc-count-sep,.lmx-mc-inner--dark .lmx-mc-count-total{color:rgba(255,255,255,.6)}
.lmx-mc-inner--dark .lmx-mc-cardnav .lmx-arrow{border-color:rgba(255,255,255,.3);color:#fff}
.lmx-mc-inner--dark .lmx-mc-panel-icon--img{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.12)}

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

/* --- narrow screens -------------------------------------------------------- */
@media (max-width:1024px){
.lmx-mc-inner{min-height:0;height:auto;padding:84px var(--lmx-section-padding-x) 64px}
.lmx-mc-title{font-size:30px !important}
.lmx-mc-body{grid-template-columns:1fr;gap:26px;margin-top:18px}
.lmx-mc-wheel{width:min(100%,470px)}
.lmx-mc-card{max-width:560px;justify-self:center;padding:24px 20px}
.lmx-mc-panel-title{font-size:21px !important}
/*
 * The labels do not shrink together with the stage: --mc-inv = 1/fit (set by
 * JS).
 *
 * Fix of 2026-09-30. The label box was 120px at --mc-inv ≈ 2, that is 250
 * units of the 720 canvas — twice as wide as the ring itself (a 158-unit band:
 * outer radius 290, hub 132). On the side segments the text width runs ALONG
 * the radius, so “Full Visibility & ML-Driven Detection” stuck out past the
 * edge of the circle. Now: a 66px box (≈135 units), 11.5px type (not below the
 * required 11px), a 22px icon, long words hyphenated, and on the bottom
 * segments the stack is flipped — the label towards the centre, the icon
 * outside.
 */
/* word-break:break-word broke words in the middle (“Preventio/n”): the script
   picks the band width, and with breaking allowed any narrow width “suited”
   it. Only overflow-wrap is left — it breaks a word only when it does not fit
   even on a whole line, and the script no longer takes the width of an already
   broken word. */
.lmx-mc-seg-label{font-size:calc(11.5px * var(--mc-inv,1.45));width:100%;overflow-wrap:break-word;hyphens:auto;text-wrap:balance}
.lmx-mc-seg-icon{width:calc(16px * var(--mc-inv,1.45));height:calc(16px * var(--mc-inv,1.45))}
.lmx-mc-seg-btn{width:calc(var(--seg-w,66px) * var(--mc-inv,1.45));gap:calc(4px * var(--mc-inv,1.45));padding:calc(3px * var(--mc-inv,1.45))}
/* The radial offset of the stack is set by the script (fitLabels): it measures the lines and the icon. */
.lmx-mc-seg-btn{transform:translate(-50%,-50%) translate(var(--seg-dx,0px),var(--seg-dy,0px))}
.lmx-mc-scene.is-settled .lmx-mc-seg-btn.is-active{transform:translate(-50%,-50%) translate(var(--seg-dx,0px),var(--seg-dy,0px))}
.lmx-mc-scene.is-closed .lmx-mc-seg-btn{transform:translate(-50%,calc(-50% + 22px))}
/* On the bottom segments the label sits above the icon: the text goes towards the centre instead of past the edge. */
.lmx-mc-seg-btn--down{flex-direction:column-reverse}
/* The touch area of a segment: at least 44px in screen pixels. */
/* 45px rather than 44: the button is shrunk by the inverse scale of the wheel,
   and exactly 44px after multiplying and dividing gives 43.99px — a tap target
   a hair below the standard, which the check (verify-mdr, item 37) catches. */
.lmx-mc-seg-btn{min-width:calc(45px * var(--mc-inv,1.45));min-height:calc(45px * var(--mc-inv,1.45))}
/* The band width for every segment count goes through --seg-w: the script
   picks it for the particular label, and the number in calc stays as a
   fallback. */
.lmx-mc-wheel[data-count="6"] .lmx-mc-seg-label{font-size:calc(11px * var(--mc-inv,1.45))}
.lmx-mc-wheel[data-count="6"] .lmx-mc-seg-btn{width:calc(var(--seg-w,60px) * var(--mc-inv,1.45))}
/* Four segments sit on the diagonals: the corners of the box stick out past the edge — squeeze harder and move outwards. */
.lmx-mc-wheel[data-count="4"] .lmx-mc-seg-label{font-size:calc(11px * var(--mc-inv,1.45));line-height:1.15}
.lmx-mc-wheel[data-count="4"] .lmx-mc-seg-btn{width:calc(var(--seg-w,58px) * var(--mc-inv,1.45));gap:calc(2px * var(--mc-inv,1.45))}
.lmx-mc-wheel[data-count="4"] .lmx-mc-seg-icon{width:calc(14px * var(--mc-inv,1.45));height:calc(14px * var(--mc-inv,1.45))}
/* Two and three categories: the sectors are wide and the labels need no squeezing. */
.lmx-mc-wheel[data-count="2"] .lmx-mc-seg-btn,
.lmx-mc-wheel[data-count="3"] .lmx-mc-seg-btn{width:calc(var(--seg-w,96px) * var(--mc-inv,1.45))}
}

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

/* Optional parts of the card (the Integrations page, 2026-09-15): an attachment
   icon and a paragraph under the heading. The MXDR service pages do not pass
   them — the markup and the look are unchanged there. */
.lmx-mc-panel-icon--img{display:inline-flex;align-items:center;justify-content:center;border-radius:14px;background:#fff;border:1px solid #e2e5ea}
.lmx-mc-panel-icon--img img{width:62% !important;height:62% !important;object-fit:contain}
.lmx-mc-panel-desc{margin:max(10px,calc(16px * var(--ms-scale,1))) 0 0 !important;font-family:var(--lmx-ms-font,'Hanken Grotesk',Helvetica,Arial,sans-serif) !important;font-weight:300;font-size:max(15px,calc(17px * var(--ms-scale,1))) !important;line-height:1.55 !important;color:#4a505a !important}
.lmx-mc-seg-icon--img img{width:100% !important;height:100% !important;object-fit:contain;display:block}

/* --- short laptops (2026-09-21, extended 2026-09-24): the wheel on the home
   page (.lmx-home) and on the core pages (.lmx-cp: Platform, the AO hub, the
   Integrations landing). The block header is more compact, the wheel width
   comes from the window height (340px minimum), and the card gets lower bounds
   instead of scaled sizes: at --ms-scale 0.4 its height was held exactly by
   those minimums (38px icons, 9px padding, 44px arrows), and at 1366×600 the
   section did not fit by 20–23px. The segment labels keep their size through
   --mc-inv. MDR, Active Defense and the MXDR service pages do not change. */
@media (min-width:1025px) and (max-height:680px){
.lmx-cp .lmx-mc-head,.lmx-home .lmx-mc-head{padding-top:10px}
.lmx-cp .lmx-mc-title,.lmx-home .lmx-mc-title{font-size:max(24px,calc(44px * var(--ms-scale,1))) !important}
.lmx-cp .lmx-mc-pill,.lmx-home .lmx-mc-pill{padding:6px 14px}
.lmx-cp .lmx-mc-wheel,.lmx-home .lmx-mc-wheel{width:min(100%,max(340px,calc(100vh - var(--lmx-header-h,110px) - 170px)))}
.lmx-cp .lmx-mc-card,.lmx-home .lmx-mc-card{padding:max(14px,calc(28px * var(--ms-scale,1))) max(16px,calc(32px * var(--ms-scale,1)))}
.lmx-cp .lmx-mc-panel-head,.lmx-home .lmx-mc-panel-head{padding-bottom:max(8px,calc(16px * var(--ms-scale,1)))}
.lmx-cp .lmx-mc-panel-icon,.lmx-home .lmx-mc-panel-icon{width:max(32px,calc(52px * var(--ms-scale,1)));height:max(32px,calc(52px * var(--ms-scale,1)))}
.lmx-cp .lmx-mc-features,.lmx-home .lmx-mc-features{margin-top:max(6px,calc(12px * var(--ms-scale,1)))}
.lmx-cp .lmx-mc-feature-in,.lmx-home .lmx-mc-feature-in{padding:max(6px,calc(12px * var(--ms-scale,1))) max(2px,calc(6px * var(--ms-scale,1)))}
.lmx-cp .lmx-mc-feature-icon,.lmx-home .lmx-mc-feature-icon{width:max(32px,calc(52px * var(--ms-scale,1)));height:max(32px,calc(52px * var(--ms-scale,1)))}
.lmx-cp .lmx-mc-cardnav,.lmx-home .lmx-mc-cardnav{margin-top:max(8px,calc(18px * var(--ms-scale,1)));padding-top:max(6px,calc(12px * var(--ms-scale,1)))}
.lmx-cp .lmx-mc-cardnav .lmx-arrow,.lmx-home .lmx-mc-cardnav .lmx-arrow{width:max(36px,calc(44px * var(--ms-scale,1)));height:max(36px,calc(44px * var(--ms-scale,1)))}
}

/* Phones: the wheel takes the full screen width minus small margins — the ring is wider and the labels fit. */
@media (max-width:600px){
.lmx-mc-inner{padding-left:10px;padding-right:10px}
/* The card arrives with an offset (.is-entering above). While the padding was
   28px the 26px offset fitted; with 10px padding the card went past the right
   edge of the screen for one animation frame. On a phone the offset is smaller
   — 10px — and the starting frame fits whole: 10px padding + card width + 10px
   offset = screen width. The clipping at the section edge stays for the shadow
   and for fractional pixels. */
.lmx-mc-inner.is-entering .lmx-mc-card{transform:translateX(10px)}
.lmx-mc-inner{overflow-x:clip}
}
/* Narrow phones (360px): the ring is narrower still and the labels tighter; the size stays 11px. */
@media (max-width:380px){
.lmx-mc-seg-label{font-size:calc(11px * var(--mc-inv,1.45))}
/* The band width is picked by the script (--seg-w); only the fallback value
   lives here, otherwise on narrow phones the picking affected nothing. */
.lmx-mc-seg-btn{width:calc(var(--seg-w,56px) * var(--mc-inv,1.45));gap:calc(1px * var(--mc-inv,1.45))}
.lmx-mc-seg-icon{width:calc(16px * var(--mc-inv,1.45));height:calc(16px * var(--mc-inv,1.45))}
.lmx-mc-wheel[data-count="4"] .lmx-mc-seg-icon{width:calc(15px * var(--mc-inv,1.45));height:calc(15px * var(--mc-inv,1.45))}
}