/* =========================================================================
 * Why LMNTRIX — block 2, Connected Defense.
 *
 * A light section: the text and three items (ACF) on the left, a static diagram
 * on the right — a cut-out image with an SVG pulse layer above it. The pulses
 * are SMIL in the markup itself
 * (template-parts/why-lmntrix/block2-connected-defense.php); only their look
 * and the static glow for “less motion” live here.
 * ====================================================================== */

.lmx-cd-inner{position:relative;width:100%;min-height:100vh;
  background:linear-gradient(135deg,#f7f8fa 0%,#eef0f3 55%,#e3e6ea 100%) !important;
  font-family:var(--lmx-ms-font,'Hanken Grotesk',Helvetica,Arial,sans-serif);
  padding:0 var(--lmx-section-padding-x);box-sizing:border-box;overflow:hidden;
  --ms-scale:1;--cd-accent:#178a8a;--cd-ink:#1c2128;--cd-dim:#5b6169}
.lmx-cd-inner *{box-sizing:border-box}
/* Light “clouds” in the bottom corners, as in the reference. Strictly inside
   the section: anything sticking out below it counts towards scrollHeight, from
   which the page engine picks --ms-scale, and the block would be squeezed for
   nothing. */
.lmx-cd-inner::before{content:'';position:absolute;left:0;right:0;bottom:0;height:55%;pointer-events:none;z-index:0;
  background:radial-gradient(40% 60% at 6% 100%,rgba(255,255,255,.9),rgba(255,255,255,0) 70%),radial-gradient(40% 60% at 94% 100%,rgba(255,255,255,.8),rgba(255,255,255,0) 70%)}

.lmx-cd-grid{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);align-items:center;gap:max(24px,calc(48px * var(--ms-scale,1)))}

/* --- text ------------------------------------------------------------------
   The widths of the text columns do NOT depend on the scale: otherwise when
   squeezed the text wraps tighter, the column height does not drop and the
   fitting runs to its minimum. The lower size bounds are about readability on
   laptops. */
.lmx-cd-eyebrow{display:block;color:var(--cd-accent);font-size:max(11px,calc(13px * var(--ms-scale,1)));font-weight:700;letter-spacing:.3em;text-transform:uppercase}
.lmx-cd-title{margin:max(10px,calc(20px * var(--ms-scale,1))) 0 0 !important;font-family:var(--lmx-ms-display,'Outfit',sans-serif) !important;font-weight:600 !important;font-size:max(36px,min(calc(62px * var(--ms-scale,1)),3.9vw)) !important;line-height:1.05 !important;letter-spacing:-.025em;color:var(--cd-ink) !important;max-width:12ch}
.lmx-cd-desc{margin:max(12px,calc(24px * var(--ms-scale,1))) 0 0 !important;max-width:min(100%,560px);font-size:max(16px,calc(18px * var(--ms-scale,1))) !important;line-height:1.55 !important;font-weight:300;color:var(--cd-dim) !important}
.lmx-cd-list{list-style:none;margin:max(16px,calc(36px * var(--ms-scale,1))) 0 0 !important;padding:0 !important;max-width:min(100%,560px)}
.lmx-cd-item{display:grid;grid-template-columns:auto 1fr;column-gap:max(14px,calc(28px * var(--ms-scale,1)));align-items:center;margin:0 !important;padding:max(10px,calc(20px * var(--ms-scale,1))) 0;border-top:1px solid rgba(28,33,40,.12)}
.lmx-cd-item:first-child{border-top:0;padding-top:0}
.lmx-cd-icon{display:block;width:max(44px,calc(60px * var(--ms-scale,1)));height:max(44px,calc(60px * var(--ms-scale,1)));color:var(--cd-ink)}
.lmx-cd-icon svg{width:100%;height:100%;display:block}
.lmx-cd-item-title{margin:0 !important;font-family:var(--lmx-ms-display,'Outfit',sans-serif) !important;font-weight:600 !important;font-size:max(19px,calc(23px * var(--ms-scale,1))) !important;line-height:1.2 !important;color:var(--cd-ink) !important}
.lmx-cd-item-desc{margin:max(3px,calc(6px * var(--ms-scale,1))) 0 0 !important;font-size:max(14px,calc(16px * var(--ms-scale,1))) !important;line-height:1.45 !important;font-weight:300;color:var(--cd-dim) !important}

/* --- diagram ---------------------------------------------------------------
   On desktop the width of the visual is derived from the screen height: the
   diagram takes everything left under the header and the caption and stops at
   the column width — that way it does not shrink on short laptop screens. */
.lmx-cd-visual{position:relative;min-width:0;width:100%;max-width:none;justify-self:center;padding-bottom:max(44px,calc(64px * var(--ms-scale,1)))}
.lmx-cd-scheme{position:relative;width:100%;aspect-ratio:1022 / 750}
/* The image dissolves at the edges so that the rectangle of the cut-out does
   not read against the section background; the bottom (the arrow to the
   caption) stays sharp. */
.lmx-cd-scheme-img{position:absolute;inset:0;width:100%;height:100%;display:block;object-fit:contain;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 9%,#000 91%,transparent 100%),linear-gradient(180deg,transparent 0,#000 7%,#000 100%);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(90deg,transparent 0,#000 9%,#000 91%,transparent 100%),linear-gradient(180deg,transparent 0,#000 7%,#000 100%);
  mask-composite:intersect}
.lmx-cd-fx{position:absolute;inset:0;width:100%;height:100%;display:block;overflow:visible;pointer-events:none}
.lmx-cd-ray{fill:none;stroke:#8beeec;stroke-width:14;stroke-linecap:round;filter:url(#lmx-cd-blur)}
.lmx-cd-pulse-halo{fill:#6fe9e4;opacity:.6;filter:url(#lmx-cd-blur)}
.lmx-cd-pulse-core{fill:#eaffff}
.lmx-cd-node{fill:none;stroke:#6fe9e4;stroke-width:3;filter:url(#lmx-cd-blur-s)}
/* Less motion: the animation is paused (by the script) and a soft static glow remains. */
.lmx-cd-scheme.is-static .lmx-cd-ray{opacity:.22 !important}
.lmx-cd-scheme.is-static .lmx-cd-node{opacity:.5 !important}
.lmx-cd-scheme.is-static .lmx-cd-pulse{display:none}

/* The caption under the arrow is static and its centre matches the axis of the
   diagram. In the 2026-09-14 frame the hub sits exactly in the middle of the
   image, hence 50%. */
.lmx-cd-pill{position:absolute;left:50%;bottom:0;transform:translateX(-50%);white-space:nowrap;
  padding:max(8px,calc(12px * var(--ms-scale,1))) max(16px,calc(26px * var(--ms-scale,1)));
  border:1px solid var(--cd-accent);border-radius:999px;background:rgba(255,255,255,.6);
  color:var(--cd-accent);font-size:max(10px,calc(13px * var(--ms-scale,1)));font-weight:600;letter-spacing:.24em;text-transform:uppercase;line-height:1.2}

/* --- desktop: the section fits the window exactly --------------------------- */
@media (min-width:1025px){
.lmx-cd-inner{display:grid;align-content:center;height:100%;min-height:100%}
.lmx-cd-visual{width:min(100%,calc((100vh - var(--lmx-header-h,110px) - 190px) * 1022 / 750))}
}

/* --- narrow screens: the text first, then the full-width diagram ----------- */
@media (max-width:1024px){
.lmx-cd-inner{display:block !important;height:auto !important;min-height:0 !important;padding:90px var(--lmx-section-padding-x) 70px}
.lmx-cd-grid{grid-template-columns:minmax(0,1fr);gap:34px}
.lmx-cd-title{font-size:40px !important;max-width:none}
.lmx-cd-visual{width:100%;max-width:640px;justify-self:center}
}
@media (max-width:680px){
.lmx-cd-inner{padding:70px var(--lmx-section-padding-x) 50px}
.lmx-cd-title{font-size:32px !important}
.lmx-cd-icon{width:44px;height:44px}
.lmx-cd-pill{font-size:11px;letter-spacing:.18em;padding:8px 14px}
}

/* =========================================================================
 * The shared component inc/connected-scheme.php (2026-09-15/16): the “How We
 * Protect” block of the Platform page is the same block as above; the only
 * differences are what is passed here — an image icon for an item (a media
 * library attachment), intro paragraphs after the description and node labels
 * as text over a frame with no baked-in captions. None of this is printed on
 * Why LMNTRIX — its output and styles are unchanged.
 * ====================================================================== */

/* --- the image icon of an item --------------------------------------------- */
.lmx-cd-icon--img{display:inline-flex;align-items:center;justify-content:center;border-radius:14px;background:#fff;box-shadow:0 2px 10px rgba(21,24,29,.08)}
.lmx-cd-icon--img img{width:58% !important;height:58% !important;object-fit:contain}

/* --- intro (the paragraphs after the description) -------------------------- */
.lmx-cd-intro{margin:max(10px,calc(18px * var(--ms-scale,1))) 0 0;max-width:min(100%,560px);font-size:max(15px,calc(17px * var(--ms-scale,1)));line-height:1.5;font-weight:300;color:var(--cd-dim)}
.lmx-cd-intro p{margin:0 0 .6em !important;font:inherit !important;color:inherit !important}
.lmx-cd-intro p:last-child{margin-bottom:0 !important}
.lmx-cd-intro strong{font-weight:600;color:var(--cd-ink)}


/* The 2026-09-23 frame is square, and to keep the frame proportions (the scale
   fits the section height) it was padded with flat light background. The frame
   background is slightly lighter than the section background, so a rectangle
   showed at the edges — they are faded with a soft mask. The feather is
   narrower than the gap to the artwork: the NETWORK label at the top and the
   OT/IOT one at the bottom are not touched. This page only — the agent diagram
   on Platform has a frame of its own. */
[data-block="w2"] .lmx-cd-scheme-img{
	-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%),linear-gradient(180deg,transparent 0,#000 3.5%,#000 96.5%,transparent 100%);
	mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%),linear-gradient(180deg,transparent 0,#000 3.5%,#000 96.5%,transparent 100%);
	-webkit-mask-composite:source-in;
	mask-composite:intersect;
}