/* Auth4: the original spacious split layout, with complete landscape screens.
   This stylesheet is scoped to sign-in and registration only. */
body[data-authmode]{background:#fff;font-size:16px}
body[data-authmode] .layout{width:100%;max-width:2040px;min-height:100svh;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:clamp(28px,3.4vw,72px);padding:clamp(20px,2.2vw,40px);align-items:stretch;margin:0 auto}
body[data-authmode] .showcase{align-self:stretch;padding:clamp(28px,2.3vw,46px);gap:28px;border-radius:28px;min-height:0;justify-content:space-between}
body[data-authmode] .showcase>.brand{font-size:30px;gap:12px;letter-spacing:-1.1px}
body[data-authmode] .showcase>.brand img{width:39px;height:39px}
body[data-authmode] .story{max-width:none;width:100%;padding:0;margin:auto 0;align-self:stretch}
body[data-authmode] .story h2{font-size:clamp(35px,2.65vw,50px);line-height:1.1;font-weight:760;letter-spacing:-1.65px;margin:0 0 16px}
body[data-authmode] .story>p{font-size:clamp(16px,1.1vw,19px);line-height:1.6;margin:0 0 28px;max-width:52ch}
body[data-authmode] .showcase-bottom{min-height:40px;margin:0;padding:0}
body[data-authmode] .showcase-bottom .language-picker{font-size:15px;gap:9px}
body[data-authmode] .showcase-bottom .language-picker>svg{width:18px;height:18px}
body[data-authmode] .showcase-bottom .language-picker select{height:38px;font-size:15px;min-width:108px}
body[data-authmode] .form-side{align-self:stretch;min-height:0;padding:6px clamp(18px,2.7vw,54px) 4px;gap:28px}
body[data-authmode] .form-nav{min-height:32px}
body[data-authmode] .home-link{font-size:13px;gap:8px}
body[data-authmode] .home-link svg{width:17px;height:17px}
body[data-authmode] .auth-area{width:100%;max-width:520px;margin:auto;padding:32px 0}
body[data-authmode] .auth-heading h1{font-size:clamp(32px,2.2vw,40px);line-height:1.15;letter-spacing:-1.1px;font-weight:750;margin:0 0 20px}
body[data-authmode] .auth-heading>p{font-size:16px;line-height:1.6;margin:0 0 25px;max-width:48ch}
body[data-authmode] .auth-eyebrow{font-size:13px;margin-bottom:10px}
body[data-authmode] .tabs{margin-bottom:28px;padding:5px;border-radius:12px}
body[data-authmode] .tabs a{font-size:15px;padding:12px 10px;border-radius:8px}
body[data-authmode] #auth-form{gap:21px}
body[data-authmode] .field{gap:9px;min-width:0}
body[data-authmode] .field label,body[data-authmode] .field-title,body[data-authmode] .telephone-field legend{font-size:14px;font-weight:650;line-height:1.45}
body[data-authmode] .field input,body[data-authmode] .field select{height:54px;font-size:16px;border-radius:10px;padding-inline:16px}
body[data-authmode] .password input{padding-right:54px}
body[data-authmode] .primary{height:54px;font-size:16px;border-radius:10px;font-weight:700}
body[data-authmode] .form-footer{margin:0;padding:0;min-height:28px;gap:17px;font-size:12px}
body[data-authmode=register] .form-side{gap:24px}
body[data-authmode=register] .auth-area{max-width:540px;padding:20px 0}
body[data-authmode=register] .auth-heading h1{margin-bottom:12px}
body[data-authmode=register] #auth-form{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
body[data-authmode=register] #auth-form>.field,body[data-authmode=register] #auth-form>fieldset,body[data-authmode=register] #auth-form>.message,body[data-authmode=register] #auth-form>.primary{grid-column:1 / -1}
body[data-authmode=register] #auth-form>.field:has(#account),body[data-authmode=register] #auth-form>.field:has(#name),body[data-authmode=register] #auth-form>.invitation-field{grid-column:auto}
body[data-authmode=register] #auth-form>.invitation-field{justify-content:flex-end}
body[data-authmode=register] .telephone-field .telephone{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
body[data-authmode=register] .telephone-field .field label{font-size:13px}
body[data-authmode=register] .telephone-field .field-help{font-size:12px;line-height:1.55;margin-top:2px}
body[data-authmode=register] .registration-legal{margin-top:20px;font-size:12px;line-height:1.65}
body[data-authmode] .screen-carousel{animation:none;transform:none;opacity:1}
body[data-authmode] .browser-chrome{height:44px;min-height:44px;padding:6px 12px;gap:10px}
body[data-authmode] .browser-url{font-size:12px;min-height:31px}
body[data-authmode] .browser-chrome .carousel-screen-name{font-size:12px;min-width:74px}
body[data-authmode] .carousel-window{position:relative;border-radius:16px;box-shadow:0 20px 40px -28px #38365d60}
body[data-authmode] .carousel-stage{aspect-ratio:16 / 9;position:relative;background:#f7f8fc;overflow:visible;border-radius:0}
body[data-authmode] .carousel-track{position:relative;display:block;height:100%;width:100%;transform:none!important;transition:none!important;will-change:auto}
body[data-authmode] .carousel-slide{position:absolute;inset:0;display:none;width:100%;height:100%;overflow:visible;opacity:1;visibility:hidden;pointer-events:none}
body[data-authmode] .carousel-slide[aria-hidden=false]{display:block;opacity:1;visibility:visible}
body[data-authmode] .carousel-slide.is-current{animation:none}
body[data-authmode] .carousel-slide iframe{position:absolute;inset:auto;left:0;top:0;border:0;max-width:none;transform-origin:top left;pointer-events:none}
/* No controls or reserved spacing below the screen. */
body[data-authmode] .auth-carousel-controls,body[data-authmode] .carousel-controls{display:none!important}
/* A discreet pause control appears only over the screen, on hover or focus. */
body[data-authmode] .auth-carousel-pause--overlay{position:absolute;right:12px;bottom:12px;z-index:3;display:grid;place-items:center;width:32px;height:32px;padding:8px;margin:0;border:1px solid #dcd8eb;border-radius:9px;background:#fffffff0;box-shadow:0 2px 8px #31285812;color:#666080;opacity:0;pointer-events:none;transition:opacity .15s ease,background .15s ease}
body[data-authmode] .auth-carousel-pause--overlay svg{width:15px;height:15px}
body[data-authmode] .carousel-window:hover .auth-carousel-pause--overlay,body[data-authmode] .carousel-window:focus-within .auth-carousel-pause--overlay,body[data-authmode] .auth-carousel-pause--overlay:focus-visible{opacity:1;pointer-events:auto}
body[data-authmode] .auth-carousel-pause--overlay:focus-visible{outline:2px solid #8e82da;outline-offset:3px}
body[data-authmode] .auth-carousel-pause--overlay[aria-pressed=true]{color:#514acb;background:#eeebfc}
body[data-authmode] .auth-carousel-pause--overlay:disabled{display:none}
/* Frames remain opaque. Fade a separate cover to avoid flickering embedded UI. */
body[data-authmode] .carousel-slide::after{content:"";position:absolute;inset:0;z-index:2;background:#f7f8fc;opacity:0;pointer-events:none}
body[data-authmode] .carousel-slide.is-current::after{animation:auth-screen-uncover .28s ease-out both}
@keyframes auth-screen-uncover{from{opacity:1}to{opacity:0}}
@media(min-width:1800px){body[data-authmode] .auth-area{max-width:540px}body[data-authmode] .story>p{margin-bottom:32px}}
@media(max-width:1200px) and (min-width:961px){body[data-authmode] .layout{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:24px;padding:22px}body[data-authmode] .showcase{padding:26px;gap:22px}body[data-authmode] .form-side{padding-inline:10px}body[data-authmode] .story h2{font-size:34px}body[data-authmode] .story>p{font-size:15px}body[data-authmode] .auth-heading h1{font-size:32px}body[data-authmode] .browser-chrome{gap:7px;padding-inline:8px}body[data-authmode] .browser-chrome .carousel-screen-name{font-size:10px;min-width:55px}body[data-authmode] .browser-url{font-size:11px}}
@media(max-width:960px){body[data-authmode] .layout{display:block;max-width:600px;min-height:100svh;padding:26px}body[data-authmode] .showcase{display:none}body[data-authmode] .form-side{min-height:calc(100svh - 52px);padding:0;gap:28px}body[data-authmode] .auth-area{max-width:500px;padding:34px 0;margin:auto}body[data-authmode] .form-nav{min-height:34px}body[data-authmode] .auth-heading h1{font-size:34px}body[data-authmode] .form-footer{font-size:12px;padding-top:4px}body[data-authmode=register] .auth-area{padding:20px 0}body[data-authmode] .mobile-language .language-picker select{font-size:14px}}
@media(max-width:540px){body[data-authmode] .layout{padding:22px 20px}body[data-authmode] .form-side{min-height:calc(100svh - 44px)}body[data-authmode] .auth-heading h1{font-size:32px}body[data-authmode] .auth-heading>p{font-size:15px}body[data-authmode] .home-link{font-size:12px}body[data-authmode] .field input,body[data-authmode] .field select{font-size:16px}body[data-authmode=register] #auth-form{grid-template-columns:minmax(0,1fr);gap:18px}body[data-authmode=register] #auth-form>.field:has(#account),body[data-authmode=register] #auth-form>.field:has(#name),body[data-authmode=register] #auth-form>.invitation-field{grid-column:1 / -1}body[data-authmode=register] .telephone-field .telephone{grid-template-columns:minmax(0,1fr)}body[data-authmode] .tabs{margin-bottom:24px}body[data-authmode] .form-footer{gap:12px;font-size:11px}}
@media(prefers-reduced-motion:reduce){body[data-authmode] .carousel-slide.is-current::after{animation:none;opacity:0}body[data-authmode] .auth-carousel-pause--overlay{transition:none}}