/* 功能頁專用樣式（build 發成 /css/features.css，只在功能頁載入） */

/* ---------- 頁首 ---------- */
.feat-hero { text-align: center; padding-bottom: clamp(36px, 5vw, 60px); }
.feat-hero .kicker::after { content: ""; width: 22px; height: 1px; background: var(--gold-a45); }
.feat-hero .lead { margin-inline: auto; }
.feat-hero .cta-row { justify-content: center; }
.feat-hero h1 { text-wrap: balance; }
.feat-h1-2 { display: block; }
html[lang="zh-Hant"] .feat h2, html[lang="zh-Hant"] #plans h2, html[lang="zh-Hant"] #devices h2, html[lang="zh-Hant"] #get h2 { word-break: keep-all; overflow-wrap: anywhere; }
.feat h2 { text-wrap: balance; }
.feat-hero-note { margin-top: 16px; font-size: .88rem; color: var(--muted); }
@media (max-width: 640px) {
  .feat-hero { text-align: left; }
  .feat-hero .cta-row { justify-content: flex-start; }
  .feat-hero .kicker::after { display: none; }
}

/* ---------- 錨點膠囊列 ---------- */
.subnav .chip { gap: 7px; }
.subnav .chip .ico { width: 17px; height: 17px; color: var(--gold); flex: none; }
@media (min-width: 1081px) { .subnav .chip-row { justify-content: center; } }

/* ---------- 功能區塊 ---------- */
.feat .kicker { flex-wrap: wrap; row-gap: 6px; }
.feat-num { font-family: var(--font-head); font-weight: 900; font-size: .92rem; letter-spacing: .06em; color: var(--gold-hi); padding-right: 10px; border-right: 1px solid var(--gold-a25); }
.feat .kicker .chip-pro { letter-spacing: .08em; }
.feat .list-check { margin: 22px 0 22px; }
.feat .lead { font-size: clamp(1.02rem, .97rem + .25vw, 1.12rem); }
.plan-note { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; max-width: 34em; padding: 10px 16px; border: 1px solid var(--line-soft); border-radius: var(--r-sm); background: rgba(255, 255, 255, .025); font-size: .92rem; line-height: 1.6; color: #c9c6bd; }
.plan-note > span:last-child { flex: 1 1 14em; min-width: 0; }
.plan-note > .ico { width: 18px; height: 18px; color: var(--gold); flex: none; }
.plan-note + .plan-note { margin-top: 10px; }
.feat-ref { margin: 22px 0 0; font-size: .92rem; color: var(--muted); max-width: 34em; }

/* 截圖尺寸 */
.feat .split-media > .phone { --w: min(280px, 72vw); }
.feat .phone-pair { width: 100%; max-width: 540px; }
.feat .phone-pair .phone { --w: clamp(150px, 44vw, 250px); }
.feat .split-media > .tablet { --w: min(440px, 88vw); }

/* 平板＋手機（資料與同步） */
.device-combo { position: relative; padding: 0 56px 36px 0; }
.device-combo .tablet { --w: min(420px, 74vw); }
.device-combo .phone { --w: min(170px, 32vw); position: absolute; right: 0; bottom: 0; z-index: 2; }
/* 手機版只留手機框（平板截圖縮到 330px 寬時字看不清） */
@media (max-width: 760px) {
  .device-combo { padding: 0; }
  .device-combo .tablet { display: none; }
  .device-combo .phone { --w: min(240px, 66vw); position: static; }
}

/* 勝率步驟（HowTo） */
.feat-howto { margin-top: clamp(40px, 5vw, 64px); }
.feat-howto h3 { font-size: clamp(1.15rem, 1.05rem + .4vw, 1.35rem); margin: 0 0 18px; }
.feat-steps { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.feat-steps > li { padding: 64px 20px 22px; }
.feat-steps > li::before { top: 20px; left: 20px; }
.feat-steps .step-title { display: block; margin-bottom: 6px; }
.feat-steps .step-text { display: block; color: #c9c6bd; font-size: .95rem; }
@media (max-width: 980px) { .feat-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) {
  .feat-steps { grid-template-columns: minmax(0, 1fr); }
  .feat-steps > li { padding: 18px 18px 18px 66px; }
  .feat-steps > li::before { top: 18px; left: 18px; }
}

/* ---------- 免費 vs Pro ---------- */
.feat-table th[scope="row"] { font-weight: 700; color: #dedad0; }

@media (max-width: 420px) { .feat-table th, .feat-table td { padding: 12px 12px; font-size: .9rem; } }

/* ---------- 收尾 ---------- */
.cta-panel h2 { margin-bottom: 12px; }
.feat-qr .qr-code { width: 168px; height: 168px; }

@media (max-width: 860px) {
  .feat .split { gap: 40px; }
}