/* ============================================================
   Course Kit 官網 — 關於有幾堂頁專屬樣式（page-about.css）
   跟 site.css 一起載入，site.css 在前。
   本檔管：頁首留白／緣起痛點卡（.pain-grid）／創辦人卡（.founder-card／
   .avatar-placeholder）／出身歸屬鏈（.attr-chain）／現況深色區
   （.dark，含 .stats-row／.cost-cards）／底部 CTA 的頁面級間距。

   .dark 這組深色卡片背景 2026-08-01 batch4 已收斂進 site.css，跟 page-landing.css／
   page-pricing.css 共用同一份，這裡不再重複維護。
   ============================================================ */

/* ---------- 頁首（固定 header 下方的留白，只設 padding-top，不可用
   shorthand，否則 .wrap 左右 padding 會被歸零，標題跟 header logo 對不齊） ---------- */
.page-top h1{margin-top:6px}
.page-top .lead{margin-top:14px;max-width:62ch}

/* ---------- 緣起：痛點卡 ---------- */
.pain-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:40px}
.pain-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);padding:26px 24px;box-shadow:var(--shadow-sm)}
/* 海獺情緒頭像（2026-08-08 Lucy 裁定：文案砍半＋海獺撐情緒） */
.pain-card .pain-otter{width:64px;height:64px;margin-bottom:12px}
.pain-card h3{font-size:var(--fs-xl)}
.pain-card p{margin-top:10px;font-size:var(--fs-md)}
.why-conclude{margin-top:36px;padding:22px 26px;border-radius:var(--r-md);background:linear-gradient(135deg,var(--brand-tint-2),var(--surface) 62%);border:1px solid var(--brand-border);box-shadow:var(--shadow-sm);color:var(--heading);font-weight:700;font-size:var(--fs-lg)}

/* ---------- 創辦人（暖色背景區，跟 --warm 系 token 呼應） ---------- */
.warm{background:linear-gradient(180deg,var(--warm) 0%,rgba(244,243,210,.4) 100%)}
.founder-card{display:flex;align-items:center;gap:28px;margin-top:36px;background:var(--surface);border:1px solid var(--warm-line);border-radius:var(--r-lg);padding:32px;box-shadow:var(--shadow-md)}
.avatar-placeholder{flex:0 0 auto;width:128px;height:128px;border-radius:50%;background:var(--bg);border:2px dashed var(--line);display:flex;align-items:center;justify-content:center;text-align:center;padding:8px}
.avatar-placeholder .todo{margin-left:0;white-space:normal;line-height:1.4}
/* 創辦人插畫頭像（2026-08-08 取代 placeholder）：直式原圖裁成圓形，對焦臉部偏上 */
.founder-avatar{flex:0 0 auto;width:128px;height:128px;border-radius:50%;object-fit:cover;
  object-position:50% 22%;border:3px solid #fff;box-shadow:var(--shadow-sm)}
.founder-text h3{font-size:var(--fs-2xl)}
.founder-quote{margin-top:12px;font-size:var(--fs-lg);color:var(--ink-2);line-height:1.75}
.founder-sign{margin-top:8px;font-size:var(--fs-sm);color:var(--faint);font-weight:700}
/* VCH 歸屬句（2026-08-08 出身區整區刪除後，濃縮成創辦人區這一行） */
.founder-org{margin-top:14px;font-size:var(--fs-sm);color:var(--sub)}
.founder-org a{color:var(--brand-text);text-decoration:underline;
  text-decoration-color:var(--brand-border);text-underline-offset:2px}
.founder-org a:hover{text-decoration-color:var(--brand-text)}

/* ---------- 出身歸屬鏈（.attr-chain 整組）：出身區 2026-08-08 Lucy 裁定刪除，規則一併移除 ---------- */

/* ---------- 現況（深色卡片區）：.dark 2026-08-01 batch4 收斂進 site.css，
   跟 page-landing.css／page-pricing.css 共用同一份，這裡不再重複定義 ---------- */

.stats-row{position:relative;display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:40px;text-align:center}
.stat{background:rgba(255,255,255,.06);border:1px solid rgba(127,214,240,.28);border-radius:var(--r-md);padding:24px 16px}
.stat b{display:block;font-size:clamp(28px,3.4vw,38px);color:#fff;font-weight:800;letter-spacing:-.02em}
.stat span{display:block;margin-top:6px;font-size:var(--fs-sm);color:var(--dark-fg-muted)}
.stats-note{position:relative;margin-top:16px;font-size:var(--fs-sm);color:var(--dark-fg-muted);max-width:60ch}

/* 對手費用比較卡（.cost-cards 整組）2026-08-08 Lucy 裁定移除，規則一併清掉；
   價值論述改在 pricing.html 的「換算一下」區塊（page-pricing.css .amort-card） */

@media (max-width:960px){
  .pain-grid{grid-template-columns:1fr}
  .stats-row{grid-template-columns:1fr}
}
@media (max-width:640px){
  .founder-card{flex-direction:column;text-align:center;padding:26px 22px}
  .avatar-placeholder,.founder-avatar{width:104px;height:104px}
}

/* ---------- dark mode ----------
   .pain-card／.founder-card 的 #fff 卡片背景已改用 var(--surface)（token 對調，
   light 值不變，不需要另外覆寫）。這裡只補一項 token 對調覆蓋不到的：
   .founder-avatar 的 3px 純白相框邊，在深色頁面上會變成刺眼的白色光圈，
   改成貼近卡片表面色，讓相框看起來是「淡出邊界」而不是一圈螢光白。 */
:root[data-theme="dark"] .founder-avatar{border-color:var(--surface)}
/* .warm 整段（創作者 section）兩個漸層端點都是 var(--warm) 家族，刻意固定不隨主題變
   （跟 --brand/--brand-tint 同一組邏輯），但 section 內直接躺著 .eyebrow／h2
   （分別吃 var(--brand-text)／var(--heading)，兩個都會隨主題自動翻亮），沒有被
   .founder-card 的深色卡片包住，會變成「近白字疊在維持原樣的淺黃底」看不清楚。
   跟 .callout-warn／.art-cover .cover-note 是同一種地雷，但這裡不是釘住文字色
   （這段文字要跟全站標題一致的翻轉行為），而是把底色本身也跟著暗下來，改成低透明度
   暖金色疊在深底上，讓翻亮後的文字重新對得上比。 */
:root[data-theme="dark"] .warm{background:linear-gradient(180deg,rgba(232,201,120,.16) 0%,rgba(232,201,120,.06) 100%)}