/*
 * 2026-10-02（issue 176）內頁共用元件：把首頁的設計語彙（token、字型、深淺交替、48px 圓角、eyebrow 加細線、大標、膠囊按鈕、
 * 描邊大字、顆粒）帶到所有內頁。只在非首頁載入（_Layout 依 IsHome 輸出 link），排在 site.css／chrome.css／motion.css 之後。
 * 全部規則收在 #main.inner-main 之下：site.css 裡照靜態樣板逐項釘住的舊規則（含 data-page-kind 組合選擇器）用 id 的優先權整批蓋過，
 * 不必逐條拆除；舊規則仍在原檔，之後第二階段分頁群細修時再清理。顏色與尺度只引用 design-tokens.css 的變數，這個檔案不出現色碼。
 * 動態：靜態樣式永遠有效；位移與循環動畫只在 prefers-reduced-motion: no-preference 且 html:not([data-motion="off"]) 之內。
 */
html:has(.inner-main) { overflow-x: clip; }
@property --bx { syntax: "<percentage>"; inherits: false; initial-value: -40%; }

#main.inner-main {
  /* 全站字體節奏（零特異度，任何元件自己的設定都能蓋過）：中文標題用嚴格斷行規則、標題 balance、段落與清單 pretty（避免孤字與標點落單）；
     標題只有在作者放了 <wbr> 提示（TxtBr）時才以 keep-all 依詞組斷行，沒有提示的標題維持逐字斷行，不會整行不斷。 */
  :where(h1, h2, h3) { line-break: strict; text-wrap: balance; }
  :where(h1, h2, h3):has(wbr) { word-break: keep-all; overflow-wrap: anywhere; }
  :where(p, li, dd, .lead) { line-break: strict; text-wrap: pretty; orphans: 2; widows: 2; }
  /* 頁首小標只在空白處換行（例如「場景 ／ 電腦加密勒索 ／ 入口在信箱」），不從詞中間斷成「入口在信／箱」；整段沒有空白又放不下時才任意斷行，不會溢出。 */
  & > .page-head > .eyebrow { word-break: keep-all; overflow-wrap: anywhere; }
  --pad: max(var(--gutter), calc((100% - var(--max)) / 2));
  --sec: clamp(3rem, 6vw, 5.5rem);
  --ti: color-mix(in srgb, var(--paper) 11%, transparent);
  --tc: var(--cta);           /* 頁首光暈：使用者 2026-10-22 改琥珀，與首頁一致；代理品牌頁由 data-accent 覆寫 */
  --tx: 85%;
  --ty: 20%;
  --tex: radial-gradient(var(--ti) 1px, transparent 1.5px) 0 0 / 1.75rem 1.75rem;
  position: relative; width: auto; max-width: none; min-height: 0; margin: 0; padding: 0 0 clamp(4rem, 8vw, 7rem);
  > :not(.page-head) { width: min(var(--max), 100% - var(--gutter) * 2); margin-inline: auto; }
  &:not(:has(> .page-head)) { display: flex; flex-direction: column; padding-top: clamp(7rem, 12vw, 9.5rem); }
  &:not(:has(> .page-head)) { padding-inline: var(--pad); }
  &:not(:has(> .page-head)) > :is(*, .catalog-content, .article-directory) { width: auto; max-width: none; margin-inline: 0; }
  &:not(:has(> .page-head)) > .eyebrow { order: -1; display: flex; }
  &:not(:has(> .page-head)) > h1 { margin: 0 0 2rem; font-size: var(--fs-h1); font-weight: 900; line-height: 1.1; letter-spacing: -.02em; text-wrap: balance; }
  &:not(:has(> .page-head)) > .lead { color: var(--muted); }
  h1, h2, h3 { max-width: none; font-feature-settings: "palt"; }

  /* ---------- 頁型的頁首背景語彙（各頁一種，和首頁雷達不同） ---------- */
  &:has(> .catalog-content:is([data-page-kind="devaEyeCsaasPage"], [data-page-kind="serviceCategoryPage"], [data-page-kind="servicePage"], [data-page-kind="servicePlanPage"])) { --tc: var(--cta); --tx: 88%; --ty: 12%; --tex: repeating-linear-gradient(0deg, var(--ti) 0 1px, transparent 1px 1.75rem); --beam: 1; }
  &:has(> .catalog-content:is([data-page-kind="solutionOverviewPage"], [data-page-kind="solutionPage"])) { --tx: 12%; --ty: 90%; --tex: linear-gradient(var(--ti) 1px, transparent 1px) 0 0 / 2rem 2rem, linear-gradient(90deg, var(--ti) 1px, transparent 1px) 0 0 / 2rem 2rem; }
  &:has(> .catalog-content:is([data-page-kind="partnerOverviewPage"], [data-page-kind="partnerPage"], [data-page-kind="partnerProductPage"])) { --tc: var(--cta); --tx: 72%; --ty: 40%; --tex: repeating-radial-gradient(circle at 82% 45%, transparent 0 2.4rem, var(--ti) 2.4rem calc(2.4rem + 1px)); }
  /* issue 382：全站改暖米白配色後，代理品牌頁（page-blocks 帶非空的 data-accent，青藍 cyan 除外——它是 DevaEye 自家頁的色組，跟著全站改琥珀）維持原本的藍色強調，行為不變：
     琥珀 --cta 與其深字、深底亮藍 --soft／--on-dark-eyebrow 還原成舊值；各家 [data-accent] 自己覆寫的 token 照舊優先。
     Netskope 的 --soft 在下一條，同一元件、後寫者勝。 */
  &:has(> .catalog-content > .page-blocks[data-accent]:not([data-accent=""], [data-accent="cyan"])) { --cta: var(--devaeye-blue); --on-accent: var(--on-accent-legacy); --soft: var(--soft-legacy); --on-dark-eyebrow: var(--soft-legacy); }
  /* issue 267：Netskope 頁面的亮藍字（頁首小標、深色區連結）用 Netskope Blue，不用全站淺藍。 */
  &:has(> .catalog-content > .page-blocks[data-accent="netskope"]) { --soft: var(--netskope-blue); }
  /* issue 239：原廠首頁與子頁（各家都有動畫圖或流動線）不要同心圓底紋，只留柔光；同心圓只留在原廠方案總覽頁。 */
  &:has(> .catalog-content:is([data-page-kind="partnerPage"], [data-page-kind="partnerProductPage"])) { --tex: none; }
  &:has(> .catalog-content[data-page-kind="procurementPage"]) { --tx: 92%; --ty: 30%; --tex: repeating-linear-gradient(135deg, var(--ti) 0 1px, transparent 1px 1.5rem); }
  &:has(> .catalog-content[data-page-kind="downloadOverviewPage"]) { --tx: 95%; --ty: 80%; --tex: linear-gradient(90deg, var(--ti) 1px, transparent 1px) 0 0 / 2.5rem 100%; }
  &:has(> .article-directory, > .article-layout) { --tx: 50%; --ty: 0%; --tex: radial-gradient(var(--ti) 1px, transparent 1.5px) 0 0 / 1.25rem 1.25rem; }
  &:has(> .contact-content) { --tx: 80%; --ty: 40%; --tex: repeating-radial-gradient(circle at 85% 40%, transparent 0 2.2rem, var(--ti) 2.2rem calc(2.2rem + 1px)); }

  /* ---------- 內頁頁首：深色滿版、底部 48px 圓角、顆粒、背景語彙 ---------- */
  /* issue 305：頁首（每頁第一個區塊）不用下方圓角；有品牌子選單時圓角與選單之間會露出角落。 */
  .page-head { position: relative; isolation: isolate; display: flex; flex-direction: column; align-items: flex-start; width: auto; margin: 0; padding: clamp(7.5rem, 13vw, 10.5rem) var(--pad) clamp(3.5rem, 6vw, 5.5rem); border-radius: 0; background: var(--deeper); color: var(--paper); overflow: hidden; }
  /* issue 260：勒索頁頁首只有文字、緊接攻擊鏈互動；頁首上下與第一段之間收窄，讓下一段早一點進入畫面。 */
  &:has(.pp-scene--solution-ransom-chain) > .page-head { padding-top: clamp(6.5rem, 10vw, 8.5rem); padding-bottom: clamp(2rem, 3.5vw, 3rem); }
  &:has(.pp-scene--solution-ransom-chain) > .page-head > .breadcrumb { margin-bottom: 2rem; }
  &:has(.pp-scene--solution-ransom-chain) > .catalog-content > .page-blocks { margin-top: 2rem; }
  .page-head::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(48rem 30rem at var(--tx) var(--ty), color-mix(in srgb, var(--tc) 24%, transparent), transparent 70%), var(--tex); -webkit-mask-image: linear-gradient(to bottom, black 60%, transparent); mask-image: linear-gradient(to bottom, black 60%, transparent); }
  &:has(> .catalog-content:is([data-page-kind="devaEyeCsaasPage"], [data-page-kind="serviceCategoryPage"], [data-page-kind="servicePage"], [data-page-kind="servicePlanPage"])) .page-head::before { background: linear-gradient(100deg, transparent 42%, color-mix(in srgb, var(--soft) 16%, transparent) 50%, transparent 58%) var(--bx) 0 / 70% 100% no-repeat, radial-gradient(48rem 30rem at var(--tx) var(--ty), color-mix(in srgb, var(--tc) 26%, transparent), transparent 70%), var(--tex); }
  .page-head > * { order: 5; max-width: 100%; grid-row: auto; grid-column: auto; }
  .page-head > .breadcrumb { order: 0; }
  .page-head > .partner-logo-frame { order: 1; }
  /* issue 213：淺色版 Logo 在頁首左上（麵包屑之上），深色底上直接顯示、不加白底框。 */
  .page-head > .partner-logo-light { order: -1; margin: 0 0 1.25rem; }
  .page-head > .partner-logo-light .partner-logo { display: block; width: auto; height: clamp(1.75rem, 2.6vw, 2.5rem); max-width: min(16rem, 60vw); object-fit: contain; }
  .page-head > .eyebrow { order: 2; }
  .page-head > h1 { order: 3; }

  .breadcrumb { width: auto; margin: 0 0 clamp(2rem, 4vw, 3.5rem); padding: .375rem .875rem; border: 1px solid var(--deep-line); border-radius: var(--r-pill); background: color-mix(in srgb, var(--paper) 5%, transparent); color: var(--muted-on-dark); font-size: .75rem; line-height: 1.6; }
  .breadcrumb ol { margin: 0; padding: 0; }
  .breadcrumb a { color: inherit; }
  .breadcrumb a:is(:hover, :focus-visible) { color: var(--paper); }
  .breadcrumb li + li::before { color: var(--soft); }
  .breadcrumb li:last-child { color: var(--paper); font-weight: 700; }

  /* issue 189（C3）：eyebrow 全站只有這一個規格（12px、字距 .24em、全大寫、前置細線）；淺底用 --action、深底用 --soft，各頁群不再另訂字級。 */
  .eyebrow { display: inline-flex; align-items: center; gap: .75rem; margin: 0 0 1.5rem; color: var(--action); font-size: .75rem; line-height: 1.5; font-weight: 700; letter-spacing: .24em; text-transform: uppercase; }
  .eyebrow::before { content: ""; flex: none; width: 1.75rem; height: 1px; background: currentColor; }
  :is(.page-head, .band-dark, .cta-band, .capabilities, .tile-grid--dark) .eyebrow { color: var(--soft); }

  .page-head h1 { margin: 0 0 1.5rem; font-size: var(--fs-h1); font-weight: 900; line-height: 1.06; letter-spacing: -.025em; text-wrap: balance; overflow-wrap: normal; max-width: 20em; }
  &:has(> .article-layout) .page-head h1 { max-width: 22ch; font-size: var(--fs-h1-article); line-height: 1.12; }
  .page-head .lead { max-width: 52ch; margin: 0 0 2rem; color: var(--muted-on-dark); font-size: var(--fs-lead); line-height: 1.75; text-wrap: pretty; white-space: pre-line; }
  /* issue 280：頁首說明保留後台按 Enter 的換行（pre-line：換行照用、連續空白仍合併）。 */
  .page-head .page-badges { margin: 0 0 2rem; }
  .page-head :is(.badge, .campaign-period) { color: var(--muted-on-dark); border-color: var(--deep-line); background: color-mix(in srgb, var(--paper) 5%, transparent); }
  .page-head .campaign-period { margin: 0 0 1.5rem; background: none; border: 0; }
  .page-head .hero-actions { margin-top: .5rem; gap: .75rem; }
  .page-head > .partner-logo-frame { align-self: flex-start; min-height: 0; margin: 0 0 1.5rem; padding: 1rem 1.5rem; background: var(--paper); border-color: transparent; border-radius: var(--r-card); }

  /* 頁首圖：大圓角框，object-position 隨捲動位移（inner.js 設 --py），沒有 JS 時固定置中。 */
  .page-head > .page-figure, .page-head > .page-image { align-self: stretch; margin: clamp(2.5rem, 5vw, 4rem) 0 0; }
  .page-head .page-figure > .page-image { margin: 0; }
  .page-head :is(.page-image) { display: block; width: 100%; height: auto; aspect-ratio: 21 / 9; border-radius: var(--r-card); object-fit: cover; object-position: 50% var(--py, 50%); outline: 1px solid var(--deep-line); outline-offset: -1px; box-shadow: 0 2rem 5rem color-mix(in srgb, var(--deeper) 70%, transparent); }
  .page-head .page-figure figcaption { padding-top: .75rem; color: var(--muted-on-dark); font-size: .75rem; }

  /* ---------- 按鈕：膠囊、底色由下往上填滿、箭頭右推 ---------- */
  .nav-cta, .secondary-cta { position: relative; isolation: isolate; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; gap: .625rem; min-height: 3rem; padding: .875rem 1.625rem; border: 0; border-radius: var(--r-pill); font-size: .9375rem; font-weight: 700; line-height: 1.4; text-decoration: none; cursor: pointer; transition: color .4s var(--ease), box-shadow .4s var(--ease); }
  .nav-cta::before, .secondary-cta::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; transform: translateY(101%); transition: transform .5s var(--ease); }
  .nav-cta:is(:hover, :focus-visible)::before, .secondary-cta:is(:hover, :focus-visible)::before { transform: none; }
  .nav-cta { background: var(--ink); color: var(--paper); }
  .nav-cta::before { background: var(--cta); }
  .nav-cta:is(:hover, :focus-visible) { color: var(--on-accent); background: var(--ink); }
  .secondary-cta { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
  .secondary-cta::before { background: var(--ink); }
  .secondary-cta:is(:hover, :focus-visible) { color: var(--paper); background: transparent; }
  :is(.page-head, .cta-band, .band-dark) :is(.nav-cta, .secondary-cta) { --on: 1; }
  :is(.page-head, .cta-band, .band-dark) .nav-cta { background: var(--cta); color: var(--on-accent); }
  :is(.page-head, .cta-band, .band-dark) .nav-cta::before { background: var(--paper); }
  :is(.page-head, .cta-band, .band-dark) .nav-cta:is(:hover, :focus-visible) { background: var(--cta); color: var(--on-accent); box-shadow: 0 .875rem 2.125rem color-mix(in srgb, var(--cta) 40%, transparent); }
  /* issue 193：原廠頁頁首主要按鈕用品牌強調色（.hero-actions[data-accent]），字用該色組配好的深色字（--accent-on，對比已驗證）；滑過仍是白底滑入。 */
  .page-head .hero-actions[data-accent] .nav-cta { background: var(--accent-fill, var(--accent-dark)); color: var(--accent-on); }
  .page-head .hero-actions[data-accent] .nav-cta:is(:hover, :focus-visible) { background: var(--accent-fill, var(--accent-dark)); color: var(--accent-on); box-shadow: 0 .875rem 2.125rem color-mix(in srgb, var(--accent-dark) 40%, transparent); }
  :is(.page-head, .cta-band, .band-dark) .secondary-cta { color: var(--paper); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--paper) 45%, transparent); }
  :is(.page-head, .cta-band, .band-dark) .secondary-cta::before { background: color-mix(in srgb, var(--paper) 16%, transparent); }
  :is(.page-head, .cta-band, .band-dark) .secondary-cta:is(:hover, :focus-visible) { color: var(--paper); }
  .nav-cta > span[aria-hidden], .secondary-cta > span[aria-hidden] { display: inline-block; transition: transform .45s var(--ease); }
  .nav-cta:is(:hover, :focus-visible) > span[aria-hidden], .secondary-cta:is(:hover, :focus-visible) > span[aria-hidden] { transform: translateX(.3rem); }
  /* issue 189（C3／C5）：文字連結全站一個規格——inline-flex、垂直置中、高度 44px（觸控目標），字級 1rem。原本依所在卡片有 24／27／32px 三種高度。 */
  .text-link { display: inline-flex; align-items: center; gap: .5rem; min-height: 2.75rem; color: var(--action); font-size: 1rem; font-weight: 700; line-height: 1.4; text-decoration: none; }
  .text-link > span[aria-hidden] { display: inline-block; transition: transform .45s var(--ease); }
  .text-link:is(:hover, :focus-visible) > span[aria-hidden] { transform: translateX(.3rem); }
  :is(.band-dark, .cta-band) :focus-visible, .page-head :focus-visible { outline-color: var(--soft); }

  /* ---------- 區塊骨架與標題 ---------- */
  .catalog-content { width: min(var(--max), 100% - var(--gutter) * 2); margin-inline: auto; }
  .catalog-content > :first-child { margin-top: clamp(3rem, 6vw, 5rem); }
  /* issue 330：以區塊開頭時區段自帶上內距，不再多推 80px。 */
  .catalog-content > .page-blocks:first-child { margin-top: 0; }
  .content-section, .catalog-directory, .shared-section, .scoping-checks, .advantage-section, .download-documents, .vendor-plan, .deep-section, .checklist-section { margin: 0; padding-block: var(--sec); border-top: 0; }
  /* 第一個區塊緊接頁首時上內距歸零；有滿版底色的帶狀區塊（淺色與深色）除外，否則 eyebrow 會貼在色帶頂端（issue 189 B6）。 */
  .catalog-content > :is(.content-section, .catalog-directory):first-child:not(:is(.portfolio-section, .service-boundary, .advantage-section, .shared-section, .product-section, .plan-add-ons, .checklist-section, .service-dataflow, .service-process, .service-compliance, .solution-framework, .solution-chain, .partner-role, .product-capabilities, .purchase-steps)) { padding-top: 0; }
  .section-heading { max-width: none; margin: 0 0 clamp(2rem, 4.5vw, 3.5rem); }
  .section-heading .eyebrow { display: inline-flex; margin: 0 0 1.25rem; }
  :is(.section-heading h2, .content-section > h2, .catalog-directory > h2, .sources > h2) { max-width: 22em; margin: 0 0 clamp(1.5rem, 3vw, 2.5rem); font-size: clamp(1.875rem, 3.8vw, 3.375rem); font-weight: 900; line-height: 1.14; letter-spacing: -.02em; text-wrap: balance; }
  .section-heading h2 { margin-bottom: 0; }
  .section-heading :is(.lead, p:not(.eyebrow)) { max-width: 56ch; margin: 1.25rem 0 0; color: var(--muted); font-size: var(--fs-lead); line-height: 1.75; }
  .prose { max-width: 58rem; margin-block: var(--sec); }
  .prose p { color: var(--muted); font-size: clamp(1.0625rem, 1.5vw, 1.25rem); line-height: 1.9; }
  p { overflow-wrap: anywhere; }

  /* 滿版背景帶：淺灰底與深色底交替；深色帶的頂端 48px 圓角壓在上一區之上。 */
  :is(.portfolio-section, .service-boundary, .advantage-section, .shared-section, .product-section, .plan-add-ons, .checklist-section, .service-dataflow, .service-process, .service-compliance) { position: relative; isolation: isolate; }
  :is(.portfolio-section, .service-boundary, .advantage-section, .shared-section, .product-section, .plan-add-ons)::before, :is(.checklist-section, .service-dataflow, .service-process, .service-compliance)::before { content: ""; position: absolute; z-index: -1; inset: 0 calc(50% - 50vw); }
  :is(.portfolio-section, .service-boundary, .advantage-section, .shared-section, .product-section, .plan-add-ons)::before { background: var(--wash); }
  /* issue 382：這四種段落原本是深色帶，改成暖米白淺底；深色只留在卡片（.tile-grid、.dataflow li）。 */
  :is(.checklist-section, .service-dataflow, .service-process, .service-compliance) { color: var(--ink); }
  :is(.checklist-section, .service-dataflow, .service-process, .service-compliance)::before { border-radius: var(--r-top) var(--r-top) 0 0; background: var(--warm); }
  :is(.checklist-section, .service-dataflow, .service-process, .service-compliance):last-child::before { border-radius: var(--r-top); }
  /* issue 189（B6）：相鄰的兩個深色帶是同一條帶——同底色、不用不同底色的圓角往上疊，中間一條細分隔線，內距不變。 */
  :is(.checklist-section, .service-dataflow, .service-process, .service-compliance) + :is(.checklist-section, .service-dataflow, .service-process, .service-compliance)::after { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: var(--line); }
  :is(.checklist-section, .service-dataflow, .service-process, .service-compliance) + :is(.checklist-section, .service-dataflow, .service-process, .service-compliance)::before { border-radius: 0; background: var(--warm); }
  :is(.checklist-section, .service-dataflow, .service-process, .service-compliance) :is(h2, h3) { color: var(--ink); }
  :is(.checklist-section, .service-dataflow, .service-process, .service-compliance) :is(.lead, p:not(.eyebrow)) { color: var(--muted); }
  :is(.checklist-section, .service-dataflow, .service-process, .service-compliance) :is(.eyebrow) { color: var(--action); }
  :is(.checklist-section, .service-dataflow, .service-process, .service-compliance) :focus-visible { outline-color: var(--action); }
  .catalog-content > :is(.checklist-section, .service-dataflow, .service-process, .service-compliance):last-child { margin-bottom: 3rem; }

  /* ---------- 卡片 ---------- */
  .catalog-grid, .product-cards, .document-cards, .brand-cards, .contact-start-cards, .advantage-cards, .framework { display: grid; gap: clamp(1rem, 1.6vw, 1.5rem); }
  .catalog-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr)); }
  .catalog-card, .product-card, .document-card, .brand-card, .contact-start-card, .advantage-cards > article, .framework > article, .aside-card, .download-item { padding: clamp(1.5rem, 2.6vw, 2.25rem); border: 1px solid var(--line); border-radius: var(--r-card); background: var(--paper); box-shadow: none; }
  .catalog-card, .advantage-cards > article, .framework > article { background: var(--surface-sunken); }
  .brand-card { padding: 0; }
  .brand-card-body { padding: clamp(1.5rem, 2.6vw, 2rem); }
  :is(.catalog-card, .product-card, .document-card, .brand-card, .contact-start-card, .advantage-cards > article, .framework > article) :is(h3) { margin: 0 0 1rem; font-size: clamp(1.375rem, 2vw, 1.75rem); font-weight: 800; line-height: 1.25; letter-spacing: -.01em; }
  :is(.catalog-card, .product-card, .document-card, .brand-card, .contact-start-card) h3 a { color: var(--ink); }
  :is(.catalog-card, .product-card, .document-card, .brand-card, .contact-start-card, .advantage-cards > article, .framework > article) p:not(.eyebrow) { color: var(--muted); }
  /* 卡片 hover 統一（issue 189 B3：卡片本身不位移）：目錄卡與文章卡、聯絡起點卡一樣——邊框轉行動藍、陰影加深；位移只留給內層的箭頭與圖示。 */
  .catalog-card:hover { transform: none; border-color: var(--action); }
  .brand-card-image { height: auto; aspect-ratio: 16 / 9; }
  .feature-icon { width: 3.5rem; height: 3.5rem; border-radius: 50%; }
  .advantage-cards { grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); }
  .advantage-cards h3 { margin: 1.25rem 0 .75rem; }
  .badge { display: inline-flex; align-items: center; margin: 0 0 1.25rem; padding: .3125rem .875rem; border: 1px solid var(--line); border-radius: var(--r-pill); background: var(--chip-bg); color: var(--tag-text); font-size: .75rem; font-weight: 700; letter-spacing: .04em; }
  .badge.muted { background: var(--chip-muted-bg); color: var(--chip-muted-text); }
  .tags li { border-radius: var(--r-pill); }
  .deep-section > * + *, .advantage-section > * + * { margin-top: clamp(1.5rem, 3vw, 2.25rem); }
  .architecture { padding: clamp(1.5rem, 3vw, 2.5rem); border-radius: var(--r-card); background: var(--deeper); }
  .architecture li + li::before { color: var(--soft); }
  .source-links { max-width: none; margin: 2rem 0 0; font-size: .8125rem; }

  /* 服務組合（DevaEye 總覽）：大卡，編號描邊字，hover 時卡片翻成深色並出現軌道線。issue 189：hover 不再加寬欄位（另一欄跟著縮、文字重新折行）；欄數依卡片數量決定（見檔尾「卡片列」）。 */
  .portfolio-section .catalog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .portfolio-section .catalog-card { position: relative; display: flex; flex-direction: column; justify-content: flex-end; min-height: clamp(18rem, 26vw, 24rem); padding: clamp(1.75rem, 3.4vw, 3rem); border: 0; border-radius: var(--r-card); background: var(--paper); overflow: hidden; transition: background .6s var(--ease), color .6s var(--ease); }
  /* issue 189：卡片頂端保留徽章的高度——欄數變多、卡片變窄時，內容往上長也不會蓋到徽章（編號大字已拿掉）。 */
  .portfolio-section .catalog-card { padding-top: calc(clamp(1.75rem, 3.4vw, 3rem) + 2.5rem + 1.25rem); }
  .portfolio-section .catalog-card .badge { position: absolute; top: clamp(1.75rem, 3.4vw, 3rem); left: clamp(1.75rem, 3.4vw, 3rem); margin: 0; }
  .portfolio-section .catalog-card h3 { max-width: 12ch; margin-bottom: .75rem; font-size: clamp(1.75rem, 3vw, 2.75rem); font-weight: 900; line-height: 1.12; }
  .portfolio-section .catalog-card p { max-width: 38ch; margin: 0 0 1.25rem; }
  .portfolio-section .catalog-card .text-link { align-self: flex-start; }
  .portfolio-section .catalog-card .text-link::after { content: ""; position: absolute; inset: 0; }
  .portfolio-section .catalog-card:is(:hover, :focus-within) { background: var(--deeper); color: var(--paper); }
  .portfolio-section .catalog-card:is(:hover, :focus-within) :is(h3) { color: var(--paper); }
  .portfolio-section .catalog-card:is(:hover, :focus-within) p { color: var(--muted-on-dark); }
  .portfolio-section .catalog-card:is(:hover, :focus-within) .text-link { color: var(--soft); }
  .portfolio-section .catalog-card:is(:hover, :focus-within) .badge { background: color-mix(in srgb, var(--paper) 8%, transparent); border-color: var(--deep-line); color: var(--muted-on-dark); }
  .portfolio-section .catalog-card:focus-within { outline: 3px solid var(--action); outline-offset: 3px; }
  .portfolio-section .catalog-card::before { inset: auto -6rem -6rem auto; z-index: 0; width: 22rem; height: 22rem; border-radius: 50%; background: none; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--soft) 28%, transparent), 0 0 0 3rem color-mix(in srgb, var(--soft) 5%, transparent); opacity: 0; transition: opacity .6s var(--ease); }
  .portfolio-section .catalog-card:is(:hover, :focus-within)::before { opacity: 1; }
  @media (max-width: 40rem) { .page-head :is(.page-image) { aspect-ratio: 16 / 10; } }
  @media (max-width: 47.9375rem) { .portfolio-section .catalog-grid { grid-template-columns: minmax(0, 1fr); } }

  /* ---------- 清單：勾選、編號大字 ---------- */
  .checks { margin: 0; padding: 0; list-style: none; max-width: none; display: grid; gap: .25rem 3rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); }
  .checks li { position: relative; padding: .625rem 0 .625rem 2.5rem; color: var(--ink); font-size: 1.0625rem; line-height: 1.65; }
  .checks li::before { content: ""; position: absolute; left: 0; top: .875rem; width: 1.5rem; height: 1.5rem; border-radius: 50%; background: var(--feature-icon-bg); }
  .checks li::after { content: ""; position: absolute; left: .5rem; top: 1.1875rem; width: .5rem; height: .3125rem; border: solid var(--feature-icon-fg); border-width: 0 0 2px 2px; transform: rotate(-45deg); }
  .checklist-section .checks { display: block; }
  .checklist-section .checks li { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 1.5rem; padding: clamp(1.125rem, 2.2vw, 1.75rem) 0; border-top: 1px solid var(--line); color: var(--ink); font-size: clamp(1.125rem, 2vw, 1.75rem); font-weight: 700; line-height: 1.4; transition: color .4s var(--ease), padding .6s var(--ease); }
  .checklist-section .checks li:last-child { border-bottom: 1px solid var(--line); }
  .checklist-section .checks li::before { content: none; }
  .checklist-section .checks li::after { display: none; }
  .checklist-section h3 { margin: 0 0 1.5rem; font-size: var(--fs-m); font-weight: 800; }
  .checklist-section .split { gap: clamp(2rem, 5vw, 5rem); }

  .tile-grid { gap: clamp(1rem, 1.6vw, 1.5rem); border: 0; border-radius: 0; background: none; overflow: visible; }
  .tile-grid > * { position: relative; padding: clamp(1.5rem, 2.6vw, 2.25rem); border: 1px solid var(--line); border-radius: var(--r-card); background: var(--surface-sunken); box-shadow: none; }
  ol.tile-grid { counter-reset: tg; }
  ol.tile-grid > * { counter-increment: tg; }
  ol.tile-grid > *::before { content: counter(tg, decimal-leading-zero); display: block; margin-bottom: 1.25rem; color: var(--action); font-family: "Inter Tight", var(--font-body); font-size: clamp(2rem, 3.4vw, 3rem); font-weight: 800; line-height: 1; }
  .tile-grid > * :is(p:not(.eyebrow)) { margin: 0; color: var(--ink); font-size: 1.0625rem; line-height: 1.7; }
  .tile-grid > * h3 { margin: 0 0 .75rem; font-size: 1.375rem; font-weight: 800; }
  .tile-grid > * h3 + p { color: var(--muted); font-size: 1rem; }
  .tile-grid.scenario-grid > li { padding: clamp(1.5rem, 2.6vw, 2.25rem); border: 1px solid var(--line); background: var(--paper); transition: background .5s var(--ease), color .5s var(--ease), transform .6s var(--ease); }
  .tile-grid.scenario-grid > li:is(:hover, :focus-within) { background: var(--deeper); color: var(--paper); }
  .tile-grid.scenario-grid > li:is(:hover, :focus-within) :is(h2, h3, h2 a, h3 a) { color: var(--paper); }
  .tile-grid.scenario-grid > li:is(:hover, :focus-within) p { color: var(--muted-on-dark); }
  .tile-grid.scenario-grid > li:is(:hover, :focus-within) .eyebrow { color: var(--soft); }
  .tile-grid.scenario-grid h2, .tile-grid.scenario-grid h3 { font-size: clamp(1.375rem, 2.2vw, 1.875rem); font-weight: 800; }
  :is(.checklist-section, .service-dataflow, .service-compliance) .tile-grid > * { border-color: var(--deep-line); background: var(--deep); }
  :is(.checklist-section, .service-dataflow, .service-compliance) .tile-grid > *::before { color: var(--soft); }
  :is(.checklist-section, .service-dataflow, .service-compliance) .tile-grid > * p:not(.eyebrow) { color: var(--muted-on-dark); }
  :is(.checklist-section, .service-dataflow, .service-compliance) .tile-grid > * h3 { color: var(--paper); }
  .tile-grid--dark > * { background: var(--deep); border-color: var(--deep-line); box-shadow: none; }
  .tile-grid--dark > *::before { color: var(--soft); }

  /* 流程（時間線）：圓形節點由線串起，深色帶內使用。 */
  .service-process ol.tile-grid { gap: 2rem 1.5rem; }
  .service-process ol.tile-grid > li { padding: 4.5rem 0 0; border: 0; background: none; }
  .service-process ol.tile-grid > li::before { position: absolute; top: 0; left: 0; display: grid; place-items: center; width: 3.25rem; height: 3.25rem; margin: 0; border-radius: 50%; background: var(--paper); box-shadow: inset 0 0 0 1px var(--action); color: var(--action); font-size: .9375rem; font-weight: 800; }
  .service-process ol.tile-grid > li::after { content: ""; position: absolute; top: 1.625rem; left: 4.25rem; right: -1.5rem; height: 1px; background: linear-gradient(90deg, var(--line), color-mix(in srgb, var(--action) 40%, transparent)); }
  .service-process ol.tile-grid > li:last-child::after { display: none; }
  .service-process ol.tile-grid > li p { color: var(--ink); font-size: 1.0625rem; font-weight: 600; }
  @media (max-width: 63.9375rem) {
    .service-process ol.tile-grid > li::after { display: none; }
  }

  /* ---------- 表格：表頭、斑馬紋；窄於 40rem 改成卡片，不再橫向捲動 ---------- */
  @media (min-width: 40.0625rem) {
    .table-scroll { margin: 0; border: 1px solid var(--line); border-radius: var(--r-card); background: var(--paper); }
    .data-table { min-width: 42rem; font-size: .9375rem; }
    .data-table caption { padding: 1rem 1.5rem; background: var(--surface-sunken); color: var(--muted); font-size: .8125rem; font-weight: 700; letter-spacing: .04em; text-align: left; }
    .data-table :is(th, td) { padding: 1.125rem 1.5rem; border: 0; border-bottom: 1px solid var(--line); }
    .data-table thead th { background: var(--deeper); color: var(--paper); font-size: .8125rem; font-weight: 700; letter-spacing: .08em; white-space: nowrap; }
    .data-table tbody tr:nth-child(even) > * { background: var(--surface-sunken); }
    .data-table tbody tr:last-child > * { border-bottom: 0; }
    .data-table tbody tr { transition: background .3s; }
    .data-table tbody th, .data-table-block .data-table tbody th { background: none; color: var(--ink); font-weight: 700; text-align: left; }
    .data-table tbody tr:nth-child(even) > th { background: var(--surface-sunken); }
    .data-table td { color: var(--table-cell-text); }
    .data-table tbody tr:hover > * { background: var(--feature-icon-bg); }
    /* issue 189（C5）：表格裡的連結觸控高度 44px；有連結的儲存格上下內距收小，列高維持原本的視覺密度。 */
    .data-table td a, .data-table tbody th a { display: inline-flex; align-items: center; min-height: 2.75rem; color: var(--action); text-underline-offset: .22em; }
    .data-table :is(td, tbody th):has(> a) { padding-block: .5rem; }
    .table-scroll.is-scrollable:not(.at-end) { -webkit-mask-image: linear-gradient(90deg, black calc(100% - 3rem), transparent); mask-image: linear-gradient(90deg, black calc(100% - 3rem), transparent); }
  }
  /* v111（issue 337）：規劃表品牌欄的原廠核准 Logo——高度固定、寬度自動、不裁切；連結沿用表格連結的 44px 觸控高度與全站焦點環。 */
  .data-table .vendor-plan-logo { display: block; width: auto; height: 2rem; max-width: min(10rem, 100%); object-fit: contain; object-position: left center; }
  .data-table tbody th a:has(> .vendor-plan-logo) { border-radius: var(--radius-s, .25rem); transition: opacity .2s; }
  .data-table tbody th a:has(> .vendor-plan-logo):is(:hover, :focus-visible) { opacity: .75; }
  /* 手機（窄於 40rem）：每一列變成一張卡片——列首（th scope=row）當卡片標題，其餘每格前面以 attr(data-label) 顯示欄名
     （data-label 由 view 輸出，不靠 JS；沒有欄名的格不畫標籤）。thead 視覺隱藏但留在無障礙樹；格與格之間不畫框線，只用間距分組。
     桌機的斑馬紋、固定首欄、橫向捲動、欄列高亮都在 min-width: 40.0625rem 裡，這裡不需要逐條覆蓋。 */
  @media (max-width: 40rem) {
    .table-scroll { overflow: visible; margin: 0; border: 0; border-radius: 0; background: none; }
    .data-table { display: block; min-width: 0; width: 100%; font-size: 1rem; }
    .data-table :is(tbody, tr, th, td, caption) { display: block; }
    .data-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
    .data-table caption { margin-bottom: .75rem; padding: .875rem 1.25rem; border-radius: var(--radius-m); background: var(--table-caption-bg); color: var(--table-cell-text); font-size: .8125rem; font-weight: 700; letter-spacing: .04em; text-align: left; }
    .data-table tbody tr { display: flex; flex-direction: column; margin-bottom: 1rem; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius-l); background: var(--paper); box-shadow: var(--elevation-card); }
    .data-table tbody tr:last-child { margin-bottom: 0; }
    .data-table tbody th { order: -1; padding: 1rem 1.25rem; border: 0; background: var(--table-head-bg); color: var(--ink); font-size: 1.0625rem; font-weight: 800; line-height: 1.5; text-align: left; }
    .data-table tbody td { padding: .75rem 1.25rem 0; border: 0; background: none; color: var(--table-cell-text); line-height: 1.7; }
    .data-table tbody td:last-child { padding-bottom: 1.125rem; }
    .data-table tbody td:empty { display: none; }
    .data-table tbody td[data-label]:not([data-label=""])::before { content: attr(data-label); display: block; margin-bottom: .125rem; color: var(--muted); font-size: .75rem; font-weight: 700; letter-spacing: .06em; }
    .data-table tbody th a { min-height: 2.75rem; }
    .data-table td a { min-height: 2rem; }
    .data-table :is(td, tbody th):has(> a) { padding-block: .5rem; }
    .data-table tbody th:has(> a) { padding-block: .75rem; }
  }
  .catalog-content > :is(.data-table-block, .eval-table) { margin-block: var(--sec); }
  .catalog-content > :is(.data-table-block, .eval-table):first-child { margin-top: clamp(3rem, 6vw, 5rem); }

  /* ---------- FAQ：大字題目、加號旋轉、展開動畫 ---------- */
  .faq { max-width: none; }
  .faq > h2 { max-width: 22em; }
  .faq details { border-top: 1px solid var(--line); interpolate-size: allow-keywords; }
  .faq details:last-child { border-bottom: 1px solid var(--line); }
  .faq summary { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; min-height: 4.5rem; padding: 1.25rem 0; font-size: clamp(1.125rem, 1.8vw, 1.5rem); font-weight: 800; line-height: 1.4; list-style: none; cursor: pointer; }
  .faq summary::-webkit-details-marker { display: none; }
  .faq summary::after { content: ""; flex: none; width: 2.75rem; height: 2.75rem; border-radius: 50%; background: linear-gradient(var(--ink), var(--ink)) center / 1rem 2px no-repeat, linear-gradient(var(--ink), var(--ink)) center / 2px 1rem no-repeat; box-shadow: inset 0 0 0 1px var(--line); transition: transform .6s var(--ease), background-color .3s, box-shadow .3s; }
  .faq summary:is(:hover, :focus-visible)::after { box-shadow: inset 0 0 0 1px var(--ink); }
  .faq details[open] > summary::after { transform: rotate(135deg); background-color: var(--ink); background-image: linear-gradient(var(--paper), var(--paper)), linear-gradient(var(--paper), var(--paper)); }
  .faq p { max-width: 62ch; padding: 0 4.25rem 1.75rem 0; color: var(--muted); font-size: 1.0625rem; line-height: 1.85; }
  .faq details::details-content { block-size: 0; overflow: clip; transition: block-size .5s var(--ease), content-visibility .5s allow-discrete; }
  .faq details[open]::details-content { block-size: auto; }

  /* ---------- 引言、重點框、提示 ---------- */
  .answer-summary { max-width: none; padding: clamp(1.75rem, 4vw, 3.5rem); border: 0; border-radius: var(--r-card); background: var(--surface-sunken); }
  .answer-summary h2 { max-width: none; margin: 0 0 1rem; color: var(--action); font-size: .75rem; font-weight: 700; letter-spacing: .24em; line-height: 1.5; text-transform: uppercase; }
  .answer-summary p { max-width: 36em; margin: 0; color: var(--ink); font-size: clamp(1.25rem, 2.4vw, 2rem); font-weight: 800; line-height: 1.45; text-wrap: balance; }
  /* 註腳卡：範圍說明與其他邊界說明（採購提示、等級提示、架構圖註）共用一套——i 圖示（CSS 畫的字母，讀屏略過）、四邊同圓角、1px 細框、淡底；
     取代原本單邊粗線＋不對稱圓角的告示塊。寬度與同頁內容欄對齊（不再各自收窄）。範圍說明用 notice 色票，其餘用中性色。 */
  :is(.scope-notice, .procurement-notice, .security-tier-notice, .architecture-note) { --note-mark: var(--muted); --note-mark-on: var(--paper); --note-line: var(--line); --note-bg: var(--surface-sunken); --note-text: var(--table-cell-text); position: relative; max-width: none; padding: 1.125rem 1.5rem 1.125rem 3.75rem; border: 1px solid var(--note-line); border-radius: var(--radius-l); background: var(--note-bg); color: var(--note-text); font-size: .875rem; line-height: 1.7; }
  .scope-notice { --note-mark: var(--notice-text); --note-mark-on: var(--notice-bg); --note-line: color-mix(in srgb, var(--notice-accent) 38%, var(--line)); --note-bg: var(--notice-bg); --note-text: var(--notice-text); margin: var(--sec) 0 0; }
  :is(.scope-notice, .procurement-notice, .security-tier-notice, .architecture-note)::before { content: "i" / ""; position: absolute; left: 1.25rem; top: 1.15rem; display: grid; place-items: center; width: 1.5rem; height: 1.5rem; border-radius: 50%; background: var(--note-mark); color: var(--note-mark-on); font: italic 800 .8125rem/1 "Inter Tight", var(--font-body); }
  .scope-notice strong { display: block; margin: 0 0 .125rem; font-size: .8125rem; letter-spacing: .08em; }
  .scope-notice p { margin: 0; max-width: none; }
  .contact-unavailable, .contact-browser-note, .form-status--error { border-radius: var(--r-card); }

  /* ---------- 其他區塊 ---------- */
  .scope-grid { gap: 1rem; }
  .scope-grid > div { padding: clamp(1.5rem, 2.6vw, 2.25rem); border: 0; border-radius: var(--r-card); background: var(--surface-sunken); }
  .scope-grid > div::before { content: ""; display: block; width: 2.5rem; height: 4px; margin-bottom: 1.25rem; border-radius: 2px; background: var(--action); }
  .scope-grid > .scope-excluded::before { background: var(--ink); }
  .scope-grid > .scope-optional::before { background: var(--muted); }
  .scope-grid h3 { margin: 0 0 1rem; font-size: 1.375rem; font-weight: 800; }
  .definition-list { border-top: 1px solid var(--ink); }
  .definition-list > div { padding-block: 1.5rem; }
  .definition-list dt { color: var(--action); font-size: .75rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
  .definition-list dd { font-size: 1.0625rem; }
  .audiences li, .security-tier-list li, .solution-area-list li, .partner-role-links a { border-radius: var(--r-pill); }
  .partner-role-links a { padding-inline: 1rem; border: 1px solid var(--line); }
  .related-links { gap: 1.5rem; }
  .related-links li { padding: 1.5rem 0 0; border-top: 1px solid var(--ink); }
  .related-links h3 { margin: 0 0 .5rem; font-size: 1.375rem; font-weight: 800; }
  .related-links h3 a { color: var(--ink); }
  .evidence-samples li { border-radius: var(--r-card); border-left: 0; box-shadow: inset 0 .25rem 0 var(--evidence-accent); }
  .plan-add-ons li { border-radius: var(--r-card); background: var(--paper); }
  .sources { margin-top: 0; padding-top: var(--sec); border-top: 0; }
  .trademark, .brand-guidelines { max-width: 60rem; }
  .capabilities { margin: var(--sec) 0 0; padding: clamp(1.75rem, 4vw, 3.5rem); border-radius: var(--r-card); background: var(--deeper); }
  .capabilities li { border-top-color: var(--deep-line); }
  .capabilities h2 { margin: 0; color: var(--paper); font-size: var(--fs-m); font-weight: 900; }
  .page-image { border-radius: var(--r-card); }
  .report-sample-image, .evidence-image, .catalog-video-player { border-radius: var(--r-card); }
  .directory-filter :is(input, select) { border-radius: var(--r-pill); padding-inline: 1.125rem; }
  .directory-filter button:not([type="button"]) { border-radius: var(--r-pill); padding-inline: 1.75rem; background: var(--ink); }
  .download-item { border-radius: var(--r-card); }
  .secondary-nav a { border-radius: var(--r-pill); }
  .page-inventory > a { border-bottom-color: var(--line); }

  /* ---------- 服務頁結構（MDR）：雙軌大卡、資料流圖 ---------- */
  .service-track-list { gap: 1rem; }
  .service-track { position: relative; display: flex; flex-direction: column; justify-content: flex-end; min-height: clamp(16rem, 24vw, 22rem); padding: clamp(1.75rem, 3.4vw, 3rem); border-radius: var(--r-card); background: var(--wash); overflow: hidden; }
  .service-track:nth-child(odd) { background: var(--ink); color: var(--paper); }
  /* issue 189（A2）：描邊大字只放編號（view 端把「01 / EXISTING TOOLS」斜線後的文字拆成小標），而且排在文件流裡——
     右上角、不換行、寬度不超出卡片，內容多時卡片長高，大字永遠不會蓋到標題與內文。 */
  .service-track .number { align-self: flex-end; max-width: 100%; margin: 0 0 auto; padding-bottom: 1.5rem; overflow: hidden; white-space: nowrap; color: var(--action); font-family: "Inter Tight", var(--font-body); font-size: clamp(3.5rem, 7vw, 6.5rem); font-weight: 800; letter-spacing: 0; line-height: 1; }
  .service-track .eyebrow { margin: 0 0 1rem; }
  .service-track:nth-child(odd) .eyebrow { color: var(--soft); }
  .service-track:nth-child(odd) .number { color: var(--soft); }
  .service-track :is(h2, h3) { margin: 0 0 1rem; font-size: clamp(1.75rem, 3vw, 2.75rem); font-weight: 900; line-height: 1.12; }
  .service-track:nth-child(odd) :is(h2, h3) { color: var(--paper); }
  .service-track p:not(.number, .eyebrow) { max-width: 34ch; margin: 0 0 1rem; }
  .service-track:nth-child(odd) p:not(.number, .eyebrow) { color: var(--on-dark-card-body); }
  .service-track:nth-child(odd) .text-link { color: var(--on-dark-card-link); }

  .service-dataflow .dataflow { position: relative; gap: clamp(3.5rem, 6vw, 5rem); }
  .service-dataflow .dataflow::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; border-top: 1px dashed color-mix(in srgb, var(--action) 45%, transparent); }
  .dataflow > li { z-index: 1; padding: clamp(1.5rem, 2.6vw, 2.25rem); border: 1px solid var(--deep-line); border-radius: var(--r-card); background: var(--deep); }
  .dataflow > li .badge { margin: 0 0 1.25rem; border-color: var(--on-dark-line); background: none; color: var(--on-dark-eyebrow); }
  .dataflow > li h3, .dataflow > li h2 { margin: 0 0 .75rem; color: var(--paper); font-size: clamp(1.375rem, 2vw, 1.75rem); font-weight: 800; }
  .dataflow > li p:not(.badge) { color: var(--muted-on-dark); font-size: 1rem; }
  .dataflow > li:not(:last-child)::after { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: 50%; background: var(--cta); color: var(--on-accent); font-size: 1.25rem; line-height: 1; }
  @media (min-width: 761px) { .dataflow > li:not(:last-child)::after { right: calc(clamp(3.5rem, 6vw, 5rem) / -2 - 1.375rem); width: 2.75rem; } }
  @media (max-width: 760px) { .service-dataflow .dataflow::before { inset: 0 auto 0 50%; border-top: 0; border-left: 1px dashed color-mix(in srgb, var(--action) 45%, transparent); } .dataflow > li:not(:last-child)::after { bottom: calc(clamp(3.5rem, 6vw, 5rem) / -2 - 1.375rem); } }

  /* ---------- 文章與聯絡 ---------- */
  .article-layout { margin-top: clamp(3rem, 6vw, 5rem); }
  .article-directory, .contact-content { margin-top: clamp(1rem, 3vw, 2.5rem); }
  .article-directory { max-width: var(--max); }
  .article-reading .content-section { margin-block: 0; padding-block: 1rem; }
  .article-reading .faq { padding-top: 2.5rem; }
  .article-meta { color: var(--muted); }
  .page-head .article-meta { margin: 0 0 1rem; color: var(--muted-on-dark); order: 4; }
  .contact-aside { align-content: start; }
  .article-reading { max-width: 42em; font-size: 1.125rem; line-height: 1.95; }
  .article-reading h2 { margin: 3rem 0 1rem; font-size: clamp(1.5rem, 2.6vw, 2.125rem); font-weight: 900; line-height: 1.25; }
  .article-result { border-radius: var(--r-card); }
  .article-results .article-result h2 { max-width: none; margin: .5rem 0 .75rem; font-size: clamp(1.25rem, 2vw, 1.625rem); font-weight: 800; line-height: 1.3; letter-spacing: -.01em; }
  .article-results .article-result h2 a { color: var(--ink); text-decoration: none; }
  .article-pagination a { border-radius: var(--r-pill); }
  .reading-progress { position: fixed; inset: 0 0 auto; z-index: 70; height: 3px; transform-origin: left; transform: scaleX(var(--rp, 0)); background: linear-gradient(90deg, var(--cta), var(--soft)); pointer-events: none; }
  .contact-layout { gap: clamp(2rem, 5vw, 4rem); }
  .lead-fieldset { border-radius: var(--r-card); }
  .lead-field :is(input, textarea) { border-radius: 1rem; }
  .contact-entrances a { border-radius: var(--r-pill); }
  .contact-start-card { border-radius: var(--r-card); }

  /* ---------- 結尾 CTA 帶（首頁 CTA 的縮小版）：深色圓角卡、軌道線、膠囊按鈕 ---------- */
  .cta-band { position: relative; isolation: isolate; overflow: hidden; margin: var(--sec) 0 0; padding: clamp(2.25rem, 6vw, 5rem); border-radius: var(--r-card); background: linear-gradient(135deg, var(--dark-gradient-start), var(--deeper)); color: var(--paper); }
  .cta-band::before { inset: auto; top: 50%; right: -8rem; left: auto; width: 34rem; height: 34rem; translate: 0 -50%; border-radius: 50%; background: none; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--soft) 22%, transparent), 0 0 0 3.5rem color-mix(in srgb, var(--soft) 4%, transparent), 0 0 0 7rem color-mix(in srgb, var(--soft) 3%, transparent); pointer-events: none; }
  .cta-band:has(> .section-heading) { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 2rem 3rem; }
  .cta-band .section-heading { margin: 0; }
  .cta-band :is(h2, .section-heading h2) { max-width: 18em; margin: 0 0 1rem; color: var(--paper); font-size: var(--fs-l); font-weight: 900; line-height: 1.1; letter-spacing: -.02em; }
  .cta-band .section-heading h2 { margin-bottom: 0; }
  /* issue 189（C3）：說明文字的規則不再套到 eyebrow（原本 CTA 帶的 eyebrow 被放大成 19px、改成灰字）。 */
  .cta-band :is(p:not(.eyebrow), .lead), .cta-band .section-heading :is(.lead, p:not(.eyebrow)) { max-width: 46ch; color: var(--muted-on-dark); font-size: var(--fs-lead); line-height: 1.75; }
  .cta-band .nav-cta { min-height: 3.5rem; padding-inline: 2rem; }
  /* issue 265：頁面最後一段是結尾行動帶時，改成與原廠／方案頁一致的滿版深色帶（上緣圓角、內容對齊頁面欄寬、直接接頁尾）。 */
  &:has(> .catalog-content > .cta-band:last-child) { padding-bottom: 0; }
  .catalog-content > .cta-band:last-child { margin: var(--sec) calc(50% - 50vw) 0; padding: clamp(4rem, 6.5vw, 6rem) calc(50vw - 50%); border-radius: var(--r-top) var(--r-top) 0 0; background: radial-gradient(48rem 20rem at 30% 0%, color-mix(in srgb, var(--soft) 10%, transparent), transparent 70%), var(--deeper); }
  .catalog-content > .cta-band:last-child::before { content: none; }
  .cta-band .cta-group { margin-top: 1.5rem; }
  .cta-band.campaign-cta, .campaign-cta { border: 0; }
  .campaign-form { border-radius: var(--r-card); }
  .campaign-cta { padding: clamp(1.75rem, 4vw, 3rem); border-radius: var(--r-card); background: var(--surface-sunken); }

  @media (prefers-reduced-motion: no-preference) {
    html:not([data-motion="off"]) & .page-head h1 { animation: cf-slide 1s var(--ease) backwards; }
    html.js:not([data-motion="off"]) &:has(> .catalog-content:is([data-page-kind="devaEyeCsaasPage"], [data-page-kind="serviceCategoryPage"], [data-page-kind="servicePage"], [data-page-kind="servicePlanPage"])) .page-head::before { animation: cf-beam 9s linear infinite; }
    html.js:not([data-motion="off"]) .service-dataflow .dataflow::after { content: ""; position: absolute; left: 0; top: calc(50% - 4px); z-index: 0; width: 8px; height: 8px; border-radius: 50%; background: var(--action); box-shadow: 0 0 1rem var(--cta); animation: cf-packet 5s var(--ease-in-out) infinite; }
  }
  @keyframes cf-beam { from { --bx: -40%; } to { --bx: 140%; } }
  @keyframes cf-packet { from { transform: translateX(0); opacity: 0; } 10%, 90% { opacity: 1; } to { transform: translateX(min(78rem, 100vw)); opacity: 0; } }
  @media (max-width: 760px) { .service-dataflow .dataflow::after { display: none; } }
  @media print { .page-head { background: none; color: inherit; } }
}
@media (max-width: 61.25rem) {
  html:not(.js) #main.inner-main { padding-top: 0; }
  html:not(.js) #main.inner-main .page-head { padding-top: 14rem; }
}

/* 內頁頂端的導覽膠囊壓在深色頁首上：毛玻璃底調成接近不透明的白，維持與首頁相同的辨識度與對比。 */
body:has(.inner-main) .site-header::before { background: color-mix(in srgb, var(--paper) 99%, transparent); }

/* issue 176（收尾）：下面這些規則原本散在頁群樣式表裡，卻同時作用在別的頁群的頁面上（內容區導言、供契事實列、空狀態、表格儲存格對齊）。
   頁群樣式表改成依頁型只載入需要的之後，跨群共用的規則一律放在這裡，所有內頁都有。 */
#main.inner-main {
  .catalog-content > .content-section:has(> h2 + p):not([class*="service-"], .answer-summary, .retention, .cta-band, .campaign-cta) > p { max-width: 52rem; color: var(--muted); font-size: var(--fs-lead); }
  .contract-facts { display: flex; flex-wrap: wrap; gap: .625rem; margin: 0 0 clamp(1.5rem, 3vw, 2.5rem); }
  .contract-facts > div { display: flex; align-items: baseline; gap: .625rem; padding: .5rem 1.125rem; border: 0; border-radius: var(--r-pill); background: var(--surface-sunken); }
  .contract-facts dt { font-size: .75rem; font-weight: 700; letter-spacing: .08em; }
  .contract-facts dd { margin: 0; font-weight: 800; }
  .directory-empty { padding: 2rem; border: 1px dashed var(--field-border); border-radius: var(--r-card); background: var(--surface-sunken); color: var(--ink); font-weight: 700; text-align: center; }
  .catalog-content .data-table tbody td, .catalog-content .data-table tbody th { vertical-align: middle; }
}

/* issue 189（B1）：卡片列——欄數依卡片數量決定，每一列都排滿；排不滿時最後一列置中、卡片等寬，不再出現孤兒列或大小不一。
   flex 換行：每張卡寬 = (100% − (欄數−1)×間距) ÷ 欄數，justify-content: center 讓最後一列置中。
   卡片數只算看得見的（篩選會把卡片設成 hidden）：:nth-child(n of :not([hidden]))。
   欄數：手機 1；40rem 起 2；62rem 起 3，但剛好 1 張＝1 欄、2 張或 4 張＝2 欄（2×2，不排成 3＋1）。
   原廠牆（.partner-cards）的旗艦卡：只有 3 欄且張數除以 3 餘 2（2、5、8 張）時第一張跨兩欄，剛好補滿第一列。 */
#main.inner-main {
  :is(.partner-cards, .product-section .product-cards, .tile-grid.scenario-grid, .portfolio-section .catalog-grid) {
    --cols: 1; --gap: clamp(1rem, 1.6vw, 1.5rem);
    display: flex; flex-wrap: wrap; justify-content: center; gap: var(--gap);
    > * { flex: 0 0 calc((100% - (var(--cols) - 1) * var(--gap)) / var(--cols) - .02px); min-width: 0; }
  }
  .brand-cards.partner-cards { --gap: clamp(.75rem, 1.4vw, 1.25rem); }
  .tile-grid.scenario-grid { --gap: 1rem; }
  @media (min-width: 40rem) {
    :is(.partner-cards, .product-section .product-cards, .tile-grid.scenario-grid, .portfolio-section .catalog-grid) { --cols: 2; }
  }
  @media (min-width: 62rem) {
    :is(.partner-cards, .product-section .product-cards, .tile-grid.scenario-grid, .portfolio-section .catalog-grid) {
      --cols: 3;
      &:not(:has(> :nth-child(3 of :not([hidden])))) { --cols: 2; }
      &:has(> :nth-child(4 of :not([hidden]))):not(:has(> :nth-child(5 of :not([hidden])))) { --cols: 2; }
    }
    .brand-cards.partner-cards:not(:has(> :nth-child(3 of :not([hidden])))) { --cols: 3; }
    .partner-cards > :nth-child(1 of :not([hidden])):nth-last-child(3n + 2 of :not([hidden])) { flex-basis: calc((100% - 2 * var(--gap)) / 3 * 2 + var(--gap) - .02px); }
  }
  :is(.partner-cards, .product-section .product-cards, .tile-grid.scenario-grid, .portfolio-section .catalog-grid):not(:has(> :nth-child(2 of :not([hidden])))) { --cols: 1; }
}

/* issue 233（使用者：頁首過大、下方空；同一品牌一致、品牌之間不同）：取代 2026-10-06 全站固定 57rem 的做法。
   品牌根頁在後台選「頁首高度（桌機）」，_Layout 在 .page-head 輸出 data-head-h（rem 數字，子頁沿用根頁的值）；「自動」不輸出屬性，高度由內容決定。
   固定值只是最小高度，內容較高時照樣撐高。內容由上往下排（麵包屑、標題位置一致），多出的空間在下方；
   1600px 以上 canvas.css 的「內頁頁首置中、36rem」權重較高（#main#main），這裡用 &#main 拉到同級並改回靠上。手機頁首內容差異太大，不固定。 */
#main.inner-main {
  @media (min-width: 61.3125rem) {
    &#main:has(> .catalog-content > .brand-subnav) > .page-head[data-head-h] { justify-content: flex-start; }
    /* issue 255：依《網頁修正》頁首左上一律顯示品牌 Logo（去背反白版），取代 issue 235 方案 A 的隱藏規則。 */
    &#main:has(> .catalog-content > .brand-subnav) > .page-head[data-head-h="40"] { min-height: 40rem; }
    &#main:has(> .catalog-content > .brand-subnav) > .page-head[data-head-h="42"] { min-height: 42rem; }
    &#main:has(> .catalog-content > .brand-subnav) > .page-head[data-head-h="44"] { min-height: 44rem; }
    &#main:has(> .catalog-content > .brand-subnav) > .page-head[data-head-h="46"] { min-height: 46rem; }
    &#main:has(> .catalog-content > .brand-subnav) > .page-head[data-head-h="48"] { min-height: 48rem; }
    &#main:has(> .catalog-content > .brand-subnav) > .page-head[data-head-h="50"] { min-height: 50rem; }
    &#main:has(> .catalog-content > .brand-subnav) > .page-head[data-head-h="52"] { min-height: 52rem; }
    &#main:has(> .catalog-content > .brand-subnav) > .page-head[data-head-h="54"] { min-height: 54rem; }
    &#main:has(> .catalog-content > .brand-subnav) > .page-head[data-head-h="56"] { min-height: 56rem; }
    &#main:has(> .catalog-content > .brand-subnav) > .page-head[data-head-h="58"] { min-height: 58rem; }
    &#main:has(> .catalog-content > .brand-subnav) > .page-head[data-head-h="60"] { min-height: 60rem; }
    &#main:has(> .catalog-content > .brand-subnav) > .page-head[data-head-h="62"] { min-height: 62rem; }
    &#main:has(> .catalog-content > .brand-subnav) > .page-head[data-head-h="63"] { min-height: 63rem; }
  }
}