/* issue 241 場景 solution-ransom-chain：勒索攻擊鏈三階段互動圖（HTML 排版，不是圖片），整寬放在頁首大標下方（.hero-wide）。頁首是深色底，元件自己是深色面板。
   顏色只讀官網 token：藍＝--cloudforce-blue、琥珀＝--arch-orange、珊瑚＝--arch-coral，底與字用 --deep／--deeper／--paper／--muted-on-dark。
   沒有 JS 或減少動態時直接是完整狀態；淡化、轉場、脈動與光點全部在檔案最後的 no-preference 區塊內，由 JS 加在根節點的屬性啟動。 */
.page-blocks .rc { position: relative; display: grid; gap: 1rem; min-width: 0; padding: 1.25rem; border: 1px solid color-mix(in srgb, var(--paper) 10%, transparent); border-radius: 1.5rem; background: linear-gradient(180deg, var(--deep), var(--deeper)); color: var(--paper); overflow: hidden; text-align: left; }
.page-blocks .rc > * { min-width: 0; }
.page-blocks .rc-sr { position: absolute; width: 1px; height: 1px; margin: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.page-blocks .rc-tools { display: flex; justify-content: flex-end; }
.page-blocks .rc-btn { all: unset; box-sizing: border-box; display: inline-flex; align-items: center; min-height: 2.75rem; padding: .35rem 1.1rem; border: 1px solid color-mix(in srgb, var(--paper) 28%, transparent); border-radius: var(--r-pill); background: color-mix(in srgb, var(--paper) 8%, transparent); color: var(--paper); font-size: .9375rem; cursor: pointer; }
.page-blocks .rc-btn[hidden] { display: none; }
.page-blocks .rc-btn:hover { background: color-mix(in srgb, var(--paper) 16%, transparent); }
.page-blocks .rc-btn:focus-visible, .page-blocks .rc-stage:focus-visible { outline: 3px solid var(--paper); outline-offset: 3px; }
.page-blocks .rc-tools:has(.rc-btn[hidden]) { display: none; }
.page-blocks .rc-stages { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; }
.page-blocks .rc-stages > * { min-width: 0; }
.page-blocks .rc-c-blue { --rc-c: var(--cloudforce-blue); }
.page-blocks .rc-c-amber { --rc-c: var(--arch-orange); }
.page-blocks .rc-c-coral { --rc-c: var(--arch-coral); }

.page-blocks .rc-stage { all: unset; box-sizing: border-box; position: relative; display: flex; flex-direction: column; justify-content: flex-start; width: 100%; padding: 1.5rem; border: 1.5px solid var(--rc-c); border-radius: 1.6rem; background: linear-gradient(160deg, color-mix(in srgb, var(--rc-c) 20%, var(--deep)), color-mix(in srgb, var(--rc-c) 5%, var(--deeper))); box-shadow: 0 0 1.75rem color-mix(in srgb, var(--rc-c) 22%, transparent); color: var(--paper); text-align: left; cursor: pointer; }
.page-blocks .rc-stage:disabled { cursor: default; }
.page-blocks .rc-stage > span { display: block; }
.page-blocks .rc-stage > .rc-badge { display: flex; width: fit-content; max-width: 100%; align-items: center; gap: .75rem; padding: .4rem 1.1rem .4rem .5rem; border: 1.5px solid var(--rc-c); border-radius: 999px; background: color-mix(in srgb, var(--rc-c) 14%, transparent); font-size: 1.3rem; font-weight: 800; line-height: 1.3; }
.page-blocks .rc-num { display: inline-grid; flex: none; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: 50%; background: var(--rc-c); color: var(--deeper); font-size: 1.1rem; font-weight: 800; }
.page-blocks .rc-desc { margin-top: 1.1rem; min-height: 3.2rem; color: var(--muted-on-dark); font-size: 1rem; font-weight: 500; line-height: 1.6; }
.page-blocks .rc-desc > span { display: block; }
.page-blocks .rc-scene { margin-top: 2rem; }
.page-blocks .rc-row { display: flex; justify-content: space-between; align-items: flex-start; padding: 0 1rem; }
.page-blocks .rc-node { position: relative; display: flex; flex-direction: column; align-items: center; width: 7rem; text-align: center; }
.page-blocks .rc-node--s { width: 5rem; }
.page-blocks .rc-circle { position: relative; display: grid; place-items: center; width: 5rem; height: 5rem; margin: .25rem 0; border: 2px solid var(--rc-c); border-radius: 50%; background: radial-gradient(circle at 50% 35%, color-mix(in srgb, var(--rc-c) 18%, var(--deep)), var(--deep)); box-shadow: 0 0 1.6rem color-mix(in srgb, var(--rc-c) 45%, transparent), inset 0 0 1rem color-mix(in srgb, var(--rc-c) 18%, transparent); }
.page-blocks .rc-circle--lg { width: 5.5rem; height: 5.5rem; margin: 0; }
.page-blocks .rc-ico { flex: none; width: 2.4rem; height: 2.4rem; fill: none; stroke: var(--rc-c); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.page-blocks .rc-ico--s { width: 1.2rem; height: 1.2rem; stroke-width: 1.8; }
.page-blocks .rc-ico--m { width: 1.9rem; height: 1.9rem; }
.page-blocks .rc-label { margin-top: 1.1rem; color: var(--paper); font-size: 1.1rem; font-weight: 700; line-height: 1.35; white-space: nowrap; }
.page-blocks .rc-line { display: flex; flex: 1; align-items: center; align-self: flex-start; height: 5.5rem; min-width: 1rem; margin: 0 .25rem; }
.page-blocks .rc-line::before { content: ""; flex: 1; border-top: 3px solid var(--rc-c); }
.page-blocks .rc-line--flow::before, .page-blocks .rc-line--block::before { border-top-style: dashed; }
.page-blocks .rc-line--flow::after, .page-blocks .rc-line--arrow::after { content: ""; border-top: .5rem solid transparent; border-bottom: .5rem solid transparent; border-left: .8rem solid var(--rc-c); }
.page-blocks .rc-line--block { position: relative; }
.page-blocks .rc-x { position: absolute; left: 50%; top: 50%; display: grid; place-items: center; width: 1.9rem; height: 1.9rem; margin: -.95rem 0 0 -.95rem; border: 2px solid var(--arch-coral); border-radius: 50%; background: var(--deep); }
.page-blocks .rc-x svg { width: .85rem; height: .85rem; fill: none; stroke: var(--arch-coral); stroke-width: 3; stroke-linecap: round; }
.page-blocks .rc-pill, .page-blocks .rc-chip { display: inline-flex; align-items: center; justify-content: center; gap: .45rem; border: 1.5px solid color-mix(in srgb, var(--rc-c) 75%, transparent); border-radius: 999px; background: color-mix(in srgb, var(--rc-c) 11%, transparent); color: var(--paper); font-weight: 700; }
.page-blocks .rc-pill { margin-top: 1.1rem; padding: .35rem .8rem; font-size: .95rem; white-space: nowrap; }
.page-blocks .rc-chip { padding: .55rem 1.2rem; font-size: 1.05rem; line-height: 1.3; }
.page-blocks .rc-chiprow { display: flex; justify-content: center; margin-top: 1.1rem; }
.page-blocks .rc-chiprow--end { justify-content: flex-end; padding-right: 1.5rem; }
.page-blocks .rc-ring { position: absolute; left: 50%; top: 2.85rem; width: 7.6rem; height: 7.6rem; margin: -3.8rem 0 0 -3.8rem; border: 2.4px dashed var(--arch-coral); border-radius: 50%; pointer-events: none; }
.page-blocks .rc-lock { position: absolute; right: -.55rem; top: -.55rem; display: grid; place-items: center; width: 2.1rem; height: 2.1rem; border: 2px solid var(--arch-orange); border-radius: 50%; background: var(--deep); }
.page-blocks .rc-lock .rc-ico { stroke: var(--arch-orange); stroke-width: 2.2; }

/* 階段一往階段二的連線：寬螢幕橫向（掛在最後一個節點的圓上）、窄螢幕直向 */
.page-blocks .rc-out { position: absolute; left: calc(100% + .1rem); top: 50%; z-index: 2; width: 7.4rem; height: 0; border-top: 3px solid var(--cloudforce-blue); }
.page-blocks .rc-out::after { content: ""; position: absolute; right: -.1rem; top: -.55rem; border-top: .5rem solid transparent; border-bottom: .5rem solid transparent; border-left: .8rem solid var(--cloudforce-blue); }
.page-blocks .rc-out i, .page-blocks .rc-vlink i { position: absolute; width: 1px; height: 1px; }
.page-blocks .rc-out i:first-child { left: 0; top: -1px; }
.page-blocks .rc-out i:last-child { right: 0; top: -1px; }
.page-blocks .rc-vlink { display: none; position: relative; justify-self: center; width: 3px; height: 2.6rem; background: var(--cloudforce-blue); }
.page-blocks .rc-vlink::after { content: ""; position: absolute; left: -.5rem; bottom: -.1rem; border-top: .8rem solid var(--cloudforce-blue); border-right: .65rem solid transparent; border-left: .65rem solid transparent; }
.page-blocks .rc-vlink i:first-child { left: 0; top: 0; }
.page-blocks .rc-vlink i:last-child { left: 0; bottom: 0; }

/* 底列 */
.page-blocks .rc-bottom { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: .5rem; padding: 1.25rem 0; border: 1px solid color-mix(in srgb, var(--paper) 14%, transparent); border-radius: 1.5rem; background: color-mix(in srgb, var(--paper) 4%, transparent); }
.page-blocks .rc-bi { display: flex; align-items: center; gap: 1.1rem; padding: .25rem 1.5rem; }
.page-blocks .rc-bi + .rc-bi { border-left: 1px solid color-mix(in srgb, var(--paper) 14%, transparent); }
.page-blocks .rc-bi-ico { display: grid; flex: none; place-items: center; width: 3.6rem; height: 3.6rem; border: 1.6px solid color-mix(in srgb, var(--rc-c) 75%, transparent); border-radius: 50%; background: color-mix(in srgb, var(--rc-c) 14%, transparent); }
.page-blocks .rc-bi strong { display: block; color: var(--rc-c); font-size: 1.45rem; font-weight: 800; line-height: 1.3; }
.page-blocks .rc-bi div span { display: block; color: var(--muted-on-dark); font-size: 1.02rem; font-weight: 500; }

/* 攻擊光點（JS 才會用到，沒有播放時不顯示） */
.page-blocks .rc-dot { position: absolute; left: 0; top: 0; z-index: 5; width: 1rem; height: 1rem; margin: -.5rem 0 0 -.5rem; border-radius: 50%; background: var(--arch-coral); box-shadow: 0 0 .5rem var(--arch-coral), 0 0 1.4rem var(--arch-coral); opacity: 0; pointer-events: none; }
.page-blocks .rc-dot.rc-is-show { opacity: 1; }
.page-blocks .rc-dot--def { background: var(--cloudforce-blue); box-shadow: 0 0 .5rem var(--cloudforce-blue), 0 0 1.4rem var(--cloudforce-blue); }
/* 點選某一階段時其他階段淡化（靜態，不是動畫） */
.page-blocks .rc-is-dim { opacity: .3; }

/* 寬螢幕：收緊垂直留白，整張圖的長寬比維持接近頁首圖的 21:9 */
@media (min-width: 62.0625rem) {
  .page-blocks .rc { gap: .75rem; padding: 1rem 1.25rem; }
  .page-blocks .rc-btn { min-height: 2.5rem; }
  .page-blocks .rc-stage { padding: 1.25rem 1.5rem 1.4rem; }
  .page-blocks .rc-desc { margin-top: .9rem; min-height: 0; }
  .page-blocks .rc-scene { margin-top: 1.5rem; }
  .page-blocks .rc-chiprow { margin-top: .9rem; }
  .page-blocks .rc-bottom { margin-top: 0; padding: .9rem 0; }
}
/* 中寬螢幕（三欄但每欄較窄）：節點、連線與字級縮一級，同一段的三個節點才排得下 */
@media (min-width: 62.0625rem) and (max-width: 80rem) {
  .page-blocks .rc-stage { padding: 1rem 1rem 1.2rem; }
  .page-blocks .rc-stage > .rc-badge { font-size: 1.1rem; }
  .page-blocks .rc-desc { font-size: .9375rem; }
  .page-blocks .rc-row { padding: 0; }
  .page-blocks .rc-node { width: 5.4rem; }
  .page-blocks .rc-node--s { width: 3.8rem; }
  .page-blocks .rc-circle { width: 3.8rem; height: 3.8rem; }
  .page-blocks .rc-circle--lg { width: 4.4rem; height: 4.4rem; }
  .page-blocks .rc-ico { width: 1.9rem; height: 1.9rem; }
  .page-blocks .rc-ico--s { width: 1.1rem; height: 1.1rem; }
  .page-blocks .rc-label { font-size: 1rem; }
  .page-blocks .rc-pill { padding: .3rem .45rem; font-size: .8rem; }
  .page-blocks .rc-pill .rc-ico { display: none; }
  .page-blocks .rc-line { height: 4.4rem; min-width: .5rem; margin: 0 .1rem; }
  .page-blocks .rc-out { width: 3.9rem; }
  .page-blocks .rc-ring { top: 2.3rem; width: 6.2rem; height: 6.2rem; margin: -3.1rem 0 0 -3.1rem; }
  .page-blocks .rc-chiprow--end { padding-right: 0; }
  .page-blocks .rc-chip { padding: .45rem .9rem; font-size: .95rem; }
  .page-blocks .rc-bi { padding: .25rem 1rem; gap: .8rem; }
  .page-blocks .rc-bi strong { font-size: 1.2rem; }
  .page-blocks .rc-bi div span { font-size: .9375rem; }
}
@media (max-width: 62rem) {
  .page-blocks .rc-stages { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .page-blocks .rc-stage + .rc-stage { margin-top: 1.1rem; }
  .page-blocks .rc-vlink { display: block; }
  .page-blocks .rc-out { display: none; }
  .page-blocks .rc-bottom { grid-template-columns: 1fr; padding: .75rem 0; }
  .page-blocks .rc-bi + .rc-bi { border-top: 1px solid color-mix(in srgb, var(--paper) 14%, transparent); border-left: 0; }
  .page-blocks .rc-bi { padding: .9rem 1.25rem; }
  .page-blocks .rc-stage { padding: 1.25rem; }
  .page-blocks .rc-row { max-width: 36rem; margin: 0 auto; }
}
@media (max-width: 30rem) {
  .page-blocks .rc { padding: .75rem; }
  .page-blocks .rc-stage { padding: 1rem; }
  .page-blocks .rc-stage > .rc-badge { font-size: 1.15rem; }
  .page-blocks .rc-row { padding: 0; }
  .page-blocks .rc-node { width: 5.6rem; }
  .page-blocks .rc-node--s { width: 4.4rem; }
  .page-blocks .rc-circle { width: 4.2rem; height: 4.2rem; }
  .page-blocks .rc-circle--lg { width: 4.6rem; height: 4.6rem; }
  .page-blocks .rc-ico { width: 2rem; height: 2rem; }
  .page-blocks .rc-ico--s { width: 1.1rem; height: 1.1rem; }
  .page-blocks .rc-label { font-size: 1rem; }
  .page-blocks .rc-pill { padding: .3rem .55rem; font-size: .85rem; }
  .page-blocks .rc-ring { top: 2.1rem; width: 6.4rem; height: 6.4rem; margin: -3.2rem 0 0 -3.2rem; }
  .page-blocks .rc-line { height: 4.2rem; }
  .page-blocks .rc-x { width: 1.6rem; height: 1.6rem; margin: -.8rem 0 0 -.8rem; }
  .page-blocks .rc-chiprow--end { justify-content: center; padding-right: 0; }
  .page-blocks .rc-chip { font-size: .95rem; }
  .page-blocks .rc-bi strong { font-size: 1.25rem; }
}
@media (max-width: 22rem) {
  .page-blocks .rc-node { width: 4.8rem; }
  .page-blocks .rc-node--s { width: 3.8rem; }
  .page-blocks .rc-pill .rc-ico { display: none; }
  .page-blocks .rc-desc { font-size: .88rem; }
  .page-blocks .rc-line { height: 3.6rem; min-width: .4rem; margin: 0; }
  .page-blocks .rc-label { font-size: .9rem; }
  .page-blocks .rc-circle { width: 3.6rem; height: 3.6rem; }
  .page-blocks .rc-circle--lg { width: 4rem; height: 4rem; }
  .page-blocks .rc-ring { top: 1.8rem; width: 5.6rem; height: 5.6rem; margin: -2.8rem 0 0 -2.8rem; }
  .page-blocks .rc-pill { padding: .3rem .4rem; font-size: .78rem; }
}

/* 動態：只在允許動態時才淡化未點亮項目、轉場與脈動；沒有 JS 或減少動態時一律是完整狀態 */
@media (prefers-reduced-motion: no-preference) {
  html:not([data-motion="off"]) .page-blocks .rc[data-rc-anim] [data-rc-lit]:not(.rc-is-lit) { opacity: .26; }
  html:not([data-motion="off"]) .page-blocks .rc[data-rc-anim] .rc-stage[data-rc-lit]:not(.rc-is-lit) { opacity: .5; box-shadow: none; }
  html:not([data-motion="off"]) .page-blocks .rc[data-rc-anim] [data-rc-lit]:not(.rc-is-lit) .rc-circle { box-shadow: none; }
  html:not([data-motion="off"]) .page-blocks .rc[data-rc-motion] :is([data-rc-lit], .rc-stage, .rc-bi) { transition: opacity .45s ease; }
  html:not([data-motion="off"]) .page-blocks .rc[data-rc-motion] .rc-x { transition: transform .25s ease, background-color .25s ease, box-shadow .25s ease; }
  html:not([data-motion="off"]) .page-blocks .rc-x.rc-is-hit { background: var(--arch-coral); box-shadow: 0 0 1.2rem var(--arch-coral); transform: scale(1.45); }
  html:not([data-motion="off"]) .page-blocks .rc-x.rc-is-hit svg { stroke: var(--deep); }
  html:not([data-motion="off"]) .page-blocks .rc[data-rc-motion] .rc-ring.rc-is-lit { animation: rc-pulse 1.1s ease-out 2; }
  @keyframes rc-pulse { 0% { transform: scale(1); opacity: 1; } 60% { transform: scale(1.18); opacity: .4; } 100% { transform: scale(1); opacity: 1; } }
}
/* issue 262：攻擊鏈下方緊接的重點卡＝三段的產品說明：拉近間距，卡片依序加 ①②③，左框與編號沿用三段的藍／琥珀／珊瑚（編號字用深色維持對比）。 */
.page-blocks .pp-section:has(.pp-scene--solution-ransom-chain):has(+ .pp-section > .pp-container > .pp-cards--point) { padding-bottom: clamp(1rem, 2vw, 1.5rem); }
.page-blocks .pp-section:has(.pp-scene--solution-ransom-chain) + .pp-section:has(> .pp-container > .pp-cards--point) { padding-top: 0; }
.page-blocks .pp-section:has(.pp-scene--solution-ransom-chain) + .pp-section .pp-cards--point { counter-reset: rc-card; }
.page-blocks .pp-section:has(.pp-scene--solution-ransom-chain) + .pp-section .pp-card--point { --rc-c: var(--cloudforce-blue); counter-increment: rc-card; border-left-color: var(--rc-c); }
.page-blocks .pp-section:has(.pp-scene--solution-ransom-chain) + .pp-section .pp-card--point:nth-child(2) { --rc-c: var(--arch-orange); }
.page-blocks .pp-section:has(.pp-scene--solution-ransom-chain) + .pp-section .pp-card--point:nth-child(3) { --rc-c: var(--arch-coral); }
.page-blocks .pp-section:has(.pp-scene--solution-ransom-chain) + .pp-section .pp-card--point .pp-card-tag { display: flex; align-items: center; gap: .5rem; }
.page-blocks .pp-section:has(.pp-scene--solution-ransom-chain) + .pp-section .pp-card--point .pp-card-tag::before { content: counter(rc-card); display: grid; place-items: center; flex: none; width: 1.5rem; height: 1.5rem; border-radius: 50%; background: var(--rc-c); color: var(--deeper); font-size: .8125rem; font-weight: 800; }

/* issue 371：圖本身是深色底，提示行改用淺藍（共用樣式只替深色區段換色）。 */
.page-blocks .rc > .cfh-line { --cfh-line: var(--accent-dark); }