/* ============================================================
   Course Kit 官網 — 方案與價格頁專屬樣式（page-pricing.css）
   跟 site.css 一起載入，site.css 在前。
   本檔管：頁首留白／深色方案卡區（.dark/.tiers/.tier/.badge-flag/
   .pay-note/.tier-perk，含基礎 .ticks）／FAQ（.faq）／完整功能比較表
   （.table-wrap/.pt-table）／退款區與底部 CTA 的頁面級間距。

   方案卡（.dark／.tier 整組）與 FAQ（.faq）2026-08-01 batch4 已收斂進
   site.css，跟 page-landing.css 共用同一份定義，這裡不再重複維護。
   ============================================================ */

/* ---------- 頁首（固定 header 下方的留白，只設 padding-top，不可用
   shorthand，否則 .wrap 左右 padding 會被歸零，標題跟 header logo 對不齊） ---------- */
.page-top h1{margin-top:6px}
.page-top .lead{margin-top:14px;max-width:62ch}
/* 標題旁的探頭水獺：跟 h1 同一行、貼著文字尾端，不再絕對定位飄在版面上 */
.page-top-heading{display:flex;align-items:flex-end;gap:10px;flex-wrap:wrap}

/* ---------- 方案卡區：.dark／.tier 整組 2026-08-01 batch4 收斂進 site.css，
   跟 page-landing.css 共用同一份，這裡不再重複定義 ---------- */

/* ---------- 完整功能比較表（本頁主戲，其他頁沒有，橫向捲動容器避免手機爆版） ---------- */
/* 右緣漸層遮罩：暗示還有內容可捲。遮罩寬度對齊儲存格右內距（18px），
   非首欄的內容都置中，捲到最右端時遮罩只蓋到留白，不會切到文字 */
.table-wrap{overflow-x:auto;margin:24px 0 4px;border-radius:var(--r-sm);border:1px solid var(--line);
  -webkit-mask-image:linear-gradient(to right,#000 0,#000 calc(100% - 18px),transparent 100%);
  mask-image:linear-gradient(to right,#000 0,#000 calc(100% - 18px),transparent 100%)}
.pt-table{width:100%;border-collapse:collapse;min-width:640px;font-size:var(--fs-md);background:var(--surface)}
.pt-table th,.pt-table td{padding:14px 18px;text-align:left;border-bottom:1px solid var(--line);vertical-align:top}
.pt-table thead th{color:var(--heading);font-weight:800;white-space:nowrap;
  background-color:var(--surface);background-image:linear-gradient(var(--brand-tint-2),var(--brand-tint-2))}
.pt-table thead th:not(:first-child),.pt-table tbody td:not(:first-child){text-align:center;white-space:nowrap}
/* 首欄「功能」加最小寬度，避免中文逐字換行成多行（原本手機只有 75.5px） */
.pt-table th:first-child,.pt-table tbody td:first-child{min-width:92px}
.pt-table tbody td:first-child{font-weight:700;color:var(--heading)}
.pt-table tbody tr:last-child td{border-bottom:0}
/* 2026-08-07 Lucy 裁定：比較表分三組（自主紀錄／協作課程-管理者／協作課程-成員），
   組內列名去掉重複前綴（三個「資料匯出」靠組標題分辨語境）。組標題列是
   <tr class="pt-group"><th colspan="5">，th 是 first-child 會吃下面 sticky 首欄規則，
   剛好讓組名在手機橫向捲動時也留在左緣，但要自帶不透明底色不然會穿透。 */
.pt-table .pt-group th{background:var(--brand-tint);color:var(--brand-text);font-weight:800;
  font-size:var(--fs-sm);letter-spacing:.02em;padding:10px 18px}
.table-note{margin-top:10px;list-style:none;padding:0}
.table-note li{margin-top:6px}
.table-note li:first-child{margin-top:0}
/* 該換行的要換：卡片內文字避免在複合詞中間斷行（例如「終身累計」「無上限」「提醒」被拆成兩行）。
   2026-08-20 keep-all 收窄成只給中文：日文沒有詞間空白，keep-all 會讓整句找不到斷點，
   直接撐出 .tier（.tier 是 overflow:hidden，超出的字被切掉）＝ Lucy 回報的日文方案頁跑版。
   底線那條 overflow-wrap:anywhere 三語都吃，長 email／URL／英數字串一樣不會頂破卡片。 */
.tier .desc,.tier .ticks li,.tier-perk div{overflow-wrap:anywhere}
html[lang^="zh"] .tier .desc,
html[lang^="zh"] .tier .ticks li,
html[lang^="zh"] .tier-perk div{word-break:keep-all}

/* 手機／平板滑動提示，只在 ≤768 顯示 */
.table-hint{display:none}
@media (max-width:768px){
  .table-hint{display:block;margin:0 0 10px;font-size:var(--fs-xs);color:var(--sub);text-align:center}
}

/* ---------- 換算一下（2026-08-08，deck P8 搬上來）：費用＋時間兩欄，中間一個加號。
   個人版／專業版 pill 切換金額（即時回饋型動畫），進場數字滾動吃 [data-count] ---------- */
/* 縫隙對稱：上緣吃自己的 padding-top 96（深色區自帶邊界），下緣歸零讓 #compare 的
   padding-top 96 當唯一縫隙，整頁接縫統一一顆 --pad-sec，不會一邊 96 一邊 192 */
#value{padding-bottom:0}
.amort-toggle{display:flex;justify-content:center;gap:8px;margin-top:22px}
.amort-pill{cursor:pointer;border:1px solid var(--brand-border);background:var(--surface);color:var(--sub);
  font-weight:700;font-size:var(--fs-sm);padding:8px 20px;border-radius:999px;
  transition:background .25s,color .25s,border-color .25s}
.amort-pill.on{background:var(--brand-deep);border-color:var(--brand-deep);color:#fff}
.amort-pill:hover:not(.on){color:var(--brand-text)}
.amort-card{display:grid;grid-template-columns:1fr auto 1fr;gap:26px;align-items:start;
  margin-top:26px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:30px 36px;box-shadow:var(--shadow-sm)}
/* hidden 屬性的 UA display:none 會被上面的 display:grid 蓋掉（author style 特異度較高），
   兩張視角卡會疊著都顯示，這條把 hidden 的語意搶回來 */
.amort-card[hidden]{display:none}
.amort-h{margin:0;font-size:var(--fs-sm);font-weight:800;letter-spacing:.06em;color:var(--brand-text)}
.amort-base{margin:6px 0 0;font-size:var(--fs-sm);color:var(--faint)}
.amort-col dl{margin:14px 0 0}
.amort-col dl div{display:flex;justify-content:space-between;gap:14px;padding:9px 0;
  border-bottom:1px solid var(--line);font-size:var(--fs-md)}
.amort-col dl div:last-child{border-bottom:0}
.amort-col dt{color:var(--sub)}
.amort-col dd{margin:0;font-weight:700;color:var(--heading)}
.amort-col div.hi dd{color:var(--brand-text);font-weight:800}
.amort-plus{align-self:center;font-size:26px;font-weight:800;color:var(--brand-deep)}
@media (max-width:700px){
  .amort-card{grid-template-columns:1fr;padding:24px 22px}
  .amort-plus{justify-self:center}
}

/* ---------- 換算一下：情境微劇場（2026-08-08 Lucy 拍板方向 A／小人物用甲案）----------
   數字表只給結論，看不到「問題被解決的那一刻」。這塊放在 pill 與數字卡之間，
   先演一段小故事再讓數字當證據，兩張場景跟著 pill 一起換（同一組 hidden 機制）。
   個人版＝三張快到期的課逐一被救回，每救回一張掉一枚硬幣、上方金額累加；
   專業版＝八件雜務先一件件堆出來，堆滿了才整批消失，換四隻學生海獺進場。

   ⚠️ 這塊刻意不做成白卡（沒有 background／border／box-shadow）。
   Lucy 2026-08-08 指出情境區跟下面的數字換算卡兩張白卡並排很奇怪，
   拿掉卡片外框之後它讀起來是插圖，數字卡才是唯一那張「資料卡」。要改回白卡前先問。

   ⚠️ 雜務不是一出現就消失（第一版犯的錯：0.5 秒就淡掉，Lucy 說看不到，
   也表現不出事情很多）。現在分三段：堆積 → 停住 → 整批清空，時間軸在 pricing.html 的 JS。 */
/* min-height 鎖住兩張場景的共同高度，切 pill 時下方數字卡不會上下彈；
   scene-w 是兩張場景共用的內容寬（Lucy 2026-08-08：個人版課卡比專業版寬太多，
   切回來視覺會突然變化），改完兩邊等寬，切換只換內容不換版型。 */
.amort-scene{position:relative;margin-top:22px;padding:4px 0 0;text-align:center;
  min-height:238px;--scene-w:520px}
.amort-scene[hidden]{display:none}

/* 結論膠囊：兩張場景共用，跑完才 .show */
.scene-out{margin:16px 0 0;display:inline-block;font-weight:800;font-size:var(--fs-md);
  padding:7px 18px;border-radius:999px;opacity:0;transform:scale(.82);
  transition:opacity .45s,transform .45s cubic-bezier(.2,.9,.3,1.4)}
.scene-out.show{opacity:1;transform:scale(1)}
.scene-out.money{color:#1f7a52;background:#e9f6ef}
.scene-out.time{color:var(--brand-text);background:var(--brand-tint-2)}
/* 金額每累加一次彈一下，讓「又救回一筆」有回饋 */
.scene-out.bump{animation:sceneBump .42s cubic-bezier(.2,.9,.3,1.5)}
@keyframes sceneBump{0%{transform:scale(1)}45%{transform:scale(1.12)}100%{transform:scale(1)}}
/* 2026-08-08 Lucy：個人版結論要有「省到了」的味道。金幣從膠囊下緣往上跳出來，
   每累加一筆跳一次（.bump 每次都 remove→reflow→add，動畫會重跑）。
   金幣是 sibling SVG 不是文字節點，JS 換文字時走 .out-txt 才不會把它洗掉。 */
.scene-out{display:inline-flex;align-items:center;gap:7px}
.out-coin{width:19px;height:19px;flex:none;opacity:0}
.scene-out.show .out-coin{opacity:1}
.scene-out.bump .out-coin{animation:coinPop .52s cubic-bezier(.2,.9,.3,1.6)}
@keyframes coinPop{
  0%{opacity:0;transform:translateY(16px) scale(.35) rotate(-25deg)}
  45%{opacity:1;transform:translateY(-7px) scale(1.2) rotate(8deg)}
  72%{transform:translateY(2px) scale(.96) rotate(0)}
  100%{opacity:1;transform:translateY(0) scale(1) rotate(0)}
}

/* --- 個人版：三張課卡被救回，硬幣掉下來 --- */
.scene-toast{margin:0 auto;display:inline-block;background:var(--ink);color:#fff;
  font-size:var(--fs-sm);font-weight:700;padding:7px 15px;border-radius:var(--r-sm);
  opacity:0;transform:translateY(-14px);transition:opacity .35s,transform .35s}
.scene-toast.show{opacity:1;transform:translateY(0)}
.scene-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;
  margin-top:16px;max-width:var(--scene-w);margin-inline:auto}
.scene-card{position:relative;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-md);padding:14px 12px;text-align:left;
  transition:border-color .3s,box-shadow .3s,transform .3s}
.scene-card.active{border-color:var(--brand-deep);transform:translateY(-3px);
  box-shadow:0 8px 20px rgba(59,151,179,.18)}
.scene-card .cname{display:block;font-weight:800;color:var(--heading)}
/* 2026-08-10：課名一律排一行（Lucy 指定不要斷行）。原本用 min-height 幫斷成兩行的卡對齊，
   改成把場景加寬讓字排得下：en 最長的 Personal training 量到 141px，加卡片左右 padding 26px
   ×3 欄 ＋ 兩道 gap 20px＝523px，520px 差 3px 才會斷，所以 en 的 --scene-w 提到 548px 留餘裕。
   ja 走另一條路（加寬到 659px 會比專業版場景寬太多，破壞 Lucy 2026-08-08 定的同寬），
   改把課名從「パーソナルトレーニング」縮成「筋トレ」，520px 就排得下。zh 需要 446px，本來就夠。 */
html[lang^="en"] .amort-scene{--scene-w:548px}
.scene-card .cprice{display:block;margin-top:3px;font-size:var(--fs-sm);color:var(--sub)}
.scene-badge{display:inline-block;margin-top:9px;font-size:var(--fs-sm);font-weight:700;
  padding:2px 10px;border-radius:999px;color:#a33227;background:#fdecea;
  transition:color .3s,background .3s}
.scene-card.saved .scene-badge{color:#1f7a52;background:#e9f6ef}
/* 硬幣用 SVG 不用 emoji：emoji 在 Windows／Android 長相差很多，尺寸也吃字型 */
.scene-coin{position:absolute;left:50%;bottom:10px;width:26px;height:26px;
  margin-left:-13px;opacity:0;pointer-events:none}
.scene-card.saved .scene-coin{animation:coinDrop 1s cubic-bezier(.45,0,.75,.9) forwards}
/* 2026-08-17 Lucy：硬幣不再原地掉落消失，改往中間的錢包飄（--driftX 每張卡不同），
   錢包接到就長大一階。 */
@keyframes coinDrop{
  0%{opacity:0;transform:translate(0,-6px) scale(.5) rotate(0)}
  18%{opacity:1;transform:translate(0,0) scale(1) rotate(0)}
  78%{opacity:1}
  100%{opacity:0;transform:translate(var(--driftX,0),92px) scale(.6) rotate(220deg)}
}
.scene-card:nth-child(1) .scene-coin{--driftX:150px}
.scene-card:nth-child(2) .scene-coin{--driftX:0px}
.scene-card:nth-child(3) .scene-coin{--driftX:-150px}
/* 錢包是場景家具，常駐顯示（solo 播放不掛 s1/s2，別 gate 在那上面）；
   接到硬幣時 --wg 逐階放大＋catch 彈跳 */
.scene-wallet{width:56px;margin:26px auto 0;transform-origin:50% 100%;
  transform:scale(var(--wg,1));transition:transform .5s cubic-bezier(.2,.9,.3,1.35)}
.scene-wallet svg{display:block;width:100%;height:auto}
.scene-wallet.catch{animation:walletCatch .5s cubic-bezier(.2,.9,.3,1.5)}
@keyframes walletCatch{
  0%{translate:0 0}
  40%{translate:0 -6px}
  70%{translate:0 1px}
  100%{translate:0 0}
}

/* --- 專業版：雜務堆積後整批清空，海獺進場 --- */
/* 兩層疊在同一個 grid cell，海獺才會長在雜務原本佔的位置上 */
.scene-stack{display:grid;place-items:center;min-height:150px;margin-top:6px}
.scene-chores,.scene-otters{grid-area:1/1;width:100%}
.scene-chores{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;
  max-width:var(--scene-w);margin-inline:auto}
/* 沙漏圖示用 SVG 不用 emoji：⏳ 在 Windows 是扁的、Android 是彩色的，
   跟 chip 的灰階配色打架，尺寸也吃系統 emoji 字型。SVG 才能跟文字同色同大小。 */
.scene-chip{display:inline-flex;align-items:center;gap:6px;
  background:var(--surface);color:var(--faint);border-radius:999px;
  padding:7px 14px;font-size:var(--fs-sm);font-weight:700;
  opacity:0;transform:translateY(8px) scale(.85);
  transition:opacity .3s,transform .3s cubic-bezier(.2,.9,.3,1.5)}
.chip-ico{width:13px;height:13px;flex:none;fill:currentColor;opacity:.75}
.amort-scene.s1 .scene-chip{opacity:1;transform:translateY(0) scale(1)}
.amort-scene.s2 .scene-chip{opacity:0;transform:translateY(-10px) scale(.7);
  transition-duration:.4s}
.scene-otters{display:flex;justify-content:center;align-items:flex-end;gap:12px}
/* 工作室：海獺的出發點。先淡入站定，海獺才一隻隻從門口走出來 */
.scene-door{flex:none;opacity:0;transform:translateY(10px) scale(.86);
  transition:opacity .4s,transform .45s cubic-bezier(.2,.9,.3,1.5)}
.scene-door svg{width:56px;height:auto;display:block}
.amort-scene.s2 .scene-door{opacity:1;transform:none;transition-delay:.25s}

/* 海獺走路：從門口（各自的 --from 位移）走到定位，途中上下起伏兩次當步伐。
   用 animation 不用 transition，因為 transition 只能在起訖兩點之間直線插值，做不出中途的起伏。
   fill-mode:both — delay 期間套 0%（還在門裡、透明），跑完停在 100%。 */
.scene-otter{opacity:0}
.scene-otter img{width:62px;height:auto;display:block}
@keyframes otterWalk{
  0%{opacity:0;transform:translateX(var(--from)) translateY(2px) scale(.86)}
  14%{opacity:1}
  32%{transform:translateX(calc(var(--from) * .68)) translateY(-5px) scale(.9)}
  56%{transform:translateX(calc(var(--from) * .42)) translateY(1px) scale(.93)}
  80%{transform:translateX(calc(var(--from) * .16)) translateY(-4px) scale(.97)}
  100%{opacity:1;transform:translateX(0) translateY(0) scale(1)}
}
.amort-scene.s2 .scene-otter{animation:otterWalk 1.05s cubic-bezier(.25,.7,.4,1) both}
/* --from ＝ 這隻的定位到門中心的距離。門 56 ＋ gap 12，海獺 62 ＋ gap 12。
   nth-child 從 2 起算是因為門佔掉了 child 1。 */
.scene-otter:nth-child(2){--from:-71px}
.scene-otter:nth-child(3){--from:-145px}
.scene-otter:nth-child(4){--from:-219px}
.scene-otter:nth-child(5){--from:-293px}
/* 雜務進場一件一件堆（間隔 90ms），退場也一件一件清（間隔 60ms 較快，
   因為「解決」要俐落；海獺再依序進來） */
.scene-chip:nth-child(1){transition-delay:0s}
.scene-chip:nth-child(2){transition-delay:.09s}
.scene-chip:nth-child(3){transition-delay:.18s}
.scene-chip:nth-child(4){transition-delay:.27s}
.scene-chip:nth-child(5){transition-delay:.36s}
.scene-chip:nth-child(6){transition-delay:.45s}
.scene-chip:nth-child(7){transition-delay:.54s}
.scene-chip:nth-child(8){transition-delay:.63s}
.amort-scene.s2 .scene-chip:nth-child(1){transition-delay:0s}
.amort-scene.s2 .scene-chip:nth-child(2){transition-delay:.06s}
.amort-scene.s2 .scene-chip:nth-child(3){transition-delay:.12s}
.amort-scene.s2 .scene-chip:nth-child(4){transition-delay:.18s}
.amort-scene.s2 .scene-chip:nth-child(5){transition-delay:.24s}
.amort-scene.s2 .scene-chip:nth-child(6){transition-delay:.3s}
.amort-scene.s2 .scene-chip:nth-child(7){transition-delay:.36s}
.amort-scene.s2 .scene-chip:nth-child(8){transition-delay:.42s}
/* 海獺出門的間隔。門在 .25s 站定，第一隻 .5s 才動，中間留個空檔像在推門 */
/* 2026-08-17 Lucy：不要疊在一起才散開，一隻走到定位下一隻才出門。
   walk 1.05s、間隔 0.95s，每隻幾乎獨走（留 0.1s 重疊讓隊伍有連貫感） */
/* 2026-08-17 Lucy：從最遠的先過去。nth-child(5) 要走最遠（--from -293px），最先出門；
   離門最近的最後補位，隊伍才有「依序走到自己位子」的感覺 */
.amort-scene.s2 .scene-otter:nth-child(5){animation-delay:.5s}
.amort-scene.s2 .scene-otter:nth-child(4){animation-delay:1.45s}
.amort-scene.s2 .scene-otter:nth-child(3){animation-delay:2.4s}
.amort-scene.s2 .scene-otter:nth-child(2){animation-delay:3.35s}

@media (max-width:700px){
  /* 手機三張課卡改直向，solo 變高，共同高度跟著放大才不會切 pill 就跳 */
  .amort-scene{min-height:296px}
  .scene-cards{grid-template-columns:1fr;gap:8px}
  .scene-card{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 13px}
  .scene-badge{margin-top:0;flex:none}
  .scene-coin{left:auto;right:14px;margin-left:0;bottom:6px;width:22px;height:22px;--driftX:0px !important}
  @keyframes coinDrop{
    0%{opacity:0;transform:translateY(-4px) scale(.5) rotate(0)}
    18%{opacity:1;transform:translateY(0) scale(1) rotate(0)}
    100%{opacity:0;transform:translateY(44px) scale(.86) rotate(240deg)}
  }
  .scene-otter img{width:46px}
  .scene-otters{gap:8px}
  .scene-door svg{width:42px}
  /* --from 跟著窄版尺寸重算：門 42＋gap 8，海獺 46＋gap 8 */
  .scene-otter:nth-child(2){--from:-52px}
  .scene-otter:nth-child(3){--from:-106px}
  .scene-otter:nth-child(4){--from:-160px}
  .scene-otter:nth-child(5){--from:-214px}
  .scene-stack{min-height:170px}
}
/* 關動畫的人直接看到終局：雜務已消失、海獺已到齊、硬幣不掉、結論已出現 */
@media (prefers-reduced-motion: reduce){
  .scene-toast,.scene-out,.scene-otter,.scene-chip,.scene-door{transition:none}
  .scene-chip{opacity:0}
  /* 海獺改用 animation 之後，光設 opacity/transform 蓋不掉，要連 animation 一起關 */
  .scene-otter{opacity:1;transform:none;animation:none}
  .amort-scene.s2 .scene-otter{animation:none}
  .scene-door{opacity:1;transform:none}
  .scene-out{opacity:1;transform:none}
  .scene-out.bump{animation:none}
  .out-coin{opacity:1;animation:none}
  .scene-out.bump .out-coin{animation:none}
  .scene-card.saved .scene-coin{animation:none;opacity:0}
}

/* ---------- 退款保證區 ---------- */
#refund .btn{margin-top:26px}

/* ---------- FAQ 尾句內文連結（例如「更多方案相關問題看常見問題」）：
   原本繼承 a{color:inherit;text-decoration:none}，看起來不像可點。
   只在本頁 .note 裡的連結加品牌色＋底線，不影響全站其他 .note（沒有 <a> 就不受影響）。 ---------- */
.note a{color:var(--brand-text);text-decoration:underline;text-underline-offset:2px}
.note a:hover{color:#1c5568}

/* ---------- FAQ：.faq 整組 2026-08-01 batch4 收斂進 site.css，
   跟 page-landing.css 共用同一份，這裡不再重複定義 ---------- */

/* 比較表裡尚未查證的格子。誠信紅線：沒有出處就標待確認，不填推測值 */
.pt-table .cell-todo{color:var(--sub);background:var(--warm)}

@media (max-width:960px){
  .tiers{grid-template-columns:1fr}
}
@media (max-width:640px){
  .pt-table{min-width:560px}
}

/* 2026-08-03 動畫批加：主推卡（.tier.hot）hover 上浮，跟 site.css 沒有既有 transform/transition 衝突，
   這裡順便補 transition 讓 hover 不跳格 */
.tier.hot{transition:transform .3s cubic-bezier(.2,.8,.2,1),box-shadow .3s}
.tier.hot:hover{transform:translateY(-6px);box-shadow:var(--shadow-md)}

/* ============================================================
   2026-08-04 動畫語彙 v2 — 本頁主秀（共用三件套在 site.css，這裡只放 pricing 獨有的）
   一頁只准一組主秀，其他第二層頁面複製時複製「三件套」不是複製這一段。
   ============================================================ */

/* ---------- 主秀 A：手冊封面旋轉疊卡（唯一從 flighty.com/pricing 抄回來的手法，
   它的 Passport 區把截圖 rotate(-6°/2°/4°/6°) 疊成拍立得堆。
   原本兩張封面是並排 40px 小圖，看起來像 icon；疊起來才讀得出「兩本實體手冊」。
   hover 展開是 .tier 層級觸發（不是 img 自己 hover），滑到卡片任一處兩本就攤開。
   .tier 有 overflow:hidden，但 perk-stack 距離卡片邊 26px padding，轉再多也不會被切。 ---------- */
.tier-perk .perk-stack{position:relative;flex:0 0 auto;width:66px;height:68px}
.tier-perk .perk-stack img{position:absolute;top:0;left:0;width:40px;
  transition:transform .45s cubic-bezier(.2,.8,.2,1),box-shadow .45s}
.tier-perk .perk-stack img:first-child{z-index:2;transform:rotate(-8deg)}
.tier-perk .perk-stack img:last-child{z-index:1;left:18px;top:4px;transform:rotate(7deg)}
.tier:hover .perk-stack img:first-child{transform:rotate(-14deg) translate(-4px,-4px);box-shadow:var(--shadow-lg)}
.tier:hover .perk-stack img:last-child{transform:rotate(13deg) translate(4px,0)}

/* ---------- 主秀 B：比較表首欄橫向 sticky。
   .table-wrap 是 overflow-x:auto 的捲動容器，所以 position:sticky;left:0 是「對容器」黏，
   手機把表往右拉時「功能」欄留在原地，不會滑到一半忘記自己在看哪一列。
   儲存格本身必須自帶不透明背景（.pt-table 的白底畫在 table 上、td 是透明的，
   不補背景會看到後面的列從底下穿過去）。右緣 1px 陰影當作「這欄是釘住的」提示。
   桌機表格塞得下、根本不會捲，這條等於只在窄螢幕生效。 ---------- */
.pt-table th:first-child,.pt-table tbody td:first-child{position:sticky;left:0;z-index:1;
  box-shadow:1px 0 0 var(--line)}
.pt-table tbody td:first-child{background:var(--surface)}
.pt-table thead th:first-child{z-index:2}   /* thead 已經有 --brand-tint-2 底色，只要壓過 tbody 的黏著欄 */

/* ---------- 主秀 C：比較表逐列進場，行為全在 site-motion.js 的 .rv-rows。
   這裡只補「JS 沒載到時的保險」：沒有 JS 就維持原本全部可見，不會整張表空白。
   （site-motion.js 只在 hasMotion 時把 opacity 設 0，這條是雙保險。） ---------- */
.rv-rows thead,.rv-rows tbody tr{opacity:1}

@media (prefers-reduced-motion:reduce){
  .tier-perk .perk-stack img{transition:none}
}

/* 2026-08-07 FAQ 內文連結：全站 a 是 color:inherit 無底線（site.css:89），
   .ans 裡的購買連結會隱形，這裡單獨給色＋底線 */
.faq .ans a{color:var(--brand-text);text-decoration:underline;text-underline-offset:3px}

/* ============================================================
   2026-08-09 Dark mode pricing 專屬覆寫（同一批 #fff→var(--surface)／
   var(--ink)→var(--heading) 已經在上面原地代換，light 模式零視覺變化；
   以下是代換規則本身的例外）。
   ============================================================ */
/* .pt-group th 背景固定用 var(--brand-tint)（跟 --warm／--brand 同一組「刻意不隨
   主題變」的強調底色），但文字 var(--brand-text) 全站會自動翻亮，兩邊一亮一亮
   會撞在一起，這裡單獨把組標題列的底色換成跟 --brand-tint-2 同色系的深色版本。 */
:root[data-theme="dark"] .pt-table .pt-group th{background:rgba(127,214,240,.22)}
/* .note a:hover 的收斂色是寫死的深藏青，跟著全站 --brand-text 翻亮之後這個 hover
   態需要換一個同樣「比預設狀態更深/更亮」邏輯的收斂色，這裡給 dark 版本。 */
:root[data-theme="dark"] .note a:hover{color:#B9EAF5}

/* ============================================================
   2026-08-17 設計強化批（Lucy 實看回饋：主推無焦點／CTA 倒置／
   表頭滾走沒指引／方案卡區太素／淺深硬切）
   ============================================================ */

/* ---------- 1. 主推卡（專業版 .tier.hot）視覺加重：
   放大 3.5%＋更亮底＋更實框線。hover 規則本檔上面已有 translateY(-6px)，
   transform 會整組覆蓋不會疊加，所以 hover 要把 scale 一起寫回去。
   只在三卡並排的桌機放大；手機單欄放大只會撐破格線。 ---------- */
@media (min-width:901px){
  .tier.hot{transform:scale(1.035);background:rgba(255,255,255,.10);border-color:rgba(127,214,240,.75)}
  .tier.hot:hover{transform:scale(1.035) translateY(-6px)}
}

/* 兩顆 badge 同款＝沒有主推。非 hot 卡的 badge 降成描邊字，hot 保持實心 brand 底 */
.tier:not(.hot) .badge-flag{background:transparent;border:1px solid rgba(127,214,240,.55);color:var(--brand)}
/* 2026-08-18 Lucy 回饋「放大不夠，要像蓋章」：不是同款 pill 放大，是整顆換成圖章造型——
   方角、粗框、微旋轉、實色底＋外圈暈開陰影，讀起來像蓋在卡片上的印章，跟另外兩張卡的
   膠囊型 badge 拉開材質差異，一眼就知道這張是「狀態」不是「推薦」 */
/* 選擇器前綴 .tier:not(.hot) 是刻意的：specificity 要壓過上面那條 .tier:not(.hot) .badge-flag，
   否則 background/border/color 會被蓋回半透明膠囊，圖章感就沒了 */
.tier:not(.hot) .badge-flag-lg{
  font-size:15px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
  padding:7px 18px;top:-14px;right:-10px;
  border:2px solid var(--ink);border-radius:7px;
  background:rgba(255,255,255,.94);color:var(--ink);
  transform:rotate(-7deg);
  box-shadow:0 0 0 3px rgba(6,60,94,.14),0 4px 10px rgba(6,60,94,.4);
}
/* 圖章要貼著卡片角落掛出去（半顆懸在邊界外）才夠像真的蓋上去，
   .tier 預設 overflow:hidden 是給 spotlight／perk 插圖清角用的，這張卡沒有那些子元素，
   單獨解禁不影響其他卡片；手機版角落間距淺，貼邊會被切到，退回卡片內側 */
.tier-stamp{overflow:visible}
@media (max-width:900px){
  .tier-stamp .badge-flag-lg{top:14px;right:8px}
}

/* ---------- 2. CTA 階層：主推卡購買鍵改實心 brand（頁上最強的按鈕
   不該是 header 的「免費下載」）。btn-price 是活價 span，data-price 換價吃得到 ---------- */
.tier.hot .btn-outline{background:var(--brand);border-color:var(--brand);color:var(--ink);font-weight:800}
.tier.hot .btn-outline:hover{background:#9ADEEF;border-color:#9ADEEF;color:var(--ink)}
.tier .btn .btn-price{font-weight:800;letter-spacing:-.01em}

/* ---------- 3a. 桌機 sticky 表頭：表格塞得下就把捲動容器打開，
   sticky 才能對 viewport 黏（overflow-x:auto 的容器會吃掉 sticky top）。
   top 68px = 固定 header 高度 + 4px 呼吸 ---------- */
@media (min-width:901px){
  .table-wrap{overflow:visible}
  .pt-table{min-width:0}
  .pt-table thead th{position:sticky;top:68px;z-index:3}
}

/* ---------- 3b. 手機表格閱讀性 ---------- */
/* 滑動提示與右緣遮罩已由 .table-hint ＋ .table-wrap 的 mask-image 承接（另一批同日改動），
   這裡只留手機首欄加寬：92px 會把「資料匯出」「課程照片」直向斷字 */
@media (max-width:900px){
  .pt-table th:first-child,.pt-table tbody td:first-child{min-width:108px}
}

/* ---------- 4. 方案卡吉祥物：卡片右上角一隻水獺（badge 下方），
   對齊首頁的插圖密度。absolute 不佔文流，desc 是滿寬兩行、最右端可能擦到，
   寬度收在 52px 並讓出 top 區就不會撞 ---------- */
.tier-otter{position:absolute;top:60px;right:22px;width:48px;height:auto;pointer-events:none}
.tier:not(.hot) .tier-otter{top:54px}

/* 2026-08-18 Lucy 回饋：探頭水獺原本絕對定位飄在頁尾右下、離標題太遠像貼歪的貼紙，
   改成跟 h1 站在同一行（見上面 .page-top-heading），素材也換 otter-b-peek-l——
   這張切邊在左側、身體露在右邊，貼著標題文字尾端剛好像從字後面探出頭 ---------- */
.hero-peek{width:56px;height:auto;flex:none;pointer-events:none}
@media (max-width:900px){.hero-peek{width:44px}}

/* ---------- 5. 淺深交界軟化：方案深色區改圓角平板（slab）造型，
   上下都圓，取代原本的滿版硬切。.dark 已有 overflow:hidden 圓角切得乾淨 ---------- */
#plans.dark{border-radius:clamp(28px,4vw,52px)}

@media (prefers-reduced-motion:reduce){
  .tier.hot{transform:none}
}


/* ---------- 2026-08-17 個人版早鳥登記（先不打 Stripe，Lucy 拍板）。
   按鈕點開變 email 表單，成功後只留一句確認。
   2026-08-21 Lucy：整塊改白底托盤，凸顯 input 與登記鍵。做法是「貼齊卡片下緣的底座」
   而不是浮在卡片上的白方塊——負 margin 吃掉 .tier 的 padding（上下 30／左右 26），
   下方圓角接卡片的 --r-lg 28px 減 1px 框線。浮貼版（四邊留白的圓角白卡）試過，
   深色卡裡再一張圓角卡＝卡中卡，看起來像貼紙。
   --eb-plate 抽成變數：想降一階讓專業版保住主推地位就改 #eef6fa（冰藍），其餘不用動。
   .tier 是 overflow:hidden，但個人版那張是 .tier-stamp（overflow:visible 給徽章用），
   圓角得自己畫，不能指望被卡片裁掉。
   白底之後這一區的文字全部要翻色，深底用的淺色留在白托盤上會直接消失 ---------- */
.earlybird{--eb-plate:#fff;--eb-plate-ink:#0B2436;
  display:flex;flex-direction:column;
  background:var(--eb-plate);margin:22px -26px -30px;padding:18px 26px 22px;
  border-radius:0 0 27px 27px;box-shadow:0 -10px 24px rgba(0,0,0,.18)}
.eb-form{margin-top:auto}
/* 2026-08-18：拿掉點開表單的按鈕，input/登記鍵直接常駐，這句話變成本卡唯一的說明文字，
   字級/粗細都要撐得起來。選擇器要帶 .dark 才壓得過 site.css 的 .dark p（0,1,1），
   只寫 .eb-note（0,1,0）會輸，字會留在深底用的淺色、糊在白托盤上。 */
.dark .eb-note{font-size:15.5px;font-weight:700;color:var(--eb-plate-ink);margin:0 0 10px;text-align:center}
/* hidden 語意搶回來：.btn 和 .eb-row 的 display 會蓋掉 UA 的 [hidden]（同 .amort-card[hidden] 的坑） */
.earlybird [hidden]{display:none !important}
.eb-row{display:flex;gap:10px}
/* input 字級 16px 是為了 iOS Safari（低於 16px 會在 focus 時自動放大整頁）。
   placeholder 用 #66808f（對白底 4.6:1），再淺整格會看起來像 disabled。 */
.eb-row input{flex:1;min-width:0;padding:13px 14px;border-radius:var(--r-sm);
  border:1.5px solid #b9cfdb;background:#fff;color:var(--eb-plate-ink);
  font-size:16px;font-family:inherit;transition:border-color .2s,box-shadow .2s,background .2s}
.eb-row input::placeholder{color:#66808f}
.eb-row input:hover{border-color:#8fb2c4}
.eb-row input:focus{outline:none;border-color:var(--brand-deep);
  box-shadow:0 0 0 3px rgba(59,151,179,.25)}
/* .tier .btn 有 width:100% + margin-top:24px（site.css:359），登記鍵不覆寫會吃掉整列、
   把 input 擠成直條。選擇器要 .tier .eb-submit 才壓得過（specificity 0,2,0）。
   白托盤上改深墨底白字：亮藍鈕在白底上對比只剩 1.5:1，會糊掉。 */
.tier .eb-submit{flex:none;width:auto;margin-top:0;padding:13px 22px;
  background:var(--ink);border-color:var(--ink);color:#fff;font-weight:800}
.tier .eb-submit:hover{background:#0a4f77;border-color:#0a4f77;color:#fff}
.tier .eb-submit:disabled{cursor:default;transform:none}
/* 轉圈顏色（.btn.is-loading 本體在 site.css）：兩顆鈕底色相反，各給一次。
   登記鍵是深墨實心 → 白圈；購買鍵是描邊透明底貼在深色卡上 → 淺圈。
   登記鍵本身也掛著 .btn-outline（只是被上面改成實心），所以購買鍵那條要 :not(.eb-submit)
   排除它，不然同 specificity 由後者勝出，淺色圈畫在深色鈕上剛好相反。 */
.tier .eb-submit.is-loading::before{--btn-spinner:#fff}
.tier .btn-outline:not(.eb-submit).is-loading::before{--btn-spinner:#dff1f8}
/* 錯誤／成功句也在白托盤上：原本的淺紅 #ffb4a8 與亮藍 --brand 都是配深底的，換成深色版 */
.eb-error{font-size:13px;color:#b3261e;margin:8px 0 0;text-align:center}
.eb-done{font-size:14px;font-weight:700;color:var(--brand-deep);margin:6px 0;text-align:center}