/* phone layout for the sign-up / sign-in screens (tablet and desktop keep the 1180x820 design) */
@media (max-width: 759px) {
  html, body { background: #FFFFFF !important; }
  .scr { width: 100% !important; height: auto !important; min-height: 100vh; min-height: 100dvh; flex-direction: column !important; overflow: visible !important; }
  .scr > [style*="position: absolute"]:not([role="group"]) { display: none !important; }
  .scr-side { width: 100% !important; height: 210px !important; flex: none !important; display: flex !important; align-items: flex-end; justify-content: center; overflow: hidden !important; border-radius: 0 0 32px 32px; background: #EFE6FC; }
  .scr-side > :not(img):not(.popin) { display: none !important; }
  .scr-side img, .scr-side .popin { position: relative !important; left: auto !important; right: auto !important; top: auto !important; bottom: auto !important; margin: 0 auto !important; }
  .scr-side img { width: auto !important; height: 200px !important; max-width: 92% !important; object-fit: contain; }
  .scr-side .popin { width: 100% !important; height: 205px !important; }
  .scr-side .popin img { height: 100% !important; width: 100% !important; object-position: center bottom !important; }
  .scr-form { width: 100% !important; box-sizing: border-box; align-self: stretch !important; padding: 22px 18px 40px !important; justify-content: flex-start !important; gap: 14px !important; }
  .scr-form > span[style*="position: absolute"] { display: none !important; }
  .scr-form > a[aria-label] { position: fixed !important; left: 14px !important; top: 14px !important; z-index: 10; background: #FFFFFF !important; box-shadow: 0 2px 10px rgba(42,34,64,.18); }
  .scr h1 { font-size: 30px !important; }
  .scr-form [style*="font-size: 64px"] { font-size: 44px !important; }
  .scr-form a[style*="height"]:not([aria-label]), .scr-form button[style*="height: 6"], .scr-form button[style*="height: 7"] { height: 56px !important; font-size: 19px !important; }
  .scr-form .field { height: 56px !important; }
  .scr-form .field input { font-size: 17px !important; }
  .scr .role { height: 150px !important; }
  .scr .role img { width: 76px !important; height: 76px !important; }
  .scr .role span { font-size: 22px !important; }
  .scr .av { width: 70px !important; height: 70px !important; border-width: 3px !important; }
  .scr .av img { width: 56px !important; height: 56px !important; }
  .scr .codewrap span[style*="height: 80px"] { height: 56px !important; font-size: 26px !important; border-radius: 14px !important; }
  .scr label[for="su-agree"] { font-size: 15px !important; }
}

/* tablet / computer: the sign-up screens fill the whole window */
@media (min-width: 760px) {
  html, body { background: #FFFFFF !important; }
  .scr { width: 100% !important; height: auto !important; min-height: 100vh; min-height: 100dvh; border-radius: 0 !important; }
  .scr-side { width: 42% !important; min-height: 100vh; min-height: 100dvh; }
  .scr-form { justify-content: center !important; align-items: center !important; padding-left: 5vw !important; padding-right: 5vw !important; }
  .scr-form > :not([style*="position: absolute"]):not(a[aria-label]) { width: 100%; max-width: 560px; box-sizing: border-box; }
}