.sa-login-body { background: #fff !important; }
.sa-login-page {
    --login-brand: var(--cs-brand-color, #675ae8);
    --login-ink: #253041;
    --login-muted: #667085;
    --login-border: #e4e7ec;
    --ease-out: cubic-bezier(.23, 1, .32, 1);
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr);
    gap: 1.5rem;
    width: 100%;
    max-width: 90rem;
    min-height: 100vh;
    min-height: 100svh;
    margin: 0 auto;
    padding: 1.5rem;
    color: var(--login-ink);
    font-optical-sizing: auto;
}
.sa-login-page *, .sa-login-page *::before, .sa-login-page *::after { box-sizing: border-box; }
.sa-login-page a { color: var(--login-brand); text-decoration: none; }
.sa-login-panel svg { width: 1.125rem; height: 1.125rem; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.sa-login-page :is(a, button):focus-visible { outline: 2px solid var(--login-brand); outline-offset: 4px; transition: none; }
.sa-login-panel { display: flex; flex-direction: column; align-items: center; min-width: 0; padding: 1.5rem clamp(1rem, 4vw, 4rem); }
.sa-login-brand { align-self: flex-start; display: inline-flex; }
.sa-login-brand img { display: block; width: 11.25rem; max-width: 100%; height: auto; }
.sa-login-content { width: 100%; max-width: 22.5rem; margin: auto 0; padding: 3rem 0; }
.sa-login-title { margin: 0 0 .625rem; color: var(--login-ink); font-size: clamp(1.75rem, 2.5vw, 2.125rem); font-weight: 600; line-height: 1.2; letter-spacing: -.035em; }
.sa-login-subtitle { margin: 0; color: var(--login-muted); font-size: .9375rem; line-height: 1.6; }
.sa-login-intro { margin-bottom: 1.75rem; }
.sa-google-wrap { display: flex; justify-content: center; min-height: 44px; }
.sa-login-divider { display: flex; align-items: center; gap: 1rem; margin: 1.25rem 0; color: var(--login-muted); font-size: .75rem; line-height: 1.5; }
.sa-login-divider::before, .sa-login-divider::after { content: ''; flex: 1; height: 1px; background: var(--login-border); }
.sa-login-form { display: grid; gap: 1.25rem; }
.sa-form-group { display: grid; gap: .5rem; min-width: 0; }
.sa-form-label { margin: 0; font-size: .8125rem; line-height: 1.5; font-weight: 500; }
.sa-form-row { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: .5rem 1rem; }
.sa-form-link { font-size: .8125rem; line-height: 1.5; font-weight: 500; }
.sa-form-input { display: flex; align-items: center; min-width: 0; padding: 0 .875rem; border: 1px solid #d0d5dd; border-radius: .5rem; background: #fff; transition: border-color 120ms ease, box-shadow 120ms ease; }
.sa-form-input:focus-within { border-color: var(--login-brand) !important; box-shadow: 0 0 0 3px #675ae81a; }
.sa-form-input input { min-width: 0; width: 100%; height: 2.875rem; margin: 0; padding: 0; border: 0; outline: 0; background: transparent; box-shadow: none; color: var(--login-ink); font: inherit; font-size: .9375rem; }
.sa-form-input input::placeholder { color: #8a919f; opacity: 1; }
.sa-password-toggle { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 2.75rem; height: 2.75rem; margin-right: -.75rem; padding: 0; border: 0; border-radius: .375rem; background: transparent; color: var(--login-muted); cursor: pointer; touch-action: manipulation; transition: transform 120ms var(--ease-out), background-color 120ms ease; }
.sa-password-slash { opacity: 0; }
.sa-password-toggle[aria-pressed=true] .sa-password-slash { opacity: 1; }
.sa-login-submit { display: inline-flex; align-items: center; justify-content: center; gap: .75rem; width: 100%; min-height: 2.875rem; margin-top: .25rem; padding: .75rem 1rem; border: 1px solid transparent; border-radius: .5rem; background: var(--login-brand); color: #fff !important; font: inherit; font-size: .875rem; font-weight: 500; line-height: 1.5; cursor: pointer; touch-action: manipulation; transition: background-color 120ms ease, transform 120ms var(--ease-out); }
.sa-login-content > .sa-login-submit { margin-top: 1.5rem; }
.sa-login-submit:disabled { cursor: wait; background: #8076d9; }
.sa-login-page :is(.sa-login-submit, .sa-password-toggle):active:not(:disabled):not(:focus-visible) { transform: scale(.97); transition-duration: 0ms; }
.sa-login-signup { margin: 1.5rem 0 0; color: var(--login-muted); text-align: center; font-size: .8125rem; line-height: 1.6; }
.sa-login-signup a { font-weight: 500; }
.sa-login-support { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .5rem; color: var(--login-muted); font-size: .75rem; line-height: 1.5; }
.sa-login-support a { display: inline-flex; align-items: center; gap: .25rem; color: var(--login-muted); }
.sa-login-support svg { width: .875rem; height: .875rem; }
.sa-login-errors .alert, .sa-login-google-error { margin: 0 0 1.25rem; padding: .75rem 1rem; border: 1px solid var(--login-border); border-radius: .5rem; background: #fff; color: var(--login-ink); font-size: .8125rem; line-height: 1.5; }
.sa-login-errors .alert-danger, .sa-login-google-error { border-color: #f0c9c5; color: #b42318; }
.sa-login-errors .alert-success { border-color: #b9d6c2; color: #2d6a43; }
.sa-login-page .error-label { color: #b42318; font-size: .75rem; line-height: 1.5; }
.sa-signup-body { background: #f6fbff !important; }
.sa-login-page.sa-signup-page { position: relative; isolation: isolate; display: flex; align-items: center; justify-content: center; max-width: none; padding: 40px 20px; overflow: hidden; background: radial-gradient(circle at top left, rgba(112, 204, 255, .18), transparent 30%), radial-gradient(circle at right center, rgba(107, 232, 189, .18), transparent 28%), linear-gradient(180deg, #f6fbff 0%, #eef3f9 52%, #f8fafc 100%); }
.sa-signup-page::before { content: ''; position: absolute; inset: 0; z-index: 0; background: url(/public/v201509/assets/images/syncapps_dashboard-inside.png) center / 70% no-repeat; opacity: .22; pointer-events: none; }
.sa-signup-page__backdrop { position: absolute; inset: 0; z-index: 1; background-image: linear-gradient(rgba(15, 23, 42, .03) 1px, transparent 1px), linear-gradient(90deg, rgba(15, 23, 42, .03) 1px, transparent 1px); background-size: 32px 32px; mask-image: linear-gradient(180deg, rgba(0, 0, 0, .95), rgba(0, 0, 0, .35)); pointer-events: none; }
.sa-signup-page .sa-login-panel { position: relative; z-index: 2; width: 100%; max-width: 30rem; padding: 26px; border: 1px solid rgba(209, 219, 230, .95); border-radius: 24px; background: rgba(255, 255, 255, .84); box-shadow: 0 24px 60px rgba(15, 23, 42, .08); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); }
.sa-signup-page .sa-login-brand { align-self: center; margin-bottom: 1.5rem; }
.sa-signup-page .sa-login-content { max-width: none; margin: 0; padding: 0; }
.sa-signup-page .sa-login-intro { margin-bottom: 1.25rem; }
.sa-signup-page .sa-login-title { font-size: 1.75rem; }
.sa-signup-page .sa-login-intro, .sa-signup-page .sa-login-content > .sa-login-title, .sa-signup-page .sa-login-content > .sa-login-subtitle { text-align: center; }
.sa-signup-page .sa-login-support { margin-top: 1.25rem; }
.sa-signup-form { gap: .875rem; }
.sa-signup-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.sa-signup-checker { min-height: 2.25rem; color: var(--login-muted); font-size: .75rem; line-height: 1.5; }
.sa-signup-checker[data-valid=true] { color: #2d6a43; }
.sa-signup-legal { margin: .75rem 0 0; color: var(--login-muted); font-size: .6875rem; line-height: 1.6; text-align: center; }
.sa-signup-page .sa-login-signup { margin-top: .75rem; }
.sa-signup-honeypot { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.sa-login-visual { position: relative; min-width: 0; min-height: 32rem; overflow: hidden; border-radius: 1.5rem; background: #f3f1fc; }
.sa-login-animation { position: absolute; inset: 0; width: 100%; height: 100%; }
.sa-login-animation > svg { display: block; width: 100% !important; height: 100% !important; }
#pricingAnimation g[transform*="911.27001953125,964.3417358398438"] { display: none !important; }
@media (hover: hover) and (pointer: fine) {
    .sa-login-submit:not(:disabled):hover { background: #584bd4; }
    .sa-password-toggle:hover { background: #f4f3fa; color: var(--login-brand); }
    .sa-login-page a:not(.sa-login-submit):hover { text-decoration: underline; text-underline-offset: 3px; }
}
@media (max-width: 960px) {
    .sa-login-page { grid-template-columns: minmax(0, 1fr); max-width: 42rem; padding: 1.5rem; }
    .sa-login-panel { padding: .5rem 0; }
    .sa-login-visual { display: none; }
}
@media (max-width: 400px) {
    .sa-login-page { padding: 1.25rem 1rem; }
    .sa-login-content { max-width: 20rem; }
    .sa-login-brand img { width: 10rem; }
    .sa-login-page.sa-signup-page { padding: 16px 12px 26px; }
    .sa-signup-row { grid-template-columns: minmax(0, 1fr); }
    .sa-signup-page .sa-login-panel { padding: 1.5rem 1.25rem; }
}
@media (max-height: 820px) and (min-width: 961px) {
    .sa-login-page { padding: 1.25rem; }
    .sa-login-panel { padding-top: .5rem; padding-bottom: .5rem; }
    .sa-login-content { padding-top: 1.5rem; padding-bottom: 1.5rem; }
}
@media (pointer: coarse) {
    .sa-form-input input { font-size: 1rem; }
    .sa-form-row a { display: inline-flex; align-items: center; min-height: 2.75rem; }
}
@media (prefers-reduced-motion: reduce) {
    .sa-login-page :is(.sa-login-submit, .sa-password-toggle, .sa-form-input) { transition: none; }
    .sa-login-page :is(.sa-login-submit, .sa-password-toggle):active { transform: none; }
}
@media (prefers-contrast: more) {
    .sa-form-input { border-color: #655b94; }
    .sa-login-subtitle, .sa-login-support, .sa-login-signup { color: #344054; }
}

@media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
    .sa-signup-page .sa-login-panel { background: #fff; backdrop-filter: none; -webkit-backdrop-filter: none; }
}