/* =========================================================================
 * A centred hero with two buttons — a shared variant on top of the service
 * page hero (Why LMNTRIX, LMNTRIX MDR). The stage (node grid, horizon,
 * particles) is assets/css/mxdr-service/block1-hero.css; only the differences
 * live here: a larger H1, an optional subtitle, two buttons in a row and a more
 * prominent “digital planet” at the bottom. The classes are historically named
 * .lmx-wh-* (Why hero) — those are component names, not page names.
 *
 * .lmx-wh-inner--long is the variant for a long single-line H1 (MDR).
 * ====================================================================== */

.lmx-wh-inner .lmx-mh-content{max-width:1260px;padding-top:max(20px,calc(50px * var(--ms-scale,1)));padding-bottom:max(60px,calc(150px * var(--ms-scale,1)))}
.lmx-wh-inner .lmx-mh-eyebrow{font-weight:500;letter-spacing:.42em;font-size:max(11px,calc(15px * var(--ms-scale,1))) !important;margin-bottom:max(10px,calc(20px * var(--ms-scale,1))) !important}
.lmx-wh-inner .lmx-mh-title{font-size:max(48px,calc(150px * var(--ms-scale,1))) !important;line-height:1 !important;letter-spacing:-.02em;color:#e9edf0 !important}
.lmx-wh-subtitle{margin:max(10px,calc(24px * var(--ms-scale,1))) 0 0 !important;font-family:var(--lmx-ms-font) !important;font-weight:600;font-size:max(18px,calc(34px * var(--ms-scale,1))) !important;line-height:1.2 !important;letter-spacing:-.01em;color:#fff !important}
.lmx-wh-inner .lmx-mh-desc{margin-top:max(12px,calc(24px * var(--ms-scale,1))) !important;max-width:1100px;font-size:max(15px,calc(21px * var(--ms-scale,1))) !important;line-height:1.5 !important;color:rgba(255,255,255,.72) !important}

/* A long H1 (“Always Watching. Ready to Act.”) is smaller and without balance
   so that it stays on one line: the size is bounded by the content width
   (≈14.2 ems per line for this text) and the content is wider than for a short
   H1. */
.lmx-wh-inner--long .lmx-mh-content{max-width:1320px}
.lmx-wh-inner--long .lmx-mh-title{font-size:max(40px,min(calc(118px * var(--ms-scale,1)),5.4vw,calc((100vw - 2 * var(--lmx-section-padding-x)) / 14.2))) !important;letter-spacing:-.025em;text-wrap:auto}

/* Two buttons: outlined, with a teal tick at the left edge, as in the reference. */
.lmx-wh-ctas{display:flex;flex-wrap:wrap;justify-content:center;gap:max(12px,calc(28px * var(--ms-scale,1)));margin-top:max(22px,calc(48px * var(--ms-scale,1)))}
.lmx-wh-btn{min-width:max(220px,calc(286px * var(--ms-scale,1)));height:max(48px,calc(70px * var(--ms-scale,1)));justify-content:center;padding:0 max(24px,calc(36px * var(--ms-scale,1)));font-weight:500;letter-spacing:.24em;font-size:max(12px,calc(15px * var(--ms-scale,1))) !important;background:rgba(82,199,198,.03)}
.lmx-wh-btn .lmx-ms-btn-bar{position:absolute;left:10px;top:9px;bottom:9px;height:auto;width:2px;opacity:.95}

/* The variant with the chain along the bottom edge (the Comparisons pages): the
   content reserves no room for the planet — the chain takes it (the second row
   of the .lmx-mh-inner grid) and a two-line H1 is smaller. New selectors
   only. */
.lmx-wh-inner--chain .lmx-mh-content{padding-bottom:max(20px,calc(36px * var(--ms-scale,1)))}
.lmx-wh-inner--chain .lmx-mh-title{font-size:max(40px,calc(104px * var(--ms-scale,1))) !important}
.lmx-wh-inner--chain .lmx-wh-subtitle{max-width:1040px;margin-left:auto !important;margin-right:auto !important;font-size:max(17px,calc(28px * var(--ms-scale,1))) !important}
.lmx-wh-inner--chain .lmx-mh-desc{max-width:980px;font-size:max(15px,calc(18px * var(--ms-scale,1))) !important}
.lmx-wh-inner--chain .lmx-wh-ctas{margin-top:max(18px,calc(34px * var(--ms-scale,1)))}
.lmx-wh-inner--chain .lmx-mh-horizon{top:80%}
@media (max-width:1024px){
.lmx-wh-inner--chain .lmx-mh-title{font-size:54px !important}
.lmx-wh-inner--chain .lmx-wh-subtitle{font-size:20px !important}
}
@media (max-width:480px){
.lmx-wh-inner--chain .lmx-mh-title{font-size:44px !important}
}

/* The planet: the same horizon, but lower and with a mesh surface texture. */
.lmx-wh-inner .lmx-mh-horizon{top:73%;width:150%;
  background:radial-gradient(50% 50% at 50% 50%,#0f1c1f 0%,#08131a 30%,#040a0c 48%,#020404 62%);
  box-shadow:0 -1px 0 rgba(170,240,240,.55),0 -22px 70px rgba(82,199,198,.24),0 -70px 180px rgba(82,199,198,.10),inset 0 40px 120px rgba(82,199,198,.12)}
.lmx-wh-inner .lmx-mh-horizon::before{content:'';position:absolute;inset:0;border-radius:50%;
  background:
    repeating-radial-gradient(circle at 50% 0%,rgba(150,235,235,.09) 0 1px,transparent 1px 26px),
    repeating-linear-gradient(90deg,rgba(150,235,235,.06) 0 1px,transparent 1px 34px),
    radial-gradient(circle at 34% 6%,rgba(150,235,235,.25) 0,rgba(150,235,235,0) 8%),
    radial-gradient(circle at 61% 5%,rgba(150,235,235,.22) 0,rgba(150,235,235,0) 7%);
  -webkit-mask-image:linear-gradient(180deg,#000 0,rgba(0,0,0,.5) 4%,transparent 11%);
  mask-image:linear-gradient(180deg,#000 0,rgba(0,0,0,.5) 4%,transparent 11%)}

@media (max-width:1024px){
.lmx-wh-inner .lmx-mh-content{padding:0 0 60px}
.lmx-wh-inner .lmx-mh-title{font-size:64px !important;letter-spacing:-.02em}
.lmx-wh-subtitle{font-size:22px !important}
.lmx-wh-inner .lmx-mh-desc{font-size:16px !important}
.lmx-wh-ctas{flex-direction:column;align-items:center;gap:14px}
.lmx-wh-btn{width:100%;max-width:360px;min-width:0;height:56px}
.lmx-wh-inner .lmx-mh-horizon{top:82%;width:240%}
}
@media (max-width:480px){
.lmx-wh-inner .lmx-mh-title{font-size:52px !important}
.lmx-wh-subtitle{font-size:20px !important}
}