@font-face {
	font-family: 'inter';
	font-style: normal;
	font-display: block;
	src: url('../fonts/Inter.woff2') format('woff2');
}

@view-transition {
	navigation: auto;
}

@layer root, resets, global, content, overrides;

@layer root {
	:root {
		/* Colors */
		--color-black: hsl(0deg 0% 0%);
		--color-white: hsl(0deg 0% 100%);
		--color-gray-10: hsl(0deg 0% 10%);
		--color-gray-20: hsl(0deg 0% 20%);
		--color-gray-40: hsl(0deg 0% 40%);
		--color-gray-74: hsl(0deg 0% 74%);
		--color-gray-90: hsl(0deg 0% 90%);
		--color-gray-96: hsl(0deg 0% 96%);
		--color-blue: hsl(225deg 100% 50%);
		--color-red: hsl(348deg 100% 50%);
		--text-color: light-dark(var(--color-gray-10), var(--color-gray-96));

		/* Fonts */
		--body-font-family: 'inter';
		--fallback-fonts: sans-serif, system-ui;

		/* Rem sizes */
		--size-12: 0.75rem;
		--size-14: 0.875rem;
		--size-16: 1rem;
		--size-20: 1.25rem;
		--size-24: 1.5rem;
		--size-32: 2rem;
		--size-36: 2.25rem;
		--size-40: 2.5rem;

		/* body sizes */
		--body-font-size-l: var(--size-16);
		--body-font-size-m: var(--size-16);
		--body-font-size-s: var(--size-14);
	
		/* heading sizes */
		--heading-font-size-l: var(--size-36);
		--heading-font-size-m:  var(--size-32);
		--heading-font-size-s: var(--size-24);
		--heading-font-size-xs: var(--size-16);

		@media (width >= 62em) {
			--body-font-size-l: var(--size-20);
			--heading-font-size-l: var(--size-40);
		}

		/* Transition Time */
		--transition-time: 300ms;

		@media (prefers-reduced-motion: reduce) {
			--transition-time: 0ms;
		}

		/* Breakpoints used across stylesheets
		* 36em (576px)
		* 48em (768px)
		* 62em (992px)
		* 75em (1200px)
		*/

		interpolate-size: allow-keywords;
		color-scheme: light dark;
	}
}

@layer resets {
	*,
	*::before,
	*::after {
		box-sizing: border-box;
	}

	html {
		color: var(--text-color);
		font-family: var(--body-font-family), var(--fallback-fonts);
		line-height: 1.5;
		scroll-behavior: smooth;
		scrollbar-gutter: stable;
		text-size-adjust: none;
		-webkit-tap-highlight-color: transparent;
	}

	body {
		background-color: light-dark(var(--color-gray-96), var(--color-gray-10));
		font-size: var(--body-font-size-s);
		margin: 0;
	}

	:where(input, textarea, select, button, cite, label) {
		font: inherit;
	}


	:where(button, input, label) {
		line-height: 1;
	}

	:where(input[type='text'], textarea) {
		inline-size: 100%;
	}

	:where(h1, h2, h3, h4, h5, h6) {
		font-size: var(--title-font-size, inherit);
		font-weight: var(--title-font-weight, 400);
		line-height: 1;
		margin-block: 0;
		text-wrap: balance;

		&:not(:last-child) {
			margin-block-end: 20px;
		}
	}

	:target {
		scroll-padding-block: calc(var(--header-height) - 20px);
	}

	p {
		margin-block: 0;
		text-wrap: pretty;
	
		& + p {
			margin-block-start: 21px;
		}

		& a {
			--text-color: var(--link-color);
			--underline-alpha: 1;
		}
	}

	a:not(.button) {
		color: var(--link-color, var(--text-color));
		text-decoration-color: hsl(from var(--color-underline, var(--text-color)) h s l / var(--underline-alpha, 0));
		text-decoration-skip-ink: auto;
		transition:
			color var(--transition-time) ease-in-out,
			text-decoration-color var(--transition-time) ease-in-out;
		
		&:focus-visible {
			outline: 2px solid var(--color-red);
		}

		&:hover,
		&[aria-current='page'] {
			--underline-alpha: 1;
			--link-color: var(--color-blue);
		}

		&[aria-current='page'] {
			pointer-events: none;
		}
	}

	textarea {
		resize: vertical;
	}

	button {
		border: none;
		background: none;
		color: inherit;
		cursor: pointer;
		padding: 0;

		&[disabled] {
			cursor: none;
			pointer-events: none;
		}

		&:focus-visible {
			outline: 2px solid var(--color-red);
			outline-offset: 2px;
		}
	}

	img {
		block-size: auto;
		font-style: italic;
		max-inline-size: 100%;
		vertical-align: middle;
	}

	ul[role='list'],
	ol[role='list'] {
		list-style-type: none;
		margin-block: 0;
		padding-inline-start: 0;
	}

	svg {
		block-size: auto;
		inline-size: 100%;
	}

	:where(blockquote, figure) {
		margin: 0;
	}
}

@layer global {
	/* Buttons */
	.button-container {
		display: flex;
	}

	.button {
		color: var(--button-color, var(--color-gray-96));
		background-color: var(--button-background, var(--color-blue));
		font-weight: 700;
		line-height: 1;
		padding: 1.07em 2.14em;
		text-decoration: underline;
		text-decoration-color: hsl(from var(--button-color, var(--color-gray-96)) h s l / var(--underline-alpha, 0));
		text-transform: uppercase;
		transition:
		background-color var(--transition-time) ease-in-out,
		text-decoration-color var(--transition-time) ease-in-out;

		&:hover {
			--underline-alpha: 1;
			--button-background: var(--text-color);
			--button-color: light-dark(var(--color-gray-96), var(--color-gray-10));
		}

		&:focus-visible {
			outline: 2px solid var(--color-red);
			outline-offset: 2px;
		}
	}

	.section {
		margin-block: var(--section-block-spacing, 48px);
		scroll-margin-block: calc(var(--header-height) + var(--section-block-spacing, 48px));

		@media (width >= 75em) {
			--section-block-spacing: 72px;
		}

		&[class*='bg-color'] {
			margin-block: 0;
			padding-block: var(--section-block-spacing, 48px);
		}
	}

	.bg-color-gray {
		background-color: light-dark(var(--color-gray-90), var(--color-gray-20));
	}

	/* Center Content */
	.center-content {
		--section-gutter: 15px;
		--inner-max-width: 60rem;
		--content-max-width: 75rem;
		--content-size: calc((var(--content-max-width) - var(--inner-max-width)) / 2);

		display: grid;
		grid-template-columns:
		[full-width-start] minmax(var(--section-gutter), 1fr)
		[content-start content-left-start] minmax(0, var(--content-size))
		[inner-start content-right-start]
			min(100% - var(--section-gutter) * 2, var(--inner-max-width))
		[inner-end content-left-end]
		minmax(0, var(--content-size))[content-end content-right-end]
		minmax(var(--section-gutter), 1fr) [full-width-end];
		row-gap: 47px;

		@media (width >= 48em) {
			--section-gutter: 30px;

			row-gap: 80px;
		}

		& > * {
			grid-column: content;
		}

		& .inner-content {
			grid-column: inner;
		}

		& .content-left {
			grid-column: content-left;
		}

		& .content-right {
			grid-column: content-right;
		}

		& .full-width {
			grid-column: full-width;
		}
	}

	.title-large {
		--title-font-size: var(--heading-font-size-l);
	}

	.title-medium {
		--title-font-size: var(--heading-font-size-m);
	}

	.title-small {
		--title-font-size: var(--heading-font-size-s);
	}

	.title-extra-small {
		--title-font-size: var(--heading-font-size-xs);
	}

	.copy-medium {
		font-size: var(--body-font-size-m);
	}

	.text-center {
		text-align: center;
	}

	.logo {
		display: inline-block;
		max-inline-size: 8.125rem;
	}

	.eyebrow {
		color: var(--color-blue);
		font-size: var(--body-font-size-l);
		text-transform: uppercase;
		margin-block-end: 15px;
	}

	.column-container {
		display: grid;
		gap: var(--column-gap, 25px);

		@media (width >= 48em) {
			grid-template-columns: var(--grid-columns, repeat(var(--column-count), 1fr));

			&.column-dividers .column {
				padding-block: 4px 33px;

				& + .column {
					position: relative;
	
					&::before {
						background-color: light-dark(var(--color-gray-74), var(--color-gray-40));
						content: '';
						inline-size: 2px;
						inset: 0 auto 0 calc((var(--column-gap, 25px) / 2) * -1);
						position: absolute;
					}
				}
			}
		}

		&.two-columns {
			--column-count: 2;
		}

		&.two-columns-60-40 {
			--grid-columns: 1.5fr 1fr
		}

		&.four-columns {
			--column-count: 4;
		}

		&.gap-large {
			--column-gap: 78px;
		}

		&.vertical-center {
			align-items: center;
		}
	}
}

@layer content {
	.header {
		background-color: light-dark(var(--color-gray-96), var(--color-gray-10));
		box-shadow: 0 4px 24px hsl(from var(--color-black) h s l / 15%);
		padding-block: 23px;
		position: sticky;
		top: 0;
		z-index: 1;
	}

	.header-content {
		align-items: center;
		display: flex;
		gap: 30px;
		justify-content: space-between;

		@media (width >= 75em) {
			gap: 104px;
		}
	}

	.header-button {
		background-color: var(--color-blue);
		border-radius: 50%;
		block-size: 54px;
		display: grid;
		inline-size: 54px;
		place-content: center;

		@media (width >= 48em) {
			display: none;
		}

		&[aria-expanded='true'] {
			& .header-button-lines {
				&::before,
				&::after {
					--icon-opacity: 0;
					
					transition: opacity var(--transition-time) ease-in-out, translate var(--transition-time) ease-in-out;
				}
	
				&::before {
					--icon-translate: 7px;
				}
	
				&::after {
					--icon-translate: -7px;
				}
	
				& span {
					transition: rotate var(--transition-time) ease-in-out var(--transition-time);
	
					&:first-of-type {
						--icon-rotate: -45deg;
					}
	
					&:last-of-type {
						--icon-rotate: 45deg;
					}
				}
			}
		}
	}

	.header-button-lines {
		align-content: space-between;
		block-size: 14px;
		display: grid;
		inline-size: 18px;

		&::before,
		&::after,
		& span {
			background-color: var(--color-gray-96);
			block-size: 2px;
			border-radius: 100vw;
			grid-column: 1;
			inline-size: 100%;
		}
		
		&::before,
		&::after {
			content: '';
			opacity: var(--icon-opacity, 1);
			translate: 0 var(--icon-translate, 0);
			transition: opacity var(--transition-time) ease-in-out var(--transition-time), translate var(--transition-time) ease-in-out var(--transition-time);
		}

		& span {
			grid-row: 2;
			rotate: var(--icon-rotate, 0);
			transition: rotate var(--transition-time) ease-in-out;
		}
	}
	
	.header-dropdown {
		display: none;
		flex: 1;
		
		@media (width >= 48em) {
			align-items: center;
			display: flex;

			& .button-container {
				margin-inline-start: auto;
			}
		}

		&[aria-hidden] {
			background-color: light-dark(var(--color-gray-96), var(--color-gray-10));
			box-shadow: 0 20px 24px hsl(from var(--color-black) h s l / 15%);
			flex-direction: column;
			gap: 25px;
			inset: 100% 0 auto;
			overflow: hidden;
			padding-inline: 15px;
			position: absolute;
			transition: block-size var(--transition-time) ease-in-out, display var(--transition-time) allow-discrete;

			& ul {
				padding-block-start: 25px;
			}

			& .button-container {
				padding-block-end: 25px;
			}
		}

		&[aria-hidden='true'] {
			block-size: 0;
			display: none;
		}

		&[aria-hidden='false'] {
			block-size: auto;
			display: flex;

			@starting-style {
				block-size: 0;
			}
		}
	}

	.header-links {
		font-size: var(--body-font-size-m);

		@media (width < 48em) {
			& a {
				display: block;
			}
		}

		& ul {
			display: flex;
			gap: 30px;

			@media (width < 48em) {
				flex-direction: column;
			}

			@media (width >= 75em) {
				gap: 54px;
			}
		}
	}

	.hero {
		padding-block-end: 45px;

		@media (width >= 75em) {
			padding-block-end: 100px;
		}

		& .button-container {
			margin-block-start: 15px;

			@media (width >= 75em) {
				margin-block-start: 46px;
			}
		}
	}

	.accordion {
		display: grid;
		gap: 12px;
	}

	.accordion-item {
		background-color: light-dark(var(--color-gray-90), var(--color-gray-20));
		overflow: hidden;

		&::details-content {
			block-size: var(--details-height, 0);
			transition: block-size var(--transition-time) ease-in-out, content-visibility var(--transition-time) allow-discrete;
		}

		&[open] {
			--details-height: auto;
			--icon-rotate: 180deg;
			--accordion-icon: var(--color-blue);
		}
	}

	.accordion-label {
		cursor: pointer;
		display: grid;
		grid-template-columns: 1fr 54px;

		&::-webkit-details-marker {
			display: none;
		}

		&:hover {
			--accordion-icon: var(--color-blue);
		}
	}

	.accordion-title {
		padding: 17px 22px;
		text-transform: uppercase;
	}

	.accordion-icon {
		background-color: var(--accordion-icon, light-dark(var(--color-gray-74), var(--color-gray-40)));
		color: var(--color-gray-90);
		display: grid;
		place-content: center;
		transition: background-color var(--transition-time) ease-in-out;

		& svg {
			max-inline-size: 24px;
		}
	}

	.accordion-dropdown {
		padding: 17px 22px;
	}

	.card-container {
		display: grid;
		gap: 25px;

		&.two-columns {
			@media (width >= 48em) {
				grid-template-columns: repeat(2, 1fr);
			}
		}
	}

	.card {
		background-color: light-dark(var(--color-gray-90), var(--color-gray-20));

		&:hover {
			--card-icon-background-color: var(--color-blue);
			--link-color: var(--text-color);
		}
	}

	.card-content {
		padding: 24px 28px 78px 16px;
		position: relative;
	}

	.card-icon {
		background-color: var(--card-icon-background-color, light-dark(var(--color-gray-74), var(--color-gray-40)));
		block-size: 54px;
		color: var(--color-gray-96);
		display: grid;
		inline-size: 54px;
		inset: auto 0 0 auto;
		place-content: center;
		position: absolute;
		transition: background-color var(--transition-time) ease-in-out;

		& svg {
			max-inline-size: 24px;
		}
	}

	.form {
		display: grid;
		gap: 38px;
		padding: 25px 18px 48px;

		@media (width >= 48em) {
			gap: 79px;
			padding-inline: 25px;
		}

		& form {
			display: grid;
			gap: 24px;
		}

		& :where(input, textarea) {
			background-color: light-dark(var(--color-gray-96), var(--color-gray-10));
			border: none;
			color: light-dark(var(--color-gray-40), var(--color-gray-96));
			padding: 14px 18px;

			&::placeholder {
				color: light-dark(var(--color-gray-40), var(--color-gray-96));
			}
		}
	}

	.footer {
		padding-block: 48px;
	}

	.footer-logo {
		align-items: end;
		display: flex;
		gap: 12px;
		line-height: 1;

		& p {
			font-size: var(--size-12);
		}
	}

	.footer-columns {
		display: grid;
		gap: 24px;
		justify-content: start;

		@media (width >= 48em) {
			grid-auto-flow: column;
		}

		& p {
			font-size: var(--size-16);
			font-weight: 700;
		}

		& ul {
			margin-block: 15px 0;
			padding-inline-start: 15px;
		}
	}
}

@layer overrides {
	.sr-only {
		clip: rect(0 0 0 0); 
		clip-path: inset(50%);
		height: 1px;
		overflow: hidden;
		position: absolute;
		white-space: nowrap; 
		width: 1px;
	}

	.hide-mobile {
		@media (width < 48em) {
			display: none;
		}
	}
}