/* issue 193 場景 netskope-flowband：資料流經檢查點。同一條軌道畫兩次，左半（原始項目，虛線框）與右半（依處置變色）各用 clip-path 裁掉一半，
   中間一條發光的閘門。動畫只動 transform，僅在 prefers-reduced-motion: no-preference 且 html:not([data-motion="off"]) 時播放，否則靜止。
   三種處置不只靠顏色與形狀，明度也拉開：放行＝實心強調色（最亮）加 ✓、輔導＝強調色淡底加雙線框（中間）加 ◐、阻擋＝中性灰底加刪除線（最暗）加 ✕。 */
/* 整段是深色帶（對照示意站 .flowband），區段本身改深色底與前後區段銜接。issue 295：跑馬燈不再 100vw 滿版，收在與標題同寬的面板內，兩側在面板內淡出。 */
.page-blocks .pp-section--scene:has(.pp-scene--netskope-flowband) { padding-block: clamp(1.5rem, 3vw, 2.5rem); background: var(--deeper); color: var(--paper); overflow-x: clip; }
.page-blocks .nf { position: relative; padding: 2.125rem 0 1.25rem; border: 1px solid var(--on-dark-line); border-radius: var(--r-card); background: color-mix(in srgb, var(--paper) 4%, var(--deeper)); color: var(--paper); overflow: clip; isolation: isolate; }
.page-blocks .nf-in { position: relative; height: 4rem; }
.page-blocks .nf-half { position: absolute; inset: 0; mask-image: linear-gradient(90deg, transparent, black 4rem, black calc(100% - 4rem), transparent); }
.page-blocks .nf-half.l { clip-path: inset(0 50% 0 0); }
.page-blocks .nf-half.r { clip-path: inset(0 0 0 50%); }
.page-blocks .nf-trk { position: absolute; left: 0; top: 50%; display: flex; width: max-content; margin: -1.1875rem 0 0; padding: 0; list-style: none; }
.page-blocks .nf-trk li { flex: none; display: inline-flex; align-items: center; height: 2.375rem; margin-right: 1rem; padding: 0 1.25rem; border-radius: var(--r-pill); font-size: .9375rem; font-weight: 700; line-height: 1; white-space: nowrap; }
.page-blocks .nf-half.l li { border: 1px dashed var(--muted-on-dark); color: var(--muted-on-dark); }
/* issue 295：左右兩排要逐顆對齊，晶片在閘門處才會無縫換樣式——左排保留一個看不見的符號位，符號位固定寬度；輔導晶片的 4px 雙框用內距扣回。 */
.page-blocks .nf-trk li::before { display: inline-block; width: 1em; text-align: center; }
.page-blocks .nf-half.l li::before { content: "✓" / ""; margin-right: .5rem; visibility: hidden; }
.page-blocks .nf-half.r li { border: 1px solid var(--arch-green); background: var(--arch-green); color: var(--deeper); }
.page-blocks .nf-half.r li::before { content: "✓" / ""; margin-right: .5rem; font-weight: 900; }
.page-blocks .nf-half.r li:nth-child(4n+3) { padding-inline: calc(1.25rem - 3px); border: 4px double var(--arch-orange); background: color-mix(in srgb, var(--arch-orange) 22%, var(--deeper)); color: var(--paper); }
.page-blocks .nf-half.r li:nth-child(4n+3)::before { content: "◐" / ""; margin-right: .5rem; color: var(--arch-orange); }
.page-blocks .nf-half.r li:nth-child(8n+6) { border: 1px solid var(--arch-coral); background: color-mix(in srgb, var(--arch-coral) 16%, var(--deeper)); color: var(--arch-coral); text-decoration: line-through; text-decoration-thickness: 2px; }
.page-blocks .nf-half.r li:nth-child(8n+6)::before { content: "✕" / ""; margin-right: .5rem; text-decoration: none; }
.page-blocks .nf-gate { position: absolute; left: 50%; top: -2.125rem; bottom: -1.375rem; width: 3px; transform: translateX(-50%); background: linear-gradient(180deg, transparent, var(--accent-dark) 20%, var(--accent-dark) 80%, transparent); box-shadow: 0 0 1.5rem var(--accent); }
.page-blocks .nf-gate em { position: absolute; top: 1.5rem; left: .75rem; font-style: normal; font-size: .75rem; font-weight: 700; letter-spacing: .2em; white-space: nowrap; color: var(--accent-dark); }
.page-blocks .nf-legend { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem 1.375rem; margin: .875rem 0 0; padding: 0; list-style: none; color: var(--muted-on-dark); font-size: .8125rem; }
.page-blocks .nf-legend li { display: inline-flex; align-items: center; gap: .5rem; }
.page-blocks .nf-legend li::before { content: "✓" / ""; display: grid; place-items: center; width: 1.125rem; height: 1.125rem; border-radius: 50%; background: var(--arch-green); color: var(--deeper); font-size: .6875rem; font-weight: 900; line-height: 1; }
.page-blocks .nf-legend .co::before { content: "◐" / ""; border: 3px double var(--arch-orange); background: color-mix(in srgb, var(--arch-orange) 22%, var(--deeper)); color: var(--paper); font-size: .5rem; }
.page-blocks .nf-legend .no::before { content: "✕" / ""; border-radius: .25rem; background: color-mix(in srgb, var(--arch-coral) 16%, var(--deeper)); box-shadow: inset 0 0 0 1px var(--arch-coral); color: var(--arch-coral); font-size: .75rem; }
.page-blocks .nf-cap { margin: .625rem 0 0; text-align: center; color: var(--muted-on-dark); font-size: .75rem; letter-spacing: .08em; }
@media (prefers-reduced-motion: no-preference) {
  html:not([data-motion="off"]) .page-blocks .nf-trk { animation: nf-marq 60s linear infinite; }
  @keyframes nf-marq { to { transform: translateX(-33.3333%); } }
}
.page-blocks .nf-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }