/*
  The two free tools: the missed-call cost calculator and the call forwarding guide. The
  guide's numbered step cards are .steps.rows in site.css. Text and inputs come from
  legal.css, which these pages also load. Colours come only from design-tokens.css.
*/
.prose > .calc-grid,
.prose > .cards {
  max-width: none;
}
.calc-grid {
  display: grid;
  gap: 32px;
  align-items: start;
}
.calc-grid h2 {
  margin-bottom: 12px;
  font-size: clamp(1.75rem, 1.2rem + 1.6vw, 2.25rem);
}
.calc-note {
  margin-bottom: 16px;
  font-size: 0.9375rem;
  color: var(--quiet);
}
.calc-fields {
  gap: 20px;
  padding: 32px;
}
.calc-results {
  padding: 32px;
  background: var(--accent-mint);
}
.calc-results h2 {
  margin-bottom: 4px;
}
.calc-figures > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding-block: 12px;
  border-top: 3px solid var(--text);
}
.calc-figures > div:last-of-type {
  border-bottom: 3px solid var(--text);
}
.calc-figures dt {
  font-weight: 700;
}
.calc-figures dd {
  font: 400 2rem/1.1 var(--display);
  text-align: right;
}
.calc-compare {
  margin-top: 16px;
  padding: 12px 16px;
  border: 3px solid var(--text);
  border-radius: 14px;
  background: var(--accent-yellow);
  font-weight: 700;
}
.cards {
  display: grid;
  gap: 24px;
  margin-right: 8px;
}
.cards h3 {
  margin-bottom: 0;
}
@media (min-width: 700px) {
  .cards {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (min-width: 900px) {
  .calc-grid {
    grid-template-columns: 1fr 1fr;
    gap: 48px;
  }
}
.cards + p {
  margin-top: 32px;
}