@charset "UTF-8";
/* ============================================================
   Compact Air 產品頁專屬樣式
   /assets/css/compactair_v2025.css
   版本：2026081301
   依賴：basic_v2025.css（唯讀）
   Hero 模式：A（全寬出血，main 無 padding-top）
   斷點：1180px = Tablet / 720px = Mobile
   ============================================================ */

/* ---------- 頁面專屬字型（自托管，不使用外部 CDN） ---------- */
@font-face {
  font-family: 'Ubuntu';
  src: url('/assets/fonts/Ubuntu-Regular.ttf') format('truetype');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Ubuntu';
  src: url('/assets/fonts/Ubuntu-Medium.ttf') format('truetype');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Ubuntu';
  src: url('/assets/fonts/Ubuntu-Bold.ttf') format('truetype');
  font-weight: 700; font-style: normal; font-display: swap;
}
/* Inter（自托管）：S1 產品名文字用 */
@font-face {
  font-family: 'Inter';
  src: url('/assets/fonts/Inter-Regular.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('/assets/fonts/Inter-SemiBold.woff2') format('woff2');
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('/assets/fonts/Inter-Bold.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}

/* ---------- 頁面專屬 token（僅 #page_content 內生效） ---------- */
#page_content {
  /* 英文字型指定為 Ubuntu，CJK 交由全站 --font-family-primary 的 Noto Sans TC/SC 承接 */
  font-family: 'Ubuntu', var(--font-family-primary);

  /* S1 專用：兩節漸層 */
  --ca-gold-from: #f0c66a;   /* 亮金 */
  --ca-gold-to:   #fff0c2;   /* 香檳白 */
  /* S3 之後的小標：五節金屬漸層 */
  --ca-gold-metal: linear-gradient(100deg, #dcb268 0%, #f8e3ad 26%, #f4d693 54%, #efc46e 80%, #e0aa45 100%);
  --ca-gold-flat: #c99a3c;   /* S5 桌機 / 平板單色暗金（壓在亮底影片上） */

  --ca-radius-card: 20px;
  --ca-radius-media: 16px;
  --ca-gap-cell: 8px;

  --ca-pad-x: 40px;          /* desktop / tablet 左右留白 */
  --ca-pad-y: 64px;          /* section 上下留白 */
  --ca-stage-max: 3960px;    /* 全寬出血段落的上限 */
}
@media screen and (max-width: 720px) {
  #page_content {
    --ca-radius-card: 10px;
    --ca-radius-media: 10px;
    --ca-pad-x: 16px;
    --ca-pad-y: 32px;
  }
}

/* T16993 修正：整合進站台後多載入 basic_v2025.css，其 `body *{margin:0 auto}` 會在每個
   flex 子元素塞上左右 auto margin，使 align-items:stretch 失效（規格表 .ca-tr 變階梯狀、
   slot 比例跑掉）。此處把 compactair 版面內的預設 margin 歸零；後面各元件自身的 margin/gap
   置中規則（specificity 相同或更高、且排在後面）會照常重新生效。 */
main .ca-hero *, main .ca-section *, main .ca-reveal *, main .ca-range * { margin: 0; }

/* ---------- 共用：小標（eyebrow）金色漸層 ---------- */
main .ca-eyebrow {
  /* 漸層須貼合文字寬度，否則置中短句只會取到漸層中段，兩端色階看不見 */
  display: block;
  width: -moz-fit-content;
  width: fit-content;
  margin-left: auto;
  margin-right: auto;
  background-image: var(--ca-gold-metal);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  /* 透明填色的文字不可用 text-shadow（陰影會從字緣透出），改用 drop-shadow */
  filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.7));
}
/* S1 小標為兩節漸層（設計指定，與其他 section 不同） */
main .ca-hero .ca-eyebrow {
  background-image: linear-gradient(100deg, var(--ca-gold-from) 0%, var(--ca-gold-to) 100%);
}
/* 壓在亮底影片上時改單色；手機版仍走漸層 */
main .ca-eyebrow.is-flat {
  background-image: none;
  -webkit-text-fill-color: currentColor;
  color: var(--ca-gold-flat);
}
@media screen and (max-width: 720px) {
  main .ca-eyebrow.is-flat {
    background-image: var(--ca-gold-metal);
    -webkit-text-fill-color: transparent;
    color: transparent;
  }
}

/* ---------- 共用：section 外殼 ---------- */
main .ca-section {
  width: 100%;
  max-width: var(--ca-stage-max);   /* 背景與 Banner 同寬（原 1920 會在寬螢幕/縮放時兩側露底）；內容仍由 .ca-inner 置中收斂 */
  padding: var(--ca-pad-y) var(--ca-pad-x);
  margin: 0 auto;
  background-color: var(--black-100);
}
main .ca-section > * { margin-left: auto; margin-right: auto; }

/* 全寬出血段落：清除 main > * 繼承的 padding 與 max-width */
main .ca-bleed {
  padding: 0;
  max-width: var(--ca-stage-max);
}

/* 內容置中容器（各 section 的最大寬度） */
main .ca-inner        { width: 100%; margin: 0 auto; }
main .ca-inner-1600   { max-width: 1600px; }
main .ca-inner-1280   { max-width: 1280px; }
main .ca-inner-1080   { max-width: 1080px; }
main .ca-inner-960    { max-width: 960px; }
main .ca-inner-840    { max-width: 840px; }

/* 文字堆疊（覆蓋 body * { margin: 0 auto }） */
main .ca-stack {
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: flex-start;
  margin-bottom: 32px;             /* 標題塊/註解塊下方留白（specificity 同 reset、排在後面故勝出） */
}
main .ca-stack > * { margin-left: 0; margin-right: 0; }
main .ca-stack.is-center { align-items: center; text-align: center; }
main .ca-stack.is-center > * { margin-left: auto; margin-right: auto; }
/* 標題與內文 <p> 皆置中（PM #398550：describe 都改置中對齊）；區塊在中央 max-width 欄位內 */
main .ca-stack.is-center > p { align-self: stretch; text-align: center; }

/* ---------- 共用：CTA 按鈕（沿用 basic 的 .btn，僅補 state） ---------- */
main .ca-btn {
  color: var(--black-90);
  background-color: var(--black-20);
  font-family: 'Ubuntu', var(--font-family-primary);   /* PM #398562：Button 套 Ubuntu */
  transition: background-color 0.16s ease, color 0.16s ease;
}
main .ca-btn:hover  { background-color: rgba(242, 242, 242, 0.75); }
main .ca-btn:active  { background-color: var(--black-20); color: var(--color-blue-for-light); }

/* ============================================================
   S1 — Hero（模式 A：從 y:0 出血，nav 透明疊於上方）
   圖：1200×1200（tablet）/ 720×1080（mobile）/ 1980×1140（desktop）
   ============================================================ */
main .ca-hero {
  position: relative;
  width: 100%;
  max-width: var(--ca-stage-max);
  padding: 0;
  aspect-ratio: 1980 / 1140;
  max-height: 100vh;              /* 超寬螢幕時封頂為一個畫面，避免 hero 過高把內容推下（overflow+cover 會自動裁切） */
  overflow: hidden;
  background-color: var(--black-100);
}
main .ca-hero .ca-hero-media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center;
     object-position: center;
  margin: 0;
}
/* 左→中的壓黑，讓白字自圖面跳出（只壓到畫面一半） */
main .ca-hero .ca-hero-scrim {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: linear-gradient(90deg,
    rgba(0, 0, 0, 0.72) 0%,
    rgba(0, 0, 0, 0.5) 20%,
    rgba(0, 0, 0, 0.16) 38%,
    rgba(0, 0, 0, 0) 50%);
}
main .ca-hero .ca-hero-body {
  position: relative;
  z-index: 1;
  height: 100%;
  padding: 0 var(--ca-pad-x);
  display: flex;
  align-items: center;
}
main .ca-hero .ca-hero-text {
  /* 文字跟著背景圖走：容器與圖同寬，文字欄以百分比定位 */
  width: 100%;
  max-width: 3832px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 0;                              /* 間距改用各元素 margin（PM #398562：名→slogan 8、slogan→button 24） */
  align-items: flex-start;
  margin-left: 4%;
  max-width: 46%;
}
main .ca-hero .ca-hero-text > * { margin-left: 0; margin-right: 0;}
/* 產品名：Inter 文字（非標準字圖），H1 尺寸 64px、字距 0 */
main .ca-hero .ca-hero-name {
  font-family: 'Inter', var(--font-family-primary);
  font-weight: 600;
  font-size: 64px;
  line-height: 1.05;
  letter-spacing: 0;
  margin: 0 0 8px;                     /* 產品名 → slogan：8px */
  color: var(--black-white);
  text-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
  text-wrap: balance;
}
main .ca-hero .ca-hero-slogan {
  font-weight: 400;                    /* Regular（PM #398562） */
  margin: 0 0 24px;                    /* slogan → Button：24px */
  color: var(--black-white);
  text-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
  text-wrap: pretty;
}
@media screen and (max-width: 1180px) {
  main .ca-hero { aspect-ratio: 1 / 1; }
  main .ca-hero .ca-hero-body { align-items: flex-start; padding-top: 88px; }
  /* 平板/手機：hero 文字區塊與內容置中（桌機維持靠左） */
  main .ca-hero .ca-hero-text { margin-left: 0; max-width: 100%; align-items: center; text-align: center; }
  /* 平板：產品名維持 64px（PM #398562：Desktop&Tablet 64） */
  main .ca-hero .ca-hero-scrim {
    background-image: linear-gradient(180deg,
      rgba(0, 0, 0, 0.72) 0%,
      rgba(0, 0, 0, 0.5) 34%,
      rgba(0, 0, 0, 0.16) 72%,
      rgba(0, 0, 0, 0) 100%);
    bottom: 38%;
  }
}
@media screen and (max-width: 720px) {
  main .ca-hero { aspect-ratio: 720 / 1080; }
  main .ca-hero .ca-hero-body { padding-top: 80px; }
  main .ca-hero .ca-hero-name { font-size: 48px; }   /* 手機：48px（PM #398562） */
}

/* ============================================================
   S2 — Highlights（5 格）
   整體比例 1168 : 1142；左欄 353 : 752、右欄 225 : 567 : 277
   ============================================================ */
main .ca-highlights { background-image: linear-gradient(180deg, var(--black-80) 0%, var(--black-100) 100%); }
main .ca-highlights .ca-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  aspect-ratio: 1168 / 1142;
}
main .ca-highlights .ca-col {
  margin: 0;
  min-width: 0;
  min-height: 0;
  display: grid;
  gap: 24px;
}
main .ca-highlights .ca-col-left  { grid-template-rows: 353fr 752fr; }
main .ca-highlights .ca-col-right { grid-template-rows: 225fr 567fr 277fr; }
main .ca-highlights .ca-cell {
  position: relative;
  margin: 0;
  min-width: 0;
  min-height: 0;
  border-radius: var(--ca-radius-card);
  overflow: hidden;
  background-color: var(--black-80);
}
main .ca-highlights .ca-cell > img,
main .ca-highlights .ca-cell > video,
main .ca-highlights .ca-cell > .lazy-video,
main .ca-highlights .ca-cell > .lazy-video > video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  -o-object-fit: cover;
     object-fit: cover;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
@media screen and (max-width: 720px) {
  /* 手機：依 demo 重排（不再單欄等比）。兩個 .ca-col 以 display:contents 提升為 grid 直接格，
     再用明確 grid-row/column 定位；各格套素材原比例。
     版面：列1 video1 滿寬 → 列2 tx 滿寬 → 列3 range｜security 兩格並排 → 列4 video2 滿寬 */
  main .ca-highlights .ca-grid {
    grid-template-columns: 1fr 1fr;
    aspect-ratio: auto;
    gap: var(--ca-gap-cell);
  }
  main .ca-highlights .ca-col { display: contents; }
  main .ca-highlights .ca-col-left  .ca-cell:nth-child(1) { grid-row: 1; grid-column: 1 / -1; aspect-ratio: 1080 / 655; } /* video1（1080p/60Hz） */
  main .ca-highlights .ca-col-right .ca-cell:nth-child(2) { grid-row: 2; grid-column: 1 / -1; aspect-ratio: 1 / 1; }      /* video2（Virtually in Sync） */
  main .ca-highlights .ca-col-right .ca-cell:nth-child(1) { grid-row: 3; grid-column: 1;      aspect-ratio: 1 / 1; }      /* range（100 ft） */
  main .ca-highlights .ca-col-right .ca-cell:nth-child(3) { grid-row: 3; grid-column: 2;      aspect-ratio: 1 / 1; }      /* security（盾） */
  main .ca-highlights .ca-col-left  .ca-cell:nth-child(2) { grid-row: 4; grid-column: 1 / -1; aspect-ratio: 1 / 1; }      /* tx（HDMI/USB-C Transmitter） */
}

/* ============================================================
   S3 — 4K 60Hz（左右拉桿對比）
   影片比例 1080 : 655
   ============================================================ */
main .ca-compare {
  position: relative;
  width: 100%;
  aspect-ratio: 1080 / 655;
  border-radius: var(--ca-radius-media);
  overflow: hidden;
  background-color: var(--black-80);
  cursor: ew-resize;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
main .ca-compare .ca-compare-pane {
  position: absolute;
  inset: 0;
  margin: 0;
}
main .ca-compare .ca-compare-pane video { width: 100%; height: 100%; margin: 0; -o-object-fit: cover; object-fit: cover; }
main .ca-compare .ca-compare-pane.is-after { clip-path: inset(0 0 0 50%); }
main .ca-compare .ca-compare-handle {
  position: absolute;
  top: 0; bottom: 0;
  left: 50%;
  z-index: 2;
  width: 2px;
  margin: 0;
  background-color: var(--black-white);
  transform: translateX(-1px);
}
main .ca-compare .ca-compare-knob {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 48px; height: 48px;
  margin: 0;
  border-radius: 100rem;
  background-color: rgba(255, 255, 255, 0.9);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
/* 左右箭頭用規範的三角形 */
main .ca-compare .ca-compare-knob i {
  display: block;
  width: 0; height: 0;
  margin: 0;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
}
main .ca-compare .ca-compare-knob i.is-prev { border-right: 8px solid var(--black-90); }
main .ca-compare .ca-compare-knob i.is-next { border-left: 8px solid var(--black-90); }
main .ca-compare .ca-compare-label {
  position: absolute;
  top: 16px;
  z-index: 2;
  padding: 4px 12px;
  border-radius: 100rem;
  background-color: rgba(0, 0, 0, 0.5);
  color: var(--black-white);
  white-space: nowrap;
}
main .ca-compare .ca-compare-label.is-left  { left: 16px; }
main .ca-compare .ca-compare-label.is-right { right: 16px; }

/* ============================================================
   S4 — Latency（兩格比較 + TX 觸控/滑鼠畫線）
   ============================================================ */
main .ca-latency .ca-latency-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
main .ca-latency .ca-pane {
  position: relative;
  margin: 0;
  min-width: 0;
  aspect-ratio: 16 / 10;
  border-radius: var(--ca-radius-media);
  overflow: hidden;
  border: 1px solid var(--black-80);
  background-color: var(--black-80);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
main .ca-latency .ca-pane-tx {
  grid-column: 1 / -1;
  aspect-ratio: 1980 / 750;
  cursor: crosshair;
  /* 觸控畫線時不讓頁面跟著滾動 */
  touch-action: none;
}
main .ca-latency .ca-pane canvas {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  margin: 0;
  pointer-events: none;
}
main .ca-latency .ca-pane-head {
  position: absolute;
  top: 0; left: 0; right: 0;
  z-index: 2;
  padding: 16px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  pointer-events: none;
}
main .ca-latency .ca-pane-head > * { margin: 0; }
main .ca-latency .ca-pane-head .is-slow { color: var(--color-red-for-dark); }
main .ca-latency .ca-pane-head .is-fast { color: var(--color-blue-for-dark); }
main .ca-latency .ca-pane-head .is-side { color: var(--black-40); }
main .ca-latency .ca-cursor {
  position: absolute;
  z-index: 2;
  top: 0; left: 0;
  width: 24px; height: 24px;
  margin: 0;
  pointer-events: none;
  opacity: 0;                                  /* 預設隱藏，游標進入 TX 才顯示 */
  transition: opacity 0.12s ease;
  transform: translate(-3px, -2px);            /* 讓箭頭尖端對齊實際游標點 */
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.5));
  color: #fff;                                 /* 箭頭色 = currentColor（tx 白 / fast 藍 / slow 紅） */
}
main .ca-latency .ca-pane[data-ca-pane="fast"] .ca-cursor { color: var(--color-blue-for-dark); }
main .ca-latency .ca-pane[data-ca-pane="slow"] .ca-cursor { color: var(--color-red-for-dark); }
main .ca-latency .ca-cursor svg { display: block; width: 100%; height: 100%; fill: currentColor; }
main .ca-latency .ca-cursor.is-on { opacity: 1; }
@media screen and (max-width: 1180px) {
  main .ca-resolution .ca-inner-960 { max-width: 720px; }
  main .ca-latency .ca-inner-960 { max-width: 720px; }
}
@media screen and (max-width: 720px) {
  main .ca-latency .ca-latency-grid { grid-template-columns: 1fr; }
  /* mobile 不提供畫線互動，改為影片預覽 */
  main .ca-latency .ca-pane-tx { cursor: default; touch-action: auto; }
}

/* ============================================================
   S5 — Range（滿版影片，文字置中壓 50% 黑）
   影片比例 1980 : 1114
   ============================================================ */
main .ca-range {
  position: relative;
  width: 100%;
  max-width: var(--ca-stage-max);
  padding: 0;
  aspect-ratio: 1980 / 1114;
  overflow: hidden;
  background-color: var(--black-100);
}
main .ca-range .ca-range-media {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  margin: 0;
  -o-object-fit: cover;
     object-fit: cover;
  transform: scale(0.85);
  transform-origin: center center;
  transition: transform 0.1s linear;
  will-change: transform;
}
main .ca-range .ca-range-media video { width: 100%; }
main .ca-range .ca-range-scrim {
  position: absolute;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.5);
  pointer-events: none;
}
main .ca-range .ca-range-body {
  position: absolute;
  inset: 0;
  z-index: 1;
  padding: 32px var(--ca-pad-x);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}
main .ca-range .ca-range-body > * { margin-left: auto; margin-right: auto; }
/* 手機：文字與影片改上下分開（不重疊圖層）——文字 order 1、影片 order 2、遮罩隱藏 */
@media screen and (max-width: 1180px) {
  main .ca-range .ca-range-media video { max-width: 100vw; }
}
@media screen and (max-width: 720px) {
  main .ca-range { aspect-ratio: auto; display: flex; flex-direction: column; gap: 0; }   /* PM #398937：影片與文字距離拉近、與其他段一致（間距由 body 內 stack margin 提供） */
  main .ca-range .ca-range-body {
    position: relative; inset: auto; order: 1;
    padding: 0 var(--ca-pad-x);
  }
  main .ca-range .ca-range-media {
    position: relative; inset: auto; order: 2;
    width: 100%; height: auto; aspect-ratio: 1980 / 1114;
    transform: none;
  }
  main .ca-range .ca-range-scrim { display: none; }
}

/* ============================================================
   S6 — Compatibility（產品 + 裝置輪播舞台）
   桌機：滾輪驅動；平板 / 手機：自動播放
   背景：黑 → 灰(50%) → 黑，尾端與 S7 同色
   ============================================================ */
main .ca-compat {
  background-image: linear-gradient(180deg, var(--black-100) 0%, var(--black-80) 50%, var(--black-100) 100%);
  padding: 0;                          /* cascade 自帶 padding；800vh pin 容器直接貼齊 section */
}
/* 800vh pin 容器 + 100vh sticky 舞台 */
main .ca-compat .ca-cascade { position: relative; width: 100%; height: 800vh; }
main .ca-compat .ca-cc-stage {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  gap: 36px;
  padding: 56px 0 40px;
  box-sizing: border-box;
}
main .ca-compat .ca-cc-text,
main .ca-compat .ca-cc-note { flex-shrink: 0; margin-bottom: 0; }
/* 舞台：兩區並排、overflow 裁切；flex:1 撐滿剩餘高度 */
main .ca-compat .ca-cc-arena {
  position: relative;
  width: 100%;
  max-width: var(--ca-stage-max);
  margin: 0 auto;
  flex: 1 1 0;
  min-height: 0;                     /* 原 50vh 會在矮視窗(如 FHD 150%)強制過高，把底部註解擠出 100vh 而裁切；改 0 讓 flex 依空間收斂 */
  overflow: hidden;
  display: flex;
  flex-direction: row;
}
main .ca-compat .ca-cc-zone { position: relative; height: 100%; }
main .ca-compat .ca-cc-zoneA { width: 41.667%; }   /* 初始寬；轉場時與 zoneB 互換 */
main .ca-compat .ca-cc-zoneB { width: 58.333%; }
/* 各圖層：絕對疊放、預設隱藏，由 JS 控制 opacity/transform */
main .ca-compat .ca-cc-item {
  position: absolute; inset: 0; margin: 0;
  display: flex; align-items: center;
  opacity: 0; will-change: transform, opacity;
}
main .ca-compat .ca-cc-zoneA .ca-cc-item { justify-content: flex-end; }   /* 左區靠右 → 往中央靠 */
main .ca-compat .ca-cc-zoneB .ca-cc-item { justify-content: flex-start; } /* 右區靠左 → 往中央靠 */
main .ca-compat .ca-cc-item.is-product { z-index: 1; }
main .ca-compat .ca-cc-item.is-device  { z-index: 2; }
main .ca-compat .ca-cc-item img {
  height: 100%; width: auto; margin: 0;
  -o-object-fit: contain; object-fit: contain; flex-shrink: 0;
}
/* 產品（TX）較小、略微交疊 */
main .ca-compat .ca-cc-item[data-ca-key="typec"] img { height: 50%; transform: translateX(5%); }
main .ca-compat .ca-cc-item[data-ca-key="hdmi"]  img { height: 50%; transform: translateX(-8%); }
/* PM：平板/手機（≤1180）產品(TX)圖縮 0.9 並對應調整水平位移（scale 內縮變少，位移量隨之縮小） */
@media screen and (max-width: 1180px) {
  main .ca-compat .ca-cc-item[data-ca-key="typec"] img { transform: translateX(9%) scale(.9); }
  main .ca-compat .ca-cc-item[data-ca-key="hdmi"]  img { transform: translateX(-12%) scale(.9); }
}
/* floater：與 laptop-right 同一台筆電，轉場交棒後移到中央再往下退場 */
main .ca-compat .ca-cc-floater {
  position: absolute; top: 0; bottom: 0;
  width: 58.333%; left: 70.833%;
  transform: translateX(-50%);
  z-index: 20; opacity: 0; pointer-events: none;
}
main .ca-compat .ca-cc-floater-inner { height: 100%; display: flex; align-items: center; justify-content: flex-start; }
main .ca-compat .ca-cc-floater img {
  height: 100%; width: auto; margin: 0;
  -o-object-fit: contain; object-fit: contain; flex-shrink: 0;
}
main .ca-compat .ca-compat-note {
  display: block; margin: 0;
  color: var(--black-60); text-wrap: pretty;
  font-size: 0.85em;                 /* PM #398937：灰色註解字小一階 */
}
/* 非桌機（≤1180）：不 pin、改自動播放。容器與舞台改自然高度流排，
   舞台(arena)給 4/3 讓裝置圖正常顯示（桌機的 flex:1 / min-height:50vh 只適用 pin 版面） */
@media screen and (max-width: 1180px) {
  main .ca-compat .ca-cascade { height: auto; }
  main .ca-compat .ca-cascade .ca-inner-960 { padding: 0 var(--ca-pad-x); }
  /* 舞台內距歸零，避免與 section 的 64/32 上下 padding 疊加（S6 上下留白由 section 控制） */
  /* PM #398990：文字↔圖距離再更近（留約 1/3） */
  main .ca-compat .ca-cc-stage { position: relative; top: auto; height: auto; padding-top: 0; padding-bottom: 0; gap: 4px; }
  /* PM #398990：裝置圖放大到超出畫面（溢出）、產品(TX)再縮小到約手機寬 */
  main .ca-compat .ca-cc-arena { flex: none; min-height: 0; aspect-ratio: 2 / 1; }
  main .ca-compat .ca-cc-item img { height: 130%; }
  main .ca-compat .ca-cc-item[data-ca-key="typec"] img,
  main .ca-compat .ca-cc-item[data-ca-key="hdmi"] img { height: 32%; }
}
/* 手機：舞台再拉高（1/1），讓裝置圖更大、更易溢出畫面（PM #398990） */
@media screen and (max-width: 720px) {
  main .ca-compat .ca-cc-arena {
    width: 125vw;
    max-width: 125vw;
    transform: translateX(-12.5vw);
  }
}

/* ============================================================
   S7 — Security（sticky 背景 reveal + parallax；S8 Multi-kit 疊在同一 reveal 容器）
   桌機：文字段 / Multi-kit 為不透明 #000(z2)，中間 130vh spacer 讓 sticky 背景圖透出
   圖：center/cover，sticky 視窗高 min(70vh, 100vw/3.168)、垂直置中
   ============================================================ */
/* PM #08:50：reveal 需全寬出血。基底 main>* 會給 max-width:1920 + padding:0 40，導致
   sticky 的 S7 背景圖(reveal-bg inset:0 撐滿含 padding 區)在兩側 40px padding 露出於
   multikit/security 黑塊之外。比照其他滿版段清除 padding、max-width 提到 stage-max。 */
main .ca-reveal { position: relative; background-color: var(--black-100); max-width: var(--ca-stage-max); padding-left: 0; padding-right: 0; }
/* 背景層：撐滿 reveal 高度，內含 sticky 視窗 */
main .ca-reveal .ca-reveal-bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
main .ca-reveal .ca-reveal-sticky {
  position: sticky;
  height: min(70vh, calc(100vw / 3.168));
  top: calc((100vh - min(70vh, 100vw / 3.168)) / 2);   /* 垂直置中 */
  max-width: var(--ca-stage-max);
  margin: 0 auto;
}
main .ca-reveal .ca-reveal-crop { position: absolute; inset: 0; overflow: hidden; }
main .ca-reveal .ca-reveal-img {
  position: absolute;
  top: -10%; bottom: -10%; left: 0; right: 0;          /* 上下各留 10% 供 parallax 位移 */
  margin: 0;
  background-color: #1a1a1a;
  background-image: url('/assets/images/compactair/section7_scene_desktop.jpg');
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  will-change: transform;
}
/* 文字段 / Multi-kit：不透明黑、疊在背景之上 */
main .ca-reveal .ca-reveal-text,
main .ca-reveal .ca-reveal-multikit {
  position: relative; z-index: 2; background-color: var(--black-100);
}
/* spacer：露出背景圖的窗口 */
main .ca-reveal .ca-reveal-spacer { position: relative; z-index: 0; height: 130vh; }
/* 非桌機（≤1180）：改文件流三段直排（文字1 / 背景2 / Multi-kit3），背景圖 inline、不 parallax */
@media screen and (max-width: 1180px) {
  main .ca-reveal { display: flex; flex-direction: column; padding: 0; }
  main .ca-reveal .ca-reveal-text { order: 1; padding-bottom:0;}
  main .ca-reveal .ca-reveal-bg { order: 2; position: relative; inset: auto; }
  main .ca-reveal .ca-reveal-multikit { order: 3; padding-bottom: 0; }   /* S7 下 0：banner/內容直接接下一段 */
  main .ca-reveal .ca-reveal-sticky {
    position: relative; top: auto; height: auto; width: 100%;
    aspect-ratio: 1980 / 750;
  }
  main .ca-reveal .ca-reveal-img {
    top: 0; bottom: 0; transform: none;
    background-image: url('/assets/images/compactair/section7_scene_tablet.jpg');
  }
  main .ca-reveal .ca-reveal-spacer { display: none; }
}
@media screen and (max-width: 720px) {
  main .ca-reveal .ca-reveal-img { background-image: url('/assets/images/compactair/section7_scene_mobile.jpg'); }
}

/* ============================================================
   S8 — Multi-kit
   影片比例 1980 : 1114
   ============================================================ */
main .ca-multikit .ca-media {
  position: relative;
  width: 100%;
  aspect-ratio: 1980 / 1114;
  border-radius: var(--ca-radius-media);
  overflow: hidden;
  background-color: var(--black-80);
}
main .ca-multikit .ca-media video,
main .ca-multikit .ca-media .lazy-video {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  margin: 0;
  -o-object-fit: cover;
     object-fit: cover;
  background-size: cover;
  background-position: center;
}

/* ============================================================
   S9 — Use cases（四格）
   ============================================================ */
/* demo 規格：外框 flex 直排、兩列各自不等比 grid（同列 fr 與 aspect-ratio 分母同 1114 → 兩卡自動等高，
   一旦改成 1fr 1fr 或拿掉 aspect-ratio 就會高度不等、圖被壓縮跑版）。 */
main .ca-usecase {
  display: flex;
  flex-direction: column;
  gap: 24px;
  align-items: center;
}
main .ca-usecase .ca-usecase-row {
  width: 100%;
  display: grid;
  gap: 24px;
  align-items: start;
}
main .ca-usecase .ca-usecase-row1 { grid-template-columns: 1560fr 1980fr; }
main .ca-usecase .ca-usecase-row2 { grid-template-columns: 1980fr 1560fr; }
main .ca-usecase .ca-usecase-cell {
  position: relative;
  margin: 0;
  min-width: 0;
  border-radius: var(--ca-radius-card);
  overflow: hidden;
  background-color: var(--black-80);
}
main .ca-usecase .ca-usecase-cell.is-classroom { aspect-ratio: 1560 / 1114; }
main .ca-usecase .ca-usecase-cell.is-lecture   { aspect-ratio: 1980 / 1114; }
main .ca-usecase .ca-usecase-cell.is-meeting   { aspect-ratio: 1980 / 1114; }
main .ca-usecase .ca-usecase-cell.is-closeup   { aspect-ratio: 1560 / 1114; }
main .ca-usecase .ca-usecase-cell img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  margin: 0;
  -o-object-fit: cover;
     object-fit: cover;
  transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
main .ca-usecase .ca-usecase-cell:hover img { transform: scale(1.04); }
@media screen and (max-width: 720px) {
  /* 收窄：四張卡單欄直排，aspect-ratio 保留 */
  main .ca-usecase .ca-usecase-row1,
  main .ca-usecase .ca-usecase-row2 { grid-template-columns: 1fr; }
}

/* ============================================================
   S10 — Specification
   ============================================================ */
main .ca-spec { padding-bottom: 80px; }
main .ca-spec .ca-table {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  font-size: 18px;
}
main .ca-spec .ca-tr {
  display: flex;
  flex-direction: row;
  align-items: stretch;
}
main .ca-spec .ca-tr.is-head {
  border-radius: var(--ca-radius-card) var(--ca-radius-card) 0 0;
  overflow: hidden;
  background-color: var(--black-white);
}
main .ca-spec .ca-th,
main .ca-spec .ca-td {
  margin: 0;
  min-width: 0;
  padding: 12px 16px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: var(--black-white);
  box-shadow: inset 0 0 0 1px var(--black-white);
  overflow-wrap: anywhere;
}
main .ca-spec .ca-tr.is-head .ca-th:not(.ca-th-label) {
  color: var(--black-90);
  box-shadow: none;
  flex: 1 1 0;
}
main .ca-spec .ca-th-label,
main .ca-spec .ca-td-label {
  width: 220px;
  flex-shrink: 0 !important;
  justify-content: flex-start;
  text-align: left;
}
main .ca-spec .ca-td-val  { flex: 1 1 0; }
main .ca-spec .ca-td-span { flex: 3 1 0; }
main .ca-spec .ca-tr:last-child .ca-td-label { border-radius: 0 0 0 var(--ca-radius-card); }
main .ca-spec .ca-tr:last-child .ca-td-val:last-child { border-radius: 0 0 var(--ca-radius-card) 0; }
main .ca-spec .ca-download { margin: 0 auto; }

@media screen and (max-width: 1180px) {
  main .ca-spec .ca-inner-840 { max-width: 960px; }
}
@media screen and (max-width: 720px) {
  main .ca-spec .ca-table { font-size: 12px;}
  main .ca-spec .ca-th-label,
  main .ca-spec .ca-td-label { width: 96px; }
  main .ca-spec .ca-th,
  main .ca-spec .ca-td { padding: 8px 10px; }
}

/* ============================================================
   各 section 上下留白微調（依設計稿）
   ============================================================ */
main .ca-highlights { padding-top: 64px; }
@media screen and (max-width: 1180px) {
  main .ca-highlights { padding-top: 80px; padding-bottom: 64px; }
  main .ca-range      { padding-top: 64px; padding-bottom: 64px; }   /* S5 平板：上下 64、左右 0 */
  main .ca-compat     { padding-top: 64px; padding-bottom: 64px; }   /* S6 平板：上下 64 */
  main .ca-usecase    { padding-top: 128px; }                         /* PM #398964：S8→S9 間距加倍（原 64 → 128） */
  main .ca-spec       { padding-bottom: 80px; }
}
@media screen and (max-width: 720px) {
  main .ca-highlights { padding-top: 64px; padding-bottom: 32px; }
  main .ca-range      { padding-top: 32px; padding-bottom: 32px; }   /* S5 手機：上下 32 */
  main .ca-compat     { padding-top: 32px; padding-bottom: 32px; }   /* S6 手機：上下 32 */
  main .ca-usecase    { padding-top: 64px; }                          /* PM #398964：S8→S9 間距加倍（原 32 → 64） */
  main .ca-spec       { padding-bottom: 64px; }
}

/* T16993 修正：S9 使用 `viewport-pc viewport-tb` 複合類，需在 pc+平板都顯示、手機隱藏。
   basic_v2025.css 只有單一 class 規則（pc 時 .viewport-tb{display:none} 會蓋掉複合元素），
   故此處以更高 specificity 的複合選擇器補上正確顯示。 */
@media screen and (min-width: 721px) { .viewport-pc.viewport-tb { display: inherit !important; } }
@media screen and (max-width: 720px) { .viewport-pc.viewport-tb { display: none !important; } }

/* ============================================================
   PM #398937：S4 手機影片、describe 移圖下、手機大標 36px
   ============================================================ */
/* S4 手機：畫線互動格隱藏、改顯示影片（不可用 viewport-pc/tb class，否則 .viewport-pc.viewport-tb 會把 grid display 改成 inherit 而跑版） */
@media screen and (max-width: 720px) { main .ca-latency .ca-latency-grid { display: none; } }
main .ca-latency .ca-latency-video .ca-media {
  position: relative; width: 100%; aspect-ratio: 720 / 506;
  border-radius: var(--ca-radius-media); overflow: hidden; background-color: var(--black-80);
}
main .ca-latency .ca-latency-video .ca-media .lazy-video {
  position: absolute; inset: 0; width: 100%; height: 100%; margin: 0;
  background-size: cover; background-position: center; background-repeat: no-repeat;
}
/* LazyVideoLoader 會在 .lazy-video 內插入 <video>；需一併撐滿並 contain，否則 video 以原生尺寸溢出、只露局部 */
main .ca-latency .ca-latency-video .ca-media .lazy-video video {
  position: absolute; inset: 0; width: 100%; height: 100%; margin: 0;
  -o-object-fit: contain; object-fit: contain; display: block;
}
/* S3/S8：describe 移到圖下（與圖保留間距；此塊不再需要標題塊的下留白） */
main .ca-describe-below { margin-top: 24px; margin-bottom: 0; }
/* 手機：各段大標統一 36px */
@media screen and (max-width: 720px) {
  main .ca-section h2, main .ca-range h2, main .ca-reveal h2 { font-size: 36px; }
}