:root{--aqua:#57dac4;--panel:#e1f4f3;--blue:#3035eb;--ink:#070707;--muted:#787d83}*{box-sizing:border-box}body{margin:0;font-family:Arial,Helvetica,sans-serif;color:var(--ink);background:#fff}button,input{font:inherit}.notice{height:72px;display:flex;align-items:center;justify-content:center;gap:7px;background:#fafafa;font-size:18px;font-weight:700;position:relative}.notice a,.link{color:var(--blue);text-decoration:none;font-weight:800}.dismiss{position:absolute;right:18px;border:0;background:#e8e9ef;height:35px;width:35px;border-radius:50%;font-size:29px;line-height:29px;cursor:pointer}.header{height:103px;display:flex;direction:rtl;align-items:center;max-width:1580px;padding:0 11.5%;margin:auto;border-bottom:1px solid #d8d8d8}.brand{position:absolute;left:50%;transform:translateX(-50%);font-size:39px;font-weight:900;letter-spacing:-4px}.tools{display:flex;direction:ltr;gap:18px;align-items:center}.account{border:0;background:#000;color:#fff;border-radius:11px;padding:14px 25px;font-size:18px;font-weight:700;cursor:pointer}.search,.mobile-account,.menu{width:39px;height:39px;border:0;background:transparent;position:relative;cursor:pointer}.search:before{content:"";position:absolute;width:17px;height:17px;border:2px solid #111;border-radius:50%;left:6px;top:6px}.search:after{content:"";position:absolute;background:#111;height:2px;width:11px;transform:rotate(47deg);left:22px;top:25px}.menu,.mobile-account{display:none}.page{min-height:calc(100vh - 175px);padding:100px 24px 70px;background:linear-gradient(120deg,#57dac4 0 18%,#76e1ca 18% 45%,#59dac1 45% 74%,#79e0cb 74%)}.login-card{direction:rtl;margin:auto;width:min(100%,965px);min-height:462px;display:grid;grid-template-columns:1fr 273px;grid-template-areas:"form art";background:#fff;border-radius:18px;overflow:hidden;box-shadow:0 18px 28px rgba(0,0,0,.08)}.login-form{grid-area:form;text-align:right;padding:0 68px 38px}.tabs{height:66px;display:flex;direction:rtl;margin:0 -68px 34px;border-bottom:2px solid #e0e2e5}.tab{width:50%;background:#fff;border:0;color:#777;font-size:18px;font-weight:800;position:relative;cursor:pointer}.tab.active{color:#080808}.tab.active:after{content:"";position:absolute;bottom:-2px;right:0;left:0;height:4px;background:#000}.form-view{display:none}.form-view.active{display:block}.field{margin:0 0 23px;position:relative}label{display:block;font-weight:800;font-size:18px;color:#7e8489;margin-bottom:6px}input{width:100%;background:#fff;border:0;border-bottom:4px solid #999;outline:0;height:33px;text-align:right;padding:0 0 4px;font-size:17px}input:focus{border-color:#000}.field-icon{position:absolute;left:0;bottom:5px;font-size:20px;direction:ltr}.forgot{display:inline-block;margin:0 0 36px;font-size:17px}.primary{width:100%;height:55px;border:3px solid #000;background:#fff;border-radius:999px;font-size:18px;font-weight:900;cursor:pointer;transition:.18s ease;position:relative}.primary .arrow{opacity:0;position:absolute;left:29px;font-size:36px;line-height:18px;top:10px;transition:.18s ease}.primary:hover,.primary:focus-visible{padding-right:28px}.primary:hover .arrow,.primary:focus-visible .arrow{opacity:1}.registration{margin:17px 0 0;font-size:17px}.otp-copy{font-size:18px;font-weight:700;text-align:center;line-height:1.35;margin:-3px 0 37px}.art-panel{grid-area:art;background:var(--panel);position:relative;overflow:hidden;padding:24px 26px}.art-panel h1{margin:0;font-size:28px;line-height:1.22;font-weight:900;text-align:right}.artwork{position:absolute;inset:120px 0 0;background-image:var(--login-art,none);background-size:cover;background-position:center}.artwork svg{width:100%;height:100%}.cloud{fill:#fff;stroke:#222;stroke-width:2}.cardshape{fill:#fff;stroke:#222;stroke-width:2}.stripe{fill:#54d9c2;stroke:#222;stroke-width:1.5}.detail{stroke:#222;stroke-width:2;fill:none;stroke-linecap:round}.star{font-size:31px;font-weight:900}.app-banner{display:none}
@media(max-width:700px){.notice{height:97px;padding:0 45px 0 25px;text-align:center;font-size:17px;line-height:1.25}.dismiss{right:12px;top:25px}.header{height:151px;padding:0 36px;justify-content:space-between;border:0}.brand{font-size:38px;top:148px;transform:translate(-50%,-50%)}.tools{gap:16px}.account{display:none}.mobile-account{display:block;width:124px;height:72px;border-radius:38px;background:#e2f2ff}.mobile-account:before{content:"◯";font-size:47px;line-height:20px}.mobile-account:after{content:"⌄";position:absolute;font-size:32px;left:18px;top:14px}.search{width:65px;height:65px;border-radius:30px;box-shadow:0 0 10px rgba(0,0,0,.04)}.search:before{width:35px;height:35px;left:11px;top:9px}.search:after{width:20px;left:39px;top:46px}.menu{display:block;width:51px}.menu:before,.menu:after,.menu span{content:"";position:absolute;right:0;width:44px;height:2px;background:#111}.menu:before{top:15px}.menu span{top:27px}.menu:after{top:39px}.page{background:#fff;padding:0;min-height:0}.login-card{width:100%;min-height:0;border-radius:0;display:flex;flex-direction:column;box-shadow:none}.art-panel{height:358px;flex:0 0 auto;padding:39px 47px;order:0}.art-panel h1{font-size:31px;max-width:220px;margin-right:auto}.artwork{inset:118px 0 0}.login-form{padding:0 57px 38px;order:1}.tabs{height:103px;margin:0 -57px 86px}.tab{font-size:25px}.tab.active:after{height:6px}label{font-size:25px;margin-bottom:7px}input{height:41px;border-bottom-width:5px}.field{margin-bottom:47px}.field-icon{bottom:6px;font-size:30px}.forgot{font-size:24px;margin:-5px 0 58px}.primary{height:80px;font-size:28px;border-width:4px}.primary .arrow{font-size:50px;top:12px;left:37px}.registration{font-size:23px;text-align:center;margin-top:22px;white-space:nowrap}.otp-copy{font-size:24px;margin:-31px 0 62px}.app-banner{display:flex;min-height:188px;margin:0;padding:27px 42px;background:#ffe0d5;align-items:center;gap:18px;text-align:right}.app-icon{width:66px;height:86px;border:2px solid #222;border-radius:9px;transform:rotate(33deg);flex:none;background:repeating-linear-gradient(135deg,#fff 0 13px,#d7f2f1 13px 20px)}.app-copy{font-size:22px;line-height:1.25}.app-copy b{font-size:28px}.download{border:0;border-radius:17px;color:#fff;background:var(--blue);padding:14px 21px;font-size:22px;font-weight:800}}

/* Screenshot-accurate desktop geometry (2048 px reference) */
@media (min-width:701px){
  .header{position:relative}
  .brand{left:auto;right:11.5%;transform:none}
  .tools{position:absolute;left:11.5%;direction:rtl}
  .page{padding-top:100px;background:linear-gradient(120deg,#57dac4 0 18%,#76e1ca 18% 45%,#59dac1 45% 74%,#79e0cb 74%) top/100% 287px no-repeat,#fff}
  .login-card{width:925px;min-height:439px;grid-template-columns:273px 652px;grid-template-areas:"art form"}
  .login-form label{margin-bottom:-3px}
  .login-form input{height:8px}
  .forgot{margin-bottom:44px}
  .primary{width:371px;display:block;margin-inline:auto}
  .registration{text-align:center}
}

/* Font Awesome controls and the reference-style help bubbles. */
.field-actions{position:absolute;z-index:4;left:0;bottom:4px;display:flex;align-items:center;gap:14px;direction:ltr}.icon-button{position:relative;width:22px;height:22px;padding:0;border:0;background:transparent;color:#080808;font-size:22px;line-height:1;cursor:pointer}.icon-button:focus-visible{outline:2px solid #3035eb;outline-offset:4px;border-radius:50%}.tooltip::after{content:attr(data-tooltip);position:absolute;z-index:20;bottom:calc(100% + 16px);left:50%;width:282px;padding:34px 28px;background:#fff;color:#505050;box-shadow:0 9px 20px rgba(0,0,0,.14);font-family:Arial,Helvetica,sans-serif;font-size:26px;font-weight:700;line-height:1.5;text-align:center;direction:rtl;transform:translateX(-50%) translateY(4px);opacity:0;visibility:hidden;pointer-events:none;transition:opacity .15s ease,transform .15s ease}.tooltip::before{content:"";position:absolute;z-index:21;bottom:calc(100% + 8px);left:50%;width:0;height:0;border:8px solid transparent;border-top-color:#fff;transform:translateX(-50%) translateY(4px);opacity:0;visibility:hidden;transition:opacity .15s ease,transform .15s ease}.tooltip:hover::after,.tooltip:hover::before,.tooltip:focus-visible::after,.tooltip:focus-visible::before{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
@media (min-width:701px){.login-form .field-actions{top:2px;bottom:auto}.login-form .field-actions .icon-button{font-size:22px}.login-form .field-icon{display:none}}
@media (max-width:700px){.field-actions{bottom:2px;gap:6px}.icon-button{width:13px;height:13px;font-size:13px}.tooltip::after{width:138px;padding:14px 13px;font-size:12px;bottom:calc(100% + 9px)}.tooltip::before{bottom:calc(100% + 2px);border-width:5px}}

/* The supplied desktop capture uses form typography at half the previous scale. */
@media (min-width:701px){
  .login-form .tab{font-size:9px}
  .login-form label{font-size:9px;line-height:11px}
  .login-form input{font-size:8.5px;line-height:10px}
  .login-form .forgot,.login-form .registration{font-size:8.5px}
  .login-form .primary{font-size:9px}
  .login-form .field-actions .icon-button{font-size:11px}
  .tooltip::after{font-size:13px}
}

/* Final type scale from the supplied measurements. */
@media (min-width:701px){
  .login-card{overflow:visible}
  .login-form{border-radius:18px 0 0 18px}
  .art-panel{border-radius:0 18px 18px 0}
  .login-form .tab{font-size:17px}
  .login-form label,.login-form input{font-size:15px}
  .login-form .primary{font-size:16px}
  .login-form .forgot,.login-form .registration,.login-form .otp-copy{font-size:14px}
  .login-form .field-actions .icon-button{font-size:20px}
  .tooltip::after{font-size:14px}
}

@media (min-width:701px){
  .tooltip::after{width:240px;padding:28px 22px}
  .login-form .field-actions{gap:12px}
  .login-form .field-actions .icon-button{width:18px;height:18px;font-size:16px}
}

@media (min-width:701px){
  .notice{height:58px;font-size:16px}
  .dismiss{width:28px;height:28px;font-size:23px;line-height:1;display:grid;place-items:center}
}

/* Compact form card and validation state. */
.field-error{display:none;margin:8px 0 0;color:#e66b62;font-size:14px;font-weight:700;line-height:1.2}.field.invalid .field-error{display:block}.field.invalid input{border-bottom-color:#e66b62!important}.tabs{direction:ltr}
.login-btn.loading{opacity:.65;cursor:wait}.login-btn:disabled{cursor:wait}
@media (min-width:701px){
  .login-card{width:min(calc(100% - 48px),650px);min-height:500px;grid-template-columns:200px 450px;border-radius:18px}
  .login-form{padding:0 48px 32px}
  .tabs{margin:0 -48px 34px}
  .art-panel{max-width:200px}
  .primary{height:46px}
  #code .field{margin-bottom:38px}
}

@media (min-width:701px){
  .login-card{background:transparent}
  .login-form{background:#fff;border-radius:18px 0 0 18px}
  .tabs{border-top-left-radius:18px;overflow:hidden}
  .tabs .tab:first-child{border-top-left-radius:18px}
}

.single-form{display:block;text-align:right;padding-top:78px}.single-form h2{margin:0 0 16px;font-size:24px;line-height:1.2}.single-copy{margin:0 0 42px;font-size:14px;font-weight:700}.single-form .field{margin-bottom:50px}.single-form .primary{margin-inline:auto}
@media (min-width:701px){.single-card{min-height:430px}.single-card .login-form{padding:0 48px}.single-card .field{height:43px}.single-card .field label{font-size:15px}.single-card .field input{font-size:15px}}
@media (max-width:700px){.single-form{padding-top:38px}.single-form h2{font-size:18px}.single-copy{font-size:11px;margin-bottom:28px}.single-card .art-panel{height:148px}.single-card .login-form{padding-bottom:30px}}

.page2-form{display:block;padding-top:40px}.choice-row,.terms-row{display:flex;align-items:center;gap:17px;cursor:pointer;font-size:16px;font-weight:800}.choice-row{margin-bottom:26px}.choice-row input,.terms-row input{appearance:none;flex:none;width:22px;height:22px;margin:0;border:3px solid #909090;border-radius:50%;background:#fff;cursor:pointer}.choice-row input:checked{border-color:#000;box-shadow:inset 0 0 0 5px #fff;background:#000}.page2-divider{height:5px;background:#999;margin:76px 0 54px}.terms-row{font-weight:400;line-height:1.35}.terms-row input{width:24px;height:24px;border-width:3px;border-radius:8px}.terms-row input:checked{border-color:#3035eb;background:#3035eb}.terms-row input:checked::after{content:"✓";display:block;color:#fff;font-size:16px;line-height:18px;text-align:center}.page2-submit{display:block;margin:66px auto 25px}.resend-code{margin:0;text-align:center;font-size:14px}
@media (min-width:701px){.page2-card{min-height:540px}.page2-card .login-form{padding:0 48px}.page2-form{padding-top:40px}.page2-form .primary{height:72px;font-size:24px}.choice-row,.terms-row{font-size:18px}.resend-code{font-size:16px}}
@media (max-width:700px){.page2-form{padding-top:25px}.choice-row,.terms-row{font-size:13px}.choice-row{margin-bottom:18px}.page2-divider{margin:42px 0 30px;height:2px}.page2-submit{margin-top:36px}}

/* Place your supplied illustration in assets/img, then uncomment both lines below.
.artwork{background-image:url('../img/login-art.png')}
.artwork svg{display:none}
*/
.brand img{
  width: 100px;
}

/* iPhone reference is a 390 px CSS viewport (the supplied image is retina-scaled). */
@media (max-width:700px){
  .notice{height:40px;padding:0 20px 0 11px;font-size:10px}.dismiss{width:17px;height:17px;top:10px;right:5px;font-size:16px;line-height:15px}
  .header{height:63px;padding:0 15px}.brand{font-size:20px;letter-spacing:-2px;top:62px}.tools{gap:7px}.mobile-account{width:52px;height:30px;border-radius:16px}.mobile-account:before{font-size:20px}.mobile-account:after{font-size:14px;left:7px;top:5px}.search{width:27px;height:27px}.search:before{width:14px;height:14px;left:5px;top:4px;border-width:1px}.search:after{width:9px;left:16px;top:18px;height:1px}.menu{width:21px}.menu:before,.menu:after,.menu span{width:18px;height:1px}.menu:before{top:7px}.menu span{top:13px}.menu:after{top:19px}
  .art-panel{height:148px;padding:16px 20px}.art-panel h1{font-size:16px;max-width:105px}.artwork{inset:49px 0 0}
  .login-form{padding:0 24px 16px}.tabs{height:42px;margin:0 -24px 36px}.tab{font-size:11px}.tab.active:after{height:3px}label{font-size:11px;margin-bottom:3px}input{height:17px;border-bottom-width:2px;font-size:10px}.field{margin-bottom:20px}.field-icon{bottom:2px;font-size:13px}.forgot{font-size:10px;margin:-2px 0 24px}.primary{width:239px;max-width:100%;height:34px;margin-inline:auto;display:block;border-width:2px;font-size:12px}.primary .arrow{font-size:22px;top:4px;left:15px}.registration{font-size:10px;margin-top:9px}.otp-copy{font-size:10px;margin:-12px 0 26px}.app-banner{min-height:78px;padding:11px 18px;gap:7px;direction:rtl}.app-icon{width:28px;height:36px}.app-copy{font-size:9px}.app-copy b{font-size:12px}.download{border-radius:7px;padding:6px 9px;font-size:10px}
}

/* Desktop inputs: generous hit area, while preserving the thin reference underline. */
@media (min-width:701px){
  .login-form .field{height:43px;margin-bottom:23px}
  .login-form .field::after{display:none}
  .login-form label{position:absolute;z-index:2;right:0;top:0;display:block;line-height:21px;margin:0;transition:opacity .12s ease;pointer-events:none}
  .login-form input{position:absolute;z-index:1;top:0;right:0;width:100%;height:32px;padding:2px 0 6px;border:0;border-bottom:4px solid #999;background:transparent;font-size:17px;line-height:20px;caret-color:#111}
  .login-form input:focus{border-bottom-color:#111}
  .login-form .field:has(input:focus) label,.login-form .field:has(input:not(:placeholder-shown)) label{opacity:0}
  .login-form .field-icon{z-index:3;top:4px;bottom:auto;pointer-events:none}
  #password .field:nth-of-type(2){margin-bottom:13px}
  .forgot{margin-bottom:35px}
}