/* =============================================================================
   aais-platform.css — 智驗宅 AI 數位營建平台
   七個區塊：Banner → 現況 → AI 數位員工 → 報修驗屋系統化 → 工程履歷 → 導入方式 → CTA。
   視覺主軸「一戶一履歷」：首屏以戶別進度插畫展開；AI 區負責分工（卡片）、報修驗屋區負責
   流程（步驟線＋對話／系統畫面）、工程履歷區負責資料依據（圖文＋深色資料關聯圖）。
   僅供 products/aais-platform.php 使用；元件取自 design-system/components.css，
   本檔只負責版面、頁面專屬的示意圖與動態初始狀態。
   動態初始狀態一律掛在 body.has-motion 底下（由 js/aais-platform.js 在 GSAP 可用
   且未偏好減少動態時加上），沒有 JavaScript 時內容維持完整可見。
   ============================================================================= */

.plt-page {
  --ds-font-sans: "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", system-ui, sans-serif;
  --plt-section-space: clamp(var(--ds-space-3xl), 9vw, var(--ds-space-5xl));
  --plt-header: var(--header-height, var(--ds-navbar-height));
  --plt-subnav: 56px;
  --plt-sticky-top: calc(var(--plt-header) + var(--plt-subnav) + var(--ds-space-xl));
  font-family: var(--ds-font-sans);
  background: var(--ds-color-page);
}

.plt-page main [id] { scroll-margin-top: calc(var(--plt-header) + var(--plt-subnav) + var(--ds-space-lg)); }

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

/* 中文標題依標點分句，避免詞中斷行 */
.plt-phrase { display: inline-block; }

.plt-section-intro { max-width: 720px; margin-bottom: clamp(var(--ds-space-2xl), 6vw, var(--ds-space-3xl)); }
.plt-section-intro h2 { margin-block: var(--ds-space-md); }
.plt-section-intro--center { margin-inline: auto; text-align: center; }
.plt-section-intro--center .ds-lead { max-width: 640px; margin-inline: auto; }

.plt-section-intro--split {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: var(--ds-space-xl) var(--ds-space-3xl);
  align-items: end;
  max-width: none;
}

.plt-section-intro--split h2 { margin-bottom: 0; }

/* =============================================================================
   1. Banner
   ============================================================================= */
.plt-hero {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding-top: calc(var(--plt-header) + clamp(var(--ds-space-xl), 4vw, var(--ds-space-3xl)));
  padding-bottom: clamp(var(--ds-space-2xl), 6vw, var(--ds-space-3xl));
  background:
    radial-gradient(60% 70% at 88% 18%, var(--ds-color-primary-wash) 0%, transparent 70%),
    radial-gradient(40% 50% at 8% 92%, var(--ds-color-secondary-wash) 0%, transparent 70%),
    var(--ds-color-page);
}

/* 圖紙格線：呼應施工圖面，只在右上方淡出 */
.plt-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image:
    linear-gradient(var(--ds-color-border) 1px, transparent 1px),
    linear-gradient(90deg, var(--ds-color-border) 1px, transparent 1px);
  background-size: 48px 48px;
  opacity: .55;
  -webkit-mask-image: radial-gradient(70% 80% at 80% 30%, #000 0%, transparent 75%);
  mask-image: radial-gradient(70% 80% at 80% 30%, #000 0%, transparent 75%);
  pointer-events: none;
}

.plt-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 11fr) minmax(0, 13fr);
  gap: var(--ds-space-2xl) clamp(var(--ds-space-xl), 4vw, var(--ds-space-3xl));
  align-items: center;
}

/* 標題固定兩行：字級依文字欄寬換算（第二行 12 字），上限為 Hero 字級 */
.plt-hero__content { container-type: inline-size; }

.plt-hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--ds-space-xs);
}

.plt-hero__eyebrow::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: var(--ds-radius-full);
  background: var(--ds-color-primary);
  box-shadow: 0 0 0 4px var(--ds-color-primary-30);
}

.plt-hero__title {
  margin-block: var(--ds-space-md) var(--ds-space-lg);
  font-size: min(var(--ds-text-display-hero-size), 7.9cqi);
  line-height: 1.24;
  white-space: nowrap;
}

/* 逐行遮罩升起：外層裁切，內層位移 */
.plt-line {
  display: block;
  overflow: hidden;
  padding-bottom: .06em;
}

.plt-line__inner { display: inline-block; }

.plt-hero__lead { max-width: 34em; }

.plt-hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ds-space-md);
  margin-top: var(--ds-space-xl);
}

/* 寬幅去背插畫：向左伸入欄間距、向右延伸到接近視窗邊緣（--plt-bleed 為容器外側距離） */
.plt-hero__visual {
  --plt-bleed: calc((100vw - min(100vw - clamp(32px, 8vw, 64px), var(--ds-container-max))) / 2);
  position: relative;
  isolation: isolate;
  width: min(calc(100% + var(--plt-bleed) + var(--ds-space-lg) - var(--ds-space-md)), 1120px);
  margin: 0 0 0 calc(var(--ds-space-lg) * -1);
  padding-block: var(--ds-space-lg) var(--ds-space-2xl);
}

/* 底部光暈：托住插畫，傾斜時往反方向位移 */
.plt-hero__visual::before {
  content: "";
  position: absolute;
  inset: 18% 4% 6%;
  z-index: -2;
  border-radius: var(--ds-radius-full);
  background:
    radial-gradient(closest-side, var(--ds-color-primary-30), transparent),
    radial-gradient(40% 60% at 78% 50%, var(--ds-color-secondary-wash), transparent);
  filter: blur(36px);
  pointer-events: none;
}

.plt-hero__shadow {
  position: absolute;
  left: 10%;
  right: 30%;
  bottom: var(--ds-space-lg);
  z-index: -1;
  height: 12%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(15, 23, 42, .22), transparent);
  filter: blur(10px);
  pointer-events: none;
}

.plt-hero__tilt {
  transform-origin: 50% 55%;
  will-change: transform;
}

/* 待機時極輕微的上下浮動，與滑鼠傾斜分在不同層，互不覆蓋 */
@keyframes plt-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-8px); }
}

.plt-hero__float {
  position: relative;
  animation: plt-float 7s ease-in-out infinite;
}

.plt-hero__image {
  display: block;
  width: 100%;
  height: auto;
}

/* 反光：只出現在插畫的不透明處（以插畫本身作為遮罩），位置跟隨滑鼠 */
.plt-hero__glare {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at var(--glare-x, 30%) var(--glare-y, 20%), rgba(255, 255, 255, .55), rgba(255, 255, 255, 0) 42%);
  mix-blend-mode: soft-light;
  opacity: 0;
  -webkit-mask: url("../assets/images/aais-platform/plt-hero__image-960.webp") center / 100% 100% no-repeat;
  mask: url("../assets/images/aais-platform/plt-hero__image-960.webp") center / 100% 100% no-repeat;
  transition: opacity var(--ds-duration-media) var(--ds-ease);
  pointer-events: none;
}

.plt-hero__visual.is-tilting .plt-hero__glare { opacity: 1; }

.plt-hero__note {
  position: absolute;
  right: 6%;
  bottom: var(--ds-space-md);
  padding-inline: var(--ds-space-sm);
  font-size: var(--ds-text-caption-size);
}

.has-motion [data-hero-in] { opacity: 0; }

/* =============================================================================
   頁內導覽（固定在主導覽下方）
   ============================================================================= */
.plt-subnav {
  position: sticky;
  top: var(--plt-header);
  z-index: 40;
  border-block: var(--ds-border-width) solid var(--ds-color-border);
  background: rgba(255, 255, 255, .9);
  -webkit-backdrop-filter: blur(12px) saturate(1.4);
  backdrop-filter: blur(12px) saturate(1.4);
}

.plt-subnav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ds-space-lg);
  height: var(--plt-subnav);
}

.plt-subnav__name {
  color: var(--ds-color-text-primary);
  font-size: var(--ds-text-body-sm-size);
  font-weight: var(--ds-weight-semibold);
  white-space: nowrap;
}

.plt-subnav__list {
  position: relative;
  display: flex;
  align-items: stretch;
  gap: clamp(var(--ds-space-md), 3vw, var(--ds-space-xl));
  height: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}

.plt-subnav__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  height: 100%;
  color: var(--ds-color-text-secondary);
  font-size: var(--ds-text-nav-label-size);
  line-height: var(--ds-text-nav-label-line);
  font-weight: var(--ds-text-nav-label-weight);
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--ds-duration-fast) var(--ds-ease);
}

.plt-subnav__link::after {
  content: "";
  position: absolute;
  inset: auto 0 -1px;
  height: 2px;
  background: var(--ds-color-secondary);
  transform: scaleX(0);
  transition: transform var(--ds-duration-slow) var(--ds-ease);
}

.plt-subnav__link:hover { color: var(--ds-color-action-ink); }

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

.plt-subnav__link[aria-current="true"] {
  color: var(--ds-color-action-ink);
  font-weight: var(--ds-weight-semibold);
}

.plt-subnav__link[aria-current="true"]::after { transform: scaleX(1); }

/* =============================================================================
   2. 現況：左側標題與說明，右側 Expanded Cards
   四張高窄卡片並排，滑鼠移入或鍵盤聚焦的卡片撐開成完整卡片、其餘往旁收窄；
   說明文字固定以展開寬度排版，撐開過程中不會重新換行。最後一張展開的卡片維持
   展開（js/aais-platform.js 切換 .is-active）；無 JavaScript 時以 :hover／:focus-within
   退回同樣效果。≤1024px 改為直向堆疊、全部展開，不依賴滑鼠移入。
   ============================================================================= */
.plt-pain { padding-block: var(--plt-section-space); }

.plt-pain__layout {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
  gap: var(--ds-space-2xl) clamp(var(--ds-space-2xl), 6vw, var(--ds-space-4xl));
  align-items: stretch;
}

/* 標題單行：字級依欄寬換算（9 字），上限為區塊標題字級。
   左欄與右側卡片列等高：標題組靠上，團隊切換項目靠下 */
.plt-pain__intro {
  container-type: inline-size;
  display: flex;
  flex-direction: column;
}

.plt-pain__nav { margin-top: auto; padding-top: var(--ds-space-xl); }

.plt-pain__title {
  margin-block: var(--ds-space-md);
  font-size: min(var(--ds-text-headline-lg-size), 10.4cqi);
  white-space: nowrap;
}

.plt-pain__hint {
  display: flex;
  align-items: center;
  gap: var(--ds-space-xs);
  margin-bottom: var(--ds-space-sm);
  color: var(--ds-color-text-muted);
  font-size: var(--ds-text-body-sm-size);
  line-height: var(--ds-text-body-sm-line);
}

.plt-pain__hint .ds-icon { color: var(--ds-color-primary); }

.plt-pain__tabs {
  margin: 0;
  padding: 0;
  list-style: none;
  border-bottom: var(--ds-border-width) solid var(--ds-color-border);
}

.plt-pain__tab {
  position: relative;
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) auto;
  align-items: center;
  width: 100%;
  padding: var(--ds-space-sm) 0;
  border: 0;
  border-top: var(--ds-border-width) solid var(--ds-color-border);
  background: none;
  color: var(--ds-color-text-secondary);
  font: inherit;
  font-size: var(--ds-text-body-md-size);
  line-height: var(--ds-text-body-md-line);
  text-align: left;
  cursor: pointer;
  transition: color var(--ds-duration-slow) var(--ds-ease);
}

/* 目前項目：上緣品牌色線由左延伸 */
.plt-pain__tab::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, var(--ds-color-primary), var(--ds-color-secondary));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .6s cubic-bezier(.22, 1, .36, 1);
}

.plt-pain__tab:hover { color: var(--ds-color-text-primary); }

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

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

.plt-pain__tab-label { font-weight: var(--ds-weight-medium); }

.plt-pain__tab-role {
  padding: 0 var(--ds-space-xs);
  border-radius: var(--ds-radius-full);
  color: var(--ds-color-text-muted);
  font-size: var(--ds-text-caption-size);
  line-height: var(--ds-text-caption-line);
  transition: background-color var(--ds-duration-slow) var(--ds-ease), color var(--ds-duration-slow) var(--ds-ease);
}

.plt-pain__tab.is-active { color: var(--ds-color-action-ink); }
.plt-pain__tab.is-active::before { transform: scaleX(1); }
.plt-pain__tab.is-active .plt-pain__tab-index { color: var(--ds-color-primary); }
.plt-pain__tab.is-active .plt-pain__tab-label { font-weight: var(--ds-weight-semibold); }
.plt-pain__tab.is-active .plt-pain__tab-role { background: var(--ds-color-primary-wash); color: var(--ds-color-primary-dark); }

.plt-pain__rail {
  --plt-card-open: 4.2;
  --plt-card-text: 288px;
  display: flex;
  gap: var(--ds-space-sm);
  height: 100%;
  min-height: clamp(440px, 34vw, 480px);
  margin: 0;
  padding: 0;
  list-style: none;
}

.plt-pain-card {
  --plt-card-tint: var(--ds-color-primary-wash);
  --plt-card-accent: var(--ds-color-primary);
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  overflow: hidden;
  border: var(--ds-border-width) solid var(--ds-color-border);
  border-radius: var(--ds-radius-lg);
  background:
    radial-gradient(120% 70% at 50% 100%, var(--plt-card-tint), transparent 70%),
    linear-gradient(180deg, var(--ds-color-card), var(--ds-color-surface-inner));
  cursor: pointer;
  transition:
    flex-grow .8s cubic-bezier(.22, 1, .36, 1),
    border-color var(--ds-duration-slow) var(--ds-ease),
    box-shadow var(--ds-duration-slow) var(--ds-ease);
}

.plt-pain-card--inspection { --plt-card-tint: var(--ds-color-secondary-wash); --plt-card-accent: var(--ds-color-secondary); }
.plt-pain-card--handover { --plt-card-tint: var(--ds-color-primary-wash); --plt-card-accent: var(--ds-color-primary-dark); }
.plt-pain-card--warranty { --plt-card-tint: var(--ds-color-secondary-wash); --plt-card-accent: var(--ds-color-secondary); }

.plt-pain-card:focus-visible {
  outline: none;
  box-shadow: var(--ds-shadow-focus);
}

/* 展開狀態：JS 的 .is-active，或（無 JS 時）滑鼠／焦點所在的卡片；
   有其他卡片被指到時，原本展開的卡片讓位 */
.plt-pain-card.is-active,
.plt-pain__rail:not([data-pain-ready]) .plt-pain-card:is(:hover, :focus-within) {
  flex-grow: var(--plt-card-open);
  border-color: var(--plt-card-accent);
  box-shadow: var(--ds-shadow-panel);
}

.plt-pain__rail:not([data-pain-ready]):has(.plt-pain-card:is(:hover, :focus-within)) .plt-pain-card.is-active:not(:hover, :focus-within) {
  flex-grow: 1;
  border-color: var(--ds-color-border);
  box-shadow: none;
}

.plt-pain-card__index {
  position: absolute;
  top: var(--ds-space-lg);
  left: var(--ds-space-lg);
  z-index: 2;
  color: var(--plt-card-accent);
  font-size: var(--ds-text-headline-md-size);
  line-height: 1;
  font-weight: var(--ds-weight-bold);
  font-variant-numeric: tabular-nums;
  letter-spacing: var(--ds-tracking-sub);
}

/* 收合時的直排短標 */
.plt-pain-card__label {
  position: absolute;
  top: calc(var(--ds-space-lg) + 40px);
  left: var(--ds-space-lg);
  z-index: 2;
  color: var(--ds-color-text-primary);
  font-size: var(--ds-text-body-md-size);
  font-weight: var(--ds-weight-semibold);
  letter-spacing: .2em;
  writing-mode: vertical-rl;
  transition: opacity .4s var(--ds-ease), transform .6s cubic-bezier(.22, 1, .36, 1);
}

/* 人像：收合時置中縮小（避開直排短標）、降低彩度；展開時靠右、恢復原尺寸與全彩 */
.plt-pain-card__portrait {
  position: absolute;
  bottom: 0;
  left: 50%;
  z-index: 1;
  width: auto;
  height: 80%;
  max-width: none;
  transform: translateX(-50%) scale(.7);
  transform-origin: 50% 100%;
  filter: saturate(.25);
  opacity: .82;
  transition:
    left .8s cubic-bezier(.22, 1, .36, 1),
    transform .8s cubic-bezier(.22, 1, .36, 1),
    filter .6s var(--ds-ease),
    opacity .6s var(--ds-ease);
  pointer-events: none;
}

/* 說明：固定寬度，展開完成後才淡入，避免撐開過程中換行跳動 */
.plt-pain-card__body {
  position: absolute;
  left: var(--ds-space-md);
  bottom: var(--ds-space-md);
  z-index: 3;
  display: grid;
  gap: var(--ds-space-xs);
  width: var(--plt-card-text);
  padding: var(--ds-space-lg);
  border: var(--ds-border-width) solid var(--ds-color-hairline);
  border-radius: var(--ds-radius-lg);
  background: rgba(255, 255, 255, .86);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  backdrop-filter: blur(14px) saturate(1.4);
  box-shadow: var(--ds-shadow-panel);
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .35s var(--ds-ease), transform .35s var(--ds-ease);
  pointer-events: none;
}

.plt-pain-card__role {
  justify-self: start;
  padding: 2px var(--ds-space-sm);
  border-radius: var(--ds-radius-full);
  background: var(--plt-card-tint);
  color: var(--plt-card-accent);
  font-size: var(--ds-text-caption-size);
  line-height: var(--ds-text-caption-line);
  font-weight: var(--ds-weight-semibold);
}

.plt-pain-card__text {
  color: var(--ds-color-text-secondary);
  font-size: var(--ds-text-body-sm-size);
  line-height: var(--ds-text-body-sm-line);
}

.plt-pain-card.is-active .plt-pain-card__label,
.plt-pain__rail:not([data-pain-ready]) .plt-pain-card:is(:hover, :focus-within) .plt-pain-card__label {
  opacity: 0;
  transform: translateY(-8px);
}

.plt-pain-card.is-active .plt-pain-card__portrait,
.plt-pain__rail:not([data-pain-ready]) .plt-pain-card:is(:hover, :focus-within) .plt-pain-card__portrait {
  left: calc(100% + 4%);
  transform: translateX(-100%) scale(1);
  filter: none;
  opacity: 1;
}

.plt-pain-card.is-active .plt-pain-card__body,
.plt-pain__rail:not([data-pain-ready]) .plt-pain-card:is(:hover, :focus-within) .plt-pain-card__body {
  opacity: 1;
  transform: none;
  transition-delay: .32s;
  pointer-events: auto;
}

.plt-pain__rail:not([data-pain-ready]):has(.plt-pain-card:is(:hover, :focus-within)) .plt-pain-card.is-active:not(:hover, :focus-within) .plt-pain-card__body { opacity: 0; transition-delay: 0s; }
.plt-pain__rail:not([data-pain-ready]):has(.plt-pain-card:is(:hover, :focus-within)) .plt-pain-card.is-active:not(:hover, :focus-within) .plt-pain-card__label { opacity: 1; transform: none; }

.plt-pain__rail:not([data-pain-ready]):has(.plt-pain-card:is(:hover, :focus-within)) .plt-pain-card.is-active:not(:hover, :focus-within) .plt-pain-card__portrait {
  left: 50%;
  transform: translateX(-50%) scale(.7);
  filter: saturate(.25);
  opacity: .82;
}

/* 現況小結語：由問題轉向導入後的改變，以一條由灰轉品牌色的細線承接上方卡片 */
.plt-pivot {
  position: relative;
  max-width: 960px;
  margin: clamp(var(--ds-space-3xl), 7vw, var(--ds-space-4xl)) auto 0;
  padding-top: calc(var(--ds-space-3xl) + var(--ds-space-md));
  text-align: center;
}

.plt-pivot::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 2px;
  height: var(--ds-space-3xl);
  border-radius: var(--ds-radius-full);
  background: linear-gradient(var(--ds-color-border), var(--ds-color-primary));
  transform: translateX(-50%);
  transform-origin: top;
}

.plt-pivot__kicker {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: var(--ds-space-xxs) var(--ds-space-md);
  border-radius: var(--ds-radius-full);
  background: var(--ds-color-primary-wash);
  color: var(--ds-color-primary-dark);
  font-size: var(--ds-text-label-sm-size);
  line-height: var(--ds-text-label-sm-line);
  font-weight: var(--ds-weight-semibold);
  box-shadow: 0 0 0 6px var(--ds-color-page);
}

.plt-pivot__kicker .ds-icon { color: var(--ds-color-primary); }

/* 淡色底區塊內：標籤外圈改用區塊底色 */
.plt-pivot--on-muted .plt-pivot__kicker { box-shadow: 0 0 0 6px var(--ds-color-surface-inner); }

.plt-pivot__text {
  margin-top: var(--ds-space-lg);
  color: var(--ds-color-action-ink);
  font-size: clamp(20px, 1rem + 1.3vw, 30px);
  line-height: 1.6;
  font-weight: var(--ds-weight-semibold);
  letter-spacing: var(--ds-tracking-sub);
}

.plt-pivot__line { display: block; }

.plt-pivot__line--accent .plt-phrase {
  background: linear-gradient(110deg, var(--ds-color-primary), var(--ds-color-secondary));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.has-motion .plt-pivot::before {
  transform: translateX(-50%) scaleY(0);
  transition: transform .7s cubic-bezier(.65, 0, .35, 1);
}

.has-motion .plt-pivot.is-drawn::before { transform: translateX(-50%) scaleY(1); }
.has-motion [data-pivot-kicker] { opacity: 0; }


/* =============================================================================
   3. AI 數位員工：上方五個職務切換列，下方舞台一次展示一位專員
   （左側職務介紹、右側工作內容示意）。所有面板疊在同一格，高度取最高者，切換時
   版面不跳動。無 JavaScript 時隱藏切換列、五位專員依序完整顯示。
   ============================================================================= */
.plt-ai {
  position: relative;
  padding-block: var(--plt-section-space);
  background: var(--ds-color-surface-inner);
  overflow: clip;
}

.plt-ai::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(var(--ds-color-surface-strong) 1px, transparent 1px),
    linear-gradient(90deg, var(--ds-color-surface-strong) 1px, transparent 1px);
  background-size: 64px 64px;
  opacity: .5;
  -webkit-mask-image: linear-gradient(to bottom, #000, transparent 45%);
  mask-image: linear-gradient(to bottom, #000, transparent 45%);
  pointer-events: none;
}

.plt-ai > .plt-container { position: relative; }

.plt-team { position: relative; }

/* 切換列：選取狀態用 Secondary（DESIGN.md Tabs 規則），底線以單一指示條滑動 */
.plt-team__picker {
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--ds-space-md);
  border-bottom: var(--ds-border-width) solid var(--ds-color-border);
}

/* 五位專員各一種識別色（深色系，避開淺藍）：未選取為淡色底＋彩色圖示，選取後實心＋白色圖示 */
.plt-team__tab--service { --tab-tone: var(--ds-color-primary-hover); }
.plt-team__tab--repair { --tab-tone: var(--ds-color-coral); }
.plt-team__tab--document { --tab-tone: var(--ds-color-secondary); }
.plt-team__tab--analysis { --tab-tone: var(--ds-color-primary-dark); }
.plt-team__tab--assistant { --tab-tone: var(--ds-color-accent-deep); }

/* 圖示在左、名稱與用途在右，整組在分頁內置中 */
.plt-team__tab {
  display: grid;
  grid-template-columns: auto auto;
  justify-content: center;
  align-items: center;
  column-gap: var(--ds-space-sm);
  min-width: 0;
  padding: var(--ds-space-md) 0 var(--ds-space-lg);
  border: 0;
  background: none;
  color: var(--ds-color-text-secondary);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: color var(--ds-duration-slow) var(--ds-ease);
}

.plt-team__tab-icon {
  grid-row: span 2;
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: var(--ds-radius-lg);
  background: color-mix(in srgb, var(--tab-tone) 12%, var(--ds-color-card));
  color: var(--tab-tone);
  transition:
    background-color var(--ds-duration-slow) var(--ds-ease),
    color var(--ds-duration-slow) var(--ds-ease),
    box-shadow var(--ds-duration-slow) var(--ds-ease),
    transform var(--ds-duration-slow) var(--ds-ease);
}

.plt-team__tab-icon .ds-icon { font-size: 24px; }

.plt-team__tab:hover { color: var(--ds-color-text-primary); }
.plt-team__tab:hover .plt-team__tab-icon { transform: translateY(-2px); }

.plt-team__tab[aria-selected="true"] .plt-team__tab-icon {
  background: var(--tab-tone);
  color: var(--ds-color-on-primary);
  box-shadow: 0 8px 20px -8px var(--tab-tone);
}

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

.plt-team__tab-name {
  align-self: end;
  white-space: nowrap;
  font-size: var(--ds-text-body-md-size);
  line-height: var(--ds-text-cta-line);
  font-weight: var(--ds-weight-semibold);
}

.plt-team__tab-duty {
  align-self: start;
  white-space: nowrap;
  font-size: var(--ds-text-label-sm-size);
  line-height: var(--ds-text-label-sm-line);
}

.plt-team__tab[aria-selected="true"] { color: var(--ds-color-secondary); }

.plt-team__indicator {
  position: absolute;
  bottom: -1px;
  left: 0;
  width: var(--indicator-w, 0);
  height: 3px;
  border-radius: var(--ds-radius-full);
  background: var(--ds-color-secondary);
  transform: translateX(var(--indicator-x, 0));
  transition: transform .6s cubic-bezier(.22, 1, .36, 1), width .6s cubic-bezier(.22, 1, .36, 1);
}

/* 舞台：白色面板，五位專員疊在同一格 */
.plt-team__stage {
  display: grid;
  margin-top: var(--ds-space-xl);
  padding: clamp(var(--ds-space-lg), 4vw, var(--ds-space-2xl));
  overflow: hidden;
}

.plt-specialist {
  grid-area: 1 / 1;
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: var(--ds-space-xl) clamp(var(--ds-space-xl), 5vw, var(--ds-space-3xl));
  align-items: center;
}

.plt-specialist:focus-visible {
  outline: none;
  box-shadow: var(--ds-shadow-focus);
  border-radius: var(--ds-radius-md);
}

.plt-specialist__en {
  display: flex;
  align-items: center;
  gap: var(--ds-space-sm);
  color: var(--ds-color-primary);
  font-size: var(--ds-text-caption-size);
  line-height: var(--ds-text-caption-line);
  font-weight: var(--ds-weight-semibold);
  letter-spacing: .16em;
}

.plt-specialist__name {
  display: flex;
  align-items: center;
  gap: var(--ds-space-sm);
  margin-block: var(--ds-space-md) var(--ds-space-xs);
  color: var(--ds-color-action-ink);
  font-size: clamp(26px, 1.2rem + 1.2vw, 34px);
  line-height: 1.3;
  font-weight: var(--ds-weight-bold);
  letter-spacing: var(--ds-tracking-headline);
}

.plt-specialist__duty {
  color: var(--ds-color-primary-dark);
  font-size: var(--ds-text-headline-sm-size);
  line-height: var(--ds-text-headline-sm-line);
  font-weight: var(--ds-weight-medium);
}

.plt-specialist__text {
  margin-top: var(--ds-space-md);
  color: var(--ds-color-text-secondary);
}

.plt-specialist__tasks {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ds-space-xs);
  margin: var(--ds-space-lg) 0 0;
  padding: 0;
  list-style: none;
}

.plt-specialist__tasks li {
  padding: 2px var(--ds-space-sm);
  border: var(--ds-border-width) solid var(--ds-color-secondary-wash);
  border-radius: var(--ds-radius-full);
  background: var(--ds-color-secondary-wash);
  color: var(--ds-color-secondary);
  font-size: var(--ds-text-label-sm-size);
  line-height: var(--ds-text-label-sm-line);
  font-weight: var(--ds-weight-medium);
}

/* 工作內容示意：淡色圖紙底，內容以頁面元件語彙繪製 */
.plt-sample {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  min-height: 300px;
  margin: 0;
  padding: var(--ds-space-lg);
  overflow: hidden;
  border-radius: var(--ds-radius-lg);
  background:
    radial-gradient(70% 90% at 100% 100%, var(--ds-color-primary-wash), transparent 70%),
    var(--ds-color-surface-inner);
}

.plt-sample::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image:
    linear-gradient(var(--ds-color-surface-strong) 1px, transparent 1px),
    linear-gradient(90deg, var(--ds-color-surface-strong) 1px, transparent 1px);
  background-size: 24px 24px;
  opacity: .5;
  -webkit-mask-image: linear-gradient(135deg, #000, transparent 70%);
  mask-image: linear-gradient(135deg, #000, transparent 70%);
}

.plt-sample__caption {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--ds-space-xs);
  margin-bottom: var(--ds-space-md);
  color: var(--ds-color-text-muted);
  font-size: var(--ds-text-caption-size);
  line-height: var(--ds-text-caption-line);
}

.plt-sample__caption b {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--ds-color-primary-dark);
  font-weight: var(--ds-weight-semibold);
}

.plt-sample__caption b::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: var(--ds-radius-full);
  background: var(--ds-color-primary);
  box-shadow: 0 0 0 3px var(--ds-color-primary-30);
}

.plt-sample__caption span {
  padding: 0 var(--ds-space-xs);
  border-radius: var(--ds-radius-full);
  background: var(--ds-color-card);
}

.plt-sample__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: center;
}

/* 客服：對話 */
.plt-sample__chat { display: grid; gap: var(--ds-space-xs); max-width: 360px; width: 100%; margin-inline: auto; }

.plt-sample__bubble {
  justify-self: start;
  max-width: 88%;
  padding: var(--ds-space-sm) var(--ds-space-md);
  border-radius: 16px 16px 16px 4px;
  background: var(--ds-color-card);
  color: var(--ds-color-text-primary);
  font-size: var(--ds-text-body-sm-size);
  line-height: var(--ds-text-body-sm-line);
  box-shadow: var(--ds-shadow-sm);
}

.plt-sample__bubble--me {
  justify-self: end;
  margin-bottom: var(--ds-space-xs);
  border-radius: 16px 16px 4px 16px;
  background: var(--ds-color-primary);
  color: var(--ds-color-on-primary);
}

.plt-sample__who,
.plt-sample__status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--ds-color-text-muted);
  font-size: var(--ds-text-caption-size);
  line-height: var(--ds-text-caption-line);
}

.plt-sample__avatar {
  display: inline-grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: var(--ds-radius-full);
  background: var(--ds-color-primary);
  color: var(--ds-color-on-primary);
}

.plt-sample__status { margin-top: var(--ds-space-xs); color: var(--ds-color-success); font-weight: var(--ds-weight-semibold); }

/* 報修：案件卡（略傾斜的紙卡＋章戳） */
.plt-sample__record {
  position: relative;
  width: min(100%, 340px);
  margin-inline: auto;
  padding: var(--ds-space-lg);
  border-radius: var(--ds-radius-md);
  background: var(--ds-color-card);
  box-shadow: 6px 6px 0 var(--ds-color-surface-strong), var(--ds-shadow-md);
  transform: rotate(-2deg);
}

.plt-sample__record-title {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: var(--ds-space-xs);
  color: var(--ds-color-text-primary);
  font-weight: var(--ds-weight-semibold);
}

.plt-sample__record-title .ds-icon { color: var(--ds-color-primary); }

.plt-sample__row {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  gap: var(--ds-space-xs);
  padding-block: var(--ds-space-xs);
  border-top: var(--ds-border-width) solid var(--ds-color-border);
  color: var(--ds-color-text-primary);
  font-size: var(--ds-text-body-sm-size);
  line-height: var(--ds-text-body-sm-line);
}

.plt-sample__row span { color: var(--ds-color-text-muted); }

.plt-sample__stamp {
  position: absolute;
  right: calc(var(--ds-space-md) * -1);
  top: calc(var(--ds-space-md) * -1);
  padding: 4px var(--ds-space-sm);
  border: 2px solid var(--ds-color-secondary);
  border-radius: var(--ds-radius-md);
  background: var(--ds-color-card);
  color: var(--ds-color-secondary);
  font-size: var(--ds-text-label-sm-size);
  font-weight: var(--ds-weight-bold);
  transform: rotate(8deg);
}

/* 驗屋文書：PDF 掃描後拆成三種資料 */
.plt-sample__import { display: grid; justify-items: center; gap: var(--ds-space-sm); }

.plt-sample__file {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--ds-space-xs);
  padding: var(--ds-space-sm) var(--ds-space-lg) var(--ds-space-sm) var(--ds-space-md);
  overflow: hidden;
  border-left: 3px solid var(--ds-color-primary);
  border-radius: var(--ds-radius-md);
  background: var(--ds-color-card);
  color: var(--ds-color-text-primary);
  font-size: var(--ds-text-body-sm-size);
  font-weight: var(--ds-weight-semibold);
  box-shadow: var(--ds-shadow-md);
}

.plt-sample__file .ds-icon { color: var(--ds-color-error); }

.plt-sample__scan {
  position: absolute;
  inset: 0 auto 0 0;
  width: 40%;
  background: linear-gradient(90deg, transparent, var(--ds-color-primary-30), transparent);
  transform: translateX(-100%);
}

.plt-sample__flow {
  width: 2px;
  height: 40px;
  border-radius: var(--ds-radius-full);
  background: linear-gradient(var(--ds-color-primary), var(--ds-color-secondary));
  transform-origin: top;
}

.plt-sample__items {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--ds-space-xs);
  margin: 0;
  padding: 0;
  list-style: none;
}

.plt-sample__items li {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: var(--ds-space-xs) var(--ds-space-sm);
  border-radius: var(--ds-radius-md);
  background: var(--ds-color-card);
  color: var(--ds-color-text-primary);
  font-size: var(--ds-text-body-sm-size);
  box-shadow: var(--ds-shadow-sm);
}

.plt-sample__items .ds-icon { color: var(--ds-color-secondary); }

/* 報表分析：整理單 */
.plt-sample__sheet {
  width: min(100%, 380px);
  margin-inline: auto;
  padding: var(--ds-space-lg);
  border-top: 3px solid var(--ds-color-secondary);
  border-radius: var(--ds-radius-md);
  background: var(--ds-color-card);
  box-shadow: var(--ds-shadow-md);
}

.plt-sample__block + .plt-sample__block {
  margin-top: var(--ds-space-md);
  padding-top: var(--ds-space-md);
  border-top: var(--ds-border-width) solid var(--ds-color-border);
}

.plt-sample__label {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: var(--ds-space-xxs);
  color: var(--ds-color-secondary);
  font-size: var(--ds-text-label-sm-size);
  line-height: var(--ds-text-label-sm-line);
  font-weight: var(--ds-weight-semibold);
}

.plt-sample__text {
  color: var(--ds-color-text-primary);
  font-size: var(--ds-text-body-sm-size);
  line-height: var(--ds-text-body-sm-line);
}

/* 操作助理：問題＋三步引導 */
.plt-sample__guide {
  width: min(100%, 360px);
  margin-inline: auto;
  padding: var(--ds-space-lg);
  border-radius: var(--ds-radius-md);
  background: var(--ds-color-card);
  box-shadow: var(--ds-shadow-md);
}

.plt-sample__question {
  padding-bottom: var(--ds-space-sm);
  border-bottom: var(--ds-border-width) solid var(--ds-color-border);
  color: var(--ds-color-text-primary);
  font-weight: var(--ds-weight-semibold);
}

.plt-sample__steps { margin: var(--ds-space-xs) 0 0; padding: 0; list-style: none; }

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

.plt-sample__steps .ds-icon {
  display: inline-grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: var(--ds-radius-full);
  background: var(--ds-color-primary);
  color: var(--ds-color-on-primary);
}

/* ---- JS 啟用後：只顯示目前專員，切換時淡入並依序帶出示意內容 ---- */
.plt-team:not([data-team-ready]) .plt-team__picker { display: none; }

.plt-team:not([data-team-ready]) .plt-specialist + .plt-specialist {
  grid-area: auto;
  margin-top: var(--ds-space-2xl);
  padding-top: var(--ds-space-2xl);
  border-top: var(--ds-border-width) solid var(--ds-color-border);
}

.plt-team:not([data-team-ready]) .plt-specialist { grid-area: auto; }

.plt-team[data-team-ready] .plt-specialist {
  visibility: hidden;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity .35s var(--ds-ease), transform .35s var(--ds-ease), visibility 0s .35s;
}

.plt-team[data-team-ready] .plt-specialist.is-active {
  visibility: visible;
  opacity: 1;
  transform: none;
  transition: opacity .6s cubic-bezier(.22, 1, .36, 1) .1s, transform .6s cubic-bezier(.22, 1, .36, 1) .1s, visibility 0s;
}

@keyframes plt-step-in {
  from { opacity: 0; transform: translateY(10px) scale(.97); }
  to   { opacity: 1; transform: none; }
}

@keyframes plt-stamp-in {
  0%   { opacity: 0; transform: rotate(8deg) scale(1.8); }
  60%  { opacity: 1; transform: rotate(8deg) scale(.92); }
  100% { opacity: 1; transform: rotate(8deg) scale(1); }
}

@keyframes plt-flow-in { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes plt-scan { to { transform: translateX(260%); } }

.plt-team[data-team-ready] .plt-specialist.is-active [data-step] {
  animation: plt-step-in .5s cubic-bezier(.22, 1, .36, 1) both;
  animation-delay: calc(var(--step, 0) * 220ms + 320ms);
}

.plt-team[data-team-ready] .plt-specialist.is-active .plt-sample__stamp { animation-name: plt-stamp-in; animation-duration: .6s; }
.plt-team[data-team-ready] .plt-specialist.is-active .plt-sample__flow { animation-name: plt-flow-in; }
.plt-team[data-team-ready] .plt-specialist.is-active .plt-sample__scan { animation: plt-scan 1.2s var(--ds-ease) .4s 1 both; }

.plt-team[data-team-ready] .plt-specialist.is-active .plt-specialist__profile > * {
  animation: plt-step-in .6s cubic-bezier(.22, 1, .36, 1) both;
}

.plt-team[data-team-ready] .plt-specialist.is-active .plt-specialist__profile > :nth-child(2) { animation-delay: .06s; }
.plt-team[data-team-ready] .plt-specialist.is-active .plt-specialist__profile > :nth-child(3) { animation-delay: .12s; }
.plt-team[data-team-ready] .plt-specialist.is-active .plt-specialist__profile > :nth-child(4) { animation-delay: .18s; }
.plt-team[data-team-ready] .plt-specialist.is-active .plt-specialist__profile > :nth-child(5) { animation-delay: .24s; }

/* =============================================================================
   4. 報修驗屋系統化：兩組流程（報修：步驟＋對話；驗屋：畫面＋步驟）
   ============================================================================= */
.plt-ops { padding-block: var(--plt-section-space); }

.plt-flowblock {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  gap: var(--ds-space-xl) clamp(var(--ds-space-2xl), 6vw, var(--ds-space-4xl));
  align-items: start;
}

.plt-flowblock + .plt-flowblock {
  margin-top: clamp(var(--ds-space-3xl), 8vw, var(--ds-space-4xl));
  padding-top: clamp(var(--ds-space-3xl), 8vw, var(--ds-space-4xl));
  border-top: var(--ds-border-width) solid var(--ds-color-border);
}

.plt-flowblock--reverse { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); }
.plt-flowblock--reverse .plt-flowblock__visual { order: -1; }

.plt-flowblock__head { margin-bottom: var(--ds-space-xl); }

.plt-flowblock__tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px var(--ds-space-sm);
  border-radius: var(--ds-radius-full);
  background: var(--ds-color-primary-wash);
  color: var(--ds-color-primary-dark);
  font-size: var(--ds-text-label-sm-size);
  line-height: var(--ds-text-label-sm-line);
  font-weight: var(--ds-weight-semibold);
}

.plt-flowblock__tag::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: var(--ds-radius-full);
  background: var(--ds-color-primary);
}

.plt-flowblock__tag--secondary { background: var(--ds-color-secondary-wash); color: var(--ds-color-secondary); }
.plt-flowblock__tag--secondary::before { background: var(--ds-color-secondary); }

.plt-flowblock__title { margin-top: var(--ds-space-sm); }

.plt-flowblock__example {
  display: inline-flex;
  align-items: center;
  gap: var(--ds-space-xs);
  margin-top: var(--ds-space-sm);
  color: var(--ds-color-text-secondary);
}

.plt-flowblock__example .ds-icon { color: var(--ds-color-primary); }

.plt-flowblock__note {
  display: flex;
  gap: var(--ds-space-xs);
  margin-top: var(--ds-space-lg);
  padding: var(--ds-space-md);
  border-radius: var(--ds-radius-lg);
  background: var(--ds-color-surface-inner);
  color: var(--ds-color-text-secondary);
  font-size: var(--ds-text-body-sm-size);
  line-height: var(--ds-text-body-sm-line);
}

.plt-flowblock__note .ds-icon { margin-top: 3px; color: var(--ds-color-primary); }

.plt-flowblock__note strong {
  margin-right: var(--ds-space-xs);
  color: var(--ds-color-text-primary);
  font-weight: var(--ds-weight-semibold);
}

/* 圖片欄撐滿流程區塊高度，內層才有空間固定在畫面上；固定位置取「頁內導覽下方」與「視窗垂直置中」較低者 */
.plt-flowblock__visual { position: relative; align-self: stretch; margin: 0; }

.plt-flowblock__sticky {
  position: sticky;
  top: max(var(--plt-sticky-top), calc(50vh - var(--plt-visual-h, 240px) / 2 + var(--plt-subnav) / 2));
  transform: scale(var(--plt-visual-scale, 1));
  transform-origin: 50% 0;
}

.plt-flowblock__disclaimer {
  grid-column: 1 / -1;
  color: var(--ds-color-text-muted);
  font-size: var(--ds-text-caption-size);
  line-height: var(--ds-text-caption-line);
}

/* 步驟線：兩條流程共用同一套樣式 */
.plt-flow {
  position: relative;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* 節點中心 20px；線段以清單高度計算，最後一步以下由 ::before 遮罩蓋住 */
.plt-flow::before,
.plt-flow::after {
  content: "";
  position: absolute;
  top: calc(var(--ds-space-md) + 20px);
  left: 19px;
  width: 2px;
}

.plt-flow::before {
  bottom: 0;
  background: var(--ds-color-surface-strong);
}

.plt-flow::after {
  height: calc((100% - var(--ds-space-md) - 20px) * var(--flow-progress, 1));
  background: var(--ds-color-primary);
  box-shadow: var(--ds-shadow-cyan);
  transition: height .6s cubic-bezier(.22, 1, .36, 1);
}

.plt-flow__step {
  position: relative;
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) auto;
  gap: var(--ds-space-lg);
  align-items: start;
  padding-block: var(--ds-space-md);
  transition: opacity var(--ds-duration-slow) var(--ds-ease);
}

.plt-flow__step:last-child::before {
  content: "";
  position: absolute;
  top: calc(var(--ds-space-md) + 20px);
  bottom: 0;
  left: 0;
  z-index: 1;
  width: 40px;
  background: var(--ds-color-page);
}

.plt-flow__index {
  position: relative;
  z-index: 2;
  display: inline-grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: var(--ds-radius-full);
  background: var(--ds-color-primary);
  color: var(--ds-color-on-primary);
  font-size: var(--ds-text-caption-size);
  font-weight: var(--ds-weight-semibold);
  font-variant-numeric: tabular-nums;
  outline: 6px solid var(--ds-color-page);
  transition: background-color var(--ds-duration-slow) var(--ds-ease), color var(--ds-duration-slow) var(--ds-ease), box-shadow var(--ds-duration-slow) var(--ds-ease);
}

.plt-flow__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);
  font-weight: var(--ds-weight-semibold);
}

/* 步驟標題按鈕：外觀同標題文字；捲動同步模式下整個步驟可點擊 */
.plt-flow__trigger {
  display: inline;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: inherit;
}

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

.plt-flowblock.is-scrolly .plt-flow__step { cursor: pointer; }
.plt-flowblock.is-scrolly .plt-flow__step:not(.is-current):hover { opacity: .75; }
.plt-flowblock.is-scrolly .plt-flow__step:hover .plt-flow__title { color: var(--ds-color-secondary); }

.plt-flow__body p { color: var(--ds-color-text-secondary); }

.plt-flow__role {
  margin-top: 6px;
  padding: 2px var(--ds-space-sm);
  border-radius: var(--ds-radius-full);
  font-size: var(--ds-text-caption-size);
  line-height: var(--ds-text-caption-line);
  font-weight: var(--ds-weight-semibold);
  white-space: nowrap;
}

.plt-flow__role--resident { background: var(--ds-color-surface-muted); color: var(--ds-color-text-primary); }
.plt-flow__role--ai { background: var(--ds-color-primary-wash); color: var(--ds-color-primary-dark); }
.plt-flow__role--staff { background: var(--ds-color-secondary-wash); color: var(--ds-color-secondary); }

/* 桌機捲動同步（JS 加上 .is-scrolly）：每步保留一段捲動距離，讓右側圖片有空間固定在畫面上 */
.plt-flowblock.is-scrolly .plt-flow__step { min-height: clamp(124px, 18vh, 168px); }

/* 未讀到的步驟淡化，目前步驟加光暈 */
.plt-flowblock.is-scrolly .plt-flow__step:not(.is-reached) { opacity: .4; }

.plt-flowblock.is-scrolly .plt-flow__step:not(.is-reached) .plt-flow__index {
  background: var(--ds-color-card);
  color: var(--ds-color-text-muted);
  box-shadow: inset 0 0 0 1px var(--ds-color-border);
}

.plt-flowblock.is-scrolly .plt-flow__step.is-current .plt-flow__index { box-shadow: 0 0 0 6px var(--ds-color-primary-30); }

/* 報修／驗屋系統畫面：每步一張，固定 4:3（畫面本身已帶圓角與陰影，不再加外框）。
   桌機捲動同步時畫面疊在同一格、隨目前步驟淡入切換；其餘情況依序全部列出 */
.plt-shots__stage { display: grid; gap: var(--ds-space-2xl); }
.plt-shot { margin: 0; }

.plt-flowblock.is-scrolly .plt-shots__stage { gap: 0; }

.plt-flowblock.is-scrolly .plt-shot {
  grid-area: 1 / 1;
  visibility: hidden;
  opacity: 0;
  transform: translateY(12px) scale(.98);
  transition: opacity .45s var(--ds-ease), transform .45s var(--ds-ease), visibility 0s .45s;
}

.plt-flowblock.is-scrolly .plt-shot.is-active {
  visibility: visible;
  opacity: 1;
  transform: none;
  transition: opacity .6s cubic-bezier(.22, 1, .36, 1), transform .6s cubic-bezier(.22, 1, .36, 1), visibility 0s;
}

/* 分段進度條：只在捲動同步時出現，標示目前看到第幾步（不顯示數字） */
.plt-shots__progress { display: none; }

.plt-flowblock.is-scrolly .plt-shots__progress {
  display: flex;
  gap: 6px;
  margin-top: var(--ds-space-md);
}

.plt-shots__progress span {
  flex: 1;
  height: 3px;
  border-radius: var(--ds-radius-full);
  background: var(--ds-color-surface-strong);
  transition: background-color var(--ds-duration-slow) var(--ds-ease);
}

.plt-shots__progress span.is-reached { background: var(--ds-color-primary); }
.plt-flowblock--reverse .plt-shots__progress span.is-reached { background: var(--ds-color-secondary); }


.plt-screen__stage {
  position: relative;
  isolation: isolate;
  aspect-ratio: 4 / 3;
}

.plt-screen__stage::before {
  content: "";
  position: absolute;
  inset: 8% 6%;
  z-index: -1;
  border-radius: var(--ds-radius-full);
  background: radial-gradient(closest-side, var(--ds-color-primary-30), transparent);
  filter: blur(24px);
}

.plt-screen__image { display: block; width: 100%; height: 100%; object-fit: contain; }

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

.plt-screen__label {
  display: inline-flex;
  align-items: center;
  gap: var(--ds-space-xs);
  color: var(--ds-color-text-primary);
  font-weight: var(--ds-weight-semibold);
}

.plt-screen__label::before {
  content: "";
  width: 24px;
  height: 2px;
  border-radius: var(--ds-radius-full);
  background: var(--ds-color-primary);
}

/* 主管掌握重點：淡色底資訊列 */
.plt-insight {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 5fr);
  gap: var(--ds-space-lg) var(--ds-space-2xl);
  align-items: center;
  margin-top: clamp(var(--ds-space-3xl), 7vw, var(--ds-space-4xl));
  padding: var(--ds-space-xl);
  border-radius: var(--ds-radius-lg);
  background:
    radial-gradient(60% 120% at 100% 0%, var(--ds-color-primary-wash), transparent 70%),
    var(--ds-color-surface-inner);
}

.plt-insight__head {
  display: flex;
  align-items: center;
  gap: var(--ds-space-md);
}

.plt-insight__icon {
  display: inline-grid;
  place-items: center;
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  border-radius: var(--ds-radius-lg);
  background: var(--ds-color-card);
  color: var(--ds-color-primary);
  box-shadow: var(--ds-shadow-sm);
}

.plt-insight__text { color: var(--ds-color-text-secondary); }

.plt-insight__list {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--ds-space-sm);
  margin: 0;
  padding: var(--ds-space-lg) 0 0;
  border-top: var(--ds-border-width) solid var(--ds-color-border);
  list-style: none;
}

.plt-insight__list li {
  display: flex;
  align-items: center;
  gap: var(--ds-space-xs);
  color: var(--ds-color-text-primary);
  font-size: var(--ds-text-body-sm-size);
  line-height: var(--ds-text-body-sm-line);
  font-weight: var(--ds-weight-medium);
}

.plt-insight__list .ds-icon { color: var(--ds-color-secondary); }

/* 區塊結論句 */
.plt-statement {
  max-width: 960px;
  margin: clamp(var(--ds-space-3xl), 8vw, var(--ds-space-4xl)) auto 0;
  color: var(--ds-color-action-ink);
  font-size: clamp(22px, 1.1rem + 1.4vw, 34px);
  line-height: 1.5;
  font-weight: var(--ds-weight-semibold);
  letter-spacing: var(--ds-tracking-sub);
  text-align: center;
}

.plt-statement::before {
  content: "";
  display: block;
  width: 60px;
  height: 4px;
  margin: 0 auto var(--ds-space-lg);
  border-radius: var(--ds-radius-full);
  background: linear-gradient(90deg, var(--ds-color-secondary), var(--ds-color-primary));
}

.plt-statement .plt-phrase:last-child {
  background: linear-gradient(110deg, var(--ds-color-primary), var(--ds-color-secondary));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.has-motion [data-statement] .plt-phrase,
.has-motion [data-flow] .plt-flow,
.has-motion [data-shots] { opacity: 0; }

/* =============================================================================
   5. 工程履歷：兩組圖文交錯＋深色整合情境
   ============================================================================= */
.plt-records {
  padding-top: var(--plt-section-space);
  background: linear-gradient(var(--ds-color-surface-inner), var(--ds-color-page) 40%);
}

.plt-records__group {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: var(--ds-space-2xl) clamp(var(--ds-space-2xl), 6vw, var(--ds-space-4xl));
  align-items: center;
}

.plt-records__group + .plt-records__group { margin-top: clamp(var(--ds-space-3xl), 8vw, var(--ds-space-4xl)); }

.plt-records__group--reverse { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.plt-records__group--reverse .plt-records__media { order: -1; }

.plt-records__items { display: grid; }

.plt-record {
  position: relative;
  padding-block: var(--ds-space-xl);
  border-top: var(--ds-border-width) solid var(--ds-color-border);
}

.plt-record:last-child { border-bottom: var(--ds-border-width) solid var(--ds-color-border); }

.plt-record::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  width: 48px;
  height: 2px;
  background: var(--ds-color-primary);
}

.plt-record__kicker {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--ds-color-primary);
  font-size: var(--ds-text-label-sm-size);
  line-height: var(--ds-text-label-sm-line);
  font-weight: var(--ds-weight-semibold);
}

.plt-record__title { margin-block: var(--ds-space-xs); }
.plt-record__text { color: var(--ds-color-text-secondary); }

.plt-records__media { margin: 0; }

/* 系統畫面為不透明 4:3 圖（自帶背景），以圓角外框完整顯示 */
.plt-records__frame {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: var(--ds-radius-lg);
  background: var(--ds-color-surface-muted);
  box-shadow: var(--ds-shadow-panel);
}

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

.has-motion [data-record-group] .plt-record,
.has-motion [data-record-media] { opacity: 0; }

/* 整合情境：深色底，同一戶資料關聯示意 */
.plt-scenario {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  margin-top: var(--plt-section-space);
  padding-block: var(--plt-section-space);
  background:
    radial-gradient(50% 60% at 78% 45%, rgba(0, 180, 216, .28), transparent 70%),
    radial-gradient(40% 50% at 8% 100%, rgba(72, 43, 231, .32), transparent 70%),
    var(--ds-color-primary-dark);
  color: var(--ds-color-on-dark-strong);
}

.plt-scenario::before {
  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: 64px 64px;
  opacity: .4;
  -webkit-mask-image: radial-gradient(60% 70% at 75% 50%, #000, transparent 75%);
  mask-image: radial-gradient(60% 70% at 75% 50%, #000, transparent 75%);
}

.plt-scenario__layout {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: var(--ds-space-2xl) clamp(var(--ds-space-2xl), 6vw, var(--ds-space-4xl));
  align-items: center;
}

.plt-scenario__kicker {
  display: inline-flex;
  align-items: center;
  gap: var(--ds-space-xs);
  color: var(--ds-color-cyan);
  font-size: var(--ds-text-label-sm-size);
  line-height: var(--ds-text-label-sm-line);
  font-weight: var(--ds-weight-semibold);
  letter-spacing: var(--ds-tracking-wide);
}

/* 漏水情境的起點：Accent 小面積即時提示 */
.plt-scenario__pulse,
.plt-graph__alert {
  position: relative;
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: var(--ds-radius-full);
  background: var(--ds-color-accent);
}

.plt-scenario__pulse::after,
.plt-graph__alert::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--ds-color-accent);
  animation: ds-ping 1.6s cubic-bezier(0, 0, .2, 1) infinite;
}

.plt-scenario__title {
  margin-block: var(--ds-space-md);
  color: var(--ds-color-on-dark);
  font-size: var(--ds-text-headline-lg-size);
  line-height: var(--ds-text-headline-lg-line);
  font-weight: var(--ds-text-headline-lg-weight);
  letter-spacing: var(--ds-tracking-headline);
}

.plt-scenario__text {
  color: var(--ds-color-on-dark-strong);
  font-size: var(--ds-text-body-lg-size);
  line-height: var(--ds-text-body-lg-line);
}

.plt-scenario__conclusion {
  margin-top: var(--ds-space-xl);
  padding-top: var(--ds-space-lg);
  border-top: var(--ds-border-width) solid var(--ds-color-on-dark-hairline);
  color: var(--ds-color-on-dark);
  font-weight: var(--ds-weight-medium);
}

.plt-graph { margin: 0; }

.plt-graph__canvas {
  position: relative;
  width: 100%;
  max-width: 600px;
  margin-inline: auto;
  aspect-ratio: 1;
}

.plt-graph__lines {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.plt-graph__lines line {
  stroke: var(--ds-color-cyan-60);
  stroke-width: .35;
  stroke-linecap: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 1s cubic-bezier(.65, 0, .35, 1);
}

.plt-graph__lines line:nth-child(2) { transition-delay: .1s; }
.plt-graph__lines line:nth-child(3) { transition-delay: .2s; }
.plt-graph__lines line:nth-child(4) { transition-delay: .3s; }
.plt-graph__lines line:nth-child(5) { transition-delay: .4s; }
.plt-graph__lines line:nth-child(6) { transition-delay: .5s; }

.plt-graph__orbit {
  position: absolute;
  inset: 12%;
  border: var(--ds-border-width) dashed var(--ds-color-on-dark-hairline);
  border-radius: var(--ds-radius-full);
  animation: plt-orbit 60s linear infinite;
}

@keyframes plt-orbit { to { transform: rotate(360deg); } }

.plt-graph__core {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 1;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 2px;
  width: clamp(124px, 28%, 156px);
  aspect-ratio: 1;
  border-radius: var(--ds-radius-full);
  background: radial-gradient(circle at 30% 30%, var(--ds-color-cyan), var(--ds-color-primary) 60%, var(--ds-color-primary-hover));
  color: var(--ds-color-on-primary);
  text-align: center;
  box-shadow: 0 0 0 10px rgba(51, 211, 255, .12), 0 0 64px var(--ds-color-cyan-55);
  transform: translate(-50%, -50%);
}

.plt-graph__core::after {
  content: "";
  position: absolute;
  inset: -10px;
  border: 2px solid var(--ds-color-cyan-40);
  border-radius: inherit;
  animation: plt-pulse 2.8s cubic-bezier(0, 0, .2, 1) infinite;
}

@keyframes plt-pulse {
  0%   { transform: scale(1); opacity: 1; }
  100% { transform: scale(1.5); opacity: 0; }
}

.plt-graph__core .ds-icon { font-size: 28px; }

.plt-graph__core-label {
  font-size: var(--ds-text-headline-sm-size);
  line-height: var(--ds-text-headline-sm-line);
  font-weight: var(--ds-weight-bold);
}

.plt-graph__core-sub {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px var(--ds-space-xs);
  border-radius: var(--ds-radius-full);
  background: rgba(0, 54, 77, .45);
  font-size: 11px;
  line-height: var(--ds-text-caption-line);
  font-weight: var(--ds-weight-medium);
}

.plt-graph__alert { width: 6px; height: 6px; }

.plt-graph__nodes { margin: 0; padding: 0; list-style: none; }

.plt-graph__node {
  position: absolute;
  top: var(--y);
  left: var(--x);
  z-index: 1;
  display: grid;
  gap: 2px;
  min-width: 128px;
  padding: var(--ds-space-xs) var(--ds-space-md);
  border: var(--ds-border-width) solid rgba(255, 255, 255, .16);
  border-radius: var(--ds-radius-lg);
  background: rgba(0, 54, 77, .72);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  color: var(--ds-color-on-dark);
  font-size: var(--ds-text-body-sm-size);
  line-height: var(--ds-text-body-sm-line);
  font-weight: var(--ds-weight-semibold);
  text-align: center;
  white-space: nowrap;
  transform: translate(-50%, -50%);
  transition: opacity .6s cubic-bezier(.22, 1, .36, 1), transform .6s cubic-bezier(.22, 1, .36, 1), border-color var(--ds-duration-slow) var(--ds-ease);
}

.plt-graph__node:hover { border-color: var(--ds-color-cyan); }

.plt-graph__stage {
  color: var(--ds-color-cyan);
  font-size: 11px;
  line-height: var(--ds-text-caption-line);
  font-weight: var(--ds-weight-medium);
  letter-spacing: var(--ds-tracking-wide);
}

.plt-graph__node--1 { --x: 50%; --y: 12%; transition-delay: .4s; }
.plt-graph__node--2 { --x: 83%; --y: 31%; transition-delay: .5s; }
.plt-graph__node--3 { --x: 83%; --y: 69%; transition-delay: .6s; }
.plt-graph__node--4 { --x: 50%; --y: 88%; transition-delay: .7s; }
.plt-graph__node--5 { --x: 17%; --y: 69%; transition-delay: .8s; }
.plt-graph__node--6 { --x: 17%; --y: 31%; transition-delay: .9s; }

/* JS 加上 .is-armed 後才收起，進入視窗加 .is-drawn 再畫出；無 JS 時完整顯示 */
.plt-graph.is-armed:not(.is-drawn) .plt-graph__lines line { stroke-dashoffset: 1; }

.plt-graph.is-armed:not(.is-drawn) .plt-graph__node {
  opacity: 0;
  transform: translate(-50%, -50%) scale(.85);
}

.plt-graph__caption {
  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);
  text-align: center;
}

/* =============================================================================
   6. 導入方式：三步驟時間軸＋兩段補充
   ============================================================================= */
.plt-adoption { padding-block: var(--plt-section-space); }

.plt-adoption__steps {
  --ds-process-count: 3;
  max-width: 1080px;
  margin-inline: auto;
}

.plt-adoption__steps .ds-process__node {
  font-size: var(--ds-text-label-sm-size);
  outline: 6px solid var(--ds-color-page);
}

.plt-adoption__body { max-width: 320px; padding-inline: var(--ds-space-md); }

.plt-adoption__step {
  color: var(--ds-color-primary);
  font-size: var(--ds-text-caption-size);
  line-height: var(--ds-text-caption-line);
  font-weight: var(--ds-weight-semibold);
  letter-spacing: var(--ds-tracking-wide);
}

.plt-adoption__title {
  margin-block: var(--ds-space-xxs) var(--ds-space-xs);
  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);
}

.plt-adoption__text {
  color: var(--ds-color-text-secondary);
  font-size: var(--ds-text-body-sm-size);
  line-height: var(--ds-text-body-sm-line);
}

.plt-support {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  max-width: 1080px;
  margin: clamp(var(--ds-space-3xl), 7vw, var(--ds-space-4xl)) auto 0;
  border-top: var(--ds-border-width) solid var(--ds-color-border);
}

.plt-support__item {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: var(--ds-space-md);
  padding: var(--ds-space-xl) var(--ds-space-xl) 0 0;
}

.plt-support__item + .plt-support__item {
  padding-left: var(--ds-space-xl);
  border-left: var(--ds-border-width) solid var(--ds-color-border);
}

.plt-support__icon {
  display: inline-grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: var(--ds-radius-lg);
  background: var(--ds-color-primary-wash);
  color: var(--ds-color-primary);
}

.plt-support__item h3 { margin-bottom: var(--ds-space-xs); }

.plt-support__item p {
  color: var(--ds-color-text-secondary);
  font-size: var(--ds-text-body-sm-size);
  line-height: var(--ds-text-body-sm-line);
}

/* =============================================================================
   7. CTA
   ============================================================================= */
.plt-cta { padding-bottom: var(--plt-section-space); }

.plt-closing {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: var(--ds-space-2xl) clamp(var(--ds-space-2xl), 6vw, var(--ds-space-4xl));
  align-items: end;
  padding: clamp(var(--ds-space-xl), 6vw, var(--ds-space-4xl));
  border-radius: var(--ds-radius-lg);
  background:
    radial-gradient(60% 80% at 100% 100%, var(--ds-color-primary-wash), transparent 70%),
    radial-gradient(50% 70% at 0% 0%, var(--ds-color-secondary-wash), transparent 70%),
    var(--ds-color-surface-inner);
}

.plt-closing__grid {
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image:
    linear-gradient(var(--ds-color-surface-strong) 1px, transparent 1px),
    linear-gradient(90deg, var(--ds-color-surface-strong) 1px, transparent 1px);
  background-size: 48px 48px;
  -webkit-mask-image: radial-gradient(60% 80% at 90% 90%, #000, transparent 75%);
  mask-image: radial-gradient(60% 80% at 90% 90%, #000, transparent 75%);
}

.plt-closing__eyebrow { letter-spacing: var(--ds-tracking-wide); }
.plt-closing__title { margin-block: var(--ds-space-md) var(--ds-space-lg); }

.plt-closing__summary {
  color: var(--ds-color-text-secondary);
  font-size: var(--ds-text-body-lg-size);
  line-height: var(--ds-text-body-lg-line);
}

.plt-closing__action { display: grid; justify-items: start; gap: var(--ds-space-lg); }
.plt-closing__guide { color: var(--ds-color-text-primary); }

.plt-closing__note {
  margin-top: calc(var(--ds-space-xs) * -1);
  color: var(--ds-color-text-muted);
  font-size: var(--ds-text-body-sm-size);
  line-height: var(--ds-text-body-sm-line);
}

.plt-magnetic { will-change: transform; }

.has-motion [data-reveal] { opacity: 0; }

/* =============================================================================
   響應式
   ============================================================================= */
@media (width <= 1024px) {
  .plt-hero__grid,
  .plt-pain__layout,
  .plt-flowblock,
  .plt-flowblock--reverse,
  .plt-records__group,
  .plt-records__group--reverse,
  .plt-scenario__layout,
  .plt-closing,
  .plt-section-intro--split { grid-template-columns: minmax(0, 1fr); }

  .plt-hero__content { max-width: 680px; }
  .plt-hero__visual { width: 100%; max-width: 880px; margin-inline: auto; }
  .plt-hero__grid { gap: var(--ds-space-lg); }

  .plt-subnav__name { display: none; }
  .plt-subnav__inner { justify-content: center; }

  /* 直向堆疊、全部展開：不依賴滑鼠移入 */
  .plt-pain__rail { flex-direction: column; height: auto; }

  .plt-pain-card,
  .plt-pain-card.is-active {
    flex: none;
    min-height: 280px;
    border-color: var(--ds-color-border);
    box-shadow: none;
    cursor: default;
  }

  .plt-pain-card__label { display: none; }

  .plt-pain-card .plt-pain-card__portrait,
  .plt-pain-card.is-active .plt-pain-card__portrait {
    left: calc(100% + 2%);
    height: 92%;
    transform: translateX(-100%);
    filter: none;
    opacity: 1;
  }

  .plt-pain-card .plt-pain-card__body,
  .plt-pain-card.is-active .plt-pain-card__body {
    position: relative;
    left: auto;
    bottom: auto;
    width: min(62%, 400px);
    margin: 72px 0 var(--ds-space-md) var(--ds-space-md);
    opacity: 1;
    transform: none;
    pointer-events: auto;
  }

  .plt-pain__nav { display: none; }

  /* 手機與平板統一先文字流程、後對應畫面 */
  .plt-flowblock--reverse .plt-flowblock__visual,
  .plt-records__group--reverse .plt-records__media { order: 0; }

  .plt-flowblock__sticky { position: static; }
  .plt-records__media { max-width: 640px; }

  /* 平板：各步畫面兩欄排列；手機改回單欄 */
  .plt-shots__stage { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--ds-space-xl) var(--ds-space-lg); }

  /* 一列放不下五個分頁：改為多欄網格，選取底線畫在各分頁自身 */
  .plt-team__picker { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 var(--ds-space-md); }
  .plt-team__tab { justify-content: start; padding-block: var(--ds-space-sm); border-bottom: 3px solid transparent; }
  .plt-team__tab[aria-selected="true"] { border-bottom-color: var(--ds-color-secondary); }
  .plt-team__indicator { display: none; }

  .plt-specialist { grid-template-columns: minmax(0, 1fr); align-items: start; align-content: start; }
  .plt-sample { min-height: 260px; }

  .plt-insight { grid-template-columns: minmax(0, 1fr); }
  .plt-insight__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .plt-graph__canvas { max-width: 520px; }
}

@media (width <= 768px) {
  .plt-hero__actions .ds-button { width: 100%; }
  /* 寬幅插畫延伸到螢幕左右邊緣，抵銷容器內距 */
  .plt-hero__visual { width: auto; margin-inline: calc(clamp(32px, 8vw, 64px) / -2); padding-bottom: var(--ds-space-xl); }
  .plt-hero__note { right: var(--ds-space-md); bottom: 0; }

  .plt-subnav__inner { justify-content: flex-start; }

  .plt-subnav__list {
    gap: var(--ds-space-lg);
    width: 100%;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-mask-image: linear-gradient(90deg, #000 88%, transparent);
    mask-image: linear-gradient(90deg, #000 88%, transparent);
  }

  .plt-subnav__list::-webkit-scrollbar { display: none; }
  .plt-subnav__list li:last-child { padding-right: var(--ds-space-xl); }
  .plt-subnav__link { font-size: var(--ds-text-body-sm-size); }

  .plt-pain-card .plt-pain-card__body,
  .plt-pain-card.is-active .plt-pain-card__body { width: 72%; padding: var(--ds-space-md); }

  .plt-pain-card .plt-pain-card__portrait,
  .plt-pain-card.is-active .plt-pain-card__portrait { height: 70%; left: calc(100% + 10%); }

  .plt-team__picker { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .plt-team__stage { margin-top: var(--ds-space-lg); padding: var(--ds-space-lg); }
  .plt-specialist__name { font-size: 24px; }
  .plt-team__tab-icon { width: 36px; height: 36px; }
  .plt-team__tab-icon .ds-icon { font-size: 20px; }
  .plt-sample { min-height: 240px; padding: var(--ds-space-md); }

  .plt-flow__step { grid-template-columns: 40px minmax(0, 1fr); gap: var(--ds-space-md); }
  .plt-flow__role { grid-column: 2; justify-self: start; margin-top: 0; }
  .plt-shots__stage { grid-template-columns: minmax(0, 1fr); }


  .plt-insight { padding: var(--ds-space-lg); }
  .plt-insight__list { grid-template-columns: minmax(0, 1fr); }


  .plt-scenario__title {
    font-size: var(--ds-text-headline-lg-mobile-size);
    line-height: var(--ds-text-headline-lg-mobile-line);
  }

  .plt-graph__canvas {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--ds-space-sm);
    aspect-ratio: auto;
  }

  .plt-graph__lines,
  .plt-graph__orbit { display: none; }

  .plt-graph__core {
    position: relative;
    top: auto;
    left: auto;
    grid-column: 1 / -1;
    justify-self: center;
    width: 140px;
    margin-bottom: var(--ds-space-md);
    transform: none;
  }

  .plt-graph__nodes { display: contents; }

  .plt-graph__node {
    position: static;
    min-width: 0;
    white-space: normal;
    transform: none;
  }

  .plt-graph.is-armed:not(.is-drawn) .plt-graph__node { transform: scale(.92); }

  .plt-adoption__steps {
    grid-template-columns: minmax(0, 1fr);
    row-gap: var(--ds-space-xl);
    max-width: 560px;
  }

  .plt-adoption__steps::before,
  .plt-adoption__steps::after {
    left: calc(var(--ds-control-height-md) / 2 - 1px);
    top: calc(var(--ds-control-height-md) / 2);
    width: 2px;
  }

  .plt-adoption__steps::before { height: calc(100% - var(--ds-control-height-md)); }
  .plt-adoption__steps::after { height: calc((100% - var(--ds-control-height-md)) * var(--ds-process-progress, 1)); }

  .plt-adoption__steps .ds-process__item {
    grid-template-columns: var(--ds-control-height-md) minmax(0, 1fr);
    justify-items: start;
    column-gap: var(--ds-space-lg);
    text-align: left;
  }

  /* 連接線以容器高度計算，會延伸過最後一個節點；以區塊底色蓋住節點以下的線段 */
  .plt-adoption__steps .ds-process__item:last-child::before {
    content: "";
    position: absolute;
    z-index: -1;
    top: calc(var(--ds-control-height-md) / 2);
    bottom: 0;
    left: 0;
    width: var(--ds-control-height-md);
    background: var(--ds-color-page);
  }

  .plt-adoption__body { max-width: none; padding: 10px 0 0; }

  .plt-support { grid-template-columns: minmax(0, 1fr); }
  .plt-support__item { padding-right: 0; }

  .plt-support__item + .plt-support__item {
    padding-left: 0;
    border-left: 0;
  }

  .plt-closing__action .ds-button { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .plt-hero__float,
  .plt-graph__orbit,
  .plt-graph__core::after,
  .plt-scenario__pulse::after,
  .plt-graph__alert::after { animation: none; }

  .plt-team[data-team-ready] .plt-specialist.is-active [data-step],
  .plt-team[data-team-ready] .plt-specialist.is-active .plt-sample__scan,
  .plt-team[data-team-ready] .plt-specialist.is-active .plt-specialist__profile > * { animation: none; }

  .plt-pain__tab,
  .plt-pain__tab::before,
  .plt-pain-card,
  .plt-pain-card__label,
  .plt-pain-card__portrait,
  .plt-pain-card__body,
  .plt-graph__lines line,
  .plt-graph__node,
  .plt-flow::after,
  .plt-flowblock.is-scrolly .plt-shot,
  .plt-flowblock.is-scrolly .plt-shot.is-active,
  .plt-flow__step,
  .plt-team__indicator,
  .plt-team__tab,
  .plt-team[data-team-ready] .plt-specialist,
  .plt-team[data-team-ready] .plt-specialist.is-active,
  .plt-subnav__link::after { transition: none; }
}