/* issue 193／237 場景 netskope-sse：使用者與裝置（左節點方塊）→ 同一組雲端檢查點（每個一列，含圖示與說明）→ 網頁、SaaS、生成式 AI（右節點方塊）。
   玻璃面板（--deeper 底、品牌色細框、模糊與內側高光），大小比照頁首插畫框（最小高 25.5rem）。五欄格線（節點、連線、檢查點、連線、節點），每列由連線串起。
   進入畫面時 JS 加 is-run：光點沿每列連線走一次（只用 translate／opacity，僅在 prefers-reduced-motion: no-preference 且 html:not([data-motion="off"]) 內播放），之後停在完成狀態；否則靜止、不顯示光點。
   <48rem 改成上下堆疊，只留一條向下的連線與箭頭。 */
.page-blocks .nx { position: relative; display: grid; grid-template-columns: max-content 2rem minmax(0, 1fr) 2rem max-content; column-gap: .5rem; row-gap: .75rem; align-items: center; align-content: center; min-height: 25.5rem; padding: clamp(1.25rem, 2.4vw, 1.75rem); border: 1px solid color-mix(in srgb, var(--accent-dark) 32%, transparent); border-radius: 1.375rem; background: linear-gradient(150deg, color-mix(in srgb, var(--accent) 16%, var(--deeper)), color-mix(in srgb, var(--deeper) 94%, transparent)); color: var(--paper); isolation: isolate; overflow: clip; box-shadow: 0 2.5rem 5.5rem color-mix(in srgb, var(--deeper) 70%, transparent), 0 0 5rem color-mix(in srgb, var(--accent) 16%, transparent), inset 0 1px 0 color-mix(in srgb, var(--paper) 10%, transparent); }
@supports (backdrop-filter: blur(1px)) { .page-blocks .nx { backdrop-filter: blur(14px) saturate(1.3); } }
.page-blocks .nx::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: radial-gradient(60% 70% at 50% 45%, color-mix(in srgb, var(--accent) 14%, transparent), transparent); }
.page-blocks .nx .nk-ico { flex: none; width: 1.375rem; height: 1.375rem; color: var(--accent-dark); }
.page-blocks .nx-c1 { grid-column: 1; } .page-blocks .nx-c2 { grid-column: 2; } .page-blocks .nx-c3 { grid-column: 3; } .page-blocks .nx-c4 { grid-column: 4; } .page-blocks .nx-c5 { grid-column: 5; }
.page-blocks .nx-r1 { grid-row: 2; } .page-blocks .nx-r2 { grid-row: 3; } .page-blocks .nx-r3 { grid-row: 4; } .page-blocks .nx-r4 { grid-row: 5; }
.page-blocks .nx-h { grid-row: 1; margin: 0 0 .125rem; color: var(--muted-on-dark); font-size: .75rem; font-weight: 700; letter-spacing: .14em; }
.page-blocks .nx-h:empty { display: none; }
/* 左右節點方塊：高度跨過所有檢查點列，列內容垂直置中。 */
.page-blocks .nx-node { position: relative; grid-row: 2; align-self: center; display: grid; align-content: center; gap: .75rem; padding: .875rem .75rem; border: 1px solid color-mix(in srgb, var(--accent-dark) 50%, transparent); border-radius: 1rem; background: color-mix(in srgb, var(--deeper) 78%, transparent); box-shadow: 0 0 1.5rem color-mix(in srgb, var(--accent) 15%, transparent); }
.page-blocks .nx-n { display: flex; align-items: center; gap: .5rem; color: var(--paper); font-size: .875rem; font-weight: 800; line-height: 1.3; }
.page-blocks .nx-n-ic, .page-blocks .nx-gate-ic { display: grid; place-items: center; }
.page-blocks .nx-n-ic:not(:has(svg)), .page-blocks .nx-gate-ic:not(:has(svg)) { display: none; }
.page-blocks .nx-gate { position: relative; z-index: 1; display: flex; align-items: center; gap: .75rem; min-height: 3.5rem; padding: .625rem .875rem; border: 1px solid color-mix(in srgb, var(--accent-dark) 55%, transparent); border-radius: .875rem; background: color-mix(in srgb, var(--accent) 18%, var(--deeper)); font-size: .9375rem; font-weight: 800; line-height: 1.3; transition: background .2s var(--ease), border-color .2s var(--ease); }
.page-blocks .nx-gate-ic { width: 2.125rem; height: 2.125rem; border-radius: .5rem; background: color-mix(in srgb, var(--accent) 22%, transparent); }
.page-blocks .nx-gate-b { display: grid; gap: .125rem; min-width: 0; }
.page-blocks .nx-gate-d { text-wrap: balance; color: var(--muted-on-dark); font-size: .75rem; font-weight: 500; line-height: 1.45; }
.page-blocks .nx-sheen { position: absolute; inset: 0; border-radius: inherit; overflow: hidden; pointer-events: none; }
.page-blocks .nx-cap { grid-column: 1 / -1; grid-row: 6; margin: .5rem 0 0; color: var(--muted-on-dark); font-size: .75rem; letter-spacing: .08em; }
/* 連線：節點方塊邊緣一條橫線接到垂直匯流排（連線欄中線），匯流排再分出一條橫線到每個檢查點。 */
.page-blocks .nx-link { position: relative; align-self: stretch; margin-inline: -.5rem; }
.page-blocks .nx-link::before { content: ""; position: absolute; inset: calc(50% - 1px) 0 auto; height: 2px; background: var(--accent-dark); }
.page-blocks .nx-link::after { content: ""; position: absolute; display: none; }
.page-blocks .nx-node::after { content: ""; position: absolute; top: calc(50% - 1px); width: 2rem; height: 2px; background: var(--accent-dark); }
.page-blocks .nx-node.nx-c1::after { left: 100%; }
.page-blocks .nx-node.nx-c5::after { right: 100%; }
/* 封包：寬度＝整列（連線＋檢查點＋連線），點在最左，translate 100% 走完整列；列外被 .nx 的 overflow: clip 裁掉，不產生捲軸。 */
.page-blocks .nx-pkt { display: none; }
@media (min-width: 48rem) {
  .page-blocks .nx-link.nx-c2::before { left: 50%; right: 0; } .page-blocks .nx-link.nx-c4::before { left: 0; right: 50%; }
  .page-blocks .nx-link::after { display: block; position: absolute; left: calc(50% - 1px); top: -.8125rem; bottom: -.8125rem; width: 2px; background: var(--accent-dark); }
  .page-blocks .nx-link.is-first::after { top: 50%; } .page-blocks .nx-link.is-last::after { bottom: 50%; } .page-blocks .nx-link.is-first.is-last::after { display: none; }
  .page-blocks .nx-n-t { white-space: nowrap; }

  .page-blocks .nx--n1 .nx-node { grid-row: 2 / span 1; } .page-blocks .nx--n2 .nx-node { grid-row: 2 / span 2; } .page-blocks .nx--n3 .nx-node { grid-row: 2 / span 3; } .page-blocks .nx--n4 .nx-node { grid-row: 2 / span 4; }
}
@media (max-width: 47.99rem) {
  .page-blocks .nx { grid-template-columns: minmax(0, 1fr); min-height: 0; padding: 1.25rem 1.125rem; row-gap: .5rem; }
  .page-blocks .nx > * { grid-column: 1; grid-row: auto; }
  .page-blocks .nx-h { margin: .5rem 0 0; }
  .page-blocks .nx-h.nx-c1 { margin-top: 0; order: 10; }
  .page-blocks .nx-node.nx-c1 { order: 11; }
  .page-blocks .nx-link.nx-c2 { order: 15; }
  .page-blocks .nx-h.nx-c3 { order: 20; }
  .page-blocks .nx-gate { order: 21; }
  .page-blocks .nx-link.nx-c4 { order: 25; }
  .page-blocks .nx-h.nx-c5 { order: 30; }
  .page-blocks .nx-node.nx-c5 { order: 31; }
  .page-blocks .nx-cap { order: 40; }
  .page-blocks .nx-node { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; }
  .page-blocks .nx-node::after { display: none; }
  .page-blocks .nx-link { margin: 0; min-height: 1.75rem; }
  .page-blocks .nx-link:not(.is-first) { display: none; }
  .page-blocks .nx-link::before { inset: 0 auto .625rem calc(50% - 1px); width: 2px; height: auto; }
  .page-blocks .nx-link::after, .page-blocks .nx-link.is-first::after { display: block; top: auto; bottom: .125rem; left: calc(50% - .4375rem); width: .875rem; height: .875rem; background: none; border-right: 2px solid var(--accent-dark); border-bottom: 2px solid var(--accent-dark); transform: translateY(-.25rem) rotate(45deg) scale(.8); }
}
/* 互動：JS 點亮一列（.is-live＋.is-on）。只動 opacity／顏色，不改尺寸，狀態切換不位移版面。沒有 JS 時所有列同等顯示。 */
html.js .page-blocks .nx-gate { cursor: pointer; }
html.js .page-blocks .nx-gate:hover { border-color: var(--accent-dark); }
html.js .page-blocks .nx-gate:focus-visible { outline: 3px solid var(--accent-dark); outline-offset: 3px; }
html.js .page-blocks .nx-gate[aria-pressed="true"] { border-color: var(--accent-dark); box-shadow: inset 0 0 0 2px var(--accent); background: color-mix(in srgb, var(--accent) 34%, var(--deeper)); }
html.js .page-blocks .nx.is-live :is(.nx-gate, .nx-link) { transition: opacity .35s var(--ease); }
html.js .page-blocks .nx.is-live .nx-gate:not(.is-on) { opacity: .55; }
html.js .page-blocks .nx.is-live .nx-link:not(.is-on) { opacity: .25; }
html.js .page-blocks .nx.is-live .nx-link.is-on::before { background-color: var(--accent); box-shadow: 0 0 .625rem var(--accent-dark); }
html.js .page-blocks .nx.is-solo .nx-pkt:not(.is-on) { visibility: hidden; }
@media (max-width: 47.99rem) {
  html.js .page-blocks .nx.is-live .nx-link:not(.is-on) { opacity: 1; }
}
@media (prefers-reduced-motion: no-preference) {
  @media (min-width: 48rem) {
    html:not([data-motion="off"]) .page-blocks .nx.is-run .nx-pkt { display: block; position: relative; grid-column: 2 / 5; margin-inline: 1.5rem; z-index: 0; align-self: center; height: .5625rem; pointer-events: none; opacity: 0; animation: nx-travel 2.4s ease-in-out .2s both; }
    html:not([data-motion="off"]) .page-blocks .nx.is-run .nx-pkt::before { content: ""; position: absolute; left: 0; top: 0; width: .5625rem; height: .5625rem; border-radius: 50%; background: var(--accent-dark); box-shadow: 0 0 .75rem var(--accent-dark); }
    html:not([data-motion="off"]) .page-blocks .nx.is-run .nx-pkt.nx-r2 { animation-delay: .4s; }
    html:not([data-motion="off"]) .page-blocks .nx.is-run .nx-pkt.nx-r3 { animation-delay: .6s; }
    html:not([data-motion="off"]) .page-blocks .nx.is-run .nx-pkt.nx-r4 { animation-delay: .8s; }
    html:not([data-motion="off"]) .page-blocks .nx.is-solo.is-run .nx-pkt.is-on { animation-delay: 0s; }
  }
  html:not([data-motion="off"]) .page-blocks .nx.is-run .nx-gate .nx-sheen::after { content: ""; position: absolute; inset-block: 0; left: -40%; width: 38%; background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--accent-dark) 34%, transparent), transparent); animation: nx-glide 1.1s ease-in-out .9s both; }
  html:not([data-motion="off"]) .page-blocks .nx.is-run .nx-gate.nx-r2 .nx-sheen::after { animation-delay: 1.1s; }
  html:not([data-motion="off"]) .page-blocks .nx.is-run .nx-gate.nx-r3 .nx-sheen::after { animation-delay: 1.3s; }
  html:not([data-motion="off"]) .page-blocks .nx.is-run .nx-gate.nx-r4 .nx-sheen::after { animation-delay: 1.5s; }
  html:not([data-motion="off"]) .page-blocks .nx.is-solo.is-run .nx-gate.is-on .nx-sheen::after { animation-delay: .7s; }
  /* 分三段：走完左連線（約 11%）、在檢查點後面停留（檢查點此時閃光）、再走右連線；中段被不透明的檢查點蓋住。 */
  @keyframes nx-travel { 0% { translate: 0 0; opacity: 0; } 6% { opacity: 1; } 32% { translate: 11% 0; opacity: 1; } 66% { translate: 89% 0; opacity: 1; } 94% { opacity: 1; } 100% { translate: 100% 0; opacity: 0; } }
  @keyframes nx-glide { 0% { translate: 0 0; } 100% { translate: 395% 0; } }
}

/* 頁首右欄（左文右場景）寬度不足 39rem 時五欄放不下，沿用手機的上下堆疊畫法。issue 338：改依場景自己的寬度（容器查詢）判斷，
   原本寫死視窗 62–74.99rem，視窗 1,200px 起改五欄時右欄只有約 503px，「對象」欄被擠出框。
   issue 338（重開）：五欄左右欄改 max-content（依字寬），中欄吃剩下的寬；1,260～1,590px 原本固定比例下側欄字超出框 2–25px。 */
.page-blocks.hero-aside .pp-scene--netskope-sse { container-type: inline-size; }
@container (max-width: 39rem) {
  .page-blocks.hero-aside .nx { min-height: 0; grid-template-columns: minmax(0, 1fr); padding: 1.25rem 1.125rem; row-gap: .5rem; }
  .page-blocks.hero-aside .nx > * { grid-column: 1; grid-row: auto; }
  .page-blocks.hero-aside .nx-h { margin: .5rem 0 0; }
  .page-blocks.hero-aside .nx-h.nx-c1 { margin-top: 0; order: 10; }
  .page-blocks.hero-aside .nx-node.nx-c1 { order: 11; }
  .page-blocks.hero-aside .nx-link.nx-c2 { order: 15; }
  .page-blocks.hero-aside .nx-h.nx-c3 { order: 20; }
  .page-blocks.hero-aside .nx-gate { order: 21; }
  .page-blocks.hero-aside .nx-link.nx-c4 { order: 25; }
  .page-blocks.hero-aside .nx-h.nx-c5 { order: 30; }
  .page-blocks.hero-aside .nx-node.nx-c5 { order: 31; }
  .page-blocks.hero-aside .nx-cap { order: 40; }
  .page-blocks.hero-aside .nx-link { margin: 0; min-height: 1.75rem; }
  .page-blocks.hero-aside .nx-link:not(.is-first) { display: none; }
  .page-blocks.hero-aside .nx-link::before { inset: 0 auto .625rem calc(50% - 1px); width: 2px; height: auto; }
  .page-blocks.hero-aside .nx-link::after, .page-blocks.hero-aside .nx-link.is-first::after, .page-blocks.hero-aside .nx-link.is-first.is-last::after { display: block; top: auto; bottom: .125rem; left: calc(50% - .4375rem); width: .875rem; height: .875rem; background: none; border-right: 2px solid var(--accent-dark); border-bottom: 2px solid var(--accent-dark); transform: translateY(-.25rem) rotate(45deg) scale(.8); }
  .page-blocks.hero-aside .nx-node { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; }
  .page-blocks.hero-aside .nx-node::after { display: none; }
  .page-blocks.hero-aside .nx-n-t { white-space: normal; }
  html:not([data-motion="off"]) .page-blocks.hero-aside .nx.is-run .nx-pkt { display: none; }
}