/*
 * LifeOS 產品專頁（page 32498）視覺系統 v1.4 — 2026-08-15
 * 目標：一致左軸、暖白 editorial、少量精緻卡片、大留白。
 */

body.page-id-32498 {
	--lifeos-ink: #302a26;
	--lifeos-muted: #6f655e;
	--lifeos-coral: #e87a56;
	--lifeos-coral-dark: #b85739;
	--lifeos-cream: #fff9f3;
	--lifeos-peach: #fff0e7;
	--lifeos-paper: #fdfbf8;
	--lifeos-line: rgba(77, 56, 43, 0.12);
	--lifeos-shadow: 0 18px 50px rgba(72, 49, 35, 0.07), 0 3px 12px rgba(72, 49, 35, 0.04);
	background: var(--lifeos-paper);
}

/* 產品頁不顯示文章推薦與浮動贊助工具，讓轉換路徑保持乾淨。 */
body.page-id-32498 .ct-trending-block,
body.page-id-32498 #bmc-wbtn,
body.page-id-32498 #bmc-close-btn,
body.page-id-32498 #bmc-iframe {
	display: none !important;
}

body.page-id-32498 .entry-content {
	color: var(--lifeos-ink);
	max-width: 860px;
	margin-inline: auto;
}

/* 全頁只有一條左軸：Hero、標題、正文、CTA 都從同一位置開始。 */
body.page-id-32498 .entry-content > section {
	box-sizing: border-box;
	padding-inline: 8px;
	text-align: left;
}

/* Hero：不再用置中的卡片語言，改成暖白 editorial 首屏。 */
body.page-id-32498 .lifeos-hero {
	isolation: isolate;
	padding-block: 104px 92px;
	position: relative;
}
body.page-id-32498 .lifeos-hero::before {
	background:
		radial-gradient(circle at 88% 16%, rgba(232, 122, 86, .13), transparent 24%),
		radial-gradient(circle at 76% 68%, rgba(235, 198, 175, .24), transparent 30%);
	border-radius: 32px;
	content: "";
	inset: 26px -72px 14px;
	pointer-events: none;
	position: absolute;
	z-index: -1;
}
body.page-id-32498 .lifeos-eyebrow {
	color: var(--lifeos-coral-dark);
	font-size: .82rem;
	font-weight: 700;
	letter-spacing: .2em;
	margin: 0 0 1.5rem;
}
body.page-id-32498 .lifeos-hero h2 {
	color: var(--lifeos-ink);
	font-size: clamp(2.35rem, 4.5vw, 4rem);
	font-weight: 700;
	letter-spacing: -.035em;
	line-height: 1.24;
	margin: 0 0 1.8rem;
	max-width: 15ch;
}
body.page-id-32498 .lifeos-hero > p:not(.lifeos-eyebrow):not(.lifeos-actions) {
	color: #4e4742;
	font-size: 1.08rem;
	line-height: 2;
	max-width: 43rem;
}
body.page-id-32498 .lifeos-hero blockquote {
	background: rgba(255, 255, 255, .72);
	border: 1px solid rgba(232, 122, 86, .16);
	border-radius: 14px;
	margin: 2rem 0 0;
	max-width: 35rem;
	padding: 1rem 1.2rem;
	text-align: left;
}
body.page-id-32498 .lifeos-hero blockquote,
body.page-id-32498 .lifeos-hero blockquote p {
	color: #5f4d43;
	font-size: .96rem;
	font-weight: 600;
	line-height: 1.8;
}

/* 文字層級與閱讀節奏 */
body.page-id-32498 .entry-content p {
	color: #514a45;
	font-size: 1rem;
	line-height: 1.95;
	margin: 0 0 1.2rem;
}
body.page-id-32498 .entry-content > section:not(.lifeos-hero) > p,
body.page-id-32498 .entry-content > section:not(.lifeos-hero) > ul {
	max-width: 720px;
}
body.page-id-32498 .entry-content ul,
body.page-id-32498 .entry-content ol {
	color: #514a45;
	line-height: 1.85;
	margin: 0 0 1.7rem;
}
body.page-id-32498 .entry-content li {
	margin-bottom: .62rem;
}
body.page-id-32498 .entry-content h2 {
	color: var(--lifeos-ink);
	font-size: clamp(1.7rem, 3vw, 2.3rem);
	font-weight: 700;
	letter-spacing: -.02em;
	line-height: 1.42;
	margin: 0 0 1.6rem;
	max-width: 23ch;
}
body.page-id-32498 .entry-content h3 {
	color: #3c3530;
	font-size: 1.08rem;
	font-weight: 700;
	line-height: 1.55;
	margin: 0 0 .8rem;
}

/* 淡米粉中軸短線：固定一致的區段轉場。 */
body.page-id-32498 .entry-content > hr {
	background: linear-gradient(90deg, transparent, #e8c6b2 28%, #e8c6b2 72%, transparent);
	border: 0;
	height: 1px;
	margin: 92px auto;
	width: 118px;
}

/* CTA */
body.page-id-32498 .lifeos-actions {
	margin: 2rem 0 0;
}
body.page-id-32498 .lifeos-button {
	background: var(--lifeos-coral);
	border: 1px solid var(--lifeos-coral);
	border-radius: 999px;
	box-shadow: 0 10px 24px rgba(154, 72, 44, .16);
	color: #fff !important;
	display: inline-flex;
	font-size: .96rem;
	font-weight: 700;
	justify-content: center;
	line-height: 1.3;
	padding: 1rem 1.65rem;
	text-decoration: none;
	transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}
body.page-id-32498 .lifeos-button::after {
	content: "→";
	margin-left: .7rem;
	transition: transform .2s ease;
}
body.page-id-32498 .lifeos-button:hover {
	background: #dd6d49;
	box-shadow: 0 14px 30px rgba(154, 72, 44, .22);
	color: #fff !important;
	transform: translateY(-2px);
}
body.page-id-32498 .lifeos-button:hover::after {
	transform: translateX(3px);
}
body.page-id-32498 .lifeos-button:focus-visible {
	outline: 3px solid rgba(232, 122, 86, .28);
	outline-offset: 4px;
}

/* 四步驟：同尺寸、同左軸、同編號基線。 */
body.page-id-32498 .lifeos-build-list {
	counter-reset: lifeos-step;
	display: grid;
	gap: 14px;
	list-style: none;
	padding: 0;
}
body.page-id-32498 .lifeos-build-list li {
	background: rgba(255, 255, 255, .86);
	border: 1px solid var(--lifeos-line);
	border-radius: 16px;
	box-shadow: 0 7px 24px rgba(70, 48, 35, .045);
	counter-increment: lifeos-step;
	margin: 0;
	min-height: 72px;
	padding: 1.15rem 1.25rem 1.15rem 4rem;
	position: relative;
}
body.page-id-32498 .lifeos-build-list li::before {
	align-items: center;
	background: var(--lifeos-peach);
	border: 1px solid rgba(232, 122, 86, .15);
	border-radius: 999px;
	color: var(--lifeos-coral-dark);
	content: counter(lifeos-step, decimal-leading-zero);
	display: flex;
	font-size: .74rem;
	font-weight: 700;
	height: 2.15rem;
	justify-content: center;
	left: 1rem;
	letter-spacing: .04em;
	position: absolute;
	top: 1.12rem;
	width: 2.15rem;
}

/* 適合／不適合：兩張等高柔色面板。 */
body.page-id-32498 .lifeos-fit-grid {
	display: grid;
	gap: 22px;
	grid-template-columns: repeat(2, minmax(0, 1fr));
}
body.page-id-32498 .lifeos-fit-grid > div {
	background: #fff;
	border: 1px solid var(--lifeos-line);
	border-radius: 18px;
	box-shadow: var(--lifeos-shadow);
	padding: 1.65rem 1.6rem 1.35rem;
}
body.page-id-32498 .lifeos-fit-grid > div:first-child {
	background: linear-gradient(145deg, #fff 0%, #fff9f3 100%);
}
body.page-id-32498 .lifeos-fit-grid > div:last-child {
	background: linear-gradient(145deg, #fff 0%, #f8f7f5 100%);
}
body.page-id-32498 .lifeos-fit-grid ul {
	margin-bottom: 0;
	padding-left: 1.25rem;
}

/* 非 Hero 的金句不再突然置中。 */
body.page-id-32498 .entry-content section:not(.lifeos-hero) blockquote {
	background: var(--lifeos-cream);
	border: 0;
	border-radius: 14px;
	margin: 2rem 0;
	max-width: 42rem;
	padding: 1.15rem 1.3rem;
	text-align: left;
}
body.page-id-32498 .entry-content section:not(.lifeos-hero) blockquote,
body.page-id-32498 .entry-content section:not(.lifeos-hero) blockquote p {
	color: #51443c;
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.85;
}

/* FAQ：安靜的 editorial 分隔，不做滿頁卡片。 */
body.page-id-32498 #faqs h3 {
	border-top: 1px solid var(--lifeos-line);
	margin-top: 1.7rem;
	padding-top: 1.7rem;
}
body.page-id-32498 #faqs h2 + h3 {
	border-top: 0;
	margin-top: 0;
	padding-top: 0;
}
body.page-id-32498 #faqs > p {
	max-width: 44rem;
}

/* Cookie 提示縮成不擋主文的小卡。 */
body.page-id-32498 .cookie-notification {
	border: 1px solid rgba(70, 48, 35, .12) !important;
	border-radius: 14px !important;
	bottom: 18px !important;
	box-shadow: 0 16px 42px rgba(55, 42, 34, .15) !important;
	font-size: 12px !important;
	left: 18px !important;
	max-width: min(340px, calc(100vw - 36px)) !important;
	padding: 14px 16px !important;
	top: auto !important;
}

@media (max-width: 700px) {
	body.page-id-32498 .entry-content {
		max-width: 100%;
	}
	body.page-id-32498 .entry-content > section {
		padding-inline: 2px;
	}
	body.page-id-32498 .lifeos-hero {
		padding-block: 70px 54px;
	}
	body.page-id-32498 .lifeos-hero::before {
		border-radius: 24px;
		inset: 18px -12px 6px;
	}
	body.page-id-32498 .lifeos-hero h2 {
		font-size: clamp(2.05rem, 10.5vw, 3rem);
		line-height: 1.3;
	}
	body.page-id-32498 .entry-content > hr {
		margin: 64px auto;
		width: 88px;
	}
	body.page-id-32498 .lifeos-fit-grid {
		grid-template-columns: 1fr;
	}
	body.page-id-32498 .lifeos-button {
		align-items: center;
		display: flex;
		width: 100%;
	}
	body.page-id-32498 .lifeos-build-list li {
		padding-right: 1rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	body.page-id-32498 .lifeos-button,
	body.page-id-32498 .lifeos-button::after {
		transition: none;
	}
}