/* JPRAXC sign-in — the public website's dress (r71, approved 2026-09-25).
   One sheet, byte-identical in the Super Admin Console, the Sales Portal, the
   Deployment Portal, the Carrier Gateway and JPRAXC Business E-mail. Every rule is
   scoped to .jx-signin (the <body> of a sign-in page, or the wrapper the Console
   draws its sign-in into), so an app's own stylesheets are not disturbed and do not
   leak in. Tokens: public-website/assets/css/modern.css, modern-visual-system.css,
   modern-pages.css, modern-theme.css. Fonts: Space Grotesk and Manrope (SIL OFL 1.1,
   fonts/*-OFL.txt), served from this folder so a same-origin CSP needs nothing else.
   Theme: a page that sets html[data-theme] or .jx-signin[data-theme] follows it;
   otherwise the device setting decides. */

@font-face{font-family:'Space Grotesk';src:url('fonts/SpaceGrotesk-Variable.ttf') format('truetype');font-style:normal;font-weight:300 700;font-display:swap}
@font-face{font-family:Manrope;src:url('fonts/Manrope-Variable.ttf') format('truetype');font-style:normal;font-weight:200 800;font-display:swap}

.jx-signin{
  color-scheme:light;
  --jx-paper:#f4f1e8;--jx-paper-raised:#fffdf8;--jx-paper-soft:#eee9de;--jx-paper-deep:#e7e0d2;
  --jx-field:#f7f4ed;--jx-field-line:#c8beb8;--jx-placeholder:#75696e;
  --jx-ink:#211b20;--jx-ink-soft:#40373d;--jx-muted:#655b61;
  --jx-wine:#521329;--jx-wine-hover:#6c203c;--jx-wine-deep:#2b111d;--jx-on-wine:#fff8ec;--jx-tag-ink:#f4f1e8;
  --jx-amber:#c39a62;--jx-amber-soft:#ead7bb;--jx-amber-ink:#714523;
  --jx-scene:#e8ddc9;--jx-scene-line:#bda997;--jx-path:#b9a888;
  --jx-moss:#31432c;--jx-moss-ink:#eef1e3;--jx-moss-line:#7c8b70;
  --jx-note:#725664;--jx-card:#f9f4e8;--jx-card-ink:#341c2a;
  --jx-core:#e2bc8c;--jx-core-line:#a98259;--jx-core-ink:#4d2135;
  --jx-help-bg:#fffdf8;--jx-help-ink:#40373d;--jx-help-line:#bda997;
  --jx-focus-bg:#fffdf8;--jx-focus-ring:rgba(82,19,41,.08);
  --jx-line:rgba(45,32,39,.17);--jx-line-strong:rgba(82,19,41,.34);
  --jx-radius:20px;--jx-shadow:0 18px 48px rgba(54,28,38,.09);--jx-shadow-card:0 20px 40px #27311920;--jx-offset:7px 10px 0 #ae997344;
  --jx-focus:#bc7b33;
  --jx-alert-bg:#f8e7ea;--jx-alert-ink:#7d1a32;--jx-alert-line:#e2b8c2;
  --jx-notice-bg:#e9efdc;--jx-notice-ink:#33512b;--jx-notice-line:#bfd0a6;
  --jx-warn-bg:#f6ead6;--jx-warn-ink:#6d4a1e;--jx-warn-line:#e2c79c;
  --jx-font-display:'Space Grotesk',Arial,sans-serif;
  --jx-font-body:Manrope,Arial,sans-serif;
}
/* Dark: the website's dark set. Twice — the page's own choice, and the device's when the page makes none. */
html[data-theme=dark] .jx-signin:not([data-theme=light]),.jx-signin[data-theme=dark]{
  color-scheme:dark;
  --jx-paper:#16151a;--jx-paper-raised:#211e26;--jx-paper-soft:#2b2530;--jx-paper-deep:#332c38;
  --jx-field:#2d2731;--jx-field-line:#726574;--jx-placeholder:#b4a7b1;
  --jx-ink:#f3eee5;--jx-ink-soft:#ddd3d8;--jx-muted:#bcb1bc;
  --jx-wine:#e4c09b;--jx-wine-hover:#f4dabc;--jx-wine-deep:#281b23;--jx-on-wine:#281b23;--jx-tag-ink:#281b23;
  --jx-amber:#d2ad77;--jx-amber-soft:#3b3230;--jx-amber-ink:#ecd9ba;
  --jx-scene:#211c24;--jx-scene-line:#6f5a6c;--jx-path:#665249;
  --jx-note:#c5b8c2;
  --jx-help-bg:#242127;--jx-help-ink:#ddd3d8;--jx-help-line:#59505b;
  --jx-focus-bg:#241d27;--jx-focus-ring:rgba(228,192,155,.12);
  --jx-line:rgba(235,220,230,.18);--jx-line-strong:rgba(228,192,155,.45);
  --jx-shadow:0 18px 48px rgba(0,0,0,.35);--jx-shadow-card:0 20px 40px #00000040;--jx-offset:7px 10px 0 #0e120c;
  --jx-alert-bg:#3a2229;--jx-alert-ink:#f2c6d0;--jx-alert-line:#7a3d4c;
  --jx-notice-bg:#26311f;--jx-notice-ink:#cfe0b8;--jx-notice-line:#4b5f3f;
  --jx-warn-bg:#3a2f1f;--jx-warn-ink:#eed7b0;--jx-warn-line:#7a6238;
}
@media (prefers-color-scheme:dark){
  html:not([data-theme]) .jx-signin:not([data-theme]){
    color-scheme:dark;
    --jx-paper:#16151a;--jx-paper-raised:#211e26;--jx-paper-soft:#2b2530;--jx-paper-deep:#332c38;
    --jx-field:#2d2731;--jx-field-line:#726574;--jx-placeholder:#b4a7b1;
    --jx-ink:#f3eee5;--jx-ink-soft:#ddd3d8;--jx-muted:#bcb1bc;
    --jx-wine:#e4c09b;--jx-wine-hover:#f4dabc;--jx-wine-deep:#281b23;--jx-on-wine:#281b23;--jx-tag-ink:#281b23;
    --jx-amber:#d2ad77;--jx-amber-soft:#3b3230;--jx-amber-ink:#ecd9ba;
    --jx-scene:#211c24;--jx-scene-line:#6f5a6c;--jx-path:#665249;
    --jx-note:#c5b8c2;
    --jx-help-bg:#242127;--jx-help-ink:#ddd3d8;--jx-help-line:#59505b;
    --jx-focus-bg:#241d27;--jx-focus-ring:rgba(228,192,155,.12);
    --jx-line:rgba(235,220,230,.18);--jx-line-strong:rgba(228,192,155,.45);
    --jx-shadow:0 18px 48px rgba(0,0,0,.35);--jx-shadow-card:0 20px 40px #00000040;--jx-offset:7px 10px 0 #0e120c;
    --jx-alert-bg:#3a2229;--jx-alert-ink:#f2c6d0;--jx-alert-line:#7a3d4c;
    --jx-notice-bg:#26311f;--jx-notice-ink:#cfe0b8;--jx-notice-line:#4b5f3f;
    --jx-warn-bg:#3a2f1f;--jx-warn-ink:#eed7b0;--jx-warn-line:#7a6238;
  }
}

/* ---------- the stage (a sign-in page's body, or the Console's wrapper) ---------- */
html:has(body.jx-signin),body.jx-signin{margin:0;padding:0}
.jx-signin,.jx-signin *,.jx-signin *::before,.jx-signin *::after{box-sizing:border-box}
.jx-signin{min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;padding:clamp(14px,2.4vh,30px) 24px;background:var(--jx-paper);color:var(--jx-ink);font:400 14px/1.6 var(--jx-font-body);-webkit-font-smoothing:antialiased;text-align:left}
.jx-signin ::selection{background:var(--jx-amber-soft);color:#211b20}
.jx-signin a{color:inherit;text-decoration:none}
.jx-signin :is(a,button){text-decoration:none}
.jx-signin :is(button,input,select,textarea){font-family:var(--jx-font-body)!important;letter-spacing:normal;text-transform:none;margin:0}
.jx-signin button{cursor:pointer}
.jx-signin :is(a,button,input):focus-visible{outline:3px solid var(--jx-focus);outline-offset:4px}
.jx-signin :is(h1,h2,h3,p,small,strong,label){margin:0;text-transform:none}
.jx-signin [hidden]{display:none!important}
body:has(.jx-signin)>a[href^="licensing.php"]{display:none}

/* ---------- the website's corner: brand + help pill ---------- */
.jx-signin .jx-topbar{width:min(1120px,100%);display:flex;align-items:center;justify-content:space-between;gap:12px}
.jx-signin .jx-topbar-brand{display:flex;align-items:center;gap:11px;padding:7px 15px 7px 7px;border-radius:12px;background:var(--jx-paper-raised);border:1px solid var(--jx-line);color:var(--jx-ink)}
.jx-signin .jx-topbar-brand img{width:38px;height:38px;object-fit:contain;border-radius:9px}
.jx-signin .jx-topbar-brand>span{font:700 20px/1.1 var(--jx-font-display);letter-spacing:-.02em}
.jx-signin .jx-topbar-brand small{display:block;font:700 7px/1.2 var(--jx-font-body);letter-spacing:2px;margin-top:4px;color:var(--jx-muted)}
.jx-signin .jx-topbar-help{display:inline-flex;align-items:center;gap:10px;padding:13px 18px;border:1px solid var(--jx-line);border-radius:30px;background:var(--jx-paper-raised);color:var(--jx-ink);font-size:12px;font-weight:700}
.jx-signin .jx-topbar-help>span{font-size:18px;line-height:1;color:var(--jx-wine)}
.jx-signin .jx-topbar-help:hover{background:var(--jx-amber-soft);border-color:var(--jx-line-strong)}

/* ---------- the card ---------- */
.jx-signin .jx-card{width:min(1120px,100%);min-height:min(660px,calc(100vh - 150px));display:grid;grid-template-columns:46% 54%;border:1px solid var(--jx-line);border-radius:var(--jx-radius);background:var(--jx-paper-raised);box-shadow:var(--jx-shadow);overflow:hidden;position:relative;margin:0}

/* brand / scene panel */
.jx-signin .jx-brand{position:relative;isolation:isolate;overflow:hidden;display:flex;flex-direction:column;justify-content:space-between;gap:22px;padding:34px 36px 28px;background:var(--jx-scene);color:var(--jx-ink)}
.jx-signin .jx-brand::before,.jx-signin .jx-brand::after{content:'';position:absolute;z-index:-1;border:1px solid var(--jx-path);border-radius:50%;opacity:.95;pointer-events:none}
.jx-signin .jx-brand::before{inset:26% -16% -6% -18%;transform:rotate(-24deg)}
.jx-signin .jx-brand::after{inset:36% 8% -22% 22%;transform:rotate(20deg);border-style:dashed}
.jx-signin .jx-brand-head{display:flex;align-items:center;gap:15px}
.jx-signin .jx-brand-head img{width:62px;height:62px;object-fit:contain;border-radius:15px;box-shadow:0 8px 18px #27311926}
.jx-signin .jx-wordmark{font:700 31px/1 var(--jx-font-display);letter-spacing:-.04em;color:var(--jx-ink)}
.jx-signin .jx-tagline{margin-top:6px;font-size:8px;letter-spacing:2.4px;font-weight:700;line-height:1.5;color:var(--jx-note);text-transform:uppercase}
.jx-signin .jx-brand-rule{display:block;width:34px;height:2px;margin-top:9px;background:var(--jx-amber)}

/* the scene: tilted product board, values card, three notes */
.jx-signin .jx-scene{position:relative;flex:1;min-height:336px;margin:2px 0 0}
.jx-signin .jx-board{position:absolute;left:0;top:0;width:62%;padding:18px 18px 16px;background:var(--jx-card);color:var(--jx-card-ink);border:1px solid var(--jx-scene-line);border-radius:18px;box-shadow:var(--jx-shadow-card);transform:rotate(-4deg);text-align:left;z-index:2}
.jx-signin .jx-board-bar{display:flex;align-items:center;justify-content:space-between;padding-bottom:10px;margin-bottom:12px;border-bottom:1px solid #bda99766;font-size:8px;font-weight:700;letter-spacing:1.6px}
.jx-signin .jx-board-dots{display:flex;gap:4px}
.jx-signin .jx-board-dots i{width:5px;height:5px;border-radius:50%;background:#bda997}
.jx-signin .jx-board-main{display:grid;grid-template-columns:62px 1fr;gap:12px}
.jx-signin .jx-board-nav{display:grid;gap:7px;align-content:start;padding-right:8px;border-right:1px solid #bda99766;font-size:8px;color:#725664}
.jx-signin .jx-board-nav span:first-child{color:var(--jx-card-ink);font-weight:700}
.jx-signin .jx-board-content strong{display:block;font:700 19px/1.08 var(--jx-font-display);letter-spacing:-.6px;color:var(--jx-card-ink)}
.jx-signin .jx-flow{display:flex;align-items:center;gap:7px;margin-top:16px;font-size:9px;font-weight:700;color:#6a4b58}
.jx-signin .jx-flow b{font-size:12px;font-weight:400;color:#714523}
.jx-signin .jx-board-caption{margin-top:14px;padding-top:9px;border-top:1px solid #bda99766;font-size:7px;letter-spacing:1.4px;font-weight:700;color:#725664}
.jx-signin .jx-values{position:absolute;right:0;top:28px;width:34%;padding:15px 14px 13px;background:var(--jx-moss);color:var(--jx-moss-ink);border:1px solid var(--jx-moss-line);border-radius:16px;transform:rotate(5deg);box-shadow:var(--jx-offset);z-index:3;display:grid;gap:10px}
.jx-signin .jx-values>span{font-size:7px;letter-spacing:1.8px;font-weight:700;color:#cedac1}
.jx-signin .jx-values>div{display:flex;align-items:center;gap:9px;font-size:10px;line-height:1.3;font-weight:600}
.jx-signin .jx-values svg{flex:none;width:28px;height:28px;padding:5px;border:1px solid #93a287;border-radius:8px;stroke:#f0cd95;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.jx-signin .jx-note{position:absolute;z-index:4;width:31%;padding:12px 12px 11px;border:1px solid #bda997;border-radius:10px;background:#f9f4e8;color:#341c2a;box-shadow:0 7px 15px #37233618}
.jx-signin .jx-note i{float:right;font-size:8px;font-style:normal;font-weight:700;letter-spacing:.5px;color:#725664;margin-left:6px}
.jx-signin .jx-note b{display:block;font:700 15px/1.1 var(--jx-font-display);letter-spacing:-.3px}
.jx-signin .jx-note span{display:block;margin-top:5px;font-size:8.5px;line-height:1.35;color:#6a4b58}
.jx-signin .jx-note-1{left:0;bottom:0;transform:rotate(-6deg);background:var(--jx-core);border-color:var(--jx-core-line);color:var(--jx-core-ink)}
.jx-signin .jx-note-1 i,.jx-signin .jx-note-1 span{color:#6b3a4c}
.jx-signin .jx-note-2{left:34%;bottom:12px;transform:rotate(3deg)}
.jx-signin .jx-note-3{right:0;bottom:3px;transform:rotate(-4deg);background:#d7c1ce;border-color:#b899a8;color:#442330}
.jx-signin .jx-note-3 i,.jx-signin .jx-note-3 span{color:#6d4a5c}

/* help + motto */
.jx-signin .jx-help{display:grid;gap:4px;padding:13px 15px;border:1px solid var(--jx-help-line);border-radius:14px;background:var(--jx-help-bg);color:var(--jx-help-ink);font-size:11px;line-height:1.6}
.jx-signin .jx-help strong{font-size:11px;color:var(--jx-ink)}
.jx-signin .jx-help a{color:var(--jx-wine);font-weight:700;text-decoration:none}
.jx-signin .jx-motto{margin-top:14px;font-size:8px;letter-spacing:2.2px;font-weight:700;color:var(--jx-note)}

/* ---------- form panel ---------- */
.jx-signin .jx-form-panel{display:flex;flex-direction:column;justify-content:center;min-width:0;padding:34px 52px;background:var(--jx-paper-raised)}
.jx-signin .jx-form{display:grid;gap:10px;width:100%;max-width:400px;margin:0 auto}
.jx-signin .jx-form>img{display:none}
.jx-signin .jx-kicker{color:var(--jx-wine);font-size:10px;font-weight:700;letter-spacing:1.8px;text-transform:uppercase;line-height:1.7;margin:0 0 6px}
.jx-signin .jx-kicker b{color:var(--jx-muted);font-weight:700}
.jx-signin .jx-form h2{font:700 clamp(32px,3.1vw,40px)/1.02 var(--jx-font-display);letter-spacing:-.045em;color:var(--jx-ink)}
.jx-signin .jx-form h2 em{font-style:normal;color:var(--jx-wine);white-space:nowrap}
.jx-signin .jx-lede{color:var(--jx-muted);font-size:14px;line-height:1.7;margin:4px 0 8px}
.jx-signin .jx-lede strong{color:var(--jx-ink);font-weight:700}
.jx-signin .jx-form form{display:grid;gap:12px;margin:2px 0 0}
.jx-signin .jx-form label{display:grid;gap:7px;font-size:12px;font-weight:700;line-height:1.4;color:var(--jx-ink)}
.jx-signin .jx-form label small{font-size:11px;font-weight:500;color:var(--jx-muted)}
.jx-signin .jx-form input:not([type=hidden]){display:block;width:100%;height:50px;min-height:0;padding:12px 15px;border:1px solid var(--jx-field-line);border-radius:12px;background:var(--jx-field);color:var(--jx-ink);font-size:15px;font-weight:400;line-height:1.4;box-shadow:none;transition:border-color .15s,background .15s,box-shadow .15s}
.jx-signin .jx-form input::placeholder{color:var(--jx-placeholder);opacity:1}
.jx-signin .jx-form input:hover{border-color:#8f737e}
.jx-signin .jx-form input:focus{outline:0;border-color:var(--jx-wine);background:var(--jx-focus-bg);box-shadow:0 0 0 3px var(--jx-focus-ring)}
.jx-signin .jx-password{position:relative;display:block}
.jx-signin .jx-password input{padding-right:54px}
.jx-signin .jx-password button{position:absolute;right:6px;top:6px;width:38px;height:38px;min-width:0;min-height:0;padding:0;border:0;border-radius:9px;background:transparent;color:var(--jx-muted);display:grid;place-items:center;box-shadow:none;font-size:0}
.jx-signin .jx-password button:hover{background:var(--jx-paper-soft);color:var(--jx-wine)}
.jx-signin .jx-password button svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.jx-signin .jx-password button .jx-eye-off{display:none}
.jx-signin .jx-password button[aria-pressed=true] .jx-eye-off{display:block}
.jx-signin .jx-password button[aria-pressed=true] .jx-eye{display:none}

/* Security verification */
.jx-signin .jx-captcha{display:grid;gap:11px;padding:14px;margin:2px 0;border:1px solid var(--jx-line);border-radius:16px;background:var(--jx-paper-soft)}
.jx-signin .jx-captcha header{display:flex;align-items:center;gap:10px}
.jx-signin .jx-captcha header>span{flex:none;padding:6px 8px;border-radius:7px;background:var(--jx-wine);color:var(--jx-tag-ink);font-size:8px;font-weight:700;letter-spacing:1.4px;line-height:1}
.jx-signin .jx-captcha header strong{display:block;font-size:12px;line-height:1.35;color:var(--jx-ink)}
.jx-signin .jx-captcha header small{display:block;font-size:10px;line-height:1.4;color:var(--jx-muted)}
.jx-signin .jx-captcha header>button{margin-left:auto;width:34px;height:34px;min-width:0;min-height:0;padding:0;display:grid;place-items:center;border:1px solid var(--jx-field-line);border-radius:50%;background:var(--jx-paper-raised);color:var(--jx-wine);font-size:17px;line-height:1;box-shadow:none}
.jx-signin .jx-captcha header>button:hover{background:var(--jx-amber-soft);border-color:var(--jx-line-strong)}
.jx-signin .jx-captcha-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;align-items:end}
.jx-signin .jx-captcha-question{display:flex;align-items:center;justify-content:center;min-height:50px;border:1px dashed var(--jx-scene-line);border-radius:12px;background:var(--jx-paper-raised);color:var(--jx-ink);font:700 21px/1 var(--jx-font-display);letter-spacing:1px}
.jx-signin .jx-captcha-grid label{font-size:10px;gap:5px;color:var(--jx-muted)}
.jx-signin .jx-form .jx-captcha-grid input{text-align:center;font-family:var(--jx-font-display)!important;font-weight:700;letter-spacing:1px}

/* buttons (the website's .future-button) and text links */
.jx-signin .jx-button{display:flex;align-items:center;justify-content:space-between;gap:24px;width:100%;min-height:54px;margin-top:6px;padding:15px 20px 15px 24px;border:0;border-radius:999px;background:var(--jx-wine);color:var(--jx-on-wine);font-size:14px;font-weight:700;line-height:1.4;text-align:left;box-shadow:none;transition:transform .25s,background .25s}
.jx-signin .jx-button span{font-size:22px;font-weight:400;line-height:1}
.jx-signin .jx-button:hover{background:var(--jx-wine-hover);transform:translateY(-2px)}
.jx-signin .jx-button:disabled{opacity:.6;cursor:progress;transform:none}
.jx-signin .jx-links{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px 20px;margin-top:8px}
.jx-signin .jx-links form{display:contents}
.jx-signin .jx-text-link{display:inline-block;width:auto;min-height:0;padding:0;border:0;background:transparent;box-shadow:none;color:var(--jx-wine);font-size:12px;font-weight:700;line-height:1.5;text-align:left;text-decoration:none}
.jx-signin .jx-text-link:hover{color:var(--jx-wine-hover);background:transparent}
.jx-signin .jx-links .jx-text-link.jx-quiet{color:var(--jx-muted)}

/* messages */
.jx-signin :is(.jx-alert,.jx-notice,.jx-warning){padding:11px 13px;border-radius:12px;font-size:12px;line-height:1.55;border:1px solid}
.jx-signin .jx-alert{background:var(--jx-alert-bg);color:var(--jx-alert-ink);border-color:var(--jx-alert-line)}
.jx-signin .jx-notice{background:var(--jx-notice-bg);color:var(--jx-notice-ink);border-color:var(--jx-notice-line)}
.jx-signin .jx-warning{background:var(--jx-warn-bg);color:var(--jx-warn-ink);border-color:var(--jx-warn-line)}

/* second step: the choice */
.jx-signin .jx-choices{display:grid;grid-auto-rows:1fr;gap:12px;margin-top:4px}
.jx-signin .jx-choice{display:grid;grid-template-columns:50px minmax(0,1fr) 22px;gap:15px;align-items:center;width:100%;height:100%;min-height:118px;margin:0;padding:16px 16px 16px 15px;border:1px solid var(--jx-line);border-radius:18px;background:var(--jx-paper);color:var(--jx-ink);text-align:left;box-shadow:none;transition:transform .2s,border-color .2s,box-shadow .2s,background .2s}
.jx-signin .jx-choice:hover{border-color:var(--jx-line-strong);background:var(--jx-paper-raised);box-shadow:var(--jx-shadow);transform:translateY(-2px)}
.jx-signin .jx-choice>span:not(.jx-choice-icon){display:block;min-width:0}
.jx-signin .jx-choice strong{display:block;font:700 17px/1.15 var(--jx-font-display);letter-spacing:-.02em;color:var(--jx-ink)}
.jx-signin .jx-choice>span>span{display:block;margin-top:4px;font-size:12px;line-height:1.55;color:var(--jx-muted)}
.jx-signin .jx-choice>span>span b{color:var(--jx-ink)}
.jx-signin .jx-choice em{display:inline-block;margin-top:7px;font-style:normal;font-size:8px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:var(--jx-wine)}
.jx-signin .jx-choice>i{font-style:normal;font-size:22px;line-height:1;color:var(--jx-wine);transition:transform .2s}
.jx-signin .jx-choice:hover>i{transform:translate(3px,-3px)}
.jx-signin .jx-choice .jx-choice-icon{width:50px;height:50px;display:grid;place-items:center;align-self:center;margin:0;border-radius:14px;background:var(--jx-moss);color:var(--jx-core);line-height:0}
.jx-signin .jx-choice .jx-choice-icon.jx-amber{background:var(--jx-amber-soft);color:var(--jx-amber-ink)}
.jx-signin .jx-choice .jx-choice-icon svg{display:block;width:24px;height:24px;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}

/* second step: the code */
.jx-signin .jx-emblem{display:grid;place-items:center;width:64px;height:64px;margin-bottom:12px;border-radius:50%;background:var(--jx-moss);color:var(--jx-core)}
.jx-signin .jx-emblem.jx-amber{background:var(--jx-amber-soft);color:var(--jx-amber-ink)}
.jx-signin .jx-emblem svg{width:30px;height:30px;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.jx-signin .jx-form input.jx-code{height:68px;margin:2px 0 4px;padding-left:.5em;text-align:center;font-family:var(--jx-font-display)!important;font-size:30px;font-weight:600;line-height:1;letter-spacing:.5em}
.jx-signin .jx-form input.jx-code.jx-code-long{font-size:24px;letter-spacing:.24em}
.jx-signin .jx-code-hint{font-size:12px;line-height:1.55;color:var(--jx-muted)}
.jx-signin .jx-code-hint b{color:var(--jx-ink)}
.jx-signin .jx-codebox{display:block;padding:16px;border:1px dashed var(--jx-scene-line);border-radius:14px;background:var(--jx-paper-soft);color:var(--jx-ink);font:700 18px/1.4 var(--jx-font-display);letter-spacing:.06em;text-align:center;overflow-wrap:anywhere}

/* note + foot */
.jx-signin .jx-security-note{display:flex;gap:10px;align-items:flex-start;margin-top:18px;padding-top:15px;border-top:1px solid var(--jx-line);color:var(--jx-muted);font-size:11px;line-height:1.6}
.jx-signin .jx-security-note svg{flex:none;width:20px;height:22px;stroke:var(--jx-note);fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.jx-signin .jx-foot{display:flex;justify-content:space-between;gap:12px;margin-top:12px;padding-top:12px;border-top:1px solid var(--jx-line);font-size:10px;letter-spacing:.3px;color:var(--jx-muted)}
.jx-signin .jx-foot a{color:var(--jx-wine);font-weight:700;text-decoration:none}

/* company signature under the card */
.jx-signin .jx-signature{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:6px 14px;color:var(--jx-muted);font-size:8px;letter-spacing:3px;text-transform:uppercase;text-align:center}
.jx-signin .jx-signature strong{font:700 12px/1.3 var(--jx-font-display);letter-spacing:2px;color:var(--jx-ink)}
.jx-signin .jx-signature i{font-style:normal;color:var(--jx-amber)}

/* ---------- narrow widths ---------- */
@media (max-width:980px){
  .jx-signin .jx-card{grid-template-columns:45% 55%}
  .jx-signin .jx-brand{padding:28px 26px 24px}
  .jx-signin .jx-form-panel{padding:36px 32px}
  .jx-signin .jx-scene{min-height:320px}
  .jx-signin .jx-board{width:64%;padding:15px 14px 13px}
  .jx-signin .jx-board-main{grid-template-columns:54px 1fr;gap:10px}
  .jx-signin .jx-values{width:33%;padding:12px 10px}
  .jx-signin .jx-values>div{font-size:9px;gap:7px}
  .jx-signin .jx-form h2{font-size:32px}
}
@media (max-width:720px){
  .jx-signin{padding:16px 14px 22px;justify-content:flex-start;gap:12px}
  .jx-signin .jx-topbar{display:none}
  .jx-signin .jx-card{max-width:480px;grid-template-columns:1fr;min-height:0;border-radius:18px}
  .jx-signin .jx-form-panel{order:1;padding:28px 22px 26px}
  .jx-signin .jx-form>img{display:block;width:46px;height:46px;object-fit:contain;border-radius:11px;margin-bottom:10px}
  .jx-signin .jx-form h2{font-size:31px}
  .jx-signin .jx-brand{order:2;padding:20px 22px 22px;gap:14px}
  .jx-signin .jx-brand::before,.jx-signin .jx-brand::after{display:none}
  .jx-signin .jx-scene{display:none}
  .jx-signin .jx-brand-head img{width:44px;height:44px;border-radius:11px}
  .jx-signin .jx-wordmark{font-size:24px}
  .jx-signin .jx-tagline{margin-top:4px}
  .jx-signin .jx-brand-rule{display:none}
  .jx-signin .jx-signature{font-size:7px;letter-spacing:2px;max-width:480px}
  .jx-signin .jx-signature strong{font-size:11px}
  .jx-signin .jx-choice{grid-template-columns:44px minmax(0,1fr) 18px;gap:12px;min-height:104px;padding:14px}
  .jx-signin .jx-choice .jx-choice-icon{width:44px;height:44px}
}
/* ---------- desktop at 100 %: one card size on every step, and no page scroll ----------
   The card takes its height from the window, never from the step it shows, so the
   password, the choice, the code and the recovery screens are all the same size.
   The chrome around it (padding, top bar, signature, gaps) is subtracted exactly;
   shorter windows tighten the content in three steps so the tallest step still fits. */
@media (min-width:721px){
  .jx-signin{--jx-pad:clamp(10px,2.2vh,26px);--jx-gap:clamp(8px,1.5vh,14px);--jx-top:52px;height:100vh;height:100dvh;min-height:0;padding:var(--jx-pad) 24px;gap:var(--jx-gap);justify-content:center}
  .jx-signin .jx-topbar{height:var(--jx-top);flex:none}
  .jx-signin .jx-signature{flex:none;min-height:16px}
  .jx-signin .jx-card{flex:none;min-height:0;height:min(760px,calc(100vh - 2*var(--jx-pad) - 2*var(--jx-gap) - var(--jx-top) - 16px));height:min(760px,calc(100dvh - 2*var(--jx-pad) - 2*var(--jx-gap) - var(--jx-top) - 16px))}
  .jx-signin .jx-brand{min-height:0}
  .jx-signin .jx-scene{min-height:0;transform-origin:top left}
  .jx-signin .jx-form-panel{min-height:0;overflow-y:auto;scrollbar-width:thin}
}
/* tier 1: laptop windows (up to 900 px tall) */
@media (min-width:721px) and (max-height:900px){
  .jx-signin .jx-brand{padding:24px 30px 20px;gap:12px}
  .jx-signin .jx-brand-head img{width:50px;height:50px}
  .jx-signin .jx-wordmark{font-size:26px}
  .jx-signin .jx-scene{transform:scale(.9)}
  .jx-signin .jx-form-panel{padding:22px 44px}
  .jx-signin .jx-form{gap:7px}
  .jx-signin .jx-form h2{font-size:30px}
  .jx-signin .jx-lede{margin:2px 0 4px;font-size:13.5px;line-height:1.6}
  .jx-signin .jx-form form{gap:9px}
  .jx-signin .jx-form label{gap:5px}
  .jx-signin .jx-form input:not([type=hidden]){height:44px;padding:10px 14px}
  .jx-signin .jx-password button{top:3px}
  .jx-signin .jx-button{min-height:48px;padding:12px 18px 12px 22px}
  .jx-signin .jx-captcha{padding:10px;gap:8px}
  .jx-signin .jx-captcha-question{min-height:44px}
  .jx-signin .jx-security-note{margin-top:10px;padding-top:9px}
  .jx-signin .jx-foot{margin-top:8px;padding-top:8px}
  .jx-signin .jx-form input.jx-code{height:56px}
  .jx-signin .jx-emblem{width:54px;height:54px;margin-bottom:6px}
  .jx-signin .jx-choice{min-height:104px;padding:13px 14px}
}
/* tier 2: short laptop windows (up to 760 px tall) — the top bar steps aside */
@media (min-width:721px) and (max-height:760px){
  .jx-signin{--jx-top:0px}
  .jx-signin .jx-topbar{display:none}
  .jx-signin .jx-brand{padding:20px 28px 18px;gap:8px}
  .jx-signin .jx-brand-head img{width:44px;height:44px;border-radius:11px}
  .jx-signin .jx-wordmark{font-size:24px}
  .jx-signin .jx-brand-rule{margin-top:6px}
  .jx-signin .jx-scene{transform:scale(.78)}
  .jx-signin .jx-help{padding:10px 13px;font-size:10.5px;line-height:1.5}
  .jx-signin .jx-motto{margin-top:8px}
  .jx-signin .jx-form-panel{padding:16px 40px}
  .jx-signin .jx-form{gap:6px}
  .jx-signin .jx-kicker{margin:0 0 2px}
  .jx-signin .jx-form h2{font-size:27px}
  .jx-signin .jx-lede{font-size:13px;line-height:1.5;margin:0 0 2px}
  .jx-signin .jx-form form{gap:8px}
  .jx-signin .jx-form label{font-size:11.5px}
  .jx-signin .jx-form input:not([type=hidden]){height:40px;padding:8px 13px;font-size:14px}
  .jx-signin .jx-password button{top:1px}
  .jx-signin .jx-button{min-height:44px;margin-top:2px;padding:10px 16px 10px 20px}
  .jx-signin .jx-captcha{padding:9px;gap:6px;border-radius:14px}
  .jx-signin .jx-captcha-question{min-height:40px;font-size:19px}
  .jx-signin .jx-captcha header>button{width:30px;height:30px}
  .jx-signin .jx-links{margin-top:4px}
  .jx-signin .jx-security-note{margin-top:6px;padding-top:7px;font-size:10.5px;line-height:1.5}
  .jx-signin .jx-foot{margin-top:6px;padding-top:6px}
  .jx-signin .jx-form input.jx-code{height:50px;font-size:26px}
  .jx-signin .jx-form input.jx-code.jx-code-long{font-size:21px}
  .jx-signin .jx-emblem{display:none}
  .jx-signin .jx-choices{gap:9px}
  .jx-signin .jx-choice{min-height:92px;padding:11px 13px}
  .jx-signin .jx-codebox{padding:12px;font-size:16px}
}
/* tier 3: very short windows (up to 650 px tall) */
@media (min-width:721px) and (max-height:650px){
  .jx-signin .jx-brand{padding:16px 26px 14px}
  .jx-signin .jx-scene{transform:scale(.66)}
  .jx-signin .jx-form-panel{padding:12px 40px}
  .jx-signin .jx-form{gap:5px}
  .jx-signin .jx-form h2{font-size:24px}
  .jx-signin .jx-lede{font-size:12.5px}
  .jx-signin .jx-form form{gap:6px}
  .jx-signin .jx-form input:not([type=hidden]){height:38px;padding:7px 12px}
  .jx-signin .jx-password button{top:0}
  .jx-signin .jx-button{min-height:40px;padding:8px 16px 8px 20px}
  .jx-signin .jx-captcha{padding:8px}
  .jx-signin .jx-captcha header small{display:none}
  .jx-signin .jx-captcha-question{min-height:38px}
  .jx-signin .jx-security-note{font-size:10px}
  .jx-signin .jx-form input.jx-code{height:44px}
  .jx-signin .jx-choice{min-height:84px}
  .jx-signin .jx-choice em{margin-top:3px}
}
@media (prefers-reduced-motion:reduce){.jx-signin *{transition:none!important;animation:none!important}}