/* ==========================================================================
   ROI calculator page only. Loaded after styles.css on roi.html.
   Template tokens only. Inputs on paper, results on ink.
   ========================================================================== */

/* Audience selector ------------------------------------------------------ */
.nr-aud {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: .5rem;
  padding: .375rem;
  border-radius: 999px;
  background-color: rgba(37, 37, 37, 0.1);
}
.nr-aud_btn {
  appearance: none; border: 0; cursor: pointer;
  font-family: var(--typography-font-label);
  font-size: 12px; letter-spacing: .06em; text-transform: uppercase;
  padding: .5rem 1rem; border-radius: 999px;
  background-color: transparent;
  color: rgba(37, 37, 37, 0.62);
  transition: background-color .2s, color .2s;
}
.nr-aud_btn:hover { color: var(--color-base-base-dark-100); }
.nr-aud_btn.is-active {
  background-color: var(--color-base-base-dark-100);
  color: var(--color-base-base-light-100);
}

/* Calculator layout ------------------------------------------------------ */
.roi-calc_grid {
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  align-items: start;
  grid-column-gap: var(--layout-grid--gutter, 1.5rem);
  grid-row-gap: var(--layout-grid--gutter, 1.5rem);
}
.roi-calc_sliders {
  display: flex; flex-direction: column;
  grid-row-gap: var(--spacing--32); row-gap: var(--spacing--32);
}
.roi-calc_slider { display: flex; flex-direction: column; row-gap: var(--spacing--8); }
.roi-calc_slider-top, .roi-calc_slider-bottom { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; }
.roi-calc_range { width: 100%; accent-color: var(--color-base-base-dark-100); }
.pricing_card.is-inverted .roi-calc_range { accent-color: var(--color-base-accent-primary); }
.roi-calc_stat { display: flex; flex-direction: column; row-gap: var(--spacing--4); }
.roi-calc_stats { display: flex; flex-direction: column; row-gap: var(--spacing--24); }

.roi-calc_results-top { display: flex; flex-direction: column; align-items: flex-start; row-gap: .25rem; }

/* Three-year table ------------------------------------------------------- */
.nr-table-wrap { margin-top: var(--spacing--48, 3rem); overflow-x: auto; }
.nr-table { width: 100%; border-collapse: collapse; min-width: 34rem; }
.nr-table th, .nr-table td {
  text-align: right; padding: .875rem 1rem;
  border-bottom: 1px solid rgba(37, 37, 37, 0.14);
  font-variant-numeric: tabular-nums;
}
.nr-table thead th {
  font-family: var(--typography-font-label);
  font-size: 11px; letter-spacing: .08em; text-transform: uppercase; font-weight: 400;
  color: rgba(37, 37, 37, 0.58);
}
.nr-table tbody th { text-align: left; font-weight: 500; }
.nr-table tbody td { font-size: 1.125rem; }
.nr-table tr:last-child th, .nr-table tr:last-child td { border-bottom: 0; }
.nr-table .is-total { font-weight: 600; }

.nr-locked { filter: blur(7px); user-select: none; }
.is-revealed .nr-locked { filter: none; }

/* Lead form -------------------------------------------------------------- */
.nr-gate {
  margin-top: var(--spacing--48, 3rem);
  padding: var(--spacing--32);
  border-radius: var(--radius-general-default);
  background-color: var(--color-tokens-background-lift);
  display: flex; flex-direction: column; gap: var(--spacing--24);
}
.is-revealed .nr-gate { display: none; }
.nr-gate_fields { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.nr-field { display: flex; flex-direction: column; gap: .375rem; }
.nr-field input {
  width: 100%; padding: .875rem 1rem;
  border: 1px solid rgba(37, 37, 37, 0.18);
  border-radius: .625rem;
  background-color: var(--color-base-base-light-100);
  color: var(--color-base-base-dark-100);
  font-family: var(--typography-font-body); font-size: 1rem;
}
.nr-field input:focus { outline: 2px solid rgba(37, 37, 37, 0.4); outline-offset: 1px; }
.nr-gate_submit {
  appearance: none; border: 0; cursor: pointer; align-self: flex-start;
  font-family: var(--typography-font-button, var(--typography-font-body));
  font-size: 1rem; font-weight: 500;
  padding: .875rem 1.5rem; border-radius: var(--radius-ui-button-base);
  background-color: var(--color-base-base-dark-100);
  color: var(--color-base-base-light-100);
}
.nr-gate_submit:hover { background-color: var(--color-base-forest); }

.nr-note { margin-top: var(--spacing--24); max-width: 60ch; }
.nr-disclaimer { margin-top: var(--spacing--48, 3rem); display: flex; flex-direction: column; gap: .5rem; max-width: 72ch; }

.roi-calc_cta {
  display: flex; flex-direction: column; align-items: flex-start;
  row-gap: var(--spacing--24);
  margin-top: var(--spacing--80);
  max-width: var(--width--8-columns, 40rem);
}

/* Responsive ------------------------------------------------------------- */
@media screen and (max-width: 991px) {
  .roi-calc_grid { grid-template-columns: minmax(0, 1fr); }
  .nr-gate_fields { grid-template-columns: minmax(0, 1fr); }
}
@media screen and (max-width: 767px) {
  .nr-aud { border-radius: var(--radius-general-default); }
  .nr-aud_btn { flex: 1 1 auto; text-align: center; }
  .nr-table th, .nr-table td { padding: .75rem .625rem; }
  .nr-table tbody td { font-size: 1rem; }
}

/* Three chips of unequal length wrap two-then-one on a phone, which reads as a
   mistake. Stack them instead so the group is a clean segmented list. ------ */
@media screen and (max-width: 600px) {
  .nr-aud { flex-direction: column; align-items: stretch; border-radius: 1.25rem; }
  .nr-aud_btn { width: 100%; }
}

/* Gate submit outcome, announced politely. The gate posts to HubSpot and only
   reveals years two and three once the enquiry is actually recorded. */
.nr-gate_status { margin: 0 0 .75rem; font-size: .9375rem; line-height: 1.45; }
.nr-gate_status.is-ok { color: var(--color-base-base-dark-100); font-weight: 500; }
.nr-gate_status.is-error { color: var(--color-base-ui-error, #b4453c); }
.nr-gate_status.is-pending { color: rgba(37, 37, 37, 0.72); }
.nr-gate_submit[disabled] { opacity: .6; cursor: default; }

/* 29. The scroller carried a hairline under it that read as a stray rule
   between two sections. */
.section_logos-marquee { border-bottom: 0; }