/* Split-screen shell for the sign-in and enrolment flow. */

.authbody{display:block;min-height:100vh;background:var(--ground)}

.split{display:grid;grid-template-columns:1.05fr .95fr;min-height:100vh}
@media(max-width:940px){
  .split{grid-template-columns:1fr}
  .split-art{min-height:250px;order:-1}
}

/* ---------- left: branded panel ---------- */
.split-art{
  position:relative;overflow:hidden;
  background:
    radial-gradient(120% 90% at 12% 8%, #12556A 0%, transparent 58%),
    radial-gradient(110% 80% at 88% 96%, #0B3C4C 0%, transparent 62%),
    linear-gradient(158deg, #082B37 0%, #05191F 100%);
  display:flex;align-items:center;
}
.split-art::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.028) 1px, transparent 1px),
                   linear-gradient(90deg, rgba(255,255,255,.028) 1px, transparent 1px);
  background-size:56px 56px;
  mask-image:radial-gradient(90% 80% at 30% 30%, #000 30%, transparent 100%);
}
#net{position:absolute;inset:0;width:100%;height:100%;display:block}

.art-in{position:relative;z-index:2;padding:60px clamp(32px,5vw,74px);color:#E4F4F8;max-width:640px}
.art-mark{display:flex;gap:5px;margin-bottom:30px}
.art-mark span{width:8px;height:34px;border-radius:2px;display:block}
.art-mark span:nth-child(1){background:#5FC6DC}
.art-mark span:nth-child(2){background:#2E8DA5;height:26px;align-self:flex-end}
.art-mark span:nth-child(3){background:#D8A21C;height:18px;align-self:flex-end}

.split-art h2{
  font-size:clamp(28px,3.3vw,42px);font-weight:700;letter-spacing:-.022em;
  line-height:1.08;color:#fff;margin:0 0 16px
}
.split-art p{color:#9FC4CE;font-size:15.5px;line-height:1.6;max-width:46ch;margin:0 0 30px}

.art-list{list-style:none;padding:0;margin:0 0 40px;display:flex;flex-direction:column;gap:11px}
.art-list li{
  display:flex;align-items:baseline;gap:13px;font-size:13.5px;color:#B8D6DE;
  border-top:1px solid rgba(255,255,255,.09);padding-top:11px
}
.art-list li b{
  font-family:"IBM Plex Mono",monospace;font-size:20px;font-weight:600;color:#5FC6DC;
  min-width:38px;font-variant-numeric:tabular-nums
}
.art-foot{font-size:11.5px !important;color:#5E8792 !important;margin:0 !important;
  letter-spacing:.02em}

/* ---------- right: the form ---------- */
.split-form{
  display:flex;flex-direction:column;justify-content:center;align-items:center;
  padding:52px 28px;background:var(--surface)
}
.form-in{width:100%;max-width:404px}
.split-foot{margin:34px 0 0;font-size:11.5px;color:var(--ink-3);text-align:center}

.form-in h1{font-size:26px;font-weight:700;letter-spacing:-.018em;margin:0 0 7px}
.form-in .lede{color:var(--ink-2);font-size:14.5px;line-height:1.55;margin:0 0 26px}
.form-in .eyebrow{
  font-family:"IBM Plex Mono",monospace;font-size:10.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--accent);margin:0 0 11px
}

.fld{margin-bottom:16px}
.fld label{display:block;font-size:12.5px;font-weight:600;margin-bottom:6px;color:var(--ink-2)}
.fld input[type=text],.fld input[type=password],.fld input[type=email]{
  width:100%;padding:12px 14px;border:1px solid var(--rule);border-radius:8px;
  font:inherit;font-size:15px;background:var(--surface-2);color:var(--ink);
  transition:border-color .15s, box-shadow .15s
}
.fld input:focus{
  border-color:var(--accent);background:var(--surface);outline:none;
  box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent)
}
.fld .helptext,.fld ul{font-size:12px;color:var(--ink-3);margin:6px 0 0;padding-left:16px}
.fld ul.errorlist{color:var(--no);list-style:none;padding-left:0}

.btn-full{width:100%;text-align:center;padding:12px 18px;font-size:15px;border-radius:8px}

/* stepper */
.stepper{display:flex;align-items:center;gap:0;margin-bottom:30px}
.stepper .st{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--ink-3);white-space:nowrap}
.stepper .dot{
  width:23px;height:23px;border-radius:50%;border:1.5px solid var(--rule);
  display:grid;place-items:center;font-size:11px;font-weight:700;
  font-family:"IBM Plex Mono",monospace;flex:none;background:var(--surface)
}
.stepper .st.on .dot{background:var(--accent);border-color:var(--accent);color:#fff}
.stepper .st.on{color:var(--ink);font-weight:600}
.stepper .st.did .dot{background:var(--yes);border-color:var(--yes);color:#fff}
.stepper .st.did{color:var(--yes)}
.stepper .ln{flex:1;height:1.5px;background:var(--rule);margin:0 11px;min-width:14px}
.stepper .ln.did{background:var(--yes)}

/* MFA */
.qr-frame{
  width:206px;margin:0 auto 18px;padding:12px;background:#fff;border-radius:12px;
  border:1px solid var(--rule);box-shadow:var(--shadow)
}
.qr-frame img{display:block;width:182px;height:182px}
.or{display:flex;align-items:center;gap:12px;margin:20px 0 14px;color:var(--ink-3);font-size:11.5px;
  letter-spacing:.1em;text-transform:uppercase;font-family:"IBM Plex Mono",monospace}
.or::before,.or::after{content:"";flex:1;height:1px;background:var(--rule)}
.secretbox{
  font-family:"IBM Plex Mono",monospace;font-size:14px;letter-spacing:.14em;
  background:var(--surface-2);border:1px dashed var(--rule);border-radius:8px;
  padding:13px;text-align:center;word-break:break-all;user-select:all;color:var(--ink-2)
}
.otp{
  width:100%;padding:15px !important;font-family:"IBM Plex Mono",monospace !important;
  font-size:27px !important;letter-spacing:.42em !important;text-align:center;
  text-indent:.42em
}
.apps{display:flex;gap:7px;flex-wrap:wrap;margin:12px 0 0;justify-content:center}
.apps span{
  font-size:11.5px;color:var(--ink-3);border:1px solid var(--rule);border-radius:99px;
  padding:3px 10px;background:var(--surface-2)
}
.codes{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:20px 0;padding:0}
.codes li{
  list-style:none;background:var(--surface-2);border:1px solid var(--rule);border-radius:7px;
  padding:9px 10px;text-align:center;font-family:"IBM Plex Mono",monospace;font-size:14px;
  user-select:all;letter-spacing:.04em
}
.tip{
  background:var(--surface-2);border:1px solid var(--rule);border-left:3px solid var(--accent);
  border-radius:7px;padding:12px 15px;font-size:13px;color:var(--ink-2);margin:0 0 22px
}
.tip b{color:var(--ink);display:block;margin-bottom:3px;font-size:13px}
.alt{text-align:center;margin-top:20px;font-size:13px;color:var(--ink-3)}

/* demo banner */
.demo-note{
  background:linear-gradient(135deg,#12556A,#0B3C4C);border-radius:9px;padding:14px 16px;
  margin-bottom:22px;color:#D8ECF2;font-size:12.5px;line-height:1.55
}
.demo-note b{color:#fff;display:block;margin-bottom:5px;font-size:12px;
  letter-spacing:.1em;text-transform:uppercase;font-family:"IBM Plex Mono",monospace}
.demo-note code{
  background:rgba(255,255,255,.12);padding:1px 6px;border-radius:4px;
  font-size:12.5px;color:#fff;user-select:all
}