/* Generated from site/styles/calculator.css. Edit the source, then run npm run build. */
.calculator-page {
  --calc-navy: #102d47;
  --calc-cyan: #85d8ed;
  color: #142f45;
  background: radial-gradient(ellipse at 95% 0%, #dfedf7, transparent 50%), #f6f9fc;
}
.calculator-page main,
.calculator-page .header-inner {
  width: min(100% - 80px, 1080px);
  margin-inline: auto;
}
.calculator-page .site-header {
  border-bottom-color: #dce7ef;
}
.calculator-page .site-nav .nav-contact {
  border-color: #214d6a;
  border-radius: 10px;
  background: var(--calc-navy);
}
.calculator-page .site-nav .nav-contact:hover {
  background: #244d69;
}
.calculator-page .site-nav .nav-contact svg {
  color: var(--calc-cyan);
}
.intro {
  padding-block: 45px 30px;
}
.intro h1 {
  margin: 0 0 12px;
  font-size: clamp(34px, 4vw, 48px);
  font-weight: 650;
  letter-spacing: -1.6px;
  line-height: 1.12;
}
.intro h1 span {
  color: #246d9f;
}
.intro p {
  margin: 0;
  color: #4c6475;
  font-size: 16px;
  line-height: 1.6;
}
.calculator-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  scroll-margin-top: 24px;
}
.input-card,
.results-card {
  min-width: 0;
  padding: 32px;
  border-radius: 18px;
}
.input-card {
  background: white;
  border: 1px solid #d2e2ed;
}
.field {
  min-width: 0;
  margin-bottom: 23px;
}
.field label {
  display: block;
  margin-bottom: 9px;
  font-size: 14px;
  font-weight: 550;
  line-height: 1.4;
  color: #24445b;
}
.input-wrap {
  display: flex;
  align-items: center;
  height: 52px;
  min-width: 0;
  border: 1px solid #c3d7e5;
  border-radius: 8px;
  background: #f7fafd;
}
.input-wrap:focus-within {
  border-color: #367b9e;
  background: white;
  box-shadow: 0 0 0 3px #cee5f4;
}
.input-wrap:has([aria-invalid="true"]) {
  border-color: #b05d47;
  background: #fff9f6;
}
.input-wrap input {
  min-width: 0;
  width: 100%;
  height: 100%;
  padding: 0 14px;
  outline: none;
  border: 0;
  background: transparent;
  color: var(--calc-navy);
  font: 550 20px var(--sans);
  font-variant-numeric: tabular-nums;
  appearance: textfield;
  -moz-appearance: textfield;
}
.input-wrap input::-webkit-inner-spin-button,
.input-wrap input::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.input-prefix {
  padding-left: 14px;
  color: #526879;
  font-size: 17px;
}
.input-prefix + input {
  padding-left: 10px;
}
.input-unit {
  flex-shrink: 0;
  padding-right: 14px;
  color: #526879;
  font-size: 12px;
}
.field-label-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}
.field-label-row label {
  margin-bottom: 0;
}
.segmented-control {
  display: flex;
  flex-shrink: 0;
  padding: 2px;
  margin: 0;
  border: 1px solid #dce6ed;
  border-radius: 7px;
  background: #f3f7fa;
}
.segmented-control button {
  min-width: 38px;
  min-height: 34px;
  border: 0;
  border-radius: 5px;
  background: transparent;
  color: #43647b;
  font-size: 13px;
  transition:
    background 180ms,
    color 180ms;
}
.segmented-control button[aria-pressed="true"] {
  background: var(--calc-navy);
  color: #f5faff;
}
.offer-switch {
  margin-bottom: 22px;
}
.offer-switch button {
  min-width: 92px;
  padding-inline: 12px;
}
.field-help {
  margin: 7px 0 0;
  color: #526879;
  font-size: 11px;
  line-height: 1.5;
}
.field-error {
  margin: 7px 0 0;
  color: #943d28;
  font-size: 12px;
  line-height: 1.5;
}
.rate-control {
  display: flex;
  align-items: flex-start;
  gap: 22px;
}
.range-group {
  flex: 1;
  min-width: 0;
}
.rate-input {
  flex: 0 0 98px;
}
.rate-input input {
  padding-right: 4px;
}
.rate-slider {
  display: block;
  width: 100%;
  height: 38px;
  margin: 0;
  appearance: none;
  background: transparent;
  cursor: pointer;
}
.rate-slider::-webkit-slider-runnable-track {
  height: 6px;
  border-radius: 6px;
  background: linear-gradient(
    to right,
    #246d9f var(--range-progress),
    #d9e7f0 var(--range-progress)
  );
}
.rate-slider::-webkit-slider-thumb {
  appearance: none;
  width: 22px;
  height: 22px;
  margin-top: -8px;
  border: 2px solid #246d9f;
  border-radius: 50%;
  background: white;
  box-shadow: 0 2px 5px #102d471a;
}
.rate-slider[data-empty="true"]::-webkit-slider-thumb {
  border-color: #91afc4;
}
.rate-slider::-moz-range-track {
  height: 6px;
  border-radius: 6px;
  background: #d9e7f0;
}
.rate-slider::-moz-range-progress {
  height: 6px;
  border-radius: 6px;
  background: #246d9f;
}
.rate-slider::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border: 2px solid #246d9f;
  border-radius: 50%;
  background: white;
}
.rate-slider[data-empty="true"]::-moz-range-thumb {
  border-color: #91afc4;
}
.rate-scale {
  display: flex;
  justify-content: space-between;
  color: #526879;
  font-size: 10px;
  line-height: 1.4;
}
.field-explainer {
  margin-top: 6px;
  color: #315d78;
  font-size: 11px;
  line-height: 1.6;
}
.field-explainer summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 32px;
  list-style: none;
  cursor: pointer;
}
.field-explainer summary::-webkit-details-marker {
  display: none;
}
.field-explainer summary > span {
  font-size: 17px;
  flex-shrink: 0;
}
.field-explainer[open] summary > span {
  transform: rotate(45deg);
}
.field-explainer p {
  margin: 4px 0 12px;
  color: #526879;
}
.field-explainer a {
  color: #246d9f;
  text-underline-offset: 3px;
}
.cost-explainer {
  margin-top: 10px;
}
.mobile-calculator-link {
  display: none;
}
.field-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}
.field-pair .field {
  margin-bottom: 0;
}
.form-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 20px;
  color: #526879;
  font-size: 11px;
}
.reset-button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 6px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: #315d78;
  font-size: 12px;
}
.reset-button:hover {
  background: #edf5fa;
}
.reset-button span {
  font-size: 19px;
}
.results-card {
  display: flex;
  flex-direction: column;
  border: 1px solid #315c79;
  color: #f5faff;
  background:
    radial-gradient(ellipse at 100% 0%, #246d9f47, transparent 70%),
    linear-gradient(140deg, #0f2943, #153853);
  scroll-margin-top: 24px;
  container-type: inline-size;
}
#results-content {
  display: flex;
  flex-direction: column;
  flex: 1;
}
.profit-hero {
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex: 1;
  min-height: 215px;
  padding-block: 12px 30px;
}
.profit-hero h2 {
  margin: 0;
  color: #c2ddeb;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.6;
  letter-spacing: 0;
}
.hero-number {
  margin-block: 19px 15px;
  color: #f5faff;
  font-size: clamp(39px, 14cqi, 68px);
  font-weight: 600;
  letter-spacing: -2.7px;
  line-height: 1.12;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}
.roi {
  margin: 0;
  color: #a9e7f6;
  font-size: 14px;
  line-height: 1.7;
}
.results-card[data-state="incomplete"] .hero-number,
.results-card[data-state="invalid"] .hero-number {
  color: #b0d1e2;
}
.results-card[data-state="loss"] .hero-number,
.results-card[data-state="loss"] .roi {
  color: #ffbea8;
}
.quick-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  padding-block: 23px;
  border-top: 1px solid #86b9dc40;
}
.quick-stats > div {
  min-width: 0;
}
.quick-stats span {
  color: #bfd4e3;
  font-size: 12px;
  line-height: 1.6;
}
.quick-stats strong {
  display: block;
  margin-top: 8px;
  font-size: 28px;
  font-weight: 550;
  line-height: 1.2;
  letter-spacing: -0.8px;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}
.result-breakdown {
  margin: 0 0 24px;
  padding-top: 19px;
  border-top: 1px solid #86b9dc40;
  font-size: 12px;
  line-height: 1.6;
}
.result-breakdown > div {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 20px;
}
.result-breakdown > div + div {
  margin-top: 10px;
}
.result-breakdown dt {
  flex: 1;
  color: #bfd4e3;
}
.result-breakdown dd {
  min-width: 0;
  max-width: 62%;
  margin: 0;
  font-size: 17px;
  font-weight: 550;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
  text-align: right;
}
.estimate-footnote {
  margin: 0 0 26px;
  max-width: 390px;
  color: #b4cddd;
  font-size: 11px;
  line-height: 1.7;
}
.calculator-next-step {
  margin-top: auto;
}
.scenario-contact {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  min-height: 50px;
  padding: 12px 22px;
  border: 1px solid #c7f0ff;
  border-radius: 9px;
  color: #102d47;
  background: linear-gradient(135deg, #d7f5ff, #9eddee);
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
}
.scenario-contact:hover {
  background: #eafaff;
}
.scenario-contact svg,
#review-inputs svg {
  width: 17px;
  height: 17px;
}
.scenario-privacy {
  margin: 12px 0 0;
  color: #bfd4e3;
  font-size: 11px;
  line-height: 1.6;
}
.results-card :focus-visible {
  outline-color: #9de7ff;
}
.invalid-results {
  margin-bottom: 20px;
  padding: 16px;
  color: #7d4230;
  background: #fff7f0;
  border: 1px solid #e6cbbc;
  border-radius: 8px;
}
.invalid-results p {
  margin: 0 0 10px;
  font-size: 12px;
  line-height: 1.6;
}
#review-inputs {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  padding: 0 12px;
  color: #7d4230;
  background: white;
  border: 1px solid #dab5a3;
  border-radius: 5px;
  font-size: 12px;
}
#review-inputs:hover {
  background: #ffe8d8;
}
.methodology {
  margin: 22px 0 42px;
  border-bottom: 1px solid #d6e4ee;
}
.methodology summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 52px;
  padding-block: 12px;
  list-style: none;
  cursor: pointer;
  font-size: 14px;
  color: #315d78;
}
.methodology summary::-webkit-details-marker {
  display: none;
}
.methodology summary > span {
  font-size: 21px;
}
.methodology[open] summary > span {
  transform: rotate(45deg);
}
.methodology-body {
  max-width: 800px;
  padding-bottom: 14px;
  color: #4c6475;
  font-size: 13px;
  line-height: 1.8;
}
.methodology-body p {
  margin: 0 0 14px;
}
.noscript-notice {
  color: #943d28;
  font-size: 14px;
}
.calculator-page .site-footer {
  width: 100%;
  max-width: none;
  padding: 22px max(40px, calc((100vw - 1080px) / 2));
  margin: 0;
  border-color: #547d9852;
  background: #0d263d;
  color: #bfd4e3;
}
.calculator-page .site-footer a {
  min-height: 44px;
}
.calculator-page .site-footer a:hover {
  color: white;
}
@media (max-width: 900px) {
  .calculator-page main,
  .calculator-page .header-inner {
    width: calc(100% - 56px);
  }
  .input-card,
  .results-card {
    padding: 26px 24px;
  }
  .calculator-layout {
    gap: 18px;
  }
}
@media (max-width: 760px) {
  .calculator-page main,
  .calculator-page .header-inner {
    width: calc(100% - 40px);
  }
  .intro {
    padding-block: 30px 24px;
  }
  .intro h1 {
    font-size: 35px;
    letter-spacing: -1.1px;
  }
  .intro p {
    font-size: 14px;
    max-width: 330px;
  }
  .calculator-layout {
    grid-template-columns: 1fr;
  }
  .input-card,
  .results-card {
    border-radius: 15px;
    padding: 24px 22px;
  }
  .field {
    margin-bottom: 20px;
  }
  .field label {
    font-size: 13px;
  }
  .segmented-control button {
    min-height: 40px;
    min-width: 40px;
  }
  .input-wrap input {
    font-size: 19px;
  }
  .rate-control {
    gap: 18px;
    align-items: center;
  }
  .rate-slider {
    height: 44px;
  }
  .rate-input {
    flex-basis: 90px;
  }
  .field-explainer summary {
    min-height: 44px;
  }
  .mobile-calculator-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    width: 100%;
    min-height: 46px;
    margin-top: 12px;
    padding: 10px 14px;
    border: 1px solid #c3d7e5;
    border-radius: 8px;
    color: #24445b;
    background: transparent;
    font-size: 13px;
    font-weight: 550;
  }
  .mobile-calculator-link:hover:not(:disabled) {
    background: #edf5fa;
  }
  .mobile-calculator-link:disabled {
    color: #526879;
    border-color: #dce6ed;
    opacity: 0.6;
    cursor: default;
  }
  .results-card .mobile-calculator-link {
    width: auto;
    align-self: flex-end;
    min-height: 44px;
    margin: -8px -8px 4px 0;
    padding: 8px;
    border-color: transparent;
    color: #a9e7f6;
    font-size: 12px;
  }
  .results-card .mobile-calculator-link:hover {
    background: #ffffff0a;
  }
  .profit-hero {
    min-height: 185px;
    flex: initial;
  }
  .quick-stats {
    gap: 20px;
    padding-block: 22px;
  }
  .quick-stats strong {
    font-size: 27px;
  }
  .scenario-contact {
    width: 100%;
  }
  .calculator-page .site-footer {
    padding-inline: 20px;
  }
}
@media (max-width: 370px) {
  .calculator-page main,
  .calculator-page .header-inner {
    width: calc(100% - 32px);
  }
  .intro h1 {
    font-size: 30px;
  }
  .input-card,
  .results-card {
    padding-inline: 18px;
  }
  .field-label-row {
    gap: 8px;
  }
  .field-pair {
    gap: 12px;
  }
  .quick-stats strong {
    font-size: 24px;
  }
}