/* Calculators page — reuses theme.css, adds calculator layout */

/* NAV override */
.nav .active { font-weight: 600; color: var(--indigo); }

/* HERO */
.hero {
  background: linear-gradient(180deg, var(--indigo) 0%, #1a1a6b 100%);
  color: #fff;
  padding: 5rem 1.5rem 4rem;
  text-align: center;
}
.hero .inner { max-width: 900px; margin: 0 auto; }
.hero h1 {
  font-size: clamp(2rem, 5vw, 3.2rem);
  color: #fff;
  margin-bottom: .75rem;
}
.hero h1 em { color: var(--gold); font-style: italic; font-weight: 500; }
.hero .lead { color: rgba(255,255,255,.88); max-width: 50ch; margin: 0 auto; }

/* TAB BAR */
.tab-bar-wrap {
  position: sticky; top: 0; z-index: 20;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
}
.tab-bar {
  max-width: 1200px; margin: 0 auto;
  display: flex; flex-wrap: wrap; gap: .25rem;
  padding: .75rem 1.5rem;
}
.tab {
  flex: 1 1 auto; min-width: 140px;
  padding: .6rem 1rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  color: var(--text);
  font-size: .9rem; font-weight: 500;
  cursor: pointer;
  transition: background .18s, color .18s, border-color .18s;
}
.tab:hover { background: var(--cloud); }
.tab.active { background: var(--indigo); color: #fff; border-color: var(--indigo); }

/* PANELS */
.calc-panel { display: none; padding: 2.5rem 0 3rem; }
.calc-panel.active { display: block; }

/* CARD */
.calc-card {
  max-width: 1100px; margin: 0 auto;
  display: grid; grid-template-columns: 1fr 1fr; gap: 2.5rem; align-items: start;
}
.calc-card.lead-card { grid-template-columns: 1fr; max-width: 700px; }
.calc-card.lead-card .wide { max-width: 100%; }
@media (max-width: 900px) {
  .calc-card { grid-template-columns: 1fr; gap: 2rem; }
}

/* INPUTS */
.inputs h2 { margin-bottom: .25rem; }
.inputs label { display: block; margin-bottom: 1rem; }
.inputs label > span { display: block; margin-bottom: .35rem; font-size: .85rem; font-weight: 500; color: var(--text-muted); }
.inputs input, .inputs select, .inputs textarea { font-size: 1rem; }

/* RESULTS */
.results { border-top: 1px solid var(--border); padding-top: 1.5rem; }
@media (min-width: 901px) {
  .results { border-top: none; border-left: 1px solid var(--border); padding-top: 0; padding-left: 2.5rem; }
}

.result-grid { display: grid; gap: .75rem; }
.result-block {
  display: flex; justify-content: space-between; align-items: center;
  padding: .75rem 1rem;
  background: var(--surface); border: 1px solid var(--border); border-radius: 8px;
}
.result-block.highlight {
  background: linear-gradient(135deg, rgba(16,16,86,.04) 0%,rgba(16,16,86,.08) 100%);
  border-color: var(--indigo);
}
.result-label { font-size: .82rem; color: var(--text-muted); }
.result-val { font-family: var(--font-display); font-size: 1.5rem; color: var(--indigo); font-weight: 500; }
.result-block.highlight .result-val { color: var(--indigo); font-size: 1.7rem; }

/* COST TABLE */
.cost-table {
  width: 100%; border-collapse: collapse;
  font-size: .9rem;
}
.cost-table th, .cost-table td {
  text-align: left; padding: .55rem .7rem; border-bottom: 1px solid var(--border);
}
.cost-table th { font-weight: 600; font-size: .75rem; text-transform: uppercase; letter-spacing: .05em; color: var(--text-muted); }
.cost-table td:last-child { text-align: right; font-family: var(--font-display); }

/* BREAKDOWN */
.breakdown { margin-top: .75rem; font-size: .82rem; }
.breakdown table { width: 100%; border-collapse: collapse; }
.breakdown td, .breakdown th { padding: .35rem .5rem; border-bottom: 1px solid var(--border); text-align: left; }
.breakdown th { font-weight: 600; color: var(--text-muted); font-size: .7rem; text-transform: uppercase; letter-spacing: .05em; }
.breakdown td:last-child { text-align: right; }

/* LEAD FORM */
.lead-form .form-row { margin-bottom: 1rem; }
.lead-form .form-row.two {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 1rem;
}
.lead-form label { display: block; }
.lead-form label > span { display: block; margin-bottom: .35rem; font-size: .85rem; font-weight: 500; color: var(--text-muted); }
.lead-form input, .lead-form select, .lead-form textarea { font-size: 1rem; }
.form-error { color: var(--danger); font-size: .85rem; }

/* FOOTER */
.calc-footer {
  border-top: 1px solid var(--border);
  padding: 2rem 1.5rem;
  font-size: .8rem; color: var(--text-muted);
  text-align: center;
}

/* util */
.spacer { flex: 1; }