/* ================================================================
 * OPENV 網站樣式（第三階段）
 * ----------------------------------------------------------------
 * 顏色、字級、間距、圓角的數值在 assets/theme.css（由內容 JSON 自動產生）。
 * 斷點：手機 599px 以下、平板 600–1023px、桌機 1024px 以上；首屏 768px 起左右並排。
 * 品牌的成長記號：一條往上走的金色階梯線（首屏與人才發展路徑），其餘版面保持安靜。
 * ================================================================ */

:root {
  --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang TC", "Heiti TC", "Microsoft JhengHei", "Noto Sans CJK TC", sans-serif;
  /* 標題：英文用 Manrope、中文用思源黑體（只載入頁面標題用到的字） */
  --font-head: "Manrope", "Noto Sans TC", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang TC", "Microsoft JhengHei", "Noto Sans CJK TC", sans-serif;
  --font-latin: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang TC", "Microsoft JhengHei", sans-serif;
  --font-serif: "Noto Serif TC", Georgia, "Songti TC", "PMingLiU", serif;
  --gutter: 16px;
  --ease: cubic-bezier(.2, .7, .2, 1);
  --shadow-1: 0 1px 2px rgba(31, 45, 58, .05), 0 6px 18px rgba(31, 45, 58, .06);
  --shadow-2: 0 2px 6px rgba(31, 45, 58, .08), 0 18px 40px rgba(31, 45, 58, .14);
  --danger: #B42318;
  --ok-bg: #E8F3EA; --ok-ink: #1D5B2E;
  --err-bg: #FDECEA; --err-ink: #8A1C12;
}
:root[data-theme="dark"] { --danger: #FF9B8F; --ok-bg: #173323; --ok-ink: #B8E6C4; --err-bg: #3A1D1A; --err-ink: #FFC9C2; --shadow-1: 0 1px 2px rgba(0,0,0,.3); --shadow-2: 0 18px 40px rgba(0,0,0,.45); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --danger: #FF9B8F; --ok-bg: #173323; --ok-ink: #B8E6C4; --err-bg: #3A1D1A; --err-ink: #FFC9C2; --shadow-1: 0 1px 2px rgba(0,0,0,.3); --shadow-2: 0 18px 40px rgba(0,0,0,.45); }
}
@media (min-width: 600px) { :root { --gutter: 24px; } }

/* ---------- 基本 ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
@media (prefers-reduced-motion: no-preference) { html:not([data-motion="off"]) { scroll-behavior: smooth; } }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font-family: var(--font-body); font-size: var(--body-m); line-height: 1.75;
  -webkit-font-smoothing: antialiased; overflow-wrap: break-word;
}
@media (min-width: 600px) { body { font-size: 17px; } }
@media (min-width: 1024px) { body { font-size: var(--body-d); } }
img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: var(--primary); text-underline-offset: .2em; }
h1, h2, h3 { font-family: var(--font-head); font-weight: 700; margin: 0; color: var(--text); }
p, figure, blockquote, dl, dd { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
button, input, select, textarea { font: inherit; }
strong { font-weight: 700; }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
[hidden] { display: none !important; }   /* 有 hidden 的元素一律不顯示（即使樣式另外設定了 display） */
.muted { color: var(--muted); }
.ph { display: inline-block; }   /* 標題依標點分段，不把詞拆到兩行 */
.nw { white-space: nowrap; }      /* 數字與單位不拆行 */
h1, h2, h3, .belief { text-wrap: balance; }
p, li { text-wrap: pretty; }
:focus-visible { outline: 3px solid var(--primary); outline-offset: 3px; border-radius: 4px; }
.skip-link {
  position: absolute; left: 12px; top: -80px; z-index: 100; padding: 12px 18px; border-radius: 12px;
  background: var(--primary); color: var(--on-primary); font-weight: 700; text-decoration: none;
}
.skip-link:focus { top: 12px; }
main:focus, [tabindex="-1"]:focus { outline: none; }
/* 左右留白：至少 16／24px，並避開手機橫放時的瀏海與系統列 */
.wrap { width: min(calc(100% - max(var(--gutter), env(safe-area-inset-left, 0px)) - max(var(--gutter), env(safe-area-inset-right, 0px))), var(--max)); margin-inline: auto; }
.wrap--narrow { max-width: 780px; }
.text-link { color: var(--primary); font-weight: 700; text-decoration: underline; }

/* ---------- 按鈕 ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 12px 24px; border-radius: var(--btn-radius); border: 1.5px solid transparent;
  font-weight: 700; font-size: 16px; line-height: 1.25; text-align: center; text-decoration: none; cursor: pointer;
  transition: background-color .18s var(--ease), border-color .18s var(--ease), color .18s var(--ease), filter .18s var(--ease), transform .12s var(--ease);
}
.btn-primary { background: var(--primary); color: var(--on-primary); }
.btn-primary:hover { filter: brightness(.9); }
.btn-secondary { background: transparent; color: var(--primary); border-color: var(--primary); }
.btn-secondary:hover { background: var(--surface); }
.btn-quiet { background: var(--surface); color: var(--primary); border-color: var(--line-strong); }
.btn-text { padding-inline: 6px; color: var(--primary); text-decoration: underline; }
.btn-sm { min-height: 44px; padding: 10px 18px; font-size: 15px; }
.btn-block { width: 100%; }
.btn:active { transform: translateY(1px); }
.btn[disabled] { opacity: .65; cursor: progress; }

/* ---------- 頁首 ---------- */
.site-header { position: relative; z-index: 40; background: var(--bg); border-bottom: 1px solid var(--line); }
.site-header.is-sticky { position: sticky; top: env(safe-area-inset-top, 0px); }
/* 手機全螢幕時，頁首上方的系統列區域塗上同樣的底色 */
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 41; background: var(--bg); pointer-events: none; }
.header-inner { display: flex; align-items: center; gap: 12px; min-height: 64px; }
.brand { display: inline-flex; align-items: center; gap: 10px; margin-right: auto; color: var(--text); text-decoration: none; }
.brand-mark { width: 38px; height: 38px; flex: none; }
.bm-frame { fill: none; stroke: var(--primary); stroke-width: 2.5; }
.bm-heart { fill: var(--accent); }
.brand-text { display: flex; flex-direction: column; line-height: 1.1; }
.brand-name { font-family: var(--font-latin); font-weight: 800; font-size: 20px; letter-spacing: .04em; }
.brand-sub { margin-top: 3px; font-size: 12px; letter-spacing: .08em; color: var(--muted); }
.nav-list { display: flex; flex-wrap: wrap; align-items: center; gap: 2px; }
.site-nav a:not(.btn) {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px; border-radius: 999px;
  color: var(--text); font-size: 15px; text-decoration: none;
}
.site-nav a:not(.btn):hover { color: var(--primary); }
.site-nav a[aria-current] { color: var(--primary); font-weight: 700; }
.nav-cta-item { margin-left: 8px; }
.header-tools { display: flex; align-items: center; gap: 8px; }
.icon-btn {
  display: inline-grid; place-items: center; width: 44px; height: 44px; padding: 0; border-radius: 999px;
  border: 1px solid var(--line-strong); background: var(--surface); color: var(--text); cursor: pointer;
}
.theme-btn svg { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.i-sun { display: none; }
:root[data-theme="dark"] .i-sun { display: block; }
:root[data-theme="dark"] .i-moon { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .i-sun { display: block; }
  :root:not([data-theme="light"]) .i-moon { display: none; }
}
.menu-btn { display: none; }
.menu-bars, .menu-bars::before, .menu-bars::after { display: block; width: 18px; height: 2px; border-radius: 2px; background: currentColor; transition: transform .2s var(--ease), background-color .2s; }
.menu-bars { position: relative; }
.menu-bars::before, .menu-bars::after { content: ""; position: absolute; left: 0; }
.menu-bars::before { top: -6px; }
.menu-bars::after { top: 6px; }
.menu-open .menu-bars { background: transparent; }
.menu-open .menu-bars::before { top: 0; transform: rotate(45deg); }
.menu-open .menu-bars::after { top: 0; transform: rotate(-45deg); }
@media (min-width: 1024px) { .header-inner { min-height: 76px; gap: 20px; } }
@media (max-width: 1023px) {
  .header-inner { flex-wrap: wrap; }
  .site-nav { order: 3; width: 100%; }                        /* 沒有 JavaScript 時：導覽列排在品牌下方 */
  .js .menu-btn { display: inline-grid; }
  .js .site-nav {
    display: none; position: absolute; left: 0; right: 0; top: 100%; width: auto;
    padding: 8px var(--gutter) 20px; background: var(--bg); border-bottom: 1px solid var(--line); box-shadow: var(--shadow-2);
    max-height: calc(100vh - 64px); overflow-y: auto;
  }
  .js .menu-open .site-nav { display: block; }
  .js .nav-list { flex-direction: column; align-items: stretch; gap: 0; }
  .js .site-nav a:not(.btn) { min-height: 52px; padding: 0 4px; border-radius: 0; border-bottom: 1px solid var(--line); font-size: 17px; }
  .js .nav-cta-item { margin: 16px 0 0; }
  .js .nav-cta-item .btn { width: 100%; }
}

/* ---------- 區塊與標題 ---------- */
.sec { padding-block: var(--sec-y-m); }
@media (min-width: 1024px) { .sec { padding-block: var(--sec-y); } }
.sec-head { max-width: 780px; margin-bottom: 32px; }
@media (min-width: 1024px) { .sec-head { margin-bottom: 44px; } }
@media (min-width: 600px) { .sec-head--center { margin-inline: auto; text-align: center; } }
.eyebrow { margin-bottom: 12px; font-family: var(--font-latin); font-size: 13px; font-weight: 700; letter-spacing: .14em; color: var(--accent-ink); }
.sec-title { font-size: calc(27px * var(--h2-scale)); line-height: 1.32; }
@media (min-width: 600px) { .sec-title { font-size: calc(32px * var(--h2-scale)); } }
@media (min-width: 1024px) { .sec-title { font-size: calc(40px * var(--h2-scale)); line-height: 1.26; } }
.sec-sub { margin-top: 10px; font-family: var(--font-head); font-weight: 700; font-size: 18px; line-height: 1.5; color: var(--primary); }
@media (min-width: 1024px) { .sec-sub { font-size: 21px; } }
.sec-intro { margin-top: 14px; max-width: 38em; color: var(--muted); }
@media (min-width: 600px) { .sec-head--center .sec-intro { margin-inline: auto; } }
.sec-note { margin-top: 12px; font-size: 14px; color: var(--muted); }
.footnote { margin-top: 18px; max-width: 52em; font-size: 14px; line-height: 1.7; color: var(--muted); }

/* ---------- ① 首屏 ---------- */
.sec-hero { padding-block: 36px 56px; }
@media (min-width: 1024px) { .sec-hero { padding-block: 72px 96px; } }
.hero-grid { display: grid; gap: 36px; }
@media (min-width: 768px) {
  .hero-grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: center; gap: 48px; }
  .hero--photo-left .hero-photo { order: -1; }
}
@media (min-width: 1024px) { .hero-grid { gap: 80px; } }
@media (max-width: 767px) { .hero--photo-first .hero-photo { order: -1; } }
.hero-h1 { display: block; }
.hero-name { display: block; margin-bottom: 14px; font-size: 19px; line-height: 1.35; color: var(--text); }
.hero-title { display: block; font-size: var(--h1-m); line-height: 1.2; color: var(--primary); }
@media (min-width: 600px) { .hero-name { font-size: 22px; } .hero-title { font-size: calc((var(--h1-m) + var(--h1-d)) / 2); } }
@media (min-width: 1024px) { .hero-name { font-size: 24px; } .hero-title { font-size: var(--h1-d); line-height: 1.12; letter-spacing: -.005em; } }
.growth-line { width: clamp(190px, 42vw, 300px); height: auto; margin: 20px 0 24px; overflow: visible; }
.gl-steps, .gl-arrow { fill: none; stroke: var(--accent); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
@media (prefers-reduced-motion: no-preference) {
  :root:not([data-motion="off"]) .gl-steps { stroke-dasharray: 300; stroke-dashoffset: 300; animation: gl-draw 1.1s .3s var(--ease) forwards; }
  :root:not([data-motion="off"]) .gl-arrow { opacity: 0; animation: gl-show .3s 1.35s ease-out forwards; }
}
@keyframes gl-draw { to { stroke-dashoffset: 0; } }
@keyframes gl-show { to { opacity: 1; } }
.hero-lead { max-width: 30em; font-size: 17px; line-height: 1.8; }
@media (min-width: 1024px) { .hero-lead { font-size: 20px; } }
.hero-lead strong { color: var(--primary); }
.hero-meta { margin-top: 12px; font-size: 15px; color: var(--muted); }
.hero-ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
@media (max-width: 599px) { .hero-ctas .btn { flex: 1 1 100%; } }
.hero-proof { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 32px; padding-top: 20px; border-top: 1px solid var(--line); }
@media (min-width: 600px) { .hero-proof { display: flex; flex-wrap: wrap; gap: 16px 36px; } }
.hero-proof li, .a-proof li { display: flex; flex-direction: column; min-width: 0; }
.hp-num { font-family: var(--font-latin); font-weight: 800; font-size: 26px; line-height: 1.1; color: var(--text); white-space: nowrap; }
/* 320px 寬的手機：數字縮小一點，「300+ 場」才不會把「場」擠到下一行 */
@media (max-width: 359px) { .hp-num { font-size: 22px; } }
.hp-num .unit, .stat-num .unit, .rt-count .unit { margin-left: 3px; font-family: var(--font-body); font-weight: 700; font-size: 15px; letter-spacing: 0; }
.hp-lbl { margin-top: 4px; font-size: 13px; line-height: 1.5; color: var(--muted); }
@media (min-width: 600px) { .hp-num { font-size: 28px; } .hp-lbl { font-size: 14px; } }
.hero-photo { position: relative; margin: 0; }
.hero-photo img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--radius-lg); background: var(--surface-2); }
@media (max-width: 767px) { .hero-photo img { aspect-ratio: 1 / 1; } }
.hero-badge { position: absolute; left: 16px; right: 16px; bottom: 16px; padding: 12px 16px; border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow-1); display: none; }
.hero-badge small { display: block; font-size: 13px; color: var(--muted); }
@media (min-width: 768px) { .hero-badge.show-d { display: block; } }
@media (max-width: 767px) { .hero-badge.show-m { display: block; } }

/* ---------- ② 核心差異與實績數字 ---------- */
.sec-proof { background: var(--surface); border-block: 1px solid var(--line); }
.proof-top { display: grid; gap: 16px 56px; margin-bottom: 40px; }
.proof-head { margin-bottom: 0; }
.proof-lead { max-width: 38em; }
@media (min-width: 1024px) { .proof-top { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: end; margin-bottom: 56px; } }
/* 人才發展路徑：桌機是往右上升的四階樓梯，手機是由上往下的四個階段 */
.path-wrap { margin-bottom: 48px; }
.path-cap { margin-bottom: 14px; font-size: 14px; font-weight: 700; color: var(--accent-ink); }
.path { display: grid; gap: 0; }
.path-step { position: relative; padding: 0 0 22px 52px; }
.path-step::before { content: ""; position: absolute; left: 15px; top: 34px; bottom: 0; width: 3px; background: var(--accent); }
.path-step:last-child::before { display: none; }
.path-n {
  position: absolute; left: 0; top: 0; display: grid; place-items: center; width: 33px; height: 33px; border-radius: 50%;
  background: var(--accent-wash); color: var(--accent-ink); font-family: var(--font-latin); font-weight: 800; font-size: 15px;
}
.path-zh { font-size: 20px; line-height: 1.4; }
.path-en { margin-top: 2px; font-family: var(--font-latin); font-weight: 700; font-size: 14px; color: var(--primary); }
.path-text { margin-top: 6px; font-size: 15px; color: var(--muted); }
@media (min-width: 768px) {
  .path { grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: end; }
  .path-step { padding: 18px 18px 20px; border-top: 3px solid var(--accent); background: var(--accent-wash); }
  .path-step::before { left: -3px; top: -3px; bottom: auto; width: 3px; height: 39px; }
  .path-step:first-child::before { display: none; }
  .path-step:last-child::before { display: block; }
  .path-step:nth-child(1) { min-height: 132px; }
  .path-step:nth-child(2) { min-height: 168px; }
  .path-step:nth-child(3) { min-height: 204px; }
  .path-step:nth-child(4) { min-height: 240px; }
  .path-step:last-child::after {   /* 樓梯頂端的向上箭頭（成長記號，和首屏的金色階梯線同一個形狀） */
    content: ""; position: absolute; right: 0; top: -27px; width: 16px; height: 26px; background: var(--accent);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 26'%3E%3Cpath d='M8 25V3M2 9l6-6 6 6' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 26'%3E%3Cpath d='M8 25V3M2 9l6-6 6 6' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;
  }
  .path-n { position: static; display: inline-grid; width: auto; height: auto; margin-bottom: 8px; background: none; font-size: 14px; }
  .path-zh { font-size: 21px; }
}
@media (min-width: 1024px) { .path-step { padding: 22px 24px 24px; } .path-zh { font-size: 23px; } }
/* 實績數字：桌機一排三格（42 次是寬格，裡面是營隊角色）；手機兩格並排，42 次占滿一列 */
.stats--proof { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--line-strong); }
.stats--proof .stat { padding: 20px 16px 22px 0; border-bottom: 1px solid var(--line); }
.stats--proof .stat + .stat:not(.stat--wide) { padding-left: 20px; border-left: 1px solid var(--line); }
.stats--proof .stat--wide { grid-column: 1 / -1; }
@media (min-width: 1024px) {
  .stats--proof { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 2.4fr); }
  .stats--proof .stat { padding: 28px 24px 30px 0; }
  .stats--proof .stat + .stat { padding-left: 32px; border-left: 1px solid var(--line); }
  .stats--proof .stat--wide { grid-column: auto; }
}
.stat-num { font-family: var(--font-latin); font-weight: 800; font-size: 32px; line-height: 1.05; letter-spacing: -.01em; color: var(--text); }
.stat-num .unit { font-size: 15px; }
.stat-lbl { margin-top: 8px; font-size: 14px; line-height: 1.55; color: var(--muted); }
@media (min-width: 1024px) { .stat-num { font-size: 40px; } .stat-lbl { font-size: 15px; } }
.stat-roles { margin-top: 18px; padding-top: 16px; border-top: 1px dashed var(--line-strong); }
.roles-cap { margin-bottom: 10px; font-size: 13px; font-weight: 700; color: var(--accent-ink); }
.stat-roles ul { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
/* 4 個角色：手機 2×2，600px 以上排成一列 */
.stat-roles--n4 ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 600px) { .stat-roles--n4 ul { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.stat-sub { margin-top: 4px; font-size: 13px; line-height: 1.55; color: var(--muted); }
.stat-num--sm { font-size: 24px; }
@media (min-width: 1024px) { .stat-num--sm { font-size: 28px; } }

/* ---------- ③ 五張受眾卡 ---------- */
.aud-grid { display: grid; gap: 12px; }
.aud-item { display: flex; }
.aud-card {
  display: flex; flex-direction: column; width: 100%; padding: 24px; border-radius: var(--radius);
  background: var(--surface); border: 1px solid var(--line-strong); box-shadow: var(--shadow-1);
  color: var(--text); text-decoration: none;
  transition: transform .22s var(--ease), box-shadow .22s var(--ease), border-color .22s var(--ease);
}
.aud-icon { display: block; width: 64px; height: 64px; margin-bottom: 18px; color: var(--primary); transition: transform .22s var(--ease); }
.aud-svg, .a-svg { width: 100%; height: 100%; }
.ic-accent { color: var(--accent); }
.icon-mask { display: block; width: 100%; height: 100%; background: currentColor; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; }
.aud-title { font-size: 19px; line-height: 1.45; }
.aud-en { margin-top: 4px; font-family: var(--font-latin); font-size: 13px; color: var(--muted); }
.aud-line { flex: 1; margin-top: 8px; font-size: 16px; line-height: 1.7; color: var(--muted); }
.aud-more { display: inline-flex; align-items: center; gap: 6px; margin-top: 18px; font-size: 15px; font-weight: 700; color: var(--primary); }
.aud-arrow { display: inline-block; transition: transform .22s var(--ease); }
@media (hover: hover) {
  .aud-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-2); border-color: var(--primary); }
  .aud-card:hover .aud-icon { transform: scale(1.06); }
  .aud-card:hover .aud-arrow { transform: translateX(4px); }
}
.aud-card:focus-visible { transform: translateY(-4px); box-shadow: var(--shadow-2); border-color: var(--primary); outline: 3px solid var(--primary); outline-offset: 3px; border-radius: var(--radius); }
.aud-card:active { transform: translateY(-1px) scale(.99); border-color: var(--primary); transition-duration: .12s; }
@media (prefers-reduced-motion: reduce) {
  .aud-card, .aud-icon, .aud-arrow { transition: border-color .22s var(--ease), box-shadow .22s var(--ease); }
  .aud-card:hover, .aud-card:focus-visible, .aud-card:active, .aud-card:hover .aud-icon, .aud-card:hover .aud-arrow { transform: none; }
}
[data-motion="off"] .aud-card, [data-motion="off"] .aud-icon, [data-motion="off"] .aud-arrow { transform: none !important; }
@media (max-width: 599px) {
  .aud-card { display: grid; grid-template-columns: 48px minmax(0, 1fr); column-gap: 14px; padding: 18px; }
  .aud-icon { width: 48px; height: 48px; margin: 0; }
  .aud-title { align-self: center; font-size: 18px; }
  .aud-en, .aud-line, .aud-more { grid-column: 1 / -1; }
  .aud-line { margin-top: 12px; }
  .aud-more { margin-top: 12px; }
}
@media (min-width: 600px) {
  .aud-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
  .aud-grid--5 .aud-item:last-child { grid-column: 1 / -1; justify-self: center; width: calc(50% - 8px); }
  .aud-grid--3 .aud-item:last-child { grid-column: 1 / -1; justify-self: center; width: calc(50% - 8px); }
}
@media (min-width: 1024px) {
  .aud-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 20px; }
  .aud-item { grid-column: span 2; }
  .aud-grid--5 .aud-item:nth-child(4) { grid-column: 2 / span 2; }
  .aud-grid--5 .aud-item:last-child { grid-column: 4 / span 2; width: auto; justify-self: stretch; }
  .aud-grid--3 .aud-item:last-child { grid-column: span 2; width: auto; justify-self: stretch; }
  .aud-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .aud-grid--4 .aud-item { grid-column: auto; }
}
@media (min-width: 1280px) {
  .aud-five .aud-grid--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .aud-five .aud-grid--5 .aud-item, .aud-five .aud-grid--5 .aud-item:nth-child(4), .aud-five .aud-grid--5 .aud-item:last-child { grid-column: auto; }
}

/* ---------- ④ OPENV 3V × 三大課程 ---------- */
.sec-courses, .sec-openv { background: var(--surface-2); }
.v-grid, .course-grid, .v-cards { display: grid; gap: 20px; }
@media (min-width: 1024px) { .v-grid, .course-grid, .v-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; } }
.v-col, .v-cards > li { display: flex; flex-direction: column; padding: 28px 24px; border-radius: var(--radius-lg); background: var(--surface); border: 1px solid var(--line); }
.course-grid > .course { padding: 28px 24px; border-radius: var(--radius-lg); background: var(--surface); border: 1px solid var(--line); }
.v-head { margin-bottom: 20px; padding-bottom: 20px; border-bottom: 1px solid var(--line); }
.v-name { font-family: var(--font-latin); font-weight: 800; font-size: 34px; line-height: 1; letter-spacing: -.01em; color: var(--primary); }
.v-tag { margin-top: 10px; font-family: var(--font-head); font-weight: 700; font-size: 18px; color: var(--accent-ink); }
.v-q { margin-top: 10px; font-size: 15px; line-height: 1.7; color: var(--muted); }
@media (min-width: 1024px) { .v-q { min-height: 3.4em; } }
.sec-courses .eyebrow, .sec-openv .eyebrow, .sec-ace .eyebrow, .sec-offerings .eyebrow, .sec-more .eyebrow { color: var(--accent-ink-2); }
.course { display: flex; flex-direction: column; flex: 1; }
.course-tag { margin-bottom: 6px; font-family: var(--font-latin); font-weight: 700; font-size: 13px; letter-spacing: .06em; color: var(--accent-ink); }
.course-title { font-size: 21px; line-height: 1.4; }
.course-sub { margin-top: 4px; font-size: 16px; font-weight: 700; color: var(--primary); }
.course-sum { margin-top: 12px; font-size: 16px; line-height: 1.75; }
.course-more { margin-top: 16px; border-top: 1px solid var(--line); }
.course-more summary, .form-more summary {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 48px;
  font-weight: 700; font-size: 15px; color: var(--primary); cursor: pointer; list-style: none;
}
.course-more summary::-webkit-details-marker, .form-more summary::-webkit-details-marker, .faq-item summary::-webkit-details-marker { display: none; }
.course-more summary::after, .form-more summary::after { content: "+"; font-size: 22px; font-weight: 400; line-height: 1; }
.course-more[open] summary::after, .form-more[open] summary::after { content: "−"; }
.course-dl { display: grid; gap: 12px; padding: 4px 0 12px; }
.course-dl dt { font-size: 13px; font-weight: 700; color: var(--muted); }
.course-dl dd { margin-top: 2px; font-size: 15px; line-height: 1.7; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chips li { padding: 3px 10px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--line); font-size: 13px; line-height: 1.6; }
.course-cta { align-self: flex-start; margin-top: auto; }
.course-sum + .course-cta, .course-more + .course-cta, .course-sub + .course-cta { margin-top: 20px; }
@media (min-width: 1024px) { .course .course-cta { margin-top: auto; } .course > :nth-last-child(2) { margin-bottom: 20px; } }

/* ---------- ⑤ 人才培育故事＋講師介紹 ---------- */
.story-head { max-width: 860px; }
.story-head .sec-title[lang="en"] { font-family: var(--font-latin); font-weight: 800; letter-spacing: -.015em; }
.table-wrap { overflow-x: auto; }
.roles-table { width: 100%; border-collapse: collapse; font-size: 16px; }
.roles-table th, .roles-table td { padding: 16px 16px 16px 0; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); }
.roles-table thead th { padding-block: 10px; font-size: 13px; font-weight: 700; color: var(--muted); border-bottom: 1px solid var(--line-strong); }
.roles-table tbody th { font-weight: 700; white-space: nowrap; }
.rt-count { font-family: var(--font-latin); font-weight: 800; font-size: 22px; line-height: 1.3; white-space: nowrap; color: var(--primary); }
.rt-count .unit { font-size: 13px; }
@media (max-width: 599px) {
  .roles-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .roles-table tr { display: grid; grid-template-columns: auto 1fr; column-gap: 12px; align-items: baseline; padding: 14px 0; border-bottom: 1px solid var(--line); }
  .roles-table th, .roles-table td { padding: 0; border: 0; }
  .roles-table td:last-child { grid-column: 1 / -1; margin-top: 6px; font-size: 15px; color: var(--muted); }
}
.bio { display: grid; gap: 16px 56px; margin-top: 56px; padding-top: 40px; border-top: 1px solid var(--line); }
@media (min-width: 1024px) { .bio { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); margin-top: 72px; } }
.bio-name { font-size: 26px; line-height: 1.35; }
.bio-id { margin-top: 10px; font-size: 15px; line-height: 1.8; color: var(--muted); }
.bio-body p { max-width: 36em; }
.bio-body p + p { margin-top: 12px; }
.bio-photo img { border-radius: var(--radius-lg); }
.exp { grid-column: 1 / -1; }
.exp-title { font-weight: 700; margin-bottom: 10px; }
.exp-list { display: grid; gap: 10px; }
@media (min-width: 768px) { .exp-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } .exp-wide { grid-column: 1 / -1; } }
.exp-list li { padding: 14px 16px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line); }
.exp-metric { display: block; font-family: var(--font-latin); font-weight: 800; font-size: 20px; }
.exp-name { display: block; font-weight: 700; }
.exp-text { display: block; font-size: 14px; color: var(--muted); }

/* ---------- ⑥ 代表案例 ---------- */
.sec-cases, .sec-a-cases { background: var(--surface); }
.case-grid { display: grid; gap: 20px; }
@media (min-width: 600px) { .case-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .case-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; } .case-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .case-grid--1 { grid-template-columns: minmax(0, 460px); } }
@media (min-width: 600px) and (max-width: 1023px) { .case-grid--1 { grid-template-columns: minmax(0, 460px); } }
.case-item { display: flex; }
.case-card { display: flex; flex-direction: column; width: 100%; overflow: hidden; border-radius: var(--radius); background: var(--bg); border: 1px solid var(--line); }
.case-img { aspect-ratio: 16 / 10; background: var(--surface-2); }
.case-img img { width: 100%; height: 100%; object-fit: cover; }
.case-body { padding: 18px 20px 22px; }
.case-org { font-size: 13px; font-weight: 700; line-height: 1.5; color: var(--accent-ink); }
.case-title { margin-top: 6px; font-size: 18px; line-height: 1.5; }
.case-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin-top: 8px; font-size: 14px; line-height: 1.6; color: var(--muted); }
.case-format { padding: 1px 10px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--line); font-size: 13px; color: var(--text); }
.case-goals-cap { margin-top: 14px; font-size: 13px; font-weight: 700; color: var(--muted); }
.case-goals { display: grid; gap: 4px; margin-top: 6px; font-size: 15px; line-height: 1.65; }
.case-goals li { position: relative; padding-left: 16px; }
.case-goals li::before { content: ""; position: absolute; left: 0; top: .72em; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.case-text { margin-top: 10px; font-size: 15px; }
.more-row { display: none; margin-top: 24px; text-align: center; }
@media (max-width: 599px) {
  .js .more-row { display: block; }
  .js .case-grid[data-collapse="3"]:not(.is-open) > li:nth-child(n+4),
  .js .case-grid[data-collapse="6"]:not(.is-open) > li:nth-child(n+7) { display: none; }
}

/* ---------- 授課現場、推薦語 ---------- */
.media-grid, .quote-grid { display: grid; gap: 20px; }
@media (min-width: 768px) { .media-grid, .quote-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.media-item img { border-radius: var(--radius); }
.media-item figcaption { margin-top: 8px; font-size: 15px; }
.media-item figcaption span { display: block; color: var(--muted); font-size: 14px; }
.quote-card { height: 100%; padding: 24px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line); }
.quote-card figcaption { margin-top: 12px; font-weight: 700; }
.quote-card figcaption span { display: block; font-weight: 400; font-size: 14px; color: var(--muted); }

/* ---------- ⑦ ACE CEO ---------- */
.sec-ace { background: var(--surface-2); }
.ace-grid { display: grid; gap: 20px; }
@media (min-width: 768px) { .ace-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; } }
.ace-group { padding: 24px; border-radius: var(--radius-lg); background: var(--surface); border: 1px solid var(--line); }
@media (min-width: 1024px) { .ace-group { padding: 32px; } }
.ace-group-title { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 12px; margin-bottom: 4px; padding-bottom: 16px; border-bottom: 1px solid var(--line-strong); font-size: 18px; }
.ace-group-en { font-family: var(--font-latin); font-weight: 800; font-size: 28px; letter-spacing: .06em; color: var(--primary); }
.ace-group-zh { color: var(--accent-ink); }
.ace-item { display: grid; grid-template-columns: 52px minmax(0, 1fr); column-gap: 16px; align-items: center; padding: 16px 0; border-bottom: 1px solid var(--line); }
.ace-item:last-child { border-bottom: 0; padding-bottom: 0; }
.ace-letter { grid-row: span 2; font-family: var(--font-latin); font-weight: 800; font-size: 44px; line-height: 1; text-align: center; color: var(--accent-ink); }
.ace-name { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; font-weight: 700; }
.ace-en { font-family: var(--font-latin); font-size: 18px; }
.ace-zh { color: var(--muted); }
.ace-q { font-size: 15px; color: var(--muted); }
.ace-cta { margin-top: 32px; text-align: center; }

/* ---------- ⑧ 講師資料下載、常見問題 ---------- */
.dl-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
@media (min-width: 1024px) { .dl-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; } }
.dl-card { display: flex; flex-direction: column; height: 100%; padding: 12px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line-strong); color: var(--text); text-decoration: none; }
.dl-thumb { display: grid; place-items: center; aspect-ratio: 3 / 4; overflow: hidden; border-radius: var(--radius-sm); background: var(--surface-2); }
.dl-ratio-4-3 .dl-thumb { aspect-ratio: 4 / 3; }
.dl-ratio-1-1 .dl-thumb { aspect-ratio: 1 / 1; }
.dl-thumb img { width: 100%; height: 100%; object-fit: contain; }
.dl-title { display: -webkit-box; margin-top: 10px; overflow: hidden; font-weight: 700; font-size: 15px; line-height: 1.5; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.dl-meta { margin-top: 4px; font-size: 13px; color: var(--muted); }
.js .dl-grid:not(.is-open) > .is-extra { display: none; }
.js .more-row--all { display: block; }
/* 放大檢視（講師資料下載） */
.dl-dialog { width: min(960px, calc(100vw - 32px)); max-height: calc(100vh - 32px); padding: 0; border: 0; border-radius: var(--radius-lg); background: var(--surface); color: var(--text); box-shadow: 0 24px 64px rgba(14, 23, 32, .28); }
.dl-dialog::backdrop { background: rgba(14, 23, 32, .62); }
.dl-dialog-in { position: relative; display: grid; gap: 20px; padding: 24px; }
@media (min-width: 768px) { .dl-dialog-in { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); align-items: center; padding: 32px; } }
.dl-close { position: absolute; top: 10px; right: 10px; display: inline-grid; place-items: center; width: 44px; height: 44px; border: 1px solid var(--line-strong); border-radius: 50%; background: var(--surface); color: var(--text); font-size: 18px; cursor: pointer; }
.dl-close:hover { border-color: var(--primary); color: var(--primary); }
.dl-figure { display: grid; place-items: center; min-height: 200px; padding: 12px; border-radius: var(--radius); background: var(--surface-2); }
.dl-figure img { width: auto; max-width: 100%; height: auto; max-height: min(70vh, 720px); object-fit: contain; }
.dl-info { display: grid; gap: 10px; align-content: start; }
.dl-name { padding-right: 44px; font-size: 20px; line-height: 1.5; }
.dl-pages { font-size: 14px; color: var(--muted); }
.dl-actions { margin-top: 6px; }
.dl-nav { display: flex; gap: 10px; }
.faq-list { border-top: 1px solid var(--line-strong); }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-item summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 64px; padding: 14px 0; cursor: pointer; list-style: none; }
.faq-q { font-size: 18px; line-height: 1.5; }
.faq-icon { position: relative; flex: none; width: 20px; height: 20px; }
.faq-icon::before, .faq-icon::after { content: ""; position: absolute; left: 3px; right: 3px; top: 9px; height: 2px; border-radius: 2px; background: var(--primary); transition: transform .2s var(--ease); }
.faq-icon::after { transform: rotate(90deg); }
.faq-item[open] .faq-icon::after { transform: rotate(0deg); }
.faq-a { max-width: 42em; padding-bottom: 22px; }

/* ---------- ⑨ Wayne's Notes ---------- */
.sec-notes { padding-block: calc(var(--sec-y-m) * 1.4); }
@media (min-width: 1024px) { .sec-notes { padding-block: calc(var(--sec-y) * 1.4); } }
.beliefs { border-top: 1px solid var(--accent); }
.beliefs li { padding: 30px 0; border-bottom: 1px solid var(--line); }
.belief { font-family: var(--font-serif); font-weight: 600; font-size: 21px; line-height: 1.75; color: var(--text); }
@media (min-width: 600px) { .belief { text-align: center; } }
@media (min-width: 1024px) { .belief { font-size: 25px; } }
.keep { margin-top: 40px; display: grid; gap: 20px; }
.keep blockquote { font-family: var(--font-serif); font-size: 19px; }
.keep figcaption { margin-top: 8px; font-size: 14px; color: var(--muted); }
.keep-note { margin-top: 6px; font-size: 15px; }

/* ---------- ⑩ 合作邀約與表單 ---------- */
.sec-contact { background: var(--dark); color: var(--on-dark); }
.sec-contact .sec-title { color: var(--on-dark); }
.sec-contact .eyebrow { color: var(--on-dark-accent); }
.sec-contact .sec-intro { color: var(--on-dark-muted); }
.sec-contact :focus-visible { outline-color: var(--on-dark); }
.contact-grid { display: grid; gap: 32px; }
@media (min-width: 1024px) {
  .contact-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 64px; align-items: start; }
  .contact-grid--stack { grid-template-columns: 1fr; }
  .contact-copy { position: sticky; top: 116px; }
}
.contact-links { display: grid; gap: 10px; margin-top: 24px; }
.contact-links li { display: flex; align-items: baseline; gap: 12px; }
.cl-label { min-width: 48px; font-size: 13px; font-weight: 700; color: var(--on-dark-muted); }
.contact-links a { color: var(--on-dark); font-weight: 700; text-decoration: underline; word-break: break-all; }
.reply-time { margin-top: 16px; color: var(--on-dark-muted); }
.contact-form-wrap { padding: 24px 18px; border-radius: var(--radius-lg); background: var(--surface); color: var(--text); }
.contact-form-wrap :focus-visible { outline-color: var(--primary); }
@media (min-width: 600px) { .contact-form-wrap { padding: 32px; } }
.form-note { margin-bottom: 18px; font-size: 14px; color: var(--muted); }
.form-grid { display: grid; gap: 18px; }
@media (min-width: 600px) {
  .form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 16px; }
  .field--organization, .field--topic, .field--audience, .field--event_date, .field--message { grid-column: 1 / -1; }
}
.field { min-width: 0; }
.field label, .field legend { display: block; margin-bottom: 6px; padding: 0; font-weight: 700; font-size: 15px; color: var(--text); }
.req { margin-left: 4px; color: var(--primary); }
.opt { margin-left: 4px; font-weight: 400; font-size: 13px; color: var(--muted); }
.field input, .field select, .field textarea {
  width: 100%; min-height: 48px; padding: 10px 14px; border-radius: 12px; border: 1.5px solid var(--line-strong);
  background: var(--input-bg); color: var(--text); font-size: 16px; line-height: 1.5;
}
.field select {
  -webkit-appearance: none; appearance: none; padding-right: 40px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'%3E%3Cpath d='M3 5l4 4 4-4' fill='none' stroke='%235F6B75' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center;
}
.field textarea { min-height: 120px; resize: vertical; }
.field input::placeholder, .field textarea::placeholder { color: var(--muted); opacity: .85; }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible { outline: 3px solid var(--primary); outline-offset: 1px; border-color: var(--primary); }
.field.has-error input, .field.has-error select, .field.has-error textarea, .field--topic.has-error .check { border-color: var(--danger); }
.field-help { margin: -2px 0 8px; font-size: 14px; color: var(--muted); }
.field-err { margin-top: 6px; font-size: 14px; font-weight: 700; color: var(--danger); }
.field-err:empty { display: none; }
fieldset.field { margin: 0; padding: 0; border: 0; }
.topic-options { display: flex; flex-wrap: wrap; gap: 8px; }
.field .check {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 14px; border-radius: 999px;
  border: 1.5px solid var(--line-strong); background: var(--input-bg); font-size: 15px; font-weight: 400 !important; cursor: pointer;
}
.field .check input { -webkit-appearance: auto; appearance: auto; flex: none; width: 18px; height: 18px; min-height: 0; margin: 0; padding: 0; border: 0; background: none; accent-color: var(--primary); }
.field .check:has(input:checked) { border-color: var(--primary); box-shadow: inset 0 0 0 1px var(--primary); }
.field .check:has(input:focus-visible) { outline: 3px solid var(--primary); outline-offset: 2px; }
.field .check input:focus-visible { outline: none; }
.topic-custom { margin-top: 12px; }
.topic-custom label { font-size: 14px; }
.form-more { margin-top: 18px; border-top: 1px solid var(--line); }
.form-more .form-grid { padding: 6px 0 4px; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.privacy { margin: 22px 0 16px; font-size: 13px; line-height: 1.75; color: var(--muted); }
.privacy a { color: inherit; }
.form-status { margin-top: 14px; font-size: 15px; line-height: 1.7; }
.form-status:empty { display: none; }
.form-status.is-success, .form-status.is-error, .form-status.is-info { padding: 14px 16px; border-radius: 12px; }
.form-status.is-success { background: var(--ok-bg); color: var(--ok-ink); }
.form-status.is-error { background: var(--err-bg); color: var(--err-ink); }
.form-status.is-info { background: var(--surface-2); color: var(--text); }
.form-fallback { display: grid; gap: 8px; margin-top: 12px; }
.form-fallback .btn { justify-self: start; }

/* ---------- 受眾詳情頁 ---------- */
.sec-a-hero { padding-block: 20px 56px; }
@media (min-width: 1024px) { .sec-a-hero { padding-block: 28px 88px; } }
.crumbs ol { display: flex; flex-wrap: wrap; gap: 4px 6px; margin-bottom: 28px; font-size: 14px; color: var(--muted); }
.crumbs li + li::before { content: "／"; margin-right: 6px; color: var(--line-strong); }
.crumbs a { display: inline-flex; align-items: center; min-height: 32px; color: var(--muted); }
.a-hero-grid { display: grid; gap: 28px; }
@media (min-width: 1024px) { .a-hero-grid { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: 64px; align-items: end; } }
.a-title { font-size: 29px; line-height: 1.35; color: var(--primary); }
@media (min-width: 600px) { .a-title { font-size: 38px; line-height: 1.3; } }
@media (min-width: 1024px) { .a-title { font-size: 48px; line-height: 1.26; } }
.a-sub { max-width: 34em; margin-top: 18px; font-size: 17px; line-height: 1.8; }
@media (min-width: 1024px) { .a-sub { font-size: 19px; } }
.a-hero-side { display: grid; gap: 18px; padding: 22px; border-radius: var(--radius-lg); background: var(--surface); border: 1px solid var(--line); }
@media (max-width: 1023px) { .a-hero-side { grid-template-columns: 64px minmax(0, 1fr); align-items: start; } }
.a-icon { display: block; width: 64px; height: 64px; color: var(--primary); }
@media (min-width: 1024px) { .a-icon { width: 96px; height: 96px; } }
.a-proof { display: grid; gap: 12px; }
.a-proof li { padding-top: 12px; border-top: 1px solid var(--line); }
.a-proof li:first-child { padding-top: 0; border-top: 0; }
.sec-problems { background: var(--surface); }
.problems { display: grid; gap: 12px; }
@media (min-width: 768px) { .problems { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } }
.problems li { position: relative; padding: 18px 20px 18px 44px; border-radius: var(--radius); background: var(--bg); border: 1px solid var(--line); line-height: 1.7; }
.problems li::before { content: ""; position: absolute; left: 20px; top: 1.65em; width: 9px; height: 9px; background: var(--accent); transform: rotate(45deg); }
.problems strong { color: var(--primary); }
.reasons { border-top: 1px solid var(--line-strong); }
.reason { display: grid; gap: 10px; padding: 28px 0; border-bottom: 1px solid var(--line); }
@media (min-width: 1024px) { .reason { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 48px; padding: 32px 0; } }
.reason-title { font-size: 20px; line-height: 1.5; }
.reason-body p:first-child { max-width: 38em; }
.reason-ev { margin-top: 14px; padding: 14px 16px; border-left: 3px solid var(--accent); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; background: var(--surface); font-size: 15px; line-height: 1.7; }
.ev-label { display: block; margin-bottom: 4px; font-size: 12px; font-weight: 700; letter-spacing: .06em; color: var(--accent-ink); }
.mid-cta { margin-top: 32px; }
.stats--grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (min-width: 768px) { .stats--grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } }
/* 5 格、7 格：第一格放寬，最後一排才不會只剩一格（手機 2 欄；5 格桌機 3 欄、7 格桌機 4 欄）；8 格桌機 4 欄 */
.stats--grid.stats--n5 .stat:first-child, .stats--grid.stats--n7 .stat:first-child { grid-column: span 2; }
@media (min-width: 768px) { .stats--grid.stats--n7, .stats--grid.stats--n8 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.stats--grid .stat { padding: 20px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line); }
.stat-en { margin-top: 8px; font-family: var(--font-latin); font-size: 12px; line-height: 1.55; color: var(--muted); }
/* 受眾頁：數字下方用這個受眾熟悉的說法寫它代表的能力（10/21） */
.stat-note { margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--line); font-size: 13px; line-height: 1.6; color: var(--muted); }
.sec-offerings, .sec-more { background: var(--surface-2); }
.offers { display: grid; gap: 16px; }
@media (min-width: 768px) { .offers { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.offer { display: flex; flex-direction: column; gap: 10px; padding: 24px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line); }
.offer-title { font-size: 19px; line-height: 1.45; }
.offer-course { font-family: var(--font-latin); font-weight: 700; font-size: 13px; letter-spacing: .06em; color: var(--accent-ink); }
.offer .chips { margin-top: auto; padding-top: 6px; }
.offer-link { align-self: flex-start; }
.practice { display: grid; gap: 16px; margin-top: 20px; }
@media (min-width: 768px) { .practice { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); } }
.case-grid + .practice { margin-top: 24px; }
.practice li { padding: 22px; border-left: 3px solid var(--accent); border-radius: 0 var(--radius) var(--radius) 0; background: var(--bg); }
.practice-title { margin-bottom: 6px; font-size: 18px; line-height: 1.5; }
.sec-404 { padding-block: 72px 96px; }
.nf-links { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.nf-aud { display: grid; gap: 8px; margin-top: 32px; }

/* ---------- 公開課（2026-10-21）：招生提示、首頁近期開課、公開課頁、活動頁 ---------- */
/* 每一頁最上方的招生提示：深藍細條，只放最近一場招生中的活動 */
.promo-bar { background: var(--dark); color: var(--on-dark); font-size: 14px; line-height: 1.4; }
.promo-in { display: flex; align-items: center; gap: 10px; min-height: 44px; }
.promo-tag { flex: none; padding: 1px 9px; border-radius: 999px; border: 1px solid var(--on-dark-accent); color: var(--on-dark-accent); font-size: 12px; font-weight: 700; letter-spacing: .04em; }
.promo-link { display: flex; flex: 1; align-items: center; gap: 8px; min-width: 0; min-height: 44px; color: var(--on-dark); text-decoration: none; }
.promo-date { flex: none; font-weight: 700; }
.promo-title { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; text-decoration: underline; text-decoration-color: var(--on-dark-accent); text-underline-offset: .22em; }
.promo-link:hover .promo-title { text-decoration-thickness: 2px; }
.promo-all { flex: none; display: inline-flex; align-items: center; min-height: 44px; padding-inline: 4px; color: var(--on-dark-muted); font-size: 13px; }
.promo-bar :focus-visible { outline-color: var(--on-dark); outline-offset: -3px; }
@media (max-width: 599px) { .promo-all { display: none; } }

/* 活動卡：有文宣圖就放文宣（完整顯示、不裁切）；沒有就放金色日期牌（和人才發展路徑同一個樣式） */
.sec-learn { background: var(--bg); }
.lcards { display: grid; gap: 16px; }
@media (min-width: 768px) { .lcards--n2, .lcards--n3 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; } }
@media (min-width: 1024px) { .lcards--n3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; } }
.lcard { display: flex; min-width: 0; }
.lcard-in { display: flex; flex-direction: column; width: 100%; overflow: hidden; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line); }
.lcard-media { position: relative; display: block; aspect-ratio: 16 / 10; overflow: hidden; background: var(--surface-2); text-decoration: none; }
.lcard-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.dtile { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; border-top: 3px solid var(--accent); background: var(--accent-wash); color: var(--primary); }
.dtile-m, .dtile-w { font-size: 15px; font-weight: 700; line-height: 1.4; }
.dtile-m { color: var(--accent-ink); }
.dtile-w { color: var(--muted); }
.dtile-d { font-family: var(--font-latin); font-weight: 800; font-size: 76px; line-height: 1; letter-spacing: -.02em; }
@media (max-width: 599px) {
  .lcard-media:not(.lcard-media--poster) { aspect-ratio: 5 / 2; }
  .dtile { flex-flow: row wrap; align-content: center; align-items: baseline; gap: 10px; }
  .dtile-d { font-size: 56px; }
}
.lcard-body { display: flex; flex: 1; flex-direction: column; gap: 8px; min-width: 0; padding: 18px 20px 20px; }
.ltags { display: flex; flex-wrap: wrap; gap: 6px; }
.lbadge { display: inline-flex; align-items: center; padding: 0 10px; border-radius: 999px; border: 1px solid transparent; background: var(--accent-wash); color: var(--accent-ink); font-size: 13px; font-weight: 700; line-height: 1.75; }
.lbadge--quiet { background: var(--surface-2); color: var(--text); font-weight: 400; }
.lbadge--demo { background: transparent; border: 1px dashed var(--primary); color: var(--primary); }
.lcard-title { font-size: 19px; line-height: 1.45; }
.lcard-title a { color: var(--text); text-decoration: none; }
.lcard-title a:hover { color: var(--primary); text-decoration: underline; }
.lcard-when { font-size: 15px; font-weight: 700; line-height: 1.6; color: var(--primary); }
.lsep { margin-inline: 4px; font-weight: 400; color: var(--muted); }
.lcard-fee { font-size: 15px; line-height: 1.6; }
.lcard-sum { font-size: 15px; line-height: 1.7; color: var(--muted); }
.lcard-note { font-size: 13px; color: var(--muted); }
.lcard-cta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: auto; padding-top: 8px; }
.lcard-cta .btn { flex: 1 1 auto; }
.btn.is-disabled { background: var(--surface-2); color: var(--muted); border-color: var(--line); cursor: default; filter: none; transform: none; }
.lmore { margin-top: 24px; }
/* 公開課頁的活動列表、首頁只有一場活動時：平板以上改成橫排（左邊文宣或日期、右邊資訊），像一張課表
   （首頁只有一場時若照直排，沒有文宣的日期牌會撐滿整個寬度） */
@media (min-width: 768px) {
  .lcards--list .lcard-in, .lcards--n1 .lcard-in { flex-direction: row; }
  .lcards--list .lcard-media, .lcards--n1 .lcard-media { flex: 0 0 34%; max-width: 340px; aspect-ratio: auto; min-height: 240px; }
  .lcards--list .lcard-body, .lcards--n1 .lcard-body { padding: 24px 28px; }
  .lcards--list .lcard-cta .btn, .lcards--n1 .lcard-cta .btn { flex: 0 0 auto; min-width: 160px; }
}
@media (min-width: 1024px) { .lcards--list .lcard-title, .lcards--n1 .lcard-title { font-size: 22px; } }

/* 公開課頁 */
.sec-l-hero { padding-bottom: 32px; }
@media (min-width: 1024px) { .sec-l-hero { padding-bottom: 40px; } }
.l-jump ul { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px; }
.l-jump a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border-radius: 999px; border: 1px solid var(--line-strong); background: var(--surface); color: var(--text); font-size: 15px; text-decoration: none; }
.l-jump a:hover { border-color: var(--primary); color: var(--primary); }
.demo-note { margin-top: 20px; max-width: 46em; padding: 12px 16px; border: 1px dashed var(--primary); border-radius: var(--radius-sm); background: var(--surface); font-size: 14px; line-height: 1.7; }
.sec-l-list { padding-top: 16px; }
.l-empty { padding: 22px 24px; border-radius: var(--radius); border: 1px dashed var(--line-strong); color: var(--muted); }
.sec-l-online { background: var(--surface-2); }
.ocards { display: grid; gap: 16px; }
@media (min-width: 768px) { .ocards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; } }
@media (min-width: 1024px) { .ocards--n3, .ocards--n5, .ocards--n6 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .ocards--n1 { grid-template-columns: minmax(0, 560px); } }
.ocard { display: flex; flex-direction: column; overflow: hidden; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line); }
.ocard-img { width: 100%; aspect-ratio: 16 / 10; object-fit: contain; background: var(--surface-2); }
.ocard-body { display: flex; flex: 1; flex-direction: column; gap: 10px; padding: 20px; }
.ocard-cta { margin-top: auto; padding-top: 6px; }
.one-card { display: grid; gap: 24px; padding: 28px 22px; border-radius: var(--radius-lg); border: 1px solid var(--line); border-top: 3px solid var(--accent); background: var(--surface); }
@media (min-width: 600px) { .one-card { padding: 32px; } }
@media (min-width: 1024px) { .one-card { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 56px; padding: 40px 44px; } }
.one-head .sec-title { margin-top: 10px; }
.one-body { display: grid; gap: 16px; align-content: start; }
.one-sub { font-size: 14px; font-weight: 700; color: var(--accent-ink); }
.one-sub + .ticks { margin-top: -6px; }
.one-mail { font-size: 14px; color: var(--muted); }
.sec-l-invite { background: var(--surface-2); }
.l-invite-in { display: grid; gap: 20px; align-items: center; }
@media (min-width: 1024px) { .l-invite-in { grid-template-columns: minmax(0, 1fr) auto; gap: 48px; } }
.sec-l-invite .sec-title { font-size: calc(24px * var(--h2-scale)); }
@media (min-width: 1024px) { .sec-l-invite .sec-title { font-size: calc(30px * var(--h2-scale)); } }

/* 活動資訊列表（日期、地點、費用…）：左邊項目、右邊內容 */
.facts { display: grid; margin-top: 24px; border-top: 1px solid var(--line-strong); }
.facts > div { display: grid; grid-template-columns: 5.6em minmax(0, 1fr); gap: 4px 16px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.facts dt { padding-top: 2px; font-size: 14px; font-weight: 700; color: var(--muted); }
.facts dd { min-width: 0; font-size: 16px; line-height: 1.7; }
.facts--sm { margin-top: 2px; border-top-color: var(--line); }
.facts--sm > div { grid-template-columns: 5em minmax(0, 1fr); padding: 8px 0; }
.facts--sm dt { font-size: 13px; }
.facts--sm dd { font-size: 15px; }
.facts--info { margin-top: 0; }
.facts--info dd { max-width: 40em; }
@media (min-width: 600px) { .facts--info > div { grid-template-columns: 9em minmax(0, 1fr); } }
.ev-sessions { display: grid; gap: 4px; }
.ticks { display: grid; gap: 8px; }
.ticks li { position: relative; padding-left: 24px; line-height: 1.7; }
.ticks li::before { content: ""; position: absolute; left: 3px; top: .64em; width: 8px; height: 8px; background: var(--accent); transform: rotate(45deg); }

/* 活動頁 */
.sec-ev-hero { padding-bottom: 48px; }
.ev-ended { margin-bottom: 20px; padding: 12px 16px; border-radius: var(--radius-sm); background: var(--surface-2); font-weight: 700; }
.ev-grid { display: grid; gap: 32px; }
@media (min-width: 1024px) { .ev-grid--poster { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 64px; align-items: start; } }
.ev-main { min-width: 0; }
.ev-grid:not(.ev-grid--poster) .ev-main { max-width: 820px; }   /* 沒有文宣圖時，資訊列表不要拉得太寬 */
.ev-main .a-title { margin-top: 14px; }
.ev-poster { max-width: 560px; }
.ev-poster img { width: 100%; border-radius: var(--radius); background: var(--surface-2); box-shadow: var(--shadow-1); }
@media (min-width: 1024px) { .ev-poster { position: sticky; top: 100px; } }
.ev-cta { display: grid; gap: 10px; justify-items: start; margin-top: 24px; }
.ev-cta .btn { min-width: 220px; }
@media (max-width: 599px) { .ev-cta { justify-items: stretch; } .ev-cta .btn { min-width: 0; } }
.ev-note { font-size: 14px; color: var(--muted); }
.ev-wrap > * { max-width: 780px; }   /* 活動頁的內容區塊：和首屏同一條左邊線，行寬不超過 780px */
.sec-ev-about { background: var(--surface); border-block: 1px solid var(--line); }
.ev-lead { font-size: 18px; line-height: 1.8; }
@media (min-width: 1024px) { .ev-lead { font-size: 20px; } }
.ev-h3 { margin: 32px 0 12px; font-size: 18px; }
.agenda li { display: grid; grid-template-columns: 4.6em minmax(0, 1fr); gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.agenda li:first-child { border-top: 1px solid var(--line-strong); }
.agenda li:not(:has(.agenda-time)) { grid-template-columns: minmax(0, 1fr); }
.agenda-time { font-family: var(--font-latin); font-weight: 800; color: var(--primary); }
.agenda-text { line-height: 1.7; }
.sec-ev-teacher { background: var(--surface-2); }
.ev-teacher-name { font-family: var(--font-head); font-size: 21px; font-weight: 700; }
.ev-teacher-text { margin: 8px 0 14px; color: var(--muted); }
.sec-ev-info { border-top: 1px solid var(--line); }
.sec-ev-band { background: var(--dark); color: var(--on-dark); }
.sec-ev-band .sec-title { font-size: calc(24px * var(--h2-scale)); color: var(--on-dark); }
@media (min-width: 1024px) { .sec-ev-band .sec-title { font-size: calc(30px * var(--h2-scale)); } }
.ev-band-in { display: grid; gap: 20px; align-items: center; }
@media (min-width: 1024px) { .ev-band-in { grid-template-columns: minmax(0, 1fr) auto; gap: 48px; } }
.sec-ev-band .ev-cta { margin-top: 0; }
.ev-band-when { margin-top: 8px; color: var(--on-dark-muted); }
.sec-ev-band .lsep, .sec-ev-band .ev-note { color: var(--on-dark-muted); }
.sec-ev-band .btn-primary { background: var(--on-dark); color: var(--dark); }
.sec-ev-band .btn.is-disabled { background: transparent; color: var(--on-dark-muted); border-color: var(--on-dark-muted); }
.sec-ev-band :focus-visible { outline-color: var(--on-dark); }
.ga-notice { grid-column: 1 / -1; margin-top: -14px; font-size: 12px; line-height: 1.7; color: var(--muted); }
.ga-notice a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }

/* ---------- 頁尾與手機底部按鈕 ---------- */
.site-footer { padding: 48px 0 calc(32px + env(safe-area-inset-bottom)); background: var(--bg); border-top: 1px solid var(--line); }
.footer-grid { display: grid; gap: 28px; }
@media (min-width: 768px) { .footer-grid { grid-template-columns: 2fr 1.6fr 1.4fr; } }
.footer-slogan { margin-top: 12px; font-size: 15px; color: var(--muted); }
.footer-title { margin-bottom: 8px; font-size: 13px; font-weight: 700; color: var(--accent-ink); }
.footer-col a { display: inline-flex; align-items: center; min-height: 40px; color: var(--text); font-size: 15px; text-decoration: none; word-break: break-all; }
.footer-col a:hover { color: var(--primary); text-decoration: underline; }
.copyright { grid-column: 1 / -1; padding-top: 20px; border-top: 1px solid var(--line); font-size: 13px; color: var(--muted); }
.mobile-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; display: grid; grid-template-columns: 1.4fr 1fr; gap: 10px;
  padding: 10px max(var(--gutter), env(safe-area-inset-right, 0px)) calc(10px + env(safe-area-inset-bottom, 0px)) max(var(--gutter), env(safe-area-inset-left, 0px));
  background: var(--bg); border-top: 1px solid var(--line); box-shadow: 0 -6px 20px rgba(31, 45, 58, .08);
  transition: transform .22s var(--ease), visibility .22s;
}
.mobile-bar > :only-child { grid-column: 1 / -1; }
.mobile-bar.is-hidden { transform: translateY(110%); visibility: hidden; }
@media (max-width: 1023px) { .site-footer { padding-bottom: calc(100px + env(safe-area-inset-bottom)); } }
@media (min-width: 1024px) { .mobile-bar { display: none; } }
@media (prefers-reduced-motion: reduce) { .mobile-bar { transition: none; } }

/* ---------- 列印 ---------- */
@media print {
  .site-header, .mobile-bar, .hero-ctas, .invite-form, .growth-line { display: none !important; }
  .sec { padding-block: 24px; }
  body { background: #fff; color: #000; }
}