/* Homepage cost calculator (see _012_cost.html); /beta/ uses it too. */
.be {
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 40px;
  align-items: center; margin-bottom: 40px; padding: 32px;
  background: linear-gradient(135deg, rgba(18, 181, 166, .08), rgba(18, 181, 166, 0) 60%), var(--panel);
}
.be-title { font-size: 1.5rem; margin: 0 0 22px; }
.be-field { display: block; padding: 16px 0; border-top: 1px solid var(--border); }
.be-label { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-weight: 600; }
.be-val { font-family: var(--archivo); font-weight: 800; font-size: 1.35rem; color: var(--ok); }
.be-hint { display: block; margin-top: 2px; font-size: .9rem; color: var(--text-muted); }
.be-field input[type="range"] {
  --be-fill: 0%;
  width: 100%; margin: 14px 0 0; height: 28px; background: transparent;
  -webkit-appearance: none; appearance: none; cursor: pointer;
}
.be-field input[type="range"]::-webkit-slider-runnable-track {
  height: 6px; border-radius: 99px;
  background: linear-gradient(90deg, var(--teal) var(--be-fill), rgba(255, 255, 255, .12) var(--be-fill));
}
.be-field input[type="range"]::-moz-range-track { height: 6px; border-radius: 99px; background: rgba(255, 255, 255, .12); }
.be-field input[type="range"]::-moz-range-progress { height: 6px; border-radius: 99px; background: var(--teal); }
.be-field input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; width: 24px; height: 24px; margin-top: -9px; border-radius: 50%;
  background: var(--text); border: 4px solid var(--teal);
}
.be-field input[type="range"]::-moz-range-thumb {
  width: 16px; height: 16px; border-radius: 50%; background: var(--text); border: 4px solid var(--teal);
}
.be-field input[type="range"]:focus-visible { outline: 2px solid var(--teal); outline-offset: 4px; }

.be-result {
  padding: 28px; border-radius: 16px; background: var(--panel-raised); border: 1px solid var(--border);
  text-align: center;
}
.be-big {
  font-family: var(--archivo); font-weight: 800; font-size: clamp(2.8rem, 6vw, 4.2rem);
  line-height: 1; color: var(--text); font-variant-numeric: tabular-nums;
}
.be-big-label {
  margin-top: 8px; font-family: var(--mono); font-size: 11px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--hot);
}
.be-line { margin: 22px 0 20px; color: var(--text-muted); font-size: 1.05rem; }
.be-line b { color: var(--ok); }
.be-cta { width: 100%; }
.be-fine { margin: 16px 0 0; font-size: 12px; color: var(--text-muted); }

@media (max-width: 860px) {
  .be { grid-template-columns: 1fr; gap: 24px; padding: 22px; }
  .be-result { padding: 22px; }
}

/* On the homepage it is a section of its own, not a block above the plan cards. */
.cost { padding: 16px 0 24px; }
.cost .be { margin-bottom: 0; }