/* Font */

:root {
  --font-header: 'Lemon Milk Regular';
  --font-body: 'Montserrat';
}


/* Color */

:root {
  --color-dark: #333;
  --color-light: #bbb;
}


/* Border radius */

:root {
  --border-radius: 10px;
  --border-radius-small: 5px;
}
/* Template */

body {
	background-color:#fff;
	color:#333;
	padding:0;
	margin:0;

	> header,
	> nav,
	> main section,
	> main form,
	> footer,
	> small {
		> div {
			padding:3.2rem 2.6rem;

			@media screen and (min-width: 750px) {
				padding:4rem;
				width:100%;
				box-sizing:border-box;
			}

			@media screen and (min-width: 900px) {
				width:85%;
				margin:auto;
				max-width:1280px;
			}

			p:last-child {
				margin-bottom:0;
			}
		}
	}

	> main form > div {
		padding:0;

		> div {
			padding:3.2rem 2.6rem;

			@media screen and (min-width: 750px) {
				padding:4rem;
			}
		}
	}

	> header {
		background-color:#eee;
		color:#666;

		> div {
			padding-top: 2rem;
			padding-bottom: 2rem;
			display: flex;
			justify-content:space-between;
			align-items: center;

			.logo {
				> a > img {
					display:flex;
					height:2rem;

					@media screen and (min-width: 900px) {
						height:2.4rem;
					}
				}
			}
		}
	}

	> footer {
		background-color:#666;
		color:#eee;

		> div {
			display:grid;

			@media screen and (min-width: 900px) {
				grid-template-columns:.75fr .75fr 1.5fr;
				gap:4rem;
			}

			> section {
				border-top:.5px solid rgba(255, 255, 255, .15);
				white-space:nowrap;
				padding:2rem 0;
				margin:0;

				@media screen and (min-width: 900px) {
					padding:0 0 0 4rem;
					border-top:none;
					border-left:.5px solid rgba(255, 255, 255, .15);
				}

				&:first-child {
					border:none;
					padding-top:0;

					@media screen and (min-width: 900px) {
						padding:0;
					}
				}

				ul {
					padding:0;
					margin:0;

					li {
						padding:0;
						list-style:none;

						a {
							margin:1rem 0;
							padding:1rem 0;
							display:block;

							&:hover {
								color:#fff;
							}

							img.logo {
								height: 5rem;
							}
						}
					}
				}

				a {
					color:#eee;
				}
			}
		}
	}

	> small {
		display:block;

		> div {
			padding-top:4rem;
			padding-bottom:5rem;

			p {
				width:75%;
			}

			a {
				color:#666;

				&:hover {
					color:#333;
					text-decoration:underline;
				}
			}

			ul {
				padding:0;
				margin:0 0 8rem;
				font-size:1.6rem;

				@media screen and (min-width: 900px) {
					margin:0;
					display:flex;
				}

				> li {
					margin:0 0 1rem;
					list-style:none;

					@media screen and (min-width: 900px) {
						margin:0;

						&:before {
							content:'|';
							margin:0 2rem;
						}

						&:first-child:before {
							content:'';
							margin:0;
						}
					}
				}
			}
		}
	}
}
/* CTAs */

.cta,
.cta:visited {
	background-color: #333;
	color: #eee;
	padding: 2.4rem 3rem;
	display:inline-block;
	text-decoration:none;
	border-radius:var(--border-radius-small);
	font-weight: bold;
	transition:all 250ms ease-in-out;
	box-sizing: border-box;
	width:100%;
	text-align:center;
	line-height:inherit;

	@media only screen and (min-width: 750px) {
		padding: 2rem 2.4rem;
		width: auto;
		text-align: unset;
	}

	@media only screen and (min-width: 900px) {
		padding: 1.6rem 2.4rem;
	}

	&:hover {
		background-color: #222;
		color: #fff;
	}

	&.cta-stroke {
		border:1px solid #333;
		background-color: transparent;
		color:#333;
	}
}

.cta-inline {
	display:grid;
	grid-template-columns:1fr;
	gap:2rem;
	margin:0;
	padding:0;

	@media only screen and (min-width: 750px) {
		display:flex;
		grid-template-columns:unset;
	}

	li {
		list-style:none;
		padding:0;
		margin:0;
	}
}

.cta-list {
	display:grid;
	gap:2rem;
	margin:0;
	padding:0;

	li {
		list-style:none;
		padding:0;
		margin:0;
	}
}
/* Fonts */

html {
	font-size:10px;
	font-family:var(--font-body), sans-serif;

	body {
		font-size:1.6rem;

		@media screen and (min-width: 900px) {
			font-size: 1.8rem;
		}

		h1,
		h2,
		h3 {
			font-weight:100;
			font-family:var(--font-header), sans-serif;
			
			&:first-child {
				margin:0 0 2rem;
			}
		}

		h1 {
			margin:0 0 3rem;
			font-size: clamp(3.6rem, 6vw, 5rem);
			line-height:1.15em;

			@media screen and (min-width: 750px) {
				font-size:clamp(4rem, 6.8vw, 8rem);
				line-height:1.15em;
			}

			> span {
				font-size:clamp(5.2rem, 10vw, 7rem);
				display:block;
				padding-bottom:3rem;

				@media screen and (min-width: 750px) {
					font-size:clamp(6rem, 10vw, 12rem);
					display:block;
					padding-bottom:3rem;
				}
			}

			+ p {
				font-size:2rem;
				line-height:1.5em;

				@media screen and (min-width: 900px) {
					font-size: 2.2rem;
				}
			}
		}

		h2 {
			font-size:3.2rem;
			line-height:1.25em;
			margin-top:3rem;

			@media screen and (min-width: 900px) {
				font-size: 5rem;
				margin-bottom:2rem;
			}
		}

		h3 {
			font-size:2.4rem;
			line-height:1em;
			margin-top:2rem;

			> sup {
				position:relative;
				font-size:1.4rem;
				line-height:0;
				top:1px;
			}

			@media screen and (min-width: 900px) {
				font-size: 2.6rem;
				margin-bottom:2rem;
			}
		}

		p {
			line-height: 1.8em;
		}
	}
}
/* Form */

form {
	background-color:#eee;

	> div {
		display: grid;

		@media screen and (min-width: 900px) {
			grid-template-columns: 1fr 1fr;
		}

		@media screen and (min-width: 1200px) {
			grid-template-columns: 1fr 1.25fr;
		}
	}

	fieldset {
		border:none;
		padding:0;
		margin:0;
		border-top: 1px solid #aaa;
		padding-top: 2rem;
		margin-top: 3rem;
		display:grid;
		gap:1rem;

		&:first-child {
			border:none;
			padding:0;
			margin:0;
		}

		legend {
			display:contents;

			h2 {
				font-size:3.2rem;
				padding:0;
				margin:0;
			}
		}

		ul {
			display:grid;
			gap:1rem;
			list-style:none;
			padding:0;
			margin:0;
		}
	}

	label {
		line-height: 1.2em;

		> sup {
			color:darkred;
		}
	}

	input[type="text"],
	input[type="password"],
	select,
	textarea {
		background-color: #fff;
		padding:1.2rem;
		margin:6px 0 0;
		border-radius:var(--border-radius-small);
		border:none;
		font:inherit;

		@media screen and (min-width: 750px) {
			padding:1rem;
		}

		&:focus {
			outline:2px solid #ccc;
		}
	}

	select {
		appearance: none;
		background-image: url(data:image/webp;base64,UklGRkoBAABXRUJQVlA4WAoAAAAQAAAAPwAAPwAAQUxQSJwAAAABgFvbtqpql4RlkFOAx5bRgGtG7K4NuFWgGRQA393dcLj/nJQgIiZgDu6HyQq/v3PRVORz4RUqmIn6ABmDqBAddMUcg5D8W4iREsIieiCFx/3+lMRs+6VBDON9nkBOvY+dHuq7TcFA8bmThgOCu3TAAhfbviVMTNtiYILRpluwUf1tsPJBeW0CRnibz+dqVp75vAJWOP4Cs/8//AFWUDggiAAAANAFAJ0BKkAAQAA+SSCLRCKiIRv6BAAoBIS0gAHxymBgkor6i18dyfYn+djcQ7zuEXGX5OZnW5gA/uxm//+hvE7//xDux/NVVKYxs5MMfLmK8wTzDJl6UyiYNK1QFbrPc+CfKpcpFauEae76Ujq2Lt98nYryeXxJ71jzjLGtVJUZMp/9+fFAAAA=);
        background-repeat: no-repeat;
        background-size: 32px;
        background-position: right;
	}

	input[type="checkbox"] {
		display:none;

		+ label {
			display:flex;
			gap:1rem;
			align-items:center;
			
			&:before {
				content:'';
				width:2.4rem;
				height:2.4rem;
				display:inline-block;
				border-radius:var(--border-radius-small);
				border:.1rem solid #000;
				background-color:#fff;
			}
		}

		&:checked + label:before {
			background-size:cover;
			background-image:url('data:image/webp;base64,UklGRvoCAABXRUJQVlA4WAoAAAAQAAAAfwAAfwAAQUxQSI4CAAABkGNt2/IoD1K6W1xwjWekorQWFjLu3rGScd8DWxgXNJ7gJP/TRP73/76v5UTEBOA/+DueGy7Cn9eM9pzk5ysGe2aR5PZZYz2pse7WGUOlqmy4fcVIbWx2/4qB0mx+75Jxkmx195JhElZL3LlolE7aeew2SPy3LTxyGSP2izYf3jZE9CdtP7hthMgPCu7fMsDzHxStvNFeu0Xht7prsyibDULz6Rpls0FoPlWlbC4Ezaf/UTYbguY7KZxxQ/MdFM56oPlnFM55ofmnllDeB82nLMp+8UDzKQp/c0PzCQpnPNB83BLKeKH5mEXZShiaj9Yo++MuVH23ftoZaQoX/FC1k1x0RJLCxQBU7SDJeQckKVwKQdUU686JxSlcDkHVyM96nBWKU7gchqopNrkpErWEci6omrCa4YZApEbZghuqJiw2v27b8ypli16oGqux1TWbnv6jbMkLVVNVtj5rS/wvZb95oGqKtq7akKhR9ts1qJqkzcstxauULYegasKyi0stxP5RthKGqgmL9i82Ff1L2e93oGq8Rsn5JiJ/KPvjHlR9UaHsZoPOKmW/+qHsqfdCXK/TWaXstwBUHhLiGoDIP8pmglB7WIirCP6gbCYE1UeEuPCBstkw1O8Vkj6+DR32K/TRBT0OKPPRDV0OKZL3Q5/DShTvQ6dDChTuQ6/djst5oNs+h+W90O+Eowo+6HjSQSU/9DzsmK9e6HrYIZnb0PeII7Iu6HzUATk39D4mlvdA991CX25C/z0iRR9M2CdQ9MOM/baVgjDlgE3lEMw5Y0slDJMO21D0wqwjLZV8MO1oC+UAzDvWVCUIEw81kQ3CzF0NMi6YuqdO1g1z95IseWDyPv65D7N3v8R/5gNWUDggRgAAAHAGAJ0BKoAAgAA+kUihTKWkIyIgiACwEglpbuF0kABPbYi8QVHPbEXiCo57Yi8QVHPbEXiCo57Yi8QTYAD+/1JPYoAAAAA=');
		}
	}

	button.cta {
		/* background-color:#aaa;
		color:#222; */

		border: none;
		font-size: unset;
		font-family: inherit;

		&:hover {
			/* background-color:#ccc;
			color:#000; */
		}
	}

	.form-field {
		display:grid;
		align-items:center;
		gap:.5rem;
	}

	.form-help-panel {
		background-color:#ccc;
		padding:3.2rem 2.6rem;

		@media screen and (min-width: 750px) {
			padding:4rem;
		}

		@media screen and (min-width: 900px) {
			border-radius:var(--border-radius);
			margin:4rem 0;
		}

		ul {
			display: grid;
			gap: 1.2rem;
			line-height: 1.4em;
		}
	}

	.form-error-hint {
		font-size:1.2rem;
		line-height:1.2em;
		color:pink;
	}

	.form-error-field {
		outline:3px solid hotpink;
		background-color:pink;
	}
}
/* Accordion */

section.accordion {
	background-color:#ccc;

	&.dark {
		background-color:#bbb;
	}

	h2 {
		font-size: 2.6rem;
		margin:0;
	}

	> div > div {
		display:grid;
		gap:1.6rem;
		width:100%;

		details {
			background-color:#fff;
			color:#333;
			border-radius:var(--border-radius-small);
		
			> summary {
				cursor:pointer;
				background-color:#eee;
				font-size:1.8rem;
				outline:none;
				margin:0;
				padding: 1.4rem 6.4rem 1.4rem 2.4rem;
				border-radius:var(--border-radius-small);
				background-image:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAMAAACdt4HsAAAAM1BMVEUAAABmZmZlZWVmZmZmZmZnZ2dmZmZnZ2dmZmZlZWVmZmZnZ2dmZmZmZmZmZmZmZmZmZmYJHPvPAAAAEHRSTlMA3x/7WlRVoI+r8W08FsHAeXSAiAAAALdJREFUWMPt0LsOwjAQBVEnJonJA/b/vxYKB0tMk5EQlW+1zZliU19f3w+3LbtH+7Kd5xKRb9ZPOeL+8a1g/LtQfSsYXwsl6vJ83c/5VCWt0Qrex5oegYLw8UzjgILww5ha4eInpy+PgvQsWM+C9SxYz4L1LFjPgvUsWM+C9SxYz4L1LFjPgvUseM8CvSvQ2wK8LcDbArwo0LsCvSvQ2wK9L9D7Ar0vNO8L8LoAL3eUcqS+vr5/7AWdLSfVguwYogAAAABJRU5ErkJggg==');
				background-repeat: no-repeat;
				background-size: 2rem;
				background-position: calc(100% - 2.4rem) center;
				list-style: none;
				line-height:1.8em;

				&::marker,
				&::-webkit-details-marker {
					display:none;
				}
			}
		
			> section {
				padding: 2rem 2.4rem;
		
				h3 {
					border-top:1px solid #ddd;
					color:#444;
					margin-bottom:0;
					padding-top:2rem;
					font-size: 1.6rem;
					font-weight: 700;
					font-family: inherit;

					@media screen and (min-width: 900px) {
						font-size: 2rem;
					}
		
					&:first-child {
						border-top:none;
						padding-top:0;
					}
				}

				p:first-child {
					margin-top:0;
				}
			}
		
			&[open] > summary {
				border-radius:var(--border-radius-small) var(--border-radius-small) 0 0;
				background-image:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAMAAACdt4HsAAAANlBMVEUAAABmZmZmZmZmZmZnZ2dmZmZlZWVnZ2dmZmZlZWVlZWVlZWVmZmZmZmZmZmZmZmZmZmZmZmZKx8pLAAAAEXRSTlMA3h7hIVpTVKCPVqvxwWw8FoWigwYAAAC2SURBVFjD7dQ7DsIwFAXRR/jEJv/9bxZRICuaJkMQ1budizOyXDhyudxftta6nvHdZduut3MeBelRkB4F7VnwvhW8Z8H7VrCeBetZcJ67dF/4+wN3cD4CBelRkJ4F61mwngXrWbCeBetZsJ4F61mwngXrWfA+okfBeBasZ8F7FuhlYe/7OLDn/peb4FVhihFeFcao8KpQIwrf7/hLDu9DaV4Umo8ozbvC8DnMZQm9pcyRy+V+txfAfi3RIIVlSQAAAABJRU5ErkJggg==');
			}
		}
	}
}
/* Actions */

.actions {
	> div {
		display: grid;
		align-items: center;
		gap: 4rem;
		grid-template-columns:1fr;

		@media only screen and (min-width: 1200px) {
			grid-template-columns: 1.6fr 1fr;
		}
	}
}
/* Hero */

#hero {
	overflow: hidden;
    position: relative;
    display: flex;

	> picture > img {
		object-fit: cover;
		position: absolute;
		width: 100vw;
		height: 100%;
	}

	> div {
		background-color: rgba(0, 0, 0, .7);
		padding: 4rem;
		margin: auto 6rem;
		border-radius: .5rem;
		position:relative;

		@media only screen and (min-width: 750px) {
			margin: auto 10% auto 40%;
			padding: 4rem;
		}

		p {
			color:#fff;
			font-weight:100;
			margin:0;
			line-height:1.35em;
		}
	}
}

#hero {
	background-color:pink;
	aspect-ratio:16 / 16;
		
	@media only screen and (min-width: 600px) {
		aspect-ratio:16 / 14;
	}
		
	@media only screen and (min-width: 750px) {
		aspect-ratio:16 / 12;
	}
		
	@media only screen and (min-width: 900px) {
		aspect-ratio:16 / 8;
	}
		
	@media only screen and (min-width: 1200px) {
		aspect-ratio:16 / 7;
	}
		
	@media only screen and (min-width: 1500px) {
		aspect-ratio:16 / 6;
	}
}
/* Split */

.split {
	padding:0;
	margin:0;

	@media only screen and (min-width: 750px) {
		height: 50rem;
	}

	@media only screen and (min-width: 900px) {
		height: 54rem;
	}

	> figure {
		margin:0;

		@media only screen and (min-width: 750px) {
			display:flex;
			align-items: center;
		}

		picture {
			width:50%;

			img {
				width:100%;

				@media only screen and (min-width: 750px) {
					display:block;
					object-fit: cover;
					float:right;
					height: 50rem;
				}

				@media only screen and (min-width: 900px) {
					height: 54rem;
				}
			}
		}

		figcaption {
			box-sizing:border-box;
			padding: 3.2rem 2.6rem;

			@media only screen and (min-width: 750px) {
				width:50%;
			}

			@media only screen and (min-width: 900px) {
				padding: 4rem;
			}

			@media only screen and (min-width: 1050px) {
				padding: 4rem 10% 4rem 8rem;
			}

			div {
				@media only screen and (min-width: 750px) {
					max-width:55rem;
					float:left;
				}

				h2 {
					@media only screen and (min-width: 900px) {
						font-size: 4rem;
					}

					> span {
						display: block;
						font-size: 5rem;

						@media only screen and (min-width: 900px) {
							font-size: 6rem;
						}
					}
				}

				p {
					margin:3rem 0;

					&:last-child {
						margin-bottom:0;
					}
				}
			}
		}
	}

	@media only screen and (min-width: 750px) {
		&:nth-child(even) > figure {
			flex-direction: row-reverse;

			img {
				float:left;
			}

			figcaption {
				text-align:right;

				@media only screen and (min-width: 1050px) {
					padding: 4rem 8rem 4rem 10%;
				}

				div {
					float:right;
				}
			}
		}
	}
}
/* Split */

.split--website-monitoring {
	background-color: #ddd;

	a,
	a:visited {
		background-color: #333;
	}

	a:hover {
		background-color: #666;
	}
}

.split--examples {
	background-color: #ccc;

	a,
	a:visited {
		background-color: #333;
	}

	a:hover {
		background-color: #666;
	}
}

.split--frequently-asked-questions {
	background-color: #bbb;

	a,
	a:visited {
		background-color: #333;
	}

	a:hover {
		background-color: #666;
	}
}

.split--example-notifications {
	background-color: #bbb;

	a,
	a:visited {
		background-color: #333;
	}

	a:hover {
		background-color: #666;
	}
}

.split--example-reports {
	background-color: #ccc;

	a,
	a:visited {
		background-color: #333;
	}

	a:hover {
		background-color: #666;
	}
}

.split--example-data {
	background-color: #ddd;

	a,
	a:visited {
		background-color: #333;
	}

	a:hover {
		background-color: #666;
	}
}

.split--contact-us {
	background-color: #ddd;

	a,
	a:visited {
		background-color: #333;
	}

	a:hover {
		background-color: #666;
	}
}