/* True Media Lab — Whirlpool Filter Landing */

:root {
	--tml-navy: #071b33;
	--tml-navy-2: #0d294a;
	--tml-blue: #0b65d8;
	--tml-blue-2: #2288f5;
	--tml-cyan: #28bfd2;
	--tml-mint: #18b889;
	--tml-gold: #f5b940;
	--tml-ink: #102039;
	--tml-muted: #5c6b80;
	--tml-line: #dfe7ef;
	--tml-pale: #f3f8fc;
	--tml-white: #ffffff;
	--tml-shadow: 0 22px 60px rgba( 8, 35, 64, 0.12 );
}

html {
	scroll-behavior: smooth;
}

body.tml-wf-body {
	margin: 0;
	background: var(--tml-white);
	color: var(--tml-ink);
	font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	font-size: 16px;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}

.tml-wf,
.tml-wf * {
	box-sizing: border-box;
}

.tml-wf {
	min-height: 100vh;
	overflow: hidden;
	padding-bottom: 104px;
	background: #fff;
}

.tml-wf img,
.tml-wf svg {
	display: block;
}

.tml-wf a {
	color: inherit;
	text-decoration: none;
}

.tml-wf button,
.tml-wf a {
	-webkit-tap-highlight-color: transparent;
}

.tml-wf-shell {
	width: min( 1180px, calc( 100% - 40px ) );
	margin: 0 auto;
}

.tml-wf-shell--narrow {
	width: min( 980px, calc( 100% - 40px ) );
}

.tml-wf-skip {
	position: fixed;
	top: -100px;
	left: 20px;
	z-index: 100000;
	padding: 10px 16px;
	border-radius: 10px;
	background: #fff;
	box-shadow: 0 8px 24px rgba( 0, 0, 0, 0.2 );
	font-weight: 800;
}

.tml-wf-skip:focus {
	top: 18px;
}

.tml-wf-topbar {
	position: relative;
	z-index: 10;
	border-bottom: 1px solid rgba( 220, 231, 241, 0.9 );
	background: rgba( 255, 255, 255, 0.94 );
	backdrop-filter: blur( 16px );
}

.tml-wf-topbar__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	min-height: 70px;
	gap: 24px;
}

.tml-wf-brand {
	display: inline-flex;
	align-items: center;
	gap: 11px;
	color: var(--tml-navy);
}

.tml-wf-brand__mark {
	display: grid;
	width: 40px;
	height: 40px;
	place-items: center;
	border-radius: 12px;
	background: linear-gradient( 145deg, var(--tml-blue), var(--tml-cyan) );
	box-shadow: 0 10px 24px rgba( 11, 101, 216, 0.25 );
	color: #fff;
	font-size: 13px;
	font-weight: 900;
	letter-spacing: 0.04em;
}

.tml-wf-brand > span:last-child {
	display: flex;
	flex-direction: column;
	line-height: 1.15;
}

.tml-wf-brand strong {
	font-size: 13px;
	font-weight: 900;
	letter-spacing: 0.11em;
}

.tml-wf-brand small {
	margin-top: 4px;
	color: #6a7a8d;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.tml-wf-updated {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 7px 12px;
	border: 1px solid #d8e6ef;
	border-radius: 999px;
	background: #f7fbfd;
	color: #53667c;
	font-size: 12px;
	font-weight: 750;
}

.tml-wf-updated > span {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--tml-mint);
	box-shadow: 0 0 0 4px rgba( 24, 184, 137, 0.12 );
}

.tml-wf-hero {
	position: relative;
	background:
		radial-gradient( circle at 86% 42%, rgba( 36, 184, 216, 0.18 ) 0, rgba( 36, 184, 216, 0 ) 32% ),
		radial-gradient( circle at 6% 10%, rgba( 21, 110, 222, 0.11 ) 0, rgba( 21, 110, 222, 0 ) 28% ),
		linear-gradient( 180deg, #f8fcff 0%, #fff 100% );
}

.tml-wf-hero::after {
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	height: 1px;
	background: linear-gradient( 90deg, transparent, #dbe7f0 20%, #dbe7f0 80%, transparent );
	content: "";
}

.tml-wf-hero__grid {
	display: grid;
	grid-template-columns: minmax( 0, 1.08fr ) minmax( 340px, 0.92fr );
	align-items: center;
	gap: 52px;
	min-height: 475px;
	padding-top: 38px;
	padding-bottom: 42px;
}

.tml-wf-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	margin-bottom: 16px;
	color: var(--tml-blue);
	font-size: 12px;
	font-weight: 900;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.tml-wf-eyebrow__dot {
	width: 9px;
	height: 9px;
	border: 2px solid #fff;
	border-radius: 50%;
	background: var(--tml-cyan);
	box-shadow: 0 0 0 3px rgba( 40, 191, 210, 0.2 );
}

.tml-wf-hero h1 {
	max-width: 760px;
	margin: 0;
	color: var(--tml-navy);
	font-size: clamp( 38px, 4.35vw, 58px );
	font-weight: 880;
	letter-spacing: -0.048em;
	line-height: 0.99;
}

.tml-wf-hero h1 span {
	display: block;
	margin-top: 8px;
	background: linear-gradient( 110deg, #0b65d8 4%, #1296c4 58%, #18a981 100% );
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

.tml-wf-hero__lead {
	max-width: 680px;
	margin: 20px 0 0;
	color: #53657a;
	font-size: 18px;
	line-height: 1.58;
}

.tml-wf-fit-pill {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-top: 19px;
	padding: 9px 13px;
	border: 1px solid #cde6e2;
	border-radius: 10px;
	background: #effaf7;
	color: #315c58;
	font-size: 13px;
}

.tml-wf-fit-pill svg {
	width: 18px;
	height: 18px;
	fill: none;
	stroke: var(--tml-mint);
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke-width: 2.8;
}

.tml-wf-fit-pill strong {
	color: #0e6f58;
}

.tml-wf-hero__actions,
.tml-wf-final__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 24px;
}

.tml-wf-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 54px;
	gap: 11px;
	padding: 14px 21px;
	border: 1px solid transparent;
	border-radius: 13px;
	font-size: 15px;
	font-weight: 850;
	line-height: 1.2;
	transition: transform 180ms ease, box-shadow 180ms ease, background-color 180ms ease;
}

.tml-wf-btn svg,
.tml-wf-text-link svg {
	width: 19px;
	height: 19px;
	fill: none;
	stroke: currentColor;
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke-width: 2;
	transition: transform 180ms ease;
}

.tml-wf-btn:hover,
.tml-wf-btn:focus-visible {
	transform: translateY( -2px );
}

.tml-wf-btn:hover svg,
.tml-wf-btn:focus-visible svg,
.tml-wf-text-link:hover svg,
.tml-wf-text-link:focus-visible svg {
	transform: translateX( 3px );
}

.tml-wf-btn:focus-visible,
.tml-wf-text-link:focus-visible,
.tml-wf-sticky:focus-visible {
	outline: 3px solid rgba( 27, 145, 241, 0.38 );
	outline-offset: 3px;
}

.tml-wf-btn--primary {
	background: linear-gradient( 135deg, #0864d8, #117fe9 );
	box-shadow: 0 12px 28px rgba( 11, 101, 216, 0.24 );
	color: #fff !important;
}

.tml-wf-btn--primary:hover,
.tml-wf-btn--primary:focus-visible {
	box-shadow: 0 16px 32px rgba( 11, 101, 216, 0.32 );
}

.tml-wf-btn--secondary {
	border-color: #c7d7e5;
	background: rgba( 255, 255, 255, 0.82 );
	box-shadow: 0 8px 22px rgba( 15, 50, 82, 0.07 );
	color: var(--tml-navy) !important;
}

.tml-wf-btn--secondary:hover,
.tml-wf-btn--secondary:focus-visible {
	border-color: #80b6dd;
	background: #fff;
	box-shadow: 0 12px 28px rgba( 15, 50, 82, 0.12 );
}

.tml-wf-btn--budget {
	background: linear-gradient( 135deg, #12845f, #18ad80 );
	box-shadow: 0 12px 28px rgba( 24, 173, 128, 0.22 );
	color: #fff !important;
}

.tml-wf-btn--wide {
	width: 100%;
}

.tml-wf-microcopy {
	margin: 10px 0 0;
	color: #8290a0;
	font-size: 11px;
}

.tml-wf-microcopy span {
	font-weight: 800;
}

.tml-wf-hero__visual {
	position: relative;
	display: grid;
	min-height: 360px;
	place-items: center;
}

.tml-wf-orbit {
	position: absolute;
	border: 1px solid rgba( 25, 126, 205, 0.18 );
	border-radius: 50%;
}

.tml-wf-orbit--one {
	width: 350px;
	height: 350px;
	background: radial-gradient( circle, rgba( 255, 255, 255, 0.85 ) 25%, rgba( 217, 242, 247, 0.42 ) 60%, transparent 70% );
}

.tml-wf-orbit--two {
	width: 270px;
	height: 270px;
	border-style: dashed;
	transform: rotate( -12deg );
}

.tml-wf-filter {
	position: relative;
	z-index: 2;
	filter: drop-shadow( 0 25px 25px rgba( 6, 43, 78, 0.19 ) );
}

.tml-wf-filter--hero {
	width: 128px;
	transform: rotate( 7deg );
}

.tml-wf-filter__cap {
	position: relative;
	display: flex;
	align-items: flex-end;
	justify-content: center;
	height: 62px;
	gap: 7px;
	padding: 0 14px 7px;
	border: 1px solid #cbd6df;
	border-bottom: 0;
	border-radius: 19px 19px 9px 9px;
	background: linear-gradient( 90deg, #e4e9ee, #fff 30%, #e5ebef 72%, #cbd4dc );
}

.tml-wf-filter__cap::before {
	position: absolute;
	top: -20px;
	left: 50%;
	width: 36px;
	height: 26px;
	border: 1px solid #c5d0d9;
	border-bottom: 0;
	border-radius: 9px 9px 2px 2px;
	background: linear-gradient( 90deg, #d6dde4, #fff, #ccd5dc );
	content: "";
	transform: translateX( -50% );
}

.tml-wf-filter__cap i {
	display: block;
	width: 7px;
	height: 30px;
	border-radius: 5px 5px 2px 2px;
	background: linear-gradient( 90deg, #bfcbd4, #fbfdfe, #c2ccd4 );
}

.tml-wf-filter__cap i:nth-child( 2 ),
.tml-wf-filter__cap i:nth-child( 3 ) {
	height: 39px;
}

.tml-wf-filter__neck {
	width: 78%;
	height: 22px;
	margin: 0 auto;
	border-right: 1px solid #c8d2db;
	border-left: 1px solid #c8d2db;
	background: linear-gradient( 90deg, #d9e0e6, #fff 43%, #d4dce3 );
}

.tml-wf-filter__body {
	position: relative;
	height: 250px;
	overflow: hidden;
	border: 1px solid #c3d0d9;
	border-radius: 20px 20px 28px 28px;
	background: linear-gradient( 90deg, #dce4e9, #fff 24%, #f7fafb 68%, #c9d4db );
}

.tml-wf-filter__body::after {
	position: absolute;
	top: 0;
	left: 12px;
	width: 14px;
	height: 100%;
	background: linear-gradient( 90deg, transparent, rgba( 255, 255, 255, 0.95 ), transparent );
	content: "";
	opacity: 0.75;
}

.tml-wf-filter__label {
	position: absolute;
	top: 48px;
	right: -2px;
	left: -2px;
	display: flex;
	align-items: center;
	flex-direction: column;
	justify-content: center;
	height: 125px;
	background: linear-gradient( 160deg, #1b5bab 0%, #152657 48%, #63348a 100% );
	box-shadow: inset 0 1px rgba( 255, 255, 255, 0.24 );
	color: #fff;
	text-align: center;
}

.tml-wf-filter__label small {
	font-size: 8px;
	font-weight: 900;
	letter-spacing: 0.15em;
}

.tml-wf-filter__label strong {
	margin: 6px 0 4px;
	font-size: 14px;
	letter-spacing: 0.04em;
}

.tml-wf-filter__label b {
	display: inline-grid;
	width: 26px;
	height: 26px;
	margin-left: 2px;
	place-items: center;
	border: 1px solid rgba( 255, 255, 255, 0.55 );
	border-radius: 50%;
	font-size: 17px;
}

.tml-wf-filter__label span {
	font-size: 8px;
	letter-spacing: 0.1em;
}

.tml-wf-hero-badge {
	position: absolute;
	z-index: 4;
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 11px 14px;
	border: 1px solid rgba( 210, 225, 237, 0.92 );
	border-radius: 14px;
	background: rgba( 255, 255, 255, 0.91 );
	box-shadow: 0 14px 34px rgba( 7, 43, 77, 0.13 );
	backdrop-filter: blur( 12px );
}

.tml-wf-hero-badge--top {
	top: 56px;
	right: 3px;
}

.tml-wf-hero-badge--top svg {
	width: 25px;
	height: 25px;
	fill: rgba( 245, 185, 64, 0.18 );
	stroke: #d5940e;
	stroke-linejoin: round;
	stroke-width: 1.7;
}

.tml-wf-hero-badge--top span {
	display: flex;
	flex-direction: column;
	color: #637085;
	font-size: 11px;
	line-height: 1.25;
}

.tml-wf-hero-badge--top strong {
	color: var(--tml-navy);
	font-size: 13px;
}

.tml-wf-hero-badge--bottom {
	bottom: 43px;
	left: -7px;
	align-items: flex-start;
	flex-direction: column;
	gap: 0;
}

.tml-wf-hero-badge--bottom strong {
	color: var(--tml-blue);
	font-size: 14px;
}

.tml-wf-hero-badge--bottom span {
	color: #7b899a;
	font-size: 9px;
}

.tml-wf-section-heading {
	margin-bottom: 32px;
}

.tml-wf-section-heading--center {
	max-width: 720px;
	margin-right: auto;
	margin-bottom: 34px;
	margin-left: auto;
	text-align: center;
}

.tml-wf-section-heading > span,
.tml-wf-final__eyebrow {
	color: var(--tml-blue);
	font-size: 11px;
	font-weight: 900;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.tml-wf-section-heading h2,
.tml-wf-final h2 {
	margin: 7px 0 0;
	color: var(--tml-navy);
	font-size: clamp( 31px, 4vw, 48px );
	font-weight: 860;
	letter-spacing: -0.04em;
	line-height: 1.08;
}

.tml-wf-section-heading p {
	margin: 13px 0 0;
	color: var(--tml-muted);
	font-size: 16px;
}

.tml-wf-priority {
	padding: 58px 0 56px;
	background: #fff;
}

.tml-wf-priority__grid {
	display: grid;
	grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	gap: 20px;
}

.tml-wf-priority-card {
	display: grid;
	grid-template-columns: 58px minmax( 0, 1fr );
	gap: 18px;
	padding: 28px;
	border: 1px solid var(--tml-line);
	border-radius: 20px;
	box-shadow: 0 14px 38px rgba( 12, 49, 78, 0.06 );
	transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}

.tml-wf-priority-card:hover {
	transform: translateY( -3px );
	box-shadow: 0 20px 42px rgba( 12, 49, 78, 0.1 );
}

.tml-wf-priority-card--original {
	background: linear-gradient( 135deg, #f7fbff, #fff 68% );
}

.tml-wf-priority-card--original:hover {
	border-color: #acd1ef;
}

.tml-wf-priority-card--budget {
	background: linear-gradient( 135deg, #f6fcf9, #fff 68% );
}

.tml-wf-priority-card--budget:hover {
	border-color: #a9ddca;
}

.tml-wf-priority-card__icon {
	display: grid;
	width: 56px;
	height: 56px;
	place-items: center;
	border-radius: 16px;
}

.tml-wf-priority-card--original .tml-wf-priority-card__icon {
	background: #e8f3ff;
	color: var(--tml-blue);
}

.tml-wf-priority-card--budget .tml-wf-priority-card__icon {
	background: #e7f8f1;
	color: #11815d;
}

.tml-wf-priority-card__icon svg {
	width: 29px;
	height: 29px;
	fill: none;
	stroke: currentColor;
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke-width: 1.8;
}

.tml-wf-card-kicker {
	margin: 0 0 3px;
	color: #7a8a9b;
	font-size: 11px;
	font-weight: 850;
	letter-spacing: 0.09em;
	text-transform: uppercase;
}

.tml-wf-priority-card h3 {
	margin: 0;
	color: var(--tml-navy);
	font-size: 23px;
	font-weight: 850;
	letter-spacing: -0.025em;
}

.tml-wf-priority-card__content > p:not( .tml-wf-card-kicker ) {
	margin: 7px 0 0;
	color: var(--tml-muted);
	font-size: 14px;
}

.tml-wf-priority-card ul {
	display: flex;
	flex-wrap: wrap;
	gap: 7px;
	margin: 14px 0 16px;
	padding: 0;
	list-style: none;
}

.tml-wf-priority-card li {
	padding: 5px 9px;
	border-radius: 999px;
	background: #edf3f7;
	color: #526478;
	font-size: 10px;
	font-weight: 750;
}

.tml-wf-text-link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: var(--tml-blue) !important;
	font-size: 14px;
	font-weight: 850;
}

.tml-wf-priority-card--budget .tml-wf-text-link {
	color: #0e805d !important;
}

.tml-wf-warning {
	padding: 0 0 70px;
	background: #fff;
}

.tml-wf-warning__inner {
	display: grid;
	grid-template-columns: 46px minmax( 0, 1fr ) auto;
	align-items: center;
	gap: 18px;
	padding: 19px 22px;
	border: 1px solid #f0d79a;
	border-radius: 16px;
	background: #fffbef;
}

.tml-wf-warning__icon {
	display: grid;
	width: 43px;
	height: 43px;
	place-items: center;
	border: 2px solid #dca72c;
	border-radius: 50%;
	background: #fff;
	color: #a27306;
	font-size: 21px;
	font-weight: 900;
}

.tml-wf-warning strong {
	color: #6b4c07;
	font-size: 14px;
}

.tml-wf-warning p {
	margin: 2px 0 0;
	color: #796942;
	font-size: 12px;
}

.tml-wf-warning a {
	padding: 9px 13px;
	border: 1px solid #e5ca84;
	border-radius: 10px;
	background: #fff;
	color: #7b5807;
	font-size: 12px;
	font-weight: 850;
	white-space: nowrap;
}

.tml-wf-products {
	padding: 76px 0 88px;
	background:
		linear-gradient( 180deg, #f2f7fb, #f8fbfd ),
		repeating-linear-gradient( 90deg, transparent, transparent 80px, rgba( 15, 86, 145, 0.025 ) 81px );
}

.tml-wf-products__grid {
	display: grid;
	grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	align-items: stretch;
	gap: 22px;
}

.tml-wf-product {
	position: relative;
	display: flex;
	overflow: hidden;
	flex-direction: column;
	padding: 32px;
	border: 1px solid #dbe5ed;
	border-radius: 24px;
	background: #fff;
	box-shadow: var(--tml-shadow);
}

.tml-wf-product--original {
	border-color: #9ecaf0;
	box-shadow: 0 24px 64px rgba( 10, 95, 176, 0.16 );
}

.tml-wf-product__ribbon {
	position: absolute;
	top: 0;
	right: 26px;
	padding: 8px 12px 9px;
	border-radius: 0 0 9px 9px;
	background: var(--tml-blue);
	color: #fff;
	font-size: 9px;
	font-weight: 900;
	letter-spacing: 0.12em;
}

.tml-wf-product--budget .tml-wf-product__ribbon {
	background: #12865f;
}

.tml-wf-product__top {
	display: grid;
	grid-template-columns: 100px minmax( 0, 1fr );
	align-items: center;
	gap: 20px;
	min-height: 166px;
	padding-top: 12px;
}

.tml-wf-mini-filter {
	position: relative;
	width: 82px;
	margin: 0 auto;
	filter: drop-shadow( 0 12px 12px rgba( 9, 44, 78, 0.15 ) );
}

.tml-wf-mini-filter__cap {
	position: relative;
	width: 62px;
	height: 31px;
	margin: 0 auto;
	border: 1px solid #cbd6de;
	border-radius: 10px 10px 3px 3px;
	background: linear-gradient( 90deg, #d6dfe5, #fff, #ced8df );
}

.tml-wf-mini-filter__cap::before {
	position: absolute;
	top: -13px;
	left: 50%;
	width: 23px;
	height: 16px;
	border: 1px solid #cad4db;
	border-radius: 5px 5px 0 0;
	background: #edf1f4;
	content: "";
	transform: translateX( -50% );
}

.tml-wf-mini-filter__body {
	display: flex;
	align-items: center;
	flex-direction: column;
	justify-content: center;
	height: 118px;
	border: 1px solid #c3ced6;
	border-radius: 11px 11px 19px 19px;
	background:
		linear-gradient( 180deg, transparent 0 28%, #234a8c 28% 75%, transparent 75% ),
		linear-gradient( 90deg, #d8e0e5, #fff 33%, #e2e8ec );
	color: #fff;
}

.tml-wf-mini-filter__body span {
	display: grid;
	width: 29px;
	height: 29px;
	place-items: center;
	border: 1px solid rgba( 255, 255, 255, 0.65 );
	border-radius: 50%;
	font-size: 18px;
	font-weight: 900;
}

.tml-wf-mini-filter__body small {
	margin-top: 6px;
	font-size: 6px;
	font-weight: 800;
	letter-spacing: 0.08em;
}

.tml-wf-mini-pair {
	display: flex;
	align-items: flex-end;
	justify-content: center;
	width: 100px;
	transform: translateX( -2px );
}

.tml-wf-mini-filter--small {
	width: 64px;
	margin: 0 -8px 0 0;
}

.tml-wf-mini-filter--small:first-child {
	z-index: 2;
	transform: rotate( -4deg );
}

.tml-wf-mini-filter--small:last-child {
	transform: rotate( 5deg ) translateY( 4px );
}

.tml-wf-mini-filter--small .tml-wf-mini-filter__cap {
	width: 47px;
	height: 25px;
}

.tml-wf-mini-filter--small .tml-wf-mini-filter__body {
	height: 103px;
	background:
		linear-gradient( 180deg, transparent 0 30%, #1286a9 30% 76%, transparent 76% ),
		linear-gradient( 90deg, #d8e0e5, #fff 33%, #e2e8ec );
}

.tml-wf-mini-filter--small .tml-wf-mini-filter__body span {
	width: 24px;
	height: 24px;
	font-size: 14px;
}

.tml-wf-product__identity > p {
	margin: 0 0 4px;
	color: var(--tml-blue);
	font-size: 9px;
	font-weight: 900;
	letter-spacing: 0.12em;
}

.tml-wf-product--budget .tml-wf-product__identity > p {
	color: #12805d;
}

.tml-wf-product h3 {
	margin: 0;
	color: var(--tml-navy);
	font-size: 24px;
	font-weight: 860;
	letter-spacing: -0.03em;
	line-height: 1.15;
}

.tml-wf-stars {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-top: 9px;
}

.tml-wf-stars span {
	color: #f5a91b;
	font-size: 14px;
	letter-spacing: 0.04em;
}

.tml-wf-stars strong {
	color: #68778a;
	font-size: 11px;
}

.tml-wf-product__why {
	margin: 10px 0 19px;
	padding: 15px 16px;
	border-radius: 13px;
	background: #f1f7fd;
}

.tml-wf-product--budget .tml-wf-product__why {
	background: #f0f9f5;
}

.tml-wf-product__why strong {
	color: #194d81;
	font-size: 12px;
}

.tml-wf-product--budget .tml-wf-product__why strong {
	color: #17684f;
}

.tml-wf-product__why p {
	margin: 3px 0 0;
	color: #5c6d80;
	font-size: 12px;
	line-height: 1.55;
}

.tml-wf-checks {
	display: grid;
	gap: 11px;
	margin: 0 0 21px;
	padding: 0;
	list-style: none;
}

.tml-wf-checks li {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	color: #4f6074;
	font-size: 13px;
}

.tml-wf-checks svg {
	width: 20px;
	height: 20px;
	flex: 0 0 20px;
	margin-top: 1px;
	padding: 3px;
	border-radius: 50%;
	background: #e5f2ff;
	fill: none;
	stroke: var(--tml-blue);
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke-width: 2.7;
}

.tml-wf-product--budget .tml-wf-checks svg {
	background: #e5f7f0;
	stroke: #148460;
}

.tml-wf-checks strong {
	color: #243b56;
}

.tml-wf-product__proof {
	display: flex;
	align-items: center;
	gap: 11px;
	min-height: 59px;
	margin-top: auto;
	margin-bottom: 17px;
	padding: 11px 13px;
	border: 1px solid #f1db9f;
	border-radius: 12px;
	background: #fffaf0;
	color: #73603a;
	font-size: 10px;
	line-height: 1.45;
}

.tml-wf-product__proof svg {
	width: 27px;
	height: 27px;
	flex: 0 0 27px;
	fill: rgba( 245, 185, 64, 0.16 );
	stroke: #c58b15;
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke-width: 1.6;
}

.tml-wf-product__proof strong {
	display: block;
	color: #6a4e15;
	font-size: 11px;
}

.tml-wf-product__proof--budget {
	border-color: #bfe3d6;
	background: #f1fbf7;
	color: #456a5c;
}

.tml-wf-product__proof--budget svg {
	fill: none;
	stroke: #148460;
}

.tml-wf-product__proof--budget strong {
	color: #17684f;
}

.tml-wf-product__note {
	margin: 8px 0 0;
	color: #8290a1;
	font-size: 9px;
	text-align: center;
}

.tml-wf-table-section {
	padding: 84px 0;
	background: #fff;
}

.tml-wf-table-wrap {
	overflow: hidden;
	border: 1px solid var(--tml-line);
	border-radius: 19px;
	box-shadow: 0 16px 42px rgba( 9, 44, 76, 0.07 );
}

.tml-wf-table {
	width: 100%;
	border: 0;
	border-collapse: collapse;
	background: #fff;
	font-size: 13px;
}

.tml-wf-table th,
.tml-wf-table td {
	padding: 16px 18px;
	border: 0;
	border-bottom: 1px solid #e5ebf0;
	text-align: left;
}

.tml-wf-table thead th {
	background: #f3f7fa;
	color: var(--tml-navy);
	font-size: 12px;
	font-weight: 850;
}

.tml-wf-table thead th:first-child {
	width: 31%;
}

.tml-wf-table tbody th {
	color: #384d65;
	font-weight: 800;
}

.tml-wf-table td {
	color: #5d6d7f;
}

.tml-wf-table tr:last-child th,
.tml-wf-table tr:last-child td {
	border-bottom: 0;
}

.tml-wf-table-badge {
	display: inline-flex;
	margin-right: 8px;
	padding: 4px 7px;
	border-radius: 999px;
	font-size: 7px;
	letter-spacing: 0.09em;
	vertical-align: 1px;
}

.tml-wf-table-badge--blue {
	background: #e1f0ff;
	color: #075bbd;
}

.tml-wf-table-badge--green {
	background: #e4f7ef;
	color: #0a7755;
}

.tml-wf-table__actions {
	background: #fbfdfe;
}

.tml-wf-table__actions a {
	color: var(--tml-blue);
	font-weight: 850;
}

.tml-wf-table__actions td:last-child a {
	color: #11805c;
}

.tml-wf-how {
	padding: 84px 0;
	background: linear-gradient( 145deg, #eef6fb, #f8fbfd );
}

.tml-wf-how__intro {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 28px;
	margin-bottom: 30px;
}

.tml-wf-how__intro .tml-wf-section-heading {
	max-width: 600px;
	margin-bottom: 0;
}

.tml-wf-steps {
	display: grid;
	grid-template-columns: repeat( 4, minmax( 0, 1fr ) );
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.tml-wf-steps li {
	padding: 21px 18px;
	border: 1px solid #dce6ee;
	border-radius: 16px;
	background: rgba( 255, 255, 255, 0.82 );
}

.tml-wf-steps li > span {
	display: block;
	margin-bottom: 15px;
	color: #9bc6e5;
	font-size: 24px;
	font-weight: 900;
	letter-spacing: -0.04em;
}

.tml-wf-steps strong {
	color: var(--tml-navy);
	font-size: 14px;
}

.tml-wf-steps p {
	margin: 6px 0 0;
	color: var(--tml-muted);
	font-size: 11px;
	line-height: 1.55;
}

.tml-wf-faq {
	padding: 84px 0 92px;
	background: #fff;
}

.tml-wf-faq__list {
	display: grid;
	gap: 10px;
}

.tml-wf-faq details {
	border: 1px solid #dce5ed;
	border-radius: 14px;
	background: #fff;
}

.tml-wf-faq details[open] {
	border-color: #a9cce7;
	box-shadow: 0 9px 24px rgba( 10, 76, 130, 0.07 );
}

.tml-wf-faq summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	padding: 18px 20px;
	color: var(--tml-navy);
	cursor: pointer;
	font-size: 14px;
	font-weight: 830;
	list-style: none;
}

.tml-wf-faq summary::-webkit-details-marker {
	display: none;
}

.tml-wf-faq summary span {
	position: relative;
	width: 22px;
	height: 22px;
	flex: 0 0 22px;
	border-radius: 50%;
	background: #eef5fa;
}

.tml-wf-faq summary span::before,
.tml-wf-faq summary span::after {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 9px;
	height: 1.5px;
	background: #37617e;
	content: "";
	transform: translate( -50%, -50% );
}

.tml-wf-faq summary span::after {
	transform: translate( -50%, -50% ) rotate( 90deg );
	transition: transform 180ms ease;
}

.tml-wf-faq details[open] summary span::after {
	transform: translate( -50%, -50% ) rotate( 0deg );
}

.tml-wf-faq details p {
	margin: -3px 54px 19px 20px;
	color: var(--tml-muted);
	font-size: 13px;
}

.tml-wf-final {
	padding: 0 0 84px;
	background: #fff;
}

.tml-wf-final__card {
	position: relative;
	display: grid;
	overflow: hidden;
	grid-template-columns: minmax( 0, 1fr ) 280px;
	align-items: center;
	min-height: 360px;
	padding: 54px 58px;
	border-radius: 28px;
	background:
		linear-gradient( 115deg, rgba( 6, 35, 68, 0.99 ), rgba( 7, 76, 128, 0.97 ) 60%, rgba( 16, 135, 144, 0.95 ) );
	box-shadow: 0 30px 70px rgba( 7, 38, 69, 0.2 );
}

.tml-wf-final__glow {
	position: absolute;
	right: -120px;
	bottom: -210px;
	width: 540px;
	height: 540px;
	border: 1px solid rgba( 255, 255, 255, 0.15 );
	border-radius: 50%;
	box-shadow: 0 0 0 70px rgba( 255, 255, 255, 0.025 ), 0 0 0 140px rgba( 255, 255, 255, 0.02 );
}

.tml-wf-final__content {
	position: relative;
	z-index: 2;
	max-width: 690px;
}

.tml-wf-final__eyebrow {
	color: #64d7db;
}

.tml-wf-final h2 {
	max-width: 650px;
	color: #fff;
}

.tml-wf-final__content > p {
	max-width: 660px;
	margin: 15px 0 0;
	color: rgba( 232, 243, 250, 0.78 );
	font-size: 15px;
}

.tml-wf-btn--light {
	background: #fff;
	box-shadow: 0 12px 28px rgba( 0, 0, 0, 0.17 );
	color: #073b70 !important;
}

.tml-wf-btn--ghost {
	border-color: rgba( 255, 255, 255, 0.38 );
	background: rgba( 255, 255, 255, 0.08 );
	color: #fff !important;
}

.tml-wf-final__filter {
	position: relative;
	z-index: 2;
	display: grid;
	height: 260px;
	place-items: center;
}

.tml-wf-filter--final {
	width: 90px;
	transform: rotate( 9deg );
}

.tml-wf-filter--final .tml-wf-filter__cap {
	height: 43px;
	padding: 0 10px 5px;
	gap: 5px;
}

.tml-wf-filter--final .tml-wf-filter__cap::before {
	top: -14px;
	width: 26px;
	height: 19px;
}

.tml-wf-filter--final .tml-wf-filter__cap i {
	width: 5px;
	height: 20px;
}

.tml-wf-filter--final .tml-wf-filter__cap i:nth-child( 2 ),
.tml-wf-filter--final .tml-wf-filter__cap i:nth-child( 3 ) {
	height: 26px;
}

.tml-wf-filter--final .tml-wf-filter__neck {
	height: 16px;
}

.tml-wf-filter--final .tml-wf-filter__body {
	height: 178px;
	border-radius: 14px 14px 20px 20px;
}

.tml-wf-filter--final .tml-wf-filter__label {
	top: 35px;
	height: 88px;
}

.tml-wf-filter--final .tml-wf-filter__label strong {
	font-size: 10px;
}

.tml-wf-filter--final .tml-wf-filter__label b {
	width: 20px;
	height: 20px;
	font-size: 12px;
}

.tml-wf-footer {
	padding: 48px 0;
	border-top: 1px solid #dfe7ed;
	background: #f5f8fa;
}

.tml-wf-footer__grid {
	display: grid;
	grid-template-columns: 0.8fr 1.5fr auto;
	align-items: start;
	gap: 42px;
}

.tml-wf-brand--footer {
	margin-bottom: 12px;
}

.tml-wf-footer__grid > div:first-child > p,
.tml-wf-footer__disclosure p {
	margin: 7px 0 0;
	color: #748294;
	font-size: 10px;
	line-height: 1.55;
}

.tml-wf-footer__disclosure > strong {
	color: var(--tml-navy);
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.07em;
}

.tml-wf-footer__nav {
	display: flex;
	align-items: flex-end;
	flex-direction: column;
	gap: 8px;
}

.tml-wf-footer__nav a {
	color: #50667d;
	font-size: 11px;
	font-weight: 750;
}

.tml-wf-footer__nav a:hover,
.tml-wf-footer__nav a:focus-visible {
	color: var(--tml-blue);
}

.tml-wf-sticky {
	position: fixed;
	right: 20px;
	bottom: 16px;
	left: 20px;
	z-index: 99998;
	display: grid;
	grid-template-columns: 42px minmax( 0, 1fr ) auto;
	align-items: center;
	width: min( 760px, calc( 100% - 40px ) );
	min-height: 70px;
	gap: 12px;
	margin: 0 auto;
	padding: 10px 11px 10px 15px;
	border: 1px solid rgba( 255, 255, 255, 0.3 );
	border-radius: 18px;
	background: linear-gradient( 115deg, #071f3b, #0b5fad, #0c8d9b, #074a83, #071f3b );
	background-size: 320% 320%;
	box-shadow: 0 18px 45px rgba( 3, 25, 49, 0.38 );
	color: #fff !important;
	animation: tml-wf-gradient-flow 11s ease-in-out infinite;
	transition: transform 180ms ease, box-shadow 180ms ease;
}

.tml-wf-sticky:hover,
.tml-wf-sticky:focus-visible {
	transform: translateY( -3px );
	box-shadow: 0 21px 50px rgba( 3, 25, 49, 0.47 );
}

.tml-wf-sticky__icon {
	display: grid;
	width: 42px;
	height: 42px;
	place-items: center;
	border: 1px solid rgba( 255, 255, 255, 0.25 );
	border-radius: 12px;
	background: rgba( 255, 255, 255, 0.12 );
}

.tml-wf-sticky__icon svg {
	width: 23px;
	height: 23px;
	fill: rgba( 255, 255, 255, 0.1 );
	stroke: #ffd46f;
	stroke-linejoin: round;
	stroke-width: 1.7;
}

.tml-wf-sticky__copy {
	display: flex;
	min-width: 0;
	flex-direction: column;
	line-height: 1.24;
}

.tml-wf-sticky__copy small {
	color: #80ecdf;
	font-size: 8px;
	font-weight: 900;
	letter-spacing: 0.14em;
}

.tml-wf-sticky__copy strong {
	overflow: hidden;
	font-size: 14px;
	font-weight: 850;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.tml-wf-sticky__action {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	gap: 7px;
	padding: 11px 16px;
	border-radius: 12px;
	background: #fff;
	box-shadow: 0 8px 20px rgba( 0, 0, 0, 0.16 );
	color: #064983;
	font-size: 12px;
	font-weight: 900;
}

.tml-wf-sticky__action svg {
	width: 18px;
	height: 18px;
	fill: none;
	stroke: currentColor;
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke-width: 2;
}

@keyframes tml-wf-gradient-flow {
	0%, 100% { background-position: 0% 50%; }
	50% { background-position: 100% 50%; }
}

@media ( max-width: 980px ) {
	.tml-wf-hero__grid {
		grid-template-columns: minmax( 0, 1.1fr ) minmax( 275px, 0.9fr );
		gap: 26px;
		min-height: 455px;
	}

	.tml-wf-hero h1 {
		font-size: clamp( 36px, 5vw, 49px );
	}

	.tml-wf-hero__lead {
		font-size: 16px;
	}

	.tml-wf-hero__visual {
		transform: scale( 0.88 );
	}

	.tml-wf-product {
		padding: 28px 24px;
	}

	.tml-wf-product__top {
		grid-template-columns: 90px minmax( 0, 1fr );
		gap: 12px;
	}

	.tml-wf-steps {
		grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	}

	.tml-wf-final__card {
		grid-template-columns: minmax( 0, 1fr ) 190px;
		padding: 46px 42px;
	}

	.tml-wf-footer__grid {
		grid-template-columns: 1fr 1.7fr;
	}

	.tml-wf-footer__nav {
		grid-column: 1 / -1;
		align-items: flex-start;
		flex-direction: row;
	}
}

@media ( max-width: 760px ) {
	.tml-wf {
		padding-bottom: 92px;
	}

	.tml-wf-shell,
	.tml-wf-shell--narrow {
		width: min( calc( 100% - 28px ), 660px );
	}

	.tml-wf-topbar__inner {
		min-height: 62px;
	}

	.tml-wf-brand__mark {
		width: 36px;
		height: 36px;
		border-radius: 10px;
	}

	.tml-wf-brand strong {
		font-size: 11px;
	}

	.tml-wf-brand small {
		font-size: 8px;
	}

	.tml-wf-updated {
		padding: 6px 9px;
		font-size: 9px;
	}

	.tml-wf-hero__grid {
		display: block;
		min-height: 0;
		padding-top: 31px;
		padding-bottom: 39px;
	}

	.tml-wf-eyebrow {
		margin-bottom: 11px;
		font-size: 10px;
	}

	.tml-wf-hero h1 {
		max-width: 610px;
		font-size: clamp( 34px, 10.5vw, 50px );
		line-height: 1.01;
	}

	.tml-wf-hero h1 span {
		margin-top: 5px;
	}

	.tml-wf-hero__lead {
		margin-top: 15px;
		font-size: 15px;
		line-height: 1.52;
	}

	.tml-wf-fit-pill {
		margin-top: 15px;
		font-size: 11px;
	}

	.tml-wf-hero__actions {
		margin-top: 18px;
	}

	.tml-wf-btn {
		min-height: 51px;
		padding: 12px 16px;
		font-size: 13px;
	}

	.tml-wf-hero__visual {
		display: none;
	}

	.tml-wf-priority,
	.tml-wf-products,
	.tml-wf-table-section,
	.tml-wf-how,
	.tml-wf-faq {
		padding-top: 60px;
		padding-bottom: 60px;
	}

	.tml-wf-section-heading {
		margin-bottom: 25px;
	}

	.tml-wf-section-heading h2,
	.tml-wf-final h2 {
		font-size: clamp( 28px, 8.6vw, 38px );
	}

	.tml-wf-section-heading p {
		font-size: 14px;
	}

	.tml-wf-priority__grid,
	.tml-wf-products__grid {
		grid-template-columns: 1fr;
	}

	.tml-wf-priority-card {
		padding: 23px;
	}

	.tml-wf-warning {
		padding-bottom: 58px;
	}

	.tml-wf-warning__inner {
		grid-template-columns: 42px minmax( 0, 1fr );
		gap: 13px;
		padding: 17px;
	}

	.tml-wf-warning a {
		grid-column: 1 / -1;
		text-align: center;
	}

	.tml-wf-product {
		padding: 27px 22px 23px;
		border-radius: 20px;
	}

	.tml-wf-product__top {
		grid-template-columns: 86px minmax( 0, 1fr );
		min-height: 150px;
	}

	.tml-wf-product h3 {
		font-size: 21px;
	}

	.tml-wf-table-wrap {
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}

	.tml-wf-table {
		min-width: 670px;
	}

	.tml-wf-how__intro {
		align-items: flex-start;
		flex-direction: column;
	}

	.tml-wf-steps {
		grid-template-columns: 1fr 1fr;
	}

	.tml-wf-final {
		padding-bottom: 64px;
	}

	.tml-wf-final__card {
		display: block;
		min-height: 0;
		padding: 37px 26px;
		border-radius: 22px;
	}

	.tml-wf-final__filter {
		display: none;
	}

	.tml-wf-final__actions {
		align-items: stretch;
		flex-direction: column;
	}

	.tml-wf-footer__grid {
		grid-template-columns: 1fr;
		gap: 24px;
	}

	.tml-wf-footer__nav {
		grid-column: auto;
	}

	.tml-wf-sticky {
		right: 8px;
		bottom: 8px;
		left: 8px;
		grid-template-columns: 37px minmax( 0, 1fr ) auto;
		width: calc( 100% - 16px );
		min-height: 66px;
		gap: 9px;
		padding: 8px 8px 8px 11px;
		border-radius: 15px;
	}

	.tml-wf-sticky__icon {
		width: 37px;
		height: 37px;
	}

	.tml-wf-sticky__copy strong {
		font-size: 12px;
	}

	.tml-wf-sticky__action {
		min-height: 45px;
		padding: 10px 12px;
		font-size: 10px;
	}
}

@media ( max-width: 480px ) {
	.tml-wf-updated {
		display: none;
	}

	.tml-wf-hero__actions {
		display: grid;
		grid-template-columns: 1fr;
		gap: 9px;
	}

	.tml-wf-hero__actions .tml-wf-btn {
		width: 100%;
	}

	.tml-wf-priority-card {
		grid-template-columns: 45px minmax( 0, 1fr );
		gap: 13px;
		padding: 20px 17px;
	}

	.tml-wf-priority-card__icon {
		width: 44px;
		height: 44px;
		border-radius: 13px;
	}

	.tml-wf-priority-card__icon svg {
		width: 23px;
		height: 23px;
	}

	.tml-wf-priority-card h3 {
		font-size: 20px;
	}

	.tml-wf-product__top {
		grid-template-columns: 75px minmax( 0, 1fr );
		gap: 9px;
	}

	.tml-wf-mini-filter {
		transform: scale( 0.87 );
	}

	.tml-wf-mini-pair {
		width: 82px;
		transform: scale( 0.88 ) translateX( -8px );
	}

	.tml-wf-steps {
		grid-template-columns: 1fr;
	}

	.tml-wf-steps li {
		display: grid;
		grid-template-columns: 42px minmax( 0, 1fr );
		gap: 8px;
		padding: 17px;
	}

	.tml-wf-steps li > span {
		margin: 0;
		font-size: 20px;
	}

	.tml-wf-sticky {
		grid-template-columns: minmax( 0, 1fr ) auto;
	}

	.tml-wf-sticky__icon {
		display: none;
	}

	.tml-wf-sticky__copy small {
		font-size: 7px;
	}

	.tml-wf-sticky__copy strong {
		font-size: 11px;
	}

	.tml-wf-sticky__action {
		padding: 9px 10px;
		font-size: 9px;
	}

	.tml-wf-sticky__action svg {
		display: none;
	}
}

@media ( prefers-reduced-motion: reduce ) {
	html {
		scroll-behavior: auto;
	}

	.tml-wf *,
	.tml-wf *::before,
	.tml-wf *::after {
		scroll-behavior: auto !important;
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
}

@media print {
	.tml-wf-sticky,
	.tml-wf-topbar,
	.tml-wf-hero__actions,
	.tml-wf-final__actions {
		display: none !important;
	}

	.tml-wf {
		padding-bottom: 0;
	}
}