/**
 * Divi Torque — About page.
 *
 * Simple and self-contained: a narrow story column, three principle cards, and
 * a proof strip. Leans on global.css primitives (dt-wrap, tokens); this file
 * only adds the About-specific layout. Monochrome UI (invariant #7).
 */

/* ── Editor intro (optional) ──────────────────────────────────────── */
.dt-about__intro {
	max-width: 68ch;
	margin-inline: auto;
	color: var(--color-text-muted);
	font-size: var(--text-lg);
	line-height: var(--lh-relaxed);
}

/* ── Story ────────────────────────────────────────────────────────── */
.dt-about-story { padding: clamp(40px, 6vw, 72px) 0 clamp(24px, 4vw, 40px); }
.dt-about__col {
	max-width: 62ch;
	margin-inline: auto;
	padding-inline: var(--gutter);
}
.dt-about-story__title {
	font-family: var(--font-display);
	font-size: var(--text-3xl);
	line-height: var(--lh-heading);
	letter-spacing: -0.02em;
	margin: 0 0 24px;
}
.dt-about-story__col p,
.dt-about__col p {
	color: var(--color-text-muted);
	font-size: var(--text-lg);
	line-height: var(--lh-relaxed);
	margin: 0 0 18px;
}
.dt-about__col strong { color: var(--color-text); font-weight: var(--fw-semi); }

/* ── Values ───────────────────────────────────────────────────────── */
.dt-about-values {
	padding: var(--section-y) 0;
	background: var(--color-surface-2);
	border-top: 1px solid var(--color-border);
	border-bottom: 1px solid var(--color-border);
}
.dt-about-values__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: clamp(16px, 2.4vw, 26px);
}
@media (max-width: 760px) { .dt-about-values__grid { grid-template-columns: 1fr; } }
.dt-about-values__card {
	background: var(--color-bg);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-xl);
	padding: clamp(22px, 2.8vw, 30px);
}
.dt-about-values__name {
	font-size: var(--text-lg);
	font-weight: var(--fw-semi);
	letter-spacing: -0.01em;
	margin: 0 0 10px;
}
.dt-about-values__text {
	color: var(--color-text-muted);
	font-size: var(--text-base);
	line-height: var(--lh-body);
	margin: 0;
}

/* ── Proof strip ──────────────────────────────────────────────────── */
.dt-about-stats { padding: clamp(36px, 5vw, 56px) 0; }
.dt-about-stats__row {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: clamp(24px, 6vw, 72px);
	text-align: center;
}
.dt-about-stats__item {
	display: flex;
	flex-direction: column;
	gap: 4px;
	font-variant-numeric: tabular-nums;
}
.dt-about-stats__item b {
	font-family: var(--font-display);
	font-size: var(--text-2xl);
	letter-spacing: -0.02em;
}
.dt-about-stats__item span { font-size: var(--text-sm); color: var(--color-text-muted); }