/* ==========================================================================
   Nexomark - AI pages: core solution cards, playground demos, agent ecosystem, workflow pipeline.
   Loaded only on the AI Solutions page, the Integrations page and AI service pages with a demo.
   Motion: transform/opacity only, paused until in view (.is-inview from ai.js), off for reduced motion.
   ========================================================================== */

/* ---------------------------------------------------------------- hero + value */
.nxm-ai-hero .nxm-crumbs { margin-bottom: 18px; }
.nxm-ai-promise {
	margin: clamp(28px, 5vw, 48px) 0 0; max-width: 34ch;
	font: 600 clamp(1.4rem, 1.05rem + 1.5vw, 2.1rem)/1.2 var(--font-display); letter-spacing: -.02em; color: var(--lg-ink);
}
.nxm-ai-promise .lg-eyebrow { display: block; margin-bottom: 10px; }

/* ---------------------------------------------------------------- core solution cards */
.nxm-ai-core { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 440px), 1fr)); }
.nxm-ai-card { --r: var(--r-l, 28px); display: flex; flex-direction: column; gap: 10px; padding: clamp(22px, 3vw, 34px); }
.nxm-ai-card h3 { font-size: clamp(1.4rem, 1.1rem + 1vw, 1.9rem); letter-spacing: -.02em; margin: 0; }
.nxm-ai-card > p { color: var(--lg-ink-2); margin: 0; }
.nxm-ai-card .lg-eyebrow { margin: 4px 0 0; }
.nxm-ai-card__outcome { margin-top: auto !important; padding-top: 14px; border-top: 1px solid var(--lg-line); }
.nxm-ai-card__outcome strong { color: var(--lg-cyan); }
.nxm-checks--compact { gap: 6px; margin: 6px 0 4px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr)); }
.nxm-checks--compact li { font-size: .95rem; padding-left: 26px; }
.nxm-checks--compact li::before { width: 15px; height: 15px; }

/* decorative per-solution visuals (aria-hidden) */
.nxm-aiviz {
	position: relative; height: 132px; margin-bottom: 6px; border-radius: 20px; overflow: hidden;
	background: radial-gradient(120% 90% at 30% 20%, rgb(91 140 255 / .22), transparent 60%), radial-gradient(90% 90% at 80% 90%, rgb(155 124 255 / .2), transparent 60%), rgb(255 255 255 / .02);
	box-shadow: inset 0 0 0 1px rgb(255 255 255 / .07);
	perspective: 600px;
}
.nxm-aiviz span, .nxm-aiviz i { position: absolute; display: block; }
.nxm-aiviz__core, .nxm-aiviz__orb {
	left: 50%; top: 50%; width: 64px; height: 64px; margin: -32px 0 0 -32px; border-radius: 50%;
	background: radial-gradient(circle at 35% 30%, #fff 0 6%, rgb(86 230 255 / .9) 20%, rgb(91 140 255 / .75) 48%, rgb(155 124 255 / .55) 72%, transparent 74%);
	box-shadow: 0 0 40px rgb(86 230 255 / .35);
}
.nxm-aiviz__orbit { inset: 0; transform: rotateX(68deg); transform-style: preserve-3d; }
.nxm-aiviz__orbit i { left: 50%; top: 50%; width: 14px; height: 14px; margin: -7px; border-radius: 50%; background: var(--lg-cyan); box-shadow: 0 0 14px var(--lg-cyan); transform: rotate(calc(var(--n) * 120deg)) translateX(84px); }
.nxm-aiviz__orbit i:nth-child(1) { --n: 0; } .nxm-aiviz__orbit i:nth-child(2) { --n: 1; background: var(--lg-violet); box-shadow: 0 0 14px var(--lg-violet); } .nxm-aiviz__orbit i:nth-child(3) { --n: 2; background: #fff; }
.nxm-aiviz--voice .nxm-aiviz__orb { left: 22%; width: 56px; height: 56px; margin: -28px 0 0 -28px; }
.nxm-aiviz__bars { left: 38%; right: 8%; top: 50%; height: 64px; margin-top: -32px; display: flex !important; align-items: center; gap: 6px; }
.nxm-aiviz__bars i { position: static; flex: 1; height: 100%; border-radius: 6px; background: linear-gradient(180deg, var(--lg-cyan), var(--lg-violet)); transform: scaleY(.25); transform-origin: 50% 50%; opacity: .85; }
.nxm-aiviz__bubble { left: 12%; width: 46%; height: 24px; border-radius: 12px 12px 12px 4px; background: rgb(255 255 255 / .14); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .12); }
.nxm-aiviz__bubble:nth-child(1) { top: 18px; } .nxm-aiviz__bubble:nth-child(3) { top: 90px; width: 38%; }
.nxm-aiviz__bubble.is-me { left: auto; right: 12%; top: 54px; width: 40%; border-radius: 12px 12px 4px 12px; background: linear-gradient(120deg, rgb(91 140 255 / .75), rgb(86 230 255 / .6)); }
.nxm-aiviz__node { top: 50%; width: 38px; height: 38px; margin-top: -19px; border-radius: 12px; background: rgb(255 255 255 / .1); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .18), 0 8px 20px rgb(0 0 0 / .3); }
.nxm-aiviz__node:nth-child(1) { left: 8%; } .nxm-aiviz__node:nth-child(2) { left: 32%; } .nxm-aiviz__node:nth-child(3) { left: 56%; } .nxm-aiviz__node:nth-child(4) { left: 80%; background: linear-gradient(140deg, rgb(86 230 255 / .55), rgb(155 124 255 / .5)); }
.nxm-aiviz--workflow::before { content: ""; position: absolute; left: 10%; right: 12%; top: 50%; height: 2px; background: linear-gradient(90deg, rgb(86 230 255 / .15), rgb(86 230 255 / .6), rgb(155 124 255 / .6)); }
.nxm-aiviz__pulse { left: 10%; top: 50%; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; background: #fff; box-shadow: 0 0 16px var(--lg-cyan); }

@media (prefers-reduced-motion: no-preference) {
	.nxm-aiviz__orbit { animation: nxm-orbit 14s linear infinite; }
	.nxm-aiviz__bars i { animation: nxm-bar 1.1s ease-in-out infinite alternate; }
	.nxm-aiviz__bars i:nth-child(2n) { animation-delay: -.35s; } .nxm-aiviz__bars i:nth-child(3n) { animation-delay: -.7s; } .nxm-aiviz__bars i:nth-child(5n) { animation-delay: -.5s; animation-duration: .8s; }
	.nxm-aiviz__bubble { animation: nxm-bubble 4.5s var(--ease-out, ease-out) infinite; }
	.nxm-aiviz__bubble:nth-child(2) { animation-delay: .5s; } .nxm-aiviz__bubble:nth-child(3) { animation-delay: 1s; }
	.nxm-aiviz__pulse { animation: nxm-pulse 3.2s cubic-bezier(.6, 0, .4, 1) infinite; }
	.nxm-aiviz *, .nxm-aiviz__orbit { animation-play-state: paused; }
	.is-inview .nxm-aiviz *, .is-inview .nxm-aiviz__orbit { animation-play-state: running; }
}
@keyframes nxm-orbit { to { transform: rotateX(68deg) rotateZ(360deg); } }
@keyframes nxm-bar { to { transform: scaleY(1); } }
@keyframes nxm-bubble { 0% { opacity: 0; transform: translateY(8px); } 12%, 80% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@keyframes nxm-pulse { 0% { transform: translateX(0); opacity: 0; } 10% { opacity: 1; } 90% { opacity: 1; } 100% { transform: translateX(min(60vw, 440px)); opacity: 0; } }

/* ---------------------------------------------------------------- playground tabs */
.nxm-playground__tabs { display: flex; gap: 6px; padding: 6px; margin-bottom: 18px; overflow-x: auto; border-radius: var(--r-pill, 999px); background: rgb(255 255 255 / .04); box-shadow: inset 0 0 0 1px var(--lg-line); width: max-content; max-width: 100%; scrollbar-width: none; }
.nxm-playground__tabs button {
	display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 18px; border: 0; border-radius: var(--r-pill, 999px);
	background: transparent; color: var(--lg-ink-2); font: 600 .95rem/1 var(--font-text); cursor: pointer; white-space: nowrap;
}
.nxm-playground__tabs button svg { width: 18px; height: 18px; }
.nxm-playground__tabs button[aria-selected="true"] { background: var(--lg-ink); color: var(--lg-midnight); }
.nxm-playground__tabs button:hover:not([aria-selected="true"]) { color: var(--lg-ink); background: rgb(255 255 255 / .06); }
.nxm-playground__panel:focus-visible { outline: 2px solid var(--lg-cyan); outline-offset: 4px; border-radius: 24px; }

/* ---------------------------------------------------------------- demo shell */
.nxm-demo { --r: var(--r-l, 28px); padding: clamp(18px, 3vw, 30px); display: grid; gap: 14px; }
.nxm-demo__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
.nxm-demo__title { margin: 0; font-size: clamp(1.2rem, 1rem + .7vw, 1.5rem); }
.nxm-demo__badge { margin: 0; padding: 5px 12px; border-radius: 999px; font: 600 .78rem/1 var(--font-text); letter-spacing: .08em; text-transform: uppercase; color: var(--lg-ink); background: rgb(155 124 255 / .22); box-shadow: inset 0 0 0 1px rgb(155 124 255 / .45); }
.nxm-demo__context, .nxm-demo__note { margin: 0; color: var(--lg-ink-2); font-size: .95rem; }
.nxm-demo__note { font-size: .85rem; color: var(--lg-ink-3); }
.nxm-demo__scenarios { display: flex; flex-wrap: wrap; gap: 8px; }
.nxm-chip-btn {
	min-height: 40px; padding: 0 16px; border: 0; border-radius: 999px; cursor: pointer;
	font: 600 .9rem/1 var(--font-text); color: var(--lg-ink-2); background: rgb(255 255 255 / .05); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .16);
}
.nxm-chip-btn[aria-pressed="true"] { color: var(--lg-ink); background: rgb(86 230 255 / .16); box-shadow: inset 0 0 0 1px rgb(86 230 255 / .55); }
.nxm-chip-btn:hover { color: var(--lg-ink); }

/* chat */
.nxm-chat { display: flex; flex-direction: column; gap: 10px; min-height: 340px; max-height: 460px; overflow-y: auto; padding: 16px; border-radius: 20px; background: rgb(4 6 14 / .55); box-shadow: inset 0 0 0 1px var(--lg-line); scroll-behavior: smooth; }
.nxm-chat__msg { margin: 0; max-width: min(80%, 520px); padding: 10px 14px; border-radius: 16px 16px 16px 6px; background: rgb(255 255 255 / .08); color: var(--lg-ink); line-height: 1.45; box-shadow: inset 0 0 0 1px rgb(255 255 255 / .1); }
.nxm-chat__msg.is-user { align-self: flex-end; border-radius: 16px 16px 6px 16px; background: linear-gradient(120deg, #3b5fd1, #2a8fb0); box-shadow: none; }
.nxm-chat__msg.is-event { align-self: center; max-width: 100%; padding: 6px 12px; border-radius: 999px; font-size: .82rem; color: var(--lg-ink-2); background: rgb(86 230 255 / .08); box-shadow: inset 0 0 0 1px rgb(86 230 255 / .3); text-align: center; }
.nxm-chat__typing { align-self: flex-start; display: inline-flex; gap: 4px; padding: 12px 14px; border-radius: 16px; background: rgb(255 255 255 / .08); }
.nxm-chat__typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--lg-ink-2); }
@media (prefers-reduced-motion: no-preference) {
	.nxm-chat__msg, .nxm-call__line, .nxm-agent__steps li, .nxm-flowrun__node { transition: opacity .35s var(--ease-out, ease-out), transform .35s var(--ease-out, ease-out); }
	.nxm-chat__msg.is-new, .nxm-call__line.is-new, .nxm-agent__steps li.is-new { opacity: 0; transform: translateY(8px); }
	.nxm-chat__typing i { animation: nxm-dot 1s ease-in-out infinite; }
	.nxm-chat__typing i:nth-child(2) { animation-delay: .15s; } .nxm-chat__typing i:nth-child(3) { animation-delay: .3s; }
}
@keyframes nxm-dot { 50% { transform: translateY(-4px); opacity: .5; } }

/* voice */
.nxm-call { display: grid; gap: 16px; grid-template-columns: minmax(0, 240px) minmax(0, 1fr) minmax(0, 260px); align-items: start; }
.nxm-call__phone { display: grid; gap: 16px; justify-items: center; padding: 22px 16px; border-radius: 26px; background: radial-gradient(120% 80% at 50% 0%, rgb(91 140 255 / .25), transparent 60%), rgb(4 6 14 / .6); box-shadow: inset 0 0 0 1px var(--lg-line); }
.nxm-call__status { font: 600 .9rem/1.2 var(--font-text); color: var(--lg-ink-2); text-align: center; }
.nxm-call__timer { display: block; margin-top: 4px; font: 600 1.6rem/1 var(--font-display); color: var(--lg-ink); font-variant-numeric: tabular-nums; }
.nxm-wave { display: flex; align-items: center; gap: 4px; height: 56px; }
.nxm-wave i { width: 5px; height: 100%; border-radius: 3px; background: linear-gradient(180deg, var(--lg-cyan), var(--lg-violet)); transform: scaleY(.12); }
.nxm-call__play { width: 100%; justify-content: center; }
.nxm-call__transcript { display: grid; gap: 10px; align-content: start; min-height: 300px; max-height: 440px; overflow-y: auto; padding: 16px; border-radius: 20px; background: rgb(4 6 14 / .55); box-shadow: inset 0 0 0 1px var(--lg-line); }
.nxm-call__line { margin: 0; line-height: 1.45; color: var(--lg-ink); }
.nxm-call__line strong { display: block; font: 600 .78rem/1.4 var(--font-text); letter-spacing: .08em; text-transform: uppercase; color: var(--lg-cyan); }
.nxm-call__line.is-caller strong { color: var(--lg-violet); }
.nxm-call__actions { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; counter-reset: act; }
.nxm-call__actions li { position: relative; padding: 10px 12px 10px 40px; border-radius: 14px; font-size: .9rem; color: var(--lg-ink-3); background: rgb(255 255 255 / .03); box-shadow: inset 0 0 0 1px var(--lg-line); counter-increment: act; transition: color .3s, background .3s; }
.nxm-call__actions li::before { content: counter(act); position: absolute; left: 12px; top: 10px; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; font: 700 .72rem/1 var(--font-text); color: var(--lg-ink-2); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .25); }
.nxm-call__actions li.is-done { color: var(--lg-ink); background: rgb(86 230 255 / .07); box-shadow: inset 0 0 0 1px rgb(86 230 255 / .35); }
.nxm-call__actions li.is-done::before { content: "\2713"; color: var(--lg-midnight); background: var(--lg-cyan); box-shadow: none; }
@media (prefers-reduced-motion: no-preference) {
	.is-speaking .nxm-wave i { animation: nxm-bar .5s ease-in-out infinite alternate; }
	.is-speaking .nxm-wave i:nth-child(2n) { animation-delay: -.2s; } .is-speaking .nxm-wave i:nth-child(3n) { animation-delay: -.35s; }
}
.is-caller-speaking .nxm-wave i { background: linear-gradient(180deg, var(--lg-violet), #ff8fd6); }
@media (max-width: 1099px) { .nxm-call { grid-template-columns: minmax(0, 220px) minmax(0, 1fr); } .nxm-call__actions { grid-column: 1 / -1; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); } }
@media (max-width: 699px) { .nxm-call { grid-template-columns: 1fr; } .nxm-call__phone { grid-template-columns: auto 1fr; justify-items: stretch; align-items: center; } .nxm-call__play { grid-column: 1 / -1; } .nxm-wave { height: 40px; } }

/* workflow */
.nxm-flowrun { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)); counter-reset: node; }
.nxm-flowrun__node { position: relative; display: grid; gap: 6px; align-content: start; padding: 16px 14px; border-radius: 18px; background: rgb(255 255 255 / .03); box-shadow: inset 0 0 0 1px var(--lg-line); counter-increment: node; }
.nxm-flowrun__node strong::before { content: counter(node, decimal-leading-zero) "  "; color: var(--lg-ink-3); font-weight: 600; }
.nxm-flowrun__node span { font-size: .88rem; color: var(--lg-ink-3); line-height: 1.4; }
.nxm-flowrun__node.is-active { background: rgb(91 140 255 / .14); box-shadow: inset 0 0 0 1px rgb(91 140 255 / .7), 0 0 28px rgb(91 140 255 / .25); }
.nxm-flowrun__node.is-done { background: rgb(86 230 255 / .07); box-shadow: inset 0 0 0 1px rgb(86 230 255 / .4); }
.nxm-flowrun__node.is-done span, .nxm-flowrun__node.is-active span { color: var(--lg-ink-2); }
.nxm-flowrun__status { margin: 0; color: var(--lg-ink-2); font-size: .92rem; }

/* agent */
.nxm-agent__task { margin: 0; padding: 14px 16px; border-radius: 16px; background: rgb(4 6 14 / .55); box-shadow: inset 0 0 0 1px var(--lg-line); }
.nxm-agent__task .lg-eyebrow { margin-right: 8px; }
.nxm-agent__steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; min-height: 260px; align-content: start; }
.nxm-agent__steps li { position: relative; padding: 10px 14px 10px 44px; border-radius: 14px; background: rgb(255 255 255 / .04); box-shadow: inset 0 0 0 1px var(--lg-line); color: var(--lg-ink); line-height: 1.45; }
.nxm-agent__steps li::before { position: absolute; left: 12px; top: 9px; width: 22px; height: 22px; border-radius: 7px; display: grid; place-items: center; font: 700 .72rem/1 var(--font-text); color: var(--lg-midnight); background: var(--lg-ink-2); content: "\2022"; }
.nxm-agent__steps li.is-plan::before { content: "P"; background: var(--lg-violet); }
.nxm-agent__steps li.is-tool::before { content: "T"; background: var(--lg-blue); }
.nxm-agent__steps li.is-output::before { content: "\2713"; background: var(--lg-cyan); }
.nxm-agent__steps li.is-approval { box-shadow: inset 0 0 0 1px rgb(255 196 87 / .6); background: rgb(255 196 87 / .08); }
.nxm-agent__steps li.is-approval::before { content: "!"; background: #ffc457; }
.nxm-agent__steps li.is-done { box-shadow: inset 0 0 0 1px rgb(86 230 255 / .5); background: rgb(86 230 255 / .08); }
.nxm-agent__steps li.is-done::before { content: "\2713"; background: var(--lg-cyan); }
.nxm-agent__steps li.is-rejected::before { content: "\21BA"; background: var(--lg-ink-2); }

/* ---------------------------------------------------------------- ecosystem */
.nxm-eco { display: grid; gap: 24px; grid-template-columns: minmax(0, 1fr) minmax(0, 340px); align-items: center; }
.nxm-eco__stage { position: relative; height: clamp(380px, 46vw, 520px); }
.nxm-eco__lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.nxm-eco__lines line { stroke: rgb(86 230 255 / .35); stroke-width: 1.5; stroke-dasharray: 4 6; }
.nxm-eco__core { position: absolute; left: 50%; top: 50%; width: clamp(170px, 20vw, 240px); transform: translate(-50%, -50%); text-align: center; z-index: 5; }
.nxm-eco__core img { width: 100%; height: auto; filter: drop-shadow(0 0 40px rgb(86 230 255 / .3)); }
.nxm-eco__core p { margin: -6px auto 0; width: max-content; max-width: 100%; display: grid; gap: 2px; padding: 8px 14px; border-radius: 14px; font-size: .85rem; color: var(--lg-ink-2); background: rgb(7 10 20 / .82); box-shadow: inset 0 0 0 1px var(--lg-line); }
.nxm-eco__core strong { color: var(--lg-ink); font-size: .95rem; }
.nxm-eco__nodes { list-style: none; margin: 0; padding: 0; }
.nxm-eco__node { position: absolute; left: 50%; top: 50%; z-index: var(--z, 6); transform: translate(calc(-50% + var(--x, 0px)), calc(-50% + var(--y, 0px))) scale(var(--s, 1)); opacity: var(--o, 1); will-change: transform; }
.nxm-eco__node button {
	display: inline-flex; align-items: center; gap: 8px; min-height: 46px; padding: 0 16px 0 12px; border: 0; border-radius: 999px; cursor: pointer; white-space: nowrap;
	font: 600 .92rem/1 var(--font-text); color: var(--lg-ink); background: rgb(12 16 32 / .82); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .18), 0 10px 30px rgb(0 0 0 / .35);
	-webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
}
.nxm-eco__node button svg { width: 20px; height: 20px; color: var(--lg-cyan); }
.nxm-eco__node button[aria-pressed="true"] { box-shadow: inset 0 0 0 1px rgb(86 230 255 / .8), 0 0 30px rgb(86 230 255 / .3); }
.nxm-eco__detail { --r: var(--r-l, 28px); padding: 26px; }
.nxm-eco__detail h3 { margin: 0 0 8px; }
.nxm-eco__detail p { margin: 0; color: var(--lg-ink-2); }
.nxm-eco__uses { margin-top: 14px !important; font-size: .92rem; }
.nxm-eco__uses .lg-eyebrow { display: block; margin-bottom: 4px; }
@media (max-width: 899px) {
	.nxm-eco { grid-template-columns: 1fr; }
	.nxm-eco__stage { height: auto; display: grid; gap: 14px; justify-items: center; }
	.nxm-eco__lines { display: none; }
	.nxm-eco__core { position: static; transform: none; width: 150px; }
	.nxm-eco__nodes { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
	.nxm-eco__node { position: static; transform: none !important; opacity: 1 !important; }
}

/* ---------------------------------------------------------------- pipeline */
.nxm-pipe { position: relative; --p: 0; }
.nxm-pipe ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; grid-template-columns: repeat(7, minmax(0, 1fr)); position: relative; z-index: 1; }
/* the line runs through the icon centres: from the first icon to the last (column width minus half an icon) */
.nxm-pipe__track { position: absolute; left: 30px; right: calc((100% - 6 * 18px) / 7 - 30px); top: 30px; height: 2px; background: rgb(255 255 255 / .12); z-index: 0; }
.nxm-pipe__track::before { content: ""; position: absolute; inset: 0; transform-origin: 0 50%; transform: scaleX(var(--p)); background: linear-gradient(90deg, var(--lg-cyan), var(--lg-violet)); }
.nxm-pipe__packet { position: absolute; top: 50%; left: calc(var(--p) * 100%); width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; background: #fff; box-shadow: 0 0 18px var(--lg-cyan), 0 0 40px rgb(86 230 255 / .5); }
.nxm-pipe__stage { display: grid; gap: 8px; align-content: start; text-align: left; }
.nxm-pipe__icon { position: relative; z-index: 1; width: 60px; height: 60px; border-radius: 18px; display: grid; place-items: center; background: #0b0f1e; box-shadow: inset 0 0 0 1px rgb(255 255 255 / .16); transition: background .4s, box-shadow .4s; }
.nxm-pipe__icon svg { width: 24px; height: 24px; color: var(--lg-ink-2); }
.nxm-pipe__num { font: 600 .78rem/1 var(--font-text); letter-spacing: .1em; color: var(--lg-ink-3); }
.nxm-pipe__stage h3 { margin: 0; font-size: 1.05rem; }
.nxm-pipe__stage p { margin: 0; font-size: .88rem; color: var(--lg-ink-2); line-height: 1.45; }
.nxm-pipe__stage.is-on .nxm-pipe__icon { background: linear-gradient(140deg, #1d4f74, #3f3480); box-shadow: inset 0 0 0 1px rgb(86 230 255 / .7), 0 0 26px rgb(86 230 255 / .3); }
.nxm-pipe__stage.is-on .nxm-pipe__icon svg { color: #fff; }
@media (max-width: 1099px) {
	.nxm-pipe ol { grid-template-columns: 1fr; gap: 22px; }
	.nxm-pipe__track { left: 29px; right: auto; top: 30px; bottom: 30px; width: 2px; height: auto; }
	.nxm-pipe__track::before { transform-origin: 50% 0; transform: scaleY(var(--p)); }
	.nxm-pipe__packet { left: 50%; top: calc(var(--p) * 100%); }
	.nxm-pipe__stage { grid-template-columns: 60px 1fr; column-gap: 16px; row-gap: 2px; align-items: center; }
	.nxm-pipe__stage .nxm-pipe__icon { grid-row: span 3; }
}
@media (prefers-reduced-motion: reduce) {
	.nxm-pipe { --p: 1; }
	.nxm-pipe__packet { display: none; }
}

/* ---------------------------------------------------------------- steps, industries, integrations */
.nxm-ai-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); }
.nxm-ai-steps li { --r: 22px; padding: 22px; display: grid; gap: 6px; align-content: start; }
.nxm-ai-steps__n { font: 700 1.6rem/1 var(--font-display); background: linear-gradient(120deg, var(--lg-cyan), var(--lg-violet)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.nxm-ai-steps h3 { margin: 4px 0 0; font-size: 1.1rem; }
.nxm-ai-steps p { margin: 0; color: var(--lg-ink-2); font-size: .95rem; }
.nxm-ai-ints { display: grid; gap: 18px 32px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); }
.nxm-ai-ints__row h3 { margin: 0 0 8px; font-size: 1rem; color: var(--lg-ink-2); font-weight: 600; }