.tsn-spe-app {
	--tsn-navy: #06244a;
	--tsn-navy-2: #0d3d82;
	--tsn-blue: #1058b8;
	--tsn-orange: #f47b20;
	--tsn-green: #24a148;
	--tsn-red: #d93025;
	--tsn-ink: #102033;
	--tsn-muted: #667085;
	--tsn-line: #d8e2f1;
	--tsn-soft: #f5f8fc;
	--tsn-white: #fff;
	--tsn-shadow: 0 18px 50px rgba(6, 36, 74, 0.11);
	max-width: 1180px;
	margin: 0 auto;
	color: var(--tsn-ink);
	font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.tsn-spe-hero {
	display: grid;
	grid-template-columns: 160px 1fr;
	gap: 24px;
	align-items: center;
	margin: 0 0 18px;
}

.tsn-spe-brand {
	color: var(--tsn-navy);
	line-height: 1;
}

.tsn-spe-brand strong {
	display: block;
	font-size: 48px;
	letter-spacing: 1px;
}

.tsn-spe-brand span {
	display: block;
	font-size: 10px;
	font-weight: 800;
	text-transform: uppercase;
}

.tsn-spe-eyebrow {
	margin: 0 0 4px;
	color: var(--tsn-blue);
	font-size: 12px;
	font-weight: 800;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.tsn-spe-hero h1 {
	margin: 0;
	color: var(--tsn-navy);
	font-size: 30px;
	line-height: 1.15;
}

.tsn-spe-stepper {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 16px;
	margin: 0 0 22px;
}

.tsn-spe-step {
	position: relative;
	display: flex;
	align-items: center;
	gap: 10px;
	color: #9aa4b2;
	font-weight: 800;
}

.tsn-spe-step::after {
	content: "";
	height: 2px;
	flex: 1;
	background: var(--tsn-line);
}

.tsn-spe-step b {
	display: grid;
	width: 30px;
	height: 30px;
	place-items: center;
	border-radius: 999px;
	background: #cfd6e1;
	color: var(--tsn-white);
}

.tsn-spe-step.is-active {
	color: var(--tsn-navy);
}

.tsn-spe-step.is-active b,
.tsn-spe-step.is-active::after {
	background: var(--tsn-blue);
}

.tsn-spe-wizard-layout,
.tsn-spe-results-page {
	display: grid;
	grid-template-columns: minmax(0, 1.45fr) minmax(320px, 0.75fr);
	gap: 22px;
	align-items: start;
}

.tsn-spe-card {
	overflow: hidden;
	border: 1px solid var(--tsn-line);
	border-radius: 8px;
	background: var(--tsn-white);
	box-shadow: var(--tsn-shadow);
}

.tsn-spe-card-head {
	background: linear-gradient(135deg, var(--tsn-navy), var(--tsn-blue));
	color: var(--tsn-white);
	padding: 16px 18px;
}

.tsn-spe-card-head span {
	display: block;
	font-size: 13px;
	font-weight: 800;
	opacity: 0.9;
}

.tsn-spe-card-head h2 {
	margin: 2px 0 0;
	color: var(--tsn-white);
	font-size: 18px;
}

.tsn-spe-form-step {
	display: none;
	padding: 18px;
}

.tsn-spe-form-step.is-active {
	display: block;
}

.tsn-spe-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 16px;
}

.tsn-spe-service-picker {
	margin-bottom: 18px;
}

.tsn-spe-service-picker.has-error {
	border-radius: 12px;
	box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.15);
}

.tsn-spe-service-picker h3,
.tsn-spe-trade-questions h3 {
	margin: 0 0 6px;
	color: var(--tsn-navy);
	font-size: 18px;
}

.tsn-spe-service-picker p,
.tsn-spe-trade-questions p {
	margin: 0 0 14px;
	color: var(--tsn-muted);
}

.tsn-spe-service-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 12px;
}

.tsn-spe-service-card {
	display: grid;
	gap: 8px;
	align-content: start;
	min-height: 132px;
	border: 1px solid var(--tsn-line);
	border-radius: 10px;
	background: var(--tsn-white);
	color: var(--tsn-ink);
	padding: 14px;
	text-align: left;
	cursor: pointer;
	transition: border-color 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease;
}

.tsn-spe-service-card:hover,
.tsn-spe-service-card.is-selected {
	border-color: var(--tsn-orange);
	box-shadow: 0 10px 24px rgba(245, 130, 32, 0.18);
	transform: translateY(-1px);
}

.tsn-spe-service-card span {
	display: grid;
	width: 38px;
	height: 38px;
	place-items: center;
	border-radius: 10px;
	background: #fff3e7;
	color: var(--tsn-orange);
	font-weight: 900;
}

.tsn-spe-service-card strong {
	color: var(--tsn-navy);
	font-size: 14px;
}

.tsn-spe-service-card small {
	color: var(--tsn-muted);
}

.tsn-spe-trade-questions {
	border: 1px solid var(--tsn-line);
	border-radius: 10px;
	background: #f8fbff;
	margin-bottom: 18px;
	padding: 16px;
}

.tsn-spe-trade-questions label {
	margin-top: 12px;
}

.tsn-spe label {
	display: grid;
	gap: 7px;
	font-size: 13px;
	font-weight: 800;
}

.tsn-spe label em {
	color: var(--tsn-orange);
	font-style: normal;
}

.tsn-spe input,
.tsn-spe select,
.tsn-spe textarea {
	width: 100%;
	border: 1px solid #cdd8e8;
	border-radius: 6px;
	background: var(--tsn-white);
	color: var(--tsn-ink);
	font: inherit;
	padding: 11px 12px;
	transition: border-color 0.16s ease, box-shadow 0.16s ease;
}

.tsn-spe input:focus,
.tsn-spe select:focus,
.tsn-spe textarea:focus {
	border-color: var(--tsn-blue);
	box-shadow: 0 0 0 3px rgba(16, 88, 184, 0.13);
	outline: 0;
}

.tsn-spe-wide {
	grid-column: 1 / -1;
}

.tsn-spe-upload-panel {
	display: grid;
	gap: 16px;
}

.tsn-spe-file-drop {
	min-height: 150px;
	place-items: center;
	border: 1px dashed var(--tsn-blue);
	border-radius: 8px;
	background: #f7fbff;
	padding: 20px;
	text-align: center;
}

.tsn-spe-file-drop input {
	max-width: 340px;
	border: 0;
	background: transparent;
}

.tsn-spe-file-drop span {
	display: grid;
	width: 42px;
	height: 42px;
	place-items: center;
	border-radius: 999px;
	background: var(--tsn-white);
	color: var(--tsn-blue);
	font-size: 26px;
	box-shadow: 0 5px 16px rgba(6, 36, 74, 0.12);
}

.tsn-spe-file-drop small,
.tsn-spe-side-preview p,
.tsn-spe-disclaimer,
.tsn-spe-lock {
	color: var(--tsn-muted);
	font-size: 13px;
	line-height: 1.55;
}

.tsn-spe-consent {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	font-weight: 600;
}

.tsn-spe-consent input {
	width: auto;
	margin-top: 3px;
	accent-color: var(--tsn-blue);
}

.tsn-spe-actions {
	display: flex;
	justify-content: flex-end;
	gap: 10px;
	margin-top: 18px;
}

.tsn-spe-button,
.tsn-spe-submit,
.tsn-spe-match {
	border: 0;
	border-radius: 6px;
	font-weight: 800;
	cursor: pointer;
	padding: 12px 18px;
}

.tsn-spe-button-primary,
.tsn-spe-submit {
	background: linear-gradient(135deg, var(--tsn-blue), var(--tsn-navy));
	color: var(--tsn-white);
}

.tsn-spe-button-ghost {
	border: 1px solid var(--tsn-line);
	background: var(--tsn-white);
	color: var(--tsn-navy);
}

.tsn-spe-side-preview {
	padding-bottom: 18px;
}

.tsn-spe-side-preview ul {
	display: grid;
	gap: 12px;
	margin: 18px;
	padding: 0;
	list-style: none;
}

.tsn-spe-side-preview li {
	position: relative;
	padding-left: 28px;
	font-weight: 700;
}

.tsn-spe-side-preview li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 3px;
	width: 16px;
	height: 16px;
	border-radius: 999px;
	background: var(--tsn-orange);
}

.tsn-spe-side-preview p {
	margin: 0 18px;
}

.tsn-spe-results-page {
	grid-template-columns: minmax(0, 1fr) 380px;
}

.tsn-spe-result-main,
.tsn-spe-match-card {
	padding: 20px;
}

.tsn-spe-ready {
	display: flex;
	align-items: center;
	gap: 14px;
	margin: -20px -20px 18px;
	padding: 18px 20px;
	background: linear-gradient(90deg, #effff4, #fff);
}

.tsn-spe-ready span {
	display: grid;
	width: 34px;
	height: 34px;
	place-items: center;
	border-radius: 999px;
	background: var(--tsn-green);
	color: var(--tsn-white);
	font-weight: 900;
}

.tsn-spe-ready h2,
.tsn-spe-match-card h2 {
	margin: 0 0 4px;
	color: var(--tsn-navy);
}

.tsn-spe-ready p,
.tsn-spe-match-card p {
	margin: 0;
}

.tsn-spe-conversion-strip,
.tsn-spe-lead-benefits {
	border: 1px solid #fed7aa;
	border-radius: 10px;
	background: #fff7ed;
	color: #7c2d12;
	margin-bottom: 16px;
	padding: 14px 16px;
}

.tsn-spe-lead-benefits {
	margin-top: 18px;
}

.tsn-spe-lead-benefits strong {
	display: block;
	margin-bottom: 8px;
	color: var(--tsn-navy);
}

.tsn-spe-lead-benefits ul {
	margin: 0;
	padding-left: 18px;
}

.tsn-spe-files {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 12px;
}

.tsn-spe-files a {
	border: 1px solid var(--tsn-line);
	border-radius: 8px;
	background: var(--tsn-soft);
	color: var(--tsn-navy);
	padding: 8px 10px;
	text-decoration: none;
}

.tsn-spe-costs {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	margin: 0 0 16px;
	border: 1px solid var(--tsn-line);
	border-radius: 8px;
}

.tsn-spe-costs span {
	padding: 18px;
	text-align: center;
	font-size: 22px;
	font-weight: 900;
}

.tsn-spe-costs span + span {
	border-left: 1px solid var(--tsn-line);
}

.tsn-spe-costs small {
	display: block;
	margin-bottom: 6px;
	color: var(--tsn-muted);
	font-size: 12px;
	font-weight: 700;
}

.tsn-spe-costs span:nth-child(2) {
	color: var(--tsn-green);
}

.tsn-spe-breakdown,
.tsn-spe-result-facts,
.tsn-spe-callout {
	border: 1px solid var(--tsn-line);
	border-radius: 8px;
	padding: 16px;
}

.tsn-spe-breakdown {
	margin-bottom: 14px;
}

.tsn-spe-breakdown h3 {
	margin: 0 0 12px;
}

.tsn-spe-breakdown h3 small {
	color: var(--tsn-muted);
	font-weight: 500;
}

.tsn-spe-breakdown div {
	display: flex;
	justify-content: space-between;
	gap: 16px;
	border-top: 1px solid #edf1f6;
	padding: 10px 0;
}

.tsn-spe-breakdown div:first-of-type {
	border-top: 0;
}

.tsn-spe-breakdown .is-total {
	color: var(--tsn-green);
	font-weight: 900;
}

.tsn-spe-result-facts {
	display: grid;
	gap: 12px;
}

.tsn-spe-result-facts > div {
	display: flex;
	gap: 12px;
	align-items: flex-start;
}

.tsn-spe-mini-icon {
	display: grid;
	width: 28px;
	height: 28px;
	flex: 0 0 28px;
	place-items: center;
	border-radius: 8px;
	background: #ecf4ff;
	color: var(--tsn-blue);
	font-weight: 900;
}

.tsn-spe-result-facts p {
	margin: 0;
}

.tsn-spe-callout {
	margin-top: 18px;
}

.tsn-spe-callout h3 {
	margin: 0 0 10px;
	color: var(--tsn-navy);
}

.tsn-spe-callout ul {
	margin: 0;
	padding-left: 20px;
}

.tsn-spe-callout-blue {
	border-left: 4px solid var(--tsn-blue);
}

.tsn-spe-callout-red {
	border-left: 4px solid var(--tsn-red);
}

.tsn-spe-match {
	display: block;
	width: 100%;
	margin-top: 20px;
	background: linear-gradient(135deg, var(--tsn-orange), #d85d05);
	color: var(--tsn-white);
	font-size: 20px;
	line-height: 1.2;
}

.tsn-spe-lock {
	margin: 10px 0 0;
	text-align: center;
}

.tsn-spe-alert {
	border-radius: 8px;
	margin-bottom: 18px;
	padding: 14px 16px;
}

.tsn-spe-alert-error {
	border: 1px solid #f2b8b5;
	background: #fff3f2;
}

.tsn-spe-alert-success {
	border: 1px solid #9bd4ad;
	background: #f1fff5;
}

@media (max-width: 900px) {
	.tsn-spe-hero,
	.tsn-spe-wizard-layout,
	.tsn-spe-results-page {
		grid-template-columns: 1fr;
	}

	.tsn-spe-service-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.tsn-spe-brand strong {
		font-size: 40px;
	}
}

@media (max-width: 680px) {
	.tsn-spe-stepper,
	.tsn-spe-grid,
	.tsn-spe-costs,
	.tsn-spe-service-grid {
		grid-template-columns: 1fr;
	}

	.tsn-spe-step::after,
	.tsn-spe-costs span + span {
		display: none;
	}

	.tsn-spe-actions {
		flex-direction: column-reverse;
	}

	.tsn-spe-button,
	.tsn-spe-submit,
	.tsn-spe-match {
		width: 100%;
	}
}