/* Sign-in / join — split screen with a brand panel */
.auth-body { background:var(--ivory); }
.auth-shell { display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); min-height:100vh; }
.auth-aside {
  position:relative; overflow:hidden; color:#fff; padding:52px 56px;
  display:flex; flex-direction:column; justify-content:space-between;
  background:
    radial-gradient(800px 420px at 88% 4%, rgba(27,145,135,.30), transparent 60%),
    linear-gradient(158deg, var(--brand-950) 0%, var(--brand-800) 58%, var(--brand-700) 100%);
}
.auth-aside::after {
  content:''; position:absolute; inset:0; pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
                   linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
  background-size:70px 70px;
  mask-image:radial-gradient(700px 480px at 30% 30%, #000, transparent 76%);
}
.auth-aside > * { position:relative; z-index:2; }
.auth-aside h2 { color:#fff; font-size:clamp(1.7rem,1.3rem+1.4vw,2.4rem); line-height:1.2; }
.auth-aside p { color:rgba(226,238,247,.82); }
.auth-points { display:flex; flex-direction:column; gap:18px; margin-top:34px; }
.auth-point { display:flex; gap:14px; align-items:flex-start; }
.auth-point span.ic {
  width:38px; height:38px; flex:none; border-radius:11px; display:grid; place-items:center;
  background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.16); color:var(--gold-300);
}
.auth-quote { border-left:2px solid var(--gold-500); padding-left:18px; }
.auth-main { display:flex; align-items:center; justify-content:center; padding:48px 32px; background:var(--paper); }
.auth-card { width:100%; max-width:520px; }
.auth-card h1 { font-size:1.85rem; }
.auth-brand { display:inline-flex; align-items:center; gap:11px; margin-bottom:28px; }
.auth-brand .brand-name { color:var(--brand-900); }
.auth-sep { display:flex; align-items:center; gap:14px; color:var(--ink-400); font-size:.8rem; margin:22px 0; }
.auth-sep::before,.auth-sep::after { content:''; flex:1; height:1px; background:var(--line); }
.demo-card { background:var(--brand-50); border:1px dashed var(--brand-200); border-radius:var(--r); padding:16px 18px; }
.demo-row { display:flex; justify-content:space-between; gap:12px; font-size:.83rem; padding:4px 0; }
.demo-row code { font-family:ui-monospace,SFMono-Regular,Menlo,monospace; background:#fff; padding:1px 7px; border-radius:5px; border:1px solid var(--line); }
.step-pills { display:flex; gap:8px; margin-bottom:24px; }
.step-pill { flex:1; height:4px; border-radius:99px; background:var(--line); }
.step-pill.is-on { background:var(--brand-600); }
@media (max-width:960px){
  .auth-shell { grid-template-columns:1fr; }
  .auth-aside { display:none; }
  .auth-main { padding:34px 20px; }
}