/* The return calculator. Inputs on the left, the answer on the right, and the
   answer stays on screen while the inputs are being changed. */
.roi-layout { display: grid; gap: var(--s-7); grid-template-columns: minmax(min(300px, 100%), 1fr) minmax(min(320px, 100%), 1fr); align-items: start; }
.roi-inputs .h3 { margin-bottom: var(--s-2); }

.roi-presets { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-bottom: var(--s-5); }
.roi-presets button {
  font: inherit; font-size: var(--t-13); padding: 6px 13px; cursor: pointer;
  background: none; color: var(--ink); border: 1px solid var(--line); border-radius: 999px;
}
.roi-presets button:hover { border-color: var(--accent); color: var(--accent-deep); }

.roi-field { padding: var(--s-3) 0; border-bottom: 1px solid var(--line); }
.roi-field label { display: block; font-weight: 560; font-size: var(--t-14); margin-bottom: 4px; }
.roi-field .unit { color: var(--ink-faint); font-weight: 400; }
.roi-field input {
  width: 100%; max-width: 190px; font: inherit; padding: 8px 11px;
  border: 1px solid var(--line); border-radius: 3px; background: var(--bg); color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.roi-field .help, .roi-cat .help { display: block; color: var(--ink-faint); font-size: var(--t-12); margin: 5px 0 0; }

.roi-cat { padding: var(--s-3) 0; border-bottom: 1px solid var(--line); }
.roi-cat label { display: grid; grid-template-columns: auto 1fr; gap: var(--s-3); cursor: pointer; align-items: start; }
.roi-cat input { margin-top: 4px; width: 16px; height: 16px; accent-color: var(--accent); }
.roi-cat em { font-style: normal; color: var(--accent-deep); font-size: var(--t-13); white-space: nowrap; }

/* The answer follows you down the inputs on a wide screen. */
.roi-out { position: sticky; top: calc(var(--header-h) + var(--s-4)); }
.roi-headline { border-top: 3px solid var(--accent); padding: var(--s-4) 0 var(--s-5); }
.roi-headline .k { display: block; font-size: var(--t-12); text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-soft); }
.roi-headline b { display: block; font-size: var(--t-46); line-height: 1.05; letter-spacing: -0.028em; font-variant-numeric: tabular-nums; }
.roi-headline b.pos { color: var(--good); }
.roi-headline b.neg { color: var(--bad); }
.roi-headline .sub { display: block; margin-top: var(--s-2); }

.roi-figures { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--line); border: 1px solid var(--line); margin: 0 0 var(--s-5); }
.roi-figures > div { background: var(--bg); padding: var(--s-3) var(--s-4); }
.roi-figures dt { font-size: var(--t-12); color: var(--ink-soft); text-transform: uppercase; letter-spacing: 0.05em; }
.roi-figures dd { margin: 2px 0 0; font-size: var(--t-19); font-weight: 620; font-variant-numeric: tabular-nums; }

.roi-split h3 { font-size: var(--t-14); margin-bottom: var(--s-3); }
.roi-split table { width: 100%; }
.roi-split td { padding: var(--s-2) 0; border-bottom: 1px solid var(--line); font-size: var(--t-14); }
.roi-split td.n { text-align: right; font-variant-numeric: tabular-nums; }

@media (max-width: 900px) {
  .roi-layout { grid-template-columns: 1fr; gap: var(--s-6); }
  .roi-out { position: static; }
  .roi-headline b { font-size: var(--t-31); }
}
.roi-split th { text-align: left; font-weight: 400; padding: var(--s-2) 0; border-bottom: 1px solid var(--line); font-size: var(--t-14); }
.roi-split tr:nth-child(3) th { font-weight: 660; }

/* ---- diligence packet -------------------------------------------------- */
.dd-grid { display: grid; gap: var(--s-4); grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.dd-grid label { display: block; font-weight: 560; font-size: var(--t-14); margin-bottom: 4px; }
.dd-grid input, .dd-grid select {
  width: 100%; font: inherit; padding: 9px 11px; border: 1px solid var(--line);
  border-radius: 3px; background: var(--bg); color: var(--ink);
}
.dd-form .h3 { border-top: 1px solid var(--line); padding-top: var(--s-5); }
.dd-form .h3:first-of-type { border-top: 0; padding-top: 0; }

.packet h2 {
  font-size: var(--t-19); margin: var(--s-6) 0 var(--s-3);
  padding-top: var(--s-4); border-top: 1px solid var(--line);
}
.packet h2:first-child { border-top: 0; padding-top: 0; margin-top: 0; }
.packet p { max-width: 70ch; margin: 0 0 var(--s-3); }
.packet ul { max-width: 70ch; color: var(--ink-soft); }
.packet li { margin-bottom: var(--s-2); }
.packet table { width: 100%; margin: var(--s-4) 0; }
.packet th[scope="row"] { text-align: left; font-weight: 560; }

/* Printing is the point: this gets forwarded and read on paper. */
@media print {
  .site-header, .site-footer, .no-print, .assist, .consent, .assist-offer, .to-top { display: none !important; }
  body { background: #fff; color: #000; font-size: 11pt; }
  .packet, .wrap, .wrap-narrow { max-width: none; padding: 0; margin: 0; }
  .packet h2 { break-after: avoid; page-break-after: avoid; }
  .packet table { break-inside: avoid; page-break-inside: avoid; }
  a[href^="/"]::after, a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; color: #555; }
  .packet-head { border-bottom: 2px solid #000; padding-bottom: 8pt; margin-bottom: 12pt; }
}