*{box-sizing:border-box;}

html{background:#000;}

body{
  margin:0;
  background:#000;
  color:#fff;
  font-family:"Courier New", Courier, monospace;
  font-size:15px;
  line-height:1.3;
  letter-spacing:0;
}

h1,h2,p,ul,nav,a{margin:0;padding:0;}

a{color:#fff;text-decoration:none;font-family:inherit;}

video{display:block;}

.container{width:980px;margin:0 auto;position:relative;}

.container h2{font-size:22px;font-style:italic;line-height:1;font-weight:normal;}

.row{display:flex;align-items:flex-start;}

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

.notfound{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;}
.notfound a:hover{text-decoration:underline;}

.video-wrap{overflow:hidden;}
.video-wrap video{width:100%;height:100%;object-fit:cover;display:block;}

.body-copy p{margin:0 0 1em 0;}
.body-copy p:last-child{margin-bottom:0;}

/* ---- section 1 : hero ---- */

.s1-brand{
  margin:7px 0 -10px 6px;
  width:565px;
  font-size:38px;
  font-style:normal;
  letter-spacing:0.03em;
  line-height:1.2;
}

.s1-tagrow{margin:0 0 13px;}

.s1-tagline{margin:0 0 0 6px;width:474px;font-size:18px;line-height:1.2;}

.s1-nav{display:flex;align-items:center;}
.s1-nav-link{width:91px;height:25px;margin-top:8px;margin-bottom:12px;line-height:25px;}
.s1-nav-link.home{margin-left:171px;}
.s1-nav-link.about{margin-left:19px;}
.s1-nav-link.join{margin-left:19px;}
.s1-nav-link:hover{text-decoration:underline;}
.s1-nav-link.active{text-decoration:underline;}

.s1-divider{width:980px;height:1px;background:#fff;margin:0 0 52px;}

.s1-heading{margin:0 0 34px 6px;width:304px;}

.s1-media{margin:0 0 66px;}
.s1-video{width:304px;height:305px;margin:57px 0 10px;order:2;}
.s1-body{width:530px;margin:0 0 0 6px;order:1;}

/* ---- section 2 : digital cloning ---- */

.s2-heading{margin:41px 0 34px 676px;width:304px;}

.s2-media{margin:0 0 57px;}
.s2-video{width:357px;height:359px;margin:17px 0 10px;}
.s2-body{width:530px;margin:0 0 0 84px;}

/* ---- section 3 : BLYNE the AI ---- */

.s3-heading{margin:40px 0 30px 0;width:515px;}

.s3-media{margin:0 0 70px;}
.s3-video{width:380px;height:383px;margin:0 0 10px;order:2;}
.s3-body{width:530px;margin:0;order:1;}

/* ---- section 4 : gamified data collection ---- */

.s4-heading{margin:33px 0 36px 465px;width:515px;}

.s4-media{margin:0 0 56px;}
.s4-video{width:329px;height:329px;margin:77px 0 10px;}
.s4-body{width:530px;margin:0 0 0 121px;}

/* ---- section 5 : open source data ---- */

.s5-heading{margin:37px 0 36px 0;width:515px;}

.s5-media{margin:0 0 52px;}
.s5-video{width:259px;height:259px;margin:100px 0 10px;border:1px solid #fff;order:2;}
.s5-body{width:597px;margin:0;order:1;}

/* ---- section 6 : meet yourself ---- */

.s6-heading{margin:41px 0 43px 465px;width:515px;}

.s6-media{margin:0 0 30px;}
.s6-video{width:299px;height:397px;margin:20px 0 10px 28px;}
.s6-body{width:530px;margin:0 0 0 118px;}

/* ---- section 7 : join the experiment ---- */

.s7-top{position:relative;min-height:392px;}

.s7-heading{margin:54px 0 33px 64px;width:310px;}

.s7-body{width:439px;margin:0 0 29px;}

.s7-whatsapp{
  display:flex;align-items:center;justify-content:center;
  width:142px;height:34px;margin:0 0 12px 148px;
  background:#25D366;color:#000;border-radius:20px;
  border:1px solid transparent;
}
.s7-whatsapp:hover{background:#000;color:#fff;border-color:#fff;}

.s7-video{position:absolute;left:554px;top:37px;width:350px;height:355px;}

.s7-up{
  position:absolute;left:917px;top:0;width:40px;height:39px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  font-size:10px;line-height:1.2;
}
.s7-up:hover{text-decoration:underline;}

.s7-bottom{margin:37px 0 0;}
.s7-copyright{width:213px;margin:0 0 7px 5px;}
.s7-credit{width:154px;margin:0 0 7px;margin-left:603px;}

/* ---- shared: inline mailto-style link ---- */

.inline-link:hover{text-decoration:underline;}

/* ---- shared: italic quotation ---- */

.quote{font-style:italic;margin:0 0 1em 0;}

/* ---- shared: about/join bottom row ---- */

.page-bottom{justify-content:space-between;align-items:center;margin:60px 0 30px;padding:0 5px;flex-wrap:wrap;gap:16px;}
.page-copyright{margin:0;}
.page-credit{margin:0;width:154px;}
.page-up{display:flex;flex-direction:column;align-items:center;justify-content:center;width:40px;font-size:10px;line-height:1.2;text-align:center;}
.page-up:hover{text-decoration:underline;}

/* ---- about.html : team ---- */

.about-heading{margin:40px 0 30px 6px;width:304px;}
.about-media{margin:0 0 70px;justify-content:space-between;}
.about-body{width:530px;margin:0 0 0 6px;order:1;}
.about-video{width:296px;height:296px;order:2;}

/* ---- join.html : section A - let's build the future together ---- */

.joina-heading{margin:40px 0 30px 6px;width:400px;}
.joina-media{margin:0 0 60px;justify-content:space-between;}
.joina-body{width:530px;margin:0 0 0 6px;order:1;}
.joina-video{width:367px;height:367px;order:2;}
.joina-list{width:100%;margin:0 0 1em 20px;padding:0 0 0 20px;}
.joina-list li{margin-bottom:6px;}

/* ---- join.html : section B - the future starts here ---- */

.joinb-heading{margin:40px 0 30px 6px;width:400px;}
.joinb-media{margin:0 0 30px;justify-content:space-between;}
.joinb-video{width:255px;height:340px;order:1;}
.joinb-body{width:530px;margin:0;order:2;}

/* ================= responsive ================= */

@media (max-width:1020px){
  .container{width:100%;max-width:560px;margin:0 auto;padding:0 20px;}

  .fluid,
  .s1-brand,.s1-tagrow,.s1-tagline,.s1-divider,.s1-heading,.s1-media,.s1-video,.s1-body,
  .s2-heading,.s2-media,.s2-video,.s2-body,
  .s3-heading,.s3-media,.s3-video,.s3-body,
  .s4-heading,.s4-media,.s4-video,.s4-body,
  .s5-heading,.s5-media,.s5-video,.s5-body,
  .s6-heading,.s6-media,.s6-video,.s6-body,
  .s7-heading,.s7-body,.s7-whatsapp,.s7-video,.s7-up,.s7-bottom,.s7-copyright,.s7-credit,
  .about-heading,.about-media,.about-video,.about-body,
  .joina-heading,.joina-media,.joina-video,.joina-body,.joina-list,
  .joinb-heading,.joinb-media,.joinb-video,.joinb-body,
  .page-bottom,.page-copyright,.page-credit,.page-up
  {margin-left:0;margin-right:0;width:100%;}

  .row{flex-direction:column;}

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

  .s1-brand{font-size:28px;}
  .s1-tagline{font-size:15px;}
  .container h2{font-size:20px;}
  body{font-size:15px;}

  .s1-nav{gap:24px;margin-top:8px;}
  .s1-nav-link{width:auto;height:auto;margin-top:0;margin-bottom:0;}
  .s1-nav-link.home,.s1-nav-link.about,.s1-nav-link.join{margin-left:0;}

  .s1-divider{height:1px;}

  .s1-video,.s2-video,.s3-video,.s4-video,.s5-video,.s6-video,
  .about-video,.joina-video,.joinb-video{
    width:100%;height:auto;max-width:360px;margin:0 auto 16px;order:initial;
  }
  .s1-body,.s3-body,.s5-body,.about-body,.joina-body,.joinb-body{order:initial;}
  .s1-video{aspect-ratio:304/305;}
  .s2-video{aspect-ratio:357/359;}
  .s3-video{aspect-ratio:380/383;}
  .s4-video{aspect-ratio:329/329;}
  .s5-video{aspect-ratio:259/259;}
  .s6-video{aspect-ratio:299/397;}
  .about-video{aspect-ratio:296/296;}
  .joina-video{aspect-ratio:367/367;}
  .joinb-video{aspect-ratio:255/340;}

  .joina-list{margin-left:20px;}

  .page-bottom{margin:30px 0 20px;}

  .s7-top{min-height:0;}

  .s7-video{
    position:static;width:100%;height:auto;max-width:360px;
    aspect-ratio:350/355;margin:0 auto 20px;
  }
  .s7-up{
    position:static;width:auto;height:auto;flex-direction:row;gap:6px;
    margin:20px auto;
  }
  .s7-whatsapp{margin:0 auto 12px;}
  .s7-bottom{flex-direction:column;margin-top:20px;}
  .s7-credit{text-align:left;}
}