/* ============================================================
   Course Kit 官網 — 跨頁共用樣式（site.css）
   來源：從 index.html v12 的內嵌 <style>（502 行）抽出跨頁共用部分。
   本檔管：design tokens／字體排印基礎／容器與區塊佈局／header+nav／
   footer／按鈕三態（primary/ghost/outline，圓角 14px 不用藥丸型）／
   文章卡／email 表單／麵包屑／語言切換器／CTA 帶／.track-learn /
   .track-coach 兩組路線變數（模組對外介面，完整搬）。
   每頁 <link> 這份在前，各頁的 page-<name>.css 在後。
   品牌色 SSOT：canonical 在 coursekit repo .claude/docs/brand/brand-tokens.json
   （本 repo 位置說明見 content-studio/BRAND.md）
   ============================================================ */
:root{
  --brand:#7fd6f0; --brand-2:#7abcd0; --brand-deep:#3b97b3;
  /* --brand-deep 拆兩顆（Lucy 2026-08-01 裁決）：--brand-deep 只給裝飾、框線、accent-color 用
     （UI 元件門檻 3:1，維持原值不動）；--brand-text 給所有文字用途（門檻 4.5:1，實測白底 5.83／
     #FAFAFA 5.59／#e9f7fc 5.33／#f4f3d2 5.17 全過）。這樣對比補到位而已驗收的 landing v12 視覺不動。 */
  --brand-text:#256d84;
  --brand-tint:#a8e1ee; --brand-tint-2:#e9f7fc; --brand-border:#bfe6f1;
  --ink:#063c5e; --ink-2:#1f5e80;
  --warm:#f4f3d2; --warm-line:#e7e3b0;
  --bg:#FAFAFA; --card:#FFFFFF;
  /* --faint 2026-08-01 加深修對比不足：24 處全是 color 文字用途，零背景零框線，改深不動版面。
     實測對比 白底 5.24／#FAFAFA 5.02／#e9f7fc 4.79／#f4f3d2 4.64，四種底色全過 4.5。
     #6E6E73 在 warm 底只有 4.49 差 0.01 所以沒選。 */
  --text:#2C2C2C; --sub:#6E6E73; --faint:#6b6c70; --line:#E6EBEE;
  /* 2026-08-09 dark mode 新增（PROTOTYPE_PLAN dark-mode 案）：兩顆語意 token，預設值＝現有
     primitive，light mode 零視覺變化。--ink／--card 兩顆 primitive 本身刻意不隨主題變色
     （見下方 dark 區塊註解說明角色分工），這兩顆新 token 只接手「真的要跟著主題反轉」的呼叫點：
     --surface＝卡片/面板/輸入框等「實體表面」背景（light＝白卡，dark＝深藏青抬升一階）；
     --heading＝標題/強調文字/選單文字等「站在 --bg 或 --surface 上」的文字色
     （light＝深藏青，dark＝近白）。呼叫點判斷準則：文字或底色若配的是會隨主題變色的表面
     （頁面底色／--surface），走新 token；若配的是刻意固定不變的強調底色（--brand／--warm／
     --brand-tint 這類「貼紙」色塊，兩色永遠成對、不隨主題翻轉），維持原本 var(--ink)／
     var(--card) 不動，全站呼叫點分類見 DARK_MODE_AUDIT（各 page-*.css 同一套準則）。 */
  --surface:var(--card); --heading:var(--ink);
  --r-lg:28px; --r-md:18px; --r-sm:12px; --r-xs:6px;
  /* 2026-08-02 trim2 第 4 刀：上限 148px → 96px。1280 寬原本吃 10vw=128px，現在被夾在 96px。
     下限 80px 不動，窄版（≤800 寬）算出來還是 80px，手機留白一格沒變。 */
  --pad-sec:clamp(80px,10vw,96px);
  /* 2026-08-03 接縫固定化（Lucy 拍板）：全站區塊之間只准出現兩種空白值，開新區塊照抄。
     一般接縫（跨主題）＝上下各 --pad-sec，section 預設就是這個，不用寫 class。
     緊接縫（同一條路線連續、刻意要黏在一起）＝後面那塊改吃 --pad-sec-tight。
     用法：<section class="sec-tight">。
     2026-08-03 第二輪：Lucy 圈了四處說還是近，48px 定值 → clamp(48,6vw,72)。
     landing 的 --pad-sec 另外在 page-landing.css 提到 96-120（只有 landing，見那支說明）。
     2026-08-03 第三輪：Lucy 說第二輪「又鬆了」，要第一輪與第二輪的中間值。
     72px 上限取兩輪中點 → 60px；下限與 vw 中項按同比例（60/72）縮：48→40、6vw→5vw。
     landing 的 --pad-sec 同步收斂，見 page-landing.css 對應段落。
     算出來的接縫：landing 1280 一般 216／緊 168，390 一般 172／緊 126。
     2026-08-03 第四輪：Lucy 說第三輪還要再鬆半格，但第二輪的 240/192 她嫌太鬆，
     所以只加半格：60px 上限 → 64px（8 的倍數）；下限與 vw 中項按同比例（64/60）縮：
     40→42.667≈43、5vw→5.3vw。390 寬 5.3vw=20.7px 仍小於下限 43px，照樣夾在下限。
     算出來的接縫：landing 1280 一般 224／緊 176，390 一般 178／緊 132。
     2026-08-03 第五輪：Lucy 說第四輪還要再鬆，加一格 8：64px 上限 → 68px；
     下限與 vw 中項按同比例（68/64）縮：43→45.6875≈46、5.3vw→5.6vw。
     390 寬 5.6vw=21.8px 仍小於下限 46px，照樣夾在下限。
     算出來的接縫：landing 1280 一般 232／緊 184，390 一般 184／緊 138。
     ⚠️ 這是 Lucy 明講的「最後一階」：一般接縫 232 已經逼近她在第二輪明確否決過的
     240（只差 8）。再往上加一格會撞進被否決區間，開下一輪前要先跟 Lucy 核對是否真要
     推翻第二輪的判斷，不要自己假設「再鬆一點沒關係」就繼續加。
     ⚠️ 不要為了「這裡看起來再小一點比較好」開第三顆值，要開先問 Lucy。 */
  --pad-sec-tight:clamp(46px,5.6vw,68px);
  /* 2026-08-06 收斂：.page-top 頁首留白這條規則原本在 6 支 page-*.css（about/article/
     blog/download/pricing/simple）逐字複製，手機斷點覆寫也在其中 3 支重複。收成 token
     +共用規則放這裡跟下面 section 間距規則一起管，6 支檔各自刪掉重複定義（純搬移，值不變）。 */
  --pad-page-top:calc(64px + clamp(36px,6vw,60px));
  /* --pad-body-top：文章內文（.art-body）頁首下緣 44px。原本 blog 列表（.blog-list）也吃這顆，
     兩邊本來各寫各的（40px／44px），2026-08-06 統一收成 token。
     2026-08-08 blog 列表改版成 .blog-sheet 紙感版型、自己管間距，不再用這顆，只剩 .art-body 在吃。 */
  --pad-body-top:44px;
  --maxw:1140px;
  --shadow-sm:0 1px 2px rgba(6,60,94,.04),0 8px 24px rgba(6,60,94,.06);
  --shadow-md:0 2px 6px rgba(6,60,94,.06),0 18px 44px rgba(6,60,94,.10);
  --shadow-lg:0 2px 4px rgba(6,60,94,.05),0 30px 76px rgba(6,60,94,.16);
  /* 深色卡片（.dark／.tier／.showcase／.tier-perk）文字色系（2026-08-01 batch4 從
     landing/pricing/about 三份重複定義裡抽出來，色值一個都沒改，純粹補 token）。
     --dark-frame 是手機外框深色，不是文字色，但同批一起做掉。 */
  --dark-fg:#dbeaf3; --dark-fg-muted:#9dc3d8; --dark-fg-lead:#b6d5e6;
  --dark-fg-tick:#cfe6f1; --dark-fg-perk:#bcd9e8; --dark-frame:#0f2b3d;
  /* 2026-08-04 新增（DESIGN_REVIEW_2026-08-01.md P5）：9 支 page-*.css 疊了一堆
     12-21px 之間、每次差 0.5-1px 的一次性 font-size 字面值，沒有等比階梯。這 6 個
     token 是照那批既有字面值的實際分布收斂出來的階梯（約 1.1 倍等比），不是憑空
     定義；命名沿用 --r-xs/sm/md/lg 與 --shadow-sm/md/lg 的縮寫慣例，往兩端多開
     一階給 xl／2xl。只新增，site.css 既有的 body／h1-h3／.eyebrow 等字級字面值
     不動。44px 以上的大數字（.amb-num b、.magnet-mockup .num、.track-mark 等
     hero/統計數字展示，不是內文字級）不屬於這個梯度，不強行納入。 */
  --fs-xs:12.5px; --fs-sm:14px; --fs-md:15.5px; --fs-lg:17px; --fs-xl:19px; --fs-2xl:21px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;scroll-padding-top:76px}
body{margin:0;background:var(--bg);color:var(--text);
  font-family:-apple-system,BlinkMacSystemFont,"PingFang TC","Noto Sans TC","Microsoft JhengHei",system-ui,sans-serif;
  font-size:17px;line-height:1.75;letter-spacing:.01em;-webkit-font-smoothing:antialiased;overflow-x:hidden}
/* height:auto 一定要留著。2026-08-01 全站幫 img 補 width/height 屬性防 CLS 之後，
   只設 width 的元件（.dn-side img、.tier-perk img、.qr img、.phone img 等）會吃到屬性寫死的
   原始像素高度，跟 max-width:100% 的寬度縮放打架，圖被拉成細長條。實測 landing 一次壞掉 19 張。
   這條的權重只有 0,0,1，凡是自己有設 height 的 class 規則（.logo img、.pin-phone img、
   .track-anim img、.fork .ic img、.feat-shots.cluster3 .phone img）都照樣蓋得過它。 */
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 clamp(20px,5vw,32px)}
section{padding:var(--pad-sec) 0}
/* 緊接縫：只縮上緣，下緣維持 --pad-sec。掛在「後面那一塊」身上，因為接縫要黏的是它跟上一塊。
   2026-08-03 取代 index.html 裡 7 處 inline style="padding-top:0"（inline 會讓接縫只剩單邊、
   變成別處的一半，就是 Lucy 說「六張卡前後很緊」的成因）。 */
.sec-tight{padding-top:var(--pad-sec-tight)}
/* 完全零間距：相鄰兩個同底色 section 共用一份間距（其中一塊的頂距整個讓掉）時用，
   跟 .sec-tight 是同一組間距工具，只是這條吃 0 不吃 --pad-sec-tight。
   2026-08-03 收斂 about／pricing／thanks 三頁殘留的 inline style="padding-top:0"。 */
.sec-flush{padding-top:0}
/* .page-top：固定 header 下方的頁首留白，跨頁共用（about/article/blog/download/
   pricing/simple 6 頁模板），2026-08-06 從 6 支 page-*.css 逐字複製收斂上來。 */
.page-top{padding-top:var(--pad-page-top)}
@media (max-width:960px){
  .page-top{padding-top:calc(64px + 28px)}
}

/* 2026-08-10 換行品質：標題一律 text-wrap:balance，讓瀏覽器把字平均分到各行，
   消掉「最後一行只剩一兩個字」的孤兒行（en 的 4 字標題斷成 3+1、ja 的最後一行只剩一個假名）。
   段落用 pretty（只修最後一行）在下面 p 的規則裡。不支援的瀏覽器忽略這行，退回原本行為。
   日文另外開 word-break:auto-phrase（Chrome 119+），讓斷行落在文節邊界而不是任意字元；
   Safari 尚未支援會忽略，此時仍有 balance 兜底。 */
h1,h2,h3{color:var(--heading);margin:0;letter-spacing:-.022em;line-height:1.16;font-weight:800;text-wrap:balance}
html[lang^="ja"] h1,html[lang^="ja"] h2,html[lang^="ja"] h3,html[lang^="ja"] .strip-grid b,html[lang^="ja"] .strip-grid span,html[lang^="ja"] .pin-tab{word-break:auto-phrase}
h1{font-size:clamp(34px,5.6vw,64px)}
h2{font-size:clamp(27px,4vw,46px)}
h3{font-size:clamp(19px,2.3vw,26px);line-height:1.35}
.eyebrow{font-size:13px;font-weight:700;letter-spacing:.14em;color:var(--brand-text);text-transform:uppercase;margin:0 0 16px}
.lead{font-size:clamp(17px,2vw,21px);color:var(--ink-2);line-height:1.72;margin:20px 0 0;max-width:58ch}
p{margin:14px 0 0;color:var(--sub)}
strong{color:var(--heading);font-weight:700}
.center{text-align:center}
.center .lead,.lead.center{margin-left:auto;margin-right:auto}   /* 兩個 class 同一顆元素時，後代選擇器不會命中，要補上 .lead.center */
.note{font-size:13.5px;color:var(--faint);margin-top:12px}
.todo{display:inline-block;margin-left:8px;padding:2px 9px;border-radius:999px;background:var(--warm);border:1px solid var(--warm-line);font-size:12px;font-weight:700;color:var(--ink);vertical-align:middle}

/* ---------- nav ---------- */
/* 用 #hdr 而不是裸 header 標籤選：文章頁的 .art-head 也是語意 <header>（文章自己的
   標題區塊），裸標籤選會連它一起吃到 fixed 定位，蓋住真正的站台 nav（已在 RWD 這次修掉）。 */
#hdr{position:fixed;inset:0 0 auto;z-index:70;background:rgba(250,250,250,.72);backdrop-filter:saturate(180%) blur(18px);border-bottom:1px solid transparent;transition:border-color .3s,background .3s}
/* 2026-08-01 新增，避免 iPhone 瀏海／動態島吃到內容。漸進增強寫法：env() 不支援的瀏覽器整條
   宣告失效、自動退回沒有這條時的樣子，不會壞版面。 */
#hdr{padding-top:env(safe-area-inset-top,0px);padding-left:env(safe-area-inset-left,0px);padding-right:env(safe-area-inset-right,0px)}
#hdr.stuck{border-bottom-color:var(--line);background:rgba(250,250,250,.92)}
.nav{display:flex;align-items:center;gap:24px;height:64px}
.logo{display:flex;align-items:center;gap:10px;font-weight:800;color:var(--heading)}
.logo img{width:30px;height:30px;border-radius:8px}
.nav-links{display:flex;gap:22px;margin-left:auto;font-size:15px;font-weight:600;color:var(--ink-2)}
.nav-links a{opacity:.82;transition:opacity .2s,color .2s;position:relative}
/* 非 landing 頁的 active 態：直接在目前頁面的 <a> 上寫死 class="on"（landing 頁用 JS scroll-spy 自動加） */
.nav-links a:hover,.nav-links a.on{opacity:1;color:var(--brand-text)}
.nav-links a.on::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:2px;border-radius:2px;background:var(--brand)}

/* ---------- 按鈕三態：primary / ghost / outline（圓角 14px，不用藥丸型） ---------- */
/* 2026-08-01 Lucy 裁決按鈕改小（B 版）：圓角 14px 是 2026-08-01 前的拍板值，
   Lucy 當日改判太大，收成 12px；根因是 line-height 沒設，吃到 body 的 1.75，
   16px 字撐出 28px 行高，按鈕才會是 56px 高，line-height 才是主因不是 padding。 */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 22px;border-radius:12px;font-weight:700;font-size:16px;line-height:1.2;border:1px solid transparent;cursor:pointer;transition:transform .25s cubic-bezier(.2,.8,.2,1),box-shadow .25s;white-space:nowrap;overflow:hidden;font-family:inherit}
.btn-primary{background:var(--ink);color:var(--card);box-shadow:0 8px 20px rgba(6,60,94,.18)}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 14px 32px rgba(6,60,94,.26)}
.btn-ghost{background:var(--surface);color:var(--heading);border-color:var(--brand-border);box-shadow:var(--shadow-sm)}
.btn-ghost:hover{transform:translateY(-2px);border-color:var(--brand-2)}
/* 一般（淺色背景）情境的 outline；深色卡片內（例如方案卡）另有 .tier .btn-outline 覆寫，見 page-landing.css */
.btn-outline{background:transparent;color:var(--heading);border-color:var(--ink-2);box-shadow:none}
.btn-outline:hover{transform:translateY(-2px);background:var(--outline-hover-bg,rgba(6,60,94,.05));border-color:var(--ink)}
.btn-glow{background:var(--brand);color:var(--ink);box-shadow:0 10px 30px rgba(127,214,240,.45)}
.btn-glow:hover{transform:translateY(-2px);box-shadow:0 16px 40px rgba(127,214,240,.62)}
.btn-sm{padding:8px 16px;font-size:15px;border-radius:10px}
.btn::after{content:"";position:absolute;inset:0;border-radius:inherit;opacity:0;transition:opacity .3s;pointer-events:none;background:radial-gradient(150px circle at var(--mx,50%) var(--my,50%),rgba(255,255,255,.5),transparent 66%)}  /* 2026-08-10：.35→.5、120→150px */
.btn:hover::after{opacity:1}
.btn-ghost::after{background:radial-gradient(170px circle at var(--mx,50%) var(--my,50%),rgba(127,214,240,.58),transparent 66%)}
/* 2026-08-20 送出中轉圈：表單送出要立刻有回饋，不能讓人乾等一顆沒反應的按鈕。
   文字用 color:transparent 藏起來（不是換字），按鈕寬度才不會在 loading 時抽動；
   轉圈用 ::before（::after 已經被上面的 hover 光暈佔走）。
   邊框色吃 currentColor，深色底的描邊鈕與淺色底的實心鈕都不用各寫一份。
   JS 那邊記得同時上 disabled 與 aria-busy="true"（讀屏使用者靠這顆知道在忙）。 */
.btn.is-loading{color:transparent !important;pointer-events:none}
.btn.is-loading::before{content:"";position:absolute;top:50%;left:50%;width:17px;height:17px;
  margin:-8.5px 0 0 -8.5px;border-radius:50%;border:2px solid currentColor;border-top-color:transparent;
  color:var(--btn-spinner,#fff);animation:btn-spin .7s linear infinite}
.btn-primary.is-loading::before,.btn-glow.is-loading::before{--btn-spinner:var(--card)}
.btn-outline.is-loading::before,.btn-ghost.is-loading::before{--btn-spinner:var(--heading)}
@keyframes btn-spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.btn.is-loading::before{animation-duration:1.6s}}

/* ---------- 全域鍵盤 focus 樣式（2026-08-01 新增，18 頁原本一條都沒有） ---------- */
:focus-visible{outline:2px solid var(--brand-deep);outline-offset:2px}

/* ---------- 麵包屑（新增，多頁共用） ---------- */
.breadcrumb{display:flex;flex-wrap:wrap;align-items:center;gap:6px;font-size:13.5px;color:var(--faint);margin:0 0 18px}
.breadcrumb a{color:var(--ink-2);opacity:.85}
.breadcrumb a:hover{opacity:1;color:var(--brand-text)}
.breadcrumb .bc-sep{color:var(--faint)}
.breadcrumb .bc-current{color:var(--heading);font-weight:700}

/* ---------- 語言切換器（新增，多頁共用；en/ja 即將推出） ---------- */
/* .hdr-actions（2026-08-09 dark mode 新增）：包住 .lang-switch ＋ .theme-toggle 兩顆鈕的
   横排容器。桌機／手機都要橫排，所以這條寫在 media query 外面當基礎規則；手機版的
   align-self／margin 調整見下面 @media(max-width:960px) 區塊。 */
.hdr-actions{display:flex;align-items:center;gap:10px}
.lang-switch{position:relative}
.lang-trigger{display:inline-flex;align-items:center;gap:6px;padding:8px 12px;border-radius:999px;border:1px solid var(--brand-border);background:var(--surface);font-size:14px;font-weight:700;color:var(--ink-2);cursor:pointer;box-shadow:var(--shadow-sm);font-family:inherit}
.lang-trigger:hover{border-color:var(--brand-2)}
.lang-trigger .flag{font-size:15px;line-height:1}
.lang-trigger .care{font-size:10px;opacity:.7;transition:transform .2s}
.lang-switch:hover .lang-trigger .care,.lang-switch:focus-within .lang-trigger .care{transform:rotate(180deg)}
.lang-menu{position:absolute;top:calc(100% + 8px);right:0;min-width:100%;width:max-content;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);box-shadow:var(--shadow-md);padding:6px;z-index:80;opacity:0;pointer-events:none;transform:translateY(4px);transition:opacity .2s,transform .2s}
.lang-switch:hover .lang-menu,.lang-switch:focus-within .lang-menu{opacity:1;pointer-events:auto;transform:none}
/* 2026-08-20：hover 展開後滑鼠構不到選單。.lang-menu 定位在 top:calc(100% + 8px)，
   實測觸發鈕底緣到選單頂緣有 12px 空隙，那段不屬於 .lang-switch 的 box，
   滑鼠往下移一進入空隙 :hover 就斷、選單收掉（實測 opacity 1 → 0 → 0）。
   之所以「先點才能選」是因為點擊讓 :focus-within 把它閂住，不是設計如此。
   用一塊透明 ::before 把空隙補成選單自己的一部分（選單是 .lang-switch 的子孫，
   hover 到它就等於 hover 到 .lang-switch）。選單關閉時 pointer-events:none 會一起
   繼承下去，所以這塊橋不會在沒展開時攔到點擊。改 top 的間距時這裡的高度要跟著改。 */
.lang-menu::before{content:"";position:absolute;left:0;right:0;top:-12px;height:12px}
.lang-menu a{display:flex;align-items:center;justify-content:flex-start;gap:8px;padding:9px 10px;border-radius:10px;font-size:14px;font-weight:600;color:var(--heading)}
.lang-menu a:hover{background:var(--brand-tint-2)}
.lang-menu a.is-current{color:var(--brand-text)}
.lang-menu a.is-soon{color:var(--faint);cursor:default;pointer-events:none}
/* 2026-08-10：選單改成只放「國旗＋語言代碼」（ZH / EN / JA），寬度跟著 .lang-trigger 走
   （min-width:100% 吃 .lang-switch 的寬，width:max-content 讓內容再撐一點），
   不再固定 196px。舊的「即將推出」徽章樣式留著備用；徽章 nowrap 且不准被壓縮。 */
.lang-menu a.is-soon .soon{font-size:11px;font-weight:700;padding:2px 7px;border-radius:999px;background:var(--warm);border:1px solid var(--warm-line);color:var(--ink);white-space:nowrap;flex:0 0 auto}

/* ---------- 主題切換鈕 .theme-toggle（2026-08-09 dark mode 新增）
   視覺語彙比照 .lang-trigger（圓形圖示鈕，跟語言切換鈕並排放在 header），
   inline SVG 不用外部圖檔。太陽／月亮兩顆 icon 都畫在按鈕裡，靠 [data-theme] 切換顯示；
   沒有 [data-theme]（JS 關閉或 localStorage 不可用）時預設顯示太陽（對應 light 預設）。
   實際的「點擊切換 + 記憶 + 跟隨系統」邏輯在 assets/theme-toggle.js，這裡只管長相。 */
.theme-toggle{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;flex:0 0 auto;border-radius:999px;border:1px solid var(--brand-border);background:var(--surface);color:var(--ink-2);cursor:pointer;box-shadow:var(--shadow-sm);transition:border-color .2s,transform .2s;font-family:inherit}
.theme-toggle:hover{border-color:var(--brand-2);transform:translateY(-1px)}
.theme-toggle svg{width:18px;height:18px;display:block}
.theme-toggle .icon-moon{display:none}
:root[data-theme="dark"] .theme-toggle .icon-sun{display:none}
:root[data-theme="dark"] .theme-toggle .icon-moon{display:block}

/* ---------- 回到頂部按鈕 .back-to-top（2026-08-06 新增，JS 動態生成／六頁白名單，
   見 site-motion.js。圓鈕沿用 .btn-primary 同一套底色/陰影語彙，圓角改 50% 純圓形，
   不是既有按鈕元件的變體所以獨立命名，不搶 .btn 的既有樣式面。
   is-visible 前 opacity:0 + translateY 位移＋pointer-events:none（避免疊在內容上
   還吃得到點擊/鍵盤 focus），過渡曲線比照 .btn-primary 的 transform 過渡。 ---------- */
.back-to-top{position:fixed;right:clamp(16px,4vw,32px);bottom:clamp(16px,4vw,32px);z-index:60;
  width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:var(--ink);color:var(--card);border:1px solid transparent;box-shadow:var(--shadow-md);
  cursor:pointer;opacity:0;pointer-events:none;transform:translateY(12px);
  transition:opacity .3s ease,transform .3s ease,box-shadow .25s;font-family:inherit}
.back-to-top.is-visible{opacity:1;pointer-events:auto;transform:translateY(0)}
.back-to-top:hover{box-shadow:0 14px 32px rgba(6,60,94,.26);transform:translateY(-2px)}
.back-to-top:focus-visible{outline:2px solid var(--brand-deep);outline-offset:2px}

/* ========== 兩條路線的樣式模組（模組對外介面，完整搬） ==========
   一條路線 = 一組 token。要改配色只動 .track-learn / .track-coach 這兩塊，
   吃這組變數的元件（.track / .track-mark / .track-rail / .card 的 --ci-* 等）
   留在 page-landing.css，因為目前只有 landing 用得到；這裡只搬變數定義本身。 */
.track-learn{
  --tk-bg:linear-gradient(180deg,var(--bg) 0%,rgba(233,247,252,.72) 26%,rgba(233,247,252,.5) 100%);
  --tk-mark:rgba(123,197,211,.22);
  --tk-rail-bg:var(--surface); --tk-rail-fg:var(--brand-text); --tk-rail-line:var(--brand-border);
  --ci-fg:var(--brand-text); --ci-bg:var(--brand-tint-2); --ci-line:var(--brand-border);
}
.track-coach{
  --tk-bg:linear-gradient(180deg,rgba(244,243,210,.62) 0%,rgba(244,243,210,.34) 60%,var(--bg) 100%);
  --tk-mark:rgba(184,178,96,.24);
  --tk-rail-bg:var(--ink); --tk-rail-fg:var(--card); --tk-rail-line:var(--ink);
  --ci-fg:var(--ink); --ci-bg:var(--warm); --ci-line:var(--warm-line);
}
/* 路線外的區塊（細節、方案、CTA）沒有 .track-*，給一組預設值 */
body{--ci-fg:var(--brand-text); --ci-bg:var(--brand-tint-2); --ci-line:var(--brand-border)}

/* ---------- CTA 帶（新增，一套樣式 ×4 分類文案，文案見 partials.md） ---------- */
.cta-band{position:relative;overflow:hidden;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px;margin:48px 0;padding:28px 32px;border-radius:var(--r-lg);background:linear-gradient(135deg,var(--brand-tint-2),var(--surface) 62%);border:1px solid var(--brand-border);box-shadow:var(--shadow-sm)}
.cta-band .cta-txt{max-width:52ch}
/* 2026-08-11 修內距節奏：卡內四個間距原本是 35/28/6/29，第二格（eyebrow 到 h3）明顯突出。
   原因是這裡只寫了 .eyebrow{margin-bottom:6px}，但 h3 吃到全站預設的 margin-top:28px，
   .cta-txt 是普通區塊，兩個外距合併後取大的，講好的 6px 實際渲染成 28px。
   h3 的 margin-top 歸零讓 6px 生效；eyebrow 的 margin-top 也歸零，讓上下留白對稱回 padding 的 28px。
   改的是 .cta-band 作用域內的覆寫，不動 h3／eyebrow 的全站預設，其餘 6 頁的 CTA 帶一起受惠。 */
.cta-band .eyebrow{margin-top:0;margin-bottom:6px}
.cta-band h3{margin-top:0;font-size:20px}
.cta-band p{font-size:15px;margin-top:6px}
.cta-band .btn{flex:0 0 auto}

/* ---------- 頁尾下一步導引（內容頁專用，2026-08-03 新增）：純文字＋2-3 個內文連結的軟性收尾，
   跟 .cta-band（決策頁硬 CTA）／.exit-grid（出口頁卡片牆）分工，是三種頁尾收尾裡最輕量的一種，
   不用卡片視覺、不搶正文注意力。用法與適用頁面清單見 partials.md 第 8 節。 ---------- */
.next-guide{border-top:1px solid var(--line)}
.next-guide .ng-text{max-width:70ch;font-size:16px;color:var(--ink-2);line-height:1.8}
.next-guide .ng-text b{color:var(--heading)}
.next-guide .ng-text a{font-weight:700;color:var(--brand-text)}
.next-guide .ng-text a:hover{text-decoration:underline}

/* ---------- email 表單 ---------- */
form.capture{display:flex;gap:10px;margin-top:28px;flex-wrap:wrap;max-width:560px}
form.capture input{flex:1 1 240px;padding:14px 18px;border-radius:999px;border:1px solid var(--brand-border);background:var(--surface);font-size:16px;font-family:inherit;color:var(--text);box-shadow:var(--shadow-sm)}
form.capture input:focus{outline:2px solid var(--brand);outline-offset:1px}
.form-note{font-size:13.5px;color:var(--faint);margin-top:14px}

/* ---------- 文章卡（整卡 <a> 包住；.post 本身可以是 <a> 或 <div>，CSS 不特別限定標籤） ---------- */
.posts{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:40px}
.post{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden;box-shadow:var(--shadow-sm);transition:transform .3s,box-shadow .3s;display:flex;flex-direction:column}
.post:hover{transform:translateY(-4px);box-shadow:var(--shadow-md)}
.post .thumb{height:146px;background:linear-gradient(135deg,var(--brand-tint),var(--brand-tint-2))}
/* 2026-08-21 Lucy：相關文章縮圖直接用文章封面。漸層留著當沒封面時的底
   （舊文章封面還是佔位圖就不放 img）。 */
.post .thumb img{width:100%;height:100%;object-fit:cover;display:block}
.post:nth-child(2) .thumb{background:linear-gradient(135deg,var(--warm),var(--brand-tint-2))}
.post:nth-child(3) .thumb{background:linear-gradient(135deg,var(--brand-2),var(--brand-tint))}
/* 2026-08-01 新增：縮圖顏色改用內容決定，不要用位置決定。同一份贈品在不同頁的排列位置不同，
   縮圖顏色就跟著 nth-child 變（單價換算在總覽頁是深青，被其他頁交叉引用時變暖黃綠）。
   HTML 由另一隊加 class，這裡先備好三條 class 版規則，特異度 (0,3,0) 跟上面 nth-child 三條一樣，
   靠檔案內順序在後面贏。nth-child 三條保留不刪，blog 卡片還在用。
   .post.is-placeholder .thumb 那條必須繼續排在最後面才蓋得過這些。 */
.post .thumb.thumb-a{background:linear-gradient(135deg,var(--brand-tint),var(--brand-tint-2))}
.post .thumb.thumb-b{background:linear-gradient(135deg,var(--warm),var(--brand-tint-2))}
.post .thumb.thumb-c{background:linear-gradient(135deg,var(--brand-2),var(--brand-tint))}
.post .body{padding:24px;flex:1;display:flex;flex-direction:column}
.post .tag{font-size:12.5px;font-weight:700;letter-spacing:.08em;color:var(--brand-text)}
.post h3{font-size:19px;margin-top:10px}
.post p{font-size:15px}
.post .more{margin-top:auto;padding-top:18px;font-size:15px;font-weight:700;color:var(--heading)}
/* 佔位卡（選題待定，整卡不可點，href="#" aria-disabled="true"）：原本只在 page-blog.css，
   landing 的 Blog 預覽區第三卡現在也用同一套，升到 site.css 讓兩頁共用同一份規則。
   這幾條要留在 .post:nth-child(n) 系列色塊規則之後，靠檔案內順序贏過同特異度的 nth-child 規則。 */
.post.is-placeholder{cursor:default;background:var(--bg);border-style:dashed}
.post.is-placeholder:hover{transform:none;box-shadow:var(--shadow-sm)}
.post.is-placeholder .thumb{background:repeating-linear-gradient(135deg,var(--line) 0 12px,transparent 12px 24px)}
.post.is-placeholder .tag{color:var(--faint)}
.post.is-placeholder h3{color:var(--sub)}
.post.is-placeholder .more{color:var(--faint)}

/* ---------- 打勾清單（.ticks，2026-08-01 batch4 從 page-landing.css／page-pricing.css
   逐字複製的兩份收斂進來；landing 的 .feat 區與 pricing／landing 的 .tier 都吃這份基底，
   .tier 情境下的顏色與字級覆寫留在下面的 .tier .ticks li 裡） ---------- */
.ticks{list-style:none;padding:0;margin:22px 0 0;--tick:18px}
/* 打勾圓圈：位置一律用 em 算，換字級也不會跑掉（原本寫死 top:9px，方案卡字小就偏了） */
.ticks li{position:relative;padding-left:calc(var(--tick) + 12px);margin-top:11px;color:var(--ink-2);font-size:16.5px;line-height:1.7}
.ticks li::before{content:"";position:absolute;left:0;top:calc((1.7em - var(--tick))/2);width:var(--tick);height:var(--tick);border-radius:50%;background:var(--brand-tint);border:1px solid var(--brand-2)}
.ticks li::after{content:"";position:absolute;left:calc(var(--tick)/2 - 2.5px);top:calc((1.7em - var(--tick))/2 + var(--tick)/2 - 5px);width:5px;height:9px;border:2px solid var(--ink);border-top:0;border-left:0;transform:rotate(42deg)}

/* ---------- 深色卡片基底 .dark（2026-08-01 batch4 收斂：landing／pricing／about 三份
   逐字相同的定義只留這一份，canonical 出處 page-landing.css:300-305）。
   文字色改用 --dark-fg 系列 token，色值不變，只是抽成變數（見 :root）。 ---------- */
.dark{background:var(--ink);color:var(--dark-fg);position:relative;overflow:hidden}
.dark h2,.dark h3{color:var(--card)}
.dark .eyebrow{color:var(--brand)}
.dark .lead{color:var(--dark-fg-lead)}
.dark p{color:var(--dark-fg-muted)}
.dark::before{content:"";position:absolute;width:74vw;height:74vw;left:50%;top:-44%;transform:translateX(-50%);background:radial-gradient(circle,rgba(127,214,240,.22) 0%,rgba(6,60,94,0) 66%);pointer-events:none}

/* ---------- 方案卡 .tier 整組（2026-08-01 batch4 收斂：landing／pricing 兩份逐字相同的
   who/h3/amt/desc/ticks/btn-outline/badge-flag/pay-note/tier-perk 只留這一份。
   canonical 出處 page-landing.css:306-338，唯一取捨：.amt 的高度限制原本一邊寫 height
   一邊寫 min-height，統一用 min-height（pricing 版），比較不會裁切內容。
   .tier .amt b.pending 只有 landing 用得到（pricing 的價格都已定案不需要待定樣式），
   留在 page-landing.css 不搬進來。 ---------- */
.tiers{position:relative;display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:46px;align-items:stretch}
.tier{position:relative;background:rgba(255,255,255,.06);border:1px solid rgba(127,214,240,.28);border-radius:var(--r-lg);padding:30px 26px;backdrop-filter:blur(8px);display:flex;flex-direction:column;overflow:hidden}
.tier.hot{border-color:rgba(127,214,240,.6)}
.tier.hot::before{content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1px;background:conic-gradient(from var(--beam,0deg),transparent 0 72%,rgba(127,214,240,.9) 82%,transparent 92%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none}
.tier .who{font-size:12.5px;font-weight:800;letter-spacing:.1em;color:var(--brand);text-transform:uppercase}
.tier h3{margin-top:8px;font-size:21px}
.tier .amt{display:flex;align-items:baseline;gap:8px;margin:14px 0 2px;min-height:clamp(34px,3.8vw,46px)}   /* 固定高度，數字與中文字的基線差異才不會把下面的列表推歪 */
.tier .amt b{font-size:clamp(30px,3.6vw,42px);color:var(--card);font-weight:800;letter-spacing:-.03em;line-height:1}
.tier .amt span{color:var(--dark-fg-muted);font-size:14.5px;font-weight:700}
/* .amt span 的特異度 (0,2,1) 蓋過 site.css 的 .todo{color:var(--ink)} (0,1,0)，
   導致價格待定徽章對比只剩 1.66:1，這裡把 .todo 的顏色權還回去 */
.tier .amt .todo{color:var(--ink)}
.tier .desc{font-size:14.5px;color:var(--dark-fg-muted);margin-top:6px;min-height:52px}   /* 兩行的高度，讓三張卡的打勾列表同一條起跑線 */
.tier .ticks{margin-top:16px;flex:1}   /* 撐開剩餘高度，三張卡的按鈕才會切齊 */
.tier .ticks li{color:var(--dark-fg-tick);font-size:15.5px;margin-top:9px}
.tier .ticks li::before{background:rgba(127,214,240,.28);border-color:var(--brand)}
.tier .ticks li::after{border-color:var(--card)}
.tier .btn{width:100%;margin-top:24px}
/* 只讓「個人版買斷」發亮，另外兩張收成描邊，視覺主次才清楚 */
.tier .btn-outline{background:transparent;color:#dff1f8;border:1px solid rgba(127,214,240,.5);box-shadow:none}
.tier .btn-outline:hover{background:rgba(127,214,240,.14);border-color:var(--brand);transform:translateY(-2px)}
.badge-flag{position:absolute;top:16px;right:16px;font-size:12px;font-weight:800;padding:3px 10px;border-radius:999px;background:var(--brand);color:var(--ink)}
.pay-note{margin-top:26px;font-size:14.5px;color:var(--dark-fg-muted);text-align:center}
/* 手冊贈品：直接掛在專業版卡內，虛線隔開 tick 區 */
.tier-perk{margin-top:18px;padding-top:16px;border-top:1px dashed rgba(127,214,240,.28);display:flex;gap:12px;align-items:flex-start}
.tier-perk img{width:40px;border-radius:var(--r-xs);box-shadow:var(--shadow-md)}
.tier-perk div{font-size:13.5px;line-height:1.65;color:var(--dark-fg-perk)}
.tier-perk b{display:block;color:var(--card);font-size:14.5px;margin-bottom:2px}

/* ---------- FAQ .faq（2026-08-01 batch4 收斂：landing／pricing 兩份逐字相同的定義只留
   這一份，canonical 出處 page-landing.css:347-353。page-article.css 的 .faq 原本字級小
   0.5px（summary 16.5px／ans 15.5px），這批統一成這裡的 17／16px，兩篇 blog 文章的 FAQ
   字級各大 0.5px，是刻意的 drift 消除（Lucy 已知）；article 頁的容器寬度／間距跟這裡不同，
   仍留在 page-article.css 自己覆寫。 ---------- */
.faq{max-width:820px;margin:40px auto 0}
.faq details{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);padding:0 24px;box-shadow:var(--shadow-sm);margin-bottom:12px}
.faq summary{list-style:none;cursor:pointer;padding:20px 0;font-weight:700;color:var(--heading);font-size:17px;display:flex;align-items:center;justify-content:space-between;gap:16px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";width:10px;height:10px;border:2px solid var(--brand-deep);border-top:0;border-left:0;transform:rotate(45deg) translateY(-2px);transition:transform .3s;flex:0 0 auto}
.faq details[open] summary::after{transform:rotate(-135deg) translateY(-2px)}
.faq .ans{padding:16px 0 20px;color:var(--sub);font-size:16px;border-top:1px solid var(--line)}

/* ---------- 置中卡：.final-card（landing）／.dl-card（download）共用基底
   （2026-08-01 batch4 收斂，出處 page-landing.css:354／page-download.css:21-24）。
   兩邊 class 名不同、不能改 HTML，所以用共用選擇器讓兩邊都吃到。
   padding 上限原本 landing 66px／download 60px，統一成 66px（+6px，Lucy 已知的 drift 消除，
   只影響 download 頁）。.dl-card 另有自己的 margin-top:36px（見 page-download.css），
   final-card 不需要這條，所以留在頁面層不搬上來。 ---------- */
.final-card,.dl-card{background:linear-gradient(160deg,var(--brand-tint-2),var(--surface) 58%);border:1px solid var(--brand-border);border-radius:var(--r-lg);padding:clamp(38px,5.5vw,66px) clamp(24px,5vw,58px);box-shadow:var(--shadow-lg);text-align:center}
/* otter-b 仰躺是橫幅，比站姿要寬；margin-bottom 兩頁不同（10px／12px），留在各頁覆寫 */
.final-otter,.dl-otter{width:168px}
/* .qr（landing）／.dl-qr（download）共用版面，margin-top 原本要統一成 30px，
   但這樣會讓 landing 頁往下多推 2px，超出這批「index/pricing/about 三頁除了數字等寬
   外不該有任何位移」的驗收紅線，所以退回：margin-top 維持各頁分開設定（見
   page-landing.css 的 .qr／page-download.css 的 .dl-qr），這裡只留真正共用的版面屬性 */
.qr,.dl-qr{display:flex;gap:16px;align-items:center;justify-content:center;flex-wrap:wrap}
/* ---------- 2026-08-03 下載 CTA 卡兩欄版：landing .final-card 與 download .dl-card 共用
   （Lucy：兩頁的大白卡都太高，縮成同款、抽共用管理）。左＝文案＋按鈕、右＝水獺＋QR。 ---------- */
.fc-2col{display:grid;grid-template-columns:1.3fr auto;gap:clamp(28px,4.5vw,64px);align-items:center;
  text-align:left;padding:clamp(30px,4.5vw,50px) clamp(24px,5vw,58px)}
.fc-2col h2{text-wrap:balance}
.fc-2col .lead{margin-left:0}
.fc-cta{display:flex;gap:14px;flex-wrap:wrap;margin-top:30px}
/* 商店徽章（2026-08-07 Lucy 裁定全站統一）：原本只有 download 頁有、規則放 page-download.css，
   index 底部 CTA 也要用，搬進 site.css 共用。黑底官方風自製徽章，不是官方素材圖檔。 */
.store-badges{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.store-badge{display:inline-flex;align-items:center;gap:10px;background:#000;color:#fff;
  border:1px solid #000;border-radius:var(--r-sm);padding:9px 18px 9px 16px;
  transition:transform .25s cubic-bezier(.2,.8,.2,1),box-shadow .25s}
.store-badge:hover{transform:translateY(-2px);box-shadow:var(--shadow-md)}
.store-badge svg{width:24px;height:24px;fill:#fff;flex:0 0 auto}
.store-badge span{display:flex;flex-direction:column;line-height:1.25}
.store-badge small{font-size:10.5px;font-weight:500;color:#d8d8d8;letter-spacing:.02em}
.store-badge strong{font-size:16.5px;font-weight:700;color:#fff}
.fc-2col .platforms,.fc-2col .dl-plat{margin-top:26px}
.fc-side{display:flex;flex-direction:column;align-items:center;gap:16px}
.fc-2col .final-otter,.fc-2col .dl-otter{width:132px;margin:0}
.fc-2col .qr,.fc-2col .dl-qr{margin-top:0}
@media(max-width:768px){
  .fc-2col{grid-template-columns:1fr;text-align:center;gap:22px}
  .fc-cta{justify-content:center}
  .fc-2col .lead{margin-left:auto;margin-right:auto}
}
.qr img,.dl-qr img{width:110px;border-radius:var(--r-sm);border:1px solid var(--line);background:var(--surface);padding:6px}
.qr div,.dl-qr div{text-align:left;font-size:14.5px;color:var(--ink-2)}
/* .platforms（landing）／.dl-plat（download）共用，margin-top 原本 22px／24px，
   不在這批授權的 drift 清單內，維持各頁分開設定，不強行統一 */
.platforms,.dl-plat{font-size:14px;color:var(--faint)}

/* ---------- footer ---------- */
footer{border-top:1px solid var(--line);background:var(--surface);padding:54px 0 40px;font-size:15px}
/* 2026-08-01 新增，避免 iPhone 底部手勢列吃到內容。漸進增強寫法：env() 不支援的瀏覽器整條
   宣告失效、自動退回沒有這條時的樣子，不會壞版面。 */
footer{padding-bottom:calc(40px + env(safe-area-inset-bottom,0px));padding-left:env(safe-area-inset-left,0px);padding-right:env(safe-area-inset-right,0px)}
.f-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:32px}
/* .f-head 是 <p> 不是標題標籤：footer 前一個 section 常是 h2（例如訂閱區），
   直接用 h4 會跳過 h3，犯階層跳級（PROTOTYPE_PLAN.md 全站技術債已列管）。
   舊版 landing footer 目前還是 h4，選擇器兩個都留著，等 landing 換裝（建置順序第 9 步）再收斂成只留 .f-head。 */
.f-grid h4,.f-grid .f-head{margin:0 0 14px;font-size:13px;line-height:1.2;letter-spacing:.1em;color:var(--faint);text-transform:uppercase}
/* 固定 line-height：純英文項（Blog、LZpreneur）的字型 metrics 不同，不鎖高度三欄會對不齊 */
.f-grid a{display:block;color:var(--ink-2);padding:5px 0;line-height:1.55;opacity:.85}
.f-grid a:hover{opacity:1;color:var(--brand-text)}
/* 商店徽章要跟 logo 一樣豁免上面那條（.f-grid a 特異度 0,1,1 > .store-badge 0,1,0）：
   display:block 會把 svg 跟文字拆成上下行、padding/color/line-height 全被踩（2026-08-08 Lucy 抓到）。
   這裡用 .f-grid a.store-badge（0,2,1）搶回來，值照 .f-brand 縮小版。 */
.f-grid a.store-badge{display:inline-flex;color:#fff;padding:6px 12px 6px 10px;line-height:1.25;opacity:1}
.f-grid a.store-badge:hover{color:#fff}
/* footer 第一欄是品牌區（2026-08-01 Lucy 定），不吃上面那條連結欄的樣式：
   logo 要保持 flex 橫排、不要被 .f-grid a 的 display:block 拆行，小灰字也不是連結。 */
.f-brand .logo{display:inline-flex;padding:0;opacity:1;color:var(--heading)}
.f-brand .f-blurb{margin:14px 0 0;font-size:15px;line-height:1.6;max-width:34ch;color:var(--sub)}
/* footer 品牌欄商店徽章（2026-08-07 Lucy 追加，全站 19 頁）：沿用共用 .store-badge，
   footer 欄位窄、徽章縮一階，避免兩顆擠到換行 */
.f-brand .store-badges{margin-top:16px;gap:8px}
.f-brand .store-badge{padding:6px 12px 6px 10px;gap:8px}
.f-brand .store-badge svg{width:18px;height:18px}
.f-brand .store-badge small{font-size:9px}
.f-brand .store-badge strong{font-size:13px}
.f-bot{margin-top:38px;padding-top:24px;border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;color:var(--faint);font-size:14px}

/* 進場前先藏，Motion 接手（頁面若不吃 motion.js 這條規則不影響靜態顯示，見各頁 head 決定要不要載入 motion.js） */
.rv,.pop{opacity:0}
/* .rv-l／.rv-r（動畫語彙擴充 2026-08-06）跟 .rv 同一套「進場前先藏」慣例，
   x 位移起點由 site-motion.js 的 animate() 直接餵，這裡只管 opacity。 */
.rv-l,.rv-r{opacity:0}

/* ---------- 2026-08-03 第二層動畫（site-motion.js 配套，三條都是新增不動舊規則） ---------- */
/* 卡片群組錯落進場：容器掛 .rv-group，直接子元素先藏、JS stagger 顯示 */
.rv-group>*{opacity:0}
/* 閱讀進度條：site-motion.js 偵測到 .art-content 時動態插進 #hdr（#hdr 是 fixed，absolute 貼底不跑版） */
.read-progress{position:absolute;left:0;bottom:0;height:3px;width:0%;
  background:linear-gradient(90deg,var(--brand),var(--brand-deep));border-radius:0 3px 3px 0;pointer-events:none}
/* 手風琴收合動畫期間 [open] 還掛著（提早拿掉內容會被砍），用 data-closing 先把箭頭轉回收合向；
   .faq/.notif/.toc-mobile 各自箭頭規則特異度相同，用 !important 統一蓋 */
details[data-closing] summary::after{transform:rotate(45deg) translateY(-2px) !important}

/* ---------- 手機漢堡選單（純 CSS checkbox hack，不加 JS 依賴）
   結構：input.nav-toggle（隱形）＋label.nav-burger（可見按鈕）＋div.nav-drawer
   （包住 .nav-links／.lang-switch／免費下載按鈕）。桌機 .nav-drawer 用
   display:contents 讓內容直接當 .nav 的 flex 子項，視覺跟舊版完全一樣；
   ≤960px 改成 fixed header 下方的下拉面板，checkbox checked 展開。 ---------- */
.nav-toggle{position:absolute;opacity:0;pointer-events:none}
.nav-burger{display:none;flex-direction:column;justify-content:center;align-items:center;gap:5px;width:36px;height:36px;margin-left:auto;cursor:pointer;flex:0 0 auto}
.nav-burger span{display:block;width:22px;height:2px;border-radius:2px;background:var(--heading);transition:transform .25s ease,opacity .2s ease}
.nav-toggle:checked ~ .nav-burger span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-toggle:checked ~ .nav-burger span:nth-child(2){opacity:0}
.nav-toggle:checked ~ .nav-burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.nav-drawer{display:contents}

@media (max-width:960px){
  .nav-burger{display:flex}
  .nav-drawer{
    display:none;
    position:absolute;top:100%;left:0;right:0;
    flex-direction:column;align-items:stretch;gap:2px;
    background:var(--surface);border-bottom:1px solid var(--line);
    padding:14px clamp(20px,5vw,32px) 22px;
    box-shadow:var(--shadow-md);
  }
  .nav-toggle:checked ~ .nav-drawer{display:flex}
  .nav-links{flex-direction:column;gap:2px;margin-left:0}
  /* align-self:flex-start：抽屜是直排 flex，<a> 預設 stretch 撐滿整寬，
     a.on::after 的底線（left:0;right:0）就畫成整條抽屜寬（2026-08-07 Lucy 圈校）。
     收成內容寬後底線只到字尾，點擊區高度不變。 */
  .nav-links a{padding:10px 2px;align-self:flex-start}
  .nav-drawer .lang-switch{align-self:flex-start;margin:8px 0 0}
  /* .hdr-actions（2026-08-09 dark mode 新增）包住 .lang-switch + .theme-toggle 兩顆鈕，
     手機版一起靠左對齊。.lang-switch 一旦被包進 .hdr-actions，上面那條給它的
     margin:8px 0 0 會在容器自己也有 margin 的情況下疊加、把兩顆鈕的上緣撐歪，
     這裡把巢狀情境下的 .lang-switch margin 歸零，留給外層 .hdr-actions 統一管。 */
  .nav-drawer .hdr-actions{align-self:flex-start;margin:8px 0 0}
  .nav-drawer .hdr-actions .lang-switch{margin:0}
  .nav-drawer > .btn{width:100%;margin-top:12px;justify-content:center}
  .posts{grid-template-columns:1fr}
  .f-grid{grid-template-columns:1fr 1fr}
  /* 觸控目標補到 44px（2026-08-01。Lucy 指定只在手機平板補，桌機用滑鼠不需要 44px，維持緊湊感）：
     footer 連結原本 33px、麵包屑原本 18-24px，這裡靠加大 padding 補足。
     nav 不在這裡處理：桌機 nav 的 26px 是桌機問題，依 Lucy 的決定不動；
     ≤960px 的抽屜選單本來就有上方的 .nav-links a{padding:10px 2px}，再加一條只會把它縮小。 */
  .f-grid a{padding:12px 0}
  .breadcrumb a{padding:10px 0}
}
@media (max-width:640px){
  h1{font-size:clamp(30px,9vw,40px)}
  h2{font-size:clamp(24px,7.5vw,32px)}
  .f-grid{grid-template-columns:1fr}
  .cta-band{flex-direction:column;align-items:stretch;text-align:left}
  /* 手機版 footer 整體壓縮（配合下面的手風琴，目標初始高度 <400px）：
     桌機那組 54/40 padding、32px grid gap、38px f-bot margin 是給四欄版留呼吸感用的，
     手機單欄堆疊用不到那麼多空白，改用分隔線（border-top）取代大留白。
     這幾條全部關在本 media query 裡，不影響 >640px。 */
  footer{padding-top:28px;padding-bottom:calc(20px + env(safe-area-inset-bottom,0px))}
  .cta-band .btn{width:100%;justify-content:center}
  form.capture{flex-direction:column}
  form.capture .btn{width:100%}
  /* 2026-08-01 修 bug：form.capture input 的 flex:1 1 240px（第 148 行）在主軸轉直向後，
     240px 從寬度基準變成高度基準，寬度縮成內容寬，border-radius:999px 就畫成大白圓。
     上面那條只幫 .btn 補了 width:100%，input 漏掉，影響 6 頁。 */
  form.capture input{flex-basis:auto;width:100%}
  .bc-current{overflow-wrap:break-word}

  /* ---------- footer 手風琴（手機收合，2026-08-07）
     Lucy 拍板：≤640px footer 連結組收合成手風琴，桌機四欄版完全不動。
     這整批規則刻意全部關在本 media query 裡、外層沒有任何同選擇器的宣告，
     保證 >640px 的版面一像素都不會被這批新規則影響。
     結構：JS（site-motion.js／index.html inline 副本）把每組連結搬進動態生成的
     .f-links > .f-links-inner，組標題 .f-head 留在原地變成互動按鈕（role=button）。
     展開用 grid-template-rows 0fr→1fr（animate height:auto 的標準 CSS 手法），
     不用 JS 量高度、也不掛 Motion 套件，純 CSS transition 接手，JS 只負責切一個屬性。
     判斷「開／關」只認 .f-head 自己的 aria-expanded——JS 只維護這一個真相來源，
     不另外疊 data-open，兩套狀態容易對不齊。 */
  .f-grid{gap:0}
  /* 分隔線取代 grid gap：每組（不含品牌區）上緣一條線，品牌區與第一組之間、
     組與組之間都靠這條線分隔，省掉桌機版留給呼吸感的 32px 縱向間距。 */
  /* 2026-08-07 Lucy 圈校：gap:0 之後品牌句直貼第一組分隔線（太擠），
     品牌區自己補 18px 下緣，不動組與組之間的節奏。 */
  .f-grid > .f-brand{padding-bottom:18px}
  .f-grid > div:not(.f-brand){border-top:1px solid var(--line)}
  .f-grid > div:not(.f-brand) > .f-head{
    cursor:pointer;display:flex;align-items:center;justify-content:space-between;
    gap:10px;margin:0;padding:14px 0
  }
  .f-grid > div:not(.f-brand) > .f-head::after{
    content:"";width:9px;height:9px;flex:0 0 auto;
    border:2px solid var(--faint);border-top:0;border-left:0;
    transform:rotate(45deg) translateY(-2px);transition:transform .25s ease
  }
  .f-grid > div:not(.f-brand) > .f-head[aria-expanded="true"]::after{
    transform:rotate(-135deg) translateY(-2px)
  }
  .f-links{display:grid;grid-template-rows:0fr;transition:grid-template-rows .3s ease;overflow:hidden}
  .f-head[aria-expanded="true"] + .f-links{grid-template-rows:1fr}
  .f-links-inner{overflow:hidden;min-height:0}
  /* 版權列（f-bot）常顯不收，但桌機留的 38px margin-top／24px padding-top／16px gap
     手機用不到，壓縮成 16/12/6 省下的空間直接反映在 <400px 的驗收數字上。 */
  .f-bot{margin-top:16px;padding-top:12px;gap:6px}
}
@media (prefers-reduced-motion:reduce){
  .rv,.pop{opacity:1}
  .rv-group>*{opacity:1}
  .read-progress{display:none}
  html{scroll-behavior:auto}
  /* ⚠️ 動畫語彙 v2 三件套的 reduce 覆寫不能寫在這裡，要寫在檔案最末（見本檔最後一段）。
     原因：那三顆的無條件規則在本區塊「之後」才定義，選擇器 specificity 完全相同，
     同 specificity 比源碼順序、跟媒體查詢有沒有命中無關，寫在這裡會被後面那條蓋掉。
     2026-08-04 驗收實測踩過一次：reduce 開了呼吸光暈照跑。 */
}

/* ============================================================
   2026-08-04 第二層動畫語彙 v2 — 共用三件套（Lucy 拍板：中等密度）
   目的：第二層頁面（pricing／download／about／help-faq）之間的「風格相似」
   靠這三顆 primitive 撐，各頁自己的主秀不准另立語彙。
   三顆全部是 opt-in class，加了才生效 —— 這批只有 pricing.html 掛，
   確認過樣板再往其他頁複製（避免一次改 23 頁沒法回頭）。
   參照來源：21st.dev 的常駐氛圍動態（呼吸光暈／shimmer），
   Flighty 兩頁只有 Framer 預設淡入，沒有可抄的東西。
   ============================================================ */

/* ① 背景三層（原本這一格是「標題分字進場 .st」，2026-08-04 Lucy 看過實品後裁掉，
   別再加回來 —— 理由不是做得不好，是分字是「一次性事件」，浮完就沒了，
   讀者停在頁面上時畫面還是死的。炫砲感要靠「常駐狀態」，所以整格換成背景層。
   判準：不動的時候幾乎看不見，一動（游標）就有反應。靜態截圖要維持乾淨。

   1-A 顆粒噪點：撐質感的靜態層，全站無條件吃（不是 opt-in）。
   刻意不用 mix-blend-mode 也不用覆蓋層，直接當 background-image 疊在底色上，
   保證在內容「後面」，對文字對比零影響（全站 WCAG 是修過的，不能被裝飾層吃掉）。
   灰階噪點在淺底上壓暗一點、在深底上提亮一點，同一張圖兩邊都合用，所以只開一顆 token。 */
:root{
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.05'/%3E%3C/svg%3E");
}
body{background-image:var(--grain)}
.dark{background-color:var(--ink);background-image:var(--grain)}

/* 1-B 網格底＋游標聚光（opt-in：<body class="mesh">）
   為什麼做成 body 的 fixed 全視窗層、而不是每個 section 各鋪一份：
   逐 section 鋪的話每個元素的網格相位各自從自己的左上角起算，section 交界處會錯開一格。
   固定在視窗上就只有一份相位，整頁連續，而且游標遮罩可以直接吃 clientX/clientY。
   z-index:-1 是關鍵：負值讓這兩層畫在 body 自己的內容「後面」（但仍在畫布底色前面），
   不會蓋住任何文字；.dark 有不透明底色，會自然把網格擋掉（深色區交給極光那層）。
   ::before 是永遠在的淡網格（手機也看得到），::after 是只在游標附近亮起來的那層。
   --mx/--my 預設 -999px，沒滑鼠時聚光層完全在畫面外＝等於不存在。 */
body.mesh::before,body.mesh::after{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background-image:
    linear-gradient(to right,var(--mesh-c) 1px,transparent 1px),
    linear-gradient(to bottom,var(--mesh-c) 1px,transparent 1px);
  background-size:34px 34px}
body.mesh::before{--mesh-c:rgba(6,60,94,.045)}
/* 2026-08-10 Lucy：游標聚光調亮。線色 .30→.52，光圈 260→300px，
   遮罩中段 .45→.62（中段決定光暈的實心程度，只調半徑會變大但一樣淡）。 */
body.mesh::after{--mesh-c:rgba(59,151,179,.52);
  -webkit-mask-image:radial-gradient(300px circle at var(--mx,-999px) var(--my,-999px),#000 0%,rgba(0,0,0,.62) 46%,transparent 72%);
  mask-image:radial-gradient(300px circle at var(--mx,-999px) var(--my,-999px),#000 0%,rgba(0,0,0,.62) 46%,transparent 72%)}

/* ② 卡片游標 spotlight .glow-card
   跟 .btn::after 是同一套 --mx/--my 機制（site-motion.js 的 pointermove 一起餵），
   差別只在半徑更大、用品牌色而不是白光（卡片底色深，白光會糊掉文字）。
   inherit 圓角，所以任何圓角卡片掛上去都不會露角。 */
.glow-card{position:relative}
.glow-card::after{content:"";position:absolute;inset:0;border-radius:inherit;opacity:0;
  transition:opacity .35s;pointer-events:none;
  background:radial-gradient(340px circle at var(--mx,50%) var(--my,50%),rgba(127,214,240,.32),transparent 66%)}  /* 2026-08-10：.18→.32、300→340px */
.glow-card:hover::after{opacity:1}


/* 三件套的 reduce 退場一定要放在三件套定義「之後」，理由見上方主 reduce 區塊的註解。
   新增第四顆 primitive 時，退場規則也要加在這裡，不要加回上面那個區塊。
   噪點層不列在這裡：它是靜態紋理不是動畫，reduce 沒有理由關掉它。
   游標聚光層則要關 —— 它會跟著滑鼠移動，對前庭敏感的人來說就是動態。 */
@media (prefers-reduced-motion:reduce){
  .glow-card::after{transition:none}
  body.mesh::after{display:none}
}


/* 跑馬燈與 .rv-l／.rv-r 的 reduce 覆寫：全站鐵律——覆寫一律加在檔案最末段
   （同 specificity 比源碼順序，寫前面會被上面那些無條件規則蓋掉）。
   .rv-l／.rv-r 直接補回 opacity:1，
   跟 .rv/.pop 的 reduce 覆寫是同一個判準。 */
@media (prefers-reduced-motion:reduce){
  .rv-l,.rv-r{opacity:1}
}



/* .back-to-top 的 reduce 覆寫比照全站鐵律放檔案最末：is-visible 切換不需要過渡，
   拿掉 transition 讓淡入淡出變成即顯即隱；JS 端的點擊行為已經用 reduce 判斷
   behavior:'auto'，這裡只補視覺這一半。 */
@media (prefers-reduced-motion:reduce){
  .back-to-top{transition:none}
}

/* footer 手風琴的 reduce 覆寫比照全站鐵律放檔案最末：拿掉過渡，開合變成瞬間切換，
   JS 邏輯不用分支——它本來就只切 aria-expanded，動畫與否全部交給 CSS 決定。 */
@media (prefers-reduced-motion:reduce){
  .f-links{transition:none}
  .f-grid > div:not(.f-brand) > .f-head::after{transition:none}
}

/* ============================================================
   2026-08-09 Dark mode 色板（PROTOTYPE_PLAN dark-mode 案，Lucy 拍板規格）
   底色走深海軍藍系（比純黑柔和、扣品牌），文字近白但非純白，卡片比底色亮一階，
   accent 維持柔青藍（微調亮度保對比），邊框/陰影對應調整。
   全站文字對比 WCAG AA 實測（相對亮度公式）：
     --heading #F2F7FA  對 --bg 14.4:1／對 --surface 12.1:1
     --text    #D7E4EC  對 --bg 12.3:1／對 --surface 10.3:1
     --ink-2   #B9CEDC  對 --bg  9.8:1／對 --surface  8.3:1
     --sub     #9FB4C2  對 --bg  7.4:1／對 --surface  6.3:1
     --faint   #8CA2B1  對 --bg  6.0:1／對 --surface  5.1:1
     --brand-text #8FE0F0 對 --bg 10.7:1／對 --surface 9.0:1
   全部 ≥4.5:1（一般字級門檻），--faint 對 --surface 5.1:1 留有餘裕。
   --ink／--card／--brand／--brand-2／--brand-deep／--brand-tint／--warm／--warm-line
   這些 primitive 刻意不在這裡覆寫：它們的呼叫點全是「跟固定不變的強調底色成對」
   （例如 --badge-flag 背景 --brand ＋文字 --ink、.todo 背景 --warm ＋文字 --ink、
   .dark／.tier／.btn-primary／.back-to-top 這類本來就設計成永遠深色的元件），
   兩邊同時固定不動＝ contrast 不受主題影響，翻譯過來就是「不用改」，
   改了反而會拆散這些已經驗證過的配對（見 :root 內 --surface／--heading 註解）。 */
:root[data-theme="dark"]{
  --bg:#0B2436; --surface:#13314A;
  --heading:#F2F7FA; --text:#D7E4EC; --ink-2:#B9CEDC; --sub:#9FB4C2; --faint:#8CA2B1;
  --line:rgba(255,255,255,.14);
  --brand-text:#8FE0F0;
  --brand-tint-2:rgba(127,214,240,.16);
  --brand-border:rgba(127,214,240,.30);
  --outline-hover-bg:rgba(255,255,255,.08);
  --shadow-sm:0 1px 2px rgba(0,0,0,.35),0 8px 24px rgba(0,0,0,.30);
  --shadow-md:0 2px 6px rgba(0,0,0,.40),0 18px 44px rgba(0,0,0,.35);
  --shadow-lg:0 2px 4px rgba(0,0,0,.35),0 30px 76px rgba(0,0,0,.45);
}
/* #hdr 半透明背景直接寫死 rgba(250,250,250,..)（跟著 light 的 --bg 手調的模糊玻璃色），
   不是 var()，要單獨覆寫才會在 dark 模式下變成深色玻璃而不是留一條刺眼的淺灰條。 */
:root[data-theme="dark"] #hdr{background:rgba(11,36,54,.72)}
:root[data-theme="dark"] #hdr.stuck{background:rgba(11,36,54,.92)}
/* App 截圖類圖片在 dark 模式微降亮度，避免刺眼白邊（App UI 本身是淺色背景）直接貼在
   深色頁面上顯得突兀；不動 otter 插畫／logo（本來就是透明背景，不需要這層處理）。
   .phone／.pin-phone 兩組截圖本來就包在實體手機邊框裡（9-10px 純色 --dark-frame 機身，
   見 page-landing.css），邊框本身已經是很強的視覺分隔，不需要再加細邊框；
   全站只有 download 頁的 .shot-item（輪播縮圖）是沒有機身、直接裸貼在頁面上的截圖，
   單獨補一條細邊框。2026-08-09 逐一核對全站 22 頁 HTML 得出的實際清單，不是憑空猜的
   命名慣例；不動 border-radius——.shot-item img 已有自己的圓角值（page-download.css），
   這裡只加 border 疊加上去，不重複宣告角度避免跟 base 規則的值對不上。 */
:root[data-theme="dark"] img:not([src*="otter"]):not([src*="app_icon"]):not(.logo img){
  filter:brightness(.94);
}
/* .track-learn／.track-coach 的 --tk-bg／--tk-mark 是全出血區塊底色，light 模式
   刻意用淺粉彩色（rgba(233,247,252,..)／rgba(244,243,210,..)）鋪出「兩條路線各自的
   氛圍色」，dark 模式直接繼承這批「刻意不隨主題變」的邏輯就會整塊區域變成一片刺眼的
   淺灰藍/淺米色（實測：deploy 前 gstack 截圖抓到，深色頁面中間凸一塊沒轉黑的淺色帶，
   蓋在上面的深色標題文字幾乎看不見）。這兩顆是唯一的例外：色相不變（青/金兩條路線的
   識別色不能混），但要整個換成低透明度疊在深底上的版本，不能直接沿用 light 的淺色值。 */
:root[data-theme="dark"] .track-learn{
  --tk-bg:linear-gradient(180deg,var(--bg) 0%,rgba(127,214,240,.14) 26%,rgba(127,214,240,.08) 100%);
  --tk-mark:rgba(127,214,240,.12);
}
:root[data-theme="dark"] .track-coach{
  --tk-bg:linear-gradient(180deg,rgba(232,201,120,.14) 0%,rgba(232,201,120,.07) 60%,var(--bg) 100%);
  --tk-mark:rgba(232,201,120,.14);
}
:root[data-theme="dark"] .shot-item img{
  border:1px solid var(--line);
}
/* 顆粒噪點在深底上稍微提亮，維持跟 light 模式一樣的「質感」而不是被深色吃掉 */
:root[data-theme="dark"] body{background-image:var(--grain);}
:root[data-theme="dark"] body.mesh::before{--mesh-c:rgba(255,255,255,.05)}
:root[data-theme="dark"] body.mesh::after{--mesh-c:rgba(127,214,240,.5)}