/* 生成圖接線（第三輪）：主體定位，不裁掉筆電或人物。 */

/* 首屏筆電示意：比例與圖檔一致（3:2），任何寬度都不裁切 */
.hero-mockup { aspect-ratio: 3 / 2; object-fit: cover; object-position: 70% 50%; }

/* 功能區示意：同樣以圖檔比例固定，不裁切 */
.flow-mockup { aspect-ratio: 3 / 2; object-fit: cover; object-position: center; }

/* CTA 背景：主體（椅子與茶几）在右下，靠右下定位，窄版時仍可見 */
.cta-bg { object-position: right bottom; }

/* 隱藏掛鉤：加上 is-hidden 即不顯示；拿掉 class 即恢復（契約欄位不變）。
   目前用於方案價格、常見問題兩區塊與其導覽連結（UIUX 原稿沒有這兩區）。 */
.is-hidden { display: none !important; }

/* 窄版表頭：品牌名與「選單」文字不換行、不直排 */
@media (max-width: 600px) {
  .brand-text, .brand-name, .brand-sub { white-space: nowrap; }
  .mobile-nav summary { white-space: nowrap; }
}

/* 小螢幕表頭收斂（≤480px，涵蓋 ≤400px）：隱藏 Powered by、縮小 logo 與按鈕，讓一列放得下 */
@media (max-width: 480px) {
  .header-inner { gap: 8px; }
  .brand { gap: 8px; }
  .brand-sub { display: none; }
  .brand-logo { width: 32px; height: 32px; }
  .brand-name { font-size: 16px; }
  .header-actions .btn-primary { height: 36px; padding: 0 12px; font-size: 13px; }
  .mobile-nav summary { padding: 6px 10px; font-size: 14px; }
}