/* =========================================================================
   Studio Máté — v104-pages.css
   v104 page-rework section blocks (home Sofia hero + industry picker, About /
   personas card grids, pricing stack table, cross-link bands, full-stack SVG).
   Locked design system only: navy/gold, Inter + Cormorant, theme.json tokens.
   No hardcoded sizes below the floors (14px fine / 16px body); tokens only.
   ========================================================================= */

/* ----- Sofia-first hero (home) — portrait left, greeting right (v104) ----- */
.hero-sofia {
	padding: 64px 0 var(--s-120);
	border-bottom: 1px solid var(--line);
	background: radial-gradient(ellipse at top right, rgba(200, 169, 107, 0.06) 0%, transparent 50%), var(--navy);
	position: relative;
	overflow: hidden;
}
.hero-sofia::before {
	content: "";
	position: absolute;
	top: 0; left: 0; right: 0;
	height: 1px;
	background: linear-gradient(90deg, transparent 0%, var(--line-gold) 50%, transparent 100%);
}
.hero-sofia-grid {
	display: grid;
	grid-template-columns: 1fr 1.1fr;
	gap: var(--s-64);
	align-items: center;
}
/* Portrait stage */
.hero-sofia-stage { position: relative; display: block; }
.hero-sofia-frame {
	position: relative;
	aspect-ratio: 4 / 5;
	background: var(--navy-2);
	overflow: hidden;
	border: 1px solid var(--line-gold);
	box-shadow: 0 24px 60px rgba(0, 0, 0, 0.4);
}
.hero-sofia-frame img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s ease; }
.hero-sofia-stage:hover .hero-sofia-frame img { transform: scale(1.03); }
.hero-sofia-frame .corner { position: absolute; width: 32px; height: 32px; border: 1px solid var(--gold); pointer-events: none; z-index: 2; }
.hero-sofia-frame .corner.tl { top: -1px; left: -1px; border-right: none; border-bottom: none; }
.hero-sofia-frame .corner.tr { top: -1px; right: -1px; border-left: none; border-bottom: none; }
.hero-sofia-frame .corner.bl { bottom: -1px; left: -1px; border-right: none; border-top: none; }
.hero-sofia-frame .corner.br { bottom: -1px; right: -1px; border-left: none; border-top: none; }
/* HUD overlay */
.hero-sofia-hud {
	position: absolute;
	bottom: 0; left: 0; right: 0;
	padding: var(--s-24);
	background: linear-gradient(180deg, transparent 0%, rgba(10, 22, 40, 0.92) 70%);
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	z-index: 2;
}
.hero-sofia-id .label { font-family: var(--font-body); font-size: var(--fs-fine); letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold); margin-bottom: var(--s-8); }
.hero-sofia-id .name { font-family: var(--font-display); font-size: var(--fs-title-md); color: var(--text); line-height: 1; margin-bottom: 4px; }
.hero-sofia-id .role { font-family: var(--font-body); font-size: var(--fs-fine); letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-secondary); }
.hero-sofia-status { font-family: var(--font-body); font-size: var(--fs-fine); letter-spacing: 0.16em; text-transform: uppercase; color: var(--text); display: flex; align-items: center; gap: var(--s-8); }
.hero-sofia-status .status-dot { width: 8px; height: 8px; border-radius: 50%; background: #4ade80; box-shadow: 0 0 8px rgba(74, 222, 128, 0.6); animation: sofiaPulse 2s ease-in-out infinite; }
@keyframes sofiaPulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }
/* Tap-to-hear voice prompt (top-right of the portrait) */
.hero-sofia-voice-prompt { position: absolute; top: var(--s-24); right: var(--s-24); display: flex; flex-direction: column; align-items: flex-end; gap: var(--s-8); z-index: 3; pointer-events: none; }
.voice-prompt-ring { width: 56px; height: 56px; border: 1px solid var(--gold); border-radius: 50%; display: flex; align-items: center; justify-content: center; background: rgba(200, 169, 107, 0.1); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); position: relative; }
.voice-prompt-ring::before, .voice-prompt-ring::after { content: ''; position: absolute; inset: -4px; border-radius: 50%; border: 1px solid var(--gold); opacity: 0; animation: voiceRingPulse 2.4s ease-out infinite; }
.voice-prompt-ring::after { animation-delay: 1.2s; }
@keyframes voiceRingPulse { 0% { transform: scale(0.85); opacity: 0.7; } 100% { transform: scale(1.4); opacity: 0; } }
.voice-prompt-ring-inner { width: 12px; height: 12px; background: var(--gold); border-radius: 50%; box-shadow: var(--glow); }
.voice-prompt-label { font-family: var(--font-body); font-size: var(--fs-fine); letter-spacing: 0.16em; text-transform: uppercase; color: var(--text); background: rgba(10, 22, 40, 0.85); padding: 6px 10px; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border: 1px solid var(--line-gold); }
/* Caption */
.hero-sofia-caption { margin-top: var(--s-16); display: flex; justify-content: space-between; align-items: center; gap: var(--s-16); font-family: var(--font-body); font-size: var(--fs-fine); letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-muted); }
.hero-sofia-caption .right { color: var(--gold); }
.hero-sofia-caption .languages { color: var(--text-secondary); }
/* Right column — greeting */
.hero-sofia-text { display: flex; flex-direction: column; gap: var(--s-32); }
.hero-sofia-eyebrow { font-family: var(--font-body); font-size: var(--fs-fine); letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold); display: inline-flex; align-items: center; gap: var(--s-12); align-self: flex-start; }
.hero-sofia-eyebrow .dot { width: 8px; height: 8px; border-radius: 50%; background: #4ade80; box-shadow: 0 0 10px rgba(74, 222, 128, 0.7); animation: sofiaPulse 2s ease-in-out infinite; }
.hero-sofia-greeting { margin: 0; padding: 0 0 0 var(--s-24); border-left: 2px solid var(--gold); font-family: var(--font-display); color: var(--text); }
.hero-sofia-greeting p { margin: 0 0 14px; line-height: 1.12; letter-spacing: -0.015em; }
.hero-sofia-greeting .greeting-line-1 { font-size: clamp(40px, 4.4vw, 52px); }
.hero-sofia-greeting .greeting-line-1 em { font-style: italic; color: var(--gold); }
.hero-sofia-greeting .greeting-line-2 { font-size: clamp(28px, 3vw, 36px); font-style: italic; color: var(--text-secondary); }
.hero-sofia-greeting .greeting-line-3 { font-family: var(--font-body); font-size: var(--fs-lead); color: var(--text-secondary); line-height: 1.55; margin-top: 18px; max-width: 540px; letter-spacing: 0; }
.hero-sofia-greeting cite { display: block; margin-top: var(--s-16); font-family: var(--font-body); font-size: var(--fs-fine); letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold); font-style: normal; }
/* Action buttons */
.hero-sofia-actions { display: flex; gap: var(--s-16); flex-wrap: wrap; }
.btn-sofia-voice, .btn-sofia-text { display: inline-flex; align-items: center; gap: var(--s-12); padding: var(--s-16) var(--s-24); font-family: var(--font-body); font-size: var(--fs-fine); letter-spacing: 0.14em; text-transform: uppercase; border: 1px solid var(--gold); background: var(--gold); color: var(--navy); transition: filter 0.3s, background 0.3s, color 0.3s; }
.btn-sofia-ico { display: inline-flex; }
.btn-sofia-voice .btn-sofia-ico svg, .btn-sofia-text .btn-sofia-ico svg { width: 16px; height: 16px; display: block; }
.btn-sofia-voice:hover { filter: brightness(1.08); }
.btn-sofia-text { background: transparent; color: var(--gold); }
.btn-sofia-text:hover { background: rgba(200, 169, 107, 0.1); color: var(--gold); }
/* Geo line */
.hero-sofia-geo { margin: var(--s-24) 0 0; padding: 18px 0 0; border-top: 1px solid var(--line); font-family: var(--font-display); font-size: var(--fs-lead); color: var(--text-secondary); line-height: 1.6; max-width: 560px; }
.hero-sofia-geo em { font-style: italic; color: var(--gold); }
.hero-sofia-geo .geo-link { font-family: var(--font-body); font-size: var(--fs-fine); letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold); border-bottom: 1px solid transparent; transition: border-color 0.3s; white-space: nowrap; }
.hero-sofia-geo .geo-link:hover { border-color: var(--gold); }
/* Share bar */
.btn-sofia-share { display: inline-flex; align-items: center; gap: var(--s-12); padding: 0 0 4px; font-family: var(--font-body); font-size: var(--fs-fine); letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-secondary); background: transparent; border: none; border-bottom: 1px dashed var(--line-gold); align-self: flex-start; transition: color 0.3s, border-color 0.3s; }
.btn-sofia-share .btn-sofia-ico svg { width: 14px; height: 14px; display: block; opacity: 0.7; }
.btn-sofia-share:hover { color: var(--gold); border-color: var(--gold); }

@media (max-width: 1024px) {
	.hero-sofia-grid { grid-template-columns: 1fr; gap: var(--s-48); }
	.hero-sofia-stage { max-width: 460px; margin: 0 auto; width: 100%; }
}

/* ----- Industry picker (home) ----- */
/* v175 prototype: "Sofia knows your business" — centered head, then each trade
   category stacked full-width with a flush 4-up hairline tile grid (no boxes, no
   rounding, no gaps — the cards share single 1px dividers, ledger style). Tile
   names are Cormorant serif with a gold-italic suffix. */
.industry-picker {
	padding: var(--section-padding) 0;
	background: var(--navy);
	border-bottom: 1px solid var(--line);
	scroll-margin-top: calc(var(--nav-height) + 24px);
}
/* Deep-link targets (#ind-featured / #ind-home-services / …) from the Industries
   menu — offset the jump so the sticky nav doesn't cover the category heading. */
.ip-cat { scroll-margin-top: calc(var(--nav-height) + 24px); }
.industry-picker-head { text-align: center; max-width: 880px; margin: 0 auto var(--s-80); }
.industry-picker-head .eyebrow { justify-content: center; }
.industry-picker-head .lead { margin: var(--s-24) auto 0; }

/* Categories stacked vertically (one per row), separated by a top hairline. */
.industry-picker-cats { display: block; }
.ip-cat { margin-top: var(--s-64); padding-top: var(--s-48); border-top: 1px solid var(--line); }
.ip-cat:first-child { margin-top: var(--s-48); border-top: 1px solid var(--line-gold); }

/* Category header: meta (eyebrow + big serif title, baseline-aligned) on the left,
   italic personalize copy on the right with a gold rule. Matches the prototype's
   1fr 1.4fr header grid. */
.ip-cat-head {
	display: grid;
	grid-template-columns: 1fr 1.4fr;
	gap: var(--s-64);
	align-items: end;
	margin-bottom: var(--s-32);
	padding-bottom: var(--s-24);
	border-bottom: 1px solid var(--line);
}
.ip-cat-meta { display: flex; align-items: baseline; gap: var(--s-24); }
.ip-cat-eyebrow {
	font-family: var(--font-body);
	font-size: var(--fs-fine);
	font-weight: 500;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--gold);
	margin: 0;
	white-space: nowrap;
}
.ip-cat-title {
	font-family: var(--font-display);
	font-size: clamp(32px, 3.2vw, 42px);
	font-weight: 400;
	line-height: 1;
	margin: 0;
	letter-spacing: -0.01em;
}
.ip-cat-personalize {
	justify-self: end;
	max-width: 540px;
	margin: 0;
	padding-left: var(--s-24);
	border-left: 1px solid var(--line-gold);
	font-family: var(--font-display);
	font-style: italic;
	font-size: var(--fs-small);
	line-height: 1.55;
	color: var(--text-secondary);
}

/* Flush hairline tile grid — the grid paints the hairlines, each tile fills navy.
   The featured (first) category has 6 tiles → 3-up for a clean 3×2; the rest 4-up. */
.ip-tiles {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1px;
	background: var(--line);
	border: 1px solid var(--line);
}
.ip-cat:first-child .ip-tiles { grid-template-columns: repeat(3, 1fr); }
.ip-tile {
	display: flex;
	flex-direction: column;
	gap: var(--s-12);
	padding: var(--s-24) var(--s-24);
	min-height: 180px;
	background: var(--navy);
	border: none;
	border-radius: 0;
	color: inherit;
	transition: background 0.3s;
}
.ip-tile:hover { background: rgba(200, 169, 107, 0.06); transform: none; }
.ip-tile-num {
	font-family: var(--font-body);
	font-size: var(--fs-fine);
	font-weight: 500;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--gold);
}
.ip-tile-name {
	font-family: var(--font-display);
	font-size: 21px;
	font-weight: 400;
	line-height: 1.2;
	letter-spacing: -0.005em;
	color: var(--text);
}
.ip-tile-name em { font-style: italic; color: var(--gold); }
.ip-tile-hint { font-size: var(--fs-fine); color: var(--text-secondary); line-height: 1.5; margin-bottom: auto; }
.ip-tile-cta {
	margin-top: auto;
	padding-top: var(--s-12);
	border-top: 1px solid var(--line);
	font-family: var(--font-body);
	font-size: var(--fs-fine);
	font-weight: 500;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--gold);
	transition: color 0.25s;
}
.ip-tile:hover .ip-tile-cta { color: var(--text); }

@media (max-width: 960px) {
	.ip-tiles,
	.ip-cat:first-child .ip-tiles { grid-template-columns: repeat(2, 1fr); }
	.ip-cat-head { grid-template-columns: 1fr; gap: var(--s-16); }
	.ip-cat-meta { flex-wrap: wrap; gap: var(--s-8); }
	.ip-cat-personalize { justify-self: start; }
}
@media (max-width: 520px) {
	.ip-tiles,
	.ip-cat:first-child .ip-tiles { grid-template-columns: 1fr; }
}

/* ----- Cross-link band (pricing ↔ standalone) ----- */
.cross-link-section { padding: var(--section-padding) 0; background: var(--navy); }
.cross-link-box {
	max-width: var(--content-narrow);
	margin: 0 auto;
	padding: var(--s-48);
	background: var(--navy-2);
	border: 1px solid var(--line-gold);
	border-radius: 6px;
	text-align: center;
}
.cross-link-box .title-lg { margin: var(--s-16) 0; }
.cross-link-box .lead { margin: 0 auto var(--s-32); max-width: 64ch; }
.cross-link-box .btn-row { justify-content: center; }

/* ----- Stack compare table (pricing) ----- */
.stack-compare-section { padding: var(--section-padding) 0; background: var(--navy); }
.stack-compare-head { max-width: var(--content-narrow); margin: 0 0 var(--s-32); }
.stack-compare-wrap { overflow-x: auto; }
.stack-compare-table {
	width: 100%;
	border-collapse: collapse;
	font-family: var(--font-body);
	font-size: var(--fs-small);
}
.stack-compare-table th,
.stack-compare-table td {
	text-align: left;
	padding: var(--s-16) var(--s-24);
	border-bottom: 1px solid var(--line);
	vertical-align: top;
}
.stack-compare-table thead th {
	font-size: var(--fs-fine);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--gold);
	font-weight: 500;
	border-bottom: 1px solid var(--line-gold);
}
.stack-compare-table .sc-cell-stack {
	font-family: var(--font-display);
	font-size: var(--fs-title-md);
	color: var(--text);
	white-space: nowrap;
}
.stack-compare-table .sc-cell-roles { color: var(--text-secondary); line-height: 1.5; }
.stack-compare-table .sc-cell-human { color: var(--text-muted); white-space: nowrap; }
.stack-compare-table .sc-cell-cost,
.stack-compare-table .sc-th-cost {
	color: var(--gold);
	font-weight: 600;
	white-space: nowrap;
}
.stack-compare-table tbody tr:last-child td { border-bottom: none; }

/* ----- Card grid (About product lines, personas, roles, verticals) ----- */
.card-grid-section { padding: var(--section-padding) 0; background: var(--navy); }
.card-grid-section.alt { background: var(--navy-2); }
.card-grid-head { max-width: var(--content-narrow); margin: 0 0 var(--s-48); }
.card-grid-head .lead { margin-top: var(--s-16); }
.card-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: var(--s-24);
}
.cg-card {
	display: flex;
	flex-direction: column;
	gap: var(--s-12);
	padding: var(--s-32);
	background: var(--navy-2);
	border: 1px solid var(--line);
	border-radius: 6px;
	transition: border-color 0.25s, transform 0.25s;
}
.card-grid-section.alt .cg-card { background: var(--navy); }
.cg-card:hover { border-color: var(--line-gold); transform: translateY(-3px); }
.cg-label {
	font-family: var(--font-body);
	font-size: var(--fs-fine);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--gold);
}
.cg-title { font-size: var(--fs-title-md); margin: 0; line-height: 1.15; }
.cg-meta { font-size: var(--fs-fine); color: var(--text-muted); letter-spacing: 0.04em; }
.cg-body { font-size: var(--fs-small); color: var(--text-secondary); line-height: 1.6; margin: 0; }
.cg-body strong { color: var(--text); font-weight: 500; }

/* ----- Full-stack flow SVG (what-we-build) ----- */
.fullstack-flow { margin: var(--s-48) auto 0; max-width: var(--content-narrow); }
.fullstack-flow .viz-flow-svg { width: 100%; height: auto; display: block; }
.fullstack-flow .viz-flow-node { fill: var(--navy); stroke: var(--gold); stroke-width: 1.5; }
.fullstack-flow .viz-flow-edge { fill: none; stroke: var(--gold); stroke-width: 2.2; }
.fullstack-flow .viz-flow-edge.is-feedback { stroke: var(--line-gold); stroke-width: 1.8; stroke-dasharray: 5 4; }
.fullstack-flow .viz-flow-arrow { fill: var(--gold); }
.fullstack-flow .viz-flow-node-label {
	font-family: var(--font-body);
	font-size: var(--fs-fine);
	letter-spacing: 0.06em;
	fill: var(--text);
}
.fullstack-flow .viz-flow-caption {
	font-family: var(--font-body);
	font-size: var(--fs-fine);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	fill: var(--text-muted);
}

/* ----- Agents page · The faces grid (8 photoreal avatar persona cards) ----- */
.agents-faces-section {
	padding: var(--section-padding) 0;
	background: var(--navy-2);
	border-bottom: 1px solid var(--line);
	position: relative;
}
.agents-faces-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.5;
}
.agents-faces-section .container { max-width: 1240px; }
.agents-faces-head { max-width: 820px; margin: 0 0 var(--s-48); }
.agents-faces-head .lead { margin-top: var(--s-16); }
.agents-faces-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--s-24);
}
.agents-face-card {
	background: var(--navy);
	border: 1px solid var(--line);
	border-radius: 6px;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	transition: border-color 0.25s ease, transform 0.25s ease;
}
.agents-face-card:hover {
	border-color: var(--line-gold);
	transform: translateY(-4px);
}
.agents-face-portrait {
	position: relative;
	aspect-ratio: 3 / 4;
	overflow: hidden;
	border-bottom: 1px solid var(--line);
}
.agents-face-portrait img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.5s ease;
}
.agents-face-card:hover .agents-face-portrait img {
	transform: scale(1.03);
}
.agents-face-portrait::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, transparent 60%, rgba(10, 22, 40, 0.75) 100%);
	pointer-events: none;
}
.agents-face-badge {
	position: absolute;
	bottom: var(--s-12);
	left: var(--s-12);
	font-family: var(--font-mono);
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.16em;
	text-align: center;
	color: var(--gold);
	background: rgba(10, 22, 40, 0.85);
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
	padding: 5px 10px;
	border-radius: 2px;
	text-transform: uppercase;
	z-index: 2;
	border: 1px solid var(--line-gold);
}
.agents-face-meta {
	padding: var(--s-24) var(--s-24) var(--s-24);
	display: flex;
	flex-direction: column;
	gap: var(--s-12);
}
.agents-face-name-row {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 4px;
}
.agents-face-name {
	font-family: var(--font-display);
	font-size: 24px;
	line-height: 1.1;
	color: var(--text);
	font-weight: 400;
	letter-spacing: -0.01em;
	margin: 0;
}
.agents-face-role {
	font-family: var(--font-mono);
	font-size: var(--fs-fine);
	letter-spacing: 0.18em;
	color: var(--gold);
	text-transform: uppercase;
	line-height: 1.4;
}
.agents-face-voice {
	font-family: var(--font-display);
	font-style: italic;
	font-size: var(--fs-small);
	color: var(--text-secondary);
	line-height: 1.5;
	margin: 0;
}
.agents-face-story {
	font-family: var(--font-body);
	font-size: var(--fs-small);
	color: var(--text-secondary);
	line-height: 1.6;
	margin: 0;
}
.agents-face-fit {
	font-family: var(--font-mono);
	font-size: 12px;
	letter-spacing: 0.14em;
	color: var(--text-secondary);
	text-transform: uppercase;
	padding: var(--s-12) 0 0;
	border-top: 1px solid var(--line);
	margin: var(--s-4) 0 0;
	line-height: 1.5;
}
.agents-face-fit-label {
	color: var(--gold);
	font-weight: 500;
}

@media (max-width: 1100px) {
	.agents-faces-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 820px) {
	.agents-faces-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 520px) {
	.agents-faces-grid { grid-template-columns: 1fr; }
}

/* =========================================================================
   v175 CALCULATORS — Growth Projection (.rla/.gp), Workforce ROI (.wfr),
   Scaling slider (.scl). Ported from the prototype, re-homed onto the site
   design tokens. The calculator containers alias the prototype's palette
   names to the real theme tokens, so the ported rules below stay faithful
   while consuming a single source of truth (see base.css).
   ========================================================================= */
.sm-calc-page,
.scl-section {
	--white: var(--text);
	--white-soft: var(--text-secondary);
	--white-faint: var(--text-muted);
	--white-dim: var(--text-muted);
	--gold-soft: rgba(200, 169, 107, 0.55);
	--line-bright: rgba(248, 247, 244, 0.22);
}

/* ---- Growth Projection: quiz shell -------------------------------------- */
.rla-hero { padding: 36px 0 14px; text-align: center; }
.rla-hero-inner { max-width: 760px; margin: 0 auto; padding: 0 24px; }
.rla-hero-eyebrow { font-family:var(--font-body); font-size:11px; letter-spacing:0.22em; text-transform:uppercase; color:var(--gold); margin-bottom:16px; }
.rla-hero h1 { font-family:var(--font-display); font-size:34px; line-height:1.08; color:var(--white); font-weight:400; }
.rla-hero h1 em { font-style:italic; color:var(--gold); }
.rla-hero .lede { font-family:var(--font-body); font-size:14px; line-height:1.5; color:var(--white-soft); margin-top:14px; max-width:620px; margin-left:auto; margin-right:auto; }

.rla-progress-wrap { max-width:680px; margin:0 auto 8px; padding:0 24px; }
.rla-progress-track { height:3px; background:var(--line); position:relative; overflow:hidden; }
.rla-progress-fill { position:absolute; top:0; left:0; height:100%; background:var(--gold); transition:width 0.4s cubic-bezier(0.16,1,0.3,1); }
.rla-progress-meta { display:flex; justify-content:space-between; font-family:var(--font-mono); font-size:10px; letter-spacing:0.16em; text-transform:uppercase; color:var(--white-faint); margin-top:12px; }
.rla-progress-meta strong { color:var(--white-soft); }

.rla-quiz-section { padding:20px 0 40px; }
.rla-quiz-inner { max-width:680px; margin:0 auto; padding:0 24px; }
.rla-section-tag { font-family:var(--font-mono); font-size:10px; letter-spacing:0.2em; text-transform:uppercase; color:var(--gold); margin-bottom:10px; }
.rla-question { display:none; }
.rla-question.active { display:block; animation:rlaFade 0.4s ease; }
@keyframes rlaFade { from{opacity:0; transform:translateY(8px);} to{opacity:1; transform:translateY(0);} }
.rla-question-number { font-family:var(--font-mono); font-size:10px; letter-spacing:0.2em; text-transform:uppercase; color:var(--white-faint); margin-bottom:8px; }
.rla-question h2 { font-family:var(--font-display); font-size:26px; line-height:1.12; color:var(--white); font-weight:400; }
.rla-question h2 em { font-style:italic; color:var(--gold); }
.rla-question-helper { font-family:var(--font-body); font-size:13px; line-height:1.5; color:var(--white-faint); margin-top:10px; }
.rla-answers { margin-top:18px; display:flex; flex-direction:column; gap:8px; }
.rla-answer { display:flex; align-items:center; justify-content:space-between; gap:16px; width:100%; text-align:left; padding:13px 20px; background:var(--navy-2); border:1px solid var(--line); cursor:pointer; transition:all 0.2s; font-family:var(--font-body); }
.rla-answer:hover { border-color:var(--gold); background:rgba(200,169,107,0.06); transform:translateX(4px); }
.rla-answer-content { display:flex; flex-direction:column; gap:4px; }
.rla-answer-content > span:first-child { font-size:15px; color:var(--white); }
.rla-answer-sub { font-size:12px; color:var(--white-faint); }
.rla-answer .arrow { color:var(--gold); opacity:0; transition:opacity 0.2s; }
.rla-answer:hover .arrow { opacity:1; }
.rla-back { font-family:var(--font-mono); font-size:10px; letter-spacing:0.18em; text-transform:uppercase; color:var(--white-faint); background:none; border:none; cursor:pointer; padding:0; margin-top:18px; transition:color 0.2s; }
.rla-back:hover { color:var(--gold); }

.rla-select-wrap { margin-top:28px; }
.rla-select {
	width:100%; padding:18px 22px; background:var(--navy-2); border:1px solid var(--line);
	color:var(--white); font-family:var(--font-body); font-size:16px; cursor:pointer;
	-webkit-appearance:none; appearance:none;
	background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23C8A96B' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
	background-repeat:no-repeat; background-position:right 20px center;
}
.rla-select:focus { outline:none; border-color:var(--gold); }
.rla-select option { background:var(--navy); color:var(--white); }
.rla-select option[disabled] { color:var(--white-faint); }
.rla-continue {
	margin-top:20px; font-family:var(--font-mono); font-size:12px; letter-spacing:0.12em;
	text-transform:uppercase; color:var(--navy); background:var(--gold); border:none;
	padding:15px 30px; cursor:pointer; transition:opacity 0.2s;
}
.rla-continue:hover { opacity:0.9; }
.rla-continue:disabled { opacity:0.4; cursor:not-allowed; }

/* ---- Growth Projection: result ----------------------------------------- */
.rla-result { display:none; max-width:880px; margin:0 auto; padding:0 24px; }
.rla-result.active { display:block; animation:rlaFade 0.5s ease; }
.rla-result-eyebrow { font-family:var(--font-body); font-size:10px; letter-spacing:0.2em; text-transform:uppercase; color:var(--gold); text-align:center; margin-bottom:16px; }
.rla-leak-disclaimer { font-family:var(--font-body); font-size:12px; line-height:1.55; color:var(--white-faint); max-width:640px; margin:18px auto 0; text-align:center; padding:14px 18px; border:1px solid var(--line); background:var(--navy-2); }
.rla-leak-disclaimer strong { color:var(--white-soft); }

.rla-block-title { font-family:var(--font-display); font-size:30px; color:var(--white); font-weight:400; text-align:center; margin:56px 0 8px; }
.rla-block-title em { font-style:italic; color:var(--gold); }
.rla-block-sub { font-family:var(--font-body); font-size:14px; color:var(--white-soft); text-align:center; max-width:600px; margin:0 auto 32px; }

.rla-leak-list { border-top:1px solid var(--line); }
.rla-leak-item { display:flex; align-items:flex-start; gap:16px; padding:11px 0; border-bottom:1px solid var(--line); }
.rla-leak-dot { width:10px; height:10px; border-radius:50%; margin-top:6px; flex-shrink:0; }
.rla-leak-dot.red { background:#C8584B; box-shadow:0 0 0 3px rgba(200,88,75,0.15); }
.rla-leak-dot.amber { background:var(--gold); box-shadow:0 0 0 3px rgba(200,169,107,0.15); }
.rla-leak-dot.green { background:#5B8C6E; box-shadow:0 0 0 3px rgba(91,140,110,0.15); }
.rla-leak-text { flex:1; }
.rla-leak-area { font-family:var(--font-body); font-size:15px; color:var(--white); font-weight:600; margin-bottom:3px; }
.rla-leak-area .rla-leak-status { font-family:var(--font-mono); font-size:9px; letter-spacing:0.14em; text-transform:uppercase; font-weight:400; margin-left:10px; }
.rla-leak-status.red { color:#C8584B; }
.rla-leak-status.amber { color:var(--gold); }
.rla-leak-status.green { color:#5B8C6E; }
.rla-leak-diag { font-family:var(--font-body); font-size:13px; line-height:1.5; color:var(--white-soft); }
.rla-leak-fix { font-family:var(--font-body); font-size:12px; color:var(--white-faint); margin-top:5px; }
.rla-leak-fix strong { color:var(--gold); font-weight:600; }

.rla-rec { margin-top:48px; padding:36px 32px; background:var(--navy-2); border:1px solid var(--line-gold); text-align:center; }
.rla-rec-tag { font-family:var(--font-mono); font-size:10px; letter-spacing:0.2em; text-transform:uppercase; color:var(--gold); margin-bottom:14px; }
.rla-rec h3 { font-family:var(--font-display); font-size:30px; color:var(--white); font-weight:400; }
.rla-rec h3 em { font-style:italic; color:var(--gold); }
.rla-rec-body { font-family:var(--font-body); font-size:14px; line-height:1.6; color:var(--white-soft); max-width:620px; margin:14px auto 0; }
.rla-rec-cta { display:flex; gap:14px; justify-content:center; margin-top:28px; flex-wrap:wrap; }

.rla-email-capture { margin-top:40px; padding:32px; background:var(--navy); border:1px solid var(--line); text-align:center; }
.rla-email-eyebrow { font-family:var(--font-body); font-size:10px; letter-spacing:0.2em; text-transform:uppercase; color:var(--gold); margin-bottom:16px; }
.rla-email-capture h4 { font-family:var(--font-display); font-size:24px; color:var(--white); font-weight:400; margin-bottom:18px; }
.rla-email-capture h4 em { font-style:italic; color:var(--gold); }
.rla-email-form { display:flex; max-width:480px; margin:0 auto; border:1px solid var(--line); }
.rla-email-form input { flex:1; background:transparent; border:none; padding:14px 18px; color:var(--white); font-family:var(--font-body); font-size:14px; }
.rla-email-form input:focus { outline:none; }
.rla-email-form button { font-family:var(--font-mono); font-size:11px; letter-spacing:0.12em; text-transform:uppercase; color:var(--navy); background:var(--gold); border:none; padding:14px 24px; cursor:pointer; white-space:nowrap; }
.rla-email-note { font-family:var(--font-body); font-size:11px; color:var(--white-faint); margin-top:12px; }
.rla-email-success { display:none; font-family:var(--font-body); font-size:14px; color:var(--gold); margin-top:16px; }
.rla-restart { font-family:var(--font-mono); font-size:10px; letter-spacing:0.2em; text-transform:uppercase; color:var(--white-faint); background:transparent; border:none; cursor:pointer; padding:0; margin:48px auto 0; display:block; transition:color 0.2s; }
.rla-restart:hover { color:var(--gold); }

@media (max-width:760px){
	.rla-hero h1 { font-size:38px; }
	.rla-question h2 { font-size:27px; }
	.rla-quiz-section { padding:28px 0 72px; }
	.rla-rec { padding:28px 22px; }
	.rla-rec-cta { flex-direction:column; }
	.rla-rec-cta .btn-primary, .rla-rec-cta .btn-secondary { width:100%; min-width:0; }
	.rla-email-form { flex-direction:column; border:none; gap:12px; }
	.rla-email-form input { border:1px solid var(--line); }
}

/* ---- Growth Projection: Sofia guide + breakdown + curve + layers -------- */
.gp-guide { display:flex; align-items:center; gap:16px; max-width:760px; margin:0 auto 26px; padding:14px 18px; background:var(--navy-2); border:1px solid var(--line); }
.gp-guide-avatar { width:48px; height:48px; flex-shrink:0; border-radius:50%; overflow:hidden; border:1px solid var(--line-gold); background:var(--navy); }
.gp-guide-avatar img { width:100%; height:100%; object-fit:cover; display:block; }
.gp-guide-text { font-family:var(--font-body); font-size:14px; line-height:1.5; color:var(--white-soft); }
.gp-guide-text .gp-guide-name { font-family:var(--font-mono); font-size:9px; letter-spacing:0.18em; text-transform:uppercase; color:var(--gold); display:block; margin-bottom:4px; }

.gp-hero-metric { text-align:center; margin-top:6px; }
.gp-metric-label { font-family:var(--font-body); font-size:14px; color:var(--white-soft); margin-bottom:8px; }
.gp-metric-figure { font-family:var(--font-display); font-style:italic; font-weight:400; font-size:68px; line-height:1; color:var(--gold); }
.gp-metric-sub { font-family:var(--font-body); font-size:15px; color:var(--white-soft); margin-top:12px; }
.gp-metric-dash{ color:var(--gold-soft); font-weight:300; margin:0 .08em; }

.gp-curve-wrap { margin-top:48px; padding:32px; background:var(--navy-2); border:1px solid var(--line); }
.gp-curve-head { text-align:center; margin-bottom:8px; }
.gp-curve-head h3 { font-family:var(--font-display); font-size:28px; color:var(--white); font-weight:400; }
.gp-curve-head h3 em { font-style:italic; color:var(--gold); }
.gp-curve-head p { font-family:var(--font-body); font-size:13px; line-height:1.5; color:var(--white-faint); max-width:600px; margin:10px auto 0; }
.gp-curve-svg { width:100%; height:auto; display:block; margin-top:18px; }
.gp-curve-legend { display:flex; justify-content:center; gap:28px; margin-top:14px; flex-wrap:wrap; }
.gp-legend-item { display:flex; align-items:center; gap:8px; font-family:var(--font-body); font-size:12px; color:var(--white-soft); }
.gp-legend-swatch { width:18px; height:3px; border-radius:2px; }
.gp-curve-stats { display:grid; grid-template-columns:repeat(3,1fr); gap:1px; margin-top:24px; background:var(--line); border:1px solid var(--line); }
.gp-curve-stat { background:var(--navy); padding:20px 16px; text-align:center; }
.gp-curve-stat .v { font-family:var(--font-display); font-style:italic; font-size:30px; color:var(--gold); line-height:1; }
.gp-curve-stat .l { font-family:var(--font-body); font-size:12px; color:var(--white-faint); margin-top:10px; line-height:1.4; }

.gp-layers { margin-top:40px; }
.gp-layers-title { font-family:var(--font-display); font-size:26px; color:var(--white); font-weight:400; text-align:center; margin-bottom:6px; }
.gp-layers-title em { font-style:italic; color:var(--gold); }
.gp-layers-sub { font-family:var(--font-body); font-size:13px; color:var(--white-faint); text-align:center; max-width:600px; margin:0 auto 24px; line-height:1.5; }
.gp-layer { display:flex; gap:16px; padding:18px 0; border-bottom:1px solid var(--line); }
.gp-layer:first-child { border-top:1px solid var(--line); }
.gp-layer-num { font-family:var(--font-mono); font-size:12px; color:var(--gold); flex-shrink:0; padding-top:2px; }
.gp-layer-body h4 { font-family:var(--font-body); font-size:15px; font-weight:600; color:var(--white); margin-bottom:4px; }
.gp-layer-body p { font-family:var(--font-body); font-size:13px; line-height:1.55; color:var(--white-soft); }
.gp-layer-marker { display:flex; flex-direction:column; align-items:center; gap:7px; flex-shrink:0; padding-top:2px; }
.gp-layer-icon { width:30px; height:30px; color:var(--gold); }
.gp-layer-icon svg { width:30px; height:30px; display:block; }
.gp-layer-marker .gp-layer-num { padding-top:0; }

.gp-proof { margin-top:44px; padding:32px; background:var(--navy); border:1px solid var(--line); }
.gp-proof-eyebrow { font-family:var(--font-body); font-size:10px; letter-spacing:0.2em; text-transform:uppercase; color:var(--gold); text-align:center; margin-bottom:16px; }
.gp-proof-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:24px; }
.gp-proof-cell { text-align:center; }
.gp-proof-cell .pn { font-family:var(--font-display); font-size:38px; color:var(--white); line-height:1; }
.gp-proof-cell .pn .u { font-size:22px; color:var(--gold); }
.gp-proof-cell .pl { font-family:var(--font-body); font-size:12px; line-height:1.45; color:var(--white-soft); margin-top:10px; }
.gp-proof-cell .ps { font-family:var(--font-mono); font-size:8px; letter-spacing:0.12em; text-transform:uppercase; color:var(--white-faint); margin-top:8px; }
.gp-proof-link { text-align:center; margin-top:24px; padding-top:18px; border-top:1px solid var(--line); font-family:var(--font-body); font-size:12px; color:var(--white-faint); }
.gp-proof-link-a { font-family:var(--font-mono); font-size:10px; letter-spacing:0.12em; text-transform:uppercase; color:var(--gold); background:none; border:none; cursor:pointer; padding:0; transition:opacity 0.2s; }
.gp-proof-link-a:hover { opacity:0.7; }
.gp-proof-link-sep { color:var(--line-bright); margin:0 6px; }

@media (max-width:760px){
	.gp-metric-figure { font-size:48px; }
	.gp-curve-stats { grid-template-columns:1fr; }
	.gp-proof-grid { grid-template-columns:1fr 1fr; gap:20px 16px; }
	.gp-curve-wrap, .gp-proof { padding:22px 16px; }
}

/* detailed breakdown */
.gp-breakdown{ max-width:680px; margin:0 auto 30px; background:var(--navy-2); border:1px solid var(--line); border-radius:14px; padding:24px 26px; }
.gp-breakdown-title{ font-family:var(--font-mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--gold-soft); margin-bottom:14px; }
.gp-breakdown-intro{ font-size:13px; line-height:1.55; color:var(--white-dim); margin:-4px 0 16px; }
.gp-breakdown-rows{ display:flex; flex-direction:column; }
.gpb-row{ display:flex; justify-content:space-between; align-items:baseline; gap:18px; padding:9px 0; border-bottom:1px solid rgba(248,247,244,0.06); }
.gpb-row:last-child{ border-bottom:none; }
.gpb-k{ font-size:14px; color:var(--white-soft); line-height:1.4; }
.gpb-hint{ display:block; font-size:11.5px; color:var(--white-dim); margin-top:2px; font-style:italic; }
.gpb-v{ font-family:var(--font-mono); font-size:15px; color:var(--white); white-space:nowrap; flex:0 0 auto; }
.gpb-sub .gpb-k, .gpb-sub .gpb-v{ color:var(--gold-soft); }
.gpb-total{ margin-top:4px; border-top:1px solid var(--line-bright); border-bottom:none; padding-top:14px; }
.gpb-total .gpb-k{ font-weight:600; color:var(--white); }
.gpb-total .gpb-v{ font-size:19px; color:var(--gold); }
.gp-breakdown-note{ font-size:12.5px; line-height:1.6; color:var(--white-dim); margin-top:16px; }
.gp-breakdown-note .gpb-comp{ margin:8px 0 8px; padding-left:18px; list-style:disc; }
.gp-breakdown-note .gpb-comp li{ margin:7px 0; line-height:1.5; }
.gp-breakdown-note strong{ color:var(--white-soft); }
.gpb-note-lead{ margin:0 0 8px; color:var(--white-soft); font-size:12.5px; line-height:1.55; }
.gpb-c-k{ color:var(--white-soft); }
.gpb-c-s{ color:var(--white-faint); font-style:italic; }
.gpb-note-cap{ margin:12px 0 0; padding-top:12px; border-top:1px solid rgba(248,247,244,0.07); color:var(--white-dim); font-size:12.5px; line-height:1.6; }
.gpb-note-range{ margin:10px 0 0; color:var(--white-dim); font-size:12.5px; line-height:1.6; }
.gpb-note-cap strong, .gpb-note-range strong{ color:var(--gold-soft); }
.gpb-note-range em, .gpb-note-cap em{ color:var(--white-soft); font-style:italic; }
.gpb-ceil{ color:var(--white-faint); font-style:italic; }

/* what this replaces + leverage ladder */
.gp-replace{ max-width:760px; margin:0 auto 30px; background:linear-gradient(180deg, rgba(200,169,107,0.06), rgba(200,169,107,0.02)); border:1px solid var(--line-bright); border-radius:16px; padding:30px 30px 26px; }
.gp-replace-eyebrow{ font-family:var(--font-body); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--gold); margin-bottom:16px; }
.gp-replace h3{ font-family:var(--font-display); font-size:27px; line-height:1.2; color:var(--white); margin:0 0 18px; font-weight:500; }
.gp-replace h3 em{ font-style:italic; color:var(--gold); }
.gp-replace-lede{ font-size:15px; line-height:1.65; color:var(--white-soft); margin:0 0 22px; }
.gp-replace-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-bottom:24px; }
.gp-replace-item{ display:flex; flex-direction:column; gap:10px; }
.gpr-ico{ color:var(--gold); display:inline-flex; }
.gpr-ico svg{ width:26px; height:26px; }
.gpr-t strong{ display:block; font-size:13.5px; color:var(--white); margin-bottom:4px; }
.gpr-t span{ display:block; font-size:12.5px; line-height:1.55; color:var(--white-dim); }
.gpr-t em{ font-style:normal; color:var(--gold-soft); }
.gp-replace-foot{ font-size:11.5px; line-height:1.6; color:var(--white-faint); margin-top:16px; }
.gp-replace-foot .gp-proof-link-a{ font-size:11.5px; }
.gp-replace-sep{ font-size:12px; line-height:1.55; color:var(--white-faint); font-style:italic; margin:16px 0 0; text-align:center; }
.gp-leverage{ margin:0 0 4px; }
.gp-lev-logic{ font-size:14px; line-height:1.65; color:var(--white-soft); margin:0 0 20px; }
.gp-lev-logic strong{ color:var(--white); }
.gp-lev-logic em{ color:var(--gold); font-style:italic; }
.gp-lev-flat{ font-family:var(--font-mono); font-size:13px; letter-spacing:0.05em; color:var(--gold); text-align:center; padding:12px; border:1px solid var(--line-bright); border-radius:10px; margin-bottom:10px; }
.gp-lev-flat span{ color:var(--white); font-weight:600; }
.gp-lev-sub{ font-size:12.5px; color:var(--white-faint); text-align:center; margin:0 0 14px; line-height:1.55; }
.gp-lev-sub em{ color:var(--white-soft); font-style:normal; }
.gp-lev-ladder{ border:1px solid var(--line); border-radius:12px; overflow:hidden; }
.gp-lev-head, .gp-lev-row{ display:grid; grid-template-columns:1fr 1.3fr 1.3fr; align-items:center; gap:10px; padding:11px 16px; }
.gp-lev-head{ background:var(--navy-2); font-family:var(--font-mono); font-size:10px; letter-spacing:0.07em; text-transform:uppercase; color:var(--white-faint); }
.gp-lev-row{ border-top:1px solid var(--line); font-size:13.5px; color:var(--white-soft); }
.gp-lev-row .lev-c1{ font-weight:600; color:var(--white); }
.gp-lev-row .lev-c2{ color:var(--white-faint); font-variant-numeric:tabular-nums; }
.gp-lev-row .lev-c3{ text-align:right; font-weight:700; color:var(--gold); font-variant-numeric:tabular-nums; }
.gp-lev-row.is-you{ background:rgba(200,169,107,0.10); }
.gp-lev-row.is-you .lev-c1{ color:var(--gold); }
.gp-lev-row.is-you .lev-c1::after{ content:" \2190 you"; font-family:var(--font-mono); font-size:9.5px; letter-spacing:0.06em; color:var(--gold); opacity:0.85; }
.gp-lev-take{ margin-top:16px; font-size:13.5px; line-height:1.6; color:var(--white-soft); padding:14px 16px; background:rgba(200,169,107,0.06); border-left:2px solid var(--gold); border-radius:0 8px 8px 0; }
.gp-lev-take strong{ color:var(--gold); }
@media (max-width:640px){
	.gp-replace-grid{ grid-template-columns:1fr; gap:16px; }
	.gp-replace{ padding:24px 20px; }
	.gp-breakdown{ padding:20px 18px; }
	.gp-lev-head{ display:none; }
	.gp-lev-row{ grid-template-columns:1fr auto; grid-template-areas:'a c' 'b b'; gap:3px 12px; }
	.gp-lev-row .lev-c1{ grid-area:a; }
	.gp-lev-row .lev-c3{ grid-area:c; }
	.gp-lev-row .lev-c2{ grid-area:b; font-size:12px; }
}

/* ---- Workforce ROI ----------------------------------------------------- */
#page-workforce-roi { --wfr-radius:14px; }
.wfr-hero { padding:96px 7vw 40px; text-align:center; position:relative; }
.wfr-eyebrow { font-family:var(--font-body); font-size:12px; letter-spacing:0.22em; text-transform:uppercase; color:var(--gold); margin-bottom:16px; }
.wfr-hook { font-family:var(--font-display); font-weight:600; font-size:clamp(40px,6.6vw,82px); line-height:1.02; color:var(--white); margin:0 auto 22px; max-width:14ch; letter-spacing:-0.01em; }
.wfr-hook em { font-style:italic; color:var(--gold); }
.wfr-sub { font-size:clamp(16px,1.7vw,20px); line-height:1.6; color:var(--white-soft); max-width:60ch; margin:0 auto 18px; }
.wfr-microline { font-size:13.5px; line-height:1.6; color:var(--white-faint); max-width:62ch; margin:0 auto; }
.wfr-calc { padding:30px 6vw 110px; }
.wfr-grid { display:grid; grid-template-columns:0.82fr 1.18fr; gap:28px; max-width:1240px; margin:0 auto; align-items:start; }
.wfr-inputs { background:var(--navy-2); border:1px solid var(--line); border-radius:var(--wfr-radius); padding:26px 24px; position:sticky; top:90px; }
.wfr-block-title { font-family:var(--font-mono); font-size:11px; letter-spacing:0.16em; text-transform:uppercase; color:var(--gold); margin:26px 0 14px; padding-bottom:9px; border-bottom:1px solid var(--line); }
.wfr-block-title:first-child { margin-top:0; }
.wfr-role { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:7px 0; flex-wrap:wrap; }
.wfr-role-label { font-size:13.5px; color:var(--white-soft); flex:1 1 auto; }
.wfr-role-fields { display:flex; align-items:center; gap:6px; flex:0 0 auto; }
.wfr-num { background:var(--navy); border:1px solid var(--line-bright); color:var(--white); font-family:var(--font-body); font-size:14px; padding:8px 9px; border-radius:8px; width:90px; text-align:right; -moz-appearance:textfield; }
.wfr-num::-webkit-outer-spin-button, .wfr-num::-webkit-inner-spin-button { -webkit-appearance:none; margin:0; }
.wfr-num:focus { outline:none; border-color:var(--gold); box-shadow:0 0 0 3px rgba(200,169,107,0.15); }
.wfr-num-c { width:56px; }
.wfr-num-pct { width:58px; }
.wfr-select-sm { background:var(--navy); border:1px solid var(--line-bright); color:var(--white); font-family:var(--font-body); font-size:13px; padding:8px 9px; border-radius:8px; max-width:210px; cursor:pointer; }
.wfr-select-sm:focus { outline:none; border-color:var(--gold); }
.wfr-x { color:var(--white-faint); font-size:13px; }
.wfr-dollar { color:var(--white-faint); font-size:13px; margin-right:-2px; }
.wfr-yr { color:var(--white-faint); font-size:12px; }
.wfr-check { display:flex; align-items:center; gap:9px; font-size:13px; color:var(--white-soft); margin-top:8px; cursor:pointer; }
.wfr-check input { width:16px; height:16px; accent-color:var(--gold); }
.wfr-note { font-size:11.5px; line-height:1.5; color:var(--white-faint); font-style:italic; margin:10px 0 2px; }
.wfr-tiers { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-bottom:14px; }
.wfr-tier { background:var(--navy); border:1px solid var(--line-bright); border-radius:10px; padding:11px 8px; cursor:pointer; color:var(--white-soft); font-family:var(--font-body); font-size:12px; font-weight:600; display:flex; flex-direction:column; gap:4px; align-items:center; transition:border-color .15s, background .15s; text-align:center; }
.wfr-tier span { font-family:var(--font-mono); font-size:10.5px; color:var(--white-faint); font-weight:400; }
.wfr-tier:hover { border-color:var(--gold-soft); }
.wfr-tier.is-active { border-color:var(--gold); background:rgba(200,169,107,0.10); color:var(--white); }
.wfr-tier.is-active span { color:var(--gold); }

.wfr-results { display:flex; flex-direction:column; gap:18px; }
.wfr-headline { background:linear-gradient(160deg, rgba(200,169,107,0.12), rgba(200,169,107,0.03)); border:1px solid var(--gold-soft); border-radius:var(--wfr-radius); padding:32px 28px; text-align:center; }
.wfr-headline-num { font-family:var(--font-display); font-style:italic; font-weight:600; font-size:clamp(48px,7vw,76px); line-height:1; color:var(--gold); }
.wfr-headline-label { font-size:14px; color:var(--white-soft); margin-top:12px; letter-spacing:0.01em; }
.wfr-savings-note { font-size:12px; color:var(--white-faint); margin-top:10px; line-height:1.5; }
.wfr-kpis { display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--wfr-radius); overflow:hidden; }
.wfr-kpi { background:var(--navy); padding:20px 16px; text-align:center; }
.wfr-kpi-hi { background:var(--navy-2); }
.wfr-kpi-v { font-family:var(--font-display); font-style:italic; font-size:30px; line-height:1; color:var(--white); }
.wfr-kpi-hi .wfr-kpi-v { color:var(--gold); }
.wfr-kpi-l { font-size:11px; color:var(--white-faint); margin-top:10px; line-height:1.4; }
.wfr-kpi-sub { font-size:10.5px; color:var(--gold-soft); margin-top:5px; }
.wfr-mini { display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--wfr-radius); overflow:hidden; }
.wfr-mini-i { background:var(--navy); padding:16px; text-align:center; }
.wfr-mini-i span:first-child { display:block; font-family:var(--font-mono); font-size:15px; color:var(--gold); }
.wfr-mini-i span:last-child { display:block; font-size:11px; color:var(--white-faint); margin-top:6px; }
.wfr-missed { background:var(--navy-2); border:1px dashed var(--gold-soft); border-radius:var(--wfr-radius); padding:22px 24px; display:flex; align-items:baseline; gap:18px; flex-wrap:wrap; }
.wfr-missed-num { font-family:var(--font-display); font-style:italic; font-size:38px; line-height:1; color:var(--gold); flex:0 0 auto; }
.wfr-missed-l { font-size:13.5px; color:var(--white-soft); line-height:1.55; flex:1 1 200px; }
.wfr-missed-l span { display:block; font-size:11.5px; color:var(--white-faint); font-style:italic; margin-top:5px; }
.wfr-compare { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.wfr-col { border:1px solid var(--line); border-radius:var(--wfr-radius); padding:20px 18px; }
.wfr-col-ai { border-color:var(--gold-soft); background:rgba(200,169,107,0.05); }
.wfr-col-h { font-family:var(--font-mono); font-size:11px; letter-spacing:0.1em; text-transform:uppercase; margin-bottom:14px; color:var(--white-faint); }
.wfr-col-ai .wfr-col-h { color:var(--gold); }
.wfr-col ul { list-style:none; margin:0; padding:0; }
.wfr-col li { font-size:13px; color:var(--white-soft); padding:6px 0 6px 20px; position:relative; line-height:1.4; }
.wfr-col-human li::before { content:'\2014'; position:absolute; left:0; color:var(--white-faint); }
.wfr-col-ai li::before { content:'\2713'; position:absolute; left:0; color:var(--gold); }
.wfr-philo { font-size:13.5px; line-height:1.65; color:var(--white-soft); padding:0 4px; }
.wfr-cta { background:var(--navy-2); border:1px solid var(--line); border-radius:var(--wfr-radius); padding:30px 28px; text-align:center; }
.wfr-cta h3 { font-family:var(--font-display); font-weight:600; font-size:30px; color:var(--white); margin:0 0 10px; }
.wfr-cta p { font-size:14px; line-height:1.6; color:var(--white-soft); max-width:54ch; margin:0 auto 20px; }
.wfr-cta-btn { background:var(--gold); color:var(--navy); border:none; border-radius:10px; padding:14px 30px; font-family:var(--font-body); font-size:15px; font-weight:600; cursor:pointer; transition:transform .15s, box-shadow .15s; }
.wfr-cta-btn:hover { transform:translateY(-2px); box-shadow:0 12px 30px rgba(200,169,107,0.25); }
.wfr-disclaimer { font-size:11.5px; line-height:1.6; color:var(--white-faint); text-align:center; max-width:70ch; margin:0 auto; }
@media (max-width:920px){
	.wfr-grid { grid-template-columns:1fr; }
	.wfr-inputs { position:static; }
	.wfr-kpis { grid-template-columns:repeat(2,1fr); }
}
@media (max-width:520px){
	.wfr-kpis { grid-template-columns:1fr 1fr; }
	.wfr-tiers { grid-template-columns:1fr; }
	.wfr-compare { grid-template-columns:1fr; }
}

/* ---- Scaling slider ---------------------------------------------------- */
.scl-section { padding:48px 0; }
.scl-inner { max-width:880px; margin:0 auto; padding:0 24px; text-align:center; }
.scl-inner .eyebrow { font-family:var(--font-body); font-size:var(--fs-fine); font-weight:500; letter-spacing:0.18em; text-transform:uppercase; color:var(--gold); margin-bottom:16px; }
.scl-inner .display { font-family:var(--font-display); font-size:32px; line-height:1.1; color:var(--white); font-weight:400; margin:0 0 14px; }
.scl-inner .display em { font-style:italic; color:var(--gold); }
.scl-inner .lead { font-family:var(--font-body); font-size:15px; line-height:1.6; color:var(--white-soft); max-width:620px; margin:0 auto 28px; }
.scl-wrap { background:var(--navy-2); border:1px solid var(--line); border-radius:16px; padding:28px 26px; text-align:left; }
.scl-controls { display:flex; align-items:center; gap:16px; flex-wrap:wrap; margin-top:18px; }
.scl-controls:first-child { margin-top:0; }
.scl-control-label { font-family:var(--font-mono); font-size:11px; letter-spacing:0.06em; text-transform:uppercase; color:var(--white-faint); flex:0 0 auto; }
.scl-slider { flex:1 1 220px; accent-color:var(--gold); height:4px; cursor:pointer; }
.scl-team-val { font-family:var(--font-display); font-style:italic; font-size:28px; color:var(--gold); flex:0 0 auto; min-width:1.5ch; text-align:center; }
.scl-tier-pick { display:flex; gap:8px; flex:1 1 auto; flex-wrap:wrap; }
.scl-tier-btn { background:var(--navy); border:1px solid var(--line-bright); border-radius:10px; padding:10px 16px; cursor:pointer; color:var(--white-soft); font-family:var(--font-body); font-size:13px; font-weight:600; transition:border-color .15s, background .15s, color .15s; }
.scl-tier-btn:hover { border-color:var(--gold-soft); }
.scl-tier-btn.is-active { border-color:var(--gold); background:rgba(200,169,107,0.10); color:var(--white); }
.scl-chart-wrap { margin-top:26px; }
.scl-chart { width:100%; height:auto; display:block; }
.scl-legend { display:flex; justify-content:center; gap:26px; margin-top:12px; flex-wrap:wrap; }
.scl-legend span { display:flex; align-items:center; gap:8px; font-family:var(--font-body); font-size:12px; color:var(--white-soft); }
.scl-legend i { width:16px; height:3px; border-radius:2px; display:inline-block; }
.scl-stats { display:grid; grid-template-columns:repeat(3,1fr); gap:1px; margin-top:26px; background:var(--line); border:1px solid var(--line); border-radius:12px; overflow:hidden; }
.scl-stat { background:var(--navy); padding:18px 14px; text-align:center; }
.scl-stat-v { font-family:var(--font-display); font-style:italic; font-size:26px; color:var(--gold); line-height:1; }
.scl-stat-l { font-family:var(--font-body); font-size:11px; color:var(--white-faint); margin-top:9px; line-height:1.4; }
.scl-takeaway { font-family:var(--font-body); font-size:13.5px; line-height:1.65; color:var(--white-soft); margin:22px 0 0; padding:14px 16px; background:rgba(200,169,107,0.06); border-left:2px solid var(--gold); border-radius:0 8px 8px 0; }
@media (max-width:640px){
	.scl-inner .display { font-size:26px; }
	.scl-stats { grid-template-columns:1fr; }
	.scl-wrap { padding:22px 18px; }
}