/* ============================================================================
 * Platform Solution template
 * Figma: NEO Hire (11953:97440) + NEO Contractor (11955:31932)
 * ========================================================================== */

.psol-page {
	color: #1d1d1f;
	background: #fff;
	font-family: 'Inter', system-ui, -apple-system, sans-serif;
}
.psol-page * { box-sizing: border-box; }

.psol-container {
	width: 100%;
	max-width: 1280px;
	margin: 0 auto;
	padding: 0 32px;
}

/* ------------------------------------------------------------------ Buttons */
.psol-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 18px 28px;
	border: 1px solid transparent;
	border-radius: 999px;
	font-size: 16px;
	font-weight: 600;
	line-height: 1;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
	white-space: nowrap;
}
.psol-btn--primary {
	background: #0e7c66;
	color: #fff;
}
.psol-btn--primary:hover { background: #0a5f4f; color: #fff; }
.psol-btn--secondary {
	background: #fff;
	color: #1d1d1f;
	border-color: #d4d4d8;
}
.psol-btn--secondary:hover { border-color: #1d1d1f; }
.psol-btn--sm   { padding: 12px 20px; font-size: 14px; }
.psol-btn--lg   { padding: 22px 36px; font-size: 17px; }
.psol-btn--block { width: 100%; }

/* --------------------------------------------------------- Section heads */
.psol-section-head {
	max-width: 780px;
	margin: 0 auto;
	padding: 100px 0 36px;
	text-align: center;
}
.psol-section-eyebrow {
	margin: 0 0 12px;
	font-size: 14px;
	font-weight: 600;
	color: #0e7c66;
	text-transform: uppercase;
	letter-spacing: 0.08em;
}
.psol-section-title {
	margin: 0 0 16px;
	font-size: 48px;
	line-height: 1.16;
	font-weight: 500;
	letter-spacing: -0.02em;
	color: #1d1d1f;
}
.psol-section-desc {
	max-width: 580px;
	margin: 0 auto;
	font-size: 18px;
	line-height: 1.5;
	color: #1d1d1f;
}


/* ============================================================ HERO ====== */
.psol-hero {
	position: relative;
	padding: 192px 0 0;
	overflow: hidden;
	background: #1a65cb;
	color: #fff;
	border-bottom-left-radius: 28px;
	border-bottom-right-radius: 28px;
}
.psol-hero__bg {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
	z-index: 0;
	opacity: 1;
}
.psol-hero .psol-container { position: relative; z-index: 1; }

.psol-hero__text {
	max-width: 780px;
	margin: 0 auto;
	padding-bottom: 50px;
	text-align: center;
}
.psol-hero__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 24px;
	font-size: 12px;
	font-weight: 700;
	color: #fff;
	text-transform: uppercase;
	letter-spacing: 0.06em;
}
.psol-hero__eyebrow-icon {
	width: 32px;
	height: 32px;
	display: block;
	flex: 0 0 32px;
}

.psol-hero__title {
	margin: 0 0 16px;
	font-size: 60px;
	line-height: 1.08;
	font-weight: 500;
	letter-spacing: -0.03em;
	color: #fff;
}
.psol-hero__desc {
	margin: 0 0 36px;
	font-size: 20px;
	line-height: 1.5;
	font-weight: 300;
	color: rgba(255, 255, 255, 0.92);
}
.psol-hero__actions {
	display: flex;
	gap: 20px;
	justify-content: center;
	flex-wrap: wrap;
}
.psol-hero .psol-btn--primary {
	background: #fff;
	color: #1d1d1f;
	border-radius: 12px;
	padding: 20px 24px;
}
.psol-hero .psol-btn--primary:hover { background: #f4f4f5; color: #1d1d1f; }
.psol-hero .psol-btn--secondary {
	background: transparent;
	color: #fff;
	border-color: rgba(255, 255, 255, 0.6);
	border-radius: 12px;
	padding: 20px 24px;
}
.psol-hero .psol-btn--secondary:hover { border-color: #fff; background: rgba(255, 255, 255, 0.08); }

.psol-hero__graphic {
	width: 100%;
	max-width: 1180px;
	margin: 0 auto;
	aspect-ratio: 1180 / 480;
	border-radius: 28px 28px 0 0;
	overflow: hidden;
	background: #f4f4f5;
	box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.18);
	position: relative;
	z-index: 2;
	margin-bottom: -1px;
}
.psol-hero__graphic img,
.psol-hero__graphic .psol-embed,
.psol-hero__graphic iframe {
	width: 100%;
	height: 100%;
	display: block;
	object-fit: cover;
	border: 0;
}
.psol-embed--hero {
	width: 100%;
	height: 100%;
}
.psol-embed iframe,
.psol-embed > * {
	width: 100%;
	height: 100%;
	border: 0;
	display: block;
}

/* =========================================================== FEATURES ==== */
.psol-features {
	padding-bottom: 120px;
}
.psol-features__grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
}
.psol-feature-card {
	display: flex;
	flex-direction: column;
	padding: 36px;
	border-radius: 20px;
	background: #f5f1ea;
	min-height: 475px;
}
.psol-feature-card__media {
	width: 100%;
	aspect-ratio: 308 / 231;
	margin-bottom: 32px;
	display: flex;
	align-items: center;
	justify-content: center;
}
.psol-feature-card__media img {
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
	display: block;
}
.psol-feature-card__body {
	flex: 1;
}
.psol-feature-card__title {
	margin: 0 0 16px;
	font-size: 24px;
	font-weight: 500;
	line-height: 1.25;
	letter-spacing: -0.01em;
	color: #1d1d1f;
}
.psol-feature-card__desc {
	margin: 0;
	font-size: 15px;
	line-height: 1.5;
	color: #4b5563;
}
.psol-feature-card__link {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	margin-top: 24px;
	font-size: 14px;
	font-weight: 500;
	color: #1d1d1f;
	text-decoration: none;
}
.psol-feature-card__link:hover { text-decoration: underline; }

/* =========================================================== HOW IT WORKS */
.psol-how {
	padding-bottom: 120px;
}
.psol-how__frame {
	width: 100%;
	max-width: 1180px;
	margin: 0 auto;
	aspect-ratio: 1180 / 800;
	background: #f5f1ed;
	border-radius: 28px;
	padding: 35px 40px;
	box-sizing: border-box;
}
.psol-how__bezel {
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.12);
	border-radius: 28px;
	padding: 19px;
	box-sizing: border-box;
}
.psol-how__embed {
	width: 100%;
	height: 100%;
	background: #fff;
	border-radius: 20px;
	overflow: hidden;
	position: relative;
}
.psol-how__embed iframe,
.psol-how__embed img {
	width: 100%;
	height: 100%;
	border: 0;
	display: block;
}
.psol-how__embed img { object-fit: cover; }
.psol-how__empty {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 32px;
	text-align: center;
	color: #9ca3af;
	font-size: 14px;
	box-sizing: border-box;
}

/* =================================================================== TABS */
.psol-tabs { width: 100%; }
.psol-tabs__nav {
	display: flex;
	gap: 4px;
	border-bottom: 2px solid rgba(0, 0, 0, 0.2);
	margin-bottom: 60px;
	overflow-x: auto;
	scrollbar-width: none;
}
.psol-tabs__nav::-webkit-scrollbar { display: none; }
.psol-tabs__nav--full .psol-tabs__tab { flex: 1; min-width: 0; }
.psol-tabs__tab {
	background: transparent;
	border: none;
	padding: 20px 12px;
	font-family: 'DM Sans', sans-serif;
	font-size: 20px;
	font-weight: 500;
	color: #000;
	cursor: pointer;
	position: relative;
	white-space: nowrap;
	transition: opacity 0.15s ease;
	opacity: 0.6;
}
.psol-tabs__tab:hover { opacity: 0.85; }
.psol-tabs__tab.is-active { color: #000; opacity: 1; }
.psol-tabs__tab.is-active::after {
	content: '';
	position: absolute;
	bottom: -2px;
	left: 0;
	right: 0;
	height: 2px;
	background: #000;
}

.psol-tabs__panels { position: relative; }
.psol-tabs__panel {
	display: none;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
	gap: 50px;
	padding: 36px 0;
	align-items: center;
}
.psol-tabs__panel.is-active { display: grid; }
.psol-tabs__panel--card {
	background: #fff;
	border-radius: 20px;
	padding: 36px;
}
.psol-tabs__panel-title {
	margin: 0 0 12px;
	font-size: 28px;
	line-height: 1.2;
	font-weight: 700;
	letter-spacing: -0.01em;
}
.psol-tabs__panel-desc {
	margin: 0 0 24px;
	font-size: 16px;
	line-height: 1.55;
	color: #4b5563;
}
.psol-tabs__panel-graphic {
	width: 100%;
	aspect-ratio: 650 / 480;
	border-radius: 16px;
	overflow: hidden;
	background: #f4f4f5;
}
.psol-tabs__panel-graphic img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* ----- HOW IT WORKS — tabs variant (Figma 12104:95674) --------------------- */
.psol-tabs--how .psol-tabs__panel {
	grid-template-columns: minmax(0, 1fr) minmax(0, 680px);
	gap: 20px;
	padding: 0;
	align-items: stretch;
}
.psol-tabs--how .psol-tabs__panel-text {
	background: #fcfaf7;
	border-radius: 28px;
	padding: 36px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 36px;
}
.psol-tabs--how .psol-tabs__panel-text-inner {
	display: flex;
	flex-direction: column;
	gap: 16px;
}
.psol-tabs--how .psol-tabs__panel-title {
	margin: 0;
	font-family: 'TWK Everett', sans-serif;
	font-size: 24px;
	font-weight: 500;
	line-height: 1.2;
	letter-spacing: -0.01em;
	color: #000;
}
.psol-tabs--how .psol-tabs__panel-desc {
	margin: 0;
	font-family: 'DM Sans', sans-serif;
	font-size: 20px;
	font-weight: 300;
	line-height: 1.35;
	color: #191a23;
}
.psol-tabs--how .psol-btn--primary {
	background: #000;
	color: #fff;
	border: 2px solid #000;
	border-radius: 12px;
	font-family: 'DM Sans', sans-serif;
	font-size: 16px;
	font-weight: 500;
	padding: 10px 14px;
	gap: 6px;
	align-self: flex-start;
	height: 40px;
	line-height: 1;
}
.psol-tabs--how .psol-btn--primary:hover { background: #1d1d1f; color: #fff; }
.psol-tabs--how .psol-btn--primary svg { display: block; flex-shrink: 0; }
.psol-tabs--how .psol-tabs__panel-graphic {
	width: 100%;
	height: 480px;
	aspect-ratio: auto;
	background: #f5f1ed;
	border-radius: 28px;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
}
.psol-tabs--how .psol-tabs__panel-graphic img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* ========================================================== INDUSTRY ==== */
.psol-industry {
	position: relative;
	margin: 0 8px 80px;
	padding: 0 24px 80px;
	overflow: hidden;
	background: #01193b;
	color: #fff;
	border-radius: 28px;
}
.psol-industry__bg {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
	opacity: 1;
	z-index: 0;
	pointer-events: none;
}
.psol-industry .psol-container { position: relative; z-index: 1; }
.psol-industry .psol-section-title { color: #fff; font-size: 40px; }
.psol-industry .psol-section-desc  { color: rgba(255, 255, 255, 0.75); font-size: 20px; }
.psol-industry .psol-section-head { padding-top: 100px; padding-bottom: 40px; }

/* Tabs on dark bg */
.psol-industry .psol-tabs__nav {
	border-bottom-color: rgba(255, 255, 255, 0.18);
}
.psol-industry .psol-tabs__tab {
	color: rgba(255, 255, 255, 0.55);
	opacity: 1;
}
.psol-industry .psol-tabs__tab:hover { color: #fff; opacity: 1; }
.psol-industry .psol-tabs__tab.is-active {
	color: #fff;
	opacity: 1;
}
.psol-industry .psol-tabs__tab.is-active::after {
	background: #fff;
}

/* Content panel — text card + graphic side-by-side, both rounded */
.psol-industry .psol-tabs__panel--card {
	background: transparent;
	padding: 36px 0 0;
	gap: 20px;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr);
}
/* Industry text card — Figma 12256:33172. Solid blue-900 wash, 28px radius,
   36px padding, gap-36px between title+desc and the CTA. */
.psol-industry .psol-tabs__panel-text {
	background: #000b1e;
	border-radius: 28px;
	padding: 36px;
	align-self: stretch;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	gap: 36px;
}
.psol-industry .psol-tabs__panel-title {
	font-family: 'TWK Everett', sans-serif;
	color: #fff;
	font-size: 24px;
	font-weight: 500;
	line-height: 1.2;
	margin: 0 0 16px;
}
.psol-industry .psol-tabs__panel-desc {
	font-family: 'DM Sans', sans-serif;
	color: #fff;
	font-size: 20px;
	font-weight: 300;
	line-height: 1.35;
	margin: 0;
}
.psol-industry .psol-tabs__panel-graphic {
	aspect-ratio: 680 / 480;
	border-radius: 28px;
	overflow: hidden;
	background: #02224a;
}

/* White rounded-rect book-demo button with black text + chevron icon */
.psol-industry .psol-btn--primary {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: #fff;
	color: #000;
	border-radius: 12px;
	height: 40px;
	padding: 8px 12px;
	font-family: 'DM Sans', sans-serif;
	font-size: 16px;
	font-weight: 500;
	width: max-content;
}
.psol-industry .psol-btn--primary:hover {
	background: #f4f4f5;
	color: #000;
}
.psol-industry .psol-btn--primary svg { width: 16px; height: 16px; }

/* ============================================================ CALCULATOR */
.psol-calc {
	padding: 80px 0 120px;
}
/* Warm-neutral "cushion" wrapper around the form + result; optional pattern image overlays as bg */
.psol-calc .dirv2-container {
	max-width: 1180px;
	background-color: #f5f1ed;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	border-radius: 28px;
	padding: 36px;
	box-sizing: border-box;
}
/* Keep the left form card at its natural height — without this the grid's default
 * align-items: stretch makes it grow to match the (taller) result column once calc'd. */
.psol-calc .dirv2-calc__form {
	align-self: start;
}
/* Placeholder state ONLY — sit directly on the cream cushion (no white card).
 * Once calculated, directory-v2.js swaps the placeholder for the result panel,
 * at which point the result column gets its default white card back (matches Figma). */
.psol-calc .dirv2-calc__result:has(.psol-calc__placeholder) {
	background: transparent !important;
	border: none !important;
	box-shadow: none !important;
	padding: 0 !important;
	min-height: 0 !important;
}
.psol-calc__placeholder {
	background: transparent !important;
	border: none !important;
}
/* Title + subtitle inside the right (placeholder) column — matches Figma */
.psol-calc__placeholder {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 16px;
	text-align: center;
	padding: 24px;
}
.psol-calc__avatars {
	max-width: 240px;
	height: auto;
	display: block;
	margin: 0 auto 8px;
}
.psol-calc__title {
	font-size: 48px;
	line-height: 1.1;
	font-weight: 500;
	letter-spacing: -0.02em;
	color: #1d1d1f;
	margin: 0;
}
.psol-calc__subtitle {
	font-size: 16px;
	line-height: 1.5;
	color: #4b5563;
	max-width: 420px;
	margin: 0 auto;
}
/* Hide the default arrow/text placeholder from directory-v2.css when we replace its content */
.psol-calc__placeholder > svg,
.psol-calc__placeholder > span,
.psol-calc__placeholder .dirv2-calc__illustration { display: none; }

@media (max-width: 980px) {
	.psol-calc .dirv2-container { padding: 24px; }
	.psol-calc__title { font-size: 30px; }
}

/* ============================================================ WHY CHOOSE
 * Figma 12266:90331 — cream cushion, centered title + subtitle,
 * 3-up card grid with eyebrow / title / desc / checkmark bullets / CTA. */
.psol-why {
	position: relative;
	padding: 100px 0;
	background: #fcfaf7;
	overflow: hidden;
}
.psol-why__bg {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
	z-index: 0;
	pointer-events: none;
}
.psol-why .psol-container { position: relative; z-index: 1; }
.psol-why__head {
	padding: 0 0 60px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
	max-width: 780px;
}
.psol-why__head .psol-section-title {
	margin: 0;
	font-family: 'TWK Everett', sans-serif;
	font-size: 48px;
	font-weight: 500;
	line-height: 1.1;
	letter-spacing: -0.03em;
	color: #000;
}
.psol-why__subtitle {
	margin: 0;
	font-family: 'DM Sans', sans-serif;
	font-size: 28px;
	font-weight: 300;
	line-height: 1.2;
	color: #000;
}
.psol-why__grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 20px;
	max-width: 1180px;
	margin-inline: auto;
}
.psol-why__grid--1 { grid-template-columns: minmax(0, 380px); justify-content: center; }
.psol-why__grid--2 { grid-template-columns: repeat(2, minmax(0, 380px)); justify-content: center; }
.psol-why__grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.psol-why-card {
	display: flex;
	flex-direction: column;
	gap: 24px;
	padding: 36px;
	background: #fff;
	border-radius: 28px;
	box-shadow: none;
}
.psol-why-card__eyebrow {
	margin: 0;
	font-family: 'TWK Everett', sans-serif;
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: #000;
}
.psol-why-card__body {
	display: flex;
	flex-direction: column;
	gap: 20px;
	flex: 1;
}
.psol-why-card__title {
	margin: 0;
	font-family: 'TWK Everett', sans-serif;
	font-size: 36px;
	font-weight: 500;
	line-height: 1.1;
	letter-spacing: -0.01em;
	color: #000;
	/* Reserve ~2 lines so titles align across cards (Figma 12266:90339 h-96px). */
	min-height: 88px;
}
.psol-why-card__desc {
	margin: 0;
	font-family: 'DM Sans', sans-serif;
	font-size: 20px;
	font-weight: 300;
	line-height: 1.35;
	color: #191a23;
	/* Reserve ~3 lines so descriptions align across cards (Figma 12266:90350 h-104px). */
	min-height: 104px;
}
.psol-why-card__bullets {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 20px;
}
.psol-why-card__bullet {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	font-family: 'DM Sans', sans-serif;
	font-size: 16px;
	font-weight: 300;
	line-height: 1.4;
	color: #191a23;
}
.psol-why-card__check {
	flex: 0 0 21px;
	width: 21px;
	height: 21px;
	margin-top: 2px;
	display: block;
}
.psol-why-card__btn {
	margin-top: auto;
}

/* Card CTA — restyle .psol-btn variants inside Why cards to match Figma:
 * - primary: solid black pill, 48px tall, white text
 * - secondary: warm-neutral cream pill, black text, right chevron */
.psol-why-card .psol-btn {
	height: 48px;
	padding: 12px 24px;
	border-radius: 12px;
	font-family: 'DM Sans', sans-serif;
	font-size: 18px;
	font-weight: 500;
	line-height: 1;
	gap: 6px;
}
.psol-why-card .psol-btn--primary {
	background: #000;
	color: #fff;
	border-color: #000;
}
.psol-why-card .psol-btn--primary:hover { background: #1d1d1f; color: #fff; }
.psol-why-card .psol-btn--secondary {
	background: #ede8e4;
	color: #000;
	border-color: transparent;
	padding-right: 16px;
}
.psol-why-card .psol-btn--secondary:hover { background: #e3ddd6; color: #000; }
.psol-why-card .psol-btn--outline {
	background: transparent;
	color: #000;
	border: 2px solid #000;
	padding-right: 16px;
}
.psol-why-card .psol-btn--outline:hover {
	background: #000;
	color: #fff;
	border-color: #000;
}
.psol-why-card .psol-btn svg { display: block; flex-shrink: 0; }

/* ========================================================== BOOK DEMO ==== */
.psol-demo {
	padding: 80px 0 100px;
}
.psol-demo__card {
	position: relative;
	max-width: 1180px;
	margin: 0 auto;
	height: 373px;
	background: #e9defc;
	border-radius: 28px;
	overflow: hidden;
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 476px);
	align-items: stretch;
	color: #000;
}
.psol-demo__pattern {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
	mix-blend-mode: darken;
	opacity: 0.5;
	pointer-events: none;
	z-index: 0;
}
.psol-demo__body {
	position: relative;
	z-index: 1;
	padding: 36px 36px 60px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 24px;
}
.psol-demo__label {
	margin: 0;
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: #000;
}
.psol-demo__title {
	margin: 0;
	font-size: 48px;
	line-height: 1.1;
	font-weight: 500;
	letter-spacing: -0.03em;
	color: #000;
	max-width: 540px;
}
.psol-demo__btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	align-self: flex-start;
	background: #fff;
	color: #000;
	font-size: 18px;
	font-weight: 500;
	text-decoration: none;
	padding: 18px 20px 18px 24px;
	border-radius: 12px;
	transition: background-color 0.15s ease, transform 0.15s ease;
}
.psol-demo__btn:hover { background: #fafafa; color: #000; }
.psol-demo__btn svg { display: block; }
.psol-demo__graphic {
	position: relative;
	z-index: 1;
	overflow: hidden;
	height: 100%;
}
.psol-demo__graphic img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: right bottom;
}
@media (max-width: 900px) {
	.psol-demo__card {
		grid-template-columns: 1fr;
		height: auto;
		min-height: 0;
	}
	.psol-demo__title { font-size: 32px; }
	.psol-demo__body { padding: 36px 28px; }
	.psol-demo__graphic { height: 280px; }
}

/* ============================================================ Responsive */
@media (max-width: 980px) {
	.psol-hero { padding: 130px 0 0; border-bottom-left-radius: 20px; border-bottom-right-radius: 20px; }
	.psol-hero__title { font-size: 44px; }
	.psol-section-title { font-size: 36px; }
	.psol-section-head { padding: 70px 0 28px; }
	.psol-features__grid,
	.psol-why__grid,
	.psol-why__grid--4 { grid-template-columns: repeat(2, 1fr); }
	.psol-why__head .psol-section-title { font-size: 36px; }
	.psol-why__subtitle { font-size: 22px; }
	.psol-why-card__title { font-size: 28px; min-height: 0; }
	.psol-why-card__desc { font-size: 17px; min-height: 0; }
	.psol-tabs__panel { grid-template-columns: 1fr; gap: 24px; padding: 24px 0; }
	.psol-tabs__panel--card { padding: 24px; }
	.psol-hero__graphic,
	.psol-how__frame { aspect-ratio: 4 / 3; }
	.psol-how__frame { padding: 20px 24px; }
	.psol-how__bezel { padding: 10px; }
}

@media (max-width: 640px) {
	.psol-container { padding: 0 20px; }
	.psol-hero { padding: 110px 0 0; }
	.psol-hero__title { font-size: 34px; }
	.psol-hero__desc { font-size: 17px; }
	.psol-section-title { font-size: 28px; }
	.psol-section-desc { font-size: 16px; }
	.psol-features__grid,
	.psol-why__grid { grid-template-columns: 1fr; }
	.psol-feature-card,
	.psol-why-card { padding: 24px; }
	.psol-tabs__tab { font-size: 15px; padding: 14px 16px; }
	.psol-demo__card { padding: 48px 24px; }
	.psol-demo__title { font-size: 28px; }
	.psol-btn { padding: 16px 22px; font-size: 15px; }
	.psol-btn--lg { padding: 18px 26px; font-size: 16px; }
}

/* ============================================================================
 * SOLUTION-ADDITIONAL template
 * Figma frames 12310:36831 / 12310:36847 / 12313:40298 / 12310:36894 /
 *              12310:38677 / 12310:38480
 * Self-contained `.psola-*` namespace. Pages can still pick up the shared
 * .psol-how, .psol-tabs, .psol-demo components from above.
 * ========================================================================== */
.psola-page {
	color: #1d1d1f;
	background: #fff;
	font-family: 'DM Sans', 'Inter', system-ui, sans-serif;
}
.psola-page *,
.psola-page *::before,
.psola-page *::after { box-sizing: border-box; }

.psola-eyebrow {
	margin: 0 0 12px;
	font-family: 'TWK Everett', sans-serif;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: #000;
}
.psola-section-head {
	max-width: 780px;
	margin: 0 auto;
	padding: 100px 0 36px;
	text-align: center;
}
.psola-section-title {
	margin: 0 0 16px;
	font-family: 'TWK Everett', sans-serif;
	font-size: 48px;
	font-weight: 500;
	line-height: 1.1;
	letter-spacing: -0.03em;
	color: #000;
}
.psola-section-desc {
	max-width: 620px;
	margin: 0 auto;
	font-family: 'DM Sans', sans-serif;
	font-size: 20px;
	font-weight: 300;
	line-height: 1.35;
	color: #1d1d1f;
}

/* Buttons */
.psola-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	height: 48px;
	padding: 12px 20px;
	border: 2px solid transparent;
	border-radius: 12px;
	font-family: 'DM Sans', sans-serif;
	font-size: 16px;
	font-weight: 500;
	line-height: 1;
	text-decoration: none;
	cursor: pointer;
	transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.psola-btn svg { display: block; flex-shrink: 0; }
.psola-btn--primary {
	background: #000;
	color: #fff;
	border-color: #000;
}
.psola-btn--primary:hover { background: #1d1d1f; color: #fff; }
.psola-btn--ghost {
	background: transparent;
	color: #000;
}
.psola-btn--ghost:hover { color: #000; text-decoration: underline; }
.psola-btn--text {
	background: transparent;
	color: #000;
	padding: 0;
	height: auto;
	border: 0;
	gap: 4px;
}
.psola-btn--text:hover { text-decoration: underline; }

/* ----------------------------------------------------------------- HERO === */
.psola-hero {
	position: relative;
	background: #fcfaf7;
	padding: 120px 0 80px;
	border-bottom-left-radius: 28px;
	border-bottom-right-radius: 28px;
	overflow: hidden;
}
.psola-hero__bg {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	z-index: 0;
	pointer-events: none;
}
.psola-hero .psola-hero__inner { position: relative; z-index: 1; }
.psola-hero__inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
	gap: 60px;
	align-items: center;
}
.psola-hero__text { max-width: 480px; }
.psola-hero__title {
	margin: 0 0 16px;
	font-family: 'TWK Everett', sans-serif;
	font-size: 48px;
	font-weight: 500;
	line-height: 1.1;
	letter-spacing: -0.03em;
	color: #000;
}
.psola-hero__desc {
	margin: 0 0 32px;
	font-family: 'DM Sans', sans-serif;
	font-size: 18px;
	font-weight: 300;
	line-height: 1.5;
	color: #1d1d1f;
}
.psola-hero__actions {
	display: flex;
	gap: 16px;
	flex-wrap: wrap;
}
.psola-hero__graphic {
	border-radius: 28px;
	overflow: hidden;
	aspect-ratio: 4 / 3;
	background: #f5f1ed;
}
.psola-hero__graphic img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* ----------------------------------------------------------- FEATURES === */
.psola-features {
	padding: 0 0 100px;
}
.psola-features__grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 48px 60px;
	max-width: 1100px;
	margin-inline: auto;
}
.psola-feature {
	display: flex;
	flex-direction: column;
	gap: 16px;
}
.psola-feature__icon {
	width: 40px;
	height: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
}
.psola-feature__icon img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}
.psola-feature__title {
	margin: 0;
	font-family: 'DM Sans', sans-serif;
	font-size: 18px;
	font-weight: 600;
	color: #000;
}
.psola-feature__desc {
	margin: 0;
	font-family: 'DM Sans', sans-serif;
	font-size: 15px;
	font-weight: 300;
	line-height: 1.45;
	color: #4b5563;
}

/* ------------------------------------------------------ SPLIT SECTIONS === */
.psola-splits {
	padding-bottom: 60px;
}
.psola-split {
	display: grid;
	grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
	gap: 80px;
	align-items: center;
	padding: 60px 0;
}
.psola-split--flip { direction: rtl; }
.psola-split--flip > * { direction: ltr; }
.psola-split__text {
	max-width: 480px;
}
.psola-split__title {
	margin: 0 0 12px;
	font-family: 'TWK Everett', sans-serif;
	font-size: 36px;
	font-weight: 500;
	line-height: 1.1;
	letter-spacing: -0.02em;
	color: #000;
}
.psola-split__desc {
	margin: 0 0 20px;
	font-family: 'DM Sans', sans-serif;
	font-size: 17px;
	font-weight: 300;
	line-height: 1.5;
	color: #4b5563;
}
.psola-split__graphic {
	background: #f5f1ed;
	border-radius: 28px;
	overflow: hidden;
	aspect-ratio: 5 / 4;
}
.psola-split__graphic img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* Cost calculator on the Solution-Additional template reuses .psol-calc /
 * .dirv2-calc styles defined above — no extra rules needed here. */

/* ---------------------------------------------------------- FAQ === */
.psola-faq {
	background: #f5f1ed;
	padding: 100px 0;
	border-radius: 28px;
	margin: 0 8px 80px;
}
.psola-faq__inner {
	display: grid;
	grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.4fr);
	gap: 80px;
	align-items: start;
}
.psola-faq__head { max-width: 360px; }
.psola-faq__title {
	margin: 0 0 16px;
	font-family: 'TWK Everett', sans-serif;
	font-size: 40px;
	font-weight: 500;
	line-height: 1.1;
	letter-spacing: -0.02em;
	color: #000;
}
.psola-faq__desc {
	margin: 0;
	font-family: 'DM Sans', sans-serif;
	font-size: 16px;
	font-weight: 300;
	line-height: 1.5;
	color: #4b5563;
}
.psola-faq__list {
	list-style: none;
	margin: 0;
	padding: 0;
}
.psola-faq__item {
	border-bottom: 1px solid rgba(0, 0, 0, 0.15);
}
.psola-faq__item:last-child { border-bottom: 0; }
.psola-faq__item details {
	padding: 20px 0;
}
.psola-faq__item details[open] { padding-bottom: 24px; }
.psola-faq__question {
	list-style: none;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 16px;
	cursor: pointer;
	font-family: 'DM Sans', sans-serif;
	font-size: 17px;
	font-weight: 500;
	color: #000;
}
.psola-faq__question::-webkit-details-marker { display: none; }
.psola-faq__chev {
	flex-shrink: 0;
	transition: transform 0.2s ease;
}
.psola-faq__item details[open] .psola-faq__chev {
	transform: rotate(-180deg);
}
.psola-faq__answer {
	margin-top: 12px;
	font-family: 'DM Sans', sans-serif;
	font-size: 15px;
	font-weight: 300;
	line-height: 1.55;
	color: #4b5563;
	max-width: 720px;
}
.psola-faq__answer p { margin: 0 0 8px; }

/* --------------------------------------------------------- Responsive === */
@media (max-width: 980px) {
	.psola-hero { padding: 80px 0 60px; }
	.psola-hero__inner { grid-template-columns: 1fr; gap: 32px; }
	.psola-hero__title { font-size: 36px; }
	.psola-section-title { font-size: 36px; }
	.psola-section-head { padding: 60px 0 28px; }
	.psola-features__grid { grid-template-columns: repeat(2, 1fr); gap: 36px 32px; }
	.psola-split { grid-template-columns: 1fr; gap: 24px; padding: 32px 0; direction: ltr; }
	.psola-split--flip > * { direction: ltr; }
	.psola-split__title { font-size: 28px; }
	.psola-faq { padding: 60px 24px; margin: 0 0 60px; border-radius: 0; }
	.psola-faq__inner { grid-template-columns: 1fr; gap: 24px; }
	.psola-faq__title { font-size: 30px; }
}
@media (max-width: 640px) {
	.psola-hero__title { font-size: 28px; }
	.psola-features__grid { grid-template-columns: 1fr; }
	.psola-btn { font-size: 14px; height: 44px; padding: 10px 16px; }
}

/* ============================================================================
   Worksuite pill + Customer logos — rendered inside the Features section
   header on both Solution templates. Each section is independently toggleable
   per page via ACF (see acf-json/group_psol_extras.json).
   Worksuite pill design: Figma 12422:109826.
   ========================================================================== */

.psol-worksuite {
	display: flex;
	justify-content: center;
	margin: 0 auto;
	padding-top: 100px;
}
/* When the worksuite pill is the first child of .psol-container (because it
   sits above logos + section-head), it provides the section's top breathing
   room. The section-head following the logos can then drop its own top
   padding — keep enough gap so the title isn't crowded against the logos. */
.psol-worksuite + .psol-logos + .psol-section-head,
.psol-worksuite + .psol-logos + .psola-section-head,
.psol-logos + .psol-section-head,
.psol-logos + .psola-section-head,
.psol-worksuite + .psol-section-head,
.psol-worksuite + .psola-section-head {
	padding-top: 150px;
}
.psol-worksuite__pill {
	display: inline-flex;
	align-items: center;
	gap: 16px;
	padding: 16px;
	min-width: 437px;
	max-width: 100%;
	background: #f5f1ed;
	border-radius: 12px;
	color: #000000;
	text-decoration: none;
	box-sizing: border-box;
	transition: background 0.2s ease;
}
.psol-worksuite__pill--link:hover {
	background: #ede8e4;
}
.psol-worksuite__logo {
	display: inline-flex;
	align-items: center;
	justify-content: flex-start;
	flex: 0 0 150px;
	width: 150px;
	height: 20px;
}
.psol-worksuite__logo img {
	display: block;
	width: 150px;
	height: 20px;
	max-width: 150px;
	max-height: 20px;
	object-fit: contain;
	object-position: left center;
}
.psol-worksuite__logo-fallback {
	font-family: 'TWK Everett', 'DM Sans', sans-serif;
	font-size: 18px;
	font-weight: 700;
	letter-spacing: -0.01em;
	color: #000000;
	line-height: 20px;
}
.psol-worksuite__caption {
	flex: 1 1 auto;
	min-width: 0;
	font-family: 'DM Sans', sans-serif;
	font-size: 13px;
	font-weight: 300;
	line-height: 1.3;
	letter-spacing: -0.005em;
	color: #000000;
	text-align: left;
	font-variation-settings: 'opsz' 14;
}

.psol-logos {
	margin: 60px auto 0;
}
.psol-logos__eyebrow {
	margin: 0 0 32px;
	text-align: center;
	font-family: 'DM Sans', sans-serif;
	font-size: 14px;
	font-weight: 500;
	color: #656672;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}
.psol-logos__grid {
	list-style: none;
	margin: 0 auto;
	padding: 0;
	width: 1180px;
	max-width: 100%;
	height: 189px;
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	grid-template-rows: minmax(0, 1fr) minmax(0, 1fr);
	row-gap: 60px;
	column-gap: 36px;
	align-items: stretch;
	justify-items: stretch;
}
.psol-logos__item {
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 0;
	min-height: 0;
	overflow: hidden;
}
.psol-logos__item img {
	display: block;
	max-width: 80%;
	max-height: 80%;
	width: auto;
	height: auto;
	object-fit: contain;
	filter: grayscale(100%);
	opacity: 1;
}

@media (max-width: 980px) {
	.psol-logos__grid {
		width: 100%;
		height: auto;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		grid-template-rows: repeat(4, minmax(60px, auto));
		row-gap: 40px;
		column-gap: 24px;
	}
}

@media (max-width: 640px) {
	.psol-worksuite__pill {
		flex-direction: column;
		gap: 8px;
		padding: 14px 18px;
		min-width: 0;
	}
	.psol-worksuite__caption {
		flex: 0 1 auto;
		text-align: center;
	}
	.psol-logos { margin-top: 36px; }
	.psol-logos__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		grid-template-rows: repeat(6, minmax(60px, auto));
		row-gap: 32px;
		column-gap: 20px;
	}
}