body {
  font-family: "Inter", "Open Sans", sans-serif;
}

.bg-plusses {
  background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='rgb(0,0,0)' fill-opacity='0.4'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  mix-blend-mode: overlay;
}

.branded-bg {
  position: absolute;
  width: 150vw;
  height: 1000px;
  transform: translate3d(-50%, -50%, 0);
  -webkit-mask-image: radial-gradient(farthest-side, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0));
          mask-image: radial-gradient(farthest-side, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0));
  background-image: linear-gradient(90deg,#0ea5e9,#8b5cf6);
  filter: hue-rotate(0deg);
}

.btn {
  line-height: 1;
  overflow: hidden;
  box-sizing: border-box;
  box-shadow: rgb(109, 40, 217) 0 0 0 1px, rgba(109, 40, 217, 0.25) 0 2px 4px 0, rgba(109, 40, 217, 0.25) 0 1px 2px 0;
  transition-duration: 0.2s, 0.2s, 0.2s;
  transition-timing-function: ease, ease, ease;
  transition-delay: 0s, 0s, 0s;
  transition-property: box-shadow, background-color, border-color;
  position: relative;
}

.btn::after {
  content: "";
  background-image: linear-gradient(rgb(255, 255, 255), rgba(255, 255, 255, 0) 100%);
  display: block;
  opacity: 0.1;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  transition-duration: 0.5s;
  transition-timing-function: ease;
  transition-delay: 0s;
  transition-property: opacity;
}

.btn:focus,
.btn:hover {
  box-shadow: rgb(17, 26, 74) 0 0 0 1px, rgba(0, 0, 0, 0.25) 0 2px 4px 0, rgba(0, 0, 0, 0) 0 0 0 0;
}

.btn-secondary {
  line-height: 1;
  overflow: hidden;
  box-sizing: border-box;
  box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0), 0 0 0 1px rgba(0, 0, 0, 0.1);
  transition-duration: 0.2s, 0.2s, 0.2s;
  transition-timing-function: ease, ease, ease;
  transition-delay: 0s, 0s, 0s;
  transition-property: box-shadow, background-color, border-color;
  position: relative;
}

.btn-secondary::after {
  content: "";
  background-image: linear-gradient(rgb(255, 255, 255), rgba(255, 255, 255, 0) 100%);
  display: block;
  opacity: 0.1;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  transition-duration: 0.5s;
  transition-timing-function: ease;
  transition-delay: 0s;
  transition-property: opacity;
}

.btn-secondary:focus,
.btn-secondary:hover {
  box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0), 0 0 0 1px rgba(0, 0, 0, 0.2), 0 0 0 0 rgba(0, 0, 0, 0);
}

.btn:hover::after,
.btn:focus::after,
.btn-secondary:hover::after,
.btn-secondary:focus::after {
  opacity: 0.15;
}

.btn-secondary {
  line-height: 1;
  overflow: hidden;
  box-sizing: border-box;
  box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0), 0 0 0 1px rgba(0, 0, 0, 0.1);
  transition-duration: 0.2s, 0.2s, 0.2s;
  transition-timing-function: ease, ease, ease;
  transition-delay: 0s, 0s, 0s;
  transition-property: box-shadow, background-color, border-color;
  position: relative;
}

.btn-secondary::after {
  content: "";
  background-image: linear-gradient(rgb(255, 255, 255), rgba(255, 255, 255, 0) 100%);
  display: block;
  opacity: 0.1;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  transition-duration: 0.5s;
  transition-timing-function: ease;
  transition-delay: 0s;
  transition-property: opacity;
}

.btn-secondary:focus,
.btn-secondary:hover {
  box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0), 0 0 0 1px rgba(0, 0, 0, 0.2), 0 0 0 0 rgba(0, 0, 0, 0);
}

.btn:hover::after,
.btn:focus::after, 
.btn-secondary:hover::after,
.btn-secondary:focus::after {
  opacity: 0.15;
}

/** FAQ **/
details {
	padding: 10px;
}

details summary {
	transition: margin 150ms ease-out;
}

details[open] summary {
	margin-bottom: 10px;
}