/* =========================================================================
 * Platform — block 10, Meet Artemis & LISA (#artemis-lisa).
 *
 * A dark section: two cards — Artemis (the investigation engine, on the left)
 * and LISA (the analyst interface, on the right) — and a vertical flow between
 * them: a rail with six step nodes (three Artemis, three LISA) along which a
 * data packet runs down and comes back on a loop (the analyst's decision →
 * training for Artemis). The animation is SMIL inside the SVG (paused off
 * screen by block10-artemis-lisa.js) and a CSS glow on the cards only while
 * .is-inview; with prefers-reduced-motion everything is static. On narrow
 * screens the flow becomes a horizontal strip of steps between the cards.
 * ====================================================================== */

.lmx-al-inner{position:relative;width:100%;min-height:100vh;background:#050708 !important;color:#fff;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;--al-accent:#52C7C6;--al-accent-hi:#83DAD9;--al-line:rgba(255,255,255,.10);--al-text:rgba(255,255,255,.8);--al-muted:rgba(255,255,255,.55)}
.lmx-al-inner *{box-sizing:border-box;min-width:0}
.lmx-al-bg{position:absolute;inset:0;z-index:0;pointer-events:none;background:radial-gradient(50% 45% at 22% 55%,rgba(82,199,198,.12),transparent 70%),radial-gradient(50% 45% at 78% 45%,rgba(82,199,198,.10),transparent 70%)}
.lmx-al-bg::before{content:'';position:absolute;inset:0;background:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);background-size:56px 56px;-webkit-mask-image:radial-gradient(70% 60% at 50% 50%,#000 10%,transparent 100%);mask-image:radial-gradient(70% 60% at 50% 50%,#000 10%,transparent 100%)}

.lmx-al-head{position:relative;z-index:1;text-align:center;max-width:820px;margin:0 auto;padding-top:max(28px,calc(56px * var(--ms-scale,1)))}
.lmx-al-eyebrow{margin:0 0 max(8px,calc(12px * var(--ms-scale,1))) !important;font-family:var(--lmx-ms-font) !important;font-weight:600;font-size:max(11px,calc(13px * var(--ms-scale,1))) !important;letter-spacing:.34em;text-transform:uppercase;color:var(--al-accent) !important;line-height:1.4 !important}
.lmx-al-title{margin:0 !important;font-family:var(--lmx-ms-display,'Outfit','Poppins',sans-serif) !important;font-weight:300 !important;font-size:max(32px,calc(56px * var(--ms-scale,1))) !important;line-height:1.05 !important;letter-spacing:-.02em;color:#fff !important;text-wrap:balance}
.lmx-al-desc{margin:max(8px,calc(14px * var(--ms-scale,1))) auto 0 !important;max-width:640px;font-family:var(--lmx-ms-font) !important;font-weight:300;font-size:max(15px,calc(18px * var(--ms-scale,1))) !important;line-height:1.55 !important;color:var(--al-text) !important}

/* --- grid: card / flow / card ------------------------------------------------ */
/* The middle column holds the step labels on both sides of the rail. The
   previous 190px were not enough for two labels: “INGESTS TELEMETRY” and
   “DELIVERS THE INVESTIGATION” did not fit into their half and ran into the
   rail node and the LISA card. Half of the column has to hold the number, the
   gap and the longest line. */
.lmx-al-grid{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1fr) max(230px,calc(330px * var(--ms-scale,1))) minmax(0,1fr);align-items:stretch;gap:max(16px,calc(28px * var(--ms-scale,1)));margin-top:max(22px,calc(40px * var(--ms-scale,1)));padding-bottom:max(30px,calc(56px * var(--ms-scale,1)))}

.lmx-al-card{position:relative;display:flex;flex-direction:column;gap:max(10px,calc(14px * var(--ms-scale,1)));padding:max(20px,calc(30px * var(--ms-scale,1)));border:1px solid var(--al-line);border-radius:22px;background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.015));box-shadow:0 1px 0 rgba(255,255,255,.04) inset,0 30px 70px rgba(0,0,0,.45);overflow:hidden}
.lmx-al-card-glow{position:absolute;inset:-40%;pointer-events:none;background:radial-gradient(40% 40% at 50% 50%,rgba(82,199,198,.16),transparent 70%);opacity:.6}
.lmx-al-card--a .lmx-al-card-glow{transform:translate(-30%,-30%)}
.lmx-al-card--l .lmx-al-card-glow{transform:translate(30%,30%)}
.lmx-al-inner.is-inview .lmx-al-card-glow{animation:lmx-al-breathe 7s ease-in-out infinite}
.lmx-al-inner.is-inview .lmx-al-card--l .lmx-al-card-glow{animation-delay:-3.5s}
@keyframes lmx-al-breathe{0%,100%{opacity:.45}50%{opacity:.9}}
.lmx-al-card-head{position:relative;display:flex;align-items:center;gap:max(12px,calc(18px * var(--ms-scale,1)))}
.lmx-al-badge{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;width:max(52px,calc(66px * var(--ms-scale,1)));height:max(52px,calc(66px * var(--ms-scale,1)));border-radius:18px;border:1px solid rgba(82,199,198,.45);background:rgba(82,199,198,.10);color:var(--al-accent);box-shadow:0 0 24px rgba(82,199,198,.18)}
.lmx-al-badge svg{width:60%;height:60%}
.lmx-al-badge--img img{width:58% !important;height:58% !important;object-fit:contain;filter:brightness(0) invert(1) sepia(1) saturate(4) hue-rotate(130deg)}
.lmx-al-card-eyebrow{margin:0 0 4px !important;font-family:var(--lmx-ms-font) !important;font-weight:700;font-size:max(11px,calc(12px * var(--ms-scale,1))) !important;letter-spacing:.34em;text-transform:uppercase;color:var(--al-accent) !important;line-height:1.3 !important}
.lmx-al-card-title{position:relative;margin:0 !important;font-family:var(--lmx-ms-display,'Outfit','Poppins',sans-serif) !important;font-weight:400 !important;font-size:max(21px,calc(28px * var(--ms-scale,1))) !important;line-height:1.15 !important;letter-spacing:-.01em;color:#fff !important}
.lmx-al-card-desc{position:relative;margin:0 !important;font-family:var(--lmx-ms-font) !important;font-weight:300;font-size:max(14px,calc(16px * var(--ms-scale,1))) !important;line-height:1.55 !important;color:var(--al-text) !important}
.lmx-al-caps{position:relative;list-style:none;margin:max(4px,calc(8px * var(--ms-scale,1))) 0 0;padding:max(12px,calc(16px * var(--ms-scale,1))) 0 0;border-top:1px solid var(--al-line);display:flex;flex-direction:column;gap:max(7px,calc(10px * var(--ms-scale,1)))}
.lmx-al-cap{display:flex;align-items:flex-start;gap:12px;margin:0;font-family:var(--lmx-ms-font);font-size:max(14px,calc(15.5px * var(--ms-scale,1)));line-height:1.45;color:#fff}
.lmx-al-cap-dot{flex:0 0 auto;width:8px;height:8px;margin-top:.5em;border-radius:50%;background:var(--al-accent);box-shadow:0 0 10px rgba(82,199,198,.7)}
.lmx-al-inner.is-inview .lmx-al-cap-dot{animation:lmx-al-dot 3s ease-in-out infinite;animation-delay:calc(var(--i,0) * .4s)}
@keyframes lmx-al-dot{0%,100%{box-shadow:0 0 6px rgba(82,199,198,.4)}50%{box-shadow:0 0 16px rgba(82,199,198,.95)}}

/* --- flow -------------------------------------------------------------------- */
.lmx-al-flow{position:relative;display:grid;place-items:center;min-height:100%}
.lmx-al-flow-svg{position:absolute;left:50%;top:0;height:100%;width:auto;transform:translateX(-50%);overflow:visible}
.lmx-al-rail{fill:none;stroke-width:2}
.lmx-al-loop{fill:none;stroke:rgba(82,199,198,.28);stroke-width:1.5;stroke-dasharray:5 7}
.lmx-al-node{fill:#0b1416;stroke:var(--al-accent);stroke-width:2}
.lmx-al-node-ring{fill:none;stroke:var(--al-accent);stroke-width:1.2;opacity:.8}
.lmx-al-packet-halo{fill:rgba(82,199,198,.65)}
.lmx-al-packet-core{fill:#eaffff}
.lmx-al-arrow{fill:none;stroke:var(--al-accent);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
/* The labels are tied to the rail nodes BY HEIGHT: node n sits at
   (60 + n*80) / 520 of the viewBox height, which is 11.538% + n*15.385%. The
   lines used to be laid out by a grid with vertical padding in percentages of
   the column WIDTH, and any change of that width moved the labels relative to
   the nodes. */
.lmx-al-steps{position:absolute;inset:0;list-style:none;margin:0;padding:0}
.lmx-al-step{position:absolute;top:calc(11.538% + var(--n,0) * 15.385%);transform:translateY(-50%);display:flex;align-items:center;gap:8px;margin:0;max-width:calc(50% - 42px);font-family:var(--lmx-ms-font);font-size:max(10px,calc(11.5px * var(--ms-scale,1)));letter-spacing:.06em;text-transform:uppercase;color:var(--al-muted);line-height:1.25}
.lmx-al-step--a{right:calc(50% + 34px);justify-content:flex-end;text-align:right}
.lmx-al-step--l{left:calc(50% + 34px);justify-content:flex-start;flex-direction:row-reverse;text-align:left}
.lmx-al-step--l .lmx-al-step-num{order:2}
.lmx-al-step-num{flex:0 0 auto;color:var(--al-accent);font-weight:600;font-size:max(9px,calc(10px * var(--ms-scale,1)))}
/* Down to 767px the step number stays at least 11px: on a phone it is a label, not decoration. */
@media (max-width:767px){
.lmx-al-step-num{font-size:11px}
}
.lmx-al-step-text{max-width:100%}
.lmx-al-inner[data-al="static"] .lmx-al-node-ring{opacity:.35}
.lmx-al-inner[data-al="static"] .lmx-al-packet{display:none}

/* --- desktop: the section fits the window exactly ----------------------------- */
@media (min-width:1025px){
.lmx-al-inner{display:grid;grid-template-rows:auto minmax(0,1fr);align-content:start;height:100%;min-height:100%}
.lmx-al-grid{min-height:0}
}

/* --- tablet and phone: the cards stack, the flow becomes a strip of steps between them --- */
@media (max-width:1024px){
.lmx-al-inner{display:block !important;height:auto !important;min-height:0 !important;padding:90px var(--lmx-section-padding-x) 60px}
.lmx-al-head{padding-top:0}
.lmx-al-grid{grid-template-columns:minmax(0,1fr);gap:18px;margin-top:28px;padding-bottom:0}
.lmx-al-flow{min-height:0;padding:6px 0}
.lmx-al-flow-svg{display:none}
.lmx-al-steps{position:static;display:flex;flex-wrap:wrap;justify-content:center;gap:8px;height:auto;padding:0}
.lmx-al-step,.lmx-al-step--a,.lmx-al-step--l{position:static;transform:none;max-width:none;inset:auto;flex-direction:row;justify-content:center;padding:8px 12px;border:1px solid var(--al-line);border-radius:999px;text-align:left;background:rgba(255,255,255,.03)}
.lmx-al-step--l .lmx-al-step-num{order:0}
.lmx-al-title{font-size:36px !important}
}
@media (max-width:640px){
.lmx-al-inner{padding:70px var(--lmx-section-padding-x) 44px}
.lmx-al-title{font-size:30px !important}
.lmx-al-card{padding:18px}
}
@media (prefers-reduced-motion:reduce){
.lmx-al-inner *{animation:none !important}
}