/* /car-rental-profit-calculator and /car-rental-agreement-template (SER-691). Body class "crl":
   tokens, .pg-head, .pg-sec, .tbl, .inp, .sel, .field, .faq and .rel-card come from base.css;
   page-only rules here. */
.calc { padding: 28px; }
.calc-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px 24px; margin-top: 20px; }
.calc-field label { display: block; margin-bottom: 8px; }
.calc-hint { margin: 6px 0 0; font-size: var(--fs-small); }
.calc-make { max-width: 520px; }
.calc-out { margin-top: 28px; }
.calc-gross { font-size: var(--fs-lead); color: var(--tx); }
.calc-tbl td, .calc-tbl th { font-size: 17px; }
.calc-tbl td { color: var(--tx); font-weight: 700; }
.rate-tbl { min-width: 620px; }
.calc-math p { margin-bottom: 12px; }
.tpl-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 20px; }
.tpl-bar .pg-h3 { margin: 0; }
.tpl-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.tpl-actions .btn { text-decoration: none; }
.tpl-text { margin: 0; padding: 24px; max-height: 70vh; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere; font: 15px/1.6 var(--font-mono); color: var(--tx-2); }
.tpl-text:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (max-width: 600px) {
  .calc { padding: 20px; }
  .tpl-text { padding: 16px; font-size: 14px; }
}