.hero-section {
	position: relative;
	overflow: hidden;
	padding: 104px 0 92px;
	color: var(--color-white);
	background:
		linear-gradient(rgba(23, 32, 42, 0.74), rgba(23, 32, 42, 0.7)),
		url("../images/ai-hero.svg") center / cover no-repeat;
}

.hero-section .container {
	max-width: 980px;
}

.hero-title {
	max-width: 860px;
	font-size: clamp(2.6rem, 7vw, 5.8rem);
}

.hero-copy {
	max-width: 680px;
	color: rgba(255, 255, 255, 0.86);
	font-size: 1.2rem;
}

.hero-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	margin-top: 28px;
}

.hero-actions .button.secondary {
	color: var(--color-white);
	background: transparent;
	border-color: rgba(255, 255, 255, 0.55);
}

.entry-header {
	margin-bottom: 18px;
}

.single-entry {
	border-bottom: 1px solid var(--color-border);
}

.entry-content > * {
	max-width: 760px;
}

.entry-content > .alignwide {
	max-width: 100%;
}

.entry-content > .alignfull {
	max-width: none;
	margin-right: calc(50% - 50vw);
	margin-left: calc(50% - 50vw);
}

.ai-summary-box {
	margin: 24px 0;
	padding: 22px;
	border-left: 4px solid var(--color-accent);
	border-radius: var(--radius);
	background: var(--color-paper);
}

.faq-section {
	background: var(--color-white);
}

.faq-list {
	display: grid;
	gap: 14px;
	max-width: 860px;
}

.faq-item {
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
	background: var(--color-white);
}

.faq-item summary {
	padding: 18px 20px;
	font-weight: 800;
	cursor: pointer;
}

.faq-item div {
	padding: 0 20px 18px;
	color: var(--color-muted);
}

.related-posts {
	margin-top: 48px;
}