/* 《以諾一書》讀者站──到達頁 /enoch/ 專用樣式（第一步：區塊大標）
   2026-10-16 以諾看過 sources 頁的新標題後裁定：首頁也套，分兩步，先動八個區塊的大標。
   和 sources.css 一樣另開一支、只在首頁多掛一個 <link>（build.py 的 extra_css），
   style.css 與其他頁的 HTML 完全沒改。顏色、字型沿用 style.css 的 :root 變數。
   CSP 是 style-src 'self'，同源檔案可載，inline <style> 不行。

   首頁不加 01、02 編號：sources 是資料頁，編號幫讀者定位；首頁是說服頁，
   九段各有任務，編上號會變成目錄。第二步（h3 記號、深色區細部）另案。 */

/* ---------- 小引 .kicker：灰字改酒紅、加粗 ----------
   markup 是「中文・ENGLISH」同一行，整行同色，不拆。深色購買區原本就是金色，
   由 style.css 的 #buy.ondark .kicker 蓋過去，這裡不碰。 */
/* 以諾 10-16 第四輪：八段的名稱是整頁的動線指引，要放大、要一眼認得出。
   小引改 16px 酒紅粗體，上面一道金色短線當「段落起點」記號；
   配合下面的區塊底色交替，每一段的開頭都清楚。 */
.kicker {
  margin: 0 0 14px; color: var(--title); font-size: 16px; font-weight: 800; letter-spacing: .1em; line-height: 1.5; }
.kicker::before {
  content: ""; display: block; width: 36px; height: 4px; margin: 0 0 12px; background: var(--gold); border-radius: 2px; }
/* 購買前的疑問與內容摘錄那兩欄只有 300px，字距收一點免得英文小標折行、尾字落單 */
#faq .head .kicker, #sample .head .kicker { letter-spacing: .05em; }

/* ---------- 八段底色交替（以諾 10-16：整頁太長、段落糊在一起）----------
   奇數段米白、偶數段米灰、最後購買區酒紅：
   1 翻開看看(paper) 2 這是一本什麼書(card) 3 全書地圖(paper) 4 這一版做了什麼(card)
   5 翻開看看・內頁(paper) 6 編譯者(card) 7 購買前的疑問(paper) 8 哪裡買(wine)
   原本 5、7 是米灰、2、4、6 是米白，連著四段米白看不出換段；這裡整個翻成嚴格交替。
   #about、#map 原本共用一個 .wrap，底色撐不滿版，所以 build.py 改成 section 在外、.wrap 在內。 */
/* ⚠ 2026-10-17 重排：〈這是一本什麼書〉與〈編譯者介紹〉兩段拿掉（內容移到 /editor/ 的
   〈中文編譯序言〉全文），原本的八段變六段，交替順序整個位移。現在是：
   1 翻開看看(paper) 2 全書地圖(card) 3 這一版做了什麼(paper)
   4 翻開看看・內頁(card) 5 購買前的疑問(paper) 6 哪裡買(wine)
   🔴 拿掉區塊就要重排交替——不重排會連著兩段同色，看不出換段。 */
/* ⚠ 2026-10-17 第二次重排（顧問 #6：購買判斷所需的定位偏後）：〈購買前的疑問〉從地圖、
   版本工具、內頁之後提到最前面，緊接閱讀示範。搬動後交替整組反轉，否則
   閱讀示範(paper) 與 購買前的疑問(paper) 會連著兩段同色。現在是：
   1 翻開看看(paper) 2 購買前的疑問(card) 3 全書地圖(paper)
   4 這一版做了什麼(card) 5 翻開看看・內頁(paper) 6 哪裡買(wine)
   🔴 搬區塊與拿掉區塊一樣要重排交替。 */
/* ⚠ 2026-10-18 第三次重排：到達頁多了〈年代履歷〉一段（內頁與購買之間），
   交替要再往後接一格，否則 inside(paper) 會接 lineage(paper) 連著兩段同色。 */
/* 🔴 10-18：以諾要先看〈適合我嗎〉**沒有底色**的樣子，所以這一格暫時改 paper。
   於是 #sample(paper)→#faq(paper)→#map(paper) 連著三段同色——正是上面那條交替規則
   警告的情況。這是暫時狀態，等以諾決定這一區的底色時要一併把交替重排回來。 */
#faq { background: var(--paper); }
#map { background: var(--paper); }
#edition { background: var(--card); }
#inside { background: var(--paper); }
#lineage { background: var(--card); }
.wrap.map { padding: 64px 32px 88px; border-top: 0; }

/* ---------- 10-17 以諾第三／四輪：HERO 縮小、示範區改用〈購買前的疑問〉版式 ----------
   ① HERO 太大有壓迫感。主視覺是滿版構圖（上下都壓到字），**不能裁切**，
      只能等比縮小露出底色；底色同時由 --dark 改成 --wine，露出來的才是酒紅。
   ② 空出來的地方放整頁導航。⚠ 10-18 那一列已移出 hero、改吸頂，見本檔末的 .secnav。 */
.hero { background: var(--wine); }
@media (min-width: 761px) {
  .herofig { padding: 26px 24px 0; }
  .herofig img { max-width: 1040px; margin: 0 auto; }
}

/* ③ 示範區改用與〈購買前的疑問〉相同的骨架：左欄大標、右欄逐列、細橫線分隔。
      .q 下的 em＝那一列在書上的位置（頁碼／出處），比問句小一號、不斜體。 */
/* 🔴 10-18 以諾：桌機留白太多、一直下拉。實測左欄只有 220px 高、卻佔住 300px 寬 ×
   1,356px 長的版面，空白 1,136px；而內容欄被 .qa 的 max-width:720px 卡住，
   只用到版面 65% 寬（692/1056）。兩手一起治：
   ① 左欄收窄並**吸頂跟著走**——空白不再是死的，大標一路陪著讀者
   ② 內容欄解除 720px 上限、標籤欄收窄 ⇒ 正文可用寬度 472 → 約 620px，區塊明顯變短 */
/* 🔴 10-18 第三版（以諾示意圖）：〈內容摘錄〉區塊標題搬到**上方**，
   讓每一列拿到整個版面寬；列內仍是「左標籤／右內容」，不是全部直排。
   實測三種版式（內容寬 → 區塊高）：
     原本  左標題並排＋右窄欄   592 → 1347
     第二版 標題上方＋列內直排   900 → 1498（更長，標題搬上去多了 220px）
     本版  標題上方＋列內左右    約 800 → 見下方量測
   ⚠ 只套用在 #sample；〈適合我嗎〉維持原樣（以諾：先只改內容摘錄）。 */
#sample .cols { flex-direction: column; gap: 4px; }
#sample .head { flex: none; width: auto; position: static; }
#sample .head .h2 { white-space: nowrap; }
#sample .head p { max-width: 640px; }
#sample .qa { max-width: none; border-top: 1px solid var(--rule); }
/* 三欄式（以諾 10-18 示意圖）：左側留白｜標籤右靠且上下置中｜內文
   標籤欄用 var(--lbl) 控制總寬，右靠之後左邊自然形成留白欄，不必真的多一個 div。 */
:root {
  --lbl: 220px;
  /* 小標的刷淡底：左端最深 10%，到右端完全消失。
     10-18 第一版用酒紅實底＋米白字，以諾說「太重太有壓力」⇒ 改成深字＋淡底漸層。 */
  --labelfade: linear-gradient(90deg,
    rgba(46, 18, 20, .10) 0%,
    rgba(46, 18, 20, .05) 50%,
    rgba(46, 18, 20, 0) 100%);
  /* 桌機標籤欄的整欄底色（10-18 以諾示意圖）。**濃度不能沿用手機版的 10%**：
     手機是一條 40px 高的帶子，桌機是整欄滿高（第一列 362px），面積差一個量級。
     取樣以諾的示意圖得 rgb(239,233,228) 疊在頁面底 rgb(250,249,242) 上 ⇒ 約 6%。 */
  --labelbg: rgba(46, 18, 20, .06); }
/* 🔴 上下留白**整個搬進色塊裡**，li 只留 4/4（10-18 以諾指出根因）。
   以諾原話：「目前版本的分格線距離上下間距太大，這是根因」——完全正確。
   li 的 padding 落在 .q 外面，上了底色之後它就一人分飾兩角：
   既是每列內容的上下呼吸，又變成**色塊之間的白溝**。實測他要的樣子間隙 9px，
   當時的現況 37.7px（量兩張圖，以色塊寬恆為 --lbl 220px 反推縮放校正）。
   ⇒ 26/28 移進 .q 與 .a 各自的 padding，li 只留 4/4＋1px 分隔線 ＝ 間隙 9px。
   🔴 **兩欄的 padding-top 必須一樣**，否則標籤與正文的齊頭就破了（4+22 ＝ 原本的 26）。
   ⚠ 總列高完全沒變：4+108+4+1 ＝ 原本的 26+62+28+1 ＝ 117。
      搬的是留白的歸屬，不是份量——所以區塊不會變長，只是欄位帶變連續。 */
#sample .qa li {
  display: flex; gap: 0; align-items: stretch;
  margin: 0; padding: 4px 0;
  border-left: 0; border-bottom: 1px solid var(--rule); }
/* 標籤**齊頭**，不垂直置中（10-18 以諾問到桌機側欄時一併量出來的）。
   置中時標籤會飄在列的中間：第一列列高 417px，「本書正文」懸在 180px 處，
   跟它說明的那段正文第一行完全沒有視覺連線。改 flex-start 之後
   實測前四列的標籤首行與內文首行頂端差 0px，才像一個真正的欄標題。
   盒子仍然 stretch（滿高），只是內容靠頂。
   ⚠ 我原本反對給桌機標籤上底色，理由是「第一列會變成 220×362 的灰柱」——
   以諾的示意圖推翻了它：**那是把每一列單獨看才成立的**。五列的色塊連起來是
   一條縱向的標籤欄（li 的 26/28px padding 落在 .q 之外，自然把色塊切成一段段），
   讀起來是「這一欄是標籤欄」，不是「這塊標籤被框起來」。
   ⇒ 要上底色就必須**整欄都上、而且滿高**；只包文字高度（align-self: flex-start）
      會變成懸在左上角的卡片，那才是真正難看的那一版。 */
#sample .qa .q {
  flex: 0 0 var(--lbl); width: auto; margin: 0; padding: 22px 30px 24px 0;
  display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-end;
  text-align: right; font-size: 21px; background: var(--labelbg); }
/* ⚠ 這 22px 是上面那條「兩欄各加等量 padding-top」的另一半，拿掉就不齊頭了。
   ⚠ **必須排除 .conc**：末列那個米色框有自己的 padding: 18px 22px，
   用 shorthand 蓋下去會把它的左右內距清成 0，文字直接貼上金色左線
   （10-18 踩過，建置全綠、只有版面默默壞掉）。框列改為連左右一起指定。 */
#sample .qa .a { flex: 1 1 0; min-width: 0; max-width: none; }
/* padding-left 的 26px 不是拍出來的：末列那個框的文字左緣距 .a 左緣正好 26px
   （4px 金色左線 ＋ 22px 框內距），以諾 10-18 指名那一列「OK」。
   其餘四列補上同樣的 26px，**五列正文的左緣就落在同一條垂直線上**。
   ⚠ 這段留白要給 .a，不能靠加大 .q 的 padding-right ——
      .q 有底色，它的 padding 會一起上色，加大只會把色塊撐寬。 */
#sample .qa .a:not(.conc) { padding: 22px 0 24px 26px; }
#sample .qa .conc { padding: 22px 22px 24px; }
.sample-qa .q em {
  display: block; margin-top: 8px; font-size: 14px; font-weight: 400;
  color: var(--soft); line-height: 1.6; }
/* 手機（≤860px）：標籤從「右靠的側欄」變成內容上方的一行，
   只剩深紅字壓在米白底上，整頁色階太平（以諾 10-18）。
   ⇒ 改成深底淺字的標頭帶：酒紅底、米白字，標籤靠左、頁碼靠右，
      一眼就分得出「這是哪一段」，也把手機版的色階拉開。 */
@media (max-width: 860px) {
  #sample .qa li { flex-direction: column; gap: 12px; padding: 22px 0 24px; }
  /* 桌機那 22/24 是為了「標籤與正文齊頭」＋「留白進色塊」才加的；
     手機版直排、靠 li 自己的 padding 與 gap 分隔，要歸零。
     ⚠ 同樣要排除 .conc，否則末列那個米色框的內距會被清掉。 */
  #sample .qa .a:not(.conc) { padding: 0; }
  #sample .qa .conc { padding: 18px 22px; }
  /* ⚠ 第一版用整塊酒紅實底＋米白字，以諾看了說「太重太有壓力」。
     改成深色字不變、底色換成由左向右刷淡到透明的漸層——
     色階拉開了，但不會變成三條黑色橫槓壓在頁面上。 */
  #sample .qa .q {
    flex: none; width: auto; align-self: stretch;
    flex-direction: row; align-items: baseline; justify-content: space-between;
    gap: 12px; padding: 9px 14px; text-align: left;
    color: var(--title); border-radius: 4px 0 0 4px;
    background: var(--labelfade);
    font-size: 18px; }
  .sample-qa .q em {
    display: inline; margin-top: 0; flex: none;
    color: var(--soft); font-size: 13px; font-style: normal; }
}

/* 內容框一律用 .qa 自己的 .a（16px、無底色無框線）。
   ⚠ 10-17 踩過：這裡原本沿用舊版的 .verse／.scripture／.booktext，
   那三個帶著白底圓角框與 20px 行高 2.0，放進 .qa 的列裡整個爆掉。
   ⚠ 10-18 再踩一次：換版式時用錨點切範圍，把下面這五條一起刪掉了
   （節號、經文出處、譯註詞目、灰括號、體例提示），建置不會報錯、只是樣式默默消失。 */
.sample-qa .a > p { margin: 0 0 10px; }
.sample-qa .a > p:last-child { margin-bottom: 0; }
.sample-qa .vn {
  margin-right: 6px; font-size: 13px; font-weight: 700; color: var(--title); vertical-align: 2px; }
.sample-qa .ref { margin-right: 8px; color: var(--title); }
.sample-qa .lem { display: block; margin-bottom: 4px; color: var(--title); }
/* 收合列（10-18）：〈回到聖經〉與〈參考附錄〉預設收起，摘要那一句直接從內容切出來。
   用原生 <details>：沒有 JS 也能展開、CSP 不必放寬、鍵盤與螢幕報讀器天生支援。 */
#sample .fold > summary {
  cursor: pointer; list-style: none;
  display: flex; gap: 10px; align-items: flex-start;
  color: var(--soft); line-height: 1.9; }
#sample .fold > summary::-webkit-details-marker { display: none; }
#sample .fold > summary:hover { color: var(--title); }
#sample .fold > summary:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
#sample .fold .chev {
  flex: none; width: 15px; height: 15px; margin-top: .45em; color: var(--sub);
  transition: transform .18s ease; }
#sample .fold[open] .chev { transform: rotate(90deg); }
#sample .fold[open] > summary { margin-bottom: 12px; color: var(--title); }
#sample .foldbody { animation: foldin .18s ease; }
@keyframes foldin { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  #sample .fold .chev { transition: none; }
  #sample .foldbody { animation: none; }
}

.sample-qa .mk { color: #a89a94; font-weight: 700; }
.sample-qa .mk-hint {
  margin: 14px 0 0; padding-top: 12px; border-top: 1px dashed var(--rule);
  color: var(--soft); font-size: 14px; line-height: 1.8; }

/* ④ 附錄列最上端的出處行（以諾指定：加大、前加長橫線、頁碼接在句子後面） */
.appx-src {
  display: flex; align-items: center; gap: 14px; margin: 0 0 14px;
  font-size: 18.5px; font-weight: 700; color: var(--title); }
.appx-src::before {
  content: ""; flex: none; width: 52px; height: 2px; background: var(--gold); }
.appx-src .pg { font-size: 15px; font-weight: 400; color: var(--soft); }
.sample-qa .appx p + p { line-height: 1.95; text-align: justify; text-justify: inter-ideograph; }

/* ⑤ 「讀完後我能知道」——整段示範看完才說的那一句 */
.sample-qa .conc {
  padding: 18px 22px; background: var(--card);
  border-left: 4px solid var(--gold); border-radius: 0 6px 6px 0; }
.sample-qa .conc p { font-size: 17px; line-height: 1.95; color: var(--title); }

/* ---------- 〈適合我嗎〉改用與〈內容摘錄〉相同的側欄式版面（10-18 以諾）----------
   以諾先要「只搬版式、底色先拿掉，排出來一次看過再決定」；看過之後定案
   「Q&A 的 css 可以，除了 Q 的欄位沒有上底色之外」⇒ 標籤欄補上與〈內容摘錄〉
   同一個 --labelbg。區塊自身的底色仍是暫時的 paper，見上面交替那段的紅字。
   這一區原本吃的是 style.css 的基礎 .qa 規則，跟 #sample 差六處，逐條覆蓋：
     ① 大標在左欄 300px      → 搬到上方，列表拿到整個版面寬
     ② .qa 卡在 max-width:720px → 解除
     ③ li 是 flex-start      → stretch（色塊化的前提，將來要上底色才有整欄）
     ④ li 的 22/24 留白在列上 → 搬進 .q 與 .a，li 只留 4/4（間隙 9px）
     ⑤ 標籤靠左 200px、18px  → 靠右 var(--lbl)、21px，與〈內容摘錄〉同一條垂直線
     ⑥ 答案貼著標籤欄        → padding-left:26px，正文左緣與〈內容摘錄〉對齊
   🔴 兩欄的 padding-top 必須相等，否則標籤與答案的齊頭會破（4+22 ＝ 原本的 26）。 */
#faq .cols { flex-direction: column; gap: 4px; }
#faq .head { flex: none; width: auto; position: static; }
#faq .head .h2 { white-space: nowrap; }
#faq .head p { max-width: 640px; }
#faq .qa { max-width: none; border-top: 1px solid var(--rule); }
#faq .qa li {
  display: flex; gap: 0; align-items: stretch;
  margin: 0; padding: 4px 0;
  border-bottom: 1px solid var(--rule); }
#faq .qa .q {
  flex: 0 0 var(--lbl); width: auto; margin: 0; padding: 22px 30px 24px 0;
  display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-end;
  text-align: right; font-size: 21px; background: var(--labelbg); }
#faq .qa .a { flex: 1 1 0; min-width: 0; padding: 22px 0 24px 26px; }
/* 答案分成兩段時，.a 是個 div（見 build.py 的 qa_answer）。
   段落自己的 margin 要歸零，段與段之間才由這裡統一控制。 */
#faq .qa .a > p { margin: 0; }
#faq .qa .a > p + p { margin-top: 1.1em; }

/* 〈適合我嗎〉的手機版，比照〈內容摘錄〉直排＋刷淡底色。
   🔴 這一段**必須寫在上面那組 #faq 桌機規則之後**：媒體查詢不增加權重，
   同權重時後寫的贏。10-18 踩過——原本放在前面那個 ≤860px 區塊裡，
   於是 375px 下 li 的 padding 與 .a 的左內距全被後面的桌機值蓋回去。
   ⚠ 斷點一併從 760 改成 860：兩區現在是同一套側欄版式，FAQ 若還留在 760，
      761–860px 之間會變成〈內容摘錄〉已直排、〈適合我嗎〉還是側欄。 */
@media (max-width: 860px) {
  #faq .qa li { flex-direction: column; gap: 12px; padding: 22px 0 24px; }
  #faq .qa .a { padding: 0; }
  #faq .qa .q {
    flex: none; width: auto; align-self: stretch;
    flex-direction: row; align-items: baseline; justify-content: space-between;
    gap: 12px; padding: 9px 14px; text-align: left;
    color: var(--title); border-radius: 4px 0 0 4px;
    background: var(--labelfade);
    font-size: 18px; }
}

/* ---------- 區塊大標 .h2 ----------
   原本 36px、沒有任何收尾，和下面的導言黏在一起。
   現在：40px 粗體，底下一條細線，左端一段酒紅粗線——與 sources 頁的 h2.dual 同一個收尾。 */
.h2 {
  position: relative; padding-bottom: 16px; border-bottom: 1px solid var(--rule);
  font-size: 40px; font-weight: 800; line-height: 1.25; letter-spacing: .02em; }
.h2::after {
  content: ""; position: absolute; left: 0; bottom: -1px; width: 76px; height: 4px;
  background: var(--title); border-radius: 2px; }

/* 大標底下的導言：多了一條線，往下推一點 */
.sec-head p.lead { margin-top: 18px; }
#faq .head p, #sample .head p { margin-top: 18px; }

/* 深色購買區：酒紅線在酒紅底上看不見，細線改米白半透明、粗線改金色 */
#buy.ondark .h2 { border-bottom-color: rgba(251,249,244,.25); }
#buy.ondark .h2::after { background: var(--gold); }

/* ---------- 首屏：兩欄改單欄（以諾 10-16）----------
   原本橫幅底下是「導言｜規格清單」兩欄；規格清單整組搬到購買區的 specrow，
   這裡只留導言、狀態、按鈕、QR 提示，一欄到底。 */
.hero-b { display: flex; flex-direction: column; align-items: flex-start; gap: 0; }
/* ⚠ 這一條後載入，會蓋過 style.css 的 .hero .lead——改字級要改這裡。 */
.hero .lead { max-width: 780px; font-size: 16px; line-height: 1.95; color: var(--on-dark); }
.hero .state { margin-top: 26px; }

/* ---------- 三套閱讀工具：三張等高卡片（以諾 10-16）----------
   原本數字卡 34px 搶走焦點、三欄沒有框、「01・正文」13px 太小。
   現在：八個數字降成一排細長數據列（24px）；三套工具各一張白底卡片，
   卡片眉標是酒紅底白字的編號章＋類別名，和 sources 頁的 01–05 同一個語言；實例改成卡片內的淺色區塊。 */
.stats {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px 28px;
  margin: 0 0 40px; padding: 14px 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.stat {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px;
  padding: 4px 0; background: none; border: 0; border-radius: 0; }
.stat b { font-size: 24px; line-height: 1.2; }
.stat span { margin: 0; font-size: 13.5px; line-height: 1.5; }

.tools { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.tool {
  display: flex; flex-direction: column; gap: 14px; box-sizing: border-box; padding: 26px 26px 24px;
  background: var(--white); border: 1px solid var(--rule); border-radius: 8px; }
.tool-k {
  margin: 0; display: flex; align-items: center; gap: 10px;
  color: var(--sub); font-size: 15px; font-weight: 700; letter-spacing: .14em; }
.tool-k b {
  padding: 2px 9px 2px 10px; border-radius: 3px; background: var(--title); color: var(--paper);
  font-size: 13px; font-weight: 700; letter-spacing: .12em; line-height: 1.5; }
.tool h3 { margin: 0; color: var(--title); font-size: 24px; line-height: 1.35; font-weight: 700; }
.tool > p { margin: 0; font-size: 15.5px; line-height: 1.85; }
.tool .ex { margin-top: auto; border: 0; background: var(--card); border-radius: 6px; padding: 16px 18px; }

/* 購買區規格列：多了「英譯・編校」「中文編譯」「上市」，標籤欄加寬 */
.specrow dt { width: 6.4em; white-space: nowrap; }

/* ---------- 760px 以下 ---------- */
@media (max-width: 760px) {
  .kicker { font-size: 15px; }
  .wrap.map { padding: 48px 20px 64px; }
  #sample .head { width: auto; }
  #sample .cols { gap: 28px; }
  #faq .cols { gap: 28px; }
  /* 10-18 以諾：手機版主視覺與下文貼太近。圖是滿版貼邊的直式書影，
     32px 的上留白被大字導言吃掉，看起來像黏在一起 ⇒ 上下都加大，讓它有呼吸。 */
  .hero-b { padding-top: 56px; padding-bottom: 52px; }
  .hero .lead { font-size: 15px; }
  .hero .state { margin-top: 26px; }
  .hero .cta { margin-top: 30px; }
  .hero .qr-note { margin-top: 14px; }   /* 10-25 第三版：緊貼按鈕下方的說明小字 */
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px 16px; margin-bottom: 32px; }
  .stat b { font-size: 22px; }
  .tools { grid-template-columns: 1fr; gap: 16px; }
  .tool { padding: 22px 20px 20px; }
  .specrow dt { width: 6.2em; }
  .h2 { font-size: 31px; padding-bottom: 12px; }
  .h2::after { width: 56px; }
}

/* 〈適合我嗎〉手機版的刷淡底色原本獨立寫在 ≤760px（因為那時它還是 200px 的側欄
   版式、860 才直排的只有〈內容摘錄〉）。10-18 兩區版式統一之後，
   這一段已併入上面的 ≤860px 區塊，不再需要單獨的斷點。 */