.tqc-hero {
  max-width: 600px; 
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 20px;
  box-sizing: border-box;
}
.tqc-hero * { box-sizing: border-box; }

.tqc-estimator {
  background: #fff;
  border: 1px solid #e6e6e6;
  border-radius: 16px;
  padding: 28px 24px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.06);
}

.tqc-mono { font-family: "SF Mono", "Roboto Mono", Consolas, monospace; }

/* progress */
.tqc-progress {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-bottom: 22px;
}
.tqc-progress-dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  background: #e2e2e2;
  transition: background .2s ease;
}
.tqc-progress-dot.active,
.tqc-progress-dot.done {
  background: #2f8f4e;
}

.tqc-step { display: none; }
.tqc-step.active { display: block; animation: tqc-fade .25s ease; }
@keyframes tqc-fade { from { opacity:0; transform: translateY(6px);} to {opacity:1; transform:none;} }

.tqc-step-label {
  font-size: 12px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #888;
  margin-bottom: 6px;
  font-weight: 600;
}
.tqc-step-title {
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 18px;
  color: #17301f;
}

/* type + sqft grids */
.tqc-type-grid,
.tqc-sqft-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 18px;
}
.tqc-type-card,
.tqc-sqft-card {
  grid-column: span 1;
  text-align: left;
  border: 1.5px solid #e2e2e2;
  background: #fafafa;
  border-radius: 12px;
  padding: 14px 32px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 4px;
  transition: border-color .15s ease, background .15s ease;
}
.tqc-sqft-card.tqc-wide { grid-column: span 2; }

.tqc-type-card:hover,
.tqc-sqft-card:hover { border-color: #2f8f4e; background: #f3faf5; }
.tqc-type-card.selected,
.tqc-sqft-card.selected {
  border-color: #2f8f4e;
  background: #eaf7ee;
}

.tqc-num { font-weight: 700; font-size: 15px; color: #17301f; }
.tqc-label { font-size: 12.5px; color: #777; }

/* estimate box */
.tqc-estimate-box {
  background: #f3faf5;
  border: 1px solid #d7ecdd;
  border-radius: 14px;
  padding: 20px;
  margin-bottom: 16px;
  text-align: center;
}
.tqc-range-label { font-size: 12.5px; color: #4f7a5b; margin-bottom: 6px; text-transform: uppercase; letter-spacing:.04em;}
.tqc-range-value { font-size: 28px; font-weight: 800; color: #1c4d2c; margin-bottom: 8px; }
.tqc-range-note { font-size: 12.5px; color: #5c6f61; line-height: 1.5; }

.tqc-value-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
.tqc-chip {
  font-size: 12px;
  background: #eef6f0;
  color: #2f6b3f;
  padding: 6px 10px;
  border-radius: 999px;
  font-weight: 600;
}

/* fields & pills */
.tqc-field { margin-bottom: 18px; }
.tqc-field label { display:block; font-size: 13.5px; font-weight: 600; margin-bottom: 8px; color: #333; }
.tqc-field input[type="text"],
.tqc-field input[type="tel"] {
  width: 100%;
  padding: 12px 14px;
  border-radius: 10px;
  border: 1.5px solid #ddd;
  font-size: 15px;
}
.tqc-field input:focus { outline: none; border-color: #2f8f4e; }

.tqc-pill-row { display: flex; flex-wrap: wrap; gap: 8px; }
.tqc-pill {
  border: 1.5px solid #ddd;
  background: #fff;
  border-radius: 999px;
  padding: 8px 14px;
  font-size: 13.5px;
  cursor: pointer;
}
.tqc-pill.selected { border-color: #2f8f4e; background: #eaf7ee; color: #1c4d2c; font-weight: 600; }

/* buttons */
.tqc-btn {
  display: block;
  width: 100%;
  text-align: center;
  padding: 13px 16px;
  border-radius: 10px;
  font-weight: 700;
  font-size: 15px;
  cursor: pointer;
  margin-bottom: 10px;
  border: none;
}
.tqc-btn-primary { background: #2f8f4e; color: #fff; }
.tqc-btn-primary:hover { background: #267a41; }
.tqc-btn-primary:disabled { opacity: .6; cursor: default; }
.tqc-btn-ghost { background: transparent; color: #555; text-decoration: underline; }

.tqc-form-msg { font-size: 13px; margin-bottom: 12px; padding: 10px 12px; border-radius: 8px; }
.tqc-form-msg.error { background: #fdeceb; color: #9b2c22; }
.tqc-form-msg.success { background: #eaf7ee; color: #1c4d2c; }

/* confirmation */
.tqc-confirm-check {
  width: 52px; height: 52px;
  border-radius: 50%;
  background: #2f8f4e;
  color: #fff;
  font-size: 26px;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 14px;
}
.tqc-confirm-sub { text-align: center; font-size: 13.5px; color: #666; margin-bottom: 18px; line-height:1.5; }
.tqc-text-photo-box {
  background: #f7f7f7;
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 16px;
}
.tqc-text-photo-label { font-size: 11.5px; text-transform: uppercase; letter-spacing:.05em; color: #999; font-weight:700; margin-bottom:4px;}
.tqc-text-photo-title { font-weight: 700; margin-bottom: 6px; }
.tqc-text-photo-copy { font-size: 13px; color: #666; margin-bottom: 10px; line-height:1.5; }
.tqc-text-photo-number { font-weight: 700; color: #2f8f4e; text-decoration: none; font-size: 15px; }