@charset "UTF-8";

.pricing {
	display: flex;
	overflow: hidden;
	--top: 50%;
	--left: 50%;
}

.pricing>input {
	position: fixed;
	transform: scale(0);
	opacity: 0;
}

.pricing .screen {
	flex: 0 0 auto;
	width: 100%;
	position: relative;
	backface-visibility: hidden;
}

.pricing .screen1 {
	background: radial-gradient(123% 83.51% at 85.59% 12.93%, #FFDDDD 0%, #D7C4FF 52.6%, #D7F0FF 100%);

}

html:not(.safari) .pricing .screen1 {
	color: var(--black);
}

.pricing .screen2 {
	background: linear-gradient(180deg, #AB88F4 0%, #FF30AB 74.23%);
	transform: translate3d(-100%, 0, 0);
	transition-property: clip-path;
	transition-duration: 0.7s;
	transition-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1);
	clip-path: circle(120% at var(--left) var(--top));
	z-index: 3;
	overflow: hidden;
}

.pricing input:not(:checked)~.screen2 {
	pointer-events: none;
	clip-path: circle(0% at var(--left) var(--top));
}

html.safari .pricing .screen1 {
	background: #FF91DB;
	/*background: #E44CC3;*/
}

html.safari .pricing .screen2 {
	background: #000;
}

html.safari .pricing .cells {
	z-index: 1;
}

html.safari .pricing .screen1 .image>*:before,
html.safari .pricing .screen1 .image>*:after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	z-index: 1;
	backface-visibility: hidden;
}

html.safari .pricing .screen1 .image>*:before {
	background: linear-gradient(to bottom, #FF91DB 0%, #FF91DB00 20%, #FF91DB00 90%, #FF91DB 100%);
}

html.safari .pricing .screen1 .image>*:after {
	background: linear-gradient(to right, #FF91DB 0%, #FF91DB00 20%, #FF91DB00 80%, #FF91DB 100%);
}

html.safari .pricing .text>* {
	z-index: 2;
}

.pricing .text {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	position: relative;
}

.pricing .image {
	pointer-events: none;
	position: relative;
	aspect-ratio: 1/1;
	backface-visibility: hidden;
	transition-property: transform, opacity;
	transition-duration: 0.8s, 0.4s;
	transition-timing-function: ease;
}

.pricing .image>* {
	aspect-ratio: 1/1;
	position: relative;
}

.pricing .image img,
.pricing .image video {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.pricing .head {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: clamp(10px, 1.25rem, 20px);
	margin-bottom: clamp(26px, 4.375rem, 70px);
}

html:not(.safari) .pricing .screen1 .head {
	z-index: 20;
	position: relative;
}

html:not(.safari) .pricing .screen2 .head {
	opacity: 0;
	pointer-events: none;
}

.pricing .tabs {
	flex: 0 0 auto;
	height: clamp(50px, 4.6875rem, 75px);
	display: flex;
	border: 5px solid transparent;
	border-radius: 100px;
	background-color: color-mix(in srgb, var(--white) 40%, transparent);
	position: relative;
	--width1: 0;
	--width2: 0;
	--width3: 0;
	--width4: 0;
	transition-property: color, background;
	transition-duration: 0.4s;
	transition-timing-function: ease;
	color: var(--black);
}

html.safari .pricing .screen2 .tabs {
	background-color: #353535;
	color: var(--white);
}

.pricing .tabs:before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	border-radius: 100px;
	background-color: var(--white);
	transition-property: transform, width;
	transition-duration: 0.4s;
	transition-timing-function: ease;
	width: var(--width1);
	transform: translateX(0);
}

.pricing:has(#pricing-tab-1:checked) .tabs:before {
	transform: translateX(0);
	width: var(--width1);
}

.pricing:has(#pricing-tab-1:checked) .tabs>*:nth-child(1) {
	color: var(--black);
}

.pricing:has(#pricing-tab-2:checked) .tabs:before {
	transform: translateX(var(--width1));
	width: var(--width2);
}

.pricing:has(#pricing-tab-2:checked) .tabs>*:nth-child(2) {
	color: var(--black);
}

.pricing:has(#pricing-tab-3:checked) .tabs:before {
	transform: translateX(calc(var(--width1) + var(--width2)));
	width: var(--width3);
}

.pricing:has(#pricing-tab-3:checked) .tabs>*:nth-child(3) {
	color: var(--black);
}

.pricing:has(#pricing-tab-4:checked) .tabs:before {
	transform: translateX(calc(var(--width1) + var(--width2) + var(--width3)));
	width: var(--width4);
}

.pricing:has(#pricing-tab-4:checked) .tabs>*:nth-child(4) {
	color: var(--black);
}

.pricing .pricing-tab-content-1,
.pricing .pricing-tab-content-2,
.pricing .pricing-tab-content-3,
.pricing .pricing-tab-content-4 {
	position: relative;
	transform: translateZ(0);
}

.pricing:not(:has(#pricing-tab-1:checked)) .pricing-tab-content-1,
.pricing:not(:has(#pricing-tab-2:checked)) .pricing-tab-content-2,
.pricing:not(:has(#pricing-tab-3:checked)) .pricing-tab-content-3,
.pricing:not(:has(#pricing-tab-4:checked)) .pricing-tab-content-4 {
	display: none;
}

.pricing .tabs>* {
	flex: 0 0 auto;
	align-self: stretch;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	cursor: pointer;
	font-weight: bold;
	font-size: clamp(14px, 1.125rem, 18px);
	line-height: 1.5;
	position: relative;
	padding: 0 clamp(10px, 1.25rem, 20px);
	border-radius: 100px;
	transition: color 0.4s ease;
}

.pricing .tabs input {
	position: absolute;
	opacity: 0;
	cursor: pointer;

}

.pricing .twice {
	font-size: clamp(16px, 1.125rem, 18px);
	gap: 10px;
	font-weight: bold;
	padding: 0 clamp(15px, 1.25rem, 20px);
	height: clamp(50px, 4.6875rem, 75px);
	border-radius: 100px;
}

html.safari .pricing .screen2 .twice {
	--white: #000;
	--black: #fff;
}

html.safari .pricing .screen2 .twice:after {
	opacity: 0.2;
}

.pricing .twice svg {
	height: 20px;
	width: auto;
	fill: var(--yellow);
	transition: fill 0.4s ease;
}

html.safari .pricing .screen2 .twice svg {
	fill: var(--white);
}

.pricing .twice .trigger {
	flex: 0 0 auto;
	position: relative;
	border-radius: 100px;
	background: color-mix(in srgb, var(--white) 25%, transparent);
	font-size: clamp(30px, 2.1875rem, 35px);
	width: 1.714em;
	height: 1em;
	margin-left: 4px;
	transition-property: background;
	transition-duration: 0.4s;
	transition-timing-function: ease;
}

.pricing .twice .trigger:before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 0.771em;
	height: 0.771em;
	border-radius: 50%;
	margin: 0.114em;
	background: var(--yellow);
	transition-property: transform, background;
	transition-duration: 0.4s;
	transition-timing-function: ease;
	transform: translate3d(0, 0, 0);
}

.pricing input:checked~.screen .twice .trigger {
	background-color: var(--yellow);
}

html.safari .pricing input:checked~.screen2 .twice .trigger {
	background-color: var(--white);
}

.pricing input:checked~.screen .twice .trigger:before {
	transform: translate3d(0.714em, 0, 0);
	background-color: var(--black);
}

html.safari .pricing input:checked~.screen2 .twice .trigger:before {
	background-color: var(--yellow);
}

@media (pointer:fine) {
	.pricing .twice:hover .trigger {
		background-color: var(--black) !important;
	}

	.pricing .twice:hover svg {
		fill: var(--black) !important;
	}

	.pricing .twice:hover .trigger:before {
		background-color: var(--yellow) !important;
	}

	html.safari .pricing .screen2 .twice:hover .trigger {
		background-color: var(--yellow) !important;
	}

	html.safari .pricing .screen2 .twice:hover .trigger:before {
		background-color: var(--white) !important;
	}
}

.pricing .title,
.pricing .price {
	font-weight: bold;
	line-height: 1.1;
	font-size: clamp(27px, 5.625rem, 90px);
	margin: 0;
	white-space: nowrap;
}

.pricing .price strong {
	font-weight: inherit;
	font-size: clamp(56px, 8.125rem, 130px);
}

.pricing .price .discount {
	display: inline-flex;
	align-items: center;
	gap: clamp(5px, 0.625rem, 10px);
	padding: clamp(10px, 1.125rem, 18px) clamp(10px, 1.25rem, 20px);
	vertical-align: top;
	font-size: clamp(16px, 1.5rem, 24px);
	line-height: 1;
	font-weight: bold;
	color: var(--black);
	background-color: var(--yellow);
	border-radius: 100px;
	transform: translateY(10%);
}

html:not(.safari) .pricing .screen1 .price .discount {
	background-color: var(--pink);
	color: var(--white);
}

.pricing .price .discount svg {
	flex: 0 0 auto;
	height: clamp(16px, 1.5rem, 24px);
	width: auto;
	fill: currentColor;
}

.pricing .week {
	position: absolute;
	color: var(--black);
	aspect-ratio: 308/316;
	background: url("../img/week.webp") no-repeat 50% 50%;
	background-size: contain;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 9.625em;
	font-weight: bold;
	line-height: 1.4;
	font-size: clamp(16px, 2rem, 32px);
}

.pricing .week strong {
	font-weight: 800;
	line-height: 1.19;
	font-size: 1.84375em;
}

.pricing .btn:not(.twice) {
	height: clamp(60px, 6.875rem, 110px);
	font-size: clamp(18px, 1.875rem, 30px);
	font-weight: bold;
	min-width: 14.666666em;
	margin-top: clamp(20px, 4.375rem, 70px);
}

.pricing .info {
	font-weight: 500;
	font-size: clamp(14px, 1.875rem, 30px);
	min-height: 1lh;
	line-height: 1.5;
	margin-top: clamp(5px, 1rem, 16px);
}

.pricing .info+* {
	margin-top: 0 !important;
}

.pricing ul,
.pricing li {
	list-style: none;
	margin: 0;
	padding: 0;
}

.pricing ul {
	display: flex;
	align-items: flex-start;
	flex-wrap: wrap;
	font-weight: 500;
	line-height: 1.5;
	font-size: clamp(16px, 1.875rem, 30px);
	gap: clamp(14px, 1.5rem, 24px);
	margin-top: clamp(15px, 2.5rem, 40px);
	container-type: inline-size;
	container-name: pricing-ul;
	width: 100%;
}

@media only screen and (min-width: 600px) {
	@container pricing-ul (max-width: 30em) {
		.pricing ul li {
			width: 100%;
		}
	}
}

.pricing li {
	flex: 0 0 auto;
	max-width: 100%;
	position: relative;
	padding-left: calc(clamp(20px, 2.3125rem, 37px) + clamp(10px, 0.75rem, 12px));
}

.pricing li:before {
	content: '';
	position: absolute;
	top: 0.75em;
	left: 0;
	width: clamp(20px, 2.3125rem, 37px);
	height: clamp(20px, 2.3125rem, 37px);
	border-radius: 50%;
	background: var(--white) url("../img/check-circle-white.svg") no-repeat 50% 50%;
	background-size: contain;
	transform: translate3d(0, -50%, 0);
}

html:not(.safari) .pricing .screen2 .btn:not(.twice) {
	--white: #000;
	--black: #fff;
}

.pricing .scroll-down {
	pointer-events: none;
	position: absolute;
	bottom: clamp(30px, 3.75rem, 60px);
	left: 0;
	right: 0;
	text-align: center;
	font-weight: 500;
	font-size: clamp(12px, 1rem, 16px);
	line-height: 1;
	text-transform: uppercase;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.5em;
}

.pricing .scroll-down svg {
	flex: 0 0 auto;
	height: 0.875em;
	width: auto;
	fill: currentColor;
}

.pricing .cells {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate3d(-50%, -50%, 0);
}

@media only screen and (max-width: 999.99px) {
	.pricing .cells {
		display: none;
	}
}


@media only screen and (max-width: 999.99px) {


	.pricing .screen {
		padding: 0 var(--side-padding) calc(var(--side-padding) + 40px) var(--side-padding);
		display: flex;
		flex-direction: column;
		min-height: calc(100vh + 40px);
		min-height: calc(100svh + 40px);
	}

	.pricing .image {
		aspect-ratio: 2/1;
		flex: 1 0 auto;
		width: 100%;
		max-width: 400px;
		margin: 0 auto;
		position: relative;
	}

	.pricing .image>* {
		width: 200%;
		position: absolute;
		bottom: 0;
		left: -25%;
		transform: rotate(180deg);
	}

	.pricing .screen2 .image>* {
		width: 250%;
		left: -40%;
		bottom: -20%;
		transform: rotate(195deg);
	}

	@media only screen and (max-width: 599.99px) {
		.pricing .btn:not(.twice) {
			width: 100%;
			min-width: 0;
		}
	}

	.pricing .scroll-down {
		display: none;
	}

	.pricing .price {
		margin-top: 5px;
	}

	.pricing .price .discount {
		transform: translateY(-50%);
	}

	.pricing .week {
		top: var(--header);
		right: var(--side-padding);
	}

	@media only screen and (max-width: 599.99px) {
		.pricing .head {
			flex-direction: column;
			align-items: stretch;
			width: 100%;
			gap: 0;
		}

		.pricing .tabs {
			width: 100%;
			border-radius: 15px 15px 0 0;
			border-top-width: 10px;
			border-bottom-width: 10px;
			height: 60px;
		}

		.pricing .tabs>* {
			flex: 1 1 auto;
			padding: 0;
		}

		.pricing .twice {
			width: 100%;
			border-radius: 0 0 15px 15px;
		}

		.pricing .twice .trigger {
			margin-left: auto;
		}
	}

}

@media only screen and (min-width: 1000px) {
	.pricing .screen {
		min-height: 100vh;
		min-height: 100svh;
		padding: var(--header) var(--side-padding);
	}

	.pricing .screen .text {
		margin-left: 43.75%;
		height: 100%;
		justify-content: center;
	}

	.pricing .image {
		position: absolute;
		top: 50%;
		left: calc((100% - var(--side-padding) * 2) * 0.21875 + var(--side-padding));
		width: 61.5%;
		transform: translate3d(-50%, -50%, 0);
		max-width: 1190px;
	}

	html:not(.ready) .pricing .image {
		transform: translate3d(-50%, calc(-50% + var(--distance)), 0);
		opacity: 0;
	}

	.pricing .image>* {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate3d(-50%, -50%, 0);
		width: 100%;
	}

	.pricing .screen1 .image {
		transform: translate3d(-50%, -50%, 0) rotate(-15deg);
	}

	html:not(.ready) .pricing .screen1 .image {
		transform: translate3d(-50%, calc(-50% + var(--distance)), 0) rotate(-15deg);
	}

	.pricing .screen1 .image>* {
		width: 86.84%;
	}

	.pricing .week {
		transform: translate3d(-50%, -50%, 0);
		top: 35%;
		left: calc((100% - var(--side-padding) * 2) * 0.17 + var(--side-padding));
	}

	.pricing .cells {
		top: 50%;
		left: 50%;
		transform: translate3d(-50%, -50%, 0);
	}
}

/* MrCasm — quote-based pricing (hide legacy tier toggles) */
.pricing .text > .head > .tabs,
.pricing .text > .head > label.twice {
	display: none !important;
}

.pricing .price--quote strong {
	font-size: clamp(26px, 3.5vw, 44px);
	font-weight: 700;
	line-height: 1.15;
}