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

@font-face {
	font-family: 'Inter Tight';
	src: url('../fonts/inter-tight-var.woff2') format('woff2');
	font-weight: 100 900;
	font-style: normal;
	font-display: swap;
}

:root {
	--font-heading: "Inter Tight", Inter, system-ui, sans-serif;
	--font-body: Inter, system-ui, -apple-system, sans-serif;
	--font-meta: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

	--ink: #221c2e;
	--ink-soft: #5d5669;
	--ink-faint: #8b8794;
	--ink-deep: #15171c;
	--paper: #ffffff;
	--paper-tint: #f6f4f8;
	--night: #100d16;
	--accent: #ff9a52;
	--kicker: #b85c00;
	--line: #e6e2ec;

	--radius: 12px;
	--radius-lg: 16px;
	--hairline: 1px;
	--tap-target: 44px;

	--gutter: 24px;
	--content-max: 1188px;
	--measure: 704px;
	--section-pad: clamp(57.6px, 7vw, 88px);

	--body-size: 16px;
	--body-lh: 24px;

	--heading-family: var(--font-heading);
	--heading-size: 24px;
	--heading-lh: 1.15;
	--heading-weight: 800;
	--heading-track: 0.01em;

	--eyebrow-size: 13px;
	--eyebrow-lh: 21.45px;
	--eyebrow-track: 1.82px;

	--btn-h: 46px;
	--btn-pad: 0 18px;
	--btn-size: 13.5px;

	--grid-gap: 12.8px;
	--card-name: 17px;
	--card-name-weight: 800;

	--header-height: 68px;
}

@media (min-width: 40em) {
	:root {
		--body-size: 17.28px;
		--body-lh: 29.376px;
		--heading-size: clamp(30.4px, 3.6vw, 43.2px);
		--heading-lh: 1.08;
		--eyebrow-size: 12.48px;
		--eyebrow-lh: 20.592px;
		--eyebrow-track: 1.7472px;
		--btn-h: 56px;
		--btn-pad: 13.6px 24.8px;
		--btn-size: 16px;
		--grid-gap: 20.8px;
		--card-name: clamp(23.2px, 2.1vw, 26.88px);
	}
}

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

body {
	margin: 0;
	font-family: var(--font-body);
	font-size: var(--body-size);
	line-height: var(--body-lh);
	color: var(--ink);
	background: var(--paper);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

img { display: block; max-width: 100%; height: auto; }

a { color: inherit; }

h1, h2, h3 {
	margin: 0;
	font-family: var(--heading-family);
	font-weight: var(--heading-weight);
	letter-spacing: var(--heading-track);
	color: var(--ink);
}

h2 {
	font-size: var(--heading-size);
	line-height: var(--heading-lh);
	margin: 0 0 14.4px;
	text-align: center;
	text-wrap: balance;
}

p { margin: 0 0 16px; }

.section { padding-block: var(--section-pad); }

.wrap {
	max-width: var(--content-max);
	margin-inline: auto;
	padding-inline: var(--gutter);
	text-align: center;
}

.wrap > p { max-width: var(--measure); margin-inline: auto; color: var(--ink-soft); }
.wrap > *:last-child { margin-bottom: 0; }

.section--white { background: var(--paper); }
.section--dark { background: var(--night); }
.section--dark h2 { color: #f2eef8; }
.section--dark .wrap > p { color: #cfc9d8; }

.wrap > p.section__eyebrow,
.section__eyebrow {
	max-width: none;
	margin: 0 0 12.8px;
	font-family: var(--font-meta);
	font-size: var(--eyebrow-size);
	line-height: var(--eyebrow-lh);
	font-weight: 700;
	letter-spacing: var(--eyebrow-track);
	text-transform: uppercase;
	color: var(--kicker);
}

.button {
	display: inline-flex;
	align-items: center;
	min-height: var(--tap-target);
	padding: 0;
	border: 0;
	background: none;
	color: var(--ink);
	font-size: var(--btn-size);
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: .02em;
	text-decoration: none;
	border-bottom: 2px solid currentColor;
}



.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}