@layer reset, root, base, theme, layout, components, utils;

/* /tailwindcss/preflight.css */

/* https://github.com/tailwindlabs/tailwindcss/blob/main/packages/tailwindcss/preflight.css */

/*
	1. Prevent padding and border from affecting element width: (https://github.com/mozdevs/cssremedy/issues/4)
	2. Remove default margins and padding
	3. Reset all borders.
*/

@layer reset {
	*,
	::after,
	::before,
	::backdrop,
	::file-selector-button {
		box-sizing: border-box; /* 1 */
		margin: 0; /* 2 */
		padding: 0; /* 2 */
		border: 0 solid; /* 3 */
	}

	/*
	1. Use a consistent sensible line-height in all browsers.
	2. Prevent adjustments of font size after orientation changes in iOS.
	3. Use a more readable tab size.
	4. Use the user's configured `sans` font-family by default.
	5. Use the user's configured `sans` font-feature-settings by default.
	6. Use the user's configured `sans` font-variation-settings by default.
	7. Disable tap highlights on iOS.
*/

	html,
	:host {
		line-height: 1.5; /* 1 */
		-webkit-text-size-adjust: 100%; /* 2 */
		-moz-tab-size: 4;
		  -o-tab-size: 4;
		     tab-size: 4; /* 3 */
		font-family: sans-serif; /* 4 */
		font-feature-settings: normal; /* 5 */
		font-variation-settings: normal; /* 6 */
		-webkit-tap-highlight-color: transparent; /* 7 */
	}

	/*
	1. Add the correct height in Firefox.
	2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
	3. Reset the default border style to a 1px solid border.
*/

	hr {
		height: 0; /* 1 */
		color: inherit; /* 2 */
		border-top-width: 1px; /* 3 */
	}

	/*
	Add the correct text decoration in Chrome, Edge, and Safari.
*/

	abbr:where([title]) {
		-webkit-text-decoration: underline dotted;
		text-decoration: underline dotted;
	}

	/*
	Remove the default font size and weight for headings.
*/

	h1,
	h2,
	h3,
	h4,
	h5,
	h6 {
		font-size: inherit;
		font-weight: inherit;
	}

	/*
	Reset links to optimize for opt-in styling instead of opt-out.
*/

	a {
		color: inherit;
		-webkit-text-decoration: inherit;
		text-decoration: inherit;
	}

	/*
	Add the correct font weight in Edge and Safari.
*/

	b,
	strong {
		font-weight: bolder;
	}

	/*
	1. Use the user's configured `mono` font-family by default.
	2. Use the user's configured `mono` font-feature-settings by default.
	3. Use the user's configured `mono` font-variation-settings by default.
	4. Correct the odd `em` font sizing in all browsers.
*/

	code,
	kbd,
	samp,
	pre {
		font-family: monospace; /* 1 */
		font-feature-settings: normal; /* 2 */
		font-variation-settings: normal; /* 3 */
		font-size: 1em; /* 4 */
	}

	/*
	Add the correct font size in all browsers.
*/

	small {
		font-size: 80%;
	}

	/*
	Prevent `sub` and `sup` elements from affecting the line height in all browsers.
*/

	sub,
	sup {
		font-size: 75%;
		line-height: 0;
		position: relative;
		vertical-align: baseline;
	}

	sub {
		bottom: -0.25em;
	}

	sup {
		top: -0.5em;
	}

	/*
	1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
	2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
	3. Remove gaps between table borders by default.
*/

	table {
		text-indent: 0; /* 1 */
		border-color: inherit; /* 2 */
		border-collapse: collapse; /* 3 */
	}

	/*
	Use the modern Firefox focus style for all focusable elements.
*/

	:-moz-focusring {
		outline: auto;
	}

	/*
	Add the correct vertical alignment in Chrome and Firefox.
*/

	progress {
		vertical-align: baseline;
	}

	/*
	Add the correct display in Chrome and Safari.
*/

	summary {
		display: list-item;
	}

	/*
	Make lists unstyled by default.
*/

	ol,
	ul,
	menu {
		list-style: none;
	}

	/*
	1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)
	2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)
			This can trigger a poorly considered lint error in some tools but is included by design.
*/

	img,
	svg,
	video,
	canvas,
	audio,
	iframe,
	embed,
	object {
		display: block; /* 1 */
		vertical-align: middle; /* 2 */
	}

	/*
	Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)
*/

	img,
	video {
		max-width: 100%;
		height: auto;
	}

	/*
	1. Inherit font styles in all browsers.
	2. Remove border radius in all browsers.
	3. Remove background color in all browsers.
	4. Ensure consistent opacity for disabled states in all browsers.
*/

	button,
	input,
	select,
	optgroup,
	textarea,
	::file-selector-button {
		font: inherit; /* 1 */
		font-feature-settings: inherit; /* 1 */
		font-variation-settings: inherit; /* 1 */
		letter-spacing: inherit; /* 1 */
		color: inherit; /* 1 */
		border-radius: 0; /* 2 */
		background-color: transparent; /* 3 */
		opacity: 1; /* 4 */
	}

	/*
	Restore default font weight.
*/

	:where(select:is([multiple], [size])) optgroup {
		font-weight: bolder;
	}

	/*
	Restore indentation.
*/

	:where(select:is([multiple], [size])) optgroup option {
		padding-inline-start: 20px;
	}

	/*
	Restore space after button.
*/

	::file-selector-button {
		margin-inline-end: 4px;
	}

	/*
	Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
*/

	::-moz-placeholder {
		opacity: 1;
	}

	::placeholder {
		opacity: 1;
	}

	/*
	Set the default placeholder color to a semi-transparent version of the current text color in browsers that do not
	crash when using `color-mix(…)` with `currentcolor`. (https://github.com/tailwindlabs/tailwindcss/issues/17194)
*/

	@supports (not (-webkit-appearance: -apple-pay-button)) /* Not Safari */ or
		(contain-intrinsic-size: 1px) /* Safari 17+ */ {
		::-moz-placeholder {
			color: color-mix(in oklab, currentcolor 50%, transparent);
		}
		::placeholder {
			color: color-mix(in oklab, currentcolor 50%, transparent);
		}
	}

	/*
	Prevent resizing textareas horizontally by default.
*/

	textarea {
		resize: vertical;
	}

	/*
	Remove the inner padding in Chrome and Safari on macOS.
*/

	::-webkit-search-decoration {
		-webkit-appearance: none;
	}

	/*
	1. Ensure date/time inputs have the same height when empty in iOS Safari.
	2. Ensure text alignment can be changed on date/time inputs in iOS Safari.
*/

	::-webkit-date-and-time-value {
		min-height: 1lh; /* 1 */
		text-align: inherit; /* 2 */
	}

	/*
	Prevent height from changing on date/time inputs in macOS Safari when the input is set to `display: block`.
*/

	::-webkit-datetime-edit {
		display: inline-flex;
	}

	/*
	Remove excess padding from pseudo-elements in date/time inputs to ensure consistent height across browsers.
*/

	::-webkit-datetime-edit-fields-wrapper {
		padding: 0;
	}

	::-webkit-datetime-edit,
	::-webkit-datetime-edit-year-field,
	::-webkit-datetime-edit-month-field,
	::-webkit-datetime-edit-day-field,
	::-webkit-datetime-edit-hour-field,
	::-webkit-datetime-edit-minute-field,
	::-webkit-datetime-edit-second-field,
	::-webkit-datetime-edit-millisecond-field,
	::-webkit-datetime-edit-meridiem-field {
		padding-block: 0;
	}

	/*
	Center dropdown marker shown on inputs with paired `<datalist>`s in Chrome. (https://github.com/tailwindlabs/tailwindcss/issues/18499)
*/

	::-webkit-calendar-picker-indicator {
		line-height: 1;
	}

	/*
	Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)
*/

	:-moz-ui-invalid {
		box-shadow: none;
	}

	/*
	Correct the inability to style the border radius in iOS Safari.
*/

	button,
	input:where([type='button'], [type='reset'], [type='submit']),
	::file-selector-button {
		-webkit-appearance: button;
		   -moz-appearance: button;
		        appearance: button;
	}

	/*
	Correct the cursor style of increment and decrement buttons in Safari.
*/

	::-webkit-inner-spin-button,
	::-webkit-outer-spin-button {
		height: auto;
	}

	/*
	Make elements with the HTML hidden attribute stay hidden by default.
*/

	[hidden]:where(:not([hidden='until-found'])) {
		display: none !important;
	}
}

@layer base {
	html {
		background: var(--color-carbon);
		scroll-timeline: --page-scroll block;

		@media (prefers-reduced-motion: no-preference) {
			scroll-behavior: smooth;
		}
	}

	body {
		color: var(--color-text);
		background: var(--color-background);
		font-family: var(--font-sans);
		font-size: var(--font-size-body);
		line-height: var(--line-height-none);
		letter-spacing: var(--letter-spacing-3);
		overflow-x: hidden;

		/* https://tinyurl.com/font-smoothing */
		-webkit-font-smoothing: antialiased;
	}

	:target {
		scroll-margin-top: var(--gutter);
	}

	::-moz-selection {
		background: oklch(from currentColor l c h / 0.2);
	}

	::selection {
		background: oklch(from currentColor l c h / 0.2);
	}

	:focus-visible {
		outline: 2px solid currentColor;
		outline-offset: 4px;
	}
}

@layer root {
	@font-face {
		font-family: 'SuisseIntl';
		src: url('/fonts/SuisseIntl-Regular.woff2') format('woff2');
		font-weight: 400;
		font-style: normal;
		font-display: swap;
	}

	@font-face {
		font-family: 'SuisseIntl';
		src: url('/fonts/SuisseIntl-RegularIt.woff2') format('woff2');
		font-weight: 400;
		font-style: italic;
		font-display: swap;
	}

	@font-face {
		font-family: 'SuisseIntl';
		src: url('/fonts/SuisseIntl-Book.woff2') format('woff2');
		font-weight: 450;
		font-style: normal;
		font-display: swap;
	}

	@font-face {
		font-family: 'SuisseIntl';
		src: url('/fonts/SuisseIntl-BookIt.woff2') format('woff2');
		font-weight: 450;
		font-style: italic;
		font-display: swap;
	}

	@font-face {
		font-family: 'SuisseIntl';
		src: url('/fonts/SuisseIntl-Medium.woff2') format('woff2');
		font-weight: 500;
		font-style: normal;
		font-display: swap;
	}

	@font-face {
		font-family: 'SuisseIntl';
		src: url('/fonts/SuisseIntl-MediumIt.woff2') format('woff2');
		font-weight: 500;
		font-style: italic;
		font-display: swap;
	}

	@font-face {
		font-family: 'SuisseIntl';
		src: url('/fonts/SuisseIntl-Bold.woff2') format('woff2');
		font-weight: 700;
		font-style: normal;
		font-display: swap;
	}

	@font-face {
		font-family: 'SuisseIntl';
		src: url('/fonts/SuisseIntl-BoldIt.woff2') format('woff2');
		font-weight: 700;
		font-style: italic;
		font-display: swap;
	}

	@font-face {
		font-family: 'SuisseIntlMono';
		src: url('/fonts/SuisseIntlMono-Regular-WebS.woff2') format('woff2');
		font-weight: 400;
		font-display: swap;
	}
}

@layer root {
	:root {
		--color-white: oklch(100% 0 0);
		--color-carbon: oklch(16.376% 0.00002 271.152);
		--color-cosmos: oklch(45.215% 0.22811 282.214);
		--color-nebula: oklch(42.997% 0.11979 289.599);
		--color-dusk: oklch(34.796% 0.04009 294.177);
		--color-dawn: oklch(60.208% 0.0386 299.813);
		--color-sun: oklch(78.508% 0.15351 102.676);
		--color-soil: oklch(31.607% 0.01046 99.247);
		--color-silt: oklch(54.239% 0.06775 102.153);
		--color-mint: oklch(86.937% 0.0091 180.187);
		--color-lavender: oklch(85.955% 0.01279 301.039);
		--color-sand: oklch(87.385% 0.01074 106.769);
		--color-brick: oklch(86.182% 0.00715 38.842);

		--color-accent: var(--color-cosmos);
		--color-text: var(--color-white);
		--color-text-secondary: var(--color-dawn);
		--color-background: var(--color-accent);
		--color-text-primary: var(--color-carbon);
		--color-background-secondary: var(--color-dawn);
	}
}

@layer utils {
	.color-white {
		color: var(--color-white);
	}

	.color-carbon {
		color: var(--color-carbon);
	}

	.color-cosmos {
		color: var(--color-cosmos);
	}

	.color-nebula {
		color: var(--color-nebula);
	}

	.color-dusk {
		color: var(--color-dusk);
	}

	.color-dawn {
		color: var(--color-dawn);
	}

	.color-sun {
		color: var(--color-sun);
	}

	.color-soil {
		color: var(--color-soil);
	}

	.color-silt {
		color: var(--color-silt);
	}

	.color-mint {
		color: var(--color-mint);
	}

	.color-lavender {
		color: var(--color-lavender);
	}

	.color-sand {
		color: var(--color-sand);
	}

	.color-brick {
		color: var(--color-brick);
	}
}

@layer root {
	:root {
		--default-font: 'SuisseIntl', system-ui, sans-serif;
		--default-mono-font: 'SuisseIntlMono', monospace;

		--font-sans: var(--default-font);
		--font-mono: var(--default-mono-font);

		--font-size-hero: clamp(3rem, 8vw, 10rem);
		--font-size-heading: clamp(2.3rem, 4vw, 4.5rem);

		--font-size-h1: clamp(2.5rem, 5vw, 5rem);
		--font-size-h2: clamp(2.3rem, 4vw, 4.5rem);
		--font-size-h3: clamp(2rem, 3vw, 4rem);
		--font-size-h4: clamp(1.8rem, 2vw, 2rem);
		--font-size-h5: clamp(0.6rem, 0.8vw, 0.8rem);

		--font-size-body: clamp(1.1rem, 1.25vw, 1.8rem);
		--font-size-body-md: clamp(0.95rem, 1.2vw, 1.6rem);
		--font-size-body-sm: clamp(0.75rem, 0.875vw, 1.5rem);
		--font-size-body-xs: clamp(0.7rem, 0.7vw, 1.5rem);

		--font-weight-book: 450;
		--font-weight-medium: 500;
		--font-weight-bold: 600;

		--letter-spacing-5: -0.05em;
		--letter-spacing-4: -0.04em;
		--letter-spacing-3: -0.03em;
		--letter-spacing-2: -0.02em;
		--letter-spacing-1: -0.01em;
		--letter-spacing-loose: 0.08em;

		--vertical-spacing: var(--spacing-6);

		--line-height-none: 1;
		--line-height-tight: 1.2;
		--line-height-relaxed: 1.4;
		--line-height-loose: 1.8;
	}
}

@layer utils {
	.font-hero {
		font-size: var(--font-size-hero);
		font-weight: var(--font-weight-book);
		letter-spacing: var(--letter-spacing-5);
		line-height: var(--line-height-none);
		text-wrap-style: balance;

		@media (width > 600px) {
			text-wrap-style: pretty;
		}
	}

	.font-heading {
		font-size: var(--font-size-heading);
		font-weight: var(--font-weight-book);
		letter-spacing: var(--letter-spacing-4);
		line-height: var(--line-height-none);
	}

	.font-weight-md {
		font-weight: var(--font-weight-medium);
	}

	.font-weight-bold {
		font-weight: var(--font-weight-bold);
	}

	.hero-header {
		padding-inline: var(--gutter);

		> * {
			max-width: 20ch;
		}
	}

	.h1,
	.h2,
	.h3,
	.h4,
	.h5 {
		text-wrap-style: pretty;
	}

	.h1 {
		font-size: var(--font-size-h1);
		letter-spacing: var(--letter-spacing-2);
		line-height: var(--line-height-none);
	}

	.h2 {
		font-size: var(--font-size-h2);
		font-weight: var(--font-weight-book);
		letter-spacing: var(--letter-spacing-1);
		line-height: var(--line-height-none);
	}

	.h3 {
		font-size: var(--font-size-h3);
		font-weight: var(--font-weight-book);
		letter-spacing: var(--letter-spacing-4);
		line-height: var(--line-height-none);
	}

	.h4 {
		font-size: var(--font-size-h4);
		line-height: var(--line-height-none);
	}

	.h5 {
		font-family: var(--font-mono);
		font-size: var(--font-size-h5);
		letter-spacing: var(--letter-spacing-loose);
		line-height: var(--line-height-none);
		text-transform: uppercase;
	}

	.h6 {
		font-size: var(--font-size-body-sm);
		font-weight: var(--font-weight-medium);
		line-height: var(--line-height-relaxed);
	}

	.body-md {
		font-size: var(--font-size-body-md);
		line-height: var(--line-height-relaxed);
	}

	.body-sm {
		font-size: var(--font-size-body-sm);
		line-height: var(--line-height-relaxed);
	}

	.body-xs {
		font-size: var(--font-size-body-xs);
		line-height: var(--line-height-relaxed);
	}

	.text-primary {
		color: var(--color-text-primary);
	}

	.text-secondary {
		color: var(--color-text-secondary);
	}
}

@layer utils {
	.prose {
		font-size: var(--font-size-body-md);

		h1 {
			font-size: var(--font-size-h3);
			letter-spacing: var(--letter-spacing-2);
			line-height: var(--line-height-none);
		}

		h2,
		h3,
		h4,
		h5,
		h6 {
			font-size: var(--font-size-h4);
			font-weight: var(--font-weight-book);
			letter-spacing: var(--letter-spacing-4);
			line-height: var(--line-height-none);
			margin-block-end: var(--vertical-spacing);
			margin-block-start: calc(var(--vertical-spacing) * 2);
		}

		> p {
			margin-block-end: var(--vertical-spacing);
		}

		p {
			line-height: var(--line-height-relaxed);
		}

		a {
			font-size: inherit;
			text-decoration: underline;
			text-decoration-thickness: 1px;
			text-underline-offset: 2px;
		}
	}
}

@layer root {
	:root {
		--spacing: 0.25rem;
		--section-gap: 10vw;

		--spacing-1: calc(var(--spacing) * 1); /* 0.25rem / 4px */
		--spacing-2: calc(var(--spacing) * 2); /* 0.5rem / 8px */
		--spacing-3: calc(var(--spacing) * 3); /* 0.75rem / 12px */
		--spacing-4: calc(var(--spacing) * 4); /* 1rem / 16px */
		--spacing-5: calc(var(--spacing) * 5); /* 1.25rem / 20px */
		--spacing-6: calc(var(--spacing) * 6); /* 1.5rem / 24px */
		--spacing-7: calc(var(--spacing) * 7); /* 1.75rem / 28px */
		--spacing-8: calc(var(--spacing) * 8); /* 2rem / 32px */
		--spacing-9: calc(var(--spacing) * 9); /* 2.25rem / 36px */
		--spacing-10: calc(var(--spacing) * 10); /* 2.5rem / 40px */
		--spacing-11: calc(var(--spacing) * 11); /* 2.75rem / 44px */
		--spacing-12: calc(var(--spacing) * 12); /* 3rem / 48px */
		--spacing-13: calc(var(--spacing) * 13); /* 3.25rem / 52px */
		--spacing-14: calc(var(--spacing) * 14); /* 3.5rem / 56px */
		--spacing-15: calc(var(--spacing) * 15); /* 3.75rem / 60px */
		--spacing-16: calc(var(--spacing) * 16); /* 4rem / 64px */
		--spacing-17: calc(var(--spacing) * 17); /* 4.25rem / 68px */
		--spacing-18: calc(var(--spacing) * 18); /* 4.5rem / 72px */
		--spacing-19: calc(var(--spacing) * 19); /* 4.75rem / 76px */
		--spacing-20: calc(var(--spacing) * 20); /* 5rem / 80px */
	}
}

@layer utils {
	.p-gutter {
		padding: var(--gutter);
	}

	.pt-gutter {
		padding-top: var(--gutter);
	}

	.pb-gutter {
		padding-bottom: var(--gutter);
	}

	.px-gutter {
		padding-left: var(--gutter);
		padding-right: var(--gutter);
	}

	.py-section {
		padding-top: var(--section-gap);
		padding-bottom: var(--section-gap);
	}

	.px-section {
		padding-left: var(--section-gap);
		padding-right: var(--section-gap);
	}

	.my-section {
		margin-top: var(--section-gap);
		margin-bottom: var(--section-gap);
	}

	.mb-section {
		margin-bottom: var(--section-gap);
	}
}

@layer root {
	:root {
		--total-cols: 12;
		--sidebar-cols: 3;
		--content-cols: calc(var(--total-cols) - var(--sidebar-cols));

		--gap: var(--spacing-5);
		--gutter: max(var(--spacing-4), 3vw);
	}
}

@layer layout {
	.grid-layout {
		display: grid;
		row-gap: var(--gap);
	}

	@media (width > 768px) {
		.grid-layout {
			display: grid;
			-moz-column-gap: var(--gap);
			     column-gap: var(--gap);
			grid-template-columns: repeat(var(--total-cols), 1fr);
		}
	}
}

@layer utilities {
	.grid-layout-subgrid {
		display: grid;
		grid-template-columns: subgrid;
	}

	.grid-gutter {
		padding-inline: var(--gutter);
	}

	.grid-gutter-negate {
		margin-inline: calc(var(--gutter) * -1);
	}

	@media (width > 768px) {
		.grid-ascii-logo {
			grid-column: 1 / span 6;
		}

		.grid-hero-header {
			grid-column: 8 / -1;
		}

		.grid-faq-sidebar {
			grid-column: 1 / span 3;
		}

		.grid-faq-content {
			grid-column: 5 / span 5;
		}

		.grid-press-content {
			grid-column: 4 / span 6;
		}

		.grid-span-full {
			grid-column: 1 / -1;
		}

		.grid-span-half {
			grid-column: span 6;
		}

		.grid-span-2 {
			grid-column: span 2;
		}

		.grid-span-3 {
			grid-column: span 3;
		}

		.grid-span-4 {
			grid-column: span 4;
		}
	}
}

@layer root {
	@view-transition {
		navigation: auto;
	}

	:root {
		--duration-fast: 150ms;
		--duration-medium: 300ms;
		--duration-slow: 500ms;
		--duration-glacial: 1s;

		--ease-in-out-cubic: cubic-bezier(0.65, 0.05, 0.36, 1);
		--ease-in-out-quadratic: cubic-bezier(0.77, 0, 0.175, 1);
	}

	@keyframes scale-in-1 {
		from {
			scale: 0.8;
			opacity: 0.5;
			border-radius: var(--radius-lg);
		}

		to {
			scale: 1;
			opacity: 1;
			border-radius: 0;
		}
	}

	@keyframes scale-in-2 {
		from {
			scale: 0.8;
			border-radius: var(--radius-lg);
		}

		to {
			scale: 1;
			border-radius: 0;
		}
	}

	@keyframes fade-in-out {
		0% {
			opacity: 0;
		}
		30% {
			opacity: 1;
		}
		70% {
			opacity: 1;
		}
		100% {
			opacity: 0;
		}
	}

	@keyframes fade-in {
		from {
			opacity: 0;
		}
		to {
			opacity: 1;
		}
	}

	@keyframes fade-out {
		to {
			opacity: 0;
		}
	}

	@keyframes slide-in-up {
		from {
			opacity: 0;
			transform: translateY(var(--spacing-6));
		}
		to {
			opacity: 1;
			transform: translateY(0);
		}
	}
}

@layer utils {
	@media (prefers-reduced-motion: no-preference) {
		.fade-in {
			animation: fade-in var(--duration-medium) var(--ease-in-out-cubic);
		}

		.slide-in-up {
			animation: slide-in-up var(--duration-medium) var(--ease-in-out-cubic);
		}

		@media (width > 768px) {
			@supports (animation-timeline: view()) {
				.scroll-scale-in-1 {
					animation-timeline: view();
					animation-name: scale-in-1;
					animation-fill-mode: both;
					animation-timing-function: var(--ease-in-out-cubic);
					animation-range: entry 20% cover 15%;
				}

				.scroll-scale-in-2 {
					animation-timeline: view();
					animation-name: scale-in-2;
					animation-fill-mode: both;
					animation-timing-function: var(--ease-in-out-cubic);
					animation-range: entry 20% cover 50%;
				}

				.scroll-fade-in-out {
					animation-timeline: view();
					animation-name: fade-in-out;
					animation-fill-mode: both;
					animation-timing-function: var(--ease-in-out-cubic);
					animation-range: entry 80% exit 50%;
				}

				.scroll-fade-in {
					animation-timeline: view();
					animation-name: fade-in;
					animation-fill-mode: both;
					animation-timing-function: var(--ease-in-out-cubic);
					animation-range: entry 80% cover 50%;
				}

				.scroll-fade-in-2 {
					animation-timeline: view();
					animation-name: fade-in;
					animation-fill-mode: both;
					animation-timing-function: var(--ease-in-out-cubic);
					animation-range: entry 70%;
				}

				.scroll-fade-out {
					animation-timeline: view();
					animation-name: fade-out;
					animation-fill-mode: both;
					animation-timing-function: var(--ease-in-out-cubic);
					animation-range: contain 90% exit 10%;
				}
			}
		}
	}
}

@layer theme {
	[class*='theme-'] {
		transition-property: color, background;
		transition-duration: var(--duration-slow);
		transition-timing-function: var(--ease-in-out-cubic);
	}

	.theme-accent {
		--color-background: var(--color-accent);
	}

	.theme-carbon {
		--color-background: var(--color-carbon);
	}

	.theme-sun {
		--color-text: var(--color-carbon);
		--color-text-secondary: hsl(from var(--color-sun) h s 30%);
		--color-background: var(--color-sun);
	}

	.theme-white {
		--color-text: var(--color-carbon);
		--color-background: var(--color-white);
	}

	.theme-current {
		color: var(--color-text);
		background: var(--color-background);
	}
}

@layer components {
	.sticky-wrap {
		top: var(--nav-height);
		position: sticky;
	}

	.video-wrap {
		position: relative;
		overflow: hidden;
		height: calc(var(--mobile-screen-height) - var(--nav-height));
		width: 100%;

		@media (width > 768px) {
			height: calc(100vh - var(--nav-height));
		}
	}

	video,
	mux-video {
		width: 100%;
		height: 100%;
		-o-object-fit: cover;
		   object-fit: cover;
	}
}

@layer components {
	.scroll-overlay {
		height: var(--scroll-height);
		color: var(--color-carbon);

		position: absolute;
		width: 100%;
		z-index: 1;
		display: grid;
		align-items: center;
	}

	.scroll-content-pin-wrapper {
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.scroll-content {
		isolation: isolate;
		text-align: center;
		pointer-events: none;
		-webkit-user-select: none;
		   -moz-user-select: none;
		        user-select: none;

		@media (width > 768px) {
			display: flex;
			justify-content: space-between;
			align-items: center;
			width: 100%;
		}

		.center {
			margin-inline: auto;
			max-width: 30ch;
			text-wrap-style: pretty;
		}
	}
}

@layer components {
	.button {
		display: inline-block;
		padding: var(--spacing-4) var(--spacing-6);
		border-radius: var(--round);
		text-box: trim-both cap alphabetic;
		white-space: nowrap;
		cursor: pointer;
	}

	.button--fill {
		transition-property: filter;
		background: var(--color-sand);
		transition-duration: var(--duration-fast);
		transition-timing-function: var(--ease-in-out-quadratic);

		@media (hover: hover) {
			&:hover {
				filter: brightness(0.9);
			}
		}
	}

	.button--outline {
		outline: 1px solid;
		transition-property: background, color;
		transition-duration: var(--duration-fast);
		transition-timing-function: var(--ease-in-out-quadratic);

		@media (hover: hover) {
			&:hover {
				background: var(--color-white);
				color: var(--color-accent);
			}
		}
	}

	.button-large {
		padding: var(--spacing-7);
		color: var(--color-white);
		background: var(--color-carbon);
		border-radius: var(--radius);
	}
}

@layer components {
	.label {
		display: inline-block;
		height: -moz-fit-content;
		height: fit-content;
		width: -moz-fit-content;
		width: fit-content;
		border: 1px solid;
		padding: var(--spacing-2);
		color: var(--color-accent);
		text-box: trim-both cap alphabetic;
	}
}

@layer root {
	:root {
		--nav-height: 64px;
		--radius: var(--spacing-4);
		--radius-lg: var(--spacing-8);
		--round: calc(infinity * 1px);

		--mobile-screen-height: 844px;
	}
}

@layer utils {
	.text-align-center {
		text-align: center;
	}

	.align-items-end {
		align-items: end;
	}

	.strike-through {
		text-decoration-line: underline;
		text-underline-offset: -0.6ex;
		text-decoration-thickness: 4px;
		-webkit-text-decoration-skip-ink: none;
		        text-decoration-skip-ink: none;
	}

	.rounded {
		border-radius: var(--radius);

		@supports (corner-shape: squircle) {
			corner-shape: squircle;
			border-radius: calc(var(--radius) * 2);
		}
	}

	.section-counter-increment {
		counter-increment: section-counter;
	}

	.trim-both-cap-alpha {
		text-box: trim-both cap alphabetic;
	}

	.trim-end-cap-alpha {
		text-box: trim-end cap alphabetic;
	}

	.embedded-content {
		max-width: 1200px;
		min-height: 100vh;
		margin-inline: auto;

		body:has(&) {
			color: var(--color-carbon);
			background: var(--color-white);
		}
	}
}

/** { outline: 1px solid red; }*/
.progress[data-astro-cid-zda6s4wl]{container-type:inline-size;--tick-size: 2px;--tap-area: calc(var(--tick-size) * 10);--max-width: 400px;flex:1;max-width:var(--max-width);position:relative}.track[data-astro-cid-zda6s4wl]{display:flex;align-items:center;justify-content:space-between;width:100%;@container (width < 250px){display:none}}.tick[data-astro-cid-zda6s4wl]{display:block;block-size:var(--tick-size);inline-size:var(--tick-size);background:var(--color-brick);transform:scaleY(var(--scale));transition-property:background,transform;transition-duration:var(--duration-fast);transition-timing-function:var(--ease-in-out-quadratic)}.tick[data-astro-cid-zda6s4wl].current{--scale: 8;background:var(--color-carbon)}.tick[data-astro-cid-zda6s4wl]:has(~ .tick.current){background:var(--color-carbon)}.tick[data-astro-cid-zda6s4wl]:has(a){--scale: 3;display:flex;align-items:center;justify-content:center;@media (hover: hover){&[data-astro-cid-zda6s4wl]:hover{background:var(--color-accent)}}a {cursor: pointer; display: grid; place-content: center; &::before {content: ""; block-size: var(--tap-area); inline-size: var(--tap-area);}}}nav[data-astro-cid-dmqpwcec]{position:fixed;top:0;left:0;width:100%;z-index:100;background:var(--color-white);color:var(--color-carbon);height:var(--nav-height);display:flex;justify-content:space-between;align-items:center;max-width:100vw;padding-inline:var(--gutter);@media (width > 768px){--min-width: 200px;gap:var(--spacing-8)}}body:has(.embedded-content){nav {background: oklch(from var(--color-brick) 96% c h);}}nav[data-astro-cid-dmqpwcec].hidden{opacity:0;transform:translateY(calc(var(--nav-height) * -1));visibility:hidden}nav[data-astro-cid-dmqpwcec].visible{opacity:1;transform:translateY(0);visibility:visible;transition-property:opacity,transform;transition-duration:var(--duration-medium);transition-timing-function:var(--ease-in-out-quadratic)}.logotype[data-astro-cid-dmqpwcec]{display:flex;align-items:start;min-width:var(--min-width)}.logotype-svg[data-astro-cid-dmqpwcec]{height:1rem;width:auto}.links[data-astro-cid-dmqpwcec]{display:flex;justify-content:end;align-items:center;min-width:var(--min-width);gap:var(--spacing-4);@media (width > 768px){gap:var(--spacing-8)}}.footer[data-astro-cid-sz7xmlte]{color:var(--color-white);background:var(--color-carbon);padding-top:var(--gutter)}.ctas[data-astro-cid-sz7xmlte]{display:grid;row-gap:var(--spacing-2);margin-bottom:10rem}.cta-link[data-astro-cid-sz7xmlte]{--arrow-width: 1em;display:flex;justify-content:space-between;padding-right:calc(var(--arrow-width) * 2);text-wrap-style:pretty;position:relative;&[data-astro-cid-sz7xmlte]::before,&[data-astro-cid-sz7xmlte]::after{position:absolute;right:var(--spacing-5);display:grid;place-content:center;content:"→";width:var(--arrow-width);transition-property:opacity,translate;transition-duration:var(--duration-fast);transition-timing-function:var(--ease-in-out-quadratic)}@media (hover: hover){&[data-astro-cid-sz7xmlte]::before{opacity:0;translate:calc(var(--arrow-width) * -1) 0}&[data-astro-cid-sz7xmlte]:hover{&[data-astro-cid-sz7xmlte]::before{opacity:1;translate:0 0}&[data-astro-cid-sz7xmlte]::after{opacity:0;translate:var(--arrow-width) 0}}}}.footer-links[data-astro-cid-sz7xmlte]{font-family:var(--font-mono)}.logo-link[data-astro-cid-sz7xmlte]{display:inline-block;max-width:var(--spacing-8);margin-bottom:var(--spacing-10)}@media (hover: hover){.logomark-svg[data-astro-cid-sz7xmlte]{transition-property:fill,scale;transition-duration:var(--duration-medium);transition-timing-function:ease-in-out,var(--ease-in-out-quadratic);.logo-link:hover & {fill: var(--color-accent); scale: 1.2;}}}.footer-copyright[data-astro-cid-sz7xmlte]{margin-top:var(--spacing-6)}