/* ==========================================================================
   Culling cost calculator — standalone page. Moved intact out of the
   homepage hero (PROMPT_LANDING_PAGE_REWORK.md): same inputs, same live JS
   math, same framing line, same styling — only the outer positioning
   changes, since it's no longer squeezed into a two-column hero grid.
   ========================================================================== */

.calc-card {
  width: 100%;
  max-width: 400px;
  margin: 0 auto;
  background: #343C46;
  border: 1px solid #414A56;
  border-radius: 16px;
  padding: 1.4rem 1.5rem;
  text-align: left;
}
.calc-title {
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--pick-400);
  margin-bottom: 1rem;
}
.calc-fields { display: grid; gap: 0.75rem; }
.calc-field { display: grid; gap: 0.3rem; }
.calc-label {
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--brand-300);
}
.calc-field input {
  width: 100%;
  padding: 0.42rem 0.7rem;
  background: #2F363F;
  border: 1px solid #414A56;
  border-radius: 8px;
  color: var(--paper-100);
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
}
.calc-field input:hover { border-color: #5C6875; }
.calc-stats { display: flex; gap: 1.6rem; margin-top: 1.1rem; }
.calc-key {
  font-size: 0.68rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--brand-300);
  margin-bottom: 0.3rem;
}
.calc-num { font-size: 1.75rem; letter-spacing: -0.02em; line-height: 1; }
.calc-unit { font-size: 0.5em; color: #6f7076; margin-left: 0.3em; letter-spacing: 0; }
.calc-framing { margin-top: 0.8rem; color: #9b9ca3; font-size: var(--fs-sm); line-height: 1.55; }
.calc-fine {
  margin-top: 0.7rem;
  font-size: 0.68rem;
  color: #6f7076;
  line-height: 1.6;
}
.calc-cta {
  display: inline-block;
  margin-top: 0.9rem;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.05em;
  color: var(--paper-100);
  text-decoration: none;
  border-bottom: 1px solid #5C6875;
  padding-bottom: 0.15rem;
}
.calc-cta:hover { border-bottom-color: var(--paper-100); }

@media (max-width: 640px) {
  .calc-card { padding: 1.2rem 1.3rem; }
}