@font-face {
	font-family: "Inter";
	font-style: normal;
	font-weight: normal;
	src: url("fonts/web/Inter-Regular.woff2");
}

@font-face {
	font-family: "Inter";
	font-style: normal;
	font-weight: bold;
	src: url("fonts/web/Inter-Bold.woff2");
}

@font-face {
	font-family: "Bricolage";
	font-style: normal;
	font-weight: bold;
	src: url("fonts/web/bricolage-bold.woff2");
}

:root {
	/* Colors */
	--c-brand-dark:		#1a1a2e;
	--c-brand-1:	#53054B;
	--c-brand-1-text: #44043E;
	--c-brand-3: #774FA6;
	--c-brand-2: #F5F461;
	--c-accent-green: #3dbf7a;
	
	--c-bg-page: var(--c-brand-1);
	--c-bg-highlight: var(--c-brand-2);
	--c-bg-card: #ffffff;
	--c-bg-subtle: #eeecf5;
	
	--c-text-accent: var(--c-brand-2);
	--c-text-positive:	var(--c-brand-1-text);
	--c-text-secondary:#555568;
	--c-text-negative:	#ffffff;
	--c-text-muted:		#888899;
	
	--c-border: var(--c-brand-3);
	--c-badge-bg:			#f5c842;
	--c-badge-text:		#1a1a2e;
	--c-step-num-bg:	 #4b2d8f;

	/* Spacing */
	--space-xs:	 4px;
	--space-sm:	 8px;
	--space-md:	 16px;
	--space-lg:	 24px;
	--space-xl:	 40px;
	--space-2xl:	64px;

	/* Border radius */
	--radius-sm:	8px;
	--radius-md:	12px;
	--radius-lg:	20px;
	--radius-pill:100px;

	--font-scale: 1.2;
	--font-scale-small: 1.125;
	--font-xs: calc( var(--font-sm) * ( 0.5 * var(--font-scale) ) );
	--font-sm: calc( var(--font-base) * (0.7 * var(--font-scale) ) );
	--font-base: 1.0rem;
	--font-md: calc( var(--font-scale) * var(--font-base) );
	--font-lg: calc( var(--font-scale) * var(--font-md) );
	--font-xl: calc( var(--font-scale) * 0.8 * var(--font-lg) );

	/* Font families */
	--font-display: "Bricolage", sans-serif;
	--font-body: "Inter", sans-serif;

	/* Shadows */
	--shadow-card: 0 2px 12px rgba(75,45,143,0.08);
	--shadow-hero: 0 4px 32px rgba(75,45,143,0.18);
	
	--m-measure: clamp(1.5rem, 7.5vw, 5rem);
	--m-measure-double: calc( 2 * var(--m-measure) );
	--m-page-gutter: clamp(1rem, 3.5vw, 3rem);
	--m-page-margin: clamp(1.5rem, 7vw, 4rem);
	--m-box-padding: clamp(1.5rem, 4vw, 5rem);
	
	--ls-uppercase: .06em;
	
	--br-box: 1rem;
}

@supports (letter-spacing: 1%) {
	:root {
		--ls-uppercase: 6%;
	}
}

@media (min-width:20em) {
	:root {
		--font-scale: 1.3;
	}
}

@media (min-width:30em) {
	:root {
		--font-scale: 1.4;
	}
}

@media (min-width:40em) {
	:root {
		--font-scale: 1.45;
	}
}

@media (min-width:50em) {
	:root {
		--font-base: 1.125rem;
	}
}

@media (min-width:60em) {
	:root {
		--font-scale: 1.5;
	}
}

@media (min-width:80em) {
	:root {
		--font-scale: 1.6;
	}
}

.logo {
	height: 2em;
	overflow: hidden;
}

.logo::before {
	background: url("img/logo-white.svg") no-repeat;
	background-size: contain;
	content: "";
	display: block;
	height: 2em;
	margin-bottom: 2em;
}

body {
	background: var(--c-bg-page);
	color: var(--c-text-negative);
	font-family: var(--font-body);
	font-feature-settings: 'liga' 1, 'calt' 1;
	font-size: var(--font-base);
	margin: 0;
	line-height: 1.45;
}

article {
    max-width: 80em;
    margin: 0 auto;
}

header,
section {
	margin: 0 auto;
	padding: var(--m-measure) var(--m-page-margin); 
    max-width: 80em;
    box-sizing: border-box;
}


h1, .h1,
h2, .h2,
h3, .h3 {
	color: var(--c-text-accent);
	font-family: var(--font-display);
	font-weight: bold;
	line-height: 1.05;
	margin: 1.75em 0 .875em;
	text-wrap: balance;
}

h1, .h1 {
	font-size: var(--font-xl);
}

h2, .h2 {
	font-size: var(--font-lg);
}

h3, .h3{
    font-size: var(--font-md);
}

h4, .h4 {
	font-family: var(--font-body);
	font-size: var(--font-sm);
	letter-spacing: var(--ls-uppercase);
	margin: 1.5em 0 .75em;
	text-transform: uppercase;
}

h5, .h5{
    font-family: var(--font-body);
	font-size: var(--font-xs);
	letter-spacing: var(--ls-uppercase);
	margin: 1.5em 0 .75em;
	text-transform: uppercase;
}

.hero{
    margin-bottom: var(--m-measure-double);
}

.highlight {
	background-color: var(--c-bg-highlight);
	color: var(--c-text-positive);
	border-radius: var(--br-box);
	margin-inline: var(--m-page-margin);
	padding: var(--m-box-padding) var(--m-box-padding) calc( 3* var(--m-box-padding) );
    margin: var(--m-measure-double) var(--m-page-margin);
    
	:is(h1,h2,h3) {
		color: inherit;
	}

    h2:first-of-type {
		margin-top: 1em;
        max-width: 10em;
    }
	
    p{
        max-width: 40em;
    }

	& > :first-child{
        margin-top: 0px;
    }
	
	& > :last-child {
		margin-bottom: 0;
	}
}

@media (min-width:50em){
    .highlight{
        padding: var(--m-box-padding);
    }
}

figure {
	background-color: var(--c-brand-3);
	border-radius: var(--br-box);
	margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

figure img {
	object-fit: contain;
	width: 70%;
}

ul,
p {
	margin: 1.5em 0;
	text-wrap: pretty;
}

li h3 {
	margin: 0;
}

img { display: block; max-width: 100%; }
a { color: var(--c-brand-1); }
ul, ol { padding-left: var(--space-md); }
li { margin-bottom: var(--space-xs); }

/* ─── Site header / nav ─────────────────────────────────────── */
header {
	align-content: center;
	align-items: center;
	display: flex;
	justify-content: space-between;
    position: sticky;
    top: 0px;
    z-index: 1000; /* prevent overlap issues */
    background-color: var(--c-brand-1);
    margin-top: 4em;
    padding-top: 1em;
    padding-bottom: 1em;
    margin-bottom: 4em;
}

header .logo {
	flex: 1 1 auto;
	max-width: min(35%, 10em);
	transform: translateY(10%);
}

header nav {
	display: flex;
	gap: var(--space-sm);
}

header nav a {
	color: var(--c-text-accent);
	font-size: var(--font-sm);
	text-decoration: none;
}

.button {
	border: 1.5px solid;
	border-radius: 0.8em;
	padding: 0.8em 1.2em;
    font-weight: bold;
    display: inline-flex;
    align-items: center;
    gap: 0.5em;
}

.button svg{
    width: calc( var(--font-sm) * 1.25);
    height: calc( var(--font-sm) * 1.25);
    fill: currentColor;
}

.button:hover{
    background-color: var(--c-brand-2);
    color: var(--c-brand-1-text);
    border-color: var(--c-brand-2);
}

.hero {
	display: flex;
	flex-direction: column;
}

.hero figure {
	aspect-ratio: 1;
	order: -1;
    height: min(100%, 40em);
}

@media (min-width:60em) {
	.hero {
		justify-content: center;
		max-height: 40em;
        padding-right: 55%;
		position: relative;
	}
	
	.hero h1 {
		margin: 0;
	}
	
	.hero figure {
		top: 0;
		right: 0;
		margin-right: var(--m-page-margin);
		position: absolute;
	}
}

@media (max-width:50em){
    .hero{
        padding-top: 0;
    }
    .hero h1 {
        margin-top: 1em;
    }
}

.locations {
	text-wrap: balance;
    width: fit-content
}

.locations h2 {
	border-bottom: 1px solid var(--c-border);
	width: 100%;
	margin-bottom: 1.5em;
	padding-bottom: .5em;
}

.locations img {
	display: inline-block;
	margin: 0.5em 2em 1.5em 0;
}

.locations img:last-child {
    margin-right: 0;
}

.badge {
	background: var(--c-bg-page);
	color: var(--c-text-negative);
	font-family: var(--font-display);
	font-size: var(--font-xl);
	font-weight: bold;
	width: 3em;
	height: 3em;
	border-radius: 50%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	line-height: 1;
	box-shadow: 0 4px 16px rgba(245,200,66,0.4);
	flex-shrink: 0;
	margin-left: auto;
}

.badge small {
	font-size: var(--font-xs);
	font-weight: 600;
	letter-spacing: .0625em;
}

@media (min-width:40em) {
	.about {
		padding-right: clamp(4em,30%,20em);
		position: relative;
	}
	
	.about .badge {
		margin: var(--m-box-padding);
		position: absolute;
		right: 0;
		top: 0;
	}
}

.how-it-works {
    h2{
        margin-top: 0.5em;
    }
}

@media (min-width:50em) {
    .how-it-works {
        padding-top: 0;
    }
}


.steps {
	counter-reset: steps;
	list-style-type: "";
	margin-inline: auto;
	max-width: 40em;
	padding: 0;
}

.steps > li {
	counter-increment: steps;
	display: flex;
	flex-direction: column;
	margin: 0;
	padding: calc( 2 * var(--m-measure) ) 0;
	padding-top: calc( 3 * var(--m-measure) + min(40vw, 17rem) );
	padding-left: clamp(4em, 10%, 7em);
	position: relative;
}

.steps > li + li {
	border-top: 2px solid var(--c-border);
}

.steps > li::before {
	content: counter(steps) ".";
	font-family: var(--font-display);
	font-size: calc( 1.5 * var(--font-xl));
	font-weight: bold;
	left: 0;
	position: absolute;
    top: calc(3 * var(--m-measure) + min(40vw, 17rem));
    margin-top: -0.3em;
	
}

.steps h3 {
	
    padding-left: var(--space-md);
}

.steps ul {
	list-style-type: disc;
}

.steps figure {
	aspect-ratio: 1;
	background-color: var(--c-brand-3);
	background-clip: border-box;
	border-radius: 50%;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	flex-shrink: 0;
	left: 50%;
	max-width: 50%;
	order: -1;
	padding: min(1em, 5vw);
	position: absolute;
	top: calc( 1.5 * var(--m-measure) );
	transform: translateX(-50%);
	width: min(40vw, 15em);
	
	img {
		display: block;
		object-fit: contain;
	}
}

@media (min-width:75em) {
	.steps {
		display: flex;
		max-width: none;
	}
	
	.steps > li {
		flex: 1;
		padding-right: var(--m-page-gutter);
		padding-bottom: 0;
        padding-top: calc( 3 * var(--m-measure) + min(40vw, 6rem) );

	}
    
    .steps figure{
        top: calc( 1.5 * var(--m-measure) + min(20vw, 3rem) );
        transform: translate(-50%, -50%);
    }

    .steps ul {
        margin-bottom: 0;
    }
	
	.steps > li::before {
        font-size: clamp(var(--font-xl), 15vw, calc( 1.2 * var(--font-xl) ));
		margin-left: var(--m-page-gutter);
        top: calc(3 * var(--m-measure) + min(40vw, 6rem));
	}
	
	.steps > li + li {
		border-left: 2px solid var(--c-border);
		border-top: none;
	}
}

/* ! FAQ */

.faq details {
	margin: .75em 0;
}

.faq summary {
	border: 1px solid var(--c-border);
	border-radius: var(--br-box);
	padding: var(--space-md) var(--space-lg);
	align-items: center;
	cursor: pointer;
	display: flex;
	font-weight: bold;
    font-size: var(--font-base);
	list-style: none;
	justify-content: space-between;
}

.faq summary::after {
	content: '+';
	font-size: var(--font-md);
	flex-shrink: 0;
	font-weight: normal;
	line-height: 1;
	opacity: 0;
	transition: transform 0.2s, opacity .2s linear;
    background: var(--c-brand-3);
    width: 1em;
    height: 0.5em;
    padding-bottom: 0.25em;
    padding-top: 0.25em;
    border-radius: 0.25em;
    
    text-align: center;
	text-box: trim-both ex alphabetic;
}

@media (hover: hover) {
    .faq summary:hover::after {
        opacity: 1;
    }
}

.faq details[open] summary {
	background-color: var(--c-brand-3);
}

.faq details[open] summary::after {
	transform: rotate(45deg);
    opacity: 1;
}

.faq details p {
}

.faq h2{
    margin: 0 0 var(--m-measure);
    font-size: var(--font-xl);
}

.faq h3{
    margin-bottom: 1em;
    margin-top: 4em;
    text-transform: uppercase;
}

.faq a{
    color: --var(--c-text-negative);

}

@media (min-width:50em) {
	.faq {
		display: grid;	
		grid-template-columns: clamp(10em, 40%, 20em) 1fr;
		column-gap: var(--m-page-gutter);
	}
	
	.faq > * {
		grid-column: 2;
	}
	
	.faq h2 {
		grid-column: 1;
		grid-row: 1 / span 3;
        margin-top: 1.2em;
        font-size: var(--font-lg);
	}
}

/* ! Footer */

footer {
	border-top: 2px solid var(--c-border);
	margin: var(--m-measure-double) var(--m-page-margin) 0;
	padding: var(--m-measure) 0;
	display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    position: relative;

    ul{
        list-style: none;
        padding: 0;
        margin: 0;
		text-wrap: balance;
		
		li {
			display: inline;
			text-wrap: nowrap;
		}
		
		li:not(:last-child)::after {
			content: ", ";
		}
		
		li:last-child::after {
			content: ".";
		}
    }

	ul a{
		text-decoration: none;
	}

	ul a:hover{
		color: var(--c-brand-2);
	}

    strong{
        display: block;
        font-size: var(--font-lg);
        color: var(--c-text-accent);
        font-family: var(--font-display);
        font-weight: bold;
        line-height: 1.05;
        text-wrap: balance;
        margin-top: 1em;
        margin-bottom: 1em;
    }

    .footer-content{
        margin-bottom: var(--m-measure);
    }
}

footer a {
	color: inherit;
}

@media (min-width:60em) {
    footer {
        flex-direction: row;
        justify-content: center;
        align-items: flex-start;
        max-width: 80em;
        margin: var(--m-measure-double) auto 0;

        strong{
            font-size: var(--font-md);
            margin-top: 0;
        }
    }

    footer .footer-content{
        max-width: 30%;
        margin: 0 var(--m-measure);
    }
}