/* ============================================================
   LenderIQ — Brokers 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);}
.brk-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;}

.brk-sec{padding:var(--nar-sec-pad-top) 0 var(--nar-sec-pad-bottom);position:relative;}
.brk-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%);
}
.brk-head{display:flex;flex-direction:column;gap:16px;margin-bottom:40px;position:relative;}
.brk-head.center{align-items:center;text-align:center;}

/* Problem panel — copy only */
.pain-panel{
  display:grid;grid-template-columns:repeat(3,1fr);gap:20px;
  max-width:960px;margin:0 auto;
}
.pain-col{
  background:var(--bg-2);border:1px solid var(--b1);border-radius:10px;
  padding:22px 20px;
}
.pain-eye{
  display:block;font-family:var(--mono);font-size:10px;font-weight:500;
  letter-spacing:0.1em;text-transform:uppercase;color:var(--red);margin-bottom:10px;
}
.pain-body{font-size:14.5px;line-height:1.6;color:var(--t3);}

.viz-mount,
.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-iframe{
  display:block;width:100%;max-width:100%;
  border:0;margin:0;padding:0;
  background:var(--bg-0);
  color-scheme:dark;
}
.viz-frame--s2 .viz-iframe{height:560px;min-height:560px;}
.viz-frame--s3 .viz-iframe{height:320px;min-height:320px;}
.viz-frame--s4 .viz-iframe{height:360px;min-height:360px;}
.viz-frame--s6 .viz-iframe{height:440px;min-height:440px;}
.viz-frame--s7 .viz-iframe{height:260px;min-height:260px;}
.viz-frame--s8 .viz-iframe{height:320px;min-height:320px;}

/* Commercial outcome close */
.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:48px auto 0;
}
.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;}
  .pain-panel,.close-panel{grid-template-columns:1fr;}
  .viz-frame--s2 .viz-iframe{height:720px;min-height:720px;}
  .viz-frame--s3 .viz-iframe{height:540px;min-height:540px;}
  .viz-frame--s4 .viz-iframe{height:540px;min-height:540px;}
  .viz-frame--s6 .viz-iframe{height:500px;min-height:500px;}
  .viz-frame--s7 .viz-iframe{height:280px;min-height:280px;}
  .viz-frame--s8 .viz-iframe{height:340px;min-height:340px;}
}
@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{padding-left:0;padding-right:0;overflow:visible;max-width:100%;}
  .viz-iframe{max-width:100%;width:100% !important;}
  .viz-frame--s2 .viz-iframe{height:auto;min-height:720px;}
  .viz-frame--s3 .viz-iframe{height:auto;min-height:920px;}
  .viz-frame--s6 .viz-iframe{height:auto;min-height:620px;}
  .viz-frame--s7 .viz-iframe{height:auto;min-height:480px;}
}

/* ============================================================
   MOBILE IA RECONSTRUCTION — Brokers page visual embeds
   Match Lenders: embed mode + content-height iframes at ≤640px.
   ============================================================ */
@media (max-width:640px){
  .viz-frame--s2 .viz-iframe{min-height:760px;}
  .viz-frame--s3 .viz-iframe{min-height:960px;}
  .viz-frame--s6 .viz-iframe{min-height:680px;}
  .viz-frame--s7 .viz-iframe{min-height:520px;}
}

/* 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;}
}