:root{
  --qb-ink:#18323a;
  --qb-muted:#64747b;
  --qb-blue:#1269ad;
  --qb-blue-dark:#0d578f;
  --qb-blue-soft:#eef6fb;
  --qb-line:#dfe8ec;
  --qb-panel:#f7fafb;
  --qb-white:#fff;
  --qb-green:#217a56;
  --qb-green-soft:#edf8f2;
  --qb-red:#a64141;
  --qb-red-soft:#fff1f1;
  --qb-shadow:0 18px 45px rgba(21,49,59,.08);
}

.qb-hero{
  padding:52px 0 34px;
  background:linear-gradient(180deg,#fff 0%,#f8fbfd 100%);
  border-bottom:1px solid #edf2f4;
}

.qb-breadcrumb{
  display:flex;
  align-items:center;
  gap:9px;
  margin-bottom:18px;
  color:#718188;
  font-size:13px;
  font-weight:750;
}

.qb-breadcrumb a{color:var(--qb-blue)}

.qb-hero-row{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:40px;
}

.qb-title-wrap{max-width:780px}

.qb-kicker,
.qb-step{
  display:block;
  margin-bottom:7px;
  color:var(--qb-blue);
  font-size:12px;
  font-weight:850;
  letter-spacing:.075em;
  text-transform:uppercase;
}

.qb-title-wrap h1{
  margin:0 0 13px;
  color:var(--qb-ink);
  font-size:clamp(38px,5vw,60px);
  line-height:1.02;
  letter-spacing:-.05em;
}

.qb-title-wrap p{
  max-width:720px;
  margin:0;
  color:var(--qb-muted);
  font-size:18px;
}

.qb-mode-switch{
  display:grid;
  grid-template-columns:1fr 1fr;
  flex:0 0 306px;
  padding:5px;
  border:1px solid var(--qb-line);
  border-radius:15px;
  background:#fff;
  box-shadow:0 10px 28px rgba(21,49,59,.06);
}

.qb-mode-btn{
  min-height:62px;
  padding:10px 15px;
  border:0;
  border-radius:11px;
  background:transparent;
  color:#65777e;
  cursor:pointer;
  text-align:left;
  transition:.18s ease;
}

.qb-mode-btn strong,
.qb-mode-btn span{display:block}
.qb-mode-btn strong{font-size:15px;color:inherit}
.qb-mode-btn span{margin-top:2px;font-size:11px;font-weight:700}

.qb-mode-btn.is-active{
  background:var(--qb-blue);
  color:#fff;
  box-shadow:0 7px 18px rgba(18,105,173,.20);
}

.qb-tool-section{padding:38px 0 72px}
.qb-mode-panel[hidden]{display:none!important}

.qb-tool-grid{
  display:grid;
  grid-template-columns:minmax(0,1.08fr) minmax(360px,.92fr);
  gap:22px;
  align-items:start;
}

.qb-panel{
  border:1px solid var(--qb-line);
  border-radius:20px;
  background:#fff;
  box-shadow:var(--qb-shadow);
}

.qb-input-panel,
.qb-results-panel,
.qb-preview-panel,
.qb-scenario-panel{padding:25px}

.qb-results-panel{
  position:sticky;
  top:108px;
}

.qb-panel-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:18px;
  margin-bottom:22px;
}

.qb-panel-head h2{
  margin:0;
  color:var(--qb-ink);
  font-size:22px;
  line-height:1.18;
  letter-spacing:-.025em;
}

.qb-live-badge,
.qb-table-note{
  display:inline-flex;
  flex:0 0 auto;
  align-items:center;
  min-height:28px;
  padding:5px 9px;
  border-radius:999px;
  background:var(--qb-blue-soft);
  color:var(--qb-blue);
  font-size:11px;
  font-weight:800;
}

.qb-table-note{
  max-width:330px;
  border-radius:8px;
  background:#f2f5f6;
  color:#6c7d83;
  text-align:right;
}

.qb-fields{display:grid;gap:18px}
.qb-field-row{display:grid;gap:14px}
.qb-field-row-2{grid-template-columns:repeat(2,minmax(0,1fr))}

.qb-field{
  display:block;
  min-width:0;
}

.qb-field > span{
  display:block;
  margin-bottom:7px;
  color:#40585f;
  font-size:13px;
  font-weight:800;
}

.qb-field small{
  display:block;
  margin-top:6px;
  color:#7b8b91;
  font-size:11px;
  line-height:1.4;
}

.qb-field input[type="text"],
.qb-field input[type="date"],
.qb-field select,
.qb-money-input,
.qb-percent-input,
.qb-plain-input{
  width:100%;
  min-height:48px;
  border:1px solid #cad8de;
  border-radius:11px;
  background:#fff;
  color:var(--qb-ink);
  transition:.15s ease;
}

.qb-field input[type="text"],
.qb-field input[type="date"],
.qb-field select{
  padding:0 13px;
  outline:none;
}

.qb-money-input,
.qb-percent-input,
.qb-plain-input{
  display:flex;
  align-items:center;
  overflow:hidden;
}

.qb-money-input > span,
.qb-percent-input > span,
.qb-plain-input > span{
  display:flex;
  align-items:center;
  align-self:stretch;
  padding:0 12px;
  background:#f5f8f9;
  color:#677a81;
  border-right:1px solid var(--qb-line);
  font-size:12px;
  font-weight:800;
  white-space:nowrap;
}

.qb-percent-input > span,
.qb-plain-input > span{
  border-right:0;
  border-left:1px solid var(--qb-line);
}

.qb-money-input input,
.qb-percent-input input,
.qb-plain-input input{
  width:100%;
  min-width:0;
  height:46px;
  padding:0 12px;
  border:0;
  outline:none;
  background:transparent;
  color:var(--qb-ink);
}

.qb-field input[type="text"]:focus,
.qb-field input[type="date"]:focus,
.qb-field select:focus,
.qb-money-input:focus-within,
.qb-percent-input:focus-within,
.qb-plain-input:focus-within{
  border-color:var(--qb-blue);
  box-shadow:0 0 0 4px rgba(18,105,173,.08);
}

.qb-fieldset{
  margin:0;
  padding:18px;
  border:1px solid #e3ebee;
  border-radius:15px;
  background:#fbfcfd;
}

.qb-fieldset legend{
  padding:0 8px;
  color:#334d55;
  font-size:14px;
  font-weight:850;
}

.qb-fieldset > p{
  margin:-2px 0 15px;
  color:#75868c;
  font-size:12px;
}

.qb-action-row{
  display:flex;
  gap:10px;
  margin-top:22px;
}

.qb-btn,
.qb-print-btn,
.qb-text-button{
  border:0;
  font:inherit;
  cursor:pointer;
}

.qb-btn{
  min-height:48px;
  padding:0 18px;
  border-radius:11px;
  font-size:14px;
  font-weight:850;
}

.qb-btn-primary{
  background:var(--qb-blue);
  color:#fff;
  box-shadow:0 9px 22px rgba(18,105,173,.16);
}

.qb-btn-primary:hover{background:var(--qb-blue-dark)}
.qb-btn-secondary{border:1px solid var(--qb-line);background:#fff;color:#536970}
.qb-btn-secondary:hover{background:#f7fafb}

.qb-print-btn{
  padding:8px 11px;
  border:1px solid var(--qb-line);
  border-radius:9px;
  background:#fff;
  color:#586d75;
  font-size:12px;
  font-weight:800;
}

.qb-print-btn:hover{border-color:#bdd0d8;color:var(--qb-blue)}

.qb-alert{
  margin-bottom:15px;
  padding:12px 14px;
  border:1px solid #f1caca;
  border-radius:10px;
  background:var(--qb-red-soft);
  color:var(--qb-red);
  font-size:13px;
  font-weight:700;
}

.qb-primary-result{
  padding:22px;
  border:1px solid #d7eaf7;
  border-radius:17px;
  background:var(--qb-blue-soft);
}

.qb-primary-result span,
.qb-primary-result strong,
.qb-primary-result small{display:block}
.qb-primary-result span{color:#527286;font-size:12px;font-weight:800}
.qb-primary-result strong{margin:3px 0 1px;color:var(--qb-blue);font-size:39px;line-height:1.05;letter-spacing:-.045em}
.qb-primary-result small{color:#637f8e;font-size:12px}

.qb-metric-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
  margin-top:12px;
}

.qb-metric{
  min-height:92px;
  padding:15px;
  border:1px solid var(--qb-line);
  border-radius:13px;
  background:#fff;
}

.qb-metric span,
.qb-metric strong,
.qb-metric small{display:block}
.qb-metric span{color:#708188;font-size:11px;font-weight:750}
.qb-metric strong{margin-top:5px;color:#28454e;font-size:21px;letter-spacing:-.025em}
.qb-metric small{margin-top:2px;color:#87969b;font-size:10px}

.qb-cost-summary{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1px;
  margin-top:12px;
  overflow:hidden;
  border:1px solid var(--qb-line);
  border-radius:13px;
  background:var(--qb-line);
}

.qb-cost-summary > div{
  padding:13px;
  background:#fbfcfd;
}

.qb-cost-summary span,
.qb-cost-summary strong{display:block}
.qb-cost-summary span{color:#78898f;font-size:10px;font-weight:750}
.qb-cost-summary strong{margin-top:3px;color:#38545d;font-size:15px}

.qb-payment-box{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:10px;
  margin-top:12px;
}

.qb-payment-box-3{grid-template-columns:repeat(2,1fr)}

.qb-payment-box > div{
  padding:14px;
  border-radius:12px;
  background:#f4f8fa;
}

.qb-payment-box > div:nth-last-child(1){background:var(--qb-green-soft)}
.qb-payment-box span,
.qb-payment-box strong{display:block}
.qb-payment-box span{color:#708188;font-size:10px;font-weight:750}
.qb-payment-box strong{margin-top:4px;color:#34525b;font-size:16px}

.qb-takeaway{
  margin-top:12px;
  padding:15px 16px;
  border-left:4px solid var(--qb-blue);
  border-radius:0 11px 11px 0;
  background:#f7fafb;
  color:#4d666f;
  font-size:13px;
  line-height:1.55;
}

.qb-text-button{
  width:100%;
  margin-top:12px;
  padding:11px 0 0;
  background:transparent;
  color:var(--qb-blue);
  font-size:12px;
  font-weight:850;
  text-align:left;
}

.qb-cost-bar-wrap{
  margin-top:12px;
  padding:15px;
  border:1px solid var(--qb-line);
  border-radius:13px;
}

.qb-cost-bar{
  display:flex;
  height:12px;
  overflow:hidden;
  border-radius:999px;
  background:#edf2f4;
}

.qb-cost-bar span{display:block;height:100%}
#barDirect{background:#1269ad}
#barOverhead{background:#5c91b8}
#barRisk{background:#98b8ce}
#barProfit{background:#217a56}

.qb-bar-legend{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:9px 14px;
  margin-top:13px;
}

.qb-bar-legend > div{
  display:grid;
  grid-template-columns:auto 1fr auto;
  gap:7px;
  align-items:center;
  color:#667a81;
  font-size:10px;
}

.qb-bar-legend strong{color:#3f5962;font-size:11px}
.qb-dot{width:8px;height:8px;border-radius:50%}
.qb-dot-1{background:#1269ad}.qb-dot-2{background:#5c91b8}.qb-dot-3{background:#98b8ce}.qb-dot-4{background:#217a56}

.qb-preview-panel,
.qb-scenario-panel{margin-top:22px}

.qb-quote-preview{
  overflow:hidden;
  border:1px solid var(--qb-line);
  border-radius:16px;
}

.qb-quote-preview-head{
  display:grid;
  grid-template-columns:1fr auto;
  gap:30px;
  padding:23px;
  background:#18323a;
  color:#fff;
}

.qb-quote-preview-head > div:last-child{text-align:right}
.qb-quote-preview-head span,
.qb-quote-preview-head strong,
.qb-quote-preview-head small{display:block}
.qb-quote-preview-head span{color:#9fb2b9;font-size:10px;font-weight:850;letter-spacing:.08em}
.qb-quote-preview-head strong{margin-top:4px;font-size:20px}
.qb-quote-preview-head small{margin-top:3px;color:#c9d5d9;font-size:12px}

.qb-table-scroll{overflow-x:auto}

.qb-table{
  width:100%;
  border-collapse:collapse;
  color:#4e666e;
  font-size:13px;
}

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

.qb-table th:first-child,
.qb-table td:first-child{text-align:left}
.qb-table thead th{background:#f7fafb;color:#63767d;font-size:11px;text-transform:uppercase;letter-spacing:.05em}
.qb-table tbody td:first-child{font-weight:750;color:#3a555e}
.qb-table tfoot th{color:#405a63}
.qb-table tfoot tr:last-child th,
.qb-table tfoot tr:last-child td{border-bottom:0}
.qb-table .qb-total-row th,
.qb-table .qb-total-row td{background:var(--qb-blue-soft);color:var(--qb-blue);font-size:16px;font-weight:900}
.qb-table tr.qb-stress-bad td{color:var(--qb-red)}
.qb-table tr.qb-stress-good td{color:var(--qb-green)}

.qb-quote-terms{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1px;
  background:var(--qb-line);
}

.qb-quote-terms > div{padding:16px;background:#fbfcfd}
.qb-quote-terms span,
.qb-quote-terms strong{display:block}
.qb-quote-terms span{color:#7a8b91;font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.04em}
.qb-quote-terms strong{margin-top:5px;color:#405a63;font-size:12px;line-height:1.4}

.qb-info-section{
  padding:60px 0;
  border-top:1px solid #edf2f4;
  background:#f7fafb;
}

.qb-info-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:18px;
}

.qb-info-grid article{
  padding:25px;
  border:1px solid var(--qb-line);
  border-radius:17px;
  background:#fff;
}

.qb-info-grid article > span{
  color:var(--qb-blue);
  font-size:12px;
  font-weight:900;
}

.qb-info-grid h2{
  margin:9px 0 8px;
  color:var(--qb-ink);
  font-size:19px;
  letter-spacing:-.02em;
}

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

@media(max-width:1020px){
  .qb-tool-grid{grid-template-columns:1fr}
  .qb-results-panel{position:static}
  .qb-hero-row{align-items:flex-start;flex-direction:column}
  .qb-mode-switch{width:100%;max-width:420px;flex-basis:auto}
}

@media(max-width:760px){
  .qb-hero{padding:38px 0 26px}
  .qb-title-wrap p{font-size:16px}
  .qb-input-panel,.qb-results-panel,.qb-preview-panel,.qb-scenario-panel{padding:18px}
  .qb-field-row-2{grid-template-columns:1fr}
  .qb-cost-summary,.qb-quote-terms,.qb-info-grid{grid-template-columns:1fr}
  .qb-quote-preview-head{grid-template-columns:1fr;gap:16px}
  .qb-quote-preview-head > div:last-child{text-align:left}
  .qb-panel-head{flex-direction:column}
  .qb-table-note{text-align:left}
}

@media(max-width:520px){
  .qb-tool-section{padding-top:24px}
  .qb-mode-switch{grid-template-columns:1fr 1fr}
  .qb-mode-btn{min-height:56px;padding:8px 10px}
  .qb-primary-result strong{font-size:33px}
  .qb-metric-grid,.qb-payment-box,.qb-payment-box-3,.qb-bar-legend{grid-template-columns:1fr}
  .qb-action-row{flex-direction:column}
  .qb-btn{width:100%}
}

@media print{
  .site-header,
  .qb-mode-switch,
  .qb-breadcrumb,
  .qb-input-panel,
  .qb-action-row,
  .qb-print-btn,
  .qb-text-button,
  .qb-info-section,
  .footer,
  .qb-scenario-panel{display:none!important}

  body{background:#fff}
  .qb-hero{padding:0 0 18px;border:0;background:#fff}
  .qb-title-wrap h1{font-size:30px}
  .qb-title-wrap p{font-size:14px}
  .qb-tool-section{padding:0}
  .qb-tool-grid{display:block}
  .qb-results-panel,.qb-preview-panel{position:static;margin:0 0 16px;padding:16px;box-shadow:none;break-inside:avoid}
  .qb-panel{box-shadow:none}
  .qb-preview-panel{display:block!important}
}