/* The stage - the left half of the sign-in page. A photograph of the places lenders work, washed to paper at the top so the line is read on paper,
   with a frosted demo card floating on the picture; the card stands on one of the four jobs Lucia does (screening, the credit memo, monitoring, servicing)
   and its tabs switch between them when clicked. Nothing on the stage moves by itself: no animation, no entrance, no cycling - only what is clicked changes.
   The demo is drawn from fictional data and says so on the card. Nothing on the stage mentions a limited partner or a fund: the people who sign in
   here are lenders and, later, borrowers.
   Source: Lucia-Login-dev-package-2026-10-09-v6, source/css/stage.css (ported with the Manhattan photograph only: the alternate photographs and the
   ledger stage are dropped, and the photograph's rules are folded into the base rules). */
.ln-stage { position: relative; overflow: hidden; isolation: isolate; min-height: 100vh; background: var(--ln-paper-2); }
.ln-veil { position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(180deg, rgba(243, 242, 231, 1) 0%, rgba(243, 242, 231, .97) 15%, rgba(243, 242, 231, .8) 29%, rgba(243, 242, 231, .36) 46%, rgba(243, 242, 231, 0) 62%), linear-gradient(0deg, rgba(25, 25, 24, .34) 0%, rgba(25, 25, 24, 0) 28%); }
/* the photograph (Lower Manhattan, golden hour): set low, anchored by --ph-x / --ph-y so it keeps its subject in the part the card leaves open */
.ln-photo { position: absolute; inset: 0; z-index: -2; pointer-events: none; background-color: var(--ln-paper-2); background-image: url(/img/login/stage-manhattan.jpg); background-repeat: no-repeat; background-size: cover; background-position: var(--ph-x, 50%) var(--ph-y, 60%); --ph-x: 40%; --ph-y: 55%; --ph-by: 16%; }
.ln-st-brand { position: absolute; top: 30px; left: 40px; }
.ln-copy { position: absolute; top: 118px; left: 40px; right: 40px; }
.ln-copy h2 { margin: 0; font: 650 clamp(34px, 3.5vw, 52px)/1.04 var(--lc-font); letter-spacing: -.04em; color: var(--ln-ink); text-wrap: balance; }
.ln-copy h2 span { color: var(--ln-gold-ink); }
.ln-copy p { margin: 16px 0 0; max-width: 430px; font-size: 17px; line-height: 1.5; color: var(--ln-ink-2); }
/* the name, spelled out: Lucia, then the five words its letters stand for. The initials are set heavier so the abbreviation can be read off the line. */
.ln-copy .ln-gloss { margin-top: 18px; max-width: none; font-size: 17px; line-height: 1.4; font-weight: 500; text-wrap: balance; }
.ln-copy .ln-gloss b { font-weight: 700; color: var(--ln-ink); }
.ln-copy .ln-gloss + p { margin-top: 8px; }

/* the demo card and the two small cards that float beside it */
.ln-dw { position: absolute; left: 0; right: 0; margin-inline: auto; bottom: 112px; width: min(470px, calc(100% - 80px)); transform-origin: 50% 100%; }   /* keep opacity and filter off this box: either makes it a backdrop root and the card's blur would see nothing behind it */
.ln-demo { position: relative; border-radius: 18px; padding: 18px 18px 14px; background: linear-gradient(150deg, rgba(255, 254, 242, .8) 0%, rgba(255, 254, 242, .56) 55%, rgba(255, 254, 242, .7) 100%); -webkit-backdrop-filter: blur(16px) saturate(150%); backdrop-filter: blur(16px) saturate(150%); border: 1px solid rgba(255, 255, 255, .78); box-shadow: 0 40px 70px -36px rgba(25, 25, 24, .55), inset 0 1px 0 rgba(255, 255, 255, .85); }
.ln-dm-h { display: flex; align-items: center; gap: 8px; }
.ln-dm-h svg { width: 22px; height: 22px; }
.ln-dm-h b { font-size: 14px; font-weight: 700; letter-spacing: -.01em; }
.ln-dm-h small { margin-left: auto; font-size: 12px; font-weight: 600; color: var(--ln-ink-3); }
.ln-scs { position: relative; height: 268px; margin-top: 12px; }
.ln-sc { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity .35s ease, visibility .35s; }   /* a tab click is a soft dissolve, not a cut */
.ln-sc.on { opacity: 1; visibility: visible; }
.ln-q { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 8px 12px 8px 8px; border-radius: 12px; background: rgba(255, 255, 255, .68); border: 1px solid rgba(255, 255, 255, .88); }
.ln-q .role { flex: none; height: 26px; display: inline-flex; align-items: center; gap: 5px; padding: 0 9px 0 7px; border-radius: 7px; background: var(--ln-paper-3); color: var(--ln-ink); font-size: 12px; font-weight: 600; }
.ln-q .role svg { width: 14px; height: 14px; }
.ln-q .qt { font-size: 14px; font-weight: 500; color: var(--ln-ink); min-width: 0; line-height: 1.3; }
.ln-a { margin: 12px 0 0; font-size: 14px; line-height: 1.45; color: var(--ln-ink); }
.ln-viz { margin-top: 10px; }
.ln-chips { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; }
.ln-chips span { display: inline-flex; align-items: center; gap: 5px; height: 26px; padding: 0 10px 0 8px; border-radius: 7px; background: rgba(255, 254, 242, .85); border: 1px solid rgba(25, 25, 24, .09); color: var(--ln-ink); font-size: 12px; font-weight: 600; }
.ln-chips svg { width: 13px; height: 13px; }

/* the screening ledger: a single rule over the subtotal, a double rule under the total — the page's own convention */
.ln-lg > div { display: grid; grid-template-columns: minmax(0, 1fr) 60px 52px 16px; align-items: center; gap: 8px; height: 27px; border-bottom: 1px solid rgba(25, 25, 24, .12); font-size: 12.5px; }
.ln-lg .nm { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ln-lg .nm u { text-decoration: none; margin-left: 6px; padding: 1px 6px; border-radius: 4px; background: rgba(25, 25, 24, .07); font-size: 12px; font-weight: 600; color: var(--ln-ink-2); }
.ln-lg .mv { text-align: right; font: 500 12.5px var(--lc-font-mono); }
.ln-lg .tv { text-align: right; font: 500 12px var(--lc-font-mono); color: var(--ln-ink-3); }
.ln-lg .mk { width: 15px; height: 15px; }
.ln-lg .mk.no { color: var(--ln-err); }
.ln-lg .tot { grid-template-columns: minmax(0, 1fr) auto; height: 34px; border-bottom: 3px double var(--ln-ink); border-top: 1px solid var(--ln-ink); margin-top: 2px; font-weight: 600; }
.ln-lg .tot b { font: 600 17px var(--lc-font-mono); letter-spacing: -.01em; }
.ln-lg .tot em { margin-left: 8px; padding: 2px 8px; border-radius: 5px; background: var(--ln-ink); color: var(--ln-paper); font: 600 12px/16px var(--lc-font); }
.ln-lg .tot span { display: flex; align-items: center; justify-content: flex-end; }

/* the credit memo: the ten sections it was prepared in */
.ln-sec { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.ln-sec span { display: flex; align-items: center; gap: 8px; height: 34px; padding: 0 10px; border-radius: 8px; background: rgba(255, 255, 255, .66); border: 1px solid rgba(255, 255, 255, .88); font-size: 12.5px; font-weight: 600; white-space: nowrap; overflow: hidden; }
.ln-sec span b { flex: none; font: 500 12px var(--lc-font-mono); color: var(--ln-ink-3); }
.ln-sec span i { margin-left: auto; font: 500 12px var(--lc-font-mono); color: var(--ln-ink-3); font-style: normal; }

/* monitoring: headroom on a financial covenant, the covenant line ticked on each bar */
.ln-hr { display: grid; gap: 12px; }
.ln-hr .top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; font-size: 12.5px; }
.ln-hr .top span { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ln-hr .top em { font: 600 12.5px var(--lc-font-mono); font-style: normal; white-space: nowrap; }
.ln-hr .top em small { font: 500 12px var(--lc-font); color: var(--ln-ink-3); margin-left: 4px; }
.ln-hr .bar { position: relative; height: 8px; margin-top: 6px; border-radius: 4px; background: rgba(25, 25, 24, .09); }
.ln-hr .bar b { position: absolute; left: 0; top: 0; bottom: 0; width: var(--gw); border-radius: 4px; background: var(--ln-ink); }
.ln-hr .bar s { position: absolute; top: -3px; bottom: -3px; width: 2px; background: var(--ln-gold); border-radius: 1px; }
.ln-hr .cap { display: flex; justify-content: space-between; margin-top: 6px; font: 500 12px var(--lc-font-mono); color: var(--ln-ink-3); }

/* servicing: nine statements, seven ready */
.ln-stk { display: flex; gap: 3px; height: 16px; }
.ln-stk i { display: block; border-radius: 3px; }
.ln-stk .a { background: var(--ln-ink); flex: 7; }
.ln-stk .b { background: var(--ln-gold); flex: 2; }
.ln-key { display: flex; gap: 18px; flex-wrap: wrap; margin-top: 10px; font-size: 12.5px; color: var(--ln-ink-2); }
.ln-key span { display: inline-flex; align-items: center; gap: 7px; }
.ln-key i { width: 10px; height: 10px; border-radius: 2px; }
.ln-key b { font: 600 12.5px var(--lc-font-mono); color: var(--ln-ink); }
.ln-stmts { display: grid; gap: 0; margin-top: 10px; }
.ln-stmts > div { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 10px; height: 26px; border-bottom: 1px solid rgba(25, 25, 24, .12); font-size: 12.5px; }
.ln-stmts .nm { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ln-stmts .mv { font: 500 12.5px var(--lc-font-mono); }
.ln-stmts .wt { font: 500 12px var(--lc-font); color: var(--ln-gold-ink); font-weight: 600; margin-right: 10px; }

/* the scene tabs under the card: the one that is showing wears a rule of gold under its name */
.ln-dm-f { display: flex; gap: 6px; margin-top: 10px; padding-top: 12px; border-top: 1px solid rgba(25, 25, 24, .1); }
.ln-dm-f button { position: relative; flex: 1; height: 28px; border: 0; background: transparent; border-radius: 8px; font: 600 12px/1 var(--lc-font); color: var(--ln-ink-2); cursor: pointer; overflow: hidden; transition: color .25s ease, background .25s ease; }
.ln-dm-f button:hover { background: rgba(25, 25, 24, .05); }
.ln-dm-f button.on { color: var(--ln-ink); background: rgba(255, 255, 255, .78); }
.ln-dm-f button::after { content: ""; position: absolute; left: 8px; right: 8px; bottom: 3px; height: 2px; border-radius: 2px; background: var(--ln-gold); transform: scaleX(0); }
.ln-dm-f button.on::after { transform: scaleX(1); }
.ln-dm-f button:focus-visible { outline: 2px solid var(--ln-ink); outline-offset: -2px; }

.ln-fl { position: absolute; display: flex; align-items: center; gap: 9px; padding: 9px 13px 9px 9px; border-radius: 12px; background: linear-gradient(150deg, rgba(255, 254, 242, .72), rgba(255, 254, 242, .44)); border: 1px solid rgba(255, 255, 255, .8); -webkit-backdrop-filter: blur(8px) saturate(140%); backdrop-filter: blur(8px) saturate(140%); box-shadow: 0 18px 30px -20px rgba(25, 25, 24, .45); font-size: 12px; line-height: 1.3; color: var(--ln-ink-2); }
.ln-fl b { display: block; font-size: 12.5px; color: var(--ln-ink); }
.ln-fl .ic { width: 30px; height: 30px; flex: none; border-radius: 8px; display: grid; place-items: center; background: var(--ln-gold-wash); color: var(--ln-gold-ink); box-shadow: inset 0 0 0 1px rgba(138, 94, 8, .18); }
.ln-fl .ic svg { width: 16px; height: 16px; }
.ln-f1 { top: -34px; left: -52px; }
.ln-dw.no-f1 .ln-f1, .ln-dw.no-f2 .ln-f2 { display: none; }
.ln-f2 { top: -88px; right: -6px; }

.ln-trust { position: absolute; left: 40px; bottom: 30px; display: flex; gap: 8px; flex-wrap: wrap; margin: 0; padding: 0; list-style: none; }
.ln-trust li { display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 12px; border-radius: 8px; background: rgba(255, 254, 242, .78); -webkit-backdrop-filter: blur(10px) saturate(140%); backdrop-filter: blur(10px) saturate(140%); border: 1px solid rgba(255, 255, 255, .7); font-size: 12.5px; font-weight: 600; color: var(--ln-ink); }
.ln-trust svg { width: 15px; height: 15px; color: var(--ln-ink); }

@media (max-height: 800px) and (min-width: 901px) {
  .ln-st-brand { top: 26px; }   /* the form column's top line sits 4px higher in a short window (login.css); the lockup follows it */
  .ln-copy { top: 96px; }
  .ln-copy p:not(.ln-gloss) { display: none; }
  .ln-dw { scale: .92; bottom: 100px; }
}
@media (max-height: 720px) and (min-width: 901px) {
  /* a short window (a laptop with its browser chrome, 1366 × 650): the line steps down a size and the tags sit lower, so the card has the room (script: fit() in stage.js) */
  .ln-f2 { display: none; }
  .ln-dw { scale: .84; bottom: 86px; }
  .ln-copy { top: 78px; }
  .ln-copy h2 { font-size: clamp(32px, 3.1vw, 44px); }
  .ln-copy .ln-gloss { margin-top: 14px; font-size: 16px; }
  .ln-trust { bottom: 20px; }
  .ln-trust li { height: 32px; }
}
@media (max-width: 1180px) and (min-width: 901px) {
  .ln-dw { width: min(420px, calc(100% - 80px)); }
  .ln-trust li:nth-child(3) { display: none; }
  .ln-f1 { left: -24px; }
}
@media (min-width: 1700px) and (min-height: 940px) {
  /* a big window: the card grows with the stage instead of floating small on it */
  .ln-dw { scale: 1.12; bottom: 128px; }
  .ln-trust { bottom: 40px; }
}
@media (max-width: 900px) {
  /* on a phone the stage is a banner: the lockup, the line and the name spelled out on paper, a strip of the skyline beneath them, nothing that needs a hover */
  .ln-stage { min-height: 0; height: 292px; }
  .ln-st-brand { top: 22px; left: 24px; }
  .ln-copy { top: 76px; left: 24px; right: 24px; }
  .ln-copy h2 { font-size: 34px; }
  .ln-copy .ln-gloss { margin-top: 12px; font-size: 14px; line-height: 1.35; }
  .ln-copy p:not(.ln-gloss), .ln-dw, .ln-trust { display: none; }
  .ln-photo { background-size: auto 175%; background-position: var(--ph-x, 50%) var(--ph-by, 16%); }
  .ln-veil { background: linear-gradient(180deg, rgba(243, 242, 231, 1) 0%, rgba(243, 242, 231, .98) 62%, rgba(243, 242, 231, .5) 80%, rgba(243, 242, 231, 0) 100%), linear-gradient(0deg, rgba(25, 25, 24, .22) 0%, rgba(25, 25, 24, 0) 30%); }
}