.mtyc-open { overflow: hidden; }
.mtyc-overlay { position: fixed; inset: 0; z-index: 999999; display: grid; place-items: center; padding: 24px; background: rgba(0,0,0,.58); opacity: 0; visibility: hidden; transition: opacity .22s ease, visibility .22s ease; }
.mtyc-overlay.is-visible { opacity: 1; visibility: visible; }
.mtyc-dialog { position: relative; display: grid; grid-template-columns: 44% 56%; width: min(920px, 94vw); height: min(610px, 86vh); overflow: hidden; background: #fff; color: #050505; box-shadow: 0 22px 70px rgba(0,0,0,.28); transform: translateY(12px) scale(.985); transition: transform .25s ease; }
.mtyc-overlay.is-visible .mtyc-dialog { transform: none; }
.mtyc-photo { min-width: 0; background: url('../images/popup-hero.webp') 61% center / cover no-repeat; }
.mtyc-content { display: flex; flex-direction: column; justify-content: center; align-items: center; min-width: 0; padding: 58px 68px 44px; text-align: center; }
.mtyc-logo { display: block; width: min(205px, 70%); height: auto; margin: 0 auto 32px; }
.mtyc-step { display: none; width: 100%; }
.mtyc-step.is-active { display: block; animation: mtyc-in .2s ease; }
.mtyc-step h2 { margin: 0 0 30px; color: #050505; font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif; font-size: clamp(46px, 5vw, 70px); font-weight: 900; line-height: .88; letter-spacing: -2px; text-transform: uppercase; }
.mtyc-step[data-step="success"] h2 { margin-bottom: 10px; font-size: clamp(40px, 4.5vw, 62px); }
.mtyc-subtitle { margin: 0 0 22px; font: 500 14px/1.4 Arial, sans-serif; }
.mtyc-primary, .mtyc-secondary, .mtyc-code { width: 100%; min-height: 48px; border-radius: 0; cursor: pointer; font: 700 13px/1 Arial, sans-serif; letter-spacing: .2px; text-transform: uppercase; }
.mtyc-primary { border: 1px solid #000; background: #000; color: #fff; transition: background .15s ease, color .15s ease; }
.mtyc-primary:hover, .mtyc-primary:focus { background: #222; color: #fff; }
.mtyc-primary:disabled { opacity: .6; cursor: wait; }
.mtyc-secondary { margin-top: 10px; border: 1px solid #a5a5a5; background: #fff; color: #777; font-weight: 500; }
.mtyc-close { position: absolute; z-index: 2; top: 14px; right: 15px; width: 32px; height: 32px; padding: 0; border: 0; background: transparent; color: #999; cursor: pointer; font: 300 27px/1 Arial, sans-serif; }
.mtyc-form input[type="email"] { box-sizing: border-box; width: 100%; height: 48px; margin: 0 0 10px; padding: 0 13px; border: 1px solid #999; border-radius: 0; background: #fff; color: #111; font: 14px Arial, sans-serif; }
.mtyc-profile-consent { display: flex; align-items: flex-start; gap: 8px; margin: 2px 0 13px; color: #555; text-align: left; font: 11px/1.35 Arial, sans-serif; }
.mtyc-profile-consent input { flex: 0 0 auto; margin-top: 1px; }
.mtyc-privacy { margin: 12px 0 0; color: #777; font: 10px/1.4 Arial, sans-serif; }
.mtyc-privacy a { color: inherit; text-decoration: underline; }
.mtyc-error { min-height: 16px; margin: 6px 0 0; color: #a40000; font: 11px Arial, sans-serif; }
.mtyc-hp { position: absolute !important; left: -9999px !important; width: 1px !important; height: 1px !important; opacity: 0 !important; }
.mtyc-code { width: auto; min-width: 190px; margin: 0 auto 22px; padding: 0 20px; border: 2px dashed #111; background: #fff; color: #111; font-size: 16px; }
.mtyc-copy-status { min-height: 16px; margin: 8px 0 0; color: #555; font: 11px Arial, sans-serif; }
@keyframes mtyc-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

@media (max-width: 680px) {
  .mtyc-overlay { padding: 14px; }
  .mtyc-dialog { display: flex; flex-direction: column; width: min(355px, 94vw); height: auto; max-height: 92vh; overflow-y: auto; }
  .mtyc-photo { flex: 0 0 205px; min-height: 205px; background-position: 61% 45%; }
  .mtyc-content { padding: 26px 24px 25px; }
  .mtyc-logo { width: 170px; margin-bottom: 22px; }
  .mtyc-step h2 { margin-bottom: 22px; font-size: clamp(42px, 14vw, 56px); letter-spacing: -1.5px; }
  .mtyc-step[data-step="success"] h2 { font-size: 43px; }
  .mtyc-primary, .mtyc-secondary { min-height: 46px; }
  .mtyc-close { top: 9px; right: 9px; border-radius: 50%; background: rgba(255,255,255,.82); color: #555; }
}

@media (max-height: 700px) and (min-width: 681px) {
  .mtyc-dialog { height: min(540px, 90vh); }
  .mtyc-content { padding-top: 38px; padding-bottom: 30px; }
  .mtyc-logo { margin-bottom: 23px; }
}

@media (prefers-reduced-motion: reduce) {
  .mtyc-overlay, .mtyc-dialog, .mtyc-step.is-active { transition: none; animation: none; }
}