/* =========================================================================
 * The “Beyond Traditional SIEM” block (block6-siem) — the comet.
 *
 * The same rules as in the neighbouring blocks: its own scale variable
 * --siem-scale (written by page.js), side padding from
 * --lmx-section-padding-x, Outfit for the heading, Hanken Grotesk for the
 * text, a black background and a teal accent. The comet itself is drawn on
 * canvas (block6-siem.js); here there is only layout, typography and the
 * button.
 *
 * The button is a teal outline one, like “TALK TO A SPECIALIST” in the
 * reference: the same metrics as .lmx-btn on the home page (53px, Hanken, wide
 * tracking). Hover comes from the shared .lmx-btn-fx component.
 * ====================================================================== */

.lmx-siem-inner{position:relative;width:100%;min-height:100vh;background:#000 !important;font-family:'Hanken Grotesk',Helvetica,Arial,sans-serif;padding:0 var(--lmx-section-padding-x);box-sizing:border-box;overflow:visible;--siem-scale:1;--siem-accent:#52C7C6;--siem-accent-hi:#83DAD9;--lmx-h1-font-family:'Outfit','Poppins',sans-serif}
.lmx-siem-inner *{box-sizing:border-box}

/* --- top: graphics on the left, text on the right ------------------------- */
.lmx-siem-main{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,1fr);align-items:center;gap:max(20px,calc(56px * var(--siem-scale,1)));min-height:0;padding-top:max(14px,calc(28px * var(--siem-scale,1)))}

/* The left edge of the graphic dissolves into the background so that the tail is not cut by a line. */
.lmx-siem-visual{position:relative;align-self:stretch;min-height:max(260px,calc(460px * var(--siem-scale,1)));overflow:hidden;-webkit-mask-image:linear-gradient(90deg,rgba(0,0,0,0) 0%,#000 9%,#000 100%);mask-image:linear-gradient(90deg,rgba(0,0,0,0) 0%,#000 9%,#000 100%)}
.lmx-siem-canvas{position:absolute;inset:0;width:100%;height:100%;display:block}

.lmx-siem-text{min-width:0;max-width:calc(640px * var(--siem-scale,1));container-type:inline-size}
.lmx-siem-eyebrow{margin:0 0 max(10px,calc(22px * var(--siem-scale,1))) !important;color:var(--siem-accent) !important;font-size:max(10px,calc(13px * var(--siem-scale,1))) !important;font-weight:500;letter-spacing:.3em;text-transform:uppercase;line-height:1.3 !important}
.lmx-siem-title{margin:0 !important;font-family:var(--lmx-h1-font-family) !important;font-weight:500 !important;font-size:max(30px,calc(62px * var(--siem-scale,1))) !important;line-height:1.08 !important;letter-spacing:-.022em;color:#fff !important}
/* The heading size follows both the height (--siem-scale) and the width of its
   own column (cqw): at 1366 the first line “Your SIEM Sees Alerts.” stays one
   line instead of breaking into three. A browser without container units skips
   this rule and keeps the size derived from the height. */
@supports (font-size: 1cqw){
.lmx-siem-title{font-size:max(30px,min(calc(62px * var(--siem-scale,1)),10.4cqw)) !important}
}
.lmx-siem-title-line{display:block}
.lmx-siem-accent{color:var(--siem-accent)}
.lmx-siem-desc{margin:max(12px,calc(26px * var(--siem-scale,1))) 0 0 !important;max-width:calc(580px * var(--siem-scale,1));font-size:max(13px,calc(18px * var(--siem-scale,1))) !important;line-height:1.6 !important;font-weight:300;color:rgba(255,255,255,.76) !important}
.lmx-siem-ctas{margin-top:max(16px,calc(36px * var(--siem-scale,1)))}
/* The subtitle and the description from the WYSIWYG (Use Case pages; the home page has none). */
.lmx-siem-subtitle{margin:max(10px,calc(18px * var(--siem-scale,1))) 0 0 !important;font-family:'Hanken Grotesk',Helvetica,Arial,sans-serif !important;font-weight:600;font-size:max(15px,calc(22px * var(--siem-scale,1))) !important;line-height:1.3 !important;letter-spacing:-.01em;color:#fff !important}
.lmx-siem-desc--rich p{margin:0 0 max(10px,calc(16px * var(--siem-scale,1))) !important;font:inherit !important;line-height:inherit !important;color:inherit !important}
.lmx-siem-desc--rich p:last-child{margin-bottom:0 !important}
.lmx-siem-desc--rich a{color:var(--siem-accent)}
.lmx-siem-desc--rich ul,.lmx-siem-desc--rich ol{margin:0 0 1em 1.2em;padding:0}

/* The button: an outline in the accent colour. Lift, glow and sheen come from .lmx-btn-fx. */
.lmx-siem-cta{display:inline-flex;align-items:center;justify-content:center;height:max(42px,calc(53px * var(--siem-scale,1)));padding:0 max(20px,calc(30px * var(--siem-scale,1)));margin:0;border:1px solid var(--siem-accent);background:rgba(82,199,198,.04);color:var(--siem-accent) !important;font-family:'Hanken Grotesk',Helvetica,Arial,sans-serif;font-size:max(11px,calc(13px * var(--siem-scale,1))) !important;font-weight:600;letter-spacing:.18em;text-transform:uppercase;text-decoration:none !important;white-space:nowrap;cursor:pointer;border-radius:0}
.lmx-siem-cta:hover,.lmx-siem-cta:focus-visible{background:rgba(82,199,198,.14);border-color:var(--siem-accent-hi);color:#fff !important}

/* --- bottom: three benefits ---------------------------------------------- */
.lmx-siem-benefits{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));list-style:none;margin:max(14px,calc(30px * var(--siem-scale,1))) 0 0 !important;padding:max(12px,calc(26px * var(--siem-scale,1))) 0 max(16px,calc(36px * var(--siem-scale,1))) !important}
.lmx-siem-benefit{display:flex;align-items:flex-start;gap:max(12px,calc(22px * var(--siem-scale,1)));margin:0 !important;padding:max(4px,calc(8px * var(--siem-scale,1))) max(14px,calc(34px * var(--siem-scale,1)))}
.lmx-siem-benefit+.lmx-siem-benefit{border-left:1px solid rgba(255,255,255,.14)}
.lmx-siem-benefit:first-child{padding-left:0}
.lmx-siem-benefit-icon{flex:0 0 auto;width:max(30px,calc(50px * var(--siem-scale,1)));height:max(30px,calc(50px * var(--siem-scale,1)));color:var(--siem-accent)}
.lmx-siem-benefit-icon svg{display:block;width:100%;height:100%}
.lmx-siem-benefit-body{min-width:0}
.lmx-siem-benefit-title{margin:0 0 max(3px,calc(7px * var(--siem-scale,1))) !important;font-family:var(--lmx-h1-font-family) !important;font-weight:500 !important;font-size:max(14px,calc(21px * var(--siem-scale,1))) !important;line-height:1.2 !important;letter-spacing:-.01em;color:#fff !important}
.lmx-siem-benefit-desc{margin:0 !important;font-size:max(11px,calc(15.5px * var(--siem-scale,1))) !important;line-height:1.5 !important;font-weight:300;color:rgba(255,255,255,.62) !important}

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

/* --- tablet and phone: graphics on top, text below, the benefit list ------ */
@media (max-width:1024px){
.lmx-siem-inner{display:block !important;height:auto !important;min-height:0 !important;padding:90px 42px 60px}
.lmx-siem-main{grid-template-columns:minmax(0,1fr);gap:22px;padding-top:0}
.lmx-siem-visual{order:-1;min-height:0;height:min(58vw,380px)}
.lmx-siem-text{max-width:640px}
.lmx-siem-title{font-size:44px !important}
.lmx-siem-desc{font-size:17px !important}
.lmx-siem-benefits{grid-template-columns:minmax(0,1fr);gap:0;margin-top:34px !important;padding:0 !important;border-top:1px solid rgba(255,255,255,.14)}
.lmx-siem-benefit{padding:18px 0;border-bottom:1px solid rgba(255,255,255,.1);gap:16px;align-items:center}
.lmx-siem-benefit+.lmx-siem-benefit{border-left:0}
.lmx-siem-benefit-icon{width:40px;height:40px}
.lmx-siem-benefit-title{font-size:18px !important}
.lmx-siem-benefit-desc{font-size:14px !important}
}
@media (max-width:680px){
.lmx-siem-inner{padding:70px 24px 44px}
.lmx-siem-visual{height:min(64vw,300px);min-height:200px}
.lmx-siem-title{font-size:32px !important}
.lmx-siem-eyebrow{letter-spacing:.24em}
.lmx-siem-desc{font-size:16px !important}
.lmx-siem-ctas .lmx-siem-cta{width:100%}
.lmx-siem-benefit{padding:14px 0;gap:14px}
.lmx-siem-benefit-icon{width:34px;height:34px}
}

/* Less motion: colours without transitions; the script draws a static frame. */
@media (prefers-reduced-motion:reduce){
.lmx-siem-cta{transition:none}
}

/* The image under the comet (Integrations “Data Ingestion Methods”, 2026-09-15): fitted into the visual area, the comet is drawn on top. */