/* Final visual refinements layered over the compact production stylesheet. */
.floating-note {
  left: 5%;
  bottom: 1%;
  width: 180px;
  padding: 15px 19px;
  background: rgba(19, 43, 42, 0.97);
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 14px 34px rgba(20, 40, 36, 0.18);
}

@media (max-width: 600px) {
  .hero {
    padding-bottom: 64px;
  }

  .hero-art {
    height: 372px;
    margin-top: 12px;
  }

  .hero-frame {
    width: min(340px, 88%);
  }

  .floating-note {
    left: 3%;
    bottom: -2px;
    width: 164px;
    padding: 13px 16px;
  }

  .floating-note strong {
    font-size: 16px;
  }
}