.hero {
	padding: 76px 0 80px;
	background: linear-gradient(125deg, #fffdfc 0%, #fff3f0 75%, #f9e6e5 100%);
	border-bottom: 1px solid var(--line);
}
.hero-grid {
	display: grid;
	grid-template-columns: 1.1fr .9fr;
	gap: 64px;
	align-items: center;
}
.hero h1 {
	font-size: clamp(35px, 4.4vw, 58px);
	line-height: 1.35;
	margin: 18px 0 24px;
	font-weight: 700;
}
.hero h1 em {
	font-style: normal;
	color: var(--primary);
}
.hero-copy > p {
	font-size: 17px;
	color: var(--muted);
}
.hero-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	margin: 28px 0;
}
.hero-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 12px 22px;
	font-size: 12px;
	color: var(--muted);
}
.hero-meta span::before {
	content: "·";
	color: var(--primary);
	margin-right: 8px;
}
.story-window {
	background: rgba(255, 255, 255, .9);
	border: 1px solid #d9b9bd;
	border-radius: 14px;
	box-shadow: 18px 18px 0 #f0d8d8, 0 20px 50px rgba(120, 54, 65, .08);
	overflow: hidden;
}
.window-top {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 16px 22px;
	border-bottom: 1px solid var(--line);
	color: var(--primary);
	font-size: 12px;
}
.window-content {
	padding: 28px;
}
.story-title {
	font-size: 25px;
	margin: 8px 0 18px;
}
.story-tags {
	display: flex;
	gap: 8px;
	margin: 14px 0 24px;
}
.story-tags span {
	background: var(--bg-light);
	border: 1px solid var(--line);
	border-radius: 3px;
	padding: 3px 10px;
	font-size: 11px;
	color: var(--muted);
}
.dialogue {
	padding: 16px 18px;
	margin: 12px 0;
	background: var(--bg-light);
	border-radius: 3px 12px 12px 12px;
	font-size: 14px;
}
.dialogue.user {
	background: #f6f5f4;
	margin-left: 36px;
	border-radius: 12px 3px 12px 12px;
}
.dialogue b {
	display: block;
	color: var(--primary);
	font-size: 11px;
	margin-bottom: 5px;
}
.story-foot {
	font-size: 11px;
	color: var(--muted);
	margin: 20px 0 0;
}
.intro-note {
	font-size: 28px;
	padding: 35px;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	background: var(--bg-light);
	line-height: 1.7;
}
.intro-note span {
	color: var(--primary);
}
.intro-note p {
	font-size: 14px;
	margin: 20px 0 0;
}
.scene-example {
	padding: 16px;
	border-left: 2px solid var(--primary-light);
	background: var(--bg-light);
	font-size: 13px;
	color: var(--muted);
}
.section-row {
	display: flex;
	justify-content: space-between;
	gap: 25px;
	align-items: center;
}
.section-row .text-link {
	flex-shrink: 0;
}
.section-row .section-heading {
	margin-bottom: 28px;
}
@media (max-width: 900px) {
	.hero-grid {
		grid-template-columns: 1fr;
		gap: 40px;
	}
	.hero {
		padding: 48px 0 62px;
	}
	.story-window {
		max-width: 540px;
		width: 100%;
		margin: auto;
		box-shadow: 8px 8px 0 #f0d8d8;
	}
}
@media (max-width: 480px) {
	.window-content {
		padding: 22px;
	}
	.hero h1 {
		font-size: 36px;
	}
	.intro-note {
		padding: 26px;
		font-size: 24px;
	}
	.section-row {
		display: block;
		margin-bottom: 20px;
	}
}

/* 更紧凑的首页英雄区 */
.hero {
	padding: 36px 0 44px;
}
.hero-grid {
	gap: 42px;
}
.hero .story-cover {
	height: 90px;
}
.hero .window-top {
	padding: 10px 20px;
}
.hero .window-content {
	padding: 18px 22px;
}
.hero .story-title {
	font-size: 22px;
	margin: 6px 0 10px;
}
.hero .story-tags {
	margin: 10px 0 12px;
}
.hero .dialogue {
	padding: 10px 14px;
	margin: 8px 0;
	font-size: 13px;
	line-height: 1.65;
}
.hero .story-foot {
	margin-top: 12px;
}
@media (max-width: 900px) {
	.hero {
		padding: 32px 0 40px;
	}
	.hero-grid {
		gap: 28px;
	}
}

/* FAQ 与标题共用适中的阅读宽度 */
.home-faq-shell {
	max-width: 900px;
}

/* Preserve the full brand illustration inside the introduction card. */
.intro-note .intro-brand-cover {
	height: auto;
	aspect-ratio: 16 / 9;
}