/* Next Truck tools (2026-11-06): the payback check (/hvac/payback/) and the 3 mistakes
   (/hvac/mistakes/). Loaded after nt-chrome.css and nt-level.css on those two pages only.
   The payback check shows break-even, never a forecast: how few unsold estimates have to come
   back to cover the investment. The sample shop is the default state, so a phone reader gets
   the point without typing. Print: the light edition, no header, no ink bands. */

/* The payback check */
.calc { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: 16px; margin-top: 46px; align-items: start; }
.calc .in { padding: 26px; }
.ctl { padding: 18px 0; border-top: 1px solid var(--hair-2); }
.ctl:first-child { padding-top: 0; border-top: 0; }
.ctl-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.ctl label { display: block; font: 700 1rem/1.3 var(--head); letter-spacing: -.015em; color: var(--ink); }
.ctl label em { font-style: normal; font-weight: 400; color: var(--muted); }
.ctl small { display: block; margin-top: 4px; font-size: .86rem; line-height: 1.45; color: var(--muted); }
.ctl .num { display: inline-flex; flex: none; align-items: center; gap: 4px; font: 700 1.1rem var(--head); color: var(--ink); }
.ctl .num input { width: 7.5ch; min-height: 42px; padding: 4px 10px; border: 1px solid var(--hair-2); border-radius: 11px; background: #fff; text-align: right; font: 700 1.05rem var(--head); color: var(--ink); -moz-appearance: textfield; }
.ctl .num input::-webkit-outer-spin-button, .ctl .num input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.ctl .num input:focus { border-color: var(--ember); outline: 0; box-shadow: 0 0 0 3px rgba(255, 90, 0, .18); }
.ctl input[type="range"] { display: block; width: 100%; height: 28px; margin: 12px 0 0; accent-color: var(--ember); cursor: pointer; }
.calc-fine { margin-top: 18px; font-size: .84rem; line-height: 1.5; color: var(--muted); }
.calc-fine a { color: var(--ember-text); text-underline-offset: 3px; }

.res { position: relative; padding: 26px; border-radius: var(--r-card); background: radial-gradient(80% 110% at 100% 0, rgba(255, 90, 0, .42), transparent 70%), var(--ink); color: var(--on-ink); }
.res .k { font: 500 .7rem var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--on-ink-2); }
.res .big { margin-top: 10px; font: 700 clamp(2.5rem, 4.4vw, 3.8rem)/1 var(--head); letter-spacing: -.045em; color: var(--on-ink); font-variant-numeric: tabular-nums; }
.res .sub { margin-top: 10px; max-width: 30em; font-size: .97rem; line-height: 1.5; color: var(--on-ink-2); }
.res-rows { margin-top: 22px; border-top: 1px solid var(--on-ink-hair); }
.res-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 20px; align-items: start; padding: 14px 0; border-bottom: 1px solid var(--on-ink-hair); }
.res-row[hidden] { display: none; }
.res-row b { font: 700 1rem/1.3 var(--head); letter-spacing: -.015em; color: var(--on-ink); }
.res-row span { grid-column: 1; font-size: .88rem; line-height: 1.45; color: var(--on-ink-2); }
.res-row .v { grid-column: 2; grid-row: 1 / span 2; align-self: center; font: 700 1.3rem/1.1 var(--head); letter-spacing: -.03em; color: var(--on-ink); text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.res-row.hero-row .v { font-size: 1.75rem; color: var(--amber); }
.res .floor { display: none; margin-top: 16px; padding: 13px 15px; border-radius: 15px; background: rgba(255, 255, 255, .08); box-shadow: inset 0 0 0 1px var(--on-ink-hair); font-size: .92rem; line-height: 1.5; color: var(--on-ink); }
.res.thin .floor { display: block; }
.res .guar { margin-top: 18px; padding: 15px 17px; border-radius: 17px; background: var(--ember); color: var(--ink); font: 400 .94rem/1.5 var(--sans); }
.res .guar b { display: block; margin-bottom: 4px; font: 700 1.02rem/1.3 var(--head); letter-spacing: -.015em; }
.res .guar a { color: inherit; text-underline-offset: 3px; }
.calc-note { max-width: 52em; margin: 26px auto 0; text-align: center; font-size: .95rem; line-height: 1.55; color: var(--muted); }
.calc-note b { color: var(--ink); }

/* The 3 mistakes */
.mk { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 6vw, 80px); align-items: start; scroll-margin-top: 100px; }
.mk-n { font: 500 .74rem var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ember-text); }
.mk h2 { margin-top: 12px; font-size: clamp(1.9rem, 3.3vw, 2.8rem); }
.mk .body { margin-top: 16px; max-width: 32em; font-size: 1.06rem; line-height: 1.6; color: var(--muted); }
.story { margin-top: 20px; padding: 14px 18px; border-left: 3px solid var(--ember); border-radius: 0 16px 16px 0; background: rgba(255, 255, 255, .6); box-shadow: inset 0 0 0 1px var(--hair); font-size: 1rem; line-height: 1.5; color: var(--text); }
.dotted .story { background: #fff; }
.story small { display: block; margin-top: 8px; font: 500 .66rem/1.3 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.cost { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 20px; }
.cost > div { display: flex; flex-direction: column; padding: 16px 17px 15px; border-radius: 18px; background: #fff; box-shadow: 0 0 0 1px var(--hair); }
.cost .n { font: 700 2.1rem/1 var(--head); letter-spacing: -.04em; color: var(--ink); }
.cost .n small { margin-left: 5px; font: 500 .86rem var(--sans); letter-spacing: 0; color: var(--muted); }
.cost b { display: block; margin-top: 8px; font: 700 .98rem/1.3 var(--head); letter-spacing: -.015em; color: var(--ink); }
.cost p { margin-top: 5px; font-size: .86rem; line-height: 1.45; color: var(--muted); }
.cost cite { display: block; margin-top: auto; padding-top: 10px; font-style: normal; font-size: .74rem; line-height: 1.4; }
.cost cite a { color: var(--ember-text); text-underline-offset: 3px; }
.fix .in { padding: 26px; }
.fix-k { font: 500 .7rem var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ember-text); }
.fix ol { counter-reset: f; margin-top: 12px; border-top: 1px solid var(--hair-2); }
.fix li { counter-increment: f; display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--hair-2); font-size: .95rem; line-height: 1.5; color: var(--muted); }
.fix li::before { content: counter(f, decimal-leading-zero); padding-top: 3px; font: 600 .72rem/1.6 var(--mono); color: var(--ember-text); }
.fix li b { display: block; margin-bottom: 3px; font: 700 1rem/1.3 var(--head); letter-spacing: -.015em; color: var(--ink); }
.fix li a { color: var(--ember-text); text-underline-offset: 3px; }
.txt { margin-top: 16px; padding: 12px 15px; border-radius: 16px 16px 16px 5px; background: var(--paper-2); box-shadow: inset 0 0 0 1px var(--hair); font-size: .93rem; line-height: 1.45; color: var(--ink); }
.txt small { display: block; margin-bottom: 6px; font: 500 .66rem/1.3 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.txt b { font-weight: 600; color: var(--ember-text); }
.fix .fine { margin-top: 12px; line-height: 1.5; color: var(--muted); }
.why { max-width: 760px; }
.why h2 { font-size: clamp(1.9rem, 3.3vw, 2.8rem); }
.why p { margin-top: 16px; font-size: 1.08rem; line-height: 1.6; color: var(--muted); }
.why p b { color: var(--ink); font-weight: 600; }
.hand { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(28px, 6vw, 80px); align-items: center; }
.hand h2 { font-size: clamp(1.9rem, 3.3vw, 2.8rem); }
.hand .body { margin-top: 16px; font-size: 1.06rem; line-height: 1.6; color: var(--muted); }
.hand .actions { justify-content: flex-start; margin-top: 24px; }
.hand ul { margin-top: 4px; border-top: 1px solid var(--hair-2); }
.hand li { display: grid; grid-template-columns: 90px minmax(0, 1fr); gap: 14px; padding: 13px 0; border-bottom: 1px solid var(--hair-2); font-size: .95rem; line-height: 1.45; color: var(--muted); }
.hand li small { padding-top: 2px; font: 500 .68rem/1.4 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ember-text); }
.hand li b { display: block; font: 700 .98rem/1.3 var(--head); letter-spacing: -.015em; color: var(--ink); }
.print-only { display: none; }

@media (max-width: 1020px) {
  .calc, .mk, .hand { grid-template-columns: 1fr; }
  .mk { scroll-margin-top: 80px; }
}
@media (max-width: 720px) {
  .cost { grid-template-columns: 1fr; }
  .res { padding: 22px 18px; }
  .res-row .v { font-size: 1.15rem; }
  .res-row.hero-row .v { font-size: 1.5rem; }
  .hand li { grid-template-columns: 1fr; gap: 4px; }
}

/* Print: the light edition for the counter */
@media print {
  @page { size: letter; margin: 14mm 14mm 16mm; }
  html, body { background: #fff !important; color: #111 !important; font-size: 10.5pt; }
  .top, .foot, .close, .ph-mark, .actions, .btn, .skip, .pause, dialog, #tk-consent-banner { display: none !important; }
  .ph, .ph-dark { padding: 0 0 14pt !important; background: #fff !important; color: #111 !important; text-align: left; }
  .ph-dark h1, .ph-dark .lede, .ph h1 { color: #111 !important; margin-inline: 0; max-width: none; font-size: 22pt; }
  .ph-dark h1 em { color: #b83f00 !important; }
  .ph .lede { margin-inline: 0; max-width: none; font-size: 11pt; }
  .tag { background: #fff !important; border-color: #999 !important; color: #444 !important; }
  .sec { padding: 12pt 0 !important; break-inside: avoid; }
  .dotted { background: #fff !important; }
  .wrap { width: 100%; }
  .mk { grid-template-columns: 1fr 1fr; gap: 18pt; }
  .mk h2, .why h2, .hand h2 { font-size: 15pt; }
  .mk .body, .why p, .hand .body { font-size: 10pt; }
  .mat { padding: 0; background: #fff; box-shadow: none; }
  .mat > .in { box-shadow: 0 0 0 1px #999; }
  .fix .in { padding: 12pt; }
  .cost > div, .story, .txt { box-shadow: 0 0 0 1px #999; background: #fff; }
  .cost .n { font-size: 16pt; }
  .fix li, .cost p, .txt { font-size: 9.5pt; }
  .res { background: #fff !important; color: #111 !important; box-shadow: 0 0 0 1px #999; }
  .res .k, .res .sub, .res-row span { color: #444 !important; }
  .res .big, .res-row b, .res-row .v { color: #111 !important; }
  .res .guar { background: #fff; box-shadow: 0 0 0 1px #999; }
  a { color: inherit; text-decoration: none; }
  cite a::after { content: ""; }
  .print-only { display: block; margin-top: 16pt; padding-top: 8pt; border-top: 1px solid #999; font-size: 9pt; color: #444; }
  [data-rv] { opacity: 1 !important; transform: none !important; }
}

/* Under 40 estimates: the floor message leads and the rows fade, so a thin list never reads as a sale */
.res .floor { order: 0; }
.res.thin .res-rows, .res.thin .guar { opacity: .38; }
.res.thin .big { color: var(--on-ink-2); }

/* The HVAC owners' hub: the engine-filled guide list */
.hub { margin-top: 40px; }
.hub-guides { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.hub-guides li { display: flex; flex-direction: column; gap: 6px; padding: 20px 22px; border-radius: var(--r-card); background: #fff; box-shadow: 0 0 0 1px var(--hair); }
.hub-guides li a { font: 700 1.08rem/1.3 var(--head); letter-spacing: -.02em; color: var(--ink); text-decoration: none; }
.hub-guides li a:hover { color: var(--ember-text); }
.hub-guides li span { font-size: .92rem; line-height: 1.5; color: var(--muted); }
@media (max-width: 720px) { .hub-guides { grid-template-columns: 1fr; } }