/* ════════════════════════════════════════════════════════════
   NML Register — 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:1fr 1.05fr;
}

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

.benefits{display:flex;flex-direction:column;gap:20px;margin-bottom:30px}
.benefit{display:flex;gap:15px;align-items:flex-start}
.benefit-icon{
  width:42px;height:42px;border-radius:11px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  background:rgba(47,107,255,.10);border:1px solid rgba(47,107,255,.18);
}
.benefit-icon svg path,.benefit-icon svg rect,.benefit-icon svg circle{stroke:var(--nml-blue)}
.benefit-title{font-size:15px;font-weight:700;color:var(--t-primary);margin-bottom:3px;letter-spacing:-.01em}
.benefit-desc{font-size:13.5px;line-height:1.55;color:var(--t-secondary)}

.left-note{
  font-size:13.5px;line-height:1.6;color:var(--t-secondary);
  padding:16px 18px;border-radius:var(--radius-sm);
  background:rgba(255,255,255,.78);border:1px solid var(--border);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  box-shadow:0 10px 22px -16px rgba(15,23,42,.20);
}
.left-note b{color:var(--nml-blue);font-weight:700}

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

/* ── Responsive ── */
@media (max-width:980px){
  .page{grid-template-columns:1fr}     /* brand panel first → logo stays on top */
  .left{padding:44px 30px 8px;min-height:auto}
  .right{padding:40px 30px;box-shadow:none}
  .benefits{gap:16px}
}
@media (max-width:640px){
  .left{padding:32px 22px 2px}
  .left-note{display:none}          /* trim height on phones */
  .benefits{gap:14px}
  .fields-row{grid-template-columns:1fr}
  .right{padding:28px 20px}
  .form-title{font-size:24px}
}