/**
 * 2meet 設計 token 與元件樣式（GrowthOS 方向）。
 *
 * 規則：只新增 .jm- 前綴的樣式，不覆寫 Blocksy 的結構樣式。
 * 色彩同時存在於此處與 Blocksy 調色盤，由 tests/palette-sync.sh 斷言兩者一致。
 *
 * 原型有 8 個 CSS 變數，但十餘個色值硬編碼在規則裡（#333 #777 #999 #aaa
 * #1c1c19 #181816 #373733 #3a3a36 #cfcfc8…）。這裡全部收斂成 token。
 */

:root {
	--jm-paper:         #F7F6F2;  /* 頁面底（暖白） */
	--jm-surface:       #FFFFFF;  /* 卡片 */
	--jm-ink:           #111111;  /* 內文、深色區底 */
	--jm-muted:         #686864;  /* 輔助文字（淺底） */
	--jm-muted-dark:    #9A9A94;  /* 輔助文字（深底）——取代原型的 #999/#aaa */
	--jm-line:          #DEDED8;  /* 邊框（淺底） */
	--jm-line-dark:     #373733;  /* 邊框（深底） */
	--jm-line-soft:     #CFCFC8;  /* 節點邊框 */

	/* 兩階 accent：單一 accent 在深淺交錯的版面上撐不住。
	   Cobalt 偏暗，在深色底上對比只有 3.30:1，深色區必須換亮的那一階。 */
	--jm-accent:        #2B4FFF;  /* 淺底：連結、按鈕底、audit 區塊底 */
	--jm-accent-hover:  #1E3FE0;
	--jm-accent-bright: #5B7CFF;  /* 深底：深色區文字、記分條填充 */

	--jm-track:         #1E1E1C;  /* 記分條軌道（原型的 #3a3a36 對比只有 1.99:1） */

	--jm-sans: Inter, "Noto Sans TC", system-ui, -apple-system, BlinkMacSystemFont,
	           "Segoe UI", "PingFang TC", "Microsoft JhengHei", sans-serif;

	/* 字級：h1 最大 104px，是舊站的 2.4 倍 */
	--jm-fs-xs:  12px;
	--jm-fs-sm:  14px;
	--jm-fs-md:  19px;
	--jm-fs-lg:  25px;
	--jm-fs-xl:  34px;
	/* 原型的 h1 是 clamp(54px,7.2vw,104px)、h2 是 clamp(42px,5vw,72px)，
	   那組數字是為拉丁字母設計的。中文字身寬、字面滿，同樣的 px 視覺體積
	   大得多，104px 會讓一句話擠成三行。降一級，視覺份量與原型相當。 */
	--jm-fs-h2:  clamp(30px, 3.6vw, 52px);
	--jm-fs-h1:  clamp(38px, 5.2vw, 72px);

	--jm-max: 1240px;

	--jm-radius-sm:  15px;
	--jm-radius:     20px;
	--jm-radius-lg:  26px;
	--jm-radius-xl:  30px;

	--jm-shadow-lg: 0 30px 80px rgba(17, 17, 17, .08);
	--jm-shadow-sm: 0 8px 20px rgba(17, 17, 17, .05);
}

/* ── 原型缺陷修補 1：錨點跳轉被 sticky header 遮住 ────────────────
   header 高 76px，原型沒有 scroll-margin-top，跳過去標題會被蓋掉。 */
:where([id]) { scroll-margin-top: 96px; }

html { scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
}

/* ── 排版 ─────────────────────────────────────────────────────── */
.jm-h1 {
	font-size: var(--jm-fs-h1);
	/* 原型是 line-height:.98 / letter-spacing:-.075em。
	   負字距是拉丁字母的排版手法，中文字面本來就滿，收字距會黏在一起；
	   行高小於 1 也會讓中文上下行相撞。 */
	line-height: 1.2;
	letter-spacing: -.02em;
	max-width: 18em;
}

.jm-h2 {
	font-size: var(--jm-fs-h2);
	line-height: 1.25;
	letter-spacing: -.02em;
}

/* 原型用 6 個 class 表達同一個設計概念（number/kicker/eyebrow/tag/mini/
   resource span），這裡收斂成一個。 */
.jm-kicker {
	font-size: var(--jm-fs-xs);
	font-weight: 800;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--jm-muted);
	margin: 0 0 12px;
}

.jm-lead {
	font-size: 20px;
	color: var(--jm-muted);
	max-width: 720px;
	/* Gutenberg 的 constrained layout 會對有 max-width 的子元素套 margin:0 auto，
	   結果是 lead 置中、標題靠左，兩者對不齊。 */
	margin-left: 0;
	margin-right: auto;
}

.jm-mute      { color: var(--jm-muted); }
.jm-mute-dark { color: var(--jm-muted-dark); }

/* ── 深色區塊 ─────────────────────────────────────────────────── */
.jm-dark {
	background: var(--jm-ink);
	color: #fff;
}
.jm-dark .jm-lead,
.jm-dark .jm-kicker { color: var(--jm-muted-dark); }
/* Blocksy 的標題色是 color4 #111111，在深色底上等於隱形。
   深色容器內的標題一律繼承容器的前景色。 */
.jm-dark :is( h1, h2, h3, h4, h5, h6 ),
.jm-audit :is( h1, h2, h3, h4, h5, h6 ) { color: inherit; }
.jm-dark a:not(.wp-block-button__link) { color: var(--jm-accent-bright); }

/* ── 卡片 ─────────────────────────────────────────────────────── */
.jm-card {
	background: var(--jm-surface);
	border: 1px solid var(--jm-line);
	border-radius: var(--jm-radius);
	padding: 24px;
	min-height: 230px;
}
.jm-card p { font-size: var(--jm-fs-sm); color: var(--jm-muted); margin: 0; }

/* GrowthOS 五層：深色 hairline 網格。
   gap:1px + 外層深色背景，讓 1px 的縫隙變成分隔線。 */
.jm-os-grid {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 1px;
	background: var(--jm-line-dark);
	border: 1px solid var(--jm-line-dark);
}
.jm-os-card {
	background: var(--jm-ink);
	color: #fff;
	padding: 28px;
	min-height: 250px;
	transition: background .2s ease;
}
.jm-os-card:hover { background: #1C1C19; }
.jm-os-card h3 { font-size: var(--jm-fs-lg); letter-spacing: -.04em; margin: 0 0 8px; }
.jm-os-card p  { font-size: var(--jm-fs-sm); color: var(--jm-muted-dark); margin: 0; }

.jm-solution {
	background: var(--jm-surface);
	border: 1px solid var(--jm-line);
	border-radius: 24px;
	padding: 32px;
	min-height: 330px;
	display: flex;
	flex-direction: column;
}
.jm-solution h3 { font-size: 32px; letter-spacing: -.05em; margin: 0 0 8px; }
/* 清單貼底，讓等高卡片的底部對齊 */
.jm-solution ul {
	margin: auto 0 0;
	padding: 0;
	list-style: none;
	border-top: 1px solid var(--jm-line);
}
.jm-solution li {
	padding: 8px 0;
	border-bottom: 1px solid var(--jm-line);
	font-size: 13px;
}
.jm-solution li:last-child { border-bottom: 0; }

.jm-industry {
	background: transparent;
	border: 1px solid var(--jm-line);
	border-radius: 18px;
	padding: 28px;
	min-height: 150px;
	transition: background .2s ease;   /* 原型漏了 transition，hover 會瞬跳 */
}
.jm-industry:hover { background: var(--jm-surface); }
.jm-industry h3 { font-size: 21px; margin: 0 0 6px; }
.jm-industry p  { font-size: var(--jm-fs-sm); color: var(--jm-muted); margin: 0; }

.jm-resource {
	background: var(--jm-surface);
	border: 1px solid var(--jm-line);
	border-radius: var(--jm-radius);
	padding: 28px;
	min-height: 220px;
}
.jm-resource h3 { font-size: 24px; line-height: 1.1; letter-spacing: -.04em; margin: 8px 0; }
.jm-resource p  { font-size: var(--jm-fs-sm); color: var(--jm-muted); margin: 0; }

/* ── 流程步驟（上邊框分隔，非圓點時間軸）──────────────────────── */
.jm-step { padding: 18px 0; border-top: 1px solid var(--jm-line); }
.jm-step__t { display: block; font-weight: 700; margin-bottom: 4px; }
.jm-step__d { font-size: var(--jm-fs-sm); color: var(--jm-muted); }

/* ── AI Audit 區塊 ────────────────────────────────────────────────
   底色是 Cobalt。原型用螢光萊姆時內文是黑字（16:1），換 Cobalt 後
   黑字只剩 3.30:1，整區必須改白字。 */
.jm-audit {
	background: var(--jm-accent);
	color: #fff;
	border-radius: var(--jm-radius-xl);
	padding: 70px;
}
.jm-audit h2, .jm-audit p, .jm-audit .jm-kicker { color: #fff; }

/* ── 響應式 ───────────────────────────────────────────────────── */
@media (max-width: 900px) {
	.jm-os-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 560px) {
	.jm-os-grid { grid-template-columns: 1fr; }
	.jm-os-card { min-height: auto; }
	.jm-card    { min-height: 180px; }
	.jm-audit   { padding: 45px 25px; border-radius: 22px; }
	.jm-lead    { font-size: 17px; }
}

/* ── 原型缺陷修補 2：行動版固定 CTA 條遮住頁尾 ────────────────────
   原型的 .mobile-cta 是 position:fixed，但沒有 body{padding-bottom} 補償，
   捲到底時最後一段會被蓋住。舊原型有這一行，新原型漏了。
   Blocksy 的 Content Block 顯示條件沒有「裝置」規則，所以行動版限定
   只能在這裡用 media query 控制。 */
.jm-mobile-bar { display: none; }

@media (max-width: 560px) {
	.jm-mobile-bar {
		display: block;
		position: fixed;
		left: 14px; right: 14px; bottom: 14px;
		z-index: 30;
	}
	.jm-mobile-bar .wp-block-button__link,
	.jm-mobile-bar a {
		display: block;
		text-align: center;
		background: var(--jm-accent);
		color: #fff;
		border: 1px solid var(--jm-accent);
		border-radius: 999px;
		padding: 14px 18px;
		font-weight: 750;
		font-size: var(--jm-fs-sm);
		text-decoration: none;
		box-shadow: 0 10px 30px rgba(0, 0, 0, .22);
	}
	body { padding-bottom: 78px; }
}

/* ── 按鈕變體（基礎樣式由 Blocksy Customizer 提供）───────────────── */
.jm-btn--ghost .wp-block-button__link {
	background: transparent;
	color: var(--jm-ink);
	border: 1px solid var(--jm-ink);
}
.jm-btn--ghost .wp-block-button__link:hover { background: var(--jm-ink); color: #fff; }

/* accent 底的按鈕必須明確設白字：原型的 .btn-accent 沒設 color，
   會繼承 body 的黑字，在 Cobalt 上只有 3.30:1。 */
.jm-btn--accent .wp-block-button__link {
	background: var(--jm-accent);
	color: #fff;
	border: 1px solid var(--jm-accent);
}
.jm-btn--accent .wp-block-button__link:hover { background: var(--jm-accent-hover); }

/* 深色區裡的次要按鈕 */
.jm-dark .jm-btn--ghost .wp-block-button__link {
	color: #fff;
	border-color: rgba(255, 255, 255, .3);
}
.jm-dark .jm-btn--ghost .wp-block-button__link:hover { background: #fff; color: var(--jm-ink); }

/* ── Hero 系統節點圖 ──────────────────────────────────────────────
   用 CSS Grid 而不是 SVG 或絕對定位，三個理由：

   1. 這個網站在賣 AI Discoverability。首頁最大的視覺元件如果是 AI 讀不出來
      的 SVG <text>，等於拿自己的產品論證開玩笑（PRD §27 要求官網本身
      成為第一個案例）。Grid 版的節點全是真 DOM 文字。
   2. 原型用固定 px 絕對定位，連接線與節點之間沒有任何約束關係，
      斷點一變必然錯位。Grid 的位置由排版系統保證。
   3. 行動版只要改 grid-template-areas 就變垂直堆疊。 */
.jm-system {
	display: grid;
	grid-template-columns: 1fr 24px 1fr 24px 1fr;
	grid-template-areas:
		".    .   ai   .   ."
		".    .   v1   .   ."
		"soc  h1  web  h2  sea"
		".    .   v2   .   ."
		".    .   crm  .   ."
		"fork fork fork fork fork"
		"line .   .    .   autm"
		"merge merge merge merge merge"
		".    .   rev  .   .";
	gap: 10px 0;
	align-items: center;
	justify-items: center;
	background: var(--jm-surface);
	border: 1px solid var(--jm-line);
	border-radius: 28px;
	padding: 26px;
	box-shadow: var(--jm-shadow-lg);
}

.jm-node {
	border: 1px solid var(--jm-line-soft);
	border-radius: var(--jm-radius-sm);
	background: var(--jm-surface);
	padding: 10px 14px;
	text-align: center;
	font-size: var(--jm-fs-sm);
	font-weight: 800;
	line-height: 1.3;
	box-shadow: var(--jm-shadow-sm);
	width: 100%;
}
.jm-node small {
	display: block;
	font-weight: 500;
	font-size: 11px;
	color: var(--jm-muted);
	margin-top: 2px;
}

/* AI 與 Revenue 是端點，用深色標示；Website 是樞紐，用 accent */
.jm-node--dark   { background: var(--jm-ink); color: #fff; border-color: var(--jm-ink); }
.jm-node--dark small { color: var(--jm-muted-dark); }
.jm-node--accent { background: var(--jm-accent); color: #fff; border-color: var(--jm-accent); }
/* accent 底上的副標：muted 在 Cobalt 上只有 1.02:1，等同隱形 */
.jm-node--accent small { color: #E8ECFF; }

.jm-node--ai   { grid-area: ai; }
.jm-node--soc  { grid-area: soc; }
.jm-node--web  { grid-area: web; }
.jm-node--sea  { grid-area: sea; }
.jm-node--crm  { grid-area: crm; }
.jm-node--line { grid-area: line; }
.jm-node--auto { grid-area: autm; }
.jm-node--rev  { grid-area: rev; }

/* 連接線：純 border，沒有一個座標數字 */
.jm-conn { background: var(--jm-line-soft); align-self: stretch; justify-self: stretch; }
.jm-conn--v1 { grid-area: v1; width: 1px; height: 18px; justify-self: center; }
.jm-conn--v2 { grid-area: v2; width: 1px; height: 18px; justify-self: center; }
.jm-conn--h1 { grid-area: h1; height: 1px; align-self: center; }
.jm-conn--h2 { grid-area: h2; height: 1px; align-self: center; }

/* 分叉與匯合：一個 div 的三條 border 畫出括號，改字改高度都自動跟著走 */
.jm-fork, .jm-merge {
	width: 60%;
	height: 18px;
	border-left: 1px solid var(--jm-line-soft);
	border-right: 1px solid var(--jm-line-soft);
	background: none;
}
.jm-fork  { grid-area: fork;  border-top: 1px solid var(--jm-line-soft); }
.jm-merge { grid-area: merge; border-bottom: 1px solid var(--jm-line-soft); }

.jm-system__head {
	grid-area: unset;
	display: none;
}

@media (max-width: 700px) {
	.jm-system {
		grid-template-columns: 1fr;
		grid-template-areas: "ai" "v1" "soc" "web" "sea" "v2" "crm" "fork" "line" "autm" "merge" "rev";
		gap: 8px;
		padding: 20px;
	}
	/* 垂直堆疊時水平線沒有意義 */
	.jm-conn--h1, .jm-conn--h2 { display: none; }
	.jm-fork, .jm-merge { width: 1px; height: 14px; border: 0; background: var(--jm-line-soft); }
}

/* 三欄網格（Industries、Resources）。用 CSS Grid 而非 core/columns：
   6 張卡在 900px 要收成 1 欄，core/columns 的斷點做不到這個。 */
.jm-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.jm-final  { text-align: center; padding: 40px 0; }
.jm-final .jm-lead { margin-left: auto; margin-right: auto; }
.jm-final .wp-block-buttons { justify-content: center; }

@media (max-width: 900px) { .jm-grid-3 { grid-template-columns: 1fr; } }

/* Solutions 頁的逐條方案區段 */
.jm-solution-row {
	border-top: 1px solid var(--jm-line);
	padding-top: 32px;
	margin-top: 32px;
}
.jm-solution-row h3 { font-size: var(--jm-fs-md); margin: 0 0 10px; }

/* Industries 逐產業區段 */
.jm-ind { border-top: 1px solid var(--jm-line); padding: 32px 0; }
.jm-ind h2 { font-size: var(--jm-fs-xl); letter-spacing: -.04em; margin: 0 0 6px; }
.jm-ind__cols { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; margin-top: 18px; }
.jm-ind__cols h3 { font-size: var(--jm-fs-sm); text-transform: uppercase; letter-spacing: .1em; color: var(--jm-muted); margin: 0 0 10px; }
.jm-ind__cols ul { margin: 0; padding-left: 18px; font-size: var(--jm-fs-sm); }
.jm-ind__cols li { margin-bottom: 6px; }
.jm-case-steps { margin-top: 24px; }

@media (max-width: 700px) { .jm-ind__cols { grid-template-columns: 1fr; gap: 18px; } }