*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:#edf2f7;
  font-family:Inter,Arial,Helvetica,sans-serif;
  color:#12263f;
}
.page-wrap{
  min-height:100vh;
  padding:18px;
}
.mockup{
  width:min(100%, 992px);
  margin:0 auto;
  position:relative;
  background:#fff;
  border-radius:10px;
  overflow:hidden;
  box-shadow:0 18px 60px rgba(15,47,102,.18);
}
.mockup img{
  display:block;
  width:100%;
  height:auto;
}
.hotspot{
  position:absolute;
  display:block;
  border-radius:14px;
  text-decoration:none;
  background:rgba(0,0,0,0);
}
.hotspot:hover{
  outline:3px solid rgba(16,185,129,.45);
  box-shadow:0 0 0 6px rgba(16,185,129,.18);
}
/* Coordinates based on the 992 x 1586 source image */
.hotspot-top{
  left:81.2%;
  top:4.3%;
  width:16.8%;
  height:3.7%;
}
.hotspot-bottom{
  left:61.0%;
  top:84.5%;
  width:30.2%;
  height:4.7%;
}
@media (max-width: 640px){
  .page-wrap{padding:8px}
  .mockup{border-radius:0}
  .hotspot:hover{
    outline:2px solid rgba(16,185,129,.45);
    box-shadow:0 0 0 4px rgba(16,185,129,.18);
  }
}