*{box-sizing:border-box}html,body{height:100%}
body{margin:0;background:#e8f7ff;font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;}

.frame{
  position:relative;
  width:100%;
  max-width:560px;
  margin:0 auto;
  aspect-ratio: 9 / 16;
  margin-bottom: env(safe-area-inset-bottom, 16px);
}

.poster{
  position:absolute; inset:0;
  background:url('assets/poster.jpeg') center top / contain no-repeat;
}

.cta{
  position:absolute;
  left:50%;
  top:63%;
  transform:translate(-50%,-50%);
  width:min(92%, 520px);
  display:block;
  z-index:3;
  text-decoration:none;
}
.cta img{width:100%;height:auto;display:block;filter:drop-shadow(0 6px 16px rgba(0,0,0,.35));border-radius:12px}

.tap-hint{position:absolute;inset:-8% -4%;}

@media (min-height:740px){
  .frame{margin-top:clamp(4px, 2vh, 20px);}
}

@media (min-width:960px){
  body{display:flex;align-items:flex-start;justify-content:center}
  .frame{margin-top:24px}
}