*{box-sizing:border-box}
html{color-scheme:light;background:#242424}
body.remoteqa-auth{margin:0;min-height:100svh;display:flex;align-items:center;justify-content:center;padding:28px;background:#242424;color:#20242a;font:14px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}a:hover{text-decoration:underline;text-underline-offset:3px}button,input,select{font:inherit}button,a{touch-action:manipulation}button{cursor:pointer}button:disabled{opacity:.55;cursor:wait}[hidden]{display:none!important}a:focus-visible,button:focus-visible{outline:2px solid #2552da;outline-offset:3px}
.qa-layout{width:min(1080px,100%);min-height:clamp(620px,78vh,680px);display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);padding:8px;border-radius:32px;background:#fff;box-shadow:0 24px 70px rgba(0,0,0,.12);overflow:hidden}
.qa-visual{position:relative;display:flex;flex-direction:column;justify-content:space-between;isolation:isolate;overflow:hidden;min-height:604px;padding:40px 42px;border-radius:25px;background:radial-gradient(ellipse at 82% 66%,#55d0ff 0%,#4dbafa 31%,transparent 69%),linear-gradient(135deg,#2540ac 2%,#3677d6 54%,#3037ad 100%);color:#fff}
.qa-visual:before{content:"";position:absolute;z-index:-1;inset:0;background:radial-gradient(ellipse at 16% 14%,rgba(25,33,130,.46),transparent 49%),linear-gradient(0deg,rgba(25,38,124,.36),transparent 47%)}
.qa-brand{display:inline-flex;align-items:center;gap:14px;width:max-content;max-width:100%;color:#fff}.qa-brand:hover{text-decoration:none}.qa-brand img{display:block;width:104px;height:auto}.qa-brand>span{padding-left:14px;border-left:1px solid rgba(255,255,255,.55);font-size:16px;font-weight:500;line-height:1.2;letter-spacing:-.25px}
.qa-visual-copy{position:relative;max-width:420px}.qa-visual-label{display:block;margin-bottom:16px;font-size:11px;font-weight:600;letter-spacing:.12em;color:rgba(255,255,255,.85)}.qa-visual-copy h2{margin:0;font-size:clamp(38px,4vw,54px);line-height:1.08;letter-spacing:-.055em;font-weight:500}.qa-visual-copy p{max-width:325px;margin:18px 0 36px;font-size:14px;line-height:1.65;color:rgba(255,255,255,.87)}.qa-visual-products{display:flex;gap:10px;flex-wrap:wrap}.qa-visual-products span{padding:10px 14px;border:1px solid rgba(255,255,255,.43);border-radius:10px;background:rgba(255,255,255,.08);font-size:12px;font-weight:500;letter-spacing:.01em}
.qa-content{min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:44px 48px 28px}.qa-form-panel{width:min(100%,360px);margin:auto 0;min-width:0}.qa-layout:has([data-qa-register]){min-height:830px}.qa-layout:has([data-qa-register]) .qa-visual{min-height:814px}.qa-layout:has([data-qa-register]) .qa-content{padding:36px 38px 20px}.qa-layout:has([data-qa-register]) .qa-form-panel{width:100%;max-width:440px}.qa-layout:has(.qa-product-options){min-height:680px}
.qa-form-panel h1{font-size:29px;line-height:1.2;font-weight:600;letter-spacing:-.045em;margin:0 0 9px}.qa-description{color:#6c7178;font-size:13px;line-height:1.6;margin:0 0 27px}.qa-field{display:block;margin:0 0 18px;min-width:0}.qa-field>span{display:block;font-size:12px;font-weight:600;color:#343a40;margin-bottom:8px}input:not([type=checkbox]),select{display:block;width:100%;min-width:0;min-height:46px;padding:10px 14px;border:1px solid #e5e8eb;border-radius:9px;background:#f7f8f9;color:#20242a;box-shadow:none}input::placeholder{color:#9aa1a9}input:focus,select:focus{outline:2px solid rgba(39,82,206,.18);outline-offset:1px;border-color:#5371d9;background:#fff}input:-webkit-autofill{-webkit-text-fill-color:#20242a;box-shadow:0 0 0 1000px #f7f8f9 inset;caret-color:#20242a}
.qa-password{position:relative;margin-top:-11px}.qa-password input{padding-right:63px}.qa-reveal{position:absolute;right:3px;top:0;min-width:56px;height:46px;background:none;border:0;color:#697078;font-size:12px}.qa-reveal:hover{color:#20242a}.qa-form-options{display:flex;gap:12px;justify-content:space-between;align-items:center;margin:20px 0 25px;font-size:12px;color:#606870}.qa-check{display:flex;align-items:center;gap:8px;font-size:12px;cursor:pointer}.qa-check input{width:15px;height:15px;margin:0;accent-color:#2449c6;flex-shrink:0}
.qa-primary{display:flex;align-items:center;justify-content:center;min-height:46px;width:100%;padding:11px 16px;border:1px solid #2449c6;border-radius:9px;background:#2449c6;color:#fff;font-size:13px;font-weight:600}.qa-primary:hover{background:#1d3da9;border-color:#1d3da9;text-decoration:none}.qa-switch{margin:20px 0 0;color:#6c7178;font-size:12px;line-height:1.6;text-align:center}.qa-switch a{font-weight:600;color:#2449c6;margin-left:3px}.qa-hint{font-size:11px;line-height:1.6;color:#707780;margin:15px 0 0}.qa-error,.qa-notice,.qa-status{font-size:12px;line-height:1.6;padding:12px 14px;border-radius:9px;margin:0 0 18px}.qa-error{color:#9f2f2d;background:#fdf0ef}.qa-error ul{padding-left:18px;margin:7px 0 0}.qa-notice{color:#5c646a;background:#f4f5f6}.qa-status{color:#346538;background:#edf3ec}
.qa-product-options{border-top:1px solid #e8eaed}.qa-product-option{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:21px 0;border-bottom:1px solid #e8eaed}.qa-product-option:hover{text-decoration:none}.qa-product-option:hover strong{text-decoration:underline;text-underline-offset:4px}.qa-product-option strong{display:block;font-size:15px;font-weight:600;margin-bottom:5px}.qa-product-option small{display:block;font-size:12px;color:#6f7780;line-height:1.6;max-width:300px}.qa-product-option>span:last-child{font-size:19px;color:#697178}.qa-selected-product{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 19px;font-size:11px;color:#6d747c}.qa-selected-product>span{display:flex;align-items:center;gap:7px}.qa-selected-product a{color:#2449c6}.qa-dot{display:none}.qa-field-grid{display:grid;grid-template-columns:1fr 1fr;gap:13px}[data-qa-register] .qa-field{margin-bottom:13px}.qa-field-hint{font-size:11px;color:#77808a;margin:-4px 0 15px}.qa-terms{margin:8px 0 20px;color:#5c656c;align-items:flex-start}.qa-terms input{margin-top:2px}.qa-terms a{color:#2449c6;text-decoration:underline;text-underline-offset:3px}
.qa-footer{display:flex;align-items:center;justify-content:center;gap:18px;width:100%;padding:24px 0 0;color:#858b91;font-size:11px}.qa-footer a:hover{color:#2449c6}
@media(max-width:880px){body.remoteqa-auth{padding:20px}.qa-layout{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr)}.qa-visual{padding:32px 30px}.qa-content{padding:36px 30px 22px}.qa-visual-copy h2{font-size:38px}.qa-layout:has([data-qa-register]) .qa-content{padding:32px 24px 18px}}
@media(max-width:680px){body.remoteqa-auth{align-items:flex-start;padding:16px}.qa-layout,.qa-layout:has([data-qa-register]),.qa-layout:has(.qa-product-options){display:block;min-height:0;padding:6px;border-radius:24px}.qa-visual,.qa-layout:has([data-qa-register]) .qa-visual{min-height:188px;padding:23px 25px;border-radius:19px}.qa-brand img{width:90px}.qa-brand>span{font-size:14px}.qa-visual-copy{margin-top:33px}.qa-visual-label{font-size:9px;margin-bottom:5px}.qa-visual-copy h2{font-size:27px}.qa-visual-copy h2 br{display:none}.qa-visual-copy p,.qa-visual-products{display:none}.qa-content,.qa-layout:has([data-qa-register]) .qa-content{padding:30px 23px 18px}.qa-form-panel,.qa-layout:has([data-qa-register]) .qa-form-panel{width:100%;max-width:none}.qa-form-panel h1{font-size:26px}.qa-field-grid{grid-template-columns:1fr;gap:0}input:not([type=checkbox]),select{font-size:16px}.qa-footer{padding:35px 0 0;font-size:10px}}

/* The soft, moving colour belongs to the canvas behind the card. */
html{background:#202126}
body.remoteqa-auth{position:relative;isolation:isolate;overflow-x:hidden;background:#202126}
body.remoteqa-auth::before{content:"";position:fixed;z-index:0;inset:-12%;pointer-events:none;background:radial-gradient(ellipse 45% 45% at 16% 28%,rgba(54,97,204,.4),transparent 75%),radial-gradient(ellipse 38% 48% at 85% 73%,rgba(46,155,197,.26),transparent 72%),linear-gradient(125deg,#202126,#292b31 55%,#1e2229);animation:qa-ambient-shift 18s ease-in-out infinite alternate;will-change:transform}
@keyframes qa-ambient-shift{from{transform:translate3d(-2%,1%,0) scale(1)}to{transform:translate3d(3%,-2%,0) scale(1.08)}}
.qa-layout{position:relative;z-index:1;border-radius:16px}
.qa-visual{border-radius:10px}
.qa-visual-products{display:inline-flex;align-items:center;gap:20px;max-width:100%;padding:12px 17px;border-radius:6px;background:rgba(255,255,255,.96)}
.qa-visual-products img{display:block;width:144px;max-width:calc(50% - 10px);height:auto;object-fit:contain}
.qa-visual-products img:last-child{width:162px}
input:not([type=checkbox]),select,.qa-primary,.qa-error,.qa-notice,.qa-status{border-radius:6px}
@media(max-width:680px){.qa-layout,.qa-layout:has([data-qa-register]),.qa-layout:has(.qa-product-options){border-radius:14px}.qa-visual,.qa-layout:has([data-qa-register]) .qa-visual{min-height:242px;border-radius:8px}.qa-visual-copy{margin-top:24px}.qa-visual-products{display:inline-flex;gap:14px;margin-top:15px;padding:9px 12px}.qa-visual-products img{width:120px;max-width:calc(50% - 7px)}.qa-visual-products img:last-child{width:138px}}
@media(prefers-reduced-motion:reduce){body.remoteqa-auth::before{animation:none;will-change:auto}}

/* Shared sign-in and registration shell. Only the form panel is replaced. */
.qa-compact-brand{display:none}
.qa-layout,
.qa-layout:has([data-qa-register]),
.qa-layout:has(.qa-product-options){
    height:min(760px,calc(100svh - 56px));
    min-height:0;
}
.qa-visual,
.qa-layout:has([data-qa-register]) .qa-visual{min-height:0}
.qa-content{
    min-height:0;
    justify-content:flex-start;
    overflow-y:auto;
    overscroll-behavior-y:contain;
    scrollbar-width:thin;
    scrollbar-color:#d4dce5 transparent;
    padding:40px 42px 26px;
}
.qa-form-panel{flex-shrink:0}
.qa-form-panel:has([data-qa-login]),
.qa-form-panel:has(form[action$="/login/email"]),
.qa-auth-recovery .qa-form-panel,
.qa-auth-choice .qa-form-panel{min-height:480px}
.qa-footer{flex-shrink:0}
.qa-form-panel[aria-busy=true]{cursor:progress}

.qa-auth-choice .qa-product-options{
    display:grid;
    gap:12px;
    border:0;
}
.qa-auth-choice .qa-product-option{
    display:grid;
    grid-template-columns:minmax(0,1fr) 20px;
    gap:12px 20px;
    padding:22px 24px;
    border:1px solid #dfe4e9;
    border-radius:10px;
    background:#fff;
    transition:border-color .16s ease,background-color .16s ease;
}
.qa-auth-choice .qa-product-option:hover,
.qa-auth-choice .qa-product-option:focus-visible{
    border-color:#7c99d8;
    background:#f8faff;
    text-decoration:none;
}
.qa-auth-choice .qa-product-option img{
    display:block;
    width:158px;
    max-width:100%;
    height:31px;
    object-fit:contain;
    object-position:left center;
}
.qa-auth-choice .qa-product-option img[alt=PerfectChroma]{width:177px}
.qa-auth-choice .qa-product-option span:not(.qa-product-arrow){
    grid-column:1;
    color:#6c747c;
    font-size:12px;
    line-height:1.55;
}
.qa-auth-choice .qa-product-option .qa-product-arrow{
    grid-column:2;
    grid-row:1 / 3;
    align-self:center;
    justify-self:end;
    color:#2449c6;
    font-size:20px;
    transition:transform .16s ease;
}
.qa-auth-choice .qa-product-option:hover .qa-product-arrow{transform:translateX(3px)}
.qa-auth-choice .qa-hint{margin:18px 0 0}

.qa-layout:has([data-qa-register]) .qa-content{padding:28px 34px 22px}
.qa-auth-register .qa-form-panel h1{font-size:27px}
.qa-auth-register .qa-form-panel{margin:0}
.qa-auth-register .qa-auth-methods{margin:16px 0 22px}
.qa-auth-register .qa-selected-product{margin-bottom:18px}
.qa-auth-register .qa-selected-product img{
    display:block;
    width:139px;
    max-height:28px;
    object-fit:contain;
    object-position:left center;
}
.qa-auth-register .qa-selected-product img[alt=PerfectChroma]{width:157px}
.qa-auth-register input:not([type=checkbox]),.qa-auth-register select{min-height:42px;padding:9px 12px}
.qa-auth-register .qa-hint{margin:12px 0 0}
.qa-auth-register .qa-switch{margin-top:14px}
.qa-auth-register .qa-footer{padding-top:22px}
.qa-auth-sent .qa-compact-brand{display:none}

@media(min-width:681px) and (max-height:650px){
    .qa-visual{padding:30px 34px}
    .qa-visual-copy h2{font-size:38px}
    .qa-visual-copy p{margin:14px 0 22px}
    .qa-visual-label{margin-bottom:12px}
    .qa-visual-products{gap:14px;padding:10px 13px}
}
@media(max-width:880px){
    .qa-content{padding:32px 28px 22px}
    .qa-layout:has([data-qa-register]) .qa-content{padding:28px 24px 20px}
}
@media(max-width:680px){
    .qa-layout,.qa-layout:has([data-qa-register]),.qa-layout:has(.qa-product-options){height:auto;min-height:0}
    .qa-visual,.qa-layout:has([data-qa-register]) .qa-visual{min-height:242px}
    .qa-content,.qa-layout:has([data-qa-register]) .qa-content{overflow:visible;padding:30px 23px 20px}
    .qa-form-panel:has([data-qa-login]),.qa-form-panel:has(form[action$="/login/email"]),.qa-auth-recovery .qa-form-panel,.qa-auth-choice .qa-form-panel{min-height:0}
    .qa-auth-choice .qa-product-option{padding:18px 20px}
    .qa-auth-register .qa-form-panel h1{font-size:26px}
}
@media(prefers-reduced-motion:reduce){
    .qa-auth-choice .qa-product-option,.qa-auth-choice .qa-product-arrow{transition:none}
}

.qa-coming-label{display:inline-flex;align-items:center;padding:4px 8px;border:1px solid #d5dde6;border-radius:5px;background:#f3f6f9;color:#536476;font-size:11px;font-weight:600;margin-bottom:14px}.qa-product-option .qa-coming-label{margin:8px 0 0;justify-self:start}.qa-primary{background:var(--qa-brand-accent,#2449c6);border-color:var(--qa-brand-accent,#2449c6)}