/* Shared onboarding: original MAUTO lettering and action palette. */
html body .mauto-join488{box-sizing:border-box;width:calc(100% - 5px);max-width:500px;margin:12px auto;padding:12px 16px;border:0;box-shadow:none;background:#fff;color:#253448}
html body .mauto-join488 .join-form-head{display:flex;align-items:center;gap:10px;min-height:44px}
html body .mauto-join488 .join-form-head h1{margin:0;flex:1;font-size:24px;line-height:30px;color:#253448}
html body .mauto-join488 .join-back{display:grid;place-items:center;width:44px;height:44px;border:1px solid #cadced;border-radius:12px;color:#253e61;background:#fff;text-decoration:none;font-size:23px}
html body .mauto-join488 .join-form-art{display:block;width:160px;height:160px;object-fit:contain;margin:4px auto 8px}
html body .mauto-join488 .join-profile-form{gap:9px}
html body .mauto-join488 .join-profile-form label{gap:4px;color:#253448;font-size:14px;line-height:20px}
html body .mauto-join488 .join-profile-form input:not([type=checkbox]){min-height:44px;padding:10px 12px;border:1px solid #cadced;border-radius:12px;font-size:16px;background:#fff;color:#253448}
html body .mauto-join488 .join-profile-form input:focus-visible{outline:2px solid #3579c7;outline-offset:2px}
html body .mauto-join488 [role=status]{padding:10px 12px;margin:4px 0 10px;background:#f4f7fa;border:1px solid #cadced;border-radius:12px;font-size:13px;line-height:18px}
html body .mauto-join488 .join-profile-form small{font-size:12px;line-height:18px;color:#586575}
html body .mauto-join488 .join-profile-form .join-consent{font-size:12px;line-height:18px;gap:8px;min-height:44px;align-items:center}
html body .mauto-join488 .join-primary{min-height:44px;background:#3579c7;color:#fff}
html body .mauto-join488 .join-primary:disabled{background:#e4eaf1;color:#586575;box-shadow:none;cursor:not-allowed}
html body .mauto-join488:has(.join-roles){min-height:min(720px,calc(100svh - 24px));display:flex;flex-direction:column;justify-content:center}
html body .mauto-join488 .join-welcome-art{width:clamp(180px,34svh,300px);height:clamp(180px,34svh,300px);margin:0 auto 12px}
html body .mauto-join488 .join-roles a{min-height:58px;background:#fff;border:1px solid #cadced;box-shadow:0 2px 0 #e4eaf1}
html body .mauto-join488 .join-roles a:focus-visible,html body .mauto-join488 .join-back:focus-visible{outline:2px solid #3579c7;outline-offset:2px}
@media(max-width:599px){html body .mauto-join488{margin:4px auto;padding:8px 10px}html body .mauto-join488 .join-form-art{width:132px;height:132px}}

html body .mauto-join488 .join-success-scene{position:relative;overflow:hidden;padding:12px 0}
html body .mauto-join488 .join-success-scene>img{width:clamp(180px,32svh,280px);height:auto;object-fit:contain}
html body .mauto-join488 .join-success-scene .ma-celebration-confetti i{left:50%;top:120px;animation:none}
@media(prefers-reduced-motion:no-preference){
 html body .mauto-join488 .join-success-ready>img{animation:mauto-door-reveal .65s cubic-bezier(.2,.7,.25,1) both}
 html body .mauto-join488 .join-success-ready .ma-celebration-confetti i{animation:mauto-confetti-burst 2.2s cubic-bezier(.14,.6,.32,1) both;animation-delay:0s}
}

/* One centered action column; role selection remains native and keyboard accessible. */
html body .mauto-join488 .join-role-form{display:grid;gap:12px;margin:0}
html body .mauto-join488 .join-role-option{display:flex;align-items:center;gap:10px;min-height:58px;padding:10px 12px;border:1px solid #cadced;border-radius:14px;background:#fff;box-shadow:0 2px 0 #e4eaf1;cursor:pointer}
html body .mauto-join488 .join-role-option input{width:18px;height:18px;min-height:0;margin:0;accent-color:#3579c7;flex:0 0 18px}
html body .mauto-join488 .join-role-copy{display:grid;gap:2px}
html body .mauto-join488 .join-role-copy>span{font-size:12px;line-height:18px;color:#586575}
html body .mauto-join488 .join-role-option:has(input:checked){border-color:#3579c7;background:#f4f8fd}
html body .mauto-join488 .join-role-option:has(input:focus-visible){outline:2px solid #3579c7;outline-offset:2px}
html body .mauto-join488 .join-auth-actions{display:grid;justify-items:center;gap:8px;width:100%;margin:0 auto}
html body .mauto-join488 .join-auth-actions>a,html body .mauto-join488 .join-auth-actions>button{display:flex;align-items:center;justify-content:center;box-sizing:border-box;width:100%;max-width:320px;min-height:44px;padding:10px 16px;border:1px solid #cadced;border-radius:14px;font:inherit;font-weight:600;line-height:22px;text-align:center;text-decoration:none;cursor:pointer}
html body .mauto-join488 .join-auth-actions .join-login{background:#253e61;color:#fff;border-color:#253e61}
html body .mauto-join488 .join-auth-actions .join-primary{background:#3579c7;color:#fff;border-color:#3579c7}
html body .mauto-join488 .join-auth-actions :focus-visible{outline:2px solid #3579c7;outline-offset:3px}

html body .mauto-join488 .join-role-option input[type=radio]{appearance:none!important;background:#fff!important;border:1.5px solid #9eb5d0!important;border-radius:50%!important;box-shadow:none!important;padding:0!important}
html body .mauto-join488 .join-role-option input[type=radio]:checked{background:radial-gradient(circle,#3579c7 0 4px,#fff 4.5px)!important;border-color:#3579c7!important}
html body .mauto-join488 .join-auth-actions .join-primary{background:#3579c7!important;box-shadow:none!important}

html body .mauto-join488 .join-welcome{display:flex;flex-direction:column;align-items:center;gap:4px}
html body .mauto-join488 .join-brand-lockup{display:flex;align-items:center;justify-content:center;gap:8px;min-height:44px}
html body .mauto-join488 .join-brand-mark{display:block;width:42px;height:42px;object-fit:contain}
html body .mauto-join488 .join-brand-wordmark{display:block;width:180px;height:auto;object-fit:contain}
html body .mauto-join488 .join-welcome h1{display:block;margin:0;text-align:center;font-size:clamp(21px,5vw,26px);line-height:1.2;color:#253e61}
html body .mauto-join488 .join-welcome-art{display:block;max-width:100%;margin:4px auto 8px;object-fit:contain}

/* Registration: larger original scene, compact notice after all form actions. */
html body .mauto-join488 .join-form-art{width:clamp(168px,25svh,220px);height:clamp(168px,25svh,220px);margin:2px auto 6px}
html body .mauto-join488 .join-policy-status{border:0;background:transparent;padding:0;margin:8px 0 0;font-size:12px;line-height:16px;color:#586575;text-align:center}

/* Compact role chooser; retain scrolling on unusually short/zoomed screens. */
html body .mauto-join488:has(.join-roles){box-sizing:border-box;min-height:0;margin:0 auto;padding:8px 10px;gap:0}
html body .mauto-join488 .join-welcome{gap:2px}
html body .mauto-join488 .join-welcome-art{width:clamp(120px,calc(100svh - 420px),260px);height:clamp(120px,calc(100svh - 420px),260px);margin:0 auto}
html body .mauto-join488 .join-role-question{margin:4px 0 6px;font-size:14px;line-height:20px}
html body .mauto-join488 .join-role-form{gap:8px}
html body .mauto-join488 .join-roles{display:grid;gap:6px;margin:0}
html body .mauto-join488 .join-role-option{box-sizing:border-box;min-height:48px;padding:5px 10px;gap:8px}
html body .mauto-join488 .join-role-copy{gap:0}
html body .mauto-join488 .join-role-copy strong{font-size:15px;line-height:20px}
html body .mauto-join488 .join-role-copy>span{font-size:11px;line-height:15px}
html body .mauto-join488 .join-auth-actions{gap:6px}

html body:has(.mauto-join488 .join-roles){margin:0;box-sizing:border-box;display:flow-root}

/* Fill the available safe viewport without clipping short or enlarged-text layouts. */
html body:has(.mauto-join488 .join-roles) .mauto-product-main{margin:0;padding:0}
html body .mauto-join488:has(.join-roles){min-height:100svh!important;margin:0 auto!important;padding:8px 10px max(4px,env(safe-area-inset-bottom))!important;justify-content:flex-start}
html body .mauto-join488 .join-role-form{flex:1;display:flex;flex-direction:column;gap:8px}
html body .mauto-join488 .join-roles{flex:none}
html body .mauto-join488 .join-role-option{min-height:clamp(48px,8svh,68px);padding:5px 10px}
html body .mauto-join488 .join-auth-actions{margin:auto auto 0;padding-top:4px}

/* Role choices stay together; language is the final viewport control. */
html body .mauto-join488 .join-roles{width:calc(100% + 2px);margin-left:-1px}
html body .mauto-join488 .join-role-form{flex:0 0 auto}
html body .mauto-join488 .join-auth-actions{margin:0 auto;padding-top:4px}
html body .mauto-join488 .join-role-option{min-height:48px}
html body .mauto-join488 .join-welcome-art{width:clamp(120px,calc(100svh - 440px),300px);height:clamp(120px,calc(100svh - 440px),300px)}
html body .mauto-join488 .join-language{margin-top:auto;padding-top:8px;width:100%}
html body .mauto-join488 .language-switcher{display:flex;justify-content:center;align-items:center;gap:8px;margin:0}
html body .mauto-join488 .language-switcher select{min-height:44px;max-width:320px;width:100%;border:1px solid #cadced;border-radius:12px;background:#fff;color:#253e61;padding:8px 12px;font:inherit}
html body .mauto-join488 .language-switcher label{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
html body .mauto-join488 .mauto-auto-language button{display:none}
@media(max-height:700px){html body .mauto-join488 .join-welcome-art{width:clamp(100px,calc(100svh - 460px),180px);height:clamp(100px,calc(100svh - 460px),180px)}}