/* ============================================================
   compat.css — 舊模板 class → 新設計系統
   ============================================================
   25 個既有頁面的 HTML 標記一行都沒改，靠這一層重新上妝。
   好處：內容零風險（不會在搬移過程改錯字），日後要把某一頁
   改寫成原生新標記時，只要刪掉它用到的舊 class 即可，兩者可共存。

   依賴 site.css 的變數與元件，務必在 site.css 之後載入。
   ============================================================ */

/* ---------- 舊設計系統的變數別名 ----------
   63 篇文章與部分頁面內有大量行內樣式直接引用舊變數
   （style="color:var(--bronze)" 之類）。舊 tokens.css 已移除，
   這些 var() 會解析失敗、整條屬性被丟棄，畫面就會少一塊。

   與其改幾十個檔案，這裡把舊名稱映射到新色盤。
   等內文都改寫成新類別後，這一段可以整塊刪掉。 */
:root{
  /* 舊主色是金銅 #8A6F3F，新系統對應到品牌橘 */
  --bronze:#B8460F;
  --bronze-light:#F9C99E;      /* 深底上的強調字，需要淺色 */

  --paper:#fff;
  --paper-cream:#f4fafd;
  --paper-warm:#eef7fc;
  --ink:#0a3f78;
  --ink-rgb:10,63,120;
  --ink-90:rgba(10,63,120,.9);

  --color-border:#e2eef6;
  --color-text-soft:#555;
  --color-text-muted:#555;

  --font-display:"Bricolage Grotesque","Noto Sans TC",sans-serif;
  --font-serif:"Chocolate Classical Sans","Noto Sans TC",sans-serif;
  --font-mono:ui-monospace,"JetBrains Mono","SFMono-Regular",Consolas,monospace;

  --fs-caption:11px;
  --tracking-caption:.14em;

  --space-2:10px; --space-3:18px; --space-4:26px; --space-5:38px;

  /* 新版走方正邊角，圓角一律收斂 */
  --radius:0; --radius-md:4px;
  --shadow-card:0 10px 26px rgba(20,70,120,.11);
}

/* ---------- 版面骨架 ---------- */
.section{position:relative;padding:88px 0;background:#fff;overflow:hidden;}
.section--tight{padding:52px 0;}
.section--paper-warm{background:linear-gradient(180deg,#f4fafd,#e9f4fa);}
.section--ink{background:var(--navy-dark);color:rgba(255,255,255,.86);}
.section--ink .h-section__title,
.section--ink .h-section__eyebrow{color:#fff;}
.section--ink .h-section__lead{color:rgba(255,255,255,.75);}

.container--narrow{max-width:820px;}

.layout-split{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:56px;align-items:start;}
.sidebar{position:sticky;top:calc(var(--hdr) + 24px);background:var(--sky-4);padding:26px 22px;border-top:4px solid var(--blue-mid);}
.sidebar h3,.sidebar h4{margin:0 0 14px;font-size:14px;font-weight:700;color:var(--navy-dark);}
.sidebar ul{margin:0;}
.sidebar li{margin-bottom:9px;font-size:12.5px;line-height:1.9;color:var(--ink-2);}
.sidebar a{color:var(--navy);text-decoration:underline;text-underline-offset:3px;}

/* ---------- 區段標題 ---------- */
.h-section{margin:0 0 44px;}
.h-section__eyebrow{
  font-family:var(--display);font-weight:700;font-size:12px;letter-spacing:.24em;color:var(--navy);
  display:flex;align-items:center;gap:14px;margin:0 0 20px;
}
.h-section__eyebrow::after{content:"";flex:1;max-width:70px;height:1px;background:var(--navy);opacity:.55;}
.h-section__title{
  margin:0 0 18px;font-size:clamp(22px,2.8vw,36px);line-height:1.5;
  font-weight:700;letter-spacing:.03em;color:var(--navy-dark);text-wrap:balance;
}
.h-section__lead{margin:0;font-size:clamp(13px,1.15vw,14px);line-height:2.1;color:var(--ink-2);max-width:660px;}

/* 舊文案用 <em> 標重點 — 改成品牌的螢光筆底線，不要斜體 */
.h-section__title em,.page-hero__h em,.plan__title em,.lcard__title em,.callout__title em{
  font-style:normal;
  background:linear-gradient(transparent 58%,var(--orange-lt) 58%,var(--orange-lt) 94%,transparent 94%);
  padding:0 2px;
}

/* ---------- 頁首 meta 條 ---------- */
.hero-meta{display:flex;flex-wrap:wrap;gap:0;margin:34px 0 0;background:#fff;box-shadow:0 10px 26px rgba(20,70,120,.12);}
.hero-meta>div{flex:1 1 140px;padding:18px 16px;text-align:center;border-right:1px solid #e7f0f7;}
.hero-meta>div:last-child{border-right:0;}
.hero-meta dt{font-family:var(--display);font-weight:700;font-size:10px;letter-spacing:.16em;color:#8a99a8;}
.hero-meta dd{margin:6px 0 0;font-family:var(--display);font-weight:800;font-size:22px;color:var(--navy);font-variant-numeric:tabular-nums;}

/* ---------- 內文 ---------- */
.lead{margin:0 0 22px;font-size:15px;line-height:2.05;color:var(--ink-2);}
.caption{margin:0;font-size:11px;letter-spacing:.14em;color:#8a99a8;font-family:var(--display);font-weight:700;}
.text-bronze{color:var(--orange-dk);}
.link-underline{color:var(--navy);text-decoration:underline;text-underline-offset:3px;}
.mt-3{margin-top:18px;} .mt-4{margin-top:26px;} .mt-5{margin-top:38px;}

/* ---------- 比較表 ---------- */
.compare{background:#fff;box-shadow:0 12px 30px rgba(20,70,120,.12);overflow:hidden;}
.compare__row{display:grid;grid-template-columns:150px 1fr 1fr;border-bottom:1px solid #e7f0f7;}
.compare__row:last-child{border-bottom:0;}
.compare__row--head{background:var(--navy);}
.compare__row--head .compare__cell{color:#fff;font-weight:700;font-size:12.5px;letter-spacing:.06em;}
.compare__cell{padding:15px 18px;font-size:13px;line-height:1.85;color:var(--ink-2);border-right:1px solid #e7f0f7;}
.compare__cell:last-child{border-right:0;}
.compare__cell--label{background:var(--sky-4);font-weight:700;color:var(--navy-dark);font-size:12.5px;}
.compare__cell--ours{background:#fff8f3;color:var(--ink);font-weight:500;}

/* ---------- 方案卡（定價） ---------- */
.pricing{display:grid;grid-template-columns:repeat(2,1fr);gap:22px;}
.pricing--3{grid-template-columns:repeat(3,1fr);}
.pricing--4{grid-template-columns:repeat(4,1fr);}
.plan{display:flex;flex-direction:column;background:#fff;padding:30px 24px 26px;box-shadow:0 12px 30px rgba(20,70,120,.12);border-top:4px solid var(--sky);}
.plan--featured{border-top-color:var(--orange);box-shadow:0 18px 40px rgba(20,70,120,.2);}
.plan__tag{margin:0 0 12px;display:inline-block;align-self:flex-start;background:#dceefa;color:var(--navy);font-size:10.5px;font-weight:700;letter-spacing:.06em;padding:3px 9px;}
.plan__title{margin:0 0 14px;font-size:17px;line-height:1.6;font-weight:700;color:var(--navy-dark);}
.plan__price{display:flex;align-items:baseline;gap:6px;margin:0 0 8px;}
.plan__price-num{font-family:var(--display);font-weight:800;font-size:32px;color:var(--navy);line-height:1;font-variant-numeric:tabular-nums;}
.plan__price-unit{font-size:12px;color:var(--ink-2);}
/* 移除公開報價後，這個位置改放「洽詢報價」。
   保留原本的視覺重量，卡片才不會塌陷成一塊空白。 */
.plan__price-quote{
  font-family:var(--display);font-weight:800;font-size:21px;line-height:1;
  color:var(--orange-dk);letter-spacing:.04em;
}
.plan__sub{margin:0 0 18px;font-size:12px;line-height:1.85;color:var(--ink-2);}
.plan__features{margin:0 0 22px;flex:1;}
.plan__features li{position:relative;padding-left:20px;margin-bottom:9px;font-size:12.5px;line-height:1.85;color:var(--ink-2);}
.plan__features li::before{content:"";position:absolute;left:2px;top:.72em;width:6px;height:6px;background:var(--orange);transform:rotate(45deg);}
.plan__cta{min-width:0;width:100%;height:48px;font-size:13px;padding:0 20px;}
.plan__cta::after,.plan__cta::before{display:none;}

/* ---------- 流程步驟 ---------- */
.process{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;}
.process-step{position:relative;background:#fff;padding:34px 22px 26px;box-shadow:0 12px 30px rgba(20,70,120,.12);}
.process-step__num{
  position:absolute;left:0;top:0;min-width:38px;height:30px;padding:0 9px;
  background:var(--navy);color:#fff;font-family:var(--display);font-weight:700;font-size:13px;
  display:flex;align-items:center;justify-content:center;letter-spacing:.06em;
}
.process-step__title{margin:0 0 12px;font-size:15px;line-height:1.6;font-weight:700;color:var(--navy-dark);}
.process-step__body{margin:0;font-size:12.5px;line-height:1.95;color:var(--ink-2);}

/* ---------- 課程模組 ---------- */
.modules-detail{display:grid;gap:14px;}
.module-detail{background:#fff;padding:22px 24px;box-shadow:0 8px 20px rgba(20,70,120,.1);border-left:4px solid var(--blue-mid);}
.module-detail__head{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:10px;}
.module-detail__num,.module__num{
  background:var(--navy);color:#fff;font-family:var(--display);font-weight:700;font-size:12px;
  padding:4px 10px;letter-spacing:.06em;flex:none;
}
.module-detail__title,.module__title{margin:0;font-size:15px;line-height:1.6;font-weight:700;color:var(--navy-dark);flex:1;}
.module-detail__time,.module__time{font-size:11.5px;color:#8a99a8;font-family:var(--display);font-weight:700;flex:none;}
.module-detail__body{margin:0;font-size:12.5px;line-height:1.95;color:var(--ink-2);}
.modules{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;}
.module{background:#fff;padding:20px;box-shadow:0 8px 20px rgba(20,70,120,.1);}

/* ---------- 清單卡 ----------
   注意：__tag / __title / __body / __meta 是 .lcard 的「同層子元素」，
   __body 是描述段落本身而不是包裝層。內距要下在 .lcard 上，
   下在 __body 會變成只有描述文字被推進去、標籤和 meta 貼齊卡片邊緣。 */
.list-card{display:grid;grid-template-columns:repeat(2,1fr);gap:22px;align-items:stretch;}
.list-card--3{grid-template-columns:repeat(3,1fr);}
.lcard{
  display:flex;flex-direction:column;height:100%;overflow:hidden;
  background:#fff;
  box-shadow:0 10px 26px rgba(20,70,120,.11);
  border-top:3px solid var(--sky);
  transition:transform .24s,box-shadow .24s,border-color .24s;
}
/* 沒有配圖的卡片自己補上內距 */
.lcard:not(:has(.lcard__media)){padding:30px 28px 24px;}
.lcard:hover{transform:translateY(-5px);box-shadow:0 20px 42px rgba(20,70,120,.19);border-top-color:var(--orange);}
.lcard:focus-visible{outline:3px solid var(--orange);outline-offset:3px;}
.lcard--featured{border-top-color:var(--orange);box-shadow:0 18px 40px rgba(20,70,120,.2);}

/* ---- 配圖 ----
   圖庫照最大的問題是「一看就是圖庫照」。解法是全部套同一組品牌色調：
   略降飽和 + 藍橘漸層 multiply 疊色，讓不同來源的照片看起來像同一組視覺，
   hover 時色調褪去、影像放大，做出「照片活過來」的回饋。 */
.lcard__media{
  position:relative;margin:0;aspect-ratio:16/10;overflow:hidden;
  background:var(--navy-dark);flex:none;
}
.lcard__media img{
  width:100%;height:100%;object-fit:cover;display:block;
  filter:saturate(.72) contrast(1.06);
  transform:scale(1.03);
  transition:transform .6s cubic-bezier(.22,1,.36,1),filter .45s ease;
}
.lcard__media::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(155deg,rgba(13,77,146,.52),rgba(10,63,120,.20) 48%,rgba(208,83,24,.26));
  mix-blend-mode:multiply;transition:opacity .45s ease;
}
.lcard:hover .lcard__media img{transform:scale(1.09);filter:saturate(1) contrast(1);}
.lcard:hover .lcard__media::after{opacity:.45;}

/* 標籤壓在圖片左下角，做出圖與文的咬合 */
.lcard__media .lcard__tag{
  position:absolute;left:0;bottom:0;z-index:2;margin:0;
  background:var(--navy);color:#fff;
}
.lcard:hover .lcard__media .lcard__tag{background:var(--orange-dk);}

.lcard__inner{display:flex;flex-direction:column;flex:1;padding:24px 26px 22px;}

.lcard__tag{
  display:inline-block;align-self:flex-start;margin:0 0 15px;
  background:#dceefa;color:var(--navy);
  font-family:var(--display);font-size:10.5px;font-weight:700;letter-spacing:.1em;padding:5px 12px;
  transition:background .24s;
}
.lcard__title{margin:0 0 13px;font-size:17px;line-height:1.6;font-weight:700;color:var(--navy-dark);}
/* flex:1 讓描述長度不一的卡片，底部 meta 仍在同一條水平線上 */
.lcard__body{flex:1;margin:0 0 20px;font-size:13px;line-height:2;color:var(--ink-2);}
.lcard__meta{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  margin:0;padding-top:16px;border-top:1px solid #e2eef6;
  font-size:12px;line-height:1.7;color:var(--ink-2);
}
/* 箭頭收進圓底，明確傳達「整張卡可點」 */
.lcard__meta .arrow{
  flex:none;margin:0;width:28px;height:28px;border-radius:50%;
  background:var(--navy);color:#fff;
  display:flex;align-items:center;justify-content:center;
  font-size:13px;line-height:1;transition:transform .24s,background .24s;
}
.lcard:hover .lcard__meta .arrow{background:var(--orange-dk);transform:translateX(4px);}

/* ---------- 案例卡（結構同上，__body 一樣是段落）---------- */
.cases{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;align-items:stretch;}
.case-card{
  display:flex;flex-direction:column;height:100%;
  background:#fff;padding:28px 26px 24px;
  box-shadow:0 10px 26px rgba(20,70,120,.11);
  border-top:3px solid var(--sky);
  transition:transform .24s,box-shadow .24s,border-color .24s;
}
.case-card:hover{transform:translateY(-5px);box-shadow:0 20px 42px rgba(20,70,120,.19);border-top-color:var(--orange);}
.case-card__industry{
  display:inline-block;align-self:flex-start;margin:0 0 14px;
  background:#dceefa;color:var(--navy);
  font-family:var(--display);font-size:10.5px;font-weight:700;letter-spacing:.1em;padding:4px 10px;
}
.case-card__title{margin:0 0 12px;font-size:16px;line-height:1.65;font-weight:700;color:var(--navy-dark);}
.case-card__body{flex:1;margin:0 0 18px;font-size:12.5px;line-height:1.95;color:var(--ink-2);}
.case-results,.case-card__metrics{
  display:flex;flex-wrap:wrap;gap:18px;
  margin:0;padding-top:16px;border-top:1px solid #e2eef6;
}
.case-card__metric{flex:1 1 90px;}
.case-card__metric-num{display:block;font-family:var(--display);font-weight:800;font-size:26px;line-height:1;color:var(--navy);font-variant-numeric:tabular-nums;}
.case-card__metric-label{display:block;margin-top:5px;font-size:11px;line-height:1.5;color:var(--ink-2);}

/* ---------- 重點框 ---------- */
.callout{background:var(--sky-4);border-left:4px solid var(--blue-mid);padding:26px 28px;}
.callout--sage{background:#f2f9f4;border-left-color:#6aab84;}
.callout--ink{background:var(--navy-dark);border-left-color:var(--orange);color:rgba(255,255,255,.9);}
.callout--ink .callout__title,.callout--ink .caption{color:#fff;}
.callout__title{margin:0 0 12px;font-size:15px;font-weight:700;line-height:1.6;color:var(--navy-dark);}
.callout p{margin:0 0 12px;font-size:13px;line-height:2;color:inherit;}
.callout p:last-child{margin-bottom:0;}
.callout li{font-size:13px;line-height:2;}

/* ---------- 痛點 ---------- */
.pain-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;}
.pain-item{position:relative;background:#fff;padding:34px 24px 26px;box-shadow:0 12px 30px rgba(20,70,120,.12);}
.pain-item__num{
  position:absolute;left:0;top:0;min-width:38px;height:30px;padding:0 9px;background:var(--orange-dk);color:#fff;
  font-family:var(--display);font-weight:700;font-size:13px;display:flex;align-items:center;justify-content:center;
}
.pain-item__title{margin:0 0 12px;font-size:16px;line-height:1.6;font-weight:700;color:var(--navy-dark);}
.pain-item__body{margin:0;font-size:12.5px;line-height:1.95;color:var(--ink-2);}

/* ---------- 證言 ---------- */
.testimonial{background:var(--sky-4);padding:32px 28px;border-top:4px solid var(--blue-mid);}
.testimonial__quote{margin:0 0 16px;font-size:14px;line-height:2;color:var(--ink);font-weight:500;}
.testimonial__cite{margin:0;font-size:12px;font-weight:700;color:var(--navy-dark);font-style:normal;}

/* ---------- FAQ（舊版是 button 手風琴，非 <details>）---------- */
.faq{max-width:840px;margin:0 auto;}
.faq__item{background:#fff;box-shadow:0 8px 20px rgba(20,70,120,.09);margin-bottom:12px;}
.faq__q{
  display:flex;align-items:center;justify-content:space-between;gap:18px;width:100%;
  border:0;background:none;cursor:pointer;text-align:left;font-family:inherit;
  padding:20px 24px;font-size:14.5px;font-weight:700;color:var(--navy-dark);line-height:1.7;
}
.faq__q-icon{
  flex:none;width:22px;height:22px;position:relative;transition:transform .25s;
  font-size:0;color:transparent;
}
.faq__q-icon::before,.faq__q-icon::after{
  content:"";position:absolute;left:50%;top:50%;background:var(--navy);
  transform:translate(-50%,-50%);transition:opacity .25s;
}
.faq__q-icon::before{width:12px;height:2px;}
.faq__q-icon::after{width:2px;height:12px;}
.faq__q[aria-expanded="true"] .faq__q-icon::after{opacity:0;}
/* grid-template-rows 動畫可以在高度未知時做出平滑展開，maxheight 做不到 */
.faq__a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .3s ease;}
.faq__q[aria-expanded="true"]+.faq__a{grid-template-rows:1fr;}
.faq__a-inner{overflow:hidden;}
.faq__a-inner>*,.faq__a-inner{font-size:13px;line-height:2.05;color:var(--ink-2);}
.faq__q[aria-expanded="true"]+.faq__a .faq__a-inner{padding:0 24px 22px;}

/* ---------- 表單 / 試算工具 ---------- */
.form{background:#fff;padding:34px 32px;box-shadow:0 12px 30px rgba(20,70,120,.12);}
.form__row{margin-bottom:22px;}
.form__row label{display:block;margin-bottom:9px;font-size:13px;font-weight:500;color:var(--ink-2);}
.form__row label strong{color:var(--navy);font-weight:700;font-variant-numeric:tabular-nums;}
.form__row input[type=text],.form__row input[type=email],.form__row input[type=tel],
.form__row select,.form__row textarea{
  width:100%;height:50px;border:1px solid #c3dcec;background:#fff;padding:0 16px;
  font-size:14px;font-family:inherit;color:var(--ink);border-radius:0;
}
.form__row textarea{height:auto;min-height:130px;padding:14px 16px;line-height:1.9;}
.form__row input:focus,.form__row select:focus,.form__row textarea:focus{outline:2px solid var(--blue-mid);outline-offset:-1px;}
.form__row input[type=range]{width:100%;accent-color:var(--orange-dk);height:26px;cursor:pointer;}
/* .form__submit 是包住送出鈕的 <div>，不是按鈕本身。
   先前誤把它當按鈕上色，結果橘色按鈕後面多出一條深藍色橫條。
   它的職責只有排版：把按鈕置中、與上一欄拉開距離。 */
.form__submit{margin-top:30px;text-align:center;}
.form__submit .btn{min-width:min(320px,100%);height:58px;font-size:15px;}
/* 蜜罐欄位。刻意不用 display:none —— 較進階的機器人會略過完全隱藏的欄位，
   用位移到畫面外反而更容易讓它上鉤。aria-hidden + tabindex="-1" 確保
   螢幕閱讀器與鍵盤使用者都不會碰到。 */
.hp{position:absolute !important;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden;}

.form__note{margin:14px 0 0;font-size:12px;line-height:1.8;color:#8a99a8;text-align:center;}

/* 免費工具導流。精簡版用在文章結尾與服務頁，不搶內容的版面重量 */
.tools-promo{background:linear-gradient(180deg,#fff,#f4fafd);}
.tools-promo.section--tight{background:none;}
.tools-promo__eyebrow{
  display:flex;align-items:center;gap:14px;margin:0 0 20px;
  font-family:var(--display);font-size:11px;font-weight:700;letter-spacing:.18em;color:var(--orange-dk);
}
.tools-promo__eyebrow::after{content:"";flex:1;height:1px;background:#e2eef6;}
.tools-promo .lcard{border-top-color:var(--orange);}
.form__row .req{
  display:inline-block;margin-left:6px;vertical-align:1px;
  background:var(--orange-dk);color:#fff;font-size:10px;font-weight:700;
  letter-spacing:.06em;padding:2px 6px;
}
.form-alert{
  margin:0 0 18px;padding:14px 18px;
  background:#fff3ed;border-left:4px solid var(--orange-dk);
  font-size:13px;line-height:1.8;color:var(--ink);
}
.news__alert{
  margin:0 auto 18px;max-width:520px;padding:12px 18px;
  font-size:13px;line-height:1.8;
}
.news__alert--ok{background:#eaf7ef;border-left:4px solid #3f8f5f;color:#1f5c39;}
.news__alert--err{background:#fff3ed;border-left:4px solid var(--orange-dk);color:var(--ink);}

.result{text-align:center;}
.result__num{display:block;font-family:var(--display);font-weight:800;font-size:34px;line-height:1;color:var(--navy);font-variant-numeric:tabular-nums;}
.result__label{display:block;margin-top:6px;font-size:11.5px;color:var(--ink-2);}
.callout--ink .result__num{color:var(--orange-lt);}
.callout--ink .result__label{color:rgba(255,255,255,.6);}

/* ---------- 圖表（原本靠 charts.js，這裡只保留靜態長條）---------- */
.chart-card,.chart{background:#fff;padding:28px 26px;box-shadow:0 12px 30px rgba(20,70,120,.12);}
.chart__title{margin:0 0 6px;font-size:15px;font-weight:700;color:var(--navy-dark);}
.chart__subtitle{margin:0 0 22px;font-size:12px;color:var(--ink-2);}
.chart-bars__row{display:grid;grid-template-columns:120px 1fr 60px;gap:14px;align-items:center;margin-bottom:12px;}
.chart-bars__label{font-size:12px;color:var(--ink-2);}
.chart-bars__track{height:14px;background:var(--sky-3);overflow:hidden;}
.chart-bars__fill{height:100%;background:linear-gradient(90deg,var(--blue-mid),var(--navy));}
.chart-bars__value{font-size:12px;font-weight:700;color:var(--navy);text-align:right;font-variant-numeric:tabular-nums;}
/* 雷達圖：SVG 由 site.js 產生 */
.chart-radar{max-width:460px;margin:0 auto;}
.chart-radar svg{width:100%;height:auto;display:block;}
.chart-radar__legend{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 20px;margin:14px 0 0;padding:0;list-style:none;}
.chart-radar__legend li{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--ink-2);}
.chart-radar__legend i{width:12px;height:12px;flex:none;border-radius:2px;}

/* ---------- 圖片 ---------- */
.photo{margin:0;background:#fff;box-shadow:0 12px 30px rgba(20,70,120,.12);overflow:hidden;}
.photo__svg-wrap{position:relative;line-height:0;}
.photo__svg-wrap svg,.photo img{width:100%;height:auto;display:block;}
.photo--landscape .photo__svg-wrap{aspect-ratio:16/7;}
.photo--landscape .photo__svg-wrap svg{height:100%;object-fit:cover;}
.photo__cap{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding:14px 20px;font-size:12.5px;color:var(--ink-2);}
.photo__cap-tag{background:var(--navy);color:#fff;font-family:var(--display);font-weight:700;font-size:10.5px;letter-spacing:.06em;padding:3px 9px;}

/* ---------- 其他 ---------- */
.arrow{margin-left:8px;}
.btn--primary{background:var(--navy);color:#fff;}
/* ---------- 預約區塊 ----------
   第三方預約元件本身只顯示姓名與「30 分鐘會議」，沒有任何脈絡。
   下面這幾個元件負責把「這是什麼、要不要錢、誰出席、談完給什麼」
   在訪客按下預約之前就講清楚。 */
.booking-spec{
  display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin:0 0 22px;
  background:#fff;box-shadow:0 10px 26px rgba(20,70,120,.11);border-top:3px solid var(--orange);
}
.booking-spec>div{padding:20px 18px;border-right:1px solid #e7f0f7;}
.booking-spec>div:last-child{border-right:0;}
.booking-spec dt{
  font-family:var(--display);font-size:10px;font-weight:700;letter-spacing:.16em;color:#8a99a8;
  margin-bottom:8px;
}
.booking-spec dd{margin:0;font-size:15px;font-weight:700;line-height:1.5;color:var(--navy-dark);}
.booking-spec__note{margin-top:6px !important;font-size:11.5px !important;font-weight:400 !important;color:var(--ink-2) !important;line-height:1.7 !important;}

.booking-pick{background:var(--sky-4);border-left:4px solid var(--blue-mid);padding:20px 24px;margin:0 0 22px;}
.booking-pick__h{margin:0 0 12px;font-size:14px;font-weight:700;color:var(--navy-dark);}
.booking-pick ul{margin:0;padding:0;list-style:none;}
.booking-pick li{position:relative;padding-left:20px;margin-bottom:9px;font-size:12.5px;line-height:1.95;color:var(--ink-2);}
.booking-pick li:last-child{margin-bottom:0;}
.booking-pick li::before{content:"";position:absolute;left:2px;top:.75em;width:6px;height:6px;background:var(--blue-mid);transform:rotate(45deg);}
.booking-pick b{color:var(--navy);}
.booking-pick span{color:var(--orange-dk);font-weight:700;}

/* 外框把第三方元件收進本站的視覺系統 */
.booking{background:#fff;box-shadow:0 14px 34px rgba(20,70,120,.14);overflow:hidden;}
.booking__bar{
  display:flex;align-items:center;gap:12px;padding:14px 22px;
  background:var(--navy);color:#fff;
}
.booking__dot{width:9px;height:9px;border-radius:50%;background:#5fd08a;flex:none;box-shadow:0 0 0 4px rgba(95,208,138,.22);}
.booking__title{font-size:13.5px;font-weight:700;letter-spacing:.04em;}
.booking__badge{
  margin-left:auto;background:var(--orange-dk);
  font-family:var(--display);font-size:10.5px;font-weight:700;letter-spacing:.1em;padding:4px 10px;
}
.cal-embed{min-height:0;background:#fff;}
.cal-embed__mount{width:100%;min-height:560px;}
.cal-embed__fallback{padding:32px;text-align:center;font-size:13px;line-height:2;color:var(--ink-2);}

.booking__prep{padding:22px 24px;border-top:1px solid #e7f0f7;background:var(--sky-4);}
.booking__prep-h{margin:0 0 12px;font-size:13px;font-weight:700;color:var(--navy-dark);}
.booking__prep ol{margin:0;padding-left:20px;}
.booking__prep li{margin-bottom:8px;font-size:12.5px;line-height:1.95;color:var(--ink-2);}
.booking__prep li:last-child{margin-bottom:0;}
.booking__prep b{color:var(--navy-dark);}

@media (max-width:900px){ .booking-spec{grid-template-columns:repeat(2,1fr);} .booking-spec>div:nth-child(2){border-right:0;} }
@media (max-width:560px){ .booking-spec{grid-template-columns:1fr;} .booking-spec>div{border-right:0;border-bottom:1px solid #e7f0f7;} .booking-spec>div:last-child{border-bottom:0;} }
.prose > :first-child{margin-top:0;}

/* ---------- 規格／價目表 ----------
   原本這幾張表直接掛 .prose，但 site.css 的 .prose{max-width:780px} 是套在
   表格自己身上 —— 表格被卡在 780px 且靠左，下方 callout 卻是滿版，兩者對不齊。
   獨立成元件：置中、與後續 callout 同寬、表頭反白、數字欄等寬對齊。 */
.spec-table{
  width:100%;max-width:880px;margin:0 auto;
  border-collapse:separate;border-spacing:0;
  background:#fff;box-shadow:0 12px 30px rgba(20,70,120,.12);
  font-size:13.5px;
}
.spec-table thead th{
  background:var(--navy);color:#fff;text-align:left;white-space:nowrap;
  font-family:var(--display);font-size:11.5px;font-weight:700;letter-spacing:.12em;
  padding:15px 20px;
}
.spec-table tbody td{
  padding:16px 20px;border-bottom:1px solid #e7f0f7;
  color:var(--ink-2);line-height:1.7;vertical-align:middle;
}
.spec-table tbody tr:last-child td{border-bottom:0;}
.spec-table tbody tr{transition:background .18s;}
.spec-table tbody tr:hover td{background:var(--sky-4);}
/* 第一欄是主體，給它重量 */
.spec-table tbody td:first-child{font-weight:700;color:var(--navy-dark);}
/* 時數與費用：等寬數字，上下比較時位數才會對齊 */
.spec-table td:nth-child(2),.spec-table td:nth-child(4){font-variant-numeric:tabular-nums;white-space:nowrap;}
/* 最後一欄多是 ✓／部分 這種短標記，置中比靠左整齊 */
.spec-table thead th:last-child,.spec-table td:last-child{text-align:center;}
.spec-table td:last-child{color:var(--navy);font-weight:700;white-space:nowrap;}

/* 表格後面的補充說明跟著表格對齊，不要一個 880 一個滿版 */
.spec-table + .callout{max-width:880px;margin-left:auto;margin-right:auto;}

@media (max-width:768px){
  /* 5 欄在手機塞不下。橫向捲動是對照表的標準解法，
     比硬擠成兩行或堆疊成卡片都好讀。 */
  .spec-table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;white-space:nowrap;}
  .spec-table thead th,.spec-table tbody td{padding:12px 14px;}
  .spec-table + .callout{max-width:none;}
}

/* ---------- 文章：作者卡 / 目錄 / 分隔線 ---------- */
.prose hr{border:0;height:1px;background:#e2eef6;margin:44px 0 0;}
.author-card{
  display:grid;grid-template-columns:auto 1fr;gap:24px;align-items:start;
  margin-top:40px;padding:28px 26px;background:var(--sky-4);border-left:4px solid var(--blue-mid);
}
.author-card__photo{width:88px;height:88px;border-radius:50%;object-fit:cover;flex:none;box-shadow:0 6px 16px rgba(20,70,120,.18);}
.author-card__label{margin:0 0 6px;font-family:var(--display);font-size:10.5px;font-weight:700;letter-spacing:.16em;color:var(--orange-dk);}
.author-card__name{margin:0 0 10px;font-size:15.5px;line-height:1.6;font-weight:700;color:var(--navy-dark);border:0;padding:0;}
.author-card__bio{margin:0 0 14px;font-size:12.5px;line-height:1.95;color:var(--ink-2);}
.author-card__links{display:flex;flex-wrap:wrap;gap:18px;font-size:12.5px;}

.toc{counter-reset:toc;}
.toc li{counter-increment:toc;position:relative;padding-left:22px;margin-bottom:10px;}
.toc li::before{
  content:counter(toc,decimal-leading-zero);position:absolute;left:0;top:.1em;
  font-family:var(--display);font-size:10px;font-weight:700;color:var(--orange-dk);
}
.toc a{font-size:12.5px;line-height:1.75;color:var(--ink-2);text-decoration:none;}
.toc a:hover{color:var(--navy);text-decoration:underline;text-underline-offset:3px;}

@media (max-width:768px){
  .author-card{grid-template-columns:1fr;gap:16px;padding:22px 20px;}
  .author-card__photo{width:66px;height:66px;}
}

/* ============================================================
   人物頁的資料視覺化元件
   ============================================================ */

/* ---------- 職涯時間軸 ----------
   中軸線用兩層：底層灰、上層品牌色，上層高度由 JS 依捲動進度推進，
   做出「線隨著你往下讀而長出來」的效果。純 CSS 做不到與捲動連動。 */
.timeline{position:relative;margin:0;padding:0 0 0 clamp(44px,5vw,64px);list-style:none;}
.timeline::before,.timeline__progress{
  content:"";position:absolute;left:clamp(15px,2vw,23px);top:8px;bottom:8px;width:2px;
}
.timeline::before{background:#dbeaf5;}
.timeline__progress{
  background:linear-gradient(180deg,var(--blue-mid),var(--navy) 60%,var(--orange));
  bottom:auto;height:0;transition:height .25s linear;
}
.timeline__item{position:relative;padding-bottom:44px;}
.timeline__item:last-child{padding-bottom:0;}
.timeline__dot{
  position:absolute;left:calc(clamp(15px,2vw,23px) - clamp(44px,5vw,64px) - 7px);top:6px;
  width:16px;height:16px;border-radius:50%;background:#fff;
  border:3px solid #cfe3f1;transition:border-color .35s,transform .35s,box-shadow .35s;
}
.timeline__item.is-in .timeline__dot{border-color:var(--orange);transform:scale(1.15);box-shadow:0 0 0 5px rgba(208,83,24,.13);}
.timeline__year{
  display:inline-block;margin:0 0 8px;
  font-family:var(--display);font-size:12px;font-weight:800;letter-spacing:.14em;color:var(--orange-dk);
}
.timeline__title{margin:0 0 10px;font-size:17px;line-height:1.6;font-weight:700;color:var(--navy-dark);}
.timeline__body{margin:0 0 14px;font-size:13.5px;line-height:2;color:var(--ink-2);}
.timeline__tags{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none;}
.timeline__tags li{
  background:var(--sky-4);color:var(--navy);border:1px solid #d3e7f4;
  font-size:11.5px;line-height:1.6;padding:4px 10px;
}

/* ---------- 年資長條圖 ---------- */
.skillbars{display:grid;gap:16px;margin:0;}
.skillbar{display:grid;grid-template-columns:minmax(96px,150px) 1fr auto;gap:16px;align-items:center;}
.skillbar__label{font-size:13px;font-weight:700;color:var(--navy-dark);line-height:1.5;}
.skillbar__track{position:relative;height:12px;background:var(--sky-3);overflow:hidden;}
/* 長度靠 CSS 變數 --w 驅動，進場時才展開 —— 不需要額外 JS，
   而且 prefers-reduced-motion 下也會直接是最終寬度 */
.skillbar__fill{
  display:block;height:100%;width:0;
  background:linear-gradient(90deg,var(--blue-mid),var(--navy));
  transition:width 1.15s cubic-bezier(.22,1,.36,1) .1s;
}
.skillbar.is-in .skillbar__fill{width:var(--w,0);}
@media (prefers-reduced-motion:reduce){ .skillbar__fill{width:var(--w,0);transition:none;} }
.skillbar--accent .skillbar__fill{background:linear-gradient(90deg,#e8873f,var(--orange-dk));}
.skillbar__value{
  font-family:var(--display);font-weight:800;font-size:15px;color:var(--navy);
  font-variant-numeric:tabular-nums;white-space:nowrap;min-width:56px;text-align:right;
}
.skillbars__note{margin:16px 0 0;font-size:11.5px;color:#8a99a8;}

/* ---------- 合作型態（橫向列）----------
   放在 .prose（716px）裡的三欄卡片每張只有 224px，內容全部擠爆。
   改成橫向列：左側色條 + 字母標記，與同頁的時間軸、模組列同一套語言。 */
.engage{margin:0;padding:0;list-style:none;display:grid;gap:16px;}
.engage__item{
  position:relative;background:#fff;padding:26px 28px 24px;
  box-shadow:0 10px 26px rgba(20,70,120,.11);
  border-left:4px solid var(--blue-mid);
  transition:transform .22s,box-shadow .22s;
}
.engage__item:hover{transform:translateX(3px);box-shadow:0 16px 34px rgba(20,70,120,.16);}
.engage__item--featured{border-left-color:var(--orange);}

.engage__head{display:flex;align-items:baseline;flex-wrap:wrap;gap:12px;margin-bottom:12px;}
.engage__tag{
  flex:none;width:30px;height:30px;display:flex;align-items:center;justify-content:center;
  background:var(--navy);color:#fff;
  font-family:var(--display);font-weight:800;font-size:14px;
}
.engage__item--featured .engage__tag{background:var(--orange-dk);}
.engage__title{margin:0;font-size:18px;line-height:1.5;font-weight:700;color:var(--navy-dark);}
.engage__meta{
  font-family:var(--display);font-size:11.5px;font-weight:700;letter-spacing:.1em;
  color:#8a99a8;margin-left:auto;
}
.engage__body{margin:0 0 14px;font-size:13.5px;line-height:2;color:var(--ink-2);}
.engage__points{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 18px;padding:0;list-style:none;}
.engage__points li{
  background:var(--sky-4);border:1px solid #d3e7f4;color:var(--navy);
  font-size:11.5px;line-height:1.6;padding:5px 11px;
}
.engage__cta{
  display:inline-flex;align-items:center;gap:8px;
  font-size:13px;font-weight:700;color:var(--navy);
  border-bottom:2px solid rgba(13,77,146,.25);padding-bottom:3px;
  transition:border-color .2s,gap .2s;
}
.engage__cta::after{content:"→";}
.engage__cta:hover{border-color:var(--navy);gap:12px;}
.engage__item--featured .engage__cta{color:var(--orange-dk);border-bottom-color:rgba(184,70,15,.3);}
.engage__item--featured .engage__cta:hover{border-color:var(--orange-dk);}

@media (max-width:560px){
  .engage__item{padding:22px 20px;}
  .engage__meta{margin-left:0;width:100%;}
}

/* ---------- 原則卡（教學哲學）---------- */
.principles{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin:0;padding:0;list-style:none;}
.principle{position:relative;background:#fff;padding:34px 24px 26px;box-shadow:0 12px 30px rgba(20,70,120,.12);border-top:3px solid var(--sky);}
.principle:nth-child(2){border-top-color:var(--blue-mid);}
.principle:nth-child(3){border-top-color:var(--orange);}
.principle__num{
  position:absolute;right:18px;top:14px;
  font-family:var(--display);font-weight:800;font-size:40px;line-height:1;color:#eaf3fa;
}
.principle__h{position:relative;margin:0 0 12px;font-size:16px;line-height:1.6;font-weight:700;color:var(--navy-dark);}
.principle__p{position:relative;margin:0;font-size:12.5px;line-height:1.95;color:var(--ink-2);}

/* ---------- 單位／客戶標籤牆 ---------- */
.orgs{display:grid;gap:26px;margin:0;}
.orgs__group{}
.orgs__label{
  display:flex;align-items:center;gap:12px;margin:0 0 14px;
  font-family:var(--display);font-size:11px;font-weight:700;letter-spacing:.16em;color:var(--navy);
}
.orgs__label::after{content:"";flex:1;height:1px;background:#dbeaf5;}
.orgs__list{display:flex;flex-wrap:wrap;gap:9px;margin:0;padding:0;list-style:none;}
.orgs__list li{
  background:#fff;border:1px solid #d3e7f4;color:var(--navy-dark);
  font-size:12.5px;line-height:1.7;padding:7px 14px;transition:border-color .2s,transform .2s;
}
.orgs__list li:hover{border-color:var(--orange);transform:translateY(-2px);}
.orgs__list li.is-key{background:var(--navy);border-color:var(--navy);color:#fff;font-weight:700;}

/* ---------- 側欄目錄的捲動高亮 ---------- */
.sidebar .is-current{color:var(--orange-dk);font-weight:700;}
.sidebar .is-current::before{content:"▸ ";}

@media (max-width:1024px){ .principles{grid-template-columns:1fr;} }
@media (max-width:768px){
  .skillbar{grid-template-columns:1fr;gap:6px;}
  .skillbar__value{text-align:left;min-width:0;}
  .timeline{padding-left:38px;}
  .timeline::before,.timeline__progress{left:13px;}
  .timeline__dot{left:-33px;}
}

/* ============================================================
   案例分鏡（.cinema）
   ============================================================
   案例詳情頁用的滿版章節區塊。原本靠 GSAP ScrollTrigger 做 pin-scroll，
   那支函式庫在換皮時移除了，導致這組元件完全沒有樣式 —— 頁面等於裸奔。
   這裡用 CSS + IntersectionObserver 重建，不引任何函式庫。 */
.cinema{position:relative;margin:0;}
.cinema__stage{
  position:relative;display:flex;align-items:center;
  min-height:min(88vh,760px);padding:80px 0;overflow:hidden;
  background:var(--navy-dark);
}
/* 背景是 placeholder-svg 產生的品牌抽象圖，鋪滿並壓暗好讓文字浮出來 */
.cinema__bg{position:absolute;inset:0;z-index:0;line-height:0;}
.cinema__bg svg,.cinema__bg img{width:100%;height:100%;object-fit:cover;display:block;}
.cinema__bg::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(105deg,rgba(10,63,120,.92) 0%,rgba(13,77,146,.78) 45%,rgba(10,63,120,.55) 100%);
}
.cinema__inner{
  position:relative;z-index:2;
  width:100%;max-width:var(--container);margin:0 auto;padding:0 24px;
}
.cinema__inner>*{max-width:620px;}
.cinema__eyebrow{
  margin:0 0 18px;display:flex;align-items:center;gap:14px;
  font-family:var(--display);font-size:11.5px;font-weight:700;letter-spacing:.22em;
  color:var(--orange-lt);
}
.cinema__eyebrow::after{content:"";flex:1;max-width:64px;height:1px;background:var(--orange-lt);opacity:.6;}
.cinema__title{
  margin:0 0 22px;font-size:clamp(26px,3.4vw,42px);line-height:1.45;
  font-weight:700;letter-spacing:.03em;color:#fff;text-wrap:balance;
}
.cinema__title em{
  font-style:normal;
  background:linear-gradient(transparent 58%,rgba(208,83,24,.85) 58%,rgba(208,83,24,.85) 94%,transparent 94%);
  padding:0 2px;
}
.cinema__body{margin:0 0 28px;font-size:15px;line-height:2.05;color:rgba(255,255,255,.88);}
.cinema__meta{display:flex;flex-wrap:wrap;gap:0;margin:0;background:rgba(255,255,255,.08);backdrop-filter:blur(2px);}
.cinema__meta>div{padding:16px 22px;border-right:1px solid rgba(255,255,255,.16);}
.cinema__meta>div:last-child{border-right:0;}
.cinema__meta dt{
  font-family:var(--display);font-size:10px;font-weight:700;letter-spacing:.16em;
  color:rgba(255,255,255,.55);margin-bottom:6px;
}
.cinema__meta dd{margin:0;font-size:15px;font-weight:700;color:#fff;}

/* 側邊進度點：目前讀到第幾章 */
.cinema__progress{
  position:fixed;right:22px;top:50%;transform:translateY(-50%);z-index:40;
  display:flex;flex-direction:column;gap:12px;
  opacity:0;visibility:hidden;transition:opacity .3s,visibility .3s;
}
.cinema__progress.is-visible{opacity:1;visibility:visible;}
.cinema__progress span{
  width:9px;height:9px;border-radius:50%;
  background:rgba(255,255,255,.42);border:1px solid rgba(255,255,255,.5);
  transition:background .3s,transform .3s,box-shadow .3s;
}
.cinema__progress span.is-current{
  background:var(--orange);border-color:var(--orange);
  transform:scale(1.5);box-shadow:0 0 0 4px rgba(208,83,24,.25);
}

@media (max-width:768px){
  .cinema__stage{min-height:0;padding:56px 0;}
  .cinema__meta{width:100%;}
  .cinema__meta>div{flex:1 1 50%;border-right:0;border-bottom:1px solid rgba(255,255,255,.16);}
  .cinema__progress{display:none;}   /* 手機沒有空間，也不需要 */
}

/* ---------- 服務區域 ---------- */
.area-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;align-items:stretch;}
.area{
  display:flex;flex-direction:column;height:100%;overflow:hidden;
  background:#fff;padding:26px 24px 22px;
  box-shadow:0 10px 26px rgba(20,70,120,.11);border-top:3px solid var(--sky);
}
.area--primary{border-top-color:var(--orange);}
/* 有配圖的卡片：圖片滿版貼齊卡片上緣，內距改由內容自己負責 */
.area--photo{padding:0 24px 22px;}
.area__media{position:relative;margin:0 -24px 20px;aspect-ratio:16/9;overflow:hidden;background:var(--navy-dark);}
.area__media img{width:100%;height:100%;object-fit:cover;display:block;filter:saturate(.72) contrast(1.06);}
.area__media::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(155deg,rgba(13,77,146,.52),rgba(10,63,120,.20) 48%,rgba(208,83,24,.26));
  mix-blend-mode:multiply;
}
.area__en{margin:0 0 8px;font-family:var(--display);font-weight:700;font-size:10.5px;letter-spacing:.18em;color:#8a99a8;}
.area__city{margin:0 0 12px;display:flex;align-items:center;gap:10px;font-size:19px;line-height:1.4;font-weight:700;color:var(--navy-dark);}
.area__badge{background:var(--orange-dk);color:#fff;font-size:10px;font-weight:700;letter-spacing:.06em;padding:3px 8px;}
.area__note{flex:1;margin:0 0 16px;font-size:12.5px;line-height:1.95;color:var(--ink-2);}
.area__spec{display:grid;grid-template-columns:auto 1fr;gap:7px 10px;margin:0;padding-top:14px;border-top:1px solid #e2eef6;}
.area__spec dt{background:#dceefa;color:var(--navy);font-size:9.5px;font-weight:700;letter-spacing:.06em;padding:3px 7px;text-align:center;white-space:nowrap;line-height:1.4;}
.area__spec dd{margin:0;font-size:11.5px;line-height:1.7;color:var(--ink-2);}

@media (max-width:1024px){ .area-grid{grid-template-columns:repeat(2,1fr);} }
@media (max-width:768px){ .area-grid{grid-template-columns:1fr;} }

/* ---------- 進場動畫 ----------
   舊模板用 [data-reveal] 標記要進場的元素（原本由 refined.js 處理）。
   .is-in 那條要寫成 .is-in.is-in 拉高權重 — compat.css 在 site.css 之後載入，
   否則上面的隱藏態會蓋掉 site.css 裡的顯示規則。 */
.js-motion :is([data-reveal],.hero-meta,.timeline__item,.skillbar,.principle,.orgs__group){
  opacity:0;
  transform:translate3d(0,var(--rise,30px),0);
  transition:opacity .85s cubic-bezier(.22,1,.36,1) var(--d,0s),
             transform .95s cubic-bezier(.22,1,.36,1) var(--d,0s);
}
.js-motion :is([data-reveal],.hero-meta,.timeline__item,.skillbar,.principle,.orgs__group).is-in.is-in{opacity:1;transform:translate3d(0,0,0);}

@media (prefers-reduced-motion:reduce){
  .js-motion :is([data-reveal],.hero-meta,.timeline__item,.skillbar,.principle,.orgs__group){opacity:1;transform:none;}
}

/* ---------- RWD ---------- */
@media (max-width:1024px){
  .pricing--4{grid-template-columns:repeat(2,1fr);}
  .process{grid-template-columns:repeat(2,1fr);}
  .modules{grid-template-columns:repeat(2,1fr);}
  .layout-split{grid-template-columns:1fr;gap:34px;}
  .sidebar{position:static;}
}
@media (max-width:768px){
  .section{padding:60px 0;}
  .section--tight{padding:36px 0;}
  .pricing,.pricing--3,.pricing--4,.process,.list-card,.list-card--3,
  .cases,.pain-grid,.modules{grid-template-columns:1fr;}
  /* 比較表在窄螢幕改成堆疊，橫向捲動在手機上很難用 */
  .compare__row{grid-template-columns:1fr;}
  .compare__cell{border-right:0;border-bottom:1px solid #e7f0f7;}
  .compare__row--head{display:none;}
  .compare__cell--label{font-size:13px;}
  .hero-meta>div{flex:1 1 50%;border-bottom:1px solid #e7f0f7;}
  .form{padding:26px 20px;}
  .chart-bars__row{grid-template-columns:90px 1fr 48px;gap:10px;}
}