/* issue 193（規格 docs/superpowers/specs/2026-10-03-partner-pages-interactions-design.md §3）：頁面區塊的互動。
   只在頁面有互動區塊時載入（InnerStylesheets.Interactions），排在 catalog-blocks.css 之後。
   只讀官網 token 與 --accent*。版面一律掛在 html.js（site.js 在第一次繪製前設定）上，JS 只切換狀態，所以不會載入後跳版（CLS 0）；
   沒有 JS（沒有 html.js）時一律是完整的靜態版面。 */

/* ---------- 捲動敘事 ---------- */
.page-blocks .pp-story { display: grid; gap: clamp(2rem, 5vw, 5rem); }
@media (min-width: 62rem) {
  .page-blocks .pp-story { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: start; }
  /* issue 213：整欄固定時左欄高約 800px，筆電高度放不下、只看到大數字；改成只固定「目前步驟」面板，標題導言隨頁捲動。flow 版型沒有面板，維持整欄固定。 */
  .page-blocks .pp-story--flow .pp-story-aside { position: sticky; top: 10rem; }
  .page-blocks .pp-story:not(.pp-story--flow) .pp-story-aside { align-self: stretch; }
  .page-blocks .pp-story:not(.pp-story--flow) .pp-story-panel { position: sticky; top: 10rem; }
  .page-blocks .pp-story-panel .pp-story-stage { max-height: 40svh; }
  html.js .page-blocks .pp-story-step { min-height: 42vh; display: flex; align-items: center; }
  html.js .page-blocks .pp-story-panel { display: block; }
  html.js .page-blocks .pp-story--media .pp-story-img, html.js .page-blocks .pp-story--detail .pp-story-fields { display: none; }
}
.page-blocks .pp-story-aside .pp-head { margin-bottom: clamp(1.5rem, 3vw, 2.5rem); }
.page-blocks .pp-story-panel { display: none; }
/* 窄螢幕的讀數面板（範例站做法）：不顯示大讀數，只留導言下方的進度格；步驟卡的編號改成描邊大數字，目前步驟填色發光。 */
@media (max-width: 61.99rem) {
  html.js .page-blocks .pp-story--readout .pp-story-panel { display: block; }
  html.js .page-blocks .pp-story--readout .pp-story-panel > :not(.pp-story-ticks) { display: none; }
  html.js .page-blocks .pp-story--readout .pp-story-ticks { margin-top: 0; }
  .page-blocks .pp-story--readout .pp-story-num { margin-bottom: .25rem; color: color-mix(in srgb, var(--accent-ink) 55%, transparent); font-size: clamp(3rem, 15vw, 4.5rem); font-weight: 900; line-height: 1; transition: color var(--dur-base) var(--ease), text-shadow var(--dur-base) var(--ease); }
  .page-blocks .pp-story--readout .pp-story-step.is-on .pp-story-num { color: var(--accent-ink); text-shadow: 0 0 1.5rem color-mix(in srgb, var(--accent) 45%, transparent); }
  .page-blocks :is(.pp-section--band, .pp-section--image) .pp-story--readout .pp-story-num { color: color-mix(in srgb, var(--accent-dark) 55%, transparent); }
  .page-blocks :is(.pp-section--band, .pp-section--image) .pp-story--readout .pp-story-step.is-on .pp-story-num { color: var(--accent-dark); }
}
.page-blocks .pp-story-readout { display: flex; align-items: baseline; gap: 1rem; margin: 0; }
.page-blocks .pp-story-big { color: var(--accent-ink); font-size: clamp(4rem, 7vw, 6.5rem); font-weight: 900; line-height: .9; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.page-blocks .pp-story-ptag { color: var(--muted); font-size: .9375rem; font-weight: 700; letter-spacing: .06em; }
.page-blocks .pp-story-ptitle { margin: 1.25rem 0 .5rem; color: var(--ink); font-size: var(--fs-m); font-weight: 800; line-height: 1.3; }
.page-blocks .pp-story-pbody { min-height: 5.4em; margin: 0; max-width: 26rem; color: var(--muted); line-height: 1.8; }
.page-blocks .pp-story-pfields { display: flex; flex-wrap: wrap; gap: .5rem; min-height: 6rem; margin: 0; padding: 0; list-style: none; align-content: start; }
.page-blocks .pp-story-pfields li { padding: .375rem .75rem; border: 1px solid var(--line); border-radius: var(--r-pill); background: var(--paper); font-size: .875rem; }
.page-blocks .pp-story-ticks { display: flex; gap: .375rem; margin-top: 1.5rem; }
.page-blocks .pp-story-ticks i { flex: 1; height: 3px; border-radius: 2px; background: var(--line); transition: background var(--dur-base) var(--ease); }
.page-blocks .pp-story-ticks i.is-on { background: var(--accent); }
.page-blocks .pp-story-stage { position: relative; aspect-ratio: 4 / 3; margin-bottom: 1.5rem; overflow: clip; border-radius: var(--radius-xl); background: var(--deeper); }
.page-blocks .pp-story-frame { position: absolute; inset: 0; opacity: 0; transition: opacity var(--dur-slow) var(--ease); }
.page-blocks .pp-story-frame.is-on { opacity: 1; }
.page-blocks .pp-story-frame img { width: 100%; height: 100%; object-fit: cover; }

.page-blocks .pp-story-steps { position: relative; display: grid; gap: 1rem; margin: 0; padding: 0 0 0 3.25rem; list-style: none; }
.page-blocks .pp-story-steps::before, .page-blocks .pp-story-steps::after { content: ""; position: absolute; left: 1rem; top: 0; bottom: 0; width: 2px; border-radius: 2px; }
.page-blocks .pp-story-steps::before { background: var(--line); }
.page-blocks .pp-story-steps::after { background: var(--accent); transform-origin: 50% 0; transform: scaleY(var(--prog, 1)); }
.page-blocks .pp-story-step { position: relative; }
.page-blocks .pp-story-step::before { content: ""; position: absolute; left: -2.75rem; top: 1.75rem; width: 1.125rem; height: 1.125rem; border: 2px solid var(--accent-ink); border-radius: 50%; background: var(--paper); transition: background var(--dur-base) var(--ease), box-shadow var(--dur-base) var(--ease); }
@media (min-width: 62rem) { html.js .page-blocks .pp-story-step::before { top: 50%; margin-top: -.5625rem; } }
.page-blocks .pp-story-step.is-on::before { background: var(--accent); box-shadow: 0 0 0 6px color-mix(in srgb, var(--accent) 22%, transparent); }
.page-blocks .pp-story-card { width: 100%; padding: clamp(1.25rem, 2.4vw, 1.75rem); border: 1px solid var(--line); border-radius: var(--r-card); background: var(--paper); transition: border-color var(--dur-base) var(--ease), transform var(--dur-base) var(--ease), box-shadow var(--dur-base) var(--ease); }
.page-blocks .pp-story.is-live .pp-story-step { cursor: pointer; }
.page-blocks .pp-story-step.is-on .pp-story-card { border-color: var(--accent-ink); box-shadow: var(--elevation-card); transform: translateX(.375rem); }
.page-blocks .pp-story-num { display: block; margin-bottom: .5rem; color: var(--accent-ink); font-size: .875rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.page-blocks .pp-story-tag { margin: 0 0 .25rem; color: var(--muted); font-size: .8125rem; font-weight: 700; letter-spacing: .06em; }
.page-blocks .pp-story-title { margin: 0; font-size: 1.25rem; font-weight: 800; line-height: 1.35; }
.page-blocks .pp-story-body { margin: .5rem 0 0; color: var(--muted); line-height: 1.8; }
.page-blocks .pp-story-fields { display: flex; flex-wrap: wrap; gap: .375rem; margin: .875rem 0 0; padding: 0; list-style: none; }
.page-blocks .pp-story-fields li { padding: .25rem .625rem; border-radius: var(--r-pill); background: var(--surface-sunken); font-size: .8125rem; }
.page-blocks .pp-story-img { margin-top: 1rem; overflow: clip; border-radius: var(--radius-l); }
.page-blocks .pp-story-img img { display: block; width: 100%; height: auto; }
/* 深色帶裡：卡片改成半透明深色卡。 */
.page-blocks :is(.pp-section--band, .pp-section--image) .pp-story-card { border-color: var(--on-dark-line); background: color-mix(in srgb, var(--paper) 5%, var(--deeper)); }
.page-blocks :is(.pp-section--band, .pp-section--image) :is(.pp-story-title, .pp-story-ptitle) { color: var(--paper); }
.page-blocks :is(.pp-section--band, .pp-section--image) :is(.pp-story-body, .pp-story-pbody, .pp-story-tag, .pp-story-ptag) { color: var(--muted-on-dark); }
.page-blocks :is(.pp-section--band, .pp-section--image) :is(.pp-story-num, .pp-story-big) { color: var(--accent-dark); }
.page-blocks :is(.pp-section--band, .pp-section--image) .pp-story-step::before { border-color: var(--accent-dark); background: var(--deeper); }
.page-blocks :is(.pp-section--band, .pp-section--image) .pp-story-steps::before, .page-blocks :is(.pp-section--band, .pp-section--image) .pp-story-ticks i:not(.is-on) { background: var(--on-dark-line); }
.page-blocks :is(.pp-section--band, .pp-section--image) .pp-story-step.is-on .pp-story-card { border-color: var(--accent-dark); }
.page-blocks :is(.pp-section--band, .pp-section--image) .pp-story-fields li { background: color-mix(in srgb, var(--paper) 10%, var(--deeper)); color: var(--paper); }
/* v86：讀數版型照範例站 Trellix「同一條鏈，五個控制點」。
   面板：上方一條分隔線，鏤空巨大編號＋（面板小字／放大的目前小標），標題用品牌輔色（Trellix 金），內文在下。
   步驟卡：大鏤空編號、輔色小標、大標題；目前這張卡片框線轉強調色、右上角浮出光暈。淺底沒有輔色時用可讀的深強調色。 */
.page-blocks .pp-story--readout .pp-story-readout { align-items: flex-end; gap: 1.375rem; padding-top: 1.75rem; border-top: 1px solid var(--line); }
.page-blocks .pp-story--readout .pp-story-big { color: var(--accent-ink); font-size: clamp(6rem, 11vw, 10.5rem); font-weight: 800; }
.page-blocks .pp-story--readout .pp-story-ptag { display: grid; gap: .25rem; padding-bottom: .875rem; color: var(--muted); font-size: .8125rem; letter-spacing: .14em; }
.page-blocks .pp-story--readout .pp-story-ptag strong { color: var(--ink); font-size: 1.5rem; font-weight: 700; letter-spacing: 0; }
.page-blocks .pp-story--readout .pp-story-ptitle { margin-top: 1.25rem; color: var(--accent-ink); font-size: 1.375rem; }
.page-blocks .pp-story--readout .pp-story-card { position: relative; overflow: hidden; padding: clamp(1.75rem, 3.4vw, 3rem); border-radius: 1.625rem; }
.page-blocks .pp-story--readout .pp-story-card::after { content: ""; position: absolute; right: -3.75rem; top: -3.75rem; width: 13.75rem; height: 13.75rem; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--accent) 22%, transparent), transparent 68%); opacity: 0; transition: opacity var(--dur-slow) var(--ease); pointer-events: none; }
.page-blocks .pp-story--readout .pp-story-step.is-on .pp-story-card::after { opacity: 1; }
.page-blocks .pp-story--readout .pp-story-tag { margin-bottom: .625rem; color: var(--accent-ink); font-size: .8125rem; letter-spacing: .14em; }
.page-blocks .pp-story--readout .pp-story-title { margin-bottom: .875rem; font-size: clamp(1.5rem, 2.6vw, 2.25rem); line-height: 1.2; }
.page-blocks .pp-story--readout .pp-story-body { max-width: 28em; font-size: 1.0625rem; }
.page-blocks :is(.pp-section--band, .pp-section--image) .pp-story--readout .pp-story-readout { border-top-color: var(--on-dark-line); }
.page-blocks :is(.pp-section--band, .pp-section--image) .pp-story--readout .pp-story-big { color: var(--accent-dark); }
/* 卡片大鏤空編號只在寬螢幕（窄螢幕沿用上方「描邊大數字＋目前步驟填滿」的規則）。 */
@media (min-width: 62rem) {
  .page-blocks .pp-story--readout .pp-story-num { margin-bottom: .875rem; color: color-mix(in srgb, var(--accent-ink) 55%, transparent); font-size: clamp(4rem, 7vw, 6.5rem); font-weight: 800; line-height: 1; }
  .page-blocks .pp-story--readout .pp-story-step.is-on .pp-story-num { color: var(--accent-ink); text-shadow: none; }
  .page-blocks :is(.pp-section--band, .pp-section--image) .pp-story--readout .pp-story-num { color: color-mix(in srgb, var(--accent-dark) 55%, transparent); }
  .page-blocks :is(.pp-section--band, .pp-section--image) .pp-story--readout .pp-story-step.is-on .pp-story-num { color: var(--accent-dark); }
}
.page-blocks :is(.pp-section--band, .pp-section--image) .pp-story--readout .pp-story-ptag strong { color: var(--paper); }
.page-blocks :is(.pp-section--band, .pp-section--image) .pp-story--readout :is(.pp-story-ptitle, .pp-story-tag) { color: var(--accent-spark, var(--accent-dark)); }

/* ---------- 選擇器舞台：分頁 ---------- */
html.js .page-blocks .pp-sel-tabs[hidden], html.js .page-blocks .pp-case-picks[hidden], html.js .page-blocks .pp-ledger-chips[hidden] { display: flex; }
html.js .page-blocks .pp-stage[hidden] { display: block; }
html.js .page-blocks .pp-selector--tabs:not(.is-live) .pp-sel-panel:not(:first-of-type) { display: none; }
html.js .page-blocks .pp-selector--cases:not(.is-live) li.pp-case:not(:first-child) { display: none; }
html.js .page-blocks .pp-ledger-legend { display: none; }
.page-blocks .pp-sel-tabs { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: clamp(1.5rem, 3vw, 2.5rem); }
.page-blocks .pp-sel-tabs button { display: inline-flex; align-items: center; gap: .75rem; min-height: 2.75rem; padding: .625rem 1.125rem; border: 1px solid var(--line); border-radius: var(--r-pill); background: var(--paper); color: var(--ink); font: inherit; font-weight: 700; cursor: pointer; transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease); }
.page-blocks .pp-sel-tabs button:hover { border-color: var(--accent-ink); }
.page-blocks .pp-sel-tabs button[aria-selected="true"] { border-color: var(--ink); background: var(--ink); color: var(--paper); }
.page-blocks .pp-sel-tabs button:focus-visible { outline: 3px solid var(--accent-ink); outline-offset: 3px; }
.page-blocks .pp-meter { display: inline-flex; align-items: center; gap: .5rem; margin: 0; }
.page-blocks .pp-meter-bars { display: inline-flex; gap: 3px; }
.page-blocks .pp-meter i { width: .875rem; height: .375rem; border-radius: 2px; background: var(--line); }
.page-blocks .pp-meter i.is-on { background: var(--accent); }
.page-blocks .pp-sel-tabs button[aria-selected="true"] .pp-meter i:not(.is-on) { background: color-mix(in srgb, var(--paper) 30%, var(--ink)); }
.page-blocks .pp-sel-panel { padding: clamp(1.5rem, 3vw, 2.5rem); border: 1px solid var(--line); border-radius: var(--r-card); background: var(--paper); }
html:not(.js) .page-blocks .pp-sel-panel + .pp-sel-panel { margin-top: 1rem; }
html.js .page-blocks .pp-selector--tabs .pp-sel-label { display: none; }
.page-blocks .pp-sel-panel:focus-visible { outline: 3px solid var(--accent-ink); outline-offset: 3px; }
.page-blocks .pp-sel-label { margin: 0 0 .375rem; color: var(--accent-ink); font-size: .8125rem; font-weight: 800; letter-spacing: .06em; }
.page-blocks .pp-sel-panel :is(h2, h3) { margin: 0 0 .75rem; font-size: var(--fs-m); font-weight: 800; }
.page-blocks .pp-sel-panel > p:not(.pp-sel-label, .pp-meter) { max-width: 52rem; color: var(--muted); line-height: 1.85; }
.page-blocks .pp-sel-panel > .pp-meter { margin-bottom: 1rem; color: var(--muted); font-size: .9375rem; font-weight: 700; }
.page-blocks .pp-sel-steps { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 2rem; margin: 1.25rem 0 0; padding: 0; list-style: none; counter-reset: pp-sel; }
.page-blocks .pp-sel-steps li { position: relative; display: inline-flex; align-items: center; gap: .5rem; padding: .5rem .875rem; border-radius: var(--r-pill); background: var(--surface-sunken); font-size: .9375rem; font-weight: 600; counter-increment: pp-sel; }
.page-blocks .pp-sel-steps li::before { content: counter(pp-sel); display: inline-grid; place-items: center; width: 1.375rem; height: 1.375rem; border-radius: 50%; background: var(--accent); color: var(--accent-on); font-size: .75rem; font-weight: 800; }
.page-blocks .pp-sel-steps li + li::after { content: "→"; position: absolute; left: -1.5rem; color: var(--muted); }
@media (max-width: 40rem) {
  .page-blocks .pp-sel-steps { flex-direction: column; align-items: flex-start; gap: 1.5rem; }
  .page-blocks .pp-sel-steps li + li::after { content: "↓"; left: 1.125rem; top: -1.4rem; }
}
/* 規格：重點規格（*）獨占一列、數值大字；其餘兩欄，名稱在上、數值在下（範例站 CloudCoffer UTDS 規格卡）。 */
.page-blocks .pp-sel-figure { margin: 1.5rem 0 0; overflow: clip; border-radius: var(--radius-l); }
.page-blocks .pp-sel-figure img { display: block; width: 100%; height: auto; }
.page-blocks .pp-sel-specs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(1rem, 3vw, 2rem); margin: 1.5rem 0 0; }
.page-blocks .pp-sel-specs > div { display: grid; align-content: start; gap: .375rem; padding-block: 1.125rem; border-top: 1px solid var(--line); }
.page-blocks .pp-sel-specs dt { color: var(--muted); font-size: .9375rem; }
.page-blocks .pp-sel-specs dd { margin: 0; color: var(--ink); font-size: 1.125rem; font-weight: 700; overflow-wrap: anywhere; }
.page-blocks .pp-sel-specs .is-strong { grid-column: 1 / -1; padding-top: 0; border-top: 0; }
.page-blocks .pp-sel-specs .is-strong dd { color: var(--accent-ink); font-size: clamp(2.5rem, 6vw, 5.5rem); font-weight: 900; line-height: 1; letter-spacing: -.02em; }
@media (max-width: 22rem) { .page-blocks .pp-sel-specs { grid-template-columns: minmax(0, 1fr); } }
/* 沒有重點規格（例如 Acronis「什麼時候用／前提／做不到」三項文字）時平均分欄，不留落單的一格。 */
.page-blocks .pp-sel-specs:not(:has(.is-strong)) { grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); }

/* ---------- 選擇器舞台：處置模擬 ---------- */
.page-blocks .pp-case-picks { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.5rem; }
.page-blocks .pp-case-picks button { min-height: 2.75rem; padding: .625rem 1.125rem; border: 1px solid var(--line); border-radius: var(--r-pill); background: var(--paper); color: var(--ink); font: inherit; font-weight: 700; text-align: left; cursor: pointer; }
.page-blocks .pp-case-picks button:hover { border-color: var(--accent-ink); }
.page-blocks .pp-case-picks button[aria-pressed="true"] { border-color: var(--ink); background: var(--ink); color: var(--paper); }
.page-blocks .pp-case-picks button:focus-visible { outline: 3px solid var(--accent-ink); outline-offset: 3px; }
.page-blocks .pp-stage { position: relative; container-type: size; height: clamp(11rem, 18vw, 13rem); margin: 0; overflow: clip; border-radius: var(--r-card); background: var(--deeper); color: var(--paper); isolation: isolate; }
.page-blocks .pp-stage::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(40% 70% at 50% 45%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 70%), radial-gradient(color-mix(in srgb, var(--paper) 8%, transparent) 1px, transparent 1.5px) 0 0 / 1.5rem 1.5rem; }
.page-blocks .pp-stage-lane { position: absolute; left: 12%; right: 12%; top: 42%; height: 2px; background: repeating-linear-gradient(90deg, var(--on-dark-line) 0 .5rem, transparent .5rem .875rem); }
.page-blocks .pp-stage-node { position: absolute; top: 42%; max-width: 24%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: .5rem .75rem; border: 1px solid var(--on-dark-line); border-radius: var(--radius-m); background: var(--deeper); color: var(--paper); font-size: .8125rem; font-weight: 700; line-height: 1.35; text-align: center; translate: -50% -50%; }
.page-blocks .pp-stage-node--from { left: 12%; }
.page-blocks .pp-stage-node--to { left: 88%; }
.page-blocks .pp-stage-gate { position: absolute; left: 50%; top: 42%; display: grid; place-items: center; width: 3.5rem; height: 3.5rem; border: 2px solid var(--accent-dark); border-radius: 50%; background: var(--deeper); translate: -50% -50%; box-shadow: 0 0 0 6px color-mix(in srgb, var(--accent) 16%, transparent); }
.page-blocks .pp-stage-mark { font-size: 1.375rem; font-weight: 900; line-height: 1; opacity: 0; transition: opacity var(--dur-base) var(--ease); }
.page-blocks .pp-stage.is-final .pp-stage-mark { opacity: 1; }
.page-blocks .pp-stage[data-outcome="pass"] .pp-stage-mark::before { content: "✓"; color: var(--accent-dark); }
.page-blocks .pp-stage[data-outcome="block"] .pp-stage-mark::before { content: "✕"; color: var(--paper); }
.page-blocks .pp-stage[data-outcome="coach"] .pp-stage-mark::before { content: "!"; color: var(--accent-dark); }
.page-blocks .pp-stage[data-outcome="decide"] .pp-stage-mark::before { content: "?"; color: var(--accent-dark); }
.page-blocks .pp-stage[data-outcome="isolate"] .pp-stage-mark::before { content: "↓"; color: var(--accent-dark); }
.page-blocks .pp-stage.is-final[data-outcome="block"] .pp-stage-gate { border-color: var(--paper); }
.page-blocks .pp-stage-quarantine { position: absolute; left: 50%; bottom: .75rem; padding: .375rem .75rem; border: 1px dashed var(--accent-dark); border-radius: var(--radius-m); color: var(--muted-on-dark); font-size: .75rem; font-weight: 700; translate: -50% 0; opacity: .35; }
.page-blocks .pp-stage[data-outcome="isolate"] .pp-stage-quarantine { opacity: 1; color: var(--paper); }
/* 內容膠囊沿著線走（起點避開來源節點、終點停在目的地前），只用 transform 移動（位置以舞台的 cqw／cqh 計），不算版面位移（CLS 0）。 */
.page-blocks .pp-stage-packet { position: absolute; left: 0; top: 0; z-index: 1; padding: .375rem .75rem; border-radius: var(--r-pill); background: var(--accent); color: var(--accent-on); font-size: .75rem; font-weight: 800; white-space: nowrap; transform: translate(calc(28cqw - 50%), calc(42cqh - 50%)); }
/* 最終位置（減少動態時直接套用；動畫結束時也停在這裡）。 */
.page-blocks .pp-stage.is-final:is([data-outcome="pass"], [data-outcome="coach"]) .pp-stage-packet { transform: translate(calc(72cqw - 50%), calc(42cqh - 50%)); }
.page-blocks .pp-stage.is-final:is([data-outcome="block"], [data-outcome="decide"]) .pp-stage-packet { transform: translate(calc(40cqw - 50%), calc(42cqh - 50%)); }
.page-blocks .pp-stage.is-final[data-outcome="isolate"] .pp-stage-packet { transform: translate(calc(50cqw - 50%), calc(80cqh - 50%)); }
@media (prefers-reduced-motion: no-preference) {
  html:not([data-motion="off"]) .page-blocks .pp-stage.is-run[data-outcome="pass"] .pp-stage-packet { animation: pp-pass 2.2s var(--ease) forwards; }
  html:not([data-motion="off"]) .page-blocks .pp-stage.is-run[data-outcome="coach"] .pp-stage-packet { animation: pp-coach 2.2s var(--ease) forwards; }
  html:not([data-motion="off"]) .page-blocks .pp-stage.is-run:is([data-outcome="block"], [data-outcome="decide"]) .pp-stage-packet { animation: pp-block 2.2s var(--ease) forwards; }
  html:not([data-motion="off"]) .page-blocks .pp-stage.is-run[data-outcome="isolate"] .pp-stage-packet { animation: pp-isolate 2.2s var(--ease) forwards; }
  html:not([data-motion="off"]) .page-blocks .pp-stage.is-run .pp-stage-gate { animation: pp-gate 2.2s var(--ease); }
}
@keyframes pp-pass { 0% { transform: translate(calc(28cqw - 50%), calc(42cqh - 50%)); } 45% { transform: translate(calc(50cqw - 50%), calc(42cqh - 50%)); } 100% { transform: translate(calc(72cqw - 50%), calc(42cqh - 50%)); } }
@keyframes pp-coach { 0% { transform: translate(calc(28cqw - 50%), calc(42cqh - 50%)); } 40%, 70% { transform: translate(calc(50cqw - 50%), calc(42cqh - 50%)); } 100% { transform: translate(calc(72cqw - 50%), calc(42cqh - 50%)); } }
@keyframes pp-block { 0% { transform: translate(calc(28cqw - 50%), calc(42cqh - 50%)); } 50% { transform: translate(calc(40cqw - 50%), calc(42cqh - 50%)); } 58% { transform: translate(calc(42cqw - 50%), calc(42cqh - 50%)); } 66% { transform: translate(calc(39cqw - 50%), calc(42cqh - 50%)); } 74%, 100% { transform: translate(calc(40cqw - 50%), calc(42cqh - 50%)); } }
@keyframes pp-isolate { 0% { transform: translate(calc(28cqw - 50%), calc(42cqh - 50%)); } 45% { transform: translate(calc(50cqw - 50%), calc(42cqh - 50%)); } 100% { transform: translate(calc(50cqw - 50%), calc(80cqh - 50%)); } }
@keyframes pp-gate { 40% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--accent) 16%, transparent); } 50% { box-shadow: 0 0 0 14px color-mix(in srgb, var(--accent) 30%, transparent); } 100% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--accent) 16%, transparent); } }
/* 窄舞台（容器寬 < 34rem）改成直式：來源在上、檢查點居中、目的地在下、隔離框在右；節點名稱整行顯示。 */
@media (max-width: 40rem) { .page-blocks .pp-stage { height: 22rem; } }
@container (max-width: 34rem) {
  .page-blocks .pp-stage-lane { left: 50%; right: auto; top: 14%; bottom: 14%; width: 2px; height: auto; background: repeating-linear-gradient(180deg, var(--on-dark-line) 0 .5rem, transparent .5rem .875rem); }
  .page-blocks .pp-stage-node { left: 50%; max-width: 86%; }
  .page-blocks .pp-stage-node--from { top: 12%; }
  .page-blocks .pp-stage-node--to { top: 88%; }
  .page-blocks .pp-stage-gate { top: 50%; }
  .page-blocks .pp-stage-quarantine { left: auto; right: .75rem; top: 50%; bottom: auto; translate: 0 -50%; }
  .page-blocks .pp-stage-packet { transform: translate(calc(50cqw + 2.25rem), calc(12cqh - 50%)); }
  .page-blocks .pp-stage.is-final:is([data-outcome="pass"], [data-outcome="coach"]) .pp-stage-packet { transform: translate(calc(50cqw + 2.25rem), calc(76cqh - 50%)); }
  .page-blocks .pp-stage.is-final:is([data-outcome="block"], [data-outcome="decide"]) .pp-stage-packet { transform: translate(calc(50cqw + 2.25rem), calc(38cqh - 50%)); }
  .page-blocks .pp-stage.is-final[data-outcome="isolate"] .pp-stage-packet { transform: translate(calc(100cqw - 100% - .75rem), calc(36cqh - 50%)); }
}
@media (prefers-reduced-motion: no-preference) {
  @container (max-width: 34rem) {
    html:not([data-motion="off"]) .page-blocks .pp-stage.is-run[data-outcome="pass"] .pp-stage-packet { animation-name: pp-pass-v; }
    html:not([data-motion="off"]) .page-blocks .pp-stage.is-run[data-outcome="coach"] .pp-stage-packet { animation-name: pp-coach-v; }
    html:not([data-motion="off"]) .page-blocks .pp-stage.is-run:is([data-outcome="block"], [data-outcome="decide"]) .pp-stage-packet { animation-name: pp-block-v; }
    html:not([data-motion="off"]) .page-blocks .pp-stage.is-run[data-outcome="isolate"] .pp-stage-packet { animation-name: pp-isolate-v; }
  }
}
@keyframes pp-pass-v { 0% { transform: translate(calc(50cqw + 2.25rem), calc(12cqh - 50%)); } 45% { transform: translate(calc(50cqw + 2.25rem), calc(44cqh - 50%)); } 100% { transform: translate(calc(50cqw + 2.25rem), calc(76cqh - 50%)); } }
@keyframes pp-coach-v { 0% { transform: translate(calc(50cqw + 2.25rem), calc(12cqh - 50%)); } 40%, 70% { transform: translate(calc(50cqw + 2.25rem), calc(44cqh - 50%)); } 100% { transform: translate(calc(50cqw + 2.25rem), calc(76cqh - 50%)); } }
@keyframes pp-block-v { 0% { transform: translate(calc(50cqw + 2.25rem), calc(12cqh - 50%)); } 50% { transform: translate(calc(50cqw + 2.25rem), calc(38cqh - 50%)); } 58% { transform: translate(calc(50cqw + 2.25rem), calc(40cqh - 50%)); } 66% { transform: translate(calc(50cqw + 2.25rem), calc(37cqh - 50%)); } 74%, 100% { transform: translate(calc(50cqw + 2.25rem), calc(38cqh - 50%)); } }
@keyframes pp-isolate-v { 0% { transform: translate(calc(50cqw + 2.25rem), calc(12cqh - 50%)); } 45% { transform: translate(calc(50cqw + 2.25rem), calc(36cqh - 50%)); } 100% { transform: translate(calc(100cqw - 100% - .75rem), calc(36cqh - 50%)); } }
.page-blocks .pp-stage-verdict { min-height: 1.5em; margin: 1rem 0 0; color: var(--ink); font-weight: 800; }
@media (prefers-reduced-motion: no-preference) {
  html:not([data-motion="off"]) .page-blocks .pp-stage:not(.is-final) + .pp-stage-verdict { opacity: 0; }
  html:not([data-motion="off"]) .page-blocks .pp-stage-verdict { transition: opacity var(--dur-base) var(--ease); }
}
.page-blocks .pp-case-list { display: grid; gap: 1rem; margin: 0; padding: 0; list-style: none; grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); }
html.js .page-blocks .pp-selector--cases .pp-case-list { display: block; margin-top: 1rem; }
.page-blocks .pp-case { padding: clamp(1.25rem, 2.4vw, 1.75rem); border: 1px solid var(--line); border-radius: var(--r-card); background: var(--paper); }
.page-blocks .pp-case-title { margin: 0 0 .5rem; font-size: 1.125rem; font-weight: 800; }
.page-blocks .pp-case-label { margin: -.25rem 0 .75rem; color: var(--muted); font-size: .875rem; }
.page-blocks .pp-case-path { margin: 0 0 .75rem; color: var(--ink); font-size: .9375rem; }
.page-blocks .pp-case-path strong { color: var(--accent-ink); }
.page-blocks .pp-case-outcome { display: inline-block; margin: 0 0 .75rem; padding: .25rem .75rem; border-radius: var(--r-pill); background: var(--ink); color: var(--paper); font-size: .8125rem; font-weight: 800; }
.page-blocks .pp-case-outcome--pass { background: var(--accent); color: var(--accent-on); }
.page-blocks .pp-case-verdict { display: grid; gap: .25rem; margin: 0 0 .75rem; }
.page-blocks .pp-case-verdict span, .page-blocks .pp-case-body { color: var(--muted); line-height: 1.8; }
html.js .page-blocks .pp-selector--cases .pp-case-verdict { display: none; }
.page-blocks .pp-case-body { margin: 0; }

/* ---------- 橫向捲軸 ---------- */
.page-blocks .pp-track-hint { margin: 0 0 1rem; color: var(--muted); font-size: .9rem; font-weight: 700; letter-spacing: .04em; }
/* 卡片列滿版出血（範例站做法）：視窗外框延伸到畫面兩側、內距把第一張卡對齊內容欄；可滑動清單的吸附點同樣對齊內容欄。 */
.page-blocks .pp-track-viewport { overflow-x: auto; scroll-snap-type: x mandatory; margin-inline: calc(50% - 50vw); padding: 0 calc(50vw - 50%) 1rem; scroll-padding-inline: calc((100vw - min(var(--max), 100vw - var(--gutter) * 2)) / 2); }
.page-blocks .pp-track-viewport:focus-visible { outline: 3px solid var(--accent-ink); outline-offset: 3px; }
.page-blocks .pp-track-row { display: flex; gap: clamp(1rem, 2vw, 1.5rem); width: max-content; margin: 0; padding: 0; list-style: none; }
.page-blocks .pp-track-item { flex: 0 0 min(72vw, 22rem); padding: clamp(1.5rem, 2.4vw, 2rem); border: 1px solid var(--line); border-top: 3px solid var(--accent); border-radius: var(--r-card); background: var(--paper); scroll-snap-align: start; }
.page-blocks .pp-track-num { display: block; margin-bottom: 1rem; color: var(--accent-ink); font-size: clamp(2rem, 3.4vw, 3rem); font-weight: 900; line-height: 1; font-variant-numeric: tabular-nums; }
.page-blocks .pp-track-item :is(h2, h3) { margin: 0 0 .5rem; font-size: 1.25rem; font-weight: 800; }
.page-blocks .pp-track-item p { margin: 0; color: var(--muted); line-height: 1.8; }
.page-blocks .pp-track-bar { display: none; }
@keyframes pp-track-bar { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes pp-track-mark { from { transform: translateX(calc(-100% + 1.375rem)); } to { transform: translateX(0); } }
/* 沒有釘選（窄螢幕、減少動態、不支援捲動時間軸）時：提示改成「左右滑動」，並以清單自己的橫向捲動帶動進度條。 */
.page-blocks .pp-track-hint-scroll { display: none; }
@supports (animation-timeline: scroll()) {
  .page-blocks .pp-track { timeline-scope: --blocks-swipe; }
  .page-blocks .pp-track-viewport { scroll-timeline: --blocks-swipe inline; }
  .page-blocks .pp-track-bar { display: block; height: 3px; margin-top: .75rem; border-radius: 2px; background: var(--line); }
  .page-blocks .pp-track-bar span { display: block; height: 100%; border-radius: inherit; background: var(--accent); transform-origin: 0 50%; animation: pp-track-bar linear both; animation-timeline: --blocks-swipe; }
}
.page-blocks .pp-track--n3 { --n: 3; }
.page-blocks .pp-track--n4 { --n: 4; }
.page-blocks .pp-track--n5 { --n: 5; }
.page-blocks .pp-track--n6 { --n: 6; }
.page-blocks .pp-track--n7 { --n: 7; }
.page-blocks .pp-track--n8 { --n: 8; }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) and (min-width: 62rem) {
    html:not([data-motion="off"]) .page-blocks .pp-track { height: calc(100svh + var(--n) * 9rem); view-timeline-name: --blocks-track; }
    html:not([data-motion="off"]) .page-blocks .pp-track-sticky { position: sticky; top: max(6rem, calc(50svh - 18rem)); display: grid; }
    html:not([data-motion="off"]) .page-blocks .pp-track-sticky .pp-head { margin-bottom: clamp(1.25rem, 2.5vw, 2rem); }
    /* 寬螢幕釘住時：提示字改為「捲動」版本（範例站在寬螢幕也有提示）。 */
    html:not([data-motion="off"]) .page-blocks .pp-track-hint-scroll { display: inline; }
    html:not([data-motion="off"]) .page-blocks .pp-track-hint-swipe { display: none; }
    html:not([data-motion="off"]) .page-blocks .pp-track-viewport { overflow: clip; scroll-snap-type: none; container-type: inline-size; padding-bottom: 0; }
    /* 釘住時：出血與內距沿用上方規則；container-type 的 cqw 是內容盒寬（不含內距），平移終點維持「最後一張卡對齊內容欄右緣」。 */
    html:not([data-motion="off"]) .page-blocks .pp-track-row { animation: pp-track linear both; animation-timeline: --blocks-track; animation-range: contain 0% contain 100%; }
    html:not([data-motion="off"]) .page-blocks .pp-track-item { flex-basis: clamp(21.25rem, 32vw, 33.75rem); }
    html:not([data-motion="off"]) .page-blocks .pp-track-num { color: var(--accent-ink); font-size: clamp(4.5rem, 8vw, 8rem); }
    html:not([data-motion="off"]) .page-blocks :is(.pp-section--band, .pp-section--image) .pp-track-num { color: var(--accent-dark); }
    /* 進度條：6px、填色帶光暈；六角標記隨進度沿著進度條移動（標記畫在與進度條同寬的圖層右端，整層以自身寬度百分比平移，只動 transform）。 */
    html:not([data-motion="off"]) .page-blocks .pp-track-bar { position: relative; display: block; height: 6px; margin-top: 2rem; border-radius: 3px; background: var(--line); }
    html:not([data-motion="off"]) .page-blocks .pp-track-bar span { box-shadow: 0 0 .875rem color-mix(in srgb, var(--accent) 60%, transparent); }
    html:not([data-motion="off"]) .page-blocks .pp-track-bar::after { content: ""; position: absolute; left: 0; top: 50%; width: 100%; height: 1.5625rem; margin-top: -.78125rem; clip-path: polygon(calc(100% - .6875rem) 0, 100% 25%, 100% 75%, calc(100% - .6875rem) 100%, calc(100% - 1.375rem) 75%, calc(100% - 1.375rem) 25%); background: var(--ink); animation: pp-track-mark linear both; animation-timeline: --blocks-track; animation-range: contain 0% contain 100%; }
    html:not([data-motion="off"]) .page-blocks :is(.pp-section--band, .pp-section--image) .pp-track-bar::after { background: var(--paper); }
    html:not([data-motion="off"]) .page-blocks .pp-track-bar span { display: block; height: 100%; border-radius: inherit; background: var(--accent); transform-origin: 0 50%; animation: pp-track-bar linear both; animation-timeline: --blocks-track; animation-range: contain 0% contain 100%; }
    @keyframes pp-track { to { translate: calc(-100% + 100cqw) 0; } }
  }
}

/* ---------- 帳冊掃描（issue 372 改版） ---------- */
/* 分類、提示行與表格都在帳冊卡片（深色）裡。每個分類依順序配一個顏色（--c），只在選中時亮出：按鈕圓點、該列左線、淡底與分類標籤；平常灰與品牌強調色。 */
.page-blocks .pp-ledger [data-c="0"] { --c: var(--arch-purple); }
.page-blocks .pp-ledger [data-c="1"] { --c: var(--arch-sky); }
.page-blocks .pp-ledger [data-c="2"] { --c: var(--arch-orange); }
.page-blocks .pp-ledger [data-c="3"] { --c: var(--arch-teal); }
.page-blocks .pp-ledger [data-c="4"] { --c: var(--arch-coral); }
.page-blocks .pp-ledger [data-c="5"] { --c: var(--arch-green); }
.page-blocks .pp-ledger-sheet { padding: clamp(1rem, 2vw, 1.5rem); border: 1px solid var(--on-dark-line); border-radius: var(--r-card); background: var(--deeper); color: var(--paper); box-shadow: var(--elevation-card); }
.page-blocks .pp-ledger-head { display: flex; align-items: center; gap: .75rem; margin: 0 0 .875rem; font-size: 1.0625rem; }
.page-blocks .pp-ledger-tag { padding: .125rem .625rem; border: 1px solid var(--on-dark-line); border-radius: var(--r-pill); color: var(--muted-on-dark); font-size: .75rem; font-weight: 700; }
.page-blocks .pp-ledger-hint { display: flex; align-items: center; gap: .5rem; margin: 0 0 .625rem; color: var(--accent-dark); font-size: .875rem; font-weight: 700; }
.page-blocks .pp-ledger-hint::before { content: ""; flex: none; width: .75rem; height: .75rem; border: 2px solid currentColor; border-radius: 50%; }
.page-blocks .pp-ledger-legend, .page-blocks .pp-ledger-chips { display: flex; flex-wrap: wrap; gap: .375rem; margin: 0 0 1rem; padding: 0; list-style: none; }
.page-blocks .pp-ledger-legend li { padding: .25rem .75rem; border: 1px solid var(--on-dark-line); border-radius: var(--r-pill); color: var(--paper); font-size: .8125rem; font-weight: 700; }
.page-blocks .pp-ledger-chips button { --c: var(--accent-dark); display: inline-flex; align-items: center; gap: .4375rem; min-height: 2.25rem; padding: .3125rem .75rem; border: 1.5px solid var(--on-dark-line); border-radius: var(--r-pill); background: transparent; color: var(--paper); font: inherit; font-size: .84375rem; font-weight: 800; white-space: nowrap; cursor: pointer; transition: border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease); }
.page-blocks .pp-ledger-chips button:hover { border-color: var(--accent-dark); }
.page-blocks .pp-ledger-chips button[aria-pressed="true"] { border-color: var(--c); background: color-mix(in srgb, var(--c) 16%, transparent); }
.page-blocks .pp-ledger-chips button:focus-visible { outline: 2px solid var(--accent-dark); outline-offset: 2px; }
.page-blocks .pp-ledger-dot { width: .5rem; height: .5rem; border-radius: 50%; background: var(--muted-on-dark); transition: background var(--dur-fast) var(--ease); }
.page-blocks .pp-ledger-chips button[aria-pressed="true"] .pp-ledger-dot { background: var(--c); }
.page-blocks .pp-ledger-scroll { overflow-x: auto; border-radius: .5rem; }
.page-blocks .pp-ledger-scroll:focus-visible { outline: 2px solid var(--accent-dark); outline-offset: 2px; }
.page-blocks .pp-ledger-rows { width: 100%; min-width: 34rem; border-collapse: collapse; border-top: 1px solid var(--on-dark-line); }
.page-blocks .pp-ledger-rows td { padding: .75rem .625rem; border-bottom: 1px solid var(--on-dark-line); font-size: .875rem; vertical-align: middle; transition: background var(--dur-fast) var(--ease), opacity var(--dur-fast) var(--ease); }
.page-blocks .pp-ledger-rows td:first-child { border-left: 3px solid transparent; }
.page-blocks .pp-ledger-method { width: 4.5rem; color: var(--accent-dark); font-family: var(--font-mono, ui-monospace, monospace); font-size: .8125rem; font-weight: 800; letter-spacing: .04em; }
.page-blocks .pp-ledger-path code { color: var(--paper); font-size: .875rem; overflow-wrap: anywhere; }
.page-blocks .pp-ledger-state { color: var(--on-dark-card-body); }
.page-blocks .pp-ledger-state > span + span { margin-left: .625rem; }
.page-blocks .pp-ledger-cat { display: inline-flex; align-items: center; gap: .375rem; padding: .0625rem .5rem; border: 1px solid var(--on-dark-line); border-radius: var(--r-pill); color: var(--paper); font-size: .75rem; font-weight: 800; white-space: nowrap; }
.page-blocks .pp-ledger-cat::before { content: ""; width: .4375rem; height: .4375rem; border-radius: 50%; background: var(--muted-on-dark); }
.page-blocks .pp-ledger-rows tr.is-plain .pp-ledger-say { color: var(--muted-on-dark); }
.page-blocks .pp-ledger-rows tr.is-plain .pp-ledger-say::before { content: "✓ "; color: var(--arch-green); font-weight: 900; }
.page-blocks .pp-ledger.is-filtering .pp-ledger-rows tr:not(.is-hit) td { opacity: .4; }
.page-blocks .pp-ledger-rows tr.is-hit td { background: color-mix(in srgb, var(--c) 10%, var(--deeper)); }
.page-blocks .pp-ledger-rows tr.is-hit td:first-child { border-left-color: var(--c); }
.page-blocks .pp-ledger-rows tr.is-hit .pp-ledger-cat { border-color: color-mix(in srgb, var(--c) 60%, transparent); color: var(--c); }
.page-blocks .pp-ledger-rows tr.is-hit .pp-ledger-cat::before { background: var(--c); }
.page-blocks .pp-ledger-rows tr.is-hit .pp-ledger-say { color: var(--paper); }
@media (max-width: 40rem) {
  .page-blocks .pp-ledger-rows { min-width: 0; }
  .page-blocks .pp-ledger-rows tbody, .page-blocks .pp-ledger-rows tr { display: block; }
  .page-blocks .pp-ledger-rows tr { display: grid; grid-template-columns: 3.25rem minmax(0, 1fr); grid-template-areas: "m p" ". s"; gap: .25rem .625rem; padding: .75rem .25rem .75rem .5rem; border-bottom: 1px solid var(--on-dark-line); border-left: 3px solid transparent; }
  .page-blocks .pp-ledger-rows td, .page-blocks .pp-ledger-rows td:first-child { padding: 0; border: 0; }
  .page-blocks .pp-ledger-rows tr.is-hit { border-left-color: var(--c); background: color-mix(in srgb, var(--c) 10%, var(--deeper)); }
  .page-blocks .pp-ledger-rows tr.is-hit td { background: none; }
  .page-blocks .pp-ledger-method { grid-area: m; width: auto; font-size: .75rem; }
  .page-blocks .pp-ledger-path { grid-area: p; }
  .page-blocks .pp-ledger-path code { font-size: .8125rem; }
  .page-blocks .pp-ledger-state { grid-area: s; display: flex; flex-wrap: wrap; align-items: center; gap: .375rem .5rem; }
  .page-blocks .pp-ledger-state > span + span { margin-left: 0; }
}
.page-blocks .pp-ledger-status { min-height: 1.5em; margin: .75rem 0 0; color: var(--accent-dark); font-size: .875rem; font-weight: 800; }
/* 沒有篩選時狀態列是空的：不預留高度（仍留在無障礙樹，aria-live 之後照常宣告；高度變化只在使用者點選後發生，不計入 CLS）。 */
.page-blocks .pp-ledger-status:empty { min-height: 0; margin: 0; }
.page-blocks .pp-ledger-foot { margin: .75rem 0 0; color: var(--muted); font-size: .875rem; }

/* ---------- 宣言逐字點亮 ---------- */
.page-blocks .pp-manifesto-text.is-lighting .pp-ch { transition: opacity var(--dur-base) var(--ease); }
.page-blocks .pp-manifesto-text.is-lighting .pp-ch:not(.is-lit) { opacity: .22; }

/* ---------- 減少動態：保留狀態切換，拿掉位移與漸變 ---------- */
@media (prefers-reduced-motion: reduce) {
  .page-blocks .pp-story-card, .page-blocks .pp-story-frame, .page-blocks .pp-story-ticks i, .page-blocks .pp-story-step::before,
  .page-blocks .pp-stage-mark, .page-blocks .pp-ledger-rows td, .page-blocks .pp-ledger-chips button, .page-blocks .pp-ledger-dot { transition: none; }
  .page-blocks .pp-story-step.is-on .pp-story-card { transform: none; }
}
html[data-motion="off"] .page-blocks .pp-story-step.is-on .pp-story-card { transform: none; }

/* issue 193（v80）：頁首主打句與頁首右側場景。頁首是深色底（.page-head.dark）；場景區段去掉區段自己的底色與上下留白。
   寬螢幕左文右場景（場景跨所有文字列、垂直置中）；窄螢幕排在文字下方。 */
.page-head .hero-lede { max-width: 40rem; margin: .75rem 0 0; color: var(--accent-dark); font-size: clamp(1.125rem, 1.6vw, 1.375rem); font-weight: 700; line-height: 1.6; text-wrap: pretty; }
.page-head .hero-aside { align-self: stretch; width: 100%; min-width: 0; margin-top: clamp(1.5rem, 4vw, 2.5rem); }
@media (min-width: 61.3125rem) { #main.inner-main .page-head .hero-aside { align-self: center; margin-top: 0; } }
.page-head :is(.hero-aside, .hero-lead) > .pp-section { padding-block: 0; background: none; }
.page-head :is(.hero-aside, .hero-lead) > .pp-section::before, .page-head :is(.hero-aside, .hero-lead) > .pp-section::after { display: none; }
.page-head :is(.hero-aside, .hero-lead) > .pp-section > .wrap, .page-head :is(.hero-aside, .hero-lead) > .pp-section > * { max-width: none; padding-inline: 0; }
/* issue 370：頁首場景（SceneSpec.HeroLead）排在按鈕下方的左欄，寬度隨文字欄。 */
.page-head .hero-lead { width: 100%; min-width: 0; }
/* issue 241：寬版頁首場景（SceneSpec.WideHero）整寬排在大標下方、取代頁首圖；不進右欄格線，頁首文字維持單欄。 */
.page-head .hero-wide { align-self: stretch; width: 100%; min-width: 0; margin-top: clamp(1.5rem, 4vw, 2.5rem); }
.page-head .hero-wide > .pp-section { padding-block: 0; background: none; }
.page-head .hero-wide > .pp-section::before, .page-head .hero-wide > .pp-section::after { display: none; }
.page-head .hero-wide > .pp-section > .wrap, .page-head .hero-wide > .pp-section > * { max-width: none; padding-inline: 0; }
@media (min-width: 62rem) {
  #main.inner-main .page-head.page-head:has(> .hero-aside) { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); column-gap: clamp(2rem, 4vw, 4rem); align-content: start; justify-items: start; }
  /* 背景圖與頁首效果是絕對定位的裝飾層：不能指定格線欄，否則只鋪在左欄。 */
  #main.inner-main .page-head.page-head:has(> .hero-aside) > :not(.hero-bg, [aria-hidden="true"]) { grid-column: 1; }
  /* 左欄只剩約一半寬：大標縮一級，中文長句（約九字）放得下，不在詞中硬拆。2026-10-06 與其他原廠頁統一為同一級（見下方「原廠頁大標同一級」）。 */
  #main.inner-main .page-head.page-head:has(> .hero-aside) h1 { font-size: clamp(2.5rem, 5vw, 4.5rem); }
  #main.inner-main .page-head.page-head:has(> .hero-aside) > .breadcrumb { width: fit-content; }
  #main.inner-main .page-head.page-head:has(> .hero-aside) > .hero-aside { grid-column: 2; grid-row: 1 / span 12; align-self: center; justify-self: stretch; margin-top: 0; }
}
/* 2026-10-06 原廠頁大標同一級（使用者：「代理與夥伴的上方字大小不同?」）：寬螢幕上原本背景圖版頁首 84px、左文右圖／右側互動圖版 63px。
   統一為 clamp(2.5rem, 5vw, 4.5rem)（1440 寬以上 72px）：右欄版的左欄放得下約八字一行（Netskope RBI「灰色網站在雲端開」84px 時會把「開」擠到下一行），背景圖版也不至於太小。 */
@media (min-width: 62rem) {
  #main.inner-main:has(> .catalog-content:is([data-page-kind="partnerPage"], [data-page-kind="partnerProductPage"])) > .page-head h1 { font-size: clamp(2.5rem, 5vw, 4.5rem); }
}
/* v84：原廠頁與原廠產品頁的一般頁首圖（範例站 Netskope 左文右圖）——寬螢幕同上改為左文右圖，圖在右欄垂直置中；有品牌標誌卡時維持標誌卡版型。 */
@media (min-width: 62rem) {
  #main.inner-main:has(> .catalog-content:is([data-page-kind="partnerPage"], [data-page-kind="partnerProductPage"])) > .page-head:has(> :is(.page-figure, .page-image)):not(:has(> :is(.hero-aside, .partner-logo-frame))) { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); column-gap: clamp(2rem, 4vw, 4rem); align-content: start; justify-items: start; }
  #main.inner-main:has(> .catalog-content:is([data-page-kind="partnerPage"], [data-page-kind="partnerProductPage"])) > .page-head:has(> :is(.page-figure, .page-image)):not(:has(> :is(.hero-aside, .partner-logo-frame))) > :not(.hero-bg, [aria-hidden="true"]) { grid-column: 1; }
  #main.inner-main:has(> .catalog-content:is([data-page-kind="partnerPage"], [data-page-kind="partnerProductPage"])) > .page-head:has(> :is(.page-figure, .page-image)):not(:has(> :is(.hero-aside, .partner-logo-frame))) h1 { font-size: clamp(2.5rem, 5vw, 4.5rem); }
  #main.inner-main:has(> .catalog-content:is([data-page-kind="partnerPage"], [data-page-kind="partnerProductPage"])) > .page-head:has(> :is(.page-figure, .page-image)):not(:has(> :is(.hero-aside, .partner-logo-frame))) > .breadcrumb { width: fit-content; }
  #main.inner-main:has(> .catalog-content:is([data-page-kind="partnerPage"], [data-page-kind="partnerProductPage"])) > .page-head:has(> :is(.page-figure, .page-image)):not(:has(> :is(.hero-aside, .partner-logo-frame))) > :is(.page-figure, .page-image) { grid-column: 2; grid-row: 1 / span 12; align-self: center; justify-self: stretch; margin: 0; }
  /* 2026-10-04 審查：右欄的頁首圖照原比例完整顯示（一般頁首的 21:9 裁切會把 RBI 圖上半截切掉）。 */
  #main.inner-main:has(> .catalog-content:is([data-page-kind="partnerPage"], [data-page-kind="partnerProductPage"])) > .page-head:has(> :is(.page-figure, .page-image)):not(:has(> :is(.hero-aside, .partner-logo-frame))) .page-image { aspect-ratio: auto; height: auto; max-height: none; }
}
/* v81：頁首圖當滿版背景。圖鋪滿頁首（z-index -1，頁首有 isolation），上疊深色漸層，圖說在右下；不佔版面格線。 */
.page-head > .hero-bg { position: absolute; inset: 0; z-index: -1; margin: 0; overflow: hidden; border-radius: inherit; pointer-events: none; }
.page-head > .hero-bg img { width: 100%; height: 100%; object-fit: cover; }
/* 遮罩照範例站：寬螢幕左側（文字）幾乎不透明、右側透出約四成，再疊一層由下往上的漸層接到下方內容；窄螢幕整片壓暗。 */
.page-head > .hero-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, var(--deeper) 0%, color-mix(in srgb, var(--deeper) 70%, transparent) 22%, transparent 55%), linear-gradient(90deg, color-mix(in srgb, var(--deeper) 94%, transparent) 0%, color-mix(in srgb, var(--deeper) 94%, transparent) 50%, color-mix(in srgb, var(--deeper) 56%, transparent) 100%); }
@media (max-width: 61.99rem) { .page-head > .hero-bg::after { background: color-mix(in srgb, var(--deeper) 86%, transparent); } }
.page-head > .hero-bg figcaption { position: absolute; right: var(--pad, 1.5rem); bottom: 1rem; z-index: 1; color: var(--muted-on-dark); font-size: .8125rem; }
/* v83：「背景圖右側清楚」照範例站 Trellix——遮罩由左（文字區）往右淡出，右半部只留一成，再疊一層由下往上接到下方內容；窄螢幕文字蓋在圖上，改成上淡下濃。 */
.page-head > .hero-bg--clear img { object-position: 72% 50%; }
/* issue 239：右欄有動畫圖或互動場景時背景照片淡化成氛圍，不和右欄搶視線。 */
.page-head:has(> .hfx, > .hero-aside) > .hero-bg img { opacity: .35; }
/* issue 239：淡化背景整體下移 5rem、頂端遮罩淡入，主體不被官網選單遮住；1600px 以上與既有左右淡出遮罩疊加（intersect）。 */
@media (min-width: 62rem) { .page-head:has(> .hfx, > .hero-aside) > .hero-bg img { translate: 0 5rem; -webkit-mask-image: linear-gradient(180deg, transparent, black 7rem); mask-image: linear-gradient(180deg, transparent, black 7rem); } }
/* issue 225：1600px 以上底圖不再隨視窗無限放大裁切：寬度上限 100rem、錨在內容欄右側，左右邊緣以遮罩漸層融入深色底。 */
@media (min-width: 1600px) {
  .page-head > .hero-bg img { position: absolute; top: 0; right: max(0px, calc((100% - var(--max)) / 2 - 10rem)); width: min(100%, 100rem); height: 100%; -webkit-mask-image: linear-gradient(90deg, transparent, black 30%, black 88%, transparent); mask-image: linear-gradient(90deg, transparent, black 30%, black 88%, transparent); }
  .page-head:has(> .hfx, > .hero-aside) > .hero-bg img { -webkit-mask-image: linear-gradient(90deg, transparent, black 30%, black 88%, transparent), linear-gradient(180deg, transparent, black 7rem); -webkit-mask-composite: source-in; mask-image: linear-gradient(90deg, transparent, black 30%, black 88%, transparent), linear-gradient(180deg, transparent, black 7rem); mask-composite: intersect; }
}
.page-head > .hero-bg--clear::after { background: linear-gradient(90deg, var(--deeper) 4%, color-mix(in srgb, var(--deeper) 88%, transparent) 40%, color-mix(in srgb, var(--deeper) 8%, transparent) 80%), linear-gradient(0deg, var(--deeper) 0%, transparent 34%); }
@media (max-width: 61.99rem) { .page-head > .hero-bg--clear::after { background: linear-gradient(0deg, var(--deeper) 18%, color-mix(in srgb, var(--deeper) 82%, transparent) 55%, color-mix(in srgb, var(--deeper) 35%, transparent)); } }

/* v83：頁首捲動碎片（範例站 Trellix）。26 片碎片散在頁首右半部，--p（0→1，chrome.js 依頁首捲過的比例寫入）讓碎片平移、轉正、壓扁，
   收束到頁首底線，顏色由品牌輔色（--accent-spark，Trellix 為金色；未設定時為淡的強調色）轉為強調色；底部光線同步由中間展開。只動 transform／opacity／背景色，不影響版面（CLS 0）。
   沒有 JS 時停在散開的樣子；減少動態或暫停動態時直接是收束後的樣子。窄螢幕碎片改散在上方，收束時淡出，避免壓在文字上。 */
.page-head > .hero-shards { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; container-type: size; }
.page-head > .hero-shards i { position: absolute; display: block; width: var(--w); height: var(--h); left: calc(var(--l) * 1%); top: calc(var(--t) * 1%);
  transform: translate(calc((var(--l2) - var(--l)) * var(--p, 0) * 1cqw), calc((99.6 - var(--t)) * var(--p, 0) * 1cqh)) rotate(calc(var(--r) * (1 - var(--p, 0)))) scaleY(calc(1 - .8 * var(--p, 0)));
  background: color-mix(in srgb, var(--accent-dark) calc(var(--p, 0) * 100%), var(--accent-spark, color-mix(in srgb, var(--accent-dark) 55%, var(--paper)))); clip-path: polygon(0 0, 100% 18%, 72% 100%, 12% 82%); opacity: calc(.7 + .3 * var(--p, 0)); }
.page-head > .hero-thread { position: absolute; left: 0; right: 0; bottom: 0; z-index: -1; height: 2px; pointer-events: none;
  background: linear-gradient(90deg, transparent, var(--accent-dark) 14%, color-mix(in srgb, var(--accent-dark) 60%, var(--paper)) 70%, transparent);
  transform: scaleX(var(--p, 0)); opacity: var(--p, 0); box-shadow: 0 0 1.5rem color-mix(in srgb, var(--accent-dark) 70%, transparent); }
@media (prefers-reduced-motion: reduce) { .page-head:has(> .hero-shards) { --p: 1; } }
html[data-motion="off"] .page-head:has(> .hero-shards) { --p: 1; }
@media (max-width: 61.99rem) {
  .page-head > .hero-shards i { left: calc(var(--lm) * 1%); top: calc(var(--tm) * 1%); opacity: max(0, calc(.8 - 1.1 * var(--p, 0))); transform: translate(0, calc((99.6 - var(--tm)) * var(--p, 0) * 1cqh)) rotate(calc(var(--r) * (1 - var(--p, 0)))); }
}
.page-head > .hero-shards i:nth-child(1) { --l: 82; --t: 79; --l2: 54; --w: 28px; --h: 22px; --r: 5deg; --lm: 78; --tm: 6; }
.page-head > .hero-shards i:nth-child(2) { --l: 65; --t: 73; --l2: 56; --w: 28px; --h: 14px; --r: -48deg; --lm: 60; --tm: 7; }
.page-head > .hero-shards i:nth-child(3) { --l: 63; --t: 19; --l2: 57; --w: 34px; --h: 10px; --r: 16deg; --lm: 53; --tm: 10; }
.page-head > .hero-shards i:nth-child(4) { --l: 95; --t: 28; --l2: 59; --w: 34px; --h: 10px; --r: 46deg; --lm: 70; --tm: 4; }
.page-head > .hero-shards i:nth-child(5) { --l: 57; --t: 12; --l2: 61; --w: 18px; --h: 14px; --r: 16deg; --lm: 6; --tm: 15; }
.page-head > .hero-shards i:nth-child(6) { --l: 83; --t: 49; --l2: 63; --w: 28px; --h: 14px; --r: 6deg; --lm: 32; --tm: 13; }
.page-head > .hero-shards i:nth-child(7) { --l: 72; --t: 71; --l2: 64; --w: 14px; --h: 10px; --r: -2deg; --lm: 86; --tm: 7; }
.page-head > .hero-shards i:nth-child(8) { --l: 80; --t: 78; --l2: 66; --w: 14px; --h: 18px; --r: -20deg; --lm: 32; --tm: 11; }
.page-head > .hero-shards i:nth-child(9) { --l: 72; --t: 11; --l2: 68; --w: 14px; --h: 10px; --r: -9deg; --lm: 16; --tm: 16; }
.page-head > .hero-shards i:nth-child(10) { --l: 72; --t: 57; --l2: 69; --w: 14px; --h: 10px; --r: 48deg; --lm: 90; --tm: 3; }
.page-head > .hero-shards i:nth-child(11) { --l: 67; --t: 34; --l2: 71; --w: 14px; --h: 22px; --r: -12deg; --lm: 93; --tm: 9; }
.page-head > .hero-shards i:nth-child(12) { --l: 80; --t: 17; --l2: 73; --w: 34px; --h: 14px; --r: 39deg; --lm: 89; --tm: 7; }
.page-head > .hero-shards i:nth-child(13) { --l: 75; --t: 19; --l2: 75; --w: 22px; --h: 18px; --r: -59deg; --lm: 55; --tm: 15; }
.page-head > .hero-shards i:nth-child(14) { --l: 61; --t: 25; --l2: 76; --w: 18px; --h: 10px; --r: -59deg; --lm: 10; --tm: 10; }
.page-head > .hero-shards i:nth-child(15) { --l: 85; --t: 30; --l2: 78; --w: 34px; --h: 14px; --r: -3deg; --lm: 68; --tm: 6; }
.page-head > .hero-shards i:nth-child(16) { --l: 62; --t: 61; --l2: 80; --w: 28px; --h: 10px; --r: -10deg; --lm: 56; --tm: 6; }
.page-head > .hero-shards i:nth-child(17) { --l: 54; --t: 42; --l2: 82; --w: 34px; --h: 18px; --r: 53deg; --lm: 5; --tm: 6; }
.page-head > .hero-shards i:nth-child(18) { --l: 65; --t: 58; --l2: 83; --w: 34px; --h: 10px; --r: -55deg; --lm: 21; --tm: 6; }
.page-head > .hero-shards i:nth-child(19) { --l: 82; --t: 41; --l2: 85; --w: 14px; --h: 18px; --r: 46deg; --lm: 40; --tm: 9; }
.page-head > .hero-shards i:nth-child(20) { --l: 58; --t: 17; --l2: 87; --w: 14px; --h: 14px; --r: 14deg; --lm: 84; --tm: 6; }
.page-head > .hero-shards i:nth-child(21) { --l: 54; --t: 55; --l2: 88; --w: 22px; --h: 22px; --r: -44deg; --lm: 78; --tm: 10; }
.page-head > .hero-shards i:nth-child(22) { --l: 90; --t: 25; --l2: 90; --w: 28px; --h: 14px; --r: 20deg; --lm: 22; --tm: 7; }
.page-head > .hero-shards i:nth-child(23) { --l: 68; --t: 39; --l2: 92; --w: 18px; --h: 14px; --r: 34deg; --lm: 83; --tm: 11; }
.page-head > .hero-shards i:nth-child(24) { --l: 66; --t: 57; --l2: 94; --w: 28px; --h: 10px; --r: -7deg; --lm: 9; --tm: 4; }
.page-head > .hero-shards i:nth-child(25) { --l: 60; --t: 12; --l2: 95; --w: 34px; --h: 18px; --r: -30deg; --lm: 93; --tm: 9; }
.page-head > .hero-shards i:nth-child(26) { --l: 70; --t: 61; --l2: 97; --w: 34px; --h: 22px; --r: -23deg; --lm: 69; --tm: 5; }
/* v84：其他頁首效果（HeroEffectRules）。全部 aria-hidden、鋪在頁首內 z-index -1；動畫只在沒有要求減少動態、也沒按暫停動態時播放。 */
/* 告警佇列／掃描佇列（範例站 DevaEye）：頁首底部 24 格，逐格落下；被認領的格子放大後加外框，掃描佇列有一條掃描線掃過。 */
/* 佇列與說明字佔頁首底部約 6.5rem：在內頁頁首原本的下內距（inner.css）之外再留這段，按鈕不會壓在佇列上。 */
#main.inner-main .page-head.page-head:has(> .hero-queue) { padding-bottom: calc(clamp(3.5rem, 6vw, 5.5rem) + clamp(2.5rem, 4vw, 4rem) + 2.5rem); }
.page-head > .hero-queue { position: absolute; left: 0; right: 0; bottom: 3.6rem; z-index: -1; display: grid; grid-template-columns: repeat(24, minmax(0, 1fr)); gap: clamp(.25rem, .7vw, .625rem); width: min(var(--max), 100% - var(--gutter) * 2); margin-inline: auto; pointer-events: none; }
.page-head > .hero-queue i { position: relative; display: block; font-style: normal; aspect-ratio: 1; background: color-mix(in srgb, var(--accent-dark) 70%, var(--paper)); opacity: .3; }
.page-head > .hero-queue i:nth-child(3n) { opacity: .55; }
.page-head > .hero-queue i:nth-child(5n) { opacity: .18; }
.page-head > .hero-queue i.own { opacity: 1; background: var(--accent-fill, var(--accent-dark)); }
.page-head > .hero-queue i.own::after { content: ""; position: absolute; inset: -.4375rem; border: 2px solid var(--paper); }
.page-head > .hero-queue--scan i { opacity: .28; }
.page-head > .hero-queue--scan i.own { background: color-mix(in srgb, var(--accent-dark) 70%, var(--paper)); }
.page-head > .hero-queue--scan i.own::after { display: none; }
.page-head > .hero-queue i.own b { position: absolute; top: calc(100% + 1.125rem); left: 50%; transform: translateX(-50%); white-space: nowrap; color: var(--paper); font-size: .75rem; font-weight: 500; letter-spacing: .14em; }
.page-head > .hero-queue-cap { position: absolute; left: 0; right: 0; bottom: 1rem; z-index: -1; width: min(var(--max), 100% - var(--gutter) * 2); margin: 0 auto; color: var(--muted-on-dark); font-size: .75rem; letter-spacing: .14em; pointer-events: none; }
@media (max-width: 40rem) { .page-head > .hero-queue { grid-template-columns: repeat(12, minmax(0, 1fr)); } .page-head > .hero-queue i:nth-child(n + 13) { display: none; } }
@media (prefers-reduced-motion: no-preference) {
  html:not([data-motion="off"]) .page-head > .hero-queue i { animation: hero-qin .6s calc(100ms + var(--q, 0) * 37ms) both; }
  html:not([data-motion="off"]) .page-head > .hero-queue:not(.hero-queue--scan) i.own { animation: hero-qin .6s both, hero-own 1.2s 2.4s both; }
  html:not([data-motion="off"]) .page-head > .hero-queue:not(.hero-queue--scan) i.own::after, html:not([data-motion="off"]) .page-head > .hero-queue i.own b { animation: hero-bracket .6s 3.2s both; }
  html:not([data-motion="off"]) .page-head > .hero-queue--scan::after { content: ""; position: absolute; top: -.875rem; bottom: -.875rem; left: 0; width: 3px; background: var(--accent-fill, var(--accent-dark)); animation: hero-beam 2.4s .3s ease-in-out both; }
}
@keyframes hero-qin { from { opacity: 0; transform: translateY(-.875rem); } }
@keyframes hero-own { 40% { transform: scale(1.5); } }
@keyframes hero-bracket { from { opacity: 0; transform: scale(1.8); } }
@keyframes hero-beam { from { transform: translateX(0); opacity: 1; } 90% { opacity: 1; } to { transform: translateX(min(var(--max), 100vw - var(--gutter) * 2)); opacity: 0; } }
.page-head > .hero-queue i:nth-child(1) { --q: 1; }
.page-head > .hero-queue i:nth-child(2) { --q: 2; }
.page-head > .hero-queue i:nth-child(3) { --q: 3; }
.page-head > .hero-queue i:nth-child(4) { --q: 4; }
.page-head > .hero-queue i:nth-child(5) { --q: 5; }
.page-head > .hero-queue i:nth-child(6) { --q: 6; }
.page-head > .hero-queue i:nth-child(7) { --q: 7; }
.page-head > .hero-queue i:nth-child(8) { --q: 8; }
.page-head > .hero-queue i:nth-child(9) { --q: 9; }
.page-head > .hero-queue i:nth-child(10) { --q: 10; }
.page-head > .hero-queue i:nth-child(11) { --q: 11; }
.page-head > .hero-queue i:nth-child(12) { --q: 12; }
.page-head > .hero-queue i:nth-child(13) { --q: 13; }
.page-head > .hero-queue i:nth-child(14) { --q: 14; }
.page-head > .hero-queue i:nth-child(15) { --q: 15; }
.page-head > .hero-queue i:nth-child(16) { --q: 16; }
.page-head > .hero-queue i:nth-child(17) { --q: 17; }
.page-head > .hero-queue i:nth-child(18) { --q: 18; }
.page-head > .hero-queue i:nth-child(19) { --q: 19; }
.page-head > .hero-queue i:nth-child(20) { --q: 20; }
.page-head > .hero-queue i:nth-child(21) { --q: 21; }
.page-head > .hero-queue i:nth-child(22) { --q: 22; }
.page-head > .hero-queue i:nth-child(23) { --q: 23; }
.page-head > .hero-queue i:nth-child(24) { --q: 24; }

/* 流動線（範例站 Netskope）：5 條虛線曲線持續往右流，左下一行鏤空大字。 */
.page-head > .hero-streams { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; opacity: .55; pointer-events: none; }
.page-head > .hero-streams path { fill: none; stroke: var(--accent-dark); stroke-width: 1.4; stroke-dasharray: 3 14; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.page-head > .hero-streams path:nth-child(2n) { stroke: color-mix(in srgb, var(--accent-dark) 55%, var(--soft)); opacity: .7; }
@media (prefers-reduced-motion: no-preference) {
  html:not([data-motion="off"]) .page-head > .hero-streams path { animation: hero-flow 3.2s linear infinite; }
  html:not([data-motion="off"]) .page-head > .hero-streams path:nth-child(2n) { animation-duration: 4.6s; }
  html:not([data-motion="off"]) .page-head > .hero-streams path:nth-child(3n) { animation-duration: 6s; }
}
@keyframes hero-flow { to { stroke-dashoffset: -34; } }
.page-head > .hero-ghost { position: absolute; left: -1vw; bottom: -2vw; z-index: -1; color: color-mix(in srgb, var(--accent-dark) 10%, transparent); font-size: clamp(5.625rem, 20vw, 21.25rem); font-weight: 900; line-height: 1; letter-spacing: -.04em; white-space: nowrap; pointer-events: none; user-select: none; contain: layout paint; }

/* 六角聚光（範例站 CloudCoffer）：光暈與六角框跟著滑鼠（--mx／--my，chrome.js 寫入；閒置時自己緩慢巡游），光暈外圍壓暗；六角環在右側描線後緩慢脈動。 */
.page-head:has(> .hero-glow) { --mx: 72%; --my: 34%; }
.page-head > .hero-glow { position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(circle clamp(7.5rem, 16vw, 15rem) at var(--mx) var(--my), color-mix(in srgb, var(--accent-dark) 16%, transparent), transparent 70%),
    radial-gradient(circle clamp(10.5rem, 22vw, 20.5rem) at var(--mx) var(--my), transparent 32%, color-mix(in srgb, var(--deeper) 45%, transparent) 100%); }
.page-head > .hero-hex { position: absolute; left: 0; top: 0; z-index: -1; width: 9.375rem; height: auto; margin: -5.375rem 0 0 -4.6875rem; opacity: 0; pointer-events: none; transform: translate(var(--mx), var(--my)); transition: opacity .6s; }
.page-head > .hero-hex.is-on { opacity: .9; }
.page-head > .hero-hex polygon { fill: none; stroke: var(--accent-dark); stroke-width: 1.2; vector-effect: non-scaling-stroke; }
.page-head > .hero-hex .half { fill: color-mix(in srgb, var(--accent-dark) 14%, transparent); stroke: none; }
.page-head > .hero-hex .axis { fill: none; stroke: color-mix(in srgb, var(--paper) 30%, transparent); stroke-width: 1; vector-effect: non-scaling-stroke; }
.page-head > .hero-hex polygon + polygon { stroke: color-mix(in srgb, var(--paper) 30%, transparent); transform: scale(.72); transform-origin: 50% 50%; }
/* issue 233：六角圖不超過頁首內容區（頂端 6rem 起，底部留最大下內距 5.5rem），頁首變矮時跟著縮小。 */
.page-head > .hero-rings { position: absolute; right: var(--pad, var(--gutter)); top: calc(50% + 2.5rem); translate: 0 -50%; z-index: -1; width: auto; height: min(50vh, 34rem); max-height: calc(100% - 11.5rem); aspect-ratio: .866; pointer-events: none; }
.page-head > .hero-rings polygon { fill: none; stroke: var(--accent-dark); stroke-width: .22; }
.page-head > .hero-rings polygon:nth-child(2) { stroke: color-mix(in srgb, var(--paper) 30%, transparent); }
.page-head > .hero-rings polygon:nth-child(3) { stroke: color-mix(in srgb, var(--paper) 16%, transparent); }
@media (prefers-reduced-motion: no-preference) {
  html:not([data-motion="off"]) .page-head > .hero-rings polygon { stroke-dasharray: 1; stroke-dashoffset: 1; animation: hero-draw 1.8s var(--ease) .1s forwards; }
  html:not([data-motion="off"]) .page-head > .hero-rings polygon:nth-child(2) { animation-delay: .3s; }
  html:not([data-motion="off"]) .page-head > .hero-rings polygon:nth-child(3) { animation-delay: .5s; }
  html:not([data-motion="off"]) .page-head > .hero-rings .pulse { animation: hero-draw 1.8s var(--ease) .7s forwards, hero-pulse 7s 3s ease-in-out infinite; }
}
/* 六角環貼近原廠 Logo（issue 216）：左半淡金實心、右半留白、中央立方體三稜線與垂直分界。 */
.page-head > .hero-rings .half { fill: color-mix(in srgb, var(--accent-dark) 12%, transparent); stroke: none; }
.page-head > .hero-rings :is(.axis, .cube) { fill: none; stroke: color-mix(in srgb, var(--accent-dark) 70%, transparent); stroke-width: .22; stroke-linejoin: miter; }
.page-head > .hero-rings .axis { stroke: color-mix(in srgb, var(--paper) 30%, transparent); }
/* 偵測未知威脅：靜態只留「被鎖定的白點」；動態時三條流量線的封包由左往右穿過六角，白點停在鎖定環中，鎖定環呼吸。只動 transform／opacity。 */
.page-head > .hero-rings .pkt { fill: var(--accent-dark); opacity: 0; transform-box: view-box; }
.page-head > .hero-rings .pkt.threat { fill: var(--paper); opacity: 1; transform: translateX(56px); }
.page-head > .hero-rings .lock { fill: none; stroke: var(--paper); stroke-width: .3; opacity: .9; transform-box: fill-box; transform-origin: 50% 50%; }
@media (prefers-reduced-motion: no-preference) {
  html:not([data-motion="off"]) .page-head > .hero-rings .pkt:not(.threat) { animation: hero-packet 5.5s linear infinite; }
  html:not([data-motion="off"]) .page-head > .hero-rings .pkt:nth-child(2) { animation-delay: -1.8s; }
  html:not([data-motion="off"]) .page-head > .hero-rings .pkt:nth-child(3) { animation-delay: -3.4s; animation-duration: 6.5s; }
  html:not([data-motion="off"]) .page-head > .hero-rings .pkt.threat { opacity: 0; animation: hero-threat 9s ease-in-out 2.4s infinite; }
  html:not([data-motion="off"]) .page-head > .hero-rings .lock { opacity: 0; animation: hero-lock 9s ease-in-out 2.4s infinite; }
}
@keyframes hero-packet { 0% { transform: translateX(0); opacity: 0; } 12%, 80% { opacity: .55; } 100% { transform: translateX(86px); opacity: 0; } }
@keyframes hero-threat { 0% { transform: translateX(0); opacity: 0; } 10% { opacity: 1; } 45%, 85% { transform: translateX(56px); opacity: 1; } 100% { transform: translateX(56px); opacity: 0; } }
@keyframes hero-lock { 0%, 40% { transform: scale(2); opacity: 0; } 50% { transform: scale(1); opacity: .9; } 65% { transform: scale(1.25); opacity: .5; } 80% { transform: scale(1); opacity: .9; } 88%, 100% { transform: scale(1); opacity: 0; } }
@keyframes hero-draw { to { stroke-dashoffset: 0; } }
@keyframes hero-pulse { 50% { opacity: .35; } }
@media (max-width: 61.99rem) { .page-head > .hero-rings { opacity: .45; height: min(36vh, 22rem); top: 4.5rem; } .page-head > .hero-hex { display: none; } }

/* 格線（範例站 Illumio）：72px 淡格線，往右漸顯。 */
.page-head > .hero-gridlines { position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .55;
  background: linear-gradient(color-mix(in srgb, var(--paper) 20%, transparent) 1px, transparent 1px) 0 0 / 4.5rem 4.5rem, linear-gradient(90deg, color-mix(in srgb, var(--paper) 20%, transparent) 1px, transparent 1px) 0 0 / 4.5rem 4.5rem;
  -webkit-mask: linear-gradient(100deg, transparent 30%, var(--ink) 100%); mask: linear-gradient(100deg, transparent 30%, var(--ink) 100%); }

/* v91：頁首深藍底（頁面選項「頁首深藍底」，_Layout 加 page-head--navy）：底色、背景圖遮罩跟著變藍。 */
.page-head.page-head--navy { --deeper: var(--navy); }
/* fix9：深色區段裡的分頁選擇器（面板、分頁鈕、步驟、規格表改深色版配色）。 */
.page-blocks .pp-section--band .pp-sel-tabs button { border-color: var(--on-dark-line); background: transparent; color: var(--paper); }
.page-blocks .pp-section--band .pp-sel-tabs button:hover { border-color: var(--accent-dark); }
.page-blocks .pp-section--band .pp-sel-tabs button[aria-selected="true"] { border-color: var(--accent-dark); background: var(--accent-fill, var(--accent-dark)); color: var(--accent-on); }
.page-blocks .pp-section--band .pp-sel-tabs button:focus-visible { outline-color: var(--paper); }
.page-blocks .pp-section--band .pp-meter i { background: var(--on-dark-line); }
.page-blocks .pp-section--band .pp-meter i.is-on { background: var(--accent-fill, var(--accent-dark)); }
.page-blocks .pp-section--band .pp-sel-tabs button[aria-selected="true"] .pp-meter i.is-on { background: var(--accent-on); }
.page-blocks .pp-section--band .pp-sel-tabs button[aria-selected="true"] .pp-meter i:not(.is-on) { background: color-mix(in srgb, var(--accent-on) 30%, var(--accent-dark)); }
.page-blocks .pp-section--band .pp-sel-panel { border-color: var(--on-dark-line); background: color-mix(in srgb, var(--paper) 5%, var(--deeper)); }
.page-blocks .pp-section--band .pp-sel-panel :is(h2, h3) { color: var(--paper); }
.page-blocks .pp-section--band .pp-sel-panel > p:not(.pp-sel-label), .page-blocks .pp-section--band .pp-sel-panel > .pp-meter { color: var(--muted-on-dark); }
.page-blocks .pp-section--band .pp-sel-label { color: var(--accent-dark); }
.page-blocks .pp-section--band .pp-sel-steps li { background: color-mix(in srgb, var(--paper) 10%, var(--deeper)); color: var(--paper); }
.page-blocks .pp-section--band .pp-sel-steps li + li::after { color: var(--muted-on-dark); }
.page-blocks .pp-section--band .pp-sel-specs, .page-blocks .pp-section--band .pp-sel-specs > div { border-color: var(--on-dark-line); }
.page-blocks .pp-section--band .pp-sel-specs dt { color: var(--muted-on-dark); }
.page-blocks .pp-section--band .pp-sel-specs dd { color: var(--paper); }
.page-blocks .pp-section--band .pp-sel-specs .is-strong dd { color: var(--accent-dark); }

/* issue 236：頁首動畫圖（hfx）。寬螢幕與右側場景相同：左文右圖，圖在右欄、跨所有文字列、垂直置中；窄螢幕排在文字下方、最寬 36rem。
   動畫圖只是 aria-hidden 的裝飾，不接收指標事件；各效果的樣式在 css/hero-fx/{代號}.css（只在用到時載入）。 */
.page-head > .hfx { position: relative; z-index: 1; width: 100%; max-width: 36rem; margin: clamp(1.5rem, 4vw, 2.5rem) auto 0; aspect-ratio: 700 / 650; pointer-events: none; font-family: var(--font-body); }
.page-head > .hfx > svg { display: block; width: 100%; height: 100%; overflow: hidden; }
@media (min-width: 61.3125rem) {
  #main.inner-main .page-head.page-head:has(> .hfx) { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); column-gap: clamp(2rem, 4vw, 4rem); align-content: start; justify-items: start; }
  #main.inner-main .page-head.page-head:has(> .hfx) > :not(.hero-bg, [aria-hidden="true"]) { grid-column: 1; }
  #main.inner-main .page-head.page-head:has(> .hfx) h1 { font-size: clamp(2.5rem, 5vw, 4.5rem); }
  #main.inner-main .page-head.page-head:has(> .hfx) > .breadcrumb { width: fit-content; }
  #main.inner-main .page-head.page-head:has(> .hfx) > .hfx { grid-column: 2; grid-row: 1 / span 12; align-self: center; justify-self: stretch; max-width: none; margin: 0; }
}

/* issue 371：互動圖共用的「可以點」提示（js/scenes/click-hint.js）。提示行、泡泡與圓圈都跟著品牌強調色（淺底用 --accent-ink、深色帶用 --accent-dark；Netskope 為青藍），前面一個空心圓表示「點」；
   起點泡泡與點按圓圈掛在第一個控制項上（.cfh-host 補 position: relative），第一次操作後由 JS 移除。減少動態時泡泡與圓圈靜止但仍顯示。 */
.page-blocks .cfh-line { display: flex; align-items: center; gap: .5rem; margin: 0 0 .875rem; color: var(--cfh-line, var(--accent-ink)); font-size: .9375rem; font-weight: 700; line-height: 1.5; }
.page-blocks .cfh-line::before { content: ""; flex: none; width: .875rem; height: .875rem; border: 2px solid currentColor; border-radius: 50%; }
.page-blocks .cfh-line.is-done::before { background: currentColor; }
.page-blocks :is(.pp-section--band, .pp-section--dark) .cfh-line { --cfh-line: var(--accent-dark); }
.page-blocks .cfh-host { position: relative; }
.page-blocks .cfh-tip { position: absolute; left: 0; bottom: calc(100% + .625rem); z-index: 3; padding: .4375rem .75rem; border-radius: .625rem; background: var(--accent-fill, var(--accent-dark)); color: var(--navy); font-size: .875rem; font-weight: 800; line-height: 1.4; white-space: nowrap; pointer-events: none; box-shadow: 0 .5rem 1.5rem -.625rem var(--accent-dark); animation: cfh-bob 1.6s ease-in-out infinite; }
.page-blocks .cfh-tip::after { content: ""; position: absolute; left: 1.25rem; top: 100%; border: .4375rem solid transparent; border-bottom: 0; border-top-color: var(--accent-dark); }
.page-blocks .cfh-tap { position: absolute; left: 50%; top: 50%; z-index: 2; width: 2.25rem; height: 2.25rem; margin: -1.125rem 0 0 -1.125rem; border: 2px solid var(--accent-dark); border-radius: 50%; pointer-events: none; animation: cfh-tap 1.4s ease-out infinite; }
@keyframes cfh-bob { 50% { transform: translateY(-.25rem); } }
@keyframes cfh-tap { 0% { opacity: .9; transform: scale(.5); } 100% { opacity: 0; transform: scale(1.4); } }
@media (prefers-reduced-motion: reduce) { .page-blocks .cfh-tip, .page-blocks .cfh-tap { animation: none; } .page-blocks .cfh-tap { opacity: .7; } }
html[data-motion="off"] .page-blocks :is(.cfh-tip, .cfh-tap) { animation: none; }

/* issue 373：數字帶勾了「數字滾動」時，跑數的同時每格有一道光帶由左掃到右（只播一次；區段在畫面外時 motion.css 會暫停，捲到才播）。減少動態時不播。 */
.page-blocks .pp-stat:has([data-count-now]) { position: relative; overflow: hidden; }
.page-blocks .pp-stat:has([data-count-now])::after { content: ""; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 30%, color-mix(in srgb, var(--accent) 20%, transparent) 50%, transparent 70%); transform: translateX(-100%); pointer-events: none; animation: pp-stat-sweep 1.6s .2s ease-out 1 forwards; }
.page-blocks .pp-stat:nth-child(2):has([data-count-now])::after { animation-delay: .35s; }
.page-blocks .pp-stat:nth-child(3):has([data-count-now])::after { animation-delay: .5s; }
.page-blocks .pp-stat:nth-child(4):has([data-count-now])::after { animation-delay: .65s; }
@keyframes pp-stat-sweep { to { transform: translateX(100%); } }
@media (prefers-reduced-motion: reduce) { .page-blocks .pp-stat:has([data-count-now])::after { animation: none; transform: translateX(100%); } }
html[data-motion="off"] .page-blocks .pp-stat:has([data-count-now])::after { animation: none; transform: translateX(100%); }

/* issue 374：模擬型互動圖共用的「開始模擬」引導（js/scenes/start-guide.js）。顏色跟著品牌強調色（--accent-dark）；遮罩蓋住互動面板，
   開始鈕固定在面板中間（面板比一個畫面高時放在離頂端約半個畫面處），捲動時不移動；減少動態時光暈、泡泡與圓圈靜止。 */
.page-blocks .sg-covered { position: relative; }
.page-blocks .sg-cover { position: absolute; inset: -.25rem; z-index: 6; border-radius: 1.125rem; background: color-mix(in srgb, var(--deeper) 74%, transparent); backdrop-filter: blur(3px); }
.page-blocks .sg-cover-in { position: absolute; left: 50%; top: min(50%, 45vh); width: min(100% - 3rem, 26rem); transform: translate(-50%, -50%); display: grid; justify-items: center; gap: .75rem; text-align: center; }
.page-blocks .sg-go { display: inline-flex; align-items: center; gap: .625rem; padding: .875rem 1.625rem; border: 0; border-radius: 999px; background: var(--accent-fill, var(--accent-dark)); color: var(--navy); font: inherit; font-size: 1.125rem; font-weight: 900; cursor: pointer; animation: sg-glow 2s ease-out infinite; }
.page-blocks .sg-go::before { content: ""; width: 0; height: 0; border-style: solid; border-width: .4375rem 0 .4375rem .75rem; border-color: transparent transparent transparent currentColor; }
.page-blocks .sg-go:hover { background: var(--paper); }
.page-blocks .sg-go:focus-visible { outline: 3px solid var(--paper); outline-offset: 3px; }
.page-blocks .sg-lead { max-width: 34ch; margin: 0; color: var(--paper); font-size: .875rem; }
@keyframes sg-glow { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent-dark) 60%, transparent); } 100% { box-shadow: 0 0 0 1.125rem transparent; } }
.page-blocks .sg-steps { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 0 1rem; padding: 0; list-style: none; }
.page-blocks .sg-step { display: flex; align-items: center; gap: .5rem; padding: .3125rem .875rem .3125rem .375rem; border: 1.5px solid color-mix(in srgb, currentColor 30%, transparent); border-radius: 999px; font-size: .875rem; font-weight: 700; opacity: .75; }
.page-blocks .sg-no { display: grid; place-items: center; flex: none; width: 1.5rem; height: 1.5rem; border-radius: 50%; background: color-mix(in srgb, currentColor 22%, transparent); font-size: .8125rem; font-weight: 800; }
.page-blocks .sg-step.now { border-color: var(--accent-dark); opacity: 1; }
.page-blocks .sg-step.now .sg-no { background: var(--accent-fill, var(--accent-dark)); color: var(--navy); }
.page-blocks .sg-step.ok { border-color: var(--arch-green); opacity: 1; }
.page-blocks .sg-step.ok .sg-no { background: var(--arch-green); color: var(--navy); }
.page-blocks .sg-host { position: relative; }
.page-blocks .sg-tip { position: absolute; left: 0; bottom: calc(100% + .625rem); z-index: 3; padding: .4375rem .75rem; border-radius: .625rem; background: var(--accent-fill, var(--accent-dark)); color: var(--navy); font-size: .875rem; font-weight: 800; line-height: 1.4; white-space: nowrap; pointer-events: none; box-shadow: 0 .5rem 1.5rem -.625rem var(--accent-dark); animation: cfh-bob 1.6s ease-in-out infinite; }
.page-blocks .sg-tip::after { content: ""; position: absolute; left: 1.25rem; top: 100%; border: .4375rem solid transparent; border-bottom: 0; border-top-color: var(--accent-dark); }
.page-blocks .sg-tap { position: absolute; left: 50%; top: 50%; z-index: 2; width: 2.25rem; height: 2.25rem; margin: -1.125rem 0 0 -1.125rem; border: 2px solid var(--accent-dark); border-radius: 50%; pointer-events: none; animation: cfh-tap 1.4s ease-out infinite; }
@media (prefers-reduced-motion: reduce) { .page-blocks .sg-go, .page-blocks .sg-tip, .page-blocks .sg-tap { animation: none; } .page-blocks .sg-tap { opacity: .7; } }
html[data-motion="off"] .page-blocks :is(.sg-go, .sg-tip, .sg-tap) { animation: none; }