/* ═══════════════════════════════════════════════════════════════
   design-system-v4.css — 案A 深化「診斷級奢華 Diagnostic Luxury」
   底盤:art-design ember-teal(量測檔,對比全數 ≥4.5:1)
   v4 新增:等寬數字族(mono)+ 髮絲線三階 + 量測標註(.annot)+
           暖段襯線人聲(serif 子集)+ stamp/fill/count 資訊性動效 +
           art-underlay(AI 氛圍底圖,組裝層)+ .cv 長頁渲染跳過。
   規則:fragment 禁自定義 @keyframes/inline style/!important;
        只准用本檔 token 與工具類;私有 style ≤80 行且 sNN- 前綴。
   ═══════════════════════════════════════════════════════════════ */

/* ── v4 字體:標題襯線(子集 WOFF2,只嵌標題實際字元)+ 等寬數字 ──
   檔案由 tools\subset_font.py 產出;缺檔時 fallback 棧接手,不破版。 */
@font-face{
  font-family:"NotoSerifTC-Display";
  src:url("assets/fonts/noto-serif-tc-display.woff2") format("woff2");
  font-weight:600;font-style:normal;font-display:swap;
  ascent-override:88%;descent-override:24%;
}
@font-face{
  font-family:"PlexMono-Num";
  src:url("assets/fonts/plex-mono-num.woff2") format("woff2");
  font-weight:500;font-style:normal;font-display:swap;
}

:root{
  /* ── 色彩 token(禁純白純黑,一律染色中性)── */
  --bg-cool:#EDF5F3; --bg-warm:#FBEFE2; --bg-paper:#FBFAF7; --bg-blush:#FAF3EC;
  --surface:#DBEAE7; --surface-warm:#F6E9DA; --surface-paper:#F7F3EB;
  --ink:#26494C;        /* 冷段主墨(青墨) */
  --ink-warm:#3D3430;   /* 暖段主墨(暖墨) */
  --muted:#4E7375; --muted-warm:#7A6A5E;
  --accent:#A8400C; --accent-hover:#93380A; --accent-soft:#FBE3D3; --on-accent:#FFFDFB;
  --border:#C9DFDB; --border-warm:#E8DACB;
  --hairline:rgba(38,73,76,.25); --hairline-warm:rgba(61,52,48,.22);
  /* v4 髮絲線三階:1=耳語級規線(奢華分隔)2=結構分隔 3=功能邊框(=舊 hairline) */
  --hair-1:rgba(38,73,76,.08); --hair-2:rgba(38,73,76,.14); --hair-3:rgba(38,73,76,.25);
  --hair-warm-1:rgba(61,52,48,.07); --hair-warm-2:rgba(61,52,48,.13);
  --tick:rgba(38,73,76,.5); --annot:#4E7375;
  --accent-ink:#7C2F08;   /* 克制版赭墨:儀器線工/標註用,取代裝飾性橘點 */
  --sh1:rgba(124,71,50,.18); --sh2:rgba(124,71,50,.12); --sh-cool:rgba(78,115,117,.10);
  /* ── 幾何 ── */
  --r-outer:26px; --r-inner:14px; --r-pill:100px;
  --r-instr:11px; --r-instr-in:6px;  /* v4 儀器級脆角:冷段量測面板;暖情感卡維持 26px */
  --pad:clamp(20px,4vw,64px);
  --sec-pad-y:clamp(52px,7vw,96px);  /* 2026-07-31 由 clamp(64,9vw,130) 收斂:25 段×2 省下約 1700px 空白 */
  --focal-gap:clamp(72px,11vw,140px); /* v4 每屏一焦點:簽名段(07/09/20)的儀式性留白 */
  /* ── 動效(單一語彙)── */
  --ease:cubic-bezier(.76,0,.24,1);
  --dur:.42s;   /* 2026-07-31 由 .62s 收斂:長頁快速捲動時演出太久=看到空框 */
  --ease-firm:cubic-bezier(.2,1.25,.3,1); /* v4 stamp 蓋章落定:到位+極微 overshoot,不是彈跳 */
  /* ── 字體 ── */
  --sans:"Noto Sans TC","PingFang TC","Microsoft JhengHei",sans-serif;
  --serif-display:"NotoSerifTC-Display","Noto Serif TC",Georgia,"Songti TC",serif;
  --mono:"PlexMono-Num","IBM Plex Mono",ui-monospace,Menlo,Consolas,monospace;
}

*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{font-family:var(--sans);color:var(--ink-warm);background-color:var(--bg-paper);overflow-x:hidden}
img,svg{max-width:100%}
a{color:inherit}

/* ═══ 色帶(組裝層 wrapper;fragment 禁設根背景)═══ */
.band{padding:var(--sec-pad-y) var(--pad)}
.band-white{background-color:var(--bg-paper);background-image:linear-gradient(180deg,#F9F6F0 0,#FBFAF7 160px)}
.band-warm{background-color:var(--bg-warm);background-image:linear-gradient(180deg,#F9F1E6 0%,#FBEFE2 55%,#F8EDDE 100%);color:var(--ink-warm)}
.band-cool{background-color:#F1F6F4;background-image:linear-gradient(180deg,#EDF5F3 0%,#F1F6F4 60%,#F4F7F5 100%);color:var(--ink)}
.band-blush{background-color:var(--bg-blush);background-image:linear-gradient(180deg,#FBFAF7 0%,#FAF3EC 100%)}
.band-cool .kicker{color:var(--muted)} .band-cool .kicker::before{background:var(--ink)}
.band-cool .lede{color:var(--muted)}
.wrap{max-width:1080px;margin:0 auto}
.narrow{max-width:34em}
.center{text-align:center}
.center .lede{margin-left:auto;margin-right:auto;max-width:30em}

/* ═══ 排印階梯(主次差 3 倍)═══ */
.kicker{display:flex;align-items:center;gap:14px;font-size:13px;letter-spacing:.32em;color:var(--muted-warm);font-weight:500;margin-bottom:28px}
.kicker::before{content:'';width:44px;height:1px;background:var(--ink-warm);opacity:.5}
.center .kicker,.kicker.center{justify-content:center}
.display{font-size:clamp(34px,6vw,64px);line-height:1.18;font-weight:700;letter-spacing:.01em}
.display-xl{font-size:clamp(40px,7.5vw,84px);line-height:1.12;font-weight:800;letter-spacing:-.01em}
.title{font-size:clamp(22px,3.2vw,30px);line-height:1.4;font-weight:700}
.subtitle{font-size:clamp(18px,2.4vw,21px);line-height:1.55;font-weight:700}
.lede{font-size:clamp(16px,2.2vw,19px);line-height:2.1;color:var(--muted-warm);margin-top:26px}
.prose{font-size:clamp(15px,2vw,17px);line-height:2.1}
.prose p+p{margin-top:1.5em}
.fine{font-size:13.5px;line-height:1.9;color:var(--muted-warm);letter-spacing:.04em}
.rule-h{width:52px;height:1px;background:currentColor;opacity:.5}

/* ═══ v4 字體人格分裂:暖段=人聲(襯線),冷段=儀器(黑體+等寬數字)═══
   serif 只在暖段大標與金句出現——鋪滿全站=正中「米白+serif」AI 樣板,禁止。 */
.band-warm .display,.band-warm .display-xl,.band-blush .display,.band-blush .display-xl,
.serif-display{font-family:var(--serif-display);font-weight:600;letter-spacing:.02em}
.band-warm .vow,.band-blush .vow{font-family:var(--serif-display);font-weight:600}
.no-serif{font-family:var(--sans)!important}   /* 簡報指定的例外出口(組裝層/系統類,不算 fragment 技術債) */
/* 等寬數字族:一切計數/統計/索引=儀器讀數 */
.mono,.card .idx,.idx-ghost,.bignum .num,.stat .num,.tl-item .tl-n,.tier .v,[data-count]{
  font-family:var(--mono);font-variant-numeric:tabular-nums;letter-spacing:0}
/* 量測標註:Fig.01 / 15% / DAY 37 式的雕版標註 */
.annot{font-family:var(--mono);font-size:11.5px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--annot);font-weight:500}
.band-warm .annot,.band-blush .annot{color:var(--muted-warm)}
.annot b{color:var(--accent-ink);font-weight:700}
/* 髮絲規線工具(取代粗框) */
.hair-rule{height:1px;background:var(--hair-2);border:0}
.band-warm .hair-rule,.band-blush .hair-rule{background:var(--hair-warm-2)}
.hair-rule.whisper{background:var(--hair-1)}
.focal-gap{padding-top:var(--focal-gap);padding-bottom:var(--focal-gap)}

/* ═══ 卡片家族 ═══ */
.card{background-color:#FDF7EE;border:1px solid var(--border-warm);border-radius:var(--r-outer);
  padding:clamp(24px,3vw,34px);position:relative;
  box-shadow:0 2px 4px var(--sh2),0 26px 44px rgba(124,71,50,.09)}
.band-cool .card{background-color:#F5FAF8;border-color:var(--border);box-shadow:0 2px 4px var(--sh-cool),0 26px 44px rgba(78,115,117,.08)}
.card-paper{background-color:var(--surface-paper);border:1px solid var(--border-warm);border-radius:var(--r-inner);padding:18px 22px}
.card .idx,.idx-ghost{font-size:clamp(52px,7vw,72px);font-weight:800;line-height:1;opacity:.14;letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.grid-2{display:grid;grid-template-columns:1fr;gap:clamp(16px,2.4vw,26px)}
.grid-3{display:grid;grid-template-columns:1fr;gap:clamp(16px,2.4vw,26px)}
.grid-4{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(14px,2vw,22px)}
@media(min-width:880px){
  .grid-2{grid-template-columns:repeat(2,1fr)}
  .grid-3{grid-template-columns:repeat(3,1fr)}
  .grid-4{grid-template-columns:repeat(4,1fr)}
}

/* 玻璃卡(ember-teal;高價值位限量用)
   v4 補「右上壓暗」方向層:左下亮、右上暗=方向性反射,不是均勻白卡(art-design 材質鐵律) */
.glass{position:relative;border-radius:var(--r-outer);overflow:hidden;
  background-image:
    linear-gradient(300deg,rgba(38,73,76,.10) 0%,rgba(38,73,76,.04) 22%,transparent 46%),
    linear-gradient(180deg,rgba(177,146,120,.30) 0px,rgba(177,146,120,.10) 16px,transparent 40px),
    radial-gradient(ellipse 58% 52% at 34% 82%, rgba(242,248,247,.62) 0%, rgba(242,248,247,.22) 46%, transparent 72%),
    linear-gradient(62deg,#DDEBE8 0%,#DBEAE7 26%,#CAE0DC 52%,#BED8D4 78%,#B9D5D1 100%);
  box-shadow:0 2px 4px var(--sh1),0 36px 54px rgba(124,71,50,.20),0 72px 116px rgba(124,71,50,.16)}
.glass::before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;
  background:linear-gradient(180deg,rgba(245,249,248,.55),#F5F9F8 22%,#F5F9F8 76%,rgba(245,249,248,.5))}
/* 真毛玻璃(≤2 處:定價推薦卡;@supports 漸進,不支援時上面的漸層玻璃就是完整體驗) */
@supports (backdrop-filter:blur(3px)){
  .glass-live{backdrop-filter:blur(3px) saturate(1.05)}
}

/* ═══ 儀器語言(冷段/證據)═══
   v4:儀器面板改脆角(--r-instr)——冷=精準邊角,暖=柔圓角,幾何也冷暖分工 */
.instrument{background-color:#EFF5F3;
  background-image:linear-gradient(180deg,rgba(38,73,76,.045) 0,transparent 18px);
  border:1px solid var(--border);border-radius:var(--r-instr);padding:clamp(26px,4vw,46px);position:relative;
  box-shadow:0 2px 4px var(--sh-cool),0 30px 50px rgba(78,115,117,.08);color:var(--ink)}
.instrument::before,.instrument::after{content:'';position:absolute;width:22px;height:22px;border:1px solid var(--muted);opacity:.5}
.instrument::before{left:14px;top:14px;border-right:0;border-bottom:0}
.instrument::after{right:14px;bottom:14px;border-left:0;border-top:0}
.list-tick{list-style:none}
.list-tick li{font-size:14.5px;line-height:2;color:var(--muted);padding-left:20px;position:relative}
.list-tick li::before{content:'';position:absolute;left:2px;top:.95em;width:8px;height:1px;background:currentColor}
.meter{display:flex;align-items:center;gap:18px;font-size:13.5px;letter-spacing:.05em;font-variant-numeric:tabular-nums;flex-wrap:wrap}
.meter .lab{color:var(--muted)}
.dots{display:inline-flex;gap:5px;vertical-align:middle}
.dots i{width:9px;height:9px;border-radius:50%;border:1px solid currentColor;display:block}
.dots i.f{background:var(--accent);border-color:var(--accent)}

/* 垂直刻度時間軸(夜/課程/歷程) */
.timeline{position:relative;padding-left:clamp(70px,10vw,120px)}
.timeline::before{content:'';position:absolute;left:clamp(26px,4vw,46px);top:6px;bottom:6px;width:1px;background:currentColor;opacity:.28}
.tl-item{position:relative;padding:clamp(14px,2.4vw,22px) 0}
.tl-item::before{content:'';position:absolute;left:calc(clamp(26px,4vw,46px) - clamp(70px,10vw,120px) - 3.5px);top:50%;width:8px;height:8px;border-radius:50%;background:var(--bg-warm);border:1.5px solid currentColor;transform:translateY(-50%)}
.tl-item .tl-n{position:absolute;left:calc(clamp(26px,4vw,46px) - clamp(70px,10vw,120px) - 3.5px);top:50%;transform:translate(-110%,-50%);font-size:clamp(22px,3.4vw,34px);font-weight:800;letter-spacing:-.02em;font-variant-numeric:tabular-nums;line-height:1;white-space:nowrap}
.tl-item p{font-size:clamp(15px,2vw,17.5px);line-height:1.9;color:var(--muted-warm)}
.band-cool .tl-item p{color:var(--muted)}

/* 引言/情感段 */
.vigil{border-left:1px solid var(--border-warm);padding-left:clamp(20px,3vw,36px)}
.vigil p{font-size:clamp(15.5px,2vw,18px);line-height:2.25;opacity:.88}
.vigil p+p{margin-top:1.6em}
.vow{font-size:clamp(17px,2.5vw,21.5px);line-height:2.1;font-weight:500}
.bridge{display:flex;gap:16px;align-items:flex-start}
.bridge::before{content:'';flex:0 0 10px;height:10px;border-radius:50%;background:var(--accent);margin-top:.65em}
.bridge p{font-size:clamp(15px,2vw,17px);line-height:2;color:var(--muted-warm)}
.callout{padding:18px 22px;background-color:rgba(168,64,12,.06);border-left:2px solid var(--accent);border-radius:0 var(--r-inner) var(--r-inner) 0;font-size:14.5px;line-height:1.95}

/* 大數字/統計 */
.bignum .cap{font-size:13.5px;letter-spacing:.2em;color:var(--muted)}
.bignum .num{font-size:clamp(44px,6.6vw,66px);font-weight:800;letter-spacing:-.02em;line-height:1.15}
.bignum .under{font-size:14px;color:var(--muted);margin-top:6px}
.stat-row{display:flex;gap:clamp(20px,4vw,56px);flex-wrap:wrap}
.stat .num{font-size:clamp(34px,5vw,52px);font-weight:800;line-height:1.1;letter-spacing:-.02em}
.stat .cap{font-size:13px;letter-spacing:.14em;color:var(--muted-warm);margin-top:8px}

/* ═══ 學員/導師圓形頭像(2026-07-31 補回原站素材)═══
   紀律:①固定尺寸避免版位跳動 ②lazy 載入 ③載入失敗自動退回姓名首字(CSS ::after,
   不進 DOM 文字所以不影響文字保全檢查)④alt 文字設透明,失敗時不會露出破圖字。 */
.avatar-wrap{position:relative;flex:0 0 auto;display:block;
  width:var(--av,56px);height:var(--av,56px);border-radius:50%;overflow:hidden;
  background:var(--surface-paper);border:1px solid var(--border-warm);
  box-shadow:0 1px 2px var(--sh2),0 6px 14px rgba(124,71,50,.10)}
.band-cool .avatar-wrap{background:var(--surface);border-color:var(--border);box-shadow:0 1px 2px var(--sh-cool),0 6px 14px rgba(78,115,117,.10)}
.avatar-wrap::after{content:attr(data-initial);position:absolute;inset:0;z-index:0;
  display:flex;align-items:center;justify-content:center;
  font-size:calc(var(--av,56px)*.38);font-weight:700;color:var(--muted-warm);letter-spacing:0}
.avatar{position:relative;z-index:1;display:block;width:100%;height:100%;
  object-fit:cover;color:transparent;font-size:0}
.avatar-wrap.avatar-fail .avatar{display:none}
.avatar-row{display:flex;align-items:center;gap:clamp(12px,2vw,16px)}
.avatar-row>div{min-width:0}

/* 徽章/標籤 */
.tag{display:inline-block;font-size:12.5px;letter-spacing:.26em;color:var(--muted-warm);border:1px solid var(--border-warm);border-radius:var(--r-pill);padding:7px 16px}
.tag-accent{color:var(--accent);border-color:rgba(168,64,12,.35);background:rgba(251,227,211,.5)}
.band-cool .tag{color:var(--muted);border-color:var(--border)}

/* 勾列表(設計化 ✓,禁 emoji) */
.list-check{list-style:none}
.list-check li{display:flex;gap:12px;align-items:flex-start;font-size:15px;line-height:1.9;padding:9px 0;border-top:1px solid rgba(232,218,203,.6)}
.list-check li::before{content:'';flex:0 0 14px;height:8px;margin-top:.55em;border-left:1.6px solid var(--accent);border-bottom:1.6px solid var(--accent);transform:rotate(-45deg)}
.band-cool .list-check li{border-top-color:rgba(38,73,76,.12)}

/* ═══ CTA 三級(E5 遞進;文案=原文逐字)═══ */
.cta-quiet{display:inline-block;font-size:15.5px;font-weight:500;color:var(--ink-warm);text-decoration:none;
  border-bottom:1px solid var(--accent);padding-bottom:3px;letter-spacing:.04em}
.cta-card{display:inline-flex;align-items:center;gap:10px;font-size:15.5px;font-weight:700;color:var(--ink-warm);text-decoration:none;
  border:1px solid var(--border-warm);border-radius:var(--r-pill);padding:14px 26px;background-color:rgba(253,247,238,.8);
  box-shadow:0 2px 4px var(--sh2)}
.cta-card::before{content:'';width:8px;height:8px;border-radius:50%;background:var(--accent)}
.cta-bloom{display:inline-block;background-color:var(--accent);color:var(--on-accent);
  font-size:16.5px;font-weight:700;letter-spacing:.05em;text-decoration:none;
  padding:17px 34px;border-radius:var(--r-pill);
  box-shadow:0 2px 4px rgba(124,47,8,.3),0 14px 30px rgba(168,64,12,.28)}
.cta-bloom small{display:block;font-weight:400;font-size:12px;opacity:.85;letter-spacing:.12em;margin-top:3px}
.cta-center{text-align:center}

/* 費率/小卡格(v4:量測讀數卡=脆角) */
.tier{background-color:var(--surface-paper);border:1px solid var(--border-warm);border-radius:var(--r-instr);padding:18px 14px;text-align:center}
.tier.star{background-color:var(--accent-soft);border-color:rgba(168,64,12,.3)}
.tier .k{font-size:13px;letter-spacing:.14em;color:var(--muted-warm)}
.tier .v{font-size:clamp(17px,2vw,19px);font-weight:800;margin-top:8px;line-height:1.3}
.tier .z{font-size:11.5px;color:var(--muted-warm);margin-top:8px;letter-spacing:.06em}
.tier.star .k,.tier.star .z{color:#8C3A14}.tier.star .v{color:var(--accent)}
.tier-grid-6{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
@media(min-width:880px){.tier-grid-6{grid-template-columns:repeat(6,1fr)}}

/* ═══ 幕間分隔頁(組裝層專用)═══ */
/* 2026-07-31 收斂:原 52vh + 110px padding 卻只畫一條髮絲線(墨線僅佔 0-13%),
   六個過場頁 ×半個螢幕 = 用戶回報的「很高卻很空」主因。改為 28vh + 母題放大畫滿。 */
/* min-height 一律不設:容器高度由圖形本身+呼吸留白決定,不再有「框比圖高」的空洞。
   motif 用 height:auto 貼合 viewBox 比例(寫死高度會讓 SVG 上下留黑邊式空白)。 */
.act-divider{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:22px;
  padding:clamp(34px,5vw,62px) var(--pad);position:relative;overflow:hidden}
.act-divider .motif{width:min(560px,82vw);height:auto;display:block}
.act-divider .motif line,.act-divider .motif path,.act-divider .motif circle{vector-effect:non-scaling-stroke}
.act-divider .act-no{font-size:12px;letter-spacing:.5em;color:var(--muted-warm);text-transform:uppercase}
/* 幕縫邊緣光縫(留人鉤) */
.band+.act-divider::before,.act-divider+.band::before{content:''}
.seam{height:1px;background:linear-gradient(90deg,transparent,rgba(245,249,248,.9),transparent);position:relative}

/* ═══ 全頁 shell(組裝層專用)═══ */
.shell-progress{position:sticky;top:0;z-index:60;height:3px;background:rgba(61,52,48,.08)}
.shell-progress .bar{height:100%;width:0;background:linear-gradient(90deg,var(--ink-warm),var(--accent));transition:width .15s linear}
.shell-rail-wrap{position:absolute;right:10px;top:0;bottom:0;pointer-events:none;display:none;z-index:55}
@media(min-width:1024px){.shell-rail-wrap{display:block}}
.shell-rail{position:sticky;top:38vh;display:flex;flex-direction:column;gap:6px;pointer-events:auto;padding:8px}
.shell-rail a{width:20px;height:20px;min-width:0;min-height:0;position:relative;display:block}
.shell-rail a::before{content:'';position:absolute;inset:5.5px;border-radius:50%;border:1.5px solid var(--muted-warm)}
.shell-rail a.on::before{background:var(--accent);border-color:var(--accent);transform:scale(1.2)}
.grain{position:fixed;inset:0;pointer-events:none;z-index:70;opacity:.03;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E")}

/* ═══ v4 AI 氛圍底圖(組裝層 band 注入;fragment 永不碰)═══
   .has-art 的內容自動抬到底圖之上;veil 依色帶壓低對比保標題可讀;無圖=band 漸層即完整體驗 */
.has-art{position:relative}
.has-art>*{position:relative;z-index:1}
.has-art>.art-underlay,.has-art>.art-veil{z-index:0}
.art-underlay{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none}
.art-veil{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(251,250,247,.9) 0%,rgba(251,250,247,.72) 42%,rgba(251,250,247,.96) 100%)}
.band-warm .art-veil{background:linear-gradient(180deg,rgba(251,239,226,.9) 0%,rgba(251,239,226,.72) 42%,rgba(248,237,222,.96) 100%)}
.band-cool .art-veil{background:linear-gradient(180deg,rgba(237,245,243,.9) 0%,rgba(237,245,243,.72) 42%,rgba(244,247,245,.96) 100%)}
.band-blush .art-veil{background:linear-gradient(180deg,rgba(251,250,247,.9) 0%,rgba(250,243,236,.72) 42%,rgba(250,243,236,.96) 100%)}

/* ═══ v4 長頁效能:離屏渲染跳過(組裝層依 cv_from 掛;首 2-3 屏不套)═══ */
@supports (content-visibility:auto){
  .cv{content-visibility:auto}
}

/* ═══ Reveal 系統(單一語彙;JS 掛 html.js 才隱藏 → 無 JS 全在場)═══ */
html.js [data-reveal]{opacity:0;transform:translateY(18px);
  transition:opacity var(--dur) var(--ease),transform var(--dur) var(--ease)}
html.js [data-reveal].in{opacity:1;transform:none}
/* maskup:大標上推(外層自帶裁切) */
html.js [data-reveal="maskup"]{transform:translateY(0);opacity:1}
html.js [data-reveal="maskup"] .mask-line{display:block;overflow:hidden}
html.js [data-reveal="maskup"] .mask-line>span{display:block;transform:translateY(110%);transition:transform .55s var(--ease)}
html.js [data-reveal="maskup"].in .mask-line>span{transform:none}
html.js [data-reveal="maskup"] .mask-line:nth-child(2)>span{transition-delay:calc(var(--dur)*.16)}
/* stagger:子元素交錯(僅幕V 列表段准用) */
html.js [data-reveal="stagger"]{opacity:1;transform:none}
html.js [data-reveal="stagger"]>*{opacity:0;transform:translateY(16px);
  transition:opacity var(--dur) var(--ease),transform var(--dur) var(--ease);
  transition-delay:calc(var(--i,0)*var(--dur)*.07)}
html.js [data-reveal="stagger"].in>*{opacity:1;transform:none}
/* light:光帶掃過(全頁限 2 次:hero+幕IV) */
html.js [data-reveal="light"]{opacity:1;transform:none;position:relative;overflow:hidden}
html.js [data-reveal="light"]::after{content:'';position:absolute;top:0;bottom:0;left:-40%;width:34%;
  background:linear-gradient(105deg,transparent,rgba(255,253,250,.75),transparent);
  transform:skewX(-14deg) translateX(-120%);pointer-events:none}
html.js [data-reveal="light"].in::after{transition:transform 1.15s var(--ease) .15s;transform:skewX(-14deg) translateX(460%)}
/* bloom:原地綻放(定價推薦卡/最終 CTA 專用) */
html.js [data-reveal="bloom"]{transform:scale(.96);transition:opacity var(--dur) var(--ease),transform .6s var(--ease)}
html.js [data-reveal="bloom"].in{transform:scale(1)}
/* wipe:擦除揭示(CTA「本來就在」,禁淡入的正解) */
html.js [data-reveal="wipe"]{opacity:1;transform:none;clip-path:inset(0 100% 0 0);transition:clip-path .6s var(--ease)}
html.js [data-reveal="wipe"].in{clip-path:inset(0 0 0 0)}
/* ── v4 stamp:蓋章落定(退費承諾/診斷結果/最終判定;firm 到位+極微 overshoot,不是彈跳) ── */
html.js [data-reveal="stamp"]{opacity:0;transform:scale(1.06);
  transition:opacity .3s var(--ease),transform .55s var(--ease-firm)}
html.js [data-reveal="stamp"].in{opacity:1;transform:scale(1)}
/* ── v4 fill:儀表填充(scaleX 非 width,零 layout;恐懼段單向、禁紅閃) ── */
html.js [data-fill]{transform:scaleX(0);transform-origin:left center;transition:transform .7s var(--ease)}
html.js [data-fill].in{transform:scaleX(1)}
/* ── v4 count:數字滾動由 runtime 驅動;此處只保寬度不抖(定寬在 runtime 量測後寫入) ── */
[data-count]{display:inline-block;text-align:inherit}
/* draw:髮絲線/SVG 描線(儀器動作,唯一准 linear)
   ⚠️ --len 由 runtime.js 用 getTotalLength() 逐條量測後寫入(2026-07-31 修)。
   fallback 800 只在 JS 尚未跑到時短暫生效;量測失敗會寫 --len:0 → 下方 [style*="--len:0"] 規則直接顯示。 */
html.js .draw path,html.js .draw line,html.js .draw circle,
html.js .draw rect,html.js .draw polyline,html.js .draw polygon,html.js .draw ellipse{
  stroke-dasharray:var(--len,800);stroke-dashoffset:var(--len,800);transition:stroke-dashoffset .5s linear}
html.js .draw.in path,html.js .draw.in line,html.js .draw.in circle,
html.js .draw.in rect,html.js .draw.in polyline,html.js .draw.in polygon,html.js .draw.in ellipse{stroke-dashoffset:0}
/* 量測失敗保底:不做描線動畫,直接完整可見(寧可少動效也不留空白) */
html.js .draw [style*="--len:0"]{stroke-dasharray:none!important;stroke-dashoffset:0!important}

/* 減速偏好/截圖:全在場(v4 新語彙 stamp/fill/count 一併設終態) */
@media(prefers-reduced-motion:reduce){
  html.js [data-reveal],html.js [data-reveal]>*,html.js [data-reveal="stagger"]>*,html.js [data-reveal="maskup"] .mask-line>span{opacity:1!important;transform:none!important;transition:none!important;clip-path:none!important}
  html.js .draw *{stroke-dashoffset:0!important;stroke-dasharray:none!important;transition:none!important}
  html.js [data-reveal="light"]::after{display:none}
  html.js [data-fill]{transform:scaleX(1)!important;transition:none!important}
}
html.cap [data-reveal],html.cap [data-reveal]>*,html.cap [data-reveal="stagger"]>*{opacity:1!important;transform:none!important;transition:none!important;clip-path:none!important}
html.cap [data-reveal="maskup"] .mask-line>span{transform:none!important;transition:none!important}
html.cap .draw *{stroke-dashoffset:0!important;stroke-dasharray:none!important;transition:none!important}
html.cap [data-reveal="light"]::after{display:none}
html.cap [data-fill]{transform:scaleX(1)!important;transition:none!important}
html.cap .shell-progress .bar{width:38%}
html.cap .cv{content-visibility:visible!important}

/* ═══ 通用紀律 ═══ */
.tap{min-height:44px;min-width:44px}
button.tap,a.tap{cursor:pointer}
::selection{background:var(--accent-soft)}