/* ============================================================
   LenderIQ — Lenders page shell (narrative v2 variant)
   ============================================================ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{
  background:var(--bg-0);color:var(--t2);font-family:var(--font);
  font-feature-settings:'cv11','ss01','ss03';
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
a{color:inherit;text-decoration:none;}
.wrap{max-width:1200px;margin:0 auto;padding:0 32px;}
.eyebrow{
  font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:0.14em;
  text-transform:uppercase;color:var(--t3);
}
.eyebrow .ch{color:var(--gold);}
.section-h{font-size:38px;line-height:1.14;font-weight:600;letter-spacing:-0.022em;color:var(--t1);text-wrap:balance;}
.section-sub{font-size:16.5px;line-height:1.65;color:var(--t3);max-width:620px;text-wrap:pretty;}
.section-sub.center{margin-left:auto;margin-right:auto;}
.section-sub strong{color:var(--t2);font-weight:600;}
[data-reveal]{opacity:0;transform:translateY(14px);transition:opacity .7s var(--ease),transform .7s var(--ease);transition-delay:var(--d,0s);}
[data-reveal].in{opacity:1;transform:none;}
.thread{display:flex;flex-direction:column;align-items:center;padding:0;}
.thread span{width:1px;height:var(--nar-thread-h);background:linear-gradient(var(--b1),var(--b3),var(--b1));}

.nav{
  position:sticky;top:0;z-index:300;height:64px;
  background:rgba(11,14,19,0.85);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid var(--b1);
}
.nav-in{max-width:1200px;margin:0 auto;padding:0 32px;height:100%;display:flex;align-items:center;gap:40px;}
.wordmark{font-size:18px;font-weight:700;letter-spacing:-0.02em;color:var(--t1);}
.wordmark .iq{color:var(--gold);}
.iq,.brand-iq{color:var(--gold);}
.nav-links{display:flex;gap:28px;flex:1;}
.nav-links a{font-size:13.5px;font-weight:500;color:var(--t3);transition:color .14s ease;}
.nav-links a:hover{color:var(--t1);}
.nav-links a.active{color:var(--t1);position:relative;}
.nav-links a.active::after{content:'';position:absolute;left:0;right:0;bottom:-23px;height:2px;background:var(--gold);}
.nav-cta{display:flex;align-items:center;gap:20px;}
.nav-signin{font-size:13.5px;font-weight:500;color:var(--t3);}
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  font-size:14px;font-weight:600;border-radius:8px;padding:0 20px;height:42px;
  border:none;white-space:nowrap;transition:filter .14s ease,box-shadow .14s ease;
}
.btn-gold{background:var(--gold);color:#1A1407;}
.btn-gold:hover{filter:brightness(1.06);box-shadow:0 0 24px var(--gold-glow);}
.btn-ghost{background:transparent;color:var(--t2);box-shadow:inset 0 0 0 1px var(--b2);}
.btn-ghost:hover{background:var(--bg-4);color:var(--t1);}
.btn-sm{height:36px;padding:0 16px;font-size:13px;}

.hero{position:relative;overflow:hidden;padding:88px 0 80px;text-align:center;}
.thread--hero span{height:var(--nar-thread-hero-h);}
.ldc-sec--first{padding-top:var(--nar-sec-pad-top-first);}
.hero::before{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse 90% 56% at 50% -4%,rgba(201,168,76,0.075),transparent 55%);
}
.hero-copy{position:relative;display:flex;flex-direction:column;align-items:center;gap:22px;}
.hero-copy h1{font-size:56px;line-height:1.06;font-weight:600;letter-spacing:-0.032em;color:var(--t1);max-width:820px;text-wrap:balance;}
.hero-sub{font-size:18px;line-height:1.65;color:var(--t2);max-width:680px;}
.hero-ctas{display:flex;gap:14px;margin-top:8px;flex-wrap:wrap;justify-content:center;}

.ldc-sec{padding:var(--nar-sec-pad-top) 0 var(--nar-sec-pad-bottom);position:relative;}
.ldc-sec::before{
  content:'';position:absolute;inset:0;pointer-events:none;opacity:0.5;
  background:radial-gradient(ellipse 70% 40% at 50% 0%,rgba(76,141,255,0.04),transparent 60%);
}
.ldc-head{display:flex;flex-direction:column;gap:16px;margin-bottom:40px;position:relative;}
.ldc-head.center{align-items:center;text-align:center;}

.viz-frame{
  position:relative;display:flex;justify-content:center;
  width:100%;margin:0 auto;
  padding:8px 0 0;overflow:visible;
  background:var(--bg-0);
}
.viz-frame--v1{
  border-radius:12px;overflow:hidden;
  background:radial-gradient(ellipse 90% 60% at 50% 40%,rgba(76,141,255,0.03),var(--bg-0) 70%);
  mask-image:linear-gradient(180deg,#000 88%,transparent 100%);
  -webkit-mask-image:linear-gradient(180deg,#000 88%,transparent 100%);
}
.viz-iframe{
  display:block;width:100%;max-width:100%;
  border:0;margin:0;padding:0;
  background:var(--bg-0);
  color-scheme:dark;
}
.viz-frame--v1 .viz-iframe{height:580px;min-height:580px;}
.viz-frame--v2 .viz-iframe{height:580px;min-height:580px;}
.viz-frame--v4 .viz-iframe{height:520px;min-height:520px;}
.viz-frame--v5 .viz-iframe{height:590px;min-height:590px;}
.viz-frame--v6 .viz-iframe{height:500px;min-height:500px;}
.viz-frame--v7 .viz-iframe{height:520px;min-height:520px;}
.viz-frame--vc1 .viz-iframe{height:500px;min-height:500px;}

/* Board-level economic close — copy only */
.close-sec::before{
  background:radial-gradient(ellipse 70% 40% at 50% 0%,rgba(224,180,73,0.05),transparent 60%);
}
.close-panel{
  display:grid;grid-template-columns:repeat(3,1fr);gap:20px;
  max-width:960px;margin:0 auto;
}
.close-col{
  background:var(--bg-2);border:1px solid var(--b1);border-radius:10px;
  padding:22px 20px;
}
.close-eye{
  display:block;font-family:var(--mono);font-size:10px;font-weight:500;
  letter-spacing:0.1em;text-transform:uppercase;color:var(--gold);margin-bottom:10px;
}
.close-body{font-size:14.5px;line-height:1.6;color:var(--t3);}

.cta{padding:104px 0 96px;text-align:center;position:relative;}
.cta::before{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse 60% 50% at 50% 100%,rgba(224,180,73,0.06),transparent 60%);
}
.cta h2{font-size:42px;line-height:1.1;font-weight:600;letter-spacing:-0.028em;color:var(--t1);max-width:720px;margin:18px auto 0;text-wrap:balance;}
.cta-sub{font-size:17px;color:var(--t3);max-width:560px;margin:18px auto 0;}
.cta-ctas{display:flex;gap:14px;justify-content:center;margin-top:34px;flex-wrap:wrap;}
.cta-note{margin-top:18px;font-family:var(--mono);font-size:11px;color:var(--t4);letter-spacing:0.06em;text-transform:uppercase;}

.footer{border-top:1px solid var(--b1);padding:28px 0 40px;}
.footer-in{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;}
.footer-links{display:flex;gap:24px;flex-wrap:wrap;}
.footer-links a{font-size:13px;color:var(--t3);}
.footer-copy{font-family:var(--mono);font-size:11px;color:var(--t4);}

@media (max-width:980px){
  .hero-copy h1{font-size:42px;}
  .section-h{font-size:32px;}
  .nav-links{display:none;}
  .cta h2{font-size:34px;}
  .close-panel{grid-template-columns:1fr;}
  .viz-frame--v1 .viz-iframe{height:640px;min-height:640px;}
  .viz-frame--v2 .viz-iframe{height:600px;min-height:600px;}
  .viz-frame--v4 .viz-iframe{height:540px;min-height:540px;}
  .viz-frame--v5 .viz-iframe{height:610px;min-height:610px;}
  .viz-frame--v6 .viz-iframe{height:520px;min-height:520px;}
  .viz-frame--v7 .viz-iframe{height:540px;min-height:540px;}
  .viz-frame--vc1 .viz-iframe{height:540px;min-height:540px;}
}
@media (max-width:640px){
  .wrap{padding-left:20px;padding-right:20px;}
  .hero-copy h1{font-size:clamp(28px,8vw,36px);}
  .hero-sub{font-size:16px;}
  .hero-ctas,.cta-ctas{flex-direction:column;width:100%;max-width:320px;margin-left:auto;margin-right:auto;}
  .hero-ctas .btn,.cta-ctas .btn{width:100%;}
  .viz-frame--v1 .viz-iframe{height:920px;min-height:920px;}
  .viz-frame--v2 .viz-iframe{height:auto;min-height:720px;}
  .viz-frame--v4 .viz-iframe{height:640px;min-height:640px;}
  .viz-frame--v5 .viz-iframe{height:680px;min-height:680px;}
  .viz-frame--v6 .viz-iframe{height:560px;min-height:560px;}
  .viz-frame--v7 .viz-iframe{height:560px;min-height:560px;}
  .viz-frame--vc1 .viz-iframe{height:620px;min-height:620px;}
}

/* ============================================================
   MOBILE IA RECONSTRUCTION — Lenders page
   ============================================================ */

/* S03 — Review not Reconstruction: the desktop visual (v1) uses
   a bottom mask-image fade to blend content into the background.
   On mobile the stacked content is taller than the iframe, so
   the mask crops the lower panels. Remove the mask and give the
   iframe room to show everything. */
@media (max-width:640px){
  .viz-frame--v1{
    mask-image:none !important;
    -webkit-mask-image:none !important;
    overflow:visible !important;
    border-radius:8px;
  }
  .viz-frame--v1 .viz-iframe{
    height:1100px;
    min-height:1100px;
  }
}

/* S06 — Evidence Chain: the inner HTML chains are laid out as a
   4-column grid (520px min-width). On mobile the iframe clips
   the right two chains. Increasing the iframe height lets the
   vertically-stacked chain layout (implemented inside the visual
   HTML below) render without cropping. */
@media (max-width:640px){
  .viz-frame--v7 .viz-iframe{
    height:860px;
    min-height:860px;
  }
}

/* Mobile nav — page-local (mirrors /marketing/site/base.css) */
.nav-toggle{
  display:none;align-items:center;justify-content:center;
  width:40px;height:40px;margin-left:auto;
  border:1px solid var(--b2);border-radius:8px;
  background:transparent;color:var(--t2);cursor:pointer;flex-shrink:0;
}
.nav-toggle svg{width:20px;height:20px;}
.nav-mobile{
  display:none;position:fixed;top:64px;left:0;right:0;z-index:290;
  padding:16px 20px 24px;
  background:rgba(11,14,19,0.97);border-bottom:1px solid var(--b1);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  flex-direction:column;gap:4px;max-height:calc(100vh - 64px);overflow-y:auto;
}
.nav-mobile.open{display:flex;}
.nav-mobile a{
  display:block;padding:12px 0;font-size:15px;font-weight:500;
  color:var(--t2);border-bottom:1px solid var(--b1);
}
.nav-mobile a:last-of-type{border-bottom:none;}
.nav-mobile-ctas{
  display:flex;flex-direction:column;gap:10px;margin-top:16px;padding-top:16px;
  border-top:1px solid var(--b1);
}
@media (max-width:980px){
  .nav-toggle{display:inline-flex;}
  .nav-cta .btn-sm,.nav-signin{display:none;}
}
