/* ════════════════════════════════════════════════════════════
   NML Login — split layout on light (about-demo) background.
   Requires nml-auth.css.
════════════════════════════════════════════════════════════ */

.page{
  position:relative;z-index:1;
  min-height:100vh;width:100%;
  display:grid;grid-template-columns:1.05fr 1fr;
}

/* ── LEFT: brand panel — light, content sits over page orbs ── */
.left{
  position:relative;
  display:flex;flex-direction:column;justify-content:center;
  padding:64px 60px;
  color:var(--t-primary);
}
.left > *{position:relative;z-index:1}
.logo-row{margin-bottom:40px}
.left .logo-img{height:38px;width:auto;filter:none}   /* colored logo on light */

.badge{
  display:inline-flex;align-items:center;gap:9px;
  padding:7px 15px 7px 12px;border-radius:var(--radius-pill);
  background:rgba(255,255,255,.78);border:1px solid var(--border);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  box-shadow:0 8px 18px -12px rgba(15,23,42,.20);
  font-size:11.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  color:var(--t-secondary);width:fit-content;margin-bottom:26px;
}
.badge-txt{letter-spacing:.05em}
.rpl{position:relative;width:9px;height:9px;display:inline-block}
.rpl .ring{display:none}
.rpl .core{position:absolute;inset:0;border-radius:50%;background:var(--nml-green);
  box-shadow:0 0 0 0 rgba(34,197,94,.5);animation:nml-pulse 2.4s var(--ease) infinite}
@keyframes nml-pulse{
  0%{box-shadow:0 0 0 0 rgba(34,197,94,.45)}
  70%{box-shadow:0 0 0 9px rgba(34,197,94,0)}
  100%{box-shadow:0 0 0 0 rgba(34,197,94,0)}
}

.headline{
  font-size:46px;font-weight:800;line-height:1.08;letter-spacing:-.03em;
  margin-bottom:18px;
}
.headline .hl-1{color:#2F6BFF}   /* Think Right */
.headline .hl-2{color:#0F766E}   /* Move Right  */
.headline .hl-3{color:#16A34A}   /* Grow Fast   */
.headline-grad{color:#16A34A}    /* legacy fallback */

.desc{
  font-size:16px;line-height:1.65;color:var(--t-secondary);
  max-width:44ch;margin-bottom:30px;
}

.pills{display:flex;flex-wrap:wrap;gap:10px}
.pill{
  padding:8px 16px;border-radius:var(--radius-pill);
  background:rgba(255,255,255,.82);border:1px solid var(--border);
  font-size:13px;font-weight:600;color:var(--t-secondary);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  box-shadow:0 6px 14px -10px rgba(15,23,42,.18);
}

/* ── RIGHT: form on a clean white surface, lifted off the light bg ── */
.right{
  display:flex;flex-direction:column;justify-content:center;
  padding:56px 60px;
  background:var(--bg-white);
  box-shadow:-24px 0 60px -36px rgba(15,23,42,.16);
}
.right > *{width:100%;max-width:404px;margin-left:auto;margin-right:auto;
  animation:nml-rise-sm .5s var(--ease) both}

/* ── Responsive ── */
@media (max-width:980px){
  .page{grid-template-columns:1fr}
  .left{padding:44px 30px 10px;min-height:auto;text-align:center;align-items:center}
  .logo-row{justify-content:center;margin-bottom:24px}
  .badge{margin-left:auto;margin-right:auto}
  .headline{font-size:36px}
  .desc{margin-left:auto;margin-right:auto;margin-bottom:18px}
  .pills{justify-content:center}
  .right{padding:40px 30px;box-shadow:none}
}
@media (max-width:640px){
  .left{padding:34px 22px 2px}
  .badge{display:none}              /* trim height — form reachable fast */
  .headline{font-size:30px;margin-bottom:12px}
  .desc{display:none}
  .pills{display:none}
  .right{padding:28px 20px}
  .form-title{font-size:24px}
}