/* --------------------------------------------------------------
/* =SITE SPECIFIC STUFF
-------------------------------------------------------------- */
header {
	text-align: center;
	background: #EEF0EF;
	padding: 80px 0 0 0;
}
.header-container {
	width: 100%;
	max-width: 640px;
  margin: 0 auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 var(--gutter);
}
.logo {
	font-size: var(--font-size-small);
}
.hero_image {
	background: linear-gradient(360deg, #FAFAFA 0%, #EEF0EF 50%);
	padding: 12vh 0;
}
#hero-image {
	margin: 12vh auto;
}
.footer-bead {
	background: var(--text-primary);
	height: 16px;
	width: 16px;
	border-radius: 50%;
	margin: 8vh auto;
}
h1, #signup h2 {
	font-size: 32px;
	letter-spacing: -0.08rem;
	font-weight: 450;
	line-height: 115%;
}
h2 {
	font-size: var(--font-size-regular);
	font-weight: 500;
}
.faq__question {
	padding-right: 40px;
	position: relative;
	border-top: 1px solid var(--border);
	padding: 2vh 0;
	color: var(--text-secondary);
	cursor: pointer;
}
.faq__question::after {
	content: "+";
	position: absolute;
	top: 32%;
	right: 0;
	color: var(--text-secondary);
}
.faq__question.open::after {
	content: "-";
}
.faq__answer {
	color: var(--text-secondary);
	padding: 6vh 0;
	display: none;
}
input[type=email] {
  padding: 20px 30px;
  border-radius: var(--radius-regular);
  text-align: center;
  width: 100%;
  margin-bottom: 20px;
  font-size: var(--font-size-regular);
  display: block;
  border: 1px solid var(--border);
  background: var(--bg-primary);
  color: var(--text-primary);
}
input[type=email]:focus {
  border: 1px solid var(--text-primary);
}
input[type=submit] {
  padding: 20px 30px;
  border-radius: var(--radius-regular);
  text-align: center;
  width: 100%;
  font-size: var(--font-size-regular);
  display: block;
  border: 1px solid var(--text-primary);
  background: var(--text-primary);
  color: var(--bg-primary);
}


/* --------------------------------------------------------------
/* =Mobile
-------------------------------------------------------------- */
@media screen and (max-width: 821px) {
	section.bead .box {
		padding-left: 0;
		padding-right: 0;
	}
	h1, #signup h2 {
		font-size: 30px;
		margin-bottom: var(--spacer-medium);
	}
	header {
		padding: 40px 0 0 0;
	}
	#hero-image {
		width: 320px;
		display: block;
	}
}