/* ================================================
	PlayPlus 企業管理系統客製化設計開發 (services/enterprise-system.html)
	遵守 design-system.html 視覺系統規範
	Tab Size 4 縮排
   ================================================ */

/* ── 全頁背景設為 var(--text-primary)，透明區塊透出此色，白底維持 var(--swatch-white) ── */
body {
	background-color: var(--text-primary);
}

body::before {
	display: none;
}

/* ── 麵包屑導航 Breadcrumb ── */
.breadcrumb-nav {
	margin-top: 0;
	padding-top: calc(68px + var(--space-sm));
	padding-bottom: var(--space-sm);
	position: relative;
	z-index: 2;
}

@media (max-width: 1024px) {
	.breadcrumb-nav {
		padding-top: calc(64px + var(--space-xs));
	}
}

.breadcrumb-list {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--space-2xs) var(--space-xs);
	font-size: var(--text-sm);
	color: var(--text-muted);
}

.breadcrumb-item a {
	color: var(--text-secondary);
	text-decoration: none;
	transition: color var(--duration-fast) var(--ease-out);
}

.breadcrumb-item a:hover {
	color: var(--swatch-brand-green);
}

.breadcrumb-item.current {
	color: var(--text-primary);
	font-weight: 600;
}

.breadcrumb-separator {
	display: inline-flex;
	align-items: center;
	color: var(--swatch-cloud-dark);
	opacity: 0.6;
}

.breadcrumb-separator svg {
	width: 14px;
	height: 14px;
}

/* ── Hero 與應用情境共用背景包裝區塊 ── */
.hero-scenarios-wrapper {
	position: relative;
	z-index: 1;
	background-color: var(--bg-main);
	background-image:
		radial-gradient(ellipse 50% 50%, rgba(212, 162, 127, 0.21) 0%, transparent 68%),
		radial-gradient(ellipse 50% 50%, rgba(154, 205, 50, 0.16) 0%, transparent 68%),
		radial-gradient(ellipse 50% 50%, rgba(235, 219, 188, 0.25) 0%, transparent 66%),
		radial-gradient(ellipse 50% 50%, rgba(154, 205, 50, 0.11) 0%, transparent 70%);
	background-repeat: no-repeat;
	background-size: 1080px 900px, 520px 460px, 980px 820px, 480px 420px;
	background-position: 92% 8%, 78% 20%, 8% 92%, 22% 80%;
	background-attachment: fixed;
	animation: bg-gradient-drift 30s ease-in-out infinite;
	padding-bottom: var(--space-6xl);
}

@media (prefers-reduced-motion: reduce) {
	.hero-scenarios-wrapper {
		animation: none;
	}
}

@media (max-width: 1180px) {
	/* iOS Safari（含 iPad）對 background-attachment:fixed 支援不穩定，原本
	   這三處都只在 768px 以下改回一般捲動，但 iPad 直式（如 iPad Pro 13
	   吋，1032px）寬度落在 768～1180px 之間，仍會套用 fixed 背景導致渲染
	   錯亂、出現跑版，所以統一把斷點拉高到 1180px，跟 style.css 裡
	   #portfolio／#faq／.top-sections-wrapper 的做法一致 */
	.hero-scenarios-wrapper {
		background-attachment: scroll;
	}
	#cta {
		background-attachment: scroll;
	}
	.faq-briefing-wrapper {
		background-attachment: scroll;
	}
}

@media (max-width: 768px) {
	.hero-scenarios-wrapper {
		background-attachment: scroll;
		padding-bottom: var(--space-4xl);
	}
}

/* ── 內頁 Hero 區塊 ── */
.subpage-hero {
	position: relative;
	z-index: 1;
	background: transparent;
	padding: var(--space-lg) 0 5rem;
}

.subpage-hero-inner {
	display: grid;
	grid-template-columns: 3fr 2fr;
	gap: var(--space-4xl);
	align-items: center;
}

.subpage-hero-visual {
	position: relative;
	width: 100%;
}

.hero-cover-wrapper {
	position: relative;
	border-radius: var(--radius-card);
	overflow: hidden;
}

/* 子頁 Hero 左側：Lottie 插畫，與專業服務首頁的插畫比例一致 */
.hero-lottie {
	position: relative;
	width: 100%;
	aspect-ratio: 1200 / 820;
}

.hero-lottie svg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

.subpage-hero-copy {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}

.subpage-hero-title {
	font-size: round(nearest, clamp(2rem, 2.8vw, 2.75rem), 2px);
	font-weight: 800;
	line-height: 1.35;
	letter-spacing: 0.02em;
	color: var(--swatch-slate-dark);
	margin-bottom: var(--space-md);
}

.subpage-hero-subtitle {
	font-size: round(nearest, clamp(1.125rem, 1.4vw, 1.375rem), 2px);
	font-weight: 500;
	line-height: 1.5;
	color: var(--swatch-slate-dark);
	margin-bottom: var(--space-sm);
	letter-spacing: 0.01em;
}

.subpage-hero-desc {
	font-size: 1.125rem;
	color: var(--text-secondary);
	line-height: 1.75;
	margin-bottom: var(--space-xl);
}

.subpage-hero-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-sm);
}

/* ── 決策者痛點與方案評估共用背景區塊 ── */
.pain-eval-wrapper {
	background: var(--swatch-white);
	border-top: 1px solid var(--border-light);
	border-bottom: none;
	border-radius: 0 0 56px 56px;
	position: relative;
	z-index: 2;
}

/* ── 決策者痛點區塊 (Pain Points) ── */
.pain-section {
	padding: var(--space-7xl) 0 var(--space-5xl);
	background: transparent;
	border-top: none;
	border-bottom: none;
	position: relative;
}

.pain-header {
	max-width: 50vw;
	margin-bottom: var(--space-5xl);
}

.pain-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--space-xl);
}

.pain-card {
	background: var(--swatch-ivory-light);
	border: 1px solid var(--border-light);
	border-radius: var(--radius-card);
	padding: var(--space-2xl);
	display: flex;
	flex-direction: column;
	position: relative;
	transition: all var(--duration-fast) var(--ease-out);
}

.pain-card:is(a[href], button):hover {
	transform: translateY(-6px);
	box-shadow: var(--shadow-2);
	border-color: rgba(21, 22, 26, 0.2);
}

.pain-card-title {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	font-size: var(--text-xl);
	font-weight: 700;
	color: var(--text-primary);
	margin-bottom: var(--space-sm);
	line-height: 1.4;
}

/* 注意：icons.js 的 renderIcons() 會把 <span data-icon="..."> 直接替換成
   <svg class="pain-card-icon">（class 會被複製到 svg 本身），
   不是 span 包著 svg，所以這裡直接對 svg 設定尺寸即可，不需要巢狀選擇器 */
.pain-card-icon {
	flex-shrink: 0;
	display: inline-block;
	/* 跟標題文字同大小：用 1em 綁定父層 font-size，而不是寫死固定像素，
	   這樣不同斷點下標題字級改變時 icon 會跟著等比例縮放 */
	width: 1em;
	height: 1em;
	margin-top: 0.1em;
	/* 燕麥色系但加深一階：--swatch-oat (var(--swatch-oat)) 本身跟卡片底色（ivory-light var(--swatch-ivory-light)）
	   明度太接近，疊在卡片上幾乎看不見，改用同色相、更深的燕麥棕作為可視版本 */
	color: #B9A581;
}

.pain-card > p {
	color: var(--text-secondary);
	line-height: 1.7;
}

.pain-solution {
	margin-top: auto;
	padding-top: var(--space-2xl);
}

/* 回答框：左上角為直角，上方直角三角形與框體左邊對齊，呈現 PlayPlus 接續回覆的對話。 */
.pain-quote {
	position: relative;
	margin: 0;
	padding: var(--space-lg);
	background: #e4f3de;
	border: none;
	border-radius: 18px;
	border-top-left-radius: 0;
	font-size: var(--text-base);
	color: var(--text-primary);
	line-height: 1.7;
	font-style: normal;
}

.pain-quote::before {
	content: "";
	position: absolute;
	top: -17px;
	left: 0;
	width: 28px;
	height: 18px;
	background: #e4f3de;
	clip-path: polygon(0 100%, 0 0, 100% 100%);
}

.pain-solution-label {
	display: flex;
	width: fit-content;
	align-items: center;
	margin-bottom: var(--space-sm);
	padding: 5px 14px;
	border-radius: var(--radius-full);
	background: #216c26;
	font-size: var(--text-sm);
	font-weight: 600;
	letter-spacing: 0.02em;
	color: var(--swatch-white);
}

/* ── 應用情境滑動卡片 (Scenarios Slider) ── */
.scenarios-section {
	padding: 0 0 var(--space-2xl);
	position: relative;
	z-index: 1;
}

.scenarios-slider-wrapper {
	position: relative;
	width: 100%;
}

.scenarios-track {
	display: flex;
	gap: var(--space-xl);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	-webkit-overflow-scrolling: touch;
	padding: 12px 4px 20px;
	margin-top: -12px;
	margin-bottom: -20px;
	scrollbar-width: none;
	-ms-overflow-style: none;
	cursor: default;
	user-select: text;
}

.scenarios-track::-webkit-scrollbar {
	display: none;
}

.scenario-card {
	flex: 0 0 calc((100% - 2 * var(--space-xl)) / 3);
	width: calc((100% - 2 * var(--space-xl)) / 3);
	max-width: calc((100% - 2 * var(--space-xl)) / 3);
	box-sizing: border-box;
	scroll-snap-align: start;
	scroll-snap-stop: normal;
	background: var(--swatch-white);
	border: 1px solid var(--border-light);
	border-radius: var(--radius-card);
	box-shadow: var(--shadow-1);
	padding: var(--space-2xl);
	display: flex;
	flex-direction: column;
	position: relative;
	transition: transform var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out);
}

.scenario-card:is(a[href], button):hover {
	transform: translateY(-6px);
	box-shadow: var(--shadow-2);
	border-color: rgba(51, 204, 51, 0.4);
}

.scenario-content {
	display: flex;
	flex-direction: column;
	height: 100%;
}

.scenario-card-index {
	font-family: var(--font-display);
	font-size: var(--text-xs);
	font-weight: 700;
	letter-spacing: 0.08em;
	color: var(--swatch-brand-green);
	margin-bottom: var(--space-2xs);
}

.scenario-card-title {
	font-size: var(--text-xl);
	font-weight: 700;
	color: var(--swatch-slate-dark);
	margin-bottom: var(--space-sm);
	line-height: 1.35;
}

.scenario-card-desc {
	font-size: var(--text-sm);
	color: var(--text-secondary);
	line-height: 1.7;
	margin-bottom: var(--space-xl);
}

/* 問句：比回答更大、更醒目 */
.scenario-card-question {
	font-family: var(--font-sans);
	font-size: round(nearest, clamp(1.1rem, 1.3vw, 1.25rem), 2px);
	font-weight: 500;
	color: var(--text-secondary);
	line-height: 1.55;
	letter-spacing: 0;
	margin: 0 0 var(--space-md);
	padding-left: var(--space-sm);
	border-left: 3px solid var(--swatch-brand-green);
}

/* 回答與標籤收進淺灰色 callout，與問句形成層次；貼齊卡片底部 */
.scenario-callout {
	margin-top: auto;
	background: var(--swatch-ivory-light);
	border-radius: var(--radius-card, 16px);
	padding: var(--space-lg);
}

.scenario-callout .scenario-card-desc {
	font-size: 1rem;
	color: var(--swatch-slate-light, #5a5f6a);
	line-height: 1.7;
	margin: 0;
}

.scenario-callout .scenario-tags {
	margin-top: var(--space-sm);
}

.scenario-callout .scenario-tags .tag {
	background: var(--swatch-white);
}

.scenario-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 0.45rem;
	margin-top: auto;
}

.scenario-tags .tag {
	background: var(--swatch-ivory-medium);
	color: var(--swatch-slate-light);
	font-size: var(--text-xs);
	font-weight: 600;
	padding: 0.25rem 0.65rem;
	border-radius: var(--radius-full);
	border: 1px solid transparent;
	transition: all var(--duration-fast) var(--ease-out);
}

.scenario-card:is(a[href], button):hover .scenario-tags .tag {
	border-color: rgba(51, 204, 51, 0.25);
	background: var(--state-success-bg);
}

/* 滑動切換按鈕 */
.slider-btn {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: var(--swatch-white);
	border: 1px solid var(--border-light);
	box-shadow: var(--shadow-2);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--swatch-slate-dark);
	cursor: pointer;
	z-index: 10;
	transition: all var(--duration-fast) var(--ease-out);
}

.slider-btn svg {
	width: 20px;
	height: 20px;
	stroke-width: 2.4;
}

.slider-btn:hover:not(:disabled) {
	background: var(--swatch-slate-dark);
	color: var(--swatch-white);
	border-color: var(--swatch-slate-dark);
	box-shadow: var(--shadow-3);
	transform: translateY(-50%) scale(1.08);
}

.slider-btn:disabled {
	opacity: 0;
	pointer-events: none;
	cursor: not-allowed;
}

.slider-btn-prev {
	left: -22px;
}

.slider-btn-next {
	right: -22px;
}

/* 分頁指示點 */
.slider-dots {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	margin-top: var(--space-xl);
}

.slider-dot {
	width: 8px;
	height: 8px;
	border-radius: var(--radius-full);
	background: rgba(21, 22, 26, 0.18);
	border: none;
	padding: 0;
	cursor: pointer;
	transition: all var(--duration-fast) var(--ease-out);
}

.slider-dot.active {
	width: 24px;
	background: var(--swatch-brand-green);
}

.slider-dot:hover:not(.active) {
	background: rgba(21, 22, 26, 0.35);
}

/* ── 什麼是企業管理系統 (What is EMS) ── */
.what-is-section {
	padding: 0 0 var(--space-6xl);
	background: transparent;
	position: relative;
}

.what-is-card {
	background: var(--swatch-ivory-light);
	border: 1px solid var(--border-light);
	border-radius: var(--radius-card);
	box-shadow: var(--shadow-1);
	padding: var(--space-4xl);
	position: relative;
	overflow: hidden;
	transition: box-shadow var(--duration-fast) var(--ease-out);
}

.what-is-card:is(a[href], button):hover {
	box-shadow: var(--shadow-2);
}

.what-is-header {
	margin-bottom: var(--space-2xl);
}

.what-is-title {
	font-size: round(nearest, clamp(1.75rem, 2.5vw, 2.35rem), 2px);
	font-weight: 800;
	color: var(--swatch-slate-dark);
	line-height: 1.35;
	margin: 0;
}

.what-is-intro-text {
	display: flex;
	flex-direction: column;
	gap: var(--space-md);
	margin-bottom: var(--space-3xl);
}

.what-is-intro,
.what-is-context {
	font-size: var(--text-base);
	color: var(--text-secondary);
	line-height: 1.8;
	margin: 0;
}

.what-is-values-block {
	margin-bottom: var(--space-3xl);
}

.what-is-values-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--space-xl);
}

.what-is-value-card {
	background: var(--swatch-white);
	border: 1px solid var(--border-light);
	border-radius: var(--radius-card);
	padding: var(--space-2xl);
	display: flex;
	flex-direction: column;
	position: relative;
	transition: transform var(--duration-fast) var(--ease-out),
	            box-shadow var(--duration-fast) var(--ease-out),
	            border-color var(--duration-fast) var(--ease-out);
}

.what-is-value-card:is(a[href], button):hover {
	transform: translateY(-4px);
	box-shadow: var(--shadow-2);
	border-color: rgba(51, 204, 51, 0.4);
}

.value-card-title {
	font-size: var(--text-lg);
	font-weight: 700;
	color: var(--swatch-slate-dark);
	margin-bottom: var(--space-xs);
	line-height: 1.4;
}

.value-card-desc {
	font-size: var(--text-sm);
	color: var(--text-secondary);
	line-height: 1.7;
	margin: 0;
	flex-grow: 1;
}

.what-is-footer {
	padding-top: var(--space-xl);
	border-top: 1px dashed var(--border-light);
}

.what-is-highlight-box {
	background: rgba(255, 255, 255, 0.7);
	border: 1px solid var(--border-light);
	border-left: 3px solid var(--swatch-cloud-dark);
	border-radius: var(--radius-sm);
	padding: var(--space-md) var(--space-xl);
	font-size: var(--text-base);
	color: var(--text-primary);
	line-height: 1.7;
}

.what-is-highlight-box strong {
	color: var(--swatch-slate-dark);
	font-weight: 700;
}

/* ── 方案評估 (Evaluation Comparison) ── */
.evaluation-section {
	padding: var(--space-5xl) 0 var(--space-9xl);
	background: transparent;
	position: relative;
	border-top: 1px dashed var(--border-light);
	border-bottom: none;
}

.evaluation-header-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-xl);
	margin-bottom: var(--space-4xl);
}

.evaluation-header {
	max-width: 760px;
}

/* 標題文字區塊右側的留白用插畫素材填補，避免大片空白 */
.evaluation-visual {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	justify-content: flex-end;
}

.evaluation-lottie {
	width: clamp(160px, 16vw, 260px);
	aspect-ratio: 440 / 416;
	pointer-events: none;
}

.evaluation-lottie svg {
	width: 100%;
	height: 100%;
}

@media (max-width: 1200px) {
	.evaluation-visual {
		display: none;
	}
}

.evaluation-lead {
	font-size: round(nearest, clamp(1.25rem, 2vw, 1.65rem), 2px);
	font-weight: 500;
	color: var(--text-primary);
	margin-top: var(--space-sm);
	margin-bottom: var(--space-xs);
	line-height: 1.4;
}

.comparison-card {
	background: var(--swatch-white);
	border: 1px solid var(--border-light);
	border-radius: var(--radius-card);
	box-shadow: var(--shadow-2);
	overflow: hidden;
}

.comparison-table-wrapper {
	width: 100%;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.comparison-table {
	width: 100%;
	margin-top: -2px;
	border-collapse: collapse;
	text-align: left;
	min-width: 650px;
}

.comparison-table th,
.comparison-table td {
	padding: 1.35rem 1.65rem;
	border-bottom: 1px solid var(--border-light);
	font-size: var(--text-base);
	line-height: 1.6;
	vertical-align: middle;
}

.comparison-table thead th {
	background: var(--swatch-ivory-light);
	border-top: 3px solid var(--swatch-ivory-light);
	font-weight: 600;
	color: var(--text-secondary);
	font-size: var(--text-base);
	letter-spacing: 0.02em;
}

.comparison-table thead th.th-target {
	background: rgba(51, 204, 51, 0.06);
	font-weight: 700;
	color: var(--text-primary);
	position: relative;
	border-left: 1px solid rgba(51, 204, 51, 0.2);
	border-right: 1px solid rgba(51, 204, 51, 0.2);
	border-top: 3px solid var(--swatch-brand-green);
}

.comparison-table thead th.th-target .target-badge {
	display: inline-block;
	font-size: var(--text-xs);
	background: var(--state-success-bg);
	color: var(--text-success);
	border: 1px solid rgba(51, 204, 51, 0.28);
	font-weight: 600;
	padding: 0.15rem 0.55rem;
	border-radius: var(--radius-full);
	margin-left: 0.5rem;
	vertical-align: middle;
}

.comparison-table tbody tr:last-child td {
	border-bottom: none;
}

.comparison-table td.dimension-name {
	font-weight: 400;
	color: var(--text-primary);
	white-space: nowrap;
	width: 20%;
}

.comparison-table td.col-off-shelf {
	font-weight: 400;
	color: var(--text-muted);
	width: 38%;
}

.comparison-table td.col-playplus {
	color: var(--text-secondary);
	font-weight: 400;
	background: rgba(51, 204, 51, 0.02);
	border-left: 1px solid rgba(51, 204, 51, 0.16);
	border-right: 1px solid rgba(51, 204, 51, 0.16);
	width: 42%;
}

.comparison-table tr:last-child td.col-playplus {
	border-bottom: 1px solid rgba(51, 204, 51, 0.16);
}

.comparison-table td.col-playplus .highlight-point {
	display: flex;
	align-items: flex-start;
	gap: 0.6rem;
}

.comparison-table td.col-playplus .check-icon {
	color: var(--swatch-brand-green);
	flex-shrink: 0;
	margin-top: 0.2rem;
	font-weight: 700;
}

/* 流程內容與版型共用首頁樣式；獨立頁補上深色底。 */
#process.subpage-process-section {
	background: var(--swatch-slate-dark);
}

/* ── 精選作品集 (Featured Portfolio) ── */
.subpage-portfolio-section {
	padding: var(--space-7xl) 0;
	background: var(--bg-main);
	position: relative;
}

.subpage-portfolio-header {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	margin-bottom: var(--space-5xl);
	flex-wrap: wrap;
	gap: var(--space-lg);
}

.portfolio-3grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--space-xl);
}

/* ── 常見問題 (FAQ) ── */
.subpage-faq-section {
	padding: var(--space-7xl) 0;
	background: var(--swatch-white);
	border-top: 1px solid var(--border-light);
	position: relative;
}

/* ── 簡報下載 (Sales Briefing Download) ── */
.briefing-section {
	padding: var(--space-7xl) 0;
	background: var(--swatch-ivory-medium);
	position: relative;
}

.briefing-card {
	background: var(--swatch-white);
	border: 1px solid var(--border-light);
	border-radius: var(--radius-card);
	box-shadow: var(--shadow-2);
	padding: var(--space-5xl) var(--space-4xl);
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: var(--space-3xl);
	max-width: 860px;
	margin: 0 auto;
	position: relative;
	overflow: hidden;
}

.briefing-card::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 4px;
	background: linear-gradient(90deg, var(--swatch-slate-dark) 0%, var(--swatch-brand-green) 100%);
}

.briefing-copy {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	max-width: 680px;
	width: 100%;
}

.briefing-title {
	font-size: round(nearest, clamp(2rem, 4vw, 3rem), 2px);
	font-weight: 800;
	color: var(--swatch-slate-dark);
	margin-bottom: var(--space-xs);
	line-height: 1.4;
	letter-spacing: 0.02em;
	text-align: center;
}

.briefing-subtitle {
	font-size: var(--text-lg);
	font-weight: 500;
	color: var(--swatch-slate-dark);
	margin-bottom: var(--space-md);
	text-align: center;
}

.briefing-desc {
	font-size: var(--text-base);
	color: var(--text-secondary);
	line-height: 1.75;
	margin-bottom: 0;
	text-align: center;
}

.briefing-visual {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	width: 100%;
	max-width: 520px;
	position: relative;
}

.briefing-visual-title {
	font-size: var(--text-md);
	font-weight: 700;
	color: var(--swatch-slate-dark);
	margin-bottom: var(--space-2xs);
}

.briefing-visual-subtitle {
	font-size: var(--text-sm);
	font-weight: 500;
	color: var(--text-muted);
	margin-bottom: var(--space-xl);
}

.briefing-visual-subtitle:last-child {
	margin-bottom: 0;
}

/* ── 響應式斷點 (Breakpoints) ── */
@media (max-width: 1180px) {
	/* 原本斷點只到 1024px，但 iPad Pro 13 吋直式等大尺寸平板寬度落在
	   1024～1180px 之間，SCENARIO 情境卡片仍沿用桌機版三欄排列，卡片
	   被壓窄後文字被迫往下堆、整張卡片被拉得很高，不易閱讀，所以把
	   斷點拉高到 1180px，提早改成兩欄，讓卡片維持舒適高度 */
	.subpage-hero-inner {
		grid-template-columns: 1fr;
		gap: var(--space-4xl);
	}

	.pain-grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.scenario-card {
		flex: 0 0 calc((100% - var(--space-lg)) / 2);
		width: calc((100% - var(--space-lg)) / 2);
		max-width: calc((100% - var(--space-lg)) / 2);
		padding: var(--space-xl);
	}

	.scenarios-track {
		gap: var(--space-lg);
	}

	.slider-btn-prev {
		left: -14px;
	}

	.slider-btn-next {
		right: -14px;
	}

	.portfolio-3grid {
		grid-template-columns: repeat(2, 1fr);
	}

	

	.what-is-values-grid {
		gap: var(--space-lg);
	}

	/* ── 平板直式：各區塊上下 padding 收斂 ──
	   這幾個區塊原本完全沒有平板斷點，直接從桌機版跳到下面 768px 的手機
	   版收斂（統一壓到 var(--space-4xl)=40px），iPad 直式（768～1180px）
	   這段完全沒收斂，沿用桌機版留白，滑動距離偏長。這裡依各區塊桌機版
	   原始留白比例抓約 70~80% 的中繼值，跟手機版的 40px 銜接，不是齊頭
	   套同一個數字 */
	.subpage-hero {
		padding: var(--space-lg) 0 4rem; /* 24px/80px → 24px/64px */
	}

	.pain-section {
		padding: var(--space-5xl) 0 var(--space-4xl); /* 64px/48px → 48px/40px */
	}

	.what-is-section {
		padding: 0 0 var(--space-4xl); /* 56px → 40px */
	}

	.evaluation-section {
		padding: var(--space-4xl) 0 var(--space-7xl); /* 48px/96px → 40px/64px */
	}

	.subpage-portfolio-section,
	.subpage-faq-section,
	.briefing-section {
		padding: var(--space-5xl) 0; /* 64px → 48px */
	}
}

@media (max-width: 768px) {
	.subpage-hero {
		padding: var(--space-md) 0 2.5rem; /* 80px → 40px，原本底部留白過高，跟下方
		   SCENARIO 卡片之間空出一大片空白 */
	}

	.subpage-hero-title {
		font-size: 2rem;
	}

	.hero-scenarios-wrapper {
		padding-bottom: var(--space-4xl);
	}

	.scenario-card {
		flex: 0 0 85%;
		width: 85%;
		max-width: 85%;
		/* 2026-10-29：先前把上下內距減半，結果上下比左右窄，改回四邊一致 */
		padding: var(--space-lg);
	}

	.scenario-card-index {
		margin-bottom: calc(var(--space-2xs) / 2);
	}

	.scenario-card-title {
		margin-bottom: calc(var(--space-sm) / 2);
	}

	.scenario-card-desc {
		margin-bottom: calc(var(--space-xl) / 2);
	}

	.scenario-card-question {
		margin-bottom: calc(var(--space-md) / 2);
	}

	.scenario-callout {
		padding-top: calc(var(--space-lg) / 2);
		padding-bottom: calc(var(--space-lg) / 2);
	}

	.scenarios-track {
		gap: var(--space-md);
	}

	.slider-btn {
		display: none;
	}

	.pain-eval-wrapper {
		border-radius: 0 0 28px 28px;
	}

	.pain-section,
	.evaluation-section,
	.subpage-portfolio-section,
	.subpage-faq-section,
	.briefing-section {
		padding: var(--space-4xl) 0;
	}

	/* SCENARIO 滑動卡片區：跟其他區塊共用同一個 40px/40px 不是刻意設計，
	   疊加上面 .subpage-hero 的底部留白後，卡片上方空出近 120px 的死白，
	   這裡單獨拉出來減半到 20px/20px */
	.scenarios-section {
		padding: var(--space-md) 0;
	}

	.pain-grid {
		grid-template-columns: 1fr;
	}

	.portfolio-3grid {
		grid-template-columns: 1fr;
	}

	.briefing-card {
		padding: var(--space-2xl) var(--space-lg);
	}

	

	.what-is-section {
		padding-bottom: var(--space-4xl);
	}

	.what-is-card {
		padding: var(--space-2xl) var(--space-xl);
	}

	.what-is-values-grid {
		grid-template-columns: 1fr;
		gap: var(--space-md);
	}

	.what-is-value-card {
		padding: var(--space-xl);
	}
}

@media (max-width: 480px) {
	.subpage-hero-actions {
		flex-direction: column;
		width: 100%;
	}

	.subpage-hero-actions .btn {
		width: 100%;
	}

	.what-is-card {
		padding: var(--space-xl) var(--space-md);
	}
}

/* ── CTA 區塊背景設定 ── */
#cta {
	background-color: var(--bg-main);
	background-image:
		radial-gradient(ellipse 50% 50%, rgba(212, 162, 127, 0.21) 0%, transparent 68%),
		radial-gradient(ellipse 50% 50%, rgba(154, 205, 50, 0.16) 0%, transparent 68%),
		radial-gradient(ellipse 50% 50%, rgba(235, 219, 188, 0.25) 0%, transparent 66%),
		radial-gradient(ellipse 50% 50%, rgba(154, 205, 50, 0.11) 0%, transparent 70%);
	background-repeat: no-repeat;
	background-size: 1080px 900px, 520px 460px, 980px 820px, 480px 420px;
	background-position: 92% 0%, 78% 100%, 8% 92%, 22% 80%;
	background-attachment: fixed;
	animation: cta-glow-drift 30s ease-in-out infinite;
	position: relative;
	overflow: hidden;
}

/* CTA 頂部的兩組暖色／綠色光暈往下移，避免與上方區塊的底部光暈在邊界相接 */
@keyframes cta-glow-drift {
	0%,
	100% {
		background-position: 92% 0%, 78% 100%, 8% 92%, 22% 80%;
	}

	50% {
		background-position: 84% 8%, 70% 112%, 16% 84%, 30% 72%;
	}
}

@media (prefers-reduced-motion: reduce) {
	#cta {
		animation: none;
	}
}

@media (max-width: 768px) {
	#cta {
		background-attachment: scroll;
	}
}

/* ── 什麼是企業管理系統：卡片式要點，樣式與「為什麼選擇 PlayPlus」的 Bento 卡片一致 ── */
.what-is-card {
	background: none;
	border: none;
	box-shadow: none;
	padding: 0;
	overflow: visible;
}

.what-is-card .what-is-intro,
.what-is-card .what-is-context {
	color: var(--swatch-slate-light);
	font-size: round(nearest, clamp(1rem, 1.25vw, 1.15rem), 2px);
	line-height: 1.85;
}

.what-is-card .what-is-values-grid {
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--space-sm);
}

.what-is-card .what-is-value-card {
	background: var(--swatch-ivory-light);
	border: none;
	border-radius: var(--radius-card);
	box-shadow: none;
	padding: var(--space-xl);
	overflow: visible;
}

.what-is-card .what-is-value-card:is(a[href], button):hover {
	transform: none;
	box-shadow: none;
	border-color: transparent;
}

.what-is-card .value-card-title {
	font-family: var(--font-sans);
	/* 跟「軟體不適合」等痛點卡片標題同級（--text-xl），避免整合資訊卡片的字級看起來偏小 */
	font-size: var(--text-xl);
	font-weight: 700;
	color: var(--swatch-slate-dark);
	line-height: 1.45;
	letter-spacing: -0.01em;
	margin: 0 0 var(--space-2xs) 0;
}

.what-is-card .value-card-desc {
	/* 同樣對齊痛點卡片內文字級（--text-base） */
	font-size: var(--text-base);
	font-weight: 400;
	color: var(--swatch-slate-light);
	line-height: 1.82;
	letter-spacing: 0.005em;
	margin: 0;
}

@media (max-width: 991px) {
	.what-is-card .what-is-values-grid {
		grid-template-columns: 1fr;
	}
}

.what-is-card .what-is-highlight-box {
	background: none;
	border: none;
	border-left: 3px solid var(--swatch-brand-green);
	border-radius: 0;
	padding: 0 0 0 var(--space-sm);
	font-size: round(nearest, clamp(1.1rem, 1.3vw, 1.25rem), 2px);
	font-weight: 500;
	color: var(--text-secondary);
	line-height: 1.6;
}

.what-is-card .what-is-highlight-box strong {
	font-weight: 500;
	color: inherit;
}

/* ── 「客製化設計開發」重點句：與上方卡片的距離縮短 ── */
.what-is-card .what-is-values-block {
	margin-bottom: var(--space-lg);
}

.what-is-card .what-is-footer {
	padding-top: 0;
	border-top: none;
}

/* 2026-10-30 修正：原本 #faq 跟 .briefing-section 各自用 background-attachment:fixed
   複製同一套漸層設定來「模擬」連成一片，但這是兩個獨立元素各自畫出自己的固定背景，
   瀏覽器會各自建立獨立的合成層，兩個元素交界處容易出現一條不該存在的細縫／光暈接縫線
   （捲動時漸層光暈剛好掃過交界處最明顯）。改用跟 .top-sections-wrapper 完全一樣的作法：
   把漸層背景畫在「包住 FAQ + 簡報下載」的共同父層 .faq-briefing-wrapper 上，
   讓它只是單一元素的背景，兩個子區塊本身不再各自畫背景，就不會有合成層交界的接縫 */
.faq-briefing-wrapper {
	position: relative;
	background-color: var(--swatch-ivory-medium);
	background-image:
		radial-gradient(ellipse 50% 50%, rgba(212, 162, 127, 0.21) 0%, transparent 68%),
		radial-gradient(ellipse 50% 50%, rgba(154, 205, 50, 0.16) 0%, transparent 68%),
		radial-gradient(ellipse 50% 50%, rgba(235, 219, 188, 0.25) 0%, transparent 66%),
		radial-gradient(ellipse 50% 50%, rgba(154, 205, 50, 0.11) 0%, transparent 70%);
	background-repeat: no-repeat;
	background-size: 1080px 900px, 520px 460px, 980px 820px, 480px 420px;
	background-position: 92% 8%, 78% 20%, 8% 92%, 22% 80%;
	background-attachment: fixed;
	animation: bg-gradient-drift 30s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
	.faq-briefing-wrapper {
		animation: none;
	}
}

@media (max-width: 768px) {
	.faq-briefing-wrapper {
		/* iOS Safari 對 background-attachment:fixed 支援不穩定，手機版改回一般捲動 */
		background-attachment: scroll;
	}
}

/* FAQ 區塊本身不再疊加自己的固定背景（改由 .faq-briefing-wrapper 統一提供），
   用 #faq.subpage-faq-section（ID+class）蓋掉 style.css 裡 #faq 原本的固定背景設定；
   只在這個被包進 .faq-briefing-wrapper 的子頁 FAQ 上生效，不影響首頁的 #faq */
.faq-briefing-wrapper #faq {
	background: none;
	animation: none;
	overflow: visible;
	/* #faq 原本的 padding-bottom 是給首頁單獨使用時的大留白（128px），
	   搬到這個子頁、下面緊接著簡報下載卡片時太高，縮小只留一點呼吸空間 */
	padding-bottom: var(--space-3xl);
}

/* ── 專業服務簡報下載：背景已移到 .faq-briefing-wrapper，這裡只保留版面間距；
   卡片本身是白色，在共用背景上形成卡片層次 */
.briefing-section {
	/* 上方與 FAQ 共用同一片連續背景，不需要再疊加大間距；
	   FAQ 區塊自身已縮小 padding-bottom，這裡只留一點呼吸空間即可。
	   下方留白原本跟 #cta 一樣用 128px，卡片下方太空曠，縮小一些 */
	padding: var(--space-2xl) 0 var(--space-6xl);
	position: relative;
}

.briefing-card {
	display: grid;
	grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
	align-items: center;
	gap: var(--space-4xl);
	max-width: none;
	margin: 0;
	/* 卡片式：白底、邊框與陰影，在共用的淺色背景上形成卡片層次，
	   內部的 .briefing-visual 改用淺色底，跟卡片白底再拉出一層對比 */
	padding: var(--space-3xl);
	background: var(--swatch-white);
	border: 1px solid var(--swatch-ivory-medium);
	border-radius: var(--radius-card);
	box-shadow: var(--shadow-1);
	overflow: visible;
	text-align: left;
}

.briefing-card::before {
	content: none;
}

.briefing-copy {
	align-items: flex-start;
	text-align: left;
	max-width: none;
}

.briefing-title,
.briefing-subtitle,
.briefing-desc {
	text-align: left;
}

.briefing-visual {
	max-width: none;
	padding: var(--space-3xl) var(--space-2xl);
	background: var(--swatch-white);
	border: 1px solid var(--swatch-ivory-medium);
	border-radius: var(--radius-card);
}

@media (max-width: 991px) {
	.briefing-card {
		grid-template-columns: 1fr;
		gap: var(--space-2xl);
		padding: var(--space-xl);
	}
}

/* ── 什麼是企業管理系統：三項要點統整成一張卡片，中間以直線分隔 ── */
.what-is-card .what-is-values-grid {
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 0;
	background: var(--swatch-ivory-light);
	border: none;
	border-radius: var(--radius-card);
	overflow: hidden;
}

.what-is-card .what-is-value-card {
	background: none;
	border: none;
	border-radius: 0;
	box-shadow: none;
	padding: var(--space-2xl) var(--space-xl);
}

.what-is-card .what-is-value-card + .what-is-value-card {
	border-left: 1px solid var(--swatch-ivory-medium);
}

@media (max-width: 991px) {
	.what-is-card .what-is-values-grid {
		grid-template-columns: 1fr;
	}

	.what-is-card .what-is-value-card + .what-is-value-card {
		border-left: none;
		/* 2026-10-29 修正：此規則是舊版「直線分隔」設計遺留，
		   現行卡片式設計已改用 border:none，但此選擇器 3 個 class
		   的 specificity 比後面 border:none 的 2 個 class 高，
		   導致手機版卡片上方一直跑出多餘的分隔線，故移除 */
		border-top: none;
	}
}

/* ── 方案評估比較表：參考分欄卡片樣式，每欄為獨立圓角卡片，PlayPlus 欄以品牌淺綠強調 ── */
.comparison-card {
	background: var(--swatch-ivory-light);
	border: 1px solid var(--swatch-ivory-medium);
	border-radius: var(--radius-card);
	box-shadow: none;
	padding: var(--space-md) var(--space-md) var(--space-md);
	overflow: hidden;
}

.comparison-table {
	border-collapse: separate;
	border-spacing: 12px 0;
	margin-top: 0;
}

.comparison-table th,
.comparison-table td {
	border: none;
	padding: 1.15rem 1.25rem;
	text-align: center;
	vertical-align: middle;
	background: transparent;
	font-size: var(--text-base);
	line-height: 1.6;
}

.comparison-table th:first-child,
.comparison-table td:first-child {
	text-align: left;
	background: transparent;
}

.comparison-table thead th {
	background: var(--swatch-white);
	border-radius: 20px 20px 0 0;
	padding: 1.6rem 1rem 1.2rem;
	font-size: var(--text-lg);
	font-weight: 600;
	letter-spacing: 0;
	line-height: 1.35;
	color: var(--text-primary);
}

.comparison-table thead th:first-child {
	background: transparent;
}

.comparison-table thead th.th-target {
	background: rgba(51, 204, 51, 0.12);
	border: none;
	color: var(--text-primary);
}

.comparison-table thead th.th-target .target-badge {
	display: inline-block;
	margin: 0.6rem 0 0;
}

.comparison-table td.dimension-name {
	width: 22%;
	padding-left: var(--space-md);
	font-size: var(--text-base);
	font-weight: 500;
	color: var(--text-secondary);
	white-space: nowrap;
}

.comparison-table td.col-off-shelf {
	width: 39%;
	background: var(--swatch-white);
	font-weight: 400;
	/* 跟 PlayPlus 欄位同色，避免市售軟體內容看起來太淡、不好閱讀 */
	color: var(--text-primary);
}

.comparison-table td.col-playplus {
	width: 39%;
	background: rgba(51, 204, 51, 0.12);
	border: none;
	font-weight: 400;
	color: var(--text-primary);
}

.comparison-table tbody tr:last-child td:not(:first-child) {
	border-radius: 0 0 20px 20px;
}

.comparison-table td.col-playplus .highlight-point {
	justify-content: center;
	text-align: center;
	gap: 0.5rem;
}

.comparison-table td.col-playplus .check-icon {
	margin-top: 0.2rem;
}

/* ── 方案評估比較表 微調：無外框、文字統一靠左、左欄縮窄 ── */
.comparison-card {
	border: none;
}

.comparison-table th,
.comparison-table td {
	text-align: left;
}

.comparison-table td.dimension-name {
	width: 16%;
	padding-left: var(--space-md);
}

.comparison-table td.col-off-shelf,
.comparison-table td.col-playplus {
	width: 42%;
}

.comparison-table td.col-playplus .highlight-point {
	justify-content: flex-start;
	text-align: left;
}

.comparison-table .visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

/* ── 要點卡片：分隔線改為局部直線，不滿版 ── */
.what-is-card .what-is-value-card + .what-is-value-card {
	border-left: none;
}

.what-is-card .what-is-value-card + .what-is-value-card::before {
	content: "";
	position: absolute;
	left: 0;
	top: var(--space-2xl);
	bottom: var(--space-2xl);
	width: 1px;
	background: var(--swatch-ivory-medium);
}

@media (max-width: 991px) {
	.what-is-card .what-is-value-card + .what-is-value-card::before {
		left: var(--space-xl);
		right: var(--space-xl);
		top: 0;
		bottom: auto;
		width: auto;
		height: 1px;
	}
}

/* ── 方案評估比較表：表頭水平置中，左右留白加大 ── */
.comparison-table thead th {
	text-align: center;
	padding-left: 2rem;
	padding-right: 2rem;
}

.comparison-table td {
	padding-left: 2rem;
	padding-right: 2rem;
}

.comparison-table td.dimension-name {
	padding-left: var(--space-md);
}

/* ── 比較表：標籤與標題垂直置中；打勾圖示與文字垂直置中 ── */
.comparison-table thead th.th-target .target-badge {
	display: inline-block;
	margin: 0 0 0 0.5rem;
	vertical-align: middle;
	position: relative;
	top: -0.1em;
}

.comparison-table td.col-playplus .highlight-point {
	align-items: center;
}

.comparison-table td.col-playplus .check-icon {
	margin-top: 0;
	line-height: 1;
	display: inline-flex;
}

/* ── 簡報下載：右側插畫，無底色與邊框 ── */
.briefing-visual {
	background: none;
	border: none;
	border-radius: 0;
	padding: 0;
}

.briefing-illust {
	display: block;
	width: 100%;
	max-width: 420px;
	height: auto;
	margin: 0 auto var(--space-xl);
}

.briefing-illust-link {
	display: block;
	text-decoration: none;
	transition: transform var(--duration-fast) var(--ease-out);
}

.briefing-illust-link:hover {
	transform: translateY(-4px);
}

.briefing-illust-link:focus-visible {
	outline: 2px solid var(--swatch-brand-green);
	outline-offset: 6px;
	border-radius: var(--radius-card);
}

/* ── 要點卡片：移除外框 ── */
.what-is-card .what-is-values-grid {
	border: none;
}

/* ── 簡報下載：問句作為視覺引導，按鈕置於插畫下方 ── */
.briefing-subtitle {
	display: inline-block;
	align-self: flex-start;
	font-size: var(--text-sm);
	font-weight: 500;
	color: var(--text-success);
	background: rgba(51, 204, 51, 0.12);
	padding: 4px 12px;
	border-radius: var(--radius-full);
	margin: 0 0 var(--space-md);
	text-align: left;
}

.briefing-visual {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.briefing-dl-btn {
	margin-bottom: var(--space-xl);
}

.briefing-visual-title {
	text-align: center;
}

.briefing-visual-subtitle {
	text-align: center;
}

/* ── 方案評估比較表：移除最後一列 PlayPlus 欄的多餘底線 ── */
.comparison-table tr:last-child td.col-playplus {
	border-bottom: none;
}

/* ── 簡報下載：插畫與按鈕為同一組，hover 一起浮起；文案移到左側 ── */
.briefing-meta {
	margin-top: var(--space-xl);
	padding-top: var(--space-lg);
	border-top: 1px dashed var(--swatch-ivory-medium);
	width: 100%;
	text-align: left;
}

.briefing-visual-title,
.briefing-visual-subtitle {
	text-align: left;
}

.briefing-dl-group {
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 100%;
}

.briefing-dl-group .briefing-illust-link,
.briefing-dl-group .briefing-dl-btn {
	transition: transform var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out);
}

.briefing-dl-group:hover .briefing-illust-link,
.briefing-dl-group:hover .briefing-dl-btn {
	transform: translateY(-4px);
}

.briefing-dl-group:hover .briefing-dl-btn {
	box-shadow: var(--shadow-2);
}

.briefing-illust-link:hover {
	transform: none;
}

/* ── 簡報下載 微調：問句改為線條引導文字、插畫與按鈕無間距且按鈕加大、文案不粗體 ── */
.briefing-subtitle {
	display: flex;
	align-items: center;
	gap: 12px;
	font-size: var(--text-base);
	font-weight: 500;
	color: var(--swatch-slate-light);
	background: none;
	padding: 0;
	border-radius: 0;
	margin: 0 0 var(--space-md);
}

.briefing-subtitle::before {
	content: "";
	width: 28px;
	height: 2px;
	background: var(--swatch-brand-green);
	flex-shrink: 0;
}

.briefing-dl-group .briefing-illust-link {
	margin: 0;
}

.briefing-dl-group .briefing-illust {
	margin: 0;
}

.briefing-dl-btn {
	margin: 0 0 var(--space-xl);
	padding: 1.1rem 2.75rem;
	font-size: 1.125rem;
	font-weight: 700;
}

.briefing-visual-title {
	font-weight: 700;
}

/* ── 什麼是企業管理系統：左側為說明內容，右側三要點垂直排列 ── */
.what-is-card {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	column-gap: var(--space-4xl);
	row-gap: 0;
	align-items: start;
}

.what-is-card .what-is-body {
	display: contents;
}

.what-is-card .what-is-copy {
	grid-column: 1;
	grid-row: 1;
	align-self: center;
	display: flex;
	flex-direction: column;
}

.what-is-card .what-is-values-block {
	grid-column: 2;
	grid-row: 1;
	align-self: center;
	margin-bottom: 0;
}

.what-is-card .what-is-values-grid {
	grid-template-columns: 1fr;
}

.what-is-card .what-is-value-card {
	padding: var(--space-xl) var(--space-2xl);
}

.what-is-card .what-is-value-card + .what-is-value-card::before {
	left: var(--space-2xl);
	right: var(--space-2xl);
	top: 0;
	bottom: auto;
	width: auto;
	height: 1px;
}

@media (max-width: 991px) {
	.what-is-card {
		grid-template-columns: 1fr;
		row-gap: var(--space-lg);
	}

	.what-is-card .what-is-copy,
	.what-is-card .what-is-values-block {
		grid-column: 1;
		grid-row: auto;
	}

	.what-is-card .what-is-values-block {
		align-self: stretch;
	}
}

/* ── 什麼是企業管理系統：右側三要點改為條列式（綠色菱形項目符號），不再使用卡片 ── */
.what-is-card .what-is-values-grid {
	background: none;
	border: none;
	border-radius: 0;
	overflow: visible;
	gap: var(--space-lg);
}

.what-is-card .what-is-value-card,
.what-is-card .what-is-value-card:first-child,
.what-is-card .what-is-value-card:last-child {
	background: none;
	border: none;
	border-radius: 0;
	box-shadow: none;
	padding: 0;
}

.what-is-card .what-is-value-card + .what-is-value-card::before {
	display: none;
}

.what-is-card .value-card-title {
	position: relative;
	padding-left: 1.5rem;
	margin-bottom: var(--space-2xs);
}

.what-is-card .value-card-title::before {
	content: "";
	position: absolute;
	left: 0.25rem;
	top: 0.45em;
	width: 8px;
	height: 8px;
	background: var(--swatch-brand-green);
	transform: rotate(45deg);
}

.what-is-card .value-card-desc {
	padding-left: 1.5rem;
}

/* ── 右側三要點：每點獨立淺色卡片，保留綠色菱形項目符號 ── */
.what-is-card .what-is-values-grid {
	gap: var(--space-md);
}

.what-is-card .what-is-value-card,
.what-is-card .what-is-value-card:first-child,
.what-is-card .what-is-value-card:last-child {
	background: var(--swatch-ivory-light);
	border: none;
	border-radius: var(--radius-card);
	padding: var(--space-xl) var(--space-2xl);
}

.what-is-card .value-card-title {
	margin-bottom: var(--space-2xs);
}

/* ── 方案評估：PlayPlus 欄改為較淺的綠色 ── */
.comparison-table thead th.th-target,
.comparison-table td.col-playplus {
	background: rgba(51, 204, 51, 0.07);
}

/* ── 方案評估標題區：寬螢幕下放寬文字寬度，減少提早換行 ── */
.evaluation-header {
	max-width: 1040px;
}

/* ── 精選作品集標題說明：寬螢幕下放寬文字寬度，減少提早換行 ── */
.subpage-portfolio-header > div:first-child {
	max-width: 1040px;
}

/* ── 說明文字寬度：覆寫全站 .section-desc 的 600px 上限，寬螢幕下不提早斷行 ── */
.evaluation-header .section-desc,
.subpage-portfolio-header .section-desc {
	max-width: 1040px;
}

/* ── 簡報下載 再調整：副標前為直線、標題位於按鈕上方 ── */
.briefing-subtitle::before {
	width: 2px;
	height: 22px;
}

.briefing-dl-group .briefing-visual-title {
	margin: var(--space-md) 0 var(--space-md);
	font-weight: 500;
	text-align: center;
}

/* ── 決策者痛點標題區：寬度約占畫面 50%，減少提早斷行；手機版維持全寬 ── */
.pain-header .section-desc {
	max-width: 50vw;
}

@media (max-width: 767px) {
	.pain-header,
	.pain-header .section-desc {
		max-width: 100%;
	}
}

/* ── 簡報下載：hover 時標題與插畫、按鈕同步浮起 ── */
.briefing-dl-group .briefing-visual-title {
	transition: transform var(--duration-fast) var(--ease-out);
}

.briefing-dl-group:hover .briefing-visual-title {
	transform: translateY(-4px);
}

/* ── 服務頁銜接 CTA：與上方區塊以一條細線區隔，不做明顯的背景斷層 ──
   注意：--border-light 未定義，這裡改用明確色值，避免 border 宣告失效 */
/* 分隔線寬度對齊 .container（左右各 5%），不滿版 */
#cta::before {
	content: "";
	position: absolute;
	top: 0;
	left: 5%;
	right: 5%;
	height: 1px;
	background: rgba(21, 22, 26, 0.1);
	pointer-events: none;
}

/* 常見問題區塊底部光暈收斂為平整的米色（var(--swatch-ivory-medium)），線條上方不再產生較亮的白色暈光 */
#faq::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 240px;
	background: linear-gradient(to bottom, rgba(240, 238, 230, 0) 0%, var(--swatch-ivory-medium) 100%);
	pointer-events: none;
	z-index: 0;
}

#faq > .container {
	position: relative;
	z-index: 1;
}

/* CTA 頂部由米色逐步過渡到 CTA 底色，線條下方的漸層方向與上方一致，不會出現白色暈光 */
#cta {
	isolation: isolate;
}

#cta::after {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 240px;
	background: linear-gradient(to bottom, var(--swatch-ivory-medium) 0%, rgba(240, 238, 230, 0) 100%);
	pointer-events: none;
	z-index: -1;
}

/* ── 方案評估比較表：手機版左右滑動提示文字，桌機版隱藏 ── */
.comparison-scroll-hint {
	display: none;
}

@media (max-width: 991px) {
	.comparison-scroll-hint {
		display: block;
		margin: 0 0 var(--space-sm);
		font-size: var(--text-sm);
		color: var(--text-muted);
		text-align: left;
	}

	/* 手機版「業務契合度」欄位太寬：原本 white-space:nowrap 會讓瀏覽器
	   無視 width 設定、撐開欄寬塞下整行文字，改為允許換行後欄寬才能真正縮小；
	   欄寬再縮窄一點，讓右側兩欄的內容有更多空間 */
	.comparison-table td.dimension-name {
		width: 16%;
		white-space: normal;
		/* 欄寬縮到 16% 後，原本左右 1.65rem（約 26px）的內距佔掉大半欄寬，
		   逼得「業務契合度」一個字一行、很難讀。左邊直接貼齊表格邊界，
		   騰出最多空間給文字；右邊留一點點，避免跟隔壁欄位的內容貼在一起 */
		padding-left: 0;
		padding-right: 0.5rem;
	}
}

/* 網頁設計方案評估：為插畫保留欄寬，窄螢幕也不隱藏素材。 */
.evaluation-section--web .evaluation-header { flex: 1; min-width: 0; }
.evaluation-section--web .evaluation-visual {
  display: grid;
  flex: 0 0 clamp(160px, 20vw, 260px);
  width: clamp(160px, 20vw, 260px);
}
.evaluation-section--web .evaluation-fallback,
.evaluation-section--web .evaluation-lottie {
  grid-area: 1 / 1;
  width: 100%;
  height: auto;
  aspect-ratio: 440 / 416;
}
.evaluation-section--web .evaluation-lottie { visibility: hidden; }
.evaluation-section--web .is-ready .evaluation-lottie { visibility: visible; }
.evaluation-section--web .is-ready .evaluation-fallback { visibility: hidden; }
@media (max-width: 767px) {
  .evaluation-section--web .evaluation-header-row { flex-direction: column; align-items: stretch; }
  .evaluation-section--web .evaluation-visual { flex: none; align-self: center; width: 180px; }
}