/**
 * public/site/site.css
 *
 * 行銷首頁（/）與方案頁（/pricing）的樣式。這兩頁是純 HTML、不進 Vue SPA，
 * 所以吃不到 Vuetify 的色票與字級 —— 這支檔案的第一段就是把 plugins/vuetify.ts
 * 與 styles/settings.scss 的那一套「原值」抄成 CSS 變數。
 *
 * 抄，而不是另外調一套：訪客點完 CTA 的下一秒就會看到產品本體，兩邊看起來必須是
 * 同一個東西。所以改色票請改 plugins/vuetify.ts，再同步回這裡；不要只改一邊。
 */

:root {
  /* ===== 色票：值與名稱完全取自 plugins/vuetify.ts 的 customLightTheme ===== */
  /* 對比數字是該檔註解裡已經驗過的，照抄以免這裡又被人「順手調亮一點」 */
  --primary: #0077d6; /* 白底 4.56:1，過 AA */
  --primary-rgb: 0, 119, 214; /* 同一個藍，給 rgba() 用（氣泡底色需要半透明）*/
  --primary-tint-weak: #ebf6ff; /* 最淺的區塊底 */
  --primary-tint: #dbedfb; /* 選取列、chip 底 */
  --primary-muted: #427daa; /* 4.43:1，只能當邊框與元件，不可當文字 */
  --primary-darken-1: #124c7a; /* app bar 底 */
  --primary-darken-2: #053f6e; /* 深色按鈕 */
  --primary-darken-3: #002441; /* 側欄底 */

  --secondary: #9ca0a5; /* 2.63:1 邊框、分隔線、停用，不可當文字 */
  --neutral-line: #e1e1e1; /* 分隔線、卡片外框 */
  --neutral-surface: #f1f3f4; /* 區塊底、表頭 */
  --muted: #6e7378; /* 4.79:1 —— 全站的灰字都用它 */

  --success: #2a7a0b;
  --error: #d32f2f;
  --warning: #b45309;
  --success-tint: #f1f9ee;

  --surface: #ffffff;
  --background: #eeeeee;
  --on-surface: #000000;

  /* ===== 字級：styles/settings.scss 的 $typography 五級 ===== */
  /* 40 只有 .text-display（單獨站著的主視覺大字），22/18/16/14 是 h6/subtitle-1/body-2/caption */
  --fs-display: 2.5rem; /* 40px / 1.2 / 700 */
  --fs-title: 1.375rem; /* 22px / 1.4 */
  --fs-section: 1.125rem; /* 18px / 1.5 —— 區塊標題 */
  --fs-body: 1rem; /* 16px / 1.5 —— 內文 */
  --fs-caption: 0.875rem; /* 14px / 1.5 —— 次要 */

  /* 間距沿用 Vuetify 的 4px 基數。24 是卡片內距與左邊界的統一值（見 !123） */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-12: 48px;
  --sp-16: 64px;
  --sp-20: 80px;

  --radius: 8px; /* $button-border-radius，也是 rounded="lg" */
  --radius-card: 12px;
  --container: 1200px;
}

/* 行銷頁窄螢幕的唯一例外：40px 的主標在 360px 寬放不下（17 字 × 40px ≈ 680px），
   硬塞會斷成四五行。只降這一級到 28px，其他四級不動 —— 內文 16px 在手機上
   本來就該是 16px，跟著縮只會更難讀。 */
@media (max-width: 599px) {
  :root {
    --fs-display: 1.75rem; /* 28px */
  }
}

/* ===== 基礎 ===== */
/* 字型堆疊和產品一致：Vuetify 的 $body-font-family 是 'Roboto', sans-serif，
   而專案並沒有載入 Roboto 的字檔（index.html 沒有字型連結，roboto-fontface 這個
   依賴沒有被 import），所以實際渲染是系統預設 sans。這裡照抄同一句宣告，
   兩邊的中文與數字才會長得一樣 —— 自己另外寫 -apple-system / Segoe UI 的堆疊
   會指定到不同的西文字型，行銷頁的數字和產品裡的數字就對不起來了。 */
* {
  box-sizing: border-box;
}

html {
  font-size: 100%; /* 不寫死 px，瀏覽器放大字級仍然有效 */
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: "Roboto", sans-serif;
  font-size: var(--fs-body);
  line-height: 1.5;
  color: var(--on-surface);
  background: var(--surface);
  -webkit-font-smoothing: antialiased;
}

img,
svg,
video {
  max-width: 100%;
}

a {
  color: var(--primary);
}

h1,
h2,
h3,
p,
ul,
ol,
figure {
  margin: 0;
}

ul {
  padding: 0;
  list-style: none;
}

/* ===== 版面骨架 ===== */
.wrap {
  max-width: var(--container);
  margin: 0 auto;
  padding-left: var(--sp-6);
  padding-right: var(--sp-6);
}

.section {
  padding-block: var(--sp-20);
}

.section--tint {
  background: var(--primary-tint-weak);
}

.section--surface {
  background: var(--neutral-surface);
}

@media (max-width: 899px) {
  .section {
    padding-block: var(--sp-12);
  }
}

/* 區塊標題。行銷頁的段落標題用 22px（產品的 text-h6 同級），
   不另外生一個「行銷用大標」—— 整頁只有 Hero 的主標與結尾 CTA 用 40px。 */
.section-title {
  font-size: var(--fs-title);
  line-height: 1.4;
  font-weight: 700;
}

.section-lead {
  margin-top: var(--sp-3);
  color: var(--muted);
}

.eyebrow {
  font-size: var(--fs-caption);
  line-height: 1.5;
  letter-spacing: 0.08em;
  color: var(--primary);
  font-weight: 700;
}

.muted {
  color: var(--muted);
}

.note {
  font-size: var(--fs-caption);
  color: var(--muted);
}

/* ===== 按鈕：對齊 Vuetify 的 VBtn ===== */
/* height 40 / font-size 16 / radius 8 來自 settings.scss；weight 400、letter-spacing 0、
   text-transform none 來自 $typography."button" —— 按鈕不要大寫（見 !128）。 */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  height: 40px;
  padding: 0 var(--sp-6);
  border: 1px solid transparent;
  border-radius: var(--radius);
  font-family: inherit;
  font-size: var(--fs-body);
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.15s ease;
}

.btn--primary {
  background: var(--primary);
  color: #fff;
}

.btn--primary:hover {
  background: var(--primary-darken-1);
}

.btn--outline {
  background: transparent;
  color: var(--primary);
  border-color: var(--primary-muted);
}

.btn--outline:hover {
  background: var(--primary-tint-weak);
}

/* Hero 與結尾 CTA 的主按鈕。這是整支檔案唯一一個不在產品尺寸表上的值：
   行銷頁的主 CTA 是整頁的目的，40px 高在第一屏上壓不住場。字級仍然在五級內
   （18px＝區塊標題級），只放大高度與左右內距。 */
.btn--lg {
  height: 48px;
  padding: 0 var(--sp-8);
  font-size: var(--fs-section);
}

/* ===== 卡片 ===== */
.card {
  background: var(--surface);
  border: 1px solid var(--neutral-line);
  border-radius: var(--radius-card);
  padding: var(--sp-6);
}

/* ===== 圖示 =====
 * 行銷頁不載入 Font Awesome 的字型檔（一支 CSS 加四個 woff2，為了六顆圖示不值得，
 * 而規格要求手機 3 秒內要看到主標）。改成把需要的那幾個 FA 字形的 SVG 複製到
 * site/icons/ —— 同一套 FA 6 Free 的圖形，產品裡用的就是這些名字，形狀一致。
 * 上色方式和產品的 ProAideMark mono 一樣，用遮罩吃 currentColor：<img> 改不了顏色。
 * 圖示檔裡有 FA 的 CC BY 4.0 授權註解，不要刪。
 */
.i {
  display: inline-block;
  width: 24px;
  height: 24px;
  background: currentColor;
  -webkit-mask: var(--i) no-repeat center / contain;
  mask: var(--i) no-repeat center / contain;
  flex-shrink: 0;
}

.i--calendar-week {
  --i: url("/site/icons/calendar-week.svg");
}

.i--file-signature {
  --i: url("/site/icons/file-signature.svg");
}

.i--money-check-dollar {
  --i: url("/site/icons/money-check-dollar.svg");
}

.i--receipt {
  --i: url("/site/icons/receipt.svg");
}

.i--note-sticky {
  --i: url("/site/icons/note-sticky.svg");
}

.i--circle-check {
  --i: url("/site/icons/circle-check.svg");
}

/* ProAide 標記本身當圖示用（AI 助理那一塊）。SVG 是雙色的，單色場合走遮罩。 */
.i--proaide {
  --i: url("/assets/icon/proaide-mark-solid.svg");
}

/* ===== 4.1 Hero ===== */
.hero {
  padding-block: var(--sp-16) var(--sp-20);
  background: linear-gradient(180deg, var(--primary-tint-weak) 0%, var(--surface) 100%);
}

.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: var(--sp-16);
  align-items: center;
}

/* Hero 只放標記、不放直式組合標：組合標的「ProAide」字樣在 56px 高時只有 10px，
   看不清楚；而產品名在頁首、主標、頁尾都已經出現，不需要在這裡再讀一次。
   登入頁的情況相反 —— 那裡標記就是主角，所以用 200px 的組合標。 */
.hero__mark {
  width: 48px;
  height: 48px;
  display: block;
}

/* 「登雲有路，AI 為梯」在這裡是品牌署名、不是主標，所以用次要級＋灰字。
   同一句話在結尾 CTA 區是 40px 大字 —— 標語該出現在看完內容之後。 */
.hero__tagline {
  margin-top: var(--sp-3);
  font-size: var(--fs-caption);
  color: var(--muted);
}

.hero__h1 {
  margin-top: var(--sp-6);
  font-size: var(--fs-display);
  line-height: 1.2;
  font-weight: 700;
  text-wrap: balance;
}

.hero__sub {
  margin-top: var(--sp-4);
  font-size: var(--fs-section);
  color: var(--muted);
  max-width: 34em;
}

.hero__price {
  margin-top: var(--sp-3);
  font-size: var(--fs-caption);
  color: var(--muted);
}

.hero__cta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  margin-top: var(--sp-8);
}

@media (max-width: 1023px) {
  .hero__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--sp-8);
  }
}

/* ===== 截圖與錄影的版位 =====
 * 第三批才會有真實截圖與 20～30 秒錄影。版位現在就固定長寬比，之後把 <img>／<video>
 * 直接放進 .media 裡換掉 .media__todo 就好，不會整頁重排。
 * 交付尺寸（2 倍圖，長邊給到視網膜螢幕夠用）：
 *   Hero      1280×800（16:10）
 *   功能卡     1120×700（16:10）
 * 截圖請用乾淨的假資料，不要出現真人姓名或真實薪資。
 */
.media {
  position: relative;
  aspect-ratio: 16 / 10;
  border: 1px solid var(--neutral-line);
  border-radius: var(--radius-card);
  background: var(--surface);
  overflow: hidden;
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.06),
    0 8px 24px rgba(0, 36, 65, 0.08);
}

.media > img,
.media > video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.media__todo {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  padding: var(--sp-6);
  text-align: center;
  background: repeating-linear-gradient(45deg, var(--neutral-surface), var(--neutral-surface) 12px, #e8eaec 12px, #e8eaec 24px);
  color: var(--muted);
  font-size: var(--fs-caption);
}

.media__todo strong {
  font-size: var(--fs-body);
  color: var(--primary-darken-1);
}

/* ===== 4.2 痛點三欄 ===== */
.pains {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-6);
  margin-top: var(--sp-8);
}

.pain__h {
  font-size: var(--fs-section);
  font-weight: 700;
}

.pain__p {
  margin-top: var(--sp-2);
  color: var(--muted);
}

@media (max-width: 899px) {
  .pains {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ===== 4.3 一套取代四套（價格錨點）===== */
.compare {
  width: 100%;
  border-collapse: collapse;
  background: var(--surface);
}

.compare th,
.compare td {
  padding: var(--sp-4) var(--sp-6);
  text-align: left;
  border-bottom: 1px solid var(--neutral-line);
}

/* 表頭高度 50px 對齊產品的 $table-header-height */
.compare thead th {
  height: 50px;
  padding-block: 0;
  background: var(--neutral-surface);
  font-size: var(--fs-caption);
  font-weight: 700;
  color: var(--muted);
}

.compare thead th:last-child {
  background: var(--primary-tint);
  color: var(--primary-darken-2);
}

.compare td:last-child {
  background: var(--primary-tint-weak);
  text-align: center;
}

.compare tbody tr:last-child td {
  border-bottom: 0;
  font-weight: 700;
}

.compare .yes {
  color: var(--success);
}

.compare__price {
  font-size: var(--fs-title);
  line-height: 1.4;
  color: var(--primary-darken-2);
}

/* 窄螢幕讓表格自己橫向捲，不要把整頁撐寬 */
/* 圓角與外框放在容器上，不放在 table：border-collapse: collapse 的表格不吃 border-radius */
.table-scroll {
  margin-top: var(--sp-8);
  border: 1px solid var(--neutral-line);
  border-radius: var(--radius-card);
  overflow: hidden;
  overflow-x: auto;
}

.table-scroll > .compare {
  min-width: 560px;
}

/* ===== 4.4 核心功能六塊 ===== */
.features {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-6);
  margin-top: var(--sp-8);
}

.feature {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}

.feature__h {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-section);
  font-weight: 700;
  color: var(--on-surface);
}

.feature__h .i {
  color: var(--primary);
}

.feature__p {
  color: var(--muted);
}

@media (max-width: 1023px) {
  .features {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 699px) {
  .features {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ===== 4.5 AI 到底會做什麼（對話氣泡）=====
 * 這一段的樣式是從產品的 pages/ai/components/ChatMessageItem.vue 原封不動搬過來的，
 * 數值都一樣（氣泡 16px 16px 4px 16px、底色 primary 10%、內距 10/14、行高 1.7、
 * 出處膠囊 18px 高）。理由：行銷頁上的對話如果和真的 AI 畫面長得不一樣，
 * 它就只是一張插畫；長得一樣，它就是產品截圖的替身。
 *
 * 注意 AI 的回覆「沒有氣泡」—— 產品裡 AI 側是純文字，只有使用者說的話有底色。
 * 不要為了排版對稱幫 AI 也加一顆氣泡，那會變成和產品不一樣。
 */
.chats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: start;
  gap: var(--sp-6);
  margin-top: var(--sp-8);
}

.chat {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}

.chat__q {
  align-self: flex-end;
  max-width: 85%;
  background: rgba(var(--primary-rgb), 0.1);
  border-radius: 16px 16px 4px 16px;
  padding: 10px 14px;
}

.chat__a {
  line-height: 1.7;
}

.chat__cite {
  margin-top: var(--sp-2);
  border-top: 1px dashed rgba(0, 0, 0, 0.12);
  padding-top: var(--sp-2);
}

.chat__cite-label {
  font-size: var(--fs-caption);
  font-weight: 700;
  color: var(--muted);
  margin-bottom: var(--sp-1);
}

.chat__cite-item {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 6px 8px;
  border-radius: var(--radius);
  background: rgba(var(--primary-rgb), 0.05);
}

/* 11px 低於內容 UI 的 14px 下限 —— 這是產品裡出處編號膠囊的實際值（它是編號不是文字），
   照抄以維持一致。一般文字不要用這個尺寸。 */
.chat__cite-n {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  border-radius: 9px;
  font-size: 11px;
  font-weight: 700;
  color: var(--primary);
  background: rgba(var(--primary-rgb), 0.12);
  flex-shrink: 0;
}

.chat__cite-title {
  font-size: var(--fs-caption);
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 1023px) {
  .chats {
    grid-template-columns: minmax(0, 1fr);
    max-width: 560px;
  }
}

/* ===== 4.6 懂台灣勞基法（信任區）===== */
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-top: var(--sp-8);
}

/* 高度 40px 對齊產品的 --v-chip-height，字級 14px 對齊 .v-chip__content */
.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  height: 40px;
  padding: 0 var(--sp-4);
  border-radius: var(--radius);
  background: var(--primary-tint);
  color: var(--primary-darken-2);
  font-size: var(--fs-caption);
}

.chip .i {
  width: 16px;
  height: 16px;
  color: var(--success);
}

/* 證書縮圖。它是一張直式的證書掃描（212×300），不是一顆徽章 —— 縮到 96px 的方框裡
   只會變成一團看不清的灰，所以維持原比例、給到 112px 寬，當「真的有這張紙」的憑證用。 */
.trust {
  display: flex;
  align-items: center;
  gap: var(--sp-6);
  margin-top: var(--sp-8);
  padding: var(--sp-6);
  border: 1px solid var(--neutral-line);
  border-radius: var(--radius-card);
  background: var(--surface);
}

/* 縮圖要能點開看原圖：會看這一段的是採購或資安窗口，他們的第一個動作就是想點大。
   原圖 2481×3508（A4 300dpi）約 1.5MB，只有點了才會下載，不影響首屏。 */
.trust__link {
  display: block;
  flex-shrink: 0;
  line-height: 0;
}

.trust__badge {
  width: 112px;
  height: auto;
  border: 1px solid var(--neutral-line);
  border-radius: var(--radius);
}

.trust__link:hover .trust__badge {
  border-color: var(--primary);
}

@media (max-width: 599px) {
  .trust {
    flex-direction: column;
    text-align: center;
  }
}

/* ===== 4.7 價格摘要 ===== */
.plans {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--sp-4);
  margin-top: var(--sp-8);
}

.plan {
  background: var(--surface);
  border: 1px solid var(--neutral-line);
  border-radius: var(--radius-card);
  padding: var(--sp-6);
  text-align: center;
}

.plan--featured {
  border-color: var(--primary);
  box-shadow: 0 0 0 1px var(--primary) inset;
}

.plan__name {
  font-size: var(--fs-section);
  font-weight: 700;
}

.plan__price {
  margin-top: var(--sp-3);
  font-size: var(--fs-title);
  line-height: 1.4;
  font-weight: 700;
  color: var(--primary-darken-2);
}

.plan__unit {
  font-size: var(--fs-caption);
  font-weight: 400;
  color: var(--muted);
}

.plan__note {
  margin-top: var(--sp-2);
  font-size: var(--fs-caption);
  color: var(--muted);
}

@media (max-width: 899px) {
  .plans {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ===== 4.8 常見問題 ===== */
/* 用原生 details，不寫 JS：FAQ 的內容要能被 Google 讀到，展開狀態不該靠腳本 */
.faq {
  margin-top: var(--sp-8);
  border-top: 1px solid var(--neutral-line);
}

.faq details {
  border-bottom: 1px solid var(--neutral-line);
}

.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  padding: var(--sp-4) 0;
  font-size: var(--fs-section);
  cursor: pointer;
  list-style: none;
}

.faq summary::-webkit-details-marker {
  display: none;
}

/* 展開箭頭用 CSS 畫，不載圖也不載字型：一個轉 45 度的直角，形狀等同 fa-chevron-down */
.faq summary::after {
  content: "";
  flex-shrink: 0;
  width: 9px;
  height: 9px;
  margin-right: 4px;
  border-right: 2px solid var(--primary);
  border-bottom: 2px solid var(--primary);
  transform: translateY(-2px) rotate(45deg);
  transition: transform 0.15s ease;
}

.faq details[open] summary::after {
  transform: translateY(2px) rotate(225deg);
}

.faq__a {
  padding: 0 0 var(--sp-4);
  color: var(--muted);
  max-width: 60em;
}

/* ===== 4.9 結尾 CTA ===== */
.endcta {
  background: var(--primary-darken-3);
  color: #fff;
  text-align: center;
}

.endcta__slogan {
  font-size: var(--fs-display);
  line-height: 1.2;
  font-weight: 700;
}

.endcta .btn--primary {
  margin-top: var(--sp-8);
  background: #fff;
  color: var(--primary-darken-2);
}

.endcta .btn--primary:hover {
  background: var(--primary-tint);
}

.endcta__note {
  margin-top: var(--sp-4);
  font-size: var(--fs-caption);
  color: var(--primary-tint);
}

/* ===== 4.10 頁尾 ===== */
.footer {
  background: var(--primary-darken-3);
  color: #fff;
  padding-block: var(--sp-12) var(--sp-8);
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.footer__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) repeat(2, minmax(0, 1fr));
  gap: var(--sp-8);
}

.footer__brand {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  font-size: var(--fs-section);
}

/* 單色標記：用遮罩上色，和產品的 ProAideMark mono 做法一致（SVG 本身是雙色） */
.footer__mark {
  width: 24px;
  height: 24px;
  background: currentColor;
  -webkit-mask: url("/assets/icon/proaide-mark-solid.svg") no-repeat center / contain;
  mask: url("/assets/icon/proaide-mark-solid.svg") no-repeat center / contain;
  flex-shrink: 0;
}

.footer__tagline,
.footer__meta {
  margin-top: var(--sp-3);
  font-size: var(--fs-caption);
  color: rgba(255, 255, 255, 0.7);
}

.footer__meta p {
  margin-top: var(--sp-1);
}

.footer__h {
  font-size: var(--fs-caption);
  font-weight: 700;
  color: rgba(255, 255, 255, 0.5);
  letter-spacing: 0.08em;
}

.footer__links {
  margin-top: var(--sp-3);
}

.footer__links li + li {
  margin-top: var(--sp-2);
}

.footer__links a {
  color: #fff;
  text-decoration: none;
  font-size: var(--fs-caption);
}

.footer__links a:hover {
  text-decoration: underline;
}

.footer__bottom {
  margin-top: var(--sp-8);
  padding-top: var(--sp-4);
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  font-size: var(--fs-caption);
  color: rgba(255, 255, 255, 0.5);
}

@media (max-width: 899px) {
  .footer__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--sp-6);
  }
}

/* ===== 頁首 ===== */
.topbar {
  position: sticky;
  top: 0;
  z-index: 10;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--neutral-line);
}

.topbar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  height: 64px;
}

.topbar__logo {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  text-decoration: none;
  color: var(--on-surface);
  font-size: var(--fs-section);
  font-weight: 700;
}

.topbar__logo img {
  width: 28px;
  height: 28px;
}

.topbar__nav {
  display: flex;
  align-items: center;
  gap: var(--sp-6);
}

.topbar__nav a:not(.btn) {
  color: var(--on-surface);
  text-decoration: none;
  font-size: var(--fs-body);
}

.topbar__nav a:not(.btn):hover {
  color: var(--primary);
}

/* 手機上只留主 CTA，導覽連結收起來 —— 這一頁夠短，捲動就看得到全部內容，
   不值得為三個錨點做一個漢堡選單。 */
@media (max-width: 699px) {
  .topbar__nav a:not(.btn) {
    display: none;
  }
}

/* ===== 方案頁（/pricing）===== */
/* 開發補的：沿用上面的 token 與元件，沒有新增色票或字級 */
.page-head {
  padding-block: var(--sp-16) var(--sp-8);
  text-align: center;
  background: linear-gradient(180deg, var(--primary-tint-weak) 0%, var(--surface) 100%);
}

.page-head__h1 {
  font-size: var(--fs-display);
  line-height: 1.2;
  font-weight: 700;
}

.plan--full {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  text-align: left;
}

.plan--full .plan__price {
  margin-top: 0;
}

.plan__list {
  margin: var(--sp-2) 0 var(--sp-4);
  font-size: var(--fs-caption);
  color: var(--muted);
}

.plan__list li + li {
  margin-top: var(--sp-1);
}

.plan--full .btn {
  margin-top: auto;
}

.includes {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-6);
  margin-top: var(--sp-8);
}

@media (max-width: 1023px) {
  .includes {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 699px) {
  .includes {
    grid-template-columns: minmax(0, 1fr);
  }
}

.compare--plans th,
.compare--plans td {
  text-align: center;
}

.compare--plans th:first-child,
.compare--plans td:first-child {
  text-align: left;
  background: var(--surface);
}

.compare--plans td:last-child {
  background: var(--surface);
}

.compare--plans thead th:last-child {
  background: var(--neutral-surface);
  color: var(--muted);
}

.compare--plans tbody tr:last-child td {
  font-weight: 400;
}

.compare--plans .muted {
  font-size: var(--fs-caption);
}