/* =========================================================================
 * Use Case — block 1, Hero: the differences from the service page hero.
 *
 * The stage (node grid, horizon, H1 particles, arrows, chain) comes from
 * assets/css/mxdr-service/block1-hero.css and
 * assets/css/shared/service-chain.css. Here: the subtitle, two buttons in a row
 * and a chain of TEN items with long labels — from 1366px up the labels wrap
 * onto two lines in equal cells (slightly smaller than in the service chain),
 * on narrow laptops (1025–1365) the track scrolls and the active item is
 * brought into view (assets/js/shared/service-chain.js), and on phones the
 * component's own rules apply.
 * ====================================================================== */

.lmx-uc-subtitle{margin:max(10px,calc(20px * var(--ms-scale,1))) auto 0 !important;max-width:860px;font-family:var(--lmx-ms-font) !important;font-weight:600;font-size:max(16px,calc(24px * var(--ms-scale,1))) !important;line-height:1.3 !important;letter-spacing:-.01em;color:#fff !important}

/* Two buttons: outlined, like “BOOK A DEMO” in the service hero. */
.lmx-uc-ctas{display:flex;flex-wrap:wrap;justify-content:center;gap:max(12px,calc(20px * var(--ms-scale,1)))}

/* --- the ten-item chain ------------------------------------------------- */
.lmx-uc-chain .lmx-mh-nav-item{flex:1 1 0;min-width:0}
.lmx-uc-chain .lmx-mh-nav-link{white-space:normal;font-size:max(10px,calc(11.5px * var(--ms-scale,1)));letter-spacing:.04em;line-height:1.25;padding-left:4px;padding-right:4px}
.lmx-uc-chain .lmx-mh-nav-label{display:block;max-width:100%;text-align:center}

@media (min-width:1025px) and (max-width:1365px){
.lmx-uc-chain .lmx-mh-nav-track{overflow-x:auto;overflow-y:hidden;scrollbar-width:none;scroll-snap-type:x proximity;-webkit-mask-image:linear-gradient(90deg,transparent,#000 28px,#000 calc(100% - 28px),transparent);mask-image:linear-gradient(90deg,transparent,#000 28px,#000 calc(100% - 28px),transparent)}
.lmx-uc-chain .lmx-mh-nav-track::-webkit-scrollbar{display:none}
.lmx-uc-chain .lmx-mh-nav-list{justify-content:space-between;gap:6px;width:max-content;min-width:100%;padding:0 6px}
.lmx-uc-chain .lmx-mh-nav-item{flex:0 0 auto;scroll-snap-align:center}
.lmx-uc-chain .lmx-mh-nav-link{white-space:nowrap;padding-left:8px;padding-right:8px}
}

@media (max-width:1024px){
.lmx-uc-chain .lmx-mh-nav-item{flex:0 0 auto}
.lmx-uc-chain .lmx-mh-nav-link{white-space:nowrap;font-size:12px;padding:0 12px 10px}
.lmx-uc-subtitle{font-size:18px !important}
.lmx-uc-ctas{flex-direction:column;align-items:center;gap:12px}
.lmx-uc-ctas .lmx-ms-btn{width:100%;max-width:360px;justify-content:center;min-height:48px}
}