:root{
  --paper:#f0e7d2; --paper-2:#e7dbc2; --card:#f7f0df;
  --ink:#241d12; --ink-soft:#463c29; --ink-faint:#6d6047;
  /* --gold 2026-08-16 由 #9c7628 壓暗到 #836322；2026-08-17 再壓到 #7b5b1a。
     後者的理由:#836322 在 --paper 上是 4.52(剛好過),但 `.pay-row.pay-fiat` 的底是 --paper-2,
     在那裡只有 4.06。守門驗的背景與它實際被用的背景不同,所以量到一個不存在的通過。
     #7b5b1a 在 paper/paper-2/card 三種底上分別是 5.09 / 4.57 / 5.51。
     ⚠ --bear-rim 剛好也是 #836322,那是熊放大鏡的品牌色不是文字色 —— 不要一起改。
     原註:它被當【文字色】用在 11 處
     （`.apinote`、`.ansnote` 是 12px —— 都算小字），
     舊值在 --paper 上只有 3.39:1、在 --card 上 3.67:1，兩者都達不到 WCAG AA 的 4.5:1。
     新值：4.52 / 4.89。它同時也用在邊框與 --tint-gold 底色上，非文字只需 3:1，仍過。
     ★只壓亮度，色相不動。守門：test/contrast.test.mjs 會重算，退回去就紅。 */
  --oxblood:#973421; --oxblood-2:#b24029; --olive:#4b5836; --gold:#7b5b1a;
  --line:#cebd97; --line-strong:#b9a577; --line-warm:#9c8862;
  --btn-fg:#f7efdf;   /* ★硬化:深底按鈕/選單淺色文字·統一(原 #f7efdf/#f6efdc 混用) */
  --tint-olive:#f3f6ea; --tint-gold:#faf1dc; --tint-oxblood:#faeee6;   /* ★方案卡色塊 tint */
  --tint-olive-bd:#b6c39a; --tint-gold-bd:#d8b978; --tint-oxblood-bd:#c98a72;   /* ★方案卡邊框(配 tint) */
  --olive-2:#3c4a2c;   /* 深橄欖 hover(對稱 --oxblood-2) */
  --card-2:#efe3cd;    /* 較深暖卡(漸層底/成本框) */
  --surface-hi:#ffffff; /* 提升面:答案卡/方案卡純白 */
  --btn-fg-soft:#e6dcc2; /* 深底上的次級淺文字 */
  --seal-a:#bd5238; --seal-b:#832f1e; --seal-fg:#f4e6c8;   /* 蠟印裝飾(單一元件) */
  --focus:var(--oxblood);   /* ★a11y:鍵盤焦點環色 */
  --r-sm:8px; --r:10px; --r-md:12px; --r-lg:14px; --r-pill:999px;   /* ★圓角尺度 */
  --shadow:0 1px 0 rgba(255,255,255,.6), 0 22px 46px -30px rgba(60,48,28,.55);
  --display:"Baloo 2","LXGW WenKai TC","Zen Maru Gothic","Tajawal",system-ui,sans-serif;
  --body:"Nunito","LXGW WenKai TC","Zen Maru Gothic","Tajawal",system-ui,sans-serif;
  --mono:"Spline Sans Mono",ui-monospace,monospace;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
/* ── a11y:鍵盤可見焦點環(只在鍵盤操作 :focus-visible 才出現,滑鼠點擊不受影響) ── */
button:focus-visible,a:focus-visible,summary:focus-visible,select:focus-visible,[tabindex]:focus-visible,label:focus-visible{outline:2.5px solid var(--focus); outline-offset:2px; border-radius:var(--r-sm)}
input:focus-visible,textarea:focus-visible{outline:2px solid var(--focus); outline-offset:1px}
/* ── a11y:尊重「減少動態」系統偏好 ── */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important}
}
body{margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--body); font-size:19px; line-height:1.62; font-weight:420;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  background-image:repeating-linear-gradient(to bottom, transparent 0 39px, rgba(151,52,33,.028) 39px 40px);}
body::before{content:""; position:fixed; inset:0; pointer-events:none; z-index:1; opacity:.4; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.28'/%3E%3C/svg%3E");}
.wrap{position:relative; z-index:2; max-width:1080px; margin:0 auto; padding:0 28px}
[dir=rtl] .hero-aside{border-left:none; border-right:1px solid var(--line-strong); padding-left:0; padding-right:28px}

/* ── language switch (shared) ── */
.langwrap{position:relative; display:inline-flex; align-items:center}
.langwrap .globe{position:absolute; left:14px; font-size:15px; pointer-events:none; color:var(--btn-fg)}
select#lang{appearance:none; -webkit-appearance:none; font-family:var(--display); font-weight:600; font-size:15px;
  letter-spacing:.02em; color:var(--btn-fg); background:var(--ink); border:2px solid var(--ink);
  border-radius:999px; padding:9px 40px 9px 38px; min-height:44px; cursor:pointer; transition:background .16s, border-color .16s; box-shadow:0 6px 16px -8px rgba(36,29,18,.7)}
select#lang:hover{background:var(--oxblood); border-color:var(--oxblood)}
.langwrap .caret{position:absolute; right:15px; pointer-events:none; color:var(--btn-fg); font-size:11px}
.price-seal{font-family:var(--display); font-weight:600; font-size:12px; letter-spacing:.04em; text-transform:uppercase;
  color:var(--oxblood); border:2px solid var(--oxblood); border-radius:999px; padding:7px 15px; transform:rotate(-2deg); white-space:nowrap}

/* ── masthead ── */
/* ★★2026-08-23 position/z-index 不是裝飾 —— 沒有它，頁首的下拉選單會被下一區塊蓋住。
   【根因】.mast 有 `rise` 進場動畫 ⇒ transform 建立了新的【堆疊脈絡】，
     選單的 z-index 被關在 .mast 裡面，而 .subrule 是它的兄弟、DOM 在後面 ⇒ 永遠蓋過來。
     ⛔ 這種時候把選單的 z-index 調到 999 也沒用 —— 實測過。 */
header.mast{position:relative; z-index:20;
  border-bottom:2px solid var(--line-warm); margin-top:24px; padding-bottom:14px;
  display:flex; align-items:flex-end; justify-content:space-between; gap:16px; flex-wrap:wrap}
.mast .edition{font-family:var(--display); font-weight:600; font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-soft)}
/* min-height:44px —— 字大不等於好點:line-height .9 讓這個連結在 375px 只有 31px 高 */
.mast .bearmark{font-family:var(--display); font-weight:700; font-size:clamp(34px,6.2vw,58px); line-height:.9; display:flex; align-items:center; gap:.24em; color:var(--ink); text-decoration:none; min-height:44px}
.mast .bearmark .glyph{font-size:.82em}
.mast .bearmark em{font-style:normal; color:var(--oxblood)}
/* ★2026-08-23 主題音樂開關。⛔ 預設關；.nomusic = 音檔還沒安裝（誠實提示） */
/* ★2026-08-23 音樂選單：5 首 + 【關閉排第一項】（老闆：關閉路徑要在明顯處） */
.musicwrap{position:relative}
.musicmenu{position:absolute; top:calc(100% + 8px); right:0; z-index:30; min-width:190px;
  background:var(--card); border:1.5px solid var(--line-strong); border-radius:12px;
  box-shadow:0 10px 30px -12px rgba(36,29,18,.55); padding:6px; display:flex; flex-direction:column; gap:2px}
.musicmenu[hidden]{display:none}
.musicmenu .mm-item{min-height:40px; text-align:left; padding:9px 12px; border:none; border-radius:8px;
  background:transparent; color:var(--ink); font-family:var(--body); font-size:14px; cursor:pointer;
  transition:background .14s, color .14s}
.musicmenu .mm-item:hover,.musicmenu .mm-item:focus-visible{background:var(--paper-2); color:var(--oxblood)}
.musicmenu .mm-item[aria-checked="true"]{font-weight:700; color:var(--oxblood)}
/* ★關閉那一項給它自己的視覺分量 —— 它是使用者最需要找得到的東西 */
.musicmenu .mm-off{border-bottom:1px dashed var(--line-warm); border-radius:8px 8px 0 0; margin-bottom:4px}
.musicbtn{min-width:44px; min-height:44px; border-radius:999px; cursor:pointer;
  border:1.5px solid var(--line-warm); background:var(--paper); color:var(--ink);
  font-size:17px; line-height:1; transition:background .16s, border-color .16s, color .16s}
.musicbtn:hover,.musicbtn:focus-visible{border-color:var(--oxblood); color:var(--oxblood)}
.musicbtn[aria-pressed="true"]{background:var(--oxblood); border-color:var(--oxblood); color:var(--btn-fg)}
.musicbtn.nomusic{opacity:.5; cursor:not-allowed}
.mast .right{display:flex; align-items:center; gap:14px; flex-wrap:wrap}
.subrule{display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; font-family:var(--display); font-weight:500; font-size:12px;
  letter-spacing:.1em; text-transform:uppercase; color:var(--ink-soft); border-bottom:1px solid var(--line); padding:9px 0}

/* ── compact top bar (ask page) ── */
.topbar{display:flex; align-items:center; justify-content:space-between; gap:16px; margin-top:22px; padding-bottom:14px; border-bottom:2px solid var(--line-warm); flex-wrap:wrap}
/* ★.topbar 自己會換行,但右側這一組(語言選單 154px + 價格印記)是另一個 flex 容器,
   不給它 wrap 的話它會撐成 408px —— 375px 手機上整頁橫向捲動(2026-08-16 實測)。
   ★這條規則原本寫在 ask.html 的 style 屬性裡,行內樣式蓋得過樣式表,所以必須搬過來才生效。 */
.topbar .right{display:flex; align-items:center; gap:14px; flex-wrap:wrap; justify-content:flex-end}
/* 觸控目標:回首頁連結要有 44px 可點高度(字體 line-height .9 讓它只剩 39px) */
.topbar .home{font-family:var(--display); font-weight:700; font-size:clamp(24px,4vw,34px); color:var(--ink); text-decoration:none; display:flex; align-items:center; gap:.28em; min-height:44px}
.topbar .home em{font-style:normal; color:var(--oxblood)}
.topbar .home:hover em{color:var(--oxblood-2)}

/* ── case dossier ── */
.casefile{padding:36px 0 8px}
.casefile .label{font-family:var(--display); font-weight:600; font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--olive)}
.casefile .caseq{font-family:var(--display); font-weight:700; font-size:clamp(32px,5vw,56px); line-height:1.1; color:var(--ink); margin:.16em 0 .18em}
.casefile .caseref{font-family:var(--mono); font-size:13px; color:var(--ink-faint); letter-spacing:.02em}

/* status timeline */
.timeline{display:flex; gap:0; margin:22px 0 6px; flex-wrap:wrap}
.timeline .step{flex:1; min-width:96px; position:relative; padding:0 4px}
.timeline .dot{width:14px; height:14px; border-radius:50%; border:2px solid var(--line-warm); background:var(--paper); margin-bottom:9px}
.timeline .step.done .dot{background:var(--olive); border-color:var(--olive)}
.timeline .step.active .dot{background:var(--oxblood); border-color:var(--oxblood); box-shadow:0 0 0 4px rgba(151,52,33,.16)}
.timeline .step:not(:last-child)::after{content:""; position:absolute; top:6px; left:calc(50% + 10px); right:calc(-50% + 10px); height:2px; background:var(--line-warm)}
.timeline .step.done:not(:last-child)::after{background:var(--olive)}
[dir=rtl] .timeline .step:not(:last-child)::after{left:auto; right:calc(50% + 10px)}
.timeline .st{font-family:var(--display); font-weight:600; font-size:12px; text-transform:uppercase; letter-spacing:.05em; color:var(--ink-faint)}
.timeline .step.done .st,.timeline .step.active .st{color:var(--ink)}

/* ── hero (landing) ── */
.hero{padding:54px 0 40px; display:grid; grid-template-columns:1.1fr .9fr; gap:44px; align-items:start}
.hero h1{font-family:var(--display); font-weight:700; font-size:clamp(46px,7.2vw,90px); line-height:1.04; letter-spacing:-.01em; margin:.02em 0 .32em; color:var(--ink)}
/* 螢光筆底線。★2026-08-15 改寫:原本是
     background:linear-gradient(transparent 58%, rgba(156,118,40,.45) 58% 94%, transparent 94%)
   —— 那個 58%/94% 是照【Latin 字】的 x-height 與 descender 抓出來的百分比,
   而百分比量的是「行框」不是「字的墨跡」。CJK 字在 em box 裡的落點與 Latin 不同,
   於是同一條帶在 zh／ja 版首頁【整條掉到字的下面】,變成一塊懸空的土黃色方塊
   (實測見 docs/技術坑與策略.md §1.13c;en/es/pt/fr/de/ar 正常,只有 CJK 壞)。

   ⇒ 不再自己算百分比,改用 text-decoration:瀏覽器會依【該字型自己的基線與度量】決定位置,
     八種語言、任何字型 fallback 都各自對齊,不必逐語言調參數。
     · thickness 用 em → 跟著 font-size 縮放(標題 clamp 46→90px 都成立)
     · 負的 underline-offset → 線往上壓進字身,做出螢光筆而非底線的效果
     · skip-ink:none → 不讓瀏覽器在 descender(g/y/p)處斷開色帶,否則會變虛線
   ★不要「順手」改回漸層:那等於把 Latin 的度量硬套到所有語言上。 */
.hero h1 .u{
  text-decoration-line:underline;
  text-decoration-color:rgba(156,118,40,.45);
  text-decoration-thickness:.36em;
  text-underline-offset:-.20em;   /* 實測值(見下);字型預設附近的 -.08em 只擦到字底,不像螢光筆 */
  text-decoration-skip-ink:none;
  padding:0 .05em;
}
/* ★CJK 仍要單獨校準,但原因與原本那條漸層【不同】,別把兩件事混為一談:
     · 漸層版錯在「拿行框百分比冒充字的位置」—— 那是我方自己算錯。
     · 改用 text-decoration 後,位置改由【字型自己宣告的 underline position】決定,機制是對的;
       但 CJK 字型(本站 CJK 走 "LXGW WenKai TC")普遍把底線放得很低 ——
       它們要替注音/ruby 與較大的 descent 留空間。所以照字型走,底線仍落在字的【下方】。
   ⇒ 這不是字型的 bug,是 CJK 排版慣例;要做「螢光筆」就必須主動把它壓進字身。
   ★兩邊都是【在產線 90px 標題上目視實測】出來的,不是算的:
     · Latin  -.08em 只擦到字底 → 取 **-.20em**(壓在字身下半部)
     · CJK    -.20em 仍在字下方 → 取 **-.30em**
   ⇒ 差距就是 CJK 字型多留的那段空間。改字型的話這兩個值要重測(目視即可,不必算)。 */
/* ═══ ★★2026-08-23 長詞語言（俄/德）的排版修正 ═══
   【量到的】在 1280px 寬度下（Chrome 實量，非估算）：
     品牌寬  CJK 174px / 拉丁 326px / 俄 637px（3.7 倍）
       ⇒ 只有俄文把頁首擠成兩行（92 → 154px），語言鈕與問診鈕掉行。
     英雄標題高  中文 281px / 多數 468px / 俄德 562px（2 倍）
       ⇒ 右欄被留在上方，右下出現一大塊空白。
   ⛔ 不可只調全域字級 —— 那會把 CJK 也縮掉，而 CJK 本來剛好。
   ★ 用 :lang()（本檔 136–138 行已在用這個模式），html lang 由 setLang() 設定。
   ⛔ 這一類【沒有自動閘】：量的是真瀏覽器的版面尺寸，
     而本專案是零建置、沒有 headless 瀏覽器。新增語言時【必須人工看一次】。 */
:lang(ru) .mast .bearmark{ font-size:clamp(24px,4.0vw,38px) }
:lang(ru) .hero h1,
:lang(de) .hero h1{ font-size:clamp(34px,5.0vw,62px) }

:lang(zh) .hero h1 .u,
:lang(ja) .hero h1 .u,
:lang(ko) .hero h1 .u{ text-underline-offset:-.30em; }
.hero h1 em{font-style:normal; color:var(--oxblood)}
.lede{font-size:22px; color:var(--ink-soft); max-width:36ch; line-height:1.62; font-weight:500}
.lede em{font-style:italic; color:var(--oxblood); font-weight:700}
.hero-aside{border-left:1px solid var(--line-strong); padding-left:28px; font-size:16px}
.hero-aside .kicker{font-family:var(--display); font-weight:600; font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--olive); margin-bottom:14px}
.hero-aside ul{list-style:none; margin:0; padding:0}
.hero-aside li{padding:13px 0; border-bottom:1px dashed var(--line-strong); display:flex; gap:14px; align-items:baseline}
.hero-aside li b.n{font-family:var(--display); font-weight:700; font-size:15px; color:var(--oxblood); min-width:24px}
.hero-aside li span{color:var(--ink-soft); font-size:16px; line-height:1.5; font-weight:460}
.hero-aside li span b{color:var(--ink); font-weight:700} .hero-aside li span b.red{color:var(--oxblood)}

/* ── console ── */
.console{margin:8px 0 6px; border:2px solid var(--line-warm); border-radius:14px; background:linear-gradient(180deg,var(--card),var(--card-2)); box-shadow:var(--shadow); position:relative}
.console::after{content:attr(data-label); position:absolute; top:-11px; left:22px; background:var(--paper); font-family:var(--display); font-weight:600; font-size:12px; letter-spacing:.1em; padding:0 9px; color:var(--ink-soft); text-transform:uppercase}
.console form{display:flex; gap:0; align-items:stretch; padding:13px}
.console input[type=text]{flex:1; min-width:0; border:none; background:transparent; font-family:var(--body); font-weight:500; font-size:21px; color:var(--ink); padding:11px 10px; outline:none}
.console input::placeholder{color:var(--ink-faint); font-weight:460}
/* ★2026-07-30(§12.48):原有 `.console button` 三條是給表單內那顆單一查證鈕的,
   該鈕已依下方註解的原始設計由兩顆分流 CTA 取代 → 規則一併移除。
   ★留著會反咬:`.console button` 的 specificity(0,1,1) 高過 `.paycta-btn`(0,1,0),
   會把 padding 與 border-radius 蓋回去,兩顆 CTA 就長歪。 */
/* ★首頁付款分流 CTA:兩顆(加密全方案/法幣方案3起)取代單一查證鈕 */
.paycta{display:flex; gap:10px; padding:0 13px 14px; flex-wrap:wrap}
.paycta-btn{flex:1; min-width:190px; min-height:52px; display:inline-flex; align-items:center; justify-content:center; gap:9px; border-radius:var(--r); font-family:var(--display); font-weight:700; font-size:16px; cursor:pointer; transition:background .16s, filter .16s}
.paycta-btn .pcb-ic{font-size:17px}
/* ★★2026-08-23 兩顆 CTA 常態同色。
   原本 crypto 實心、fiat 描邊 —— 那個主次階層是「法幣最低方案3」時代的殘影，
   而那條限制本輪已經移除，兩條軌現在是【對等選擇】。 */
.paycta-btn.pcb-crypto,.paycta-btn.pcb-fiat{
  border:1.5px solid var(--olive); background:var(--olive); color:var(--btn-fg);
  transition:background .18s, border-color .18s, color .18s, box-shadow .18s;
}
/* hover：換成品牌紅 + 持續呼吸光暈（游標離開即停）。 */
/* ★★2026-08-23(修正) 老闆要的是【紅光在閃】不是【變成紅色】。
   ⇒ 底色維持橄欖綠；閃的是外框與光暈。
   ★ 邊框顏色也要跟著脈動 —— 只閃光暈而邊框定色，讀起來像【變了一個狀態】，
     兩者同時脈動才讀得出是【在閃】。 */
@keyframes tb-glow{
  0%,100%{background:var(--olive);   border-color:var(--olive);
          box-shadow:0 0 0 0 rgba(151,52,33,0), 0 0 6px 0 rgba(151,52,33,.15)}
  50%    {background:var(--oxblood); border-color:var(--oxblood);
          box-shadow:0 0 0 6px rgba(151,52,33,.30), 0 0 28px 5px rgba(151,52,33,.75)}
}
.paycta-btn.pcb-crypto:hover,.paycta-btn.pcb-fiat:hover,
.paycta-btn.pcb-crypto:focus-visible,.paycta-btn.pcb-fiat:focus-visible{
  /* ⛔ 底色不換成紅的 —— 紅是【閃出來】的光，不是新的狀態色。 */
  animation:tb-glow 1.05s ease-in-out infinite;
}
.hint{font-family:var(--body); font-weight:500; font-size:14px; color:var(--ink-soft); margin:12px 4px 0; display:flex; gap:22px; flex-wrap:wrap}
.hint b{color:var(--olive); font-weight:700}

/* ── results ── */
#out{margin:20px 0 10px}
.panel{border:1.5px solid var(--line-strong); border-radius:12px; background:var(--card); padding:18px 20px; margin-bottom:16px; animation:rise .5s both}
.panel .tag{font-family:var(--display); font-weight:600; font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--olive)}
.panel h3{font-family:var(--display); font-weight:700; font-size:27px; margin:.15em 0 .35em; line-height:1.16; color:var(--ink)}
.chiprow{display:flex; gap:8px; flex-wrap:wrap; margin:6px 0}
.chip{font-family:var(--body); font-weight:600; font-size:13px; padding:4px 11px; border:1.5px solid var(--line-strong); border-radius:999px; color:var(--ink-soft); background:var(--paper)}

/* ★2026-07-30(§12.48)移除 `.tiers`/`.tier*`(24 條)與 `.confirm*`(9 條)兩塊 ——
   它們的唯一產生者是舊方案選擇流程 confirmAct/renderTiers/tierCard,那三支已確認不可達並刪除
   (`class="tiers"`/`class="tier `/`class="pick` 全 repo 只出現在那座死島內)。
   活的方案 UI 走 `plancard` 那條線,樣式在下方 `.plancard*`。 */
/* ★2026-07-30:原本這五條掛在 `.confirm-input` 之下,但那個 class 從未出現在任何 HTML/JS
   (舊版二次確認流程已被 rf-/gap- 流程取代,容器連著一起消失)。
   結果:app.js 現行五處 `.ci-row` 輸入框拿到瀏覽器預設樣式、連 flex 版面都沒有。
   改為直接掛 `.ci-row`(它才是實際出現在 DOM 的 class)。
   ★不會波及 prepay-preview.html 的 `.cartitems .ci-row`——那頁不載入本檔。 */
.ci-row{display:flex; gap:8px; margin-top:12px}
.ci-row input{flex:1; min-width:0; border:2px solid var(--line-warm); border-radius:10px; background:var(--paper); font-family:var(--body); font-weight:500; font-size:17px; padding:11px 13px; color:var(--ink); outline:none}
.ci-row input:focus{border-color:var(--oxblood)}
.ci-row button{border:none; border-radius:10px; background:var(--ink); color:var(--paper); font-family:var(--display); font-weight:700; font-size:16px; padding:0 20px; cursor:pointer; white-space:nowrap}
.greybox{border:1.5px dashed var(--line-warm); border-radius:12px; padding:14px 16px; margin:14px 0; background:rgba(75,88,54,.06)}
.greybox .tag{color:var(--olive)}
.plats{display:flex; gap:8px; flex-wrap:wrap; margin:10px 0}
.plats label{font-family:var(--body); font-weight:600; font-size:13px; border:1.5px solid var(--line-strong); border-radius:999px; padding:6px 12px; cursor:pointer; color:var(--ink-soft)}
.plats input{margin-right:6px}
.greybox input[type=text]{width:100%; border:1.5px solid var(--line-strong); border-radius:8px; background:var(--paper); font-family:var(--body); font-size:17px; padding:10px 12px; margin-top:4px; color:var(--ink)}

.cert{border:2px solid var(--line-warm); border-radius:14px; background:var(--card); padding:26px 26px 22px; position:relative; box-shadow:var(--shadow); animation:rise .5s both}
.cert .certtag{font-family:var(--display); font-weight:700; font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:var(--oxblood)}
.cert .prose{font-family:var(--display); font-weight:600; font-size:clamp(22px,3vw,30px); line-height:1.32; margin:12px 0 16px; color:var(--ink)}
.cert .meta{font-family:var(--mono); font-size:12px; color:var(--ink-soft); line-height:1.8; word-break:break-word}
.cert .meta b{color:var(--olive); font-family:var(--display); font-weight:600}
.waxseal{position:absolute; right:20px; bottom:16px; width:76px; height:76px; border-radius:50%; background:radial-gradient(circle at 38% 34%, var(--seal-a), var(--seal-b) 70%); color:var(--seal-fg); display:grid; place-items:center; text-align:center; font-family:var(--display); font-weight:600; font-size:11px; letter-spacing:.04em; line-height:1.35; transform:rotate(-10deg); box-shadow:0 6px 14px -6px rgba(131,47,30,.75), inset 0 2px 6px rgba(255,255,255,.22); animation:press .45s .1s both}
.waxseal .h{font-size:11px; font-weight:700}
.idk{border-color:var(--olive)} .idk .certtag{color:var(--olive)}

.pay-rows{display:flex; gap:12px; flex-wrap:wrap; margin:14px 0}
.pay-btn{display:inline-block; text-decoration:none; border:2px solid var(--oxblood); border-radius:10px; background:var(--oxblood); color:var(--btn-fg); font-family:var(--display); font-weight:700; font-size:15px; padding:13px 22px; transition:background .16s, box-shadow .2s, transform .16s}
.pay-btn:hover{background:var(--oxblood-2)}
.pay-btn.card{background:var(--paper); color:var(--ink); border-color:var(--line-warm)}
.pay-btn.card:hover{border-color:var(--olive); color:var(--olive)}
.pay-token{display:flex; gap:8px; margin:12px 0 4px}
.pay-token input{flex:1; min-width:0; border:2px solid var(--line-warm); border-radius:10px; background:var(--paper); font-family:var(--mono); font-size:14px; padding:11px 13px; color:var(--ink); outline:none}
.pay-token input:focus{border-color:var(--oxblood)}
.pay-token button{border:none; border-radius:10px; background:var(--ink); color:var(--paper); font-family:var(--display); font-weight:700; font-size:14px; padding:0 20px; cursor:pointer}
.costlead{font-family:var(--display); font-weight:700; font-size:17px; line-height:1.4; color:var(--ink); background:var(--card-2); border:2px solid var(--line-warm); border-radius:12px; padding:12px 14px; margin:12px 0 6px}
.costsafe{color:var(--olive); font-weight:600}
.pay-btn.locked{background:var(--paper); color:var(--ink-soft); border:2px dashed var(--line-warm); cursor:not-allowed; opacity:.8}
.pay-btn.locked:hover{background:var(--paper); border-color:var(--line-warm); color:var(--ink-soft)}
.carebox{margin:12px 0 4px; border-top:1px dashed var(--line-warm); padding-top:8px}
.carebox summary{cursor:pointer; font-family:var(--display); font-weight:600; font-size:13px; color:var(--olive); list-style:none}
.carebox summary::-webkit-details-marker{display:none}
.carebox summary::before{content:'▾ '}
.carebox[open] summary::before{content:'▴ '}
.carebox ul{margin:8px 0 0; padding-left:0; list-style:none}
.carebox li{font-size:13px; color:var(--ink-soft); line-height:1.7; margin-bottom:5px}
.pay-ack{font-size:13px; color:var(--ink-soft)}
.paydisc{color:var(--ink-soft)}
.refine .rf-head{color:var(--ink-soft); font-size:14px; margin:6px 0 10px}
.rf-sec{margin:10px 0}
.rf-label{font-family:var(--display); font-weight:600; font-size:13px; color:var(--olive); margin-bottom:5px}
.rf-sugg{display:flex; flex-wrap:wrap; gap:8px}
.rf-chip{border:1.5px solid var(--line-warm); border-radius:10px; background:var(--paper); font-family:var(--body); font-size:13px; padding:7px 12px; color:var(--ink); cursor:pointer; transition:all .14s}
.rf-chip:hover{border-color:var(--olive); color:var(--olive)}
.refine-boxes{margin-top:14px; display:flex; flex-direction:column; gap:10px}
/* ★2026-07-30(§12.48)以下 `.rf-box`/`.rf-title`/`.rf-lock`/`.rf-chips` 四條【DOM 從未生成】——
   查證過:全 repo(排除 node_modules)沒有任何地方輸出這些 class。同一家族的
   `.rf-head`/`.rf-sec`/`.rf-label`/`.rf-sugg`/`.rf-chip`/`.rf-choices`/`.rf-choice` 都是活的,
   只有這個「盒」子元件沒建。**未刪**:待裁決是要建還是要刪(§12.48 待裁決 11)。
   ★留這段註解的用意:別再有人從零查一遍 —— 那正是這一輪花掉的成本。 */
.rf-box{border:1.5px solid var(--line-warm); border-radius:12px; padding:12px 14px; background:var(--card)}
.rf-box.locked{opacity:.5; background:var(--paper-2); border-style:dashed}
.rf-box .rf-title{font-family:var(--display); font-weight:700; font-size:14px; margin-bottom:8px; color:var(--ink)}
.rf-box .rf-lock{font-weight:400; font-size:11px; color:var(--ink-faint)}
.rf-chips{display:flex; flex-wrap:wrap; gap:6px; margin-bottom:8px}
/* ★漸進揭露選項(2-3 選 1;一屏一決定,選完才出現後續) */
.rf-choices{margin-top:16px; display:flex; flex-direction:column; gap:10px}
.rf-choice{width:100%; text-align:left; font-family:var(--display); font-weight:700; font-size:15px; padding:14px 16px; border:1.5px solid var(--line-warm); border-radius:12px; background:var(--card); color:var(--ink); cursor:pointer; transition:all .15s}
.rf-choice:hover{border-color:var(--olive); color:var(--olive); transform:translateX(2px)}
.rf-choice.primary{background:var(--olive); border-color:var(--olive); color:var(--btn-fg)}
.rf-choice.primary:hover{background:var(--olive-2); color:var(--btn-fg)}
.rf-choice.rf-alt{font-weight:400; font-size:14px; color:var(--ink-soft); background:transparent; border-style:dashed}
.rf-choice.rf-alt:hover{color:var(--olive)}
.rf-more:empty{display:none}
/* ★理解重設計:覆述 + 免費初層答案 + 乾淨加值(取代標籤 chips / tier 卡) */
.rst{font-family:var(--display);font-weight:700;font-size:18px;line-height:1.4;color:var(--ink);margin:10px 0 12px}
.rst .q{color:var(--oxblood)}
.tag.pulse{animation:pulse 1.1s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:.5}50%{opacity:1}}
.freecard{background:var(--surface-hi);border:1.5px solid var(--line);border-radius:12px;padding:15px 17px;margin:4px 0 2px}
.free-badge{display:inline-block;font-family:var(--display);font-weight:700;font-size:11px;letter-spacing:.04em;color:var(--olive);border:1.5px solid var(--olive);border-radius:999px;padding:3px 11px;margin-bottom:9px}
.freecard .prose{font-size:16px;color:var(--ink);line-height:1.6}
.freecard .meta{font-family:var(--mono);font-size:12px;color:var(--ink-faint);margin-top:9px;word-break:break-all}
/* ── 交付格子 v2:答案主體 + 官方來源/時間/可驗證 分段(治混雜/時間不明/雜湊凌亂) ── */
.freecard.v2,.cert.v2{padding:0;overflow:hidden}
.freecard.v2 .free-badge{margin:15px 17px 2px}
.cert.v2 .certtag{margin:15px 17px 0;display:inline-block}
/* ★灰/即時分區:TG(官方即時 12h)獨立塊,與社群風向分色分區 */
.gblk{margin:8px 0 4px;padding:8px 10px;border-left:3px solid var(--line-strong);background:rgba(0,0,0,.015);border-radius:0 3px 3px 0}
.gblk-tg{border-left-color:var(--oxblood);background:rgba(122,35,24,.045)}
.gbh{font-family:var(--display);font-weight:700;font-size:12.5px;color:var(--ink);margin-bottom:4px;letter-spacing:.02em}
.gblk-tg .gbh{color:var(--oxblood)}
.gtag{font-family:var(--mono);font-size:9.5px;font-weight:600;letter-spacing:.04em;color:#fff;background:var(--oxblood);padding:1px 5px;border-radius:3px;vertical-align:middle;margin-left:4px}
.gsrc{font-family:var(--mono);font-size:10.5px;color:var(--olive);text-decoration:none}.gsrc:hover{text-decoration:underline}
.gsrc.dim,.meta .dim{color:var(--ink-soft);opacity:.7}
.gfresh{font-family:var(--mono);font-size:10.5px;color:var(--ink-soft)}
.v2 .ans{font-family:var(--display);font-weight:600;font-size:clamp(20px,2.8vw,27px);line-height:1.34;color:var(--ink);padding:8px 17px 15px}
.v2 .seg{border-top:1px solid var(--line);padding:12px 17px}
.v2 .seg .k{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--oxblood);font-weight:600;margin-bottom:6px}
.v2 .segopen{float:right;font-family:var(--body);font-size:12px;color:var(--oxblood);text-decoration:none;border:1px solid var(--line);border-radius:8px;padding:3px 9px;background:var(--paper)}
.v2 .segopen:hover{background:var(--paper-2)}
.v2 .src-name{font-family:var(--body);font-size:15px;color:var(--ink)}
.v2 .src-set{font-family:var(--mono);font-size:12px;color:var(--ink-faint);margin-top:2px;word-break:break-all}
.v2 .apinote{font-family:var(--body);font-size:12px;color:var(--gold);margin-top:5px;line-height:1.5}
.v2 .ansnote{font-family:var(--body);font-size:12px;color:var(--gold);padding:0 17px 12px;margin-top:-8px;line-height:1.55}
.v2 .segopen.isapi{border-style:dashed}
.v2 .cityseg .citychips{display:flex;flex-wrap:wrap;gap:7px}
.v2 .citychip{cursor:pointer;font-family:var(--body);font-size:13px;color:var(--ink);background:var(--paper);border:1px solid var(--line);border-radius:999px;padding:5px 13px;transition:background .18s,border-color .18s}
.v2 .citychip:hover{background:var(--paper-2);border-color:var(--line-strong)}
.v2 .times{display:grid;grid-template-columns:auto 1fr;gap:4px 14px;align-items:baseline}
.v2 .times .tl{font-family:var(--body);font-size:13px;color:var(--ink-faint)}
.v2 .times .tv{font-family:var(--mono);font-size:13px;color:var(--ink)}
.v2 .times .tv i{color:var(--ink-faint);font-style:normal;font-size:11px}
.v2 .verify{border-top:1px solid var(--line)}
.v2 .verify summary{list-style:none;cursor:pointer;padding:11px 17px;font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-faint)}
.v2 .verify summary::-webkit-details-marker{display:none}
.v2 .verify summary::before{content:'▸ ';color:var(--oxblood)}
.v2 .verify[open] summary{color:var(--oxblood)}
.v2 .verify[open] summary::before{content:'▾ '}
.v2 .vbody{padding:0 17px 14px}
.v2 .hashrow{display:flex;align-items:center;justify-content:space-between;gap:10px}
.v2 .hashrow code{font-family:var(--mono);font-size:11px;color:var(--ink-faint);word-break:break-all}
.v2 .hashrow .copy{flex:none;cursor:pointer;font-family:var(--body);font-size:11px;color:var(--oxblood);border:1px solid var(--line);border-radius:8px;padding:2px 8px;background:var(--paper)}
.v2 .ots{font-family:var(--mono);font-size:12px;color:var(--olive);margin-top:6px}
.cert.v2 .waxseal{margin:14px 17px 15px}
.cert.v2 .billseg .src-set{color:var(--olive)}
.rf-upsell{margin-top:16px}
.rf-timing{font-family:var(--body);font-size:13px;color:var(--ink-faint);margin:11px 2px 0;line-height:1.6}
.rf-timing b{color:var(--olive)}
.rf-choice .rf-adds{display:block;margin-top:5px;color:var(--oxblood);font-weight:600;font-size:12px;line-height:1.5}
.rf-choice .rf-adds b{color:var(--oxblood)}
.greybox .livesrc{margin:9px 0 3px;padding:9px 12px;background:var(--paper-2);border:1px solid var(--line);border-radius:10px;font-family:var(--body);font-size:13px;color:var(--ink-soft);line-height:1.55}
.greybox .livesrc b{color:var(--olive)}
.greybox .gk-note{font-family:var(--body);font-size:12px;color:var(--ink-faint);margin:9px 0 4px;line-height:1.55}
.greybox .gk-note b{color:var(--ink-soft)}
.greybox .gk-go{margin-top:12px;width:100%;padding:14px;min-height:44px;border:none;border-radius:var(--r);background:var(--olive);color:var(--btn-fg);font-family:var(--display);font-weight:700;font-size:15px;cursor:pointer;transition:background .16s}
.greybox .gk-go:hover{background:var(--olive-2)}
/* ── 方案分色塊卡(免費/社群/即時) ── */
/* ★點2:免費區/加值區分區橫幅 */
.rf-zone{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 10px;margin:14px 0 6px;padding:8px 12px;border-radius:10px;border:1.5px solid var(--line)}
.rf-zone-free{background:var(--tint-olive);border-color:var(--tint-olive-bd)}
.rf-zone-paid{background:var(--tint-gold);border-color:var(--tint-gold-bd)}
.rz-tag{font-family:var(--display);font-weight:700;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--olive);white-space:nowrap}
.rz-tag.rz-paid{color:var(--oxblood)}
.rz-desc{font-size:13px;line-height:1.4;color:var(--ink-soft);flex:1 1 220px}
.plancards-free,.plancards-paid{margin-top:2px}
.plancards{display:flex;flex-direction:column;gap:10px;margin:6px 0 4px}
.plancard{border:1.5px solid var(--line);border-radius:12px;padding:13px 15px;background:var(--surface-hi);position:relative}
.plancard.pc-free{border-color:var(--tint-olive-bd);background:var(--tint-olive)}
.plancard.pc-pulse{border-color:var(--tint-gold-bd);background:var(--tint-gold)}
.plancard.pc-live{border-color:var(--tint-oxblood-bd);background:var(--tint-oxblood)}
.plancard .pc-h{display:flex;align-items:baseline;justify-content:space-between;gap:8px}
.plancard .pc-name{font-family:var(--display);font-weight:700;font-size:16px;color:var(--ink)}
.plancard .pc-price{font-family:var(--display);font-weight:700;font-size:17px;color:var(--ink);white-space:nowrap}
.pc-free .pc-price{color:var(--olive)}.pc-pulse .pc-price{color:var(--gold)}.pc-live .pc-price{color:var(--oxblood)}
.plancard .pc-badge{font-family:var(--body);font-size:11px;font-weight:700;color:var(--btn-fg);background:var(--oxblood);border-radius:999px;padding:2px 8px;vertical-align:middle}
.plancard .unv{font-size:10px}
.plancard .pc-feat{margin:8px 0 11px;padding-left:18px}
.plancard .pc-feat li{font-family:var(--body);font-size:13px;color:var(--ink-soft);line-height:1.65}
/* ★點2:多題→卡片內加總價 */
.pc-agg{font-family:var(--mono);font-size:12.5px;color:var(--ink-soft);margin:0 0 9px}
.pc-agg b{color:var(--ink);font-weight:700}
/* ★點1:法幣情境→方案2(社群風向)反灰不可按 */
.plancard.pc-locked{opacity:.55;filter:grayscale(.5);cursor:not-allowed}
/* ★點2:最下面綜合結帳(整批加總算錢) */
.pc-settle{margin:12px 0 2px;border:1.5px solid var(--line-warm);border-radius:12px;background:var(--card-2);padding:13px 15px}
.pc-settle .ps-head{font-family:var(--display);font-weight:700;font-size:13px;letter-spacing:.05em;text-transform:uppercase;color:var(--oxblood);margin-bottom:8px}
.pc-settle .ps-rows{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:5px}
.pc-settle .ps-rows li{display:flex;justify-content:space-between;gap:12px;font-family:var(--body);font-size:14px;color:var(--ink)}
.pc-settle .ps-rows li span{font-family:var(--mono);font-size:13px;color:var(--ink-soft)}
.pc-settle .ps-rows li span b{color:var(--ink);font-weight:700}
.pc-settle .ps-opt{color:var(--ink-soft)}
.pc-settle .ps-free span b{color:var(--olive)}
.pc-settle .ps-total{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-top:10px;padding-top:9px;border-top:1.5px solid var(--line-warm);font-family:var(--display);font-weight:700;font-size:15px;color:var(--ink)}
.pc-settle .ps-total b{font-size:19px;color:var(--oxblood)}
.pc-settle .ps-note{font-family:var(--body);font-size:12px;color:var(--ink-faint);margin-top:9px;line-height:1.55}
.pc-addon{display:flex;align-items:flex-start;gap:8px;margin:11px 2px 0;font-family:var(--body);font-size:13px;color:var(--ink-soft);line-height:1.5;cursor:pointer}
.pc-addon input{margin-top:3px;flex:none}
.freeflag{color:var(--olive);font-style:normal;font-weight:700;font-size:.9em}
.pc-free-tag{color:var(--olive)}
.pc-orig{color:var(--ink-faint);font-weight:400;font-size:.82em;opacity:.75}
/* ★UI 重設計:方案卡=可點選(radio)·內容摺疊在標題下·結帳車三鈕 ───────────── */
.plancard[data-tier]{cursor:pointer;transition:border-color .15s,box-shadow .15s,transform .1s}
.plancard[data-tier]:hover{box-shadow:0 2px 14px rgba(26,23,18,.10)}
.plancard[data-tier]:focus-visible{outline:2px solid var(--oxblood);outline-offset:2px}
.plancard.pc-sel{border-width:2px;box-shadow:0 3px 18px rgba(122,35,24,.16)}
.pc-free.pc-sel{border-color:var(--olive)}.pc-pulse.pc-sel{border-color:var(--gold)}.pc-live.pc-sel{border-color:var(--oxblood)}
/* 選中標記:平時收起,選中才顯示(取代原本每卡一顆 CTA) */
.pc-selmark{display:none;margin-top:10px;padding:7px 10px;border-radius:9px;font-family:var(--display);font-weight:700;font-size:13px;text-align:center;color:var(--btn-fg)}
.pc-free.pc-sel .pc-selmark{display:block;background:var(--olive)}
.pc-pulse.pc-sel .pc-selmark{display:block;background:var(--gold)}
.pc-live.pc-sel .pc-selmark{display:block;background:var(--oxblood)}
/* 反灰(法幣情境方案2 不可選)——降級標題用深字不用白字,確保可讀 */
/* 摺疊:方案內容收在標題下,按一下才展開(不外溢到結帳車下方) */
.pc-fold{margin:8px 0 2px}
.pc-fold summary{list-style:none;cursor:pointer;font-family:var(--body);font-size:12.5px;font-weight:600;color:var(--oxblood);padding:2px 0}
.pc-fold summary::-webkit-details-marker{display:none}
.pc-fold[open] summary{color:var(--ink-soft)}
.pc-foldbody{padding-top:4px}
.pc-foldbody .pc-feat{margin:4px 0 8px}
.pc-chh{font-family:var(--body);font-size:12px;font-weight:700;color:var(--ink-soft);margin:2px 0 3px}
.pc-chlist{margin:0 0 4px;padding-left:18px}
.pc-chlist li{font-family:var(--body);font-size:12.5px;color:var(--ink-soft);line-height:1.6}
/* ★user②:報告加購——加框放大,一眼可見的選配 */
.pc-addon-box{margin:13px 2px 2px;border:1.5px dashed var(--tint-oxblood-bd);border-radius:12px;background:var(--tint-oxblood);padding:11px 13px}
.pc-addon-box .pc-addon{margin:0;align-items:center;font-size:14px}
.pc-addon-box input{width:18px;height:18px;margin-top:0}
.pc-addon-txt{display:flex;flex-direction:column;gap:1px}
.pc-addon-lead{font-family:var(--display);font-size:15px;color:var(--ink);line-height:1.3}
.pc-addon-sub{font-family:var(--body);font-size:12px;color:var(--ink-soft)}
.pc-addon-price{font-family:var(--body);font-size:13px;color:var(--oxblood);font-weight:600;margin-top:2px}
.pc-addon-price b{font-size:1.08em}
.ps-opt-row{opacity:.6}
/* 結帳車三鈕:免費期 / 加密 / 法幣(付費期未到→反灰把入口接好) */
.ps-btns{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.ps-btn{flex:1 1 auto;min-width:130px;padding:11px 12px;border:none;border-radius:10px;font-family:var(--display);font-weight:700;font-size:14px;cursor:pointer;color:var(--btn-fg);transition:filter .16s}
.ps-btn:hover:not(:disabled){filter:brightness(1.07)}
.ps-btn-free{background:var(--olive);flex-basis:100%}
.ps-btn-crypto{background:var(--oxblood)}
.ps-btn-fiat{background:var(--ink)}
.ps-btn:disabled{background:var(--paper);color:var(--ink-soft);border:1px solid var(--line-strong);cursor:not-allowed;font-weight:600}
.ps-soon{display:inline-block;font-family:var(--body);font-size:10.5px;font-weight:700;color:var(--btn-fg);background:var(--ink-faint);border-radius:999px;padding:1px 7px;margin-left:5px;vertical-align:middle}
/* ── 免費答案後的「還要一起查?」basket 選擇(方案等問完才出現) ── */
.basketq{margin-top:16px}
.basketq .bq-head{font-family:var(--body);font-size:14px;color:var(--ink-soft);line-height:1.6;margin:0 2px 11px}
.basketq .bq-btns{display:flex;gap:10px;flex-wrap:wrap}
.basketq .bq-more,.basketq .bq-plans{flex:1;min-width:150px;padding:13px;border-radius:12px;font-family:var(--display);font-weight:700;font-size:14px;cursor:pointer;transition:filter .18s,background .18s}
.basketq .bq-more{background:var(--paper);border:1.5px solid var(--line-strong);color:var(--ink)}
.basketq .bq-more:hover{background:var(--paper-2)}
.basketq .bq-plans{background:var(--oxblood);border:none;color:var(--btn-fg)}
.basketq .bq-plans:hover{filter:brightness(1.06)}
.basketq .bq-cost{font-family:var(--body);font-size:13px;color:var(--oxblood);font-weight:600;margin:0 2px 11px}
.bq-form{display:flex;gap:8px;width:100%}
.bq-q{flex:1;min-width:0;border:1.5px solid var(--line-strong);border-radius:10px;padding:12px 14px;font-family:var(--body);font-size:15px;color:var(--ink);background:var(--paper);outline:none}
.bq-q:focus{border-color:var(--oxblood)}
.bq-add{flex:none;padding:12px 16px;border:none;border-radius:10px;background:var(--oxblood);color:var(--btn-fg);font-family:var(--display);font-weight:700;font-size:14px;cursor:pointer}
.bq-add:disabled{opacity:.6;cursor:default}
/* ── 多題交叉查:確認組合(A×B,非相加)+ 合併結果佔位(待邏輯BOT §7.5) ── */
.combineq{border:1.5px solid var(--olive);border-radius:12px;padding:14px 16px;background:var(--tint-olive)}
.combineq .cq-head{font-family:var(--display);font-weight:600;font-size:14px;color:var(--ink);margin-bottom:9px;line-height:1.55}
.combineq .cq-btns{display:flex;gap:10px;margin-top:12px;flex-wrap:wrap}
.combineq .cq-yes{flex:1;min-width:150px;min-height:44px;padding:12px;border:none;border-radius:var(--r);background:var(--olive);color:var(--btn-fg);font-family:var(--display);font-weight:700;font-size:14px;cursor:pointer;transition:background .16s}
.combineq .cq-yes:hover{background:var(--olive-2)}
.combineq .cq-edit{min-height:44px;padding:12px 20px;border:1.5px solid var(--line-strong);border-radius:var(--r);background:var(--paper);color:var(--ink-soft);font-family:var(--display);font-weight:700;font-size:14px;cursor:pointer}
.combineq .cq-edit:hover{border-color:var(--olive);color:var(--olive)}
.combined-pending{margin:2px 0 14px;border:1.5px dashed var(--line-warm);border-radius:12px;padding:13px 15px;background:var(--paper-2)}
.combined-pending .cp-head{font-family:var(--display);font-weight:700;font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--gold);margin-bottom:6px}
.combined-pending .cp-body{font-family:var(--body);font-size:13.5px;color:var(--ink-soft);line-height:1.6}
/* ★用戶#1:交叉分析免費初步方向 */
.combined-pending .cp-head .cp-free{font-family:var(--body);font-size:10.5px;font-weight:700;letter-spacing:.04em;color:var(--btn-fg);background:var(--olive);border-radius:999px;padding:1px 7px;margin-left:6px;vertical-align:middle}
.cp-delivered{border-style:solid;border-color:var(--oxblood)}
.cp-cite{font-family:var(--mono);font-size:11px;color:var(--olive);margin-top:7px}.cp-cite a{color:var(--olive)}
.deliv-combine{margin-top:14px}
.cp-sum{font-family:var(--body);font-size:13px;color:var(--ink);margin:2px 0 7px;line-height:1.5}.cp-sum b{color:var(--oxblood)}
.crx-list{list-style:none;margin:4px 0 0;padding:0;display:flex;flex-direction:column;gap:7px}
.crx{border-left:3px solid var(--line-strong);padding:5px 10px;background:rgba(0,0,0,.015);border-radius:0 4px 4px 0}
.crx-causal{border-left-color:var(--oxblood)}.crx-collinear{border-left-color:var(--gold)}.crx-spurious{border-left-color:var(--ink-faint)}
.crx-t{font-family:var(--mono);font-size:10.5px;font-weight:700;letter-spacing:.03em;color:var(--oxblood);text-transform:uppercase}
.crx-collinear .crx-t{color:var(--gold)}.crx-spurious .crx-t{color:var(--ink-faint)}
.crx-p{font-family:var(--body);font-size:13px;color:var(--ink);margin-left:6px}
.crx-d{font-family:var(--body);font-size:12px;color:var(--ink-soft);margin-top:3px;line-height:1.5}
.cp-none,.cp-miss{font-size:13px;line-height:1.6}.cp-miss{color:var(--ink-soft)}
.cp-note{font-family:var(--body);font-size:11.5px;color:var(--ink-faint);margin-top:9px;padding-top:8px;border-top:1px dashed var(--line);line-height:1.55}
.stacked-q{margin-top:15px;padding-top:15px;border-top:1px dashed var(--line-strong)}
.sq-label{font-family:var(--body);font-size:13px;color:var(--ink-faint);margin-bottom:9px}
.sq-label b{color:var(--oxblood)}
/* ── 多題交付:熊對整批問題的理解總結(交付卡最上面) ── */
.batch-understood{margin:2px 0 16px;padding:13px 15px;border:1.5px solid var(--line);border-radius:12px;background:var(--paper-2)}
.batch-understood .bu-head{font-family:var(--display);font-weight:600;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--olive);margin-bottom:9px}
.bu-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:7px}
.bu-list li{display:flex;gap:10px;align-items:baseline;font-family:var(--body);font-size:15px;color:var(--ink);line-height:1.5}
.bu-n{flex:none;width:20px;height:20px;border-radius:999px;background:var(--olive);color:var(--btn-fg);font-family:var(--display);font-weight:700;font-size:12px;display:inline-flex;align-items:center;justify-content:center;align-self:flex-start;margin-top:1px}
.rf-uphead{font-family:var(--display);font-weight:600;font-size:14px;color:var(--ink-soft);margin:0 0 10px}
.rf-choice{display:flex;align-items:center;justify-content:space-between;gap:10px}
.rf-choice .rf-price{font-family:var(--mono);font-size:13px;font-weight:600;white-space:nowrap}
.rf-choice small{display:block;font-family:var(--body);font-weight:400;font-size:13px;color:var(--ink-faint);margin-top:2px}
.rf-choice.primary small{color:var(--btn-fg-soft)}
.unv{display:inline-block;font-size:11px;color:var(--oxblood);border:1px solid var(--oxblood);border-radius:8px;padding:1px 6px;margin-left:6px;vertical-align:1px}
.report-offer{margin:14px 0 4px; border:2px solid var(--line-warm); border-radius:12px; padding:16px 18px; background:linear-gradient(180deg,var(--card),var(--card-2)); display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap; animation:rise .5s both}
.report-offer .ro-text{font-family:var(--display); font-weight:600; font-size:16px; color:var(--ink)}
.report-offer .ro-text small{display:block; font-family:var(--body); font-weight:600; font-size:12px; color:var(--ink-faint); margin-top:2px}
.report-offer .ro-btn{border:none; border-radius:10px; background:var(--oxblood); color:var(--btn-fg); font-family:var(--display); font-weight:700; font-size:15px; padding:12px 22px; cursor:pointer; white-space:nowrap; transition:background .16s}
.report-offer .ro-btn:hover{background:var(--oxblood-2)}
.report-offer .ro-btns{display:flex;gap:8px;flex-wrap:wrap}
.report-offer .ro-btn-2{background:transparent;color:var(--oxblood);border:2px solid var(--oxblood)}
.report-offer .ro-btn-2:hover{background:var(--oxblood);color:var(--btn-fg)}
.fbbox{margin:14px 0 4px; border:1.5px dashed var(--line-warm); border-radius:12px; padding:16px 18px; background:rgba(75,88,54,.05); animation:rise .5s both}
.fbbox .fblabel{font-family:var(--display); font-weight:600; font-size:15px; color:var(--ink-soft); margin-bottom:2px}
.fbbox .fb-row{display:flex; gap:8px; margin-top:10px}
.fbbox input{flex:1; min-width:0; border:1.5px solid var(--line-strong); border-radius:10px; background:var(--paper); font-family:var(--body); font-weight:500; font-size:16px; padding:10px 13px; color:var(--ink); outline:none}
.fbbox input:focus{border-color:var(--olive)}
.fbbox button{border:none; border-radius:10px; background:var(--olive); color:var(--btn-fg); font-family:var(--display); font-weight:700; font-size:14px; padding:0 20px; cursor:pointer}
.trust{border-top:2px solid var(--line-warm); border-bottom:2px solid var(--line-warm); margin:46px 0; padding:30px 0; display:grid; grid-template-columns:repeat(4,1fr); gap:28px}
.trust .col .n{font-family:var(--display); font-weight:700; font-size:13px; color:var(--oxblood); letter-spacing:.04em}
.trust .col h5{font-family:var(--display); font-weight:700; font-size:22px; margin:7px 0 6px; line-height:1.14; color:var(--ink)}
.trust .col p{font-size:14px; color:var(--ink-soft); margin:0; line-height:1.55; font-weight:460}

/* ── payment (landing): crypto 全方案 vs fiat 僅頂階 ── */
.pay{margin:8px 0 6px}
.pay-title{font-family:var(--display); font-weight:600; font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--olive); margin-bottom:14px}
/* ★2026-07-30(§12.48)改名 `.pay-rows`→`.pay-grid`:原本這條與問答頁 line 187 的
   `.pay-rows{display:flex; flex-wrap:wrap}` **撞同一個 class 名**,同 specificity、本條在後 → 贏。
   結果問答頁的付款管道列(`#pchans.pay-rows`)一直被強制成兩欄 grid,不是原意的自動換行 flex。
   ★這是「CSS 有／DOM 無」以外的另一種病:兩塊不同用途的樣式共用一個名字。 */
.pay-grid{display:grid; grid-template-columns:1fr 1fr; gap:14px}
.pay-row{display:flex; gap:12px; align-items:flex-start; padding:15px 17px; border:1.5px solid var(--line); border-radius:12px; background:var(--card)}
.pay-row.pay-fiat{border-color:var(--line-strong); background:var(--paper-2)}
.pay-ico{font-family:var(--display); font-size:18px; line-height:1.2; flex:none; margin-top:1px}
.pay-crypto .pay-ico{color:var(--olive)} .pay-fiat .pay-ico{color:var(--gold)}
.pay-body{display:flex; flex-direction:column; gap:6px; min-width:0}
/* 12px 是內文可讀下限,11px 標籤在手機上會被略過 —— 這兩顆標籤講的是「法幣只到第幾階」,
   不是裝飾,不能小到讓人跳過。 */
.pay-scope{align-self:flex-start; font-family:var(--display); font-weight:700; font-size:12px; letter-spacing:.03em; padding:2px 9px; border-radius:var(--r-pill)}
.pay-scope.sc-all{color:var(--olive); background:var(--tint-olive); border:1px solid var(--tint-olive-bd)}
.pay-scope.sc-top{color:var(--gold); background:var(--tint-gold); border:1px solid var(--tint-gold-bd)}
.pay-row p{margin:0; font-family:var(--body); font-size:14px; color:var(--ink-soft); line-height:1.6}
.pay-row p b{color:var(--ink); font-weight:700}
/* 法幣可用方案:1/2 停用·3 可用 */
.pay-tiers{display:flex; gap:6px; margin-top:4px}
/* ★透明邊框佔位:停用態要描邊,有它才不會比啟用態大 2px(壓狀態切換的位移) */
.pay-tiers .pt{font-family:var(--mono); font-weight:600; font-size:12px; padding:2px 10px; border-radius:var(--r-sm);
               line-height:1.5; border:1px solid transparent}
/* ★停用態不可以用 opacity 表達(2026-08-16 實測)。
   舊寫法 color:btn-fg / background:ink / opacity:.34 ——【整個元素】連字帶底一起變淡,
   在 --paper 上實際對比只剩 1.34:1,那兩顆停用籌碼等於看不見:
   買家看到的是「3」孤零零一顆,讀不出「法幣只涵蓋第三階」這件事。
   改用實色描邊 + 刪除線,而且不只靠顏色區分。
   ★用 --ink-soft 不用 --ink-faint:這一列的底是 --paper-2(法幣列比較深),
   --ink-faint 在它上面只有 4.48:1,差 0.02 沒過 —— 底色要看【它實際落在哪一列】,
   不能拿 --paper 的數字當通行證。--ink-soft 在三種底上分別是 7.90 / 8.80 / 9.53。 */
.pay-tiers .t-off{color:var(--ink-soft); background:transparent; border-color:var(--line-strong); text-decoration:line-through}
.pay-tiers .t-on{color:var(--btn-fg); background:var(--gold); box-shadow:0 2px 8px -3px rgba(156,118,40,.7)}
@media(max-width:640px){.pay-grid{grid-template-columns:1fr}}
.credo{padding:8px 0 42px; max-width:64ch}
.credo .tag{font-family:var(--display); font-weight:600; font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--olive)}
.credo p{font-family:var(--display); font-weight:700; font-size:clamp(27px,3.6vw,38px); line-height:1.3; margin:.32em 0; color:var(--ink)}
.credo p em{color:var(--oxblood); font-style:italic}

footer{border-top:1.5px solid var(--line-strong); padding:26px 0 60px; font-size:14px; color:var(--ink-soft); display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap}
footer .discl{max-width:68ch; line-height:1.62; font-weight:460}
footer .sig{font-family:var(--display); font-weight:600; font-size:13px}

@keyframes rise{from{opacity:0; transform:translateY(14px)} to{opacity:1; transform:none}}
@keyframes press{from{opacity:0; transform:rotate(-10deg) scale(1.5)} to{opacity:1; transform:rotate(-10deg) scale(1)}}
.fade{animation:rise .6s both} .d1{animation-delay:.08s}.d2{animation-delay:.16s}.d3{animation-delay:.24s}
@media(max-width:820px){
  .hero{grid-template-columns:1fr; gap:28px} .hero-aside{border-left:none; border-top:1px solid var(--line-strong); padding:20px 0 0}
  [dir=rtl] .hero-aside{border-right:none; padding-right:0}
  /* ★2026-07-30(§12.48)`.tiers` 已隨舊方案選擇流程刪除,這裡的 RWD 覆寫一併移除。 */
  .trust{grid-template-columns:1fr 1fr; gap:22px} body{font-size:18px}
  /* ★不再把進度標籤壓到 11px:那是【目前做到哪一步】的唯一文字,壓小等於叫人別看。
     ★格寬要以【標籤實際寬度】回推,不是先挑個好看的數字:12px 大寫 + 字距後
     最長的標籤要 110px,格子只有 80px ⇒ 內容擠出去 2px、整頁橫向捲動。
     104px × 一排 3 格 剛好收在 375px 內容區(335px);字距同時收到 .02em 留餘裕。 */
  .timeline .step{min-width:104px}
  .timeline .st{letter-spacing:.02em}
  /* ★連接線在手機一定要拿掉,兩個理由都成立:
     ① 它用 right:calc(-50% + 10px) 往【格子外】延伸半格寬,好接到下一顆圓點。
        桌機單排時那半格落在下一格身上,沒事;手機換行後,每一排最後一格的線
        直接衝出容器 —— 整頁橫向捲動 390px > 375px 就是這麼來的。
        ★把格子改寬反而更嚴重(延伸量是格寬的一半),所以「調格寬」永遠治不好它。
     ② 換行之後那條線會「連到下一排的第一格」,語意本來就是錯的。
     ⇒ 這不是為了遷就版面犧牲設計,是那條線在換行情境下本來就不該存在。 */
  .timeline .step:not(:last-child)::after{display:none}
}

/* ═══════════════════════════════════════════════════════════════════════════
   §MOTION —— 動態與流動感（2026-08-16）

   分層原則（老闆裁決）：**前台有戲、付款頁克制**。
   這一段只服務前台（首頁／提問頁）。付款面的動態規則在
   prepay-preview.html 與 aeml-x402 各自檔內，只做「狀態真的改變時」的回饋。

   ★三個不做的東西，以及為什麼：
   ① 按鈕掃光／閃爍 —— 那是付款頁的典型不信任訊號，也和「證據優先、不炒作」
      的定位直接衝突。技能自己的反模式清單同樣把「裝飾性動畫」與
      「無限循環動畫（只該用在載入指示）」列為要避開的。
   ② 重點訊息「持續發光」—— 持續動態同時是無障礙問題（前庭敏感）和信任問題。
      改成【進場亮一次然後定住】：注意力效果一樣，副作用沒有。
   ③ 引入 GSAP —— 這裡要的每一種動態純 CSS 都做得到。
      為了動畫在金流路徑上多一條 CDN 相依不划算。
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 熊（向量，取代 emoji）──────────────────────────────
   造型依據：品牌熊BOT\u4eba格\u5c01面.png 與 封面(橫幅).png。
   兩張圖共同的識別特徵──這五點不可以改：
     ① Q版棕熊，大圓頭、圓耳朗且有淺色內耳
     ② 奶油色吻部與肚皮補丁
     ③ 大而誠實的圓眼睛（帶高光點）
     ④ ★放大鏡──兩張圖都有，這是「查證」的視覺簽名，不能省
     ⑤ 深色粗描邊、扁平向量、圓潤造型
   ★我第一版畫成「側面幾何剪影」──跑起來像熊在走路，但跟品牌完全不是同一隻熊。
     形象一致比動作漂亮重要，所以改成正面 Q 版 + 搖擺式行走。

   配色來自品牌文件「建議用色」：暖棕 #A9744F、奶油 #F6F1E7。
   ★吐槽一下：品牌文件的主色是青藍 #3AAFA9，但前台整套是紙墨暖色系。
     青藍只出現在封面的背景圓與背心，熊本體讀起來就是棕+奶油──
     所以這裡只取熊本體的色，不把青藍引進介面（那會多一個與紙墨系打架的主色）。 */
:root{
  --bear-fur:#a9744f; --bear-fur-2:#8f5f3e; --bear-line:#5c3a26;
  --bear-cream:#f6f1e7; --bear-ear:#e7c8a3;
  --bear-rim:#836322; --bear-glass:rgba(255,255,255,.42);
}
.tb-bear{width:1em; height:1.18em; overflow:visible; vertical-align:-.22em}
/* ★尺寸由【父層】決定,不在 <svg> 自己身上加 class ──
   兩隔的內嵌標記必須逐字相同,守門測試才抓得到漂移。 */
footer .sig .tb-bear{width:1.5em; height:1.75em; vertical-align:-.5em}

/* ── 定格動畫式行走（持續運行）─────────────────────────
   老闆裁決：熊自己一直走，走定格動畫（stop-motion）那一路。

   ★「定格」是用 steps() 做的，不是把速度調慢：
     一般緩動是逐幀內插，看起來是「滑」；stop-motion 是一格一格【跳】過去的。
     steps(1, jump-end) 讓每一段到終點才切換 ⇒ 四個逗點就是四個定格姿勢。

   ★順帶一個真的好處（不是後來找的理由）：
     平滑動畫每一幀都要重算重畫；steps 的計算值一個循環只變四次，
     瀏覽器只在那四個瞬間重畫。持續運行的動畫用定格，成本比緩動低很多。

   transform-box:fill-box 是關鍵——沒有它，transform-origin 會以整個 SVG
   視框為基準，所有部件繞同一點轉，看起來像在旋轉不像在走。 */
.tb-bear .tb-b-all,.tb-bear .tb-b-leg,.tb-bear .tb-b-ear,.tb-bear .tb-b-glass{transform-box:fill-box}
.tb-bear .tb-b-all{transform-origin:50% 92%}
.tb-bear .tb-b-leg{transform-origin:50% 20%}
.tb-bear .tb-b-ear{transform-origin:50% 90%}
.tb-bear .tb-b-glass{transform-origin:60% 60%}

/* 四個定格姿勢：左腳抬 → 雙腳著地中間幀 → 右腳抬 → 中間幀 */
@keyframes tb-waddle{
  0%{transform:rotate(-2.2deg) translateY(0)}
  25%{transform:rotate(0deg) translateY(-2.4px)}
  50%{transform:rotate(2.2deg) translateY(0)}
  75%{transform:rotate(0deg) translateY(-2.4px)}
  100%{transform:rotate(-2.2deg) translateY(0)}
}
@keyframes tb-stepL{
  0%{transform:translateY(-8px) rotate(-20deg)}
  25%{transform:translateY(0) rotate(0deg)}
  50%{transform:translateY(2px) rotate(16deg)}
  75%{transform:translateY(0) rotate(0deg)}
  100%{transform:translateY(-8px) rotate(-20deg)}
}
@keyframes tb-stepR{
  0%{transform:translateY(2px) rotate(16deg)}
  25%{transform:translateY(0) rotate(0deg)}
  50%{transform:translateY(-8px) rotate(-20deg)}
  75%{transform:translateY(0) rotate(0deg)}
  100%{transform:translateY(2px) rotate(16deg)}
}
/* 放大鏡跟著身體點頭：步頻減半，否則跟腳完全同步會像一塊式機器人 */
@keyframes tb-glass-bob{
  0%{transform:translateY(0) rotate(-4deg)}
  50%{transform:translateY(-2px) rotate(3deg)}
  100%{transform:translateY(0) rotate(-4deg)}
}
@keyframes tb-walk-in{from{transform:translateX(-210%)} to{transform:translateX(0)}}
@keyframes tb-peek{0%,100%{transform:rotate(0)} 30%{transform:rotate(-9deg)} 60%{transform:rotate(6deg)}}

/* ★定格的關鍵就是這行 steps(1, jump-end)。拿掉它就變成普通緩動。
   .72s ÷ 4 個定格 ≈ 5.5 個姿勢/秒，接近定格動畫常用的拍數。 */
.mast .bearmark .glyph{display:inline-block; animation:tb-walk-in 1.5s cubic-bezier(.34,0,.28,1) both}
/* ★阿拉伯文(RTL)必須從【右邊】走進來。不是為了對稱好看：
   LTR 版本往左位移 210%，在 RTL 版面那是往【頁面內側】跑，
   溢出方向從「被裁掉」變成「撐出捲軸」——一個純視覺的動畫會生出橫向捲動。 */
@keyframes tb-walk-in-rtl{from{transform:translateX(210%)} to{transform:translateX(0)}}
[dir=rtl] .mast .bearmark .glyph{animation-name:tb-walk-in-rtl}

/* ★★2026-08-23 手臂擺動。
   ⛔ 命名叫 tb-swing 不叫 tb-arm：`tb-arm` 已經是【付款鍵上膨】的意思，
     兩者的規則相反（那一個不可 infinite、這一個必須 infinite）。
     2026-08-23 實事故：取名 tb-armL 讓 motion-safety 閘誤咬。⛔ 原本手臂【沒有任何動畫】,看起來會動只是被身體帶著跑 ——
   而手臂反相擺動是「這是在走路」最強的視覺線索,少了它只剩晃動。 */
@keyframes tb-swingL{
  0%{transform:rotate(13deg)}   25%{transform:rotate(0deg)}
  50%{transform:rotate(-13deg)} 75%{transform:rotate(0deg)}
  100%{transform:rotate(13deg)}
}
@keyframes tb-swingR{
  0%{transform:rotate(-13deg)}  25%{transform:rotate(0deg)}
  50%{transform:rotate(13deg)}  75%{transform:rotate(0deg)}
  100%{transform:rotate(-13deg)}
}
/* ★樞紐:腿在髖、手在肩、身體在腳底。
   ⛔ 不設的話 transform-origin 是元件自己 bbox 的中心 ⇒ 腿繞自己中心轉,像「滑」不像「踏」。 */
.bearmark .tb-b-legL,.bearmark .tb-b-legR,.home .tb-b-legL,.home .tb-b-legR{transform-origin:50% 0%}
.bearmark .tb-b-armL,.bearmark .tb-b-armR,.home .tb-b-armL,.home .tb-b-armR{transform-origin:50% 8%}
.bearmark .tb-b-all,.home .tb-b-all{transform-origin:50% 88%}
.bearmark .tb-b-armL,.home .tb-b-armL{animation:tb-swingL .72s steps(1,jump-end) infinite}
.bearmark .tb-b-armR,.home .tb-b-armR{animation:tb-swingR .72s steps(1,jump-end) infinite}
.bearmark .tb-b-all,.home .tb-b-all{animation:tb-waddle .72s steps(1,jump-end) infinite}
.bearmark .tb-b-legL,.home .tb-b-legL{animation:tb-stepL .72s steps(1,jump-end) infinite}
.bearmark .tb-b-legR,.home .tb-b-legR{animation:tb-stepR .72s steps(1,jump-end) infinite}
.bearmark .tb-b-glass,.home .tb-b-glass{animation:tb-glass-bob 1.44s steps(1,jump-end) infinite}

/* 滑過招牌：熊歪頭看你。這一段是緩動的——它是「回應你」而不是步態，
   跟定格的走路區分開來，才看得出它是另一件事。 */
.bearmark:hover .tb-b-ear,.home:hover .tb-b-ear{animation:tb-peek .5s ease-in-out 1}

/* ── 進場：亮一次然後定住 ────────────────────────────────────────────
   .reveal 由 app.js 的 IntersectionObserver 一次性加上 .in（只加不移除）。
   ★刻意不用 animation-timeline:view() —— 那個是跟著捲動位置來回跑的，
   捲上去會倒帶，做不到「亮一次然後定住」。 */
.reveal{opacity:0; transform:translateY(16px)}
.reveal.in{animation:rise .55s cubic-bezier(.22,.68,.31,1) both}
.reveal.in.s1{animation-delay:.07s} .reveal.in.s2{animation-delay:.14s}
.reveal.in.s3{animation-delay:.21s} .reveal.in.s4{animation-delay:.28s}

/* 重點訊息：一道暖色底光掃過去，停在一條靜態底線上。
   結束狀態是【靜態】的，所以它在動畫結束後仍然是可見的強調，不是一閃而過。 */
@keyframes tb-highlight{
  from{background-size:0 .42em}
  to{background-size:100% .42em}
}
.credo p em{
  background-image:linear-gradient(var(--tint-gold),var(--tint-gold));
  background-repeat:no-repeat; background-position:0 88%; background-size:0 .42em;
  padding:0 .06em;
}
.credo.in p em{animation:tb-highlight .7s .25s cubic-bezier(.22,.68,.31,1) forwards}

/* 時間軸：目前這一步的圓點在【推進的當下】脈動兩下就停。
   這是「動態傳達意義」——它告訴你狀態剛剛變了，不是裝飾。 */
@keyframes tb-step-ping{
  0%{box-shadow:0 0 0 0 rgba(151,52,33,.5)}
  100%{box-shadow:0 0 0 12px rgba(151,52,33,0)}
}
.timeline .step.active .dot{animation:tb-step-ping 1.1s ease-out 2}

/* ── ★減少動態：不是「關掉動畫」，是「立刻到達終點」 ──────────────────
   .reveal 起手是 opacity:0，若只把動畫關掉，內容會【永遠看不見】。
   所以這裡必須明確把終點狀態寫回去。 */

/* ═══ ★★2026-08-23 按鈕 hover 的「流動」掃光 ═══════════════════════════
   【為什麼要做】老闆說 hover 看不出變化。實測 hover 前後的 RGB 距離：
     法幣 CTA 8（brightness(.98)，等於沒變）／加密 CTA 23／付款鍵 31／語言鈕 118。
     ⇒ 「有 hover 規則」不等於「看得到 hover」——與小熊 ±1px 同一類缺陷。
   【設計決定】
     ① 深色鍵用白光、淺色鍵用暖影：白光打在 --paper 上看不見。
     ② hover 期間只跑【一次】(不是 infinite)：閘規定無限動畫只留給載入指示器。
   ⛔ .locked 一律排除 —— 不可以讓一顆按不動的鍵發光騙人去按（見 motion-safety 閘）。 */
@keyframes tb-sweep{
  from{transform:translateX(-120%) skewX(-18deg)}
  to{transform:translateX(220%) skewX(-18deg)}
}
.paycta-btn,.pay-btn,.rf-choice,.greybox .gk-go,.combineq .cq-yes,
.report-offer .ro-btn,.ps-btn{position:relative; overflow:hidden}
.paycta-btn::after,.pay-btn:not(.locked)::after,.rf-choice::after,
.greybox .gk-go::after,.combineq .cq-yes::after,
.report-offer .ro-btn::after,.ps-btn::after{
  content:""; position:absolute; top:0; bottom:0; left:0; width:38%;
  background:linear-gradient(100deg, transparent, rgba(255,255,255,.42), transparent);
  transform:translateX(-120%) skewX(-18deg); pointer-events:none; opacity:0;
}
/* 淺色底的鍵改用暖影 */
.paycta-btn.pcb-fiat::after,.rf-choice::after,.report-offer .ro-btn-2::after{
  background:linear-gradient(100deg, transparent, rgba(151,52,33,.16), transparent);
}
.paycta-btn:hover::after,.pay-btn:not(.locked):hover::after,.rf-choice:hover::after,
.greybox .gk-go:hover::after,.combineq .cq-yes:hover::after,
.report-offer .ro-btn:hover::after,.ps-btn:hover:not(:disabled)::after{
  opacity:1; animation:tb-sweep .62s cubic-bezier(.25,.6,.3,1) 1;
}
/* ⛔ 鎖住的鍵、以及整組反灰(aria-disabled)時，一律不掃光 */
.pay-btn.locked::after,
.pay-rows[aria-disabled="true"] .pay-btn::after{content:none !important; animation:none !important}
/* 色差補強：法幣 CTA 原本只有 brightness(.98)，RGB 距離 8 —— 看不見 */
/* ★2026-08-23 這條已由上方「兩顆 CTA 同色 + hover 發光」取代，留空以免蓋掉新規則。 */

@media (prefers-reduced-motion: reduce){
  /* ★熊是【持續】走的 ── 這就是這一行存在的理由。
     一個永遠不停的動畫對前庭系統敏感、注意力障礙、前庭偷頭痛的使用者
     不是「有點吵」而是「沒辦法看這一頁」。把系統設成減少動態的人，
     是已經明確表達過這個需求的 ── 這不是風格偏好，不可以因為「走路很可愛」而拿掉。 */
  .tb-bear .tb-b-all,.tb-bear .tb-b-leg,.tb-bear .tb-b-ear,.tb-bear .tb-b-glass,
  .bearmark .tb-b-all,.home .tb-b-all,
  .bearmark .tb-b-legL,.home .tb-b-legL,.bearmark .tb-b-legR,.home .tb-b-legR,
  .bearmark .tb-b-armL,.home .tb-b-armL,.bearmark .tb-b-armR,.home .tb-b-armR,
  .bearmark .tb-b-glass,.home .tb-b-glass,
  .mast .bearmark .glyph,.timeline .step.active .dot,
  .bearmark:hover .tb-b-ear,.home:hover .tb-b-ear{animation:none !important; transform:none !important}
  /* ★掃光也要關 —— 它是裝飾性動態，不是狀態指示。
     ⛔ 但【顏色/邊框的 hover 變化要留著】：那是「這顆可以按」的功能性回饋，
       不是動效。把它一起關掉會讓減動態使用者失去 hover 提示。 */
  .paycta-btn::after,.pay-btn::after,.rf-choice::after,.greybox .gk-go::after,
  .combineq .cq-yes::after,.report-offer .ro-btn::after,.ps-btn::after{
    content:none !important; animation:none !important}
  /* ★hover 的呼吸光暈同樣關掉；顏色/邊框的變化留著（那是功能回饋不是動效）。 */
  .paycta-btn.pcb-crypto:hover,.paycta-btn.pcb-fiat:hover,
  .paycta-btn.pcb-crypto:focus-visible,.paycta-btn.pcb-fiat:focus-visible{
    animation:none !important; box-shadow:none !important}
  .reveal{opacity:1; transform:none}
  .reveal.in{animation:none !important}
  .credo p em{background-size:100% .42em}
  .credo.in p em{animation:none !important}
  .fade{animation:none !important}
}

/* ═══ 流動感（2026-08-22）═══════════════════════════════════════════════
   老闆要「按鈕發光閃光、重點文字流動」。⛔ 但 UX 規則庫兩條 High/Medium 說：
     ①每個畫面最多動 1–2 個元素 ②無限動畫只用於載入指示器，不用於裝飾
   而這是【付款頁】—— 分心在這裡會賠錢。
   ⇒ 做法：把動效從「裝飾」變成【有意義的狀態訊號】——
     發光只在「按鈕剛變成可按」那一刻放 3 次就停；文字流動每頁只給一個重點。
   ★ 熊的走路動畫本來就有（tb-waddle 等），這裡不重造。
   ⛔ 不引入任何建置鏈：純 CSS keyframes。 */

/* ── ① 按鈕：從「不可按」變成「可按」時，發光脈動 3 次就停 ────────────── */
@keyframes tb-arm{
  0%  {box-shadow:0 0 0 0 rgba(151,52,33,.55), 0 0 0 0 rgba(151,52,33,0)}
  55% {box-shadow:0 0 0 7px rgba(151,52,33,0),  0 0 18px 2px rgba(151,52,33,.42)}
  100%{box-shadow:0 0 0 0 rgba(151,52,33,0),    0 0 0 0 rgba(151,52,33,0)}
}
/* ★ 3 次不是 infinite —— 它在說「你現在可以付了」，說完就該安靜。 */
.pay-rows:not([aria-disabled="true"]) .pay-btn:not(.locked){animation:tb-arm 1.15s ease-out 3}
/* hover/focus 的光是【持續狀態】不是動畫：使用者的手指在那裡，光就在那裡。 */
.pay-btn:not(.locked):hover,.pay-btn:not(.locked):focus-visible{
  box-shadow:0 0 16px -2px rgba(151,52,33,.5); transform:translateY(-1px)}
/* ⛔ 已鎖的通道【不可以】發光 —— 那會誘人去按一顆按不動的鍵。 */
.pay-btn.locked{animation:none !important; box-shadow:none !important}

/* ── ② 重點文字流動：每個畫面只給【一個】元素 ─────────────────────────── */
@keyframes tb-flow{to{background-position:200% center}}
/* ★★ 保命：background-clip:text 在少數瀏覽器不支援 → 文字會變全透明＝【永久消失】。
   這正是 指導01 §4 第 4 條記的那個病（.reveal{opacity:0} 沒 JS 就沒了）的同一族。
   ⇒ 用 @supports 把「讓字變透明」那兩行整段關在支援的瀏覽器裡面。 */
.tb-flow{color:var(--ink); -webkit-text-fill-color:currentColor; background:none; animation:none}
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .tb-flow{
    background:linear-gradient(90deg,
      var(--ink) 0%, var(--ink) 38%, var(--oxblood) 50%, var(--ink) 62%, var(--ink) 100%);
    background-size:200% auto; -webkit-background-clip:text; background-clip:text;
    color:transparent; -webkit-text-fill-color:transparent;
    animation:tb-flow 3.2s linear infinite;
  }
}

/* ── ③ 減少動態：全部關掉，⛔ 且文字必須回到看得見的顏色 ────────────────── */
@media (prefers-reduced-motion: reduce){
  .pay-rows .pay-btn,.pay-btn:hover,.pay-btn:focus-visible{
    animation:none !important; box-shadow:none !important; transform:none !important}
  .tb-flow{
    animation:none !important; background:none !important;
    color:var(--ink) !important; -webkit-text-fill-color:var(--ink) !important}
}