/* issue 193／237 場景 netskope-sase：SASE 政策切換。玻璃面板（--deeper 底、品牌色細框、模糊與內側高光），大小比照頁首插畫框（最小高 25.5rem）。深色舞台用 --deeper，只讀官網 token 與 --accent*；
   沒有 JS 時兩種模式的文字都顯示（各自前綴模式名稱），JS 以 data-mode 切換。「各寫一套」模式不用強調色，改用灰線與虛線表示分裂。 */
.page-blocks .ns { position: relative; container-type: inline-size; display: grid; grid-template-columns: minmax(8.25rem, 1fr) 2.25rem minmax(5.75rem, .7fr) 2.25rem minmax(0, 1.5fr); align-items: center; gap: .5rem; --ns-c: var(--accent-dark); --ns-on: .625rem; --ns-per: .625rem; overflow: clip; min-height: max(var(--ns-min, 0px), 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; 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 .ns { backdrop-filter: blur(14px) saturate(1.3); } }
.page-blocks .ns .nk-ico { flex: none; width: 1.375rem; height: 1.375rem; color: var(--accent-dark); }
.page-blocks .ns::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 .ns-tog { display: none; grid-column: 1 / -1; width: fit-content; gap: .375rem; padding: .25rem; margin-bottom: .5rem; border: 1px solid var(--on-dark-line); border-radius: var(--r-pill); }
html.js .page-blocks .ns-tog { display: flex; flex-wrap: wrap; }
/* 圖高固定為兩種模式較高者（JS 設 --ns-min）；多出的空間給中間那一列，切換時不位移。 */
html.js .page-blocks .ns { grid-template-rows: auto minmax(0, 1fr) auto; }
.page-blocks .ns-tog button { all: unset; box-sizing: border-box; min-height: 2.75rem; padding: 0 1.125rem; display: inline-flex; align-items: center; border-radius: var(--r-pill); color: var(--paper); font-size: .9375rem; font-weight: 700; cursor: pointer; transition: background .25s var(--ease), color .25s var(--ease); }
.page-blocks .ns-tog button[aria-pressed="true"] { background: var(--accent); color: var(--accent-on); }
.page-blocks .ns-tog button:focus-visible { outline: 3px solid var(--accent-dark); outline-offset: 3px; }
.page-blocks .ns-col { display: grid; gap: .75rem; align-content: center; padding-block: 1.5rem; }
.page-blocks .ns-h { position: absolute; inset-inline: 0; bottom: calc(100% + .5rem); margin: 0; color: var(--muted-on-dark); font-size: .75rem; font-weight: 700; letter-spacing: .14em; }
.page-blocks .ns-n { position: relative; display: flex; align-items: center; gap: .625rem; padding: .75rem .75rem; border: 1px solid var(--on-dark-line); border-radius: var(--radius-m); background: color-mix(in srgb, var(--paper) 6%, var(--deeper)); color: var(--paper); font-size: .875rem; font-weight: 700; line-height: 1.4; }
.page-blocks .ns-hub { position: relative; display: grid; place-items: center; padding: 1.375rem .5rem; border: 1px solid var(--accent-dark); border-radius: var(--r-card); background: radial-gradient(circle at 50% 40%, color-mix(in srgb, var(--accent) 40%, transparent), color-mix(in srgb, var(--paper) 6%, var(--deeper)) 80%); text-align: center; font-size: 1.0625rem; font-weight: 800; word-break: keep-all; }
.page-blocks .ns-hub::before { content: ""; position: absolute; inset: -.5rem; border: 1px dashed var(--accent-dark); border-radius: calc(var(--r-card) + .25rem); opacity: .55; pointer-events: none; }
.page-blocks .ns-hub-in { display: grid; gap: .75rem; }
.page-blocks .ns-hub-in > span { white-space: nowrap; }
.page-blocks .ns-hub-in small { white-space: normal; }
.page-blocks .ns-hub-ic { display: grid; place-items: center; margin-bottom: .25rem; }
.page-blocks .ns-hub-ic .nk-ico { width: 1.75rem; height: 1.75rem; }
.page-blocks .ns-n-ic, .page-blocks .ns-gate-ic { display: grid; place-items: center; }
@media (min-width: 48rem) { .page-blocks .ns-n-t { white-space: nowrap; } }
.page-blocks .ns-n-ic:not(:has(svg)), .page-blocks .ns-gate-ic:not(:has(svg)) { display: none; }
.page-blocks .ns-gate-ic { width: 2rem; height: 2rem; border-radius: .5rem; background: color-mix(in srgb, var(--accent) 22%, transparent); }
.page-blocks .ns-gate-b { display: grid; gap: .125rem; min-width: 0; }
.page-blocks .ns-hub small { display: block; margin-top: .25rem; color: var(--accent-dark); font-size: .75rem; font-weight: 600; letter-spacing: .06em; }
.page-blocks .ns .ns-lbl { margin: 0 0 .25rem; color: var(--muted-on-dark); font-size: .6875rem; font-weight: 700; letter-spacing: .1em; }
html.js .page-blocks .ns .ns-lbl { display: none; }
.page-blocks .ns-stack { position: relative; display: grid; gap: .375rem; }
.page-blocks .ns-stack--in { gap: .75rem; }
.page-blocks .ns-gate { position: relative; display: flex; align-items: center; gap: .75rem; padding: .5rem .75rem; border: 1px solid var(--accent-dark); border-radius: var(--radius-m); background: color-mix(in srgb, var(--accent) 18%, var(--deeper)); font-size: .9375rem; font-weight: 800; }
.page-blocks .ns-gate-d { display: block; text-wrap: balance; color: var(--muted-on-dark); font-size: .8125rem; font-weight: 500; line-height: 1.45; }
.page-blocks .ns-cap { grid-column: 1 / -1; margin: .5rem 0 0; color: var(--muted-on-dark); font-size: .75rem; letter-spacing: .08em; }

/* 模式切換：有 JS 才分模式，否則兩種都列出 */
html.js .page-blocks .ns[data-mode="one"] .m-split, html.js .page-blocks .ns[data-mode="split"] .m-one { display: none; }
.page-blocks .ns :is(.ns-gate-b, .ns-hub-in) > :is(.m-one, .m-split) { display: block; }
.page-blocks .ns[data-mode="split"] .ns-hub { border: 2px dashed var(--accent-dark); background: color-mix(in srgb, var(--paper) 6%, var(--deeper)); }
.page-blocks .ns[data-mode="split"] .ns-hub::before { border-color: var(--accent-dark); }
.page-blocks .ns[data-mode="split"] .ns-hub small { color: var(--muted-on-dark); }
.page-blocks .ns[data-mode="split"] .ns-gate { border: 2px dashed var(--accent-dark); background: color-mix(in srgb, var(--paper) 5%, var(--deeper)); }
.page-blocks .ns[data-mode="split"] .ns-gate-t::before, .page-blocks .ns[data-mode="split"] .ns-hub-in .m-split::before { content: "✕ " / ""; color: var(--accent-dark); font-weight: 900; }


/* 連線：節點右側的短線＋垂直匯流排＋連到中樞的線；中樞到右欄檢查點同理。線色與虛實由 --ns-c／--ns-on／--ns-per 控制（各寫一套＝品牌色虛線加 ✕）。 */
.page-blocks .ns-link { position: relative; align-self: stretch; margin-inline: -.5rem; min-height: 2.5rem; }
.page-blocks .ns-link::before { content: ""; position: absolute; top: calc(50% - 1px); height: 2px; background: repeating-linear-gradient(90deg, var(--ns-c) 0 var(--ns-on), transparent var(--ns-on) var(--ns-per)); }
.page-blocks .ns-link:first-of-type::before { left: 50%; right: 0; }
.page-blocks .ns-link:last-of-type::before { left: 0; right: 50%; }
.page-blocks .ns-flow { position: absolute; top: calc(50% - .28125rem); height: .5625rem; opacity: 0; pointer-events: none; z-index: 2; }
.page-blocks .ns-flow::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); }
.page-blocks .ns-link:first-of-type .ns-flow { left: 50%; right: 0; }
.page-blocks .ns-link:last-of-type .ns-flow { left: 0; right: 50%; }
.page-blocks .ns-col--in .ns-n::after, .page-blocks .ns-col--out .ns-gate::after { content: ""; position: absolute; top: calc(50% - 1px); width: 2rem; height: 2px; background: repeating-linear-gradient(90deg, var(--ns-c) 0 var(--ns-on), transparent var(--ns-on) var(--ns-per)); }
.page-blocks .ns-col--in .ns-n::after { left: 100%; }
.page-blocks .ns-col--out .ns-gate::after { right: 100%; }
.page-blocks .ns-col--in .ns-n::before, .page-blocks .ns-col--out .ns-gate::before { content: ""; position: absolute; top: -.75rem; bottom: -1px; width: 2px; background: repeating-linear-gradient(180deg, var(--ns-c) 0 var(--ns-on), transparent var(--ns-on) var(--ns-per)); }
.page-blocks .ns-col--out .ns-gate::before { top: -.5rem; }
.page-blocks .ns-col--in .ns-n::before { left: calc(100% + 2rem - 2px); }
.page-blocks .ns-col--out .ns-gate::before { right: calc(100% + 2rem - 2px); }
.page-blocks .ns-col--in .ns-n.is-first::before, .page-blocks .ns-col--out .ns-gate.is-first::before { top: 50%; }
.page-blocks .ns-col--in .ns-n.is-last::before, .page-blocks .ns-col--out .ns-gate.is-last::before { bottom: 50%; }
.page-blocks .ns-sheen { position: absolute; inset: 0; border-radius: inherit; overflow: hidden; pointer-events: none; }
.page-blocks .ns-pkt { position: absolute; top: calc(50% - .28125rem); z-index: 2; width: .5625rem; height: .5625rem; border-radius: 50%; background: var(--accent-dark); box-shadow: 0 0 .75rem var(--accent-dark); pointer-events: none; opacity: 0; }
.page-blocks .ns-col--in .ns-pkt { left: 100%; }
.page-blocks .ns-col--out .ns-pkt { right: calc(100% + 2rem); }

/* 各寫一套：品牌色虛線加 ✕，最後一個「僅同一套」檢查點隱藏後，匯流排改收在最後一個仍顯示的檢查點 */
.page-blocks .ns[data-mode="split"] { --ns-c: var(--accent-dark); --ns-on: .375rem; }
.page-blocks .ns[data-mode="split"] .ns-gate.is-last::before { bottom: -1px; }
.page-blocks .ns[data-mode="split"] .ns-gate.is-last-split::before { bottom: 50%; }
.page-blocks .ns[data-mode="split"] :is(.ns-pkt, .ns-flow) { display: none; }

@media (max-width: 47.99rem) {
  .page-blocks .ns { grid-template-columns: minmax(0, 1fr); padding: 1.25rem 1.125rem; gap: .25rem; }
  html.js .page-blocks .ns { grid-template-rows: auto auto auto auto auto minmax(0, 1fr) auto; align-content: start; }
  html.js .page-blocks .ns-col--out { align-content: start; align-self: start; }
  /* 手機：切換鈕固定在區塊頂端（sticky），堆疊的群組捲動時仍看得到目前模式。.ns 用 overflow: clip，不形成捲動容器，sticky 才會對視窗生效。 */
  html.js .page-blocks .ns-tog { position: sticky; top: 4rem; z-index: 5; background: var(--deeper); }
  /* 固定時四周補一圈區塊同色的底，捲過的群組不會從膠囊邊緣露出、看起來壓在內容上。 */
  html.js .page-blocks .ns-tog { box-shadow: 0 0 0 .75rem var(--deeper); }
  .page-blocks .ns-col { padding-block: 0; }
  .page-blocks .ns-h { position: static; margin-bottom: .5rem; }
  .page-blocks .ns-col--in .ns-n::before, .page-blocks .ns-col--in .ns-n::after, .page-blocks .ns-col--out .ns-gate::before, .page-blocks .ns-col--out .ns-gate::after, .page-blocks .ns-pkt, .page-blocks .ns-flow { display: none; }
  /* 上下堆疊時改畫向下的連線與箭頭 */
  .page-blocks .ns-link, .page-blocks .ns-link:first-of-type, .page-blocks .ns-link:last-of-type { margin: 0; min-height: 2.75rem; }
  .page-blocks .ns-link::before, .page-blocks .ns-link:first-of-type::before, .page-blocks .ns-link:last-of-type::before { inset: 0 auto .625rem calc(50% - 1px); width: 2px; height: auto; background: repeating-linear-gradient(180deg, var(--ns-c) 0 var(--ns-on), transparent var(--ns-on) var(--ns-per)); }
  .page-blocks .ns-link::after { content: ""; position: absolute; bottom: .125rem; left: calc(50% - .4375rem); width: .875rem; height: .875rem; border-right: 2px solid var(--ns-c); border-bottom: 2px solid var(--ns-c); transform: translateY(-.25rem) rotate(45deg) scale(.8); }
  .page-blocks .ns-hub { margin-block: .25rem; }
  /* issue 288：手機單欄高度跟著內容走，不再沿用兩種模式較高者（切到「各寫一套」不留空白）。 */
  html.js .page-blocks .ns { min-height: 0; }
}
/* issue 288：窄手機兩顆切換鈕維持左右一排，縮小字級與內距。 */
@media (max-width: 26rem) {
  html.js .page-blocks .ns-tog { flex-wrap: nowrap; width: 100%; gap: .25rem; }
  html.js .page-blocks .ns-tog button { flex: 1 1 0; min-width: 0; justify-content: center; padding: 0 .5rem; font-size: .8125rem; text-align: center; }
}
/* 進入畫面時 JS 加 is-run：光點由左欄節點出發，經連線、中樞、連線到右欄檢查點，播放一輪（接入 → 中樞 → 檢查點），檢查點到達時閃一道光，之後停在完成狀態。
   沒有 JS 或不允許動態時不播放，畫面就是完成狀態。只用 translate／opacity，不改版面。 */
@media (prefers-reduced-motion: no-preference) {
  html:not([data-motion="off"]) .page-blocks .ns.is-run .ns-pkt { animation: ns-travel .9s linear both; }
  html:not([data-motion="off"]) .page-blocks .ns.is-run .ns-n:nth-of-type(1) .ns-pkt { animation-delay: .15s; }
  html:not([data-motion="off"]) .page-blocks .ns.is-run .ns-n:nth-of-type(2) .ns-pkt { animation-delay: .3s; }
  html:not([data-motion="off"]) .page-blocks .ns.is-run .ns-n:nth-of-type(3) .ns-pkt { animation-delay: .45s; }
  html:not([data-motion="off"]) .page-blocks .ns.is-run .ns-link:first-of-type .ns-flow { animation: ns-flow .8s linear 1s both; }
  html:not([data-motion="off"]) .page-blocks .ns.is-run .ns-link:last-of-type .ns-flow { animation: ns-flow .8s linear 1.9s both; }
  html:not([data-motion="off"]) .page-blocks .ns.is-run .ns-col--out .ns-pkt { animation-delay: 2.7s; }
  html:not([data-motion="off"]) .page-blocks .ns.is-run .ns-col--out .ns-gate:nth-of-type(2) .ns-pkt { animation-delay: 2.85s; }
  html:not([data-motion="off"]) .page-blocks .ns.is-run .ns-col--out .ns-gate:nth-of-type(3) .ns-pkt { animation-delay: 3s; }
  html:not([data-motion="off"]) .page-blocks .ns.is-run .ns-col--out .ns-gate:nth-of-type(4) .ns-pkt { animation-delay: 3.15s; }
  html:not([data-motion="off"]) .page-blocks .ns.is-run .ns-col--out .ns-gate:nth-of-type(5) .ns-pkt { animation-delay: 3.3s; }
  html:not([data-motion="off"]) .page-blocks .ns.is-run .ns-col--out .ns-gate:nth-of-type(6) .ns-pkt { animation-delay: 3.45s; }
  html:not([data-motion="off"]) .page-blocks .ns.is-run .ns-gate .ns-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: ns-glide 1.2s ease-in-out 3.4s both; }
  html:not([data-motion="off"]) .page-blocks .ns[data-mode="split"] .ns-sheen::after { animation: none; display: none; }
  @keyframes ns-travel { 0% { translate: 0 0; opacity: 0; } 15%, 80% { opacity: .95; } 100% { translate: 2rem 0; opacity: 0; } }
  @keyframes ns-flow { 0% { translate: 0 0; opacity: 0; } 15%, 80% { opacity: .95; } 100% { translate: 100% 0; opacity: 0; } }
  @keyframes ns-glide { 0% { translate: 0 0; } 100% { translate: 395% 0; } }
}

/* 頁首右欄在 62–75rem 只有約 28rem 寬（左文右場景），五欄放不下，沿用手機的上下堆疊畫法。 */
@media (min-width: 62rem) and (max-width: 79.99rem) {
  .page-blocks.hero-aside .ns { grid-template-columns: minmax(0, 1fr); padding: 1.25rem 1.125rem; gap: .25rem; }
  html.js .page-blocks.hero-aside .ns { grid-template-rows: auto auto auto auto auto minmax(0, 1fr) auto; align-content: start; }
  html.js .page-blocks.hero-aside .ns-col--out { align-content: start; }
  .page-blocks.hero-aside .ns-col { padding-block: 0; }
  .page-blocks.hero-aside .ns-h { position: static; margin-bottom: .5rem; }
  .page-blocks.hero-aside .ns-col--in .ns-n::before, .page-blocks.hero-aside .ns-col--in .ns-n::after, .page-blocks.hero-aside .ns-col--out .ns-gate::before, .page-blocks.hero-aside .ns-col--out .ns-gate::after, .page-blocks.hero-aside .ns-pkt, .page-blocks.hero-aside .ns-flow { display: none; }
  .page-blocks.hero-aside .ns-link, .page-blocks.hero-aside .ns-link:first-of-type, .page-blocks.hero-aside .ns-link:last-of-type { margin: 0; min-height: 2.75rem; }
  .page-blocks.hero-aside .ns-link::before, .page-blocks.hero-aside .ns-link:first-of-type::before, .page-blocks.hero-aside .ns-link:last-of-type::before { inset: 0 auto .625rem calc(50% - 1px); width: 2px; height: auto; background: repeating-linear-gradient(180deg, var(--ns-c) 0 var(--ns-on), transparent var(--ns-on) var(--ns-per)); }
  .page-blocks.hero-aside .ns-link::after { content: ""; position: absolute; bottom: .125rem; left: calc(50% - .4375rem); width: .875rem; height: .875rem; border-right: 2px solid var(--ns-c); border-bottom: 2px solid var(--ns-c); transform: translateY(-.25rem) rotate(45deg) scale(.8); }
  .page-blocks.hero-aside .ns-hub { margin-block: .25rem; }
}

/* issue 371：切換鈕用 all: unset 會把 position 清掉，補回讓「可以點」泡泡跟著按鈕；.ns 以 overflow: clip 裁切，泡泡改放按鈕下方才不會被切掉。 */
.page-blocks .ns-tog button.cfh-host { position: relative; }
.page-blocks .ns-tog .cfh-tip { left: auto; right: 0; bottom: auto; top: calc(100% + .625rem); }
.page-blocks .ns-tog .cfh-tip::after { top: auto; bottom: 100%; left: auto; right: 1.25rem; border-width: 0 .4375rem .4375rem; border-top-color: transparent; border-bottom-color: var(--accent-dark); }