Header Button Hover effect Squarespace 7.1

Hey, I'm trying to figure out how to isolate the header button on my website (using 7.1) so I can create a hover effect. I've tried using the chrome inspection tool but I can't find an element similar to .sqs-block-button-element that would isolate the header button.

Any help in figuring this out would be greatly appreciated

Website: https://hexaflexagon-star-bh8p.squarespace.comPass: square123

So far I've figured this workaround but using this now means I can't figure out how to add my transition:

.white-bold:hover .sqs-block-button-element:hover, .white-bold:hover .image-button:hover a, .white-bold:hover .header-actions:hover .btn:hover, .white-bold:hover .header-menu-cta:hover a { background-color: #febf00}

This work for me.

.primary-button-style-outline:hover .white:hover .header-actions:hover .btn:hover