/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
html{
	scroll-behavior: smooth;
	overflow: auto;
}
@media screen and (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
}
body {
	line-height: 1;
    background: #fff;
    color: black;
	display: flex;
	flex-direction: column;
	align-items: start;
	width: 100%;
	max-width: 100vw;
	height: 100%;
	box-sizing: border-box;
	overflow: clip;
	font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

:root{
	--white-05: rgba(255, 255, 255, 0.5);
	--white-025: rgba(255, 255, 255, 0.25);
	--white-012: rgba(255, 255, 255, 0.12);
	--white: rgba(255, 255, 255);
	--blue-00: #003675;
	--blue-00-05: rgba(9, 106, 252, 0.5);
	--bg: #ffffff;
}

img, .material-symbols-outlined{
	pointer-events: none;
}

h1{
	font-size: 48px;
	font-weight: 700;
}
h2{
	font-weight: 700;
	font-size: 32px;
}
h1.scrollSensitive, p.scrollSensitive, span.material-symbols-outlined.scrollSensitive{
	opacity: 0;
	transform: translateY(-16px);
	transition: 0.5s opacity ease, 0.5s transform ease;
	transition-delay: 0.1s;
}
p.scrollSensitive{
	transition-delay: 0.15s;
}
span.material-symbols-outlined{
	transition-delay: 0.05s;
}
h1.scrollSensitive.scrollVisible, p.scrollSensitive.scrollVisible, span.material-symbols-outlined.scrollSensitive.scrollVisible{
	opacity: 1;
	transform: translateY(0px);
}
p{
	font-size: 20px;
	line-height: 1.2;
}
.page{
	min-height: 100svh;
	width: 100%;
	padding: 96px;
	box-sizing: border-box;
	overflow: clip;
	display: flex;
	flex-direction: column;
	gap: 24px;
	contain: content;
}
.page.center{
	align-items: center;
	justify-content: center;
}
.page.partial{
	min-height: 0px;
}
.textPart{
	display: flex;
	flex-direction: column;
	gap: 16px;
	& .icon{
		padding: 16px;
		border-radius: 24px;
		width: 80px;
		height: 80px;
		box-sizing: border-box;
		background: var(--white-012);
		overflow: hidden;
		& span{
			font-size: 48px;
			font-variation-settings: 'opsz' 48;
		}
	}
}

a{
	color: var(--blue-00);
	border-radius: 8px;
	outline: 0px solid var(--blue-00-05);
	transition: .1s background, .2s padding;
}
a:visited{
	color: var(--blue-00);
}
a:focus-visible{
	border: none;
	color: white;
	padding: 4px 8px;
	background: var(--blue-00-05);
}

.flex-row{
	display: flex; flex-direction: row;
	align-items: center;
	justify-content: center;
}
.flex-column{
	display: flex; flex-direction: column;
	align-items: center;
	justify-content: center;
}

fieldset{
	user-select: none;
	display: flex;
	flex-direction: row;
	height: 48px;
	background: #d8eaff;
	border-radius: 16px;
	outline: 40px solid #005cc700;
	transition: 0.2s outline-color, 0s outline-width 0.2s;
	& > div{
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		height: 48px;
		gap: 0px;
		border-radius: 16px;
		position: relative;
		transition: 0.3s background-color ease;
		& > input{
			position: absolute;
			opacity: 0;
			top: 0;
			left: 0;
		}
		& label{
			margin: 0px;
			color: black;
			font-weight: 400 !important;
			height: 100%;
			line-height: 48px;
			padding: 0px 16px;
			transition: 0.2s color ease;
		}
	}
	& > div:has(input:checked){
		background-color: #003675;
		--col: #00367522;
		background-image: radial-gradient(var(--col) 50%, #00367500 70%), linear-gradient(0deg, #c6dffc, #c6dffc);
		background-size: 32px 32px, 100% 100%;
		background-position: center;
		background-repeat: no-repeat;
		animation: woonchEffect 0.5s ease forwards;
		transition: 1s background-color ease;
		& > label{
			color: white;
		}
	}
	& > div:hover{
		background: #c6dffc;
		transition: 0.1s background-color ease;
		& > label{
			color: #003675;
		}
	}
}

fieldset:has(:focus-visible){
	outline: 4px solid #005cc7aa;
    transition: 0.2s outline-color, 0.2s outline-width;
}

@keyframes woonchEffect{
    0%{
        background-size: 48px 100%, 100% 100%;
        --col: #003675cc;
    }
    100%{
        background-size: 150% 300%, 100% 100%;
        --col: #003675;
    }
}


.shake {
	animation: shake 0.5s cubic-bezier(.36,.07,.19,.97) both;
}

@keyframes shake {
	10%, 90% { transform: translate3d(-1px, 0, 0); }
	20%, 80% { transform: translate3d(2px, 0, 0); }
	30%, 50%, 70% { transform: translate3d(-4px, 0, 0); }
	40%, 60% { transform: translate3d(4px, 0, 0); }
}

#finalcta.page{
	padding-inline: 24px;
	h2{
		text-align: center;
	}
}

@media (max-width: 480px){
    fieldset{
		flex-wrap: wrap;
		height: auto;
		background: transparent;
		gap: 8px;
		& div{
			height: 40px;
			background: #d8eaff;
			& label{
				font-size: 16px;
				padding: 0px 16px;
				line-height: 40px !important;
			}
		}
	}
	#finalcta.page fieldset{
		justify-content: center;
	}
}