.tdc-calculator {
  --tdc-green: #174c3c;
  --tdc-green-light: #eaf2ee;
  --tdc-ink: #17211d;
  --tdc-muted: #5c6863;
  --tdc-line: #d8dedb;
  background: #fff;
  border: 1px solid var(--tdc-line);
  border-radius: 18px;
  box-shadow: 0 16px 40px rgba(17, 42, 33, .1);
  color: var(--tdc-ink);
  font-family: inherit;
  margin: 2rem auto;
  max-width: 900px;
  overflow: hidden;
}

.tdc-calculator * { box-sizing: border-box; }
.tdc-header { background: var(--tdc-green); color: #fff; padding: clamp(1.5rem, 4vw, 2.75rem); }
.tdc-header h2 { color: #fff; font-size: clamp(1.75rem, 4vw, 2.5rem); line-height: 1.1; margin: .3rem 0 .75rem; }
.tdc-header p { margin: 0; max-width: 660px; }
.tdc-header .tdc-eyebrow { color: #cde2d8; font-size: .75rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.tdc-form, .tdc-results { padding: clamp(1.5rem, 4vw, 2.75rem); }
.tdc-fields { display: grid; gap: 1.1rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.tdc-fields label > span:first-child { display: block; font-size: .9rem; font-style: normal; font-weight: 700; margin-bottom: .4rem; }
.tdc-input-wrap { display: flex; position: relative; }
.tdc-input-wrap input { padding-right: 3.2rem !important; }
.tdc-input-wrap em { align-items: center; color: var(--tdc-muted); display: flex; font-style: normal; font-weight: 700; height: 100%; padding: 0 .9rem; pointer-events: none; position: absolute; right: 0; }
.tdc-calculator input, .tdc-calculator select { background: #fff; border: 1px solid #aeb8b3; border-radius: 8px; color: var(--tdc-ink); font: inherit; min-height: 48px; padding: .7rem .85rem; width: 100%; }
.tdc-calculator input:focus, .tdc-calculator select:focus { border-color: var(--tdc-green); box-shadow: 0 0 0 3px rgba(23, 76, 60, .15); outline: 0; }
.tdc-calculator button { background: var(--tdc-green); border: 0; border-radius: 8px; color: #fff; cursor: pointer; font: inherit; font-weight: 700; margin-top: 1.4rem; padding: .85rem 1.3rem; }
.tdc-calculator button:hover { filter: brightness(1.1); }
.tdc-calculator button:focus-visible { outline: 3px solid #80aa98; outline-offset: 3px; }
.tdc-error { background: #fff0ef; border-left: 4px solid #b42318; color: #8a1c13; margin: 1rem 0 0; padding: .75rem 1rem; }
.tdc-results { background: #f7f9f8; border-top: 1px solid var(--tdc-line); }
.tdc-summary { display: grid; gap: 1px; grid-template-columns: repeat(4, minmax(0, 1fr)); overflow: hidden; border: 1px solid var(--tdc-line); border-radius: 12px; background: var(--tdc-line); }
.tdc-summary > div { background: #fff; padding: 1.1rem; }
.tdc-summary span, .tdc-board-grid span { color: var(--tdc-muted); display: block; font-size: .78rem; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; }
.tdc-summary strong, .tdc-board-grid strong { color: var(--tdc-green); display: block; font-size: 1.45rem; line-height: 1.2; margin-top: .35rem; }
.tdc-results h3 { font-size: 1.35rem; margin: 2rem 0 .25rem; }
.tdc-result-intro { color: var(--tdc-muted); margin: 0 0 1rem; }
.tdc-board-grid { display: grid; gap: .8rem; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.tdc-board-grid > div { background: var(--tdc-green-light); border-radius: 10px; padding: 1.15rem; }
.tdc-board-grid small { color: var(--tdc-muted); display: block; margin-top: .25rem; }
.tdc-note { border-top: 1px solid var(--tdc-line); color: var(--tdc-muted); font-size: .82rem; line-height: 1.55; margin: 1.5rem 0 0; padding-top: 1rem; }

@media (max-width: 700px) {
  .tdc-fields, .tdc-board-grid { grid-template-columns: 1fr; }
  .tdc-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 420px) {
  .tdc-summary { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .tdc-calculator { scroll-behavior: auto; }
}