.hero-cta.mm-tutorial-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  max-width: 690px;
  align-items: stretch;
}
.hero-cta.mm-tutorial-actions > .btn {
  width: 100%; min-width: 0; margin: 0;
}
.hero-cta .mm-tutorial-button {
  display: flex; align-items: center; justify-content: flex-start;
  gap: 12px; min-height: 86px; padding: 15px 20px;
  border: 1px solid rgba(184, 136, 31, .62); border-radius: 22px;
  background: linear-gradient(120deg, #fffdf7, #faf1d9);
  color: #192648; text-align: left; font: inherit;
  cursor: pointer; box-shadow: 0 5px 18px #9c71200b;
  transition: border-color .18s, box-shadow .18s, transform .18s;
}
.hero-cta .mm-tutorial-button:hover {
  border-color: #ad7c13; box-shadow: 0 7px 22px #9c712026;
  transform: translateY(-2px);
}
.hero-cta .mm-tutorial-button:focus-visible {outline: 3px solid #bc8d2a; outline-offset: 4px;}
.mm-tutorial-play {
  display: grid; place-items: center; flex: 0 0 40px;
  width: 40px; height: 40px; border-radius: 50%;
  background: linear-gradient(135deg, #f7e6a5, #c38d19);
  box-shadow: inset 0 0 0 1px #fff7d8, 0 3px 8px #9c712023;
}
.mm-tutorial-play svg {width: 17px; height: 17px; margin-left: 2px; fill: #162343;}
.mm-tutorial-copy {display: flex; flex-direction: column; gap: 4px; min-width: 0;}
.mm-tutorial-label {font-size: 15px; line-height: 1.35; font-weight: 650;}
.mm-tutorial-duration {font-size: 12px; line-height: 1.3; font-weight: 400; color: #71634a;}
.mm-tutorial-dialog {
  width: min(1060px, calc(100vw - 36px)); max-width: none;
  max-height: calc(100dvh - 36px); padding: 0; border: 1px solid #d9bd73;
  border-radius: 24px; background: #fffdf8; color: #192648;
  box-shadow: 0 30px 100px #08132970; overflow: auto;
}
.mm-tutorial-dialog::backdrop {background: #0c162bba; backdrop-filter: blur(5px);}
.mm-tutorial-dialog-head {display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 19px 22px;}
.mm-tutorial-dialog-title {font-family: inherit; font-weight: 650; font-size: 20px; line-height: 1.3; margin: 0;}
.mm-tutorial-dialog-close {
  width: 38px; height: 38px; flex: 0 0 38px; display: grid; place-items: center;
  padding: 0; border: 1px solid #d9bd73; border-radius: 50%; color: #192648;
  background: #f8edcf; cursor: pointer; font: inherit; font-size: 26px; line-height: 1;
}
.mm-tutorial-dialog video {display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; max-height: calc(100dvh - 145px); background: #101c2e; object-fit: contain;}
.mm-tutorial-dialog-note {margin: 0; padding: 13px 22px 16px; font-size: 13px; line-height: 1.4; color: #685f4b;}
@media (max-width: 600px) {
  .hero-cta.mm-tutorial-actions {gap: 10px; max-width: 100%;}
  .hero-cta.mm-tutorial-actions > a.btn {font-size: 13px; padding: 12px 10px; min-height: 54px; white-space: normal; text-align: center;}
  .hero-cta .mm-tutorial-button {grid-column: 1 / -1; min-height: 78px; padding: 13px 17px; gap: 12px; border-radius: 20px;}
  .mm-tutorial-label {font-size: 14px;}
  .mm-tutorial-dialog {width: calc(100vw - 20px); max-height: calc(100dvh - 20px); border-radius: 18px;}
  .mm-tutorial-dialog-head {padding: 14px; gap: 10px;}
  .mm-tutorial-dialog-title {font-size: 16px;}
  .mm-tutorial-dialog-close {width: 34px; height: 34px; flex-basis: 34px;}
  .mm-tutorial-dialog-note {font-size: 12px; padding: 12px 14px;}
}
@media (prefers-reduced-motion: reduce) {
  .hero-cta .mm-tutorial-button {transition: none;}
}

/* Owner-approved club introduction: gold button, original portrait video. */
.hero-cta .mm-tutorial-button--club {
  grid-column: 1 / -1; justify-content: center; min-height: 72px;
  background: linear-gradient(115deg, #fbe9ad 0%, #e7c363 45%, #bd8b23 100%);
  border-color: #ba8a27; color: #172441;
  box-shadow: inset 0 1px 0 #fff7d4, 0 6px 20px #9c712026;
}
.hero-cta .mm-tutorial-button--club:hover {border-color: #956814; box-shadow: inset 0 1px 0 #fff7d4, 0 8px 24px #9c71203b;}
.mm-tutorial-button--club .mm-tutorial-label {font-size: 19px; font-weight: 750; letter-spacing: .09em;}
.mm-tutorial-button--club .mm-tutorial-play {background: #fff4cc; box-shadow: inset 0 0 0 1px #fff9e2, 0 2px 7px #8c651b26;}
.mm-tutorial-dialog--portrait {width: min(480px, calc(100vw - 36px));}
.mm-tutorial-dialog--portrait video {aspect-ratio: 9 / 16; max-height: max(120px, calc(100dvh - 205px));}
.mm-tutorial-dialog--portrait.mm-tutorial-dialog--ended video {max-height: max(120px, calc(100dvh - 285px));}
.mm-tutorial-ending {padding: 0 20px 20px; text-align: center;}
.mm-tutorial-ending[hidden] {display: none;}
.mm-tutorial-ending a {
  display: block; padding: 15px 18px; border: 1px solid #ba8a27; border-radius: 16px;
  background: linear-gradient(115deg, #fbe9ad, #d7ad47); color: #172441;
  font-size: 15px; line-height: 1.4; font-weight: 700; text-decoration: none;
}
.mm-tutorial-ending a:hover {background: linear-gradient(115deg, #fff1c0, #e5be5a);}
.mm-tutorial-ending a:focus-visible {outline: 3px solid #946817; outline-offset: 3px;}
@media (max-width: 600px) {
  .hero-cta .mm-tutorial-button--club {min-height: 70px;}
  .mm-tutorial-button--club .mm-tutorial-label {font-size: 17px;}
  .mm-tutorial-dialog--portrait {width: calc(100vw - 20px);}
  .mm-tutorial-ending {padding: 0 14px 16px;}
}