/* Generative AI horizontal layout. It inherits the unified typography (Special
 * Elite / Open Sans) and interface palette from aix-explainer.css. Green is
 * reserved for semantic success — the validation gate ticks, the score bars
 * and the "goes live" milestone marker; amber marks the held-back warning.
 * Navigation, headings, wires and progress state remain blue. Text uses
 * exactly two whites: every readable label inside the scenes and panels is
 * var(--ns-aix-ink); var(--ns-aix-muted) marks only the genuinely inactive —
 * unselected rail steps, rejected (dim) chips and decorative separators. */
.ns-aix-genai{
  --ns-aix-genai-success:#30ce7c;
  --ns-aix-genai-warning:#f2b263;
  --ns-aix-genai-panel:color-mix(in srgb,var(--ns-aix-secondary) 10%,transparent);
  --ns-aix-genai-line:color-mix(in srgb,var(--ns-aix-ink) 16%,transparent);
  container-type:inline-size;
  overflow:visible;
}
/* Stroke-icon default; the RAG pipeline SVG opts out and styles its own parts. */
.ns-aix-genai svg:not(.ns-aix-genai-ragsvg){display:block;width:1em;height:1em;fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.7}
.ns-aix-genai-head{margin-bottom:clamp(10px,1.5vw,18px)}
/* Two-state whites apply to the header too: the intro is primary reading
 * text and uses the same ink as the title (the shared stylesheet's muted
 * intro reads as a different, bluer white over dark backgrounds). !important
 * also shields both from theme heading/paragraph colors. */
.ns-aix-genai .ns-aix-title{color:var(--ns-aix-ink)!important}
.ns-aix-genai .ns-aix-intro{color:var(--ns-aix-ink)!important}

/* ---- Horizontal step rail: seven equal columns at desktop/tablet widths;
 *      narrow hosts scroll horizontally with the scrollbar hidden, exactly as
 *      the audit rail does. ---- */
.ns-aix-genai-navwrap{
  width:100%;max-width:1180px;min-width:0;margin:0 auto;overflow:hidden;
  scroll-snap-type:x proximity;overscroll-behavior-inline:contain;
  -webkit-overflow-scrolling:touch;padding:22px 1px 6px;
  scrollbar-width:none;
}
.ns-aix-genai-navwrap::-webkit-scrollbar{display:none;width:0;height:0}
.ns-aix-genai-steps{
  list-style:none!important;margin:0!important;padding:0 0 12px!important;
  display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:clamp(4px,.72vw,10px);
  width:100%!important;max-width:100%!important;min-width:0!important;position:relative;
}
.ns-aix-genai-steps::before{
  content:"";position:absolute;left:5%;right:5%;bottom:35px;height:1px;
  background-image:linear-gradient(90deg,var(--ns-aix-genai-line) 0,var(--ns-aix-genai-line) 48%,transparent 48%);background-size:10px 1px;pointer-events:none;
}
.ns-aix-genai-steps li{list-style:none!important;margin:0!important;padding:0!important;min-width:0!important;max-width:100%;scroll-snap-align:center}
.ns-aix-genai-step{
  appearance:none;border:0;background:transparent;color:var(--ns-aix-muted);width:100%;min-width:0;max-width:100%;min-height:106px;
  display:grid;grid-template-rows:auto minmax(2.3em,auto) 38px;justify-items:center;align-items:center;text-align:center;
  gap:5px;padding:2px 6px 8px;cursor:pointer;font-family:var(--ns-body);position:relative;
  transition:color .75s ease,background .75s ease,transform .75s ease;
}
.ns-aix-genai-step:hover{color:var(--ns-aix-ink)}
.ns-aix-genai-step:focus-visible{outline:none;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--ns-aix-accent) 62%,transparent),0 0 16px color-mix(in srgb,var(--ns-aix-accent) 20%,transparent)}
.ns-aix-genai-step.ns-on{color:var(--ns-aix-ink);background:linear-gradient(180deg,color-mix(in srgb,var(--ns-aix-accent) 6%,transparent),transparent 78%);transform:translateY(-1px)}
.ns-aix-genai-step-num{font-family:var(--ns-tw);font-size:14px;letter-spacing:.08em;color:var(--ns-aix-muted);transition:color .7s ease,text-shadow .7s ease}
.ns-aix-genai-step.ns-on .ns-aix-genai-step-num{color:var(--ns-aix-accent);text-shadow:0 0 12px color-mix(in srgb,var(--ns-aix-accent) 38%,transparent)}
.ns-aix-genai-step-label{font-family:var(--ns-tw);font-size:clamp(11px,.86vw,13.5px);line-height:1.18;letter-spacing:.02em;display:grid;place-items:center;min-width:0;max-width:100%;color:inherit;overflow-wrap:normal;word-break:normal;hyphens:auto}
.ns-aix-genai-step.ns-on .ns-aix-genai-step-label{color:var(--ns-aix-ink);opacity:1}
.ns-aix-genai-step-icon{
  position:relative;z-index:1;width:38px;height:38px;display:grid;place-items:center;font-size:19px;
  border:1px solid var(--ns-aix-genai-line);color:var(--ns-aix-muted);background:color-mix(in srgb,var(--ns-aix-secondary) 5%,transparent);
  transition:color .75s ease,border-color .75s ease,box-shadow .75s ease,background .75s ease;
}
.ns-aix-genai-step.ns-on .ns-aix-genai-step-icon{color:var(--ns-aix-ink);opacity:1;border-color:color-mix(in srgb,var(--ns-aix-accent) 66%,transparent);background:color-mix(in srgb,var(--ns-aix-accent) 8%,transparent);box-shadow:0 0 18px color-mix(in srgb,var(--ns-aix-accent) 22%,transparent)}
.ns-aix-genai-step-icon::after{content:"";position:absolute;left:50%;bottom:-13px;transform:translateX(-50%);width:7px;height:7px;opacity:0;background:var(--ns-aix-accent);box-shadow:0 0 12px color-mix(in srgb,var(--ns-aix-accent) 55%,transparent);transition:opacity .7s ease}
.ns-aix-genai-step.ns-on .ns-aix-genai-step-icon::after{opacity:1}

/* "goes live" marker between the build steps (01-04) and the run steps
 * (05-07). A success milestone: the one green element on the rail. */
.ns-aix-genai-golive{position:absolute;top:-16px;bottom:12px;transform:translateX(-50%);pointer-events:none;z-index:3}
.ns-aix-genai-golive::before{content:"";position:absolute;top:20px;bottom:0;left:50%;transform:translateX(-50%);width:1px;background:linear-gradient(180deg,color-mix(in srgb,var(--ns-aix-genai-success) 55%,transparent),transparent)}
.ns-aix-genai-golive .lbl{position:absolute;top:0;left:50%;transform:translateX(-50%);font-family:var(--ns-tw);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--ns-aix-genai-success);border:1px solid color-mix(in srgb,var(--ns-aix-genai-success) 40%,transparent);background:color-mix(in srgb,var(--ns-aix-genai-success) 5%,transparent);padding:3px 8px 2px;white-space:nowrap}

.ns-aix-genai-progress{width:100%;max-width:1180px;height:2px;margin:0 auto clamp(16px,2vw,24px);background:var(--ns-aix-genai-line);overflow:hidden}
.ns-aix-genai-progress span{display:block;width:14.285%;height:100%;background:linear-gradient(90deg,var(--ns-aix-accent),var(--ns-aix-secondary));transition:width 1.1s cubic-bezier(.16,.72,.18,1)}

/* ---- Body: animation left, explanation right ---- */
.ns-aix-genai-body{width:100%;max-width:1180px;margin:0 auto;display:grid;grid-template-columns:minmax(0,1.12fr) minmax(270px,.88fr);gap:clamp(20px,3.2vw,44px);align-items:start}
.ns-aix-genai-stage{position:relative;height:clamp(400px,36vw,460px);min-width:0;overflow:hidden}
.ns-aix-genai-canvas{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;display:block!important;pointer-events:none;opacity:1}
.ns-aix-genai-scene{position:absolute;inset:0;opacity:0;visibility:hidden;pointer-events:none;transform:translateY(10px);transition:opacity .52s ease,transform .52s ease,visibility 0s linear .52s}
.ns-aix-genai-scene.ns-on{opacity:1;visibility:visible;pointer-events:auto;transform:translateY(0);transition:opacity .62s ease,transform .62s ease,visibility 0s}
.ns-aix-genai-pad{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-start;align-items:center;gap:clamp(10px,1.7vw,17px);padding:4px}

/* shared glass modules */
.ns-aix-genai-card,.ns-aix-genai-chip,.ns-aix-genai-gate,.ns-aix-genai-msg,.ns-aix-genai-metric,.ns-aix-genai-conn,.ns-aix-genai-use{
  border:1px solid var(--ns-aix-genai-line);background:var(--ns-aix-genai-panel);box-shadow:0 0 18px rgba(0,0,0,.10);
}
@keyframes nsAixGenaiFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
.ns-aix-genai-float{animation:nsAixGenaiFloat 6.5s ease-in-out infinite;animation-delay:var(--d,0s);will-change:transform}
.ns-aix-paused .ns-aix-genai-float{animation-play-state:paused!important}

/* ---- Scene 1 — Business & Use Cases ---- */
.ns-aix-genai-s1{display:flex;flex-direction:column;align-items:stretch;gap:clamp(8px,1.4vw,14px);width:min(100%,340px)}
.ns-aix-genai-arrowcol{display:grid;place-items:center;color:var(--ns-aix-accent);font-size:24px;opacity:.7}
.ns-aix-genai-s1 .ns-aix-genai-arrowcol svg{transform:rotate(90deg)}
.ns-aix-genai-goals{display:grid;gap:8px}
.ns-aix-genai-card{display:grid;grid-template-columns:30px 1fr;gap:9px;align-items:center;padding:9px 11px;color:var(--ns-aix-ink);min-height:46px}
.ns-aix-genai-card .ns-aix-genai-cic{width:28px;height:28px;display:grid;place-items:center;font-size:18px;color:var(--ns-aix-accent);border:1px solid var(--ns-aix-genai-line)}
.ns-aix-genai-card strong{font-size:12.8px;font-weight:600;line-height:1.18;letter-spacing:.01em}
.ns-aix-genai-usestack{display:grid;gap:8px}
.ns-aix-genai-use{display:grid;grid-template-columns:1fr auto;gap:8px;align-items:center;padding:9px 11px}
.ns-aix-genai-use b{font-family:var(--ns-body);font-size:12.8px;font-weight:600;letter-spacing:.01em;color:var(--ns-aix-ink)}
.ns-aix-genai-use .vc{display:flex;gap:5px}
.ns-aix-genai-use .vc i{width:13px;height:5px;background:color-mix(in srgb,var(--ns-aix-ink) 18%,transparent)}
.ns-aix-genai-use .vc i.on{background:var(--ns-aix-accent);box-shadow:0 0 8px color-mix(in srgb,var(--ns-aix-accent) 60%,transparent)}
.ns-aix-genai-use.top{border-color:color-mix(in srgb,var(--ns-aix-accent) 50%,transparent);box-shadow:0 0 22px color-mix(in srgb,var(--ns-aix-accent) 14%,transparent)}

/* ---- Scene 2 — Scope & Prototype ---- */
.ns-aix-genai-s2{display:flex;flex-direction:column;align-items:center;gap:clamp(14px,2.2vw,22px);width:min(100%,360px)}
.ns-aix-genai-candgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:9px;width:100%}
.ns-aix-genai-chip{padding:11px 8px;text-align:center;font-family:var(--ns-tw);font-size:13px;letter-spacing:.02em;color:var(--ns-aix-ink);transition:all 1.1s cubic-bezier(.16,.72,.18,1)}
.ns-aix-genai-chip.sel{color:var(--ns-aix-ink);border-color:color-mix(in srgb,var(--ns-aix-accent) 60%,transparent);box-shadow:0 0 18px color-mix(in srgb,var(--ns-aix-accent) 20%,transparent);background:color-mix(in srgb,var(--ns-aix-accent) 6%,transparent)}
.ns-aix-genai-chip.dim{color:var(--ns-aix-muted);border-color:color-mix(in srgb,var(--ns-aix-ink) 8%,transparent);background:transparent}
.ns-aix-genai-stackpick{display:flex;flex-direction:column;gap:8px;align-items:stretch;width:100%}
.ns-aix-genai-stackpick span{display:inline-flex;align-items:center;justify-content:flex-start;gap:7px;font-family:var(--ns-tw);font-size:12.5px;letter-spacing:.04em;color:var(--ns-aix-ink);border:1px solid var(--ns-aix-genai-line);padding:7px 13px;background:color-mix(in srgb,var(--ns-aix-secondary) 6%,transparent)}
.ns-aix-genai-stackpick span svg{color:var(--ns-aix-accent);font-size:13px;flex:0 0 auto}

/* ---- Scene 3 — RAG Pipeline (hero) ---- */
.ns-aix-genai-rag{position:relative;width:min(100%,340px);display:grid;place-items:center;padding-bottom:24px}
.ns-aix-genai-ragsvg{width:100%;height:auto;max-height:400px;overflow:visible}
.ns-aix-genai-rag-h{display:none}
.ns-aix-genai-ragsvg .pwire{stroke:var(--ns-aix-genai-line);stroke-width:1.4;fill:none}
.ns-aix-genai-ragsvg .pwire-hot{stroke:var(--ns-aix-accent);stroke-width:1.6;fill:none;stroke-dasharray:4 9;opacity:.85;animation:nsAixGenaiWire 2.6s linear infinite}
@keyframes nsAixGenaiWire{to{stroke-dashoffset:-26}}
.ns-aix-paused .ns-aix-genai-ragsvg .pwire-hot{animation-play-state:paused!important}
.ns-aix-genai-ragsvg .pbox{fill:color-mix(in srgb,var(--ns-aix-secondary) 14%,transparent);stroke:color-mix(in srgb,var(--ns-aix-ink) 20%,transparent);stroke-width:1.2}
.ns-aix-genai-ragsvg .pbox-core{fill:color-mix(in srgb,var(--ns-aix-secondary) 18%,transparent);stroke:color-mix(in srgb,var(--ns-aix-accent) 60%,transparent);stroke-width:1.4}
.ns-aix-genai-ragsvg .plabel{font-family:var(--ns-tw);font-size:13px;letter-spacing:.03em;text-transform:lowercase;fill:var(--ns-aix-ink);stroke:none}
.ns-aix-genai-ragsvg .psub{font-family:var(--ns-body);font-size:10px;letter-spacing:.02em;fill:var(--ns-aix-ink);stroke:none}
.ns-aix-genai-ragsvg .psub.psmall{font-size:9.5px}
.ns-aix-genai-ragsvg .pdoc{fill:color-mix(in srgb,var(--ns-aix-secondary) 12%,transparent);stroke:color-mix(in srgb,var(--ns-aix-ink) 22%,transparent);stroke-width:1}
.ns-aix-genai-ragsvg .pcite{fill:color-mix(in srgb,var(--ns-aix-accent) 16%,transparent);stroke:var(--ns-aix-accent);stroke-width:1}
.ns-aix-genai-ragsvg .psub.pcite1{fill:var(--ns-aix-ink);font-size:11px}
.ns-aix-genai-ragsvg .psub.pcite2{fill:var(--ns-aix-ink);font-size:10px}
.ns-aix-genai-ragcap{position:absolute;left:0;right:0;bottom:0;text-align:center;font-family:var(--ns-tw);font-size:13px;letter-spacing:.04em;color:var(--ns-aix-ink)}

/* ---- Scene 4 — Implementation ---- */
.ns-aix-genai-s4{display:flex;flex-direction:column;align-items:stretch;gap:clamp(10px,1.7vw,16px);width:min(100%,340px)}
.ns-aix-genai-coreblk{display:grid;gap:8px;justify-items:stretch}
.ns-aix-genai-coreblk .blk{position:relative;border:1px solid color-mix(in srgb,var(--ns-aix-accent) 45%,transparent);padding:13px 18px;text-align:center;background:color-mix(in srgb,var(--ns-aix-secondary) 10%,transparent);box-shadow:0 0 22px color-mix(in srgb,var(--ns-aix-accent) 14%,transparent)}
.ns-aix-genai-coreblk::after{content:"";display:block;width:1px;height:14px;margin:2px auto -2px;background:linear-gradient(180deg,color-mix(in srgb,var(--ns-aix-accent) 60%,transparent),transparent)}
.ns-aix-genai-coreblk .blk b{font-family:var(--ns-tw);font-size:14px;letter-spacing:.03em;color:var(--ns-aix-ink);display:block}
.ns-aix-genai-coreblk .blk small{font-size:11.5px;color:var(--ns-aix-ink);letter-spacing:.02em}
.ns-aix-genai-conns{display:grid;gap:9px}
.ns-aix-genai-conn{display:grid;grid-template-columns:26px 1fr;gap:9px;align-items:center;padding:9px 12px;color:var(--ns-aix-ink)}
.ns-aix-genai-conn svg{color:var(--ns-aix-accent);font-size:17px}
.ns-aix-genai-conn b{font-family:var(--ns-body);font-size:12.6px;font-weight:600;letter-spacing:.01em}
.ns-aix-genai-hybrid{text-align:center;font-family:var(--ns-tw);font-size:12.5px;letter-spacing:.05em;color:var(--ns-aix-ink);margin-top:4px}

/* ---- Scene 5 — Validation & Control. Semantic colors: the passing gate
 *      ticks are success green; the held-back answer is amber. ---- */
.ns-aix-genai-s5{display:flex;flex-direction:column;align-items:center;gap:12px;width:min(100%,340px)}
.ns-aix-genai-gates{display:flex;flex-direction:column;align-items:stretch;gap:6px;width:100%}
.ns-aix-genai-gate{padding:11px 12px;text-align:center;min-width:96px;position:relative}
.ns-aix-genai-gate b{display:block;font-family:var(--ns-tw);font-size:12px;letter-spacing:.02em;color:var(--ns-aix-ink)}
.ns-aix-genai-gate small{display:block;font-size:10.5px;color:var(--ns-aix-ink);margin-top:3px;line-height:1.3}
.ns-aix-genai-gate .tick{position:absolute;top:-9px;right:-9px;width:20px;height:20px;border-radius:50%;display:grid;place-items:center;background:var(--ns-aix-genai-success);color:#04210f;box-shadow:0 0 12px color-mix(in srgb,var(--ns-aix-genai-success) 50%,transparent)}
.ns-aix-genai-gate .tick svg{font-size:12px}
.ns-aix-genai-gatesep{color:var(--ns-aix-muted);font-size:16px;transform:rotate(90deg);text-align:center}
.ns-aix-genai-held{display:flex;align-items:center;gap:9px;font-family:var(--ns-tw);font-size:12px;letter-spacing:.03em;color:var(--ns-aix-genai-warning);border:1px dashed color-mix(in srgb,var(--ns-aix-genai-warning) 45%,transparent);padding:8px 14px;background:color-mix(in srgb,var(--ns-aix-genai-warning) 5%,transparent)}
.ns-aix-genai-held svg{color:var(--ns-aix-genai-warning);font-size:15px;flex:0 0 auto}

/* ---- Scene 6 — User Testing & Refinement. Score bars are scores: green. ---- */
.ns-aix-genai-s6{display:flex;flex-direction:column;align-items:stretch;gap:clamp(12px,2vw,18px);width:min(100%,360px)}
.ns-aix-genai-msgs{display:grid;gap:8px}
.ns-aix-genai-msg{display:flex;align-items:center;gap:9px;padding:9px 12px;color:var(--ns-aix-ink);border-radius:2px 10px 10px 10px}
.ns-aix-genai-msg svg{color:var(--ns-aix-accent);font-size:16px;flex:0 0 auto}
.ns-aix-genai-msg b{font-family:var(--ns-body);font-size:12.4px;font-weight:400;letter-spacing:.01em}
.ns-aix-genai-msg em{margin-left:auto;font-style:normal;font-size:9px;letter-spacing:.08em;color:#07132c;background:var(--ns-aix-genai-warning);padding:2px 6px;flex:0 0 auto}
.ns-aix-genai-scorecol{display:grid;gap:9px;justify-items:center}
.ns-aix-genai-scorecol .sc{display:grid;gap:7px;width:min(100%,300px)}
.ns-aix-genai-bar{display:grid;grid-template-columns:68px 1fr;gap:8px;align-items:center;font-family:var(--ns-tw);font-size:11.5px;letter-spacing:.03em;color:var(--ns-aix-ink)}
.ns-aix-genai-bar .tr{height:6px;background:color-mix(in srgb,var(--ns-aix-ink) 12%,transparent);overflow:hidden}
.ns-aix-genai-bar .tr i{display:block;height:100%;background:color-mix(in srgb,var(--ns-aix-genai-success) 78%,transparent);box-shadow:0 0 8px color-mix(in srgb,var(--ns-aix-genai-success) 35%,transparent)}
.ns-aix-genai-loopnote{display:flex;align-items:center;gap:7px;font-family:var(--ns-tw);font-size:12px;letter-spacing:.04em;color:var(--ns-aix-ink)}
.ns-aix-genai-loopnote svg{color:var(--ns-aix-accent);font-size:14px;flex:0 0 auto}

/* ---- Scene 7 — Monitoring & Governance ---- */
.ns-aix-genai-s7{display:flex;flex-direction:column;align-items:center;gap:14px;width:min(100%,360px)}
.ns-aix-genai-dash{display:grid;grid-template-columns:repeat(2,1fr);gap:9px;width:100%}
.ns-aix-genai-metric{padding:11px 9px;text-align:center}
.ns-aix-genai-metric b{display:block;font-family:var(--ns-tw);font-size:19px;color:var(--ns-aix-ink);line-height:1}
.ns-aix-genai-metric small{display:block;font-size:10.5px;color:var(--ns-aix-ink);margin-top:5px;letter-spacing:.02em}
.ns-aix-genai-metric .spark{height:18px;margin-top:7px;display:flex;align-items:flex-end;gap:2px;justify-content:center}
.ns-aix-genai-metric .spark i{width:3px;background:color-mix(in srgb,var(--ns-aix-accent) 70%,transparent)}
.ns-aix-genai-govrow{display:flex;gap:9px;flex-wrap:wrap;justify-content:center}
.ns-aix-genai-govrow span{display:inline-flex;align-items:center;gap:6px;font-family:var(--ns-tw);font-size:12px;letter-spacing:.03em;color:var(--ns-aix-ink);border:1px solid var(--ns-aix-genai-line);padding:6px 12px}
.ns-aix-genai-govrow span svg{color:var(--ns-aix-accent);font-size:12px;flex:0 0 auto}
.ns-aix-genai-retrain{display:flex;align-items:center;gap:8px;font-family:var(--ns-tw);font-size:12.5px;letter-spacing:.05em;color:var(--ns-aix-ink)}
.ns-aix-genai-retrain svg{color:var(--ns-aix-accent);font-size:14px;flex:0 0 auto}

/* ---- Detail panel (explanation column) ---- */
.ns-aix-genai-detail{position:relative;min-width:0;padding-left:24px}
.ns-aix-genai-detail-rail{position:absolute;left:0;top:2px;bottom:4px;width:2px;background:linear-gradient(180deg,var(--ns-aix-accent),var(--ns-aix-secondary));box-shadow:0 0 14px color-mix(in srgb,var(--ns-aix-accent) 35%,transparent)}
.ns-aix-genai-detail-rail::before{content:"";position:absolute;left:50%;top:0;transform:translateX(-50%);width:8px;height:8px;background:var(--ns-aix-accent);box-shadow:0 0 10px color-mix(in srgb,var(--ns-aix-accent) 45%,transparent)}
.ns-aix-genai-detail-viewport{position:relative;display:grid;overflow:hidden}
.ns-aix-genai-panel{grid-area:1/1;opacity:0;visibility:hidden;pointer-events:none;transform:translateY(18px);transition:opacity .55s ease,transform .55s ease,visibility 0s linear .55s;padding:4px 0 12px}
.ns-aix-genai-panel.ns-on{opacity:1;visibility:visible;pointer-events:auto;transform:translateY(0);transition:opacity .65s ease,transform .65s ease,visibility 0s}
.ns-aix-genai-panel h4{font-size:clamp(20px,1.7vw,27px);line-height:1.16!important;color:var(--ns-aix-ink)!important;margin:0 0 11px!important}
.ns-aix-genai-panel h4 span{color:var(--ns-aix-accent);margin-right:9px;text-shadow:0 0 12px color-mix(in srgb,var(--ns-aix-accent) 35%,transparent)}
.ns-aix-genai-panel p{margin:0 0 14px!important;font-family:var(--ns-body);font-size:14.5px;line-height:1.62;color:var(--ns-aix-ink)}
.ns-aix-genai-panel ul{list-style:none!important;margin:0!important;padding:0!important;display:grid;gap:8px}
.ns-aix-genai-panel li{position:relative;padding-left:18px;margin:0!important;font-size:12.8px;line-height:1.43;color:var(--ns-aix-ink)}
.ns-aix-genai-panel li::before{content:"";position:absolute;left:0;top:.48em;width:7px;height:7px;border:1px solid color-mix(in srgb,var(--ns-aix-accent) 64%,transparent)}

/* ---- Wide stages: switch the vertical scene columns to landscape ---- */
@container (min-width: 1020px){
  .ns-aix-genai-s1{flex-direction:row;align-items:center;gap:clamp(14px,2vw,30px);width:min(100%,640px)}
  .ns-aix-genai-s1 .ns-aix-genai-goals,.ns-aix-genai-s1 .ns-aix-genai-usestack{flex:1;min-width:0}
  .ns-aix-genai-s1 .ns-aix-genai-arrowcol svg{transform:none}
  .ns-aix-genai-s2{width:min(100%,580px)}
  .ns-aix-genai-candgrid{grid-template-columns:repeat(4,1fr)}
  .ns-aix-genai-stackpick{flex-direction:row;flex-wrap:wrap;justify-content:center}
  .ns-aix-genai-stackpick span{justify-content:center}
  .ns-aix-genai-rag{width:min(100%,640px)}
  .ns-aix-genai-rag-h{display:block;max-height:290px}
  .ns-aix-genai-rag-v{display:none}
  .ns-aix-genai-s4{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:clamp(16px,2.6vw,40px);width:min(100%,620px)}
  .ns-aix-genai-s4 .ns-aix-genai-coreblk::after{display:none}
  .ns-aix-genai-s4 .ns-aix-genai-hybrid{grid-column:1/-1}
  .ns-aix-genai-s5{width:min(100%,620px)}
  .ns-aix-genai-gates{flex-direction:row;align-items:stretch;gap:clamp(6px,1.2vw,12px)}
  .ns-aix-genai-gatesep{transform:none;align-self:center}
  .ns-aix-genai-s6{display:grid;grid-template-columns:1fr auto;align-items:center;gap:clamp(16px,2.6vw,36px);width:min(100%,620px)}
  .ns-aix-genai-s7{width:min(100%,580px)}
  .ns-aix-genai-dash{grid-template-columns:repeat(4,1fr)}
}

/* ---- Narrow hosts ---- */
@container (max-width: 900px){
  .ns-aix-genai-body{grid-template-columns:1fr;gap:18px}
  .ns-aix-genai-stage{height:440px}
  .ns-aix-genai-detail{padding-left:20px}
}
@container (max-width: 620px){
  .ns-aix-genai-navwrap{overflow-x:auto}
  .ns-aix-genai-steps{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:minmax(96px,1fr)}
  .ns-aix-genai-step-label{font-size:11px}
}

/* Fallback for browsers without container queries: mirror the narrow rules
 * on the viewport so the widget still stacks on phones. */
@supports not (container-type: inline-size){
  @media (max-width:960px){
    .ns-aix-genai-body{grid-template-columns:1fr;gap:18px}
    .ns-aix-genai-stage{height:440px}
    .ns-aix-genai-detail{padding-left:20px}
  }
  @media (max-width:640px){
    .ns-aix-genai-navwrap{overflow-x:auto}
    .ns-aix-genai-steps{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:minmax(96px,1fr)}
  }
  @media (min-width:1080px){
    .ns-aix-genai-s1{flex-direction:row;align-items:center;gap:clamp(14px,2vw,30px);width:min(100%,640px)}
    .ns-aix-genai-s1 .ns-aix-genai-arrowcol svg{transform:none}
    .ns-aix-genai-candgrid{grid-template-columns:repeat(4,1fr)}
    .ns-aix-genai-rag{width:min(100%,640px)}
    .ns-aix-genai-rag-h{display:block;max-height:290px}
    .ns-aix-genai-rag-v{display:none}
    .ns-aix-genai-gates{flex-direction:row;align-items:stretch;gap:clamp(6px,1.2vw,12px)}
    .ns-aix-genai-gatesep{transform:none;align-self:center}
    .ns-aix-genai-dash{grid-template-columns:repeat(4,1fr)}
  }
}

@media (prefers-reduced-motion:reduce){
  .ns-aix-genai .ns-aix-genai-float,.ns-aix-genai .pwire-hot{animation:none!important}
  .ns-aix-genai-scene,.ns-aix-genai-panel,.ns-aix-genai-progress span{transition:none!important}
}