/* ============================================================
   Course Kit 官網 — 三個贈品頁專屬樣式（page-resources.css）
   跟 site.css 一起載入，site.css 在前。三頁共用同一支
   （checklist／tracker／calculator；原本還管一個總覽頁 resources.html，
   2026-08-02 併入 download.html 後已刪除，.res-list 那組規則也隨之作廢移除）。

   2026-08-03 三版（Lucy 裁定）：贈品頁改成 ConvertKit 式極簡落地頁，砍光「這份工具
   解決什麼」「檔案格式與大小」「其他免費資源」「CTA 帶」跟麵包屑，只留：極簡 header
   （純 logo）／標題＋一句說明／贈品 mockup／email 表單／極簡 footer。原本 fixed
   header（扣 64px 的 .page-top 留白公式）換成非 fixed 的純 logo bar，不用再扣高度。
   舊版 .magnet-body／.magnet-list／.magnet-note／.magnet-cross／.cta-actions 這些規則
   在新版 HTML 裡已經沒有對應元素在用，一併移除，不留死規則。
   ============================================================ */

/* ---------- 極簡 header：純 logo，非 fixed（跟 site.css 的 #hdr 完全分開，
   不共用任何規則，不會被 header.stuck 之類既有樣式影響，也不用 JS 偵測捲動） ---------- */
.hdr-min{padding:22px 0}
/* 2026-08-09 dark mode 新增：極簡 header 只有 logo 一顆元素，加主題切換鈕後
   需要 flex 排版把它推到右邊，跟 logo 分兩端對齊（跟 site.css 的 .nav 視覺呼吸一致）。 */
.hdr-min .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px}

/* ---------- 極簡版頁面容器：2026-08-06（Lucy 裁定：範圍太小氣）從 520px 窄欄
   放大到跟站內主 wrap 同級（1000px，wrap 本身是 1140px，留一點差距不頂滿）。
   只設 padding-top／padding-bottom，不可用 shorthand（跟本檔原本 .page-top 的
   警語同一個坑：shorthand 會把繼承自 .wrap 的左右 padding 一起歸零，兩側貼死視窗邊緣） ---------- */
.magnet-min{max-width:1000px;padding-top:clamp(32px,6vw,52px);padding-bottom:var(--pad-sec);text-align:center}
.magnet-min h1{font-size:clamp(38px,6vw,68px)}
/* 中文標題在窄螢幕會從任何字元斷行，把詞組包 .nw 綁住（哪幾個詞見各頁 h1 的註解）。 */
.magnet-min h1 .nw{white-space:nowrap}
.magnet-min .lead{margin-left:auto;margin-right:auto;max-width:640px}
/* 副標同理，中文會從任意字元斷行，詞組要黏住得自己包 .nw。 */
.magnet-min .lead .nw{white-space:nowrap}

/* ---------- 贈品 mockup：沿用三張贈品卡既有的 thumb-a/b/c 漸層色與編號字
   （原本定義在 .post .thumb 系列，卡片本體吃 site.css），這裡放大成獨立區塊。
   內容仍待定，只畫色塊＋編號，不假裝有實際頁面／欄位可看，維持三頁最上面
   誠信紅線那條註解的原則。checklist=01(mm-a)／tracker=02(mm-b)／calculator=03(mm-c)，
   編號對照沿用 download.html #tools 三張卡與彼此交叉連結卡既有的分配。 ---------- */
/* 2026-08-06 二修：第一輪放大（65%/320px）Lucy 看了還是嫌小氣，照她紅框比例再拉一級：
   mockup 吃滿容器 92%、高度 440px，成為整頁的絕對主視覺。 */
.magnet-mockup{width:92%;height:440px;margin:36px auto;border-radius:var(--r-lg);box-shadow:var(--shadow-sm);
  display:flex;align-items:center;justify-content:center}
.magnet-mockup .num{font-size:120px;font-weight:800;letter-spacing:-.02em;color:var(--brand-text)}
.magnet-mockup.mm-a{background:linear-gradient(135deg,var(--brand-tint),var(--brand-tint-2))}
.magnet-mockup.mm-b{background:linear-gradient(135deg,var(--warm),var(--brand-tint-2))}
.magnet-mockup.mm-c{background:linear-gradient(135deg,var(--brand-2),var(--brand-tint))}
.magnet-mockup.mm-c .num{color:var(--ink)}

/* ---------- 2026-08-19 名單收集頁四版：checklist／tracker 兩頁的 mockup 換成贈品本體實拍
   （1152×648，checklist 是 handbook.html 實際渲染後合成的兩頁紙，tracker 是課程總覽表），
   所以不吃 .mm-a/.mm-b 那組漸層底色，也不能沿用固定 440px 高——圖本身 16:9，
   固定高度會把欄位裁掉。calculator 頁沒有實體檔案可拍，維持原本的色塊版位不動。 ---------- */
.magnet-mockup.mm-plain{position:relative;width:100%;height:auto;background:none;box-shadow:none;display:block;margin:32px auto 30px}
.magnet-mockup.mm-plain img{display:block;width:100%;height:auto;
  border-radius:var(--r-lg);box-shadow:var(--shadow-md)}

/* 免費徽章：「這份東西不用錢」原本只寫在按鈕上，要捲到表單才看得到。2026-08-20 Lucy 指定
   照 HappyCoaching 那類收集頁的作法，在主視覺角落貼一枚奶油色徽章，第一屏就講完。
   配色走 --warm／--warm-line／--ink 這組「貼紙色」：三顆都刻意不隨深淺主題翻轉、永遠成對
   （準則見 site.css dark 區塊註解），所以徽章在 dark mode 也是奶油底深藏青字。
   刻意做成純文字不是連結：這頁只准有一個動作（表單），多一個可點的出口就違背極簡收集頁。
   只掛 zh 兩頁。en/ja 的贈品檔案還沒做（那兩頁現在是導去 App 的 noindex 說明頁），
   掛「免費下載」會承諾一個現在領不到的東西。等英日文贈品做出來再補上去。 */
.mm-badge{position:absolute;top:-10px;left:-4px;z-index:1;
  padding:9px 18px;border-radius:999px;
  background:var(--warm);border:1px solid var(--warm-line);color:var(--ink);
  font-size:clamp(13px,1.5vw,16px);font-weight:800;letter-spacing:.02em;
  white-space:nowrap;box-shadow:var(--shadow-md)}

/* 感謝頁的 h1 比贈品頁小一階：贈品頁的 clamp(38,6vw,68) 是給「這份東西是什麼」用的主視覺，
   同樣字級套在「恭喜你！踏出第一步」這種短句上會整片糊成一堵字牆（Lucy 2026-08-20 的評語是
   「寫得很像詐騙」）。感謝頁的重點是下面那幾句怎麼收信，標題只要標記情緒，不需要壓場。 */
.magnet-min.thx h1{font-size:clamp(28px,3.4vw,42px)}

/* 感謝頁（thanks.html）的三句說明：2026-08-20 感謝頁改吃這支樣式（同一個極簡殼）。
   跟 .lead 同一欄寬，但這裡是三句長度不一的句子，跟著 .magnet-min 置中會排成參差的梯形，
   所以整塊靠左讀；句距用 14px，比全站 p 的預設緊一階，三句才會讀成一組而不是三段。 */
.magnet-min .thx-note{max-width:640px;margin:clamp(20px,3vw,28px) auto 0}

/* 感謝頁整頁上下置中（Lucy 2026-08-20）：這頁只有一張圖、一句標題、六句話，靠上排會讓
   整個視窗空掉一半。header 是 static 不是 fixed，用 min-height:calc(100dvh - 高度) 得把
   header 高度寫死；改成 body 撐滿視窗 + main 吃掉剩餘高度，header 之後長高長矮都不用改這裡。
   開關掛在 <body class="thx-page">，不用 :has()，選擇器成本與相容性都低一階。 */
.thx-page{display:flex;flex-direction:column;min-height:100dvh}
.thx-page main{flex:1;display:flex;align-items:center;justify-content:center}
/* 置中之後容器自己的上下留白會跟 flex 置中打架（內容被推離真正的中線），歸零交給 flex 排。 */
.thx-page .magnet-min{padding-top:0;padding-bottom:0}

/* 主視覺：吉祥物圖是裝飾，但 2026-08-20 Lucy 看了 128px 說太小。otter-check 這張畫面裡
   有桌子、椅子、書本，水獺本體只佔一半，同樣寬度看起來會比 otter-b-laptop 小一號，
   所以拉到桌機 200px、窄螢幕 150px。再大就會壓過 h1（42px）變成主角。 */
.magnet-min .thx-hero{display:block;width:clamp(150px,18vw,200px);height:auto;margin:0 auto 4px}

/* IG icon 連結：文字段落裡的 icon 要對齊行的視覺中線（vertical-align:-.25em 比 middle 準），
   點擊區維持 24px 見方以上，手指點得到。 */
.magnet-min .thx-follow{display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap}
.magnet-min .ig-link{display:inline-flex;align-items:center;justify-content:center;
  width:32px;height:32px;border-radius:10px;color:var(--brand-text);
  background:var(--brand-tint-2);border:1px solid var(--brand-border);
  transition:background .2s,color .2s,transform .2s}
.magnet-min .ig-link svg{width:18px;height:18px;display:block}
.magnet-min .ig-link:hover{background:var(--brand-tint);transform:translateY(-1px)}
.magnet-min .thx-note p{margin:0 0 14px}
.magnet-min .thx-note p:last-child{margin-bottom:0}
/* 感謝頁只剩兩個連結（客服信箱、IG），沒有按鈕也沒有卡片，所以它們必須自己看得出可以點：
   跟 .form-note a 同一套（品牌色＋底線），不要只靠顏色，色弱使用者分不出來。 */
.magnet-min .thx-note a{color:var(--brand-text);text-decoration:underline;
  text-decoration-color:var(--brand-border);text-underline-offset:3px}
.magnet-min .thx-note a:hover{text-decoration-color:var(--brand-text)}

/* 痛點句：跟 .lead 同一欄寬，但語氣是「你現在的處境」，用 --ink-2 比標題輕一階。
   2026-08-20 Lucy 回饋：痛點句置中、下面成果清單靠左，兩塊左緣對不齊（勾勾懸在句子左邊
   幾十 px，且每頁偏移量不同，因為置中的左緣隨句子長度浮動）。改成兩塊共用同一條左緣。
   第二輪 Lucy 指定：切齊的是「勾勾」對痛點句第一個字，不是清單文字對痛點句第一個字——
   勾勾不再懸掛在欄外，而是站在欄的最左邊當這一行的開頭，清單文字整段再往右讓一格。
   --gift-col 是那條共用左緣，痛點句與 li 都吃它，改一個值兩邊一起動，不會再對歪。 */
.magnet-min{--gift-col:28px}
.magnet-min .pain-line{max-width:640px;margin:0 auto;color:var(--ink-2);
  font-size:clamp(16px,1.8vw,19px);line-height:1.75;text-wrap:pretty;
  text-align:left;padding-left:var(--gift-col)}

/* 成果清單：整塊置中但文字靠左（中文長句置中很難讀），勾勾用 --brand-text 才有足夠對比。
   li 改用兩欄 grid（勾勾一欄、文字一欄），不用 absolute 定位：勾勾的位置由 --gift-col
   的 padding 決定，跟痛點句第一個字同一條線；文字自動退到第二欄，換行時第二行也會
   對齊第一行（grid 欄位天生的懸掛縮排），不必再手算 padding。 */
.magnet-min .gain-list{max-width:640px;margin:20px auto 0;padding:0;list-style:none;
  text-align:left;display:grid;gap:11px}
.magnet-min .gain-list li{display:grid;grid-template-columns:auto 1fr;column-gap:11px;
  padding-left:var(--gift-col);line-height:1.7;text-wrap:pretty}
.magnet-min .gain-list li::before{content:"✓";color:var(--brand-text);font-weight:800}

/* ---------- email 表單區塊：頁面現在只剩這一塊內容，置中排版。表單本身跟 site.css
   的 form.capture{max-width:560px} 一樣維持窄欄（不用跟著 1000px 容器撐滿），
   2026-08-06 加 margin auto 讓它在寬容器裡真的置中（原本沒設，520px 窄欄時剛好
   跟容器同寬看不出差異，容器放大後不補會貼齊左邊）。 ---------- */
.magnet-min .magnet-block h2{font-size:clamp(20px,2.6vw,26px)}
/* 2026-08-20：checklist／tracker 拔掉表單區的 h2（Lucy 裁定「寄到信箱」講第三次是重複），
   calculator 頁仍留著 h2「下次不用自己算」，上面這條規則所以留著沒刪。拔掉 h2 後說明句變成
   block 裡第一個元素，繼承全站 p{margin-top:14px} 會在區塊自己的頂部留白（--pad-sec-tight）
   之外再多疊一層，看起來像標題被拔掉後留下的縫，這裡歸零讓文字跟區塊頂緣切齊。 */
.magnet-min .magnet-block>p:first-child{margin-top:0}
.magnet-min .capture{justify-content:center;margin-left:auto;margin-right:auto}

/* ---------- email 表單同意勾選框（GDPR 明確同意，2026-08-19 新增）＋ 全堆疊排版
   （2026-08-19 二版，Lucy 回饋「按鈕排版很奇怪，IA 不協調」）。

   一版的問題：勾選框用 flex-basis:100% 佔滿一列，把送出鈕擠到第三列，而容器有
   justify-content:center，結果變成「輸入框滿寬（貼左右緣）／勾選框靠左／按鈕置中」
   三種對齊方式同時存在，視覺上散掉。

   二版改成三個元素都佔滿整列、共用同一組左右邊緣，只剩一種對齊，順帶把 CTA 放大。
   注意 site.css 的 form.capture input 是 flex:1 1 240px、.btn 是內容寬，兩個都要
   明確覆寫成 100% 才會真的堆疊；480px 以下既有的 flex-direction:column 規則
   （site.css）跟這裡同結果，不衝突。 ---------- */
.magnet-min .capture>*{flex-basis:100%}
.magnet-min .capture input[type="email"]{flex:1 1 100%}
.magnet-min .capture .btn{width:100%}

.magnet-min .capture-consent{display:flex;align-items:flex-start;gap:9px;
  text-align:left;margin:2px 0}
.magnet-min .capture-consent input[type="checkbox"]{flex:0 0 auto;width:17px;height:17px;
  margin-top:2px;accent-color:var(--brand);cursor:pointer}
/* 標籤現在把原本按鈕下方那段小字（使用技巧通知＋隱私政策連結）也吃進來了，
   所以裡面會有 <a> 與 .nw。連結放在 <label> 內是安全的：HTML 規範明訂 label 的
   activation behavior 對「interactive content 後代」（<a> 屬之）不作用，點連結
   不會順手切換勾選框。cursor 只給文字，連結自己維持 pointer。 */
.magnet-min .capture-consent label{font-size:var(--fs-sm);color:var(--sub);cursor:pointer;text-wrap:pretty;line-height:1.6}
.magnet-min .capture-consent label a{color:inherit;text-decoration:underline;text-underline-offset:2px}
.magnet-min .capture-consent label a:hover{color:var(--brand)}
.magnet-min .capture-consent .nw{white-space:nowrap}

.magnet-min .form-note{max-width:46ch;margin:14px auto 0;text-wrap:pretty}
/* 中文可以在任意字元間斷行，「取消訂閱」會被拆成「取／消訂閱」（Lucy 截圖圈的位置）。
   詞組要黏在一起只能明說。 */
.magnet-min .form-note .nw{white-space:nowrap}
/* 表單下的隱私政策連結（2026-08-08 footer 移除後的法遵保底）：連結要看得出能點。
   同日 Lucy 嫌兩行小字囉嗦，獨立的 .form-legal 那行併回 .form-note，選擇器跟著改掛 .form-note a。
   連結樣式留著，法遵句還在，只是不再自成一行。 */
.magnet-min .form-note a{color:var(--brand-text);text-decoration:underline;
  text-decoration-color:var(--brand-border);text-underline-offset:2px}
.magnet-min .form-note a:hover{text-decoration-color:var(--brand-text)}

/* ---------- 極簡 footer：單行版權＋兩條法務外連，不用四欄 f-grid ---------- */
.ftr-min{padding:26px 0;border-top:1px solid var(--line)}
.ftr-min .wrap{display:flex;flex-wrap:wrap;gap:8px 22px;align-items:center;justify-content:center;
  font-size:var(--fs-sm);color:var(--faint)}
.ftr-min a{color:var(--faint)}
.ftr-min a:hover{color:var(--ink-2)}

@media (max-width:480px){
  .magnet-mockup{width:80%;height:220px}
  .magnet-mockup .num{font-size:64px}
  /* 實拍版不吃上面那條窄化＋固定高，手機上要吃滿寬度才看得清欄位 */
  .magnet-mockup.mm-plain{width:100%;height:auto}
}

/* ---------- dark mode ----------
   .mm-b 漸層是 linear-gradient(135deg, var(--warm), var(--brand-tint-2))：--warm 固定
   不變、--brand-tint-2 會跟著暗，跟 .subscribe／.warm／.b-warm 同一種地雷。置中的
   .num 文字用 var(--brand-text)（全站自動翻亮），疊在漸層偏 --warm 那端會看不清楚。
   改用低透明度暖金色版本，維持「這是 02 號贈品」的暖色識別，但不會半邊刺眼半邊看不到字。 */
:root[data-theme="dark"] .magnet-mockup.mm-b{background:linear-gradient(135deg,rgba(232,201,120,.18),var(--brand-tint-2))}

/* .btn-primary 的底色是 var(--ink)（#063c5e，site.css 註解裡刻意不隨主題翻的 primitive），
   而 dark mode 的 --bg 是 #0B2436，兩色只差 1.35:1，整顆鈕在深底上跟背景糊成一塊
   （Lucy 2026-08-19 截圖圈到）。這三頁的訂閱鈕是整頁唯一的轉換點、又是滿寬佔一整列，
   糊掉的代價最大，所以就地翻成實心品牌色：--brand 底 ＋ --ink 字（7.4:1），
   等同 .btn-glow 那套語彙，深底上一眼看得到。陰影跟著換成青色光暈，
   原本的 rgba(6,60,94,..) 深藍陰影在深底上等於沒有。
   選擇器只吃 .magnet-min 的表單鈕，不動全站 .btn-primary：其他頁的 primary 鈕多半
   坐在 --surface 卡片上或旁邊有 .btn-outline 作對比，一起翻會牽動整站視覺，另案處理。 */
:root[data-theme="dark"] .magnet-min .capture .btn-primary{
  background:var(--brand);color:var(--ink);
  box-shadow:0 10px 30px rgba(127,214,240,.28);
}
:root[data-theme="dark"] .magnet-min .capture .btn-primary:hover{
  box-shadow:0 14px 36px rgba(127,214,240,.38);
}

/* ---------- 單價換算小工具（2026-08-11 新增，同日重排）
   原本這頁是 email 候補名單：標題寫「小工具」、內文寫「內容待定」、唯一互動是留 email，
   而 blog-actual-rate 的 CTA 卡卻寫「把價格、堂數丟進去，單價、漲幅自動算出來」，
   點進來看到的跟文案承諾的對不上。Lucy 2026-08-11 裁定改混合：頁內先能算，算完才收 email。
   算法與 blog-actual-rate 的三步驟一致：總支出 ÷ 已使用堂數 = 實際單價，
   再跟第一次購買的單價比出漲幅。純前端，不送任何數字到後端。
   配色全部走語意 token（--surface／--heading／--line），dark mode 自動跟著翻，不需另寫覆寫。
   .magnet-mockup 的假色塊在本頁移除：現在有真的東西可以看，不需要再畫一個編號色塊代替。

   重排（Lucy 截圖圈了三處跑版）：
   1. 每一列都重複「總金額／買到的堂數」兩個標籤，兩列以上就變成一堵標籤牆。
      改成整張表只有一排欄位標題，輸入框本身掛 aria-label 給讀螢幕軟體，視覺與語意各自拿到需要的。
   2. 「實際已經上完的堂數」原本是 max-width:280px 的獨立區塊，吊在左邊，右側空一大片，
      而且上方分隔線只有 280px 寬，看起來像斷掉。改成吃同一套欄位網格：標籤佔前兩欄，
      輸入框落在第三欄，跟上面的「買到的堂數」對齊（兩個欄位填的本來就是同一種東西）。
   3. email 區塊沿用舊的置中排版，計算卡是 720px 靠左的白卡，兩塊寬度與對齊都不同，
      看起來像兩個不相干的頁面。改成 email 區塊也收在 720px，兩塊左右邊界對齊。 ---------- */

/* 欄位網格只定義一次，計算列、欄位標題列、已上堂數列三者共用，改欄寬只改這裡 */
.calc{--calc-cols:64px 1fr 1fr 34px}

.calc{max-width:720px;margin:36px auto 0;padding:clamp(20px,3vw,32px);text-align:left;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow-sm)}

.calc-head,.calc-row{display:grid;grid-template-columns:var(--calc-cols);gap:10px;align-items:center}
.calc-head{margin-bottom:8px;font-size:var(--fs-sm);color:var(--sub)}
.calc-rows{display:flex;flex-direction:column;gap:10px}
.calc-row .cr-n{font-size:var(--fs-sm);color:var(--faint);white-space:nowrap}

/* 輸入框沿用 form.capture input 的視覺語彙（同一套圓角與 focus 環），
   但欄位是數字不是 email，寬度要能被 grid 壓縮，所以 min-width:0 一定要寫，
   否則 number input 的預設 min-content 會把 grid 撐爆版面。 */
/* 背景用 --surface 不用 --card：--card 是刻意不隨主題翻的固定白，
   拿來當輸入框底色會在 dark mode 變成白底配淺色字（2026-08-11 Lucy 截圖圈到看不見的值）。
   --surface 才是站上「實體表面」的語意 token，既有 form.capture input 也是用這顆。 */
.calc input[type="number"]{min-width:0;width:100%;padding:11px 13px;font:inherit;font-size:var(--fs-sm);
  color:var(--text);background:var(--surface);border:1px solid var(--brand-border);border-radius:var(--r-sm)}
.calc input[type="number"]:focus{outline:none;border-color:var(--brand-deep);
  box-shadow:0 0 0 3px var(--brand-tint-2)}
/* 數字欄位不需要上下微調鈕，點錯一次就改到值，移掉比留著安全 */
.calc input[type="number"]::-webkit-outer-spin-button,
.calc input[type="number"]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.calc input[type="number"]{-moz-appearance:textfield;appearance:textfield}

.calc .cr-del{width:34px;height:38px;padding:0;font-size:20px;line-height:1;color:var(--faint);
  background:none;border:1px solid transparent;border-radius:var(--r-sm);cursor:pointer}
.calc .cr-del:hover{color:var(--ink-2);border-color:var(--line)}
/* 只剩一列時刪掉會變成空表，隱藏而不是 disabled：一個永遠按不動的鈕只會讓人以為壞了 */
.calc-rows.is-single .cr-del{visibility:hidden}

/* 新增鈕收進欄位標題列的最右格，跟每列的 × 疊成同一條操作軸線（Lucy 2026-08-11）。
   grid-column:-2/-1 指最後一欄，桌機（四欄）與窄螢幕（三欄）都落在同一個位置，
   所以窄螢幕只藏標題文字、不藏整列，否則新增功能會整個消失。 */
.calc-head .calc-add{grid-column:-2/-1;justify-self:end;
  display:flex;align-items:center;justify-content:center;width:34px;height:34px;padding:0;
  color:var(--brand-text);background:none;border:1px solid var(--brand-border);border-radius:var(--r-sm);cursor:pointer}
.calc-head .calc-add:hover{background:var(--brand-tint-2);border-color:var(--brand-deep)}
.calc-head .calc-add:focus-visible{outline:2px solid var(--brand);outline-offset:1px}
.calc-head .calc-add svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}

.calc-used{display:grid;grid-template-columns:var(--calc-cols);gap:10px;align-items:center;
  margin-top:20px;padding-top:20px;border-top:1px solid var(--line)}
.calc-used label{grid-column:1/3;font-size:var(--fs-sm);color:var(--sub)}
.calc-used input{grid-column:3}

.calc-out{margin-top:22px;padding:18px 20px;background:var(--brand-tint-2);border-radius:var(--r-md)}
.calc-out .calc-empty{margin:0;font-size:var(--fs-sm);color:var(--faint)}
.calc-out dl{display:grid;grid-template-columns:1fr auto;gap:10px 16px;margin:0}
.calc-out dt{font-size:var(--fs-sm);color:var(--sub)}
.calc-out dd{margin:0;text-align:right;font-variant-numeric:tabular-nums;color:var(--heading)}
/* 實際單價是全頁的答案，跟其他三個中繼數字拉開一階，不然讀者不知道要看哪一行。
   2026-08-11：只加粗放大還不夠，五行同一個重量時答案埋在第四行。
   在答案那列上方拉一條線，把「總支出／總堂數／方案均價」三個中繼數字收成一組，
   讀的順序變成先看過程再看結論。 */
/* 分隔線獨立成一個跨欄元素。原本是在 dt 與 dd 各掛一條 border-top，
   但兩格中間隔著 grid 的 column-gap，畫出來是斷成兩截的線（Lucy 2026-08-11 圈到）。 */
.calc-out .calc-sep{grid-column:1/-1;height:0;margin:8px 0 2px;border-top:1px solid var(--brand-border)}
.calc-out dt.is-key{color:var(--heading);font-weight:600;align-self:center}
.calc-out dd.is-key{font-size:clamp(22px,3vw,28px);font-weight:700;color:var(--brand-text);line-height:1.2}
/* 提醒小字置中：它不是 dl 的一員（沒有左標籤右數值的對位關係），
   跟著靠左會被讀成漏了右邊那一欄的殘缺列（Lucy 2026-08-11 圈到）。 */
.calc-out .calc-note{margin:16px 0 0;font-size:var(--fs-sm);color:var(--faint);text-align:center;text-wrap:pretty}

/* email 區塊收到跟計算卡同寬，兩塊左右邊界對齊。內部維持置中（表單本來就是窄欄置中的） */
.magnet-min .magnet-block{max-width:720px;margin:var(--pad-sec-tight) auto 0}

@media (max-width:560px){
  /* 窄螢幕塞不下四欄，改成「第 N 次」自成一行，金額與堂數並排，刪除鈕跟著堂數那欄 */
  .calc{--calc-cols:1fr 1fr 34px}
  .calc-head span{display:none}
  .calc-row{row-gap:4px}
  .calc-row .cr-n{grid-column:1/-1}
  .calc-used{grid-template-columns:1fr;row-gap:6px}
  .calc-used label,.calc-used input{grid-column:1}
}