/* ============ 基礎與變數（配色依 Logo：金／香檳金＋深藍黑＋米白；客戶色系參考圖到手後比對微調） ============ */
:root {
  --gold: #b8860b;
  --gold-light: #e7c983;
  --gold-pale: #f5ead2;
  /* 文字專用金：--gold 當文字對比僅 3.25(白)/3.02(cream)，未達 WCAG AA 4.5:1。
     同色相加深至 #856108 → 白 5.66 / cream 5.24 / gold-pale 4.74，三種底色全過 AA。
     僅用於「文字與連結」；裝飾用途（h2 底線、卡片上緣、step-num、t-dot、rate-example 左框）
     一律維持 --gold，配色基調不變 */
  --gold-text: #856108;
  --navy: #1c2333;
  --cream: #faf6ec;
  --white: #ffffff;
  --line-green: #06c755;
  --phone-blue: #1a5fb4;
  --text: #2a2f3a;
  --muted: #6b7080;
  /* ---- 間距階梯（8pt 基準）---- */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px; --sp-5: 24px;
  --sp-6: 32px; --sp-7: 48px; --sp-8: 64px; --sp-9: 80px; --sp-10: 96px;
  /* ---- 圓角四級 ---- */
  --r-sm: 8px;     /* 輸入框 */
  --r-md: 12px;    /* 卡片、表格、表單卡 */
  --r-lg: 20px;    /* CTA 帶 */
  --r-full: 999px; /* 按鈕 */
  /* ---- 陰影三階：靜置／浮起（hover）／抽離 ---- */
  --sh-1: 0 2px 12px rgba(28, 35, 51, .08);
  --sh-2: 0 8px 22px rgba(28, 35, 51, .14);
  --sh-3: 0 14px 34px rgba(28, 35, 51, .22);
  /* ---- 內文字級三檔（改版前有 .85/.88/.9/.92/.95/.98 六檔擠在 2px 內，肉眼分不出差別）---- */
  --fs-sm: .875rem;  /* 註解、免責、提示 */
  --fs-md: .9375rem; /* 次要說明 */
  --fs-base: 1rem;   /* 正文 */
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  font-family: "PingFang TC", "Microsoft JhengHei", "Noto Sans TC", system-ui, -apple-system, sans-serif;
  color: var(--text);
  background: var(--cream);
  line-height: 1.7;
  /* 手機底部 sticky CTA 高度留白 */
  padding-bottom: 64px;
}

.container { max-width: 1080px; margin: 0 auto; padding: 0 20px; }

h1, h2, h3 { color: var(--navy); line-height: 1.35; }

section { padding: var(--sp-7) 0; }

h2 { font-size: 1.6rem; text-align: center; margin-bottom: 28px; position: relative; }
h2::after {
  content: ""; display: block; width: 48px; height: 3px;
  background: var(--gold); margin: 10px auto 0; border-radius: 2px;
}

img { max-width: 100%; height: auto; }

/* ============ 全站 focus 樣式（無障礙）============
   改版前全站僅 1 條 focus 規則（表單 input/select），其餘 25 個可聚焦元素
   都靠瀏覽器預設 outline，在深藍底上幾乎不可見 → 鍵盤使用者無法定位。
   淺底用 --gold-text（白底 5.66:1），深底用 --gold-light（navy 上 9.78:1）。 */
:focus-visible {
  outline: 3px solid var(--gold-text);
  outline-offset: 2px;
  border-radius: 4px;
}
/* 深色底容器內改用亮金，否則深金 outline 在 navy 上看不見 */
.hero :focus-visible,
.trust-bar :focus-visible,
.company :focus-visible,
.apply :focus-visible,
.site-footer :focus-visible,
.sticky-cta :focus-visible,
.fab :focus-visible {
  outline-color: var(--gold-light);
}
/* 深底容器內的「淺色卡片」要用回深金——亮金打在白卡上僅約 1.6:1，等於沒有 focus 樣式。
   v1 在下方 .form-field 註解裡宣稱修掉了這個問題，但 .apply :focus-visible 特異性較高，
   又把它蓋了回去（實測 #f-name 聚焦時 outline 為 rgb(231,201,131) 於 rgb(255,255,255) 上）。 */
.apply #lead-form :focus-visible {
  outline-color: var(--gold-text);
}
/* 膠囊型元素的 outline 跟隨圓角，避免方框裁切感 */
.btn:focus-visible, .fab-item:focus-visible { border-radius: var(--r-full); }
.card:focus-visible, .faq-item summary:focus-visible { border-radius: var(--r-md); }
.t-dot:focus-visible { border-radius: 50%; outline-offset: 4px; }

/* ============ 按鈕 ============ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 14px 28px; border-radius: var(--r-full); border: 0;
  font-size: 1.05rem; font-weight: 700; text-decoration: none; cursor: pointer;
  transition: transform .15s, box-shadow .15s;
}
.btn:hover { transform: translateY(-2px); box-shadow: var(--sh-2); }
.btn .icon { width: 22px; height: 22px; }

.btn-line { background: var(--line-green); color: var(--white); }
.btn-phone { background: var(--phone-blue); color: var(--white); }
.btn-submit {
  background: linear-gradient(180deg, var(--gold-light), #d4a73c);
  color: var(--navy); width: 100%; font-size: 1.15rem;
}
.btn-submit:hover { background: linear-gradient(180deg, #dfba63, #c9971d); }

/* 外框按鈕：電話從「與 LINE 並列的對等選項」降為「備援選項」。
   全站只有一種實心綠（.btn-line），看到它就代表主動作。
   電話每個位置都保留得到，只是不再搶主角。 */
.btn-ghost {
  background: transparent; color: var(--phone-blue);
  border: 1.5px solid var(--phone-blue);
}
.btn-ghost:hover { background: rgba(26, 95, 180, .06); }
/* 深底版：Hero 與聯絡資訊區的深藍背景上改用白邊白字 */
.btn-ghost-light {
  background: transparent; color: var(--cream);
  border: 1.5px solid rgba(250, 246, 236, .55);
}
.btn-ghost-light:hover { background: rgba(250, 246, 236, .1); border-color: var(--cream); }

/* ============ 1. Header ============ */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(250, 246, 236, .95); backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--gold-pale);
}
.header-inner { display: flex; align-items: center; justify-content: space-between; padding-top: 8px; padding-bottom: 8px; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.brand-logo { border-radius: 50%; display: block; }
.brand-name { font-weight: 700; color: var(--navy); font-size: 1.05rem; }
/* padding 由 8px 提高到 11px：原本整顆只有 41.8px 高，未達 44px 觸控目標 */
.header-phone { padding: 11px 16px; font-size: var(--fs-md); white-space: nowrap; flex-shrink: 0; }

/* ============ 2. Hero（日出攝影＋深色遮罩，spec §1） ============ */
.hero {
  text-align: center;
  background:
    linear-gradient(180deg, rgba(20, 26, 40, .60), rgba(20, 26, 40, .80)),
    url("../img/hero-sunrise-mobile.webp") center / cover no-repeat,
    var(--navy);
  padding: 72px 0 64px;
}
.hero h1 {
  color: var(--gold-light); font-size: 2rem; letter-spacing: .02em;
  text-shadow: 0 1px 8px rgba(0, 0, 0, .35);
}
/* text-wrap: balance 讓兩行字數平均，避免 390 寬下折出「全程保／密」的單字孤行。
   不支援的瀏覽器自動忽略、回到原本折行（漸進增強，無 fallback 風險） */
.hero-sub { font-size: 1.15rem; color: #f2efe6; margin: 14px 0 18px; text-wrap: balance; }
/* 信任標籤：文字取自費率揭露區既有內容 */
.hero-badges {
  list-style: none; display: flex; flex-wrap: wrap;
  justify-content: center; gap: 10px; margin-bottom: 26px;
}
.hero-badges li {
  padding: 7px 16px; border-radius: var(--r-full);
  border: 1px solid rgba(231, 201, 131, .55);
  background: rgba(231, 201, 131, .1);
  color: var(--gold-light); font-size: var(--fs-md); font-weight: 700;
  white-space: nowrap;
}
.cta-group { display: flex; flex-direction: column; gap: var(--sp-3); align-items: center; }
.cta-group .btn { width: min(320px, 100%); }
/* 主 CTA 加大並獨佔一行，次要按鈕縮小改外框——一主一次，不讓訪客多做一次選擇 */
.btn-primary-cta { padding: 17px 32px; font-size: 1.15rem; }
.hero-phone-cta { padding: 11px 24px; font-size: var(--fs-base); }

/* 非服務時間提示：兩處都在深藍底上，--gold-light 對 navy 9.78:1 */
.offhours-note {
  margin-top: var(--sp-3); text-align: center;
  color: var(--gold-light); font-size: var(--fs-md);
}
.offhours-note[hidden] { display: none; }

/* ============ 3. 信任條 ============ */
.trust-bar { background: var(--navy); padding: var(--sp-5) 0; border-top: 2px solid var(--gold); }
.trust-grid { display: flex; justify-content: space-around; gap: 8px; }
.trust-item { text-align: center; color: var(--gold-light); }
.trust-item .icon { width: 28px; height: 28px; }
.trust-item p { font-size: var(--fs-md); font-weight: 700; margin-top: 4px; color: var(--cream); }

/* ============ 4. 服務項目 ============ */
/* 5 張卡在 repeat(3,1fr) 格線下排成 3＋2，第二排右側空一格像沒做完。
   改 flex wrap ＋ justify-content:center 讓第二排自動置中 */
.card-grid { display: flex; flex-wrap: wrap; gap: var(--sp-4); justify-content: center; }
.card { flex: 1 1 100%; }
/* 手機 2 欄：390 螢幕下每欄 169px，扣原本 24px padding 只剩 121px 內容寬，
   以 .98rem 一行僅 7~8 字、30 字要折 4 行以上。
   padding 降到 14、字級降到 --fs-sm，內容寬回到 141px、一行約 10 字。文案因此不需要改 */
@media (max-width: 767px) {
  .card-grid { gap: var(--sp-3); }
  .card { flex: 0 1 calc(50% - var(--sp-3) / 2); padding: var(--sp-4) 14px; }
  .card p { font-size: var(--fs-sm); }
  .card-icon { width: 34px; height: 34px; margin-bottom: var(--sp-2); }
  .card h3 { font-size: 1.05rem; }
  .card:last-child { flex-basis: 100%; }  /* 第 5 張跨滿兩欄 */
  /* 2×2 佈局移除連接符：網格中的箭頭無法表達 1→2→3→4 的單一流向，反而誤導。
     步驟編號圓圈本身已表達順序。桌機的橫向「→」不受影響 */
  .steps { grid-template-columns: repeat(2, 1fr); gap: var(--sp-5) var(--sp-3); }
  .step:not(:last-child)::after { display: none; }
}
.card {
  background: var(--white); border-radius: var(--r-md); padding: 24px;
  box-shadow: var(--sh-1); border-top: 3px solid var(--gold-light);
  transition: transform .2s, box-shadow .2s;
}
.card:hover { transform: translateY(-4px); box-shadow: var(--sh-2); }
.card-primary { border: 1px solid var(--gold); border-top: 3px solid var(--gold); background: linear-gradient(180deg, #fffdf7, var(--white)); }
.card-icon { width: 42px; height: 42px; color: var(--gold); margin-bottom: 12px; }
.card h3 { font-size: 1.2rem; margin-bottom: 8px; }
.card p { color: var(--muted); font-size: var(--fs-md); }

/* ============ 5. 申辦流程（改白底：深藍收成頭尾兩帶，中段五塊全亮）============
   原本為深藍底，前景用的是 --gold-light / --cream / #b9bdc9 這些「為深底調的亮色」，
   換白底後全部會消失，故下方每一個前景色都重算過。 */
.process { background: var(--white); }
.process h2 { color: var(--navy); }
.steps { list-style: none; display: grid; gap: 20px; counter-reset: step; }
.step { text-align: center; position: relative; }
.step-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--gold); color: var(--white); font-weight: 700; font-size: 1.2rem;
  margin-bottom: 8px; box-shadow: 0 0 0 4px rgba(231, 201, 131, .18);
}
.step h3 { font-size: 1.1rem; color: var(--navy); }
.step p { color: var(--muted); font-size: var(--fs-md); }
/* 手機直向連接符（桌機由檔尾 media query 同名規則覆寫為「→」，覆寫依賴宣告順序） */
.step:not(:last-child)::after {
  content: "↓"; display: block; color: var(--gold);
  font-size: 1.2rem; margin-top: 10px;
}

/* ============ 6. 費率揭露 ============ */
/* 舊版為四列橫表、dt/dd 左右對排，四列視覺等重——訪客最在意的「4%～16%」與「申辦年齡」
   份量相同。改 2×2 卡片格線：標籤降為小字、值升為主角，法條與攤還方式拆成註腳。
   合規三項字級全部變大，符合 v2 spec §38「揭露類文字只允許變大、變亮、對比更高」。 */
.rate-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-3); }
/* 欄寬公式 vw/2 - 62（container 40 ＋ gap 12 ＋ 卡片 padding 36）。
   最長的值「3 ～ 60 個月」實測 120px @1.35rem，需 vw ≥ 364 才放得下——360px 的 Android 差 2px 會折行，
   故手機字級取 1.3rem（實測降到約 116px），360px 起兩欄都是單行。
   <360px 欄寬僅 98px，退回單欄（單欄會讓本區高度增為約 2.3 倍，非必要不用）。
   萬一某裝置字體較寬而折行：grid 同列高度自動齊平，只是變高，不會溢出。 */
@media (max-width: 359px) { .rate-grid { grid-template-columns: 1fr; } }
.rate-item {
  background: var(--white); border-radius: var(--r-md); box-shadow: var(--sh-1);
  border-top: 3px solid var(--gold-light); padding: 16px 18px;
}
/* 重點兩格＝Hero 兩個信任標籤（年利率 4%～16%／免手續費）的出處 */
.rate-item-key {
  border-top-color: var(--gold);
  background: linear-gradient(180deg, #fffdf7, var(--white));
}
.rate-item dt { font-size: var(--fs-sm); font-weight: 700; color: var(--muted); letter-spacing: .03em; }
.rate-value {
  display: block; font-size: 1.3rem; font-weight: 700; color: var(--navy);
  line-height: 1.35; margin-top: 2px;
}
.rate-note { display: block; font-size: var(--fs-sm); color: var(--muted); margin-top: 6px; line-height: 1.6; }

/* 試算範例：舊版是一整段文字，五個數字埋在句子裡——這是訪客判斷「付不付得起」的唯一依據，
   也是 Google 財務廣告要看的代表性範例，卻最難掃讀。拆成條件行＋三格數字＋註腳。 */
.rate-example {
  margin-top: var(--sp-4); background: var(--white); border-left: 4px solid var(--gold);
  border-radius: var(--r-md); padding: 18px 20px; box-shadow: var(--sh-1);
}
.rate-example h3 { font-size: 1.05rem; }
.rate-cond { font-size: var(--fs-md); color: var(--muted); margin-top: 4px; }
/* 手機用收據式（標籤左、數字右）；桌機於檔尾 media query 改三欄並排。
   390px 下三欄每欄僅約 98px，放不下「約 108,876 元」 */
.rate-calc { list-style: none; display: grid; gap: var(--sp-2); margin: var(--sp-3) 0; }
.rate-calc li {
  display: flex; justify-content: space-between; align-items: baseline; gap: var(--sp-3);
  background: var(--cream); border-radius: var(--r-sm); padding: 10px 14px;
}
.rate-calc span { font-size: var(--fs-sm); color: var(--muted); }
.rate-calc strong { font-size: 1.1rem; color: var(--navy); white-space: nowrap; }
/* 三格刻意等重，不放大「每期應繳」：在借貸揭露裡凸顯月付、相對弱化總還款金額，
   正是主管機關與 Google 財務廣告政策針對的呈現方式。等重才是揭露該有的樣子。 */
.rate-fineprint { font-size: var(--fs-sm); color: var(--muted); line-height: 1.7; }

/* ============ 3.5 客戶見證（改白底單則大引號輪播）============
   原為深藍底。上移到第 3 位後底色轉亮，所有前景色重算：
   白底不放白卡片，此區純文字，故白底最好讀（服務項目與費率揭露含白卡／白表格，維持 cream 底）。 */
.testimonials { background: var(--white); }
.testimonials h2 { color: var(--navy); }
.t-slider { max-width: 720px; margin: 0 auto; text-align: center; padding-top: var(--sp-2); }
/* 大引號裝飾：白底上 .65 太淡，提高到 .85 */
.t-slider::before {
  content: "\201C"; display: block; font-size: 4.5rem; line-height: .8;
  color: var(--gold); opacity: .85; font-family: Georgia, serif;
  margin-bottom: var(--sp-2);
}
/* 疊層堆放：所有 slide 佔同一格，fade 切換且高度取最高者，不跳動 */
.t-slides { display: grid; }
.t-slide {
  grid-area: 1 / 1; opacity: 0; visibility: hidden;
  transition: opacity .5s ease, visibility .5s;
}
.t-slide.active { opacity: 1; visibility: visible; }
.t-quote {
  font-size: 1.1rem; line-height: 2; color: var(--text);
  margin-bottom: 18px; letter-spacing: .02em;
}
.t-who { color: var(--gold-text); font-weight: 700; font-size: var(--fs-md); }
/* 切換圓點（僅 2 則以上時由 JS 產生） */
.t-dots { display: flex; justify-content: center; gap: 0; margin-top: 12px; }
.t-dots:empty { display: none; }
/* 視覺仍是 10px 圓點，但按鈕本體撐到 44×44 觸控目標（舊版整顆只有 10×10） */
.t-dot {
  width: 44px; height: 44px; padding: 0; cursor: pointer;
  border: 0; background: transparent;
  display: inline-flex; align-items: center; justify-content: center;
}
/* 邊框改 --gold：--gold-light 在白底僅約 1.7:1，非文字 UI 元件需 3:1（WCAG 1.4.11） */
.t-dot::before {
  content: ""; width: 10px; height: 10px; border-radius: 50%;
  border: 1px solid var(--gold); background: transparent;
  transition: background .3s, transform .3s, border-color .3s;
}
.t-dot.active::before { background: var(--gold); border-color: var(--gold); transform: scale(1.2); }
/* 免責聲明：文字一字未改。v1 已把它從 4.93:1 拉到 7.01:1（深藍底），
   換白底後必須維持 ≥7:1，不得因換底色掉回去 */
.t-disclaimer {
  max-width: 640px; margin: var(--sp-5) auto 0; text-align: center;
  color: #4f5460; font-size: var(--fs-sm); line-height: 1.75;
  border-top: 1px solid rgba(28, 35, 51, .14); padding-top: var(--sp-4);
}

/* ============ 中段情境 CTA 帶 ============
   改版前從服務項目到表單之間五個區塊、約三千像素的捲動距離沒有任何轉換點。
   常駐底欄／浮動鈕是通用的，不會在「訪客剛對號入座」的當下說話。
   做成帶狀而非滿版按鈕，不打斷閱讀節奏。 */
.cta-band {
  max-width: 560px; margin: var(--sp-6) auto 0;
  background: linear-gradient(180deg, var(--cream), var(--gold-pale));
  border: 1px dashed var(--gold); border-radius: var(--r-lg);
  padding: var(--sp-5) var(--sp-4); text-align: center;
}
.cta-band p { color: var(--navy); font-weight: 700; margin-bottom: var(--sp-3); }
.cta-band .btn { width: min(280px, 100%); }
/* FAQ 是白底，CTA 帶要往下一階才有層次 */
.faq .cta-band { background: linear-gradient(180deg, var(--gold-pale), #f0e2c4); }

/* ============ 7. FAQ ============ */
.faq { background: var(--white); }
.faq-item {
  background: var(--cream); border-radius: var(--r-md); margin-bottom: 12px;
  padding: 0 18px; border: 1px solid var(--gold-pale);
}
.faq-item summary {
  padding: 15px 0; font-weight: 700; color: var(--navy); cursor: pointer; list-style: none;
  position: relative; padding-right: 28px;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "＋"; position: absolute; right: 2px; top: 50%; transform: translateY(-50%);
  color: var(--gold-text); font-weight: 700;
}
.faq-item[open] summary::after { content: "－"; }
.faq-item p { padding: 0 0 15px; color: var(--muted); }

/* ============ 8. 表單 ============ */
/* 轉換區比一般區塊多一階留白：手機 64、桌機 96（見檔尾 media query） */
.apply { background: var(--navy); padding: var(--sp-8) 0; }
.apply h2 { color: var(--gold-light); }
.apply-note { text-align: center; color: #b9bdc9; margin: -16px 0 24px; }
#lead-form {
  background: var(--white); border-radius: var(--r-md);
  box-shadow: var(--sh-3);
  padding: 28px 22px; max-width: 560px; margin: 0 auto;
}
.form-field { margin-bottom: 18px; }
/* 金額與地區並排。窄螢幕退回單欄——169px 的下拉放不下「30 萬以上」 */
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); }
@media (max-width: 399px) { .form-row { grid-template-columns: 1fr; gap: 0; } }
.form-field label { display: block; font-weight: 700; color: var(--navy); margin-bottom: 6px; font-size: var(--fs-md); }
.form-field .req { color: #c0392b; margin-left: 2px; }
.form-field input[type="text"],
.form-field input[type="tel"],
.form-field select {
  width: 100%; padding: 12px 14px; border: 1px solid #d8d3c4; border-radius: var(--r-sm);
  font-size: 1rem; background: var(--cream); color: var(--text);
  transition: border-color .15s;
}
/* outline 交由全站 :focus-visible 統一處理（舊版用 --gold-light，在白卡上對比僅 1.7:1 看不見） */
.form-field input:focus, .form-field select:focus { border-color: var(--gold); }

/* 欄位格式提示與錯誤訊息（原本只有瀏覽器原生氣泡「請符合要求的格式。」，無法指出格式） */
.field-hint { font-size: var(--fs-sm); color: var(--muted); margin-top: 5px; }
.field-error {
  font-size: var(--fs-sm); font-weight: 700; color: #c0392b; margin-top: 6px;
  display: flex; align-items: flex-start; gap: 5px;
}
.field-error::before { content: "⚠"; flex-shrink: 0; }
.field-error[hidden] { display: none; }
/* 錯誤欄位視覺標示：紅框 + 淡紅底，不只靠顏色（另有 ⚠ 圖示與文字） */
.form-field [aria-invalid="true"] {
  border-color: #c0392b !important; background: #fdf3f2;
}
/* honeypot：視覺與輔助流程完全隱藏 */
.hp-field { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
.form-consent { display: flex; gap: 10px; align-items: flex-start; }
/* 24×24 達 WCAG 2.2 AA（2.5.8 最小觸控目標）；舊版原生 13×13 手機極難點中。
   label 本身可點，實際觸控面積遠超 44px */
.form-consent input[type="checkbox"] {
  width: 24px; height: 24px; flex-shrink: 0; margin: 0;
  accent-color: var(--gold); cursor: pointer;
}
.form-consent label { font-weight: 400; font-size: var(--fs-md); color: var(--muted); cursor: pointer; }
.form-consent a { color: var(--gold-text); }

/* 送出結果：舊版僅單行文字（min-height 1.5em），手機上鍵盤收起後容易錯過。
   改卡片式並由 JS 捲動到視野中央 */
.form-msg {
  margin-top: 16px; font-weight: 700; padding: 14px 16px;
  border-radius: var(--r-md); border-left: 4px solid currentColor;
  display: flex; align-items: flex-start; gap: 8px; line-height: 1.6;
}
.form-msg[hidden] { display: none; }
.form-msg::before { flex-shrink: 0; }
.form-msg.ok { color: #16693a; background: #eaf6ee; }
.form-msg.ok::before { content: "✓"; }
.form-msg.err { color: #a5301f; background: #fdeeec; }

/* 送出成功後才顯示的 LINE 導流 */
.form-line-cta { margin-top: var(--sp-4); text-align: center; }
.form-line-cta[hidden] { display: none; }
.form-line-cta p { color: var(--muted); font-size: var(--fs-md); margin-bottom: var(--sp-2); }
.form-line-cta .btn { width: 100%; }
.form-msg.err::before { content: "⚠"; }

/* ============ 9. 公司資訊（改深藍底，與表單、Footer 構成尾部深色帶）============
   內部 .company-list 是白卡片、自帶白底，卡內文字不受底色變更影響。
   舊版五列同一種「標籤：值」排版，可行動項（電話／LINE）與純資訊項混在一起且無層級，
   且列表連結與正下方兩顆 CTA 是同一個動作。現在卡片只留純資訊兩列、加圖示與標籤／值分層，
   行動全部由 .company-cta 承擔。列表已無連結，v1 為文字連結補的 44px 觸控目標規則
   （inline-block + padding，實測仍只有 43.2px）連同虛線分隔一併移除。 */
.company { background: var(--navy); }
.company h2 { color: var(--gold-light); }
.company-list {
  list-style: none; max-width: 560px; margin: 0 auto;
  background: var(--white); border-radius: var(--r-md); box-shadow: var(--sh-1);
  padding: 20px 22px; display: grid; gap: var(--sp-4);
}
@media (min-width: 560px) { .company-list { grid-template-columns: 1fr 1fr; gap: var(--sp-5); } }
.company-list li { display: flex; align-items: flex-start; gap: 12px; }
/* --gold-text（非 --gold）：白卡上 5.66:1，圖示與標籤同屬前景資訊不做低對比裝飾 */
.c-icon { width: 22px; height: 22px; color: var(--gold-text); flex-shrink: 0; margin-top: 4px; }
.c-label { display: block; font-size: var(--fs-sm); font-weight: 700; color: var(--muted); }
.c-value { display: block; font-size: 1.05rem; font-weight: 700; color: var(--navy); line-height: 1.5; }
/* 漏斗尾端 CTA：舊版此區只有文字連結（實測 107×21px），滑到最後沒有可按的按鈕 */
.company-cta {
  display: flex; flex-direction: column; gap: 12px;
  max-width: 560px; margin: 20px auto 0;
}
.company-cta .btn { width: 100%; }

/* ============ 10. Footer ============ */
.site-footer { background: var(--navy); color: #b9bdc9; padding: 32px 0; text-align: center; font-size: var(--fs-sm); }
.footer-nav { margin-bottom: 14px; }
.footer-nav a { color: var(--gold-light); text-decoration: none; }
.footer-nav a:hover { text-decoration: underline; }
.disclaimer { max-width: 640px; margin: 0 auto 10px; line-height: 1.8; }
/* #7d8290 在 navy 上僅 4.09:1，未達 AA 4.5 */
.copyright { color: #8d92a0; }

/* ============ 11. 手機 sticky 底欄 ============ */
.sticky-cta {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 100;
  display: flex; height: 56px;
  box-shadow: 0 -2px 10px rgba(28, 35, 51, .2);
}
.sticky-cta a {
  flex: 1; display: flex; align-items: center; justify-content: center;
  color: var(--white); font-weight: 700; font-size: 1.05rem; text-decoration: none;
}
/* 2:1 而非對半分。電話仍有約 130×56px，遠超 44px 觸控目標。
   選擇器必須帶 .sticky-cta：上方 `.sticky-cta a { flex: 1 }` 特異性 (0,1,1)
   高於單一 class (0,1,0)，只寫 .sticky-line 的 flex 會被蓋掉 */
.sticky-cta .sticky-line { background: var(--line-green); flex: 2; }
.sticky-cta .sticky-phone { background: #16406f; flex: 1; font-size: var(--fs-md); }

/* ============ 12. 桌機浮動聯絡按鈕（基礎隱藏，768px+ 於檔尾 media query 顯示） ============ */
/* 舊版帶文字 pill 寬 172px，left 邊緣 1084 < container 右緣 1180 → 全站 9 個 section
   被侵入 96px（含遮住費率揭露文字）。改 56px 圓鈕後左緣 1204 > 1180，淨空。 */
.fab {
  position: fixed; right: 20px; bottom: 24px; z-index: 100;
  display: none; flex-direction: column; align-items: flex-end; gap: 12px;
}
.fab-item {
  display: inline-flex; align-items: center; justify-content: center; gap: 0;
  width: 56px; height: 56px; padding: 0; border-radius: var(--r-full);
  color: var(--white); font-weight: 700; font-size: var(--fs-md);
  text-decoration: none; white-space: nowrap; overflow: hidden;
  box-shadow: var(--sh-2);
  transition: width .25s ease, gap .25s ease, padding .25s ease, transform .2s, box-shadow .2s;
}
/* hover / 鍵盤聚焦時向左展開文字標籤 */
.fab-item:hover, .fab-item:focus-visible {
  width: auto; padding: 0 20px; gap: 9px;
  transform: translateY(-2px); box-shadow: var(--sh-3);
}
.fab-item .icon { width: 24px; height: 24px; flex-shrink: 0; }
/* 用 max-width 收合而非 display:none，螢幕閱讀器仍能讀到按鈕名稱 */
.fab-label {
  max-width: 0; opacity: 0;
  transition: max-width .25s ease, opacity .18s ease;
}
.fab-item:hover .fab-label, .fab-item:focus-visible .fab-label { max-width: 200px; opacity: 1; }
.fab-item-line { background: var(--line-green); }
/* 電話縮為 48px，LINE 維持 56px——尺寸即層級 */
.fab-item-phone { background: var(--phone-blue); width: 48px; height: 48px; }
.fab-item-phone .icon { width: 21px; height: 21px; }

/* ============ 隱私權政策頁 ============ */
/* 本頁無 .sticky-cta，不需要 body 為底欄預留的 64px */
.privacy-page { padding-bottom: 0; }
.privacy-page main { padding: 40px 0 64px; }
.privacy-page h1 { font-size: 1.7rem; margin-bottom: 24px; }
.privacy-page h2 { text-align: left; font-size: 1.2rem; margin: 28px 0 10px; }
.privacy-page h2::after { display: none; }
.privacy-page p, .privacy-page li { color: var(--text); font-size: var(--fs-base); }
.privacy-page ul { padding-left: 22px; margin: 8px 0; }
.privacy-page .updated { color: var(--muted); font-size: var(--fs-sm); margin-bottom: 20px; }

/* ============ 桌機（768px+） ============ */
@media (min-width: 768px) {
  section { padding: var(--sp-9) 0; }   /* 一般區塊 80（原 64） */
  .apply { padding: var(--sp-10) 0; }   /* 轉換區 96 */
  h2 { font-size: 1.9rem; }

  /* 桌機僅覆寫 background-image（換高解析度橫式圖＋加深遮罩）；position/size/repeat 沿用基礎 .hero */
  .hero {
    background-image:
      linear-gradient(180deg, rgba(20, 26, 40, .62), rgba(20, 26, 40, .78)),
      url("../img/hero-sunrise.webp");
    padding: 110px 0 96px;
  }
  .hero h1 { font-size: 2.8rem; }
  .hero h1 br { display: none; }
  .hero-sub { font-size: 1.3rem; }
  .hero-badges li { font-size: 1rem; padding: 8px 20px; }
  /* 桌機刻意不改回橫排：主鈕獨佔一行才拉得出層級 */
  .cta-group .btn { width: auto; min-width: 280px; }
  .hero-phone-cta { min-width: 200px; }

  .company-cta { flex-direction: row; justify-content: center; }
  .company-cta .btn { width: auto; min-width: 200px; }

  /* 費率：值再放大一階；試算三格由收據式改為三欄並排（桌機寬度夠，橫向比較更快） */
  .rate-value { font-size: 1.5rem; }
  .rate-calc { grid-template-columns: repeat(3, 1fr); }
  .rate-calc li {
    flex-direction: column; align-items: center; justify-content: center;
    gap: 2px; padding: 14px 12px; text-align: center;
  }

  .card { flex: 0 1 calc(33.333% - var(--sp-3)); }
  .t-quote { font-size: 1.3rem; }
  .steps { grid-template-columns: repeat(4, 1fr); }
  /* 覆寫手機「↓」：與基礎規則同 specificity，必須宣告在其後才生效 */
  .step:not(:last-child)::after {
    content: "→"; position: absolute; right: -14px; top: 10px;
    color: var(--gold); font-size: 1.4rem; margin-top: 0;
  }
}

/* ============ 浮動 CTA 切換點（1240px）============
   container 外框 1080 置中，FAB 56 + 右邊距 20，需 (vw-1080)/2 ≥ 76 → vw ≥ 1232，取 1240。
   實測：1024 遮 76px、1100 遮 66px、1200 遮 16px、1240 淨空 4px、1440 淨空 104px。
   故 1240 以下一律改用全寬 sticky 底欄——固定條只吃底部 56px，橫向不遮任何內容。 */
@media (min-width: 1240px) {
  body { padding-bottom: 0; }
  .sticky-cta { display: none; }
  .fab { display: flex; }
}

/* ============ 捲動漸入動效（JS 掛 .reveal，spec §3） ============ */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .6s ease, transform .6s ease; }
.reveal.visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .btn, .card, .fab-item, .fab-label,
  .t-dot::before, .form-field input, .form-field select { transition: none; }
  /* 見證輪播的 fade 也停用（JS 端另有 reduced 判斷不自動輪播，此處讓手動切換即時生效） */
  .t-slide { transition: none; }
}
@media print {
  .reveal { opacity: 1; transform: none; transition: none; }
}