:root {
  --chb-ink: #202020;
  --chb-muted: #6b6b6b;
  --chb-line: #d9e1e5;
  --chb-paper: #ffffff;
  --chb-warm: #f7f9fa;
  --chb-accent: #1bb0ce;
  --chb-accent-dark: #1597b3;
  --chb-dark: #1c1c1c;
  --chb-radius: 4px;
  --chb-shadow: 0 14px 38px rgba(0, 0, 0, 0.07);
}

/*
 * CHB site skin.
 * This stylesheet is injected into generated deployment output only.
 * Approved calculator source styles and pricing logic remain untouched.
 */

body[data-calculator] {
  color: var(--chb-ink);
  background: var(--chb-warm);
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

body[data-calculator] .page-shell {
  width: min(1180px, calc(100vw - 40px));
  padding: 30px 0 48px;
}

body[data-calculator] .hero {
  align-items: flex-end;
  padding: 8px 0 30px;
  border-bottom: 1px solid var(--chb-line);
  margin-bottom: 28px;
}

body[data-calculator] .hero-copy h1,
body[data-calculator] .card-head h2,
body[data-calculator] .summary-head h2 {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 500;
  letter-spacing: -0.035em;
  color: var(--chb-dark);
}

body[data-calculator] .hero-copy h1 {
  font-size: clamp(2.45rem, 5vw, 4.65rem);
  line-height: 0.98;
}

body[data-calculator] .eyebrow {
  color: var(--chb-accent);
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  font-weight: 700;
}

body[data-calculator] .lede,
body[data-calculator] .group-head p,
body[data-calculator] .fine-print,
body[data-calculator] .summary-note,
body[data-calculator] .submit-result,
body[data-calculator] .field-help,
body[data-calculator] .toggle-card .toggle-note {
  color: var(--chb-muted);
}

body[data-calculator] .hero-badge {
  min-width: 205px;
  border-radius: var(--chb-radius);
  background: var(--chb-accent);
  box-shadow: none;
}

body[data-calculator] .layout {
  grid-template-columns: minmax(0, 1.55fr) minmax(330px, 0.78fr);
  gap: 26px;
}

body[data-calculator] .card {
  border: 1px solid var(--chb-line);
  border-radius: var(--chb-radius);
  background: var(--chb-paper);
  backdrop-filter: none;
  box-shadow: none;
}

body[data-calculator] .calculator {
  padding: clamp(22px, 3vw, 36px);
  border-top: 2px solid var(--chb-accent);
}

body[data-calculator] .summary {
  padding: 26px;
  top: 0;
  border-top: 2px solid var(--chb-accent);
  box-shadow: var(--chb-shadow);
}

body[data-calculator] .summary-head .eyebrow {
  display: none;
}

body[data-calculator] .stepper {
  padding: 4px;
  border: 1px solid var(--chb-line);
  border-radius: 2px;
  background: #fff;
}

body[data-calculator] .step {
  width: 42px;
  height: 42px;
  border-radius: 2px;
}

body[data-calculator] .step.is-active {
  background: var(--chb-accent);
  color: #fff;
}

body[data-calculator] .field-slider {
  padding: 20px;
  border: 1px solid var(--chb-line);
  border-radius: var(--chb-radius);
  background: var(--chb-warm);
}

body[data-calculator] .field-label-row output {
  color: var(--chb-accent);
}

body[data-calculator] input[type="range"] {
  accent-color: var(--chb-accent);
}

body[data-calculator] input[type="text"],
body[data-calculator] input[type="email"],
body[data-calculator] input[type="tel"],
body[data-calculator] input[type="date"],
body[data-calculator] select,
body[data-calculator] textarea {
  border: 1px solid #d3dde2;
  border-radius: 2px;
  padding: 14px 15px;
  background: #fff;
  box-shadow: none;
}

body[data-calculator] input:focus,
body[data-calculator] select:focus,
body[data-calculator] textarea:focus,
body[data-calculator] button:focus-visible {
  outline: 2px solid rgba(27, 176, 206, 0.28);
  outline-offset: 2px;
}

body[data-calculator] .toggle-list {
  gap: 10px;
}

body[data-calculator] .toggle-card {
  min-height: 132px;
  padding: 17px;
  border: 1px solid var(--chb-line);
  border-radius: var(--chb-radius);
  background: #fff;
  transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

body[data-calculator] .toggle-card:not(.is-disabled):hover {
  border-color: #bdcbd2;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.05);
  transform: translateY(-1px);
}

body[data-calculator] .toggle-btn {
  border-radius: 999px;
  background: #c7cdd0;
}

body[data-calculator] .toggle-btn.is-on {
  background: var(--chb-accent);
}

body[data-calculator] .primary-btn,
body[data-calculator] .ghost-btn {
  border-radius: 2px;
  padding: 14px 22px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.78rem;
}

body[data-calculator] .primary-btn {
  background: var(--chb-accent);
  color: #fff;
  box-shadow: none;
}

body[data-calculator] .primary-btn:hover {
  background: var(--chb-accent-dark);
}

body[data-calculator] .ghost-btn {
  background: var(--chb-warm);
  color: var(--chb-dark);
}

body[data-calculator] .estimate-band,
body[data-calculator] .estimate-center {
  border-radius: var(--chb-radius);
  border: 1px solid rgba(27, 176, 206, 0.32);
  background: rgba(27, 176, 206, 0.07);
  color: var(--chb-ink);
  box-shadow: none;
}

body[data-calculator] .estimate-band .label,
body[data-calculator] .estimate-center .label {
  color: var(--chb-accent);
}

body[data-calculator] .estimate-divider {
  background: rgba(27, 176, 206, 0.24);
}

body[data-calculator] .zero-state-note {
  border: 1px solid var(--chb-line);
  background: var(--chb-warm);
  color: var(--chb-muted);
  box-shadow: none;
}

body[data-calculator] .submit-result:empty {
  margin: 0;
  padding: 0;
  min-height: 0;
  border: 0;
  background: transparent;
}

body[data-calculator] .breakdown li,
body[data-calculator] .zero-state-note,
body[data-calculator] .submit-result {
  border-radius: var(--chb-radius);
}

body[data-calculator] .summary-note-box {
  border-top: 2px solid #c44747;
}

body[data-calculator] .summary-note-box > .summary-note {
  color: #c44747;
  font-weight: 700;
}

body[data-calculator] #pricing-disclaimer {
  color: var(--chb-muted);
  line-height: 1.55;
}

body[data-calculator] .mini-estimate-bar {
  background: var(--chb-accent);
  border-radius: 2px 2px 0 0;
}

/* Embedded service-page mode: the WordPress page owns the hero/header/footer. */
body.chb-embed {
  min-height: 0;
  background: transparent;
}

body.chb-embed .page-shell {
  width: 100%;
  max-width: 1180px;
  padding: 0;
}

body.chb-embed .hero {
  display: none;
}

body.chb-embed .layout {
  margin: 0;
}

body.chb-embed .calculator,
body.chb-embed .summary {
  background: #fff;
}

@media (max-width: 900px) {
  body[data-calculator] .page-shell {
    width: min(100% - 24px, 760px);
    padding: 22px 0 42px;
  }

  body[data-calculator] .layout {
    grid-template-columns: 1fr;
  }

  body[data-calculator] .summary {
    position: static;
    box-shadow: none;
  }

  body[data-calculator] .hero {
    align-items: flex-start;
  }
}

@media (max-width: 640px) {
  body[data-calculator] .page-shell {
    width: min(100% - 16px, 560px);
  }

  body[data-calculator] .calculator,
  body[data-calculator] .summary {
    padding: 18px;
  }

  body[data-calculator] .toggle-list,
  body[data-calculator] .lead-grid {
    grid-template-columns: 1fr;
  }

  body[data-calculator] .hero-badge {
    display: none;
  }
}