/* Simple one-look industry scenes: the same 8 leads, without vs. with the Demand Engine. */
.ns { background: linear-gradient(180deg, var(--navy-2), #0C1D31); border: 1px solid var(--navy-line); border-radius: var(--radius-lg); color: var(--white); padding: 26px 30px 30px; }
.ns-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 26px; }
.ns-head { margin: 0; font: 800 clamp(22px, 2.6vw, 32px)/1.15 var(--font-display); letter-spacing: -.02em; }
.ns-head span { color: var(--on-navy-2); font-weight: 700; }
.ns-head b { color: var(--rose); }
.ns-grid { display: grid; grid-template-columns: 190px 1fr 190px; column-gap: 26px; row-gap: 18px; align-items: center; }
.ns-stages { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); text-align: center; }
.ns-stages li { font: 600 13px/1.25 var(--font-display); color: var(--on-navy); padding: 0 4px; }
.ns-stages li span { display: block; font: 500 11px/1 var(--font-mono); letter-spacing: .1em; color: var(--rose); margin-bottom: 5px; }
.ns-res-h { font: 500 11px/1 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--on-navy-2); }
.ns-lane { display: contents; }
.ns-lane__label { font: 600 15px/1.3 var(--font-display); color: var(--on-navy-2); }
.ns-lane--with .ns-lane__label { color: var(--white); }
.ns-lane--with .ns-lane__label::before { content: ""; display: block; width: 28px; height: 3px; border-radius: 3px; background: var(--rose); margin-bottom: 8px; }
.ns-track { position: relative; container-type: inline-size; height: 84px; border-radius: 16px; background: rgba(9, 23, 40, .55); border: 1px solid var(--navy-line); }
.ns-lane--with .ns-track { border-color: rgba(242, 120, 140, .35); background: rgba(162, 36, 58, .1); }
.ns-line { position: absolute; left: 0; right: 0; top: 50%; height: 2px; margin-top: -1px; background: rgba(159, 176, 200, .2); }
.ns-lane--with .ns-line { background: linear-gradient(90deg, rgba(242, 120, 140, .25), rgba(242, 120, 140, .6)); }
.ns-node { position: absolute; top: 50%; width: 16px; height: 16px; margin: -8px 0 0 -8px; border-radius: 50%; background: var(--navy-2); border: 2px solid rgba(159, 176, 200, .4); z-index: 1; }
.ns-node:nth-of-type(1) { left: 12.5%; }
.ns-node:nth-of-type(2) { left: 37.5%; }
.ns-node:nth-of-type(3) { left: 62.5%; }
.ns-node:nth-of-type(4) { left: 87.5%; }
.ns-lane--with .ns-node { border-color: var(--rose); }
.ns-in { position: absolute; left: -15px; top: 50%; width: 30px; height: 30px; margin-top: -15px; border-radius: 50%; display: grid; place-items: center; font: 700 13px/1 var(--font-display); background: var(--navy-3); border: 1px solid var(--navy-line-2); color: var(--white); z-index: 3; }
.ns-dot { position: absolute; left: 0; top: 50%; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; background: #9FB0C8; z-index: 2; will-change: transform; }
.ns-lane--with .ns-dot { background: var(--white); box-shadow: 0 0 0 4px rgba(242, 120, 140, .25); }
.ns-dot.is-wait { opacity: .55; }
.ns-tag { position: absolute; top: calc(50% - 32px); transform: translateX(-50%); white-space: nowrap; font: 600 10px/1 var(--font-mono); letter-spacing: .06em; text-transform: uppercase; color: #FF9AA9; background: rgba(162, 36, 58, .3); padding: 4px 7px; border-radius: 999px; z-index: 3; pointer-events: none; }
.ns-pile { position: absolute; top: calc(50% + 12px); transform: translateX(-50%); display: flex; gap: 3px; z-index: 2; }
.ns-pile i { font: 700 11px/1 var(--font-body); font-style: normal; color: #FF7A90; animation: ns-x .3s ease-out; }
@keyframes ns-x { from { opacity: 0; transform: scale(.4); } to { opacity: 1; transform: none; } }
.ns-out { display: grid; grid-template-columns: auto 1fr; column-gap: 10px; align-items: center; padding: 12px 16px; border-radius: 16px; background: rgba(159, 176, 200, .08); border: 1px solid var(--navy-line-2); height: 84px; box-sizing: border-box; transition: transform .25s; }
.ns-out b { grid-row: span 2; font: 800 42px/1 var(--font-display); letter-spacing: -.03em; font-variant-numeric: tabular-nums; color: var(--on-navy); min-width: 1ch; }
.ns-out span { font-size: 13px; line-height: 1.2; color: var(--on-navy); }
.ns-out small { font-size: 12px; color: var(--on-navy-2); }
.ns-out em { font-style: normal; }
.ns-lane--with .ns-out { background: var(--crimson); border-color: var(--rose); }
.ns-lane--with .ns-out b, .ns-lane--with .ns-out span { color: var(--white); }
.ns-lane--with .ns-out small { color: var(--rose-wash); }
.ns-out.is-pop { transform: scale(1.04); }

@media (max-width: 900px) {
  .ns { padding: 20px 16px 22px; }
  .ns-top { margin-bottom: 18px; }
  .ns-grid { grid-template-columns: 1fr 104px; column-gap: 12px; row-gap: 10px; }
  .ns-grid > span:first-child, .ns-res-h { display: none; }
  .ns-stages li { font-size: 0; }
  .ns-stages li span { font-size: 11px; margin: 0; }
  .ns-lane__label { grid-column: 1 / -1; font-size: 14px; margin-top: 8px; }
  .ns-lane--with .ns-lane__label::before { display: inline-block; vertical-align: middle; margin: 0 8px 2px 0; width: 16px; }
  .ns-track, .ns-out { height: 72px; }
  .ns-out { grid-template-columns: 1fr; padding: 8px 10px; text-align: center; }
  .ns-out b { grid-row: auto; font-size: 30px; }
  .ns-out span { font-size: 11px; }
  .ns-out small { display: none; }
  .ns-tag { font-size: 9px; padding: 3px 5px; top: calc(50% - 30px); }
  .ns-pile i { font-size: 9px; }
}

/* Homepage: industry switch above the scene */
.ns-switch-row { display: flex; justify-content: center; }
.ns-switch { display: inline-flex; gap: 4px; padding: 5px; border-radius: 999px; background: var(--navy-2); border: 1px solid var(--navy-line); flex-wrap: wrap; justify-content: center; }
.ns-switch button { font: 600 15px/1 var(--font-body); color: var(--on-navy); background: transparent; border: 0; border-radius: 999px; padding: 12px 20px; cursor: pointer; transition: background-color .2s, color .2s; }
.ns-switch button:hover { color: var(--white); }
.ns-switch button[aria-selected="true"] { background: var(--white); color: var(--navy); }
.ns-switch button:focus-visible { outline: 2px solid var(--rose); outline-offset: 2px; }
@media (max-width: 600px) { .ns-switch button { font-size: 13px; padding: 10px 12px; } }