/* Page-specific styles for balance-transfer-vs-loan-calculator-app.html.
   Shared layout, colours and components live in brand-shared.css (the
   whole site) and calculator-shared.css (every calculator) — this file
   only holds what's unique to this calculator. The page uses the shared
   single-column layout (.layout-single). */

  /* ---------- balance-transfer-vs-loan-calculator (scoped) ---------- */

  /* The three ways side by side: each way's terms on a line under its
     name (the figures may wrap, so the four columns fit a phone), and the
     cheapest picked out. In "Other loan lengths" the figures keep to their
     own narrow columns. */
  .calc-shell #compareBody .bl-sub { display: block; margin-top: 2px; font-size: var(--text-fine); font-weight: 400; color: var(--ink-soft); }
  .calc-shell #loanLengthBody td { white-space: nowrap; }
  .calc-shell #compareBody tr.is-yours th,
  .calc-shell #compareBody tr.is-yours td,
  .calc-shell #loanLengthBody tr.is-yours th,
  .calc-shell #loanLengthBody tr.is-yours td { background: var(--base-soft); font-weight: 700; }