/* ── LEAD LEAKAGE CALCULATOR styles ── */

.calc-page { padding: 56px var(--l-pad) 80px; max-width: var(--l-max-w); margin: 0 auto; }
.calc-page-eyebrow { margin-bottom: 16px; }
.calc-page h1 {
  font-family: var(--l-font-display);
  font-size: clamp(34px, 5vw, 56px);
  line-height: 1.05;
  font-weight: 400;
  letter-spacing: -0.02em;
  margin-bottom: 18px;
  max-width: 820px;
}
.calc-page h1 em { font-style: italic; color: var(--l-accent); }
.calc-page-deck { font-size: 18px; color: var(--l-text2); line-height: 1.6; max-width: 720px; margin-bottom: 16px; }
.calc-pills { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 36px; }
.calc-pill {
  font-size: 12px;
  background: var(--l-bg2);
  border: 1px solid var(--l-border);
  color: var(--l-text2);
  padding: 6px 12px;
  border-radius: 100px;
}

.calc-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-top: 8px;
}
@media (max-width: 880px) { .calc-grid { grid-template-columns: 1fr; } }

.calc-form, .calc-result {
  background: var(--l-bg2);
  border: 1px solid var(--l-border);
  border-radius: var(--l-radius-lg);
  padding: 28px 30px;
}

.calc-form h2, .calc-result h2 {
  font-family: var(--l-font-display);
  font-size: 22px;
  font-weight: 500;
  margin-bottom: 6px;
}
.calc-form-sub { font-size: 13px; color: var(--l-text3); margin-bottom: 24px; }

.calc-field { margin-bottom: 18px; }
.calc-field label { display: block; font-size: 14px; font-weight: 500; color: var(--l-text); margin-bottom: 4px; }
.calc-field-hint { font-size: 12px; color: var(--l-text3); margin-bottom: 8px; }

.calc-input-wrap { position: relative; }
.calc-input-wrap::before {
  content: attr(data-prefix);
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 14px;
  color: var(--l-text3);
}
.calc-input-wrap::after {
  content: attr(data-suffix);
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 14px;
  color: var(--l-text3);
}
.calc-input {
  width: 100%;
  padding: 11px 14px;
  background: var(--l-bg);
  border: 1px solid var(--l-border);
  border-radius: var(--l-radius);
  color: var(--l-text);
  font-family: var(--l-font-body);
  font-size: 15px;
  font-variant-numeric: tabular-nums;
  outline: none;
  transition: border-color 0.15s;
}
.calc-input-wrap[data-prefix] .calc-input { padding-left: 28px; }
.calc-input-wrap[data-suffix] .calc-input { padding-right: 38px; }
.calc-input:focus { border-color: var(--l-accent); background: #fff; }

.calc-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

.calc-advanced {
  margin-top: 8px;
  padding-top: 16px;
  border-top: 1px dashed var(--l-border);
}
.calc-advanced summary {
  font-size: 13px;
  color: var(--l-accent);
  cursor: pointer;
  user-select: none;
  padding: 6px 0;
}
.calc-advanced summary:hover { color: var(--l-accent2); }
.calc-advanced[open] summary { margin-bottom: 12px; }

.calc-submit {
  width: 100%;
  margin-top: 8px;
  padding: 14px 20px;
  background: var(--l-accent);
  color: #fff;
  border: none;
  border-radius: var(--l-radius);
  font-family: var(--l-font-body);
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s;
}
.calc-submit:hover { background: var(--l-accent2); }

/* RESULT */
.calc-result-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  height: 100%;
  min-height: 360px;
  color: var(--l-text3);
}
.calc-result-empty .icon {
  font-size: 36px;
  color: var(--l-accent);
  margin-bottom: 16px;
  opacity: 0.4;
}
.calc-result-empty p { font-size: 14px; }

.calc-result-output { display: none; }
.calc-result.show .calc-result-empty { display: none; }
.calc-result.show .calc-result-output { display: block; }

.calc-headline-num {
  font-family: var(--l-font-display);
  font-size: clamp(38px, 6vw, 56px);
  font-weight: 400;
  letter-spacing: -0.02em;
  color: var(--l-accent);
  line-height: 1;
  margin-bottom: 6px;
}
.calc-headline-num.danger { color: var(--l-red); }
.calc-headline-label { font-size: 14px; color: var(--l-text3); margin-bottom: 4px; }
.calc-annual { font-size: 14px; color: var(--l-text2); margin-bottom: 22px; }
.calc-annual b { color: var(--l-text); font-weight: 500; }

.calc-bench {
  background: var(--l-bg);
  border: 1px solid var(--l-border);
  border-radius: var(--l-radius);
  padding: 14px 16px;
  margin-bottom: 18px;
}
.calc-bench-row { display: flex; justify-content: space-between; padding: 6px 0; font-size: 13px; align-items: baseline; }
.calc-bench-row + .calc-bench-row { border-top: 1px solid var(--l-border); }
.calc-bench-label { color: var(--l-text2); }
.calc-bench-val { font-weight: 500; font-variant-numeric: tabular-nums; }
.calc-bench-val.good { color: var(--l-accent); }
.calc-bench-val.warn { color: var(--l-amber); }
.calc-bench-val.bad { color: var(--l-red); }
.calc-bench-vs { font-size: 11px; color: var(--l-text3); margin-left: 4px; }

.calc-band {
  padding: 14px 16px;
  border-radius: var(--l-radius);
  font-size: 14px;
  line-height: 1.55;
  margin-bottom: 18px;
}
.calc-band.low { background: rgba(29,110,87,0.08); border-left: 3px solid var(--l-accent); }
.calc-band.mid { background: rgba(212,160,23,0.10); border-left: 3px solid var(--l-amber); }
.calc-band.high { background: rgba(182,69,47,0.10); border-left: 3px solid var(--l-red); }
.calc-band-title { font-weight: 600; margin-bottom: 4px; }

.calc-actions-row { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 8px; }
.calc-actions-row .l-btn { flex: 1; justify-content: center; min-width: 140px; font-size: 14px; padding: 11px 16px; }

/* EMAIL CAPTURE for checklist */
.calc-email-block {
  margin-top: 18px;
  padding: 16px 18px;
  background: var(--l-bg3);
  border: 1px solid var(--l-border);
  border-radius: var(--l-radius);
}
.calc-email-block h4 { font-size: 14px; margin-bottom: 4px; font-weight: 600; }
.calc-email-block p { font-size: 13px; color: var(--l-text2); margin-bottom: 10px; }
.calc-email-row { display: flex; gap: 8px; }
.calc-email-row input {
  flex: 1;
  padding: 10px 12px;
  background: #fff;
  border: 1px solid var(--l-border);
  border-radius: var(--l-radius);
  font-family: var(--l-font-body);
  font-size: 13px;
  outline: none;
}
.calc-email-row input:focus { border-color: var(--l-accent); }
.calc-email-row button {
  background: var(--l-accent);
  color: #fff;
  border: none;
  padding: 10px 16px;
  border-radius: var(--l-radius);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
}
.calc-email-block.success { background: rgba(29,110,87,0.08); }
.calc-email-block.success::before { content: '✓ '; color: var(--l-accent); font-weight: 600; }

/* SUPPORTING SECTIONS */
.calc-supporting { margin-top: 60px; padding-top: 50px; border-top: 1px solid var(--l-border); }
.calc-supporting h2 {
  font-family: var(--l-font-display);
  font-size: clamp(26px, 3.5vw, 36px);
  font-weight: 500;
  margin-bottom: 18px;
  max-width: 720px;
  line-height: 1.15;
}
.calc-supporting h2 em { font-style: italic; color: var(--l-accent); }
.calc-supporting p { color: var(--l-text2); line-height: 1.65; max-width: 720px; }

.calc-faq { margin-top: 36px; max-width: 760px; }
.calc-faq-item { padding: 18px 0; border-top: 1px solid var(--l-border); }
.calc-faq-item:last-child { border-bottom: 1px solid var(--l-border); }
.calc-faq-q { font-weight: 600; margin-bottom: 6px; font-size: 16px; }
.calc-faq-a { font-size: 14px; color: var(--l-text2); line-height: 1.6; }

.share-block { margin-top: 40px; padding: 24px; background: var(--l-bg3); border-radius: var(--l-radius-lg); display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.share-block-text { font-size: 14px; color: var(--l-text2); }
.share-btn {
  background: #0a66c2;
  color: #fff;
  padding: 10px 16px;
  border-radius: var(--l-radius);
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
}
.share-btn:hover { background: #0959a8; }