/* The calculator pages (btl-calculator.html and its eight siblings, search audit 30 Oct 2026): the same dark
   navy and gold as the guides, a quick calculator near the top, then reading text, a worked example and the
   questions. One stylesheet for all nine so they cannot drift apart. The form and results are drawn by the
   page's HTML; public/js/quick-calc.js only fills them in. */
:root {
  --navy-950:#070B14; --navy-900:#0D1526; --navy-850:#101A30; --navy-800:#141F38; --navy-700:#1E2C4D; --navy-line:#24314F;
  --gold-400:#E0C083; --gold-500:#D4AF6A; --gold-300:#F0DBA8; --gold-glow:rgba(212,175,106,.35);
  --ivory-100:#F6F3EC; --slate-300:#B4BDD0; --slate-400:#8C97AE; --slate-500:#8794AC; --emerald-400:#3FCB8C; --rose-400:#F0647E;
  --radius-lg:22px; --radius-md:14px;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--navy-950); color: var(--ivory-100); font-family: var(--font-body); line-height: 1.6; }
a { color: var(--gold-300); }
a:hover { color: var(--gold-400); }
h1, h2, h3 { font-family: var(--font-display); margin: 0; line-height: 1.2; }

.cp { max-width: 980px; margin: 0 auto; padding: 18px 24px 72px; }
.cp-crumbs { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: 13px; color: var(--slate-400); margin: 4px 0 18px; }
.cp-crumbs a { color: var(--slate-300); text-decoration: none; }
.cp-crumbs a:hover { color: var(--gold-300); text-decoration: underline; }

.cp-hero { margin: 0 0 24px; }
.cp-eyebrow { display: inline-block; border: 1px solid var(--navy-line); border-radius: 999px; padding: 4px 12px; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--gold-300); margin: 0 0 14px; }
.cp-hero h1 { font-size: 36px; margin: 0 0 14px; max-width: 820px; }
.cp-hero .cp-intro { font-size: 17px; color: var(--slate-300); margin: 0; max-width: 820px; }
@media (max-width: 640px) { .cp-hero h1 { font-size: 28px; } .cp-hero .cp-intro { font-size: 16px; } }

.btn-gold { background: linear-gradient(180deg, var(--gold-400), var(--gold-500)); color: #1A1305; box-shadow: 0 6px 20px -6px var(--gold-glow); }
.btn-gold:hover { color: #1A1305; filter: brightness(1.05); }
.btn-ghost { background: none; border: 1px solid var(--navy-700); color: var(--ivory-100); }
.btn-ghost:hover { border-color: var(--gold-500); color: var(--gold-300); }
.btn[disabled] { opacity: .6; cursor: default; }

/* The quick calculator */
.qc { background: linear-gradient(160deg, var(--navy-800), var(--navy-900)); border: 1px solid var(--navy-line); border-radius: var(--radius-lg); padding: 22px; margin: 0 0 36px; }
.qc h2 { font-size: 22px; margin: 0 0 6px; }
.qc > p { margin: 0 0 16px; color: var(--slate-400); font-size: 14px; }
.qc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px 16px; margin: 0 0 16px; }
.qc-grid[hidden], .qc [hidden] { display: none !important; }
.qc-field label { display: block; font-size: 13px; color: var(--slate-300); margin: 0 0 5px; }
.qc-field .qc-hint { display: block; font-size: 12px; color: var(--slate-400); margin: 4px 0 0; }
.qc-field input, .qc-field select { width: 100%; padding: 10px 12px; border-radius: 9px; border: 1px solid var(--navy-700); background: var(--navy-950); color: var(--ivory-100); font: 15px var(--font-body); }
.qc-field input:focus, .qc-field select:focus { outline: 2px solid var(--gold-500); outline-offset: 1px; }
.qc-check label { display: flex; gap: 8px; align-items: flex-start; font-size: 13.5px; color: var(--slate-300); cursor: pointer; margin-top: 24px; }
.qc-check input { width: auto; margin: 3px 0 0; }
.qc-group-title { grid-column: 1 / -1; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--gold-300); margin: 6px 0 -4px; }
.qc-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 4px 0 0; }
.qc-error { color: var(--rose-400); font-size: 14px; margin: 12px 0 0; }
.qc-results { margin: 20px 0 0; border-top: 1px solid var(--navy-line); padding-top: 18px; transition: opacity .15s; }
.qc-results.qc-stale .qc-figures { opacity: .45; }
.qc-stale-note { font-size: 13px; color: var(--gold-300); margin: 0 0 10px; }
.qc-figures { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; margin: 0 0 14px; }
.qc-figures > div { background: var(--navy-950); border: 1px solid var(--navy-line); border-radius: 12px; padding: 12px 14px; }
.qc-figures dt { font-size: 12.5px; color: var(--slate-400); margin: 0 0 4px; }
.qc-figures dd { margin: 0; font-family: var(--font-display); font-size: 21px; font-weight: 600; font-variant-numeric: tabular-nums; }
.qc-figures .qc-wide { grid-column: 1 / -1; }
.qc-figures .qc-wide dd { font-family: var(--font-body); font-size: 14.5px; font-weight: 400; color: var(--slate-300); }
.qc-neg { color: var(--rose-400); }
.qc-pos { color: var(--emerald-400); }
.qc-table { width: 100%; border-collapse: collapse; font-size: 14px; margin: 4px 0 0; }
.qc-table caption { text-align: left; font-size: 12.5px; color: var(--slate-400); padding: 0 0 6px; }
.qc-table th, .qc-table td { padding: 6px 10px; text-align: left; border-top: 1px solid var(--navy-line); font-variant-numeric: tabular-nums; }
.qc-table thead th { border-top: 0; font-size: 12px; color: var(--slate-400); font-weight: 400; }
.qc-full { margin: 6px 0 0; font-size: 13px; color: var(--slate-400); }
.qc-full .btn { margin: 0 10px 8px 0; }

/* Reading text */
.cp-body section { margin: 0 0 34px; scroll-margin-top: 80px; }
.cp-body h2 { font-size: 25px; margin: 0 0 12px; }
.cp-body h3 { font-size: 18px; margin: 18px 0 6px; color: var(--gold-300); }
.cp-body p, .cp-body li, .cp-body dd { font-size: 16px; color: var(--slate-300); }
.cp-body p { margin: 0 0 14px; }
.cp-body ul, .cp-body ol { margin: 0 0 16px; padding-left: 22px; }
.cp-body li { margin: 0 0 6px; }
.cp-body strong { color: var(--ivory-100); }
.cp-boxes { margin: 0 0 14px; }
.cp-boxes dt { font-weight: 600; color: var(--ivory-100); margin: 14px 0 2px; }
.cp-boxes dd { margin: 0; }

.cp-table { overflow-x: auto; margin: 0 0 20px; border: 1px solid var(--navy-line); border-radius: var(--radius-md); background: var(--navy-900); }
.cp-table table { width: 100%; border-collapse: collapse; font-size: 15px; }
.cp-table caption { text-align: left; padding: 12px 16px 6px; font-size: 13px; color: var(--slate-400); caption-side: top; }
.cp-table th, .cp-table td { padding: 9px 16px; text-align: left; border-top: 1px solid var(--navy-line); vertical-align: top; }
.cp-table thead th { font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--slate-400); border-top: 0; }
.cp-table tbody th { font-weight: 400; color: var(--slate-300); }
.cp-table td { font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; }

.cp-example { background: var(--navy-900); border: 1px solid var(--navy-line); border-radius: var(--radius-lg); padding: 22px 22px 8px; }
.faq h3 { color: var(--ivory-100); }
.cp-links { border: 1px solid var(--navy-line); border-radius: var(--radius-md); background: var(--navy-900); padding: 16px 20px; }
.cp-links h2 { font-size: 18px; margin: 0 0 8px; }
.cp-links ul { margin: 0; columns: 2; column-gap: 28px; }
@media (max-width: 640px) { .cp-links ul { columns: 1; } }
.cp-note { font-size: 13.5px !important; color: var(--slate-400) !important; border-left: 3px solid var(--navy-700); padding-left: 12px; }
.cta-band { background: linear-gradient(160deg, var(--navy-800), var(--navy-900)); border: 1px solid var(--navy-line); border-radius: var(--radius-lg); padding: 32px; text-align: center; }
.cta-band h2 { font-size: 24px; margin: 0 0 12px; }
.cta-band p { color: var(--slate-400); font-size: 14.5px; margin: 0 auto 20px; max-width: 640px; }