/* =============================================================================
   aais-crm.css — 智代銷 CRM 平台系統 Landing Page
   結構依 docs/plans/智代銷CRM_網頁文案與版面規劃.md 重建（Banner → 管理痛點 →
   系統優勢 → 導入實績 → 費用方案 → CTA），class 前綴 .crm-。僅供 products/aais-crm.php 使用，
   與 css/product-detail.css、css/aais-home.css、css/service-app.css 互相獨
   立，不共用 class。
   「管理痛點」以四張角色情境大圖輪播呈現；其餘 tokens 用法與其他產品頁一致。
   ============================================================================= */

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

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

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

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

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

/* =============================================================================
   1. Banner
   ============================================================================= */
.crm-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-crm/crm-banner.webp");
  background-size: cover;
  background-position: right center;
  background-repeat: no-repeat;
}

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

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

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

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

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

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

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

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

/* =============================================================================
   2. 管理痛點——大圖輪播：說明文字壓在圖片左下（漸層暗角確保可讀），下方為
   四個痛點的導覽列（tablist），進度線顯示自動輪播時間。
   切換、自動輪播與動態由 js/aais-crm.js 處理：沒有 JS 時只顯示第一張；
   GSAP 未載入或偏好減少動態時不自動輪播，切換改為直接淡入。
   ============================================================================= */
.crm-pain {
  background: var(--ds-color-surface-inner);
  padding-block: clamp(var(--ds-space-2xl), 8vw, var(--ds-space-4xl));
}

.crm-pain .crm-section-intro { margin-inline: auto; text-align: center; }

/* 大圖與導覽列同一屏：高度取「原比例」與「視窗高度扣掉頁首、導覽列與上下留白」的較小值，
   比例以容器寬度（cqi）換算 */
.crm-challenge {
  --challenge-ratio: .5;
  --challenge-chrome: 196px;
  container-type: inline-size;
}

.crm-challenge__stage {
  position: relative;
  height: min(calc(100cqi * var(--challenge-ratio)), calc(100vh - var(--ds-navbar-height) - var(--challenge-chrome)));
  height: min(calc(100cqi * var(--challenge-ratio)), calc(100dvh - var(--ds-navbar-height) - var(--challenge-chrome)));
  min-height: 320px;
  overflow: hidden;
  border-radius: var(--ds-radius-lg);
  background: var(--ds-color-action-ink);
  box-shadow: var(--ds-shadow-panel);
  isolation: isolate;
  touch-action: pan-y;
}

.crm-challenge__slide {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.crm-challenge__slide.is-active { z-index: 2; }
.crm-challenge__slide.is-leaving { z-index: 1; }

.crm-challenge__media { position: absolute; inset: 0; overflow: hidden; }

.crm-challenge__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 30%;
  transform-origin: 50% 40%;
}

/* 暗角：左下最深，讓疊在圖上的白字維持對比 */
.crm-challenge__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to top, rgba(10, 10, 15, .82) 0%, rgba(10, 10, 15, .45) 32%, rgba(10, 10, 15, 0) 62%),
    linear-gradient(to right, rgba(10, 10, 15, .55) 0%, rgba(10, 10, 15, 0) 55%);
  pointer-events: none;
}

.crm-challenge__content {
  position: absolute;
  inset: auto auto 0 0;
  z-index: 1;
  width: min(100%, 600px);
  padding: clamp(var(--ds-space-lg), 4vw, var(--ds-space-3xl));
  color: var(--ds-color-on-dark);
  text-align: left;
}

.crm-challenge__eyebrow {
  display: flex;
  align-items: center;
  gap: var(--ds-space-sm);
  color: var(--ds-color-on-dark-strong);
  font-size: var(--ds-text-body-sm-size);
  line-height: var(--ds-text-body-sm-line);
  font-weight: var(--ds-weight-semibold);
  letter-spacing: .04em;
}

.crm-challenge__index { color: var(--ds-color-cyan); font-variant-numeric: tabular-nums; }

.crm-challenge__divider {
  width: 32px;
  height: 1px;
  background: color-mix(in srgb, var(--ds-color-on-dark) 50%, transparent);
}

.crm-challenge__title {
  margin-top: var(--ds-space-sm);
  color: var(--ds-color-on-dark);
  font-size: clamp(24px, 2.8vw, 40px);
  line-height: 1.3;
  font-weight: var(--ds-weight-bold);
  letter-spacing: -.01em;
  text-wrap: balance;
}

.crm-challenge__mask { display: block; overflow: hidden; padding-bottom: .08em; margin-bottom: -.08em; }
.crm-challenge__mask > span { display: block; }

.crm-challenge__text {
  margin-top: var(--ds-space-sm);
  color: var(--ds-color-on-dark-strong);
  font-size: var(--ds-text-body-md-size);
  line-height: var(--ds-text-body-md-line);
}

/* 暫停／播放：玻璃質感圓鈕，固定在畫面右上 */
.crm-challenge__toggle {
  position: absolute;
  top: var(--ds-space-md);
  right: var(--ds-space-md);
  z-index: 3;
  display: inline-grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 1px solid color-mix(in srgb, var(--ds-color-on-dark) 30%, transparent);
  border-radius: var(--ds-radius-full);
  background: color-mix(in srgb, #000 30%, transparent);
  color: var(--ds-color-on-dark);
  cursor: pointer;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  transition: background-color var(--ds-duration-fast) var(--ds-ease);
}

.crm-challenge__toggle[hidden] { display: none; }
.crm-challenge__toggle:hover { background: color-mix(in srgb, #000 50%, transparent); }
.crm-challenge__toggle:focus-visible { outline: none; box-shadow: var(--ds-shadow-focus); }
.crm-challenge__toggle .ds-icon { font-size: 22px; }

/* --- 導覽列 --- */
.crm-challenge__tabs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--ds-space-lg);
  margin-top: var(--ds-space-lg);
}

.crm-challenge__tab {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
  container-type: inline-size;
  padding: var(--ds-space-md) 0 var(--ds-space-xs);
  border: 0;
  background: none;
  color: var(--ds-color-text-secondary);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: color var(--ds-duration-fast) var(--ds-ease);
}

.crm-challenge__progress {
  position: relative;
  display: block;
  align-self: stretch;
  height: 3px;
  margin-bottom: var(--ds-space-sm);
  overflow: hidden;
  border-radius: var(--ds-radius-full);
  background: var(--ds-color-border);
  transition: background-color var(--ds-duration-fast) var(--ds-ease);
}

/* 選取中的軌道加上淡色底，暫停時仍看得出目前位置 */
.crm-challenge__tab[aria-selected="true"] .crm-challenge__progress { background: var(--ds-color-primary-wash); }

.crm-challenge__progress > span {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, var(--ds-color-primary), var(--ds-color-cyan));
  transform: scaleX(0);
  transform-origin: left center;
}

/* 選取中：沒有自動輪播（無 JS 進度動畫）時進度線直接填滿 */
.crm-challenge__tab[aria-selected="true"] .crm-challenge__progress > span { transform: scaleX(1); }
.crm-challenge.is-autoplay .crm-challenge__tab[aria-selected="true"] .crm-challenge__progress > span { transform: scaleX(var(--challenge-progress, 0)); }

.crm-challenge__tab-label {
  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);
  transition: color var(--ds-duration-fast) var(--ds-ease);
}

/* 痛點說明：一行顯示完、不斷行；字級隨欄寬縮放（最長 15 字），上限 16px */
.crm-challenge__tab-title {
  display: block;
  max-width: 100%;
  margin-top: var(--ds-space-xxs);
  color: var(--ds-color-text-secondary);
  font-size: min(var(--ds-text-body-md-size), 6.3cqi);
  line-height: 1.6;
  white-space: nowrap;
}

.crm-challenge__tab:hover .crm-challenge__tab-label { color: var(--ds-color-primary); }
.crm-challenge__tab[aria-selected="true"] .crm-challenge__tab-label { color: var(--ds-color-primary); }

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

/* 沒有 GSAP 或偏好減少動態：切換時直接淡入 */
.crm-challenge:not(.is-motion) .crm-challenge__slide.is-active { animation: crm-challenge-fade .5s ease both; }
@keyframes crm-challenge-fade { from { opacity: 0; } }

/* 平板：導覽改 2×2，每欄足夠讓說明以 16px 一行顯示 */
@media (max-width: 1023px) {
  .crm-challenge { --challenge-ratio: .625; --challenge-chrome: 300px; }
  .crm-challenge__tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--ds-space-xs); }
}

/* 窄螢幕改直式構圖，依各張主體位置裁切；導覽列只保留編號與分類 */
@media (max-width: 639px) {
  .crm-challenge { --challenge-ratio: 1.3333; --challenge-chrome: 300px; }
  .crm-challenge__image { object-position: var(--challenge-pos, 50%) 30%; }
  .crm-challenge__media::after {
    background: linear-gradient(to top, rgba(10, 10, 15, .88) 0%, rgba(10, 10, 15, .55) 40%, rgba(10, 10, 15, 0) 70%);
  }
  .crm-challenge__text { font-size: var(--ds-text-body-sm-size); line-height: var(--ds-text-body-sm-line); }
  /* 手機：導覽改直向四列，分類與說明同一行 */
  .crm-challenge__tabs { grid-template-columns: minmax(0, 1fr); row-gap: 0; margin-top: var(--ds-space-sm); }
  .crm-challenge__tab {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: baseline;
    column-gap: var(--ds-space-sm);
    padding: var(--ds-space-sm) 0 var(--ds-space-xs);
  }
  .crm-challenge__progress { grid-column: 1 / -1; margin-bottom: var(--ds-space-xs); }
  .crm-challenge__tab-title { margin-top: 0; font-size: min(var(--ds-text-body-sm-size), 6.6cqi); }
}

@media (prefers-reduced-motion: reduce) {
  .crm-challenge__slide.is-active { animation: none; }
}

/* =============================================================================
   3. 系統優勢——分頁用共用元件 design-system/components.css 的
   .ds-feature-tabs（跟智驗宅 LINE＠ 報修系統「四大功能」同一組樣式），這裡只
   管面板內容（左文右圖、42／58）。互動邏輯沿用 js/product-detail.js 的
   data-feature-tabs／data-feature-tab／data-feature-panel，不用另外寫 JS。
   ============================================================================= */
.crm-advantages { padding-block: clamp(var(--ds-space-2xl), 8vw, var(--ds-space-4xl)); }

.crm-advantages .crm-section-intro { margin-inline: auto; text-align: center; }

.crm-advantages .ds-feature-tabs { margin-bottom: var(--ds-space-2xl); }

.crm-advantages__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-surface-muted);
  border-radius: var(--ds-radius-lg);
  box-shadow: var(--ds-shadow-md);
}

.crm-advantages__panel[hidden] { display: none; }

/* 四個面板共同的高度基準：避免切換分頁時，文字量不同造成面板高度跳動 */
.crm-advantages { --crm-advantages-row-height: 480px; }

.crm-advantages__body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: var(--crm-advantages-row-height);
}

.crm-advantages__body h3 { margin-top: var(--ds-space-md); margin-bottom: var(--ds-space-md); white-space: nowrap; }

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

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

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

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

.crm-advantages__points strong { color: var(--ds-color-text-primary); font-weight: var(--ds-weight-semibold); }

.crm-advantages__payoff {
  margin-top: var(--ds-space-lg);
  padding-top: var(--ds-space-lg);
  border-top: var(--ds-border-hairline);
  color: var(--ds-color-text-primary);
  font-weight: var(--ds-weight-semibold);
}

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

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

.crm-advantages__footnote {
  margin-top: var(--ds-space-xl);
  color: var(--ds-color-text-muted);
  font-size: var(--ds-text-caption-size);
  line-height: var(--ds-text-caption-line);
  text-align: center;
}

/* =============================================================================
   3.5 導入實績——費用方案前的深色帶：大字數據＋雙列客戶名稱跑馬燈
   數據的計數、分隔線畫出與標題逐字升起由 js/aais-crm.js（GSAP）驅動，
   只在 GSAP 載入且未偏好減少動態時於區塊加上 .is-motion 才隱藏起始畫格；
   跑馬燈為純 CSS，偏好減少動態時改為靜態換行排列並隱藏重複的那一份。
   ============================================================================= */
.crm-proof {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-block: clamp(var(--ds-space-2xl), 7vw, var(--ds-space-4xl));
  background: linear-gradient(160deg,
    color-mix(in srgb, var(--ds-color-primary-dark) 45%, #000) 0%,
    var(--ds-color-primary-dark) 70%,
    color-mix(in srgb, var(--ds-color-primary-dark) 80%, var(--ds-color-primary)) 100%);
  color: var(--ds-color-on-dark);
}

/* 光暈與格線：只作背景層次，不承載資訊 */
.crm-proof__glow {
  position: absolute;
  inset: -20% -10%;
  z-index: -1;
  background:
    radial-gradient(38% 42% at 82% 18%, color-mix(in srgb, var(--ds-color-primary) 38%, transparent), transparent 70%),
    radial-gradient(34% 40% at 8% 88%, color-mix(in srgb, var(--ds-color-secondary) 34%, transparent), transparent 70%);
  pointer-events: none;
}

.crm-proof::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image:
    linear-gradient(var(--ds-color-on-dark-hairline) 1px, transparent 1px),
    linear-gradient(90deg, var(--ds-color-on-dark-hairline) 1px, transparent 1px);
  background-size: 88px 88px;
  -webkit-mask-image: radial-gradient(70% 60% at 50% 40%, #000, transparent 85%);
  mask-image: radial-gradient(70% 60% at 50% 40%, #000, transparent 85%);
  opacity: .6;
  pointer-events: none;
}

.crm-proof__intro { max-width: 760px; }

.crm-proof__title {
  margin-block: var(--ds-space-sm) var(--ds-space-md);
  color: var(--ds-color-on-dark);
}

.crm-proof__lead {
  color: var(--ds-color-on-dark-muted);
  font-size: var(--ds-text-body-lg-size);
  line-height: var(--ds-text-body-lg-line);
}

/* --- 數據 --- */
.crm-proof__stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--ds-space-2xl) var(--ds-space-xl);
  margin-top: clamp(var(--ds-space-xl), 4vw, var(--ds-space-2xl));
  list-style: none;
}

.crm-proof__stat { position: relative; padding-top: var(--ds-space-lg); }

.crm-proof__rule {
  position: absolute;
  inset: 0 0 auto;
  height: 1px;
  background: linear-gradient(90deg, var(--ds-color-cyan), var(--ds-color-on-dark-hairline) 45%);
  transform-origin: left center;
}

.crm-proof__value { display: flex; align-items: baseline; gap: .12em; }

.crm-proof__number {
  font-size: clamp(48px, 6.2vw, 96px);
  line-height: 1;
  font-weight: var(--ds-weight-bold);
  letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
  background: linear-gradient(120deg, var(--ds-color-on-dark) 35%, var(--ds-color-cyan));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.crm-proof__unit {
  color: var(--ds-color-on-dark-strong);
  font-size: clamp(18px, 1.8vw, 26px);
  font-weight: var(--ds-weight-semibold);
}

.crm-proof__label {
  margin-top: var(--ds-space-sm);
  color: var(--ds-color-on-dark-muted);
  font-size: var(--ds-text-body-md-size);
  line-height: var(--ds-text-body-md-line);
}

/* --- 客戶 --- */
.crm-proof__clients-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--ds-space-xs) var(--ds-space-lg);
  margin-top: clamp(var(--ds-space-2xl), 5vw, var(--ds-space-3xl));
  padding-top: var(--ds-space-lg);
  border-top: 1px solid var(--ds-color-on-dark-hairline);
}

.crm-proof__clients-title {
  color: var(--ds-color-on-dark);
  font-size: var(--ds-text-headline-sm-size);
  line-height: var(--ds-text-headline-sm-line);
  font-weight: var(--ds-weight-semibold);
}

.crm-proof__clients-note { color: var(--ds-color-on-dark-muted); font-size: var(--ds-text-body-sm-size); }

.crm-proof__rows {
  --crm-client-size: clamp(20px, 2.4vw, 34px);
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  column-gap: var(--ds-space-xl);
  row-gap: var(--ds-space-xs);
  margin-top: var(--ds-space-md);
}

/* 分類與跑馬燈同一列；兩列共用欄寬，跑馬燈起點對齊 */
.crm-proof__row {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: subgrid;
  align-items: center;
  min-width: 0;
}

.crm-proof__row-label {
  color: var(--ds-color-cyan);
  font-size: var(--crm-client-size);
  line-height: 1.2;
  font-weight: var(--ds-weight-semibold);
  white-space: nowrap;
}

.crm-marquee {
  --crm-marquee-gap: clamp(var(--ds-space-lg), 3vw, var(--ds-space-2xl));
  display: flex;
  min-width: 0;
  overflow: hidden;
  padding-block: var(--ds-space-xs);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}

.crm-marquee__track {
  display: flex;
  flex: none;
  align-items: center;
  gap: var(--crm-marquee-gap);
  padding-right: var(--crm-marquee-gap);
  list-style: none;
  animation: crm-marquee 48s linear infinite;
}

.crm-marquee--reverse .crm-marquee__track { animation-direction: reverse; animation-duration: 56s; }
.crm-marquee:hover .crm-marquee__track { animation-play-state: paused; }

@keyframes crm-marquee { to { transform: translateX(-100%); } }

.crm-marquee__item {
  display: inline-flex;
  align-items: center;
  gap: var(--ds-space-xs);
  color: var(--ds-color-on-dark);
  font-size: var(--crm-client-size);
  line-height: 1.2;
  font-weight: var(--ds-weight-semibold);
  letter-spacing: .02em;
  white-space: nowrap;
}

.crm-marquee--reverse .crm-marquee__item { color: var(--ds-color-on-dark-strong); }

/* 名稱之間的分隔點 */
.crm-marquee__item::before {
  content: "";
  flex: none;
  width: 6px;
  height: 6px;
  margin-right: calc(var(--crm-marquee-gap) / 2 - 3px);
  margin-left: calc(var(--crm-marquee-gap) / -2 - 3px);
  border-radius: var(--ds-radius-full);
  background: var(--ds-color-cyan);
  opacity: .7;
}

.crm-proof__footnote {
  margin-top: var(--ds-space-md);
  color: var(--ds-color-on-dark-muted);
  font-size: var(--ds-text-caption-size);
  line-height: var(--ds-text-caption-line);
}

/* 動態起始畫格：只在 JS 確認可播放動態後才隱藏 */
.crm-proof.is-motion [data-proof-in] { opacity: 0; }
.crm-proof.is-motion [data-proof-split] { visibility: hidden; }
.crm-proof.is-motion [data-proof-rule] { transform: scaleX(0); }

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

@media (prefers-reduced-motion: reduce) {
  .crm-proof__row { align-items: start; }
  .crm-marquee { flex-wrap: wrap; -webkit-mask-image: none; mask-image: none; }
  .crm-marquee__track { flex-wrap: wrap; flex: 1 1 100%; gap: var(--ds-space-xs) var(--ds-space-lg); padding-right: 0; animation: none; }
  .crm-marquee__track[aria-hidden="true"] { display: none; }
  .crm-marquee__item::before { display: none; }
}

/* =============================================================================
   4. 方案價格——四張卡並排，≥1024px 用同一個 grid／subgrid：標題列、價格
   列、買斷列、項目列分別對齊同一條基準線，卡片內容長短不一也不會跳動；
   兩兩一組的圓角膠囊橫條（來客分析基礎版／銷控完整版）各自橫跨兩欄，直接
   疊在對應的兩張卡片上方。<1024px 退回一般 auto-flow 2 欄／1 欄堆疊，不
   用 subgrid（版面已經不是「四張並排」，逐卡對齊的意義不大）。
   ============================================================================= */
.crm-plans {
  background: url("../assets/images/shared/dot-bg.webp") top center / 100% auto no-repeat;
  padding-block: clamp(var(--ds-space-2xl), 8vw, var(--ds-space-4xl));
}

.crm-plans .crm-section-intro { margin-inline: auto; text-align: center; }

/* 價格表上方的洽詢提示：方案不列價格，改由專人報價 */
.crm-plans__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-primary-wash);
  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;
}

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

.crm-plans__contact-icon .ds-icon { font-size: 20px; }

.crm-plans__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--ds-space-lg);
}

.crm-plans__group-label {
  grid-column: 1 / -1;
  margin: 0;
  padding: var(--ds-space-sm) var(--ds-space-lg);
  border-radius: var(--ds-radius-full);
  background: var(--ds-color-secondary-wash);
  color: var(--ds-color-secondary);
  font-size: var(--ds-text-body-sm-size);
  font-weight: var(--ds-weight-semibold);
  text-align: center;
}

.crm-plans__card {
  justify-content: stretch;
  gap: var(--ds-space-md);
  border: var(--ds-border-width-emphasis) solid transparent;
}

.crm-plans__card:hover,
.crm-plans__card.is-hover {
  border-color: var(--ds-color-cyan);
  box-shadow: var(--ds-shadow-cyan);
}

.crm-plans__scope { margin-bottom: 0; }

/* MD3 風格項目符號：填色圓底＋ check 圖示，取代純色點 */
.crm-plans__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  align-content: start;
  gap: var(--ds-space-sm);
}

.crm-plans__list li {
  display: flex;
  align-items: center;
  gap: var(--ds-space-sm);
  color: var(--ds-color-text-secondary);
  font-size: var(--ds-text-body-sm-size);
  line-height: var(--ds-text-body-sm-line);
}

.crm-plans__check {
  display: inline-grid;
  place-items: center;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  border-radius: var(--ds-radius-full);
  background: var(--ds-color-primary);
  color: var(--ds-color-on-primary);
  font-size: 14px;
}

/* 四個方案共有的基礎功能（來客管理／報表中心／權限設定／修改密碼）用淺色
   圖示，跟企業版才有的功能做出區隔 */
.crm-plans__check--light {
  background: var(--ds-color-primary-wash);
  color: var(--ds-color-primary);
}

.crm-plans__footnote {
  margin-top: var(--ds-space-xl);
  color: var(--ds-color-text-muted);
  font-size: var(--ds-text-caption-size);
  line-height: var(--ds-text-caption-line);
  text-align: center;
}

/* ≥1024px：四欄並排，卡片改用 subgrid 共用列高——標題／項目兩列分別跟其他
   卡片對齊，項目再多也不會把下面的內容往下推擠到不對齊 */
@media (min-width: 1024px) {
  .crm-plans__grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-template-rows: auto auto auto;
  }

  .crm-plans__group-label:nth-of-type(1) { grid-column: 1 / 3; }
  .crm-plans__group-label:nth-of-type(2) { grid-column: 3 / 5; }
  .crm-plans__group-label { grid-row: 1; }

  .crm-plans__card {
    grid-row: 2 / span 2;
    display: grid;
    grid-template-rows: subgrid;
  }

  .crm-plans__card:nth-of-type(1) { grid-column: 1; }
  .crm-plans__card:nth-of-type(2) { grid-column: 2; }
  .crm-plans__card:nth-of-type(3) { grid-column: 3; }
  .crm-plans__card:nth-of-type(4) { grid-column: 4; }
}

@media (max-width: 639px) {
  .crm-plans__grid { grid-template-columns: 1fr; }
  .crm-plans__group-label { grid-column: 1 / -1; }
}

/* =============================================================================
   5. Final CTA — 純文字置中，背景用 surface-inner 底色＋ cta-bg.webp 靠下
   對齊、滿版寬度收尾
   ============================================================================= */
.crm-cta-section {
  background: var(--ds-color-surface-inner) 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));
}

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

/* 標題不跟著 640px 的內文欄寬收窄，給足寬度讓一行顯示完 */
.crm-cta__title {
  width: 100%;
  margin-block: var(--ds-space-sm) var(--ds-space-md);
}

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

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

/* =============================================================================
   響應式
   ============================================================================= */
@media (max-width: 1023px) {
  .crm-advantages__panel { grid-template-columns: minmax(220px, 1fr) minmax(240px, 1fr); }
}

@media (max-width: 639px) {
  .crm-advantages__panel { grid-template-columns: 1fr; }
  .crm-advantages__body { min-height: 0; }
  .crm-advantages__body h3 { white-space: normal; }
  .crm-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-crm/crm-banner.webp");
  }
  .crm-hero__content { max-width: none; }
}

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

  .crm-pain .crm-section-intro > h2.ds-title-lg,
  .crm-advantages .crm-section-intro > h2.ds-title-lg,
  .crm-plans .crm-section-intro > h2.ds-title-lg,
  .crm-cta > h2.ds-title-lg {
    font-size: min(var(--ds-text-headline-lg-size), 4cqi);
    white-space: nowrap;
  }

  .crm-pain .crm-section-intro > .ds-lead,
  .crm-advantages .crm-section-intro > .ds-lead,
  .crm-plans .crm-section-intro > .ds-lead {
    max-width: 640px;
    margin-inline: auto;
  }

  .crm-pain .crm-section-intro > h2 br,
  .crm-advantages .crm-section-intro > h2 br,
  .crm-plans .crm-section-intro > h2 br,
  .crm-cta > h2 br { display: none; }
}