/* ============================================================
   auth.css — the two front doors.

   login.html    the lender's desk sign-in
   register.html the borrower's account creation

   Both are a split: a quiet marque on the left that says what this
   is, and the working card on the right. Same carved geometry and
   same sky as the rest of the product, so the sign-in does not feel
   like a different application.
   ============================================================ */

.gate{
  position:relative; z-index:1;
  display:grid; grid-template-columns:minmax(0,1fr) 520px;
  gap:60px; align-items:center;
  max-width:1180px; margin:0 auto; padding:48px 26px 72px;
  min-height:100vh;
}

/* ---------- left marque ---------- */
.marque .mbrand{ display:flex; align-items:center; gap:14px; }
.marque .mbrand .mark{
  width:48px; height:48px; flex:none; border-radius:13px; display:grid; place-items:center;
  background:linear-gradient(150deg, var(--accent), var(--brass));
  color:var(--accent-ink); font-family:var(--font-display); font-size:27px; font-weight:600;
}
.marque .mbrand .name{ font-family:var(--font-display); font-size:32px; line-height:1; }
.marque .mbrand .sub{ font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-3); margin-top:5px; }

.marque h1{
  font-family:var(--font-display); font-weight:500;
  font-size:clamp(30px,3.6vw,46px); line-height:1.1; letter-spacing:-.008em;
  margin:34px 0 0; max-width:17ch;
}
.marque .mlede{ margin:16px 0 0; max-width:46ch; font-size:15px; color:var(--ink-2); line-height:1.65; }

.mpoints{ margin:34px 0 0; display:flex; flex-direction:column; gap:14px; max-width:44ch; }
.mpoint{ display:flex; gap:12px; align-items:flex-start; }
.mpoint .mi{
  flex:none; width:26px; height:26px; border-radius:8px; display:grid; place-items:center;
  background:var(--accent-soft); border:1px solid var(--accent-line); color:var(--accent); font-size:12px;
}
.mpoint .mt{ font-size:13px; font-weight:650; }
.mpoint .md{ font-size:12.5px; color:var(--ink-3); margin-top:2px; line-height:1.5; }

.mfoot{ margin-top:38px; font-size:11.5px; color:var(--ink-3); display:flex; gap:16px; flex-wrap:wrap; }
.mfoot span{ display:flex; align-items:center; gap:6px; }

/* ---------- the card ---------- */
.gatecard{ --panel-bg: var(--panel); padding:34px 34px 30px; }
.gatecard .gtop{ display:flex; align-items:center; justify-content:space-between; gap:12px; }
.gatecard h2{
  font-family:var(--font-display); font-weight:500; font-size:29px; line-height:1.14;
  margin:14px 0 0;
}
.gatecard .glede{ font-size:13px; color:var(--ink-2); margin:9px 0 0; line-height:1.6; }
.gatecard .gfields{ display:flex; flex-direction:column; gap:15px; margin-top:24px; }
.gatecard .grow{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
.gatecard .gacts{ margin-top:24px; display:flex; flex-direction:column; gap:11px; }

.gatecard .gsep{
  display:flex; align-items:center; gap:12px; margin:19px 0 0;
  font-size:10.5px; letter-spacing:.15em; text-transform:uppercase; color:var(--ink-3);
}
.gatecard .gsep::before, .gatecard .gsep::after{
  content:''; flex:1; height:1px; background:var(--line-2);
}

.gatecard .gfoot{
  margin-top:24px; padding-top:17px; border-top:1px solid var(--line-2);
  font-size:11.5px; color:var(--ink-3); line-height:1.6;
}
.gatecard .gfoot a{ color:var(--accent); border-bottom:1px solid var(--accent-line); }

/* ---------- demo banner: never let this be mistaken for a real login ---------- */
.demobanner{
  display:flex; gap:10px; align-items:flex-start;
  padding:11px 13px; border-radius:var(--r-sm);
  background:var(--info-soft); border:1px solid var(--info-line);
  font-size:11.5px; line-height:1.55; color:var(--ink-2);
}
.demobanner b{ color:var(--info); }

/* ---------- OTP ---------- */
.otp{ display:flex; gap:9px; margin-top:6px; }
.otp input{
  width:46px; height:54px; text-align:center;
  font-family:var(--font-display); font-size:24px; font-variant-numeric:tabular-nums;
  background:var(--panel-3); color:var(--ink);
  border:1px solid var(--line); border-radius:var(--r-sm);
  transition:border-color var(--fast), box-shadow var(--fast), background var(--fast);
}
.otp input:focus{ outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); background:var(--panel-2); }
.otp input.filled{ border-color:var(--accent-line); background:var(--accent-soft); }

.resend{ font-size:11.5px; color:var(--ink-3); margin-top:12px; }
.resend b{ color:var(--ink-2); font-variant-numeric:tabular-nums; }

/* ---------- role picker ---------- */
.rolelist{ display:flex; flex-direction:column; gap:8px; margin-top:6px; }
.rolepick{
  display:grid; grid-template-columns:auto 1fr auto; gap:12px; align-items:center;
  padding:12px 14px; cursor:pointer; text-align:left; font:inherit; color:var(--ink-2);
  background:var(--panel-3); border:1px solid var(--line-2); border-radius:var(--r-md);
  transition:background var(--fast), border-color var(--fast), color var(--fast);
}
.rolepick:hover{ background:var(--panel-2); border-color:var(--line); color:var(--ink); }
.rolepick[aria-pressed="true"]{ background:var(--accent-soft); border-color:var(--accent-line); color:var(--ink); }
.rolepick .rscale{
  font-size:9.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3);
  border:1px solid var(--line-2); border-radius:var(--r-pill); padding:3px 8px; white-space:nowrap;
}
.rolepick .rname{ font-weight:650; font-size:13.5px; color:var(--ink); }
.rolepick .rnote{ font-size:11.5px; color:var(--ink-3); margin-top:2px; line-height:1.45; }
.rolepick .rlimit{ font-size:12px; font-weight:700; color:var(--accent); white-space:nowrap; font-variant-numeric:tabular-nums; }

/* ---------- the GSTIN lookup moment ---------- */
.lookup{
  margin-top:14px; padding:14px 15px; border-radius:var(--r-md);
  background:var(--panel-3); border:1px solid var(--line-2);
}
.lookup .lhead{ display:flex; align-items:center; gap:9px; font-size:12px; color:var(--ink-2); }
.lookup .lhead .lmk{ color:var(--accent); }
.lookup dl{ margin:12px 0 0; }

/* ---------- switcher between the two doors ---------- */
.doorswitch{
  display:flex; gap:6px; padding:4px;
  background:var(--panel-3); border:1px solid var(--line-2); border-radius:var(--r-md);
}
.doorswitch a{
  flex:1; text-align:center; padding:8px 12px; border-radius:7px;
  font-size:12px; font-weight:650; color:var(--ink-3);
  transition:background var(--fast), color var(--fast);
}
.doorswitch a:hover{ color:var(--ink-2); }
.doorswitch a[aria-current="page"]{ background:var(--panel); color:var(--ink); box-shadow:inset 0 0 0 1px var(--line-2); }

@media (max-width:980px){
  .gate{ grid-template-columns:minmax(0,1fr); gap:34px; padding:32px 16px 60px; min-height:auto; }
  .marque h1{ font-size:30px; margin-top:24px; }
  .mpoints{ display:none; }
  .gatecard{ padding:26px 22px; }
  .gatecard .grow{ grid-template-columns:minmax(0,1fr); }
}

/* ---------- product identity on the front door ----------
   This slot used to hold a switcher between the two portals. A bank's
   staff sign-in does not offer to walk you over to the customer site, and
   a customer's registration page does not advertise the underwriting desk;
   they are two products. Crossing between them is a presenter's job, and
   the presenter console is where it lives. */
.doormark{ display:flex; align-items:center; gap:10px; min-width:0; }
.doormark .dmk{
  width:32px; height:32px; flex:none; border-radius:9px; display:grid; place-items:center;
  background:linear-gradient(150deg, var(--accent), var(--brass));
  color:var(--accent-ink); font-family:var(--font-display); font-size:18px; font-weight:600;
}
.doormark .dmname{ font-family:var(--font-display); font-size:19px; line-height:1; }
.doormark .dmsub{
  font-size:8.5px; letter-spacing:.17em; text-transform:uppercase;
  color:var(--ink-3); margin-top:3px;
}