/* ============================================================
   AI Brand Gateway — AI 示範版
   設計原則：使用 Rainforest 設計 token，搭配置中開場、AI 對話模擬台、
   搜尋趨勢證據卡、評分條視覺化與機器可讀資料公開展示。
   背景只用白與淺灰。
   ============================================================ */

@import url("assets/tokens.css");

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body, h1, h2, h3, h4, p, ul, ol, dl, dd, figure, blockquote, pre { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img, svg { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
table { border-collapse: collapse; width: 100%; }

body {
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.75;
  letter-spacing: var(--ls-body);
  color: var(--rf-ink);
  background: var(--rf-white);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ---------- 版面 ---------- */
.wrap {
  width: 100%;
  max-width: calc(var(--wrap) + var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.wrap--narrow { max-width: calc(880px + var(--gutter) * 2); }

/* 全站轉為淺色後，bg-1(#fafaf9) 與白底相鄰幾乎看不出交界，
   因此加上 hairline 分隔線。 */
.section { padding-block: var(--sec-y); border-top: 1px solid var(--rf-line-soft); }
.section--bg1 { background: var(--rf-bg-1); }
.section--bg4 { background: var(--rf-bg-4); }

@media (max-width: 1199.98px) { .section { padding-block: var(--sec-y-tab); } }
@media (max-width: 809.98px)  { .section { padding-block: var(--sec-y-mob); } }

/* ---------- 排版 ---------- */
.eyebrow {
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--rf-accent-text);
  margin-bottom: 18px;
}

h1, h2, h3, h4 { font-family: var(--font-sans); font-weight: 600; line-height: 1.2; color: inherit; }
.h1 {
  font-family: var(--font-display);
  font-size: 60px;
  font-weight: 700;
  letter-spacing: var(--ls-h1);
  text-transform: uppercase;
}
.h2 { font-size: 40px; letter-spacing: var(--ls-h2); }
.h3 { font-size: 19px; letter-spacing: var(--ls-h3); }
.h4 { font-size: 17px; letter-spacing: var(--ls-h3); }

.lead { font-size: 18px; line-height: 1.75; color: var(--rf-ink-60); max-width: 64ch; }
.body-sm { font-size: 15px; line-height: 1.75; color: var(--rf-ink-60); }
.mono { font-family: var(--font-mono); font-size: 13px; letter-spacing: 0; }

@media (max-width: 1199.98px) {
  .h1 { font-size: 44px; }
  .h2 { font-size: 32px; }
  .lead { font-size: 17px; }
}
@media (max-width: 809.98px) {
  .h1 { font-size: 32px; letter-spacing: -0.8px; }
  .h2 { font-size: 25px; letter-spacing: -0.6px; }
  .h3 { font-size: 17px; }
  .lead { font-size: 16px; }
  body { font-size: 15px; }
}

/* 置中式區塊標頭 */
.sec-head { margin-bottom: 56px; max-width: 760px; }
.sec-head--center { margin-inline: auto; text-align: center; }
.sec-head--center .lead { margin-inline: auto; }
.sec-head .lead { margin-top: 18px; }
@media (max-width: 809.98px) { .sec-head { margin-bottom: 36px; } }

/* ---------- 按鈕 ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 26px;
  border-radius: var(--r-card);
  font-size: 15px;
  font-weight: 500;
  border: 1px solid transparent;
  transition: background-color .18s ease, border-color .18s ease, color .18s ease;
}
.btn--primary { background: var(--rf-accent); color: var(--rf-accent-ink); }
.btn--primary:hover { background: var(--rf-accent-hover); }
.btn--ghost { border-color: var(--rf-line-strong); color: var(--rf-ink); }
.btn--ghost:hover { border-color: var(--rf-ink); }
.btn--sm { padding: 10px 18px; font-size: 14px; }

/* ---------- Header（淺色暖灰，同母公司官網） ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 255, 255, .88);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--rf-line-soft);
  color: var(--rf-ink);
}
.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  height: 66px;
}
.brand { display: flex; align-items: baseline; gap: 10px; }
.brand__mark { font-family: var(--font-display); font-size: 18px; font-weight: 700; letter-spacing: -0.4px; }
.brand__mark span { color: var(--rf-accent-text); }
.brand__sub { font-size: 12px; color: var(--rf-ink-60); letter-spacing: 0; }
.site-nav { display: flex; align-items: center; gap: 30px; }
.site-nav a { font-size: 14px; color: var(--rf-ink-80); }
.site-nav a:hover { color: var(--rf-accent-text); }
@media (max-width: 1199.98px) { .site-nav { display: none; } }
@media (max-width: 809.98px)  { .brand__sub { display: none; } }

/* ---------- Hero（白底） ---------- */
.hero {
  background: var(--rf-white);
  padding-block: 104px 96px;
  position: relative;
}
/* 背景裝飾圖：純裝飾、不承載任何資訊，因此走 CSS 背景而非 <img>。
   B 版 hero 本身即 full-bleed，inset: 0 就夠，不需要 100vw。
   中心保留極淡線路讓置中大標仍清楚，向外圍自然收掉。
   注意：不可在 .hero 加 overflow: hidden —— 手機版 .console 有負下邊界重疊設計。 */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: url("assets/img/hero-bg.svg") no-repeat center top / cover;
  opacity: .85;
  /* 中心保留 20% alpha → 中段可見 → 最外圈保留 32% alpha，讓上半部左右線路更明顯，
     同時避免與 section 邊界產生硬切。-webkit- 前綴為 Safari 15.4 以前版本保留 */
  -webkit-mask-image: radial-gradient(120% 95% at 50% 28%, rgba(0, 0, 0, .2) 0 24%, #000 62%, rgba(0, 0, 0, .32) 100%);
  mask-image: radial-gradient(120% 95% at 50% 28%, rgba(0, 0, 0, .2) 0 24%, #000 62%, rgba(0, 0, 0, .32) 100%);
  animation: hero-drift var(--dur-drift) var(--ease-out) infinite alternate;
}
/* 景深的中景層：純 CSS 漸層光暈，不需要第二張圖檔。置中版型故光暈也置中。
   綠色只當填色面（token 規則），用 color-mix 引用 --rf-accent 而不硬寫色碼。 */
.hero::after {
  content: "";
  position: absolute;
  /* 左右一律 0：負的水平 inset 會直接生出水平捲軸（實測 1440px 下 scrollWidth 1498）。
     漸層本身在到達邊緣前就已淡盡，不需要向外溢出 */
  inset: -8% 0 auto 0;
  height: 72%;
  z-index: 0;
  pointer-events: none;
  /* 三段落差避免看得出來的邊緣環；比 A 版再低一階，因為 B 版光暈正落在置中大標後方 */
  background: radial-gradient(58% 58% at 50% 24%,
              color-mix(in srgb, var(--rf-accent) 7%, transparent) 0%,
              color-mix(in srgb, var(--rf-accent) 3%, transparent) 48%,
              transparent 84%);
  animation: hero-drift var(--dur-drift) var(--ease-out) infinite alternate;
}
.hero__inner { position: relative; z-index: 1; text-align: center; }
.hero__zh { font-size: 21px; font-weight: 500; letter-spacing: var(--ls-h3); color: var(--rf-ink-29); margin-top: 22px; }
.hero__lead { color: var(--rf-ink-60); margin: 26px auto 0; max-width: 62ch; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 38px; }
.hero__engines {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 10px;
  margin-top: 40px;
}
.chip {
  padding: 6px 13px;
  border: 1px solid var(--rf-line-strong);
  border-radius: 999px;
  font-size: 12.5px;
  color: var(--rf-ink-60);
  letter-spacing: 0;
}

/* Hero 動效（純 CSS）：分層淡入上移 + highlighter 刷過 + 指示點脈動，
   滾動景深另見檔案下方的 @supports 區塊。
   進場位移 ≤ 24px；元件基礎樣式不含 opacity: 0，動畫被停掉時文字仍完整可見。 */
/* 位移用 transform 而非獨立的 translate 屬性：獨立屬性在部分引擎不在硬體加速清單上，
   一旦沒被加速，無限循環的 drift 會退化成主執行緒每格重繪整個 hero 背景層。 */
@keyframes hero-rise  { from { opacity: 0; transform: translateY(24px) scale(.985); } }
@keyframes hero-drift { to   { transform: translateY(-8px); } }
@keyframes hero-pulse { 50%  { opacity: .45; } }
@keyframes hero-sweep { from { background-size: 0 100%; } }
@keyframes content-rise { from { opacity: 0; transform: translateY(24px); } }
@keyframes gateway-signal {
  46%, 54% { transform: scale(1); box-shadow: 0 0 0 0 color-mix(in srgb, var(--rf-accent) 45%, transparent); }
  50%      { transform: scale(1.45); box-shadow: 0 0 0 7px transparent; }
}

.hero .eyebrow,
.hero .h1,
.hero__zh,
.hero__lead,
.hero__actions,
.hero__engines,
.console { animation: hero-rise var(--dur-rise) var(--ease-out) backwards; }
.hero .h1       { animation-delay:  90ms; }
.hero__zh       { animation-delay: 180ms; }
.hero__lead     { animation-delay: 270ms; }
.hero__actions  { animation-delay: 360ms; }
.hero__engines  { animation-delay: 450ms; }
.console        { animation-delay: 540ms; }

/* Hero 下方：AI 對話模擬台 */
.console {
  position: relative;
  z-index: 2;
  margin: 64px auto 0;
  max-width: 900px;
  background: var(--rf-white);
  border: 1px solid var(--rf-line);
  border-radius: var(--r-card);
  /* 母公司官網為全扁平設計，此處僅用極淡陰影讓 console 浮起，不做重投影 */
  box-shadow: 0 16px 40px rgba(9, 9, 9, .07);
  overflow: hidden;
}
.console__bar {
  display: flex; align-items: center; gap: 8px;
  padding: 12px 18px;
  background: var(--rf-bg-3);
  border-bottom: 1px solid var(--rf-line);
  font-size: 12px;
  color: var(--rf-ink-60);
  letter-spacing: 0;
}
.console__dot {
  width: 8px; height: 8px; border-radius: 50%; background: var(--rf-accent); flex: none;
  /* 首條路徑在 t=4s 啟動、7.5 秒後抵達中央閃斷（t=11.5s），之後每 5 秒一條。
     脈衝峰值落在週期正中，因此 delay = 11.5s − 週期/2；用 calc 寫出這條式子，
     --dur-signal 若調整，峰值仍會自動對回抵達時刻。 */
  animation: gateway-signal var(--dur-signal) ease-in-out calc(11.5s - var(--dur-signal) / 2) infinite;
}
.console__body { padding: 28px 32px 32px; }
.console__q {
  display: flex; gap: 12px; align-items: baseline;
  font-size: 17px; font-weight: 500; color: var(--rf-ink);
  padding-bottom: 20px; margin-bottom: 20px;
  border-bottom: 1px solid var(--rf-line-soft);
}
.console__q::before { content: "Q"; font-family: var(--font-display); font-size: 12px; font-weight: 700; color: var(--rf-accent-text); letter-spacing: 1px; flex: none; }
.console__a { font-size: 15px; line-height: 1.9; color: var(--rf-ink-60); }
.console__a mark {
  /* 綠底用 gradient 當 background-image（而非 background-color），
     才能用 background-size 做「由左往右刷過」的 highlighter 動畫。
     刷過之前文字是 ink 壓在白底（14.18:1），中途不會有對比度不足的瞬間。
     background-color 必須顯式歸零 —— 原本的 background 簡寫會一併重設它，改成只寫
     background-image 之後，瀏覽器預設樣式的 mark { background-color: Mark }（黃色）
     就會從尚未被漸層蓋到的區域透出來。 */
  background-color: transparent;
  background-image: linear-gradient(var(--rf-accent), var(--rf-accent));
  background-repeat: no-repeat;
  background-size: 100% 100%;
  color: var(--rf-accent-ink);
  font-weight: 500;
  padding: 1px 4px;
  border-radius: 3px;
  /* 預設直接顯示完成態；支援 View Timeline 時才由下方的 contain 範圍控制刷入，
     避免不支援的瀏覽器把關鍵字永久留在透明底色。 */
}
.console__cites { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.cite-chip {
  padding: 5px 11px;
  border: 1px solid var(--rf-line-strong);
  border-radius: 999px;
  font-size: 12px;
  color: var(--rf-ink-60);
  letter-spacing: 0;
}
.console__note {
  margin-top: 22px; padding-top: 18px;
  border-top: 1px solid var(--rf-line-soft);
  font-size: 13.5px; color: var(--rf-ink-60);
}
.console__note b { color: var(--rf-accent-text); font-weight: 500; }

@media (max-width: 1199.98px) {
  .hero { padding-block: 72px 72px; }
  .console { margin-top: 48px; }
  .hero::before { opacity: .7; }
}
@media (max-width: 809.98px) {
  .hero { padding-block: 52px 56px; }
  .hero__zh { font-size: 17px; }
  /* 手機版 hero 又高又窄，cover 只會放大到圖的空白中心而等於看不見；
     改成把整張對稱圖縮成頂部橫帶，並改用垂直漸層遮罩往下收掉 */
  .hero::before {
    opacity: .8;
    background-size: 130% auto;
    -webkit-mask-image: linear-gradient(to bottom, #000 0 50%, transparent 90%);
    mask-image: linear-gradient(to bottom, #000 0 50%, transparent 90%);
  }
  .console { margin: 36px auto -56px; }
  .console__body { padding: 22px 20px 24px; }
  .console__q { font-size: 15px; }
}

/* ---------- Hero 滾動景深 ----------
   三個平面各走不同速率與起始區間，才是帶延遲感的景深而非單純視差：
     中景 .hero::after（光暈）先反向、遠景 .hero::before（背景圖）稍晚順向，
     近景 .hero__inner 在 hero 離場後段才上移。
   近景刻意掛在沒有進場動畫的容器上，避免與 hero-rise 爭搶 transform；
   子元素的進場位移會與父層位移自然疊加。.console 本身有進場動畫，不掛景深。

   漸進增強：scroll-driven 動畫尚未 Baseline（Firefox 未普及），
   不支援的瀏覽器走下方 @supports not 的 background-attachment: fixed 單層視差。 */
@supports (animation-timeline: scroll()) {
  /* 遠景向下移多少，就從自身底部同步裁掉多少：背景仍以完整 hero 高度計算，
     可視底緣則固定在 hero 邊界，不會溢入下一個灰色區塊。 */
  @keyframes hero-far  { to { transform: translateY(104px); clip-path: inset(0 0 104px 0); } }
  @keyframes hero-mid  { to { transform: translateY(-64px); opacity: .35; } }
  /* 近景只做位移、不做淡出：exit 範圍的長度等於元素自身高度，元素比視窗高時
     （手機的 hero 就是）淡出會在文字還留在畫面上時就開始。實測 390x844 捲到 600px 時
     最後一顆引擎 chip 仍可見，而近景 opacity 已降到 .675，有效對比度只剩 2.77:1，
     遠低於 AA 4.5:1。景深靠三層位移速率差已經足夠，不需要犧牲可讀性。 */
  @keyframes hero-near { to { transform: translateY(-32px); } }

  /* animation-timeline 必須寫在 animation 簡寫之後 ——
     它是簡寫的 reset-only 值，寫在前面會被簡寫重設成 auto、景深整條失效。

     兩個背景層綁 scroll(root) 而非 view()：hero 位於文件最頂端，view() 的
     cover 範圍在載入時就已經走掉約四成（實測 far 開場即偏移 28px、光暈已淡到 .66），
     等於設計好的靜止構圖永遠看不到。scroll(root) 的進度 0 就是頁面頂端。

     中景從 4vh 開始、遠景延後到 12vh 才開始，並用不同終點拉開反應速度；
     這是在零 JavaScript 前提下模擬滾動後延遲反應，而非時間型慣性。 */
  .hero::before {
    clip-path: inset(0);
    animation: hero-far var(--ease-out) both;
    animation-timeline: scroll(root block);
    animation-range: 12vh 120vh;
  }
  .hero::after {
    animation: hero-mid var(--ease-out) both;
    animation-timeline: scroll(root block);
    animation-range: 4vh 110vh;
  }
  /* 近景相反 —— 只在 hero 離場時才動，用 view() 的 exit 範圍最貼切，
     載入時進度為 0（實測位移 0、opacity 1），不影響首屏 */
  .hero__inner {
    animation: hero-near var(--ease-out) both;
    animation-timeline: view();
    /* 從 exit 35% 才起算：exit 範圍一開始 hero 仍幾乎整屏可見，若立刻位移會讓
       還在閱讀的文字不必要地滑動。延後起點讓近景只在真的離場時反應。 */
    animation-range: exit 35% exit 100%;
  }

  /* 窄高螢幕上位移過重，振幅砍半（沿用既有斷點，不新增） */
  @media (max-width: 809.98px) {
    @keyframes hero-far  { to { transform: translateY(48px); clip-path: inset(0 0 48px 0); } }
    @keyframes hero-mid  { to { transform: translateY(-28px); opacity: .35; } }
    @keyframes hero-near { to { transform: translateY(-16px); } }
  }
}
/* 支援 scroll-triggered animation 時，答案完整入鏡便啟動固定時長的刷色動畫；
   動畫開始後不再依賴後續捲動距離，離開 cover 範圍才 reset 供下次入鏡重播。
   不支援的瀏覽器走 mark 基礎樣式的 100% 靜態完成態。 */
@supports (animation-trigger: --answer-trigger play-forwards) {
  .console {
    timeline-trigger: --answer-b view() contain / cover;
    trigger-scope: --answer-b;
  }
  .console__a mark {
    animation: hero-sweep var(--dur-sweep) var(--ease-out) both;
    animation-trigger: --answer-b play-forwards reset;
  }
}
/* 降級：沒有 scroll-driven 動畫時，用視窗定位的背景做單層視差 */
@supports not (animation-timeline: scroll()) {
  .hero::before { background-attachment: fixed; }
  /* 行動裝置多把 fixed 當 scroll，且 fixed 背景在滾動時重繪成本高，直接關掉 */
  @media (max-width: 809.98px) {
    .hero::before { background-attachment: scroll; }
  }
}

/* ---------- 內容區塊捲動進場 ----------
   每個 section 以「標題 → 主要內容」兩段進場；只選取 wrap 的直接子層，
   避免卡片、表格列與 FAQ 項目各自動畫而讓長頁面顯得零碎。
   元素進入視窗後播放固定時長動畫，不受使用者捲動速度影響；同一 trigger
   名稱由 trigger-scope 限定在各自元素內。

   進場動畫每個元素一生只播一次，animation-trigger 的兩個關鍵字都不能改：
     play-once —— 「只從初始或暫停狀態播放，已結束則忽略」。不可用
       play-forwards，那是「設正向速率後 play」，對已結束的動畫會把進度拉回 0。
     none（退場動作）—— 不可省略、更不可寫 reset，reset 正是重播的來源。

   同理刻意沒有 animation-timeline: view() 降級：View Timeline 由捲動進度驅動，
   回捲必然反向淡出，純 CSS 無法單向化。不支援 animation-trigger 的瀏覽器直接
   維持靜態完成態（元件基礎樣式不含 opacity: 0，起始狀態只寫在 keyframes 的
   from），寧可沒有進場動畫，也不要長頁面上下捲動時內容反覆淡入淡出。 */
@supports (animation-trigger: --content-trigger play-once) {
  .section > .wrap > *,
  .cta > .wrap > * {
    trigger-scope: --content-trigger;
    animation: content-rise var(--dur-rise) var(--ease-out) both;
    animation-trigger: --content-trigger play-once none;
  }
  /* 範圍尾端必須是 exit 100%（＝cover 100%），不可停在 exit 0%：捲動位置一旦
     越過範圍尾端，觸發器就不會啟動，而 both fill 會把元素釘在 from 的
     opacity: 0。用 End 鍵、hash 連結或還原捲動位置直接跳到頁尾時，實測
     .cta 的 lead 有一段仍在畫面上卻是全透明的。延長到 exit 100% 之後，只有
     完全捲出畫面上方的元素才會落在範圍外，看不見也就無所謂。
     斜線後的第二個範圍是 timeline-trigger-active-range（觸發器何時停止作用、
     進而觸發退場動作），預設等同啟動範圍；這裡退場動作是 none，寫不寫都一樣。 */
  .section > .wrap > .sec-head,
  .cta > .wrap > .eyebrow,
  .cta > .wrap > .h2 {
    timeline-trigger: --content-trigger view() entry 5% exit 100%;
  }
  .section > .wrap > :not(.sec-head),
  .cta > .wrap > .lead,
  .cta > .wrap > .cta__actions {
    timeline-trigger: --content-trigger view() entry 10% exit 100%;
  }
}

/* ---------- 搜尋趨勢證據卡 ---------- */
.shift-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.shift-card {
  background: var(--rf-white);
  border: 1px solid var(--rf-line);
  border-radius: var(--r-card);
  border-top: 3px solid var(--rf-accent);
  box-shadow: var(--rf-shadow-card);
  padding: 32px;
}
.shift-card__title { margin-bottom: 18px; }
.shift-card__body { font-size: 15px; line-height: 1.9; color: var(--rf-ink-60); }
.shift-card__body strong { color: var(--rf-ink); font-weight: 600; }
.shift-card__body + .shift-card__body { margin-top: 14px; }
.shift-card__close { margin-top: 18px; font-size: 17px; font-weight: 600; line-height: 1.7; color: var(--rf-ink); }
@media (max-width: 1199.98px) { .shift-grid { grid-template-columns: 1fr; } }
@media (max-width: 809.98px)  { .shift-card { padding: 24px 22px; } }

/* ---------- 定義卡 ---------- */
.def-card {
  background: var(--rf-white);
  border: 1px solid var(--rf-line);
  /* 純裝飾線 → 用主綠。非文字、不承載資訊，不受 WCAG 對比規範 */
  border-left: 3px solid var(--rf-accent);
  border-radius: var(--r-card);
  padding: 36px 40px;
}
/* 只作用於定義段，卡片內其他段落（三層架構）各自定義字級，不必再回頭覆蓋 */
.def-card > p { font-size: 19px; line-height: 1.85; color: var(--rf-ink-29); }
.def-card > p + p { margin-top: 16px; }
.def-card > p strong { font-weight: 600; color: var(--rf-ink); }
@media (max-width: 809.98px) { .def-card { padding: 24px 22px; } .def-card > p { font-size: 16px; } }

/* ---------- 定義卡內：AIO 三層架構 ---------- */
.layers { margin-top: 32px; padding-top: 28px; border-top: 1px solid var(--rf-line-soft); }
.layers__note, .layer__desc { font-size: 15px; line-height: 1.85; color: var(--rf-ink-60); }
.layers__note { margin-top: 10px; }
/* 欄數收斂沿用 .termgrid 的寫法，不新增斷點 */
.layers__grid { margin-top: 24px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
.layer__desc { margin-top: 8px; }
@media (max-width: 1199.98px) { .layers__grid { grid-template-columns: 1fr; gap: 24px; } }
@media (max-width: 809.98px)  { .layers { margin-top: 24px; padding-top: 22px; } }

.termgrid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; background: var(--rf-line); border: 1px solid var(--rf-line); border-radius: var(--r-card); overflow: hidden; margin-top: 40px; }
.term { background: var(--rf-white); padding: 24px; }
.term__abbr { font-family: var(--font-display); font-size: 22px; font-weight: 700; letter-spacing: -0.4px; color: var(--rf-ink); }
.term__full { font-size: 13px; color: var(--rf-grey); margin-top: 4px; }
.term__desc { font-size: 14px; line-height: 1.7; color: var(--rf-ink-60); margin-top: 12px; }
@media (max-width: 1199.98px) { .termgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 809.98px)  { .termgrid { grid-template-columns: 1fr; } }

/* ---------- 服務模組（問題式標題） ---------- */
.qmodules { display: grid; gap: 1px; background: var(--rf-line); border: 1px solid var(--rf-line); border-radius: var(--r-card); overflow: hidden; }
.qmodule {
  background: var(--rf-white);
  display: grid;
  grid-template-columns: minmax(0, 360px) minmax(0, 1fr);
  gap: 40px;
  padding: 36px 40px;
}
.qmodule__q { font-size: 19px; font-weight: 500; letter-spacing: var(--ls-h3); color: var(--rf-ink); }
.qmodule__meta { margin-top: 10px; font-size: 12.5px; color: var(--rf-grey); letter-spacing: 0; }
.qmodule__a { font-size: 15px; line-height: 1.85; color: var(--rf-ink-60); }
.qmodule__a strong { color: var(--rf-ink); font-weight: 500; }
@media (max-width: 1199.98px) { .qmodule { grid-template-columns: 1fr; gap: 16px; padding: 30px 26px; } }
@media (max-width: 809.98px)  { .qmodule { padding: 24px 20px; } .qmodule__q { font-size: 17px; } }

/* ---------- 訊號評分卡 ---------- */
.scorecard {
  background: var(--rf-white);
  border: 1px solid var(--rf-line);
  border-radius: var(--r-card);
  overflow: hidden;
}
.scorecard__head {
  display: grid;
  grid-template-columns: 46px minmax(0, 200px) minmax(0, 1fr) 132px;
  gap: 20px;
  padding: 14px 28px;
  background: var(--rf-bg-3);
  border-bottom: 1px solid var(--rf-line);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--rf-grey);
}
.score-row {
  display: grid;
  grid-template-columns: 46px minmax(0, 200px) minmax(0, 1fr) 132px;
  gap: 20px;
  padding: 24px 28px;
  align-items: start;
  border-bottom: 1px solid var(--rf-line-soft);
}
.score-row:last-child { border-bottom: 0; }
/* 左側「編號＋名稱」在整列高度內垂直置中，說明與評分條維持 align-items: start 的頂端對齊 */
.score-row__no, .score-row__name { align-self: center; }
.score-row__no { font-family: var(--font-display); font-size: 24px; font-weight: 700; line-height: 1; letter-spacing: var(--ls-h1); color: var(--rf-accent-text); }
.score-row__name { font-size: 15px; font-weight: 500; color: var(--rf-ink); }
.score-row__en { display: block; font-size: 12px; color: var(--rf-grey); font-weight: 400; letter-spacing: 0; margin-top: 3px; }
.score-row__desc { font-size: 14px; line-height: 1.75; color: var(--rf-ink-60); }
.score-row__desc strong { color: var(--rf-ink); font-weight: 500; }
.bar { margin-top: 8px; }
/* track/fill 是 <span>，必須轉 block，否則 height 不生效（inline 元素無高度） */
.bar__track { display: block; height: 4px; background: var(--rf-line); border-radius: 2px; overflow: hidden; }
.bar__fill { display: block; height: 100%; background: var(--rf-accent); }
.bar__label { display: block; margin-top: 7px; font-size: 11.5px; color: var(--rf-ink-60); letter-spacing: 0; }
@media (max-width: 1199.98px) {
  .scorecard__head { display: none; }
  .score-row { grid-template-columns: 40px minmax(0, 1fr); gap: 8px 16px; padding: 22px 20px; }
  .score-row__desc { grid-column: 2; }
  .bar { grid-column: 2; margin-top: 4px; max-width: 200px; }
}

/* ---------- 流程時間軸 ---------- */
/* 欄距刻意為 0：相鄰卡片的 border-top 互相接續，才會連成一條跨欄的連續軸線；
   卡片之間的距離改由各自的 padding-inline 撐開 */
.timeline { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px 0; }
.tl {
  position: relative;
  padding: 28px 24px 0;
  border-top: 1px solid var(--rf-line-strong);
  text-align: center;
}
/* 軸線上的節點（純裝飾，不進 DOM）。9px 圓點要壓在 1px 線上置中 → top = -(9-1)/2 */
.tl::before {
  content: "";
  position: absolute; top: -4px; left: 50%; margin-left: -4.5px;
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--rf-accent);
}
.tl__no { font-family: var(--font-display); font-size: 11px; font-weight: 700; letter-spacing: var(--ls-eyebrow); color: var(--rf-accent-text); margin-bottom: 14px; }
.tl__body { margin-top: 12px; font-size: 14px; line-height: 1.75; color: var(--rf-ink-60); }
@media (max-width: 1199.98px) { .timeline { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* 單欄時沒有相鄰卡片，內距歸零讓軸線與文字都對齊 wrap 邊緣 */
@media (max-width: 809.98px)  { .timeline { grid-template-columns: 1fr; gap: 32px 0; } .tl { padding-inline: 0; } }

/* 整個區塊的免責聲明。間距刻意小於進入次級區塊的 96/72/56px，
   才不會讀成隸屬於前一個次級區塊 */
.notice {
  margin-top: 72px; padding: 28px 32px;
  background: var(--rf-white);
  border: 1px solid var(--rf-line);
  border-radius: var(--r-card);
}
/* 此標題為中文，不套用英文 eyebrow 的 2.4px 字距 */
.notice__title { font-size: 14px; font-weight: 600; letter-spacing: var(--ls-h3); color: var(--rf-accent-text); margin-bottom: 12px; }
.notice p { font-size: 15px; line-height: 1.85; color: var(--rf-ink-60); }
@media (max-width: 1199.98px) { .notice { margin-top: 56px; } }
@media (max-width: 809.98px)  { .notice { margin-top: 44px; padding: 22px; } }

/* ---------- 交付項目 ---------- */
/* 五張卡靠左流排，欄數沿用 .timeline 的 3→2→1 */
.deliver { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.deliver__item {
  padding: 30px 32px;
  background: var(--rf-white);
  border: 1px solid var(--rf-line);
  border-radius: var(--r-card);
}
/* 全站唯一進 DOM 的 SVG：純裝飾線條圖示。線條樣式與顏色集中在這裡，
   標籤只留幾何，改線寬才不必動五個 <svg>，色碼也不會漏出 token 之外 */
.deliver__icon {
  width: 48px; height: 48px; margin-bottom: 18px;
  fill: none; stroke: currentColor;
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
/* 品牌綠只當填色面 */
.deliver__accent { fill: var(--rf-accent); stroke: none; }
/* 同一支綠色若是線而非面，在白底太淡，改用可讀的深綠 */
.deliver__accent-line { stroke: var(--rf-accent-text); }
.deliver__desc { margin-top: 14px; font-size: 15px; line-height: 1.85; color: var(--rf-ink-60); }
@media (max-width: 1199.98px) { .deliver { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 809.98px)  { .deliver { grid-template-columns: 1fr; } .deliver__item { padding: 24px 22px; } }

/* ---------- 通路並行：來源 → AI 可讀資料層 → AI 推薦渠道 ---------- */
/* 欄數 3 → 1，不落 2 欄：三段流程排成兩欄會把流向讀斷 */
.flow { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 44px; }
.flow__step {
  position: relative;
  background: var(--rf-white);
  border: 1px solid var(--rf-line);
  /* 三張卡的頂線一律 3px，樞紐卡只換顏色：邊框粗細若不一致，
     卡內文字會差 2px，三卡的標籤與標題就對不齊 */
  border-top-width: 3px;
  border-radius: var(--r-card);
  padding: 28px 26px;
}
/* 樞紐卡：純裝飾綠頂線，沿用 .shift-card 的手法 */
.flow__step--hub { border-top-color: var(--rf-accent); }
/* 卡間箭頭：border 三角形，純裝飾不進 DOM。負 left 落在 44px 欄距內，
   不會超出 .wrap 邊緣（第一張卡沒有箭頭），因此不會生出水平捲軸。
   偏移量以 padding box 為基準，需再補上 3px 頂線／1px 邊框的差值 */
.flow__step + .flow__step::before {
  content: "";
  position: absolute; top: 50%; left: -30px;
  width: 0; height: 0;
  border: 7px solid transparent;
  border-left-color: var(--rf-line-strong);
  transform: translateY(-50%);
}
/* 此標籤為中文，不套用英文 eyebrow 的字距 */
.flow__role { font-size: 11px; font-weight: 600; letter-spacing: var(--ls-h3); color: var(--rf-grey); margin-bottom: 10px; }
.flow__list { margin-top: 14px; display: grid; gap: 8px; }
/* 純裝飾項目符號，沿用 .plan__list 的短破折號 */
.flow__list li { position: relative; padding-left: 18px; font-size: 14px; line-height: 1.7; color: var(--rf-ink-60); }
.flow__list li::before { content: ""; position: absolute; left: 0; top: 10px; width: 6px; height: 1px; background: var(--rf-accent-text); }
.flow__note { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--rf-line-soft); font-size: 14px; line-height: 1.8; color: var(--rf-ink-60); }
/* 綠色細字在白底太淡，標籤用唯一可讀的綠色文字色 */
.flow__note b { color: var(--rf-accent-text); font-weight: 600; }
@media (max-width: 1199.98px) {
  .flow { grid-template-columns: 1fr; gap: 40px; }
  /* 單欄時箭頭改朝下，落在 40px 直向間距中央（-20 置中 -7 半高 -3 頂線） */
  .flow__step + .flow__step::before { top: -30px; left: 50%; transform: translateX(-50%) rotate(90deg); }
}
@media (max-width: 809.98px) { .flow__step { padding: 24px 22px; } }

/* ---------- 運作方式：方法清單 ＋ 說明 ---------- */
/* 區塊內的兩個段落各自是 .wrap 的直接子層，進場動畫沿用 .section > .wrap > * */
/* 間距寫在「進入次級區塊」這個邊界上，而非列舉前後元件的配對；
   .sec-head 已有自己的 margin-bottom，排除它即可，新增其他前置區塊不必再改 CSS */
.wrap > :not(.sec-head) + .submodule { margin-top: 96px; }
.submodule__head { margin-bottom: 40px; max-width: 760px; }
/* 次級區塊標題，比卡片內的 .h3（19px）大一階 */
.submodule__head .h3 { font-size: 24px; }
.submodule__note { margin-top: 14px; font-size: 17px; line-height: 1.8; color: var(--rf-ink-60); }

.method { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: start; }
/* grid 子項預設 min-width:auto，長字串會用 min-content 撐寬軌道 → 手機版水平溢出 */
.method > * { min-width: 0; }
.method__list {
  display: grid; gap: 0; min-width: 0;
  padding: 10px 28px;
  background: var(--rf-white);
  border: 1px solid var(--rf-line);
  border-radius: var(--r-card);
}
.method__list li {
  display: grid; grid-template-columns: 18px 1fr; gap: 14px;
  padding: 14px 0;
  border-bottom: 1px solid var(--rf-line);
  font-size: 14.5px; line-height: 1.6;
  color: var(--rf-ink-60);
}
.method__list li:last-child { border-bottom: 0; }
.method__list li b { color: var(--rf-ink); font-weight: 500; }
.method__check { color: var(--rf-accent-text); font-weight: 700; }

.explain p { font-size: 15px; line-height: 1.9; color: var(--rf-ink-60); }
.explain p + p { margin-top: 20px; }
/* 帶上 p 才壓得過同分的 .explain p */
p.explain__lead { font-size: 20px; line-height: 1.6; color: var(--rf-ink-29); }
.explain__lead em { color: var(--rf-accent-text); font-style: italic; }
.explain__lead + p { margin-top: 24px; }

@media (max-width: 1199.98px) {
  .wrap > :not(.sec-head) + .submodule { margin-top: 72px; }
  .method { grid-template-columns: 1fr; gap: 36px; }
}
@media (max-width: 809.98px) {
  .wrap > :not(.sec-head) + .submodule { margin-top: 56px; }
  .submodule__head { margin-bottom: 28px; }
  .submodule__head .h3 { font-size: 20px; }
  .submodule__note { font-size: 15px; }
  .method__list { padding: 6px 20px; }
  p.explain__lead { font-size: 18px; }
}

/* ---------- AIO／SEO 對照表 ---------- */
/* 窄螢幕時表格在自身容器內橫向捲動；role="region" + tabindex 讓鍵盤也能捲 */
.cmp {
  background: var(--rf-white);
  border: 1px solid var(--rf-line);
  border-radius: var(--r-card);
  overflow-x: auto;
}
.cmp__caption { padding: 18px 20px 0; text-align: left; font-size: 13px; color: var(--rf-grey); }
/* 在 overflow-x 容器內表格會 shrink-to-fit，不撐滿的話 thead 底色與列線會停在卡片右緣之前 */
.cmp__table { width: 100%; }
.cmp__table th, .cmp__table td {
  padding: 18px 20px;
  text-align: left; vertical-align: top;
  border-bottom: 1px solid var(--rf-line-soft);
}
/* 表頭為中文，不套用英文 eyebrow 的字距 */
.cmp__table thead th {
  background: var(--rf-bg-3);
  border-bottom: 1px solid var(--rf-line);
  font-size: 13px; font-weight: 600;
  color: var(--rf-ink);
}
.cmp__table tbody th { width: 132px; font-size: 15px; font-weight: 500; color: var(--rf-ink); }
.cmp__table td { font-size: 14px; line-height: 1.75; color: var(--rf-ink-60); }
.cmp__table tbody tr:last-child th, .cmp__table tbody tr:last-child td { border-bottom: 0; }
.cmp__table strong { color: var(--rf-ink); font-weight: 500; }
.cmp__list { display: grid; gap: 8px; }
.cmp__list li { position: relative; padding-left: 18px; }
.cmp__list li::before { content: ""; position: absolute; left: 0; top: 11px; width: 6px; height: 1px; background: var(--rf-accent-text); }
.cmp__foot { margin-top: 20px; font-size: 14px; line-height: 1.85; color: var(--rf-ink-60); max-width: 76ch; }
@media (max-width: 809.98px) {
  .cmp__table { min-width: 640px; }
  .cmp__table th, .cmp__table td { padding: 14px 16px; }
  /* 窄螢幕表格右側會被裁切，補一句捲動提示（純 CSS，不進 DOM） */
  .cmp__caption::after { content: "（可左右捲動）"; }
}

/* ---------- 方案 ---------- */
.plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.plan {
  display: flex; flex-direction: column;
  padding: 34px 30px;
  background: var(--rf-white);
  border: 1px solid var(--rf-line);
  border-radius: var(--r-card);
}
.plan--featured { border-color: var(--rf-ink); position: relative; }
.plan__badge {
  position: absolute; top: -1px; right: 22px;
  padding: 4px 10px;
  background: var(--rf-accent); color: var(--rf-accent-ink);
  font-size: 11px; font-weight: 600; letter-spacing: .6px;
  border-radius: 0 0 4px 4px;
}
.plan__name { font-family: var(--font-display); font-size: 21px; font-weight: 700; letter-spacing: -0.4px; }
.plan__for { margin-top: 8px; font-size: 14px; color: var(--rf-accent-text); }
.plan__desc { margin-top: 10px; font-size: 14px; line-height: 1.8; color: var(--rf-ink-60); }
/* align-content: start —— 卡片等高時，條列數少的那張不要被 stretch 拉開行距 */
.plan__list { margin-top: 18px; display: grid; gap: 8px; align-content: start; flex: 1; }
.plan__list li { position: relative; padding-left: 18px; font-size: 14px; line-height: 1.7; color: var(--rf-ink-60); }
.plan__list li::before { content: ""; position: absolute; left: 0; top: 10px; width: 6px; height: 1px; background: var(--rf-accent-text); }
.plan__price { margin-top: 24px; padding-top: 18px; border-top: 1px solid var(--rf-line-soft); font-size: 14px; color: var(--rf-ink-60); }
@media (max-width: 1199.98px) { .plans { grid-template-columns: 1fr; } }
/* 漸進增強：支援 subgrid 時三卡共用列軌，說明文字行數不同也能讓條列與標語逐列對齊。
   不支援時退回上方的 flex 直排（標語仍由 .plan__list 的 flex: 1 推到卡片底部）。
   只在三欄寬度套用：單欄不需跨卡對齊，且卡片會落到沒有 1fr 的隱式列軌。 */
@supports (grid-template-rows: subgrid) {
  @media not all and (max-width: 1199.98px) {
    /* subgrid 沿用父格線的 row-gap，歸零後卡片內距離仍由各元素的 margin-top 控制 */
    .plans { grid-template-rows: auto auto auto 1fr auto; row-gap: 0; }
    .plan { display: grid; grid-template-rows: subgrid; grid-row: span 5; }
  }
}

/* ---------- FAQ ---------- */
.faq { border-top: 1px solid var(--rf-line); }
.faq__item { border-bottom: 1px solid var(--rf-line); }
.faq__item summary {
  display: flex; justify-content: space-between; align-items: flex-start; gap: 24px;
  padding-block: 24px;
  font-size: 17px; font-weight: 500; letter-spacing: var(--ls-h3);
  color: var(--rf-ink); cursor: pointer; list-style: none;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after { content: "+"; flex: none; font-family: var(--font-display); font-size: 21px; line-height: 1; color: var(--rf-accent-text); }
.faq__item[open] summary::after { content: "−"; }
/* 答案容器裝的是段落，字級行高由此繼承下去；要加項目符號請沿用 .plan__list，不要另開 FAQ 專用清單樣式 */
.faq__answer { padding-bottom: 26px; font-size: 15px; line-height: 1.9; color: var(--rf-ink-60); max-width: 74ch; }
.faq__answer > * + * { margin-top: 14px; }
@media (max-width: 809.98px) { .faq__item summary { font-size: 16px; padding-block: 20px; } }

/* ---------- 結尾 CTA ---------- */
/* 前後皆為白底（FAQ 與 footer），改用最深的一階淺灰讓收尾 CTA 自己跳出來 */
.cta {
  background: var(--rf-bg-4);
  border-block: 1px solid var(--rf-line);
  padding-block: 104px;
  text-align: center;
}
.cta .lead { color: var(--rf-ink-60); margin: 18px auto 0; }
.cta__actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 34px; }
@media (max-width: 809.98px) { .cta { padding-block: 64px; } }

/* ---------- Footer（白底，同 header） ---------- */
/* 上緣的分界線由 .cta 的 border-block 負責，footer 自己不用再描邊 */
.site-footer { background: var(--rf-white); color: var(--rf-ink); padding-block: 64px 28px; font-size: 14px; }
.footer__grid { display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(2, minmax(0, 1fr)); gap: 48px; }
/* --rf-grey（#63615e）而非 --rf-grey-7f：後者對白底僅 4.00:1，未達 AA */
.footer__title { font-size: 12px; font-weight: 600; letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: var(--rf-grey); margin-bottom: 16px; }
.footer__list { display: grid; gap: 10px; color: var(--rf-ink-60); }
.footer__list a:hover { color: var(--rf-accent-text); }
.footer__desc { margin-top: 14px; font-size: 14px; line-height: 1.8; color: var(--rf-ink-60); max-width: 42ch; }
.footer__bottom {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px;
  margin-top: 48px; padding-top: 22px;
  border-top: 1px solid var(--rf-line-strong);
  font-size: 13px; color: var(--rf-ink-60);
}
@media (max-width: 1199.98px) { .footer__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 809.98px)  { .footer__grid { grid-template-columns: 1fr; gap: 30px; } .site-footer { padding-block: 44px 22px; } }

/* 無障礙 */
:focus-visible { outline: 2px solid var(--rf-accent-text); outline-offset: 3px; }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  /* 三個 !important 各有必要，缺一個就會留下動態或閃爍：
     iteration-count —— 只歸零 duration 的話，無限循環動畫會變成 .01ms 週期的高頻閃爍。
     animation-delay —— delay 不受 duration 影響，進場動畫的 backwards fill 會讓元素
       在最長 360ms 內維持 opacity: 0；負值代表動畫在 time 0 就已結束。
     選擇器含 ::before / ::after —— `*` 只匹配元素、不匹配偽元素，hero 的背景裝飾層
       正是 ::before，不寫進來就完全不受這段規則約束。 */
  *, *::before, *::after {
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    animation-delay: -1ms !important;
  }
  /* scroll-driven 動畫由捲動進度驅動，完全不吃上面那三項，必須直接拔掉
     animation-name。不可只寫 animation-timeline: auto —— 那會變成 .01ms 的
     時間動畫並停在終態，等於永久偏移 72px。
     fixed 背景也是滾動連動的視覺，一併關掉。
     scroll-triggered 動畫（區塊進場、highlighter）在下一段一併處理。 */
  .hero::before,
  .hero::after,
  .hero__inner { animation-name: none !important; }
  .hero::before { background-attachment: scroll !important; }
}

/* scroll-triggered 動畫在「觸發器不會啟動」的情境下被壓在 before 相位，both fill
   讓元素停在 opacity: 0（＝空白區塊），歸零 duration／delay 救不回來，只能拔掉
   animation-name。列印沒有捲動視窗、reduced-motion 是使用者主動停用，兩者都屬於
   這種情境，因此合併宣告一次，避免日後新增觸發式動畫時只改到其中一邊。
   上面 hero 的 scroll-driven 圖層不併進來：時間軸失效時它們只會回到未動畫的基礎
   樣式（本來就不是 opacity: 0），列印無須處理。 */
@media print, (prefers-reduced-motion: reduce) {
  .console__a mark,
  .section > .wrap > *,
  .cta > .wrap > * { animation-name: none !important; }
}