/* 首頁版面對齊線與間距 token — 2026-09-09（CC4 H0 第三批，站長：「各區塊忽寬忽窄、沒有固定版型」）
   目的：全頁主要區塊共用同一條內容對齊線（= 站頭 .max-w-6xl 1152px 扣兩側 px-4 ⇒ 1120px，logo／導覽的視覺邊），
   側邊距統一 16px，區塊上下留白收斂成三檔；並修首載 CLS（#home-app SSR 為空，Vue 掛載前先撐高）。
   只覆寫「容器寬／padding／margin」，不改任何元件內部樣式、不動 hero 主視覺、支付列、電子發票卡內容。
   載入順序在所有首頁 CSS 之後；hero 與 bento 原檔用 !important，這裡以 !important + 更高特異性覆寫。
   滿版背景（hero／pricing／landing-cta／security-ratings 的 section 本身）刻意維持 100vw，只對齊「內層內容容器」。 */
body.home-page{
  --home-max: 1120px;
  --home-gutter: 1rem;
  --home-edge: max(var(--home-gutter), calc((100% - var(--home-max)) / 2));
  --home-sec-pad: clamp(1.75rem, 3vw, 2.5rem);   /* 大區塊上下 28→40px（原 36～60px 不等） */
  --home-band-pad: 1.125rem;                      /* 宣傳條／廣告條上下 18px（原 18～28px） */
  --home-gap: 1.5rem;                             /* 相鄰工具／廣告區塊 24px（原 24～36px） */
}

/* ── 1. 內容容器：統一主對齊線 ─────────────────────────────── */
body.home-page .einv__inner,
body.home-page .app-dl__inner,
body.home-page .xnad__inner,
body.home-page .pnad__link,
body.home-page .trust-wall__inner,
body.home-page .pricing-banner__inner,
body.home-page .customs-tiers__inner,
body.home-page .mcpad__wrap > .mcpad,
body.home-page .scrmad__wrap > .scrmad,
body.home-page .faqrow,
body.home-page .home-faq__container,
body.home-page .social-follow__inner,
body.home-page .social-follow__grid{ max-width: var(--home-max); }
/* 這兩個 section 的容器是 inline style，須 !important */
body.home-page .home-compare > div,
body.home-page .home-seo-platforms > div{ max-width: var(--home-max) !important; }
body.home-page .security-ratings__inner{ width: min(var(--home-max), 100%); }
/* 自帶左右 padding 的包裝層：外寬 = 對齊線 + 兩側 gutter */
body.home-page .iwm-ad__wrap,
body.home-page .hcad{ max-width: calc(var(--home-max) + 2 * var(--home-gutter)); padding-left: var(--home-gutter); padding-right: var(--home-gutter); }
body.home-page.landing-active .bento-grid,
body.home-page.landing-active .quick-services-grid{ max-width: calc(var(--home-max) + 2 * var(--home-gutter)) !important; padding-left: var(--home-gutter) !important; padding-right: var(--home-gutter) !important; }
/* mcpad／crmad 的外框原本 1200px 置中、內層 1160 靠左：外框收到「對齊線 + gutter」讓內層剛好貼線 */
body.home-page .mcpad__wrap,
body.home-page .scrmad__wrap{ max-width: calc(var(--home-max) + 2 * var(--home-gutter)); margin-left: auto; margin-right: auto; }
/* 頁尾只在首頁對齊同一條線（共用 layout 檔未動） */
body.home-page .footer .footer-container{ max-width: calc(var(--home-max) + 2 * var(--home-gutter)); padding-left: var(--home-gutter); padding-right: var(--home-gutter); }
body.home-page .footer .seo-footer-cluster{ padding-left: var(--home-gutter) !important; padding-right: var(--home-gutter) !important; }   /* inline style 24px */
body.home-page .footer .seo-footer-cluster > div{ max-width: var(--home-max) !important; }                                                  /* inline style 1200px */
body.home-page .footer{ padding-left: 0; padding-right: 0; }

/* ── 2. section 左右 padding 統一 16px（滿版背景不變，只收內容） ─── */
body.home-page .einv,
body.home-page .app-dl,
body.home-page .xnad,
body.home-page .pnad,
body.home-page .trust-wall,
body.home-page .pricing-banner,
body.home-page .customs-tiers,
body.home-page .mcpad__wrap,
body.home-page .scrmad__wrap,
body.home-page .faqrow__band,
body.home-page .home-faq,
body.home-page .social-follow,
body.home-page .landing-cta,
body.home-page .security-ratings{ padding-left: var(--home-gutter); padding-right: var(--home-gutter); }
body.home-page .home-compare,
body.home-page .home-seo-platforms{ padding-left: var(--home-gutter) !important; padding-right: var(--home-gutter) !important; }

/* ── 3. 垂直節奏三檔 ───────────────────────────────────────── */
body.home-page .einv,
body.home-page .app-dl,
body.home-page .xnad,
body.home-page .pnad{ padding-top: var(--home-band-pad); padding-bottom: var(--home-band-pad); }
body.home-page .trust-wall,
body.home-page .pricing-banner,
body.home-page .customs-tiers,
body.home-page .home-faq,
body.home-page .social-follow{ padding-top: var(--home-sec-pad); padding-bottom: var(--home-sec-pad); }
body.home-page .home-compare,
body.home-page .home-seo-platforms{ padding-top: var(--home-sec-pad) !important; padding-bottom: var(--home-sec-pad) !important; }
body.home-page .landing-cta{ padding-top: 3rem; padding-bottom: 3rem; }
body.home-page .iwm-ad__wrap{ margin-top: var(--home-gap); margin-bottom: var(--home-gap); }
body.home-page .hcad{ margin-bottom: var(--home-gap); }
body.home-page .mcpad__wrap,
body.home-page .scrmad__wrap{ margin-top: var(--home-gap); margin-bottom: 0; }
body.home-page .faqrow__band{ padding-top: var(--home-gap); padding-bottom: .5rem; }
body.home-page.landing-active .bento-grid{ padding-top: var(--home-gap) !important; }
body.home-page.landing-active .quick-services-grid{ padding-bottom: var(--home-gap) !important; }

/* ── 4. Hero 文案欄跟同一條線走（≥1024；原檔 hero-desktop-left.css 用 !important）
      下限 132px 讓節慶左側直匾（平安月，約 35~120px）不被壓到；上限 268px 維持超寬螢幕原本取景。 */
@media (min-width: 1024px){
  body.home-page #landing-hero .hero-content{ margin-left: clamp(132px, var(--home-edge), 268px) !important; }
  body.home-page #landing-hero.ib-lit .hero-content{ margin-left: calc(clamp(132px, var(--home-edge), 268px) + 3vw) !important; }
  body.home-page #landing-hero .scroll-indicator{ left: clamp(132px, var(--home-edge), 268px) !important; }
}
/* 手機／平板：hero 文案左緣對齊 16px（原 5.5% ≈ 21px），左側品牌直條跟著內縮 */
@media (max-width: 1023px){
  body.home-page #landing-hero .hero-content{ padding-left: var(--home-gutter) !important; }
  body.home-page #landing-hero .hero-content::before{ left: 6px; }
}

/* ── 5. 首載 CLS：#home-app 是 client-side 渲染（SSR 為空），掛載前先撐一個視窗高，
      下方 SSR 的安全評級與頁尾不會先出現在首屏再被推走；hero 圖示先佔寬，FontAwesome 載入後不再重排。 */
body.home-page #home-app{ min-height: 100vh; }
/* body 的 landing-active 是 Vue 掛載後才加的：掛載前 .main-content／.home-container 還是 1280px 版型，掛載瞬間撐到滿版
   （實測 CLS 0.106）。首頁一律直接套滿版規則，掛載前後版型一致。 */
body.home-page .main-content{ max-width: none !important; padding: 0 !important; }
body.home-page .home-container{ width: 100% !important; max-width: none !important; margin: 0 !important; padding: 0 !important; }
body.home-page #landing-hero .fas,
body.home-page #landing-hero .fab,
body.home-page #landing-hero .far{ display: inline-block; width: 1.25em; line-height: 1; text-align: center; overflow: hidden; vertical-align: -.125em; }
body.home-page #landing-hero .hero-pay .fas,
body.home-page #landing-hero .hero-pay .fab{ width: auto; overflow: visible; }   /* 支付 chip 內的圖示維持原尺寸 */