/* ═══════════════════════════════════════════════════════════
   Falcode — Neubrutalism（硬邊粗框）
   方向承諾見 _direction-commitment.md，2026-08-04 定案。

   招牌元素：每個容器都是 3px 純黑硬框 + 5px 5px 0 實心偏移陰影。
   零模糊、零漸層、直角。互動時方塊往陰影方向位移，像實體按鈕被壓下去。

   刻意違反的 AI 破綻清單項目（已在承諾文件書面記錄例外）：
   - 純黑 #000：Neubrutalism 的核心規格就是硬黑框，換深灰會讓方向失效
   - 超大 H1：巨字是這個方向的骨幹，服務於方向而非為大而大
   ═══════════════════════════════════════════════════════════ */

:root{
  /* 底：暖米白。純白在大面積會顯得廉價，且黑框壓上去太刺 */
  --bg:#FBF7EF;
  --paper:#FFFFFF;
  /* 墨：真黑。這是刻意的例外，見上方說明 */
  --ink:#000000; --ink-surface:#161311;
  --ink-2:#2B2B2B;
  --ink-3:#5A5A5A;          /* 次要文字，對米白底 7.4:1 */
  /* 強調：品牌橘紅。整站只有這一個主強調色 */
  --accent:#E8623D;
  --accent-ink:#B8401C;     /* 小字用的深版，對淺底通過 AA */
  /* 輔助跳色，克制使用：只出現在標記與區塊底，不用在文字 */
  --pop-sun:#F5C542;
  --pop-sea:#1B4F8C;
  --pop-mint:#7FBFA8;

  /* 這個方向的核心變數 */
  --bw:3px;                 /* 邊框粗細 */
  --off:5px;                /* 陰影偏移 */
  --hard:var(--off) var(--off) 0 var(--ink);
  --hard-sm:3px 3px 0 var(--ink);
  --hard-lg:8px 8px 0 var(--ink);

  /* 動態：短、直接、不回彈。Neubrutalism 不做 spring */
  --snap:180ms cubic-bezier(.2,0,0,1);

  --display:'Anton',Impact,'Haettenschweiler','Arial Narrow',sans-serif;
  --sans:-apple-system,BlinkMacSystemFont,'Segoe UI','Noto Sans TC',sans-serif;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:var(--sans);
  background:var(--bg);
  color:var(--ink-2);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

/* 背景：平的。原本的漸層光斑與飄浮微粒都拿掉了 ——
   漸層違反這個方向，微粒是 AI 破綻清單上的 decorative dots。
   取而代之的是一層極淡的網格，純幾何、零效能成本。 */
.ambient{
  position:fixed;inset:0;z-index:0;pointer-events:none;
  background:var(--bg);
  background-image:
    linear-gradient(to right,rgba(0,0,0,.045) 1px,transparent 1px),
    linear-gradient(to bottom,rgba(0,0,0,.045) 1px,transparent 1px);
  background-size:48px 48px;
}
.ambient span{display:none}   /* 舊的光斑元素，保留標籤但不顯示 */


/* ═══════════════════════════════════════════════════════════
   招牌元素：羅盤導航（2026-08-04）

   Falcode 的 logo 是羅盤，所以讓它真的當羅盤用 —— 指針隨捲動旋轉，
   指向目前所在的區塊，旁邊顯示區塊名稱。

   為什麼是這個而不是別的巧思：
   - 綁在品牌上，競爭對手換掉文案跟 logo 也抄不走（稽核第五題：模板測試）
   - 是功能不是裝飾，它取代了原本那條沒人會注意的細進度條
   - 有明確的截圖候選（稽核第三題）
   - 遵守 Anthropic 的「一個編排過的動態時刻，勝過散落各處的效果」
   ═══════════════════════════════════════════════════════════ */
.compass{
  position:fixed;left:24px;bottom:24px;z-index:150;
  display:flex;align-items:center;gap:0;
  background:var(--paper);
  border:var(--bw) solid var(--ink);
  box-shadow:var(--hard);
  pointer-events:none;
  opacity:0;transform:translateY(10px);
  transition:opacity var(--enter) var(--mifb),transform var(--enter) var(--mifb);
}
.compass.on{opacity:1;transform:none}
.compass-dial{
  width:52px;height:52px;flex:none;display:block;
  border-right:var(--bw) solid var(--ink);
}
/* 指針：轉動要有阻尼感，像真的磁針在找北，不是瞬間跳過去 */
.compass-needle{
  transform-origin:50% 50%;
  transition:transform 620ms cubic-bezier(.34,1.1,.5,1);
}
.compass-label{
  padding:0 12px;
  font-family:ui-monospace,SFMono-Regular,'SF Mono',Menlo,monospace;
  font-size:.64rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink);white-space:nowrap;
}
.compass-pct{color:var(--accent-ink);margin-left:.5em}
@media (max-width:640px){
  .compass{left:12px;bottom:12px}
  .compass-dial{width:42px;height:42px}
  .compass-label{padding:0 9px;font-size:.58rem;letter-spacing:.08em}
}

/* ── 版面 ─────────────────────────────────────────────── */
.page{position:relative;z-index:10}

/* 原本的細進度條已由羅盤取代（羅盤同時顯示進度與區塊名稱，資訊更多）。
   標籤留著但不顯示，避免 JS 找不到元素。 */
.progress{display:none}

/* ── 導覽列 ───────────────────────────────────────────── */
header{position:fixed;top:0;left:0;right:0;z-index:100;pointer-events:none}
nav{padding:18px 5%;display:flex;justify-content:space-between;align-items:flex-start;gap:1rem}
.logo,.nav-links{
  pointer-events:all;
  background:var(--paper);
  border:var(--bw) solid var(--ink);
  box-shadow:var(--hard-sm);
  border-radius:0;
}
.logo{
  display:flex;align-items:center;gap:9px;
  padding:9px 14px;text-decoration:none;
  font-size:.95rem;font-weight:900;letter-spacing:.02em;color:var(--ink);
  transition:transform var(--snap),box-shadow var(--snap);
}
.logo:hover{transform:translate(-2px,-2px);box-shadow:var(--hard)}
.nav-links{display:flex;align-items:center;gap:0;padding:0;overflow:hidden}
.nav-links a{
  /* MIFB 規定互動元素點擊區至少 40x40，原本 11px 內距只有 38px 高 */
  display:flex;align-items:center;justify-content:center;
  min-height:44px;min-width:44px;      /* 中文只有兩個字時寬度會不足 40 */
  padding:0 15px;
  font-size:.72rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink);text-decoration:none;
  border-right:var(--bw) solid var(--ink);
  transition:background var(--snap),color var(--snap);
}
.nav-links a:last-child{border-right:none}
.nav-links a:hover{background:var(--pop-sun)}
.nav-links a.active{background:var(--accent);color:var(--paper)}
.nav-links a:focus-visible{outline:none;background:var(--pop-sea);color:var(--paper)}
@media (max-width:640px){
  nav{padding:12px 4%}
  .logo{padding:8px 10px;font-size:.85rem;gap:6px}
  .logo .wordmark{display:none}
  .nav-links a{padding:0 9px;min-height:42px;font-size:.6rem;letter-spacing:.02em}
}

/* ── 巨字排版 ─────────────────────────────────────────────
   窄體 + 全大寫 + 遠超常規字級 + 負字距。字重 400 —— 窄體本身
   就夠有存在感，加粗會糊掉。（實測 dontboardme 260px/400、
   champions4good 281px/400、banhmivietnam 84px/700） */
.display{
  font-family:var(--display);
  font-weight:400;text-transform:uppercase;
  letter-spacing:-.03em;line-height:.84;
  color:var(--ink);display:block;
}
.sec-title{margin-bottom:1.2rem}
.sec-title .display{font-size:clamp(2.6rem,9vw,7.5rem)}
.sec-zh{
  display:inline-block;
  font-size:clamp(1rem,2vw,1.35rem);font-weight:800;line-height:1.35;
  color:var(--paper);background:var(--ink);
  padding:.32em .6em;margin-top:.8rem;
}
.sec-head{max-width:820px;margin:0 auto clamp(2.6rem,5vw,4rem);padding:0 5%}
.sec-head p{font-size:.98rem;line-height:1.85;color:var(--ink-2);max-width:60ch}

/* ── Hero：滿版 ───────────────────────────────────────── */
.hero-full{
  position:relative;min-height:100svh;width:100%;
  display:flex;align-items:flex-end;
  padding:0 0 clamp(2.5rem,7vh,5rem);overflow:hidden;
}
.hero-media{position:absolute;inset:0;z-index:0;background:var(--pop-sea)}
.hero-media picture,.hero-media video{position:absolute;inset:0;display:block}
.hero-media video,.hero-media img{width:100%;height:100%;object-fit:cover;display:block}
.hero-media video{opacity:0;transition:opacity .5s linear}
.hero-media video.ready{opacity:1}
/* 遮罩：兩道疊加。文字靠左，而照片左上是最亮的天空，
   只靠由下往上的那道會讓巨字對比掉到 1.45（門檻 3.0）。 */
.hero-media::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(to right,rgba(0,0,0,.80) 0%,rgba(0,0,0,.66) 35%,
                    rgba(0,0,0,.44) 60%,rgba(0,0,0,.12) 85%,rgba(0,0,0,0) 100%),
    linear-gradient(to top,rgba(0,0,0,.46) 0%,rgba(0,0,0,.22) 30%,
                    rgba(0,0,0,.04) 58%,rgba(0,0,0,.26) 100%);
}
@media (max-width:640px){
  .hero-media::after{
    background:linear-gradient(to top,rgba(0,0,0,.80) 0%,rgba(0,0,0,.54) 42%,
                               rgba(0,0,0,.38) 72%,rgba(0,0,0,.46) 100%);
  }
}
.hero-inner{position:relative;z-index:2;width:100%;padding:0 5%;color:var(--paper)}
.hero-title .display{
  font-size:clamp(3rem,14vw,12rem);color:var(--paper);
}
.hero-zh{
  display:inline-block;
  font-family:var(--sans);
  font-size:clamp(1rem,2.4vw,1.7rem);font-weight:800;line-height:1.35;
  color:var(--ink);background:var(--accent);
  padding:.3em .55em;margin-top:.9rem;
  border:var(--bw) solid var(--ink);box-shadow:var(--hard-sm);
}
.hero-lead{
  font-size:clamp(.94rem,1.4vw,1.08rem);line-height:1.75;
  color:var(--paper);max-width:38ch;margin:1.4rem 0 1.8rem;
  font-weight:600;
}
.hero-actions{display:flex;flex-wrap:wrap;gap:.9rem;align-items:center}

/* ── 按鈕：實體感。按下去真的往陰影方向沉 ─────────────── */
.btn,.btn-light,.btn-ghost,.btn-outline,.submit-btn{
  display:inline-block;
  font-family:var(--sans);
  font-size:.86rem;font-weight:800;letter-spacing:.02em;
  text-decoration:none;text-align:center;cursor:pointer;
  padding:13px 26px;border-radius:0;
  border:var(--bw) solid var(--ink);
  box-shadow:var(--hard);
  transition:transform var(--snap),box-shadow var(--snap),background var(--snap);
}
.btn,.btn-light{background:var(--accent);color:var(--paper)}
.btn-ghost{background:var(--paper);color:var(--ink)}
.btn-outline{background:var(--pop-sun);color:var(--ink)}
.submit-btn{background:var(--accent);color:var(--paper);width:100%;margin-top:1.4rem}

.btn:hover,.btn-light:hover,.btn-ghost:hover,.btn-outline:hover,
.submit-btn:hover:not(:disabled){
  transform:translate(-2px,-2px);box-shadow:var(--hard-lg);
}
/* 按下去：方塊移到陰影的位置，陰影歸零 —— 實體按鈕被壓平的感覺 */
.btn:active,.btn-light:active,.btn-ghost:active,.btn-outline:active,
.submit-btn:active:not(:disabled){
  transform:translate(var(--off),var(--off));box-shadow:0 0 0 var(--ink);
}
.btn:focus-visible,.btn-light:focus-visible,.btn-ghost:focus-visible,
.btn-outline:focus-visible,.submit-btn:focus-visible{
  outline:var(--bw) solid var(--pop-sea);outline-offset:3px;
}
.submit-btn:disabled{background:#D8D2C8;color:#6A6A6A;box-shadow:var(--hard-sm);cursor:not-allowed}

/* ── 通用硬框卡片 ─────────────────────────────────────── */
.card,.gcard,.tool,.step,.review,.split-media{
  background:var(--paper);
  border:var(--bw) solid var(--ink);
  border-radius:0;
  box-shadow:var(--hard);
}

/* ── 卡片（表單容器等） ───────────────────────────────── */
.card{
  position:relative;padding:38px 34px;max-width:560px;width:100%;
  opacity:0;transform:translateY(24px);
  transition:opacity .5s var(--snap),transform .5s var(--snap);
}
.card.vis{opacity:1;transform:none}
.card h2{font-size:clamp(1.4rem,3vw,2rem);font-weight:900;color:var(--ink);margin-bottom:.8rem}
.card p{font-size:.94rem;line-height:1.85;color:var(--ink-2);margin-bottom:.7rem}
.card p strong{color:var(--ink);font-weight:800}
.divider{width:64px;height:6px;background:var(--accent);margin:16px 0;border:none}
@media (max-width:640px){ .card{padding:26px 20px} }

/* ── 不對稱網格 ───────────────────────────────────────────
   DESIGN_VARIANCE 8 不允許整齊的等寬區塊 —— 稽核第六題會檢查
   「variance 8 卻是一致的置中區塊」直接判失敗。而「三張等寬
   功能卡」本身也在 AI 破綻清單上。所以卡片大小刻意不一致。 */
.card-grid{
  display:grid;gap:26px;
  grid-template-columns:repeat(6,1fr);
  max-width:1240px;margin:0 auto;padding:0 5%;
}
.card-grid>*{grid-column:span 2}
/* 五張課程卡：前兩張各佔一半，後三張各三分之一 */
.card-grid>*:nth-child(1),
.card-grid>*:nth-child(2){grid-column:span 3}
/* 四張服務卡：第一張佔三分之二，其餘平分 —— 打破整齊感 */
.card-grid.of-4>*:nth-child(1){grid-column:span 4}
.card-grid.of-4>*:nth-child(2){grid-column:span 2}
.card-grid.of-4>*:nth-child(3),
.card-grid.of-4>*:nth-child(4){grid-column:span 3}
@media (max-width:900px){
  .card-grid{grid-template-columns:repeat(2,1fr)}
  .card-grid>*,
  .card-grid>*:nth-child(1),
  .card-grid>*:nth-child(2),
  .card-grid.of-4>*:nth-child(1),
  .card-grid.of-4>*:nth-child(2),
  .card-grid.of-4>*:nth-child(3),
  .card-grid.of-4>*:nth-child(4){grid-column:span 2}
}

.grid-section{padding:clamp(4.5rem,12vh,8rem) 0}

/* ── 內容圖卡 ─────────────────────────────────────────── */
.gcard{
  display:flex;flex-direction:column;overflow:hidden;
  opacity:0;transform:translateY(24px);
  transition:opacity .45s var(--snap),transform .45s var(--snap),
             box-shadow var(--snap);
}
.gcard.vis{opacity:1;transform:none}
.gcard:hover{transform:translate(-3px,-3px);box-shadow:var(--hard-lg)}
.gcard-media{
  position:relative;aspect-ratio:16/7;width:100%;
  border-bottom:var(--bw) solid var(--ink);overflow:hidden;
}
.gcard-media img{width:100%;height:100%;object-fit:cover;display:block}
/* 沒有照片時：平塗色塊 + 幾何標記。這個方向本來就不靠照片。 */
.gcard-media .ph{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  background:var(--pop-sun);
  font-family:var(--display);font-size:2.6rem;color:var(--ink);
  text-transform:uppercase;letter-spacing:-.02em;
}
.gcard:nth-child(2n) .gcard-media .ph{background:var(--pop-mint)}
.gcard:nth-child(3n) .gcard-media .ph{background:var(--accent);color:var(--paper)}
.gcard:nth-child(4n) .gcard-media .ph{background:var(--pop-sea);color:var(--paper)}
.gcard-body{padding:22px 22px 26px;flex:1;display:flex;flex-direction:column}
.gcard-body h3{
  font-size:1.2rem;font-weight:900;line-height:1.25;
  color:var(--ink);margin-bottom:.5rem;
}
.gcard-meta{
  display:inline-block;align-self:flex-start;
  font-size:.66rem;font-weight:900;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink);background:var(--pop-sun);
  border:2px solid var(--ink);padding:3px 8px;margin-bottom:.85rem;
}
.gcard-body p{font-size:.9rem;line-height:1.8;color:var(--ink-2);margin-bottom:.8rem}
.gcard details{margin-top:auto;padding-top:.7rem;border-top:2px solid var(--ink)}
.gcard details summary{
  min-height:40px;align-items:center;
  font-size:.76rem;font-weight:900;letter-spacing:.05em;color:var(--accent-ink);
  cursor:pointer;list-style:none;display:flex;align-items:center;gap:.35rem;
  text-transform:uppercase;
}
.gcard details summary::-webkit-details-marker{display:none}
.gcard details summary::after{content:'＋'}
.gcard details[open] summary::after{content:'－'}
.gcard details p{margin-top:.7rem;font-size:.86rem}
.gcard details summary:focus-visible{outline:2px solid var(--pop-sea);outline-offset:2px}

/* ── 標籤 ─────────────────────────────────────────────── */
.tags{display:flex;flex-wrap:wrap;gap:7px;margin-top:14px}
.tag{
  font-size:.72rem;font-weight:800;color:var(--ink);
  background:var(--paper);border:2px solid var(--ink);
  padding:4px 9px;border-radius:0;
  transition:background var(--snap),transform var(--snap);
}
.tag:hover{background:var(--pop-sun);transform:translate(-1px,-1px)}

/* ── 關於區：左圖右文 ─────────────────────────────────── */
.split{
  display:grid;gap:clamp(1.8rem,4vw,3.4rem);align-items:center;
  grid-template-columns:1fr;
  max-width:1180px;margin:0 auto;padding:clamp(4.5rem,11vh,7.5rem) 5%;
}
@media (min-width:900px){ .split{grid-template-columns:.8fr 1fr} }
.split-media{
  position:relative;aspect-ratio:4/5;overflow:hidden;
  opacity:0;transform:translateY(24px);
  transition:opacity .5s var(--snap),transform .5s var(--snap);
}
.split.vis .split-media{opacity:1;transform:none}
.split-media img{width:100%;height:100%;object-fit:cover;display:block}
.split-media .ph{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  background:var(--pop-sea);color:var(--paper);
  font-family:var(--display);font-size:3rem;text-transform:uppercase;
}
.split-body{opacity:0;transform:translateY(20px);
  transition:opacity .5s var(--snap) .08s,transform .5s var(--snap) .08s}
.split.vis .split-body{opacity:1;transform:none}
.split-body p{font-size:.96rem;line-height:1.9;color:var(--ink-2);margin-bottom:.9rem}
/* 標籤列跟按鈕原本完全貼在一起（實測 0px），其他每一段都有 14-19px。
   按鈕的硬陰影往下 5px，會吃掉下方的間隔，所以上下都要留。
   注意按鈕是 inline-block，margin 不會跟下一段合併而是直接相加，
   下面那段本身已有 16px，這裡只補 8px（合計 24px，扣陰影後視覺 19px）。 */
.split-body .tags{margin-bottom:1.4rem}
.split-body .tags + .btn{margin-bottom:.5rem}

/* ── 色帶區塊：實心色塊 + 硬框，不是漸層柔邊 ───────────── */
.band{
  position:relative;
  background:var(--pop-sun);
  border-top:var(--bw) solid var(--ink);
  border-bottom:var(--bw) solid var(--ink);
  margin-top:clamp(2rem,6vh,4rem);
}

/* ── 滿版橫幅 ─────────────────────────────────────────── */
.banner{
  position:relative;display:flex;align-items:center;justify-content:center;
  min-height:clamp(300px,46vh,480px);overflow:hidden;
  margin:clamp(2.5rem,6vh,4.5rem) 0;
  border-top:var(--bw) solid var(--ink);
  border-bottom:var(--bw) solid var(--ink);
  background:var(--accent);
}
.banner-media{position:absolute;inset:0;z-index:0}
.banner-media img{width:100%;height:100%;object-fit:cover;display:block}
.banner-media .ph{display:none}
.banner-text{
  /* 靠左不置中：DESIGN_VARIANCE 8 下置中排版要有理由，這裡沒有。
     置中時 688px 的文字落在 1265px 的色帶裡，左右各空一大片。 */
  position:relative;z-index:2;text-align:left;padding:0 6%;
  max-width:min(100%,980px);margin-right:auto;
  opacity:0;transform:translateY(18px);
  transition:opacity .6s var(--snap),transform .6s var(--snap);
}
.banner.vis .banner-text{opacity:1;transform:none}
/* 英文巨字負責份量，中文負責看得懂 —— 跟全站 .sec-title 同一套雙層結構。
   白字壓在橘底是 3.36，只有大字（>=24px）才過 AA 的 3.0 門檻，
   所以這一層的字級下限刻意設在 2rem。 */
.banner-en{
  margin:0 0 .8rem;
  font-family:var(--display);font-weight:400;text-transform:uppercase;
  font-size:clamp(2rem,6vw,4.6rem);line-height:.92;letter-spacing:-.03em;
  color:var(--paper);
}
/* 中文改回系統字體：Anton 只有拉丁子集，中文本來就吃不到，
   卻還套著為拉丁大寫調的 line-height .94 跟負字距，整段被壓扁。
   中文要鬆（1.75）、不要負字距、不要 uppercase。
   顏色改黑：黑字壓橘底是 6.25，任何字級都過 AA。 */
.banner-text blockquote{
  margin:0;font-family:inherit;font-weight:700;text-transform:none;
  font-size:clamp(1.02rem,2.1vw,1.5rem);line-height:1.75;letter-spacing:.01em;
  color:var(--ink);max-width:28em;
}
.banner-text cite{
  display:inline-block;margin-top:1.4rem;font-style:normal;
  font-size:.68rem;font-weight:900;letter-spacing:.22em;text-transform:uppercase;
  color:var(--ink);background:var(--paper);
  border:2px solid var(--ink);padding:5px 12px;
}

/* ── 學習路徑 ─────────────────────────────────────────── */
.path{list-style:none;max-width:820px;margin:0 auto;padding:0 5%}
.path-step{
  position:relative;display:grid;grid-template-columns:auto 1fr;
  gap:1.3rem;padding-bottom:2.4rem;
  opacity:0;transform:translateY(22px);
  transition:opacity .5s var(--snap),transform .5s var(--snap);
}
.path-step.vis{opacity:1;transform:none}
.path-step::before{
  content:'';position:absolute;left:25px;top:60px;bottom:4px;width:var(--bw);
  background:var(--ink);
}
.path-step:last-child::before{display:none}
.path-num{
  position:relative;z-index:1;width:54px;height:54px;flex:none;
  display:flex;align-items:center;justify-content:center;
  background:var(--accent);color:var(--paper);
  border:var(--bw) solid var(--ink);box-shadow:var(--hard-sm);
  font-family:var(--display);font-size:1.2rem;
}
.path-step:nth-child(2n) .path-num{background:var(--pop-sea)}
.path-step:nth-child(3n) .path-num{background:var(--pop-mint);color:var(--ink)}
.path-body{padding-top:.3rem}
.path-body h3{font-size:1.3rem;font-weight:900;color:var(--ink);margin-bottom:.3rem}
.path-meta{
  display:inline-block;font-size:.68rem;font-weight:900;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink);background:var(--pop-sun);
  border:2px solid var(--ink);padding:3px 8px;margin-bottom:.7rem;
}
.path-body p{font-size:.92rem;line-height:1.85;color:var(--ink-2)}
@media (max-width:560px){
  .path-step{gap:.9rem}
  .path-num{width:44px;height:44px;font-size:1rem}
  .path-step::before{left:20px;top:50px}
}

/* ── 01–04 流程步驟 ───────────────────────────────────── */
.steps{
  list-style:none;display:grid;gap:22px;
  grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
  max-width:1180px;margin:0 auto;padding:0 5%;
}
.step{
  padding:24px 20px;
  opacity:0;transform:translateY(20px);
  transition:opacity .45s var(--snap),transform .45s var(--snap),box-shadow var(--snap);
}
.step.vis{opacity:1;transform:none}
.step:hover{transform:translate(-3px,-3px);box-shadow:var(--hard-lg)}
.step-num{
  font-family:var(--display);font-size:2.6rem;line-height:1;
  color:var(--accent);margin-bottom:.6rem;
}
.step h3{font-size:1.05rem;font-weight:900;color:var(--ink);margin-bottom:.4rem}
.step p{font-size:.87rem;line-height:1.8;color:var(--ink-2)}

/* ── 免費工具卡 ───────────────────────────────────────── */
.tool-grid{
  display:grid;gap:26px;
  grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  max-width:1060px;margin:0 auto;padding:0 5%;
}
.tool{
  display:flex;flex-direction:column;padding:28px 24px;
  opacity:0;transform:translateY(24px);
  transition:opacity .45s var(--snap),transform .45s var(--snap),box-shadow var(--snap);
}
.tool.vis{opacity:1;transform:none}
.tool:hover{transform:translate(-3px,-3px);box-shadow:var(--hard-lg)}
.tool-icon{
  width:56px;height:56px;display:flex;align-items:center;justify-content:center;
  background:var(--pop-sun);
  border:var(--bw) solid var(--ink);margin-bottom:1rem;
}
.tool-icon svg{display:block}
.tool:nth-child(2n) .tool-icon{background:var(--pop-mint)}
.tool-platform{
  display:inline-block;align-self:flex-start;
  font-size:.64rem;font-weight:900;letter-spacing:.12em;text-transform:uppercase;
  color:var(--paper);background:var(--ink);padding:4px 9px;margin-bottom:.9rem;
}
.tool h3{font-size:1.35rem;font-weight:900;color:var(--ink);margin-bottom:.5rem}
.tool p{font-size:.9rem;line-height:1.8;color:var(--ink-2);margin-bottom:.6rem}
.tool .tags{margin-bottom:1.3rem}
.tool-actions{margin-top:auto;display:flex;flex-wrap:wrap;gap:.7rem;align-items:center}
.tool-size{font-size:.74rem;font-weight:700;color:var(--ink-3)}
.tool-note{
  font-size:.75rem;line-height:1.7;color:var(--ink-3);
  margin-top:1rem;padding-top:.9rem;border-top:2px solid var(--ink);
}
.tool-note strong{color:var(--ink)}

/* ── 學生評價 ─────────────────────────────────────────── */
.review-grid{
  display:grid;gap:22px;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  max-width:1180px;margin:0 auto;padding:0 5%;
}
.review{
  display:flex;flex-direction:column;gap:.9rem;padding:22px 20px;
  opacity:0;transform:translateY(20px);
  transition:opacity .45s var(--snap),transform .45s var(--snap);
}
.review.vis{opacity:1;transform:none}
.review-avatar{
  width:46px;height:46px;flex:none;border-radius:0;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--display);font-size:1.2rem;color:var(--paper);
  border:var(--bw) solid var(--ink);
}
.review-body{flex:1;min-width:0}
.review-body p{font-size:.9rem;line-height:1.85;color:var(--ink-2)}
.stars{font-size:.9rem;letter-spacing:2px;color:var(--accent-ink);margin-bottom:.5rem}
.review-author{
  display:inline-block;margin-top:.7rem;
  font-size:.72rem;font-weight:900;letter-spacing:.04em;color:var(--ink);
  background:var(--pop-sun);border:2px solid var(--ink);padding:3px 8px;
}

/* ── 子頁 Hero ────────────────────────────────────────── */
.hero-sub{
  position:relative;display:flex;align-items:center;
  min-height:clamp(320px,50vh,500px);
  padding:clamp(7rem,14vh,9rem) 5% clamp(2.5rem,6vh,4rem);
}
.hero-sub-inner{max-width:800px;margin:0 auto;text-align:center}
.hero-sub-title .display{font-size:clamp(2.6rem,10vw,8rem)}
.hero-sub-title .hero-zh{
  background:var(--accent);color:var(--paper);
  border:var(--bw) solid var(--ink);box-shadow:var(--hard-sm);
}
.hero-sub-lead{
  font-size:clamp(.95rem,1.4vw,1.08rem);line-height:1.85;color:var(--ink-2);
  max-width:48ch;margin:1.4rem auto 1.8rem;font-weight:500;
}
.hero-sub-lead strong{color:var(--ink);font-weight:900;background:var(--pop-sun);padding:1px 5px}
.hero-sub .hero-actions{justify-content:center}

/* ── 表單 ─────────────────────────────────────────────── */
.form-section{padding:clamp(4.5rem,11vh,7.5rem) 5%;display:flex;justify-content:center}
.field{margin-top:16px}
.field label{
  display:block;font-size:.7rem;font-weight:900;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink);margin-bottom:6px;
}
.field input,.field select,.field textarea{
  width:100%;background:var(--paper);
  border:var(--bw) solid var(--ink);border-radius:0;
  color:var(--ink);padding:.7rem .8rem;
  font-family:inherit;font-size:.92rem;font-weight:600;outline:none;
  transition:box-shadow var(--snap),background var(--snap);
}
.field input:focus,.field select:focus,.field textarea:focus{
  box-shadow:var(--hard-sm);background:#FFFDF6;
}
.field.err input,.field.err select,.field.err textarea{
  background:#FFE9E4;box-shadow:3px 3px 0 var(--accent-ink);
}
.field-err{
  font-size:.74rem;font-weight:800;color:var(--paper);background:var(--accent-ink);
  margin-top:.4rem;padding:3px 7px;display:none;
}
.field.err .field-err{display:inline-block}
.field textarea{resize:vertical;min-height:88px}
.field select{
  appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23000' stroke-width='2.4' fill='none'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right .9rem center;padding-right:2.2rem;
}
.honeypot{display:none}
.consent-row{display:flex;align-items:flex-start;gap:.6rem;margin:1.1rem 0 .2rem}
.consent-row input[type=checkbox]{
  width:20px;height:20px;flex:none;margin:.1rem 0 0;cursor:pointer;
  accent-color:var(--accent);
}
.consent-row label{
  display:inline;font-size:.76rem;line-height:1.7;color:var(--ink-2);
  font-weight:500;text-transform:none;letter-spacing:normal;margin-bottom:0;cursor:pointer;
}
.consent-row label a{color:var(--accent-ink);font-weight:900}

/* ── Toast ────────────────────────────────────────────── */
.toast{
  position:fixed;bottom:1.6rem;right:1.6rem;z-index:1000;
  background:var(--ink);color:var(--paper);
  border:var(--bw) solid var(--ink);box-shadow:var(--hard);
  font-size:.86rem;font-weight:800;padding:.85rem 1.3rem;border-radius:0;
  opacity:0;transform:translate(0,10px);pointer-events:none;
  transition:opacity var(--snap),transform var(--snap);
}
.toast.show{opacity:1;transform:none}
.toast.err{background:var(--accent-ink)}
@media (max-width:560px){.toast{left:1rem;right:1rem;bottom:1rem;text-align:center}}

/* ── 頁尾 ─────────────────────────────────────────────── */
footer{
  border-top:var(--bw) solid var(--ink);
  background:var(--ink-surface);color:#CFC9BF;
  padding:2.5rem 5% 2.8rem;text-align:center;
  display:flex;flex-direction:column;align-items:center;gap:1rem;font-size:.8rem;
}
footer .f-links{display:flex;gap:1.4rem;flex-wrap:wrap;justify-content:center}
footer .f-links a{
  /* 點擊區至少 44px：這些是獨立的導覽連結，不是內文裡的行內連結 */
  display:inline-flex;align-items:center;justify-content:center;
  min-height:44px;min-width:44px;padding:0 4px;   /* 中文兩字寬度不足 40 */
  color:var(--paper);text-decoration:none;font-weight:800;
  border-bottom:3px solid transparent;transition:border-color var(--snap),color var(--snap);
}
footer .f-links a:hover{border-bottom-color:var(--accent)}
footer .f-links a:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
#privacy-policy details summary{
  display:inline-flex;align-items:center;min-height:44px;
  font-weight:800;color:var(--paper);cursor:pointer;
}
#privacy-policy details[open] summary{margin-bottom:.4rem}

/* ── 標題逐行揭開 ─────────────────────────────────────── */
.reveal-line{display:block;overflow:hidden;padding-bottom:.06em}
.reveal-line>span{display:block;transform:translateY(105%);
  transition:transform .55s cubic-bezier(.2,0,0,1)}
.vis .reveal-line>span{transform:none}
/* .sec-zh / .hero-zh 需要 inline-block 讓色塊貼合文字，
   但會被上面的 display:block 蓋掉，所以用雙 class 選擇器搶回來 */
.reveal-line>.sec-zh,.reveal-line>.hero-zh{display:inline-block}
.reveal-line:nth-child(2)>span{transition-delay:.06s}
.hero-title .reveal-line>span,.hero-sub-title .reveal-line>span{
  transform:translateY(105%);animation:line-up .6s cubic-bezier(.2,0,0,1) .1s both}
.hero-title .reveal-line:nth-child(2)>span,
.hero-sub-title .reveal-line:nth-child(2)>span{animation-delay:.2s}
.hero-lead,.hero-actions{animation:fade-up .5s cubic-bezier(.2,0,0,1) both}
.hero-lead{animation-delay:.34s}
.hero-actions{animation-delay:.44s}
@keyframes line-up{from{transform:translateY(105%)}to{transform:translateY(0)}}
@keyframes fade-up{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* 已移除：.motes（AI 破綻清單的 decorative dots）
   已移除：.scroll-hint（AI 破綻清單的 scroll cues）
   兩者的樣式一併刪掉，HTML 也已拿掉對應元素。 */


/* ═══════════════════════════════════════════════════════════
   動態層（MOTION_INTENSITY 8）
   依 gogh 的 Motion Doctrine Conflicts：
   **轉盤決定「動多少」，MIFB 決定「單一控制項怎麼動」**，兩者不衝突。

   MOTION_INTENSITY 8 的定義是「進階的捲動驅動動畫」，且有一條硬規則：
   **4 以上的動態必須真的看得見，否則就該把轉盤調低**。
   先前只有 180ms 硬切換，等於轉盤設 8 卻做出 2 的效果，所以補上這一層。

   MIFB 的固定執行值（不自己發明數字）：
   - 按壓回饋 scale(0.96)，下限不得低於 0.95
   - 進場 opacity 0→1、translateY 12px→0、blur 4px→0，300-400ms
   - 語意群組之間間隔約 100ms，標題逐字間隔約 80ms
   - 曲線 cubic-bezier(0.2,0,0,1)
   - 互動狀態優先用 transition 而非 keyframes（可被中途打斷、能改向）
   - 不使用 transition:all，屬性逐一列出
   ═══════════════════════════════════════════════════════════ */

:root{
  --mifb:cubic-bezier(.2,0,0,1);
  --enter:360ms;              /* MIFB 建議的進場區間 300-400ms */
  --stagger:80ms;             /* 逐字間隔 */
  --group:100ms;              /* 語意群組間隔 */
}

/* ── 按壓回饋：MIFB 固定值 scale(0.96) ──────────────────────
   原本只有位移，補上縮放才有「被按住」的實體感。
   位移仍保留，那是 Neubrutalism 的招牌（方塊沉到陰影位置）。 */
.btn:active,.btn-light:active,.btn-ghost:active,.btn-outline:active,
.submit-btn:active:not(:disabled){
  transform:translate(var(--off),var(--off)) scale(.96);
}
.tag:active{transform:scale(.96)}
.nav-links a:active{transform:scale(.96)}
.logo:active{transform:translate(-2px,-2px) scale(.96)}

/* ── 標題逐字進場 ─────────────────────────────────────────
   原本整行一起推上來，改成逐字，間隔 80ms。這是「看得見」的
   關鍵差異：眼睛會跟著字一個一個出現。 */
.display .w{
  display:inline-block;
  opacity:0;transform:translateY(14px);filter:blur(4px);
  animation:word-in var(--enter) var(--mifb) forwards;
  animation-delay:calc(var(--i,0) * var(--stagger));
}
@keyframes word-in{
  to{opacity:1;transform:translateY(0);filter:blur(0)}
}
/* 捲動進場的標題：等 .vis 才開始跑，不是載入就跑 */
.sec-title .display .w{animation-play-state:paused}
.vis .sec-title .display .w,
.sec-head.vis .display .w{animation-play-state:running}

/* ── 語意群組依序進場（標題→說明→按鈕，間隔 100ms）─────── */
.hero-lead{animation:enter-up var(--enter) var(--mifb) both;
  animation-delay:calc(var(--group) * 4)}
.hero-actions{animation:enter-up var(--enter) var(--mifb) both;
  animation-delay:calc(var(--group) * 5)}
.sec-head.vis p{animation:enter-up var(--enter) var(--mifb) both;
  animation-delay:var(--group)}
@keyframes enter-up{
  from{opacity:0;transform:translateY(12px);filter:blur(4px)}
  to{opacity:1;transform:translateY(0);filter:blur(0)}
}

/* ── 卡片進場：加回 blur，並依序錯開 ───────────────────── */
.gcard,.tool,.step,.review,.path-step{
  filter:blur(4px);
  transition:opacity var(--enter) var(--mifb),
             transform var(--enter) var(--mifb),
             filter   var(--enter) var(--mifb),
             box-shadow var(--snap);
}
.gcard.vis,.tool.vis,.step.vis,.review.vis,.path-step.vis{filter:blur(0)}

/* ── 捲動驅動（level 8 要求的「進階捲動工作」）──────────────
   用瀏覽器原生的 animation-timeline，跑在合成執行緒、完全不經過 JS。
   不支援的瀏覽器整段跳過，只是少了這層，其他照常。 */
@supports (animation-timeline: view()){
  /* Hero 照片隨捲動下沉，比文字慢 → 景深 */
  .hero-media picture,.hero-media video{
    animation:hero-sink linear both;
    animation-timeline:view();animation-range:entry 0% exit 100%;
  }
  @keyframes hero-sink{
    from{transform:translate3d(0,0,0) scale(1.06)}
    to  {transform:translate3d(0,14%,0) scale(1.16)}
  }
  /* 滿版橫幅的字隨捲動橫移 —— 一個「編排過的動態時刻」，
     不是散落各處的效果（Anthropic 的 one-orchestrated-moment 原則） */
  .banner-text blockquote{
    animation:banner-slide linear both;
    animation-timeline:view();animation-range:cover 0% cover 100%;
  }
  @keyframes banner-slide{
    from{transform:translate3d(-4%,0,0)}
    to  {transform:translate3d(4%,0,0)}
  }
  /* 色帶區塊捲進來時，底色從左往右刷過 */
  .band{
    animation:band-wipe linear both;
    animation-timeline:view();animation-range:entry 0% entry 90%;
  }
  @keyframes band-wipe{
    from{clip-path:inset(0 100% 0 0)}
    to  {clip-path:inset(0 0 0 0)}
  }
}


/* ═══════════════════════════════════════════════════════════
   橫向捲動區段（2026-08-04）
   捲到這一區時畫面「釘住」，卡片橫向跑過去，跑完才繼續往下捲。

   做法是原生 CSS 的捲動驅動動畫（view-timeline + animation-range:
   contain），**完全不用 JS**、跑在合成執行緒。外層拉高 320vh 提供
   捲動距離，內層 sticky 釘住，軌道用 translateX 位移。

   不支援 animation-timeline 的瀏覽器會落回「可以左右滑的一排卡片」
   （overflow-x + scroll-snap），仍然完整可用，只是不會自己跑。

   手機不啟用：小螢幕上把垂直捲動挾持成橫向會讓人找不到出口，
   900px 以下直接退回普通網格。
   ═══════════════════════════════════════════════════════════ */
.hscroll{padding:0}
.hscroll-pin{
  position:relative;
  padding:clamp(3rem,8vh,5rem) 0;
}
.hscroll-track{
  display:flex;gap:26px;
  /* 元素同時掛著 .card-grid，那邊有 max-width:1240px 會把軌道壓住，
     導致 max-content 失效、位移量算錯。這裡明確解除。 */
  max-width:none;
  padding:0 5%;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
}
.hscroll-track::-webkit-scrollbar{display:none}
.hscroll-track>*{
  flex:0 0 clamp(280px,78vw,420px);
  scroll-snap-align:center;
  grid-column:auto!important;   /* 蓋掉網格版的跨欄設定 */
}

@media (min-width:900px){
  @supports (animation-timeline: view()){
    /* 外層拉高，這段高度就是「釘住」的時間 */
    .hscroll{
      height:320vh;
      view-timeline-name:--hs;
      view-timeline-axis:block;
    }
    .hscroll-pin{
      position:sticky;top:0;height:100svh;
      display:flex;flex-direction:column;justify-content:center;
      overflow:hidden;padding:0;
    }
    .hscroll-track{
      overflow:visible;                    /* 交給動畫推，不用原生捲軸 */
      /* width:max-content 是關鍵：translateX 的 100% 指的是「元素自身
         寬度」。不設 max-content 的話 flex 容器寬度等於視窗寬，100%
         只有 1280px，而內容有 1677px —— 位移量會算錯，卡片幾乎不動。 */
      width:max-content;
      animation:htrack linear both;
      animation-timeline:--hs;
      animation-range:contain 0% contain 100%;
      will-change:transform;
    }
    .hscroll-track>*{flex:0 0 clamp(320px,30vw,460px)}
    @keyframes htrack{
      from{transform:translateX(0)}
      /* 終點：把軌道右緣拉到視窗右緣。100vw 而非更小的值，否則會
         留下一段空白；軌道自身的左右 padding 就是視覺留白。 */
      to  {transform:translateX(calc(-100% + 100vw))}
    }
    /* 標題也一起被釘住，橫移時標題不動 —— 對比更明顯 */
    .hscroll .sec-head{margin-bottom:clamp(1.5rem,4vh,2.5rem)}
  }
}


/* ═══════════════════════════════════════════════════════════
   合作流程：帳本式橫列。

   為什麼不是第三個捲動特效：首頁原本有兩個「釘住畫面再演」的區段
   （這一段跟橫向捲動的服務區），中間只隔一條跑馬燈。同一個手法用
   兩次會互相稀釋，把老闆點名要的「捲動後畫面先向右」那一下的份量
   吃掉。所以這段退成靜態編排，全頁只留一個主要動態。

   質感來自克制：粗橫線、對齊、字級層次，不是更多動畫。
   ═══════════════════════════════════════════════════════════ */
.ledger{padding:clamp(3.5rem,9vh,6rem) 0}
.ledger-list{max-width:1060px;margin:0 auto;padding:0 5%}
.ledger-row{
  display:grid;grid-template-columns:minmax(0,230px) minmax(0,1fr);
  gap:clamp(.8rem,4vw,3rem);
  padding:clamp(1.5rem,3vw,2.3rem) 0;
  border-top:var(--bw) solid var(--ink);
  opacity:0;transform:translateY(20px);
  transition:opacity .45s var(--snap),transform .45s var(--snap);
}
.ledger-row.vis{opacity:1;transform:none}
.ledger-row:last-child{border-bottom:var(--bw) solid var(--ink)}
.ledger-row dt{
  margin:0;font-family:var(--display);font-weight:400;
  font-size:clamp(2rem,4.2vw,3.4rem);line-height:.9;
  letter-spacing:-.02em;text-transform:uppercase;color:var(--ink);
}
.ledger-row dd{margin:0}
.ledger-lead{
  margin:0;font-weight:700;
  font-size:clamp(1rem,1.5vw,1.15rem);line-height:1.7;color:var(--ink-2);
}
.ledger-out{
  margin:.75rem 0 0;
  font-family:ui-monospace,SFMono-Regular,'SF Mono',Menlo,monospace;
  font-size:.76rem;letter-spacing:.05em;line-height:1.9;color:var(--ink-3);
}
@media (max-width:640px){
  .ledger-row{grid-template-columns:1fr;gap:.5rem}
}


/* ═══════════════════════════════════════════════════════════
   三個補強動畫（2026-08-04）
   刻意都是「放大既有想法」，不是加新的不相干效果 ——
   gogh 引用 Anthropic 的警告：過量動畫會讀起來像 AI 生成的。
   ═══════════════════════════════════════════════════════════ */

/* ── 一、跑馬燈條 ─────────────────────────────────────────
   ui-ux-pro-max 的 Kinetic Brutalism 條目直接把 marquee 列為關鍵字，
   所以這是「方向本來就該有」的元件，不是外加裝飾。
   內容是真的能力清單，不是填充字。

   做法：內容複製兩份並排，位移 -50% 剛好接回原點，所以看起來是無限
   循環。用 translate3d 走合成執行緒。 */
.marquee{
  overflow:hidden;
  background:var(--ink-surface);
  border-top:var(--bw) solid var(--ink);
  border-bottom:var(--bw) solid var(--ink);
  padding:.7rem 0;
}
.marquee-track{
  display:flex;width:max-content;
  animation:marquee 28s linear infinite;
}
.marquee:hover .marquee-track{animation-play-state:paused}
.marquee-track span{
  font-family:var(--display);
  font-size:clamp(1.1rem,2.4vw,1.9rem);
  text-transform:uppercase;letter-spacing:.02em;
  color:var(--paper);white-space:nowrap;
  padding:0 1.1rem;
}
.marquee-track span::after{content:'✦';color:var(--accent);margin-left:1.1rem}
@keyframes marquee{to{transform:translate3d(-50%,0,0)}}

/* ── 二、學習路徑的線隨捲動長出來 ─────────────────────────
   子頁那條串起五個階段的直線，本來是一次畫好的。改成隨捲動由上往下
   長 —— 內容講的就是「一條路」，線自己長出來才對得上意思。 */
@supports (animation-timeline: view()){
  .path-step{view-timeline-name:--step;view-timeline-axis:block}
  .path-step::before{
    transform-origin:top center;
    animation:line-grow linear both;
    animation-timeline:--step;
    animation-range:entry 30% cover 60%;
  }
  @keyframes line-grow{from{transform:scaleY(0)}to{transform:scaleY(1)}}
}

/* ── 三、卡片交錯從左右滑入 ───────────────────────────────
   原本全部從下方浮起，四張卡同時做同一件事，很平。
   改成單數從左、雙數從右，畫面會有交錯的節奏。 */
.gcard:nth-child(odd),.tool:nth-child(odd),.step:nth-child(odd){
  --from-x:-28px;
}
.gcard:nth-child(even),.tool:nth-child(even),.step:nth-child(even){
  --from-x:28px;
}
.gcard:not(.vis),.tool:not(.vis),.step:not(.vis){
  transform:translate(var(--from-x,0),22px);
}

/* ── 四、區塊標題的中文色塊，寬度隨捲動展開 ─────────────────
   放大既有的「黑色色塊 + 橘紅短橫」這個標題裝置，讓它像被刷出來的。 */
@supports (animation-timeline: view()){
  .sec-zh{
    animation:zh-wipe linear both;
    animation-timeline:view();
    animation-range:entry 20% entry 85%;
  }
  @keyframes zh-wipe{
    from{clip-path:inset(0 100% 0 0)}
    to  {clip-path:inset(0 0 0 0)}
  }
}

/* ── 無障礙：尊重系統的減少動態設定 ───────────────────── */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;
  }
  .card,.gcard,.tool,.step,.review,.split-media,.split-body,
  .banner-text,.path-step{opacity:1;transform:none}
  .reveal-line>span{transform:none!important;animation:none!important}
  .display .w{opacity:1!important;transform:none!important;filter:none!important;animation:none!important}
  .hero-lead,.hero-actions,.sec-head p{animation:none!important;opacity:1!important}
  .gcard,.tool,.step,.review,.path-step{filter:none!important}
  .hero-media picture,.hero-media video,.banner-text blockquote,.band{
    animation:none!important;transform:none!important;clip-path:none!important}
  .marquee-track{animation:none!important}
  .path-step::before{animation:none!important;transform:none!important}
  .sec-zh{animation:none!important;clip-path:none!important}
  .gcard:not(.vis),.tool:not(.vis),.step:not(.vis){transform:none!important}
  .ledger-row{opacity:1!important;transform:none!important;transition:none!important}
  .hscroll{height:auto!important}
  .hscroll-pin{position:static!important;height:auto!important}
  .hscroll-track{animation:none!important;transform:none!important;
    overflow-x:auto!important;flex-wrap:wrap}
  .compass-needle{transition:none!important}
  .compass{opacity:1;transform:none}
  .hero-media video{display:none}
}

/* 表單欄位下方的補充指引。--ink-3 (#5A5A5A) 壓在米白底是 7.0，過 AA；
   連結用 --accent-ink (#B8401C)，淺底不能用 --accent（只有 3.36）。 */
.field-hint{
  margin:.45rem 0 0;font-size:.78rem;line-height:1.6;color:var(--ink-3);
}
.field-hint a{color:var(--accent-ink);font-weight:700}