/* ===================================
   TOOLS PAGE STYLES
   =================================== */

/* Prevent horizontal overflow site-wide on this page */
.tools-section {
  overflow-x: hidden;
}

/* ===== PAGE HERO ===== */
.page-hero {
  position: relative;
  padding: 160px 40px 80px;
  text-align: center;
  overflow: hidden;
}

.page-hero-bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.page-hero-bg .hero-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.12;
}

.page-hero-bg .orb-1 {
  width: 500px;
  height: 500px;
  background: var(--gold);
  top: -100px;
  left: -100px;
}

.page-hero-bg .orb-2 {
  width: 400px;
  height: 400px;
  background: var(--gold-dark);
  bottom: -80px;
  right: -80px;
}

.page-hero-content {
  position: relative;
  z-index: 2;
  max-width: 640px;
  margin: 0 auto;
}

.page-title {
  font-family: var(--font-serif);
  font-size: clamp(40px, 6vw, 72px);
  font-weight: 400;
  line-height: 1.1;
  margin-bottom: 20px;
  color: var(--text-primary);
}

.page-hero-content > p {
  font-size: 16px;
  color: var(--text-secondary);
  line-height: 1.7;
}

/* ===== TOOLS NAV PILLS ===== */
.tools-nav {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 64px;
}

.tool-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 24px;
  border-radius: 50px;
  border: 1px solid var(--border-color);
  background: var(--bg-card);
  color: var(--text-secondary);
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.04em;
  transition: var(--transition);
}

.tool-pill:hover {
  border-color: var(--border-hover);
  color: var(--text-primary);
}

.tool-pill.active {
  background: rgba(201, 169, 110, 0.12);
  border-color: var(--gold);
  color: var(--gold);
  font-weight: 600;
}

.tool-pill-icon {
  font-size: 15px;
  line-height: 1;
}

/* ===== TOOL PANEL ===== */
.tool-panel {
  display: none;
}

.tool-panel.active {
  display: block;
}

.tool-header {
  margin-bottom: 56px;
}

.tool-header .section-subtitle {
  text-align: left;
  margin: 0;
  max-width: 560px;
}

/* ===== CALCULATOR LAYOUT ===== */
.calculator-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: start;
}

/* ===== INPUTS ===== */
.calc-inputs {
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.input-group {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.input-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--gold);
  display: flex;
  align-items: center;
  gap: 10px;
}

.input-label-hint {
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.05em;
  text-transform: none;
  color: var(--text-muted);
}

.input-row {
  display: grid;
  grid-template-columns: 1fr 100px;
  gap: 10px;
}

.input-wrap {
  position: relative;
  display: flex;
  align-items: center;
}

.input-wrap-pct {
  max-width: 100px;
}

.input-prefix,
.input-suffix {
  position: absolute;
  font-size: 13px;
  color: var(--text-muted);
  font-weight: 500;
  pointer-events: none;
  z-index: 1;
}

.input-prefix { left: 14px; }
.input-suffix { right: 14px; }

.calc-input {
  width: 100%;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: 13px 14px;
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 400;
  color: var(--text-primary);
  transition: var(--transition);
  outline: none;
  -webkit-appearance: none;
}

.input-wrap .calc-input:not(:only-child) {
  padding-left: 30px;
}

.input-wrap:has(.input-suffix) .calc-input {
  padding-right: 36px;
}

.calc-input:focus {
  border-color: var(--gold);
  background: rgba(201, 169, 110, 0.05);
}

.calc-input::placeholder {
  color: var(--text-muted);
}

/* Range Slider */
.range-slider {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  width: 100%;
  height: 3px;
  background: var(--border-color);
  border-radius: 2px;
  outline: none;
  margin-top: 4px;
}

.range-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--gold);
  cursor: none;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  box-shadow: 0 0 0 3px rgba(201, 169, 110, 0.15);
}

.range-slider::-webkit-slider-thumb:hover {
  transform: scale(1.2);
  box-shadow: 0 0 0 6px rgba(201, 169, 110, 0.15);
}

.range-slider::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--gold);
  border: none;
  cursor: none;
}

/* Term Buttons */
.term-options {
  display: flex;
  gap: 8px;
}

.term-btn {
  flex: 1;
  padding: 10px 0;
  border-radius: 8px;
  border: 1px solid var(--border-color);
  background: var(--bg-card);
  color: var(--text-secondary);
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 500;
  transition: var(--transition);
  text-align: center;
}

.term-btn:hover {
  border-color: var(--border-hover);
  color: var(--text-primary);
}

.term-btn.active {
  background: rgba(201, 169, 110, 0.12);
  border-color: var(--gold);
  color: var(--gold);
  font-weight: 600;
}

/* ===== RESULTS ===== */
.calc-results {
  position: sticky;
  top: 100px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.result-card {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 20px;
  padding: 40px;
  position: relative;
  overflow: hidden;
}

.result-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--grad-gold);
}

.result-main {
  text-align: center;
  margin-bottom: 32px;
}

.result-label {
  display: block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 12px;
}

.result-amount {
  display: block;
  font-family: var(--font-serif);
  font-size: clamp(40px, 5vw, 56px);
  font-weight: 400;
  color: var(--text-primary);
  line-height: 1;
  margin-bottom: 8px;
  background: var(--grad-gold);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  transition: var(--transition);
}

.result-sub {
  font-size: 12px;
  color: var(--text-muted);
  letter-spacing: 0.05em;
}

.result-divider {
  height: 1px;
  background: var(--border-color);
  margin-bottom: 24px;
}

.result-breakdown {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 32px;
}

.breakdown-item {
  display: flex;
  align-items: center;
  gap: 10px;
}

.breakdown-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.breakdown-label {
  flex: 1;
  font-size: 13px;
  color: var(--text-secondary);
}

.breakdown-value {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-primary);
  font-family: var(--font-sans);
}

/* Donut Chart */
.donut-wrap {
  position: relative;
  width: 140px;
  height: 140px;
  margin: 0 auto;
}

.donut-chart {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}

.donut-bg {
  fill: none;
  stroke: rgba(255,255,255,0.05);
  stroke-width: 12;
}

.donut-seg {
  fill: none;
  stroke-width: 12;
  stroke-linecap: butt;
  transition: stroke-dasharray 0.6s cubic-bezier(0.4, 0, 0.2, 1),
              stroke-dashoffset 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.seg-pi        { stroke: var(--gold); }
.seg-tax       { stroke: #8b7355; }
.seg-insurance { stroke: #5a4a3a; }
.seg-pmi       { stroke: #3d3028; }

.donut-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}

.donut-pct {
  display: block;
  font-family: var(--font-serif);
  font-size: 22px;
  font-weight: 400;
  color: var(--text-primary);
  line-height: 1;
}

.donut-note {
  display: block;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-top: 4px;
}

/* ===== LOAN SUMMARY ===== */
.loan-summary {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 16px;
  padding: 24px 28px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

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

.summary-label {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.summary-value {
  font-size: 15px;
  font-weight: 500;
  color: var(--text-primary);
  font-family: var(--font-sans);
  transition: var(--transition);
}

/* PMI row hidden when not applicable */
.breakdown-item.hidden,
.summary-item.hidden {
  display: none;
}

/* ===================================================
   RENT VS. BUY CALCULATOR
   =================================================== */

.rvb-section-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-muted);
  padding-bottom: 4px;
  border-bottom: 1px solid var(--border-color);
}

.rvb-divider {
  height: 1px;
  background: var(--border-color);
  margin: 4px 0;
}

/* Verdict Banner */
.rvb-verdict {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px 24px;
  border-radius: 14px;
  border: 1px solid var(--border-hover);
  background: rgba(201, 169, 110, 0.06);
  margin-bottom: 20px;
  transition: var(--transition);
}

.verdict-icon {
  font-size: 28px;
  line-height: 1;
  flex-shrink: 0;
}

.verdict-text {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.verdict-headline {
  font-family: var(--font-serif);
  font-size: 20px;
  font-weight: 500;
  color: var(--text-primary);
}

.verdict-sub {
  font-size: 12px;
  color: var(--text-muted);
  letter-spacing: 0.04em;
}

.verdict-diff {
  font-family: var(--font-serif);
  font-size: 26px;
  font-weight: 500;
  background: var(--grad-gold);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  white-space: nowrap;
}

/* When renting wins */
.rvb-verdict.rent-wins {
  border-color: rgba(90, 138, 106, 0.4);
  background: rgba(90, 138, 106, 0.06);
}

.rvb-verdict.rent-wins .verdict-diff {
  background: linear-gradient(135deg, #5a8a6a 0%, #7cb88a 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Cost Comparison Cards */
.rvb-compare {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-bottom: 16px;
}

.rvb-cost-card {
  padding: 22px 20px;
  border-radius: 14px;
  border: 1px solid var(--border-color);
  background: var(--bg-card);
  transition: var(--transition);
}

.rvb-cost-card.winner {
  border-color: var(--border-hover);
  background: rgba(201, 169, 110, 0.05);
}

.rvb-rent-card.winner {
  border-color: rgba(90, 138, 106, 0.4);
  background: rgba(90, 138, 106, 0.05);
}

.rvb-cost-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}

.rvb-cost-icon {
  font-size: 16px;
  line-height: 1;
}

.rvb-cost-title {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.rvb-cost-amount {
  display: block;
  font-family: var(--font-serif);
  font-size: 28px;
  font-weight: 400;
  color: var(--text-primary);
  margin-bottom: 14px;
  line-height: 1;
  transition: var(--transition);
}

.rvb-cost-breakdown {
  display: flex;
  flex-direction: column;
  gap: 6px;
  border-top: 1px solid var(--border-color);
  padding-top: 12px;
}

.rvb-cost-line {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: var(--text-muted);
  gap: 8px;
}

.rvb-cost-line span:last-child {
  font-weight: 500;
  color: var(--text-secondary);
  white-space: nowrap;
}

.rvb-cost-positive span:last-child {
  color: #7cb88a;
}

/* Break-even block */
.rvb-breakeven {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 22px;
  border-radius: 12px;
  border: 1px solid var(--border-color);
  background: var(--bg-card);
  margin-bottom: 16px;
}

.breakeven-label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--gold);
  white-space: nowrap;
}

.breakeven-value {
  font-family: var(--font-serif);
  font-size: 28px;
  font-weight: 400;
  color: var(--text-primary);
  white-space: nowrap;
}

.breakeven-desc {
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.5;
}

.rvb-breakeven.no-breakeven .breakeven-value {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-secondary);
}

/* Chart */
.rvb-chart-wrap {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 14px;
  padding: 20px;
}

.rvb-chart-title {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 16px;
}

.rvb-svg {
  width: 100%;
  height: 180px;
  display: block;
  overflow: visible;
}

.rvb-chart-legend {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 12px;
  font-size: 12px;
  color: var(--text-muted);
}

.legend-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}

/* ===================================================
   RENT AFFORDABILITY CALCULATOR
   =================================================== */

.aff-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: start;
}

.aff-inputs {
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.aff-results {
  position: sticky;
  top: 100px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Rule cards */
.aff-rules {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.aff-rule-card {
  padding: 22px 14px 20px;
  border-radius: 16px;
  border: 1px solid var(--border-color);
  background: var(--bg-card);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 0;
  box-sizing: border-box;
  gap: 4px;
  transition: var(--transition);
  position: relative;
  overflow: hidden;
}

/* Coloured top bar */
.aff-rule-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
}

/* Conservative — green */
.aff-rule-card.aff-rule-conservative {
  border-color: rgba(90, 165, 115, 0.35);
  background: rgba(90, 165, 115, 0.05);
}
.aff-rule-card.aff-rule-conservative::before {
  background: linear-gradient(to right, #3d7a56, #6fbf85);
}

/* Standard 30% — gold */
.aff-rule-card.aff-rule-primary {
  border-color: var(--border-hover);
  background: rgba(201, 169, 110, 0.07);
}
.aff-rule-card.aff-rule-primary::before {
  background: var(--grad-gold);
}

/* Stretched — amber/red */
.aff-rule-card.aff-rule-stretched {
  border-color: rgba(195, 100, 55, 0.35);
  background: rgba(160, 70, 35, 0.05);
}
.aff-rule-card.aff-rule-stretched::before {
  background: linear-gradient(to right, #c97a3a, #a03525);
}

/* Large percentage */
.aff-rule-pct {
  font-family: var(--font-serif);
  font-size: 34px;
  font-weight: 400;
  line-height: 1;
  margin-top: 4px;
}
.aff-rule-conservative .aff-rule-pct { color: #6fbf85; }
.aff-rule-primary      .aff-rule-pct {
  background: var(--grad-gold);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.aff-rule-stretched    .aff-rule-pct { color: #d48045; }

.aff-rule-label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-secondary);
  margin-bottom: 4px;
}

.aff-rule-amount {
  font-family: var(--font-serif);
  font-size: 26px;
  font-weight: 400;
  line-height: 1;
  transition: var(--transition);
}
.aff-rule-conservative .aff-rule-amount { color: #6fbf85; }
.aff-rule-primary      .aff-rule-amount {
  background: var(--grad-gold);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.aff-rule-stretched    .aff-rule-amount { color: #d48045; }

/* legacy override — no longer needed but keep for safety */
.aff-secondary {
  background: none;
  -webkit-background-clip: unset;
  -webkit-text-fill-color: var(--text-secondary);
  background-clip: unset;
  font-size: 22px;
}

.aff-rule-desc {
  font-size: 11px;
  color: var(--text-muted);
  line-height: 1.4;
}

/* Income note */
.aff-income-note {
  font-size: 11px;
  color: var(--text-muted);
  font-style: italic;
  margin-top: 2px;
}

/* Monthly budget breakdown */
.aff-budget-card {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 16px;
  padding: 26px 28px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.aff-budget-title {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 4px;
}

.aff-budget-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

.aff-budget-label {
  font-size: 13px;
  color: var(--text-secondary);
}

.aff-budget-value {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-primary);
  white-space: nowrap;
  transition: var(--transition);
}

.aff-budget-deduct .aff-budget-value {
  color: var(--text-muted);
}

.aff-budget-divider {
  height: 1px;
  background: var(--border-color);
  margin: 4px 0;
}

.aff-budget-remaining .aff-budget-label,
.aff-budget-remaining .aff-budget-value {
  font-weight: 600;
  color: var(--text-primary);
}

/* Gauge / affordability checker */
.aff-gauge-card {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 16px;
  padding: 26px 28px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.aff-gauge-title {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--gold);
}

.aff-gauge-input-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

.aff-per-mo {
  font-size: 13px;
  color: var(--text-muted);
  white-space: nowrap;
}

/* Meter */
.aff-meter-wrap {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.aff-meter-track {
  position: relative;
  height: 10px;
  border-radius: 6px;
  background: linear-gradient(
    to right,
    #3a6b4a 0%,
    #5a8a6a 25%,
    #c9a96e 35%,
    #c9813a 50%,
    #a04030 100%
  );
  overflow: visible;
}

.aff-meter-fill {
  position: absolute;
  inset: 0;
  background: rgba(10, 10, 15, 0.55);
  border-radius: 6px;
  transform-origin: right;
  transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.aff-meter-needle {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 4px;
  height: 18px;
  background: var(--text-primary);
  border-radius: 2px;
  box-shadow: 0 0 6px rgba(0,0,0,0.6);
  transition: left 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.aff-meter-labels {
  position: relative;
  height: 16px;
  font-size: 9px;
  color: var(--text-muted);
  letter-spacing: 0.04em;
}

.aff-meter-labels span:first-child { position: absolute; left: 0; }
.aff-meter-labels span:last-child  { position: absolute; right: 0; }

.aff-zone-label {
  position: absolute;
  transform: translateX(-50%);
}

/* Verdict */
.aff-verdict {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  border-radius: 10px;
  border: 1px solid var(--border-color);
  background: rgba(255,255,255,0.03);
  transition: var(--transition);
}

.aff-verdict.good  { border-color: rgba(90,138,106,0.4); background: rgba(90,138,106,0.06); }
.aff-verdict.warn  { border-color: rgba(201,169,110,0.4); background: rgba(201,169,110,0.06); }
.aff-verdict.over  { border-color: rgba(160,64,48,0.4);  background: rgba(160,64,48,0.06); }

.aff-verdict-icon { font-size: 18px; line-height: 1; flex-shrink: 0; }

.aff-verdict span:nth-child(2) {
  flex: 1;
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.4;
}

.aff-verdict-pct {
  font-family: var(--font-serif);
  font-size: 22px;
  font-weight: 400;
  color: var(--text-primary);
  white-space: nowrap;
}

/* ============================================================
   HOME AFFORDABILITY CALCULATOR
   ============================================================ */

/* Hero card */
.ha-hero-card {
  background: var(--bg-card);
  border: 1px solid var(--border-hover);
  border-radius: 20px;
  padding: 32px 28px 24px;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.ha-hero-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--grad-gold);
}
.ha-hero-label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 10px;
}
.ha-hero-price {
  font-family: var(--font-serif);
  font-size: 54px;
  font-weight: 400;
  line-height: 1;
  background: var(--grad-gold);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 6px;
}
.ha-hero-sub {
  font-size: 12px;
  color: var(--text-muted);
  margin-bottom: 22px;
}

/* Range bar */
.ha-range { margin-top: 4px; }
.ha-range-track {
  height: 8px;
  border-radius: 4px;
  background: rgba(255,255,255,0.06);
  display: flex;
  overflow: hidden;
  gap: 2px;
}
.ha-range-conservative {
  height: 100%;
  background: #5a9a70;
  border-radius: 4px 0 0 4px;
  transition: width 0.5s ease;
  width: 33.3%;
}
.ha-range-standard {
  height: 100%;
  background: var(--gold);
  transition: width 0.5s ease;
  width: 33.3%;
}
.ha-range-max {
  height: 100%;
  background: #c97a3a;
  border-radius: 0 4px 4px 0;
  transition: width 0.5s ease;
  width: 33.3%;
}
.ha-range-labels {
  display: flex;
  justify-content: space-between;
  font-size: 10px;
  color: var(--text-muted);
  margin-top: 5px;
}

/* Three tier cards */
.ha-tiers {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.ha-tier {
  padding: 18px 12px 16px;
  border-radius: 14px;
  border: 1px solid var(--border-color);
  background: var(--bg-card);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  min-width: 0;
  box-sizing: border-box;
  position: relative;
  overflow: hidden;
}
.ha-tier::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
}
.ha-tier-conservative { border-color: rgba(90,165,115,0.3); background: rgba(90,165,115,0.04); }
.ha-tier-conservative::before { background: linear-gradient(to right, #3d7a56, #6fbf85); }
.ha-tier-standard     { border-color: var(--border-hover); background: rgba(201,169,110,0.06); }
.ha-tier-standard::before { background: var(--grad-gold); }
.ha-tier-max          { border-color: rgba(195,100,55,0.3); background: rgba(160,70,35,0.04); }
.ha-tier-max::before  { background: linear-gradient(to right, #c97a3a, #a03525); }

.ha-tier-icon { font-size: 16px; line-height: 1; }
.ha-tier-label {
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.ha-tier-price {
  font-family: var(--font-serif);
  font-size: 22px;
  font-weight: 400;
  line-height: 1;
  color: var(--text-primary);
}
.ha-tier-conservative .ha-tier-price { color: #6fbf85; }
.ha-tier-standard     .ha-tier-price {
  background: var(--grad-gold);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.ha-tier-max          .ha-tier-price { color: #d48045; }
.ha-tier-sub {
  font-size: 10px;
  color: var(--text-muted);
  line-height: 1.3;
}

/* Monthly breakdown card */
.ha-breakdown-card {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 16px;
  padding: 24px 24px 20px;
}
.ha-breakdown-title {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-secondary);
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.ha-breakdown-at {
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--text-muted);
}
.ha-breakdown-at span {
  color: var(--gold);
  font-family: var(--font-serif);
  font-size: 14px;
}
.ha-brow {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 9px 0;
  border-bottom: 1px solid var(--border-color);
  font-size: 13px;
  color: var(--text-secondary);
}
.ha-brow:last-child { border-bottom: none; }
.ha-brow span:last-child {
  font-family: var(--font-serif);
  font-size: 15px;
  color: var(--text-primary);
}
.ha-brow-total {
  margin-top: 4px;
  padding-top: 12px;
  font-weight: 600;
  color: var(--text-primary) !important;
}
.ha-brow-total span:first-child { color: var(--text-primary); }
.ha-brow-total span:last-child {
  font-size: 18px !important;
  background: var(--grad-gold);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.ha-brow-dti span:last-child { color: var(--gold) !important; font-size: 14px !important; }
.ha-pmi-note { font-size: 11px; color: var(--text-muted); margin-left: 4px; }

/* Down payment callout */
.ha-down-card {
  background: rgba(201,169,110,0.06);
  border: 1px solid var(--border-hover);
  border-radius: 14px;
  padding: 20px 22px;
  text-align: center;
}
.ha-down-label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 6px;
}
.ha-down-amount {
  font-family: var(--font-serif);
  font-size: 36px;
  font-weight: 400;
  background: var(--grad-gold);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  line-height: 1;
  margin-bottom: 6px;
}
.ha-down-sub {
  font-size: 12px;
  color: var(--text-muted);
}
.ha-down-sub span { color: var(--text-secondary); }

/* Custom down pct input */
.ha-custom-down {
  position: relative;
}

/* Responsive */
@media (max-width: 600px) {
  .ha-tiers { grid-template-columns: 1fr; }
  .ha-hero-price { font-size: 40px; }
}

/* ============================================================
   RENTAL ROI CALCULATOR
   ============================================================ */

/* Hero metrics row */
.roi-metrics {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.roi-metric {
  padding: 22px 14px 18px;
  border-radius: 16px;
  border: 1px solid var(--border-color);
  background: var(--bg-card);
  text-align: center;
  display: flex;
  flex-direction: column;
  min-width: 0;
  box-sizing: border-box;
  align-items: center;
  gap: 5px;
  position: relative;
  overflow: hidden;
}
.roi-metric::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
}

.roi-metric-caprate { border-color: var(--border-hover); background: rgba(201,169,110,0.06); }
.roi-metric-caprate::before { background: var(--grad-gold); }
.roi-metric-coc     { border-color: rgba(90,165,115,0.3); background: rgba(90,165,115,0.04); }
.roi-metric-coc::before { background: linear-gradient(to right, #3d7a56, #6fbf85); }
.roi-metric-grm     { border-color: rgba(100,130,200,0.3); background: rgba(80,110,180,0.04); }
.roi-metric-grm::before { background: linear-gradient(to right, #4a6ab0, #7a9ad8); }

.roi-metric-label {
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.roi-metric-value {
  font-family: var(--font-serif);
  font-size: 30px;
  font-weight: 400;
  line-height: 1;
}
.roi-metric-caprate .roi-metric-value {
  background: var(--grad-gold);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.roi-metric-coc .roi-metric-value { color: #6fbf85; }
.roi-metric-grm .roi-metric-value { color: #7a9ad8; }

.roi-metric-sub {
  font-size: 10px;
  color: var(--text-muted);
  line-height: 1.3;
  text-align: center;
}

/* Cash flow hero card */
.roi-cashflow-card {
  background: var(--bg-card);
  border: 1px solid var(--border-hover);
  border-radius: 18px;
  padding: 24px 28px;
  display: flex;
  align-items: center;
  gap: 28px;
  position: relative;
  overflow: hidden;
}
.roi-cashflow-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--grad-gold);
}

.roi-cf-left { flex-shrink: 0; }
.roi-cf-label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 4px;
}
.roi-cf-amount {
  font-family: var(--font-serif);
  font-size: 48px;
  font-weight: 400;
  line-height: 1;
  transition: color 0.3s;
}
.roi-cf-amount.positive {
  background: var(--grad-gold);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.roi-cf-amount.negative { color: #c96060; }
.roi-cf-sub {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 4px;
}

.roi-cf-right {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.roi-cf-stat {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 0;
  border-bottom: 1px solid var(--border-color);
  font-size: 13px;
}
.roi-cf-stat:last-child { border-bottom: none; }
.roi-cf-stat-label { color: var(--text-muted); }
.roi-cf-stat-val {
  font-family: var(--font-serif);
  font-size: 15px;
  color: var(--text-primary);
}

/* Income / Expense breakdown side-by-side */
.roi-breakdown-card {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 16px;
  padding: 22px 24px;
  display: grid;
  grid-template-columns: 1fr 1px 1fr;
  gap: 0 20px;
}
.roi-breakdown-divider {
  background: var(--border-color);
  width: 1px;
}
.roi-breakdown-col { display: flex; flex-direction: column; gap: 0; }
.roi-breakdown-head {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border-color);
}
.roi-income-head  { color: #6fbf85; }
.roi-expense-head { color: #c97a3a; }

.roi-brow {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 7px 0;
  font-size: 12px;
  color: var(--text-secondary);
  border-bottom: 1px solid rgba(255,255,255,0.04);
}
.roi-brow:last-child { border-bottom: none; }
.roi-brow span:last-child {
  font-family: var(--font-serif);
  font-size: 13px;
  color: var(--text-primary);
}
.roi-brow-deduct span:last-child { color: #c96060; }
.roi-brow-total {
  margin-top: 4px;
  padding-top: 8px;
  font-weight: 600;
  border-top: 1px solid var(--border-color);
  border-bottom: none;
}
.roi-brow-total span:last-child {
  font-size: 15px !important;
}

/* 1% rule banner */
.roi-rule-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 20px;
  border-radius: 12px;
  border: 1px solid var(--border-color);
  background: rgba(255,255,255,0.02);
  transition: var(--transition);
}
.roi-rule-card.pass {
  border-color: rgba(90,165,115,0.4);
  background: rgba(90,165,115,0.05);
}
.roi-rule-card.fail {
  border-color: rgba(195,80,80,0.35);
  background: rgba(160,60,60,0.04);
}
.roi-rule-icon { font-size: 22px; flex-shrink: 0; line-height: 1; }
.roi-rule-text { flex: 1; }
.roi-rule-headline {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 2px;
}
.roi-rule-sub { font-size: 11px; color: var(--text-muted); line-height: 1.4; }
.roi-rule-ratio {
  font-family: var(--font-serif);
  font-size: 22px;
  font-weight: 400;
  color: var(--text-primary);
  flex-shrink: 0;
}
.roi-rule-card.tier-great  { border-color: rgba(90,165,115,0.4);  background: rgba(90,165,115,0.06); }
.roi-rule-card.tier-good   { border-color: rgba(200,185,60,0.4);  background: rgba(200,185,60,0.05); }
.roi-rule-card.tier-caution{ border-color: rgba(210,128,50,0.4);  background: rgba(200,110,40,0.05); }
.roi-rule-card.tier-poor   { border-color: rgba(195,80,80,0.4);   background: rgba(160,60,60,0.05); }

.roi-rule-card.tier-great  .roi-rule-ratio { color: #6fbf85; }
.roi-rule-card.tier-good   .roi-rule-ratio { color: #c8c040; }
.roi-rule-card.tier-caution .roi-rule-ratio{ color: #d48045; }
.roi-rule-card.tier-poor   .roi-rule-ratio { color: #c96060; }

/* Total returns card */
.roi-total-card {
  background: var(--bg-card);
  border: 1px solid var(--border-hover);
  border-radius: 18px;
  padding: 24px 26px;
  position: relative;
  overflow: hidden;
}
.roi-total-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--grad-gold);
}
.roi-total-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 20px;
}
.roi-total-label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 2px;
}
.roi-total-years {
  font-family: var(--font-serif);
  font-size: 22px;
  color: var(--text-primary);
  line-height: 1;
}
.roi-total-amount {
  font-family: var(--font-serif);
  font-size: 44px;
  font-weight: 400;
  line-height: 1;
  background: var(--grad-gold);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.roi-total-amount.negative {
  background: none;
  -webkit-text-fill-color: #c96060;
}
.roi-total-rows {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.roi-total-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid var(--border-color);
  font-size: 12px;
  color: var(--text-secondary);
}
.roi-total-row:last-child { border-bottom: none; }
.roi-total-row span:last-child {
  font-family: var(--font-serif);
  font-size: 14px;
  color: var(--text-primary);
  white-space: nowrap;
  margin-left: 12px;
  text-align: right;
}
.roi-total-row-positive span:last-child { color: #6fbf85; }
.roi-total-row-negative span:last-child { color: #c96060; }
.roi-total-row-invested { opacity: 0.7; }
.roi-total-row-highlight {
  margin-top: 4px;
  padding-top: 10px;
  border-top: 1px solid var(--border-hover) !important;
  border-bottom: none !important;
  font-weight: 600;
  color: var(--text-primary) !important;
}
.roi-total-row-highlight span:first-child { color: var(--text-primary); font-size: 13px; }
.roi-total-row-highlight span:last-child {
  font-size: 18px !important;
  background: var(--grad-gold);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

@media (max-width: 640px) {
  .roi-metrics { grid-template-columns: 1fr; }
  .roi-cashflow-card { flex-direction: column; gap: 16px; }
  .roi-breakdown-card { grid-template-columns: 1fr; }
  .roi-breakdown-divider { display: none; }
  .roi-cf-amount { font-size: 36px; }
  .roi-total-amount { font-size: 32px; }
}

/* ===== RESPONSIVE (must be last — overrides all base styles above) ===== */

@media (max-width: 1024px) {
  .calculator-layout,
  .aff-layout {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .calc-results,
  .aff-results {
    position: static;
  }
}

@media (max-width: 768px) {
  .page-hero { padding: 120px 24px 60px; }
  .term-options { flex-wrap: wrap; }
  .result-card { padding: 28px 24px; }
  .input-row { grid-template-columns: 1fr 80px; }
  .rvb-compare { grid-template-columns: 1fr; }
  .rvb-breakeven { flex-wrap: wrap; gap: 8px; }
  .ha-tiers { grid-template-columns: repeat(3, 1fr); }
  .roi-metrics { grid-template-columns: 1fr 1fr; }
  .roi-cashflow-card { flex-direction: column; gap: 16px; }
  .roi-breakdown-card { grid-template-columns: 1fr; }
  .roi-breakdown-divider { display: none; }
  .roi-total-header { flex-direction: column; gap: 8px; align-items: flex-start; }
  .roi-total-amount { font-size: 32px; }
  .ha-hero-price { font-size: 40px; }
  .ha-down-amount { font-size: 28px; }
}

@media (max-width: 540px) {
  .aff-rules   { grid-template-columns: 1fr; }
  .ha-tiers    { grid-template-columns: 1fr; }
  .roi-metrics { grid-template-columns: 1fr; }
  .input-row   { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
  body { overflow-x: hidden; }
  .tools-section,
  .tool-panel,
  .calculator-layout,
  .aff-layout,
  .calc-inputs,
  .calc-results,
  .aff-inputs,
  .aff-results { max-width: 100%; box-sizing: border-box; }

  .tools-nav {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 4px;
    gap: 8px;
    margin-bottom: 40px;
  }
  .tools-nav::-webkit-scrollbar { display: none; }
  .tool-pill { padding: 10px 14px; font-size: 11px; white-space: nowrap; flex-shrink: 0; }

  .ha-hero-price    { font-size: 32px; }
  .roi-cf-amount    { font-size: 32px; }
  .roi-total-amount { font-size: 28px; }
  .ha-down-amount   { font-size: 26px; }

  .loan-summary { padding: 20px; grid-template-columns: 1fr 1fr; }

  .rvb-verdict  { flex-wrap: wrap; gap: 10px; }
  .verdict-diff { width: 100%; text-align: left; }

  .result-card          { padding: 22px 18px; }
  .ha-hero-card         { padding: 24px 18px 20px; }
  .ha-breakdown-card    { padding: 18px; }
  .ha-down-card         { padding: 16px 18px; }
  .roi-cashflow-card    { padding: 18px 20px; }
  .roi-breakdown-card   { padding: 16px 18px; }
  .roi-total-card       { padding: 18px 20px; }
  .aff-budget-card      { padding: 20px 18px; }
  .aff-gauge-card       { padding: 20px 18px; }

  .tool-header { margin-bottom: 32px; }
}