/* Auth-only type and spacing. Keep the original artwork and behavior, but
   use real CSS pixels instead of the legacy 1464px canvas transforms. */
body{overflow:auto!important}
body .stage{position:relative;inset:auto;min-height:100svh;overflow:visible}
body .photo{position:fixed;top:0;bottom:0;height:100svh}
body .pane{position:relative;top:auto;bottom:auto;width:auto;min-height:100svh;margin-right:0;display:flex;align-items:center;padding:24px}
body .card{position:relative!important;left:0!important;top:0!important;width:100%!important;height:auto!important;min-height:0!important;border-radius:26px!important;overflow:visible;margin:0!important;background:#fefefe}
body .card-in{position:relative!important;inset:auto!important;transform:none!important;width:100%!important;height:auto!important;max-width:480px;margin:0 auto;padding:36px clamp(24px,3vw,44px)!important;display:flex;flex-direction:column;gap:12px;justify-content:flex-start}
body .card-in>*{position:static!important;left:auto!important;top:auto!important;width:100%!important;margin:0!important;flex-shrink:0}
body #h1{font-size:32px!important;line-height:1.18;letter-spacing:-.035em!important;word-spacing:normal;font-weight:600;text-align:center}
body #sub{font-size:15px!important;line-height:1.5;letter-spacing:normal;word-spacing:normal;color:#626262;margin-bottom:12px!important;text-align:center}
body .card-in .field{height:50px!important;border-radius:12px}
body .card-in .field input{width:100%;min-width:0;font-size:16px!important;letter-spacing:normal;padding:0 16px!important}
body #loginBtn,body #suBtn,body #gBtn,body #ghBtn{height:50px!important;font-size:16px!important;gap:12px;padding:0 16px}
body #loginBtn,body #suBtn{margin-top:6px!important}
body #gBtn span,body #ghBtn span{font-size:15px!important;letter-spacing:normal;word-spacing:normal}
body #gBtn svg,body #ghBtn svg{width:19px!important;height:19px!important}
body .divider{height:20px;margin:4px 0!important;gap:14px}
body .divider i:first-child,body .divider i:last-child{flex:1 1 0;min-width:0}
body .divider b{flex:0 0 auto;font-size:11px!important;padding:0;transform:none}
body .pw-note{font-size:12px;line-height:1.5;color:#626262;padding:0 2px;margin-top:-6px!important}
body #bottom{font-size:14px!important;line-height:1.5;letter-spacing:normal;word-spacing:normal;margin-top:4px!important}
body #bottom a{display:inline-flex;align-items:center;min-height:44px}
body .hero{position:absolute!important;left:0;bottom:0!important;width:100%!important;height:auto!important;transform:none!important;display:flex;flex-direction:column;align-items:flex-start;gap:18px!important;padding:32px clamp(24px,3vw,44px)!important;margin:0!important}
body .hero .badge{position:static;transform:none!important;height:32px;font-size:12px;gap:8px;padding:0 12px}
body .hl-wrap{position:static;width:100%}
body #hl1,body #hl2{position:static;display:block;width:auto!important;font-size:clamp(42px,3.6vw,52px)!important;line-height:1.08!important;letter-spacing:-.035em!important;white-space:normal}
/* Narrow/tablet: a short art band, then a naturally scrolling form. These
   rules also override the portrait algorithm's absolute-card coordinates. */
@media(min-width:901px){body .pane{margin-left:57.1038%;left:auto!important}body .photo{width:57.1038%!important}}
@media(min-width:901px) and (max-width:1279px){body .pane{margin-left:44%}body .photo{width:44%!important}}
@media(max-width:900px){
 body .stage{display:flex;flex-direction:column}
 body .photo{position:relative!important;width:100%!important;height:280px!important;flex:none}
 body .photo-img--tall{display:none}body .photo-img--wide{display:block;object-position:64% 48%}
 body .stage .scrim{display:block;position:absolute;inset:0;background:linear-gradient(180deg,transparent 10%,rgba(7,10,13,.45) 100%),rgba(7,10,13,.6)}
 body .pane{left:0!important;width:100%;min-height:0;padding:0;display:block}
 body .card{margin:-24px 0 0!important;border-radius:26px 26px 0 0!important;border:0;box-shadow:none;min-height:calc(100svh - 256px)!important}
 body .card-in{padding:28px 26px max(24px,env(safe-area-inset-bottom))!important;max-width:480px}
 body .hero{padding:24px 26px 48px!important;gap:12px!important}
 body #hl1,body #hl2{color:#fff;text-shadow:0 2px 18px rgba(0,0,0,.32)}
}
@media(max-width:699px){
 body .photo{height:244px!important}
 body .card{min-height:calc(100svh - 220px)!important}
 body #h1{font-size:28px!important}
 body #hl1,body #hl2{font-size:30px!important}
 body .hero .badge{font-size:11px}
}