/* Single test — Finergetics / template layout (rem only, no clamp) */

.ph-test-single {
	background-color: #fbfbfb;
}

.ph-test-single__canvas {
	background-color: #fbfbfb;
}


/* ----- Hero (Figma 424:4677) ----- */
.ph-test-hero {
	padding-top: 2.5rem;
	margin-bottom: 4.25rem;
}

.ph-test-hero__card {
	background: var(--ph-white, #fff);
	border: 0.0625rem solid #e0e0e0;
	border-radius: 2.5rem;
	padding: 4.0625rem;
	box-shadow: 0 0.0625rem 0.0625rem rgba(0, 0, 0, 0.05);
}

.ph-test-hero__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 3rem;
	align-items: center;
}

.ph-test-hero__copy {
	display: flex;
	flex-direction: column;
	gap: 2rem;
}

.ph-test-hero__intro {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.ph-test-hero__title {
	font-size: 3.75rem;
	font-weight: var(--ph-fw-bold, 700);
	line-height: 1;
	letter-spacing: -0.09375rem;
	color: var(--ph-black, #333);
	margin: 0;
	max-width: none;
}

.ph-test-hero__lead {
	font-size: 1.375rem;
	line-height: 1.75rem;
	color: var(--ph-gray, #555);
	margin: 0;
	padding-top: 0.5rem;
	max-width: 32rem;
}

.ph-test-hero__pills {
	display: flex;
	flex-wrap: wrap;
	gap: 1.5rem;
	margin: 0;
}

.ph-test-hero__pill {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.6875rem 1.0625rem;
	background: var(--ph-white, #fff);
	border: 0.0625rem solid #e0e0e0;
	border-radius: var(--ph-border-radius-pill, 50px);
	box-shadow: 0 0.0625rem 0.0625rem rgba(0, 0, 0, 0.05);
	font-size: 1rem;
	font-weight: var(--ph-fw-regular, 400);
	color: var(--ph-gray, #555);
}

.ph-test-hero__pill-icon {
	display: flex;
	color: var(--ph-gray, #555);
	flex-shrink: 0;
}

.ph-test-hero__cta-block {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.96875rem;
	padding-top: 0.5rem;
}

.ph-test-hero__cta-row {
	margin: 0;
}

.ph-test-hero__start {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.75rem;
	padding: 1rem 2rem;
	margin: 0;
	border: none;
	cursor: pointer;
	text-decoration: none;
	box-sizing: border-box;
	background: var(--ph-green, #469f10);
	color: var(--ph-white, #fff);
	font-size: 1.25rem;
	font-weight: var(--ph-fw-bold, 700);
	border-radius: var(--ph-border-radius-pill, 50px);
	text-decoration: none;
	transition: background var(--ph-transition, 0.22s ease);
	box-shadow: 0 0.625rem 0.9375rem -0.1875rem rgba(0, 0, 0, 0.1), 0 0.25rem 0.375rem -0.25rem rgba(0, 0, 0, 0.1);
}

.ph-test-hero__start:hover,
.ph-test-hero__start:focus-visible {
	background: var(--ph-green-dark, #357d0c);
	color: var(--ph-white, #fff);
}

.ph-test-hero__start-arrow {
	display: flex;
	line-height: 0;
}
.ph-test-hero__start-arrow svg {
	width: 20px;
    height: 20px;
}

.ph-test-hero__fineprint {
	display: flex;
	align-items: flex-start;
	gap: 0.3125rem;
	margin: 0;
	max-width: 36rem;
	font-size: 1.125rem;
	line-height: 1.35;
	color: var(--ph-gray, #555);
	font-weight: 500;
}

.ph-test-hero__fineprint-icon {
	flex-shrink: 0;
	color: var(--ph-gray, #555);
	margin-top: 0;
}

.ph-test-hero__media {
	position: relative;
	min-height: 31.25rem;
	align-self: stretch;
}

.ph-test-hero__img {
	width: 100%;
	height: 100%;
	min-height: 31.25rem;
	border-radius: 1.5rem;
	box-shadow: 0 0.25rem 1.25rem rgba(0, 0, 0, 0.03);
	object-fit: cover;
	display: block;
}

.ph-test-hero__img--placeholder {
	min-height: 31.25rem;
	background: linear-gradient(135deg, var(--ph-green-light, #ebf5e1), var(--ph-gray-bg, #f9fafb));
	box-shadow: 0 0.25rem 1.25rem rgba(0, 0, 0, 0.03);
}

/* ----- Measures / Who (Figma 424:4710) ----- */
.ph-test-split {
	margin-bottom: 4.25rem;
}

.ph-test-split__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 3rem;
	align-items: stretch;
}

.ph-test-card {
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
	background: var(--ph-white, #fff);
	border: 0.0625rem solid #e0e0e0;
	border-radius: 2rem;
	padding: 2.5625rem;
	box-shadow: 0 0.25rem 0.625rem rgba(0, 0, 0, 0.03);
}

.ph-test-card__icon-wrap {
	width: 3.5rem;
	height: 3.5rem;
	border-radius: 1rem;
	background: var(--ph-green, #469f10);
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 0;
}

.ph-test-card__icon-svg {
	width: 2rem;
    height: 2rem;
    display: block;
    color: var(--ph-white, #fff);
    font-size: 2rem;
}

.ph-test-card__title {
	font-size: 2.25rem;
	font-weight: var(--ph-fw-bold, 700);
	line-height: 2.25rem;
	color: var(--ph-black, #333);
	margin: 0;
}

.ph-test-card__body {
	margin: 0;
	font-size: 1.375rem;
	line-height: 1.75rem;
	color: var(--ph-gray, #555);
}

.ph-test-card__body > p:first-child {
	margin-top: 0;
}

.ph-test-card__body--measures ul,
.ph-test-card__body--who ul {
	list-style: none;
	margin: 0;
	padding: 0.5rem 0 0;
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.ph-test-card__body--measures ul li,
.ph-test-card__body--who ul li {
	position: relative;
	padding-left: 2rem;
	margin: 0;
	font-size: 1.25rem;
	line-height: 1.75rem;
	color: var(--ph-black, #333);
}

/* Same asset as book single / Painhunter Community — assets/icons/check-green-circle.svg */
.ph-test-card__body--measures ul li::before,
.ph-test-card__body--who ul li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 4px;
    width: 20px;
    height: 20px;
	background: url("../icons/check-green-circle.svg") no-repeat center / contain;
}

/* ----- Receive + How duo (Figma 424:4787) ----- */
.ph-test-duo {
	margin-bottom: 4.25rem;
}

.ph-test-duo__shell {
	background: var(--ph-white, #fff);
	border: 0.0625rem solid #e0e0e0;
	border-radius: 2rem;
	overflow: hidden;
	box-shadow: 0 0.25rem 1.25rem rgba(0, 0, 0, 0.03);
}

.ph-test-duo__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0;
	min-height: 100%;
}

.ph-test-duo__grid:has(> :only-child) {
	grid-template-columns: 1fr;
}

.ph-test-duo__col {
	padding: 4rem;
}

.ph-test-duo__col--receive {
	background: var(--ph-white, #fff);
}

.ph-test-duo__col--how {
	background: rgba(238, 236, 236, 0.5);
	border-left: 0.0625rem solid #e8e8e8;
	position: relative;
}

.ph-test-duo__heading {
	font-size: 2.125rem;
	font-weight: var(--ph-fw-bold, 700);
	line-height: 2.25rem;
	color: var(--ph-black, #333);
	margin: 0 0 0.25rem;
}

.ph-test-duo__heading--how {
	margin-bottom: 0;
	padding-bottom: 1.5rem;
}

.ph-test-duo__intro {
	font-size: 1.25rem;
	line-height: 1.75rem;
	color: var(--ph-gray, #555);
	margin: 0 0 1.5rem;
}

.ph-test-receive-grid {
	list-style: none;
	margin: 0;
	padding: 0.5rem 0 0;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1.5rem;
}

.ph-test-receive-grid__item {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 1rem;
	padding: 1.5625rem;
	background: #fbfbfb;
	border: 0.0625rem solid #e0e0e0;
	border-radius: 1rem;
	color: var(--ph-black, #333);
}

.ph-test-receive-grid__item--wide {
	grid-column: 1 / -1;
}

.ph-test-receive-grid__text {
	font-size: 1rem;
	font-weight: var(--ph-fw-bold, 700);
	line-height: 1.5rem;
	display: block;
}

.ph-test-receive-grid__ic-svg {
	width: 30px;
    height: 30px;
    flex-shrink: 0;
    color: var(--ph-green);
    font-size: 30px;
}

.ph-test-how-track {
	display: flex;
	flex-direction: column;
	gap: 3rem;
	padding-top: 0.5rem;
}

.ph-test-how-step {
	display: flex;
	flex-direction: column;
	width: 100%;
	align-items: stretch;
}

.ph-test-how-step__card-wrap {
	flex: 0 0 auto;
	width: 13.9375rem;
	max-width: 100%;
	box-sizing: border-box;
}

.ph-test-how-step--stagger-right .ph-test-how-step__card-wrap {
	margin-left: auto;
	margin-right: 0;
}

.ph-test-how-step--stagger-left .ph-test-how-step__card-wrap {
	margin-left: 0;
	margin-right: auto;
}

.ph-test-how-step__card {
	position: relative;
	width: 100%;
	background: var(--ph-white, #fff);
	border: 0.0625rem solid #e0e0e0;
	border-radius: 1rem;
	padding: 25px 20px 20px 25px;
	box-shadow: 0 0.0625rem 0.0625rem rgba(0, 0, 0, 0.05);
	min-width: 0;
}

.ph-test-how-step__title {
	font-size: 1.25rem;
	font-weight: var(--ph-fw-bold, 700);
	margin: 0 0 0.25rem;
	line-height: 1.75rem;
	color: var(--ph-black, #333);
}

.ph-test-how-step__desc {
	margin: 0;
	font-size: 1rem;
	line-height: 1.25rem;
	color: var(--ph-gray, #555);
}

/* Green circle + white ring, overlapping the card corner (always visible, not clipped by flex layout) */
.ph-test-how-step__badge {
	position: absolute;
	z-index: 1;
	box-sizing: border-box;
	width: 3rem;
	height: 3rem;
	border-radius: 50%;
	border: 0.25rem solid var(--ph-white, #fff);
	background: var(--ph-green, #469f10);
	color: var(--ph-white, #fff);
	font-size: 1.25rem;
	font-weight: var(--ph-fw-bold, 700);
	display: flex;
	align-items: center;
	justify-content: center;
	line-height: 1;
	box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.12), 0 0.0625rem 0.125rem rgba(0, 0, 0, 0.08);
	top: -20px;
    left: -20px;
	right: auto;
}

/* ----- Ready band (Figma 424:4855) ----- */
.ph-test-ready-band {
	margin-bottom: 4.25rem;
}

.ph-test-ready-band__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 2rem;
	text-align: center;
	background: var(--ph-black, #333);
	border-radius: 2rem;
	padding: 3rem;
}

.ph-test-ready-band__title {
	font-size: 2.375rem;
	font-weight: var(--ph-fw-bold, 700);
	line-height: 2.5rem;
	color: var(--ph-white, #fff);
	margin: 0;
}

.ph-test-ready-band__btn {
	display: inline-flex;
	align-items: center;
	gap: 0.75rem;
	padding: 1.25rem 2.5rem;
	margin: 0;
	border: none;
	cursor: pointer;
	text-decoration: none;
	box-sizing: border-box;
	background: var(--ph-green, #469f10);
	color: var(--ph-white, #fff);
	font-size: 1.375rem;
	font-weight: var(--ph-fw-bold, 700);
	line-height: 1.75rem;
	border-radius: var(--ph-border-radius-pill, 50px);
	text-decoration: none;
	transition: background var(--ph-transition, 0.22s ease);
	box-shadow: 0 0.625rem 0.9375rem -0.1875rem rgba(0, 0, 0, 0.1), 0 0.25rem 0.375rem -0.25rem rgba(0, 0, 0, 0.1);
}
.ph-test-ready-band__btn svg {
	width: 20px;
    height: 20px;
}

.ph-test-ready-band__btn:hover,
.ph-test-ready-band__btn:focus-visible {
	background: var(--ph-green-dark, #357d0c);
	color: var(--ph-white, #fff);
}

/* ----- Related content (Figma 424:4865) ----- */
.ph-test-related {
	margin-top: 0;
	margin-bottom: 2.5rem;
	padding: 3.3125rem 0 2.875rem;
	border-top: 0.0625rem solid #e0e0e0;
}

.ph-test-related__head {
	margin-bottom: 2.5rem;
}

.ph-test-related__title {
	font-size: 2.1875rem;
	font-weight: var(--ph-fw-bold, 700);
	line-height: 2.25rem;
	margin: 0;
	color: var(--ph-black, #333);
}

.ph-test-related .ph-related-ac {
	margin: 0;
}


.ph-test-related .ph-related-ac__title {
	font-size: 1.75rem;
	line-height: 2rem;
}

.ph-test-related .ph-related-ac__view-all {
	font-size: 1.125rem;
}

/* ----- Disclaimer (Figma 424:4913) ----- */
.ph-test-disclaimer-fig {
	padding-top: 2rem;
	padding-bottom: 2rem;
	background-color: #fff;
	border-top: 0.0625rem solid #e0e0e0;
}

.ph-test-disclaimer-fig__box {
	margin: 0 auto;
	background: #fbfbfb;
	border: 0.0625rem solid #e0e0e0;
	border-radius: 1rem;
	padding: 20px;
	text-align: center;
}

.ph-test-disclaimer-fig__label {
	font-size: 1.125rem;
	font-weight: var(--ph-fw-bold, 700);
	text-transform: uppercase;
	letter-spacing: 0.0875rem;
	color: var(--ph-green, #469f10);
	margin: 0 0 0.375rem;
	line-height: 1.25rem;
}

.ph-test-disclaimer-fig__body {
	font-size: 1.375rem;
	line-height: 1.6125rem;
	font-style: italic;
	color: var(--ph-gray, #555);
	margin: 0;
}

.ph-test-disclaimer-fig__body p {
	margin: 0 0 0.75rem;
}

.ph-test-disclaimer-fig__body p:last-child {
	margin-bottom: 0;
}

@media (max-width: 900px) {
	.ph-test-single__stack {
		padding-left: 1.25rem;
		padding-right: 1.25rem;
	}

	.ph-test-hero__card {
		padding: 2rem 1.5rem;
		border-radius: 1.5rem;
	}

	.ph-test-hero__grid {
		grid-template-columns: 1fr;
		gap: 2rem;
	}

	.ph-test-hero__media {
		min-height: 18rem;
	}

	.ph-test-hero__img,
	.ph-test-hero__img--placeholder {
		min-height: 18rem;
	}

	.ph-test-hero__title {
		font-size: 2.5rem;
	}

	.ph-test-split__grid {
		grid-template-columns: 1fr;
		gap: 2rem;
	}

	.ph-test-duo__grid {
		grid-template-columns: 1fr;
	}

	.ph-test-duo__col {
		padding: 2rem 1.5rem;
	}

	.ph-test-duo__col--how {
		border-left: none;
		border-top: 0.0625rem solid #e8e8e8;
	}

	.ph-test-receive-grid {
		grid-template-columns: 1fr;
	}

	.ph-test-how-step {
		align-items: stretch;
	}

	.ph-test-how-step--stagger-left .ph-test-how-step__card-wrap,
	.ph-test-how-step--stagger-right .ph-test-how-step__card-wrap {
		margin-left: 0;
		margin-right: 0;
		width: 100%;
	}

	.ph-test-ready-band__inner {
		align-items: center;
		padding: 2rem 1.5rem;
	}

	.ph-test-ready-band__title {
		font-size: 1.75rem;
		line-height: 2rem;
	}
}