:root {
	--tskb-navy: #082846;
	--tskb-navy-2: #0d3b61;
	--tskb-teal: #0a7b78;
	--tskb-teal-soft: #e8f6f5;
	--tskb-amber: #c87908;
	--tskb-amber-soft: #fff5df;
	--tskb-blue-soft: #edf4fb;
	--tskb-ink: #102238;
	--tskb-muted: #5a6a79;
	--tskb-line: #d7e0e7;
	--tskb-white: #fff;
	--tskb-shadow: 0 12px 34px rgba(8, 40, 70, 0.09);
}

.tskb-app,
.tskb-article-cta {
	box-sizing: border-box;
	color: var(--tskb-ink);
	font-family: inherit;
}

body.tskb-dedicated-page #secondary,
body.tskb-dedicated-page #sidebar,
body.tskb-dedicated-page .sidebar,
body.tskb-dedicated-page .sidebar-area,
body.tskb-dedicated-page .widget-area,
body.tskb-dedicated-page .right-sidebar,
body.tskb-dedicated-page aside[role="complementary"] {
	display: none !important;
}

body.tskb-dedicated-page #primary,
body.tskb-dedicated-page .content-area,
body.tskb-dedicated-page .main-content,
body.tskb-dedicated-page .site-main {
	float: none !important;
	width: 100% !important;
	max-width: none !important;
	margin-right: auto !important;
	margin-left: auto !important;
}

.tskb-app *,
.tskb-article-cta * {
	box-sizing: border-box;
}

.tskb-app {
	max-width: 1440px !important;
	margin: clamp(20px, 4vw, 56px) auto;
	padding: 0 clamp(12px, 2vw, 28px);
}

.tskb-shell {
	background: var(--tskb-white);
	border: 1px solid var(--tskb-line);
	border-radius: 18px;
	box-shadow: var(--tskb-shadow);
	overflow: hidden;
}

.tskb-intro {
	padding: clamp(28px, 4vw, 58px);
	background:
		radial-gradient(circle at 92% 16%, rgba(10, 123, 120, 0.15), transparent 26%),
		linear-gradient(135deg, #fbfdfd 0%, #fff 58%, #f2f8fb 100%);
}

.tskb-intro h2,
.tskb-results__heading h2 {
	margin: 4px 0 12px;
	color: var(--tskb-navy);
	font-size: clamp(2rem, 4.2vw, 3.6rem);
	line-height: 1.05;
}

.tskb-intro > p:not(.tskb-eyebrow) {
	max-width: 760px;
	font-size: clamp(1rem, 1.5vw, 1.2rem);
	line-height: 1.65;
}

.tskb-eyebrow {
	margin: 0 0 5px;
	color: var(--tskb-teal);
	font-size: 0.8rem;
	font-weight: 800;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.tskb-privacy-note {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	margin-top: 18px;
	padding: 13px 16px;
	border: 1px solid #a9d9d7;
	border-radius: 10px;
	background: var(--tskb-teal-soft);
	color: #075d5b;
}

.tskb-inline-icon,
.tskb-choice__icon {
	display: inline-grid;
	place-items: center;
	color: var(--tskb-teal);
}

.tskb-inline-icon svg {
	width: 26px;
	height: 26px;
}

.tskb-progress {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 0;
	padding: 20px clamp(20px, 4vw, 58px);
	border-block: 1px solid var(--tskb-line);
	background: #f8fafb;
}

.tskb-progress span {
	position: relative;
	display: flex;
	align-items: center;
	gap: 8px;
	color: #7a8792;
	font-size: 0.9rem;
	font-weight: 700;
}

.tskb-progress span:not(:last-child)::after {
	position: absolute;
	right: 12px;
	left: 54%;
	height: 1px;
	background: #cdd6dd;
	content: "";
}

.tskb-progress b {
	display: inline-grid;
	width: 30px;
	height: 30px;
	place-items: center;
	border: 1px solid #c8d1d8;
	border-radius: 50%;
	background: #fff;
}

.tskb-progress .is-active,
.tskb-progress .is-complete {
	color: var(--tskb-teal);
}

.tskb-progress .is-active b,
.tskb-progress .is-complete b {
	border-color: var(--tskb-teal);
	background: var(--tskb-teal);
	color: #fff;
}

.tskb-form {
	padding: clamp(28px, 4vw, 58px);
}

.tskb-step {
	min-width: 0;
	margin: 0;
	padding: 0;
	border: 0;
}

.tskb-step legend {
	width: 100%;
	margin: 0;
	padding: 0;
	color: var(--tskb-navy);
	font-size: clamp(1.5rem, 2.5vw, 2.1rem);
	font-weight: 800;
	line-height: 1.2;
}

.tskb-step .tskb-sublegend {
	display: block;
	margin-top: 34px;
	font-size: clamp(1.2rem, 2vw, 1.55rem);
}

.tskb-help {
	margin: 8px 0 20px;
	color: var(--tskb-muted);
}

.tskb-choice-grid {
	display: grid;
	gap: 14px;
}

.tskb-choice-grid--four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.tskb-choice-grid--three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.tskb-choice-grid--two { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.tskb-choice {
	position: relative;
	display: block;
	cursor: pointer;
}

.tskb-choice > input {
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
}

.tskb-choice__body {
	display: flex;
	min-height: 118px;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	gap: 10px;
	padding: 18px;
	border: 2px solid var(--tskb-line);
	border-radius: 12px;
	background: #fff;
	text-align: center;
	transition: 150ms ease;
}

.tskb-choice__icon {
	line-height: 1;
}

.tskb-choice__icon svg {
	width: 48px;
	height: 48px;
	stroke-width: 1.9;
}

.tskb-choice input:checked + .tskb-choice__body {
	border-color: var(--tskb-teal);
	background: var(--tskb-teal-soft);
	box-shadow: 0 0 0 3px rgba(10, 123, 120, 0.12);
}

.tskb-choice input:focus-visible + .tskb-choice__body,
.tskb-button:focus-visible,
.tskb-tier__toggle:focus-visible,
.tskb-show-all:focus-visible,
.tskb-product__link a:focus-visible {
	outline: 3px solid #2997d3;
	outline-offset: 3px;
}

.tskb-choice:hover .tskb-choice__body {
	border-color: #78aaa9;
	transform: translateY(-2px);
}

.tskb-actions {
	display: flex;
	justify-content: flex-end;
	gap: 12px;
	margin-top: 32px;
}

.tskb-button {
	display: inline-flex;
	min-height: 44px;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 11px 20px;
	border: 1px solid transparent;
	border-radius: 8px;
	font: inherit;
	font-weight: 800;
	line-height: 1.2;
	text-decoration: none !important;
	cursor: pointer;
}

.tskb-button--primary {
	border-color: var(--tskb-navy);
	background: var(--tskb-navy);
	color: #fff !important;
}

.tskb-button--primary:hover { background: var(--tskb-navy-2); }
.tskb-button--secondary { border-color: #9fb3c2; background: #fff; color: var(--tskb-navy) !important; }
.tskb-button--secondary:hover { background: #f2f6f8; }

.tskb-validation {
	margin-top: 20px;
	padding: 12px 14px;
	border-left: 4px solid #a73b2b;
	background: #fff2ef;
	color: #7d2d21;
	font-weight: 700;
}

.tskb-results {
	padding: clamp(20px, 3vw, 42px);
	background: #f6f8fa;
}

.tskb-results__heading {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 24px;
	margin-bottom: 22px;
}

.tskb-results__heading h2 { font-size: clamp(2rem, 3.3vw, 3rem); }
.tskb-results__heading p:last-child { max-width: 820px; margin-bottom: 0; }

.tskb-results-layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(240px, 315px);
	align-items: start;
	gap: 22px;
}

.tskb-results-main {
	display: grid;
	min-width: 0;
	gap: 15px;
}

.tskb-tier {
	overflow: hidden;
	border: 1px solid var(--tskb-line);
	border-left: 5px solid var(--tskb-teal);
	border-radius: 12px;
	background: #fff;
}

.tskb-tier--enhanced { border-left-color: var(--tskb-amber); }
.tskb-tier--advanced { border-left-color: var(--tskb-navy-2); }

.tskb-tier__header {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto auto;
	align-items: center;
	gap: 12px;
	padding: 15px 18px;
}

.tskb-tier__number {
	display: grid;
	width: 34px;
	height: 34px;
	place-items: center;
	border-radius: 50%;
	background: var(--tskb-teal);
	color: #fff;
	font-weight: 900;
}

.tskb-tier--enhanced .tskb-tier__number { background: var(--tskb-amber); }
.tskb-tier--advanced .tskb-tier__number { background: var(--tskb-navy-2); }

.tskb-tier__header h3,
.tskb-tier__header p { margin: 0; }
.tskb-tier__header h3 { color: var(--tskb-navy); font-size: 1.35rem; }
.tskb-tier__header p { color: var(--tskb-muted); font-size: 0.88rem; }

.tskb-tier__badge {
	padding: 5px 9px;
	border: 1px solid #9fd2d0;
	border-radius: 6px;
	background: var(--tskb-teal-soft);
	color: #07615f;
	font-size: 0.78rem;
	font-weight: 800;
}

.tskb-tier--enhanced .tskb-tier__badge { border-color: #efc77f; background: var(--tskb-amber-soft); color: #8e5403; }
.tskb-tier--advanced .tskb-tier__badge { border-color: #b6c9d9; background: var(--tskb-blue-soft); color: var(--tskb-navy); }

.tskb-tier__toggle {
	width: 38px;
	height: 38px;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: var(--tskb-navy);
	font-size: 1.4rem;
	cursor: pointer;
	transition: transform 150ms ease;
}

.tskb-tier__toggle[aria-expanded="false"] { transform: rotate(-90deg); }

.tskb-tier__body {
	padding: 0 14px 15px;
}

.tskb-product-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 12px;
}

.tskb-product {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 12px;
	min-height: 225px;
	padding: 16px 14px;
	border: 1px solid #cfd9e0;
	border-radius: 9px;
	background: #fff;
}

.tskb-product:has(.tskb-kit-checkbox:checked) {
	border-color: var(--tskb-teal);
	box-shadow: inset 0 0 0 1px var(--tskb-teal);
}

.tskb-product.is-tier-overflow { display: none; }
.tskb-product.is-tier-overflow.is-revealed { display: grid; }

.tskb-product__select {
	position: absolute;
	top: 10px;
	left: 10px;
	z-index: 2;
}

.tskb-kit-checkbox {
	width: 21px;
	height: 21px;
	accent-color: var(--tskb-teal);
	cursor: pointer;
}

.tskb-product__media {
	display: grid;
	min-height: 108px;
	place-items: center;
	padding-top: 4px;
}

.tskb-product__media img {
	width: 100px;
	height: 100px;
	border-radius: 8px;
	object-fit: contain;
}

.tskb-product__photo-missing {
	display: grid;
	width: 100px;
	height: 100px;
	place-items: center;
	border: 1px dashed #aebbc5;
	border-radius: 8px;
	background: #f5f7f8;
	color: var(--tskb-muted);
	font-size: 0.72rem;
	text-align: center;
}

.tskb-product__content {
	display: flex;
	min-width: 0;
	flex-direction: column;
}

.tskb-product h4 { margin: 0 0 5px; color: var(--tskb-navy); font-size: 1rem; }
.tskb-product p { margin: 0 0 8px; color: #435463; font-size: 0.82rem; line-height: 1.45; }
.tskb-recommended { display: block; margin-bottom: 5px; color: var(--tskb-teal); font-size: 0.7rem; font-weight: 900; text-transform: uppercase; }
.tskb-price { margin-top: auto; color: var(--tskb-teal); font-size: 0.86rem; }

.tskb-product__link {
	display: flex;
	align-items: center;
	gap: 7px;
	margin-top: 8px;
}

.tskb-product__link a {
	flex: 1;
	padding: 7px 9px;
	border: 1px solid #90a4b5;
	border-radius: 5px;
	color: var(--tskb-navy);
	font-size: 0.78rem;
	font-weight: 800;
	text-align: center;
	text-decoration: none;
}

.tskb-product__link small { color: var(--tskb-muted); font-size: 0.62rem; white-space: nowrap; }
.tskb-link-pending { color: var(--tskb-muted); font-size: 0.75rem; font-style: italic; }

.tskb-show-all {
	display: block;
	margin: 13px auto 0;
	padding: 7px 12px;
	border: 0;
	background: transparent;
	color: var(--tskb-navy);
	font: inherit;
	font-size: 0.88rem;
	font-weight: 800;
	cursor: pointer;
}

.tskb-kit-summary {
	position: sticky;
	top: 24px;
	display: grid;
	gap: 10px;
	padding: 18px;
	border: 1px solid var(--tskb-line);
	border-radius: 12px;
	background: #fff;
	box-shadow: var(--tskb-shadow);
}

.tskb-kit-summary > h3 { margin: 0 0 2px; color: var(--tskb-navy); }
.tskb-kit-summary__items { max-height: 380px; overflow: auto; }
.tskb-kit-summary__items section { padding: 10px 0; border-top: 1px solid #e4eaee; }
.tskb-kit-summary__items h4 { margin: 0 0 4px; color: var(--tskb-teal); font-size: 0.9rem; }
.tskb-kit-summary__items ul { margin: 0; padding-left: 20px; }
.tskb-kit-summary__items li { margin: 2px 0; font-size: 0.82rem; }

.tskb-kit-summary__estimate {
	display: grid;
	gap: 2px;
	padding: 14px 0;
	border-block: 1px solid #e0e7ec;
}

.tskb-kit-summary__estimate span { font-size: 0.8rem; font-weight: 700; }
.tskb-kit-summary__estimate strong { color: var(--tskb-teal); font-size: 1.55rem; }
.tskb-kit-summary__estimate small { color: var(--tskb-muted); }
.tskb-kit-summary .tskb-button { width: 100%; }
.tskb-copy-status { min-height: 1.2em; margin: 0; color: var(--tskb-teal); font-size: 0.8rem; }

.tskb-guides {
	margin-top: 6px;
	padding: 20px;
	border: 1px solid var(--tskb-line);
	border-radius: 12px;
	background: #fff;
}

.tskb-guides > h3 { margin: 0 0 14px; color: var(--tskb-navy); }
.tskb-guide-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.tskb-guide-card { overflow: hidden; border: 1px solid var(--tskb-line); border-radius: 9px; background: #fff; }
.tskb-guide-card__image { display: grid; height: 110px; place-items: center; overflow: hidden; background: var(--tskb-blue-soft); font-size: 2rem; }
.tskb-guide-card__image img { width: 100%; height: 100%; object-fit: cover; }
.tskb-guide-card > div:last-child { padding: 12px; }
.tskb-guide-card h4 { margin: 0 0 5px; font-size: 0.95rem; }
.tskb-guide-card p { margin: 0 0 8px; color: var(--tskb-muted); font-size: 0.78rem; line-height: 1.4; }
.tskb-guide-card a { color: var(--tskb-navy); font-size: 0.8rem; font-weight: 800; }

.tskb-link-disclosure,
.tskb-disclosure,
.tskb-sidebar-disclosure-note {
	margin: 0;
	padding: 13px 16px;
	border: 1px solid #c9d4dc;
	border-radius: 8px;
	background: #f7f9fa;
	color: #495b6a;
	font-size: 0.78rem;
	line-height: 1.45;
}

.tskb-disclosure,
.tskb-sidebar-disclosure-note {
	margin: 24px clamp(20px, 4vw, 58px);
}

.tskb-disclosure strong { display: inline-block; margin-right: 5px; color: var(--tskb-navy); }

.tskb-faq {
	padding: 12px clamp(20px, 4vw, 58px) clamp(28px, 4vw, 48px);
}

.tskb-faq h3 { color: var(--tskb-navy); }
.tskb-faq details { border-top: 1px solid var(--tskb-line); }
.tskb-faq details:last-child { border-bottom: 1px solid var(--tskb-line); }
.tskb-faq summary { padding: 14px 0; color: var(--tskb-navy); font-weight: 800; cursor: pointer; }
.tskb-faq details p { margin: 0 0 15px; color: var(--tskb-muted); }

.tskb-article-cta {
	display: flex;
	max-width: 1000px;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	margin: 32px auto;
	padding: clamp(22px, 3vw, 36px);
	border: 1px solid #a9d2d0;
	border-radius: 14px;
	background: linear-gradient(135deg, #eef9f8, #fff 58%, #edf4fb);
}

.tskb-article-cta h3 { margin: 0 0 6px; color: var(--tskb-navy); font-size: clamp(1.3rem, 2.4vw, 1.9rem); }
.tskb-article-cta p:last-child { margin: 0; }
.tskb-article-cta .tskb-button { flex: 0 0 auto; }

.tskb-editor-preview {
	padding: 32px;
	border: 1px solid #b9cbd7;
	border-radius: 12px;
	background: #f2f8fb;
	text-align: center;
}

@media (max-width: 1100px) {
	.tskb-product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.tskb-guide-grid { grid-template-columns: 1fr; }
}

@media (max-width: 820px) {
	.tskb-choice-grid--four,
	.tskb-choice-grid--three { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.tskb-results-layout { grid-template-columns: 1fr; }
	.tskb-kit-summary { position: static; }
	.tskb-results__heading { align-items: flex-start; flex-direction: column; }
	.tskb-tier__header { grid-template-columns: auto minmax(0, 1fr) auto; }
	.tskb-tier__badge { grid-column: 2 / 3; }
	.tskb-tier__toggle { grid-column: 3; grid-row: 1 / 3; }
	.tskb-progress span { flex-direction: column; justify-content: center; font-size: 0.72rem; text-align: center; }
	.tskb-progress span:not(:last-child)::after { display: none; }
}

@media (max-width: 600px) {
	.tskb-app { padding: 0 8px; }
	.tskb-choice-grid--four,
	.tskb-choice-grid--three,
	.tskb-choice-grid--two,
	.tskb-product-grid { grid-template-columns: 1fr; }
	.tskb-choice__body { min-height: 92px; flex-direction: row; justify-content: flex-start; text-align: left; }
	.tskb-progress { padding-inline: 10px; }
	.tskb-progress span { font-size: 0; }
	.tskb-progress b { font-size: 0.8rem; }
	.tskb-actions { justify-content: stretch; }
	.tskb-actions .tskb-button { flex: 1; }
	.tskb-product { grid-template-columns: minmax(0, 1fr); }
	.tskb-article-cta { align-items: stretch; flex-direction: column; }
	.tskb-article-cta .tskb-button { width: 100%; }
}

@media print {
	body * { visibility: hidden !important; }
	.tskb-results,
	.tskb-results * { visibility: visible !important; }
	.tskb-results { position: absolute; inset: 0; padding: 0; background: #fff; }
	.tskb-results-main,
	.tskb-tier__badge,
	.tskb-tier__toggle,
	.tskb-show-all,
	.tskb-product__link,
	.tskb-adjust,
	.tskb-kit-summary .tskb-button,
	.tskb-copy-status { display: none !important; }
	.tskb-results-layout { display: block; }
	.tskb-kit-summary { position: static; box-shadow: none; }
}
