*,::after,::before{box-sizing:border-box}blockquote,body,dd,dl,figure,h1,h2,h3,h4,p{margin:0}ol[role=list],ul[role=list]{list-style:none}html:focus-within{scroll-behavior:smooth}body{min-height:100vh;text-rendering:optimizeSpeed;line-height:1.5}a:not([class]){-webkit-text-decoration-skip:ink;text-decoration-skip-ink:auto}img,picture{max-width:100%;display:block}button,input,select,textarea{font:inherit}@media (prefers-reduced-motion:reduce){html:focus-within{scroll-behavior:auto}}

/* ------------------------------------------------------------------- */

/* @link https://utopia.fyi/type/calculator?c=320,16,1.2,1240,18,1.2,5,2,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12 */

:root {
  --step--2: clamp(0.7813rem, 0.5699rem + 1.0568vw, 1.3889rem);
  --step--1: clamp(0.9375rem, 0.6839rem + 1.2681vw, 1.6667rem);
  --step-0: clamp(1.125rem, 0.8207rem + 1.5217vw, 2rem);
  --step-1: clamp(1.35rem, 0.9848rem + 1.8261vw, 2.4rem);
  --step-2: clamp(1.62rem, 1.1817rem + 2.1913vw, 2.88rem);
  --step-3: clamp(1.944rem, 1.4181rem + 2.6296vw, 3.456rem);
  --step-4: clamp(2.3328rem, 1.7017rem + 3.1555vw, 4.1472rem);
  --step-5: clamp(2.7994rem, 2.042rem + 3.7866vw, 4.9766rem);
}

:root {
   --s-2: var(--step--2);
   --s-1: var(--step--1);
   --s0: var(--step-0);
   --s1: var(--step-1);
   --s2: var(--step-2);
   --s3: var(--step-3);
   --s4: var(--step-4);
   --s5: var(--step-5);
   --ratio: 1.5;
   --gutter: clamp(var(--s1), 5% , var(--s4));
   --measure: 64ch;
}

body {
   font-size: var(--s0);
   line-height: var(--ratio);
}

h1, .h1 {
   font-size: var(--s4);
   line-height: calc(var(--ratio) * 0.8);
}

h2, .h2 {
   font-size: var(--s3);
   line-height: calc(var(--ratio) * 0.8);
}

h3, .h3 {
   font-size: var(--s2);
   line-height: calc(var(--ratio) * 0.8);
}

h4, .h4 {
   font-size: var(--s1);
}

small {
   font-size: var(--s-1);
}

.stack > * + * {
   margin-top: var(--stack-space, var(--s1));
}

.stack-s-2 { --stack-space: var(--s-2); }
.stack-s-1 { --stack-space: var(--s-1); }
.stack-s0 { --stack-space: var(--s0); }
.stack-s2 { --stack-space: var(--s2); }
.stack-s3 { --stack-space: var(--s3); }
.stack-s4 { --stack-space: var(--s4); }
.stack-s5 { --stack-space: var(--s5); }

.mt-1 { margin-top: var(--s1); }
.mt-2 { margin-top: var(--s2); }
.mt-3 { margin-top: var(--s3); }
.mt-4 { margin-top: var(--s4); }
.mt-5 { margin-top: var(--s5); }

.mb-1 { margin-bottom: var(--s1); }
.mb-2 { margin-bottom: var(--s2); }
.mb-3 { margin-bottom: var(--s3); }
.mb-4 { margin-bottom: var(--s4); }
.mb-5 { margin-bottom: var(--s5); }

.pb-1 { padding-bottom: var(--s1); }
.pb-2 { padding-bottom: var(--s2); }
.pb-3 { padding-bottom: var(--s3); }
.pb-4 { padding-bottom: var(--s4); }
.pb-5 { padding-bottom: var(--s5); }

.pt-1 { padding-top: var(--s1); }
.pt-2 { padding-top: var(--s2); }
.pt-3 { padding-top: var(--s3); }
.pt-4 { padding-top: var(--s4); }
.pt-5 { padding-top: var(--s5); }


/* ------------------------------------------------------------------- */

.center {
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   margin-left: auto;
   margin-right: auto;
}

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

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

.text-nowrap {
   white-space: nowrap;
}

.text-uppercase {
   text-transform: uppercase;
}

.text-smaller {
   font-size: 0.8em;
}

.container {
   max-width: calc(var(--measure) + 2 * var(--gutter));
   margin-left: auto;
   margin-right: auto;
   padding: 0 var(--gutter);
   position: relative;
}

/* -------------------------------------------------------------------- */

html {
	background-color: #FDF9F0;
	color: #2C1E31;
	
	font-family: "Asap", sans-serif;
	font-optical-sizing: auto;
	font-weight: 400;
	font-style: normal;
	font-variation-settings: "wdth" 87.5;
}

.nav {
	position: absolute;
	z-index: 100;
}

.hero {
	background: #26203F;
	background: linear-gradient(90deg, rgba(38, 32, 63, 1) 0%, rgba(38, 32, 63, 1) 49%, rgba(84, 51, 93, 1) 51%, rgba(84, 51, 93, 1) 100%);
	position: relative;
	margin-bottom: calc(3 * var(--s4));
}

.hero .cover {
	margin: auto;
	min-height: 24em;
	object-fit: cover;
}

.hero .logo {
	position: absolute;
	left: 50%;
	right: 50%;
	transform: translate(-50%, -50%);
	width: 12em;
	max-width: 60vw;
}

p, h1, h2, h3, h4, h5, li {
	max-width: var(--measure);
	text-wrap: pretty;
}

.nav {
	padding: 1rem 1rem;
	display: flex;
	justify-content: flex-end;
	width: 100%;
}

a.button {
	border-radius: var(--s-1);
	background-color: #3ED452;
	display: inline-block;
	padding: 0.5em 1em 0.7em;
	/* line-height: 2em; */
	text-decoration: none;
	color: #fff;
	text-shadow: 0 3px 0 #2C1E31, -2px 0px 0 #2C1E31, 2px 0px 0 #2C1E31, 0px -2px 0 #2C1E31, -1px -1px 0 #2C1E31, 1px -1px 0 #2C1E31, 1px 1px 0 #2C1E31, -1px 1px 0 #2C1E31;
	font-weight: 800;
	letter-spacing: 3%;
	border: 0.1em solid #2C1E31;
	box-shadow: inset 0 -0.2em 0 rgba(0, 0, 0, 0.3), inset 0 -1.5em 0 #1AA149, 0 0.2em 0 rgba(0, 0, 0, 0.2);
}

ul.navigation {
	list-style-type: none; /* Removes default bullet points */
	display: flex;
	gap: var(--s0);
	margin-left: 0;
	padding: 0;
}

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

.grid {
	display: grid;
	grid-gap: var(--grid-gap, var(--s1));
	grid-template-columns: repeat(auto-fit, minmax(var(--grid-block, 22ch), 1fr));
}

.card {
	background-color: #fff;
	padding: 1em;
	border-radius: 1em;
	box-shadow: 0 0 0 0.1em rgba(0,0,0,0.1);
	display: flex;
	flex-direction: column;
}

.card > :has(+ footer) {
	margin-bottom: var(--stack-space, var(--s1));
}

.card > footer {
	justify-self: end;
	margin-top: auto;
}

.strip {
	gap: var(--s1);
	width: 100vw;
	padding: 0 var(--gutter);
	padding-bottom: var(--s-1);
	scrollbar-width: none;
	display: flex;
	overflow-x: scroll;
}

.strip > :first-child {
	margin-inline-start: auto;
}

.strip > :last-child {
	margin-inline-end: auto;
}

.reviews {
	padding-top : var(--s1);
	padding-bottom : var(--s1);
}

.reviews .card {
	width: 40ch;
	flex-shrink: 0;
	max-width: 80vw;
}

.screenshots > img {
	height: 25em;
	max-height: 90vh;
}