*{box-sizing:border-box}

:root{
  --green:#2f7d32;
  --green-dark:#245f27;
  --bg:#f5f5f0;
  --text:#1d241d;
  --muted:#687160;
  --line:#d9ded0;
  --soft:#f8f8f3;
  --white:#fff;
}

html{scroll-behavior:smooth}

body{
  margin:0;
  font-family:Arial,Helvetica,sans-serif;
  background:var(--bg);
  color:var(--text);
}

.page{
  width:100%;
  min-height:100vh;
  padding:32px 16px 48px;
}

.calculator-shell{
  max-width:1240px;
  margin:0 auto;
}

.calculator-head{
  background:var(--white);
  border:1px solid var(--line);
  padding:24px;
  margin-bottom:16px;
}

.section-kicker{
  margin:0 0 8px;
  text-transform:uppercase;
  letter-spacing:.12em;
  color:var(--green);
  font-size:13px;
  font-weight:900;
}

.calculator-head h1{
  margin:0 0 8px;
  font-size:36px;
  line-height:1.1;
}

.calculator-head p{
  margin:0;
  color:var(--muted);
  font-size:17px;
  line-height:1.45;
}

.calc-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:16px;
}

.card{
  background:var(--white);
  border:1px solid var(--line);
  padding:18px;
}

.card.wide,
.actions.wide{
  grid-column:1/-1;
}

.card h3{
  margin:0 0 14px;
  font-size:21px;
  display:flex;
  align-items:center;
  gap:8px;
}

.card h4{
  margin:0 0 10px;
}

.two{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px;
}

label{
  display:block;
  color:#445044;
  font-weight:700;
}

input,
textarea{
  width:100%;
  margin-top:7px;
  border:1px solid #cbd4c4;
  background:#fbfbf7;
  padding:13px;
  font-size:16px;
  color:var(--text);
}

input:focus,
textarea:focus{
  outline:2px solid rgba(47,125,50,.18);
  border-color:var(--green);
}

.hint{
  width:25px;
  height:25px;
  border:1px solid #9fc39a;
  background:#e8f5e9;
  color:var(--green);
  cursor:help;
  font-weight:900;
}

.option-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
}

.option-card{
  position:relative;
  margin:0;
  border:1px solid #d7ddcf;
  background:var(--soft);
  padding:13px 14px;
  cursor:pointer;
  min-height:48px;
  display:flex;
  align-items:center;
  transition:.18s ease;
  user-select:none;
}

.option-card input{
  position:absolute;
  opacity:0;
  pointer-events:none;
}

.option-card:hover{
  border-color:#9fc39a;
}

.option-card.active{
  background:#e8f5e9;
  border-color:var(--green);
  box-shadow:inset 4px 0 0 var(--green);
}

.option-card span{
  font-weight:800;
  line-height:1.25;
}

.qty-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;
}

.qty-row{
  display:grid;
  grid-template-columns:1fr 92px;
  gap:8px;
  align-items:center;
  background:var(--soft);
  padding:10px;
  border:1px solid #e0e4d9;
}

.qty-row input{
  margin:0;
}

.qty-row.single{
  margin-top:12px;
}

.primary{
  background:var(--green);
  color:#fff;
  border:0;
  padding:16px 22px;
  font-size:17px;
  font-weight:900;
  cursor:pointer;
}

.primary:hover{
  background:var(--green-dark);
}

.actions{
  background:var(--white);
  border:1px solid var(--line);
  padding:18px;
  display:flex;
  gap:16px;
  align-items:center;
  flex-wrap:wrap;
}

.actions p{
  margin:0;
  color:var(--muted);
}

.result,
.lead-form{
  background:var(--white);
  border:1px solid var(--line);
  margin-top:18px;
  padding:24px;
}

.result-top{
  display:flex;
  justify-content:space-between;
  gap:18px;
  align-items:flex-start;
}

.result-label{
  text-transform:uppercase;
  letter-spacing:.08em;
  color:var(--muted);
  font-size:13px;
  font-weight:900;
}

.total{
  font-size:48px;
  font-weight:900;
  color:var(--green);
  margin:6px 0;
}

.result-note{
  background:#e8f5e9;
  border:1px solid #b7d9b6;
  padding:14px;
  max-width:300px;
  color:#244c24;
}

.result-note span{
  display:block;
  margin-top:5px;
}

.metric-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:10px;
  margin:16px 0;
}

.metric{
  background:var(--soft);
  border:1px solid #e0e4d9;
  padding:12px;
}

.metric b{
  font-size:22px;
  color:var(--green);
}

.breakdown-details{
  margin-top:16px;
}

.breakdown-details summary{
  cursor:pointer;
  font-weight:900;
  color:var(--green);
  padding:12px;
  background:var(--soft);
  border:1px solid #e0e4d9;
}

.breakdown{
  width:100%;
  border-collapse:collapse;
  margin-top:12px;
}

.breakdown td{
  border-bottom:1px solid #e7eadd;
  padding:10px;
}

.breakdown td:last-child{
  text-align:right;
  font-weight:900;
  white-space:nowrap;
}

.lead-grid{
  display:grid;
  grid-template-columns:1fr 1fr auto;
  gap:12px;
}

#leadStatus{
  margin-top:12px;
  font-weight:800;
  color:var(--green);
}

.hidden{
  display:none;
}

.tooltip{
  position:fixed;
  max-width:360px;
  background:#1f2b1f;
  color:#fff;
  padding:14px;
  border:1px solid rgba(255,255,255,.2);
  z-index:1000;
  box-shadow:0 15px 45px rgba(0,0,0,.24);
  line-height:1.45;
}

@media(max-width:980px){
  .option-grid,
  .qty-grid{
    grid-template-columns:1fr;
  }
}

@media(max-width:820px){
  .page{
    padding:18px 12px 36px;
  }

  .calculator-head,
  .result-top{
    display:block;
  }

  .calc-grid,
  .two,
  .lead-grid{
    grid-template-columns:1fr;
  }

  .metric-grid{
    grid-template-columns:1fr 1fr;
  }

  .total{
    font-size:36px;
  }

  .result-note{
    max-width:none;
  }

  .actions{
    display:block;
  }

  .actions p{
    margin-top:12px;
  }
}

@media(max-width:520px){
  .metric-grid{
    grid-template-columns:1fr;
  }

  .qty-row{
    grid-template-columns:1fr 84px;
  }

  .calculator-head h1{
    font-size:30px;
  }
}