/* ==========================================================================
   Vannise Content Studio — site layer on top of Portrait Design System.
   Loads after assets/portrait/styles.css; only overrides + page components.
   ========================================================================== */

/* --- CJK font fallbacks: Switzer/PJS are Latin-only ------------------- */
:root {
  --font-switzer: "Switzer", "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", ui-sans-serif, system-ui, sans-serif;
  --font-basier-circle: "Basier Circle", "Plus Jakarta Sans", "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", ui-sans-serif, sans-serif;
  /* Portrait display tracking (-0.056em) is tuned for Latin; CJK needs looser */
  --tracking-display-cjk: -0.025em;
  --tracking-heading-cjk: -0.015em;
}

/* --- Base ---------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
/* 站台固定 light；`only` 同時退出 Chrome 的 Auto Dark Mode 強制反轉 */
html[data-theme="light"] { color-scheme: only light; }
body {
  margin: 0;
  background: var(--surface-canvas);
  color: var(--text-body);
  font-family: var(--font-body);
  font-size: var(--text-body-base);
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
}
/* 左右留白放大：內容欄更窄、視線更集中（手機仍 24px） */
.wrap { max-width: var(--page-max-width); margin: 0 auto; padding: 0 clamp(24px, 8vw, 144px); }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--color-nautical-teal); outline-offset: 2px; border-radius: 4px; }

.lucide { width: 20px; height: 20px; stroke-width: 2; }

/* --- Type ----------------------------------------------------------------- */
h1, h2 {
  font-family: var(--font-display);
  color: var(--text-primary);
  font-weight: var(--font-weight-bold);
  margin: 0.1em 0 0.35em;
  text-wrap: balance; /* 折行時平衡行長，避免「住。」這種孤字尾行 */
}
h1 {
  font-size: clamp(38px, 6vw, 68px);
  line-height: 1.08;
  letter-spacing: var(--tracking-display-cjk);
}
/* 全站統一字級：以最長標題（28 字）單行放得下為準 */
h2 {
  font-size: clamp(26px, 2.95vw, 32px);
  line-height: 1.2;
  letter-spacing: var(--tracking-heading-cjk);
}
h3 {
  font-family: var(--font-body);
  font-size: 19px;
  font-weight: var(--font-weight-semibold);
  color: var(--text-primary);
  margin: 0 0 0.35em;
  line-height: 1.4;
}
p { margin: 0.5em 0; }
p.lead {
  font-size: clamp(17px, 2.2vw, 20px);
  line-height: 1.7;
  color: var(--text-muted); /* 與主標的 ink 拉開層次 */
  max-width: 56ch;
  margin: 0.3em 0 0;
}
/* 特長 lead 解除 56ch 上限（仍受 section-head 900px 約束） */
p.lead.lead-wide { max-width: none; }
/* lead 內的粗體詞不可從中斷行（避免「單場業／績」）；支援的瀏覽器用語意斷行 */
p.lead { text-wrap: balance; word-break: auto-phrase; }
p.lead b { white-space: nowrap; }

/* 語意詞組不從中斷行：手動標在容易斷錯的詞上（「目標」「一起」「表現」…） */
.nb { white-space: nowrap; }
ul.chk li b { white-space: nowrap; } /* 「0.5～2 倍」「3 倍」等數字＋單位不拆開 */
/* 內文避免 1–2 字孤行（Chrome 117+，其他瀏覽器忽略）。
   注意：text-wrap 會重設 text-wrap-mode，選擇器不可打中 .nb，否則 nowrap 被蓋掉 */
.goal span:not(.nb), .card p, ul.chk li, .path ul li, .kpi small, .stat .l, .tro .l { text-wrap: pretty; }

.muted { color: var(--text-muted); }
/* 只給螢幕閱讀器讀的文字（視覺上隱藏） */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
b, strong { font-weight: var(--font-weight-semibold); color: var(--text-primary); }

/* one rainbow word per headline — the signature.
   DS 原版是斜體，但 CJK 只有偽斜體且右緣會被裁切，故不用斜體 */
.rainbow-word {
  font-style: normal;
  white-space: nowrap; /* 彩虹詞絕不跨行拆開 */
  background: var(--gradient-rainbow);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* eyebrow badge: the one tracked-caps moment, soft chip + matching ink */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--text-small);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--tracking-caption);
  background: var(--chip-blue-soft);
  color: var(--chip-blue-ink);
  border-radius: var(--radius-pill);
  padding: 5px 12px;
  margin-bottom: 18px;
}

/* --- Brand mark ------------------------------------------------------------ */
.brand-mark {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
}
/* On Air mark：跟 index.html 的 favicon 是同一顆 SVG，要改一起改 */
.brand-mark .sq {
  width: 14px;
  height: 14px;
  border-radius: 4px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Crect width='32' height='32' rx='9' fill='%2308304c'/%3E%3Ccircle cx='16' cy='7.9' r='2.4' fill='%23ff4940'/%3E%3Cpath d='M10.2 12.9 16 24 21.8 12.9' fill='none' stroke='%23fff' stroke-width='4.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  flex: none;
}
.brand-mark .word {
  font-family: var(--font-display);
  font-weight: var(--font-weight-semibold);
  font-size: 16px;
  letter-spacing: -0.02em;
  color: var(--text-primary);
  white-space: nowrap;
}
.brand-mark small {
  font-family: var(--font-body);
  font-size: var(--text-small);
  font-weight: var(--font-weight-medium);
  color: var(--text-muted);
  white-space: nowrap;
}

/* --- Floating pill nav ------------------------------------------------------ */
.nav-shell {
  position: sticky;
  top: 12px;
  z-index: 30;
  /* Safari 小視窗捲動時工具列會收合、viewport 高度中途改變，
     sticky 若留在主執行緒重繪會卡在舊位置（bar 被切一半）；升成合成層讓它每一幀都重新釘位 */
  transform: translateZ(0);
}
nav.top {
  display: flex;
  align-items: center;
  gap: 4px;
  background: color-mix(in srgb, var(--surface-nav) 86%, transparent);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-radius: var(--radius-nav);
  box-shadow: var(--shadow-nav), var(--ring-hairline);
  padding: 10px 18px;
}
nav.top .brand-mark { margin-right: auto; min-width: 0; }
/* 最後防線：字型或翻譯讓內容變寬時，品牌字收省略號，按鈕絕不被擠出畫面 */
nav.top .word { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
nav.top a.lnk {
  font-size: 13px;
  font-weight: var(--font-weight-medium);
  color: var(--text-muted);
  text-decoration: none;
  padding: 6px 10px;
  border-radius: var(--radius-pill);
  transition: background 0.15s ease, color 0.15s ease;
  white-space: nowrap;
}
nav.top a.lnk:hover { background: var(--surface-sunken); color: var(--text-primary); }
nav.top .btn { margin-left: 6px; white-space: nowrap; }
/* 留白加大後 nav 內部空間變小：先收副標題、再收連結；手機窄幅站名保持完整、
   CTA 按鈕縮小一號，最窄機型再降站名字級擠出空間 */
@media (max-width: 1400px) { nav.top .brand-mark small { display: none; } }
@media (max-width: 1100px) { nav.top a.lnk { display: none; } }
@media (max-width: 430px) {
  nav.top .btn.sm { font-size: 12px; padding: 5px 11px; }
}
@media (max-width: 360px) {
  .nav-shell { padding: 0 12px; } /* 頁面留白 8vw 在最窄機型太吃空間，nav 這層單獨收窄 */
  nav.top { padding: 8px 13px; }
  nav.top .brand-mark { gap: 8px; }
  nav.top .word { font-size: 14px; }
}

/* --- Buttons ---------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--font-body);
  font-weight: var(--font-weight-medium);
  font-size: 16px;
  line-height: 1;
  padding: 13px 24px;
  border-radius: var(--radius-buttons);
  border: 1.5px solid transparent;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.2s ease, background 0.2s ease, border-color 0.2s ease;
}
.btn:hover { transform: translateY(-1px); box-shadow: var(--shadow-md); }
.btn:active { transform: translateY(0) scale(0.975); }
/* 按鈕文字裡的箭頭：hover 往右滑一小步 */
.btn .arr { display: inline-block; transition: transform 0.2s ease; }
.btn:hover .arr { transform: translateX(3px); }
.btn.sm { font-size: 14px; padding: 7px 14px; }
.btn-rainbow {
  color: var(--text-primary);
  background: linear-gradient(var(--surface-card), var(--surface-card)) padding-box, var(--gradient-rainbow) border-box;
}
.btn-ink {
  color: var(--text-on-ink);
  background: var(--color-portrait-ink);
  border-color: var(--color-portrait-ink);
}
[data-theme="dark"] .btn-ink { background: var(--text-primary); border-color: var(--text-primary); }
/* 次要按鈕：平時就有按鈕外觀（白底＋hairline 邊框），hover 與主按鈕同樣上浮 */
.btn-ghost {
  color: var(--text-primary);
  background: var(--surface-card);
  border-color: var(--color-fog-edge);
}
.btn-ghost:hover { background: var(--surface-sunken); }

/* --- Sections ----------------------------------------------------------------- */
/* 區塊間大幅拉開（相鄰兩個 section 之間 160px），分段更明顯 */
section { padding: var(--spacing-80) 0; }
@media (max-width: 720px) { section { padding: var(--spacing-48) 0; } }
section .section-head { max-width: 900px; } /* 18 字內的 h2 能單行放下；lead 另有 56ch 上限 */

/* --- Hero ------------------------------------------------------------------------ */
.hero { position: relative; padding: 72px 0 40px; overflow: hidden; }
.hero::before {
  content: "";
  position: absolute;
  inset: -20% -10% auto;
  height: 480px;
  background: var(--gradient-lavender-fall);
  pointer-events: none;
}
.hero .wrap { position: relative; }
.hero .tag {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  font-size: 13px;
  font-weight: var(--font-weight-medium);
  color: var(--text-body);
  background: var(--surface-card);
  box-shadow: var(--ring-hairline);
  padding: 7px 14px;
  border-radius: var(--radius-pill);
  margin-bottom: 22px;
}
/* 徽章動畫：ping 圓點＋後半句逐字輪播（拆字與輪播邏輯在 index.html 底部）。
   沒 JS 或 reduced-motion 時就是靜態圓點＋原句。 */
.hero .tag .dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--hue-red); /* 「燈」全站統一櫻桃紅：logo 訊號燈＋這顆 ping 圓點 */
  position: relative;
  flex: none;
}
.hero .tag .line { line-height: 20px; }
.hero .tag .cas {
  display: inline-block;
  height: 20px;
  vertical-align: top;
  white-space: nowrap;
}
@media (prefers-reduced-motion: no-preference) {
  .hero .tag .dot { animation: tag-dot-pulse 1.5s ease-in-out .9s infinite; }
  .hero .tag .dot::before {
    content: "";
    position: absolute;
    inset: -1px;
    border-radius: 50%;
    border: 1px solid rgba(255, 73, 64, .55);
    opacity: 0;
    animation: tag-ping 1.5s cubic-bezier(.25,.45,.45,1) .9s infinite;
  }
  /* 漣漪邊擴散邊淡入再淡出，不要一出現就滿亮度。
     擴散本身固定約 1.2s（80% × 1.5s），要調週期時記得同步換算百分比 */
  @keyframes tag-ping {
    0%   { transform: scale(.9);  opacity: 0; }
    16%  {                        opacity: .5; }
    80%  { transform: scale(2.1); opacity: 0; }
    100% { transform: scale(2.1); opacity: 0; }
  }
  @keyframes tag-dot-pulse {
    0%, 40%, 100% { transform: scale(1); }
    16%           { transform: scale(1.15); }
  }
  .hero .tag .cas { transition: width .4s cubic-bezier(.2,1,.3,1); }
  .hero .tag .cas .ch {
    display: inline-block;
    opacity: 0;
    transform: translateY(11px);
    filter: blur(4px);
    transition: transform .3s cubic-bezier(.2,1.3,.3,1), opacity .24s, filter .24s;
  }
  .hero .tag .cas.in .ch { opacity: 1; transform: none; filter: blur(0); }
}

.hero .btnrow { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 30px; }

.hero-grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 48px; align-items: center; }
.hero-grid > * { min-width: 0; }
.hero-copy { container-type: inline-size; }
/* 字級跟著欄寬縮放：標題第二行 11 個字，8.6cqw 保證單行放得下；第一行是舊瀏覽器 fallback */
.hero-grid h1 { font-size: clamp(32px, 3.4vw, 46px); font-size: clamp(30px, 8.6cqw, 50px); }
.hero-photo { margin: 0; }
.hero-photo img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--radius-images);
  box-shadow: var(--shadow-site-card);
}
@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; gap: 28px; }
  .hero-grid h1 { font-size: clamp(28px, 7vw, 48px); font-size: clamp(28px, 8.6cqw, 48px); }
}

.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 48px; }
@media (max-width: 720px) { .stats { grid-template-columns: repeat(2, 1fr); } }
.stat {
  background: var(--surface-card);
  border-radius: var(--radius-cards);
  box-shadow: var(--shadow-site-card);
  padding: 22px 20px;
}
.stat .n {
  font-family: var(--font-display);
  font-size: clamp(26px, 4vw, 38px);
  font-weight: var(--font-weight-bold);
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--text-primary);
}
.stat .n small {
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: var(--font-weight-semibold);
  color: var(--text-body);
  margin-left: 2px;
  letter-spacing: 0;
}
.stat .l { font-size: 13px; color: var(--text-muted); margin-top: 10px; line-height: 1.5; }

/* --- Cards & grids ------------------------------------------------------------------ */
/* 站台層加重版卡片陰影：比 DS 預設更跳，但單層仍 ≤8% 黑、維持多層柔和 */
:root {
  --shadow-site-card:
    oklab(0 0 0 / 0.07) 0px 0px 0px 1px,
    rgba(0, 0, 0, 0.08) 0px 24px 32px -16px,
    rgba(0, 0, 0, 0.06) 0px 12px 16px -8px,
    rgba(0, 0, 0, 0.04) 0px 6px 8px -4px,
    rgba(0, 0, 0, 0.03) 0px 2px 4px -2px;
}
[data-theme="dark"] { --shadow-site-card: var(--shadow-elevated); }

.grid { display: grid; gap: 18px; }
.g2 { grid-template-columns: 1fr 1fr; }
.g3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 820px) { .g2, .g3 { grid-template-columns: 1fr; } }

.card {
  background: var(--surface-card);
  border-radius: var(--radius-cards);
  box-shadow: var(--shadow-site-card);
  padding: 24px;
}
.card-photo {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  display: block;
  border-radius: var(--radius-inputs);
  box-shadow: var(--ring-hairline);
  margin-bottom: 18px;
}
.card.wash-sky { background: var(--color-sky-wash); box-shadow: none; }
.card.wash-mint { background: var(--color-mint-wash); box-shadow: none; }
.card.wash-peach { background: var(--color-peach-wash); box-shadow: none; }
.card.hairline { box-shadow: var(--ring-hairline); }

.goal { display: flex; gap: 14px; align-items: flex-start; }
.goal .ic {
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-md);
  background: var(--color-sky-wash);
  color: var(--color-portrait-ink);
  display: grid;
  place-items: center;
}
[data-theme="dark"] .goal .ic { color: var(--text-primary); }
.goal .ic.inv { background: var(--color-portrait-ink); color: var(--color-white-canvas); }
[data-theme="dark"] .goal .ic.inv { background: var(--text-primary); color: var(--surface-canvas); }
.goal b { display: block; margin-bottom: 2px; }
.goal span { font-size: 14px; color: var(--text-body); line-height: 1.6; }

.stage-label { margin-bottom: 10px; }

h3.with-ic { display: flex; align-items: center; gap: 8px; }
h3.with-ic .lucide { width: 18px; height: 18px; flex: none; color: var(--color-nautical-teal); }
[data-theme="dark"] h3.with-ic .lucide { color: var(--chip-blue-ink); }

.demo-flag {
  display: block;
  text-align: center;
  background: var(--color-warning-soft);
  color: var(--color-warning-ink);
  font-weight: var(--font-weight-semibold);
  font-size: 13px;
  letter-spacing: 0.08em;
  padding: 9px;
  border-radius: var(--radius-md);
  margin-bottom: 8px;
}

/* badges (Portrait Badge recipe) */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  font-weight: var(--font-weight-semibold);
  padding: 4px 11px;
  border-radius: var(--radius-pill);
}
.badge.blue { background: var(--chip-blue-soft); color: var(--chip-blue-ink); }
.badge.green { background: var(--chip-green-soft); color: var(--chip-green-ink); }
.badge.orange { background: var(--chip-orange-soft); color: var(--chip-orange-ink); }
.badge.purple { background: var(--chip-purple-soft); color: var(--chip-purple-ink); }
.badge.warning { background: var(--color-warning-soft); color: var(--color-warning-ink); }
.badge.danger { background: var(--color-danger-soft); color: var(--color-danger-ink); }

/* --- Pillar (text + chart) ------------------------------------------------------------ */
.pillar { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 40px; align-items: center; margin-top: 32px; }
@media (max-width: 900px) { .pillar { grid-template-columns: 1fr; gap: 24px; } }
.pillar.rev > .pillar-text { order: 2; }
@media (max-width: 900px) { .pillar.rev > .pillar-text { order: 0; } }

/* KPI 數據亮點：字級低於 h2、用亮藍 accent 與主標 ink 區隔 */
.kpi {
  font-family: var(--font-display);
  font-size: clamp(20px, 2.2vw, 24px);
  font-weight: var(--font-weight-bold);
  letter-spacing: -0.015em;
  line-height: 1.2;
  color: var(--chip-blue-ink);
}
.kpi small {
  display: block;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: var(--font-weight-medium);
  color: var(--text-muted);
  letter-spacing: 0;
  margin-top: 8px;
  line-height: 1.6;
}

ul.chk { list-style: none; padding: 0; margin: 16px 0 0; }
ul.chk li {
  position: relative;
  padding-left: 26px;
  margin: 10px 0;
  color: var(--text-body);
  font-size: 15px;
  line-height: 1.65;
}
ul.chk li::before {
  content: "";
  position: absolute;
  left: 0;
  /* 與第一行文字垂直置中：行高 1.65 的一半 − 方塊半高（border-box 13px） */
  top: calc(0.825em - 6.5px);
  width: 13px;
  height: 13px;
  border-radius: 4px;
  background: var(--color-sky-wash);
  border: 1.5px solid var(--color-nautical-teal);
}
[data-theme="dark"] ul.chk li::before { border-color: var(--chip-blue-ink); }

/* --- Charts: map reference SVG var names onto Portrait tokens ----------------------- */
.chartbox {
  --con: var(--hue-blue);
  --dur: var(--hue-orange);
  --c3: var(--hue-green);
  --good: var(--color-success);
  --gold: var(--color-warning-ink);
  --accent: var(--chip-blue-ink);
  --ink: var(--text-primary);
  --ink-2: var(--text-body);
  --muted: var(--text-muted);
  --line: var(--border-hairline);
  --line-2: var(--color-fog-edge);
  --surface: var(--surface-card);
  background: var(--surface-card);
  border-radius: var(--radius-cards);
  box-shadow: var(--shadow-site-card);
  padding: 20px 20px 14px;
  overflow: hidden;
}
[data-theme="dark"] .chartbox { --line-2: var(--border-default); }
.chartbox .ct { font-size: 14.5px; font-weight: var(--font-weight-semibold); color: var(--text-primary); margin: 2px 4px; }
.chartbox .cs { font-size: 12.5px; color: var(--text-muted); margin: 0 4px 12px; line-height: 1.55; }
.chartbox svg { width: 100%; height: auto; display: block; overflow: visible; }
.legend { display: flex; flex-wrap: wrap; gap: 12px 16px; margin: 12px 4px 2px; font-size: 12px; color: var(--text-body); }
.legend span { display: inline-flex; align-items: center; gap: 6px; }
.legend i { width: 11px; height: 11px; border-radius: 3px; display: inline-block; }

/* --- Flow steps ------------------------------------------------------------------------ */
.flow { display: grid; grid-template-columns: repeat(7, 1fr); gap: 12px; margin-top: 30px; }
@media (max-width: 900px) { .flow { grid-template-columns: repeat(2, 1fr); } }
.step {
  background: var(--surface-card);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card-quiet);
  padding: 16px 14px;
}
.step .s {
  font-size: var(--text-caption);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--tracking-caption);
  color: var(--color-nautical-teal);
}
[data-theme="dark"] .step .s { color: var(--chip-blue-ink); }
.step .t { font-weight: var(--font-weight-semibold); color: var(--text-primary); margin-top: 6px; font-size: 14.5px; line-height: 1.4; }
.step .d { font-size: 12px; color: var(--text-muted); margin-top: 6px; line-height: 1.5; }

/* --- Ranked menus ----------------------------------------------------------------------- */
/* 榜單卡標題：badge 與標題文字垂直置中；空間不夠時 badge 換行靠左 */
#menu .card > h3 { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; }
.menu { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 820px) {
  .menu { grid-template-columns: 1fr; }
  /* 同一張卡裡拆成兩欄的榜單，收成單欄時要接成一條連續清單 */
  .rank-split { gap: 0; }
  .rank-split ol.rank + ol.rank { margin-top: 0; }
  .rank-split ol.rank + ol.rank li:first-child { border-top: 1px solid var(--border-hairline); }
}
ol.rank { list-style: none; margin: 14px 0 0; padding: 0; }
.rank li {
  display: grid;
  grid-template-columns: 26px 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 9px 0;
  border-top: 1px solid var(--border-hairline);
}
.rank li:first-child { border-top: 0; }
.rank .rk { font-weight: var(--font-weight-bold); color: var(--text-muted); font-variant-numeric: tabular-nums; text-align: right; }
.rank .th { font-size: 14.5px; font-weight: var(--font-weight-medium); color: var(--text-primary); line-height: 1.4; }
.rank .th small { display: block; color: var(--text-muted); font-weight: var(--font-weight-regular); font-size: 12px; }
.rank .mv { font-weight: var(--font-weight-bold); font-variant-numeric: tabular-nums; color: var(--text-primary); }
.rank .mv.gold { color: var(--color-warning-ink); }

.bridge {
  text-align: center;
  margin: 24px auto 0;
  max-width: 64ch;
  color: var(--text-body);
  font-size: 15px;
  line-height: 1.7;
  background: var(--surface-sunken);
  border-radius: var(--radius-inputs);
  padding: 14px 20px;
}

/* --- Sample table -------------------------------------------------------------------------- */
.tblwrap { overflow-x: auto; }
table.bd { width: 100%; border-collapse: collapse; font-size: 13px; margin-top: 14px; }
table.bd th, table.bd td {
  padding: 10px;
  border-bottom: 1px solid var(--border-hairline);
  text-align: left;
  white-space: nowrap;
}
table.bd th {
  color: var(--text-muted);
  font-weight: var(--font-weight-semibold);
  font-size: 11px;
  letter-spacing: var(--tracking-caption);
}
table.bd tr:last-child td { border-bottom: 0; }

/* --- Chips wall ------------------------------------------------------------------------------ */
.wall { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 10px; }
.chip {
  display: inline-flex;
  align-items: center;
  font-size: 13.5px;
  font-weight: var(--font-weight-medium);
  color: var(--text-body);
  background: var(--surface-card);
  box-shadow: var(--ring-hairline);
  border-radius: var(--radius-pill);
  padding: 7px 14px;
}
.chip.hi { background: var(--chip-blue-soft); color: var(--chip-blue-ink); box-shadow: none; font-weight: var(--font-weight-semibold); }
/* wash 卡的底色與 chip-blue-soft 同值，highlight chip 改白底才不會隱形 */
.wash-sky .chip.hi, .wash-mint .chip.hi, .wash-peach .chip.hi {
  background: var(--surface-card);
  box-shadow: var(--ring-hairline);
}

/* --- Snapshots: taped-polaroid photo row (Portrait 的斜貼拍立得語彙) ---------------------------- */
.snapshots { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; margin: 40px 0 36px; }
.polaroid {
  margin: 0;
  background: var(--surface-card);
  padding: 10px 10px 12px;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  transform: rotate(var(--tilt, 0deg));
}
.polaroid img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
  border-radius: var(--radius-sm);
}
.polaroid figcaption {
  font-size: 12.5px;
  color: var(--text-muted);
  margin-top: 10px;
  text-align: center;
  line-height: 1.5;
}
@media (max-width: 820px) {
  .snapshots { grid-template-columns: 1fr; gap: 22px; max-width: 420px; }
}

/* --- Trophy / proof --------------------------------------------------------------------------- */
.trophy { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 12px; }
@media (max-width: 720px) { .trophy { grid-template-columns: repeat(2, 1fr); } }
.tro {
  background: var(--surface-card);
  border-radius: var(--radius-cards);
  box-shadow: var(--shadow-site-card);
  padding: 22px 20px;
}
.tro .n {
  font-family: var(--font-display);
  font-size: clamp(22px, 3.4vw, 30px);
  font-weight: var(--font-weight-bold);
  letter-spacing: -0.015em;
  line-height: 1.1;
  color: var(--text-primary);
}
.tro .l { font-size: 12.5px; color: var(--text-muted); margin-top: 8px; line-height: 1.5; }

/* --- Paths / CTA -------------------------------------------------------------------------------- */
.path { padding: 28px; }
.path ul { margin: 12px 0 0; padding-left: 18px; color: var(--text-body); font-size: 15px; }
.path ul li { margin: 8px 0; line-height: 1.65; }

.cta-final { text-align: center; padding-bottom: 96px; }
.cta-final .section-head { margin: 0 auto; }
.cta-final .lead { margin-left: auto; margin-right: auto; }
.cta-final .grid { margin-top: 32px; text-align: left; }
.cta-final .btnrow { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; margin-top: 34px; }
/* 聯絡人：收成一顆小巧的 hairline 膠囊，三個資訊帶 icon 一眼看完 */
.cta-final .contact {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 6px 18px;
  margin: 30px auto 0;
  padding: 10px 22px;
  border-radius: var(--radius-pill);
  background: var(--surface-card);
  box-shadow: var(--ring-hairline);
  font-size: 14px;
  color: var(--text-body);
}
.contact .c-item {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: inherit;
  font-weight: var(--font-weight-medium);
  text-decoration: none;
  white-space: nowrap;
}
.contact .c-item .lucide { width: 15px; height: 15px; color: var(--text-muted); }
.contact a.c-item:hover { color: var(--text-primary); }

.note { font-size: 12px; color: var(--text-muted); margin-top: 12px; line-height: 1.6; }

/* --- Footer --------------------------------------------------------------------------------------- */
footer {
  border-top: 1px solid var(--border-hairline);
  padding: 34px 0 44px;
  color: var(--text-muted);
  font-size: 12px;
  line-height: 1.9;
  text-align: center;
}
footer a { color: var(--text-muted); }

/* --- Reveal 進場動畫 -------------------------------------------------------------------------------- */
/* 標記方式：單一元素加 class="rv"；容器加 data-rv-stagger="毫秒" 讓直接子元素依序進場。
   index.html 底部的 JS 用 IntersectionObserver 加 .in——只跑一次，回捲不重播。
   隱藏狀態全掛在 .rv-on（<head> 內聯 script 加上）底下：JS 沒跑就不會把內容藏住。
   整段包在 no-preference：使用者要求減少動態時，這些規則整組不存在。 */
@media (prefers-reduced-motion: no-preference) {
  .rv-on .rv {
    opacity: 0;
    /* 用獨立的 translate 屬性，避免蓋掉既有 transform（拍立得的 tilt） */
    translate: 0 14px;
    transition: opacity 0.55s ease-out, translate 0.55s ease-out, transform 0.6s ease-out;
  }
  .rv-on .rv.in,
  .rv-on [data-rv-stagger].in .rv {
    opacity: 1;
    translate: 0 0;
  }
  /* 表格列：transform/translate 在 <tr> 上跨瀏覽器不可靠，只淡入 */
  .rv-on tr.rv { translate: 0 0; }

  /* Hero 開頁就看得到，用載入動畫（跑一次），不掛 scroll */
  @keyframes rv-rise { from { opacity: 0; translate: 0 14px; } }
  @keyframes rv-fade { from { opacity: 0; } }
  .rv-on .hero-copy > * { animation: rv-rise 0.6s ease-out backwards; }
  .rv-on .hero-copy > :nth-child(2) { animation-delay: 0.08s; }
  .rv-on .hero-copy > :nth-child(3) { animation-delay: 0.16s; }
  .rv-on .hero-copy > :nth-child(4) { animation-delay: 0.24s; }
  .rv-on .hero-photo { animation: rv-fade 0.8s ease-out 0.15s backwards; } /* 大圖只淡入不位移 */
  .rv-on .stat { animation: rv-rise 0.6s ease-out backwards; }
  .rv-on .stat:nth-child(1) { animation-delay: 0.3s; }
  .rv-on .stat:nth-child(2) { animation-delay: 0.38s; }
  .rv-on .stat:nth-child(3) { animation-delay: 0.46s; }
  .rv-on .stat:nth-child(4) { animation-delay: 0.54s; }

  /* 圖表比卡片晚一拍才開始動：容器先淡入，內容再生長。
     元素各自的錯開時間用 --bd（標在 SVG 元素的 style 上）疊加在這個基準上 */
  .chart-bars, .chart-spans { --rv-chart-delay: 0.45s; }

  /* 長條圖（#p2、#p3）：長條從基線長上來（兩張圖基線都在 y=300），
     數值（.val）與註記虛線／結論（.pt）等長條到位才現身 */
  .rv-on .chart-bars .bar {
    transform-box: view-box;
    transform-origin: 50% 300px;
    transform: scaleY(0);
    transition: transform 0.7s cubic-bezier(0.22, 0.61, 0.36, 1);
    transition-delay: calc(var(--rv-chart-delay) + var(--bd, 0s));
  }
  .rv-on .chart-bars.in .bar { transform: scaleY(1); }

  /* 區間圖（#p4）：橫條由左往右展開；各條的 transform-origin 標在元素的 style 上 */
  .rv-on .chart-spans .span {
    transform-box: view-box;
    transform: scaleX(0);
    transition: transform 0.7s cubic-bezier(0.22, 0.61, 0.36, 1);
    transition-delay: calc(var(--rv-chart-delay) + var(--bd, 0s));
  }
  .rv-on .chart-spans.in .span { transform: scaleX(1); }

  .rv-on .chart-bars .val,
  .rv-on .chart-bars .pt,
  .rv-on .chart-spans .pt {
    opacity: 0;
    transition: opacity 0.5s ease-out;
  }
  .rv-on .chart-bars.in .val { opacity: 1; transition-delay: calc(var(--rv-chart-delay) + 0.55s); }
  .rv-on .chart-bars.in .pt,
  .rv-on .chart-spans.in .pt { opacity: 1; transition-delay: calc(var(--rv-chart-delay) + 0.8s); }

  /* 拍立得：平放進場，落定時才轉到各自的 tilt 角度（像把照片一張張擺上桌） */
  .rv-on .polaroid.rv { transform: rotate(0deg); translate: 0 18px; }
  .rv-on [data-rv-stagger].in .polaroid.rv { transform: rotate(var(--tilt, 0deg)); translate: 0 0; }
}

/* --- Motion --------------------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .btn { transition: none; }
}