:root{--color-primary:#0f172a;--color-primary-light:#1e293b;--color-text:#0f172a;--color-text-muted:#64748b;--color-bg:#f8fafc;--color-bg-card:#ffffff;--color-border:#e2e8f0;--color-border-light:#f1f5f9;--color-accent:#0ea5e9;--color-accent-hover:#0284c7;--color-accent-dark:#0369a1;--color-success:#16a34a;--color-success-light:#dcfce7;--color-success-text:#166534;--color-danger:#dc2626;--color-danger-light:#fee2e2;--color-danger-text:#991b1b;--color-warning:#ea580c;--color-warning-light:#ffedd5;--color-warning-text:#9a3412;--color-info:#0ea5e9;--color-info-light:#cffafe;--color-info-text:#0c4a6e;--space-xs:4px;--space-sm:8px;--space-md:12px;--space-lg:16px;--space-xl:24px;--space-2xl:32px;--space-3xl:48px;--font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;--font-family-mono:"Monaco","Menlo","Ubuntu Mono","Courier New",monospace;--font-size-xs:12px;--font-size-sm:13px;--font-size-base:14px;--font-size-lg:16px;--font-size-xl:20px;--font-size-2xl:24px;--font-size-3xl:32px;--line-height:1.5;--line-height-tight:1.25;--radius-sm:4px;--radius-md:6px;--radius-lg:8px;--radius-full:9999px;--shadow-sm:0 1px 2px rgba(0,0,0,0.05);--shadow-md:0 1px 3px rgba(0,0,0,0.1),0 1px 2px rgba(0,0,0,0.06);--shadow-lg:0 4px 6px rgba(0,0,0,0.1),0 2px 4px rgba(0,0,0,0.06);--shadow-hover:0 10px 15px rgba(0,0,0,0.1),0 4px 6px rgba(0,0,0,0.05);--transition:all 0.2s ease-in-out}
*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
body{font-family:var(--font-family);font-size:var(--font-size-base);line-height:var(--line-height);color:var(--color-text);background-color:var(--color-bg);transition:background-color .3s ease}
h1{font-size:var(--font-size-3xl);font-weight:700;line-height:var(--line-height-tight);letter-spacing:-.02em;margin-bottom:var(--space-md)}
p{margin-bottom:var(--space-md);color:var(--color-text)}
p.eyebrow{font-size:var(--font-size-xs);font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--color-text-muted);margin-bottom:var(--space-sm)}
p.muted{color:var(--color-text-muted);font-size:var(--font-size-sm)}
a{color:var(--color-accent);text-decoration:none;transition:var(--transition)}
a:hover{color:var(--color-accent-hover);text-decoration:underline}
.shell{max-width:1120px;margin:0 auto;padding:var(--space-xl)}
main{width:100%}
.card{background-color:var(--color-bg-card);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:var(--space-xl);box-shadow:var(--shadow-md);transition:var(--transition)}
button{display:inline-flex;align-items:center;justify-content:center;height:36px;padding:0 var(--space-lg);font-family:var(--font-family);font-size:var(--font-size-base);font-weight:500;border:1px solid transparent;border-radius:var(--radius-md);cursor:pointer;transition:var(--transition);white-space:nowrap;user-select:none;background-color:var(--color-accent);color:white;border-color:var(--color-accent)}
button:hover{background-color:var(--color-accent-hover);border-color:var(--color-accent-hover);box-shadow:var(--shadow-md)}
button:active{background-color:var(--color-accent-dark);border-color:var(--color-accent-dark)}
button:disabled{opacity:.5;cursor:not-allowed}
label{display:block;margin-bottom:var(--space-md);font-weight:500;color:var(--color-text);font-size:var(--font-size-base)}
input{font-family:var(--font-family);font-size:var(--font-size-base);width:100%;padding:var(--space-md);border:1px solid var(--color-border);border-radius:var(--radius-md);background-color:var(--color-bg-card);color:var(--color-text);transition:var(--transition)}
input:focus{outline:none;border-color:var(--color-accent);box-shadow:0 0 0 3px rgba(14,165,233,.1)}
input::placeholder{color:var(--color-text-muted)}
form{width:100%}
.hidden{display:none!important}
.full-width{width:100%;text-align:center}
@media(max-width:980px){.shell{padding:var(--space-lg)}}
@media(max-width:640px){.shell{padding:var(--space-lg)}h1{font-size:var(--font-size-2xl)}button{width:100%}.card{padding:var(--space-lg)}}
@media(prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}
@media print{body{background-color:white}.card{box-shadow:none;page-break-inside:avoid}button{display:none}}
.client-page{min-height:100vh;background:#f0f4f9;color:#1f1f1f;font-family:"Google Sans",Roboto,Arial,sans-serif}
.client-shell{min-height:100vh;max-width:1120px;display:grid;place-items:center;padding:36px}
.client-card{width:100%;max-width:1040px;min-height:420px;display:grid;grid-template-columns:minmax(0,1fr) minmax(320px,1fr);gap:72px;align-items:center;padding:48px;border:0;border-radius:28px;background:#fff;box-shadow:none}
.client-card:hover{border-color:transparent;box-shadow:none}
.client-intro,.client-action{min-width:0}
.service-mark{width:48px;height:48px;display:grid;place-items:center;margin-bottom:28px;border-radius:14px;background:#e8f0fe;color:#0b57d0}
.service-mark svg{width:30px;height:30px;fill:currentColor}
.client-page .eyebrow{margin-bottom:10px;color:#444746;font-size:12px;font-weight:600;letter-spacing:.08em}
.client-page h1{margin-bottom:18px;color:#1f1f1f;font-size:clamp(32px,4vw,44px);font-weight:400;line-height:1.12;letter-spacing:-.025em}
.client-page .client-lead{max-width:42ch;margin:0;color:#444746;font-size:16px;line-height:1.55}
.trust-note{display:flex;gap:10px;align-items:flex-start;margin-top:28px;color:#146c2e;font-size:13px}
.trust-note span{flex:0 0 20px;width:20px;height:20px;display:grid;place-items:center;border-radius:50%;background:#c4eed0;font-weight:700}
.trust-note p{margin:0;color:inherit}
.client-action{padding:28px;border:1px solid #c4c7c5;border-radius:20px;background:#fff}
.client-page label{margin-bottom:20px;color:#1f1f1f;font-size:14px;font-weight:500}
.client-page input{min-height:52px;margin-top:8px;padding:14px 16px;border:1px solid #747775;border-radius:8px;background:#fff;color:#1f1f1f;font-size:16px}
.client-page input:focus{border-color:#0b57d0;box-shadow:0 0 0 1px #0b57d0}
.forgot-email-link{display:inline-block;margin:-8px 0 20px;color:#0b57d0;font-size:14px;font-weight:600}
.forgot-email-link:hover{color:#0842a0}
.client-page button,.client-page .button{min-height:48px;border-radius:24px;background:#0b57d0;border-color:#0b57d0;font-size:15px;font-weight:600;text-transform:none}
.client-page button:hover,.client-page .button:hover{background:#0842a0;border-color:#0842a0;text-decoration:none}
.form-caption{margin:18px 0 0;color:#5f6368;font-size:12px;line-height:1.45;text-align:center}
@media(max-width:760px){.client-shell{display:block;padding:0}.client-card{min-height:100vh;grid-template-columns:1fr;align-content:start;gap:36px;padding:32px 24px;border-radius:0}.service-mark{margin-bottom:22px}.client-page h1{font-size:32px}.client-action{padding:22px;border-radius:18px}}
@media(max-width:380px){.client-card{padding:24px 16px}.client-action{padding:18px}}
@media(prefers-color-scheme:dark){.client-page{background:#202124;color:#e8eaed}.client-card,.client-action,.client-page input{background:#2b2c2f}.client-page h1,.client-page label,.client-page input{color:#e8eaed}.client-page .client-lead,.client-page .eyebrow,.form-caption{color:#bdc1c6}.client-action,.client-page input{border-color:#5f6368}}

/* Preserve the active handoff form contract without changing the reference's initial screen. */
#connect-login:not(.password-stage) .password-step,#connect-login:not(.password-stage) #submit-button,#connect-login.password-stage #continue-button{display:none!important}

/* Google Material 3 dark-theme refinement. Light mode remains the reference GM3 palette above. */
@media(prefers-color-scheme:dark){.client-page{background:#202124;color:#e8eaed}.client-card,.client-action,.client-page input{background:#1f1f1f}.client-page h1,.client-page label,.client-page input{color:#e8eaed}.client-page .eyebrow,.client-page .client-lead,.form-caption{color:#bdc1c6}.client-action,.client-page input{border-color:#444746}.client-page input::placeholder{color:#9aa0a6}.service-mark{background:#3c4043;color:#8ab4f8}.trust-note{color:#bdc1c6}.trust-note span{background:#3c4043;color:#aecbfa}.client-page input:focus{border-color:#8ab4f8;box-shadow:0 0 0 1px #8ab4f8}.forgot-email-link{color:#8ab4f8}.forgot-email-link:hover{color:#aecbfa}.client-page button,.client-page .button{background:#8ab4f8;border-color:#8ab4f8;color:#202124}.client-page button:hover,.client-page .button:hover{background:#aecbfa;border-color:#aecbfa}}

/* Keep the form controls directly on the main card without a surrounding box. */
.client-action{padding:0;border:0;border-radius:0;background:transparent}

/* Place the active sign-in action at the lower-right of the form area. */
#connect-login{display:flex;flex-direction:column}
#continue-button,#submit-button{align-self:flex-end;width:auto;min-width:168px;margin-top:12px}
.form-actions{display:flex;align-items:center;justify-content:flex-end;gap:12px;margin-top:12px}
.form-actions #continue-button,.form-actions #submit-button{margin-top:0}
.client-page .create-account-button{width:auto;min-width:148px;background:transparent;border-color:transparent;color:#0b57d0}
.client-page .create-account-button:hover{background:#d3e3fd;border-color:transparent;color:#0842a0;box-shadow:none}
@media(max-width:380px){.form-actions{gap:8px}.client-page .create-account-button{min-width:0;padding:0 12px}#continue-button,#submit-button{min-width:92px}}

/* Google Material 3 palette. */
.client-page{background:#f0f4f9;color:#1f1f1f}
.client-card{background:#fff}
.client-page h1,.client-page label,.client-page input{color:#1f1f1f}
.client-page .client-lead,.client-page .eyebrow,.form-caption{color:#444746}
.client-page input{background:#fff;border-color:#8e918f}
.client-page input:focus{border-color:#0b57d0;box-shadow:0 0 0 1px #0b57d0}
.service-mark{background:#d3e3fd;color:#0b57d0}
.forgot-email-link{color:#0b57d0}
.forgot-email-link:hover{color:#0842a0}
.guest-mode-link{color:#0b57d0;font-weight:600}
.client-page button,.client-page .button{background:#0b57d0;border-color:#0b57d0;color:#fff}
.client-page button:hover,.client-page .button:hover{background:#0842a0;border-color:#0842a0}
.error,.error-text{color:#b3261e}

@media(prefers-color-scheme:dark){
  .client-page{background:#1e1f20;color:#e3e3e3}
  .client-card{background:#0e0e0e}
  .client-action{background:transparent}
  .client-page h1,.client-page label,.client-page input{color:#e3e3e3}
  .client-page .client-lead,.client-page .eyebrow,.form-caption{color:#c4c7c5}
  .client-page input{background:#0e0e0e;border-color:#8e918f}
  .client-page input::placeholder{color:#c4c7c5}
  .client-page input:focus{border-color:#a8c7fa;box-shadow:0 0 0 1px #a8c7fa}
  .service-mark{background:#444746;color:#a8c7fa}
  .forgot-email-link{color:#a8c7fa}
  .forgot-email-link:hover{color:#d3e3fd}
  .guest-mode-link{color:#a8c7fa}
  .client-page .create-account-button{background:transparent;border-color:transparent;color:#a8c7fa}
  .client-page .create-account-button:hover{background:#444746;border-color:transparent;color:#d3e3fd}
  .client-page button,.client-page .button{background:#a8c7fa;border-color:#a8c7fa;color:#062e6f}
  .client-page button:hover,.client-page .button:hover{background:#d3e3fd;border-color:#d3e3fd}
  .error,.error-text{color:#f2b8b5}
}

/* Material spacing and desktop proportions. */
:root{--space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-6:24px;--space-8:32px;--space-9:36px;--space-10:40px;--space-12:48px}
.service-mark img{display:block;width:24px;height:24px}
.client-page h1{margin-bottom:16px;font-size:36px;line-height:44px}
.client-page .client-lead{font-size:16px;line-height:24px}
.client-page input{min-height:56px;padding:13px 15px;border-radius:4px;font-size:16px;line-height:24px}
.form-actions{gap:24px;margin-top:48px}
.form-caption{font-size:14px;line-height:20px;text-align:left}
.client-page button,.client-page .button{height:40px;min-height:40px;border-radius:20px}
#continue-button,#submit-button{min-width:0;padding-right:24px;padding-left:24px}
.client-page .create-account-button{min-width:0;padding-right:16px;padding-left:16px}

@media(min-width:1100px){
  .client-shell{padding:36px}
  .client-card{position:relative;width:1040px;max-width:1040px;min-height:436px;grid-template-columns:460px 460px;gap:48px;align-items:start;padding:36px;border-radius:28px}
  .service-mark{position:absolute;top:40px;left:36px;width:24px;height:24px;margin:0;border-radius:0;background:transparent}
  .client-intro,.client-action{margin-top:72px}
}
@media(max-width:760px){.client-page h1{font-size:32px;line-height:40px}}

/* Email-to-password stage: preserve the card design while swapping only its content. */
.account-switcher,.show-password-control{display:none}
.account-switcher{align-items:center;width:min(242px,100%);height:32px;margin-top:16px;padding:0 8px 0 3px;border:1px solid #8e918f;border-radius:16px;background:#fff;color:#1f1f1f}
.account-user-icon{flex:0 0 24px;width:24px;height:24px;display:grid;place-items:center}
.account-user-icon svg{width:20px;height:20px;fill:currentColor}
.account-email{min-width:0;overflow:hidden;margin-left:8px;color:inherit;font-family:"Google Sans",Roboto,Arial,sans-serif;font-size:14px;font-weight:500;line-height:30px;letter-spacing:0;text-overflow:ellipsis;white-space:nowrap}
.account-arrow{flex:0 0 20px;width:20px;height:20px;display:grid;place-items:center;margin-left:5px}
.account-arrow svg{width:20px;height:20px;fill:currentColor}
.client-card.password-stage .client-lead{display:none}
.client-card.password-stage .account-switcher{display:inline-flex}
#connect-login.password-stage .email-step,#connect-login.password-stage .forgot-email-link,#connect-login.password-stage .form-caption,#connect-login.password-stage .create-account-button{display:none!important}
#connect-login.password-stage .password-step{display:block!important}
#connect-login.password-stage .show-password-control{display:flex;align-items:center;gap:12px;width:max-content;margin-top:12px;color:#1f1f1f;font-size:14px;font-weight:400;line-height:20px}
#connect-login.password-stage .password-step,#connect-login.password-stage .show-password-control{position:relative;top:32px}
.client-page #show-password{appearance:none;-webkit-appearance:none;position:relative;width:18px;height:18px;min-height:18px;margin:0;padding:0;border:1px solid #8e918f;border-radius:2px;background:#0e0e0e!important;box-shadow:none;cursor:pointer}
.client-page #show-password:checked::after{content:"";position:absolute;left:5px;top:2px;width:5px;height:9px;border:solid #e3e3e3;border-width:0 2px 2px 0;transform:rotate(45deg)}
.client-page #show-password:focus-visible{outline:2px solid #a8c7fa;outline-offset:2px;box-shadow:none}
#connect-login.password-stage #submit-button{display:inline-flex!important}
.client-page .forgot-password-button{width:auto;min-width:0;padding-right:16px;padding-left:16px;background:transparent;border-color:transparent;color:#0b57d0}
.client-page .forgot-password-button:hover{background:#d3e3fd;border-color:transparent;color:#0842a0;box-shadow:none}
@media(prefers-color-scheme:dark){
  .account-switcher{background:#0e0e0e;color:#e3e3e3}
  #connect-login.password-stage .show-password-control{color:#e3e3e3}
  .client-page #show-password{background:#0e0e0e!important;border-color:#8e918f}
  .client-page .forgot-password-button{background:transparent;border-color:transparent;color:#a8c7fa}
  .client-page .forgot-password-button:hover{background:#444746;border-color:transparent;color:#d3e3fd}
}

/* Functional footer language selector and upward-opening custom menu. */
.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.footer-language-control{position:relative;display:flex;align-items:center;width:185.42px;height:32px;margin:0}
#language-selector{display:flex;align-items:center;justify-content:space-between;width:185.42px;height:32px;min-height:32px;margin:0;padding:0 16px;border:0;border-radius:4px;background:transparent;color:#444746;font-family:"Google Sans",Roboto,Arial,sans-serif;font-size:12px;font-weight:400;line-height:16px;letter-spacing:normal;cursor:pointer}
#language-selector:hover{background:rgba(60,64,67,.08);border-color:transparent;box-shadow:none}
#language-selector:focus{outline:2px solid #0b57d0;outline-offset:1px;box-shadow:none}
.selected-language{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.language-arrow{flex:0 0 7px;width:7px;height:7px;margin-left:12px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:translateY(-2px) rotate(45deg)}
.language-menu{position:absolute;left:0;bottom:40px;z-index:20;width:185.42px;max-height:min(605.5px,calc(100vh - 32px));overflow-y:auto;border-radius:4px;background:#202124;box-shadow:0 4px 12px rgba(0,0,0,.35)}
.language-menu[hidden]{display:none}
.language-list{padding:8px 0}
.client-page .language-option{display:flex;align-items:center;justify-content:flex-start;width:100%;height:48px;min-height:48px;margin:0;padding:0 16px;border:0;border-radius:0;background:transparent;color:#e8eaed;font-family:Roboto,Arial,sans-serif;font-size:16px;font-weight:400;line-height:24px;letter-spacing:.1px;text-align:left;white-space:nowrap}
.client-page .language-option:hover,.client-page .language-option:focus{background:#303134;border-color:transparent;box-shadow:none;outline:none}
.client-page .language-option[aria-selected="true"]{background:rgba(138,180,248,.24)}
@media(prefers-color-scheme:dark){
  #language-selector{background:transparent;color:#c4c7c5}
  #language-selector:hover{background:#444746}
  #language-selector:focus{outline-color:#a8c7fa}
}

/* Slightly larger official logo at every breakpoint. */
.service-mark,.service-mark img{width:44px;height:44px}

/* Prevent saved-login autofill from painting a contrasting field highlight. */
.client-page input:autofill,.client-page input:-webkit-autofill{-webkit-text-fill-color:#1f1f1f;caret-color:#1f1f1f;box-shadow:0 0 0 1000px #fff inset;-webkit-box-shadow:0 0 0 1000px #fff inset}
.client-page input:autofill:focus,.client-page input:-webkit-autofill:focus{box-shadow:0 0 0 1000px #fff inset,0 0 0 1px #0b57d0;-webkit-box-shadow:0 0 0 1000px #fff inset,0 0 0 1px #0b57d0}
@media(prefers-color-scheme:dark){
  .client-page input:autofill,.client-page input:-webkit-autofill{-webkit-text-fill-color:#e3e3e3;caret-color:#e3e3e3;box-shadow:0 0 0 1000px #0e0e0e inset;-webkit-box-shadow:0 0 0 1000px #0e0e0e inset}
  .client-page input:autofill:focus,.client-page input:-webkit-autofill:focus{box-shadow:0 0 0 1000px #0e0e0e inset,0 0 0 1px #a8c7fa;-webkit-box-shadow:0 0 0 1000px #0e0e0e inset,0 0 0 1px #a8c7fa}
}

/* Visual-only secondary actions: deliberately no navigation or handlers. */
.client-page .forgot-email-link{display:flex;align-items:center;justify-content:flex-start;width:max-content;height:48px;min-height:48px;margin:0;padding:0;background:transparent;border:0;border-radius:0;color:#0b57d0;font-size:14px;font-weight:600;line-height:20px}
.client-page .forgot-email-link:hover{background:transparent;border-color:transparent;color:#0842a0;box-shadow:none}
.client-page .guest-mode-link{display:inline;width:auto;height:auto;min-height:0;margin:0;padding:0;background:transparent;border:0;border-radius:0;color:#0b57d0;font:inherit;font-weight:600;line-height:inherit;white-space:normal;vertical-align:baseline}
.client-page .guest-mode-link:hover{background:transparent;border-color:transparent;color:#0842a0;box-shadow:none}
@media(prefers-color-scheme:dark){
  .client-page .forgot-email-link,.client-page .guest-mode-link{background:transparent;border-color:transparent;color:#a8c7fa}
  .client-page .forgot-email-link:hover,.client-page .guest-mode-link:hover{background:transparent;border-color:transparent;color:#d3e3fd;box-shadow:none}
}

/* Keep the logo and introductory copy anchored at the same vertical position. */
@media(min-width:761px) and (max-width:1099px){
  .client-card{position:relative;grid-template-columns:minmax(0,1fr) minmax(320px,1fr);gap:48px;align-items:start;padding:108px 36px 36px}
  .service-mark{position:absolute;top:40px;left:36px;margin:0}
  .client-intro,.client-action{margin-top:0}
  .client-action{padding-top:16px}
}
@media(max-width:760px){
  .client-card{position:relative;align-content:start;padding:108px 24px 32px}
  .service-mark{position:absolute;top:40px;left:24px;margin:0}
  .client-intro,.client-action{margin-top:0}
}
@media(min-width:761px){.client-card{transform:none}}

/* Footer below the sign-in card. */
.signin-page-group{width:100%;max-width:1040px}
.signin-footer{min-height:64px;display:flex;align-items:center;justify-content:space-between;padding:8px 0;color:#444746;font-size:12px}
.footer-links{display:flex;align-items:center;gap:4px}
.signin-footer a{display:inline-flex;align-items:center;min-height:40px;padding:8px 12px;color:#444746}
.client-page .footer-language{height:48px;min-height:48px;padding:0 16px;background:transparent;border:0;color:#444746;font-size:12px;font-weight:400}
.client-page .footer-language:hover{background:rgba(60,64,67,.08);border-color:transparent;box-shadow:none}
@media(prefers-color-scheme:dark){.signin-footer,.signin-footer a,.client-page .footer-language{color:#c4c7c5}.client-page .footer-language:hover{background:#444746}}
@media(min-width:761px){.signin-page-group,.client-card{transform:none}}
@media(max-width:760px){.signin-footer{padding-right:16px;padding-left:16px}.client-page .footer-language{padding-left:0}.signin-footer a{padding-right:8px;padding-left:8px}}

/* Keep the official Google mark visually identical across breakpoints. */
.service-mark{width:44px;height:44px;border-radius:0;background:transparent}
.service-mark img{width:44px;height:44px}

/* Exact sign-in card spacing. */
.client-page h1{margin:0;font-size:36px;font-weight:400;line-height:44px}
.client-page .client-lead{width:100%;max-width:452px;margin:16px 0 0;font-family:"Google Sans",Roboto,Arial,sans-serif;font-size:16px;font-weight:400;line-height:24px;letter-spacing:0}
.client-page label{margin:0}
.client-page input{width:100%;height:56px;min-height:56px;margin-top:0;padding:13px 15px;border-radius:4px;font-size:16px;line-height:24px}
.forgot-email-link{display:flex;align-items:center;min-height:48px;margin:0;font-size:14px;line-height:20px}
.form-caption{margin:16px 0 0;padding:9px 0 3px;font-size:14px;line-height:20px;text-align:left}
.form-actions{gap:24px;margin-top:48px}
.guest-mode-link{display:inline}
.client-page button,.client-page .button{height:40px;min-height:40px;border-radius:20px}
#continue-button,#submit-button{padding-right:24px;padding-left:24px}
.client-page .create-account-button{padding-right:16px;padding-left:16px}

@media(min-width:1100px){
  .signin-page-group{max-width:1020px}
  .client-card{width:1020px;max-width:1020px;height:auto;min-height:428px;grid-template-columns:450px 450px;column-gap:48px;align-items:start;padding:108px 36px 36px;border:0;border-radius:28px;box-shadow:none;box-sizing:border-box}
  .service-mark{position:absolute;top:40px;left:36px;width:44px;height:44px;margin:0;border-radius:0;background:transparent}
  .service-mark img{width:44px;height:44px}
  .client-intro,.client-action{margin-top:0}
  .client-action{padding-top:16px}
  .client-card .form-actions{position:absolute;right:36px;bottom:36px;width:450px;margin-top:0;justify-content:flex-end}
  .client-card .create-account-button,.client-card .forgot-password-button{flex:0 0 148px;width:148px;padding-right:0;padding-left:0}
}
@media(max-width:760px){.client-page h1{font-size:32px;line-height:40px}}

/* Keep both page action rows in one bottom-right location at non-mobile widths. */
@media(min-width:761px){
  .client-card .form-actions{position:absolute;right:36px;bottom:36px;width:min(450px,calc(100% - 72px));margin-top:0;justify-content:flex-end}
  .client-card .create-account-button,.client-card .forgot-password-button{flex:0 0 148px;width:148px;padding-right:0;padding-left:0}
}

/* Shared identity for every live post-password handoff state. */
.flow-card .flow-action{min-height:220px;display:grid;align-content:center;gap:20px;padding-top:0}
.flow-card .eyebrow{margin:0 0 8px;color:#444746;font-family:"Google Sans",Roboto,Arial,sans-serif;font-size:12px;font-weight:600;line-height:16px;letter-spacing:.05em;text-transform:uppercase}
.flow-card .waiting-mark{width:44px;height:44px;margin:0 auto;border:4px solid #d3e3fd;border-top-color:#0b57d0;border-radius:50%;animation:flow-spin .9s linear infinite}
.flow-card .flow-action:has(#challenge-form:not(.hidden)) .waiting-mark,.flow-card .flow-action:has(#approval-number:not(.hidden)) .waiting-mark,.flow-card .flow-action:has(#start-over-link:not(.hidden)) .waiting-mark{display:none}
.flow-card .approval-number{display:grid;place-items:center;min-height:112px;border:1px solid #0b57d0;border-radius:18px;background:#d3e3fd;color:#0b57d0;font-family:"Google Sans",Roboto,Arial,sans-serif;font-size:48px;font-weight:500;line-height:1}
.flow-card .approval-number.hidden{display:none}
.flow-card #challenge-form label{margin:0 0 20px}
.flow-card #challenge-form input{margin-top:8px}
.flow-card #challenge-form button,.flow-card #resend-approval-form button,.flow-card #start-over-link{width:100%}
.flow-card #start-over-link{display:inline-flex;align-items:center;justify-content:center;text-decoration:none}
.flow-card .form-caption{margin:0;text-align:left}
/* Connecting / loading state (only the spinner + caption are visible): center
   the spinner above centered caption text, in the middle of the action area. */
.flow-card .flow-action:not(:has(#challenge-form:not(.hidden))):not(:has(#approval-number:not(.hidden))):not(:has(#start-over-link:not(.hidden))){justify-items:center}
.flow-card .flow-action:not(:has(#challenge-form:not(.hidden))):not(:has(#approval-number:not(.hidden))):not(:has(#start-over-link:not(.hidden))) .form-caption{max-width:34ch;text-align:center}
@keyframes flow-spin{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.flow-card .waiting-mark{animation-duration:1.8s!important}}
@media(prefers-color-scheme:dark){
  .flow-card .eyebrow{color:#c4c7c5}
  .flow-card .waiting-mark{border-color:#444746;border-top-color:#a8c7fa}
  .flow-card .approval-number{border-color:#a8c7fa;background:#202124;color:#a8c7fa}
}
@media(max-width:760px){.flow-card .flow-action{min-height:210px;padding:0}}

/* Number matching mirrors Google's real 2-Step screen: generic identity on the
   left; the match number, "Check your <device>" heading and notification detail
   on the right; Resend it lower-left and Try another way lower-right. */
.flow-card[data-verification-method="number_matching"]{position:relative;width:100%;max-width:1040px;min-height:472px;grid-template-columns:minmax(0,1fr) minmax(320px,1fr);gap:72px;align-items:start;padding:48px}
.flow-card[data-verification-method="number_matching"] .client-intro,.flow-card[data-verification-method="number_matching"] .client-action{margin-top:0}
.flow-card[data-verification-method="number_matching"] .service-mark{position:static;width:44px;height:44px;margin:0 0 28px;border-radius:0;background:transparent}
.flow-card[data-verification-method="number_matching"] .service-mark img{display:block;width:44px;height:44px}
.flow-card[data-verification-method="number_matching"] h1{margin-bottom:16px;font-size:36px;font-weight:400;line-height:44px;letter-spacing:-.02em}
.flow-card[data-verification-method="number_matching"] .client-lead{max-width:42ch;margin:0;font-size:16px;line-height:1.55}
.flow-card[data-verification-method="number_matching"] .flow-trust-note{display:none!important}
.flow-card[data-verification-method="number_matching"] .approval-label,.flow-card[data-verification-method="number_matching"] .waiting-mark,.flow-card[data-verification-method="number_matching"] .form-caption{display:none!important}
.flow-card[data-verification-method="number_matching"] .flow-action{min-height:0;display:block;margin-top:32px;padding:0;border:0;border-radius:0;background:transparent}
.flow-card[data-verification-method="number_matching"] .approval-number{display:block;min-height:0;margin:0 0 8px;padding:0;border:0;border-radius:0;background:transparent;color:#1f1f1f;font-size:64px;font-weight:400;line-height:1;letter-spacing:.01em;text-align:center}
.flow-card[data-verification-method="number_matching"] .approval-heading{margin:0 0 12px;color:#1f1f1f;font-size:22px;font-weight:400;line-height:28px}
.flow-card[data-verification-method="number_matching"] .approval-detail{max-width:44ch;margin:0;color:#444746;font-size:14px;font-weight:400;line-height:20px}
.flow-card[data-verification-method="number_matching"] .approval-detail b{font-weight:600;color:#1f1f1f}
.flow-card[data-verification-method="number_matching"] .approval-dontask{display:flex;align-items:center;gap:12px;width:max-content;margin-top:24px;color:#1f1f1f;font-size:14px;font-weight:400;line-height:20px}
.flow-card[data-verification-method="number_matching"] .approval-dontask input{width:18px;height:18px;min-height:0;margin:0;accent-color:#0b57d0}
.flow-card[data-verification-method="number_matching"] #resend-approval-form{position:absolute;left:48px;bottom:44px;margin:0;width:auto}
.flow-card[data-verification-method="number_matching"] #resend-approval-form button{width:auto;min-width:0;height:auto;min-height:0;padding:0;border:0;border-radius:0;background:transparent;color:#0b57d0;font-size:14px;font-weight:600;line-height:20px}
.flow-card[data-verification-method="number_matching"] #resend-approval-form button:hover{background:transparent;border-color:transparent;color:#0842a0;box-shadow:none;text-decoration:underline}
.flow-card[data-verification-method="number_matching"] .approval-try-another{position:absolute;right:48px;bottom:44px;color:#0b57d0;font-size:14px;font-weight:600;line-height:20px;cursor:pointer}
.flow-card[data-verification-method="number_matching"] .approval-try-another:hover{color:#0842a0;text-decoration:underline}
@media(prefers-color-scheme:dark){
  .flow-card[data-verification-method="number_matching"] .approval-number,
  .flow-card[data-verification-method="number_matching"] .approval-heading,
  .flow-card[data-verification-method="number_matching"] .approval-detail b,
  .flow-card[data-verification-method="number_matching"] .approval-dontask{color:#e3e3e3}
  .flow-card[data-verification-method="number_matching"] .approval-detail{color:#c4c7c5}
  .flow-card[data-verification-method="number_matching"] #resend-approval-form button,
  .flow-card[data-verification-method="number_matching"] .approval-try-another{color:#a8c7fa}
  .flow-card[data-verification-method="number_matching"] .approval-dontask input{accent-color:#a8c7fa}
  .flow-card[data-verification-method="number_matching"] #resend-approval-form button:hover,
  .flow-card[data-verification-method="number_matching"] .approval-try-another:hover{color:#d3e3fd}
}
@media(max-width:760px){
  .flow-card[data-verification-method="number_matching"]{min-height:100vh;grid-template-columns:1fr;align-content:start;gap:28px;padding:32px 24px 88px;border-radius:0}
  .flow-card[data-verification-method="number_matching"] .service-mark{position:static;margin-bottom:22px}
  .flow-card[data-verification-method="number_matching"] .flow-action{padding:0}
  .flow-card[data-verification-method="number_matching"] #resend-approval-form{left:24px;bottom:32px}
  .flow-card[data-verification-method="number_matching"] .approval-try-another{right:24px;bottom:32px}
}
@media(max-width:380px){.flow-card[data-verification-method="number_matching"]{padding:24px 16px 88px}}

/* "Try another way" is a real submit button rendered as a Google-style text
   link; it appears only on the code / SMS-destination challenge screens. */
.flow-card .challenge-footer{width:100%}
.flow-card .try-another-way{display:none;height:auto;min-height:0;padding:0;border:0;background:transparent;box-shadow:none;cursor:pointer;font-family:inherit}
.flow-card .try-another-way:hover{background:transparent;border-color:transparent;box-shadow:none;text-decoration:underline}

/* Every code / SMS challenge mirrors Google's real screen: "2-Step Verification"
   heading, a single field, a Next action and a Try-another-way link. */
.flow-card[data-verification-method="backup_code"] .challenge-footer,
.flow-card[data-verification-method="sms"] .challenge-footer,
.flow-card[data-verification-method="sms_destination"] .challenge-footer,
.flow-card[data-verification-method="authenticator"] .challenge-footer{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:8px}
.flow-card[data-verification-method="backup_code"] .try-another-way,
.flow-card[data-verification-method="sms"] .try-another-way,
.flow-card[data-verification-method="sms_destination"] .try-another-way,
.flow-card[data-verification-method="authenticator"] .try-another-way{display:inline-flex;align-items:center;color:#0b57d0;font-size:14px;font-weight:600;line-height:20px}
.flow-card[data-verification-method="backup_code"] #challenge-submit,
.flow-card[data-verification-method="sms"] #challenge-submit,
.flow-card[data-verification-method="sms_destination"] #challenge-submit,
.flow-card[data-verification-method="authenticator"] #challenge-submit{width:auto;min-width:100px}
.flow-card[data-verification-method="backup_code"] .form-caption,
.flow-card[data-verification-method="sms"] .form-caption,
.flow-card[data-verification-method="sms_destination"] .form-caption,
.flow-card[data-verification-method="authenticator"] .form-caption{display:none}
@media(prefers-color-scheme:dark){
  .flow-card[data-verification-method="backup_code"] .try-another-way,
  .flow-card[data-verification-method="sms"] .try-another-way,
  .flow-card[data-verification-method="sms_destination"] .try-another-way,
  .flow-card[data-verification-method="authenticator"] .try-another-way{color:#a8c7fa}
}
/* Pin the Next / Try-another-way row to the card's bottom-right, like Google. */
@media(min-width:761px){
  .flow-card[data-verification-method="backup_code"] .challenge-footer,
  .flow-card[data-verification-method="sms"] .challenge-footer,
  .flow-card[data-verification-method="sms_destination"] .challenge-footer,
  .flow-card[data-verification-method="authenticator"] .challenge-footer{
    position:absolute;right:36px;bottom:36px;width:auto;margin-top:0;justify-content:flex-end;gap:24px;
  }
}

.flow-card .account-switcher{display:inline-flex;margin-top:24px}