@font-face {
  font-family: 'Effra Regular';
  src: url('/fonts/Effra-Regular.ttf');
  font-display: swap;
}

html {
  scroll-padding-top: 2rem;
}

html, body {
  background: #1e3266 url(/img/scatter.svg) repeat;
  background-size: 50%;
  color: #FFF;
}

body {
  font-family: 'Effra Regular', -apple-system, 'BlinkMacSystemFont', 'ui-sans-serif', 'Helvetica', 'Arial', 'sans-serif';
  margin: 0 auto;
  padding: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  line-height: 1.4;
  min-height: 100vh;
  /* mobile viewport bug fix */
  min-height: -webkit-fill-available;
  max-width: 90rem;
}

body.login {
  background: #FFF;
}

.logotype {
  font-weight: 400;
  padding: 0;
  display: inline-flex;
  align-items: center;
  top: 0.1em;
}

.logotype strong {
  font-weight: 600;
}

.logotype svg {
  vertical-align: middle;
}

a.logotype {
  text-decoration: none;
}

a {
  color: #30719d;
}

a:visited {
  color: #1F4431;
}

header {
  color: #FFF;
}

header nav {
  margin: 0 1rem;
}

header nav ul {
  line-height: 1;
  display: flex;
  align-items: baseline;
  list-style: none;
  margin: 0;
  padding: 0;
  min-height: 4rem;
}

  header nav li {
    margin: 0 1em 0 0;
    padding: 0;
    display: block;
    position: relative;
    top: 1px;
    font-weight: 600;
  }
  
  header nav li.brand {
    font-size: 1.5em;
    margin: 0;
  }

  header nav li.features {
    margin-left: auto;
  }
  
  header nav ul li a {
    display: block;
    padding: 0.5rem 0;
    text-decoration: none;
  }
  
  header nav ul li a,
  header nav ul li a:visited {
    color: #FFF;
  }

  header nav ul li a:hover {
    color: #FF9;
  }
  
  header nav ul li.questions {
    margin-right: auto;
  }
  
  header nav li.sign-up {
    text-align: right;
  }

  .sign-up a {
    display: inline-block;
    padding: 0.5rem 1rem;
    color: #FFF;
    border-radius: 0.25rem;
    border: 1px solid #FFF;
  }

@media only screen and (max-width: 560px) {
  header {
    top: -3rem;
  }
  
  header nav {
    padding: 0 0.75rem;
    margin: 0;
  }
  
  header nav ul {
    flex-wrap: wrap;
    margin: 1rem 0
  }
  
  header nav li.brand {
    padding: 0;
    margin: 0 100% 0 0;
  }
  
  header .sign-up {
    margin: 0 0 0 auto;
    text-align: center;
    position: absolute;
    top: 1.5rem;
    right: 1rem;
  }
  
  header nav a {
    margin-top: 0.25rem;
  }
}

@media only screen and (min-width: 800px) {  
  header {
    position: sticky;
    position: -webkit-sticky;
    top: -1px;
    z-index: 100;
    
  }
  
  header nav {
    max-width: calc(100% - 6rem);
    margin: 1rem auto 0 auto;
    padding: 0 1rem;
    background: #1e3266CC;
    border-radius: 0.5rem;
  }

  header nav ul {
    margin: 0 1rem;
  }
  
  header nav li {
    margin: 0 1rem;
    padding: 1rem 0;
  }

  header nav li.brand,
  header nav li.sign-up {
    flex-basis: 25%;
  }
  
  header nav li:last-child {
    margin: 0;
  }
}

main {
  padding: 0;
  width: 100%;
  margin: 0 auto;
  flex: 1;
}

.hero p {
  margin: 0 0 1rem 0;
  color: #FFFFFFCC;
}

.hero p strong {
  color: #FFC;
}

.hero img,
.hero video {
  display: block;
  max-height: 32rem;
}

.content {
  margin: 0 auto;
  padding: 1rem;
}

main > .content:nth-child(odd) {
  background: none;
  color: #FFF;
}

main > .content:nth-child(even) {
  background: #FFF;
  color: #1e3266;
}

@media only screen and (min-width: 800px) {
  .content {
    padding: 4rem 3rem 12rem 3rem;
  }
}

h1 {
  font-size: 2rem;
  margin: 0 0 1rem 0;
  font-weight: normal;
  line-height: 1.1;
  color: #FFFFFFAA;
}

h1 strong {
  font-weight: bold;
  color: #FFF;
}

@media only screen and (min-width: 1025px) {
  h1 {
      font-size: 2.25rem;
  }
}

h2 {
  text-align: center;
  font-size: 1.1rem;
  text-transform: uppercase;
  margin: 2rem auto;
  position: relative;
  width: 8rem;
}

@media only screen and (min-width: 800px) {
h2:before,
h2:after {
  display: block;
  content: '';
  position: absolute;
  top: 50%;
  width: 6rem;
  border-top: 1px solid #DDD;
}
}

h2:before {
  left: -7rem;
}

h2:after {
  right: -7rem;
}

h3 {
  font-size: 2rem;
  line-height: 1.1;
  margin: 0 0 0.5rem 0;
  font-weight: bold;
}

p {
  line-height: 1.5;
}

p.intro {
  font-size: 1.2rem;
}

#features p strong {
  background: #FFC;
}

img,
video {
  max-width: 100%;
  max-height: 20rem;
  height: auto;
}

@media only screen and (max-width: 799px) { 

  #features .thing > div {
    padding: 3rem 1rem;
  }

  #features.thing > div:first-child {
    padding-bottom: 0;
  }

  #features .thing > div:last-child {
    padding-top: 0;
  }

  .content {
    padding-bottom: 9rem;
  }

}

.team {
  display: block;
  list-style: none;
  margin: 0;
  padding: 3rem 6rem;
}

.team li {
  padding: 1rem 0;
  margin: 0 auto;
  text-align: center;
  color: #FFFFFF99;
  max-width: 15rem;
}

.team img {
  border-radius: 50%;
  overflow: hidden;
  width: 100%;
  display: block;
  border: 2px solid #FFF;
  margin: 0 0 1rem 0;
}

.team strong {
  display: block;
  color: #FFF;
}

@media only screen and (min-width: 768px) { 
  
  .thing {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
  }

  .thing > * {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    max-width: 50rem;
  }
  
  .thing > div {
    width: 50%;
    box-sizing: border-box;
    padding: 3rem;
  }

  .team {
    display: flex;
    gap: 4rem;
    justify-content: space-around;
  }

  .team li {
    width: 10rem;
  }
}

#questions .thing {
  align-items: baseline;
}

.hero .thing:nth-child(odd),
#features .thing:nth-child(odd) {
  flex-direction: row-reverse;
}

.hero .thing > div:nth-child(1) {
  padding: 0 1rem;
}

.hero .thing div:nth-child(2) {
  padding: 1rem;
}

div:not(.hero) .content .thing img {
  max-width: 80%;
  height: 16rem;
  margin: 0 auto;
}

#features .thing div:nth-child(2) {
  text-align: center;
}

form {
  margin: 1rem auto;
  width: 80ch;
  max-width: 100%;
  padding: 2rem 0;
}

fieldset {
  border: none;
  padding: 0;
  margin: 0;
}

fieldset p:last-child {
  margin-bottom: 0;
}

legend {
  font-size: 2rem;
  margin: 0;
  padding: 0;
  font-weight: 600;
}

@media only screen and (min-width: 800px) {
  form fieldset > div {
    display: flex;
    justify-content: space-between;
  }

  form fieldset > div > div {
    flex-basis: calc(50% - 2rem);
  }
}

p.field {
  margin: 1rem 0;
}

label {
  font-weight: bold;
  display: block;
  line-height: 2.5rem;
  margin: 0 0.5rem 0 auto;
}

input[type=text],
textarea {
  padding: 0.5rem;
  border: 2px solid #DDD;
  margin: 0;
  font-size: 1rem;
  border-radius: 4px;
  box-shadow: inset 2px 2px 2px rgba(0,0,0, 0.05);
  width: 100%;
  box-sizing: border-box;
}

textarea {
  height: 8.25rem;
}

button {
  padding: 0.5rem 2rem;
  color: #FFF;
  border-radius: 0.25rem;
  border: 1px solid #FFF;
  background: none;
  font-size: 1.25rem;
  text-transform: uppercase;
  font-size: 0.85rem;
  font-weight: bold;
  margin: 0 0 0 auto;
  line-height: 1;
  float: right;
}

#features {
  background: #FFF url(/img/cloudy-flipped.svg) no-repeat bottom;
  background-size: 100% 8rem;
}

#use-cases {
  background: url(/img/cloudy.svg) no-repeat bottom;
  background-size: 100% 8rem;
}

#questions {
  overflow: hidden;
  background: #FFF url(/img/grassy.svg) no-repeat 0 bottom;
  background-size: 100% 8rem;
}

#contact {
  overflow: hidden;
  background: #32661E url(/img/muddy.svg) no-repeat 0 bottom;
  background-size: 100% 8rem;
}

#questions h3 {
  font-size: 1rem;
  margin: 3rem 0 0 0;
}

#questions .thing div h3:first-child {
  margin-top: 0;
}

#questions h3,
#questions p {
  display: flex;
  align-items: baseline;
}

#questions h3:before,
#questions p:before {
  display: block;
  content: 'A';
  padding: 0.5rem;
  border-radius: 1rem;
  line-height: 1;
  font-size: 1rem;
  background: #32661E;
  color: #FFF;
  text-align: center;
  width: 2rem;
  min-width: 2rem;
  height: 2rem;
  margin: 0 0.5rem 0 0;
  font-weight: bold;
  box-sizing: border-box;
}

#questions h3:before {
  content: 'Q';
  background: #1e3266;
}

#use-cases h3 {
  text-align: center;
}

footer {
  padding: 2rem 1rem;  
  font-size: 0.8rem;
  text-align: center;
  background: #795502 url(/img/mud.svg) repeat;
  background-size: 50%;
}

footer .content {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  padding: 0 3rem;
}

footer form {
  margin: 0 auto;
}

footer p {
  flex-basis: 100%;
}

footer a,
footer a:visited {
  color: #FFF;
  font-weight: 500;
}

@media only screen and (min-width: 800px) {
  footer {
    text-align: left;
  }
  
  footer form {
    margin: 0;
  }
  
  footer p {
    flex-basis: 45%;
  }
  
  footer p:last-child {
    text-align: right;
  }
}

.hero {
  position: relative;
  overflow: hidden;
  background: url(/img/cloudy.svg) no-repeat bottom;
  background-size: 100% 16rem;
  color: #FFF;
}

@media only screen and (min-width: 800px) {
  .hero {
    height: calc(100vh - 5rem);
    max-height: 40rem;
  }
}

.chrome {
  border: 1px solid #FFF;
  padding: 64% 1rem 1rem 1rem;
  position:relative;
  border-radius: 1rem;
  overflow: hidden;
  background: #1e3266;
}

.chrome video {
  position: absolute;
  top: 1rem;
  left: 1rem;
  width: calc(100% - 2rem);
  height: calc(100% - 2rem);
}

.chrome.paused:after {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 5rem;
  height: 4rem;
  margin: -2rem 0 0 -2rem;
  display: block;
  border-radius: 0.5rem;
  text-align: center;
  line-height: 4rem;
  content: '▶';
  color: #FFF;
  font-size: 3rem;
  background-color: #00000088;
  z-index: 100;
  pointer-events: none;
}

.standout {
  background: #FFFFEE;
  border-radius: 0.5rem;
  color: #1e3266;
  padding: 1rem 2rem;
  margin: 2rem 1rem;
  font-size: 1.1rem;
}

.highlights {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  flex-wrap: wrap;
  margin: 1rem 0;
  padding: 0;
  list-style-type: none;
  color: #FFFFFFCC;
}

.highlights li {
  width: 50%;
  flex-shrink: 0;
  box-sizing: border-box;
  line-height: 1;
  font-size: 0.85rem;
  white-space: nowrap;
  padding: 0;
  margin: 0.5rem 0;
}

@media only screen and (min-width: 800px) {
  .highlights li {
    width: 30%;
  }
}

.highlights svg {
  height: 1.25em;
  vertical-align: bottom;
}


#contact p {
  text-align: center;
}

dl {
  text-align: center;
  margin: 2rem 0;
  padding: 0;
}

dt {
  font-size: 1rem;
  color: #FFFFFF99;
  padding: 1rem;
  margin: 0;
  text-transform: uppercase;

}

dd {
  margin: 0 0 2rem 0;
}

dd a {
  font-size: 2rem;
  color: #FFF;
  text-decoration: none;
}

@media only screen and (min-width: 800px) {
  dl {
    columns: 2;
  }
}