.jps-survey {
	--jps-accent: #008f95;
	--jps-ink: #162b33;
	--jps-muted: #60757c;
	--jps-border: #dce7e9;
	--jps-surface: #ffffff;
	--jps-soft: #f3f9f9;
	--jps-error: #b42318;
	position: relative;
	isolation: isolate;
	width: min(100%, 820px);
	margin: 32px auto;
	padding: clamp(24px, 5vw, 48px);
	overflow: hidden;
	border: 1px solid var(--jps-border);
	border-radius: 24px;
	background:
		radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--jps-accent) 12%, transparent), transparent 42%),
		linear-gradient(145deg, #fff 0%, #fbfdfd 100%);
	box-shadow: 0 24px 70px rgba(14, 48, 56, .10);
	color: var(--jps-ink);
	font-family: inherit;
	line-height: 1.5;
}

.jps-survey *,
.jps-survey *::before,
.jps-survey *::after {
	box-sizing: border-box;
}

.jps-survey [hidden] {
	display: none !important;
}

.jps-survey .screen-reader-text {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	padding: 0 !important;
	margin: -1px !important;
	overflow: hidden !important;
	clip: rect(0, 0, 0, 0) !important;
	white-space: nowrap !important;
	border: 0 !important;
}

.jps-survey__glow {
	position: absolute;
	z-index: -1;
	top: -110px;
	right: -120px;
	width: 330px;
	height: 330px;
	border-radius: 50%;
	background: color-mix(in srgb, var(--jps-accent) 10%, transparent);
	filter: blur(8px);
	pointer-events: none;
}

.jps-survey__header {
	max-width: 650px;
	margin-bottom: 28px;
}

.jps-survey__eyebrow {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 12px !important;
	color: var(--jps-accent);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
}

.jps-survey__eyebrow-icon {
	display: inline-grid;
	place-items: center;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	background: color-mix(in srgb, var(--jps-accent) 12%, #fff);
	font-size: 13px;
}

.jps-survey__header h2 {
	margin: 0 0 10px !important;
	color: var(--jps-ink) !important;
	font-family: inherit;
	font-size: clamp(27px, 4vw, 38px) !important;
	font-weight: 700 !important;
	letter-spacing: -.025em;
	line-height: 1.14 !important;
}

.jps-survey__header > p:last-child {
	margin: 0 !important;
	color: var(--jps-muted);
	font-size: 16px;
}

.jps-survey__progress {
	margin-bottom: 32px;
}

.jps-survey__progress-copy {
	display: flex;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 9px;
	color: var(--jps-muted);
	font-size: 13px;
}

.jps-survey__step-label strong {
	color: var(--jps-ink);
}

.jps-survey__time::before {
	content: "◷";
	margin-right: 5px;
}

.jps-survey__progress-track {
	height: 6px;
	overflow: hidden;
	border-radius: 999px;
	background: #e8f0f1;
}

.jps-survey__progress-bar {
	display: block;
	height: 100%;
	border-radius: inherit;
	background: var(--jps-accent);
	transition: width 260ms cubic-bezier(.2, 0, 0, 1);
}

.jps-survey__form {
	margin: 0;
}

.jps-survey__step {
	min-width: 0;
	margin: 0;
	padding: 0;
	border: 0;
	animation: jps-fade-in 220ms cubic-bezier(.2, 0, 0, 1);
}

.jps-survey__step legend {
	display: block;
	width: 100%;
	margin: 0 0 8px;
	padding: 0;
	color: var(--jps-ink);
	font-size: clamp(20px, 3vw, 25px);
	font-weight: 700;
	letter-spacing: -.015em;
	line-height: 1.3;
}

.jps-survey__step legend:focus {
	outline: none;
}

.jps-survey__hint {
	margin: 0 0 22px !important;
	color: var(--jps-muted);
	font-size: 14px;
}

.jps-survey__choices {
	display: grid;
	gap: 10px;
}

.jps-survey__choices--services {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.jps-choice {
	position: relative;
	display: flex;
	align-items: center;
	gap: 12px;
	min-height: 54px;
	margin: 0;
	padding: 12px 15px;
	border: 1px solid var(--jps-border);
	border-radius: 14px;
	background: var(--jps-surface);
	color: var(--jps-ink);
	cursor: pointer;
	font-size: 15px;
	font-weight: 600;
	transition: border-color 150ms ease, background 150ms ease, transform 150ms ease, box-shadow 150ms ease;
}

.jps-choice:hover {
	border-color: color-mix(in srgb, var(--jps-accent) 52%, var(--jps-border));
	transform: translateY(-1px);
}

.jps-choice:has(input:checked) {
	border-color: var(--jps-accent);
	background: color-mix(in srgb, var(--jps-accent) 7%, #fff);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--jps-accent) 12%, transparent);
}

.jps-choice input {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

.jps-choice__mark {
	flex: 0 0 auto;
	width: 20px;
	height: 20px;
	border: 2px solid #b7c8cc;
	border-radius: 50%;
	background: #fff;
	box-shadow: inset 0 0 0 4px #fff;
	transition: border-color 150ms ease, background 150ms ease;
}

.jps-choice input:checked + .jps-choice__mark {
	border-color: var(--jps-accent);
	background: var(--jps-accent);
}

.jps-choice:has(input:focus-visible) {
	outline: 3px solid color-mix(in srgb, var(--jps-accent) 30%, transparent);
	outline-offset: 2px;
}

.jps-survey__other {
	margin-top: 16px;
	animation: jps-fade-in 180ms cubic-bezier(.2, 0, 0, 1);
}

.jps-survey__other label {
	display: block;
	margin: 0;
	color: var(--jps-ink);
	font-size: 14px;
	font-weight: 700;
}

.jps-survey__other label > span {
	display: block;
	margin-bottom: 7px;
}

.jps-survey__other input {
	display: block;
	width: 100%;
	min-height: 50px;
	margin: 0;
	padding: 12px 15px;
	border: 1px solid var(--jps-border);
	border-radius: 14px;
	background: #fff;
	color: var(--jps-ink);
	font: inherit;
	font-size: 16px;
	font-weight: 400;
	transition: border-color 150ms ease, box-shadow 150ms ease;
}

.jps-survey__other input::placeholder {
	color: #8ca0a6;
}

.jps-survey__other input:focus-visible {
	outline: none;
	border-color: var(--jps-accent);
	box-shadow: 0 0 0 4px color-mix(in srgb, var(--jps-accent) 15%, transparent);
}

.jps-survey__scale {
	display: grid;
	grid-template-columns: repeat(10, minmax(0, 1fr));
	gap: 7px;
}

.jps-survey__scale:has(.jps-scale-option:nth-child(11)) {
	grid-template-columns: repeat(11, minmax(0, 1fr));
}

.jps-scale-option {
	position: relative;
	margin: 0;
}

.jps-scale-option input {
	position: absolute;
	opacity: 0;
}

.jps-scale-option span {
	display: grid;
	place-items: center;
	min-width: 44px;
	height: 48px;
	border: 1px solid var(--jps-border);
	border-radius: 12px;
	background: #fff;
	color: var(--jps-ink);
	cursor: pointer;
	font-size: 15px;
	font-weight: 700;
	transition: color 150ms ease, background 150ms ease, border-color 150ms ease, transform 150ms ease;
}

.jps-scale-option:hover span {
	border-color: var(--jps-accent);
	transform: translateY(-1px);
}

.jps-scale-option input:checked + span {
	border-color: var(--jps-accent);
	background: var(--jps-accent);
	color: #fff;
	box-shadow: 0 7px 18px color-mix(in srgb, var(--jps-accent) 24%, transparent);
}

.jps-scale-option input:focus-visible + span {
	outline: 3px solid color-mix(in srgb, var(--jps-accent) 30%, transparent);
	outline-offset: 2px;
}

.jps-survey__scale-ends {
	display: flex;
	justify-content: space-between;
	gap: 16px;
	margin-top: 10px;
	color: var(--jps-muted);
	font-size: 12px;
}

.jps-survey__ratings {
	display: grid;
	gap: 12px;
}

.jps-rating {
	display: grid;
	grid-template-columns: minmax(190px, 1fr) auto 76px;
	align-items: center;
	gap: 18px;
	min-height: 72px;
	padding: 12px 16px;
	border: 1px solid var(--jps-border);
	border-radius: 14px;
	background: #fff;
}

.jps-rating__label {
	margin: 0 !important;
	color: var(--jps-ink);
	font-size: 14px;
	font-weight: 600;
}

.jps-rating__stars {
	display: flex;
	gap: 2px;
}

.jps-rating__stars label {
	position: relative;
	display: grid;
	place-items: center;
	width: 42px;
	height: 44px;
	margin: 0;
	border-radius: 9px;
	cursor: pointer;
}

.jps-rating__stars input {
	position: absolute;
	opacity: 0;
}

.jps-rating__stars span {
	color: #d7e0e2;
	font-size: 28px;
	line-height: 1;
	transition: color 120ms ease, transform 120ms ease;
}

.jps-rating__stars label:hover span,
.jps-rating__stars label.is-active span {
	color: #efb622;
	transform: scale(1.06);
}

.jps-rating__stars label:has(input:focus-visible) {
	outline: 3px solid color-mix(in srgb, var(--jps-accent) 30%, transparent);
	outline-offset: 1px;
}

.jps-rating__value {
	color: var(--jps-muted);
	font-size: 12px;
	text-align: right;
}

.jps-survey__textarea-label {
	display: block;
}

.jps-survey textarea {
	display: block;
	width: 100%;
	min-height: 148px;
	margin: 0;
	padding: 15px 16px;
	resize: vertical;
	border: 1px solid var(--jps-border);
	border-radius: 14px;
	background: #fff;
	color: var(--jps-ink);
	font: inherit;
	font-size: 16px;
	line-height: 1.5;
	transition: border-color 150ms ease, box-shadow 150ms ease;
}

.jps-survey textarea::placeholder {
	color: #8ca0a6;
}

.jps-survey textarea:focus-visible {
	outline: none;
	border-color: var(--jps-accent);
	box-shadow: 0 0 0 4px color-mix(in srgb, var(--jps-accent) 15%, transparent);
}

.jps-survey__privacy-note {
	display: block;
	margin-top: 10px;
	padding-left: 24px;
	color: var(--jps-muted);
	font-size: 12px;
}

.jps-survey__privacy-note::before {
	content: "ⓘ";
	margin-left: -24px;
	margin-right: 7px;
	color: var(--jps-accent);
}

.jps-survey__actions {
	display: flex;
	justify-content: flex-end;
	gap: 10px;
	margin-top: 28px;
	padding-top: 22px;
	border-top: 1px solid var(--jps-border);
}

.jps-survey__back {
	margin-right: auto;
}

.jps-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	min-height: 48px;
	margin: 0;
	padding: 0 20px;
	border-radius: 999px;
	cursor: pointer;
	font: inherit;
	font-size: 14px;
	font-weight: 700;
	line-height: 1;
	text-decoration: none !important;
	transition: transform 150ms ease, box-shadow 150ms ease, filter 150ms ease;
}

.jps-button:hover {
	transform: translateY(-1px);
}

.jps-button:active {
	transform: translateY(0);
}

.jps-button:focus-visible {
	outline: 3px solid color-mix(in srgb, var(--jps-accent) 30%, transparent);
	outline-offset: 2px;
}

.jps-button:disabled {
	opacity: .62;
	cursor: wait;
	transform: none;
}

.jps-button--primary {
	border: 1px solid var(--jps-accent);
	background: var(--jps-accent);
	color: #fff !important;
	box-shadow: 0 8px 22px color-mix(in srgb, var(--jps-accent) 24%, transparent);
}

.jps-button--primary:hover {
	filter: brightness(.94);
}

.jps-button--secondary {
	border: 1px solid var(--jps-border);
	background: #fff;
	color: var(--jps-ink) !important;
}

.jps-survey__error {
	display: none;
	margin: 18px 0 -12px !important;
	padding: 11px 14px;
	border-radius: 10px;
	background: #fff1f0;
	color: var(--jps-error);
	font-size: 13px;
	font-weight: 600;
}

.jps-survey__error.is-visible {
	display: block;
}

.jps-survey__trap {
	position: absolute !important;
	left: -99999px !important;
	width: 1px !important;
	height: 1px !important;
	overflow: hidden !important;
}

.jps-survey__success {
	max-width: 610px;
	margin: 0 auto;
	padding: clamp(30px, 6vw, 62px) 0;
	text-align: center;
	animation: jps-fade-in 300ms cubic-bezier(.2, 0, 0, 1);
}

.jps-survey__success:focus {
	outline: none;
}

.jps-survey__success-icon {
	display: grid;
	place-items: center;
	width: 74px;
	height: 74px;
	margin: 0 auto 22px;
	border-radius: 50%;
	background: color-mix(in srgb, var(--jps-accent) 12%, #fff);
	color: var(--jps-accent);
	font-size: 34px;
	font-weight: 700;
	box-shadow: 0 0 0 10px color-mix(in srgb, var(--jps-accent) 5%, transparent);
}

.jps-survey__success h3 {
	margin: 0 0 10px !important;
	color: var(--jps-ink) !important;
	font-family: inherit;
	font-size: clamp(25px, 4vw, 34px) !important;
	font-weight: 700 !important;
	line-height: 1.2 !important;
}

.jps-survey__success-message,
.jps-survey__google-message {
	color: var(--jps-muted);
	font-size: 15px;
}

.jps-survey__google {
	margin-top: 28px;
	padding: 22px;
	border: 1px solid var(--jps-border);
	border-radius: 16px;
	background: var(--jps-soft);
}

.jps-survey__google-message {
	margin: 0 0 16px !important;
}

.jps-button--google {
	border: 1px solid #d7dce1;
	background: #fff;
	color: #30434a !important;
	box-shadow: 0 6px 18px rgba(20, 46, 54, .08);
}

.jps-button--google::before {
	content: "G";
	display: grid;
	place-items: center;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	background: conic-gradient(from -45deg, #4285f4 0 25%, #34a853 0 50%, #fbbc05 0 75%, #ea4335 0);
	color: #fff;
	font-weight: 800;
}

@keyframes jps-fade-in {
	from { opacity: 0; transform: translateY(5px); }
	to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 720px) {
	.jps-survey {
		margin: 20px auto;
		border-radius: 20px;
	}

	.jps-survey__choices--services {
		grid-template-columns: 1fr;
	}

	.jps-survey__scale,
	.jps-survey__scale:has(.jps-scale-option:nth-child(11)) {
		grid-template-columns: repeat(5, minmax(0, 1fr));
	}

	.jps-scale-option span {
		min-width: 0;
	}

	.jps-rating {
		grid-template-columns: 1fr auto;
		gap: 4px 12px;
	}

	.jps-rating__label {
		grid-column: 1;
	}

	.jps-rating__stars {
		grid-column: 1 / -1;
		grid-row: 2;
		justify-content: space-between;
	}

	.jps-rating__stars label {
		width: 48px;
		height: 48px;
	}

	.jps-rating__value {
		grid-column: 2;
		grid-row: 1;
	}
}

@media (max-width: 430px) {
	.jps-survey {
		padding: 22px 17px;
		border-right: 0;
		border-left: 0;
		border-radius: 0;
	}

	.jps-survey__time {
		display: none;
	}

	.jps-survey__actions {
		flex-wrap: wrap;
	}

	.jps-button {
		flex: 1 1 auto;
	}

	.jps-survey__back {
		flex: 0 0 auto;
		margin-right: 0;
		padding: 0 15px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.jps-survey *,
	.jps-survey *::before,
	.jps-survey *::after {
		animation-duration: 1ms !important;
		transition-duration: 1ms !important;
		scroll-behavior: auto !important;
	}
}
