/* Treadstone Law — Sprint CS / W3a. Styles for the standalone calculator-page
 * template (scripts/calculators/template.py + hub.py). Loaded after
 * styles.css on every generated calculator page and on calculators.html.
 *
 * .cs-btn / .cs-btn--secondary / .cs-btn--block are W1's, defined once in
 * styles.css (SPRINT-CS-SPEC.md "Shared names") — this file only USES those
 * class names on the call-block CTAs below, it does not redefine them. */

/* Fix (Sprint CS / W3a): the new template's extra short sections (worked
 * example, key terms, related, embed, last-updated line...) exposed the same
 * dead-air bug decision 1 diagnosed and fixed for the 9 service pages
 * (default section{padding:108px 0} between consecutive SHORT sections reads
 * as a huge blank gap) -- calculator pages weren't in that fix's scope, so
 * this reproduces it here, scoped to .cs-calc-page only. */
body.cs-calc-page section{padding:56px 0}
@media(max-width:980px){body.cs-calc-page section{padding:44px 0}}

/* Quick answer callout, right under the lede in the hero */
.cs-quickanswer{max-width:640px;margin:0 auto 22px;padding:16px 20px;background:var(--tsl-surface-2);border:1px solid var(--border-strong);border-radius:12px;font-size:14.5px;color:var(--text-strong);text-align:left;line-height:1.6}
.cs-quickanswer b{color:var(--tsl-crimson)}

/* Call block — compact (right after the result) and full (near the end) */
.cs-callblock{margin-top:22px;max-width:640px}
.cs-callblock--compact{padding:20px 22px;border:1px solid var(--border-strong);border-radius:14px;background:var(--bg-card)}
.cs-callblock-line{margin:0;font-size:14.5px;line-height:1.6;color:var(--text-strong)}
.cs-callblock-line b{font-family:var(--font-display);font-weight:500;font-size:16px;display:block;margin-bottom:4px;color:var(--tsl-ink)}
.cs-callblock-ctas{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}
.cs-callblock-fine{margin:12px 0 0;font-size:12px;color:var(--text-muted);line-height:1.5}
.cs-callblock--full .row{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}
.cs-callblock--full .cs-callblock-fine{max-width:520px;margin:14px auto 0;text-align:center}

/* "Ask about your result" message box (SPRINT-CS-SPEC.md decision 7) — the
 * static fallback form scripts/calculators/template.py's ask_result_block()
 * renders right after the compact call block. Its own minimal 3-field
 * layout (name/email/phone), matching mockups-2026-09-23/frag-f.html —
 * deliberately not the shared quick-lead.js widget's multi-step markup, see
 * ask_result_block()'s docstring and cs-ask-result.js for why. */
.cs-askresult{margin-top:12px;max-width:640px;padding:20px 22px;border:1px solid var(--border-strong);border-radius:14px;background:var(--bg-card)}
.cs-askresult>b{display:block;font-family:var(--font-display);font-weight:500;font-size:16px;margin-bottom:4px;color:var(--tsl-ink)}
.cs-askresult>p{margin:0 0 14px;font-size:13px;color:var(--text-muted);line-height:1.5}
/* Sprint CS verify-fixer (2026-09-23): First/Last are two fields side by
 * side (matching styles.css's .ql-row, the same pattern quick-lead.js's
 * TSLAsk.mount() already uses) so the box satisfies api/contact.js's
 * first+last contract — see ask_result_block()'s docstring in template.py. */
.cs-askresult-row{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.cs-askresult-row .cs-askresult-field{margin-bottom:0}
.cs-askresult-field{margin-bottom:10px}
.cs-askresult-field label{display:block;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--text-muted);margin-bottom:5px}
.cs-askresult-req{color:var(--tsl-crimson);text-transform:none;font-weight:600;letter-spacing:0;font-size:10.5px}
.cs-askresult-field input{width:100%;box-sizing:border-box;background:var(--tsl-surface-2);border:1px solid var(--border-strong);border-radius:9px;padding:10px 13px;font-family:var(--font-body);font-size:14.5px;color:var(--text-strong)}
.cs-askresult-field input:focus{outline:none;border-color:var(--tsl-crimson);box-shadow:0 0 0 3px rgba(179,32,37,.12)}
.cs-askresult-field input.err{border-color:var(--tsl-crimson)}
.cs-askresult-consent{display:flex;gap:10px;align-items:flex-start;font-size:12px;color:var(--text-muted);line-height:1.5;margin:2px 0 14px}
.cs-askresult-consent input{margin-top:2px;width:16px;height:16px;flex:none;accent-color:var(--tsl-crimson)}
.cs-askresult-err{margin:0 0 10px;font-size:12.5px;color:var(--tsl-crimson);font-weight:600}
.cs-askresult-form .cs-btn{width:100%}
.cs-askresult-done{margin:0;font-size:13.5px;font-weight:600;color:var(--tsl-green)}

/* Sprint CS verify-fixer (2026-09-23): visually put "Book a 20-min call"
 * first/left (primary) in the phone-only sticky bar, matching
 * SPRINT-CS-SPEC.md decision 7 and frag-f.html's approved mockup, while it
 * stays SECOND in the actual markup — see mbar()'s docstring in
 * template.py for why (quick-lead.js's sitewide `.mbar a:first-child`
 * phone enhancement must keep landing on the "Message us" link, not this
 * one). .mbar is already `display:flex` under 980px (styles.css), so
 * `order` alone reorders it with no layout change needed here. */
.cs-mbar-book{order:-1}
/* Fix (Sprint CS verify-fixer, 2026-09-23): "Book a 20-min call →" (163px of
 * text, measured) overflows its ~138px button box at 320px and ~158px at
 * 360px — verified live on franchise-disclosure-calculator-ontario.html,
 * text crowding into "Message us". Swap to the shorter label (mbar() in
 * template.py emits both spans) only under that width, instead of
 * shrinking the font sitewide to an illegible size.
 *
 * Adversarial fixer, Sprint CS round 3 (2026-09-24): this rule's own
 * "Fits with no change at 375px+" claim was wrong — the .cs-mbar-book
 * button is one of two `flex:1` items sharing the .mbar row, so its box
 * only reaches the full 163px the text needs once the viewport is wide
 * enough, not right at 375px. Re-measured live (headless Chromium, a
 * Range over the visible label's own text so a shrunk flex item's
 * overflowing-but-unwrapped content is caught, not just its box): the
 * text is still clipping against the button's rounded edge up to ~397px,
 * only clearing it cleanly from ~400px on. Moved the cutoff to 429px, a
 * safety margin above that measured true crossover to absorb the ±few-px
 * render differences a real phone's font hinting can produce, verified
 * clean below. */
.cs-mbar-book .cs-mbar-short{display:none}
@media(max-width:429px){
  .cs-mbar-book .cs-mbar-full{display:none}
  .cs-mbar-book .cs-mbar-short{display:inline}
}

/* Worked example */
.cs-worked{margin-top:6px;max-width:560px}
/* overflow:hidden here is not a visual clip (this row only ever holds a
 * wrapped <span> label + a <b> figure, nothing is actually cut off) — it's
 * the fix for a Chromium flex quirk: a shrunk flex item still contributes
 * its own pre-shrink "hypothetical" width to the container's scrollable
 * overflow, so a long label (e.g. "Amount HST applies to (the whole
 * assignment price)" on assignment-sale-hst-calculator-ontario.html) can
 * open real, invisible horizontal scroll room at narrow widths (confirmed
 * scrollWidth 324 vs a 320px viewport) even though every child's own
 * rendered box stays inside this row. overflow:hidden discards that phantom
 * region without changing any visible position (verified: row/label/figure
 * rects identical before and after). Adversarial fixer, Sprint CS round 5. */
.cs-worked-row{display:flex;align-items:baseline;justify-content:space-between;gap:14px;padding:8px 0;font-size:13.5px;color:var(--text-muted);border-bottom:1px dashed var(--border);overflow:hidden}
.cs-worked-row b{font-weight:600;color:var(--text-strong);font-variant-numeric:tabular-nums}
.cs-worked-row.cs-worked-reb b{color:var(--tsl-green)}
/* Adversarial fixer, Sprint CS round 7 (2026-09-24): same Chromium
 * flex-shrink phantom-width quirk as .cs-worked-row above (see its own
 * comment) -- reproduces on this sibling row too, whichever page's total
 * label is long enough at 320px (confirmed on
 * equalization-payment-calculator-ontario.html: "Spouse A pays half the
 * $665,000 difference" -- scrollWidth 321 vs a 320px viewport, JS on and
 * off, with no rendered child box actually outside the viewport -- the
 * phantom region only shows up in the document's scrollable overflow).
 * .cs-worked-row already carries this fix; .cs-worked-total never got it in
 * round 5 because that pass's own repro page didn't happen to have a long
 * enough total-row label to trigger it. Same discard-the-phantom-region
 * fix, verified the same way: overflow:hidden with the row/label/figure
 * rects identical before and after. */
.cs-worked-total{display:flex;align-items:baseline;justify-content:space-between;gap:14px;padding:13px 0 0;font-size:14.5px;font-weight:600;overflow:hidden}
.cs-worked-total b{font-family:var(--font-display);font-weight:500;font-size:24px;font-variant-numeric:tabular-nums}

/* Key terms */
.cs-terms{display:grid;grid-template-columns:repeat(2,1fr);gap:18px 28px;max-width:820px;margin:0 auto}
.cs-term b{display:block;font-family:var(--font-display);font-weight:500;font-size:15.5px;margin-bottom:4px;color:var(--tsl-ink)}
.cs-term span{font-size:13.5px;color:var(--text-muted);line-height:1.55}
@media(max-width:700px){.cs-terms{grid-template-columns:1fr}}

/* Related articles / calculators */
.cs-related{margin:0 0 28px}
.cs-related h3{font-family:var(--font-display);font-weight:500;font-size:16px;margin:0 0 10px;color:var(--tsl-ink)}
.cs-related ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.cs-relgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.cs-relcard{display:block;padding:14px 16px;border:1px solid var(--border);border-radius:12px;text-decoration:none;color:inherit}
.cs-relcard b{display:block;font-family:var(--font-display);font-weight:500;font-size:14.5px;margin-bottom:3px}
.cs-relcard span{font-size:12.5px;color:var(--text-muted)}
@media(max-width:700px){.cs-relgrid{grid-template-columns:1fr}}

/* Hub tiles */
.cs-tilegrid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.cs-tile{display:block;padding:16px 18px;border:1px solid var(--border);border-radius:12px;text-decoration:none;color:inherit}
.cs-tile b{display:block;font-family:Fraunces,Georgia,serif;font-weight:500;font-size:16.5px;margin-bottom:4px}
.cs-tile span{font-size:13.5px;color:var(--text-muted);line-height:1.5}
@media(max-width:700px){.cs-tilegrid{grid-template-columns:1fr}}

/* ============================================================
 * Sprint CS / W3 batch 4 — three new business calculator widgets.
 * Shared visual language with the existing .ltt-* widget (styles.css) —
 * card, field, switch and row treatments — but scoped under new prefixes
 * (.fdc- / .vtb- / .bzv-) since styles.css belongs to W1, not W3, and these
 * three are new components, not edits to the LTT widget. ============= */

/* ---- Franchise Disclosure & Cancellation Date Checker (.fdc-) ---- */
.fdc-calc{background:var(--bg-card);border:1px solid var(--border-strong);border-radius:var(--radius);box-shadow:var(--shadow-card);padding:28px 30px;max-width:640px}
.fdc-in{display:flex;gap:22px;flex-wrap:wrap;margin-bottom:16px}
.fdc-field{flex:1 1 220px;min-width:0}
.fdc-field label{display:block;font-size:11.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--text-muted);margin-bottom:8px}
.fdc-date{width:100%;box-sizing:border-box;background:var(--tsl-surface-2);border:1px solid var(--border-strong);border-radius:9px;padding:10px 13px;font-family:var(--font-body);font-size:15px;font-weight:600;color:var(--text-strong)}
.fdc-date:focus{outline:none;border-color:var(--tsl-crimson);box-shadow:0 0 0 3px rgba(179,32,37,.12)}
.fdc-switches{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:18px}
.fdc-sw{display:inline-flex;align-items:center;gap:9px;background:var(--tsl-surface-2);border:1px solid var(--border-strong);border-radius:var(--radius-pill);padding:9px 15px;font-family:var(--font-body);font-size:12.5px;font-weight:600;color:var(--text-muted);cursor:pointer;transition:all var(--dur-fast)}
.fdc-sw i{width:26px;height:15px;border-radius:var(--radius-pill);background:var(--tsl-line-2);position:relative;transition:background var(--dur-fast);flex:none}
.fdc-sw i::after{content:"";position:absolute;top:2px;left:2px;width:11px;height:11px;border-radius:50%;background:#fff;transition:transform var(--dur-fast)}
.fdc-sw.on{border-color:var(--tsl-gold);color:var(--text-strong)}
.fdc-sw.on i{background:var(--tsl-green)}
.fdc-sw.on i::after{transform:translateX(11px)}
.fdc-sw:focus-visible{outline:2px solid var(--tsl-crimson);outline-offset:2px}
.fdc-row{display:flex;align-items:baseline;justify-content:space-between;gap:14px;padding:8px 0;font-size:13px;color:var(--text-muted);border-bottom:1px dashed var(--border)}
.fdc-row b{font-weight:600;color:var(--text-strong);text-align:right}
.fdc-row.fdc-ok b{color:var(--tsl-green)}
.fdc-row.fdc-bad b{color:var(--tsl-crimson)}
.fdc-row.fdc-sub{border-top:1px solid var(--border-strong);margin-top:4px;padding-top:12px}
.fdc-warn{font-size:13.5px;color:var(--text-muted);padding:10px 0}
.fdc-depositbox{background:#f0f7f2;border:1px solid var(--tsl-green);border-radius:12px;padding:14px 16px;margin-top:14px}
.fdc-depositbox b{display:block;font-family:var(--font-display);font-weight:500;font-size:13.5px;color:var(--tsl-green);margin-bottom:5px}
.fdc-depositbox p{font-size:12.5px;line-height:1.55;color:var(--text-strong);margin:0}
.fdc-cite{display:block;margin-top:7px;font-size:11px;color:var(--text-muted)}
.fdc-disc{font-size:11.5px;color:var(--text-muted);margin-top:14px;line-height:1.5}

/* ---- Vendor Take-Back Payment Schedule (.vtb-) ---- */
.vtb-calc{background:var(--bg-card);border:1px solid var(--border-strong);border-radius:var(--radius);box-shadow:var(--shadow-card);padding:28px 30px;max-width:640px}
.vtb-in{display:flex;gap:18px;flex-wrap:wrap;margin-bottom:16px}
.vtb-field{flex:1 1 160px;min-width:0}
.vtb-field label{display:block;font-size:11.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--text-muted);margin-bottom:8px}
.vtb-optional{text-transform:none;font-weight:500;letter-spacing:0;color:var(--text-muted)}
.vtb-money{display:flex;align-items:center;gap:6px;background:var(--tsl-surface-2);border:1px solid var(--border-strong);border-radius:9px;padding:10px 13px}
.vtb-money span{color:var(--text-muted);font-weight:600}
.vtb-money input{border:none;background:none;font-family:var(--font-body);font-size:16px;font-weight:600;color:var(--text-strong);width:100%;font-variant-numeric:tabular-nums}
.vtb-money input:focus{outline:none}
.vtb-money:focus-within{border-color:var(--tsl-crimson);box-shadow:0 0 0 3px rgba(179,32,37,.12)}
.vtb-pct{max-width:100px}
.vtb-select,.vtb-date{width:100%;box-sizing:border-box;background:var(--tsl-surface-2);border:1px solid var(--border-strong);border-radius:9px;padding:10px 13px;font-family:var(--font-body);font-size:15px;font-weight:600;color:var(--text-strong)}
.vtb-select:focus,.vtb-date:focus{outline:none;border-color:var(--tsl-crimson);box-shadow:0 0 0 3px rgba(179,32,37,.12)}
.vtb-switches{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:18px}
.vtb-sw{display:inline-flex;align-items:center;gap:9px;background:var(--tsl-surface-2);border:1px solid var(--border-strong);border-radius:var(--radius-pill);padding:9px 15px;font-family:var(--font-body);font-size:12.5px;font-weight:600;color:var(--text-muted);cursor:pointer;transition:all var(--dur-fast)}
.vtb-sw i{width:26px;height:15px;border-radius:var(--radius-pill);background:var(--tsl-line-2);position:relative;transition:background var(--dur-fast);flex:none}
.vtb-sw i::after{content:"";position:absolute;top:2px;left:2px;width:11px;height:11px;border-radius:50%;background:#fff;transition:transform var(--dur-fast)}
.vtb-sw.on{border-color:var(--tsl-gold);color:var(--text-strong)}
.vtb-sw.on i{background:var(--tsl-green)}
.vtb-sw.on i::after{transform:translateX(11px)}
/* Adversarial fixer, Sprint CS round 12 (2026-09-24): styles.css's .ltt-total
 * b already carries overflow-wrap:anywhere (added in an earlier round for
 * exactly this reason) but this file's own .vtb-/.bzv-/.ct- result figures
 * never got the same treatment, so a legitimately large-but-real result (or
 * a clamped-but-still-big one, e.g. an astronomical input now capped to
 * Number.MAX_SAFE_INTEGER at the parser -- see vendor-take-back-calc.js/
 * business-value-calc.js/centre-tools.js's num()) had no break opportunity
 * (a digit string has no spaces to wrap at) and pushed its flex row, then
 * the page itself, wider than the viewport with no visible warning.
 * Verified live: before this fix, a single "1e250" typed into
 * vendor-take-back-calculator-ontario.html's principal field alone
 * overflowed the page at 390px; after both this and the parser cap, it
 * does not. */
.vtb-row{display:flex;align-items:baseline;justify-content:space-between;gap:14px;padding:8px 0;font-size:13px;color:var(--text-muted);border-bottom:1px dashed var(--border)}
.vtb-row b{font-weight:600;color:var(--text-strong);font-variant-numeric:tabular-nums;text-align:right;overflow-wrap:anywhere}
.vtb-row.vtb-sub{border-top:1px solid var(--border-strong);margin-top:4px;padding-top:12px}
.vtb-row.vtb-ok b{color:var(--tsl-green)}
.vtb-warn{font-size:13.5px;color:var(--text-muted);padding:10px 0}
.vtb-tblwrap{overflow-x:auto;margin-top:16px}
.vtb-tbl{border-collapse:collapse;width:100%;min-width:420px;font-size:12.5px}
.vtb-tbl th{text-align:left;font-size:10px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--text-muted);padding:8px 10px;border-bottom:2px solid var(--border-strong);white-space:nowrap}
.vtb-tbl td{padding:9px 10px;border-bottom:1px solid var(--border);color:var(--text-strong);white-space:nowrap;font-variant-numeric:tabular-nums}
.vtb-disc{font-size:11.5px;color:var(--text-muted);margin-top:14px;line-height:1.5}

/* ---- Business Value Range Estimator (.bzv-) ---- */
.bzv-calc{background:var(--bg-card);border:1px solid var(--border-strong);border-radius:var(--radius);box-shadow:var(--shadow-card);padding:28px 30px;max-width:640px}
.bzv-stepline{display:flex;align-items:center;gap:9px;font-family:var(--font-display);font-weight:500;font-size:15px;color:var(--text-strong);margin:20px 0 12px}
.bzv-stepline:first-child{margin-top:0}
.bzv-stepdot{flex:none;width:22px;height:22px;border-radius:50%;background:var(--tsl-navy);color:var(--tsl-gold-soft);display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-size:12px}
.bzv-presets{display:flex;flex-wrap:wrap;gap:8px}
.bzv-preset{display:inline-flex;align-items:center;background:var(--tsl-surface-2);border:1px solid var(--border-strong);border-radius:var(--radius-pill);padding:9px 14px;font-family:var(--font-body);font-size:12.5px;font-weight:600;color:var(--text-muted);cursor:pointer;transition:all var(--dur-fast)}
.bzv-preset.on{background:var(--tsl-navy);border-color:var(--tsl-navy);color:#fff}
.bzv-presethint{font-size:12px;color:var(--text-muted);line-height:1.55;margin:10px 0 0}
.bzv-field{margin-top:16px}
.bzv-field label{display:block;font-size:11.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--text-muted);margin-bottom:8px}
.bzv-money{display:flex;align-items:center;gap:6px;background:var(--tsl-surface-2);border:1px solid var(--border-strong);border-radius:9px;padding:10px 13px}
.bzv-money span{color:var(--text-muted);font-weight:600}
.bzv-money input{border:none;background:none;font-family:var(--font-body);font-size:16px;font-weight:600;color:var(--text-strong);width:100%;font-variant-numeric:tabular-nums}
.bzv-money input:focus{outline:none}
.bzv-money:focus-within{border-color:var(--tsl-crimson);box-shadow:0 0 0 3px rgba(179,32,37,.12)}
.bzv-money-sm{padding:8px 11px}
.bzv-money-sm input{font-size:14px}
.bzv-explines{margin-top:14px;display:flex;flex-direction:column;gap:12px}
.bzv-exline label{display:block;font-size:11.5px;font-weight:600;color:var(--text-muted);margin-bottom:6px;line-height:1.4}
.bzv-addback{margin-top:16px;padding-top:16px;border-top:1px dashed var(--border-strong)}
.bzv-addback label{display:block;font-size:11.5px;font-weight:700;color:var(--tsl-crimson);margin-bottom:7px;line-height:1.4}
.bzv-hint{font-weight:500;color:var(--text-muted);text-transform:none;letter-spacing:0}
.bzv-out{margin-top:20px;background:var(--tsl-surface-2);border-radius:12px;padding:16px 18px}
.bzv-row{display:flex;align-items:baseline;justify-content:space-between;gap:14px;padding:7px 0;font-size:12.5px;color:var(--text-muted);border-bottom:1px dashed var(--border)}
.bzv-row b{font-weight:600;color:var(--text-strong);font-variant-numeric:tabular-nums;text-align:right;overflow-wrap:anywhere}
.bzv-row.bzv-sub{border-top:1px solid var(--border-strong);margin-top:4px;padding-top:11px}
.bzv-row.bzv-ok b{color:var(--tsl-green)}
.bzv-total{display:flex;align-items:baseline;justify-content:space-between;gap:14px;padding:12px 0 0;font-size:13px;font-weight:600}
.bzv-total b{font-family:var(--font-display);font-weight:500;font-size:24px;color:var(--tsl-crimson);font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.bzv-warn{font-size:13.5px;color:var(--text-muted);padding:10px 0}
.bzv-multrow{display:flex;gap:10px;flex-wrap:wrap;margin-top:4px}
.bzv-multfield{flex:1 1 110px}
.bzv-multfield label{display:block;font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--text-muted);margin-bottom:6px}
.bzv-multnote{font-size:11.5px;color:var(--text-muted);line-height:1.55;margin:12px 0 0}
.bzv-rangecards{display:flex;gap:8px;margin-top:16px}
.bzv-rangecard{flex:1;min-width:0;text-align:center;background:var(--bg-card);border:1px solid var(--border-strong);border-radius:10px;padding:10px 4px}
.bzv-rangecard span{display:block;font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--text-muted);margin-bottom:3px}
/* Fix (Sprint CS verify-fixer, 2026-09-23): the dollar figure is the whole
 * point of this card, so it must never render truncated. font-size:clamp()
 * shrinks it as the card narrows (a $1M+ business easily produces a 7-8
 * digit range, and this calculator's own multiple-range math can put any of
 * the three figures there — not an edge case, the expected output shape);
 * min-width:0 lets a flex child actually shrink below its content size so
 * the clamp has room to act, and the overflow/ellipsis trio is the final
 * safety net for a truly pathological input rather than a silent overflow
 * past the card edge. */
.bzv-rangecard b{display:block;font-family:var(--font-display);font-size:clamp(11.5px,4.6vw,14.5px);color:var(--text-strong);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bzv-rangecard i{display:block;font-style:normal;font-size:10.5px;color:var(--text-muted);margin-top:2px}
.bzv-rangecard-mid{background:var(--tsl-navy);border-color:var(--tsl-navy)}
.bzv-rangecard-mid span,.bzv-rangecard-mid i{color:var(--tsl-gold-soft)}
.bzv-rangecard-mid b{color:#fff}
.bzv-valuerange{text-align:center;background:linear-gradient(155deg,var(--tsl-navy),var(--tsl-navy-2));border-radius:12px;padding:16px;margin-top:14px}
.bzv-vrlabel{display:block;font-size:10.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--tsl-gold-soft);margin-bottom:6px}
.bzv-vrfig{font-family:var(--font-display);font-weight:400;font-size:22px;color:#fff}
.bzv-disc{font-size:11.5px;color:var(--text-muted);margin-top:14px;line-height:1.55}
.bzv-disc b{color:var(--text-strong)}
@media(max-width:560px){
  .fdc-in{flex-direction:column}
  .vtb-in{flex-direction:column}
  .vtb-field{flex:1 1 auto}
  /* Fix (Sprint CS verify-fixer, 2026-09-23): at 320-360px, three cards in a
   * row leave ~50px content width each -- nowhere near enough for a 7-8
   * digit dollar figure (measured: "Low $17,510,875" / "Mid $24,880,625"
   * clipped mid-digit on business-value-calculator-ontario.html at 320px
   * with a $9.85M revenue input). Stack into one full-width row per card
   * instead of shrinking three abreast; label/figure/multiple share the row
   * left-to-right so it still reads as one line per figure. */
  .bzv-rangecards{flex-direction:column;gap:8px}
  .bzv-rangecard{display:flex;align-items:baseline;justify-content:space-between;gap:10px;text-align:left;padding:11px 15px}
  .bzv-rangecard span{margin-bottom:0}
  .bzv-rangecard b{font-size:15.5px}
  .bzv-rangecard i{margin-top:0;flex:none}
}

/* Fix (Sprint CS): quick-lead.js's B3 in-page ask box (#calculator > .tsl-ask-box)
 * appends OUTSIDE this page's .wrap, as a direct child of the #calculator
 * <section> — which has no side padding of its own (only .wrap does). Without
 * this, the box would sit flush to the viewport edges on phones, failing the
 * mobile-gutter-verification rule. Scoped to #calculator only, so it doesn't
 * touch the article/answer/case/guide/centre anchors quick-lead.js also uses. */
#calculator > .tsl-ask-box{margin-left:var(--gutter);margin-right:var(--gutter)}

/* Additive fix (Sprint CS / W3 batch 3): six of this batch's calculators and
 * both its timeline tools reuse centre-tools.js's existing engines verbatim
 * (SPRINT-CS-SPEC.md "reuse the engine; a small standalone init is fine") so
 * the math is never duplicated -- but that markup (.ct-*, .cn-ic) is only
 * styled in centre.css, which standalone calculator pages don't load. Rather
 * than pull in all of centre.css (with its own layout/grid rules meant for
 * the two-column centre body), this ports just the subset those two engine
 * kinds ("calc" and "timeline") actually render, unchanged from centre.css,
 * scoped to this file the same way the rest of it is calc-page-only. The
 * quiz/checklist tool markup (.ct-chk, .ct-opts, .ct-prog, .ct-cover, etc.)
 * is intentionally left out -- no standalone calculator page uses it. */
.ct-wrap{background:#fff;border:1px solid var(--tsl-line-2);border-radius:16px;padding:20px;margin:0 0 8px}
.ct-form{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:16px}
@media (max-width:640px){.ct-form{grid-template-columns:1fr}}
.ct-form .btn{grid-column:1/-1;justify-self:start}
.ct-fld label{display:block;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--text-muted);margin-bottom:4px}
.ct-fld input,.ct-fld select{width:100%;border:1px solid var(--tsl-line-2);border-radius:9px;padding:10px 12px;background:var(--bg-page);font:14px var(--font-body);color:var(--tsl-ink)}
.ct-out{background:var(--tsl-navy);color:#fff;border-radius:16px;padding:18px 20px;font-variant-numeric:tabular-nums}
.ct-big{font-family:var(--font-display);font-style:italic;font-size:36px;line-height:1.05;color:var(--tsl-gold-soft);overflow-wrap:anywhere}
.ct-sub{font-size:12.5px;color:rgba(255,255,255,.7);margin-top:4px}
.ct-out p{font-size:13.5px;color:rgba(255,255,255,.85);margin:12px 0 0;line-height:1.5}
.ct-cmp{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:12px}.ct-cmp div{background:rgba(255,255,255,.08);border-radius:10px;padding:10px;font-size:12px}.ct-cmp b{display:block;font-family:var(--font-display);font-size:20px;margin-top:2px;overflow-wrap:anywhere}.ct-cmp .win{outline:1px solid var(--tsl-gold-line)}
.ct-rows div{display:flex;justify-content:space-between;gap:10px;padding:6px 0;border-top:1px solid rgba(255,255,255,.12);font-size:13px}.ct-rows div:first-child{border-top:none}.ct-rows b{font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.ct-note{font-size:12px;color:rgba(255,255,255,.7);margin:12px 0 0;line-height:1.5}
.ct-next{margin-top:14px;padding-top:12px;border-top:1px dashed rgba(255,255,255,.18)}.ct-next b{display:block;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.6);margin-bottom:8px}
.ct-next ul{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;list-style:none;padding:0;margin:0}
.ct-next li{margin:0;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.15);border-radius:12px;padding:12px 14px;font-size:13.5px;line-height:1.4}
.ct-next a{color:var(--tsl-gold-soft);text-decoration:underline;text-underline-offset:2px}
@media (max-width:760px){.ct-next ul{grid-template-columns:1fr}}
.cn-ic{width:24px;height:24px;stroke:currentColor;fill:none;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round;flex:none}
.ct-tl{display:flex;overflow-x:auto;gap:0;margin-top:12px;padding-bottom:6px}
.ct-tl .ct-step{flex:none;width:180px;border-top:none;border-radius:0;background:transparent;border:none;padding:0 14px;position:relative;font-size:12.5px}
.ct-tl .ct-step::before{content:"";position:absolute;top:23px;left:-6px;width:100%;height:3px;background:var(--tsl-line-2)}
.ct-tl .ct-step:first-child::before{display:none}
.ct-tl .ct-tico{width:46px;height:46px;border-radius:50%;background:#fff;border:2px solid var(--tsl-line-2);display:flex;align-items:center;justify-content:center;color:var(--tsl-navy);position:relative;z-index:1;margin-bottom:12px}
.ct-tl .ct-tico .cn-ic{width:21px;height:21px}
.ct-tl .ct-step.hot .ct-tico{border-color:var(--tsl-crimson);background:var(--tsl-crimson);color:#fff}
.ct-tl .ct-step.past{opacity:.6}
.ct-tl .ct-step .d{font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--text-muted);margin-bottom:4px}
.ct-tl .ct-step b{display:block;margin:3px 0;font-size:13.5px}
.ct-tl .ct-step span{color:var(--text-muted);line-height:1.4}
.ct-tl .ct-done{position:absolute;top:0;right:11px;font-size:9.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--tsl-green)}
@media (max-width:760px){.ct-tl{flex-direction:column;overflow-x:visible}.ct-tl .ct-step{width:auto;padding:0 0 20px 24px}.ct-tl .ct-step::before{top:0;left:16px;width:3px;height:100%}}