:root {
	--ra-bg: #f5f3ef;
	--ra-bg-elevated: #ffffff;
	--ra-ink: #0d0f11;
	--ra-ink-soft: #17191c;
	--ra-steel: #73777f;
	--ra-line: rgba(0, 0, 0, 0.08);
	--ra-copper: #f26a16;
	--ra-copper-ink: #d45a10;
	--ra-success: #1f7a4d;
	--ra-danger: #c0392b;
	--ra-white: #ffffff;

	--ra-font-display: "Inter", "Segoe UI", sans-serif;
	--ra-font-body: "Inter", "Segoe UI", sans-serif;

	--ra-fs-xs: 0.75rem;
	--ra-fs-sm: 0.875rem;
	--ra-fs-md: 1rem;
	--ra-fs-lg: 1.125rem;
	--ra-fs-xl: 1.5rem;
	--ra-fs-2xl: 2rem;
	--ra-fs-3xl: 2.75rem;
	--ra-fs-hero: clamp(2.4rem, 5vw, 5.1rem);

	--ra-space-1: 4px;
	--ra-space-2: 8px;
	--ra-space-3: 12px;
	--ra-space-4: 16px;
	--ra-space-5: 24px;
	--ra-space-6: 40px;
	--ra-space-7: 80px;

	--ra-radius-sm: 10px;
	--ra-radius: 14px;
	--ra-radius-lg: 18px;
	--ra-gutter: clamp(20px, 2.4vw, 48px);
	--ra-container: 1920px;
	--ra-header-h: 74px;
	--ra-dock-h: 0px;
	--ra-ease: 220ms cubic-bezier(0.22, 1, 0.36, 1);
	--ra-focus: 2px solid var(--ra-copper);
	--ra-shadow: 0 1px 2px rgba(16, 17, 20, 0.04);
	--ra-shadow-hover: 0 18px 40px rgba(16, 17, 20, 0.1);
}

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

html {
	scroll-behavior: smooth;
	scroll-padding-top: calc(var(--ra-header-h) + 12px);
	width: 100%;
	min-height: 100%;
}

body {
	margin: 0;
	width: 100%;
	min-height: 100vh;
	overflow-x: hidden;
	background: var(--ra-bg);
	color: var(--ra-ink);
	font-family: var(--ra-font-body);
	font-size: var(--ra-fs-md);
	line-height: 1.55;
	-webkit-font-smoothing: antialiased;
}

::selection {
	background: var(--ra-ink);
	color: #fff;
}

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

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

a:hover {
	color: var(--ra-copper-ink);
}

button,
input,
select,
textarea {
	font: inherit;
}

:focus-visible {
	outline: var(--ra-focus);
	outline-offset: 2px;
}

.ra-container {
	width: 100%;
	max-width: var(--ra-container);
	padding-inline: var(--ra-gutter);
	margin-inline: auto;
}

.ra-container--wide {
	max-width: var(--ra-container);
}

main {
	width: 100%;
}

.ra-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

@media (max-width: 960px) {
	:root {
		--ra-dock-h: 88px;
		--ra-gutter: 16px;
	}
}

@media (max-width: 640px) {
	:root {
		--ra-header-h: 62px;
		--ra-gutter: 14px;
		--ra-dock-h: calc(76px + env(safe-area-inset-bottom, 0px));
	}
}
