:root {
	--bg: #f7f8f2;
	--white: #ffffff;
	--rgb-white: 255, 255, 255;
	--ink: #2c2530;
	--rgb-ink: 44, 37, 48;
	--ink-soft: #6c5e74;
	--purple: #8d7cbf;
	--rgb-purple: 141, 124, 191;
	--purple-soft: #e7e1f5;
	--purple-dark: #6548ba;
	--rgb-purple-dark: 101, 72, 186;
	--pink: #c98ca0;
	--border: #dfe3d6;
	--shadow-sm: 0 2px 10px rgba(var(--rgb-purple), .06);
	--shadow-md: 0 14px 34px rgba(var(--rgb-purple), .12);
	--shadow-lg: 0 24px 60px rgba(var(--rgb-purple), .18);
	--shadow-outer: 0 0 15px rgba(var(--rgb-purple), .5);
	--radius-sm: 8px;
	--radius-md: 16px;
	--radius-lg: 28px;
	--radius-pill: 999px;
	--font-display: "Montserrat", -apple-system, "Segoe UI", sans-serif;
	--font-body: "Roboto", -apple-system, "Segoe UI", sans-serif;
	--header-height: 88px;
	--header-height-mobile: 68px;
	--transition: all .25s linear 0s
}

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

*:focus {
	outline: none
}

body {
	margin: 0;
	font-family: var(--font-body);
	font-size: 16px;
	line-height: 1.65;
	color: var(--ink);
	background: var(--bg);
	-webkit-font-smoothing: antialiased
}

h1, h2, h3, h4, h5, h6 {
	margin: 0;
	font-family: var(--font-display);
	color: var(--ink);
	font-weight: 700;
	line-height: 1.2
}

p {
	margin: 0
}

a {
	color: var(--purple-dark);
	text-decoration: none;
	transition: var(--transition)
}

a:hover {
	color: var(--purple)
}

ul, ol {
	margin: 0;
	padding: 0;
	list-style: none
}

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

button {
	font: inherit;
	color: inherit;
	background: none;
	border: none;
	cursor: pointer
}

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

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: .001ms !important;
		transition-duration: .001ms !important;
		scroll-behavior: auto !important
	}
}