.signup-modal { position: fixed; inset: 0; z-index: 100; display: none; align-items: center; justify-content: center; padding: 20px; }
.signup-modal.is-open { display: flex; }
.signup-modal__backdrop { position: absolute; inset: 0; background: rgb(0 0 0 / 48%); backdrop-filter: blur(4px); }
.signup-modal__dialog { position: relative; width: min(100%, 760px); padding: clamp(24px, 4vw, 54px); border: 1.5px solid #000; border-radius: 34px; background: #f7f1f1; box-shadow: 0 24px 70px rgb(0 0 0 / 30%); }
.signup-modal__dialog h2 { width: fit-content; max-width: calc(100% - 38px); margin: 0 auto clamp(24px, 3vw, 38px); padding: 4px clamp(16px, 3vw, 42px); border: 1.5px solid #000; border-radius: 999px; font-size: clamp(26px, 4vw, 48px); font-weight: 500; line-height: 1.1; text-align: center; }
.signup-modal__close { position: absolute; top: 16px; right: 18px; width: 34px; height: 34px; border: 0; background: transparent; font-size: 32px; line-height: 1; cursor: pointer; }
.signup-form { display: grid; grid-template-columns: minmax(0, 1fr) minmax(180px, .62fr); gap: 18px clamp(24px, 5vw, 70px); padding: clamp(22px, 3vw, 42px); border-radius: 26px; background: #bcbcbc; }
.signup-form__lead { grid-column: 1 / -1; margin: 0; font-size: clamp(18px, 2vw, 26px); font-weight: 500; text-align: center; }
.signup-form__fields { display: grid; gap: 13px; }.signup-form label, .signup-form fieldset { min-width: 0; font-size: 13px; }.signup-form input { display: block; width: 100%; min-height: 38px; margin-top: 5px; border: 0; border-radius: 0; background: #e6ecf4; font: inherit; padding: 8px; }.signup-form__gender { display: flex; align-items: start; gap: 16px; padding: 20px 0 0; border: 0; }.signup-form__gender legend { margin-bottom: 10px; }.signup-form__gender label { display: flex; flex-direction: column; gap: 5px; }.signup-form__gender input { width: 16px; min-height: 16px; margin: 0; accent-color: #000; }.signup-form__birthday { align-self: end; }.signup-form__submit { grid-column: 1 / -1; justify-self: center; min-height: 42px; padding: 8px 42px; border: 1.5px solid #000; border-radius: 999px; background: #f7f1f1; font: inherit; font-size: 18px; cursor: pointer; }.signup-form__submit:hover, .signup-success button:hover { background: #000; color: #f7f1f1; }
.signup-success[hidden], .signup-form[hidden] { display: none; }
.signup-success { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: clamp(52px, 10vw, 100px) 20px; border-radius: 26px; background: #bcbcbc; text-align: center; }.signup-success p { margin: 0; font-size: clamp(40px, 7vw, 72px); font-weight: 600; }.signup-success span { font-size: clamp(17px, 2vw, 25px); }.signup-success button { margin-top: 16px; min-height: 42px; padding: 8px 42px; border: 1.5px solid #000; border-radius: 999px; background: #f7f1f1; font: inherit; font-size: 18px; cursor: pointer; }
@media (max-width: 560px) { .signup-modal { align-items: start; overflow-y: auto; }.signup-modal__dialog { margin-block: 16px; padding: 22px 16px; }.signup-form { grid-template-columns: 1fr; gap: 14px; padding: 22px; }.signup-form__gender { padding-top: 0; }.signup-form__birthday { align-self: auto; } }