.plans.hidden { 
	opacity: 0;
	pointer-events: none;
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	display: none;
}
.plans ul {
	list-style: none;
	padding: 2rem 0 0 0;
	margin-bottom: 0;
}
.plans {
	display: flex;
	justify-content: space-between;
	gap: 1.5rem;
	padding: 2.5rem 0 0 0;
	align-items: stretch;
}
.plans {
	width: calc(100% - 2rem);
	margin: 1rem auto 0 auto;
}
@keyframes fadeInUp {
	from {
		opacity: 0;
		transform: translateY(40px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}
.plans.animate {
	animation: fadeInUp 0.7s ease-in-out both;
}
.billing-toggle {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 1rem;
	margin-top: 2rem;
	margin-bottom: 1rem;
	flex-wrap: wrap;
	font-size: 1rem;
}
.billing-label {
	font-weight: 400;
	transition: font-weight 0.3s ease;
}

.billing-label.active { font-weight: 700; }
.billing-toggle span {
	color: #1a1a1a;
	font-weight: 500;
}
.yearly-label { position: relative; }

.inner-page .plans.monthly { 
	align-items: stretch; 
	width: 100%; 
}
.inner-page .plans.yearly { align-items: stretch; }
.plans li { list-style: none; }
.plans li .content {
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	flex: 1;
	background: #ffffff;
	border: 3px solid #ECECEC;
	border-radius: 0.75rem;
	box-shadow: 0 4px 12px rgba(0,0,0,0.05);
	padding: 1.5rem 0.75rem;
	height: stretch;
	transition: all 0.25s ease-in-out;
	position: relative;
}
.plans li .content:hover {
	box-shadow: 0 8px 20px rgba(0,0,0,0.15);
}
.inner-page .plans .content { min-height: fit-content; }
.plans h4 {
	margin: 0 auto 0.75rem auto;
	font-family: "Inter", sans-serif;
	font-size: 1.25rem;
	font-weight: bold;
	color: #1A1A1A;
}
.plans .in-eur {
	font-size: 1.25rem;
	color: rgba(88,88,88,0.75);
	display: inline-block;
}
.plans .content ul {
	display: grid;
	gap: 0.5rem;
	margin: 0 auto;
	padding-top: 0.25rem;
}
.plans .content ul li {
	text-align: left;
	font-size: 0.875rem;
	color: rgba(88,88,88,0.75);
	background: url("../img/icon-checkmark.svg") no-repeat left top;
	min-height: 1rem;
	padding-left: 1.75rem;
}
.plans .content ul .unavailable {
	background: url("../img/icon-checkmark-inactive.svg") no-repeat left top;
	color: rgba(88,88,88,0.5);
}
.plans .btn { 
	margin: 0.75rem 0 1.5rem 0;
	align-self: stretch;
}
.plans .price {
	margin: 1rem auto;
	font-size: 1.25rem;
	color: #1a1a1a;
}
.plans .price .amount { 
	font-size: 2rem; 
	font-weight: bold;
}
.plans .price .currency { font-weight: bold; }
.plans .price .period { opacity:  0.5; }
.plans li.special { position: relative; }
.plans li.special .content { 
	border: 2px solid #4F13C0;
	border-radius: 0.75rem;
	position: relative;
	z-index: 1;
}
.plans .special .btn { background: #B028DD; }
.plans .top-label {
	position: absolute;
	top: -1.75rem;
	left: 0;
	right: 0;
	background: #4F13C0;
	color: #ffffff;
	text-align: center;
	text-transform: uppercase;
	padding: 0.375rem 0.5rem 2rem 0.5rem;
	border-top-left-radius: 0.75rem;
	border-top-right-radius: 0.75rem;
	font-size: 0.875rem;
	align-self: center;
	justify-content: center;
	display: flex;
	gap: 0.35rem;
	z-index: 0;
}
.plans small { min-height: 2rem; }
.plans .you-save {
	margin-top: 0.75rem;
	font-size: 0.8125rem;
	border-radius: 0.375rem;
	background: rgba(67,160,71,0.2);
	color: #43A047;
	padding: 0.15rem;
}


@media screen and (max-width: 1100px) {
	#pricing-plans { padding: 4rem 0 2rem 0;}
	.plans { padding: 3rem 0 0 0;  }
	.plans.monthly { width: calc(100% - 2rem); }
}
@media screen and (max-width: 980px) {
	.plans { gap: 1rem; }
	.plans .top-label { 
		font-size: 0.65rem; 
		text-transform: uppercase; 
		top: -1.5rem;
	}
}

@media (max-width: 920px) {
	.plans {
		display: flex;
		flex-wrap: nowrap;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		margin: 0 -1rem;
		gap: 0;
		padding-bottom: 2rem;
		width: calc(100% - 1rem);
	}
	.plans li:not(.plans li ul li) {
		width: 230px;
		flex: 0 0 auto;
		scroll-snap-align: center;
		margin-right: 1rem;
		margin-left: 1rem;
	}
	.plans {
		-ms-overflow-style: none;
		scrollbar-width: none;
	}
	.inner-page .plans {
		margin: 0;
	}
}