/* =========================================================================
 * Home 2026-10-21, block 3 — "The Problem": the sheep and the wolf on the
 * comparison slider of Our Story.
 *
 * The shell is the Our Story comparison (assets/css/our-story/
 * block6-comparison.css, handle lmx-os-os6): .lmx-ic-inner with --ic → --ic-x,
 * the dark theme clipped from the left edge to --ic-x, the divider, the
 * full-size <input type="range"> and the handle. What is new is a layer of
 * faces UNDER both themes: two images with the same size and position, the
 * sheep clipped by inset(0 calc(100% - --ic-x) 0 0), the wolf by
 * inset(0 0 0 --ic-x) — one variable for the image boundary, the background
 * boundary and the handle. The theme backgrounds are overridden to
 * semi-transparent gradients: a darkening on the sheep side, a lightening on
 * the wolf side, so the text reads at any handle position.
 *
 * Desktop: the two themes span the section (the dark one on top). Narrow
 * screens (≤1024): the dark copy is not displayed; the faces live in a stage
 * under the heading (its box is measured by block3-problem.js and written to
 * --prb-stage-top / --prb-stage-h), the slider sits over that stage, and the
 * two columns stack: the left one as a dark panel, the right one light.
 * ====================================================================== */

.lmx-prb-inner{--ic-x:calc(var(--ic) * 1%);color:#141a1f}
.lmx-prb-inner.lmx-ic-inner{background:#04100f}

/* --- the faces ------------------------------------------------------------- */
.lmx-prb-faces{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none;
  /* the hard split of the ground: dark on the sheep side, light on the wolf side */
  background:linear-gradient(90deg,#04100f 0,#04100f var(--ic-x),#edf1f3 var(--ic-x),#edf1f3 100%)}
.lmx-prb-face{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;object-position:50% 42%;display:block;will-change:clip-path}
.lmx-prb-face--sheep{clip-path:inset(0 calc(100% - var(--ic-x)) 0 0)}
.lmx-prb-face--wolf{clip-path:inset(0 0 0 var(--ic-x))}
/* a soft teal halo around the sheep and a white fog around the wolf, as in the mock-up */
.lmx-prb-faces::before{content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(42% 60% at 42% 48%,rgba(82,199,198,.16),rgba(82,199,198,0) 70%);
  clip-path:inset(0 calc(100% - var(--ic-x)) 0 0)}
.lmx-prb-faces::after{content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(42% 60% at 58% 48%,rgba(255,255,255,.55),rgba(255,255,255,0) 72%);
  clip-path:inset(0 0 0 var(--ic-x))}

/* --- the themes: readability overlays instead of opaque grounds ------------ */
.lmx-prb-inner .lmx-ic-theme{z-index:1}
.lmx-prb-inner .lmx-ic-theme--light{background:
    linear-gradient(90deg,rgba(237,241,243,0) 44%,rgba(237,241,243,.72) 64%,rgba(237,241,243,.94) 100%),
    linear-gradient(180deg,rgba(237,241,243,.55),rgba(237,241,243,0) 26%)}
.lmx-prb-inner .lmx-ic-theme--dark{z-index:2;background:
    linear-gradient(90deg,rgba(4,16,15,.9) 0%,rgba(4,16,15,.72) 36%,rgba(4,16,15,.22) 56%,rgba(4,16,15,0) 100%),
    linear-gradient(180deg,rgba(4,16,15,.6),rgba(4,16,15,0) 26%)}

/* --- heading ----------------------------------------------------------------- */
.lmx-prb-inner .lmx-prb-head{padding:max(22px,calc(44px * var(--ms-scale,1))) var(--lmx-section-padding-x) max(8px,calc(14px * var(--ms-scale,1)));text-align:center}
.lmx-prb-eyebrow{margin:0 0 max(12px,calc(20px * var(--ms-scale,1))) !important;font-family:var(--lmx-ms-font) !important;font-size:max(10px,calc(12.5px * var(--ms-scale,1))) !important;font-weight:600;letter-spacing:.36em;text-transform:uppercase;line-height:1.3 !important}
.lmx-prb-eyebrow span{display:inline-block;padding:max(6px,calc(9px * var(--ms-scale,1))) max(14px,calc(22px * var(--ms-scale,1)));border:1px solid rgba(82,199,198,.75);border-radius:3px;background:rgba(4,16,15,.35);color:#9ff3f1;backdrop-filter:blur(6px)}
.lmx-prb-title{margin:0 auto !important;max-width:22ch;font-family:var(--lmx-ms-display,'Outfit','Poppins',sans-serif) !important;font-weight:500 !important;font-size:max(30px,calc(64px * var(--ms-scale,1))) !important;line-height:1.08 !important;letter-spacing:-.02em;text-wrap:balance}
.lmx-ic-theme--light .lmx-prb-title{color:#141a1f !important;text-shadow:0 0 18px rgba(255,255,255,.55)}
.lmx-ic-theme--dark .lmx-prb-title{color:#fff !important;text-shadow:0 2px 14px rgba(0,0,0,.6)}
.lmx-ic-theme--dark .lmx-prb-eyebrow span{border-color:#52C7C6;background:rgba(4,16,15,.55);color:#52C7C6}

/* --- the two columns --------------------------------------------------------- */
.lmx-prb-inner .lmx-prb-cells{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:stretch}
.lmx-prb-inner .lmx-prb-cell{display:flex;flex-direction:column;justify-content:center;min-height:max(260px,calc(470px * var(--ms-scale,1)));
  padding:max(14px,calc(30px * var(--ms-scale,1))) max(40px,calc(120px * var(--ms-scale,1))) max(20px,calc(44px * var(--ms-scale,1))) var(--lmx-section-padding-x)}
.lmx-prb-inner .lmx-prb-cell--right{padding-left:max(40px,calc(120px * var(--ms-scale,1)));padding-right:var(--lmx-section-padding-x)}
.lmx-prb-copy{position:relative;z-index:2;max-width:600px}
.lmx-prb-cell--right .lmx-prb-copy{margin-left:auto}
.lmx-prb-side-eyebrow{margin:0 0 max(10px,calc(16px * var(--ms-scale,1))) !important;font-family:var(--lmx-ms-font) !important;font-size:max(10px,calc(12.5px * var(--ms-scale,1))) !important;font-weight:600;letter-spacing:.36em;text-transform:uppercase;line-height:1.3 !important}
.lmx-prb-side-title{margin:0 !important;font-family:var(--lmx-ms-display,'Outfit','Poppins',sans-serif) !important;font-weight:500 !important;font-size:max(22px,min(calc(36px * var(--ms-scale,1)),2.45vw)) !important;line-height:1.12 !important;letter-spacing:-.02em}
.lmx-prb-side-text{margin:max(10px,calc(18px * var(--ms-scale,1))) 0 0 !important;font-family:var(--lmx-ms-font) !important;font-size:max(14px,calc(18px * var(--ms-scale,1))) !important;line-height:1.5 !important;font-weight:300}
.lmx-prb-list{list-style:none;margin:max(12px,calc(22px * var(--ms-scale,1))) 0 0 !important;padding:0 !important}
.lmx-prb-list li{display:flex;align-items:center;gap:max(14px,calc(22px * var(--ms-scale,1)));margin:0 !important;padding:max(9px,calc(15px * var(--ms-scale,1))) 0;border-bottom:1px solid rgba(128,140,150,.3);font-family:var(--lmx-ms-font);font-size:max(14px,calc(18px * var(--ms-scale,1)));line-height:1.35;font-weight:400}
.lmx-prb-list li:last-child{border-bottom:0}
.lmx-prb-mark{flex:0 0 auto;display:grid;place-items:center;width:max(16px,calc(22px * var(--ms-scale,1)));height:max(16px,calc(22px * var(--ms-scale,1)))}
.lmx-prb-mark svg{width:100%;height:100%;display:block}
.lmx-prb-list--no .lmx-prb-mark{color:#b9c2c8}
.lmx-prb-list--yes .lmx-prb-mark{color:#52C7C6}
.lmx-prb-big{margin:max(14px,calc(26px * var(--ms-scale,1))) 0 0 !important;font-family:var(--lmx-ms-display,'Outfit','Poppins',sans-serif) !important;font-weight:500 !important;font-size:max(20px,calc(30px * var(--ms-scale,1))) !important;line-height:1.2 !important;letter-spacing:-.015em}
.lmx-prb-cta{margin-top:max(14px,calc(26px * var(--ms-scale,1)))}
.lmx-prb-btn{width:100%;max-width:520px;--lmx-v2-scale:var(--ms-scale,1);border-radius:3px;font-weight:600;letter-spacing:.01em}
.lmx-prb-btn--ghost{pointer-events:none}
.lmx-prb-cta-note{margin:max(8px,calc(12px * var(--ms-scale,1))) 0 0 !important;font-family:var(--lmx-ms-font) !important;font-size:max(12px,calc(15px * var(--ms-scale,1))) !important;line-height:1.4 !important;font-weight:300}

/* text colours per theme — final, no interpolation */
.lmx-ic-theme--light .lmx-prb-side-eyebrow{color:#0f8c8b !important}
.lmx-ic-theme--light .lmx-prb-side-title,.lmx-ic-theme--light .lmx-prb-big{color:#141a1f !important}
.lmx-ic-theme--light .lmx-prb-side-text,.lmx-ic-theme--light .lmx-prb-list li,.lmx-ic-theme--light .lmx-prb-cta-note{color:#3d474f !important}
.lmx-ic-theme--light .lmx-prb-list li{border-bottom-color:rgba(20,26,31,.14)}
.lmx-ic-theme--light .lmx-prb-list--no .lmx-prb-mark{color:#5b6670}
.lmx-ic-theme--light .lmx-prb-btn{background:#fff !important;color:#141a1f !important;border-color:#52C7C6}
.lmx-ic-theme--dark .lmx-prb-side-eyebrow{color:#52C7C6 !important;text-shadow:0 0 8px rgba(82,199,198,.6)}
.lmx-ic-theme--dark .lmx-prb-side-title,.lmx-ic-theme--dark .lmx-prb-big{color:#fff !important;text-shadow:0 2px 12px rgba(0,0,0,.55)}
.lmx-ic-theme--dark .lmx-prb-side-text,.lmx-ic-theme--dark .lmx-prb-list li,.lmx-ic-theme--dark .lmx-prb-cta-note{color:#e2e8ea !important;text-shadow:0 1px 8px rgba(0,0,0,.5)}
.lmx-ic-theme--dark .lmx-prb-list li{border-bottom-color:rgba(255,255,255,.18)}
.lmx-ic-theme--dark .lmx-prb-list--no .lmx-prb-mark{color:#d4dbe0}
.lmx-ic-theme--dark .lmx-prb-btn{background:#52C7C6 !important;color:#04211F !important;border-color:#52C7C6}

/* --- handle in the middle of the cells, divider glow ------------------------ */
.lmx-prb-inner .lmx-ic-handle{background:#071716;border-color:#9ff3f1}
.lmx-prb-stage{display:none}

/* --- desktop ------------------------------------------------------------------ */
@media (min-width:1025px){
.lmx-prb-inner.lmx-ic-inner{height:100%;min-height:100%}
.lmx-prb-inner .lmx-ic-theme--light{min-height:100%}
}

/* --- narrow screens ------------------------------------------------------------ */
@media (max-width:1024px){
.lmx-prb-inner{min-height:0}
.lmx-prb-inner .lmx-ic-theme--dark{display:none}
.lmx-prb-inner .lmx-ic-theme--light{background:#edf1f3}
.lmx-prb-inner .lmx-prb-head{padding:76px var(--lmx-section-padding-x) 24px;background:#04100f}
.lmx-ic-theme--light .lmx-prb-title{color:#fff !important;text-shadow:none}
.lmx-ic-theme--light .lmx-prb-eyebrow span{border-color:#52C7C6;color:#52C7C6;background:transparent}
.lmx-prb-title{font-size:36px !important}
/* the stage of the faces: a 16:10 box in the flow; the faces layer and the slider are positioned over it by the script */
.lmx-prb-stage{display:block;position:relative;width:100%;aspect-ratio:16 / 10;background:#04100f}
.lmx-prb-faces{top:var(--prb-stage-top,0px);height:var(--prb-stage-h,0px);bottom:auto;z-index:3}
.lmx-prb-inner .lmx-ic-control{inset:auto;left:0;right:0;top:var(--prb-stage-top,0px);height:var(--prb-stage-h,0px);z-index:6}
.lmx-prb-inner .lmx-ic-range{height:100%}
/* a narrow thumb: with the 64px thumb of the Our Story bar a tap at 75% of a 375px
   stage landed at 80% (the browser maps the value to the track minus the thumb) */
.lmx-prb-inner .lmx-ic-range::-webkit-slider-thumb{width:18px}
.lmx-prb-inner .lmx-ic-range::-moz-range-thumb{width:18px}
.lmx-prb-inner .lmx-ic-track{display:none}
.lmx-prb-inner .lmx-ic-divider{left:var(--ic-x);right:auto;width:2px;margin:0 0 0 -1px;top:var(--prb-stage-top,0px);height:var(--prb-stage-h,0px);bottom:auto}
.lmx-prb-inner .lmx-ic-handle{top:50%;width:44px;height:44px}
.lmx-prb-inner .lmx-prb-cells{grid-template-columns:minmax(0,1fr)}
.lmx-prb-inner .lmx-prb-cell{min-height:0;padding:34px var(--lmx-section-padding-x) 36px}
.lmx-prb-inner .lmx-prb-cell--right{padding-left:var(--lmx-section-padding-x);padding-right:var(--lmx-section-padding-x)}
.lmx-prb-copy{max-width:none}
.lmx-prb-cell--right .lmx-prb-copy{margin-left:0}
/* the left column keeps the dark ground on narrow screens: the sheep side */
.lmx-prb-inner .lmx-prb-cell--left{background:#04100f}
.lmx-ic-theme--light .lmx-prb-cell--left .lmx-prb-side-eyebrow{color:#52C7C6 !important}
.lmx-ic-theme--light .lmx-prb-cell--left .lmx-prb-side-title,.lmx-ic-theme--light .lmx-prb-cell--left .lmx-prb-big{color:#fff !important}
.lmx-ic-theme--light .lmx-prb-cell--left .lmx-prb-side-text,.lmx-ic-theme--light .lmx-prb-cell--left .lmx-prb-list li{color:#e2e8ea !important;border-bottom-color:rgba(255,255,255,.18)}
.lmx-ic-theme--light .lmx-prb-cell--left .lmx-prb-list--no .lmx-prb-mark{color:#d4dbe0}
.lmx-prb-side-title{font-size:28px !important}
.lmx-prb-side-text,.lmx-prb-list li{font-size:16px !important}
.lmx-prb-big{font-size:24px !important}
}
@media (max-width:480px){
.lmx-prb-inner .lmx-prb-head{padding-top:64px}
.lmx-prb-title{font-size:30px !important}
.lmx-prb-side-title{font-size:25px !important}
.lmx-prb-stage{aspect-ratio:4 / 3}
}

/* --- less motion: nothing here animates by itself; the slider still works ---- */
@media (prefers-reduced-motion:reduce){
.lmx-prb-inner *{transition:none !important}
}

/* ---- the slider takes input ONLY at its handle / line (2026-10-27) ------------------------------------------
   The range input spanned the whole block (desktop: inset 0 over both columns; phones: the stage) and sat above
   the content, so a press on the «Take the Active Defense Assessment» button — or on any text — moved the slider
   instead of reaching it. Now the input and its box ignore the pointer; only the thumb takes it. The thumb is a
   full-height strip --prb-t wide (44px: the handle circle plus a few px each side for a finger) and the input is
   made --prb-t wider than its box and shifted by half of it, so the thumb CENTRE stays exactly at --ic-x (the
   native thumb range is track − thumb; this also fixes the old 18px-thumb offset on phones). Keyboard is
   untouched: the input is still the focusable slider (arrows, Home/End). Page scroll by touch is untouched:
   touch-action:pan-y, and nothing but the strip captures touches. */
.lmx-prb-inner{--prb-t:44px}
.lmx-prb-inner .lmx-ic-control{pointer-events:none}
.lmx-prb-inner .lmx-ic-range{pointer-events:none;left:calc(var(--prb-t) / -2);right:auto;width:calc(100% + var(--prb-t))}
.lmx-prb-inner .lmx-ic-range::-webkit-slider-thumb{width:var(--prb-t);pointer-events:auto;cursor:ew-resize}
.lmx-prb-inner .lmx-ic-range::-moz-range-thumb{width:var(--prb-t);pointer-events:auto;cursor:ew-resize}