@import url("../liquid.css");

.join-page { background: #f9fafb; }
.join-main { display: flex; align-items: center; justify-content: center; min-height: 70vh; padding: 42px 20px; overflow: hidden; }
.join-content { position: relative; width: min(620px, 100%); text-align: center; animation: join-fade-in 1.5s ease-in-out both; }
.join-mark { display: block; width: min(520px, 88vw); height: auto; margin: 0 auto 30px; }
.join-content h1 { margin: 0 0 10px; color: #071d49; font-size: clamp(2.15rem, 5vw, 3rem); font-weight: 800; line-height: 1.08; letter-spacing: -.045em; }
.join-content > p { max-width: 590px; margin: 0 auto 22px; color: #3b4657; font-size: clamp(1rem, 2vw, 1.3rem); line-height: 1.55; }
.join-content form { display: flex; flex-direction: column; align-items: center; }
.cf-turnstile { min-height: 65px; }
.form-message { min-height: 20px; margin: 15px 0 0; color: var(--blue); font-size: .93rem; font-weight: 700; }
.join-content button { margin-top: 16px; padding: 12px 30px; border: 0; border-radius: 999px; background: #e31837; color: #fff; font: 800 .96rem Whitney, Arial, sans-serif; cursor: pointer; box-shadow: 0 8px 18px rgba(227,24,55,.18); transition: transform .3s, background-color .3s, opacity .2s; }
.join-content button:not(:disabled):hover { background: #b10f29; transform: scale(1.05); }
.join-content button:disabled { opacity: .45; cursor: not-allowed; box-shadow: none; }
@keyframes join-fade-in { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
@media (max-width: 700px) { .join-main { min-height: 58vh; padding: 52px 16px; }.join-mark { margin-bottom: 20px; }.join-content > p { font-size: 1rem; }.join-content button { min-height: 44px; width: min(100%, 290px); } }