/* ==========================================================================
   About Page
   ==========================================================================

   Editorial-confidence design: warm cream base, Figtree everywhere, teal as
   punctuation (headline underline, numerals, CTA). Bolder than Anthropic,
   rounder than Sierra.

   Typographic system inside Figtree:
     - Display titles:  weight 800, tracking -0.03em, optical sizes via clamp
     - Section titles:  weight 700, tracking -0.02em
     - Row titles:      weight 700, tracking -0.015em
     - Eyebrow labels:  weight 600, tracking 0.14em, uppercase, small caps feel
     - Body prose:      weight 400, tracking 0, leading 1.65

   Typographic distinction is via weight/tracking/size/case, not family swap.
   ========================================================================== */

.about-page {
	background-color: var(--color-surface);
	color: var(--color-text);
	font-family: var(--font-body);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

.about-page p {
	line-height: var(--leading-relaxed);
}

/* ──────────────────────────────────────────────────────────────────────────
   Hero
   ────────────────────────────────────────────────────────────────────────── */

.about-hero {
	position: relative;
	padding: clamp(5rem, 4rem + 5vw, 8rem) var(--space-xl) clamp(3rem, 2rem + 3vw, 5rem);
	overflow: hidden;
	isolation: isolate;
}

/* Atmospheric depth — warm radial halo + faint teal wash. Replaces the flat
   cream rectangle the reviewer flagged. */
.about-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	background:
		radial-gradient(
			ellipse 70% 55% at 50% 30%,
			rgba(16, 158, 145, 0.10) 0%,
			transparent 55%
		),
		radial-gradient(
			ellipse 80% 50% at 85% 80%,
			rgba(217, 119, 87, 0.08) 0%,
			transparent 60%
		);
	z-index: -1;
	pointer-events: none;
}

.about-hero__inner {
	max-width: 1120px;
	margin: 0 auto;
}

.about-hero__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	font-family: var(--font-body);
	font-size: var(--text-small);
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--color-brand);
	margin-bottom: var(--space-xl);
}

.about-hero__eyebrow-dot {
	display: inline-block;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background-color: var(--color-brand);
	box-shadow: 0 0 0 4px rgba(16, 158, 145, 0.14);
}

.about-hero__title {
	font-family: var(--font-body);
	font-size: clamp(2.75rem, 2rem + 3.5vw, 5.5rem);
	font-weight: 800;
	line-height: 1.03;
	letter-spacing: -0.035em;
	color: var(--color-text);
	margin: 0 0 var(--space-xl);
	max-width: 22ch;
	text-wrap: balance;
}

/* Highlighter-style underline — lifted into the glyph so it reads as an
   editorial highlight, not a random swipe. Sits behind the word. */
.about-hero__underline {
	position: relative;
	display: inline-block;
	white-space: nowrap;
}

.about-hero__underline::before {
	content: "";
	position: absolute;
	left: -0.02em;
	right: -0.08em;
	top: 55%;
	height: 45%;
	background-color: var(--color-brand);
	opacity: 0.28;
	z-index: -1;
	transform: skewX(-2deg);
}

.about-hero__lede {
	font-family: var(--font-body);
	font-size: clamp(1.15rem, 1rem + 0.5vw, 1.375rem);
	font-weight: 400;
	letter-spacing: 0;
	color: var(--color-text);
	line-height: 1.55;
	max-width: 48ch;
	opacity: 0.88;
	text-wrap: pretty;
	margin: 0;
}

/* ──────────────────────────────────────────────────────────────────────────
   Differentiators — numeric editorial rows (scrapped 2x2 SaaS card grid)
   ────────────────────────────────────────────────────────────────────────── */

.about-differentiators {
	padding: clamp(3rem, 2rem + 3vw, 5rem) var(--space-xl) clamp(4rem, 3rem + 4vw, 7rem);
}

.about-differentiators__inner {
	max-width: 1040px;
	margin: 0 auto;
}

.about-differentiators__header {
	max-width: 720px;
	margin: 0 0 var(--space-3xl);
}

.about-differentiators__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	font-size: var(--text-small);
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--color-brand);
	margin-bottom: var(--space-md);
}

.about-differentiators__eyebrow::before {
	content: "";
	display: inline-block;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background-color: var(--color-brand);
	box-shadow: 0 0 0 4px rgba(16, 158, 145, 0.14);
}

.about-differentiators__title {
	font-family: var(--font-body);
	font-size: clamp(2rem, 1.6rem + 1.5vw, 2.875rem);
	font-weight: 800;
	line-height: 1.1;
	letter-spacing: -0.025em;
	color: var(--color-text);
	margin: 0;
	text-wrap: balance;
}

/* Echoes the hero underline device on the word "differently". */
.about-differentiators__title-underline {
	position: relative;
	display: inline-block;
	white-space: nowrap;
}

.about-differentiators__title-underline::before {
	content: "";
	position: absolute;
	left: -0.05em;
	right: -0.05em;
	top: 58%;
	height: 42%;
	background-color: var(--color-brand);
	opacity: 0.26;
	z-index: -1;
	transform: skewX(-4deg);
}

.about-differentiators__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 0;
	counter-reset: diff;
}

/* ── Row ── */

.diff-row {
	display: grid;
	grid-template-columns: minmax(8rem, 11rem) 1fr;
	gap: clamp(1.5rem, 1rem + 2vw, 3.5rem);
	align-items: baseline;
	padding: clamp(2rem, 1.5rem + 1.5vw, 3rem) 0;
	border-top: 1px solid var(--color-divider-warm);
	transition: background-color 240ms var(--ease-spring);
}

.diff-row:last-child {
	border-bottom: 1px solid var(--color-divider-warm);
}

.diff-row:hover {
	background-color: rgba(16, 158, 145, 0.035);
}

.diff-row__numeral {
	font-family: var(--font-body);
	font-size: clamp(3.25rem, 2.5rem + 2.5vw, 5rem);
	font-weight: 800;
	line-height: 1;
	letter-spacing: -0.04em;
	color: var(--color-brand);
	font-variant-numeric: tabular-nums;
	font-feature-settings: "tnum" 1;
	align-self: start;
	opacity: 0.95;
	transition: transform 300ms var(--ease-spring), opacity 300ms var(--ease-spring);
}

.diff-row:hover .diff-row__numeral {
	transform: translateX(-2px);
	opacity: 1;
}

.diff-row__content {
	display: flex;
	flex-direction: column;
	gap: var(--space-md);
	max-width: 58ch;
}

.diff-row__title {
	font-family: var(--font-body);
	font-size: clamp(1.375rem, 1.15rem + 0.75vw, 1.75rem);
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: -0.02em;
	color: var(--color-text);
	margin: 0;
}

.diff-row__body {
	font-family: var(--font-body);
	font-size: 1.0625rem;
	font-weight: 400;
	line-height: 1.65;
	color: var(--color-text-muted);
	margin: 0;
}

/* ──────────────────────────────────────────────────────────────────────────
   CTA — page-closing climax
   ────────────────────────────────────────────────────────────────────────── */

.about-cta {
	position: relative;
	padding: var(--space-section) var(--space-xl);
	background:
		radial-gradient(
			ellipse 60% 70% at 15% 20%,
			rgba(16, 158, 145, 0.16) 0%,
			transparent 60%
		),
		radial-gradient(
			ellipse 55% 65% at 90% 85%,
			rgba(217, 119, 87, 0.10) 0%,
			transparent 60%
		),
		var(--color-surface-alt);
	border-top: 1px solid rgba(20, 20, 19, 0.10);
	overflow: hidden;
	isolation: isolate;
}

.about-cta__inner {
	max-width: 760px;
	margin: 0 auto;
	text-align: center;
}

.about-cta__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	font-size: var(--text-small);
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--color-brand);
	margin-bottom: var(--space-lg);
}

.about-cta__eyebrow::before {
	content: "";
	display: inline-block;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background-color: var(--color-brand);
	box-shadow: 0 0 0 4px rgba(16, 158, 145, 0.14);
}

.about-cta__title {
	font-family: var(--font-body);
	font-size: clamp(2.25rem, 1.75rem + 2vw, 3.25rem);
	font-weight: 800;
	line-height: 1.1;
	letter-spacing: -0.03em;
	color: var(--color-text);
	margin: 0 0 var(--space-lg);
	text-wrap: balance;
}

.about-cta__body {
	font-family: var(--font-body);
	font-size: clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem);
	font-weight: 400;
	color: var(--color-text);
	line-height: 1.65;
	margin: 0 auto var(--space-2xl);
	max-width: 560px;
	opacity: 0.82;
}

.about-cta__button {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 0.65rem;
	padding: 1rem 2.5rem;
	background-color: var(--color-brand);
	color: var(--color-white);
	font-family: var(--font-body);
	font-size: 1.125rem;
	font-weight: 700;
	letter-spacing: -0.005em;
	text-decoration: none;
	border-radius: var(--radius-pill);
	transition:
		filter 180ms var(--ease-spring),
		transform 180ms var(--ease-spring),
		box-shadow 180ms var(--ease-spring);
	box-shadow: 0 6px 18px rgba(16, 158, 145, 0.28);
}

.about-cta__button:hover,
.about-cta__button:focus-visible {
	filter: brightness(1.08);
	transform: translateY(-2px) scale(1.02);
	box-shadow: 0 12px 28px rgba(16, 158, 145, 0.38);
	outline: none;
}

.about-cta__button:focus-visible {
	outline: 2px solid var(--color-text);
	outline-offset: 3px;
}

.about-cta__button svg {
	transition: transform 220ms var(--ease-spring);
}

.about-cta__button:hover svg {
	transform: translateX(3px);
}

/* Typing dots — chat motif echo. Decorative only. */
.about-cta__typing {
	display: inline-flex;
	align-items: center;
	gap: 3px;
	margin-right: 0.15rem;
}

.about-cta__typing-dot {
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background-color: var(--color-white);
	opacity: 0.55;
}

@media (prefers-reduced-motion: no-preference) {
	.about-cta__typing-dot {
		animation: typing-pulse 1.4s cubic-bezier(0.4, 0, 0.2, 1) infinite;
	}
	.about-cta__typing-dot:nth-child(2) { animation-delay: 160ms; }
	.about-cta__typing-dot:nth-child(3) { animation-delay: 320ms; }

	@keyframes typing-pulse {
		0%, 60%, 100% { opacity: 0.35; transform: translateY(0); }
		30% { opacity: 1; transform: translateY(-2px); }
	}
}

/* ──────────────────────────────────────────────────────────────────────────
   Entrance animation (respects reduced motion) — varied depths per tier
   ────────────────────────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: no-preference) {
	.about-hero__eyebrow,
	.about-hero__title,
	.about-hero__lede,
	.diff-row,
	.about-cta__inner > * {
		opacity: 0;
		animation: about-fade-up 680ms var(--ease-spring) forwards;
	}

	.about-hero__eyebrow { transform: translateY(6px);  animation-delay: 60ms; }
	.about-hero__title   { transform: translateY(18px); animation-delay: 160ms; }
	.about-hero__lede    { transform: translateY(10px); animation-delay: 300ms; }

	/* Row-wise pairing — rows 1+2 together, then 3+4. */
	.diff-row:nth-child(1) { transform: translateY(14px); animation-delay: 100ms; }
	.diff-row:nth-child(2) { transform: translateY(14px); animation-delay: 140ms; }
	.diff-row:nth-child(3) { transform: translateY(14px); animation-delay: 240ms; }
	.diff-row:nth-child(4) { transform: translateY(14px); animation-delay: 280ms; }

	.about-cta__inner > *:nth-child(1) { transform: translateY(6px);  animation-delay: 100ms; }
	.about-cta__inner > *:nth-child(2) { transform: translateY(18px); animation-delay: 200ms; }
	.about-cta__inner > *:nth-child(3) { transform: translateY(10px); animation-delay: 300ms; }
	.about-cta__inner > *:nth-child(4) { transform: translateY(14px); animation-delay: 400ms; }

	@keyframes about-fade-up {
		to {
			opacity: 1;
			transform: translateY(0);
		}
	}
}

/* ──────────────────────────────────────────────────────────────────────────
   Mobile
   ────────────────────────────────────────────────────────────────────────── */

@media (max-width: 720px) {
	.about-hero {
		padding: clamp(3.5rem, 2rem + 6vw, 5rem) var(--space-md) var(--space-2xl);
	}

	.about-hero__title {
		max-width: none;
	}

	.about-differentiators {
		padding: var(--space-2xl) var(--space-md) var(--space-3xl);
	}

	.diff-row {
		grid-template-columns: 1fr;
		gap: var(--space-sm);
		padding: var(--space-xl) 0;
	}

	.diff-row__numeral {
		font-size: 2.75rem;
	}

	.about-cta {
		padding: var(--space-3xl) var(--space-md);
	}
}