
:root{--b:#2693ff;--blue:#0878e8;--navy:#071b45;--line:#dce8f4;--soft:#f5f9fd}
.sdx41{max-width:1536px;width:100%;margin:18px auto!important;font-family:Arial,Helvetica,sans-serif!important;background:#fff!important;border:1px solid var(--line)!important;border-radius:18px!important;overflow:hidden!important;color:#101828!important;box-shadow:0 10px 35px #1d5f9615!important}.sdx41 *{box-sizing:border-box}.top{height:68px!important;display:flex!important;align-items:center!important;padding:0 20px!important;border-bottom:1px solid var(--line)!important;background:#fff!important}.brand{display:flex!important;align-items:center!important;gap:12px!important}.brand img{height:42px!important;width:auto!important;max-width:205px!important}.brand span{border-left:1px solid var(--line)!important;padding-left:14px!important;color:#164c79!important;font-size:13px!important;font-weight:800!important}.sdx41 nav{margin-left:auto!important;display:flex!important;gap:24px!important;font-size:13px!important}.sdx41 nav b{color:var(--b)!important;border-bottom:3px solid var(--b)!important;padding:24px 4px!important}
.grid{display:grid!important;grid-template-columns:300px minmax(650px,1fr) 330px!important;gap:12px!important;padding:12px!important;background:var(--soft)!important;align-items:start!important}.card{background:#fff!important;border:1px solid var(--line)!important;border-radius:11px!important;overflow:hidden!important;margin:0!important}.card>h3{margin:0!important;background:linear-gradient(90deg,var(--blue),var(--b))!important;color:#fff!important;padding:11px 13px!important;font-size:13px!important}.form{padding-bottom:10px!important}.form label{display:block!important;margin:9px 12px!important;font-size:10px!important;font-weight:800!important;text-transform:uppercase!important;color:#344054!important}.form label>b{float:right!important}.form input,.form select{display:block!important;width:100%!important;height:35px!important;margin-top:5px!important;padding:6px 9px!important;border:1px solid #cbdbea!important;border-radius:7px!important;background:#fff!important;color:#101828!important;font-size:12px!important}.form input[type=range]{height:22px!important;padding:0!important;accent-color:var(--b)!important}.phase{display:grid!important;grid-template-columns:1fr 1fr!important;margin:10px 12px!important}.phase>span{grid-column:1/-1!important;font-size:10px!important;font-weight:800!important;margin-bottom:5px!important}.phase button{height:34px!important;border:1px solid #cbdbea!important;background:#fff!important;color:#344054!important}.phase button.active{background:var(--b)!important;color:#fff!important;border-color:var(--b)!important}.toggle{display:flex!important;justify-content:space-between!important;align-items:center!important;margin:10px 12px!important;font-size:10px!important;font-weight:800!important}.toggle input{width:38px!important;height:21px!important;accent-color:var(--b)!important}.primary{display:block!important;width:calc(100% - 24px)!important;margin:12px!important;padding:11px!important;border:0!important;border-radius:7px!important;background:var(--b)!important;color:white!important;text-align:center!important;text-decoration:none!important;font-size:12px!important;font-weight:800!important}
.middle{min-width:0!important}.scene{position:relative!important;height:510px!important;background:#d7ebfb!important;overflow:hidden!important;perspective:1000px!important;cursor:grab!important}.scene:focus-visible{outline:3px solid #2693ff!important;outline-offset:-3px!important}.scene>img{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;object-fit:cover!important;object-position:center!important;transition:transform .18s ease-out!important;will-change:transform!important}.scene-reset{position:absolute!important;z-index:4!important;left:12px!important;top:12px!important;padding:7px 9px!important;border:1px solid var(--line)!important;border-radius:7px!important;background:#fffffff0!important;color:#176fbf!important;font-size:9px!important;font-weight:800!important;cursor:pointer!important}.scene-hint{position:absolute!important;z-index:4!important;left:12px!important;top:50px!important;padding:5px 7px!important;border-radius:5px!important;background:#071b45cc!important;color:#fff!important;font-size:8px!important}.badges{position:absolute!important;z-index:3!important;top:12px!important;left:50%!important;transform:translateX(-50%)!important;display:flex!important;background:#fff!important;border:1px solid var(--line)!important;border-radius:10px!important;overflow:hidden!important;box-shadow:0 3px 14px #0001!important}.badges div{padding:9px 17px!important;min-width:100px!important;font-size:9px!important;color:#667085!important;border-right:1px solid #e8eef4!important}.badges b{display:block!important;color:#101828!important;font-size:16px!important}.roof{position:absolute!important;z-index:3!important;right:12px!important;top:12px!important;width:180px!important;padding:11px!important;background:#fff!important;border:1px solid var(--line)!important;border-radius:10px!important;font-size:10px!important;box-shadow:0 3px 14px #0001!important}.roof strong{color:#0878e8!important}.roof p{display:flex!important;justify-content:space-between!important}.legend{position:absolute!important;z-index:3!important;left:18px!important;right:18px!important;bottom:14px!important;display:grid!important;grid-template-columns:repeat(4,1fr)!important;gap:8px!important;padding:10px!important;background:#ffffffef!important;border:1px solid var(--line)!important;border-radius:10px!important;box-shadow:0 3px 14px #0001!important}.legend span{text-align:center!important;color:#2693ff!important;font-size:18px!important}.legend b,.legend small{display:block!important}.legend b{font-size:9px!important;color:#174b77!important;margin-top:3px!important}.legend small{font-size:8px!important;color:#667085!important}
.charts{display:grid!important;grid-template-columns:1.2fr 1.2fr 1fr .85fr!important;gap:8px!important;margin-top:8px!important}.chart{height:185px!important;padding:11px!important}.chart h4{margin:0 0 8px!important;color:#1178e8!important;font-size:10px!important}.bars{height:125px!important;display:flex!important;align-items:flex-end!important;gap:3px!important;border-bottom:1px solid #dfe7ee!important}.bars i{flex:1!important;background:var(--b)!important;min-width:3px!important}.bars i.gray{background:#b6c0ca!important}.chart>strong{color:#11a64b!important;font-size:22px!important}.curve{height:90px!important;background:linear-gradient(155deg,transparent 48%,#10a64b 49%,#10a64b 51%,#dff7e8 52%)!important;clip-path:polygon(0 100%,100% 0,100% 100%)!important}.donut{width:100px!important;height:100px!important;margin:8px auto!important;border-radius:50%!important;display:grid!important;place-items:center!important;position:relative!important;background:conic-gradient(var(--b) 86%,#e5edf5 0)!important}.donut:after{content:""!important;position:absolute!important;width:66px!important;height:66px!important;border-radius:50%!important;background:#fff!important}.donut b{z-index:2!important;font-size:20px!important}
.results{padding-bottom:10px!important}.reco{padding:17px!important}.reco small{color:#0878e8!important;font-size:10px!important;font-weight:800!important}.reco strong{display:block!important;font-size:39px!important;color:var(--navy)!important}.reco em{font-size:15px!important;font-style:normal!important}.results dl{margin:0!important;padding:0 14px!important}.results dl div{display:flex!important;justify-content:space-between!important;padding:10px 0!important;border-top:1px solid #edf2f7!important;font-size:11px!important}.results dd{margin:0!important;font-weight:800!important;text-align:right!important}.box{margin:10px!important;padding:13px!important;border:1px solid var(--line)!important;border-radius:9px!important;font-size:11px!important}.box>strong{color:#0878e8!important}.box p{display:flex!important;justify-content:space-between!important}.box .total{padding-top:9px!important;border-top:1px solid #edf2f7!important;color:#0878e8!important;font-weight:800!important}
@media(max-width:1200px){.grid{grid-template-columns:280px minmax(550px,1fr)!important}.results{grid-column:1/-1!important}.charts{grid-template-columns:1fr 1fr!important}}@media(max-width:760px){.top{height:auto!important;padding:10px!important}.brand span,.sdx41 nav{display:none!important}.grid{display:block!important}.card,.middle{margin-bottom:10px!important}.scene{height:410px!important}.legend{grid-template-columns:1fr 1fr!important}.roof{width:145px!important}.charts{grid-template-columns:1fr!important}}

.calc-state{margin:8px 12px 2px!important;padding:8px 10px!important;border-radius:7px!important;background:#eff8ff!important;color:#176fbf!important;font-size:10px!important;font-weight:700!important;border:1px solid #d9ebfb!important}

/* v4.3 - result column visibility fix */
.sdx41 .grid{
  grid-template-columns:300px minmax(620px,1fr) 390px!important;
}
.sdx41 .results{
  min-width:0!important;
  overflow:visible!important;
}
.sdx41 .results .reco{
  padding:17px!important;
}
.sdx41 .result-table{
  display:block!important;
  width:100%!important;
  padding:0 14px!important;
  margin:0!important;
}
.sdx41 .result-row{
  display:grid!important;
  grid-template-columns:minmax(0,1fr) minmax(110px,auto)!important;
  align-items:center!important;
  column-gap:14px!important;
  width:100%!important;
  min-height:38px!important;
  padding:9px 0!important;
  margin:0!important;
  border-top:1px solid #edf2f7!important;
  color:#101828!important;
  background:#fff!important;
  overflow:visible!important;
}
.sdx41 .result-row span{
  display:block!important;
  min-width:0!important;
  font-size:11px!important;
  line-height:1.25!important;
  color:#101828!important;
  white-space:normal!important;
}
.sdx41 .result-row strong{
  display:block!important;
  min-width:110px!important;
  margin:0!important;
  padding:0!important;
  text-align:right!important;
  font-size:11px!important;
  font-weight:800!important;
  line-height:1.25!important;
  color:#071b45!important;
  opacity:1!important;
  visibility:visible!important;
  white-space:nowrap!important;
  overflow:visible!important;
}
.sdx41 .finance-box{
  display:block!important;
  overflow:visible!important;
}
.sdx41 .finance-row{
  display:grid!important;
  grid-template-columns:minmax(0,1fr) minmax(110px,auto)!important;
  align-items:center!important;
  gap:14px!important;
  padding:9px 0!important;
  margin:0!important;
  width:100%!important;
  color:#101828!important;
}
.sdx41 .finance-row span{
  font-size:11px!important;
  color:#101828!important;
}
.sdx41 .finance-row b{
  display:block!important;
  min-width:110px!important;
  text-align:right!important;
  font-size:11px!important;
  color:#071b45!important;
  opacity:1!important;
  visibility:visible!important;
  white-space:nowrap!important;
}
.sdx41 .finance-row.total{
  border-top:1px solid #edf2f7!important;
  color:#0878e8!important;
  font-weight:800!important;
}
.sdx41 .finance-row.total span,
.sdx41 .finance-row.total b{
  color:#0878e8!important;
}
@media(max-width:1280px){
  .sdx41 .grid{
    grid-template-columns:280px minmax(520px,1fr) 360px!important;
  }
}
@media(max-width:1100px){
  .sdx41 .grid{
    grid-template-columns:280px 1fr!important;
  }
  .sdx41 .results{
    grid-column:1/-1!important;
  }
}

/* v4.4 - desktop width / third-column clipping fix */
.sdx41{
  width:100%!important;
  max-width:100%!important;
  overflow:hidden!important;
}
.sdx41 .grid{
  width:100%!important;
  max-width:100%!important;
  grid-template-columns:
    minmax(220px, 0.80fr)
    minmax(0, 1.85fr)
    minmax(270px, 0.95fr)!important;
  column-gap:10px!important;
  overflow:visible!important;
}
.sdx41 .form,
.sdx41 .middle,
.sdx41 .results,
.sdx41 .card{
  min-width:0!important;
  max-width:100%!important;
}
.sdx41 .middle{
  overflow:hidden!important;
}
.sdx41 .scene{
  width:100%!important;
  min-width:0!important;
}
.sdx41 .scene>img{
  max-width:none!important;
}
.sdx41 .results{
  width:100%!important;
  min-width:270px!important;
  overflow:hidden!important;
}
.sdx41 .results .reco,
.sdx41 .result-table,
.sdx41 .finance-box{
  width:100%!important;
  max-width:100%!important;
}
.sdx41 .result-row{
  grid-template-columns:minmax(0,1fr) minmax(96px,auto)!important;
}
.sdx41 .result-row strong,
.sdx41 .finance-row b{
  min-width:96px!important;
  max-width:150px!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
}
.sdx41 .quote{
  width:calc(100% - 20px)!important;
  margin:10px!important;
  white-space:normal!important;
  line-height:1.25!important;
}
.sdx41 .badges{
  max-width:58%!important;
}
.sdx41 .badges div{
  min-width:0!important;
  padding:8px 10px!important;
}
.sdx41 .roof{
  width:155px!important;
}
.sdx41 .legend{
  left:10px!important;
  right:10px!important;
  gap:5px!important;
  padding:8px!important;
}
.sdx41 .legend b{
  font-size:8px!important;
}
.sdx41 .legend small{
  font-size:7px!important;
}
.sdx41 .charts{
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
}
.sdx41 .chart{
  min-width:0!important;
  overflow:hidden!important;
}

/* Typical desktop WP content widths around 900–1150px:
   retain all three columns, but compact them. */
@media (min-width:901px) and (max-width:1180px){
  .sdx41 .grid{
    grid-template-columns:230px minmax(0,1fr) 275px!important;
    gap:8px!important;
    padding:8px!important;
  }
  .sdx41 .form label{
    margin-left:9px!important;
    margin-right:9px!important;
  }
  .sdx41 .scene{
    height:430px!important;
  }
  .sdx41 .legend{
    grid-template-columns:repeat(2,1fr)!important;
  }
  .sdx41 .charts{
    grid-template-columns:1fr 1fr!important;
  }
  .sdx41 .results .reco strong{
    font-size:32px!important;
  }
}

/* Below 900px it is safer to move results under the main content,
   rather than clip any data. */
@media (max-width:900px){
  .sdx41 .grid{
    grid-template-columns:260px minmax(0,1fr)!important;
  }
  .sdx41 .results{
    grid-column:1/-1!important;
    min-width:0!important;
  }
}
