/* ==========================================================
  Shared base for inner pages — loaded only on About (page-about.php),
  Contact (page-contact.php) and App (page-app.php), before each page's own stylesheet.
  Extracted unchanged from about.css (01. Base + hero blobs); the
  .page-* aliases are the neutral names used by the Contact page.
============================================================ */

/* ! Tokens + page wrapper
------------------------------------------------------------ */
.about-page,
.contact-page,
.app-page {
	--about-title: #2E2E2E;
	--about-text: #555555;
	--about-muted: #767676;
	--about-eyebrow: #A63815;
	--about-peach: #FFEBE5;
	--about-peach-2: #FFE0D5;
	--about-peach-line: #FFBFA3;
	--about-blue: #3833FF;
	--about-blue-bg: #EEEEFF;
	--about-shadow: 0 8px 24px rgba(166, 56, 21, 0.06);
	position: relative;
	overflow: hidden;
	color: var(--about-text);
}
@media (min-width: 1400px) {
	.about-page .about-container,
	.contact-page .page-container,
	.app-page .page-container {
		max-width: 1472px;
	}
}
.about-page h1,
.about-page h2,
.about-page h3,
.about-page h4,
.contact-page h1,
.contact-page h2,
.contact-page h3,
.contact-page h4,
.app-page h1,
.app-page h2,
.app-page h3,
.app-page h4 {
	color: var(--about-title);
	margin: 0;
}

/* ! Shared components
------------------------------------------------------------ */
.about-eyebrow,
.page-eyebrow {
	color: var(--about-eyebrow);
	font-size: 16px;
	font-weight: 500;
	line-height: 1.6;
}
.about-chip,
.page-chip {
	display: inline-flex;
	align-items: center;
	padding: 6px 16px;
	border-radius: 999px;
	background: var(--about-peach-2);
	color: var(--about-eyebrow);
	font-size: 14px;
	font-weight: 500;
	line-height: 1.6;
}
.about-icon,
.page-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 48px;
	width: 48px;
	height: 48px;
	border-radius: 12px;
}
.about-icon--blue,   .page-icon--blue   { background: var(--about-blue-bg); color: var(--about-blue); }
.about-icon--peach,  .page-icon--peach  { background: var(--about-peach); color: var(--brand-color); }
.about-icon--yellow, .page-icon--yellow { background: #FFF6DB; color: #E5A400; }
.about-icon--green,  .page-icon--green  { background: #E3F8EC; color: #1FA45B; }

/* ! Hero background blobs
------------------------------------------------------------ */
.about-hero__blobs,
.page-blobs {
	position: absolute;
	inset: 0;
	pointer-events: none;
	z-index: 0;
}
.about-hero__blob,
.page-blob {
	position: absolute;
	border-radius: 50%;
	filter: blur(140px);
	opacity: 0.22;
}
.about-hero__blob--peach,
.page-blob--peach {
	width: 520px;
	height: 420px;
	top: -120px;
	inset-inline-start: -120px;
	background: #fc6432;
}
.about-hero__blob--blue,
.page-blob--blue {
	width: 480px;
	height: 420px;
	top: 40px;
	inset-inline-end: -160px;
	background: #3833ff;
	opacity: 0.14;
}