:root {
	--wb-cream: #fcf8f1;
	--wb-paper: #fbfbe2;
	--wb-paper-warm: #fffeca;
	--wb-track: #f0efbf;
	--wb-track-deep: #e9e78a;
	--wb-olive: #63623f;
	--wb-olive-soft: #67664c;
	--wb-copy: #56564f;
	--wb-card-border: #bab853;
	--wb-border: #bfbfa1;
	--wb-ring: #d4d27d;
	--wb-coral: #ffa095;
	--wb-coral-dark: #ff8578;
	--wb-field: #ededcc;
	--wb-shadow: 0 3px 10px rgba(145, 142, 82, 0.34);

	/* Design reference frame width. Fluid dimensions are expressed as
	 * calc(<designPx> / var(--wb-ref) * 100cqw) inside a container-query context,
	 * replacing hand-computed viewport-vw coefficients. See tests/responsive/matrix.mjs. */
	--wb-ref: 430;
}

.workbody-quiz-app,
.workbody-quiz-app * {
	box-sizing: border-box;
}

.workbody-quiz-app {
	background: var(--wb-cream);
	color: var(--wb-copy);
	font-family: "Work Sans", sans-serif;
	margin: 0 auto;
	max-width: 430px;
	min-height: 100svh;
	overflow: hidden;
	position: relative;
	width: min(100%, 430px);
}

.workbody-quiz-app.is-splash,
.workbody-quiz-app.is-form,
.workbody-quiz-app.is-result {
	background: transparent;
}

.workbody-quiz-app.is-splash {
	min-height: 100svh;
}

.workbody-quiz-app *,
.workbody-quiz-app *::before,
.workbody-quiz-app *::after {
	box-sizing: border-box;
}

.workbody-screen {
	min-height: 100svh;
	padding: 12px 18px 32px;
	position: relative;
}

.workbody-screen > * {
	position: relative;
	z-index: 1;
}

.workbody-screen-main,
.workbody-screen-footer {
	position: relative;
	z-index: 2;
}

.workbody-screen-footer {
	display: flex;
	justify-content: center;
}

.workbody-screen-footer .workbody-screen-logo {
	bottom: auto;
	left: auto;
	margin: 0 auto;
	position: relative;
	right: auto;
}

.workbody-screen-logo {
	align-items: center;
	bottom: 24px;
	display: flex;
	justify-content: center;
	left: 0;
	position: absolute;
	right: 0;
	z-index: 5;
}

.workbody-screen-logo a {
	background: #F9F9F2;
	/*border-radius: 10px;*/
	display: inline-flex;
	line-height: 0;
	padding: 10px;
}

.workbody-screen-logo img {
	display: block;
	filter: drop-shadow(0 2px 4px rgba(88, 79, 36, 0.18));
	height: auto;
	width: 95px;
}

.workbody-screen-logo__fallback {
	background: #ff2720;
	border-radius: 0 0 5px 5px;
	color: #fff;
	display: inline-block;
	font: 700 24px/0.78 "Work Sans", sans-serif;
	letter-spacing: 0;
	padding: 7px 8px 4px;
	text-transform: lowercase;
	transform: skew(-7deg);
}

.workbody-screen-logo__fallback span {
	display: block;
	font-size: 8px;
	letter-spacing: 0.2px;
	line-height: 1;
	text-align: right;
}

.workbody-title,
.workbody-heading,
.workbody-button,
.workbody-composition h3,
.workbody-composition h4,
.workbody-result-card h3,
.workbody-buddies-card h3 {
	font-family: "Fredoka", "Work Sans", sans-serif;
	font-variation-settings: "wdth" 100;
}

.workbody-title,
.workbody-heading {
	color: var(--wb-olive);
	font-size: 30px;
	font-weight: 500;
	letter-spacing: 0;
	line-height: 1.09;
	margin: 0;
	text-align: center;
}

.workbody-copy {
	color: var(--wb-copy);
	font-size: 16px;
	line-height: normal;
	margin: 10px auto 0;
	max-width: 334px;
	text-align: center;
}

.workbody-actions {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	justify-content: center;
	margin: 20px 0 0;
}

/* 366px inside a 430px frame leaves 32px side margins and keeps that ratio on narrower screens. */
.workbody-panel {
	background: var(--wb-paper);
	border: 1.5px dashed var(--wb-border);
	border-radius: 19px;
	box-shadow: 0 3px 10px #dddbba;
	margin-left: auto;
	margin-right: auto;
	padding: 30px 20px;
	width: min(calc(100% - 28px), 366px);
}

.workbody-button {
	align-items: center;
	background: var(--wb-coral);
	border: 2px solid #fff;
	border-radius: 46px;
	color: #fff;
	cursor: pointer;
	display: inline-flex;
	filter: drop-shadow(0 3px 9.5px #ffc9c0);
	font-size: 14px;
	font-weight: 600;
	justify-content: center;
	line-height: normal;
	min-height: 42px;
	padding: 10px 35px;
	transition: transform 160ms ease, filter 160ms ease, opacity 160ms ease;
}

.workbody-button:hover:not(:disabled) {
	filter: drop-shadow(0 5px 13px #ffc9c0);
	transform: translateY(-1px);
}

.workbody-button:disabled {
	cursor: not-allowed;
	opacity: 0.58;
}

.workbody-button:active:not(:disabled),
.workbody-question-button:active:not(:disabled) {
	transform: translateY(0) scale(0.985);
}

@keyframes workbody-fade-rise {
	from {
		opacity: 0;
		transform: translateY(16px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes workbody-soft-pop {
	0% {
		opacity: 0;
		transform: scale(0.92);
	}

	70% {
		opacity: 1;
		transform: scale(1.035);
	}

	100% {
		opacity: 1;
		transform: scale(1);
	}
}

@keyframes workbody-soft-pop-center {
	0% {
		opacity: 0;
		transform: translateX(-50%) scale(0.92);
	}

	70% {
		opacity: 1;
		transform: translateX(-50%) scale(1.035);
	}

	100% {
		opacity: 1;
		transform: translateX(-50%) scale(1);
	}
}

.workbody-question-screen.is-question-transition .workbody-question-progress,
.workbody-question-screen.is-question-transition .workbody-question-hero-v4,
.workbody-question-screen.is-question-transition .workbody-question-panel-v4 {
	animation: workbody-fade-rise 440ms cubic-bezier(0.22, 1, 0.36, 1) backwards;
}

.workbody-question-screen.is-question-transition .workbody-question-hero-v4 {
	animation-delay: 110ms;
}

.workbody-question-screen.is-question-transition .workbody-question-panel-v4 {
	animation-delay: 180ms;
}

.workbody-question-screen.is-question-transition .workbody-question-progress-step.is-current {
	animation: workbody-soft-pop 360ms cubic-bezier(0.22, 1, 0.36, 1) 180ms backwards;
}

.workbody-question-screen.is-question-transition .workbody-option-v4 {
	animation: workbody-fade-rise 340ms cubic-bezier(0.22, 1, 0.36, 1) backwards;
	animation-delay: 240ms;
}

.workbody-question-screen.is-question-transition .workbody-option-v4:nth-child(2) {
	animation-delay: 295ms;
}

.workbody-question-screen.is-question-transition .workbody-option-v4:nth-child(3) {
	animation-delay: 350ms;
}

.workbody-question-screen.is-question-transition .workbody-option-v4:nth-child(4) {
	animation-delay: 405ms;
}

.workbody-splash {
	/* footer city pattern lives on the section itself (no separate background layer) */
	background: url(../img/splash-v5-footer.webp) center bottom / 100% auto no-repeat, var(--wb-cream);
	container-type: inline-size;   /* query container for the splash hero (no padding → cqw == frame width) */
	display: block;
	min-height: 100svh;
	overflow: hidden;
	padding: 0;
	position: relative;
}

.workbody-splash-v4-hero {
	height: min(calc(355 / var(--wb-ref) * 100cqw), 355px); /* container-relative (was 82.56vw) */
	overflow: hidden;
	position: relative;
	width: 100%;
	z-index: 1;
}

.workbody-splash-v4-hero::after {
	background: linear-gradient(180deg, rgba(252, 248, 241, 0) 0%, #fcf8f1 100%);
	bottom: -1px;
	content: "";
	height: 22px;
	left: 0;
	pointer-events: none;
	position: absolute;
	right: 0;
	z-index: 2;
}

.workbody-splash-v4-hero-img {
	display: block;
	height: 100%;
	object-fit: cover;
	object-position: center top;
	pointer-events: none;
	width: 100%;
}

.workbody-splash-top-logo-link {
	border-radius: 4px;
	height: 14.37%;
	left: 3.95%;
	position: absolute;
	top: 4.51%;
	width: 22.09%;
	z-index: 4;
}

.workbody-splash-top-logo-link:focus-visible {
	outline: 2px solid #003d70;
	outline-offset: 3px;
}

.workbody-brand {
	background: #ff2720;
	border-radius: 0 0 5px 5px;
	color: #fff;
	font: 700 30px/0.78 "Work Sans", sans-serif;
	letter-spacing: 0;
	padding: 8px 9px 4px;
	position: absolute;
	right: 16px;
	text-transform: lowercase;
	top: 14px;
	transform: skew(-7deg);
}

.workbody-brand span {
	display: block;
	font-size: 9px;
	letter-spacing: 0.2px;
	line-height: 1;
	text-align: right;
}

.workbody-brand-logo {
	filter: drop-shadow(0 2px 4px rgba(88, 79, 36, 0.2));
	height: auto;
	position: absolute;
	right: 16px;
	top: 14px;
	width: 80px;
	z-index: 3;
}

.workbody-splash-v4-hero .workbody-brand-logo {
	left: 16px;
	right: auto;
	top: 16px;
	width: 79px;
}

.workbody-splash-v4-content {
	margin: 10px auto;
	position: relative;
	text-align: center;
	width: min(calc(100% - 28px), 379px);
	z-index: 3;
}

.workbody-splash-main {
	position: relative;
	z-index: 4;
}

.workbody-splash .workbody-screen-logo {
	bottom: auto;
	left: auto;
	margin: 0 auto;
	pointer-events: auto;
	position: relative;
	right: auto;
}

.workbody-splash-v4-content .workbody-title {
	color: #003d70;
	font-family: "Poppins", "Fredoka", "Work Sans", sans-serif;
	font-size: 25px;
	font-weight: 600;
	line-height: 1.05;
	margin: 0 auto;
	max-width: 295px;
	text-transform: uppercase;
}

.workbody-splash-v4-copy {
	color: var(--wb-copy);
	font-family: "Fredoka", "Work Sans", sans-serif;
	font-size: 18px;
	font-weight: 400;
	line-height: normal;
	margin: 15px auto 0;
	max-width: 379px;
}

.workbody-splash-v4-copy p {
	margin: 0 0 clamp(12px, 2.25svh, 18px);
}

.workbody-splash-v4-copy p:last-child {
	margin-bottom: 0;
}

.workbody-splash-v4-content .workbody-actions {
	margin-top: clamp(12px, 2.5svh, 20px);
}

.workbody-button--splash {
	background: linear-gradient(151deg, #f11e0b 34.46%, #f08278 98.32%);
	border: 0;
	box-shadow: none;
	filter: drop-shadow(0 3.071px 9.521px #e3e2d0);
	font-family: "Fredoka", "Work Sans", sans-serif;
	font-size: 15.36px;
	font-weight: 600;
	min-height: 43px;
	padding: 10px 35px;
}

.workbody-splash-v4-content .workbody-button--splash {
	font-family: "Fredoka", "Work Sans", sans-serif;
	font-size: 15.36px;
	font-weight: 600;
	line-height: normal;
}

.workbody-question-copy {
	color: var(--wb-copy);
	font-family: "Fredoka", "Work Sans", sans-serif;
	font-size: 19px;
	font-weight: 400;
	line-height: 1.1;
	padding: 0 7px;
}

.workbody-question-copy p {
	margin: 0 0 13px;
}

.workbody-options {
	display: grid;
	gap: 11px;
	margin-top: 18px;
}

.workbody-option-copy {
	font-size: 17px;
	font-weight: 500;
	line-height: 1.18;
	max-width: 272px;
}

.workbody-quiz-app.is-question {
	background: #f9f9f2;
}

.workbody-question-screen {
	background: #f9f9f2;
	isolation: isolate;
	min-height: 100svh;
	overflow: hidden;
	padding: 18px 0 100px;
}

.workbody-question-main {
	position: static;
}

.workbody-question-screen::after {
	/* footer city pattern on the section itself (no separate background layer) */
	background: url(../img/question-v4-footer-bg-blended.webp) center bottom / 100% auto no-repeat;
	bottom: 0;
	content: "";
	height: 360px;
	left: 0;
	pointer-events: none;
	position: absolute;
	right: 0;
	z-index: 0;
}

.workbody-question-footer {
	bottom: 0;
	left: 0;
	padding-bottom: 12px;
	padding-top: 12px;
	position: absolute;
	right: 0;
	z-index: 5;
	min-height: 95px;
}

.workbody-question-progress {
	--wb-progress-track: min(360px, calc(100vw - 24px));
	--wb-progress-col: calc(var(--wb-progress-track) / 10);
	--wb-progress-step: min(33px, calc(var(--wb-progress-col) - 3px));
	align-items: center;
	display: flex;
	flex-direction: column;
	gap: 7px;
	margin: 0 auto;
	position: relative;
	width: var(--wb-progress-track);
	z-index: 4;
}

.workbody-question-progress p {
	color: var(--wb-olive);
	font-family: "Fredoka", "Work Sans", sans-serif;
	font-size: 14px;
	font-weight: 500;
	line-height: 1.09;
	margin: 0;
	text-align: center;
}

.workbody-question-progress-steps {
	display: grid;
	grid-template-columns: repeat(10, minmax(0, 1fr));
	height: 33px;
	width: var(--wb-progress-track);
}

.workbody-question-progress-step {
	align-items: center;
	clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
	display: inline-flex;
	height: var(--wb-progress-step);
	justify-content: center;
	justify-self: center;
	position: relative;
	width: var(--wb-progress-step);
}

.workbody-question-progress-step.is-complete,
.workbody-question-progress-step.is-current {
	background: #d3ce16;
}

.workbody-question-progress-step.is-upcoming {
	background: #d8d6bd;
}

.workbody-question-progress-number {
	color: #fff;
	font-family: "Fredoka", "Work Sans", sans-serif;
	font-size: 15px;
	font-weight: 500;
	line-height: 1;
}

.workbody-question-progress-check {
	border-bottom: 3px solid #fff;
	border-left: 3px solid #fff;
	height: 9px;
	transform: rotate(-45deg) translate(1px, -1px);
	width: 15px;
}

.workbody-question-hero-v4 {
	height: 335px;
	margin: 10px auto 0;
	overflow: hidden;
	position: relative;
	width: 100%;
	z-index: 1;
}

.workbody-question-hero-v4::after {
	background: rgba(0, 0, 0, 0.08);
	content: "";
	inset: 0;
	position: absolute;
}

.workbody-question-hero-v4 img {
	display: block;
	height: 100%;
	object-fit: cover;
	width: 100%;
}

.workbody-question-panel-v4 {
	background: #f4f2e6;
	border-radius: 19px;
	box-shadow: 0 3px 14.6px #bcbbac;
	isolation: isolate;
	margin: -76px auto 0;
	min-height: 0;
	padding: 43px 25px 45px;
	position: relative;
	width: min(calc(100% - 54px), 376px);
	z-index: 3;
}

.workbody-question-panel-v4::before {
	display: none;
}

.workbody-question-panel-v4 > * {
	position: relative;
	z-index: 1;
}

.workbody-question-heading-v4 {
	text-align: center;
}

.workbody-question-heading-v4 span,
.workbody-question-heading-v4 strong {
	display: block;
	font-family: "Poppins", "Fredoka", "Work Sans", sans-serif;
	line-height: 1.09;
}

.workbody-question-heading-v4 span {
	color: #003d70;
	display: inline-block;
	font-size: 19px;
	font-weight: 600;
	margin-bottom: 9px;
	padding-bottom: 8px;
	position: relative;
	text-transform: uppercase;
}

.workbody-question-heading-v4 span::after {
	background: #deddca;
	bottom: 0;
	content: "";
	height: 1px;
	left: 50%;
	position: absolute;
	transform: translateX(-50%);
	width: 72px;
}

.workbody-question-heading-v4 strong {
	color: #afac3a;
	font-size: 36px;
	font-weight: 700;
}

.workbody-question-panel-v4 .workbody-question-copy {
	color: var(--wb-copy);
	font-family: "Fredoka", "Work Sans", sans-serif;
	font-size: 19px;
	font-weight: 400;
	line-height: 1.1;
	margin-top: 27px;
	padding: 0 7px;
	text-align: left;
}

.workbody-question-panel-v4 .workbody-question-copy p {
	margin: 0 0 13px;
}

.workbody-question-panel-v4 .workbody-question-copy p:last-child {
	margin-bottom: 0;
}

.workbody-question-panel-v4 .workbody-options {
	display: grid;
	gap: 11px;
	margin-top: 18px;
}

.workbody-option-v4 {
	background: #eae7d4;
	border: 1.5px solid transparent;
	border-radius: 23px;
	color: #565542;
	cursor: pointer;
	display: flex;
	min-height: 70px;
	padding: 23px 40px 18px 25px;
	position: relative;
	text-align: left;
	transition: border-color 160ms ease;
	width: 100%;
}

.workbody-option-v4.is-selected {
	border-color: #bab853;
}

.workbody-option-v4 .workbody-option-copy {
	font-family: "Work Sans", sans-serif;
	font-size: 17px;
	font-weight: 500;
	line-height: normal;
	max-width: 272px;
}

.workbody-option-check {
	background: url(../img/question-v4-option-check.svg) center / contain no-repeat;
	bottom: 13px;
	display: none;
	height: 26px;
	position: absolute;
	right: 10px;
	width: 26px;
}

.workbody-option-check::after {
	display: none;
}

.workbody-option-v4.is-selected .workbody-option-check {
	display: block;
}

.workbody-question-actions {
	align-items: center;
	display: flex;
	gap: 18px;
	justify-content: center;
	margin: 24px 0 0;
}

.workbody-question-button {
	align-items: center;
	border: 0;
	border-radius: 46px;
	color: #fff;
	cursor: pointer;
	display: inline-flex;
	font-family: "Fredoka", "Work Sans", sans-serif;
	font-size: 18px;
	font-weight: 600;
	height: 42px;
	justify-content: center;
	line-height: normal;
	min-height: 42px;
	padding: 10px 0;
	transition: filter 160ms ease, opacity 160ms ease, transform 160ms ease;
	width: 110px;
}

.workbody-question-button:hover:not(:disabled) {
	transform: translateY(-1px);
}

.workbody-question-button:disabled {
	cursor: not-allowed;
	opacity: 0.58;
}

.workbody-question-button--back {
	background: #b2b19f;
}

.workbody-question-button--next {
	background: linear-gradient(139.5deg, #f11e0b 34.46%, #f08278 98.32%);
	width: 109px;
}

.workbody-form-screen {
	background: #f9f9f2;
	isolation: isolate;
	overflow: hidden;
	padding: 24px 0 100px;
}

.workbody-form-screen::after {
	/* footer city pattern on the section itself (no separate background layer) */
	background: url(../img/form-v5-footer-bg-blended.webp) center bottom / 100% auto no-repeat;
	bottom: 0;
	content: "";
	height: 360px;
	left: 0;
	pointer-events: none;
	position: absolute;
	right: 0;
	z-index: 0;
}

.workbody-form-footer {
	bottom: 0;
	left: 0;
	padding-top: 12px;
	padding-bottom: 12px;
	position: absolute;
	right: 0;
	z-index: 5;
	min-height: 95px;
}

.workbody-form-main {
	z-index: 6;
}

.workbody-form-screen:has(.workbody-multiselect[open]) .workbody-form-footer {
	opacity: 1;
	pointer-events: auto;
}

.workbody-back {
	align-items: center;
	background: transparent;
	border: 0;
	color: #7e7d64;
	cursor: pointer;
	display: inline-flex;
	font-family: "Work Sans", sans-serif;
	font-size: 20px;
	font-weight: 400;
	gap: 8px;
	line-height: normal;
	margin: 0 0 18px 30px;
	padding: 0;
}

.workbody-back::before {
	background: url(../img/back-icon.svg) center / contain no-repeat;
	content: "";
	height: 34px;
	width: 35px;
}

.workbody-form-intro {
	margin: 4px auto 0;
	width: min(calc(100% - 63px), 367px);
}

.workbody-form-screen .workbody-heading {
	color: #afac3a;
	font-family: "Poppins", "Fredoka", "Work Sans", sans-serif;
	font-size: 27px;
	font-weight: 600;
	line-height: 1.09;
	margin: 0;
	text-align: center;
}

.workbody-form-screen .workbody-copy {
	color: #56564f;
	font-family: "Work Sans", sans-serif;
	font-size: 16px;
	font-weight: 400;
	line-height: normal;
	margin: 13px auto 0;
	max-width: 367px;
	text-align: center;
}

.workbody-form {
	background: #f4f2e6;
	border: 0;
	border-radius: 19px;
	box-shadow: 0 3.071px 14.6px #bcbbac;
	display: grid;
	gap: 25px;
	grid-template-columns: minmax(0, 1fr);
	margin: 36px auto 0;
	max-width: 100%;
	padding: 37.625px 23.036px 31.482px;
	position: relative;
	width: min(100%, 366px);
}

.workbody-form,
.workbody-form-section,
.workbody-field,
.workbody-multiselect {
	min-width: 0;
}

.workbody-form-section {
	display: grid;
	gap: 18px;
	grid-template-columns: minmax(0, 1fr);
}

.workbody-form-section h2 {
	color: #003d70;
	font-family: "Fredoka", "Work Sans", sans-serif;
	font-size: 20px;
	font-weight: 500;
	line-height: 1.09;
	margin: 0;
	text-decoration: underline;
}

.workbody-field {
	display: grid;
	gap: 7px;
	grid-template-columns: minmax(0, 1fr);
}

.workbody-field-label {
	align-items: center;
	color: #56564f;
	display: flex;
	font-size: 15px;
	gap: 8px;
	line-height: 1.15;
	padding: 0 4px;
}

.workbody-field-icon {
	display: inline-flex;
	flex: 0 0 auto;
	justify-content: center;
	line-height: 1;
	min-width: 20px;
}

.workbody-field-icon img {
	display: block;
	height: 20px;
	object-fit: contain;
	width: 20px;
}

.workbody-field-icon--person img,
.workbody-field-icon--heart img {
	height: 19px;
	width: 19px;
}

.workbody-field-icon--calendar img {
	height: 17px;
	width: 17px;
}

.workbody-field-icon--graduation img {
	height: 22px;
	width: 22px;
}

.workbody-field-icon--target img {
	height: 21px;
	width: 21px;
}

.workbody-field input:not([type="hidden"]):not([type="checkbox"]),
.workbody-field select {
	background-color: #e6e3cf;
	border: 0;
	border-radius: 7.679px;
	box-sizing: border-box;
	color: #192230;
	display: block;
	font-family: "Work Sans", sans-serif;
	font-size: 15px;
	font-weight: 400;
	height: 35.321px;
	line-height: 1.15;
	max-width: 100%;
	min-height: 0;
	min-width: 0;
	padding: 8px 16.125px;
	width: 100%;
}

.workbody-form .workbody-field input:not([type="checkbox"]):not([type="hidden"]),
.workbody-form .workbody-field select,
.workbody-form .workbody-single-select summary,
.workbody-form .workbody-multiselect summary {
	box-sizing: border-box;
	inline-size: 100%;
	max-inline-size: 100%;
}

.workbody-field select {
	appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg width='11' height='6' viewBox='0 0 11 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L5.5 5L10 1' stroke='%2356564f' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-position: right 12px center;
	background-repeat: no-repeat;
	background-size: 11px 6px;
	padding-right: 36px;
	text-size-adjust: 100%;
	-webkit-text-size-adjust: 100%;
}

.workbody-field select option {
	font-family: "Work Sans", sans-serif;
	font-size: 15px;
	font-weight: 400;
	line-height: normal;
}

.workbody-date-input:not(.has-value):not(:focus)::-webkit-datetime-edit {
	color: transparent;
}

.workbody-date-input::-webkit-calendar-picker-indicator {
	display: none;
}

.workbody-single-select,
.workbody-multiselect {
	position: relative;
}

.workbody-single-select[open],
.workbody-multiselect[open] {
	z-index: 30;
}

.workbody-single-select summary,
.workbody-multiselect summary {
	align-items: center;
	background-color: #e6e3cf;
	border-radius: 7.679px;
	color: #192230;
	cursor: pointer;
	display: flex;
	font-family: "Work Sans", sans-serif;
	font-size: 15px;
	font-weight: 400;
	justify-content: space-between;
	line-height: 1.15;
	list-style: none;
	max-width: 100%;
	min-height: 35.321px;
	min-width: 0;
	padding: 8px 16.125px;
	width: 100%;
}

.workbody-single-select summary::-webkit-details-marker,
.workbody-multiselect summary::-webkit-details-marker {
	display: none;
}

.workbody-single-select summary::after,
.workbody-multiselect summary::after {
	background-image: url("data:image/svg+xml,%3Csvg width='11' height='6' viewBox='0 0 11 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L5.5 5L10 1' stroke='%2356564f' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
	content: "";
	height: 6px;
	transition: transform 140ms ease;
	width: 11px;
}

.workbody-single-select[open] summary::after,
.workbody-multiselect[open] summary::after {
	transform: rotate(180deg);
}

.workbody-single-select-list,
.workbody-multiselect-list {
	background: #f4f2e6;
	border: 1px solid var(--wb-border);
	border-radius: 8px;
	box-shadow: 0 6px 14px rgba(99, 98, 63, 0.18);
	display: grid;
	gap: 2px;
	margin-top: 5px;
	max-height: min(46svh, 330px);
	overflow-y: auto;
	overscroll-behavior: contain;
	padding: 8px;
	position: absolute;
	scrollbar-gutter: stable;
	width: 100%;
	z-index: 20;
}

.workbody-form .workbody-single-select-list,
.workbody-form .workbody-multiselect-list {
	box-sizing: border-box;
	inline-size: 100%;
	max-inline-size: 100%;
}

.workbody-multiselect-list label {
	align-items: start;
	border-radius: 6px;
	color: #192230;
	cursor: pointer;
	display: grid;
	font-size: 15px;
	gap: 10px;
	grid-template-columns: 16px minmax(0, 1fr);
	line-height: 1.2;
	padding: 6px 7px;
}

.workbody-single-select-option {
	background: transparent;
	border: 0;
	border-radius: 6px;
	color: #192230;
	cursor: pointer;
	display: block;
	font-family: "Work Sans", sans-serif;
	font-size: 15px;
	line-height: 1.2;
	min-height: 34px;
	padding: 8px 9px;
	text-align: left;
	width: 100%;
}

.workbody-form .workbody-single-select-option,
.workbody-form .workbody-multiselect-list label {
	font-family: "Work Sans", sans-serif;
	font-size: 15px;
}

.workbody-single-select-option.is-selected {
	background: rgba(212, 210, 125, 0.32);
	color: var(--wb-olive);
	font-weight: 600;
}

.workbody-single-select-option:hover,
.workbody-multiselect-list label:hover {
	background: rgba(212, 210, 125, 0.25);
}

.workbody-multiselect-list input:disabled + span {
	opacity: 0.45;
}

.workbody-field.has-error input,
.workbody-field.has-error select,
.workbody-field.has-error summary,
.workbody-checkbox.has-error {
	box-shadow: 0 0 0 2px rgba(155, 49, 40, 0.24);
}

.workbody-checkbox {
	align-items: start;
	color: #56564f;
	display: grid;
	font-family: "Work Sans", sans-serif;
	font-size: 14px;
	font-weight: 400;
	gap: 7px 11px;
	grid-template-columns: 16px 1fr;
	line-height: 1.15;
}

.workbody-quiz-app input[type="checkbox"] {
	appearance: none;
	background: #f4f2e6;
	border: 1px solid #a5a379;
	border-radius: 3px;
	cursor: pointer;
	display: block;
	flex: 0 0 16px;
	height: 16px;
	inline-size: 16px;
	margin: 2px 0 0;
	max-inline-size: 16px;
	min-height: 0;
	padding: 0;
	position: relative;
	vertical-align: top;
	width: 16px;
}

.workbody-quiz-app input[type="checkbox"]:checked {
	background: var(--wb-olive);
	border-color: var(--wb-olive);
}

.workbody-quiz-app input[type="checkbox"]:focus-visible {
	outline: 2px solid #003d70;
	outline-offset: 2px;
}

.workbody-quiz-app input[type="checkbox"]:checked::after {
	border-bottom: 2px solid #fff;
	border-left: 2px solid #fff;
	content: "";
	height: 5px;
	left: 3px;
	position: absolute;
	top: 3px;
	transform: rotate(-45deg);
	width: 9px;
}

.workbody-checkbox .workbody-error {
	grid-column: 1 / -1;
}

.workbody-checkbox a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 2px;
}

.workbody-error {
	color: #9b3128;
	font-size: 13px;
	line-height: 1.25;
}

.workbody-modal-dialog {
	background: #f9f9f2;
	border: 1px solid #d9d7bf;
	border-radius: 18px;
	box-shadow: 0 18px 42px rgba(34, 39, 26, 0.22);
	color: #56564f;
	font-family: "Work Sans", sans-serif;
	max-height: min(78vh, 640px);
	max-width: 430px;
	overflow: hidden;
	padding: 0;                    /* reset native <dialog> padding */
	width: calc(100% - 48px);      /* 24px gutter each side; centred by the UA */
}

.workbody-modal-dialog::backdrop {
	background: rgba(33, 38, 28, 0.42);
}

.workbody-modal-header {
	align-items: center;
	background: #eeecdd;
	display: flex;
	gap: 12px;
	justify-content: space-between;
	padding: 16px 18px;
}

.workbody-modal-header h2 {
	color: #00457c;
	font-family: "Fredoka", sans-serif;
	font-size: 22px;
	font-weight: 700;
	line-height: 1.05;
	margin: 0;
}

.workbody-modal-close {
	align-items: center;
	appearance: none;
	background: #fff;
	border: 1px solid #d9d7bf;
	border-radius: 999px;
	color: #56564f;
	cursor: pointer;
	display: inline-flex;
	flex: 0 0 auto;
	font-size: 24px;
	height: 34px;
	justify-content: center;
	line-height: 1;
	padding: 0 0 2px;
	width: 34px;
}

.workbody-modal-body {
	font-size: 14px;
	line-height: 1.45;
	max-height: calc(min(78vh, 640px) - 67px);
	overflow: auto;
	padding: 18px;
}

.workbody-modal-body h3 {
	color: #00457c;
	font-family: "Fredoka", sans-serif;
	font-size: 17px;
	line-height: 1.15;
	margin: 18px 0 10px;
	text-transform: uppercase;
}

.workbody-modal-body p,
.workbody-modal-body ol {
	margin: 0 0 12px;
}

.workbody-modal-body ol {
	padding-left: 19px;
}

.workbody-modal-body li {
	margin: 0 0 9px;
}

.workbody-modal-body a {
	color: #00457c;
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 2px;
}

.workbody-notice {
	background: #fff4d8;
	border: 1px solid #e0b95b;
	border-radius: 8px;
	color: #665024;
	font-size: 14px;
	line-height: 1.35;
	margin: 0 0 16px;
	padding: 12px 14px;
}

.workbody-recaptcha {
	display: flex;
	justify-content: center;
	min-height: 69px;
}

.workbody-form .workbody-actions {
	margin: 0;
}

.workbody-form .workbody-button {
	background: linear-gradient(143.76deg, #f11e0b 34.46%, #f08278 98.32%);
	border: 0;
	border-radius: 46px;
	filter: none;
	font-family: "Fredoka", "Work Sans", sans-serif;
	font-size: 18px;
	font-weight: 600;
	height: 42px;
	line-height: normal;
	min-height: 42px;
	padding: 10px 0;
	width: 127px;
}

.workbody-form .workbody-button:hover:not(:disabled) {
	filter: none;
}

/*
 * Result screen — responsive sizing convention.
 * Fluid dimensions use clamp(<floor>, <slope>vw, <ceiling>), where the ceiling is
 * the value at the 430px reference frame and the slope ≈ ceiling / 430 * 100
 * (e.g. 274px -> 63.7vw). The avatar is bottom-anchored to the hero so the
 * avatar->composition gap stays constant across widths (do NOT switch it back to
 * a `top` offset). A few slopes below are intentionally steeper — they hit their
 * ceiling before 430px — and are flagged `steeper slope (intentional)`.
 * After editing any of these, run: node tests/responsive/matrix.mjs
 */
.workbody-result-screen {
	--wb-result-side: clamp(22px, 8.6vw, 37px);
	background: #f9f9f2;
	border: 0;
	border-radius: 0;
	margin: 0 auto;
	max-width: 430px;
	min-height: 100svh;
	overflow: hidden;
	padding: 0 var(--wb-result-side) 31px;
	width: 100%;
}

.workbody-result-screen::after {
	border: 1.536px solid #d5d4a6;
	border-radius: 18px;
	bottom: 8px;
	content: "";
	left: 8px;
	pointer-events: none;
	position: absolute;
	right: 8px;
	top: 14px;
	z-index: 10;
}

.workbody-result-hero-bg {
	/* Fill the whole stage cell (which grows with the copy card). The park scene is
	   painted by ::before as a bottom-pinned band that uses `cover` (fills the width,
	   like the original) but is capped at the image's natural height so a very tall
	   hero never zooms it; any height above that cap shows the sky colour below. */
	align-self: stretch;
	justify-self: stretch;
	background-color: #ebf3ef;                                         /* = image top-edge sky; fills the area above the capped scene */
	overflow: hidden;
	position: relative;
	width: 100%;
	z-index: 0;
}

.workbody-result-hero-bg::before {
	background: url(../img/result-v4-hero-bg.webp) center bottom / cover no-repeat;
	bottom: 0;
	content: "";
	height: 365px;                                                    /* max image height (natural full-width height) */
	left: 0;
	max-height: 100%;                                                 /* short hero: never taller than the box (no gap below) */
	position: absolute;
	right: 0;
}

.workbody-result-screen .workbody-screen-logo {
	margin: 26px auto 0;
	position: static;
}

.workbody-result-screen .workbody-screen-logo img {
	width: 95px;
}

.workbody-result-title-wrap {
	margin: 0;
	max-width: none;
	text-align: left;
}

.workbody-result-screen .workbody-title {
	margin: 0;
	max-width: none;
	text-align: left;
}

.workbody-result-title span {
	color: #afac3a;
	font-family: "Poppins", "Fredoka", "Work Sans", sans-serif;
	font-size: 18px;
	font-weight: 500;
	line-height: 1;
}

.workbody-result-title strong {
	color: #003d70;
	font-family: "Poppins", "Fredoka", "Work Sans", sans-serif;
	font-size: 25px;
	font-weight: 500;
	line-height: 1;
	hyphens: none;
	overflow-wrap: normal;
	word-break: normal;
}

.workbody-result-divider {
	background: #deddca;
	display: none;
	height: 1px;
	margin: 40px 0 0;
	max-width: 100%;
	width: 193px;
}

/* Reusable overlap primitive: a query container whose children stack in one grid
 * cell, so foreground/background/card layers align without absolute positioning.
 * Children size via cqw (container-relative), decoupled from the viewport. */
.wb-stage {
	container-type: inline-size;
	display: grid;
	position: relative;
}

.wb-stage > * {
	grid-area: 1 / 1;
}

.workbody-result-hero {
	grid-template: minmax(clamp(300px, 84.9vw, 365px), auto) / 1fr; /* single overlap cell */
	margin: 0 calc(var(--wb-result-side) * -1);
	width: calc(100% + (var(--wb-result-side) * 2));
}

/* Content layer: overlaps avatar (bottom-left) + copy card (top-right) in one cell,
   kept separate from the full-bleed bg so this layer can OWN the card's inset via
   padding instead of clamp margins on the card. padding-top/right push only the
   card (it is anchored top-right); the avatar is anchored bottom-left so 0 bottom/left
   padding leaves it untouched. Not a query container, so the card's cqw sizing still
   resolves against the outer .workbody-result-hero stage. */
.workbody-result-hero-content {
	display: grid;
	grid-template-columns: 1fr;                                       /* fill width so the card's justify-self:end reaches the padded right edge */
	padding-top: 25px;                                                /* was card margin-top (vw clamp); flat px = stable across widths */
	padding-right: clamp(12px, calc(21 / var(--wb-ref) * 100cqw), 21px); /* was card margin-right (unchanged) */
}

.workbody-result-hero-content > * {
	grid-area: 1 / 1;
}

.workbody-result-avatar {
	align-self: end;                                                  /* bottom-anchored to the stage */
	justify-self: start;
	background: transparent;
	border: 0;
	height: clamp(190px, calc(274 / var(--wb-ref) * 100cqw), 274px);
	width: clamp(190px, calc(274 / var(--wb-ref) * 100cqw), 274px);
	/* margin: 0 0 <fixed gap> <fluid left-bleed>. The 25px bottom gap is FIXED so the
	   avatar->composition spacing stays constant across widths (do not make it fluid). */
	margin: 0 0 25px clamp(-33px, calc(-33 / var(--wb-ref) * 100cqw), -24px);
	overflow: visible;
	z-index: 2;
}

.workbody-result-avatar::before {
	display: none;
}

.workbody-result-avatar img {
	display: block;
	box-sizing: border-box;
	height: 100%;
	left: auto;
	margin: 0;
	max-height: 100%;
	max-width: 100%;
	object-fit: contain;
	object-position: center center;
	padding: 0;
	position: relative;
	top: auto;
	transform: none;
	transform-origin: center center;
	width: 100%;
	z-index: 1;
}

.workbody-result-copy-card {
	align-self: start;
	justify-self: end;                                                /* right-aligned in the stage */
	background: #f9f9f2;
	border-radius: 18px;
	/* top/right insets now owned by .workbody-result-hero-content padding */
	min-height: clamp(266px, calc(299 / var(--wb-ref) * 100cqw), 299px);
	padding: 15px;
	position: relative;
	width: clamp(190px, 55.2vw, 220px);                               /* steeper slope (intentional) */
	z-index: 3;
}

.workbody-result-intro-block {
	margin: 9px 0 0;
	max-width: none;
	text-align: left;
}

.workbody-result-intro {
	color: #565542;
	font-family: "Work Sans", sans-serif;
	font-size: 16px;
	font-weight: 400;
	line-height: normal;
	margin: 0;
	text-align: left;
}

.workbody-result-share {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	justify-content: center;
	margin: 18px auto 0;
	text-align: center;
}

.workbody-quiz-app .workbody-share-button,
.workbody-quiz-app .workbody-copy-button,
.workbody-quiz-app .workbody-restart-button {
	align-items: center;
	appearance: none;
	border: 0;
	border-radius: 46px;
	box-shadow: none;
	cursor: pointer;
	display: inline-flex;
	font-family: "Fredoka", "Work Sans", sans-serif;
	font-size: 18px;
	font-variation-settings: "wdth" 100;
	height: 42px;
	justify-content: center;
	line-height: 22px;
	min-width: 157px;
	max-width: 100%;
	padding: 10px 14px;
	text-align: center;
	white-space: nowrap;
	width: 157px;
}

.workbody-quiz-app .workbody-share-button {
	background-image: linear-gradient(149.332deg, #f11e0b 34.456%, #f08278 98.316%);
	color: #fff;
	font-weight: 600;
}

.workbody-quiz-app .workbody-copy-button {
	background: #edeadd;
	color: #003d70;
	font-weight: 500;
}

.workbody-quiz-app .workbody-restart-button {
	background: #edeadd;
	color: #63623f;
	font-weight: 500;
}

/* Share layout: primary actions on one row, social network icons below. */
.workbody-result-share {
	flex-direction: column;
}

.workbody-result-share-primary,
.workbody-share-networks {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	justify-content: center;
	margin: 0;
	padding: 0;
}

.workbody-quiz-app .workbody-share-net {
	align-items: center;
	appearance: none;
	border: 0;
	border-radius: 50%;
	color: #fff;
	cursor: pointer;
	display: inline-flex;
	height: 42px;
	justify-content: center;
	line-height: 0;
	padding: 0;
	width: 42px;
}

.workbody-quiz-app .workbody-share-net--facebook { background: #1877f2; }
.workbody-quiz-app .workbody-share-net--instagram { background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285aeb 90%); }
.workbody-quiz-app .workbody-share-net--x { background: #000; }
.workbody-quiz-app .workbody-share-net--linkedin { background: #0a66c2; }
.workbody-quiz-app .workbody-share-net--whatsapp { background: #25d366; }

.workbody-quiz-app .workbody-share-net:focus-visible {
	outline: 2px solid #003d70;
	outline-offset: 2px;
}

.workbody-result-card,
.workbody-composition,
.workbody-buddies-card {
	background: #f4f2e6;
	border: 1.5px solid #e2dfce;
	border-radius: 8px;
	overflow: hidden;
	position: relative;
	max-width: 357px;
	width: 100%;
}

.workbody-result-card {
	margin: 23px auto 0;
	min-height: 155px;
}

.workbody-result-card::before,
.workbody-buddies-card::before,
.workbody-composition::before {
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
	content: "";
	pointer-events: none;
	position: absolute;
	z-index: 3;
}

.workbody-result-card--signals::before {
	background-image: url(../img/result-v4-icon-signals.webp);
	height: 33px;
	left: auto;
	right: 10px;
	top: 5px;
	width: 33px;
}

.workbody-result-card--fit::before {
	background-image: url(../img/result-v4-icon-fit.webp);
	height: 37px;
	left: auto;
	right: 10px;
	top: 2px;
	width: 37px;
}

.workbody-result-card--training::before {
	background-image: url(../img/result-v4-icon-training.webp);
	height: 32px;
	left: auto;
	right: 8px;
	top: 4px;
	width: 32px;
}

.workbody-result-card h3,
.workbody-composition h3,
.workbody-buddies-card h3 {
	background: #ebe9da;
	border-radius: 8px 8px 0 0;
	color: #63623f;
	font-size: 20px;
	font-weight: 500;
	min-height: 42px;
	line-height: 1.09;
	margin: 0;
	padding: 10px 45px 9px 20px;
	text-align: left;
}

.workbody-result-card--training h3 {
	font-size: 19px;
}

.workbody-result-card p {
	color: #63623f;
	font-family: "Work Sans", sans-serif;
	font-size: 16px;
	font-weight: 400;
	line-height: normal;
	margin: 0;
	padding: 14px 21px 18px;
	text-align: left;
}

.workbody-result-card .workbody-result-training-intro {
	border-bottom: 0;
	color: #63623f;
	font-family: "Work Sans", sans-serif;
	font-size: 16px;
	line-height: normal;
	margin: 0;
	padding: 14px 21px 0;
}

/* Inline link the admin may embed in the intro copy (e.g. "here"). */
.workbody-result-training-intro a {
	color: #003d70;
	font-weight: 600;
	text-decoration: underline;
}

.workbody-result-training-intro a:hover,
.workbody-result-training-intro a:focus {
	text-decoration: none;
}

.workbody-composition {
	margin: 25px auto 0;
}

.workbody-composition::before {
	background-image: url(../img/result-v4-icon-composition.webp);
	height: 32px;
	right: 10px;
	top: 5px;
	width: 32px;
}

.workbody-composition-group {
	padding: 19px 17px 0 19px;
}

.workbody-composition-group:last-child {
	padding-bottom: 18px;
}

.workbody-composition h4 {
	color: #003d70;
	font-size: 19px;
	font-weight: 500;
	line-height: 1.09;
	margin: 0 0 17px 2px;
	text-decoration: underline;
}

/* The Mode / Anchor heading is a button that opens its glossary popup. It keeps
   the exact heading look (inherits the h4 font/colour/underline) + a small info cue. */
.workbody-composition-heading-btn {
	appearance: none;
	background: none;
	border: 0;
	color: inherit;
	cursor: pointer;
	font: inherit;
	letter-spacing: inherit;
	padding: 0;
	text-align: left;
	text-decoration: underline;
}

.workbody-composition-heading-btn:hover,
.workbody-composition-heading-btn:focus-visible {
	outline: none;
	text-decoration-thickness: 2px;
}

/* Glossary popup: reuses the modal shell + the exact composition icons/sizes. */
.workbody-glossary-body {
	padding: 6px 18px 16px;
}

.workbody-glossary-row {
	align-items: center;
	column-gap: 12px;
	display: grid;
	grid-template-columns: 48px minmax(0, 1fr);
	padding: 13px 0;
}

.workbody-glossary-text {
	color: #56564f;
	font-family: "Work Sans", sans-serif;
	font-size: 16px;
	line-height: 1.35;
	margin: 0;
}

.workbody-glossary-text strong {
	font-weight: 600;
}

.workbody-composition-subtitle {
	color: #63623f;
	font-family: "Work Sans", sans-serif;
	font-size: 16px;
	font-style: normal;
	font-weight: 400;
	line-height: normal;
	margin: -12px 0 17px 2px;
}

.workbody-composition-row {
	align-items: center;
	column-gap: 8px;
	display: grid;
	grid-template-columns: 42px minmax(58px, 71px) minmax(0, 1fr) 34px;
	margin-top: 5px;
	min-height: 32px;
}

.workbody-composition-row:first-of-type {
	margin-top: 0;
}

.workbody-composition-icon {
	align-items: center;
	display: inline-flex;
	height: 32px;
	justify-content: center;
	overflow: visible;
	width: 44px;
}

.workbody-composition-icon img {
	display: block;
	height: 100%;
	max-height: 44px;
	max-width: 44px;
	object-fit: contain;
	width: 100%;
}

.workbody-composition-icon--feet img {
	transform: scale(1.38);
	transform-origin: center center;
}

.workbody-composition-label,
.workbody-composition-percent {
	color: #56564f;
	font-size: 16px;
	font-weight: 500;
	line-height: normal;
	min-width: 0;
}

.workbody-composition-percent {
	color: #afac3a;
	text-align: left;
}

.workbody-composition-bar {
	background: #f3f2d8;
	border: 1px solid #c7c462;
	border-radius: 5px;
	display: block;
	height: 24px;
	overflow: hidden;
	position: relative;
}

.workbody-composition-bar span {
	background: #e2df6f;
	display: block;
	height: 100%;
	min-width: 0;
}

.workbody-composition hr {
	border: 0;
	border-top: 1px solid #dedcca;
	margin: 18px 16px 13px;
}

.workbody-result-list {
	counter-reset: workbody-training-step;
	color: #63623f;
	font-family: "Work Sans", sans-serif;
	font-size: 16px;
	font-weight: 400;
	line-height: 1.1;
	list-style: none;
	margin: 0;
	padding: 22px 18px 22px 21px;
	text-align: left;
}

.workbody-result-list li {
	align-items: center; /* text vertically centered against the 28px number icon */
	border-bottom: 0;
	counter-increment: workbody-training-step;
	display: grid;
	grid-template-columns: 28px minmax(0, 1fr);
	gap: 7px;
	padding: 0;
	margin-top: 13px;
	min-height: 28px;
}

.workbody-result-list li:first-child {
	margin-top: 0;
}

.workbody-result-training-intro + .workbody-result-list li:first-child {
	margin-top: 0;
}

.workbody-result-list li:last-child {
	border-bottom: 0;
	padding-bottom: 0;
}

.workbody-result-list li::before {
	align-items: center;
	background: #e0dec1;
	clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
	color: #fff;
	content: counter(workbody-training-step);
	display: inline-flex;
	font-family: "Fredoka", "Work Sans", sans-serif;
	font-size: 14px;
	font-weight: 500;
	height: 28px;
	justify-content: center;
	line-height: 1.09;
	width: 28px;
}

.workbody-result-list a {
	color: inherit;
	text-decoration: none;
}

.workbody-result-list a:hover,
.workbody-result-list a:focus {
	color: #003d70;
	text-decoration: underline;
}

.workbody-result-card--training {
	min-height: 225px;
}

.workbody-buddies-card {
	margin: 20px auto 0;
	min-height: 272px;
	padding: 0 31px 18px;
}

.workbody-buddies-card::before {
	background-image: url(../img/result-v4-icon-buddies.webp);
	height: 33px;
	right: 10px;
	top: 4px;
	width: 33px;
}

.workbody-buddies-card h3 {
	align-items: center;
	display: flex;
	justify-content: flex-start;
	margin: 0 -31px 16px;
	padding: 0 50px 0 20px;
}

.workbody-buddies {
	display: flex;
	gap: 27px;
	justify-content: center;
}

.workbody-buddy {
	align-items: center;
	background: transparent;
	border: 0;
	border-radius: 0;
	color: #898842;
	display: flex;
	flex-direction: column;
	font-family: "Fredoka", "Work Sans", sans-serif;
	gap: 7px;
	height: auto;
	padding: 0;
	position: relative;
	text-align: center;
	width: 134px;
}

.workbody-buddy-name {
	display: block;
	font-size: 15px;
	font-weight: 500;
	line-height: 1.09;
	max-width: none;
	min-height: 0;
	width: 134px;
}

.workbody-buddy-name span {
	display: inline;
}

.workbody-buddy-badge {
	background: #fff;
	border: 1.5px solid #e3e3cf;
	border-radius: 115px;
	display: block;
	height: 156px;
	margin-top: 0;
	overflow: hidden;
	position: relative;
	width: 134px;
	z-index: 2;
}

.workbody-buddy-badge img {
	display: block;
	box-sizing: border-box;
	height: 100%;
	left: auto;
	margin: 0;
	max-height: 100%;
	max-width: 100%;
	object-fit: contain;
	object-position: center center;
	padding: 0;
	position: relative;
	top: 15px;
	transform: scale(1.55);
	transform-origin: center 42%;
	width: 100%;
}

@media (prefers-reduced-motion: reduce) {
	.workbody-quiz-app *,
	.workbody-quiz-app *::before,
	.workbody-quiz-app *::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		scroll-behavior: auto !important;
		transition-duration: 0.001ms !important;
	}
}

@media (max-width: 380px) {
	.workbody-screen {
		padding-left: 12px;
		padding-right: 12px;
	}

	.workbody-splash {
		padding-left: 0;
		padding-right: 0;
	}

	/* Keep the full-bleed question hero edge-to-edge on small screens too
	   (the base .workbody-screen 12px inset above would shrink it). */
	.workbody-question-screen {
		padding-left: 0;
		padding-right: 0;
	}

	.workbody-form-screen {
		padding-left: 8px;
		padding-right: 8px;
	}

	.workbody-title,
	.workbody-heading {
		line-height: 1.05;
	}

	.workbody-form {
		gap: 22px;
		padding: 32px 18px 30px;
		--wb-form-control-edge-guard: 8px;
		width: 100%;
	}

	.workbody-form-section {
		gap: 16px;
	}

	.workbody-field {
		gap: 6px;
	}

	.workbody-field-label {
		align-items: flex-start;
		gap: 7px;
		line-height: 1.12;
		padding-left: 0;
		padding-right: 0;
	}

	.workbody-field-icon {
		margin-top: -1px;
	}

	.workbody-field input:not([type="hidden"]):not([type="checkbox"]),
	.workbody-field select,
	.workbody-single-select summary,
	.workbody-multiselect summary {
		font-size: 16px;
		inline-size: calc(100% - var(--wb-form-control-edge-guard)) !important;
		max-inline-size: calc(100% - var(--wb-form-control-edge-guard)) !important;
		min-height: 38px;
		padding-left: 12px;
		padding-right: 12px;
		width: calc(100% - var(--wb-form-control-edge-guard));
	}

	.workbody-field select {
		background-position: right 11px center;
		padding-right: 30px;
	}

	.workbody-single-select summary,
	.workbody-multiselect summary {
		gap: 10px;
	}

	.workbody-single-select summary::after,
	.workbody-multiselect summary::after {
		flex: 0 0 auto;
	}

	.workbody-field select option,
	.workbody-single-select-option,
	.workbody-multiselect-list label {
		font-size: 16px !important;
	}

	.workbody-single-select-list,
	.workbody-multiselect-list {
		inline-size: auto !important;
		left: 0;
		max-height: min(42svh, 300px);
		max-inline-size: none;
		right: var(--wb-form-control-edge-guard);
		width: auto;
	}

	.workbody-multiselect-list label {
		grid-template-columns: 16px minmax(0, 1fr);
	}

	.workbody-multiselect-list input[type="checkbox"] {
		height: 16px !important;
		inline-size: 16px !important;
		max-inline-size: 16px !important;
		min-height: 0 !important;
		padding: 0 !important;
		width: 16px !important;
	}

	.workbody-question-panel-v4 {
		padding-left: 22px;
		padding-right: 22px;
		width: min(calc(100% - 24px), 376px); /* own 12px side margin (screen no longer pads the question hero) */
	}

	.workbody-question-panel-v4 .workbody-question-copy {
		padding-left: 0;
		padding-right: 0;
	}

	.workbody-question-panel-v4 .workbody-options {
		gap: 12px;
	}

	.workbody-option-v4 {
		min-height: 84px;
		padding: 20px 24px 18px;
	}

	.workbody-option-v4 .workbody-option-copy {
		max-width: none;
	}

	.workbody-option-check {
		right: 12px;
	}

	.workbody-question-actions {
		gap: 18px;
	}

	.workbody-result-title-wrap {
		margin-top: 0;
		max-width: none;
	}

	.workbody-result-title span {
		font-size: 18px;
	}

	.workbody-result-title strong {
		font-size: 25px;
	}

	.workbody-result-hero {
		margin-left: calc(var(--wb-result-side) * -1);
		width: calc(100% + (var(--wb-result-side) * 2));
	}

	.workbody-result-hero-content {
		/* narrow screens: pull the card 10px further off the right edge (was the
		   card's own margin-right override; now owned by the parent padding) */
		padding-right: calc(clamp(12px, 4.9vw, 21px) + 10px);
		/* and sit the card closer to the screen's top frame border (::after top: 14px) */
		padding-top: 14px;
	}

	.workbody-result-intro {
		font-size: 16px;
        line-height: 1.15;
	}

	.workbody-result-intro-block {
		margin-top: 9px;
	}

	.workbody-composition-row {
		grid-template-columns: 38px 60px minmax(0, 1fr) 34px;
	}

	.workbody-buddies-card {
		padding-left: 18px;
		padding-right: 18px;
	}

	.workbody-buddies-card h3 {
		margin-left: -18px;
		margin-right: -18px;
	}

	.workbody-buddies {
		gap: 14px;
	}

	.workbody-buddy,
	.workbody-buddy-name {
		width: 126px;
	}

	.workbody-buddy-badge {
		height: 146px;
		width: 126px;
	}
}

@media (max-width: 430px) and (max-height: 700px) {
	.workbody-splash-v4-hero {
		height: clamp(248px, 39svh, 268px);
	}

	.workbody-splash-v4-content {
		margin-top: 8px;
	}
}

@media (max-width: 430px) and (max-height: 620px) {
	.workbody-splash-v4-hero {
		height: clamp(198px, 38svh, 225px);
	}

	.workbody-splash-v4-content {
		margin-top: 5px;
		width: min(calc(100% - 20px), 379px);
	}

	.workbody-splash-v4-content .workbody-title {
		font-size: 22px;
		line-height: 1;
		max-width: 270px;
	}

	.workbody-splash-v4-copy {
		font-size: 15.8px;
		line-height: 1.08;
		margin-top: 9px;
	}

	.workbody-splash-v4-copy p {
		margin-bottom: 8px;
	}

	.workbody-splash-v4-content .workbody-actions {
		margin-top: 10px;
	}

	.workbody-button--splash {
		font-size: 14.4px;
		min-height: 38px;
		padding: 8px 28px;
	}
}