* { box-sizing: border-box; }
html { color-scheme: light; scroll-behavior: auto; /* 導覽是固定在上緣的懸浮膠囊（約 72px，含上緣 12px）。沒有這個 padding，跳至主要內容與任何 #id 錨點都會把目標壓在導覽下面。 */ scroll-padding-top: 8.125rem; }
body { margin: 0; font-family: var(--font-body); font-size: 1rem; line-height: 1.8; color: var(--ink); background: var(--paper); overflow-wrap: anywhere; }
a { color: var(--action); text-underline-offset: .22em; }
a:hover { color: var(--ink); }
/* 全站焦點環統一：3px 實線、間距 3px；淺底用行動藍（對白底 5.7:1），深底元件在 chrome.css／motion.css／各頁群改色為 --soft（亮藍，對 --deeper 11:1）。 */
:focus-visible { outline: 3px solid var(--action); outline-offset: 3px; }
button, input, textarea, select { font: inherit; }
img { max-width: 100%; height: auto; }
/* 方向 A（WI-19／#78，Task 5）：原廠頁頁首的 Logo 框——原型的 .vendor-logo 方框，不套 CSS filter（§12.1）。 */
.partner-logo-frame { display: inline-flex; align-items: center; justify-content: center; margin-block: 1rem; padding: 1rem 1.5rem; border: 1px solid var(--line); border-radius: var(--radius-m); background: var(--wash); }
.card-image { display: block; width: 100%; max-width: 100%; aspect-ratio: 16 / 9; height: auto; object-fit: cover; border-radius: var(--radius-m); margin-block-end: 1rem; }
/* 2026-09-29（WI-02／#91）：按鈕改為靜態審稿樣板的樣式——6px 圓角矩形（不是藥丸）、min-height 48px、
字重 650。主要按鈕實心行動色配白字（5.72:1），hover 走深一階 --action-hover（8.14:1）。
樣板的 .button 另帶 1px 同色邊框，讓實心與空心兩種按鈕的外框尺寸一致，這裡照做。 */
.nav-cta { display: inline-flex; gap: .75rem; align-items: center; justify-content: center; background: var(--action); color: var(--paper); border: 1px solid var(--action); padding: .8125rem 1.4375rem; border-radius: var(--radius-s); font-size: .9375rem; font-weight: 650; line-height: 1.5; text-decoration: none; min-height: 48px; transition: background .15s, border-color .15s; }
.nav-cta:hover { background: var(--action-hover); border-color: var(--action-hover); color: var(--paper); }
/* issue 118：樣板 .container 為 max-width 1240、左右內距 24px（≥1300px 為 32px，≤600px 為 20px），內容寬 1192／1176。 */
.breadcrumb a { color: var(--muted); text-decoration: none; }
.breadcrumb a:hover, .breadcrumb a:focus-visible { text-decoration: underline; text-underline-offset: 5px; }
.breadcrumb ol { display: flex; flex-wrap: wrap; list-style: none; gap: .6rem; padding: 0; }
.breadcrumb li + li::before { content: '/'; margin-right: .6rem; color: var(--muted); }
/* 方向 A（WI-19／#78）：內頁頁首（麵包屑＋h1＋導言）。整個帶子貼齊視口寬度只留一條底線；
內含的 .breadcrumb／h1／.lead 各自照 main 的作法置中收窄到 1200px。 */
/* Task 13b round 2：.page-head 本來就在 1200px 的 main 裡，h1／導言不再各自縮窄置中（那會比麵包屑多縮
一次）。頁首是單欄格線：麵包屑第 1 列、eyebrow 第 2 列、h1 第 3 列——eyebrow 由 Catalog 的 pageHeader
section 輸出、原始碼在 _Layout 的 h1 之後，視覺順序交給列號；其餘子節點依原始碼順序排在後面。 */
/* issue 118：樣板 .hero 為上 68px／下 48px，麵包屑在它上方 22px；分隔線由下一個 .section 的上框線提供，頁首自己不畫線。 */
.page-head { display: grid; grid-template-columns: minmax(0, 1fr); justify-items: start; padding-block: 1.375rem 3rem; }
.page-head > .breadcrumb { grid-row: 1; width: auto; margin-inline: 0; margin-bottom: 4.25rem; padding-top: 0; justify-self: stretch; }
/* issue 118：樣板的目錄頁頁首（.directory-title）沒有導言：h1 32px（≤600px 27px）、上 38px／下 28px。 */
/* issue 118：樣板 .with-image .lede 為 17px；頁首有圖時導言縮一階。 */
/* issue 118：樣板的導言下距與按鈕上距會疊合成 28px；格線不疊合，所以扣掉導言的 18px。 */
.page-head > .page-image { justify-self: stretch; }
/* issue 193（v83）：頁首大標的強調詞（headingLines 裡成對星號包住的字）——品牌強調色（h1 帶 data-accent），沒有品牌色時用深色底的亮藍。 */
.page-head h1 em { font-style: normal; color: var(--accent-dark, var(--soft)); }
.page-badges { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1rem; }
.page-badges .badge { margin: 0; }
/* 原廠頁（原型 .vendor-head）：Logo 框左欄、名稱／合作型態／標語右欄；900px 以下單欄、Logo 在 h1 之上。 */
@media (min-width: 900px) {
.page-head:has(> .partner-logo-frame) > .partner-logo-frame { grid-column: 1; grid-row: 2 / span 4; align-self: center; justify-self: stretch; min-height: 8rem; margin: 0; }
/* 有 eyebrow 時右欄仍是 eyebrow → h1：明確列號（寫在歸零規則之後），其餘子節點自動排在第 4 列起。 */
}
/* 字級越大，行高與字距要越緊；維持 1.35／normal 會讓大標散掉（#74）。 */
/* 2026-09-29（#94）：標題排版對齊靜態審稿樣板——行高 1.3（原 1.22）、字距 -.03em（原 -.02em）。
樣板的標題比我們原本鬆，中文在小字級下也比較好讀。 */
h1, h2, h3 { line-height: 1.3; letter-spacing: -.03em; }
h2 { font-size: clamp(1.5625rem, 3vw, 2.25rem); line-height: 1.3; letter-spacing: -.03em; margin: 0; }
h3 { font-size: 1.4375rem; letter-spacing: -.03em; margin: .75rem 0; }
/* 樣板的 .lede：19px、行高 1.95、最寬 780px。行高比內文還鬆，是刻意的——導言字級大，行距要跟著放。 */
.lead { font-size: 1.1875rem; line-height: 1.95; max-width: 780px; color: var(--muted); margin-bottom: 1.75rem; }
/* 樣板的 .eyebrow：11px、字距 .16em、全大寫。比我們原本小、更開，英文短標才像標籤而不像小標題。
text-transform 只影響顯示，不改內容——中文不受影響。 */
.eyebrow { color: var(--action); font-size: .6875rem; letter-spacing: .16em; font-weight: 700; text-transform: uppercase; }
.capabilities { background: var(--ink); color: var(--paper); padding: clamp(1.5rem, 4vw, 3rem); border-radius: var(--radius-l); margin-bottom: 4rem; }
.capabilities ul { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 1.5rem; list-style: none; padding: 0; margin: 2rem 0 0; }
.capabilities li { border-top: 1px solid var(--on-dark-line); padding-top: 1rem; }
/* 方向 A（WI-19／#78）：目錄卡片的固定欄數修飾詞，搭配既有 .catalog-grid（auto-fit）與 .catalog-card。 */
.catalog-grid--2 { grid-template-columns: 1fr; }
.catalog-grid--4 { grid-template-columns: 1fr; }
@media (min-width: 1020px) {
.catalog-grid--4 { grid-template-columns: repeat(4, 1fr); }
}
.catalog-card { padding: clamp(1.5rem, 3vw, 2.5rem); background: var(--wash); border: 1px solid var(--line); border-radius: var(--radius-m); min-width: 0; box-shadow: var(--elevation-card); transition: transform .2s ease, box-shadow .2s ease; }
.catalog-card:hover { transform: translateY(-2px); box-shadow: var(--elevation-raised); }
.catalog-card a { text-decoration: none; }
/* issue 118：樣板 .card h3 為 25px，標題連結沿用內文墨色（不是強調藍）。 */
/* ---------- 方向 A（WI-19／#78）：1px 格線拼接磚，搭配既有卡片格線（trust／phases／scope 等區塊共用）---------- */
/* Task 13b：格線改由每格自己的 1px 外擴陰影畫在 1px gap 裡，容器底色與磚面同色——項目數不是欄數
的倍數時，最後一排沒佔用的格子只會是磚面色，不再露出一大塊格線色；邊緣格子的陰影落在容器邊框上，
被 overflow: hidden 裁掉。欄數修飾詞（--2～--5）只改 grid-template-columns。 */
.tile-grid { display: grid; gap: 1px; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-l); overflow: hidden; }
.tile-grid > * { min-width: 0; background: var(--paper); box-shadow: 0 0 0 1px var(--line); padding: clamp(1.375rem, 2.2vw, 1.875rem); }
/* 方向 A（WI-19／#78，Task 2）：.tile-grid 有時直接套在 ／ 上（首頁作業流程／信任帶，步驟
本身有順序，保留清單語意），這裡重置瀏覽器預設的項目符號與內距，磚格才不會多一層縮排。 */
ol.tile-grid, ul.tile-grid { list-style: none; margin: 0; padding: 0; }
.tile-grid--dark { background: var(--deep); border-color: var(--on-dark-line); }
.tile-grid--dark > * { background: var(--deep); box-shadow: 0 0 0 1px var(--on-dark-line); }
.tile-grid--5 { grid-template-columns: 1fr; }
@media (min-width: 560px) {
.tile-grid--5 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 640px) {
.tile-grid--2, .tile-grid--3, .tile-grid--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 900px) {
.tile-grid--5 { grid-template-columns: repeat(5, 1fr); }
}
@media (min-width: 1020px) {
.tile-grid--3 { grid-template-columns: repeat(3, 1fr); }
.tile-grid--4 { grid-template-columns: repeat(4, 1fr); }
}
/* ---------- 方向 A（WI-19／#78）：深色面板共用配色 ----------
--action 在 --ink／漸層兩端都只有 2.92:1（見 DesignTokenContrastTests），深色面板一律改用
--evidence-accent（eyebrow／連結）與 --muted-on-dark（次要文字），兩者對三種深色背景都 ≥4.5:1。
.topic-card--lead a:not([class])／.cta-band a:not([class]) 刻意排除已帶 class 的按鈕
（如 .nav-cta／.secondary-cta），那些按鈕自己成對指定前景背景，不該被這裡的通用規則蓋掉。 */
.band-dark .eyebrow, .tile-grid--dark .eyebrow, .band-dark a:not([class]), .tile-grid--dark a:not([class]), .cta-band a:not([class]) {
color: var(--evidence-accent);
}
/* issue 118：樣板 .cta-band .eyebrow 的專用亮藍。 */
.cta-band .eyebrow { color: var(--on-dark-eyebrow); }
.band-dark { padding: clamp(1.5rem, 4vw, 3rem); background: var(--deep); border-radius: var(--radius-l); }
.sources { margin-top: 3rem; padding-top: 2rem; border-top: 1px solid var(--line); }
/* issue 118：樣板 .section 為上下 54px＋上框線，.section-head 下距 30px。 */
.scope-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 1.5rem; }
.scope-grid > div { padding: 1.5rem; border-top: 3px solid var(--action); background: var(--wash); min-width: 0; }
/* 方向 A（WI-19／#78，Task 3）：責任邊界三欄套三色標題——包含／不包含／可另議分別沿用既有 token
（--action／--ink／--muted），不新增 hex。 */
.plan-add-ons ul { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 1.25rem; list-style: none; padding: 0; }
.plan-add-ons li { min-width: 0; padding: 1.25rem; border: 1px solid var(--line); border-radius: var(--radius-m); background: var(--wash); }
.evidence-samples ul { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 1.25rem; list-style: none; padding: 0; }
.evidence-samples li { min-width: 0; padding: 1.25rem; border-left: 3px solid var(--evidence-accent); background: var(--wash); }
.evidence-samples h3 { font-size: 1.1rem; margin: 0 0 .5rem; }
.procurement-notes ul { max-width: 78ch; }
.report-sample-image { width: 100%; height: auto; border: 1px solid var(--line); border-radius: var(--radius-m); }
.report-sample figcaption { margin-top: .6rem; color: var(--muted); font-size: .9rem; }
/* issue 173：固定 16:9 比例框，海報與影片比例不同時補深色邊，載入前後高度不變。 */
.catalog-video-player { display: block; width: 100%; max-width: 960px; aspect-ratio: 16 / 9; object-fit: contain; background: var(--ink); border: 1px solid var(--line); border-radius: var(--radius-m); }
.audiences, .security-tier-list, .solution-area-list, .partner-role-links { display: flex; flex-wrap: wrap; gap: 1rem; list-style: none; padding: 0; }
.audiences li, .security-tier-list li, .solution-area-list li { padding: .3rem 1rem; border: 1px solid var(--line); border-radius: 2rem; }
.related-links { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 1.5rem; }
.related-links li { min-width: 0; border-top: 1px solid var(--line); }
.related-links a { text-decoration: none; display: inline-block; min-height: 44px; padding-block: .25rem; }
.related-links p { color: var(--muted); }
.directory-filter { display: flex; flex-wrap: wrap; gap: 1rem; align-items: end; margin-block: 1.5rem; }
.directory-filter > div { display: grid; flex: 1 1 180px; min-width: 0; gap: .35rem; }
.directory-filter input, .directory-filter select { font: inherit; color: var(--ink); background: var(--paper); border: 1px solid var(--field-border); border-radius: var(--radius-s); min-height: 44px; padding: .5rem .7rem; width: 100%; }
.directory-filter button { font: inherit; cursor: pointer; border: 0; min-height: 44px; background: var(--action); color: var(--paper); border-radius: var(--radius-s); padding: .6rem 1.5rem; }
/* 方向 A（WI-19／#78）：篩選膠囊按鈕。只比對 [type="button"]，不動既有送出按鈕（上面那條
.directory-filter button，維持原生 GET 表單的送出鍵樣式）；選取態用 [aria-current="true"]，
跟站內其餘導覽項目（見 _NavItem.cshtml）同一套標記慣例。 */
.directory-filter a, .directory-filter button[type="button"] {
display: inline-flex; align-items: center; justify-content: center; gap: .35rem;
min-height: 44px; padding: .5rem 1.1rem; border-radius: 999px;
border: 1px solid var(--line); background: var(--paper); color: var(--muted);
font-weight: 600; text-decoration: none; cursor: pointer;
transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.directory-filter a:hover, .directory-filter button[type="button"]:hover { color: var(--ink); border-color: var(--ink); }
.directory-filter a[aria-current="true"], .directory-filter button[aria-current="true"] { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.table-scroll { overflow-x: auto; max-width: 100%; margin: 1.5625rem 0 2.8125rem; border: 1px solid var(--line); border-radius: .75rem; }
.data-table { width: 100%; min-width: 820px; border-collapse: collapse; text-align: left; }
.data-table th, .data-table td { padding: 1.25rem; border-top: 1px solid var(--line); vertical-align: top; }
/* issue 118：樣板的表頭是淺底墨字（不是深藍底白字），表身字色另有 token，且沒有斑馬紋。 */
.data-table thead { background: var(--table-head-bg); color: var(--ink); }
.data-table a { display: inline-flex; min-height: 44px; align-items: center; }
/* issue 110：服務範圍表沿用 .table-scroll＋.data-table，欄少所以最小寬度收小；窄版仍在容器內捲動。 */
/* issue 118：MDR 雙軌照樣板 .split——純文字兩欄，序號用灰色小字。 */
.service-track-list { margin: 0; padding: 0; list-style: none; }
.service-track p:not(.number) { margin: 0 0 1.125rem; color: var(--muted); }
/* issue 110：資料流三欄。窄版直排（預設），≥761px 並排；箭頭是 CSS 產生的裝飾，
alt 語法（content: "→" / ""）讓支援的讀屏不念出來，不支援的瀏覽器退回上一行、由 aria 無法影響但內容不在 DOM。 */
.dataflow { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2.5rem; margin: 0; padding: 0; list-style: none; }
.dataflow > li { position: relative; padding: 1.5rem; border: 1px solid var(--line); border-radius: .75rem; background: var(--paper); }
/* issue 118：樣板 .dataflow h3 21px、p 14px 次要色。 */
.dataflow > li:not(:last-child)::after {
content: "↓";
content: "↓" / "";
position: absolute; left: 50%; bottom: -2.25rem; transform: translateX(-50%);
color: var(--action); font-size: 1.5rem; line-height: 2rem;
}
@media (min-width: 761px) {
/* issue 118：樣板是 1fr 26px 1fr 26px 1fr、gap 15px；箭頭畫在間隙裡，所以間隙取 26＋2×15＝56px。 */
.dataflow > li:not(:last-child)::after {
content: "→";
content: "→" / "";
left: auto; right: -2.25rem; width: 1.5rem; text-align: center; bottom: auto; top: 50%; transform: translateY(-50%);
}
}
/* 方向 A（WI-19／#78，Task 6）：資格與三步驟改用共用的 .tile-grid（見上方「1px 格線拼接磚」），取代
原本各自的格線／邊框／編號 CSS；.procurement-qualifications／.purchase-steps 只留 section 層級的
class 供測試選取，磚格外觀交給 .tile-grid 統一負責。 */
.procurement-notice, .security-tier-notice { max-width: 78ch; padding: 1rem 1.25rem; border-left: 3px solid var(--muted); color: var(--muted); }
/* 方向 A（WI-19／#78，Task 6）：下載目錄改用清單卡片（原型 v-downloads 的 .dl-list），取代原本的
.data-table；每一列本身有好幾個各自獨立的連結（標題、原廠、產品、取得／索取），卡片比表格更適合，
也不需要橫向捲動。 */
.download-list { list-style: none; margin: 1.5rem 0 0; padding: 0; display: grid; gap: 1rem; }
.download-item { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 1.5rem; padding: 1.25rem clamp(1.25rem, 3vw, 1.75rem); border: 1px solid var(--line); border-radius: var(--radius-m); background: var(--paper); }
.download-summary { min-width: 0; flex: 1 1 320px; }
/* Task 13b：目錄清單緊接在 .page-head 的 h1 之後，每份文件標題改為 h2（原本 h3 跳過一層標題）；字級維持原本 h3 的大小。 */
.download-meta { display: flex; flex-wrap: wrap; gap: .35rem 1.25rem; font-size: .8125rem; color: var(--muted); margin: 0; }
.contract-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 1rem; }
.contract-facts dt { color: var(--muted); }
/* 方向 A（WI-19／#78）：兩欄定義表（key/value），跟 .contract-facts 一樣用 div 包一組 dt/dd
（dl 底下允許直接包 div），但排成兩欄而不是卡片格。 */
.definition-list { border-top: 1px solid var(--line); margin: 0; }
.definition-list > div { display: grid; gap: .25rem 1.5rem; padding-block: 1rem; border-bottom: 1px solid var(--line); }
@media (min-width: 720px) {
.definition-list > div { grid-template-columns: 200px 1fr; }
}
.definition-list dd { margin: 0; font-size: .9375rem; }
/* 最終審查修正：情境頁「服務邊界說明」是編輯輸入的多行純文字，保留換行。 */
.scope-notes { white-space: pre-line; overflow-wrap: anywhere; }
/* 情境方案總覽的磚標題是頁面 h1 下的第一層（h2），字級沿用磚格 h3 的尺寸（同 .download-summary h2 的做法）。 */
.catalog-directory .tile-grid > li h2 { font-size: 1.4375rem; line-height: 1.3; letter-spacing: -.03em; margin: .75rem 0; }
/* issue 112：有目錄區段 h2 時磚標題降為 h3，尺寸與 h2 版相同；eyebrow 在標題上方。 */
.catalog-directory .tile-grid > li h3 { font-size: 1.4375rem; line-height: 1.3; letter-spacing: -.03em; margin: .75rem 0; }
/* issue 118：樣板 .scenario-grid 的標題連結沿用墨色、內文與 eyebrow 用次要文字色（不是強調藍）。 */
/* issue 126：情境解決方案總覽照樣板 .scenario-grid——2 欄、欄距 0 36px、卡片無外框無底色、上下 28px、只留底線；
600px 以下單欄（寫在下方 ≤600px 區塊）。沿用 .tile-grid 只為了共用卡片內文字樣式，外框與底色在這裡拿掉。 */
/* 樣板的 .button.outline：透明底、墨色字、淺邊框。邊框色不照抄樣板那個淺灰——它對白底只有約 2.2:1，
低於 WCAG 2.2 AA 對 UI 邊框的 3:1；改用 --action（邊框同時也是這顆按鈕唯一的可見輪廓）。 */
.secondary-cta { display: inline-flex; align-items: center; justify-content: center; gap: .75rem; background: transparent; color: var(--ink); border: 1px solid var(--action); padding: .8125rem 1.4375rem; border-radius: var(--radius-s); font-size: .9375rem; font-weight: 650; line-height: 1.5; min-height: 48px; margin: 0; text-decoration: none; transition: background .15s; }
.secondary-cta:hover { background: var(--wash); color: var(--ink); text-decoration: none; }
.faq p { white-space: pre-line; margin: 0; padding: 0 .5rem 1.5rem; }
/* 2026-09-29（WI-02／#91）：作業流程改成靜態審稿樣板的 .split——左欄是區段標題，右欄是編號流程。
取代了方向 B 的 .flow-layout／.flow-rail／.flow-steps（釘選導軌），那組規則一併移除，不留死樣式：
導軌列的是步驟標題，和右欄重複，而樣板的左欄放的是區段說明。編號仍由 CSS 計數器產生，不寫進標記。 */
.split { display: grid; gap: 1.625rem; }
/* #98：樣板的 .split 自 601px 起就是兩欄，gap 在 851px 以上 50px、以下 26px。 */
@media (min-width: 601px) {
.split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
@media (min-width: 851px) {
.split { gap: 3.125rem; }
}
/* ---------- 情境卡（樣板 .scenario-grid）：兩欄 ---------- */
.scenario-grid { display: grid; gap: 0 2.25rem; margin: 0; padding: 0; list-style: none; }
.scenario-grid > li { padding-block: 1.75rem; border-bottom: 1px solid var(--line); }
.scenario-grid h3 a:hover, .scenario-grid h3 a:focus-visible { color: var(--action); text-decoration: underline; text-underline-offset: 5px; }
/* ---------- 代理品牌牆（樣板 .brand-cards）：兩欄圖片卡，含主題標籤 ---------- */
.brand-card { border: 1px solid var(--line); border-radius: var(--radius-xl); overflow: hidden; min-width: 0; background: var(--paper); }
/* #98：樣板的 .card-image 是固定高度 210px（≤600px 185px），不是比例框。用 aspect-ratio 時
1440px 下欄寬約 577px、圖高會長到 346px，四張卡各多 136px，是整頁最大的一處差距。 */
.brand-card h3 a:hover, .brand-card h3 a:focus-visible { color: var(--action); text-decoration: underline; text-underline-offset: 5px; }
.brand-card p { margin: 0; color: var(--muted); font-size: .9375rem; }
/* 主題標籤膠囊（樣板 .tags）：與 .taxonomy-terms 同一種形態，但這裡不是連結，統一用 --ink（見 #88）。 */
.tags { display: flex; flex-wrap: wrap; gap: .375rem; margin: 1.25rem 0; padding: 0; list-style: none; }
.tags li {
border: 1px solid var(--line); background: var(--wash); color: var(--tag-text);
font-size: .6875rem; padding: .25rem .625rem; border-radius: 99px;
}
/* #94：樣板的文字連結靜止時沒有底線，hover／focus 才出現。原本繼承全站 a 的底線，
在品牌卡上與樣板明顯不同（使用者以左右對照截圖指出）。 */
.text-link { display: inline-block; line-height: 1.7; font-weight: 650; text-decoration: none; }
.brand-card .text-link { font-size: .875rem; }
.text-link:hover, .text-link:focus-visible { text-decoration: underline; text-underline-offset: 5px; }
/* #98：樣板的 .section 是「54px 上下內距＋一條上框線」，區段之間因此是 108px 並看得見分隔。
我方原本靠 margin 塌陷成單一 88px，既比樣板窄、也沒有線。--space-section 不動，內頁還在用它。 */
.post-thumb { position: relative; display: grid; place-items: center; aspect-ratio: 16 / 9; background: var(--dark-gradient-end); background-image: linear-gradient(to right, color-mix(in srgb, var(--paper) 5%, transparent) 1px, transparent 1px), linear-gradient(to bottom, color-mix(in srgb, var(--paper) 5%, transparent) 1px, transparent 1px); background-size: 1.625rem 1.625rem; }
.post-thumb span { font-size: .75rem; font-weight: 700; letter-spacing: .14em; color: var(--evidence-accent); }
.evidence-sample { margin: 0; }
.evidence-image { width: 100%; height: auto; border-radius: var(--radius-m); border: 1px solid var(--line); }
.evidence-sample figcaption { margin-top: .6rem; font-size: .9rem; }
/* 方向 A（WI-19／#78）：結尾 CTA 帶改成深色漸層（原本與 .home-cta 共用淺底 --wash）。首頁已改用自己的結尾 CTA（home.css），這裡只服務內頁；padding／border-radius／
background 全部交給 .cta-band，這裡不再重複設定、也不留下會蓋在深色漸層上的淺色邊框。 */
/* issue 135：結尾 CTA 帶全站照樣板 .cta-band 用純色 --navy，不再用漸層。 */
.cta-band p { max-width: 48rem; margin-top: 0; }
/* issue 118：樣板 .cta-band h2 為 28px（≤600px 為 25px）、說明文字 margin 0；內頁的結尾 CTA 帶與首頁共用。 */
/* issue 118：樣板 .cta-band 是 flex 一列——文字在左、按鈕在右，垂直置中，間距 30px；≤850px 改直排。
內頁的文字節點（eyebrow／h2／p 或 .section-heading）是 .cta-band 的直接子節點，所以用格線把它們疊在左欄。 */
@media (min-width: 851px) {
.cta-band { display: grid; justify-content: space-between; grid-template-columns: auto auto; grid-template-rows: repeat(3, auto); column-gap: 1.875rem; align-items: center; align-content: center; }
.cta-band > * { grid-column: 1; }
.cta-band > .cta-group, .cta-band > .nav-cta { grid-column: 2; grid-row: 1 / span 3; margin: 0; }
}
/* issue 118：樣板的 .button.light——白底、--navy 字。--action 在深色面板上只有 2.92:1，內頁 CTA 帶的主要按鈕改用它。 */
.cta-band .nav-cta:hover { background: var(--wash); color: var(--navy); border-color: var(--wash); }
/* Task 2：.secondary-cta 自己帶 class，不吃得到上面「深色面板共用配色」那組
a:not([class]) 規則（那條刻意排除已帶 class 的按鈕）。預設沿用全站 `a { color: var(--action) }`，
--action 對 CTA 漸層兩端都不到 3:1（見 DesignTokenContrastTests），這裡比照同一組深色面板改用
--evidence-accent（該 token 對兩端漸層都已在 DesignTokenContrastTests 鎖住 ≥4.5:1）。 */
.cta-band .secondary-cta { color: var(--evidence-accent); }
.cta-group { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1rem; }
.campaign-period { margin: 0 0 .75rem; font-variant-numeric: tabular-nums; }
.secondary-nav ul { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; list-style: none; padding: 0; margin: 0 0 2rem; }
.secondary-nav a { display: inline-flex; align-items: center; min-height: 44px; }
.taxonomy-groups { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 1rem 1.5rem; margin: 0; }
.taxonomy-groups dt { font-weight: 700; margin-bottom: .4rem; }
.taxonomy-groups dd { margin: 0; }
.taxonomy-terms { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
/* #88：原本只設版面沒設 color，於是有連結的詞繼承全站 a { color: var(--action) }（藍）、
沒連結的 span 繼承 --ink，同一排膠囊深淺交錯。兩者同色，可辨識性靠 hover 與焦點。 */
.taxonomy-terms a, .taxonomy-terms span { display: inline-flex; align-items: center; min-height: 44px; padding: .3rem .85rem; border: 1px solid var(--line); border-radius: 2rem; color: var(--ink); }
@media (max-width: 760px) {
html { scroll-padding-top: 5rem; }
}
/* 減少動態：卡片與 details 不做過場。導覽與頁尾的動態在 chrome.css／motion.css 各自處理。 */
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
.catalog-card, details { transition: none; animation: none; }
}
.contact-entrances a { display: flex; align-items: center; min-height: 48px; padding: .6rem 1rem; border: 1px solid var(--line); border-radius: var(--radius-m); text-decoration: none; }
.article-reading, .article-intro { max-width: 40em; min-width: 0; overflow-wrap: anywhere; }
.article-layout { display: grid; grid-template-columns: minmax(0, 40em) minmax(0, 1fr); gap: 3rem; align-items: start; }
.article-teasers p { font-size: 1rem; line-height: 1.75; }
.article-teasers a, .article-directory-links a { display: inline-flex; align-items: center; min-height: 44px; padding-block: .4rem; }
.article-directory-links { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; font-size: 1rem; }
.article-pagination { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; margin-block: 2rem; }
.article-pagination a { display: inline-flex; align-items: center; min-height: 48px; padding: .6rem 1rem; border: 1px solid var(--line); border-radius: var(--radius-s); }
.article-section p, .article-reading .faq p { white-space: pre-line; }
.contact-layout { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 3rem; }
.contact-main, .contact-aside, .lead-field { min-width: 0; overflow-wrap: anywhere; }
.lead-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; }
.lead-field { display: grid; gap: .4rem; align-content: start; }
/* #88：基礎 .nav-cta 已統一設好底色、內距、圓角，這裡不再 border: 0——那會把邊框清掉而基礎規則本來就沒有邊框。
只留