:root {
	/* color variables */
	--background-400: #fffbfc;
	--background-600: #ede5e7;
	--secondary-500-base: #b38e5d;
	--primary-500-base: #471f43;
	--primary-300: #91648c;
	--primary-200: #bb80b4;
	--background-500-base: #fbf2f5;
	--primary-400: #5e3159;
	--inactive-surface: #fefefe;
	--grey-10: rgba(107, 107, 107, 0.1);
	--primary-50: rgba(145, 100, 140, 0.5);
	--secondary-400: #c5ab86;

	/* number variables */
	--cell: 319px;

	/* responsive margins / paddings */
	--margin-sm: 16px;
	--margin-md: 32px;
}

/* Every class the Figma export produced declares a --min-font-size and a
   --max-font-size and then sets `font-size: var(--interpolate)`. This is what
   turns that pair into a real size.

   It used to be a clamp() interpolating between a 430px and a 1440px viewport,
   which meant the two declared numbers were only ever drawn at the two
   extremes: every width in between got a fraction, e.g. 47.4297px for a 27/48
   heading at 1288px. It now picks one of the two whole numbers instead —
   --min below the site's 900px breakpoint, --max above it — matching the
   --type-* tokens in responsive.css, which step at the same width.

   Declared on `*` rather than :root because --min-font-size and --max-font-size
   are set by the individual classes; a custom property resolves where it is
   used, so the calc() below reads whichever pair the element itself carries. */
* {
	--interpolate: calc(var(--min-font-size) * 1px);
}

/* 900px: the site's main breakpoint, the one the nav collapses at. A literal
   because @media cannot read custom properties. */
@media (width > 900px) {
	* {
		--interpolate: calc(var(--max-font-size) * 1px);
	}
}

html {
	height: 100%;
	font-size: 16px;
}



/* text utility classes */

.body-web-xxl {
	color: #fff;
	--min-font-size: 17; --max-font-size: 22; font-size: var(--interpolate);
	font-family: 'DM Sans';
	font-style: normal;
	font-weight: 400;
	line-height: normal;
	letter-spacing: 0px;
}

.body-reg {
	color: #471f43;
	font-size: 16px;
	font-family: 'DM Sans';
	font-style: normal;
	font-weight: 400;
	line-height: 1.25;
	letter-spacing: 0px;
}

.display-lg {
	color: var(--primary-500-base);
	--min-font-size: 20; --max-font-size: 22; font-size: var(--interpolate);
	font-family: 'Playfair Display';
	font-style: normal;
	font-weight: 600;
	line-height: 1.091;
	letter-spacing: 0px;
}

.body-sm {
	color: var(--primary-300);
	font-size: 14px;
	font-family: 'DM Sans';
	font-style: normal;
	font-weight: 500;
	line-height: normal;
	letter-spacing: 0px;
}

.display-web-xl2 {
	color: var(--primary-500-base);
	--min-font-size: 20; --max-font-size: 32; font-size: var(--interpolate);
	font-family: 'Playfair Display';
	font-style: normal;
	font-weight: 600;
	line-height: 0.75;
	letter-spacing: 0px;
}

.body-md-bld {
	color: var(--primary-500-base);
	--min-font-size: 15; --max-font-size: 16; font-size: var(--interpolate);
	font-family: 'DM Sans';
	font-style: normal;
	font-weight: 600;
	line-height: 1.5;
	letter-spacing: 0px;
}

.display-web-xl1 {
	color: var(--background-500-base);
	font-size: 32px;
	font-family: 'Playfair Display';
	font-style: normal;
	font-weight: 600;
	line-height: 0.75;
	letter-spacing: 0px;
}

.display-web-h2 {
	color: var(--primary-500-base);
	--min-font-size: 27; --max-font-size: 48; font-size: var(--interpolate);
	font-family: 'Playfair Display';
	font-style: normal;
	font-weight: 600;
	line-height: normal;
	letter-spacing: 0px;
}

.body-web-xl1 {
	color: var(--primary-300);
	--min-font-size: 16; --max-font-size: 20; font-size: var(--interpolate);
	font-family: 'DM Sans';
	font-style: normal;
	font-weight: 500;
	line-height: 1.2;
	letter-spacing: 0px;
}

.body-web-lg1 {
	--min-font-size: 16; --max-font-size: 18; font-size: var(--interpolate);
	font-family: 'DM Sans';
	font-style: normal;
	font-weight: 500;
	line-height: 1.333;
	letter-spacing: 0px;
}

.display-web-h1 {
	color: #fff;
	--min-font-size: 31; --max-font-size: 56; font-size: var(--interpolate);
	font-family: 'Playfair Display';
	font-style: normal;
	font-weight: 600;
	line-height: normal;
	letter-spacing: 0px;
}

.body-web-lg2 {
	color: var(--background-400);
	font-size: 18px;
	font-family: 'DM Sans';
	font-style: normal;
	font-weight: 700;
	line-height: 1.333;
	letter-spacing: 0px;
}

.display-web-h3 {
	color: var(--background-400);
	font-size: 48px;
	font-family: 'Playfair Display';
	font-style: normal;
	font-weight: 600;
	line-height: normal;
	letter-spacing: 0px;
}

.body-web-lg3 {
	font-size: 18px;
	font-family: 'DM Sans';
	font-style: normal;
	font-weight: 500;
	line-height: 1.333;
	letter-spacing: 0px;
}

.body-web-xl2 {
	color: var(--background-500-base);
	font-size: 20px;
	font-family: 'DM Sans';
	font-style: normal;
	font-weight: 500;
	line-height: 1.2;
	letter-spacing: 0px;
}

.body-md2 {
	color: #471f43;
	--min-font-size: 15; --max-font-size: 16; font-size: var(--interpolate);
	font-family: 'DM Sans';
	font-style: normal;
	font-weight: 500;
	line-height: 1.25;
	letter-spacing: 0px;
}

.body-md1 {
	color: var(--background-400);
	font-size: 16px;
	font-family: 'DM Sans';
	font-style: normal;
	font-weight: 500;
	line-height: 1.25;
	letter-spacing: 0px;
}

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

.bold {
	font-weight: 700;
}



/* section utility classes */

.section {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 0 24px;
}



/* ui objects utility classes */

.card1 {
	width: 226px;
	background-position: top left, center;
	background-size: auto auto, cover;
	background-repeat: no-repeat, no-repeat;
	padding: 300px 9px 28px 9px;
	border-radius: 21.55px;
}

.card-white2 {
	width: 100%;
	background-color: #fff;
	padding: 7px 11px;
	border: 1px solid var(--grey-10);
	border-radius: 8px;
}

.btn2 {
	width: 214px;
	display: flex;
	padding: 17px 8px;
	border: 1px solid var(--primary-200);
	border-radius: 9999px;
}

.card-white1 {
	box-shadow: 0px 0px 10px 0px rgba(145, 100, 140, 0.2);
	display: flex;
	flex-direction: column;
	background-color: var(--inactive-surface);
	padding-left: 22px;
	padding-right: 21px;
	border-radius: 16px;
}

.card2 {
	width: 227px;
	background-position: top left, top left;
	background-size: auto auto, cover;
	background-repeat: no-repeat, no-repeat;
	padding: 300px 9px 28px 9px;
	border-radius: 21.55px;
}

.btn1 {
	display: flex;
	background-position: top left;
	background-size: auto auto;
	background-repeat: no-repeat;
	padding: 18px 20px;
	border-radius: 9999px;
}



/* button hover utility classes */

.hover-zoom:hover {
	scale: 1.05;
}

.hover-bright:hover {
	filter: brightness(1.2);
}