/* Merchant login gateway. Shell = pg-demo.css (the approved render sidebar and header, pixel-identical);
   this file only styles the card on the right. No form, no credential capture: a plain same-tab link to app2. */
body.lg-page{ --bn:0px; }
.lg-home{ text-decoration:none; display:inline-flex; }
.lg-nav{ list-style:none; margin:0; padding:0; }
.lg-nav .navitem{ cursor:default; }
.sb-foot a{ color:#FFFFFF; text-decoration:none; } .sb-foot a:hover{ text-decoration:underline; text-underline-offset:3px; }
.lg-main{ display:flex; justify-content:center; padding:18px 14px 60px; }
.lg-card{ width:100%; max-width:600px; margin:clamp(8px,4vh,48px) auto 0; }
.lg-body{ position:relative; z-index:3; padding:22px 24px 26px; }
.lg-title{ font-family:var(--disp); font-size:clamp(24px,2.6vw,30px); line-height:1.12; font-weight:800; letter-spacing:-.02em; color:var(--navy); margin:0 0 10px; }
.lg-p{ color:var(--ink-soft); font-size:14.5px; line-height:1.55; margin:0 0 16px; }
.lg-dest{ display:flex; align-items:center; gap:10px; padding:11px 13px; border-radius:12px; background:rgba(255,255,255,.66); border:1px solid var(--line); font-family:var(--mono); font-size:12.5px; color:var(--ink); margin-bottom:16px; overflow-wrap:anywhere; }
.lg-dest svg{ width:16px; height:16px; flex:none; color:var(--pos); }
.lg-go{ display:flex; align-items:center; justify-content:center; gap:10px; width:100%; min-height:52px; border-radius:14px; text-decoration:none; color:#FFFFFF;
  font-family:var(--body); font-weight:600; font-size:14px; letter-spacing:.04em; background:linear-gradient(158deg,#8C1D22,#641418);
  box-shadow:0 12px 28px rgba(100,20,24,.3), inset 0 1px 0 rgba(255,255,255,.26); transition:transform .16s cubic-bezier(.2,.7,.2,1), box-shadow .16s; }
.lg-go:hover{ transform:translateY(-1px); box-shadow:0 16px 34px rgba(100,20,24,.36), inset 0 1px 0 rgba(255,255,255,.32); }
.lg-go:active{ transform:none; }
.lg-go svg{ width:18px; height:18px; }
.lg-need{ margin-top:20px; padding-top:14px; border-top:1px solid var(--line-soft); }
.lg-need h3,.lg-safe h3{ font-family:var(--mono); font-weight:500; font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:var(--muted); margin:0 0 10px; }
.lg-need ul,.lg-safe ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px; }
.lg-need li,.lg-safe li{ display:flex; gap:10px; font-size:13.5px; color:var(--ink-soft); line-height:1.5; }
.lg-need li svg,.lg-safe li svg{ width:16px; height:16px; flex:none; margin-top:2px; color:var(--acc); }
.lg-safe{ margin-top:16px; padding:13px 15px; border-radius:14px; background:rgba(var(--acc-rgb),.07); border:1px solid rgba(var(--acc-rgb),.22); }
.lg-more{ display:flex; flex-wrap:wrap; gap:8px 18px; margin-top:18px; font-size:13px; }
.lg-more a{ color:var(--acc-deep); text-underline-offset:3px; }
@media (prefers-reduced-motion:reduce){ .lg-go{ transition:none; } }