.about-page {
	width: min(900px, calc(100% - 32px));
	margin: 0 auto 72px;
	display: grid;
	gap: 20px;
}

.about-hero,
.about-story {
	border-radius: 28px;
	border: 1px solid rgba(159, 214, 255, 0.14);
	background:
		radial-gradient(circle at top right, rgba(106, 208, 255, 0.12), transparent 34%),
		linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.015)),
		rgba(8, 13, 28, 0.84);
	box-shadow: 0 24px 60px rgba(0, 0, 0, 0.22);
}

.about-hero {
	padding: 34px;
	border: 0;
	background: transparent;
	box-shadow: none;
}

.about-hero__eyebrow,
.about-story__eyebrow {
	margin: 0 0 10px;
	color: #bfe9ff;
	font-size: 0.8rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	font-weight: 700;
}

.about-hero__title,
.about-story__header h2,
.about-story__section h3 {
	margin: 0;
	color: #f7fbff;
}

.about-hero__title {
	font-size: clamp(2.1rem, 5vw, 3.4rem);
	line-height: 1.06;
}

.about-hero__lede,
.about-story__section p {
	color: rgba(223, 235, 248, 0.84);
	line-height: 1.8;
}

.about-hero__lede {
	margin: 18px 0 0;
	font-size: 1.04rem;
}

.about-story {
	padding: 30px 34px;
}

.about-story__header {
	margin-bottom: 24px;
}

.about-story__header h2 {
	line-height: 1.15;
}

.about-story__section + .about-story__section {
	margin-top: 24px;
	padding-top: 24px;
	border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.about-story__section h3 {
	margin-bottom: 12px;
	font-size: 1.15rem;
}

.about-story__section p {
	margin: 0;
}

.about-story__section p + p {
	margin-top: 14px;
}

@media (max-width: 640px) {
	.about-page {
		width: min(100% - 20px, 900px);
		gap: 16px;
	}

	.about-hero,
	.about-story {
		padding: 22px;
		border-radius: 22px;
	}

	.about-hero__title {
		font-size: clamp(1.9rem, 10vw, 2.7rem);
	}
}