/* ==========================================================================
   Lender match screen. Demo only. Uses the funnel's own tokens, nothing new.
   ========================================================================== */

/* ---- the full-screen shell (matching and matched) ---------------------- */
body.lm-full .head { display: none; }
body.lm-full .stage { width: 100%; max-width: none; margin: 0; padding: 0; align-content: stretch; min-height: 100svh; }
.lm-shell { display: grid; grid-template-columns: 1fr; min-height: 100svh; }
.lm-side {
  background: var(--n-2); border-bottom: 1px solid var(--rule-quiet);
  padding: clamp(1.25rem, 3vw, 2.5rem); display: grid; gap: 1.5rem; align-content: start;
}
.lm-received { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem;
  font-family: var(--font-mono); font-size: .6875rem; letter-spacing: .08em; text-transform: uppercase; color: var(--n-10);
  border-bottom: 1px solid var(--rule-quiet); padding-bottom: .625rem; }
.lm-time { color: var(--n-12); }
.lm-sidelbl { font-family: var(--font-display); font-weight: 800; font-stretch: 72%; text-transform: uppercase;
  letter-spacing: .03em; font-size: .8125rem; color: var(--n-10); }
.lm-receipt { display: grid; gap: .5rem; }
.lm-rrow { display: flex; justify-content: space-between; gap: 1rem; align-items: baseline;
  border-bottom: 1px solid var(--rule-quiet); padding-bottom: .5rem; }
.lm-rk { font-family: var(--font-mono); font-size: .6875rem; letter-spacing: .06em; text-transform: uppercase; color: var(--n-10); white-space: nowrap; }
.lm-rv { color: var(--n-12); font-size: .9375rem; font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; }
.lm-sidefoot { align-self: end; margin-top: auto; }
.lm-sidefoot p { color: var(--n-10); font-size: .8125rem; line-height: 1.5; max-width: 26ch; }

.lm-main { padding: clamp(1.5rem, 4vw, 4rem) clamp(1.25rem, 5vw, 5rem) clamp(3rem, 8vh, 6rem);
  display: grid; gap: clamp(1.5rem, 2.5vw, 2rem); align-content: start; width: min(64rem, 100%); }
.lm-mainhead { display: grid; gap: 1rem; justify-items: start; }
.lm-h1:focus { outline: none; }
.lm-h1 { font-family: var(--font-display); font-weight: 840; font-stretch: 68%; text-transform: uppercase;
  letter-spacing: .005em; line-height: .95; color: var(--n-12); margin: 0;
  font-size: clamp(2.25rem, 1.3rem + 2.8vw, 4rem); max-width: 14ch; text-wrap: balance; }
.lm-lead { color: var(--n-11); font-size: 1.0625rem; }
.lm-lbl { font-family: var(--font-display); font-weight: 800; font-stretch: 72%; text-transform: uppercase;
  letter-spacing: .03em; font-size: .875rem; color: var(--n-10); }

@media (min-width: 64rem) {
  .lm-shell { grid-template-columns: 22.5rem 1fr; }
  .lm-side { border-bottom: 0; border-right: 1px solid var(--rule-quiet); align-self: stretch; }
  .lm-side > * { position: sticky; }
  .lm-main { min-height: 100svh; align-content: center; }
}

/* ---- phase 1: the matching engine -------------------------------------- */
.lm-gridhead { display: flex; justify-content: space-between; align-items: baseline;
  font-family: var(--font-mono); font-size: .75rem; letter-spacing: .06em; text-transform: uppercase; color: var(--n-11); }
.lm-status { color: var(--n-10); transition: background 300ms ease, color 300ms ease; padding: .15rem .5rem; margin-right: -.5rem; border-radius: var(--r-2); }
.lm-status.hit { color: var(--lbl); background: var(--a-9); }
.lm-gridwrap { position: relative; overflow: hidden; border-radius: var(--r-4); }
.lm-grid { display: grid; grid-template-columns: repeat(8, 1fr); gap: 8px; }
.lm-tile {
  position: relative; aspect-ratio: 4 / 3; border-radius: var(--r-4);
  background: var(--n-3); border: 1px solid var(--rule-quiet);
  display: grid; place-items: center;
  font-family: var(--font-mono); font-size: .875rem; letter-spacing: .06em; color: var(--n-10);
  transition: opacity 400ms ease, transform 400ms cubic-bezier(.2,.7,.3,1), background 260ms ease, border-color 200ms ease, color 200ms ease;
  opacity: 0; transform: translateY(8px); will-change: transform, opacity;
  animation: lm-tilein 320ms cubic-bezier(.2,.7,.3,1) forwards;
}
@keyframes lm-tilein { to { opacity: 1; transform: none; } }
.lm-tile .lm-tm { display: grid; place-items: center; width: 100%; height: 100%; }
.lm-tile .lm-tm img { width: 60%; height: 60%; object-fit: contain; }
.lm-tile.scan { border-color: var(--a-9); color: var(--n-12); background: var(--n-4); }
.lm-tile.in { border-color: var(--n-9); color: var(--n-12); }
.lm-tile.in::after { content: "✓"; position: absolute; top: 4px; right: 7px; font-size: .625rem; color: var(--a-9); }
.lm-tile.out { opacity: .22 !important; color: var(--n-9); border-color: transparent; animation: none; transform: none; }
.lm-tile.out::after { content: none; }
.lm-tile.out::before { content: ""; position: absolute; left: 20%; right: 20%; top: 50%; height: 1px; background: var(--n-9); transform: rotate(-16deg); }
.lm-tile.gone { opacity: 0 !important; transform: scale(.85); animation: none; transition: opacity 520ms ease, transform 520ms ease; }
.lm-tile.win { background: var(--a-9); color: var(--lbl); border-color: var(--a-9); z-index: 2; opacity: 1 !important;
  transform: translate(var(--dx, 0), var(--dy, 0)) scale(1.6); animation: lm-win 1100ms cubic-bezier(.22,.61,.36,1) forwards;
  transition: background 300ms ease, color 300ms ease, border-color 300ms ease; }
.lm-tile.win::after { content: none; }
.lm-tile.win .lm-tm { font-family: var(--font-display); font-weight: 840; font-stretch: 72%; font-size: 1.25rem; letter-spacing: .02em; }
.lm-tile.win::before { content: ""; position: absolute; inset: -2px; border: 1.5px solid var(--a-9); border-radius: 6px;
  animation: lm-ring 1200ms ease-out 300ms 2; opacity: 0; transform-origin: center; }
@keyframes lm-win { from { transform: none; } to { transform: translate(var(--dx, 0), var(--dy, 0)) scale(1.6); } }
@keyframes lm-ring { 0% { opacity: .9; transform: scale(1); } 100% { opacity: 0; transform: scale(1.35); } }
.lm-winstamp { position: absolute; left: 50%; bottom: -1.35rem; transform: translateX(-50%) scale(.7);
  font-family: var(--font-mono); font-size: .625rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--n-12); white-space: nowrap; opacity: 0; animation: lm-fadein 400ms ease 500ms forwards; }
.lm-sweep { position: absolute; left: 0; right: 0; top: -3px; height: 2px; background: var(--a-9); opacity: 0; pointer-events: none; }
.lm-sweep.go { animation: lm-sweep 760ms linear forwards; }
@keyframes lm-sweep { 0% { top: -3px; opacity: 1; } 100% { top: 100%; opacity: .6; } }

.lm-ticker { display: grid; gap: .625rem; align-content: start; transition: opacity 600ms ease; }
.lm-ticker.dim { opacity: .5; }
.lm-tick { display: grid; grid-template-columns: 1rem 1fr; gap: .625rem; align-items: start;
  font-size: .875rem; line-height: 1.35; color: var(--n-11);
  opacity: 0; transform: translateY(6px); transition: opacity 240ms ease-out, transform 240ms ease-out; }
.lm-tick.on { opacity: 1; transform: none; }
.lm-tick b { display: block; color: var(--n-12); font-weight: 600; }
.lm-tick i { width: 1rem; height: 1rem; margin-top: .15rem; border-radius: 50%; background: var(--a-9); color: var(--lbl);
  display: grid; place-items: center; font-style: normal; font-size: .5625rem; font-weight: 700; }
.lm-tick i::before { content: "✓"; }
.lm-shell.leave { animation: lm-leave 480ms cubic-bezier(.4,0,.6,1) forwards; }
@keyframes lm-leave { to { opacity: 0; } }
@keyframes lm-fadein { to { opacity: 1; } }
@media (max-width: 40rem) { .lm-grid { grid-template-columns: repeat(4, 1fr); gap: 6px; } }
@media (max-width: 63.99rem) {
  .lm-side { gap: 1rem; }
  .lm-receipt { gap: .3rem; }
  .lm-rrow { padding-bottom: .3rem; }
  .lm-rv { font-size: .875rem; }
  .lm-sidefoot { display: none; }
  .lm-ticker { min-height: 0; }
}
@media (max-width: 47.99rem) { .lm-fact .lm-v { white-space: normal; } .lm-co { gap: .375rem .5rem; } }
@media (prefers-reduced-motion: reduce) {
  .lm-tile { animation: none; opacity: 1; transform: none; transition: none; }
  .lm-sweep.go, .lm-tile.win, .lm-tile.win::before, .lm-shell.leave { animation: none; }
}

/* ---- phase 2: matched -------------------------------------------------- */
.lm-stamp {
  display: inline-flex; align-items: center; gap: .5rem; width: max-content;
  font-family: var(--font-mono); font-size: .75rem; letter-spacing: .06em; text-transform: uppercase;
  color: var(--lbl); background: var(--a-9); padding: .3rem .6rem; border-radius: var(--r-2);
}
.lm-stamp::before { content: ""; width: .5rem; height: .5rem; background: var(--lbl); border-radius: 50%; }

.lm-card { background: var(--n-2); border: 1px solid var(--rule-visible); border-radius: var(--r-12); overflow: hidden; }
.lm-rep { display: grid; grid-template-columns: 6rem 1fr; gap: 1.25rem; padding: clamp(1.25rem, 2.5vw, 2rem); align-items: center; }
.lm-photo {
  width: 6rem; height: 6rem; border-radius: var(--r-12); background: var(--n-3);
  display: grid; place-items: center; overflow: hidden;
  font-family: var(--font-display); font-weight: 840; font-stretch: 68%; font-size: 2rem; color: var(--n-12);
  border: 1px solid var(--rule-quiet);
}
.lm-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lm-name { font-family: var(--font-display); font-weight: 840; font-stretch: 72%; text-transform: uppercase;
  letter-spacing: .01em; font-size: clamp(1.5rem, 1rem + 1.4vw, 2rem); line-height: 1; color: var(--n-12); }
.lm-title { color: var(--n-11); font-size: 1rem; margin-top: .375rem; }
.lm-co { display: flex; align-items: center; gap: .5rem; margin-top: .625rem; color: var(--n-12); font-weight: 600; flex-wrap: wrap; }
.lm-mark {
  width: 1.375rem; height: 1.375rem; border-radius: var(--r-4); background: var(--a-9); color: var(--lbl);
  display: grid; place-items: center; font-family: var(--font-display); font-weight: 840; font-size: .75rem;
  overflow: hidden; flex: none;
}
.lm-mark img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lm-loc { color: var(--n-10); font-weight: 400; font-size: .875rem; }
.lm-facts { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--rule-quiet); margin: 0 calc(-1 * clamp(1.25rem, 2.5vw, 2rem)) calc(-1 * clamp(1.25rem, 2.5vw, 2rem)); }
.lm-fact { padding: 1rem clamp(1.25rem, 2.5vw, 2rem); display: grid; gap: .25rem; }
.lm-fact + .lm-fact { border-left: 1px solid var(--rule-quiet); }
.lm-k { font-family: var(--font-mono); font-size: .6875rem; letter-spacing: .06em; text-transform: uppercase; color: var(--n-10); }
.lm-v { color: var(--n-12); font-size: 1.0625rem; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.lm-v.tel { font-family: var(--font-mono); font-weight: 400; font-size: 1.25rem; letter-spacing: .02em; color: inherit; text-decoration: none; }
.lm-stars { color: var(--a-9); letter-spacing: .1em; font-size: .875rem; }
.lm-review { border-top: 1px solid var(--rule-quiet); padding: 1rem clamp(1.25rem, 2.5vw, 2rem); display: grid; gap: .375rem; }
.lm-quote { color: var(--n-11); font-size: .9375rem; line-height: 1.45; max-width: 70ch; }
.lm-quote::before { content: "“"; color: var(--n-10); }
.lm-quote::after { content: "”"; color: var(--n-10); }
.lm-by { font-family: var(--font-mono); font-size: .6875rem; letter-spacing: .04em; text-transform: uppercase; color: var(--n-10); }

.lm-why { display: grid; gap: .875rem; }
.lm-cards { display: grid; grid-template-columns: 1fr; gap: .75rem; }
.lm-bcard { position: relative; background: var(--n-2); border: 1px solid var(--rule-quiet); border-radius: var(--r-4);
  padding: 1.125rem 1.25rem 1.125rem 1.25rem; display: grid; gap: .375rem; align-content: start; }
.lm-bcard i { position: absolute; top: 1rem; right: 1rem; width: 1.125rem; height: 1.125rem; border-radius: 50%;
  background: var(--a-9); color: var(--lbl); display: grid; place-items: center; font-style: normal; font-size: .625rem; font-weight: 700; }
.lm-bcard i::before { content: "✓"; }
.lm-bh { font-family: var(--font-display); font-weight: 840; font-stretch: 72%; text-transform: uppercase;
  letter-spacing: .01em; font-size: 1.25rem; line-height: 1.05; color: var(--n-12); padding-right: 1.75rem; }
.lm-bcard p { color: var(--n-11); font-size: .9375rem; line-height: 1.4; }

.lm-next { display: grid; gap: 1rem; }
.lm-steps { display: grid; gap: .625rem; }
.lm-step { display: grid; grid-template-columns: 1.5rem 1fr; gap: .75rem; align-items: baseline; }
.lm-sn { font-family: var(--font-mono); font-size: .75rem; color: var(--n-10); border: 1px solid var(--rule-visible); border-radius: 50%;
  width: 1.5rem; height: 1.5rem; display: grid; place-items: center; align-self: start; }
.lm-step p { color: var(--n-11); font-size: 1rem; }
.lm-step p b { color: var(--n-12); font-family: var(--font-mono); font-weight: 400; white-space: nowrap; }

.lm-ctas { display: grid; gap: .625rem; margin-top: .25rem; }
.lm-btn {
  height: var(--cta-h); display: grid; place-items: center; border-radius: var(--r-4); padding: 0 1.5rem;
  font-family: var(--font-display); font-weight: 800; font-stretch: 72%; text-transform: uppercase;
  letter-spacing: .03em; font-size: 1rem; text-decoration: none; cursor: pointer; border: 0;
}
.lm-btn.pri { background: var(--a-9); color: var(--lbl); }
.lm-btn.pri:hover { background: var(--a-10); }
.lm-btn.sec { background: transparent; color: var(--n-12); border: 1px solid var(--rule-visible); }
.lm-btn.sec:hover { background: var(--n-2); }

@media (min-width: 48rem) {
  .lm-cards { grid-template-columns: repeat(3, 1fr); }
  .lm-rep { grid-template-columns: 6.5rem 1fr auto; }
  .lm-photo { width: 6.5rem; height: 6.5rem; }
  .lm-facts { grid-column: auto; border-top: 0; margin: 0; grid-template-columns: auto auto; border-left: 1px solid var(--rule-quiet); }
  .lm-fact { padding: .25rem 0 .25rem 1.5rem; }
  .lm-fact + .lm-fact { border-left: 0; padding-left: 2rem; }
  .lm-ctas { grid-template-columns: auto auto; justify-content: start; }
  .lm-steps { grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
  .lm-step { grid-template-columns: 1.5rem 1fr; align-items: start; }
}

@media (prefers-reduced-motion: no-preference) {
  .lm-shell.enter { animation: lm-in 520ms cubic-bezier(.22,.61,.36,1) both; }
  @keyframes lm-in { from { opacity: 0; } to { opacity: 1; } }
  .lm-main > .pop { animation: lm-pop 640ms cubic-bezier(.22,.61,.36,1) both; }
  .lm-main > .pop:nth-child(2) { animation-delay: 120ms; }
  .lm-main > .pop:nth-child(3) { animation-delay: 260ms; }
  .lm-main > .pop:nth-child(4) { animation-delay: 400ms; }
  @keyframes lm-pop { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
}

.lm-setup-link {
  position: fixed; right: 12px; bottom: 10px; z-index: 30;
  font-family: var(--font-mono); font-size: .6875rem; letter-spacing: .04em; text-transform: uppercase;
  color: var(--n-10); background: var(--n-1); border: 0; cursor: pointer; opacity: .55; padding: .25rem .5rem; border-radius: var(--r-2);
}
.lm-setup-link:hover { opacity: 1; color: var(--n-12); }
.lm-setup { position: fixed; inset: 0; z-index: 40; background: rgba(0,25,20,.72); display: grid; place-items: center; padding: 1rem; }
.lm-setup[hidden] { display: none; }
.lm-panel {
  width: min(34rem, 100%); max-height: 92svh; overflow: auto;
  background: var(--n-2); border: 1px solid var(--rule-visible); border-radius: var(--r-12); padding: 1.25rem;
  display: grid; gap: .75rem;
}
.lm-panel h2 { font-family: var(--font-display); font-weight: 840; font-stretch: 68%; text-transform: uppercase; font-size: 1.25rem; color: var(--n-12); }
.lm-panel p { color: var(--n-10); font-size: .875rem; }
.lm-panel label { display: grid; gap: .25rem; font-family: var(--font-mono); font-size: .6875rem; letter-spacing: .05em; text-transform: uppercase; color: var(--n-10); }
.lm-panel input, .lm-panel textarea {
  font: inherit; font-family: var(--font-sans); font-size: 1rem; color: var(--n-12);
  background: var(--n-3); border: 1px solid var(--n-9); border-radius: var(--r-4); padding: .625rem .75rem;
}
.lm-panel textarea { min-height: 4.5rem; resize: vertical; }
.lm-panel input[type=file] { padding: .5rem; color: var(--n-11); }
.lm-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }
.lm-row { display: flex; gap: .625rem; flex-wrap: wrap; margin-top: .25rem; }
.lm-row .lm-btn { height: 2.75rem; padding: 0 1rem; font-size: .875rem; }

.lm-h2b { margin-top: .5rem; border-top: 1px solid var(--rule-quiet); padding-top: .875rem; }
.lm-check { display: flex !important; align-items: center; gap: .625rem; text-transform: none !important; font-family: var(--font-sans) !important;
  font-size: .9375rem !important; letter-spacing: 0 !important; color: var(--n-12) !important; }
.lm-check input { width: 1.125rem; height: 1.125rem; accent-color: var(--a-9); }