/* =========================================================================
 * Active Defense — block 2, First Principles.
 *
 * The markup, the two columns, the panel stage, the chain and the particle
 * transition all come from the capability selector of MDR block 4
 * (assets/css/mdr/block4-capabilities.css, handle lmx-mdr-d4, classes
 * .lmx-cap-*). Like every other section it is fitted to the window by the
 * shared engine (--ms-scale): on a laptop the chain at the bottom has to be
 * visible without scrolling. For the fitting to converge, text widths are
 * given in pixels (not derived from the scale — otherwise lines wrap tighter
 * and the height never drops), and the font sizes have lower bounds at which
 * the block still fits into 1366×768 with four paragraphs on the left and a
 * nine-item chain.
 * ====================================================================== */

/* The left column is wider (it holds four paragraphs), the right one is the card. */
.lmx-ad .lmx-fp-inner .lmx-cap-cols{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:max(24px,calc(56px * var(--ms-scale,1)));padding-top:max(6px,calc(20px * var(--ms-scale,1)))}
.lmx-ad .lmx-fp-inner .lmx-cap-eyebrow{margin-bottom:max(8px,calc(22px * var(--ms-scale,1))) !important;font-size:max(10px,calc(13px * var(--ms-scale,1))) !important}
.lmx-ad .lmx-fp-inner .lmx-cap-title{font-size:max(30px,calc(56px * var(--ms-scale,1))) !important;max-width:16ch}
.lmx-ad .lmx-fp-inner .lmx-cap-desc{margin-top:max(8px,calc(22px * var(--ms-scale,1))) !important;max-width:640px;font-size:max(14px,calc(19px * var(--ms-scale,1))) !important;line-height:1.5 !important}
.lmx-ad .lmx-fp-inner .lmx-cap-quote{margin-top:max(8px,calc(22px * var(--ms-scale,1))) !important;max-width:640px}
.lmx-ad .lmx-fp-inner .lmx-cap-quote p{font-size:max(17px,calc(26px * var(--ms-scale,1))) !important}

/* Right column: the card is slightly more compact than on MDR (its height is the height of the longest of the nine). */
.lmx-ad .lmx-fp-inner .lmx-cap-right{padding-left:max(20px,calc(52px * var(--ms-scale,1)))}
.lmx-ad .lmx-fp-inner .lmx-cap-accent-val{font-size:max(40px,calc(88px * var(--ms-scale,1)))}
.lmx-ad .lmx-fp-inner .lmx-cap-accent-unit{font-size:max(18px,calc(34px * var(--ms-scale,1)))}
.lmx-ad .lmx-fp-inner .lmx-cap-accent-label{font-size:max(10px,calc(12.5px * var(--ms-scale,1))) !important}
.lmx-ad .lmx-fp-inner .lmx-cap-panel-title{margin-top:max(10px,calc(24px * var(--ms-scale,1))) !important;font-size:max(20px,calc(34px * var(--ms-scale,1))) !important}
.lmx-ad .lmx-fp-inner .lmx-cap-panel-desc{margin-top:max(8px,calc(14px * var(--ms-scale,1))) !important;max-width:560px;font-size:max(13.5px,calc(17.5px * var(--ms-scale,1))) !important}
.lmx-ad .lmx-fp-inner .lmx-cap-points{margin-top:max(10px,calc(18px * var(--ms-scale,1)));max-width:560px;gap:max(8px,calc(14px * var(--ms-scale,1)))}
.lmx-ad .lmx-fp-inner .lmx-cap-point-title,
.lmx-ad .lmx-fp-inner .lmx-cap-point-text{font-size:max(13px,calc(16px * var(--ms-scale,1)))}

/* The chain: nine labels on two lines, never touching the neighbouring dots. */
.lmx-ad .lmx-fp-inner .lmx-cap-navwrap{margin-top:max(14px,calc(44px * var(--ms-scale,1)))}
.lmx-ad .lmx-fp-inner .lmx-cap-nav .lmx-mh-nav-label{max-width:max(100px,calc(140px * var(--ms-scale,1)));font-size:max(10px,calc(12px * var(--ms-scale,1)))}

@media (max-width:1024px){
/* The accent word (“ASSUME”, “END-TO-END”, “PROACTIVE”) is set larger on
   this page than in the shared component, and on a phone 88px did not fit
   into a 334px column: the word broke in the middle (“ASSUM / E”). On narrow
   screens the size is derived from the window width; measured on the longest
   word. */
.lmx-ad .lmx-fp-inner .lmx-cap-accent-val{font-size:min(64px,13.5vw)}
.lmx-ad .lmx-fp-inner .lmx-cap-accent-unit{font-size:26px}
.lmx-ad .lmx-fp-inner .lmx-cap-cols{grid-template-columns:minmax(0,1fr);gap:28px;padding-top:0}
.lmx-ad .lmx-fp-inner .lmx-cap-right{padding-left:0}
.lmx-ad .lmx-fp-inner .lmx-cap-title{font-size:40px !important;max-width:none}
.lmx-ad .lmx-fp-inner .lmx-cap-desc,
.lmx-ad .lmx-fp-inner .lmx-cap-quote,
.lmx-ad .lmx-fp-inner .lmx-cap-panel-desc,
.lmx-ad .lmx-fp-inner .lmx-cap-points{max-width:none}
.lmx-ad .lmx-fp-inner .lmx-cap-desc{font-size:16px !important}
.lmx-ad .lmx-fp-inner .lmx-cap-quote p{font-size:22px !important}
.lmx-ad .lmx-fp-inner .lmx-cap-panel-desc{font-size:15px !important}
.lmx-ad .lmx-fp-inner .lmx-cap-point-title,
.lmx-ad .lmx-fp-inner .lmx-cap-point-text{font-size:15px}
.lmx-ad .lmx-fp-inner .lmx-cap-navwrap{margin-top:34px}
/* The chain scrolls horizontally (shared component rules); labels on one line. */
.lmx-ad .lmx-fp-inner .lmx-cap-nav .lmx-mh-nav-label{max-width:none;font-size:12px}
}
@media (max-width:480px){
.lmx-ad .lmx-fp-inner .lmx-cap-accent-val{font-size:min(56px,13vw)}
.lmx-ad .lmx-fp-inner .lmx-cap-title{font-size:34px !important}
}