/* Compact introduction: one heading, two short lines and a play button. */
.how.wrap.discovery-overlay {
  display: block;
  max-width: 1164px;
  padding: 20px 24px;
  margin-bottom: 28px;
  border: 2px solid #fff;
  border-radius: 28px;
  background: linear-gradient(135deg, #fffdf8f5, #f6effff7 52%, #effbfaf5);
  box-shadow: 0 5px 0 #bea4d130, 0 12px 32px #4933601a;
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
}
.discovery-overlay .how-title { text-align: center; max-width: 720px; margin: 0 auto; }
.discovery-overlay .how-title h2 { margin: 0 0 6px; font-size: clamp(23px, 3vw, 29px); line-height: 1.3; font-weight: 500; color: #44315f; }
.discovery-overlay .how-title > p { margin: 0; font-size: 16px; line-height: 1.55; color: #62546f; }
.discovery-overlay .discovery-link {
  display: inline-flex; justify-content: center; align-items: center; gap: 12px;
  min-height: 44px; margin-top: 12px; padding: 8px 24px; border-radius: 40px;
  background: linear-gradient(130deg, #8960b5, #67418f); color: #fff;
  box-shadow: 0 3px 0 #4e326d;
  font-size: 16px; line-height: 1.5; text-decoration: none;
}
.discovery-overlay .discovery-link:hover { background: #67418f; }
.discovery-overlay .discovery-link:focus-visible { outline: 3px solid #44315f; outline-offset: 5px; }
@media (max-width: 700px) {
  .how.wrap.discovery-overlay { padding: 18px 12px; border-radius: 24px; }
  .discovery-overlay .how-title > p { font-size: 15px; }
}