@font-face {
	font-family: "Plus Jakarta Sans";
	src: local("Plus Jakarta Sans"),
		url("/fonts/PlusJakartaSans-VariableFont_wght.ttf") format("truetype");
	font-weight: 100 900;
	font-style: normal;
}

:root {
	--primary-300: hsl(0, 68%, 49%);

	--spacing: 0.25rem; /* 4px */
}

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

html,
body {
	margin: 0;
	padding: 0;
	background-color: rgb(249, 250, 250);
}

body {
    display: flex;
    flex-direction: column;
    min-height: 100dvh;
	font-family: "Plus Jakarta Sans", sans-serif;
    letter-spacing: -0.02em;
}

main {
    flex: 1;
}

.hero {
	background-image: url(./sflows-bg.png);
	background-repeat: no-repeat;
	background-position: top center;
	background-size: cover;
}

.hero::after {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: linear-gradient(
		rgba(249, 250, 250, 0) 65%,
		rgba(249, 250, 250, 1) 100%
	);
}

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

ul {
    padding: 0;
    margin-top: 0;
    margin-bottom: 0;
}

ul.inline-list {
    list-style: none;
}

ul.inline-list li {
    display: inline-block;
    margin: 0.25rem 0.5rem;
}

ul.inline-list li::before {
    content: "";
    display: inline-block;
    vertical-align: middle;
    position: relative;
    bottom: 0.1em;
    margin-inline-end: 0.25rem;
    height: 1em;
    width: auto;
    aspect-ratio: 4 / 3;
    background-image: url("data:image/svg+xml,%3Csvg width='24' height='18' viewBox='0 0 24 18' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_12008_18644)'%3E%3Cpath d='M0 0H15C19.9706 0 24 4.02944 24 9C24 13.9706 19.9706 18 15 18H0V0Z' fill='%23D22828'/%3E%3Cmask id='mask0_12008_18644' style='mask-type:luminance' maskUnits='userSpaceOnUse' x='3' y='0' width='18' height='18'%3E%3Cpath d='M21 0H3V18H21V0Z' fill='white'/%3E%3C/mask%3E%3Cg mask='url(%23mask0_12008_18644)'%3E%3Cpath d='M15.129 8.24952L11.106 4.22652L12.1665 3.16602L18 8.99952L12.1665 14.833L11.106 13.7725L15.129 9.74952H6V8.24952H15.129Z' fill='%23F3F3F3'/%3E%3C/g%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_12008_18644'%3E%3Crect width='24' height='18' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E%0A");
    background-size: contain;
    background-repeat: no-repeat;
}

h1 {
    line-height: 1.2;
}

p, ul {
    color: #464646;
}

p {
    line-height: 1.4;
    margin-top: 0;
}

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

a:hover {
    text-decoration: underline;
}

sub, sup {
    vertical-align: baseline;
    font-size: 50%;
    top: -.5em;
    line-height: 0;
    position: relative;
}

.btn {
    text-decoration: none;
    display: inline-block;
    padding: calc(var(--spacing) * 3) calc(var(--spacing) * 10);
    border-radius: 1.5rem;
    font-weight: 600;
    transition: background-color 0.3s ease, color 0.3s ease;
    letter-spacing: 0;
}

.btn-primary {
    background-color: var(--primary-300);
    color: #ffffff;
}

.btn-primary:hover {
    background-color: hsl(0, 68%, 40%);
}

.container {
	width: 100%;
	margin: 0 auto;
    padding-left: 1rem;
    padding-right: 1rem;
	@media (width >= 40rem /* 640px */) {
		max-width: 40rem /* 640px */;
	}
	@media (width >= 48rem /* 768px */) {
		max-width: 48rem /* 768px */;
	}
	@media (width >= 64rem /* 1024px */) {
		max-width: 64rem /* 1024px */;
	}
	@media (width >= 80rem /* 1280px */) {
		max-width: 80rem /* 1280px */;
	}
	@media (width >= 96rem /* 1536px */) {
		max-width: 96rem /* 1536px */;
	}
}

.relative {
	position: relative;
}

.z-10 {
	z-index: 10;
}

.flex {
	display: flex;
}

.flex-col {
	flex-direction: column;
}

.items-center {
	align-items: center;
}

.justify-center {
	justify-content: center;
}

.justify-between {
    justify-content: space-between;
}

.my-6 {
	margin-block: calc(var(--spacing) * 6) /* 1.5rem = 24px */;
}

.mt-4 {
    margin-top: calc(var(--spacing) * 4) /* 1rem = 16px */;
}

.mt-8 {
	margin-top: calc(var(--spacing) * 8) /* 2rem = 32px */;
}

.mb-2 {
    margin-bottom: calc(var(--spacing) * 2) /* 0.5rem = 8px */;
}

.mb-8 {
	margin-bottom: calc(var(--spacing) * 8) /* 2rem = 32px */;
}

.p-3 {
	padding: calc(var(--spacing) * 3) /* 0.75rem = 12px */;
}

.p-4 {
    padding: calc(var(--spacing) * 4) /* 1rem = 16px */;
}

.px-5 {
	padding-inline: calc(var(--spacing) * 5) /* 1.25rem = 20px */;
}

.py-3 {
	padding-block: calc(var(--spacing) * 3) /* 0.75rem = 12px */;
}

.pt-8 {
	padding-top: calc(var(--spacing) * 8) /* 2rem = 32px */;
}

.pt-16 {
    padding-top: calc(var(--spacing) * 16) /* 4rem = 64px */;
}

.pb-16 {
    padding-bottom: calc(var(--spacing) * 16) /* 4rem = 64px */;
}

.gap-3 {
	gap: calc(var(--spacing) * 3) /* 0.75rem = 12px */;
}

.bg-gray-0 {
	background-color: rgb(249, 250, 250);
}

.bg-gray-50 {
	background-color: hsl(210, 16%, 96%);
}

.rounded-3xl {
	border-radius: 1.5rem;
}

.rounded-t-3xl {
	border-top-left-radius: 24px;
	border-top-right-radius: 24px;
}

.overflow-hidden {
	overflow: hidden;
}

.shadow-2xl {
	box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

.text-white {
	color: #ffffff;
}

.text-primary-300 {
	color: var(--primary-300);
}

.font-light {
	font-weight: 300;
}

.font-medium {
	font-weight: 500;
}

.font-semibold {
	font-weight: 600;
}

.font-bold {
    font-weight: 700;
}

.text-center {
    text-align: center;
}

.text-balance {
    text-wrap: balance;
}

.block {
	display: block;
}

.small {
	font-size: 0.875rem;
	line-height: 1.25rem;
    letter-spacing: 0;
}

.text-xs {
    font-size: 0.75rem;
    line-height: 1rem;
}

.text-3xl {
	font-size: 1.875rem;
	line-height: 2.25rem;
}

.text-4xl {
	font-size: 2.25rem;
	line-height: 2.5rem;
}

.text-center {
	text-align: center;
}