.ww-next-step-tool {
	width: min(calc(100% - var(--ww-container-gutter)), var(--ww-reading));
	margin: 0 auto;
	padding-block: clamp(3.25rem, 6vw, 5.25rem);
	scroll-margin-top: clamp(5rem, 10vw, 8rem);
}

.ww-next-step-tool__intro {
	margin-bottom: clamp(1.5rem, 3vw, 2.25rem);
}

.ww-next-step-tool__label,
.ww-next-step-tool__result-label {
	margin: 0;
	color: var(--ww-color-coral-dark);
	font-size: 0.76rem;
	font-weight: 800;
	letter-spacing: 0.13em;
	line-height: 1.35;
	text-transform: uppercase;
}

.ww-next-step-tool__intro h1 {
	margin: 0.7rem 0 1rem;
	font-size: clamp(2rem, 4vw, 3.15rem);
	line-height: 1.04;
}

.ww-next-step-tool__intro > p:last-child {
	max-width: 42rem;
	margin-bottom: 0;
	color: var(--ww-color-ink-soft);
}

.ww-next-step-tool__form,
.ww-next-step-tool__result {
	padding: clamp(1.25rem, 3vw, 2rem);
	border: 1px solid var(--ww-color-border);
	border-radius: var(--ww-radius-lg);
}

.ww-next-step-tool__form {
	background: var(--ww-color-white);
}

.ww-next-step-tool__result {
	background: var(--ww-color-cream-2);
}

.ww-next-step-tool__milestones {
	display: grid;
	gap: 2rem;
}

.ww-next-step-tool__milestone {
	display: grid;
	gap: 0;
	margin: 0;
	padding: 0;
	border: 0;
}

.ww-next-step-tool__milestone legend {
	max-width: 43rem;
	margin: 0;
	padding: 0;
	font-size: 0.98rem;
	font-weight: 800;
	line-height: 1.45;
}

.ww-next-step-tool__milestone legend span {
	color: var(--ww-color-coral-deep);
}

.ww-next-step-tool__choices {
	display: flex;
	margin: 1rem 0 0;
	gap: 0.6rem;
	flex-wrap: wrap;
}

.ww-next-step-tool__choice {
	display: inline-flex;
	min-height: 3rem;
	padding: 0.65rem 0.85rem;
	align-items: center;
	gap: 0.55rem;
	border: 1px solid rgb(42 35 32 / 0.22);
	border-radius: var(--ww-radius-sm);
	background: var(--ww-color-white);
	font-size: 0.9rem;
	font-weight: 800;
	line-height: 1.25;
	cursor: pointer;
}

.ww-next-step-tool__choice:has(input:checked) {
	border-color: var(--ww-color-coral-dark);
	background: var(--ww-color-cream-2);
}

.ww-next-step-tool__choice input {
	width: 1.15rem;
	height: 1.15rem;
	margin: 0;
	accent-color: var(--ww-color-coral-dark);
}

.ww-next-step-tool__choice input:focus-visible {
	outline: 3px solid rgb(15 110 86 / 0.36);
	outline-offset: 3px;
}

.ww-next-step-tool__milestone[data-invalid="true"] .ww-next-step-tool__choice {
	border-color: var(--ww-color-coral-deep);
}

.ww-next-step-tool__error {
	margin: 0.7rem 0 0;
	color: var(--ww-color-coral-deep);
	font-size: 0.84rem;
	font-weight: 800;
	line-height: 1.45;
}

.ww-next-step-tool__form > .ww-button {
	margin-top: 1.5rem;
	cursor: pointer;
}

.ww-next-step-tool__result-panel h3 {
	max-width: 24ch;
	margin: 0.55rem 0 0;
	font-size: clamp(1.75rem, 3vw, 2.2rem);
	line-height: 1.04;
}

.ww-next-step-tool__result-copy {
	max-width: 48rem;
	margin: 1rem 0 0;
	line-height: 1.6;
}

.ww-next-step-tool__advanced-note {
	margin: 1rem 0 0;
	padding-left: 0.85rem;
	border-left: 3px solid var(--ww-color-coral-dark);
	color: var(--ww-color-ink-soft);
	font-size: 0.88rem;
	line-height: 1.5;
}

.ww-next-step-tool__result-panel .ww-button {
	margin-top: 1.35rem;
	cursor: pointer;
}

.ww-next-step-tool__secondary-link {
	display: inline-flex;
	margin-top: 1rem;
	align-items: center;
	gap: 0.45rem;
	color: var(--ww-color-coral-deep);
	font-size: 0.9rem;
	font-weight: 800;
}

.ww-next-step-tool__secondary-link span {
	transition: transform var(--ww-transition);
}

.ww-next-step-tool__secondary-link:hover span,
.ww-next-step-tool__secondary-link:focus-visible span {
	transform: translateX(0.25rem);
}

.ww-next-step-tool__result-actions {
	display: flex;
	margin-top: 1.5rem;
	padding-top: 1.25rem;
	align-items: center;
	gap: 0.8rem;
	border-top: 1px solid var(--ww-color-border);
	flex-wrap: wrap;
}

.ww-next-step-tool__result-actions .ww-button {
	cursor: pointer;
}

.ww-next-step-tool__reset {
	padding: 0;
	border: 0;
	border-bottom: 1px solid currentcolor;
	background: transparent;
	color: var(--ww-color-ink-soft);
	font: inherit;
	font-size: 0.84rem;
	font-weight: 700;
	cursor: pointer;
}

.ww-next-step-tool__reset:hover,
.ww-next-step-tool__reset:focus-visible {
	color: var(--ww-color-coral-deep);
}

.ww-next-step-tool__noscript {
	margin: 0.85rem 0 0;
	color: var(--ww-color-ink-soft);
	font-size: 0.88rem;
}

.ww-next-step-page {
	background: var(--ww-color-cream);
}

.ww-next-step-page__back {
	width: min(calc(100% - var(--ww-container-gutter)), var(--ww-reading));
	margin: 0 auto;
	padding-bottom: clamp(3rem, 5vw, 4.5rem);
}

.ww-next-step-page__back a {
	color: var(--ww-color-coral-deep);
	font-size: 0.9rem;
	font-weight: 800;
}

.ww-next-step-page__back a:hover,
.ww-next-step-page__back a:focus-visible {
	color: var(--ww-color-coral-dark);
}

@media (max-width: 42rem) {
	.ww-next-step-tool__form,
	.ww-next-step-tool__result {
		padding: 1.2rem;
	}

	.ww-next-step-tool__choice {
		min-width: 7.25rem;
	}

	.ww-next-step-tool__result-panel .ww-button {
		width: 100%;
	}

	.ww-next-step-tool__result-actions {
		display: grid;
		align-items: stretch;
	}

	.ww-next-step-tool__result-actions .ww-button {
		width: 100%;
	}

	.ww-next-step-tool__reset {
		justify-self: start;
	}
}

@media (prefers-reduced-motion: reduce) {
	.ww-next-step-tool *,
	.ww-next-step-tool *::before,
	.ww-next-step-tool *::after {
		transition-duration: 0.01ms !important;
	}
}