/* =========================================================================
 * Platform — section backgrounds and tweaks on top of the shared components.
 *
 * The copies of the home blocks (p3–p7, p11) live in their own CSS under the
 * previous handles; the --blockN-scale ← --ms-scale bridges are in
 * assets/css/shared/core-page.css. Here: the “Here’s the thing” comet (rich
 * text with accent lines), How We Protect (the Connected Defense component —
 * Why LMNTRIX block 2) and the competitive table (the shared comparison table
 * component).
 * ====================================================================== */

.lmx-pfm > .lmx-msec--p1,
.lmx-pfm > .lmx-msec--p2,
.lmx-pfm > .lmx-msec--p7,
.lmx-pfm > .lmx-msec--p9,
.lmx-pfm > .lmx-msec--p10,
.lmx-pfm > .lmx-msec--p11{background-color:#000}
.lmx-pfm > .lmx-msec--p3,
.lmx-pfm > .lmx-msec--p4{background-color:#eceef1}
.lmx-pfm > .lmx-msec--p5,
.lmx-pfm > .lmx-msec--p6,
.lmx-pfm > .lmx-msec--p8{background-color:#eef0f3}

/* --- «Here’s the thing» -------------------------------------------------------- */
.lmx-pfm-thing .lmx-siem-text{max-width:680px}
.lmx-pfm-thing .lmx-siem-desc{max-width:640px}
.lmx-pfm-thing .lmx-siem-desc--rich .lmx-pfm-accent{margin-top:max(14px,calc(26px * var(--siem-scale,1))) !important;font-family:var(--lmx-ms-font,'Hanken Grotesk',Helvetica,Arial,sans-serif) !important;font-weight:600 !important;font-size:max(11px,calc(13px * var(--siem-scale,1))) !important;letter-spacing:.32em;text-transform:uppercase;color:#52C7C6 !important;line-height:1.4 !important}
.lmx-pfm-thing .lmx-siem-desc--rich .lmx-pfm-result{font-family:var(--lmx-ms-display,'Outfit','Poppins',sans-serif) !important;font-weight:400 !important;font-size:max(20px,calc(28px * var(--siem-scale,1))) !important;line-height:1.25 !important;letter-spacing:-.01em;color:#fff !important}
.lmx-pfm-thing .lmx-siem-desc--rich .lmx-pfm-final{color:rgba(255,255,255,.92) !important;font-weight:400 !important}

/* --- How We Protect: Why LMNTRIX block 2 (grid, items, pulse layer), the frame
   of six agents 1457×1079 with the labels and the pill baked in (2026-09-21) --- */
.lmx-pfm-protect .lmx-cd-title{max-width:16ch}
.lmx-pfm-protect .lmx-cd-visual{padding-bottom:0}
.lmx-pfm-protect .lmx-cd-scheme{aspect-ratio:1457 / 1079}
/* The IR Agent label sits right at the top of the frame — the top fade is shorter than on Why. */
.lmx-pfm-protect .lmx-cd-scheme-img{-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 6%,#000 94%,transparent 100%),linear-gradient(180deg,transparent 0,#000 2%,#000 100%);mask-image:linear-gradient(90deg,transparent 0,#000 6%,#000 94%,transparent 100%),linear-gradient(180deg,transparent 0,#000 2%,#000 100%)}
/* The viewBox is wider than the Why frame (1457 against 1022) — strokes in user units are proportionally thicker. */
.lmx-pfm-protect .lmx-cd-ray{stroke-width:20}
.lmx-pfm-protect .lmx-cd-node{stroke-width:4}
@media (min-width:1025px){
.lmx-pfm-protect .lmx-cd-visual{width:min(100%,calc((100vh - var(--lmx-header-h,110px) - 150px) * 1457 / 1079))}
}

/* --- Competitive Feature Comparison -------------------------------------------- */
.lmx-pfm-cmp .lmx-ct-wrap{padding:max(40px,calc(64px * var(--ms-scale,1))) 0 max(40px,calc(64px * var(--ms-scale,1)));gap:0}
.lmx-pfm-cmp .lmx-ct-kind{display:none}
.lmx-pfm-cmp .lmx-ct-title{font-size:max(30px,calc(52px * var(--ms-scale,1))) !important}

@media (min-width:1025px){
.lmx-pfm-cmp.lmx-ct-inner{display:grid;align-content:center;height:100%;min-height:100%}
.lmx-pfm-cmp .lmx-ct-mx th,.lmx-pfm-cmp .lmx-ct-mx td{padding:max(9px,calc(13px * var(--ms-scale,1))) max(12px,calc(20px * var(--ms-scale,1)));font-size:max(13px,calc(15px * var(--ms-scale,1)))}
}
@media (max-width:1024px){
.lmx-pfm-cmp.lmx-ct-inner{display:block !important;height:auto !important;min-height:0 !important;padding:80px var(--lmx-section-padding-x) 60px}
.lmx-pfm-cmp .lmx-ct-wrap{padding:0}
.lmx-pfm-protect .lmx-cd-grid{grid-template-columns:minmax(0,1fr)}
}

/* --- How We Protect on short laptops (2026-09-21): a wider text column (the
   descriptions wrap shorter), a more compact heading, intro, padding and item
   icons, and the diagram sized from the window height. Platform only: the
   selectors outweigh the rules of the Why component, so the order in which the
   CSS is loaded does not matter. */
@media (min-width:1025px) and (max-height:680px){
.lmx-pfm-protect .lmx-cd-grid{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:max(20px,calc(40px * var(--ms-scale,1)))}
.lmx-pfm-protect .lmx-cd-title{margin-top:6px !important;font-size:max(28px,min(calc(62px * var(--ms-scale,1)),3vw)) !important}
.lmx-pfm-protect .lmx-cd-intro{margin-top:8px}
.lmx-pfm-protect .lmx-cd-intro p{margin-bottom:.4em !important;font-size:max(14px,calc(17px * var(--ms-scale,1))) !important;line-height:1.45 !important}
.lmx-pfm-protect .lmx-cd-list{margin-top:10px !important;max-width:min(100%,640px)}
.lmx-pfm-protect .lmx-cd-item{padding:max(7px,calc(20px * var(--ms-scale,1))) 0;column-gap:max(12px,calc(28px * var(--ms-scale,1)))}
.lmx-pfm-protect .lmx-cd-item:first-child{padding-top:0}
.lmx-pfm-protect .lmx-cd-icon{width:max(38px,calc(60px * var(--ms-scale,1)));height:max(38px,calc(60px * var(--ms-scale,1)))}
.lmx-pfm-protect .lmx-cd-item-title{font-size:max(17px,calc(23px * var(--ms-scale,1))) !important}
.lmx-pfm-protect .lmx-cd-item-desc{margin-top:2px !important;font-size:max(13.5px,calc(16px * var(--ms-scale,1))) !important;line-height:1.4 !important}
.lmx-pfm-protect .lmx-cd-visual{width:min(100%,calc((100vh - var(--lmx-header-h,110px) - 120px) * 1457 / 1079))}
}