/* =============================================================================
   aais-home-line.css — 智驗宅 LINE@ 報修系統 Landing Page
   視覺語言：延續 aais-home.css 的觸覺玻璃層次，但改以「一則報修訊息 → 一筆
   完整處理紀錄」為動線主軸（痛點→四大功能→導入效益→系統實景）。
   僅供 products/aais-home-line.php 使用；與 css/aais-home.css、css/product-detail.css
   互相獨立，不共用 class，避免跨頁改動互相影響。
   元件一律取自 design-system/components.css；本檔只負責版面、玻璃疊加樣式、
   media mockup 佔位樣式與進場動畫。
   ============================================================================= */

.rms-page {
  --ds-font-sans: "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", sans-serif;
  font-family: var(--ds-font-sans);
  background: var(--ds-color-page);
}

.rms-page main [id] { scroll-margin-top: 100px; }

.rms-container {
  width: min(100% - clamp(32px, 8vw, 64px), var(--ds-container-max));
  margin-inline: auto;
}

.rms-section-intro { max-width: 640px; margin-bottom: var(--ds-space-2xl); }
.rms-section-intro h2 { margin-block: var(--ds-space-sm) var(--ds-space-md); }
.rms-section-intro--quiet { max-width: 560px; margin-bottom: var(--ds-space-xl); }

/* ---------------------------------------------------------------------------
   進場動效：載入時序列淡入（Hero）／捲動時錯落淡入（其餘區塊）
   --------------------------------------------------------------------------- */
@keyframes rms-rise {
  from { opacity: 0; transform: translateY(22px); filter: blur(6px); }
  to   { opacity: 1; transform: none; filter: blur(0); }
}

/* 套用 motion-fade-stagger skill 的錯落淡入技法：只動 transform／opacity
   （skill 明列的效能要求，拿掉先前的 filter:blur 一起 transition，blur
   不是合成器能低成本處理的屬性），位移量與逐項延遲也對齊 skill 的參考值
   （24px、80ms／項）。沿用的是這個頁面本來就有的 data-reveal／
   data-reveal-group 機制（IntersectionObserver＋fail-open），不是另外
   引入 skill 範例裡 .reveal／.js-on／.in 那組命名——同一頁不需要兩套
   命名不同、行為相同的 reveal 系統。 */
[data-reveal] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .7s cubic-bezier(.22, 1, .36, 1),
              transform .7s cubic-bezier(.22, 1, .36, 1);
  transition-delay: calc(var(--reveal-index, 0) * 80ms);
}

[data-reveal].is-revealed { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .rms-page [data-reveal] { transition: none; opacity: 1; transform: none; }
  .rms-page [class*="__eyebrow"],
  .rms-hero__title, .rms-hero__lead, .rms-hero__highlights, .rms-hero__actions {
    animation: none !important; opacity: 1; transform: none; filter: none;
  }
}

/* =============================================================================
   1. Hero
   ============================================================================= */
/* 全滿版背景照：.rms-hero 本身撐開到滿版寬度顯示照片，內文改放進裡面的
   .rms-container 維持跟全站一致的內容欄寬。照片主體（人物）在畫面右側、
   左側本來就是照片自帶的淺色漸層，所以文字欄再加一個 max-width
   （.rms-hero__content）夾在容器左側，不需要另外做遮罩或裁切控制。
   min-height 隨螢幕寬度等比縮放，flex 置中讓文字跟著背景照片垂直置中。 */
.rms-hero {
  display: flex;
  align-items: center;
  min-height: clamp(420px, 42vw, 640px);
  padding-top: clamp(112px, 20vw, 144px);
  padding-bottom: var(--ds-space-3xl);
  background-image: url("../assets/images/aais-home-line/line-banner.webp");
  background-size: cover;
  background-position: right center;
  background-repeat: no-repeat;
}

.rms-hero__content { max-width: 640px; }

.rms-hero__eyebrow { animation: rms-rise .8s cubic-bezier(.16, 1, .3, 1) .08s both; }

.rms-hero__title {
  margin-block: var(--ds-space-md) var(--ds-space-lg);
  animation: rms-rise .9s cubic-bezier(.16, 1, .3, 1) .16s both;
}

.rms-hero__lead { animation: rms-rise .9s cubic-bezier(.16, 1, .3, 1) .26s both; }

/* 四個重點：與「四大功能」分頁圖示一一對應，強化前後兩個區塊的空間連續感 */
.rms-hero__highlights {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ds-space-xs) var(--ds-space-xl);
  list-style: none;
  margin: var(--ds-space-lg) 0 0;
  padding: 0;
  animation: rms-rise .9s cubic-bezier(.16, 1, .3, 1) .32s both;
}

.rms-hero__highlights li {
  display: inline-flex;
  align-items: center;
  gap: var(--ds-space-xs);
  color: var(--ds-color-text-secondary);
  font-size: var(--ds-text-body-sm-size);
  font-weight: var(--ds-weight-medium);
}

.rms-hero__highlights .ds-icon { font-size: 18px; color: var(--ds-color-primary); }

.rms-hero__actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--ds-space-lg);
  margin-top: var(--ds-space-xl);
  animation: rms-rise .9s cubic-bezier(.16, 1, .3, 1) .4s both;
}

/* =============================================================================
   3. 現場挑戰（四張角色卡片橫向並排）
   四個角色（客服／住戶／工班／建商）各自對應一則原始痛點標題與說明，用
   同一套 .ds-card 元件呈現，角色名稱用元件庫既有的 .ds-card__ribbon
   放在卡片右上角。不做捲動互動，純靜態卡片＋捲動進場（沿用
   data-reveal-group）。
   ============================================================================= */
.rms-pain {
  background: var(--ds-color-surface-inner);
  padding-block: clamp(var(--ds-space-2xl), 8vw, var(--ds-space-4xl));
}

/* 整體置中：intro 文字置中，下方卡片列在容器內（.rms-container 本身已經
   置中）平均分配四欄 */
.rms-pain .rms-section-intro { margin-inline: auto; text-align: center; }

.rms-pain__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--ds-space-lg);
  /* 明白寫出 stretch（其實是預設值）：同一列的卡片高度必須一致，
     這是下面 .rms-pain__card 取消 space-between 的前提 */
  align-items: stretch;
}

/* 卡片本體沿用元件庫的 .ds-card .ds-card--padded；position:relative 是給
   .ds-card__ribbon 的絕對定位錨點（元件庫本身沒有預設 relative，只有
   .ds-card--selected 才會加，這裡沒用那個 modifier 所以要自己補上）。
   預設白底＋一般框線，hover 只轉框線色，不再整片填色。.ds-card 本身是
   justify-content:space-between，說明文字行數不同時會把「圖片→標題」
   的間距撐開不一致，標題就對不齊；這裡蓋成 flex-start，內容一律從頂端
   往下排，卡片高度雖然一致（見上面 grid 的 stretch），多出來的高度留在
   卡片最下方當空白，不會分散到內容之間。 */
.rms-pain__card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: var(--ds-space-md);
  background: var(--ds-color-card);
  border: var(--ds-border-width) solid var(--ds-color-border);
  transition: border-color var(--ds-duration-slow) var(--ds-ease);
}

.rms-pain__card:hover,
.rms-pain__card:focus-within { border-color: var(--ds-color-primary); }

/* 角色標籤：蓋掉元件庫預設的 2px var(--ds-space-xs)，左右內距加寬到
   var(--ds-space-lg)，只在本頁這個用法生效，不改動 .ds-card__ribbon
   本體（aais-home.php 的方案卡也在用，不能連動改掉） */
.rms-pain__card .ds-card__ribbon { padding: 2px var(--ds-space-lg); }

/* 角色圖片的圓形底色：預設 Surface Strong，卡片 hover 時連同轉為 Primary，
   跟框線的顏色變化呼應在同一個互動上 */
.rms-pain__portrait {
  width: 96px;
  aspect-ratio: 1 / 1;
  border-radius: var(--ds-radius-full);
  overflow: hidden;
  flex-shrink: 0;
  background: var(--ds-color-surface-strong);
  transition: background-color var(--ds-duration-slow) var(--ds-ease);
}

.rms-pain__card:hover .rms-pain__portrait,
.rms-pain__card:focus-within .rms-pain__portrait { background: var(--ds-color-primary); }

.rms-pain__portrait img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* 卡片內文字靠左（.rms-pain__card 已 align-items:flex-start），
   卡片本身在四欄格線裡置中對齊；標題／說明沿用元件預設文字色，不再套用
   反白色（卡片底色改回白色，不需要白字） */
.rms-pain__card-body { text-align: left; }

/* =============================================================================
   4. 四大功能
   ============================================================================= */
/* 背景跟 aais-home.css 的「3. 系統介紹」（.aais-flow-section）同一組做法：
   底色 --ds-color-surface-inner 疊一張由上到下不透明度 0→1 的裝飾圖
   （遮罩＋色彩增值混合），圖檔複製一份到本頁 assets 資料夾維持各產品頁
   各自管理素材的慣例，不跨資料夾引用 aais-home 的檔案。 */
.rms-features {
  position: relative;
  background: var(--ds-color-surface-inner);
  padding-block: clamp(var(--ds-space-2xl), 8vw, var(--ds-space-4xl));
  overflow: hidden;
}

.rms-features::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("../assets/images/aais-home-line/funtion-bg.webp") bottom center / cover no-repeat;
  mix-blend-mode: multiply;
  -webkit-mask-image: linear-gradient(to bottom, transparent 10%, #000 100%);
  mask-image: linear-gradient(to bottom, transparent 10%, #000 100%);
  pointer-events: none;
}

.rms-features > .rms-container { position: relative; z-index: 1; }

.rms-features .rms-section-intro { margin-inline: auto; text-align: center; }

/* 區塊標題（27 字）桌機／平板不換行：字級用 clamp 隨螢幕寬度縮放，
   1280px 滿版時貼齊標準 42px、往下依比例縮小，避免窄一點的桌機／平板
   寬度直接爆版；手機在底部響應式區塊蓋回可換行。這條公式（2px + 3.125vw，
   上限 42px）是依字數估算，非實機量測，如有需要再微調 */
.rms-features__title {
  white-space: nowrap;
  font-size: clamp(24px, 2px + 3.125vw, var(--ds-text-headline-lg-size));
}

/* 分頁改成滿版分格色塊（非 DESIGN.md 既有的 Capsule／Underline 兩款，是
   這個頁面單獨的例外樣式，只在這裡用這組 class，不動
   design-system/components.css 的共用 Tabs 元件）：選取中的分頁整格填滿
   Secondary（沿用 DESIGN.md「Tabs 選取狀態用 Secondary」規則），底部加一個
   對話泡泡尖角指向下方展開的面板內容。互動邏輯不變，仍是
   js/product-detail.js 依 data-feature-tab／aria-selected 控制，這裡只換
   視覺。 */
/* 不設 overflow:hidden／自己的 border-radius：選取中分頁下緣的對話泡泡
   尖角需要凸出格子外面，會被父層的裁切邊界擋住，所以圓角改成只加在最左／
   最右那格的外側角，不靠裁切容器內側元素做出來 */
.rms-features__tabs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  background: var(--ds-color-card);
  margin-bottom: var(--ds-space-2xl);
  box-shadow: var(--ds-shadow-panel);
}

.rms-features__tab {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: var(--ds-space-lg) var(--ds-space-md);
  color: var(--ds-color-text-primary);
  font-size: var(--ds-text-nav-label-size);
  line-height: var(--ds-text-nav-label-line);
  font-weight: var(--ds-weight-medium);
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color var(--ds-duration-fast) var(--ds-ease),
              color var(--ds-duration-fast) var(--ds-ease);
}

.rms-features__tab:hover,
.rms-features__tab.is-hover {
  background: color-mix(in srgb, var(--ds-color-secondary) 12%, transparent);
}

.rms-features__tab:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 2px var(--ds-color-secondary);
}

.rms-features__tab:first-child { border-radius: var(--ds-radius-lg) 0 0 var(--ds-radius-lg); }
.rms-features__tab:last-child { border-radius: 0 var(--ds-radius-lg) var(--ds-radius-lg) 0; }

.rms-features__tab[aria-selected="true"] {
  background: var(--ds-color-secondary);
  color: var(--ds-color-on-secondary);
  font-weight: var(--ds-weight-semibold);
}

.rms-features__tab[aria-selected="true"]:hover { background: var(--ds-color-secondary); }

/* 選取中分頁下緣的對話泡泡尖角，指向下方展開的功能說明 */
.rms-features__tab[aria-selected="true"]::after {
  content: "";
  position: absolute;
  bottom: -8px;
  left: 50%;
  width: 0;
  height: 0;
  transform: translateX(-50%);
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-top: 8px solid var(--ds-color-secondary);
}

.rms-features__tab-index {
  font-variant-numeric: tabular-nums;
  color: var(--ds-color-text-muted);
}

.rms-features__tab[aria-selected="true"] .rms-features__tab-index { color: var(--ds-color-on-secondary); }

/* 橫向排列：左文右圖的兩欄 grid。四個 tab 的高度要一樣高，靠
   .rms-features__body 的 min-height（估計值，取內容最多的「語音 AI
   客服」面板為準，欄寬變窄後文字換行變多，餘裕抓得比單欄版本更大；
   實機請目視確認，數字不對可以再調）＋ .rms-features__visual 固定高度
   的 mock 兩者相加，讓四塊面板總高度一致，不會因為切換分頁而跳動。 */
/* 卡片樣式：圓角跟分頁的圓角同一個 token（--ds-radius-lg） */
/* 文字：圖片＝4:6（原本是 auto-fit 的等寬兩欄，改成固定比例後手機收合
   要另外處理，見底部 @media (max-width:639px) 的 1fr 覆寫） */
.rms-features__panel {
  display: grid;
  grid-template-columns: minmax(220px, 4fr) minmax(220px, 6fr);
  gap: var(--ds-space-3xl);
  align-items: center;
  padding: var(--ds-space-lg) var(--ds-space-2xl);
  background: var(--ds-color-card);
  border-radius: var(--ds-radius-lg);
  box-shadow: var(--ds-shadow-panel);
}

.rms-features__panel[hidden] { display: none; }

/* --rms-features-row-height 是四塊面板共同的高度基準，同時給文字欄
   （min-height）跟語音 AI 那支直式影片（height，見下方 #feature-voice
   覆寫）參照，兩處數字寫在同一個地方，不會之後改一邊忘記改另一邊 */
.rms-features {
  --rms-features-row-height: 520px;
}

.rms-features__body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: var(--rms-features-row-height);
}

.rms-features__body h3 {
  margin-top: var(--ds-space-md);
  /* 桌機／平板標題不換行；手機在底部響應式區塊蓋回可換行 */
  white-space: nowrap;
}

.rms-features__body > p.ds-lead { color: var(--ds-color-text-secondary); margin-block: var(--ds-space-md); }

/* 客戶得到的好處：角色用 ds-tag 元件標示，文案沿用內文色 */
.rms-benefit-list { margin-top: var(--ds-space-xl); }

.rms-benefit-list__title {
  color: var(--ds-color-text-primary);
  font-size: var(--ds-text-body-sm-size);
  font-weight: var(--ds-weight-semibold);
  margin-bottom: var(--ds-space-sm);
}

/* 分隔線清單：項目之間用一條 hairline 隔開，不再用 gap 撐開間距——
   第一項不留頂部內距、最後一項不畫底線，兩端貼齊清單本身的邊界 */
.rms-benefit-list ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.rms-benefit-list li {
  display: flex;
  align-items: baseline;
  gap: var(--ds-space-sm);
  padding-block: var(--ds-space-sm);
  border-bottom: var(--ds-border-hairline);
  color: var(--ds-color-text-secondary);
  font-size: var(--ds-text-body-sm-size);
  line-height: var(--ds-text-body-sm-line);
}

.rms-benefit-list li:first-child { padding-top: 0; }
.rms-benefit-list li:last-child { padding-bottom: 0; border-bottom: 0; }

/* 角色標籤改用元件庫的 .ds-badge--cyan-solid（原本是 .ds-tag--neutral）。
   每個標籤寬度統一：最長的角色名稱是「執行團隊」4 個字，抓一個所有角色
   都放得下的固定寬度，文字置中；flex-shrink:0 避免被旁邊的說明文字擠壓 */
.rms-benefit-list .ds-badge {
  flex-shrink: 0;
  width: 76px;
  justify-content: center;
}

/* aspect-ratio 放在容器（.rms-features__visual）上，不是放在
   .rms-features__media 這個 flex/grid 子項本身：子項的百分比寬度在某些
   排列組合下（flex 子項＋aspect-ratio 一起算）會量出不可靠的寬度，導致
   cover 裁切基準跟著跑掉、畫面被裁成一直條。改成「容器先用 grid 滿版寬度
   定出 4:3 的框，媒材再用 100%/100% 填滿框」，寬高來源明確、不會再有
   量測順序的問題。overflow:hidden＋圓角也一併搬到容器上。 */
.rms-features__visual {
  display: grid;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: var(--ds-radius-lg);
}

/* 語音 AI 客服是手機直式錄影（9:19.5），跟其他三塊共用 4:3 橫式框的話，
   即使 object-fit:contain 不裁切，畫面也會被夾在中間、左右留白很大，看起來
   很小。這裡直接改用跟影片同樣比例的框，讓影片整個撐滿容器、沒有留白，
   也就不需要裁切或縮小。 */
/* 直式影片改成「高度固定、寬度依比例算」，不是「寬度撐滿欄位、高度依比例
   算」：欄位有 60%（6fr）寬，若讓寬度撐滿再算高度，9:19.5 的直式比例會把
   高度撐到遠超過其他面板，讓這塊面板明顯比其他三塊高。改成固定高度＝跟
   其他面板同一個 --rms-features-row-height，寬度自動縮到符合比例（約
   240px），用 justify-self:center 置中在欄位裡，四塊面板的整體高度才會
   一致。 */
#feature-voice .rms-features__visual {
  aspect-ratio: 9 / 19.5;
  width: auto;
  height: var(--rms-features-row-height);
  justify-self: center;
}

/* 截圖來源檔本身已改成 4:3，cover 在這裡幾乎不裁切、只是保險；語音 AI
   客服那支手機直式影片仍是 9:19.5，改用 object-fit:contain 完整顯示整支
   影片、不裁切，上下留白直接透出 .rms-features__panel 的底色。 */
.rms-features__media {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

video.rms-features__media { object-fit: contain; }

/* =============================================================================
   5. 導入效益
   ============================================================================= */
/* 背景照片＋遮罩：照片本身已經很亮、失焦，遮罩用站內既有的
   --ds-color-surface-strong（內層最深一階的中性灰）疊一層均勻色，不做
   方向性漸層——不像前一版照片有明確主體需要避開，這裡單純是為了讓深色
   文字／白框卡片在照片紋理上仍維持足夠對比。background-attachment:fixed
   做出捲動視差；iOS Safari 對 fixed 背景不支援，會靜默退回 scroll，不影響版面。 */
.rms-benefits {
  background-image:
    linear-gradient(color-mix(in srgb, var(--ds-color-surface-strong) 78%, transparent),
      color-mix(in srgb, var(--ds-color-surface-strong) 78%, transparent)),
    url("../assets/images/aais-home-line/line-bg.webp");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  padding-block: clamp(var(--ds-space-2xl), 8vw, var(--ds-space-4xl));
}

/* 內容整體置中：沿用跟全站其他區塊一樣的置中容器寬度公式，
   不再像前一版那樣靠右收窄（那是配合前一張照片的人物位置，這張不需要） */
.rms-benefits__layout {
  width: min(100% - clamp(32px, 8vw, 64px), var(--ds-container-max));
  margin-inline: auto;
}

/* 蓋掉 .rms-section-intro--quiet 原本的 max-width:560px——標題要求不分行，
   寬度不能被再收窄；文字置中呼應整體置中的版面 */
.rms-benefits .rms-section-intro {
  max-width: none;
  margin-inline: auto;
  text-align: center;
}

.rms-benefits__title {
  white-space: nowrap;
  font-size: clamp(22px, 2.4vw, var(--ds-text-headline-lg-size));
}

.rms-benefits__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--ds-space-lg);
}

/* 卡片改邊框、無底色：讓照片紋理透出來，跟 DESIGN.md 預設的 elevated 卡片
   刻意做出區隔，僅限本區塊這一次性的視覺選擇 */
.rms-benefits__card {
  display: flex;
  flex-direction: column;
  gap: var(--ds-space-sm);
  background: none;
  border: var(--ds-border-width) solid var(--ds-color-card);
  box-shadow: none;
  transition: transform var(--ds-duration-slow) var(--ds-ease),
              border-color var(--ds-duration-slow) var(--ds-ease),
              background-color var(--ds-duration-slow) var(--ds-ease);
}

.rms-benefits__card:hover {
  transform: translateY(-4px);
  border-color: var(--ds-color-primary);
  background: var(--ds-color-card);
}

.rms-benefits__card p { color: var(--ds-color-text-secondary); }

.rms-benefits__head { display: flex; align-items: center; gap: var(--ds-space-sm); }

.rms-benefits__index {
  font-variant-numeric: tabular-nums;
  font-size: var(--ds-text-caption-size);
  font-weight: var(--ds-weight-semibold);
  color: var(--ds-color-text-muted);
}

.rms-benefits__card .ds-icon { color: var(--ds-color-primary); }

/* =============================================================================
   6. 系統實景（左 Carousel × 右 Accordion，共用同一個 active 狀態）
   互動邏輯集中在 js/aais-home-line.js 的單一 setActive()；本檔只負責視覺與
   動效，不維護任何 active 判斷。
   ============================================================================= */
.rms-showcase {
  background: var(--ds-color-surface-inner);
  padding-block: clamp(var(--ds-space-2xl), 8vw, var(--ds-space-4xl));
}

/* max-width:none 蓋掉 .rms-section-intro 預設的 640px 上限——標題 16 字在
   42px 字級下需要的寬度非常貼近這個上限，容易被硬擠到換行；拿掉寬度限制、
   靠 margin-inline:auto 置中，讓標題有足夠空間一行顯示完 */
.rms-showcase .rms-section-intro { max-width: none; margin-inline: auto; text-align: center; }

.rms-showcase__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(var(--ds-space-xl), 5vw, var(--ds-space-3xl));
  /* Accordion 跟左邊 Carousel 垂直置中。Carousel 高度固定（frame 有
     aspect-ratio:16/10），且比 Accordion（3 個項目＋1 個展開的說明）本身
     高，所以這一欄的列高一直是由 Carousel 決定，改成 center 不會讓
     Carousel 本身跟著跳動——只有比較矮的 Accordion 會在列高中置中定位，
     展開／收合時的位移幅度也遠比原本擔心的「Carousel 跳動」小很多。 */
  align-items: center;
}

/* --- 左：Carousel --- */
.rms-showcase__carousel { min-width: 0; }

/* aspect-ratio 放在 frame（滑動軸最外層、不會跟著 track 位移的靜止容器）
   上，不是放在 .rms-showcase__photo 這個嵌套在 flex 鏈路（track→slide→
   img）裡的元素本身：aspect-ratio 疊在多層 flex 子項的寬度換算上時，量出
   來的框容易不可靠，導致圖片被裁成不對的形狀（跟 .rms-features__media
   先前修過的同一類問題）。改成 frame 先用滿版寬度定出 16:10 的框，
   track／slide／img 全部 height:100% 一路撐滿，不再各自算比例。 */
.rms-showcase__frame {
  overflow: hidden;
  border-radius: var(--ds-radius-lg);
  aspect-ratio: 16 / 10;
}

.rms-showcase__track {
  display: flex;
  height: 100%;
  /* 0.4–0.7s 區間取中間值，沿用既有 --ds-duration-media（原本就是 500ms），
     不另外發明新的動態數值 */
  transition: transform var(--ds-duration-media) var(--ds-ease);
}

.rms-showcase__slide { flex: 0 0 100%; min-width: 0; height: 100%; }

.rms-showcase__photo {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.rms-showcase__controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--ds-space-lg);
  margin-top: var(--ds-space-lg);
}

.rms-showcase__nav { border-radius: var(--ds-radius-full); }

.rms-showcase__counter {
  min-width: 5.5em;
  color: var(--ds-color-text-muted);
  font-size: var(--ds-text-label-sm-size);
  font-variant-numeric: tabular-nums;
  text-align: center;
}

@media (prefers-reduced-motion: reduce) {
  .rms-showcase__track { transition: none; }
}

/* --- 右：Accordion --- */
.rms-showcase__accordion { display: flex; flex-direction: column; }

.rms-showcase__item {
  border-top: var(--ds-border-hairline);
  border-left: 2px solid transparent;
  transition: border-color var(--ds-duration-slow) var(--ds-ease);
}

.rms-showcase__item:last-child { border-bottom: var(--ds-border-hairline); }

.rms-showcase__item.is-active { border-left-color: var(--ds-color-primary); }

.rms-showcase__item-heading { margin: 0; font: inherit; }

.rms-showcase__trigger {
  display: flex;
  align-items: center;
  gap: var(--ds-space-md);
  width: 100%;
  padding: var(--ds-space-lg) var(--ds-space-md);
  background: none;
  border: 0;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  transition: background-color var(--ds-duration-fast) var(--ds-ease);
}

.rms-showcase__trigger:hover { background: var(--ds-color-surface-inner-soft); }

.rms-showcase__trigger:focus-visible {
  outline: none;
  box-shadow: var(--ds-shadow-focus);
  border-radius: var(--ds-radius-sm);
}

.rms-showcase__trigger-index {
  color: var(--ds-color-text-muted);
  font-size: var(--ds-text-label-sm-size);
  font-variant-numeric: tabular-nums;
  transition: color var(--ds-duration-slow) var(--ds-ease);
}

.rms-showcase__item.is-active .rms-showcase__trigger-index { color: var(--ds-color-primary); }

.rms-showcase__trigger-title {
  flex: 1;
  color: var(--ds-color-text-secondary);
  font-size: var(--ds-text-body-lg-size);
  font-weight: var(--ds-weight-medium);
  transition: color var(--ds-duration-slow) var(--ds-ease);
}

.rms-showcase__item.is-active .rms-showcase__trigger-title {
  color: var(--ds-color-text-primary);
  font-weight: var(--ds-weight-semibold);
}

.rms-showcase__chevron {
  flex-shrink: 0;
  color: var(--ds-color-text-muted);
  transition: transform var(--ds-duration-slow) var(--ds-ease);
}

.rms-showcase__item.is-active .rms-showcase__chevron { transform: rotate(180deg); color: var(--ds-color-primary); }

/* 展開／收合用 grid-template-rows 0fr↔1fr 做平滑高度動畫，不使用
   display:none／hidden（會讓收合瞬間跳掉、也無法動畫），並讓 Accordion
   略快於 Carousel（--ds-duration-slow 300ms < --ds-duration-media 500ms） */
.rms-showcase__panel {
  display: grid;
  grid-template-rows: 0fr;
  padding-inline: var(--ds-space-md);
  transition: grid-template-rows var(--ds-duration-slow) var(--ds-ease);
}

.rms-showcase__item.is-active .rms-showcase__panel { grid-template-rows: 1fr; }

.rms-showcase__panel-inner {
  min-height: 0;
  overflow: hidden;
  color: var(--ds-color-text-secondary);
  font-size: var(--ds-text-body-sm-size);
  line-height: var(--ds-text-body-sm-line);
}

.rms-showcase__panel-inner p { margin: 0 0 var(--ds-space-lg); }

@media (prefers-reduced-motion: reduce) {
  .rms-showcase__panel { transition: none; }
}

/* =============================================================================
   7. 費用方案（兩張卡片並排，卡頭 Secondary、卡身白底，高度一致）
   只列方案項目、不列價格，報價由專人提供（區塊標題下方的洽詢提示）
   ============================================================================= */
/* 背景圖比例極扁（1920x370），寬度置滿容器、高度依比例縮放，不裁切也不重複 */
.rms-pricing {
  background: url("../assets/images/aais-home-line/price-bg.webp") top center / 100% auto no-repeat;
  padding-block: clamp(var(--ds-space-2xl), 8vw, var(--ds-space-4xl));
}

.rms-pricing .rms-section-intro { margin-inline: auto; text-align: center; }

/* 價格表上方的洽詢提示：方案不列價格，改由專人報價 */
.rms-pricing__contact {
  display: inline-flex;
  align-items: center;
  gap: var(--ds-space-sm);
  margin-top: var(--ds-space-md);
  padding: var(--ds-space-xs) var(--ds-space-lg) var(--ds-space-xs) var(--ds-space-xs);
  border-radius: var(--ds-radius-full);
  background: var(--ds-color-card);
  color: var(--ds-color-text-primary);
  font-size: var(--ds-text-body-md-size);
  line-height: var(--ds-text-body-md-line);
  font-weight: var(--ds-weight-semibold);
  text-align: left;
  box-shadow: var(--ds-shadow-sm);
}

.rms-pricing__contact-icon {
  display: inline-grid;
  flex: none;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: var(--ds-radius-full);
  background: var(--ds-color-primary);
  color: var(--ds-color-on-primary);
}

.rms-pricing__contact-icon .ds-icon { font-size: 20px; }

/* 兩張卡片左右排列、高度一樣：grid 預設 align-items:stretch 就會讓兩個
   column 都撐成同一列裡較高的那個，不用額外處理 */
.rms-pricing__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--ds-space-xl);
}

.rms-pricing__card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--ds-color-card);
  border-radius: var(--ds-radius-lg);
  box-shadow: var(--ds-shadow-md);
}

/* 卡頭沿用 Secondary（跟站內其他「選取中」狀態同一個色），白字置中 */
.rms-pricing__card-head {
  padding: var(--ds-space-lg);
  background: var(--ds-color-secondary);
  text-align: center;
}

.rms-pricing__card-head h3 {
  color: var(--ds-color-on-secondary);
  font-size: var(--ds-text-headline-sm-size);
  line-height: var(--ds-text-headline-sm-line);
  font-weight: var(--ds-weight-semibold);
}

.rms-pricing__card-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: var(--ds-space-md);
  padding: var(--ds-space-xl);
}

.rms-pricing__note { color: var(--ds-color-text-secondary); font-size: var(--ds-text-body-sm-size); }

.rms-pricing__table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--ds-text-body-sm-size);
}

.rms-pricing__table th,
.rms-pricing__table td {
  padding: var(--ds-space-sm) var(--ds-space-md);
  text-align: center;
  border: var(--ds-border-hairline);
}

.rms-pricing__table thead th {
  background: var(--ds-color-surface-strong);
  color: var(--ds-color-text-primary);
  font-weight: var(--ds-weight-semibold);
}

.rms-pricing__table tbody th {
  color: var(--ds-color-text-primary);
  font-weight: var(--ds-weight-medium);
}

.rms-pricing__table td { color: var(--ds-color-text-secondary); }

.rms-pricing__table tbody tr:nth-child(even) > * { background: var(--ds-color-surface-inner); }

.rms-pricing__footnote {
  margin-top: auto;
  padding-top: var(--ds-space-md);
  color: var(--ds-color-text-muted);
  font-size: var(--ds-text-caption-size);
  line-height: var(--ds-text-caption-line);
}

/* 功能介紹清單：跟參考圖一樣先填滿左欄、再排右欄（CSS columns 原生行為，
   5 項目自動變成「左 3 右 2」，不用手動分組） */
.rms-pricing__checklist {
  columns: 2;
  column-gap: var(--ds-space-lg);
  list-style: none;
  margin: 0;
  padding: 0;
}

.rms-pricing__checklist li {
  display: flex;
  align-items: center;
  gap: var(--ds-space-xs);
  padding-block: var(--ds-space-xs);
  break-inside: avoid;
  color: var(--ds-color-text-primary);
  font-size: var(--ds-text-body-sm-size);
}

.rms-pricing__checklist .ds-icon { color: var(--ds-color-success); font-size: 18px; }

.rms-pricing__disclaimer {
  margin-top: auto;
  padding-top: var(--ds-space-md);
  border-top: var(--ds-border-hairline);
  color: var(--ds-color-accent-ink);
  font-size: var(--ds-text-caption-size);
  line-height: var(--ds-text-caption-line);
}

@media (max-width: 639px) {
  .rms-pricing__grid { grid-template-columns: 1fr; }
  .rms-pricing__checklist { columns: 1; }
}

/* =============================================================================
   8. Final CTA
   直接沿用首頁 .contact／.cta-panel 的樣式（見 css/index.css 同一段的原始
   註解），只是 class 改成這個頁面自己的 .rms-cta-section／.rms-cta 命名，
   不去 import 整份 index.css。斷點刻意維持跟首頁原版一樣的 768／1024px，
   不是這個檔案其他地方用的 639／1023px：這是「複製」而不是「照這頁慣例
   重寫」，要跟首頁那份行為一致。
   ============================================================================= */
.rms-cta-section {
  position: relative;
  overflow: hidden;
  /* 背景圖層是 position:fixed（不隨捲動移動），overflow:hidden 裁不到固定
     定位的子元素，要用 clip-path 才能把它限制在本區塊範圍內 */
  clip-path: inset(0);
  background: var(--ds-color-page);
  /* 首頁原版只有 padding-bottom（前後有別的區塊撐出上緣間距），這頁的
     CTA 是獨立區塊，上下都要留白，卡片才不會貼齊區塊頂端 */
  padding-block: clamp(var(--ds-space-2xl), 8vw, var(--ds-space-4xl));
}

/* 背景圖層固定在視窗，區塊捲過時像窗口露出同一張圖；往外多留 24px，
   模糊邊緣才不會露出淡邊 */
.rms-cta-section__bg {
  position: fixed;
  inset: -24px;
  background: url("../assets/images/shared/cta_bg.png") center / cover no-repeat;
  filter: blur(6px);
}

.rms-cta-section__scrim {
  position: absolute;
  inset: 0;
  background: color-mix(in srgb, var(--ds-color-page) 78%, transparent);
}

.rms-cta {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--ds-space-xl);
  padding: var(--ds-space-xl);
}

/* 容器查詢：標題字級依本欄實際寬度計算（見 .rms-cta__title） */
.rms-cta__content { min-width: 0; container-type: inline-size; }
.rms-cta__content .ds-lead { max-width: 620px; margin-top: var(--ds-space-md); }

/* 平板以上標題不斷行，字級隨視窗寬度等比縮小，下限不小於內文導言；
   再以「本欄寬度 ÷ 16.5」把關，欄位較窄時也不會被擠斷行。手機可斷行 */
@media (min-width: 768px) {
  .rms-cta__title {
    font-size: clamp(var(--ds-text-body-lg-size), min(2.6vw, calc(100cqi / 16.5)), var(--ds-text-headline-md-size));
    line-height: 1.4;
    white-space: nowrap;
  }
}

@media (max-width: 767px) {
  .rms-cta__title {
    word-break: keep-all;
    overflow-wrap: anywhere;
    text-wrap: balance;
  }
}

.rms-cta__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ds-space-md);
}

@media (min-width: 1024px) {
  .rms-cta {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: var(--ds-space-2xl);
    padding: var(--ds-space-2xl);
  }
  .rms-cta__content { flex: 1 1 0%; }
  .rms-cta__actions { flex-shrink: 0; }
}

/* =============================================================================
   響應式
   ============================================================================= */
@media (max-width: 1023px) {
  /* Tablet：現場挑戰四欄改兩欄（2x2） */
  .rms-pain__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* Tablet：維持左右兩欄，只縮小欄距 */
  .rms-showcase__layout { gap: var(--ds-space-xl); }
}

@media (max-width: 639px) {
  /* 四大功能：手機標題改回可換行（桌機／平板才強制不換行） */
  .rms-features__title,
  .rms-features__body h3 { white-space: normal; }
  /* 四大功能面板：4:6 兩欄是固定比例（不是 auto-fit），手機要另外收合成
     單欄，不然兩欄會被硬擠在窄螢幕裡 */
  .rms-features__panel { grid-template-columns: 1fr; }
  /* 四大功能分頁：手機每格太窄放不下不換行的標籤，改回可換行＋改直排
     （編號在上、文字在下）＋縮小字級跟內距 */
  .rms-features__tab {
    flex-direction: column;
    gap: 2px;
    padding: var(--ds-space-md) var(--ds-space-xs);
    white-space: normal;
    font-size: var(--ds-text-caption-size);
    line-height: var(--ds-text-caption-line);
  }
  /* 現場挑戰：手機改單欄，頭像縮小 */
  .rms-pain__grid { grid-template-columns: 1fr; }
  .rms-pain__portrait { width: 80px; }
  /* 手機視窗窄，cover 縮放會把照片大幅裁到只剩右側人物，原本靠照片自帶的
     淺色漸層保證文字對比會失效，這裡疊一層同方向的淺色漸層補回對比 */
  .rms-hero {
    min-height: 0;
    background-image:
      linear-gradient(to right,
        color-mix(in srgb, var(--ds-color-page) 88%, transparent) 0%,
        color-mix(in srgb, var(--ds-color-page) 55%, transparent) 65%,
        color-mix(in srgb, var(--ds-color-page) 15%, transparent) 100%),
      url("../assets/images/aais-home-line/line-banner.webp");
  }
  .rms-hero__content { max-width: none; }
  /* Mobile：改為單欄，Carousel 在上（沿用文件順序）、Accordion 在下 */
  .rms-showcase__layout { grid-template-columns: 1fr; gap: var(--ds-space-xl); }
  /* 導入效益：手機版標題寬度不夠，允許換行；卡片改單欄；fixed 背景在手機
     瀏覽器普遍支援不佳（iOS Safari 直接不支援、部分 Android 有捲動效能問題），
     改回 scroll 較穩定 */
  .rms-benefits__title { white-space: normal; }
  .rms-benefits__grid { grid-template-columns: 1fr; }
  .rms-benefits { background-attachment: scroll; }
}

/* 置中標題使用完整欄寬；桌機以容器寬度限制字級，內文保留閱讀行長。 */
@media (min-width: 1024px) {
  .rms-pain .rms-section-intro,
  .rms-features .rms-section-intro,
  .rms-benefits .rms-section-intro,
  .rms-showcase .rms-section-intro,
  .rms-pricing .rms-section-intro {
    max-width: none;
    container-type: inline-size;
  }

  .rms-pain .rms-section-intro > h2.ds-title-lg,
  .rms-features .rms-section-intro > h2.ds-title-lg,
  .rms-benefits .rms-section-intro > h2.ds-title-lg,
  .rms-showcase .rms-section-intro > h2.ds-title-lg,
  .rms-pricing .rms-section-intro > h2.ds-title-lg {
    font-size: min(var(--ds-text-headline-lg-size), 4cqi);
    white-space: nowrap;
  }

  .rms-pain .rms-section-intro > .ds-lead,
  .rms-features .rms-section-intro > .ds-lead,
  .rms-benefits .rms-section-intro > .ds-lead,
  .rms-showcase .rms-section-intro > .ds-lead,
  .rms-pricing .rms-section-intro > .ds-lead {
    max-width: 640px;
    margin-inline: auto;
  }

  .rms-pain .rms-section-intro > h2 br,
  .rms-features .rms-section-intro > h2 br,
  .rms-benefits .rms-section-intro > h2 br,
  .rms-showcase .rms-section-intro > h2 br,
  .rms-pricing .rms-section-intro > h2 br { display: none; }
}