:root {
  --brand: #268bcc;
  --ink: #173747;
  --muted: #536d7b;
  --line: #d6e3eb;
  --pale: #eaf5fc;
  --good: #237b53;
  --warn: #986719;
  --bad: #b34242
}

* {
  box-sizing: border-box
}

body {
  margin: 0;
  background: linear-gradient(145deg, #edf6fc, #f7f9fa 55%);
  color: var(--ink);
  font: 15px/1.5 system-ui, -apple-system, sans-serif
}

.shell {
  max-width: 1320px;
  padding: 22px 24px;
  margin: auto
}

header {
  display: flex;
  justify-content: space-between;
  align-items: center
}

.brand {
  display: flex;
  gap: 12px;
  align-items: center
}

.brandmark {
  background: var(--brand);
  color: white;
  font-size: 30px;
  border-radius: 14px;
  width: 50px;
  height: 50px;
  display: grid;
  place-items: center
}

.brand strong {
  display: block;
  font-size: 18px
}

.brand span:not(.brandmark) {
  display: block;
  font-size: 12px;
  color: var(--muted)
}

.privacy {
  font-size: 12px;
  text-align: right;
  color: var(--muted)
}

.intro {
  max-width: 720px;
  margin-bottom: 25px
}

h1 {
  font-size: 36px;
  line-height: 1.15;
  letter-spacing: -1px;
  margin: 7px 0 12px
}

h2 {
  font-size: 21px;
  line-height: 1.25;
  margin: 0 0 7px;
  letter-spacing: -.3px
}

h3 {
  font-size: 17px;
  margin: 12px 0
}

p {
  margin: 8px 0 14px
}

.eyebrow {
  font-size: 11px;
  font-weight: 750;
  letter-spacing: 1.2px;
  color: var(--brand)
}

.layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.06fr);
  gap: 24px;
  align-items: start
}

.panel {
  background: white;
  border: 1px solid var(--line);
  border-radius: 20px;
  box-shadow: 0 7px 24px #204b6410;
  overflow: hidden;
  margin-bottom: 20px
}

.steps {
  padding: 0 23px
}

.step {
  padding: 24px 0;
  border-bottom: 1px solid var(--line)
}

.step:last-child {
  border-bottom: 0
}

.stephead {
  display: flex;
  gap: 12px;
  margin-bottom: 18px
}

.stephead p {
  margin: 0;
  color: var(--muted);
  font-size: 13px
}

.number {
  display: grid;
  place-items: center;
  flex: 0 0 32px;
  height: 32px;
  background: var(--pale);
  border-radius: 10px;
  color: var(--brand);
  font-weight: 800
}

label {
  font-weight: 650;
  font-size: 13px;
  display: block;
  margin: 13px 0 6px
}

input,
select,
textarea {
  width: 100%;
  font: inherit;
  min-width: 0;
  min-height: 44px;
  border: 1px solid #adc3d0;
  border-radius: 10px;
  padding: 10px 12px;
  background: white;
  color: var(--ink)
}

input:focus,
select:focus,
textarea:focus,
button:focus-visible,
summary:focus-visible,
a:focus-visible {
  outline: 3px solid #268bcc55;
  outline-offset: 2px
}

button,
.button {
  font: 700 13px/1.4 system-ui;
  min-height: 43px;
  padding: 11px 16px;
  border: 0;
  border-radius: 10px;
  background: var(--brand);
  color: #fff;
  cursor: pointer;
  text-decoration: none;
  display: inline-block
}

button:hover,
.button:hover {
  filter: brightness(.96)
}

button:disabled {
  opacity: .55;
  cursor: wait
}

.secondary {
  background: white;
  border: 1px solid #a9c1d1;
  color: var(--ink)
}

.inputrow {
  display: flex;
  gap: 8px
}

.inputrow input {
  flex: 1;
  width: 0
}

.hint,
small {
  font-size: 12px;
  color: var(--muted)
}

.choicegrid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px
}

.choicegrid.two {
  grid-template-columns: 1fr 1fr
}

.choice {
  background: white;
  color: var(--ink);
  border: 1px solid var(--line);
  text-align: left;
  padding: 12px 10px;
  font-weight: 500
}

.choice strong,
.choice span {
  display: block
}

.choice strong {
  font-size: 14px
}

.choice span {
  font-size: 12px;
  color: var(--muted);
  margin-top: 4px
}

.choice.active {
  background: var(--pale);
  border-color: var(--brand);
  box-shadow: inset 0 0 0 1px var(--brand)
}

.option,
.check {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-weight: 500
}

.option {
  padding: 13px;
  background: #f4f8fb;
  border: 1px solid var(--line);
  border-radius: 12px
}

.option input,
.check input {
  flex: 0 0 19px;
  width: 19px;
  height: 19px;
  min-height: 0;
  margin: 3px 0;
  accent-color: var(--brand)
}

.option small {
  display: block;
  margin-top: 3px
}

.checkrow {
  display: grid;
  grid-template-columns: 1fr 133px;
  gap: 12px;
  align-items: center;
  margin: 12px 0
}

.checkrow label {
  margin: 0
}

.checkselect {
  background: #fff8e9;
  border-color: #e4ca8e
}

.checkselect.yes {
  background: #eaf7ef;
  border-color: #80b798
}

.checkselect.no {
  background: #fff0ef;
  border-color: #db9a91
}

details {
  margin-top: 16px;
  border-top: 1px solid var(--line);
  padding-top: 13px
}

summary {
  cursor: pointer;
  font-size: 13px;
  font-weight: 700;
  color: var(--brand)
}

details p {
  font-size: 13px
}

.help {
  border: 0;
  margin: 10px 0;
  padding: 0
}

.map {
  aspect-ratio: 4/3;
  background: #edf2f5;
  border-radius: 12px;
  overflow: hidden;
  margin-top: 14px
}

.map svg {
  width: 100%;
  height: 100%
}

.facade-outline {
  fill: none;
  stroke: white;
  stroke-width: 14;
  stroke-linecap: round
}

.facade {
  fill: none;
  stroke-width: 8;
  stroke-linecap: round
}

.facade.high {
  stroke: var(--good)
}

.facade.medium {
  stroke: #d9a135
}

.facade.low {
  stroke: #bb6350
}

.facade.selected {
  stroke: var(--brand);
  stroke-width: 13
}

.hit {
  fill: none;
  stroke: transparent;
  stroke-width: 28;
  cursor: pointer
}

.map g:focus {
  outline: none
}

.map g:focus .facade-outline {
  stroke: #268bcc;
  stroke-width: 19
}

.legend {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  font-size: 10px;
  margin-top: 7px
}

.good {
  color: var(--good)
}

.warn {
  color: var(--warn)
}

.bad {
  color: var(--bad)
}

.notice {
  background: #f2f8fc;
  border: 1px solid #c5e0f1;
  border-radius: 10px;
  padding: 12px;
  font-size: 12px
}

.notice.outside {
  background: #fff8e7;
  border-color: #e8d093
}

.error {
  background: #fff0ed;
  color: #983b2e;
  border-radius: 10px;
  padding: 12px;
  font-size: 13px
}

.empty {
  padding: 45px 30px;
  min-height: 350px;
  display: flex;
  flex-direction: column;
  justify-content: center
}

.verdict {
  background: var(--brand);
  color: white;
  padding: 26px
}

.verdict .eyebrow {
  color: #e8f5ff
}

.verdict h2 {
  font-size: 25px;
  line-height: 1.4;
  margin: 10px 0
}

.verdict p {
  font-size: 12px;
  opacity: .95;
  margin-bottom: 0
}

.resultbody {
  padding: 21px
}

.kpis {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: 20px
}

.kpi {
  padding: 13px 10px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #f8fbfd
}

.kpi strong {
  display: block;
  font-size: 21px;
  white-space: nowrap
}

.kpi span {
  font-size: 11px;
  color: var(--muted)
}

.offers {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin: 16px 0
}

.offer {
  border: 1px solid var(--line);
  border-radius: 13px;
  padding: 14px
}

.offer.selected {
  border-color: var(--brand);
  background: #f6fbff
}

.offer .price {
  font-size: 23px;
  font-weight: 800;
  margin: 8px 0 2px
}

.offer small {
  display: block;
  min-height: 38px
}

.statrow {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid var(--line);
  font-size: 12px;
  padding: 8px 0
}

.statrow strong {
  text-align: right
}

.chart {
  width: 100%;
  height: auto
}

.chart text {
  font: 12px system-ui;
  fill: var(--muted)
}

.chart .line {
  stroke: var(--brand);
  fill: none;
  stroke-width: 3
}

.chart .band {
  fill: var(--brand);
  opacity: .13
}

.chart .grid {
  stroke: #e1e8ed;
  stroke-width: 1
}

.chart .zero {
  stroke: #6c8696;
  stroke-width: 1.3
}

.chart .event {
  stroke: #ad8429;
  stroke-dasharray: 4 3
}

.chartlegend {
  font-size: 11px;
  color: var(--muted)
}

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 17px 0 7px
}

.cta {
  width: 100%;
  text-align: center
}

.tablewrap {
  overflow: auto
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 11px
}

th,
td {
  white-space: nowrap;
  text-align: right;
  padding: 7px;
  border-bottom: 1px solid var(--line)
}

th:first-child,
td:first-child {
  text-align: left
}

.source {
  font-size: 11px;
  color: var(--muted);
  overflow-wrap: anywhere
}

.inquiry {
  padding: 24px
}

.inquiry>p {
  font-size: 13px;
  color: var(--muted)
}

.formgrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 12px
}

.wide {
  grid-column: 1/-1
}

.inquiry button {
  margin-top: 12px
}

.inquiry .check {
  font-size: 12px
}

.inquiry .notice {
  margin-top: 16px
}

footer {
  text-align: center;
  font-size: 11px;
  color: var(--muted);
  margin: 25px 0 10px
}

ul {
  padding-left: 19px
}

#calcStatus:not(:empty) {
  margin-bottom: 12px
}

[hidden],
#printSummary {
  display: none !important
}

.adminshell {
  max-width: 1050px
}

.adminpanel {
  padding: 25px
}

.settinggrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 5px 20px
}

.settingfield.wide {
  grid-column: 1/-1
}

fieldset {
  border: 1px solid var(--line);
  border-radius: 10px;
  margin: 12px 0;
  padding: 14px
}

legend {
  font-size: 13px;
  font-weight: 650
}

.filebutton {
  cursor: pointer;
  display: inline-block;
  margin: 0
}

.filebutton input {
  display: none
}

.adminhead {
  display: flex;
  justify-content: space-between;
  align-items: center
}

.adminnav {
  font-size: 12px;
  color: var(--muted)
}

@media(max-width:900px) {
  .layout {
    grid-template-columns: 1fr
  }

  .privacy {
    display: none
  }

  .intro {
    max-width: none
  }
}

@media(max-width:520px) {
  .shell {
    padding: 16px 13px
  }

  h1 {
    font-size: 29px
  }

  .steps {
    padding: 0 17px
  }

  .choicegrid {
    grid-template-columns: 1fr
  }

  .choicegrid.two {
    grid-template-columns: 1fr 1fr
  }

  .checkrow {
    grid-template-columns: 1fr;
    gap: 4px
  }

  .offers {
    grid-template-columns: 1fr
  }

  .kpi strong {
    font-size: 18px
  }

  .verdict {
    padding: 21px
  }

  .verdict h2 {
    font-size: 22px
  }

  .formgrid {
    grid-template-columns: 1fr
  }

  .formgrid .wide {
    grid-column: auto
  }
}

@page {
  size: A4;
  margin: 13mm
}

@media print {
  body {
    background: white;
    font: 10pt/1.35 Arial, sans-serif;
    color: #172f3c
  }

  body>* {
    display: none !important
  }

  #printSummary {
    display: block !important
  }

  #printSummary h1 {
    font-size: 22pt;
    margin: 0 0 4mm
  }

  #printSummary h2 {
    font-size: 13pt;
    margin: 4mm 0 2mm
  }

  #printSummary p {
    margin: 2mm 0
  }

  #printSummary .printbox {
    border: 1px solid #c4dbe8;
    border-radius: 6px;
    padding: 3mm;
    margin: 3mm 0
  }

  #printSummary table {
    font-size: 10pt
  }

  #printSummary td,
  #printSummary th {
    white-space: normal;
    padding: 2mm
  }

  #printSummary .printsmall {
    font-size: 8pt;
    color: #4f626d
  }

  #printSummary .printheadline {
    font-size: 14pt;
    font-weight: bold;
    color: #176394
  }

  #printSummary .printgrid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 5mm
  }
}

.admin {
  max-width: 1050px;
  margin: 25px auto;
  padding: 25px;
  background: white;
  border: 1px solid var(--line);
  border-radius: 16px
}

body:has(.admin)>header {
  max-width: 1050px;
  margin: 25px auto;
  padding: 0 20px
}

#login {
  max-width: 440px
}

#login button {
  margin-top: 12px
}
/* v1.8: a calmer customer view and protected team workspace. */
a {color:#12699b;text-underline-offset:3px}
.siteheader {border-bottom:1px solid var(--line);margin-bottom:24px;min-height:110px}
.brand {text-decoration:none;color:var(--ink);gap:23px}
.brandlogo {width:150px;height:auto;display:block}
.brandtitle {font-size:16px!important;font-weight:650;border-left:1px solid var(--line);padding-left:23px;color:var(--ink)!important}
.headerlink {font-size:13px;white-space:nowrap}
.intro {max-width:850px}
.intro>p {font-size:16px;color:var(--muted)}
.intro>p.hint {font-size:13px}
.wayfinding {list-style:none;counter-reset:steps;display:flex;gap:8px 20px;flex-wrap:wrap;padding:0;margin:20px 0 12px;font-size:13px;font-weight:650}
.wayfinding li {counter-increment:steps;display:flex;align-items:center;gap:7px}
.wayfinding li:before {content:counter(steps);background:var(--pale);color:#12699b;border-radius:50%;width:23px;height:23px;display:grid;place-items:center}
.eyebrow, summary {color:#12699b}
button,.button {background:#12699b}
button.secondary {background:white;color:var(--ink)}
.choice {background:white}
.number {color:#12699b}
.panel {border-radius:16px;box-shadow:0 4px 18px #204b6409}
.verdict {background:var(--pale);color:var(--ink);border-top:5px solid var(--brand)}
.verdict .eyebrow {color:#12699b}
.verdict p {font-size:13px;color:var(--muted)}
.verdict h2 {font-size:25px;line-height:1.35}
.priceoverview {padding:17px;background:#f6fafc;border-radius:10px;margin-bottom:15px}
.priceoverview>span,.priceoverview>strong,.priceoverview>small {display:block}
.priceoverview>strong {font-size:27px;margin:3px 0}
.offer {margin:20px 0;padding:16px}
.kpis {grid-template-columns:repeat(3,minmax(0,1fr))}
.kpi strong {white-space:normal}
footer {max-width:850px;margin:35px auto 15px;font-size:12px}
footer p {margin:10px 0}
.footerlinks {display:flex;justify-content:center;flex-wrap:wrap;gap:10px 24px;font-size:13px}
.botfield {position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}
.leadtoolbar {display:flex;align-items:end;gap:10px;flex-wrap:wrap;margin-bottom:15px}
.leadtoolbar>div {flex:1;min-width:150px}
.leadtoolbar button {margin-bottom:0}
.leads td,.leads th {white-space:normal;text-align:left;vertical-align:top}
.leads td a {overflow-wrap:anywhere}
.leads details {min-width:210px}
.leads td:nth-child(3) {min-width:170px}
.leads .actions {margin:0}
.leads .actions button {padding:6px 9px;min-height:35px}
.leadinfo {font-size:12px;margin:10px 0;overflow-wrap:anywhere}
.leadinfo pre {white-space:pre-wrap;font:inherit}
.adminsection {margin:22px 0;border-top:1px solid var(--line);padding-top:20px}
.adminsection h2 {margin-bottom:12px}
#settingsLock {border:0;padding:0;margin:0}
#settingsLock:disabled {opacity:.8}
.sourceok {padding:13px;background:#edf7f1;border:1px solid #bddcc8;border-radius:10px;font-size:13px}
@media(max-width:520px) {
 .brandlogo {width:112px}.brand {gap:12px}.brandtitle {font-size:13px!important;padding-left:12px}
 .headerlink {font-size:11px;max-width:75px;white-space:normal;text-align:right}
 .siteheader {min-height:90px;margin-bottom:18px}
 .kpis {grid-template-columns:1fr}.kpi {display:flex;justify-content:space-between;align-items:center;gap:12px}.kpi strong {font-size:20px}
 .wayfinding {gap:8px 14px;font-size:12px}.inquiry {padding:20px}
}
.sr-only {position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}