/* =============================================================================
   aais-home.css — 智驗宅驗交屋系統 Landing Page
   結構沿用 products/aais-home-line.php 的版面模板（Hero → 現場挑戰 → 四大
   功能 → 導入效益 → 系統實景 → 費用方案 → Final CTA），class 前綴改為
   .aais- 並整理為本頁專用樣式。僅供 products/aais-home.php 使用，與
   css/aais-home-line.css、css/product-detail.css 互相獨立，不共用 class。
   元件一律取自 design-system/components.css；本檔只負責版面、玻璃疊加樣式與
   進場動畫。
   ============================================================================= */

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

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

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

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

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

[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) {
  .aais-page [data-reveal] { transition: none; opacity: 1; transform: none; }
  .aais-page [class*="__eyebrow"],
  .aais-hero__title, .aais-hero__lead, .aais-hero__highlights, .aais-hero__actions {
    animation: none !important; opacity: 1; transform: none; filter: none;
  }
}

/* =============================================================================
   1. Hero
   ============================================================================= */
.aais-hero {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  min-height: clamp(420px, 42vw, 640px);
  padding-top: clamp(112px, 20vw, 144px);
  padding-bottom: var(--ds-space-3xl);
}

/* 影片鋪滿整個 Hero 當背景，比例不符時裁切保留右側主體 */
.aais-hero__video {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: right center;
}

/* 遮罩：左側加深讓文字對比更高，右側淡出露出影片內容 */
.aais-hero__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(to right,
    color-mix(in srgb, var(--ds-color-page) 85%, transparent) 0%,
    color-mix(in srgb, var(--ds-color-page) 45%, transparent) 55%,
    color-mix(in srgb, var(--ds-color-page) 5%, transparent) 100%);
}

.aais-hero > .aais-container { position: relative; z-index: 2; }

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

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

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

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

.aais-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: aais-rise .9s cubic-bezier(.16, 1, .3, 1) .32s both;
}

.aais-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);
}

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

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

/* =============================================================================
   2. 產品特色——傳統 vs 智驗宅比較表＋六角色協作卡＋流程條
   ============================================================================= */
.aais-compare {
  background: var(--ds-color-surface-inner);
  padding-block: clamp(var(--ds-space-2xl), 8vw, var(--ds-space-4xl));
}

.aais-compare .aais-section-intro { margin-inline: auto; text-align: center; }

.aais-compare__title {
  white-space: nowrap;
  font-size: clamp(20px, 2.2vw, var(--ds-text-headline-lg-size));
}

/* 版面與 css/short-video.css 的 .sv-compare 一致：無外框的語意表格，
   表頭深色底線分隔，智驗宅欄以淡主色底整欄凸顯 */
.aais-compare__table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  text-align: left;
}

.aais-compare__table th,
.aais-compare__table td {
  padding: var(--ds-space-lg);
  border-bottom: 1px solid var(--ds-color-border);
  vertical-align: top;
}

.aais-compare__table thead th {
  padding-block: var(--ds-space-md);
  color: var(--ds-color-text-muted);
  font-size: var(--ds-text-label-sm-size);
  line-height: var(--ds-text-label-sm-line);
  font-weight: var(--ds-weight-semibold);
  border-bottom-color: var(--ds-color-text-primary);
}

.aais-compare__table thead th:first-child { width: 22%; }
.aais-compare__table thead th:nth-child(2) { width: 36%; }

.aais-compare__table tbody th {
  color: var(--ds-color-text-primary);
  font-size: var(--ds-text-body-lg-size);
  line-height: var(--ds-text-body-lg-line);
  font-weight: var(--ds-weight-semibold);
}

.aais-compare__index {
  display: block;
  margin-bottom: var(--ds-space-xxs);
  color: var(--ds-color-primary);
  font-size: var(--ds-text-caption-size);
  line-height: var(--ds-text-caption-line);
  font-variant-numeric: tabular-nums;
}

.aais-compare__table td { color: var(--ds-color-text-secondary); }

/* 智驗宅欄只用淡品牌色強調，不把傳統欄做成負面評分 */
.aais-compare__table .aais-compare__highlight {
  background: color-mix(in srgb, var(--ds-color-primary-wash) 80%, var(--ds-color-card));
  color: var(--ds-color-text-primary);
}

.aais-compare__table thead .aais-compare__highlight {
  border-radius: var(--ds-radius-lg) var(--ds-radius-lg) 0 0;
  color: var(--ds-color-primary-dark);
}

.aais-compare__table tbody tr:last-child .aais-compare__highlight { border-radius: 0 0 var(--ds-radius-lg) var(--ds-radius-lg); }

.aais-compare__mark {
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: var(--ds-space-xs);
  border-radius: var(--ds-radius-full);
  background: linear-gradient(135deg, var(--ds-color-primary), var(--ds-color-secondary));
  vertical-align: 1px;
}

/* 示意圖列：傳統紙本與智驗宅各一張，維持原圖比例 */
.aais-compare__media td { vertical-align: middle; }

.aais-compare__pic {
  display: block;
  width: 100%;
  height: auto;
  max-height: 280px;
  object-fit: contain;
  border-radius: var(--ds-radius-md);
}

/* 左文右圖：左欄角色說明文字，右欄 3×2 角色照片卡 */
.aais-roles {
  display: flex;
  flex-direction: column;
  gap: var(--ds-space-2xl);
  margin-top: var(--ds-space-3xl);
}

.aais-roles__left {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--ds-space-2xl);
}

.aais-roles__intro { max-width: 480px; }

.aais-roles__title { margin-bottom: var(--ds-space-xl); }

/* 節點靠左、文字在右的直向流程（跟系統介紹的手機版同一套排法，這裡任何
   寬度都用這個方向，不隨斷點改回橫向）；靠 .aais-roles__left 的
   justify-content: space-between 貼齊照片區塊底部 */
.aais-roles__flow {
  position: relative;
  grid-template-columns: 1fr;
  justify-items: start;
  gap: var(--ds-space-2xl);
  padding: var(--ds-space-xl);
}

/* 一直線貫穿所有節點中心，取代原本逐項的箭頭；位置要扣掉 padding-xl，
   不然會跟真正的節點圓心對不齊 */
.aais-roles__flow::before,
.aais-roles__flow::after {
  content: "";
  position: absolute;
  left: calc(var(--ds-space-xl) + var(--ds-control-height-md) / 2 - 1px);
  width: 2px;
  top: calc(var(--ds-space-xl) + var(--ds-control-height-md) / 2);
}

.aais-roles__flow::before {
  bottom: calc(var(--ds-space-xl) + var(--ds-control-height-md) / 2);
  background: var(--ds-color-border);
}

.aais-roles__flow::after {
  height: calc((100% - var(--ds-space-xl) * 2 - var(--ds-control-height-md)) * var(--ds-process-progress, 1));
  background: var(--ds-color-primary);
  box-shadow: var(--ds-shadow-cyan);
}

.aais-roles__flow .ds-process__item {
  grid-template-columns: auto 1fr;
  align-items: center;
  justify-items: start;
  text-align: left;
  width: 100%;
}

/* 用 .ds-process + class 疊出跟 .ds-process:not(:has(.is-lit)) 同級的
   specificity，才蓋得過元件庫的 fallback 文字色 */
.ds-process.aais-roles__flow .ds-process__label {
  font-size: 18px;
  line-height: 28px;
  font-weight: 400;
  color: var(--ds-color-primary-hover);
}

.aais-roles__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--ds-space-md);
}

.aais-roles__card {
  position: relative;
  overflow: hidden;
  aspect-ratio: 3 / 4;
  border-radius: var(--ds-radius-lg);
  background: var(--ds-color-surface-muted);
}

/* 頂部留 10% 空間露出卡片底色，照片占滿剩下的高度，下緣視比例裁切 */
.aais-roles__photo {
  position: absolute;
  top: 10%;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 90%;
  object-fit: cover;
  object-position: top center;
}

/* 預設狀態：角色身份文字疊在照片左下角，用陰影維持可讀性；
   hover／focus 時淡出，避免跟 .aais-roles__reveal-title 疊字 */
.aais-roles__name {
  position: absolute;
  left: var(--ds-space-md);
  bottom: var(--ds-space-md);
  z-index: 2;
  color: #ffffff;
  font-size: var(--ds-text-body-lg-size);
  font-weight: var(--ds-weight-semibold);
  text-shadow: 0 1px 8px rgba(0, 0, 0, .45);
  transition: opacity var(--ds-duration-slow) var(--ds-ease);
}

.aais-roles__card:hover .aais-roles__name { opacity: 0; }

/* hover／focus：深色陰影由下往上浮起，下深上淺（不透明度 0～0.7），
   蓋住整張卡片露出標題＋說明 */
.aais-roles__reveal {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: var(--ds-space-lg);
  background: linear-gradient(to bottom,
    transparent 0%,
    color-mix(in srgb, var(--ds-color-text-primary) 70%, transparent) 100%);
  opacity: 0;
  transform: translateY(100%);
  transition: opacity var(--ds-duration-slow) var(--ds-ease),
              transform var(--ds-duration-slow) var(--ds-ease);
}

.aais-roles__card:hover .aais-roles__reveal { opacity: 1; transform: translateY(0); }

.aais-roles__reveal-title {
  margin: 0 0 var(--ds-space-xs);
  color: #ffffff;
  font-size: var(--ds-text-headline-sm-size);
  line-height: var(--ds-text-headline-sm-line);
  font-weight: var(--ds-weight-semibold);
  text-align: left;
  text-shadow: 0 1px 8px rgba(0, 0, 0, .35);
}

.aais-roles__reveal-desc {
  margin: 0;
  color: #ffffff;
  font-size: var(--ds-text-body-md-size);
  line-height: var(--ds-text-body-md-line);
  font-weight: 400;
  text-align: left;
  text-shadow: 0 1px 8px rgba(0, 0, 0, .35);
}

@media (prefers-reduced-motion: reduce) {
  .aais-roles__reveal,
  .aais-roles__name { transition: none; }
}

@media (min-width: 1024px) {
  .aais-roles {
    display: grid;
    grid-template-columns: minmax(240px, 1fr) minmax(0, 2.2fr);
    gap: var(--ds-space-2xl);
  }

  .aais-roles__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* =============================================================================
   3. 系統介紹——分頁用共用元件 design-system/components.css 的
   .ds-feature-tabs（跟智代銷 CRM「系統優勢」同一組樣式），這裡只管面板內容
   （左文右圖、42／58）。互動邏輯沿用 js/product-detail.js 的
   data-feature-tabs／data-feature-tab／data-feature-panel，不用另外寫 JS。
   ============================================================================= */
.aais-flow-section {
  position: relative;
  background: var(--ds-color-surface-inner);
  padding-block: clamp(var(--ds-space-2xl), 8vw, var(--ds-space-4xl));
  --aais-flow-row-height: 420px;
  overflow: hidden;
}

/* 底部裝飾背景：由上到下不透明度 0→1（遮罩），與區塊底色用色彩增值混合 */
.aais-flow-section::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("../assets/images/aais-home/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;
}

.aais-flow-section > .aais-container { position: relative; z-index: 1; }

.aais-flow-section .aais-section-intro { margin-inline: auto; text-align: center; }

.aais-flow__title {
  white-space: nowrap;
  font-size: clamp(21px, 2.3vw, var(--ds-text-headline-lg-size));
}

.aais-flow-section .ds-feature-tabs { margin-bottom: var(--ds-space-2xl); background: var(--ds-color-card); box-shadow: var(--ds-shadow-panel); }

.aais-flow__panel {
  display: grid;
  grid-template-columns: minmax(240px, 42fr) minmax(280px, 58fr);
  align-items: center;
  gap: var(--ds-space-2xl);
  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);
}

.aais-flow__panel[hidden] { display: none; }

.aais-flow__body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: var(--aais-flow-row-height);
}

.aais-flow__body h3 { margin-bottom: var(--ds-space-md); }

.aais-flow__body > p.ds-lead { color: var(--ds-color-text-secondary); }

.aais-flow__points {
  list-style: none;
  margin: var(--ds-space-lg) 0 0;
  padding: 0;
  display: grid;
  gap: var(--ds-space-sm);
}

.aais-flow__points li {
  position: relative;
  padding-left: var(--ds-space-md);
  color: var(--ds-color-text-secondary);
  font-size: var(--ds-text-body-md-size);
  line-height: var(--ds-text-body-md-line);
}

.aais-flow__points li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .6em;
  width: 6px;
  height: 6px;
  border-radius: var(--ds-radius-full);
  background: var(--ds-color-primary);
}

.aais-flow__points strong { color: var(--ds-color-accent); font-weight: var(--ds-weight-semibold); }

.aais-flow__note {
  margin-top: var(--ds-space-lg);
  display: flex;
  align-items: center;
  gap: var(--ds-space-sm);
  color: var(--ds-color-text-secondary);
  font-size: var(--ds-text-body-md-size);
  line-height: var(--ds-text-body-md-line);
}

.aais-flow__visual {
  margin: 0;
  display: grid;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: var(--ds-radius-lg);
}

.aais-flow__media {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: var(--ds-space-lg);
}

@media (max-width: 1023px) {
  .aais-flow__panel { grid-template-columns: minmax(220px, 1fr) minmax(240px, 1fr); }
}

@media (max-width: 639px) {
  .aais-flow__panel { grid-template-columns: 1fr; }
  .aais-flow__body { min-height: 0; }
}

/* =============================================================================
   4. 導入效益——背景為左淡出的作業情境照（benifit-bg.webp），淡出區域透出
   --ds-color-text-secondary 底色；文字與手風琴皆靠左對齊，疊在底色上
   （深色底），故手風琴元件在此覆寫為淺色文字／半透明白底，維持現有區塊
   高度（min-height 鎖定，避免手風琴內容比原本五張卡片短而讓區塊變矮）。
   ============================================================================= */
.aais-benefits {
  position: relative;
  min-height: 704px;
  display: flex;
  align-items: center;
  background-color: var(--ds-color-text-secondary);
  background-image: url("../assets/images/aais-home/benifit-bg.webp");
  background-size: cover;
  background-position: right center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  padding-block: clamp(var(--ds-space-xl), 6vw, var(--ds-space-3xl));
}

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

.aais-benefits .aais-section-intro { color: var(--ds-color-on-dark); }

.aais-benefits__title { color: var(--ds-color-on-dark); }

.aais-benefits .ds-lead { color: var(--ds-color-on-dark-strong); }

.aais-benefits__accordion {
  max-width: 640px;
  background: color-mix(in srgb, var(--ds-color-on-dark) 10%, transparent);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  box-shadow: none;
}

.aais-benefits__accordion .ds-accordion__item + .ds-accordion__item {
  border-top: var(--ds-border-width) solid var(--ds-color-on-dark-hairline);
}

.aais-benefits__accordion .ds-accordion__item:hover,
.aais-benefits__accordion .ds-accordion__item.is-hover {
  background: color-mix(in srgb, var(--ds-color-on-dark) 16%, transparent);
}

.aais-benefits__accordion .ds-accordion__item[open],
.aais-benefits__accordion .ds-accordion__item[open]:hover {
  background: color-mix(in srgb, var(--ds-color-on-dark) 10%, transparent);
}

.aais-benefits__accordion .ds-accordion__icon {
  background: color-mix(in srgb, var(--ds-color-on-dark) 14%, transparent);
  color: var(--ds-color-on-dark);
}

.aais-benefits__accordion .ds-accordion__item[open] .ds-accordion__icon {
  background: var(--ds-color-on-dark);
  color: var(--ds-color-primary);
}

.aais-benefits__accordion .ds-accordion__title { color: var(--ds-color-on-dark); }

.aais-benefits__accordion .ds-accordion__panel { color: var(--ds-color-on-dark-strong); }

.aais-benefits__accordion .ds-accordion__chevron {
  background: color-mix(in srgb, var(--ds-color-on-dark) 14%, transparent);
  color: var(--ds-color-on-dark-strong);
}

.aais-benefits__accordion .ds-accordion__item[open] .ds-accordion__chevron,
.aais-benefits__accordion .ds-accordion__trigger:hover .ds-accordion__chevron,
.aais-benefits__accordion .ds-accordion__item.is-hover .ds-accordion__chevron {
  background: var(--ds-color-on-dark);
  color: var(--ds-color-primary);
}

/* =============================================================================
   5. 費用方案——兩張方案卡（驗屋訂閱／報修訂閱）只列方案項目、不列價格，
   報價由專人提供（區塊標題下方的洽詢提示）。卡片內依序為：方案說明、
   方案表格（thead 為適用戶數級距，第二個 tbody 是擴充方案分組，淡紫表頭列＋
   自己的 th/id，資料格以 headers 對應欄位）、補充事項條列；桌機兩卡並排並以
   subgrid 對齊各列，中小螢幕上下堆疊。
   ============================================================================= */
.aais-pricing {
  background: var(--ds-color-surface-strong);
  padding-block: clamp(var(--ds-space-2xl), 8vw, var(--ds-space-4xl));
}

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

/* 價格表上方的洽詢提示：方案不列價格，改由專人報價 */
.aais-pricing__contact {
  display: inline-flex;
  align-items: center;
  gap: var(--ds-space-sm);
  margin-top: var(--ds-space-lg);
  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);
}

.aais-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);
}

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

.aais-pricing__plans {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(3, auto);
  gap: var(--ds-space-xl);
}

.aais-pricing__plan {
  display: grid;
  grid-row: span 3;
  grid-template-rows: subgrid;
  /* 欄寬鎖在卡片寬度內：預設 auto 欄會被表格 min-width 撐開，整張卡片撐出畫面 */
  grid-template-columns: minmax(0, 1fr);
  min-width: 0;
  gap: var(--ds-space-lg);
  padding: var(--ds-space-xl);
  background: var(--ds-color-card);
  border-radius: var(--ds-radius-lg);
  box-shadow: var(--ds-shadow-panel);
}

.aais-pricing__plan-head h3 {
  color: var(--ds-color-text-primary);
  font-size: var(--ds-text-headline-sm-size);
  line-height: var(--ds-text-headline-sm-line);
  font-weight: var(--ds-weight-semibold);
}

.aais-pricing__plan-head p {
  margin-top: var(--ds-space-xs);
  line-height: var(--ds-text-body-sm-line);
}

.aais-pricing__term {
  margin-top: var(--ds-space-sm);
  color: var(--ds-color-secondary);
  font-size: var(--ds-text-body-lg-size);
  font-weight: var(--ds-weight-semibold);
}

/* position: relative 讓表格內 .ds-visually-hidden（absolute）以捲動容器為定位基準，
   否則會跳出 overflow 裁切範圍、撐寬整頁 */
.aais-pricing__table-scroll {
  position: relative;
  min-width: 0;
  overflow-x: auto;
}

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

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

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

.aais-pricing__table tbody th[scope="row"] {
  color: var(--ds-color-text-primary);
  font-weight: var(--ds-weight-medium);
  text-align: left;
}

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

.aais-pricing__table tbody tr:nth-child(even) td,
.aais-pricing__table tbody tr:nth-child(even) th[scope="row"] { background: var(--ds-color-surface-inner); }

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

/* 擴充方案表頭：淡紫背景＋清楚分隔線 */
.aais-pricing__table .aais-pricing__addon-head th {
  background: var(--ds-color-secondary-wash);
  color: var(--ds-color-secondary);
  font-weight: var(--ds-weight-semibold);
  border-top: var(--ds-border-width-emphasis) solid var(--ds-color-secondary);
}

.aais-pricing__extra {
  list-style: none;
  margin: 0;
  padding-top: var(--ds-space-md);
  border-top: var(--ds-border-hairline);
  display: grid;
  gap: var(--ds-space-xs);
}

.aais-pricing__extra li {
  color: var(--ds-color-text-secondary);
  line-height: var(--ds-text-body-lg-line);
}

.aais-pricing__extra strong { color: var(--ds-color-accent); font-weight: var(--ds-weight-bold); }

@media (max-width: 959px) {
  .aais-pricing__plans { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 639px) {
  .aais-pricing__plan { padding: var(--ds-space-lg) var(--ds-space-md); }
}

/* =============================================================================
   7. 媒體報導
   ============================================================================= */
.aais-press {
  padding-block: clamp(var(--ds-space-2xl), 8vw, var(--ds-space-4xl));
  background: url("../assets/images/shared/dot-strong-bg.webp") top center / 100% auto no-repeat;
}

.aais-press .aais-section-intro { margin-inline: auto; text-align: center; }

.aais-press__list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-auto-rows: 1fr;
  gap: var(--ds-space-md);
  list-style: none;
  margin: 0;
  padding: 0;
}

.aais-press__link {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--ds-space-sm);
  height: 100%;
  padding: var(--ds-space-lg);
  background: var(--ds-color-card);
  border: var(--ds-border-width) solid var(--ds-color-border);
  border-radius: var(--ds-radius-md);
  box-shadow: var(--ds-shadow-md);
  color: var(--ds-color-text-primary);
  text-decoration: none;
  transition: transform var(--ds-duration-slow) var(--ds-ease),
              box-shadow var(--ds-duration-slow) var(--ds-ease);
}

.aais-press__link:hover {
  transform: translateY(-4px);
  box-shadow: var(--ds-shadow-panel);
}

.aais-press__link:focus-visible {
  outline: none;
  box-shadow: var(--ds-shadow-focus);
}

.aais-press__outlet { flex-shrink: 0; }

.aais-press__title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  width: 100%;
  color: var(--ds-color-text-secondary);
  font-size: var(--ds-text-body-md-size);
  line-height: var(--ds-text-body-md-line);
  font-weight: var(--ds-weight-bold);
}

@media (max-width: 1023px) {
  .aais-press__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 639px) {
  .aais-press__list { grid-template-columns: 1fr; }
}

/* =============================================================================
   8. Final CTA — 純文字置中，背景用 surface-inner 底色＋ cta-bg.webp 靠下
   對齊、滿版寬度收尾（樣式與 aais-crm.css 的 .crm-cta-section 同款）
   ============================================================================= */
.aais-cta-section {
  background: url("../assets/images/aais-crm/cta-bg.webp") bottom center / 100% auto no-repeat;
  padding-block: clamp(var(--ds-space-3xl), 10vw, var(--ds-space-4xl));
}

.aais-cta { text-align: center; }

.aais-cta__title {
  width: 100%;
  margin-block: var(--ds-space-sm) var(--ds-space-md);
}

.aais-cta > .ds-lead {
  max-width: 640px;
  margin-inline: auto;
}

.aais-cta__actions {
  display: flex;
  justify-content: center;
  margin-top: var(--ds-space-xl);
}

/* =============================================================================
   響應式
   ============================================================================= */
@media (max-width: 1023px) {
  .aais-press__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 767px) {
  /* 比較表在手機改為每列一組：情境標題在上，傳統方式與智驗宅依序堆疊 */
  .aais-compare__table,
  .aais-compare__table tbody,
  .aais-compare__table tr,
  .aais-compare__table th,
  .aais-compare__table td { display: block; width: auto; }

  .aais-compare__table thead { display: none; }

  .aais-compare__table tbody tr {
    padding-block: var(--ds-space-lg);
    border-bottom: 1px solid var(--ds-color-border);
  }

  .aais-compare__table tbody th,
  .aais-compare__table td { padding: 0; border: 0; }

  .aais-compare__table tbody th { margin-bottom: var(--ds-space-sm); }

  .aais-compare__table td + td { margin-top: var(--ds-space-xs); }

  .aais-compare__table td[data-label]::before {
    content: attr(data-label);
    display: block;
    color: var(--ds-color-text-muted);
    font-size: var(--ds-text-caption-size);
    line-height: 20px;
    font-weight: var(--ds-weight-semibold);
  }

  .aais-compare__table .aais-compare__highlight,
  .aais-compare__table tbody tr:last-child .aais-compare__highlight {
    padding: var(--ds-space-sm) var(--ds-space-md);
    border-radius: var(--ds-radius-md);
  }

  .aais-compare__table td.aais-compare__highlight::before { color: var(--ds-color-primary-dark); }

  /* 示意圖列：兩張圖並排，空白的情境欄隱藏 */
  .aais-compare__table .aais-compare__media {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--ds-space-sm);
  }
  .aais-compare__media td:first-child { display: none; }
  .aais-compare__table .aais-compare__media td + td { margin-top: 0; }
}

/* 手機：觸控沒有 hover，改為圓形頭像在上、文字在下的兩欄卡片，說明直接顯示 */
@media (max-width: 767px) {
  .aais-roles__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--ds-space-sm); }

  .aais-roles__card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--ds-space-sm);
    text-align: center;
    aspect-ratio: auto;
    overflow: visible;
    padding: var(--ds-space-md);
    background: var(--ds-color-card);
    border: var(--ds-border-width) solid var(--ds-color-border);
  }

  .aais-roles__photo {
    position: static;
    width: 64px;
    height: 64px;
    box-sizing: border-box;
    padding-top: 10px;
    border-radius: var(--ds-radius-full);
    background: var(--ds-color-surface-muted);
    object-position: center top;
  }

  .aais-roles__name { display: none; }

  .aais-roles__card .aais-roles__reveal,
  .aais-roles__card:hover .aais-roles__reveal {
    position: static;
    padding: 0;
    background: none;
    opacity: 1;
    transform: none;
    transition: none;
  }

  .aais-roles__reveal-title {
    margin-bottom: var(--ds-space-xxs);
    color: var(--ds-color-text-primary);
    font-size: var(--ds-text-body-lg-size);
    line-height: var(--ds-text-body-lg-line);
    text-align: center;
    text-shadow: none;
  }

  .aais-roles__reveal-desc {
    color: var(--ds-color-text-secondary);
    font-size: var(--ds-text-body-sm-size);
    line-height: var(--ds-text-body-sm-line);
    text-align: center;
    text-shadow: none;
  }
}

@media (max-width: 639px) {
  .aais-hero { min-height: 0; }
  /* 手機版寬度較窄，cover 裁切會讓影片左側可視範圍變小，遮罩加深維持文字對比 */
  .aais-hero__scrim {
    background: linear-gradient(to right,
      color-mix(in srgb, var(--ds-color-page) 90%, transparent) 0%,
      color-mix(in srgb, var(--ds-color-page) 68%, transparent) 60%,
      color-mix(in srgb, var(--ds-color-page) 25%, transparent) 100%);
  }
  .aais-hero__content { max-width: none; }
  .aais-compare__title,
  .aais-flow__title { white-space: normal; }
  .aais-benefits { min-height: 0; background-attachment: scroll; }
  .aais-press__list { grid-template-columns: 1fr; }
}

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

  .aais-compare .aais-section-intro > h2.ds-title-lg,
  .aais-flow-section .aais-section-intro > h2.ds-title-lg,
  .aais-pricing .aais-section-intro > h2.ds-title-lg,
  .aais-press .aais-section-intro > h2.ds-title-lg,
  .aais-cta > h2.ds-title-lg {
    font-size: min(var(--ds-text-headline-lg-size), 4cqi);
    white-space: nowrap;
  }

  .aais-compare .aais-section-intro > .ds-lead,
  .aais-flow-section .aais-section-intro > .ds-lead,
  .aais-pricing .aais-section-intro > .ds-lead,
  .aais-press .aais-section-intro > .ds-lead {
    max-width: 640px;
    margin-inline: auto;
  }

  .aais-compare .aais-section-intro > h2 br,
  .aais-flow-section .aais-section-intro > h2 br,
  .aais-pricing .aais-section-intro > h2 br,
  .aais-press .aais-section-intro > h2 br,
  .aais-cta > h2 br { display: none; }
}