/* Mindful Mondays: the lead pages' video, the "New here?" signup box (templates/_lead_video.html, _signup.html)
   and the worksheet gate on the lead pages weeks.GATED names (mm-funnel.js). */

.mm-video {
  position: relative; display: block; width: 100%; max-width: 860px; margin: 0 auto 10px;
  aspect-ratio: 16 / 9; border-radius: 14px; overflow: hidden; cursor: pointer; background: #021f33;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.35);
}
.mm-video img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mm-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.mm-video .mm-play {
  position: absolute; left: 50%; top: 50%; width: 76px; height: 76px; margin: -38px 0 0 -38px;
  border-radius: 50%; background: #C9A84C; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35); transition: transform 0.2s ease;
}
.mm-video .mm-play svg { margin-left: 5px; }
.mm-video:hover .mm-play, .mm-video:focus-visible .mm-play { transform: scale(1.07); }
.mm-video:focus-visible { outline: 3px solid #C9A84C; outline-offset: 3px; }
.mm-video-cap {
  max-width: 860px; margin: 0 auto 36px; text-align: center; font-size: 13px; letter-spacing: 0.4px;
  color: rgba(255, 255, 255, 0.6);
}

.mm-join {
  max-width: 620px; margin: 40px auto 8px; padding: 30px 28px; border-radius: 14px;
  background: #053352; color: #fff; text-align: center; font-family: Arial, sans-serif;
}
.mm-join-eyebrow { font-size: 11px; letter-spacing: 2px; text-transform: uppercase; color: #E8D49A; margin-bottom: 8px; }
.mm-join h2 { font-family: Georgia, serif; font-size: 24px; font-weight: 600; margin: 0 0 10px; color: #fff; }
.mm-join p { font-size: 15px; line-height: 1.6; color: rgba(255, 255, 255, 0.8); margin: 0 0 18px; }
.mm-join form { position: relative; display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.mm-join input[type="text"], .mm-join input[type="email"] {
  flex: 1 1 180px; min-width: 0; padding: 13px 14px; border-radius: 8px; border: 1px solid rgba(255, 255, 255, 0.25);
  background: rgba(255, 255, 255, 0.08); color: #fff; font-size: 15px;
}
.mm-join input::placeholder { color: rgba(255, 255, 255, 0.5); }
.mm-join button {
  flex: 1 1 100%; padding: 14px 18px; border: 0; border-radius: 8px; background: #C9A84C; color: #053352;
  font-weight: 700; font-size: 14px; letter-spacing: 1px; text-transform: uppercase; cursor: pointer;
}
.mm-join button:disabled { opacity: 0.7; cursor: default; }
.mm-join .mm-join-note { font-size: 13px; color: rgba(255, 255, 255, 0.6); margin: 12px 0 0; }
.mm-join .mm-join-done { font-family: Georgia, serif; font-size: 18px; font-style: italic; color: #E8D49A; margin: 6px 0 0; }

.mm-gate { margin-top: 18px; }
.mm-gate .btn { display: inline-block; }
.mm-gate-note { font-size: 14px; line-height: 1.6; color: rgba(255, 255, 255, 0.68); margin: 12px 0 0; }
.mm-gate-skip {
  background: none; border: 0; padding: 0; font: inherit; color: #E8D49A; text-decoration: underline; cursor: pointer;
}
.mm-gate-skip:hover, .mm-gate-skip:focus-visible { color: #fff; }
.btn-row[data-mm-gated][hidden] { display: none !important; }   /* the pages' own .btn-row display:flex outranks [hidden] */