/* =========================================================================
   v175 · THE AGENTS page sections — hero meta strip, thesis manifesto,
   infrastructure, three-tier personas, personality dial, channel stack,
   voice + phone, math of replacement, closing manifesto, faces process.
   Ported from the prototype; palette/font names aliased to the theme tokens
   (same approach as the calculators in v104-pages.css).
   ========================================================================= */

.agents-hero-meta-band,
.agents-thesis-section,
.agents-infra-section,
.agents-personas-section,
.agents-dial-section,
.agents-channels-section,
.agents-voicephone-section,
.agents-math-section,
.agents-close-section,
.agents-faces-process {
	--white: var(--text);
	--white-soft: var(--text-secondary);
	--white-faint: var(--text-muted);
	--gold-soft: rgba(200, 169, 107, 0.55);
	--font-serif: var(--font-display);
}

/* ---- Hero actions + meta strip (band directly under the page hero) ------ */
.agents-hero-meta-band {
	background: var(--navy);
	padding: 0 0 72px;
}
.agents-hero-meta-band .agents-hero-actions { display: flex; gap: 16px; flex-wrap: wrap; }
.agents-hero-meta {
	display: flex;
	gap: 32px;
	margin-top: 56px;
	padding-top: 32px;
	border-top: 1px solid var(--line);
	flex-wrap: wrap;
}
.agents-hero-meta-item {
	display: flex;
	flex-direction: column;
	gap: 4px;
}
.agents-hero-meta-num {
	font-family: var(--font-serif);
	font-size: 32px;
	color: var(--gold);
	font-weight: 400;
	letter-spacing: -0.01em;
}
.agents-hero-meta-label {
	font-family: var(--font-mono);
	font-size: 11px;
	letter-spacing: 0.15em;
	color: var(--white-soft);
	text-transform: uppercase;
}

/* ---- Thesis manifesto ---------------------------------------------------- */
.agents-thesis-section {
	padding: 120px 0;
	background: var(--navy);
	position: relative;
	overflow: hidden;
}
.agents-thesis-section::before {
	content: '';
	position: absolute;
	top: -40%;
	right: -10%;
	width: 60%;
	height: 120%;
	background: radial-gradient(circle, rgba(200, 169, 107, 0.06) 0%, transparent 60%);
	pointer-events: none;
}
.agents-thesis-section .container { position: relative; max-width: 1180px; }
.agents-thesis-head { max-width: 860px; margin-bottom: 72px; }
.agents-thesis-head h2 {
	font-family: var(--font-serif);
	font-weight: 300;
	font-size: clamp(38px, 4.6vw, 66px);
	line-height: 1.04;
	letter-spacing: -0.02em;
	color: var(--white);
	margin-bottom: 28px;
}
.agents-thesis-head h2 em { font-style: italic; color: var(--gold); font-weight: 400; }
.agents-thesis-head p {
	font-family: var(--font-body);
	font-weight: 300;
	font-size: clamp(17px, 1.35vw, 21px);
	line-height: 1.68;
	color: var(--white-soft);
	letter-spacing: 0.005em;
}
.agents-thesis-head p strong { color: var(--white); font-weight: 500; }
.agents-thesis-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 1px;
	background: var(--line);
	border: 1px solid var(--line);
	margin-bottom: 80px;
}
.agents-thesis-card {
	background: var(--navy);
	padding: 48px 44px;
	position: relative;
	transition: background 0.4s;
}
.agents-thesis-card:hover { background: var(--navy-2); }
.agents-thesis-card-num {
	font-family: var(--font-mono);
	font-size: 12px;
	letter-spacing: 0.2em;
	color: var(--gold-soft);
	margin-bottom: 22px;
}
.agents-thesis-card h3 {
	font-family: var(--font-serif);
	font-weight: 400;
	font-size: 30px;
	line-height: 1.15;
	letter-spacing: -0.01em;
	color: var(--white);
	margin-bottom: 18px;
}
.agents-thesis-card h3 em { font-style: italic; color: var(--gold); }
.agents-thesis-card p {
	font-family: var(--font-body);
	font-weight: 300;
	font-size: 15.5px;
	line-height: 1.68;
	color: var(--white-soft);
}
.agents-thesis-card p strong { color: var(--white); font-weight: 500; }
.agents-thesis-card .agents-thesis-stat {
	display: block;
	font-family: var(--font-serif);
	font-size: 19px;
	font-style: italic;
	color: var(--gold);
	margin-top: 18px;
	letter-spacing: 0.01em;
}
.agents-thesis-kicker {
	border-top: 1px solid var(--line-gold);
	padding-top: 56px;
	max-width: 920px;
}
.agents-thesis-kicker h3 {
	font-family: var(--font-serif);
	font-weight: 300;
	font-size: clamp(28px, 3.2vw, 44px);
	line-height: 1.12;
	letter-spacing: -0.015em;
	color: var(--white);
	margin-bottom: 24px;
}
.agents-thesis-kicker h3 em { font-style: italic; color: var(--gold); font-weight: 400; }
.agents-thesis-kicker p {
	font-family: var(--font-body);
	font-weight: 300;
	font-size: 17px;
	line-height: 1.7;
	color: var(--white-soft);
	margin-bottom: 18px;
}
.agents-thesis-kicker p:last-of-type { margin-bottom: 0; }
.agents-thesis-kicker p strong { color: var(--white); font-weight: 500; }

/* ---- Infrastructure (engine stats + agency-layer divider) ---------------- */
.agents-infra-section {
	padding: 110px 0;
	background: var(--navy);
	border-bottom: 1px solid var(--line);
	position: relative;
	overflow: hidden;
}
.agents-infra-section::before {
	content: '';
	position: absolute;
	top: 0;
	right: 0;
	width: 60%;
	height: 100%;
	background: radial-gradient(ellipse at 80% 30%, rgba(200, 169, 107, 0.06) 0%, transparent 60%);
	pointer-events: none;
}
.agents-infra-section .container { max-width: 1140px; position: relative; }
.agents-infra-header {
	display: grid;
	grid-template-columns: 1.3fr 1fr;
	gap: 56px;
	align-items: end;
	margin-bottom: 56px;
}
.agents-infra-lede {
	font-size: 18px;
	line-height: 1.7;
	color: var(--white-soft);
	margin: 0;
	align-self: end;
	padding-bottom: 6px;
}
.agents-infra-lede strong { color: var(--white); }
.agents-infra-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 18px;
	margin-bottom: 48px;
}
.agents-infra-stat {
	background: var(--navy-2);
	border: 1px solid var(--line);
	border-radius: 6px;
	padding: 32px 26px;
	transition: border-color 0.2s ease, transform 0.2s ease;
}
.agents-infra-stat:hover {
	border-color: rgba(200, 169, 107, 0.4);
	transform: translateY(-2px);
}
.agents-infra-stat-num {
	font-family: var(--font-serif);
	font-size: 42px;
	line-height: 1.05;
	color: var(--gold);
	font-weight: 400;
	letter-spacing: -0.015em;
	margin-bottom: 8px;
}
.agents-infra-stat-num sub {
	font-size: 16px;
	color: var(--gold);
	font-family: var(--font-mono);
	letter-spacing: 0.05em;
	vertical-align: baseline;
	margin-left: 2px;
}
.agents-infra-stat-label {
	font-family: var(--font-mono);
	font-size: 10px;
	letter-spacing: 0.15em;
	color: var(--white-soft);
	text-transform: uppercase;
	margin-bottom: 14px;
	font-weight: 500;
	padding-bottom: 12px;
	border-bottom: 1px solid var(--line);
}
.agents-infra-stat-detail {
	font-size: 13px;
	color: var(--white-soft);
	line-height: 1.55;
	margin: 0;
}
.agents-infra-divider {
	background: linear-gradient(180deg, rgba(200, 169, 107, 0.05) 0%, transparent 100%);
	border-left: 2px solid var(--gold);
	border-radius: 0 4px 4px 0;
	padding: 32px 36px;
}
.agents-infra-divider h3 {
	font-family: var(--font-serif);
	font-size: 24px;
	line-height: 1.3;
	color: var(--white);
	font-weight: 400;
	letter-spacing: -0.01em;
	margin: 0 0 14px;
}
.agents-infra-divider h3 em { font-style: italic; color: var(--gold); }
.agents-infra-divider p {
	font-size: 15px;
	color: var(--white-soft);
	line-height: 1.7;
	margin: 0;
}
.agents-infra-divider p strong { color: var(--white); }
.agents-infra-divider-meta {
	margin-top: 18px;
	padding-top: 14px;
	border-top: 1px solid var(--line);
	font-family: var(--font-mono);
	font-size: 11px;
	letter-spacing: 0.14em;
	color: var(--gold);
	text-transform: uppercase;
}

/* ---- Three-tier personas -------------------------------------------------- */
.agents-personas-section {
	padding: 68px 0;
	background: var(--navy-2);
	border-bottom: 1px solid var(--line);
}
.agents-personas-section .container { max-width: 1200px; }
.agents-personas-intro {
	font-size: 18px;
	line-height: 1.7;
	color: var(--white-soft);
	max-width: 780px;
	margin: 0 0 56px;
}
.agents-personas-intro strong { color: var(--white); }
/* Prototype declares a stale 4-column grid for its 3 cards (legacy of the old
   7-persona set); three equal columns is the intended layout for three tiers. */
.agents-personas-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 16px;
}
.agents-persona-card {
	background: var(--navy);
	border: 1px solid var(--line);
	border-radius: 4px;
	padding: 28px 24px;
	display: flex;
	flex-direction: column;
	gap: 14px;
	transition: border-color 0.2s ease, transform 0.2s ease;
	min-height: 320px;
}
.agents-persona-card:hover {
	border-color: rgba(200, 169, 107, 0.4);
	transform: translateY(-3px);
}
.agents-persona-num {
	font-family: var(--font-mono);
	font-size: 11px;
	letter-spacing: 0.18em;
	color: var(--gold);
	font-weight: 500;
}
.agents-persona-name {
	font-family: var(--font-serif);
	font-size: 26px;
	line-height: 1.2;
	color: var(--white);
	font-weight: 400;
	letter-spacing: -0.01em;
	margin: 0;
}
.agents-persona-job {
	font-size: 14px;
	color: var(--white-soft);
	line-height: 1.6;
	margin: 0;
	flex: 1;
}
.agents-persona-tonality {
	font-family: var(--font-mono);
	font-size: 10px;
	letter-spacing: 0.12em;
	color: var(--white-soft);
	text-transform: uppercase;
	padding: 4px 8px;
	background: rgba(200, 169, 107, 0.07);
	border-radius: 3px;
	align-self: flex-start;
}
.agents-persona-replaces {
	padding-top: 14px;
	border-top: 1px solid var(--line);
	display: flex;
	flex-direction: column;
	gap: 3px;
}
.agents-persona-replaces-label {
	font-family: var(--font-mono);
	font-size: 9px;
	letter-spacing: 0.2em;
	color: var(--gold);
	text-transform: uppercase;
}
.agents-persona-replaces-value {
	font-size: 13px;
	color: var(--white);
	line-height: 1.4;
}

/* ---- Personality dial (interactive) --------------------------------------- */
.agents-dial-section {
	padding: 56px 0;
	background: var(--navy);
	border-bottom: 1px solid var(--line);
	position: relative;
}
.agents-dial-section::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 1px;
	background: linear-gradient(90deg, transparent 0%, var(--line-gold) 50%, transparent 100%);
	opacity: 0.4;
}
.agents-dial-section .container { max-width: 1080px; }
.agents-dial-intro {
	font-size: 18px;
	line-height: 1.7;
	color: var(--white-soft);
	max-width: 820px;
	margin: 0 0 56px;
}
.agents-dial-intro strong { color: var(--white); }
.agents-dial-frame {
	background: var(--navy-2);
	border: 1px solid var(--line);
	border-radius: 6px;
	padding: 48px;
	position: relative;
}
.agents-dial-prospect {
	background: rgba(255, 255, 255, 0.025);
	border: 1px solid var(--line);
	border-radius: 4px;
	padding: 22px 26px;
	margin-bottom: 32px;
}
.agents-dial-prospect-label {
	font-family: var(--font-mono);
	font-size: 10px;
	letter-spacing: 0.18em;
	color: var(--gold);
	text-transform: uppercase;
	margin-bottom: 10px;
	font-weight: 500;
}
.agents-dial-prospect-text {
	font-size: 17px;
	color: var(--white);
	line-height: 1.55;
	font-style: italic;
	margin: 0;
}
.agents-dial-control {
	margin: 36px 0 28px;
}
.agents-dial-control-label {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 14px;
	font-family: var(--font-mono);
	font-size: 11px;
	letter-spacing: 0.15em;
	color: var(--white-soft);
	text-transform: uppercase;
}
.agents-dial-control-label .current {
	color: var(--gold);
	font-weight: 500;
}
.agents-dial-slider {
	-webkit-appearance: none;
	appearance: none;
	width: 100%;
	height: 6px;
	background: linear-gradient(90deg,
		rgba(80, 180, 120, 0.4) 0%,
		rgba(200, 169, 107, 0.4) 50%,
		rgba(220, 100, 80, 0.5) 100%);
	border-radius: 3px;
	outline: none;
	margin: 0;
	cursor: pointer;
}
.agents-dial-slider::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	width: 22px;
	height: 22px;
	background: var(--gold);
	border-radius: 50%;
	border: 3px solid var(--navy);
	cursor: grab;
	box-shadow: 0 0 0 1px var(--gold);
	transition: transform 0.15s ease;
}
.agents-dial-slider::-webkit-slider-thumb:active {
	cursor: grabbing;
	transform: scale(1.15);
}
.agents-dial-slider::-moz-range-thumb {
	width: 22px;
	height: 22px;
	background: var(--gold);
	border-radius: 50%;
	border: 3px solid var(--navy);
	cursor: grab;
	box-shadow: 0 0 0 1px var(--gold);
}
.agents-dial-stops {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 8px;
	margin-top: 14px;
	font-family: var(--font-mono);
	font-size: 10px;
	letter-spacing: 0.12em;
	color: var(--white-soft);
	text-transform: uppercase;
}
.agents-dial-stop {
	text-align: center;
	padding: 4px 2px;
	cursor: pointer;
	transition: color 0.2s ease;
	border-radius: 3px;
}
.agents-dial-stop:hover { color: var(--white); }
.agents-dial-stop.active {
	color: var(--gold);
	background: rgba(200, 169, 107, 0.08);
}
.agents-dial-response {
	background: linear-gradient(180deg, rgba(200, 169, 107, 0.06) 0%, transparent 100%);
	border-left: 2px solid var(--gold);
	border-radius: 0 4px 4px 0;
	padding: 28px 32px;
	margin-top: 32px;
	min-height: 180px;
	transition: opacity 0.25s ease;
}
.agents-dial-response.fading { opacity: 0.25; }
.agents-dial-response-label {
	font-family: var(--font-mono);
	font-size: 10px;
	letter-spacing: 0.18em;
	color: var(--gold);
	text-transform: uppercase;
	margin-bottom: 12px;
	font-weight: 500;
}
.agents-dial-response-text {
	font-size: 16px;
	color: var(--white);
	line-height: 1.65;
	margin: 0;
	font-family: var(--font-serif);
}
.agents-dial-footnote {
	font-size: 13px;
	color: var(--white-soft);
	margin: 28px 0 0;
	font-style: italic;
	line-height: 1.5;
}

/* ---- Channel stack --------------------------------------------------------- */
.agents-channels-section {
	padding: 68px 0;
	background: var(--navy-2);
	border-bottom: 1px solid var(--line);
}
.agents-channels-section .container { max-width: 1180px; }
.agents-channels-intro {
	font-size: 18px;
	line-height: 1.7;
	color: var(--white-soft);
	max-width: 820px;
	margin: 0 0 56px;
}
.agents-channels-intro strong { color: var(--white); }
.agents-channels-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 16px;
}
.agents-channel-card {
	background: var(--navy);
	border: 1px solid var(--line);
	border-radius: 4px;
	padding: 24px 20px;
	display: flex;
	flex-direction: column;
	gap: 10px;
	transition: border-color 0.2s ease;
}
.agents-channel-card:hover { border-color: rgba(200, 169, 107, 0.35); }
.agents-channel-icon {
	display: block;
	width: 38px;
	height: 38px;
	color: var(--gold);
	margin-bottom: 18px;
	opacity: 0.85;
	transition: opacity 0.25s ease, transform 0.25s ease;
}
.agents-channel-card:hover .agents-channel-icon {
	opacity: 1;
	transform: translateY(-2px);
}
.agents-channel-num {
	font-family: var(--font-mono);
	font-size: 10px;
	letter-spacing: 0.18em;
	color: var(--gold);
	font-weight: 500;
}
.agents-channel-name {
	font-family: var(--font-serif);
	font-size: 20px;
	color: var(--white);
	font-weight: 400;
	letter-spacing: -0.01em;
	margin: 0;
}
.agents-channel-desc {
	font-size: 13px;
	color: var(--white-soft);
	line-height: 1.55;
	margin: 0;
}

/* ---- Voice + phone (flow + scenarios) -------------------------------------- */
.agents-voicephone-section {
	padding: 56px 0;
	background: var(--navy);
	border-bottom: 1px solid var(--line);
	position: relative;
	overflow: hidden;
}
.agents-voicephone-section::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background:
		radial-gradient(ellipse at 80% 20%, rgba(200, 169, 107, 0.07) 0%, transparent 55%),
		radial-gradient(ellipse at 20% 80%, rgba(200, 169, 107, 0.04) 0%, transparent 50%);
	pointer-events: none;
}
.agents-voicephone-section .container { max-width: 1140px; position: relative; }
.agents-voicephone-intro {
	font-size: 19px;
	line-height: 1.7;
	color: var(--white-soft);
	max-width: 880px;
	margin: 0 0 56px;
}
.agents-voicephone-intro strong { color: var(--white); }
.agents-voicephone-anti {
	display: inline-block;
	font-family: var(--font-mono);
	font-size: 11px;
	letter-spacing: 0.18em;
	color: var(--gold);
	background: rgba(200, 169, 107, 0.08);
	border: 1px solid rgba(200, 169, 107, 0.25);
	padding: 6px 14px;
	border-radius: 3px;
	text-transform: uppercase;
	margin-bottom: 28px;
	font-weight: 500;
}
.agents-flow {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 0;
	margin: 0 0 64px;
	border: 1px solid var(--line);
	border-radius: 6px;
	background: var(--navy-2);
	overflow: hidden;
}
.agents-flow-step {
	padding: 36px 24px;
	border-right: 1px solid var(--line);
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 10px;
	transition: background 0.2s ease;
}
.agents-flow-step:last-child { border-right: none; }
.agents-flow-step:hover { background: rgba(200, 169, 107, 0.04); }
.agents-flow-step::after {
	content: '→';
	position: absolute;
	right: -12px;
	top: 50%;
	transform: translateY(-50%);
	color: var(--gold);
	font-size: 22px;
	background: var(--navy);
	padding: 4px 0;
	z-index: 2;
}
.agents-flow-step:last-child::after { display: none; }
.agents-flow-step-num {
	font-family: var(--font-mono);
	font-size: 10px;
	letter-spacing: 0.18em;
	color: var(--gold);
	text-transform: uppercase;
	font-weight: 500;
}
.agents-flow-step-name {
	font-family: var(--font-serif);
	font-size: 19px;
	color: var(--white);
	font-weight: 400;
	letter-spacing: -0.01em;
	margin: 0;
}
.agents-flow-step-desc {
	font-size: 12px;
	color: var(--white-soft);
	line-height: 1.5;
	margin: 0;
}
.agents-flow-brain {
	text-align: center;
	font-family: var(--font-mono);
	font-size: 11px;
	letter-spacing: 0.18em;
	color: var(--gold);
	text-transform: uppercase;
	margin: -40px 0 56px;
	font-weight: 500;
}
.agents-flow-brain-rule {
	display: inline-block;
	padding: 8px 18px;
	background: var(--navy-2);
	border: 1px solid rgba(200, 169, 107, 0.3);
	border-radius: 3px;
}
.agents-scenarios-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 20px;
}
.agents-scenario-card {
	background: var(--navy-2);
	border: 1px solid var(--line);
	border-radius: 4px;
	padding: 28px 30px;
	transition: border-color 0.2s ease;
}
.agents-scenario-card:hover { border-color: rgba(200, 169, 107, 0.35); }
.agents-scenario-time {
	font-family: var(--font-mono);
	font-size: 10px;
	letter-spacing: 0.18em;
	color: var(--gold);
	text-transform: uppercase;
	margin-bottom: 12px;
	font-weight: 500;
}
.agents-scenario-title {
	font-family: var(--font-serif);
	font-size: 22px;
	line-height: 1.2;
	color: var(--white);
	font-weight: 400;
	letter-spacing: -0.01em;
	margin: 0 0 14px;
}
.agents-scenario-title em { font-style: italic; color: var(--gold); }
.agents-scenario-body {
	font-size: 14px;
	color: var(--white-soft);
	line-height: 1.65;
	margin: 0;
}
.agents-scenario-body strong { color: var(--white); }

/* ---- Math of replacement ---------------------------------------------------- */
.agents-math-section {
	padding: 56px 0;
	background: var(--navy);
	border-bottom: 1px solid var(--line);
}
.agents-math-section .container { max-width: 1080px; }
.agents-math-intro {
	font-size: 18px;
	line-height: 1.7;
	color: var(--white-soft);
	max-width: 820px;
	margin: 0 0 56px;
}
.agents-math-intro strong { color: var(--white); }
.agents-math-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 24px;
}
.agents-math-side {
	padding: 36px 32px;
	border-radius: 6px;
	border: 1px solid var(--line);
}
.agents-math-side-human {
	background: rgba(220, 100, 80, 0.03);
	border-color: rgba(220, 100, 80, 0.2);
}
.agents-math-side-agent {
	background: rgba(80, 180, 120, 0.04);
	border-color: rgba(80, 180, 120, 0.25);
}
.agents-math-side-label {
	font-family: var(--font-mono);
	font-size: 11px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	margin-bottom: 14px;
	font-weight: 500;
}
.agents-math-side-human .agents-math-side-label { color: #d77065; }
.agents-math-side-agent .agents-math-side-label { color: #7bc299; }
.agents-math-side-title {
	font-family: var(--font-serif);
	font-size: 28px;
	color: var(--white);
	font-weight: 400;
	letter-spacing: -0.01em;
	margin: 0 0 8px;
}
.agents-math-side-cost {
	font-family: var(--font-serif);
	font-size: 22px;
	color: var(--gold);
	font-weight: 400;
	margin: 0 0 24px;
	padding-bottom: 18px;
	border-bottom: 1px solid var(--line);
}
.agents-math-side ul {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 12px;
}
.agents-math-side li {
	font-size: 14px;
	color: var(--white-soft);
	line-height: 1.55;
	padding-left: 18px;
	position: relative;
}
.agents-math-side li::before {
	content: '·';
	position: absolute;
	left: 6px;
	color: var(--gold);
	font-weight: 700;
}
.agents-math-multiplier {
	margin-top: 40px;
	padding: 28px 32px;
	background: linear-gradient(180deg, rgba(200, 169, 107, 0.08) 0%, transparent 100%);
	border-left: 2px solid var(--gold);
	border-radius: 0 4px 4px 0;
}
.agents-math-multiplier h3 {
	font-family: var(--font-serif);
	font-size: 26px;
	color: var(--white);
	font-weight: 400;
	letter-spacing: -0.01em;
	margin: 0 0 10px;
}
.agents-math-multiplier h3 em { font-style: italic; color: var(--gold); }
.agents-math-multiplier p {
	font-size: 15px;
	color: var(--white-soft);
	line-height: 1.65;
	margin: 0;
}

/* ---- "While you sleep" close ------------------------------------------------ */
.agents-close-section {
	padding: 92px 0 100px;
	background: var(--navy-2);
	border-bottom: 1px solid var(--line);
	position: relative;
	overflow: hidden;
}
.agents-close-section::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background:
		radial-gradient(ellipse at 20% 80%, rgba(200, 169, 107, 0.08) 0%, transparent 50%),
		radial-gradient(ellipse at 80% 20%, rgba(200, 169, 107, 0.05) 0%, transparent 50%);
	pointer-events: none;
}
.agents-close-section .container { max-width: 880px; position: relative; }
.agents-close-h2 {
	font-family: var(--font-serif);
	font-size: clamp(36px, 4.5vw, 56px);
	line-height: 1.12;
	letter-spacing: -0.02em;
	color: var(--white);
	font-weight: 400;
	margin: 28px 0 36px;
}
.agents-close-h2 em {
	font-style: italic;
	color: var(--gold);
}
.agents-close-body {
	font-size: 18px;
	line-height: 1.75;
	color: var(--white-soft);
	margin: 0 0 22px;
}
.agents-close-body strong { color: var(--white); }

/* ---- "How your avatar gets built" process strip (in the faces section) ------ */
.agents-faces-process {
	background: linear-gradient(180deg, rgba(200, 169, 107, 0.05) 0%, transparent 100%);
	border-left: 2px solid var(--gold);
	border-radius: 0 4px 4px 0;
	padding: 36px 40px;
	max-width: 980px;
	margin-top: 48px;
}
.agents-faces-process-label {
	font-family: var(--font-mono);
	font-size: 11px;
	letter-spacing: 0.18em;
	color: var(--gold);
	text-transform: uppercase;
	margin-bottom: 16px;
	font-weight: 500;
}
.agents-faces-process h3 {
	font-family: var(--font-serif);
	font-size: 28px;
	color: var(--white);
	font-weight: 400;
	letter-spacing: -0.01em;
	margin: 0 0 24px;
}
.agents-faces-process h3 em {
	font-style: italic;
	color: var(--gold);
}
.agents-faces-process-steps {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 24px;
}
.agents-faces-process-step {
	display: flex;
	flex-direction: column;
	gap: 6px;
}
.agents-faces-process-step-num {
	font-family: var(--font-mono);
	font-size: 10px;
	letter-spacing: 0.18em;
	color: var(--gold);
	text-transform: uppercase;
	font-weight: 500;
}
.agents-faces-process-step-title {
	font-family: var(--font-serif);
	font-size: 17px;
	color: var(--white);
	font-weight: 400;
	margin: 0;
}
.agents-faces-process-step-body {
	font-size: 13px;
	color: var(--white-soft);
	line-height: 1.55;
	margin: 0;
}

/* ---- Responsive --------------------------------------------------------------- */
@media (max-width: 1100px) {
	.agents-personas-grid { grid-template-columns: repeat(2, 1fr); }
	.agents-channels-grid { grid-template-columns: repeat(2, 1fr); }
	.agents-infra-header { grid-template-columns: 1fr; gap: 24px; }
	.agents-infra-grid { grid-template-columns: repeat(2, 1fr); }
	.agents-faces-process-steps { grid-template-columns: repeat(2, 1fr); }
	.agents-flow { grid-template-columns: 1fr; }
	.agents-flow-step {
		border-right: none;
		border-bottom: 1px solid var(--line);
	}
	.agents-flow-step:last-child { border-bottom: none; }
	.agents-flow-step::after {
		content: '↓';
		right: 50%;
		top: auto;
		bottom: -12px;
		transform: translateX(50%);
		padding: 0 6px;
	}
}
@media (max-width: 860px) {
	.agents-thesis-section { padding: 80px 0; }
	.agents-thesis-grid { grid-template-columns: 1fr; }
	.agents-thesis-card { padding: 40px 28px; }
	.agents-thesis-head { margin-bottom: 56px; }
}
@media (max-width: 760px) {
	.agents-hero-meta-band { padding-bottom: 56px; }
	.agents-hero-meta { gap: 20px; }
	.agents-hero-meta-num { font-size: 26px; }
	.agents-personas-section,
	.agents-channels-section,
	.agents-math-section { padding: 64px 0; }
	.agents-dial-section { padding: 72px 0; }
	.agents-close-section { padding: 60px 0 64px; }
	.agents-infra-section { padding: 72px 0; }
	.agents-voicephone-section { padding: 72px 0; }
	.agents-personas-grid {
		grid-template-columns: 1fr;
		gap: 12px;
	}
	.agents-persona-card { min-height: 0; padding: 24px 20px; }
	.agents-channels-grid {
		grid-template-columns: 1fr;
		gap: 12px;
	}
	.agents-channel-icon { width: 32px; height: 32px; margin-bottom: 14px; }
	.agents-dial-frame { padding: 28px 22px; }
	.agents-dial-stops {
		font-size: 9px;
		gap: 4px;
	}
	.agents-dial-response { padding: 22px 20px; }
	.agents-math-grid { grid-template-columns: 1fr; }
	.agents-math-side { padding: 26px 22px; }
	.agents-math-multiplier { padding: 22px 20px; }
	.agents-infra-grid { grid-template-columns: 1fr; }
	.agents-infra-stat { padding: 24px 22px; }
	.agents-infra-stat-num { font-size: 36px; }
	.agents-infra-divider { padding: 22px 22px; }
	.agents-infra-divider h3 { font-size: 20px; }
	.agents-scenarios-grid { grid-template-columns: 1fr; }
	.agents-faces-process { padding: 24px 22px; }
	.agents-faces-process-steps {
		grid-template-columns: 1fr;
		gap: 18px;
	}
}