/* =========================================================================
 * Why LMNTRIX — block 5, The LMNTRIX Experience.
 *
 * A light section: the text on the left, the steps on a shared line on the
 * right. The appearance uses CSS transitions and one finite keyframe animation
 * of the pulse, driven by the is-in class (set by block5-experience.js on
 * entry); nothing moves at rest. “Less motion” means the final state straight
 * away (the no-anim class plus the media query).
 * ====================================================================== */

.lmx-ex-inner{position:relative;width:100%;min-height:100vh;
  background:linear-gradient(135deg,#f7f8fa 0%,#eef0f3 55%,#e3e6ea 100%) !important;
  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;--ex-accent:#178a8a;--ex-ink:#1c2128;--ex-dim:#5b6169;
  --ex-disc:max(110px,calc(150px * var(--ms-scale,1)));--ex-top:max(14px,calc(30px * var(--ms-scale,1)))}
.lmx-ex-inner *{box-sizing:border-box}
/* The clouds stay strictly inside the section: anything sticking out below it
   counts towards scrollHeight, from which the engine picks --ms-scale (see
   block 2). */
.lmx-ex-inner::before{content:'';position:absolute;left:0;right:0;bottom:0;height:55%;pointer-events:none;z-index:0;
  background:radial-gradient(40% 60% at 6% 100%,rgba(255,255,255,.9),rgba(255,255,255,0) 70%),radial-gradient(40% 60% at 94% 100%,rgba(255,255,255,.8),rgba(255,255,255,0) 70%)}

.lmx-ex-grid{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.3fr);align-items:center;gap:max(24px,calc(48px * var(--ms-scale,1)))}

/* --- text ------------------------------------------------------------------
   The text widths do not depend on the scale (otherwise the fitting squeezes
   the block for nothing); the lower size bounds are about readability on
   laptops. */
.lmx-ex-eyebrow{display:block;color:var(--ex-accent);font-size:max(11px,calc(13px * var(--ms-scale,1)));font-weight:700;letter-spacing:.3em;text-transform:uppercase}
.lmx-ex-title{margin:max(10px,calc(20px * var(--ms-scale,1))) 0 0 !important;font-family:var(--lmx-ms-display,'Outfit',sans-serif) !important;font-weight:600 !important;font-size:max(36px,min(calc(60px * var(--ms-scale,1)),3.9vw)) !important;line-height:1.05 !important;letter-spacing:-.025em;color:var(--ex-ink) !important;max-width:14ch}
.lmx-ex-desc{margin:max(12px,calc(24px * var(--ms-scale,1))) 0 0 !important;max-width:min(100%,520px);font-size:max(16px,calc(18px * var(--ms-scale,1))) !important;line-height:1.55 !important;font-weight:300;color:var(--ex-dim) !important}
.lmx-ex-rule{display:block;width:max(28px,calc(56px * var(--ms-scale,1)));height:2px;margin-top:max(16px,calc(36px * var(--ms-scale,1)));background:var(--ex-accent)}
.lmx-ex-note{margin:max(10px,calc(22px * var(--ms-scale,1))) 0 0 !important;max-width:min(100%,520px);font-size:max(16px,calc(19px * var(--ms-scale,1))) !important;line-height:1.5 !important;font-weight:300;color:var(--ex-dim) !important}

/* --- steps ---------------------------------------------------------------- */
.lmx-ex-flow{position:relative;padding-top:var(--ex-top);min-width:0}
/* Decorative concentric arcs behind the discs. A wrapper with overflow:hidden
   is mandatory: the arcs themselves are a circle 150% of the column width, and
   without clipping it doubled the section's scrollHeight while the scale
   fitting squeezed the block to its minimum (the same trap as the testimonial
   book and the XDR wheel on the home page). */
.lmx-ex-arcswrap{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.lmx-ex-arcs{position:absolute;left:50%;top:calc(var(--ex-top) + var(--ex-disc) / 2);width:150%;aspect-ratio:1 / 1;transform:translate(-50%,-50%);border-radius:50%;pointer-events:none;
  background:repeating-radial-gradient(circle at 50% 50%,rgba(28,33,40,.14) 0 1px,transparent 1px calc(var(--ex-disc) * .62));
  -webkit-mask-image:radial-gradient(50% 50% at 50% 50%,#000 12%,rgba(0,0,0,.5) 26%,transparent 42%);
  mask-image:radial-gradient(50% 50% at 50% 50%,#000 12%,rgba(0,0,0,.5) 26%,transparent 42%)}
/* The line through the centres of the discs: from the first centre to the last. */
.lmx-ex-line{position:absolute;left:calc(100% / var(--ex-n,3) / 2);right:calc(100% / var(--ex-n,3) / 2);top:calc(var(--ex-top) + var(--ex-disc) / 2 - 2px);height:4px;border-radius:2px;
  background:linear-gradient(90deg,rgba(46,174,174,.12),rgba(46,174,174,.75) 12%,rgba(46,174,174,.75) 88%,rgba(46,174,174,.12));
  box-shadow:0 0 10px rgba(82,199,198,.35);overflow:visible}
.lmx-ex-pulse{position:absolute;top:-4px;left:0;width:18%;height:12px;border-radius:6px;opacity:0;transform:translateX(-100%);
  background:linear-gradient(90deg,rgba(160,240,240,0),#c7fbf9 50%,rgba(160,240,240,0));box-shadow:0 0 22px rgba(82,199,198,.95)}
.lmx-ex-inner.is-in .lmx-ex-pulse{animation:lmxExPulse 1.7s cubic-bezier(.4,0,.2,1) .15s forwards}
@keyframes lmxExPulse{0%{opacity:0;transform:translateX(-100%)}12%{opacity:1}88%{opacity:1}100%{opacity:0;transform:translateX(480%)}}

.lmx-ex-steps{position:relative;z-index:1;display:grid;grid-template-columns:repeat(var(--ex-n,3),minmax(0,1fr));gap:0 max(10px,calc(20px * var(--ms-scale,1)));list-style:none;margin:0 !important;padding:0 !important}
.lmx-ex-step{margin:0 !important;display:flex;flex-direction:column;align-items:center;text-align:center;min-width:0}

/* The disc: brushed metal, a thin ring, the icon and the number. */
.lmx-ex-disc{position:relative;display:grid;place-items:center;width:var(--ex-disc);height:var(--ex-disc);border-radius:50%;
  background:radial-gradient(circle at 36% 28%,#ffffff 0%,#eef1f4 40%,#d6dbe0 100%);
  box-shadow:0 20px 44px rgba(20,24,30,.14),0 2px 6px rgba(20,24,30,.08),inset 0 0 0 1px rgba(255,255,255,.9),inset 0 -10px 18px rgba(20,24,30,.07),0 0 0 0 rgba(82,199,198,0),0 0 0 rgba(82,199,198,0);
  transition:box-shadow .8s ease;transition-delay:calc(.3s + var(--i,0) * .5s)}
.lmx-ex-inner.is-in .lmx-ex-disc{box-shadow:0 20px 44px rgba(20,24,30,.14),0 2px 6px rgba(20,24,30,.08),inset 0 0 0 1px rgba(255,255,255,.9),inset 0 -10px 18px rgba(20,24,30,.07),0 0 0 4px rgba(82,199,198,.16),0 0 36px rgba(82,199,198,.55)}
.lmx-ex-ring{position:absolute;inset:7%;border-radius:50%;border:1px solid rgba(28,33,40,.16);border-top-color:rgba(46,174,174,.75);border-right-color:rgba(46,174,174,.35);
  transform:rotate(-50deg);transition:transform 1.5s cubic-bezier(.2,.7,.2,1);transition-delay:calc(.25s + var(--i,0) * .5s)}
.lmx-ex-inner.is-in .lmx-ex-ring{transform:rotate(0deg)}
.lmx-ex-icon{display:block;width:40%;height:40%;margin-top:-10%;color:var(--ex-ink)}
.lmx-ex-icon svg{width:100%;height:100%;display:block}
.lmx-ex-num{position:absolute;left:50%;bottom:15%;transform:translateX(-50%);font-family:var(--lmx-ms-font);font-weight:600;font-size:max(12px,calc(16px * var(--ms-scale,1)));letter-spacing:.06em;color:var(--ex-accent);line-height:1}

/* The leg and the text. */
.lmx-ex-stem{display:block;width:1px;height:max(26px,calc(56px * var(--ms-scale,1)));margin:max(8px,calc(14px * var(--ms-scale,1))) 0;
  background:linear-gradient(180deg,var(--ex-accent),rgba(46,174,174,.15));transform:scaleY(0);transform-origin:top center;
  transition:transform .5s ease;transition-delay:calc(.55s + var(--i,0) * .5s)}
.lmx-ex-inner.is-in .lmx-ex-stem{transform:scaleY(1)}
.lmx-ex-step-title{margin:0 !important;font-family:var(--lmx-ms-display,'Outfit',sans-serif) !important;font-weight:600 !important;font-size:max(19px,calc(22px * var(--ms-scale,1))) !important;line-height:1.25 !important;color:var(--ex-ink) !important;
  opacity:0;transform:translateY(10px);transition:opacity .6s ease,transform .6s ease;transition-delay:calc(.65s + var(--i,0) * .5s)}
.lmx-ex-step-desc{margin:max(6px,calc(10px * var(--ms-scale,1))) 0 0 !important;max-width:min(100%,300px);font-size:max(14px,calc(16px * var(--ms-scale,1))) !important;line-height:1.5 !important;font-weight:300;color:var(--ex-dim) !important;
  opacity:0;transform:translateY(10px);transition:opacity .6s ease,transform .6s ease;transition-delay:calc(.8s + var(--i,0) * .5s)}
.lmx-ex-inner.is-in .lmx-ex-step-title,
.lmx-ex-inner.is-in .lmx-ex-step-desc{opacity:1;transform:none}

/* A description in several paragraphs (desc_html, the Our Story page): the
   paragraphs inherit the size and the colour of the description; on Why, the
   partner pages and Use Cases the description is a single line and these
   elements are absent. */
.lmx-ex-step-desc--rich p{margin:0 0 .75em !important;font:inherit !important;line-height:inherit !important;color:inherit !important}
.lmx-ex-step-desc--rich p:last-child{margin-bottom:0 !important}

/* Reset before re-entry and for “less motion”: no transitions. */
.lmx-ex-inner.no-anim *{transition:none !important;animation:none !important}

/* --- desktop ------------------------------------------------------------------ */
@media (min-width:1025px){
.lmx-ex-inner{display:grid;align-content:center;height:100%;min-height:100%}
}

/* --- narrow screens ------------------------------------------------------------ */
@media (max-width:1024px){
.lmx-ex-inner{display:block !important;height:auto !important;min-height:0 !important;padding:90px var(--lmx-section-padding-x) 70px;--ex-disc:120px}
.lmx-ex-grid{grid-template-columns:minmax(0,1fr);gap:40px}
.lmx-ex-title{font-size:40px !important;max-width:none}
.lmx-ex-flow{padding-top:20px}
}
@media (max-width:680px){
.lmx-ex-inner{padding:70px var(--lmx-section-padding-x) 50px;--ex-disc:92px}
.lmx-ex-title{font-size:32px !important}
.lmx-ex-arcswrap{display:none}
/* A vertical strip: the disc on the left, the text on the right, the line through the centres of the discs. */
.lmx-ex-steps{grid-template-columns:1fr;gap:26px 0}
.lmx-ex-step{display:grid;grid-template-columns:var(--ex-disc) 1fr;column-gap:18px;text-align:left;align-items:start}
.lmx-ex-disc{grid-row:1 / span 3}
.lmx-ex-stem{display:none}
.lmx-ex-step-title{align-self:end;padding-top:calc(var(--ex-disc) * .18)}
.lmx-ex-step-desc{max-width:none}
.lmx-ex-line{left:calc(var(--ex-disc) / 2 - 2px);right:auto;top:calc(20px + var(--ex-disc) / 2);bottom:calc(var(--ex-disc) / 2);width:4px;height:auto;
  background:linear-gradient(180deg,rgba(46,174,174,.12),rgba(46,174,174,.75) 12%,rgba(46,174,174,.75) 88%,rgba(46,174,174,.12))}
.lmx-ex-pulse{top:0;left:-4px;width:12px;height:18%;transform:translateY(-100%);
  background:linear-gradient(180deg,rgba(160,240,240,0),#c7fbf9 50%,rgba(160,240,240,0))}
.lmx-ex-inner.is-in .lmx-ex-pulse{animation-name:lmxExPulseV}
@keyframes lmxExPulseV{0%{opacity:0;transform:translateY(-100%)}12%{opacity:1}88%{opacity:1}100%{opacity:0;transform:translateY(480%)}}
}

/* --- less motion ---------------------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
.lmx-ex-inner *{transition:none !important;animation:none !important}
.lmx-ex-pulse{display:none}
}