html, body {
  margin: 0;
  padding: 0;
  width: 300px;
  height: 250px;
  overflow: hidden;
  background: #000;
  font-family: "Arial Narrow", Arial, Helvetica, sans-serif;
}

#ad {
  display: block;
  width: 300px;
  height: 250px;
  position: relative;
  cursor: pointer;
  text-decoration: none;
}

.banner {
  position: relative;
  width: 300px;
  height: 250px;
  overflow: hidden;
  background: #000;
}

.bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 300px;
  height: 250px;
  object-fit: cover;
  display: block;
}

/* Sign graphic — native artwork used as-is, including its baked-in headline text/font.
   Slides straight up from below the ad frame at full opacity — no fade. Centered
   horizontally. */
.sign-group {
  position: absolute;
  left: 52.5px;
  top: 0;
  width: 195px;
  height: 251px;
  opacity: 1;
  transform: translateY(260px);
  animation: slideUpSign 0.5s cubic-bezier(0.22, 0.61, 0.36, 1) 0.3s forwards;
}

.sign-group img.sign {
  display: block;
  width: 100%;
  height: 100%;
}

/* CTA button — now the supplied button graphic, in place of the CSS-built rectangle.
   Same position/size/animation box as before. Centered horizontally, slides up from
   below the frame at full opacity, following shortly after the sign. */
.cta {
  position: absolute;
  left: 77px;
  top: 196px;
  width: 146px;
  height: 40px;
  object-fit: contain;
  display: block;
  opacity: 1;
  transform: translateY(70px);
  animation: slideUpCta 0.35s cubic-bezier(0.22, 0.61, 0.36, 1) 0.68s forwards;
}

@keyframes slideUpSign {
  from {
    transform: translateY(260px);
  }
  to {
    transform: translateY(0);
  }
}

@keyframes slideUpCta {
  from {
    transform: translateY(70px);
  }
  to {
    transform: translateY(0);
  }
}