body {
	container: body / inline-size;
	position: relative;
	min-height: 100%;
	display: flex;
	flex-direction: column;
	font-size: 19.6px;
	font-family: 'DM Sans';
	font-weight: 500;
	line-height: normal;
	letter-spacing: 0px;
	background-color: #fff;
	overflow: auto;
}
.hero-backdrop {
	position: absolute; top: 0; left: 0; right: 0; 
	height: 852px;
	background: linear-gradient(180deg, #281726 0%, #492e45 41%) top left / auto auto no-repeat;
}
/* button-toogle */

.toggle {
	display: flex;
	align-items: flex-start;
	gap: 39px;
	background-color: var(--background-500-base);
	padding: 6px 36px 6px 7px;
	border-radius: 126px;
}
/* end button-toogle*/

.step-shot {
	margin-left: -9px; margin-top: -5px;
	width: 176px;
	flex-shrink: 0;
	border: 5px solid var(--background-600);
	border-radius: 24px;
}
.step-text {
	min-height: 60px;
	flex-shrink: 0;
	align-self: stretch;
	color: var(--primary-300);
	font-size: 16px;
	font-family: 'DM Sans';
	font-style: normal;
	font-weight: 400;
	line-height: 1.25;
	letter-spacing: 0px;
	text-align: center;
}
.section-title {
	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;
	text-align: center;
}
.section-lede {
	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;
	text-align: center;
}
.demo-check {
	flex-shrink: 0;
}
.btn-primary {
	width: 240px;
	display: flex;
	justify-content: center;
	color: var(--background-400);
	font-size: 16px;
	font-family: 'DM Sans';
	font-style: normal;
	font-weight: 500;
	line-height: 1.25;
	letter-spacing: 0px;
	text-align: center;
	background-color: var(--primary-500-base);
	padding: 18px 16px;
	border-radius: 90px;
}

.faq-answer-text {
	color: var(--primary-300);
	--min-font-size: 17; --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;
	text-align: left;
}
.hero-backdrop-lower {
	z-index: 2;
}
.hero-backdrop-upper {
	z-index: 3;
}
.hero {
	container: hero / inline-size;
	position: relative; z-index: 4;
	display: flex;
	flex-direction: column;
	gap: 24px;
	background: url(../assets/col.png) center / cover no-repeat;
	padding: 52px 120px 322px 120px;
}
.site-nav-row {
	margin-left: 2px;
	display: flex;
	align-items: flex-start;
	gap: 16px;
	align-self: center;
}
.site-nav-link {
	margin-top: -1px;
	color: var(--background-600);
	font-size: 16px;
	font-family: 'DM Sans';
	font-style: normal;
	font-weight: 500;
	line-height: 1.25;
	letter-spacing: 0px;
	text-align: left;
}
.site-nav-logo-img {
	margin: -16px 0 -4px -3px;
	width: 115px;
	flex-shrink: 0;
}
.site-nav-link-first {
	margin-left: 540px;
}
.site-nav-link-last {
	margin-right: -1px;
}
.hero-title {
	margin-top: 149px;
	text-align: left;
}
.hero-lede {
	min-height: 57px;
	flex-shrink: 0;
	text-align: left;
}
.hero-actions {
	display: flex;
	align-items: flex-start;
	gap: 24px;
	align-self: start;
}
/* `align-items` on both: a <button> centres its own label, an <a> does not, so
   without this the text sits at the top of the pill the moment `min-height`
   exceeds one line — a wrap on a narrow phone, or a larger default font. */
.hero-btn-primary {
	width: 221px;
	min-height: 56px;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	text-align: center;
	background-image: linear-gradient(246deg, #c5ab86 9%, #b38e5d 47%, #83593c 84%);
}
.hero-btn-secondary {
	min-height: 56px;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	color: var(--primary-200);
	text-align: center;
}
.about {
	container: about / inline-size;
	margin-top: -61px;
	gap: 7px;
	background-color: var(--background-400);
	padding-top: 145px;
	padding-bottom: 59px;
}
.about-title {
	min-height: 28px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	align-self: stretch;
	text-align: center;
}
.about-lede {
	margin-top: 9px;
	width: 100%;
	max-width: 792px;
	min-height: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	text-align: center;
}
.toggle-audience {
	margin-top: 22px;
}
.about-steps-lede {
	min-height: 77px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	align-self: stretch;
	color: var(--primary-500-base);
	text-align: center;
}
.steps {
	margin-left: 12px; margin-top: 14px;
	display: flex;
	align-items: flex-start;
	gap: 149px;
}
/* column-a */

.step {
	margin-top: -5px; margin-bottom: -1px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
	flex-shrink: 0;
}
.step-title {
	margin-top: 8px;
	width: 160px;
	min-height: 28px;
	display: flex;
	align-items: center;
	flex-shrink: 0;
	color: var(--primary-500-base);
	font-size: 28px;
	font-family: 'Playfair Display';
	font-style: normal;
	font-weight: 600;
	line-height: normal;
	letter-spacing: 0px;
	text-align: left;
}
/* end column-a*/

.step-left {
	margin-left: -15px;
	width: 233px;
}
.step-left .step-title {
	margin-left: 1px;
}
.step-center {
	margin-left: 1px;
	width: 232px;
}
.step-center .step-shot-inner {
	margin-left: -10px;
}
.step-right {
	margin: -5px -2px -1px 0;
	width: 233px;
	display: flex;
	flex-direction: column;
	gap: 9px;
	flex-shrink: 0;
}
.founders {
	container: founders / inline-size;
	margin-left: 1px; margin-top: 47px;
	width: 100%;
	max-width: 995px;
	display: flex;
	flex-direction: column;
	gap: 52px;
	background-color: var(--background-600);
	padding: 31px 76px 61px 62px;
	border-radius: 24px;
}
.founders-head {
	margin-left: 40px; margin-right: 27px;
	display: flex;
	flex-direction: column;
	gap: 16px;
}
.founders-title {
	text-align: center;
}
.founders-lede {
	min-height: 26px;
	flex-shrink: 0;
	text-align: center;
}
.founders-row {
	display: flex;
	align-items: flex-start;
	gap: 26px;
}
/* column-b */

.founder {
	width: 100%;
	min-height: 328px;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	gap: 1px;
	flex-grow: 1;
	background-position: top left, top left, top left;
	background-size: auto auto, auto auto, cover;
	background-repeat: no-repeat, no-repeat, no-repeat;
	padding: 18px 26px;
	border-radius: 16px;
}
.founder-name {
	color: var(--background-400);
	font-size: 28px;
	font-family: 'Playfair Display';
	font-style: normal;
	font-weight: 600;
	line-height: normal;
	letter-spacing: 0px;
	text-align: left;
}
.founder-role {
	text-align: left;
}
.founder-focus {
	color: var(--background-400);
	font-size: 16px;
	font-family: 'DM Sans';
	font-style: normal;
	font-weight: 400;
	line-height: 1.25;
	letter-spacing: 0px;
	text-align: left;
}
/* end column-b*/

.founder-left {
	background-image: linear-gradient(180deg, rgba(71, 31, 67, 0) 58%, rgba(71, 31, 67, 0.9) 100%), linear-gradient(rgba(145, 100, 140, 0.6), rgba(145, 100, 140, 0.6)), url(../assets/column/col1.png);
}
.founder-right {
	background-image: linear-gradient(180deg, rgba(71, 31, 67, 0) 58%, rgba(71, 31, 67, 0.9) 100%), linear-gradient(rgba(145, 100, 140, 0.6), rgba(145, 100, 140, 0.6)), url(../assets/column/col2.png);
}
.founding {
	container: founding / inline-size;
	position: relative; z-index: 5;
	align-items: unset;
	gap: 22px;
	background-color: var(--background-500-base);
	padding-top: 52px;
	padding-bottom: 55px;
}
.founding-lede {
	color: #91648c;
}
.founding-note {
	margin-top: 54px;
	text-align: center;
}
.founding-cta {
	position: relative; z-index: 3;
	display: flex;
	align-items: flex-start;
	gap: 218px;
	background-color: var(--primary-500-base);
	padding: 69px 119px 79px 120px;
}
.founding-cta-title {
	flex-grow: 1;
	text-align: left;
}
.founding-cta-body {
	margin-top: 7px;
	width: 388px;
	display: flex;
	flex-direction: column;
	gap: 12px;
	flex-shrink: 0;
}
.founding-cta-text {
	margin: -4px 1px 0 -201px;
	min-height: 50px;
	flex-shrink: 0;
	text-align: right;
}
.founding-cta-btn {
	width: 290px;
	justify-content: center;
	align-self: end;
	text-align: center;
	background-image: linear-gradient(246deg, #c5ab86 9%, #b38e5d 47%, #83593c 84%);
}
.categories {
	container: categories / inline-size;
	gap: 24px;
	background-color: var(--background-400);
	padding-top: 72px;
	padding-bottom: 41px;
}
.categories-title {
	align-self: stretch;
}
.categories-lede {
	margin-left: -13px;
	width: 100%;
	max-width: 769px;
}
.category-row {
	margin-top: 25px;
	display: flex;
	align-items: flex-start;
	gap: 16px;
}
.category {
	width: 226px;
	min-height: 352px;
	flex-shrink: 0;
	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;
	text-align: right;
	background-position: top left, top left;
	background-size: auto auto, cover;
	background-repeat: no-repeat, no-repeat;
	padding-top: 300px;
	padding-bottom: 28px;
	border-radius: 21.55px;
}
.category-lashes {
	min-height: 352px;
	flex-shrink: 0;
	text-align: center;
	background-image: linear-gradient(181deg, rgba(71, 31, 67, 0) 64%, rgba(71, 31, 67, 0.8) 99%), url(../assets/lashes.png);
}
.category-nails {
	min-height: 352px;
	flex-shrink: 0;
	text-align: center;
	background-image: linear-gradient(180deg, rgba(71, 31, 67, 0) 70%, rgba(71, 31, 67, 0.8) 100%), url(../assets/nails.png);
}
.category-brows {
	background-image: linear-gradient(180deg, rgba(71, 31, 67, 0) 65%, rgba(71, 31, 67, 0.8) 100%), url(../assets/brows.png);
	padding-left: 61px;
	padding-right: 61px;
}
.category-makeup {
	width: 227px;
	background-image: linear-gradient(180deg, rgba(71, 31, 67, 0) 65%, rgba(71, 31, 67, 0.8) 100%), url(../assets/makeup.png);
	padding-left: 45px;
	padding-right: 45px;
}
.category-hair {
	background-image: linear-gradient(180deg, rgba(71, 31, 67, 0) 62%, rgba(71, 31, 67, 0.8) 100%), url(../assets/hair.png);
	padding-left: 68px;
	padding-right: 68px;
}
/* align-items for the same reason as .hero-btn-primary: .btn-primary is a
   flex row, and this is an <a>, which does not centre its own label the way
   the <button> it replaced did. */
.categories-btn {
	margin-top: 39px;
	align-items: center;
}
.how-it-works {
	container: how-it-works / inline-size;
	position: relative; z-index: 2;
	align-items: unset;
	gap: 24px;
	background-color: var(--background-500-base);
	padding-top: 49px;
	padding-bottom: 65px;
}
.demo-title-clients {
	position: absolute; top: 95px; left: 101px; right: 625px; 
	min-height: 35px;
	display: flex;
	align-items: center;
	text-align: left;
}
.demo-lede-clients {
	position: absolute; top: 146px; left: 101px; right: 510px; 
	min-height: 39px;
	color: var(--primary-300);
	text-align: left;
}
.demo-card-providers {
	margin-left: 1px; margin-top: 16px;
	display: flex;
	align-items: flex-start;
	gap: 29px;
	align-self: center;
	background-color: rgba(250, 230, 236, 0.8);
	padding: 58px 108px 42px 100px;
	border-radius: 24px;
}
.demo-media-providers {
	position: relative;
	width: 380px; height: 575px;
	flex-shrink: 0;
}
.demo-card-body-providers {
	margin-top: 66px;
	width: 378px;
	display: flex;
	flex-direction: column;
	gap: 14px;
	flex-shrink: 0;
}
/* row-a */

.demo-row {
	display: flex;
	align-items: flex-start;
	gap: 7px;
	align-self: start;
}
.demo-row-text {
	margin-bottom: -1px;
	min-height: 39px;
	flex-grow: 1;
	color: #471f43;
	font-size: 16px;
	font-family: 'DM Sans';
	font-style: normal;
	font-weight: 400;
	line-height: 1.25;
	letter-spacing: 0px;
	text-align: left;
}
/* end row-a*/

.demo-title-providers {
	align-self: start;
	color: var(--primary-500-base);
	text-align: left;
}
.demo-lede-providers {
	margin-right: -6px; margin-top: 2px;
	min-height: 39px;
	flex-shrink: 0;
	color: var(--primary-300);
	text-align: left;
}
.demo-row-1 {
	margin-top: 51px;
	width: 228px;
}
.demo-row-1 .demo-row-check {
	width: 24px;
}
.demo-row-1 .demo-row-text {
	margin-right: -155px;
}
.demo-row-2 {
	width: 100%;
	max-width: 330px;
}
.demo-row-2 .demo-row-check {
	width: 24px;
}
.demo-row-2 .demo-row-text {
	margin-right: -51px; margin-top: 2px;
}
.demo-row-3 {
	margin-right: 18px; margin-top: 2px;
	display: flex;
	align-items: flex-start;
	gap: 7px;
}
.demo-row-check-last {
	width: 24px;
}
.demo-row-text-last {
	margin-right: -21px; margin-bottom: -2px;
	flex-grow: 1;
	text-align: left;
}
.faq {
	/* The export reused the About section's container name here. Nothing inside
	   the FAQ matches the two `@container about` queries, so this is a distinct
	   name now — one container, one name. */
	container: faq / inline-size;
	position: relative; z-index: 3;
	gap: 24px;
	background-color: var(--background-400);
	padding-top: 47px;
	padding-bottom: 63px;
}
.faq-title {
	align-self: stretch;
}
.faq-lede {
	margin-left: -3px;
	width: 100%;
	max-width: 789px;
}
.toggle-faq {
	margin-top: 24px;
}
.faq-list {
	margin-top: 22px;
	width: 100%;
	max-width: 588px;
	display: flex;
	flex-direction: column;
	gap: 16px;
}
.contact {
	position: relative; z-index: 2;
	gap: 16px;
	background-color: var(--background-500-base);
	padding-top: 68px;
	padding-bottom: 56px;
}
/* The form's own rules live together in responsive.css under "Forms" — the
   export drew the type field as a <div> with a caret <img> beside it, which was
   not a control at all, so there was nothing here worth keeping. What is left
   here is only what belongs to this section: its heading and its lede. */
.contact-title {
	min-height: 36px;
	flex-shrink: 0;
	align-self: stretch;
	text-align: center;
}
.contact-lede {
	margin-top: 16px;
	align-self: stretch;
	color: var(--primary-300);
	text-align: center;
}
.footer {
	container: footer / inline-size;
	position: relative; z-index: 4;
	gap: 3px;
	background-color: var(--primary-500-base);
	padding-top: 58px;
	padding-bottom: 30px;
}
.footer-col-title {
	margin-top: -8px; margin-bottom: -7px;
	color: #fff;
	font-size: 28px;
	font-family: 'Playfair Display';
	font-style: normal;
	font-weight: 600;
	line-height: normal;
	letter-spacing: 0px;
	text-align: center;
}
.footer-rule {
	margin-left: 36px; margin-top: 42px;
	width: 100%; height: 0;
	max-width: 1260px;
	flex-shrink: 0;
	align-self: start;
	border-top: 1px solid var(--primary-50);
}
.footer-bottom {
	margin-left: 38px; margin-top: 20px;
	display: flex;
	align-items: flex-start;
	gap: 22px;
	align-self: start;
}
.footer-copyright {
	margin-top: -4px; margin-bottom: -1px;
	color: var(--background-500-base);
	font-size: 14px;
	font-family: 'DM Sans';
	font-style: normal;
	font-weight: 500;
	line-height: normal;
	letter-spacing: 0px;
	text-align: center;
}
.footer-copyright-type {
	margin-left: -1px;
	color: var(--primary-300);
}
/** breakpoints (margin / paddings) **/

@media screen and (max-width: 1280px) {
	.faq-answer-text {
		margin-inline: 0;
	}
	.hero {
		padding-inline: var(--margin-md);
	}
	.site-nav-link-first {
		margin-inline: 0;
	}
	.founders {
		padding-inline: var(--margin-md);
	}
	.founders-head {
		margin-inline: 0;
	}
	.founding-cta {
		padding-inline: var(--margin-md);
	}
	.founding-cta-text {
		margin-inline: 0;
	}
	.categories-lede {
		margin-inline: 0;
	}
	.demo-card-providers {
		padding-inline: var(--margin-md);
	}
	.demo-lede-providers {
		margin-inline: 0;
	}
	.demo-row-2 .demo-row-text {
		margin-inline: 0;
	}
	.demo-row-3 {
		margin-inline: 0;
	}
	.demo-row-text-last {
		margin-inline: 0;
	}
	.faq-lede {
		margin-inline: 0;
	}
	.footer-rule {
		margin-inline: 0;
	}
}

@media screen and (max-width: 576px) {
.hero {
		padding-inline: var(--margin-sm);
	}
.founders {
		padding-inline: var(--margin-sm);
	}
.founding-cta {
		padding-inline: var(--margin-sm);
	}
.demo-card-providers {
		padding-inline: var(--margin-sm);
	}
}
/* container queries (flex rows) */

@container about (width < 428px) {
	.toggle {
		flex-direction: column;
		align-items: center;
		gap: 13px;
		padding: 8px 8.400009155273438px;
	}
	.about > * {
		margin-left: 0; margin-right: 0;
	}
	.toggle > * {
		margin-top: unset !important;
		text-align: center;
	}
}

@container hero (width < 1197px) {
.site-nav-row {
		margin-left: 0;
		flex-direction: column;
		align-items: center;
		gap: 13px;
	}
.site-nav-row > * {
		margin-left: unset !important; margin-right: unset !important; margin-top: unset !important;
		text-align: center;
	}
}

@container hero (width < 458px) {
.hero-actions {
		flex-direction: column;
		align-items: center;
		gap: 14px;
	}
.hero-actions > * {
		text-align: center;
	}
}

@container about (width < 1002px) {
.steps {
		flex-direction: column;
		align-items: center;
		gap: 80px;
	}
.steps > * {
		margin-left: unset !important; margin-right: unset !important; margin-top: unset !important;
	}
.steps > .step-left > * {
		text-align: unset;
	}
.steps > .step-center > * {
		text-align: unset;
	}
.steps > .step-right > * {
		text-align: unset;
	}
}

@container founders (width < 855px) {
.founders-row {
		flex-direction: column;
		align-items: center;
		gap: 42px;
	}
.founders > * {
		margin-left: 0; margin-right: 0;
	}
.founders-row > .founder-left {
		width: 100%;
	}
.founders-row > .founder-left > * {
		text-align: unset;
	}
.founders-row > .founder-right {
		width: 100%;
	}
.founders-row > .founder-right > * {
		text-align: unset;
	}
}

@container founding (width < 1199px) {
.founding > * {
		margin-left: 0; margin-right: 0;
	}
}

@container body (width < 1429px) {
.founding-cta {
		flex-direction: column;
		align-items: flex-end;
		gap: 19px;
	}
.founding-cta > * {
		margin-top: unset !important;
	}
.founding-cta > .founding-cta-title {
		width: 100%;
	}
.founding-cta > .founding-cta-body {
		width: 100%;
		max-width: 388px;
	}
}

@container categories (width < 1195px) {
.category-row {
		flex-direction: column;
		align-items: center;
		gap: 46px;
	}
.category-row > * {
		text-align: center;
	}
}

@container how-it-works (width < 996px) {
.demo-card-providers {
		flex-direction: column;
		align-items: center;
		gap: 66px;
	}
.demo-card-providers > * {
		margin-top: unset !important;
		text-align: center;
	}
.demo-card-providers > .demo-media-providers {
		width: 100%;
		max-width: 380px;
	}
.demo-card-providers .demo-title-providers {
		align-self: center;
	}
.demo-card-providers .demo-row-1 {
		align-self: center;
	}
.demo-card-providers .demo-row-2 {
		align-self: center;
	}
.demo-card-providers > .demo-card-body-providers {
		width: 100%;
		max-width: 378px;
		align-items: center;
	}
.demo-card-providers > .demo-card-body-providers > * {
		text-align: unset;
	}
}

@container footer (width < 1199px) {
.footer > * {
		margin-left: 0; margin-right: 0;
	}
}

@container footer (width < 1293px) {
.footer-bottom {
		margin-left: 0;
		flex-direction: column;
		align-items: center;
		gap: 13px;
	}
.footer-bottom > * {
		margin-left: unset !important; margin-right: unset !important; margin-top: unset !important;
		text-align: center;
	}
}