/* ============================================================================
   AEXPHL Calculators — shared design system + UI kit
   Brand tokens lifted from the live AEXPHL landing pages (Fraunces + Montserrat,
   deep-blue palette, warm paper background). Used by all four calculators so
   they render as identical siblings. Self-contained: no external CSS deps.
   ============================================================================ */

:root{
  --blue:#1E75B8;--blue-dark:#155A8F;--blue-deep:#0D3F68;
  --blue-light:#D6EAF8;--blue-pale:#EDF5FB;
  --paper:#F8F6F2;--paper-warm:#F2EDE6;--white:#FFFFFF;
  --ink:#1A1B1C;--ink-muted:#5C6978;--ink-subtle:#9BA8B5;
  --line:#D8D0C4;--line-soft:#E8E2D8;
  --green:#0D7C52;--green-bg:#E6F4EE;--green-soft:#7BC0A2;
  --amber:#B8791E;--amber-bg:#FBF2E1;
  --red:#B4442E;--red-bg:#F9E9E5;
  --wa:#25D366;
  --font-d:'Fraunces',Georgia,'Times New Roman',serif;
  --font-b:'Montserrat',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --ease:cubic-bezier(0.23,1,0.32,1);
  /* content width = aexphl.com/calculators .container-large.calc (1280px, measured 22 Oct at 1440 and 1920; Bolun chose it over the 1072px menu width) + side padding */
  --max-w:calc(1280px + 2 * var(--g));--g:clamp(20px,4vw,56px);
  --r-lg:16px;--r-md:12px;--r-sm:9px;
  --shadow-card:0 12px 40px rgba(13,63,104,.07);
  --shadow-pop:0 8px 28px rgba(13,63,104,.14);
}
*{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;-webkit-font-smoothing:antialiased;}
body{font-family:var(--font-b);background:var(--paper);color:var(--ink);font-size:16px;line-height:1.6;}
img{max-width:100%;height:auto;display:block;}
a{color:inherit;text-decoration:none;}
button{font:inherit;cursor:pointer;border:none;background:none;color:inherit;}
input,select{font:inherit;color:inherit;}
::selection{background:var(--blue-light);color:var(--blue-deep);}

/* ---- Typography helpers ---- */
.eyebrow{font-family:var(--font-b);font-size:10px;font-weight:700;letter-spacing:3.5px;text-transform:uppercase;color:var(--blue);display:block;}
.h-display{font-family:var(--font-d);font-weight:300;line-height:1.05;letter-spacing:-.02em;color:var(--blue-deep);}
.h-display em{font-style:italic;font-weight:400;}
.h-section{font-family:var(--font-d);font-size:clamp(24px,3vw,38px);font-weight:400;line-height:1.1;letter-spacing:-.02em;color:var(--blue-deep);}
.h-section em{font-style:italic;font-weight:400;}
.h-card{font-family:var(--font-d);font-size:clamp(17px,1.8vw,21px);font-weight:500;letter-spacing:-.01em;color:var(--blue-deep);line-height:1.25;}
.lead{font-family:var(--font-b);font-size:clamp(15px,1.4vw,17px);line-height:1.7;color:var(--ink-muted);}
.body-sm{font-family:var(--font-b);font-size:14px;line-height:1.7;color:var(--ink-muted);}
.mono-num{font-variant-numeric:tabular-nums;font-feature-settings:"tnum";}

/* ---- Top bar ---- */
.topbar{background:var(--blue-deep);padding:14px var(--g);}
.topbar-inner{max-width:var(--max-w);margin:0 auto;display:flex;align-items:center;gap:12px;}
.topbar img{height:32px;width:auto;}
.topbar span{font-family:var(--font-b);font-size:10px;font-weight:700;letter-spacing:2.5px;text-transform:uppercase;color:rgba(214,234,248,.72);}

/* ---- Calculator nav (sibling switcher) ---- */
.calcnav{background:var(--white);border-bottom:1px solid var(--line-soft);position:sticky;top:0;z-index:40;}
.calcnav-inner{max-width:var(--max-w);margin:0 auto;display:flex;gap:4px;overflow-x:auto;padding:0 var(--g);scrollbar-width:none;}
.calcnav-inner::-webkit-scrollbar{display:none;}
.calcnav a{font-family:var(--font-b);font-size:13px;font-weight:600;color:var(--ink-muted);padding:16px 14px;white-space:nowrap;border-bottom:2px solid transparent;transition:color .2s var(--ease),border-color .2s var(--ease);}
.calcnav a:hover{color:var(--blue-deep);}
.calcnav a.active{color:var(--blue-deep);border-bottom-color:var(--blue);}

/* ---- Page shell ---- */
.wrap{max-width:var(--max-w);margin:0 auto;padding:clamp(28px,5vw,56px) var(--g) clamp(40px,6vw,72px);}
.calc-head{max-width:760px;margin-bottom:clamp(24px,4vw,40px);}
.calc-head .eyebrow{margin-bottom:14px;}
.calc-head h1{font-family:var(--font-d);font-size:clamp(30px,4.4vw,48px);font-weight:300;line-height:1.05;letter-spacing:-.02em;color:var(--blue-deep);margin-bottom:16px;}
.calc-head h1 em{font-style:italic;font-weight:400;}
.calc-head p{font-family:var(--font-b);font-size:clamp(14.5px,1.4vw,16.5px);line-height:1.65;color:var(--ink-muted);max-width:58ch;}

/* ---- Two-column grid: form | results ---- */
.calc-grid{display:grid;grid-template-columns:1fr;gap:clamp(20px,3vw,32px);align-items:start;}
@media(min-width:940px){.calc-grid{grid-template-columns:minmax(0,0.92fr) minmax(0,1.08fr);}}

/* ---- Card ---- */
.card{background:var(--white);border:1px solid var(--line-soft);border-radius:var(--r-lg);box-shadow:var(--shadow-card);}
.card-pad{padding:clamp(20px,3vw,30px);}
.card-title{font-family:var(--font-d);font-size:19px;font-weight:500;color:var(--blue-deep);margin-bottom:4px;}
.card-sub{font-family:var(--font-b);font-size:13px;color:var(--ink-subtle);margin-bottom:22px;}
.results-sticky{}
@media(min-width:940px){.results-sticky{position:sticky;top:76px;}}

/* ---- Field ---- */
.field{margin-bottom:22px;}
.field:last-child{margin-bottom:0;}
.field-label{display:flex;align-items:center;gap:6px;font-family:var(--font-b);font-size:13px;font-weight:600;color:var(--ink);margin-bottom:8px;letter-spacing:.01em;}
.field-label .opt{font-weight:500;color:var(--ink-subtle);font-size:12px;}
.field-hint{font-family:var(--font-b);font-size:12px;color:var(--ink-subtle);margin-top:7px;line-height:1.5;}

/* input with $ / % adornment */
.input-wrap{position:relative;display:flex;align-items:center;}
.input-wrap .adorn{position:absolute;font-family:var(--font-b);font-weight:600;color:var(--ink-subtle);font-size:15px;pointer-events:none;}
.input-wrap .adorn-l{left:15px;}
.input-wrap .adorn-r{right:15px;}
.input{width:100%;height:50px;background:var(--paper);border:1.5px solid var(--line);border-radius:var(--r-sm);padding:0 15px;font-family:var(--font-b);font-size:16px;font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums;transition:border-color .18s var(--ease),box-shadow .18s var(--ease),background .18s var(--ease);}
.input:hover{border-color:var(--blue-light);}
.input:focus{outline:none;border-color:var(--blue);background:var(--white);box-shadow:0 0 0 3px rgba(30,117,184,.13);}
.input.has-l{padding-left:30px;}
.input.has-r{padding-right:42px;}
.input.err{border-color:var(--red);box-shadow:0 0 0 3px rgba(180,68,46,.12);}
select.input{appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%235C6978' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 15px center;padding-right:38px;cursor:pointer;}
.field-err{font-family:var(--font-b);font-size:12px;color:var(--red);margin-top:7px;display:none;}
.field-err.show{display:block;}

/* ---- Slider ---- */
.slider-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px;}
.slider-val{font-family:var(--font-b);font-size:14px;font-weight:700;color:var(--blue-deep);font-variant-numeric:tabular-nums;}
input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:6px;border-radius:99px;background:var(--line-soft);outline:none;margin:6px 0;}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:22px;height:22px;border-radius:50%;background:var(--white);border:2px solid var(--blue);box-shadow:0 2px 8px rgba(13,63,104,.22);cursor:grab;transition:transform .12s var(--ease);}
input[type=range]::-webkit-slider-thumb:active{cursor:grabbing;transform:scale(1.12);}
input[type=range]::-moz-range-thumb{width:22px;height:22px;border-radius:50%;background:var(--white);border:2px solid var(--blue);box-shadow:0 2px 8px rgba(13,63,104,.22);cursor:grab;}
input[type=range]:focus-visible{box-shadow:0 0 0 3px rgba(30,117,184,.2);}

/* ---- Segmented toggle ---- */
.seg{display:inline-flex;background:var(--paper-warm);border:1.5px solid var(--line-soft);border-radius:var(--r-sm);padding:4px;gap:2px;width:100%;}
.seg button{flex:1;font-family:var(--font-b);font-size:13.5px;font-weight:600;color:var(--ink-muted);padding:10px 12px;border-radius:6px;transition:all .18s var(--ease);white-space:nowrap;}
.seg button:hover{color:var(--blue-deep);}
.seg button.on{background:var(--white);color:var(--blue-deep);box-shadow:0 2px 8px rgba(13,63,104,.1);}

/* pill radio group (states etc.) */
.pills{display:flex;flex-wrap:wrap;gap:8px;}
.pills button{font-family:var(--font-b);font-size:13px;font-weight:600;color:var(--ink-muted);padding:9px 15px;border-radius:99px;border:1.5px solid var(--line);background:var(--white);transition:all .16s var(--ease);}
.pills button:hover{border-color:var(--blue-light);color:var(--blue-deep);}
.pills button.on{background:var(--blue-deep);border-color:var(--blue-deep);color:var(--white);}

/* checkbox row */
.check{display:flex;align-items:flex-start;gap:11px;cursor:pointer;padding:13px 15px;border:1.5px solid var(--line);border-radius:var(--r-sm);background:var(--white);transition:all .16s var(--ease);}
.check:hover{border-color:var(--blue-light);}
.check.on{border-color:var(--blue);background:var(--blue-pale);}
.check .box{flex:none;width:20px;height:20px;border-radius:5px;border:1.5px solid var(--line);background:var(--white);position:relative;transition:all .16s var(--ease);margin-top:1px;}
.check.on .box{background:var(--blue);border-color:var(--blue);}
.check.on .box::after{content:'';position:absolute;left:6px;top:2px;width:5px;height:10px;border:solid var(--white);border-width:0 2px 2px 0;transform:rotate(45deg);}
.check .lbl{font-family:var(--font-b);font-size:13.5px;font-weight:600;color:var(--ink);line-height:1.4;}
.check .lbl small{display:block;font-weight:500;color:var(--ink-subtle);font-size:12px;margin-top:2px;}

/* ---- Tooltip / info ---- */
.info{display:inline-flex;align-items:center;justify-content:center;width:15px;height:15px;border-radius:50%;background:var(--line-soft);color:var(--ink-muted);font-size:10px;font-weight:700;cursor:help;position:relative;font-family:var(--font-b);}
.info:hover{background:var(--blue-light);color:var(--blue-deep);}
.info .tip{position:absolute;bottom:calc(100% + 8px);left:50%;transform:translateX(-50%);width:230px;background:var(--blue-deep);color:var(--white);font-size:12px;font-weight:500;line-height:1.5;padding:10px 12px;border-radius:8px;box-shadow:var(--shadow-pop);opacity:0;visibility:hidden;transition:opacity .18s var(--ease);z-index:50;text-transform:none;letter-spacing:0;}
.info .tip::after{content:'';position:absolute;top:100%;left:50%;transform:translateX(-50%);border:6px solid transparent;border-top-color:var(--blue-deep);}
.info:hover .tip{opacity:1;visibility:visible;}
@media(max-width:600px){.info .tip{width:180px;left:auto;right:-10px;transform:none;}.info .tip::after{left:auto;right:14px;}}

/* ---- Headline result ---- */
.result-hero{text-align:center;padding:clamp(22px,3vw,32px) 20px;border-bottom:1px solid var(--line-soft);}
.result-hero .label{font-family:var(--font-b);font-size:12px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:var(--ink-subtle);margin-bottom:10px;}
.result-hero .amount{font-family:var(--font-d);font-size:clamp(40px,7vw,60px);font-weight:400;line-height:1;color:var(--blue-deep);letter-spacing:-.02em;font-variant-numeric:tabular-nums;transition:color .2s var(--ease);}
.result-hero .amount .cents{font-size:.5em;color:var(--ink-muted);vertical-align:baseline;}
.result-hero .amount .freq{font-family:var(--font-b);font-size:.28em;font-weight:600;color:var(--ink-subtle);letter-spacing:0;}
.result-hero .sub{font-family:var(--font-b);font-size:13.5px;color:var(--ink-muted);margin-top:10px;}

/* metric grid */
.metrics{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line-soft);}
.metric{background:var(--white);padding:18px 20px;}
.metric .k{font-family:var(--font-b);font-size:11.5px;font-weight:700;letter-spacing:.8px;text-transform:uppercase;color:var(--ink-subtle);margin-bottom:7px;display:flex;align-items:center;gap:5px;}
.metric .v{font-family:var(--font-d);font-size:clamp(20px,2.6vw,26px);font-weight:500;color:var(--blue-deep);font-variant-numeric:tabular-nums;line-height:1.1;}
.metric .v small{font-family:var(--font-b);font-size:13px;font-weight:600;color:var(--ink-muted);}
.metric.pos .v{color:var(--green);}
.metric.neg .v{color:var(--red);}
@media(max-width:420px){.metrics{grid-template-columns:1fr;}}

/* ---- Breakdown rows ---- */
.rows{padding:6px 0;}
.row{display:flex;align-items:center;justify-content:space-between;padding:12px clamp(20px,3vw,28px);font-family:var(--font-b);}
.row+.row{border-top:1px solid var(--line-soft);}
.row .rk{font-size:14px;color:var(--ink-muted);display:flex;align-items:center;gap:6px;}
.row .rv{font-size:15px;font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums;}
.row.total{background:var(--blue-pale);}
.row.total .rk{color:var(--blue-deep);font-weight:700;}
.row.total .rv{color:var(--blue-deep);font-size:17px;}
.row .swatch{display:inline-block;width:10px;height:10px;border-radius:3px;flex:none;}

/* ---- Chart shells ---- */
.chart-wrap{padding:clamp(18px,3vw,26px);}
.chart-legend{display:flex;flex-wrap:wrap;gap:16px;margin-top:16px;justify-content:center;}
.chart-legend .lg{display:flex;align-items:center;gap:7px;font-family:var(--font-b);font-size:12.5px;color:var(--ink-muted);font-weight:600;}
.chart-legend .lg .sw{width:12px;height:12px;border-radius:3px;}
svg .grid-line{stroke:var(--line-soft);stroke-width:1;}
svg .axis-txt{font-family:var(--font-b);font-size:11px;fill:var(--ink-subtle);}

/* ---- Table (amortization) ---- */
.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;}
table.amort{width:100%;border-collapse:collapse;font-family:var(--font-b);font-variant-numeric:tabular-nums;min-width:520px;}
table.amort th{font-size:11px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;color:var(--ink-subtle);text-align:right;padding:12px 16px;border-bottom:1.5px solid var(--line-soft);background:var(--paper);position:sticky;top:0;}
table.amort th:first-child{text-align:left;}
table.amort td{font-size:13.5px;color:var(--ink);text-align:right;padding:11px 16px;border-bottom:1px solid var(--line-soft);}
table.amort td:first-child{text-align:left;font-weight:600;color:var(--ink-muted);}
table.amort tbody tr:hover{background:var(--blue-pale);}
table.amort tr.year-row td{background:var(--paper-warm);font-weight:700;color:var(--blue-deep);}

/* toggle chip for table view */
.mini-toggle{display:inline-flex;gap:2px;background:var(--paper-warm);border-radius:7px;padding:3px;}
.mini-toggle button{font-family:var(--font-b);font-size:12px;font-weight:600;color:var(--ink-muted);padding:7px 13px;border-radius:5px;}
.mini-toggle button.on{background:var(--white);color:var(--blue-deep);box-shadow:0 1px 4px rgba(13,63,104,.12);}

/* ---- Callout / disclaimer ---- */
.callout{display:flex;gap:12px;padding:16px 18px;border-radius:var(--r-md);background:var(--blue-pale);border:1px solid var(--blue-light);font-family:var(--font-b);font-size:13px;line-height:1.6;color:var(--blue-deep);}
.callout.warn{background:var(--amber-bg);border-color:#EAD3A0;color:var(--amber);}
.callout.good{background:var(--green-bg);border-color:var(--green-soft);color:var(--green);}
.callout .ico{flex:none;font-size:16px;line-height:1.3;}

/* ---- CTA band ---- */
.cta-band{background:var(--blue-deep);border-radius:var(--r-lg);padding:clamp(26px,4vw,40px);margin-top:clamp(28px,4vw,44px);text-align:center;color:var(--white);}
.cta-band h2{font-family:var(--font-d);font-size:clamp(22px,3vw,32px);font-weight:400;line-height:1.15;margin-bottom:12px;}
.cta-band h2 em{font-style:italic;}
.cta-band p{font-family:var(--font-b);font-size:15px;color:rgba(214,234,248,.85);max-width:52ch;margin:0 auto 24px;line-height:1.6;}
.btn{display:inline-flex;align-items:center;gap:9px;font-family:var(--font-b);font-size:15px;font-weight:700;padding:15px 30px;border-radius:99px;background:var(--white);color:var(--blue-deep);transition:transform .16s var(--ease),box-shadow .16s var(--ease);box-shadow:0 6px 20px rgba(0,0,0,.18);}
.btn:hover{transform:translateY(-2px);box-shadow:0 10px 28px rgba(0,0,0,.24);}
.btn.wa{background:var(--wa);color:#fff;}
.btn-ghost{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-b);font-size:14px;font-weight:600;color:var(--blue);padding:12px 22px;border-radius:99px;border:1.5px solid var(--blue-light);transition:all .16s var(--ease);}
.btn-ghost:hover{background:var(--blue-pale);border-color:var(--blue);}

/* ---- Footer ---- */
footer{background:#1a1f26;color:rgba(255,255,255,.7);padding:36px var(--g) 26px;font-family:var(--font-b);font-size:13px;line-height:1.65;margin-top:clamp(32px,5vw,56px);}
.footer-grid{max-width:var(--max-w);margin:0 auto;display:flex;flex-wrap:wrap;gap:18px 40px;align-items:center;justify-content:space-between;margin-bottom:22px;}
.footer-grid img{height:26px;width:auto;opacity:.9;}
.footer-links a{color:rgba(255,255,255,.75);margin-left:20px;}
.footer-links a:first-child{margin-left:0;}
.footer-links a:hover{color:#fff;}
@media(max-width:600px){.footer-links{width:100%;}.footer-links a{margin:0 18px 0 0;display:inline-block;}}
.footer-compliance{max-width:var(--max-w);margin:0 auto;font-family:var(--font-b);font-size:11px;color:rgba(255,255,255,.42);line-height:1.7;border-top:1px solid rgba(255,255,255,.1);padding-top:18px;font-style:italic;}

/* ---- comparison bars (drawBars) ---- */
.cmp-row{margin-bottom:16px;}
.cmp-row:last-child{margin-bottom:0;}
.cmp-top{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:7px;}
.cmp-lbl{font-family:var(--font-b);font-size:13px;font-weight:600;color:var(--ink-muted);}
.cmp-val{font-family:var(--font-b);font-size:15px;font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums;}
.cmp-track{height:14px;background:var(--paper-warm);border-radius:99px;overflow:hidden;}
.cmp-fill{height:100%;border-radius:99px;transition:width .5s var(--ease);}

/* ---- utilities ---- */
.spacer-sm{height:16px;}.spacer{height:26px;}
.divider{height:1px;background:var(--line-soft);margin:0;}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
@media(max-width:520px){.grid-2{grid-template-columns:1fr;}}
.flip{animation:flipIn .4s var(--ease);}
@keyframes flipIn{from{opacity:.4;transform:translateY(4px);}to{opacity:1;transform:none;}}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}
@media(prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;transition-duration:.01ms!important;}}

/* ============================================================
   2026-10-22 layout: compact header, calculator left, sticky booking panel right
   (pattern from go.aexphl.com/capacity-snapshot .side). Measured at 1440x900:
   header was 329px tall with the calculator starting at y540; target <=150px / ~y330.
   Gate 3: .calcnav sticks at top:0 (56px tall) and .results-sticky at top:76px,
   so the panel uses the same 76px offset. --max-w above drives .wrap/.topbar/.calcnav/footer.
   ============================================================ */
.calc-head{max-width:none;margin-bottom:clamp(18px,2.4vw,26px);}
.calc-head .head-top{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;margin-bottom:10px;}
.calc-head .head-top .eyebrow{margin-bottom:0;}
.calc-head h1{font-size:clamp(26px,2.6vw,34px);margin-bottom:8px;line-height:1.12;}
/* full text stays in the page for search; only two lines show */
.calc-head p{max-width:none;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:clamp(14px,1.2vw,15px);line-height:1.6;}
.wrap{padding-top:clamp(20px,3vw,30px);}

.calc-layout{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(20px,3vw,32px);align-items:start;}
/* 1072 content - 320 panel - 32 gap = 720px for the calculator */
@media(min-width:1100px){.calc-layout{grid-template-columns:minmax(0,1fr) 320px;}}
/* 720px fits inputs + results side by side only from ~1240px viewport; stack between 1100 and 1239 */
@media(min-width:1100px) and (max-width:1239px){.calc-layout .calc-grid{grid-template-columns:minmax(0,1fr);}}
.calc-main{min-width:0;}

.side{display:flex;flex-direction:column;gap:16px;}
@media(min-width:1100px){.side{position:sticky;top:76px;}}
.side-card{background:var(--white);border:1px solid var(--line-soft);border-radius:var(--r-lg);box-shadow:var(--shadow-card);padding:22px;}
.side-cta{display:flex;align-items:center;justify-content:center;gap:10px;font-family:var(--font-b);font-weight:700;font-size:15px;padding:15px 18px;border-radius:100px;background:var(--blue);color:#fff;box-shadow:0 14px 30px -12px rgba(30,117,184,.6);transition:background .2s var(--ease),transform .25s var(--ease);}
.side-cta:hover{background:var(--blue-dark);transform:translateY(-2px);}
.side-note{font-family:var(--font-b);font-size:12px;color:var(--ink-subtle);text-align:center;margin-top:10px;line-height:1.5;}
.side h2{font-family:var(--font-d);font-size:20px;font-weight:400;line-height:1.2;color:var(--blue-deep);margin-bottom:6px;}
.side .lead{font-family:var(--font-b);font-size:13px;color:var(--ink-muted);line-height:1.55;margin-bottom:14px;}
.side .field{margin-bottom:11px;}
.side label{display:block;font-family:var(--font-b);font-size:12px;font-weight:600;color:var(--ink);margin-bottom:5px;}
.side input,.side select{width:100%;font-family:var(--font-b);font-size:14px;color:var(--ink);background:var(--paper);border:1.5px solid var(--line-soft);border-radius:var(--r-sm);padding:10px 12px;}
.side input:focus,.side select:focus{outline:none;border-color:var(--blue);background:#fff;}
.side .phone-grid{display:grid;grid-template-columns:96px minmax(0,1fr);gap:8px;}
.side .submit{width:100%;margin-top:4px;font-family:var(--font-b);font-weight:700;font-size:14px;padding:13px 16px;border-radius:100px;border:1.5px solid var(--blue);background:#fff;color:var(--blue-deep);cursor:pointer;transition:background .2s var(--ease),color .2s var(--ease);}
.side .submit:hover{background:var(--blue-pale);}
.side .submit:disabled{opacity:.6;cursor:wait;}
.side .msg{font-family:var(--font-b);font-size:13px;line-height:1.55;margin-top:10px;}
.side .msg.ok{color:var(--green);}
.side .msg.fail{color:var(--red);}
.side .fineprint{font-family:var(--font-b);font-size:10.5px;color:var(--ink-subtle);line-height:1.5;margin-top:10px;}
.side .fineprint a{text-decoration:underline;}
.side .ts-box:empty{display:none;}
.side .ts-box{margin:6px 0 8px;}
.bio-top{display:flex;gap:14px;align-items:center;}
.bio-top img{width:56px;height:56px;border-radius:50%;object-fit:cover;object-position:50% 22%;flex:none;}
.bio-top b{display:block;font-family:var(--font-b);font-size:15px;color:var(--ink);}
.bio-top small{display:block;font-family:var(--font-b);font-size:12px;color:var(--ink-muted);line-height:1.4;}
.bio-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px;}
.bio-chips span{font-family:var(--font-b);font-size:10.5px;font-weight:700;color:var(--blue-deep);background:var(--blue-pale);border-radius:100px;padding:4px 10px;}

/* phones/tablets: the panel sits under the calculator; a booking bar stays at the bottom */
.mbar{display:none;}
@media(max-width:1099px){
  .mbar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:60;padding:10px var(--g) calc(10px + env(safe-area-inset-bottom));background:rgba(255,255,255,.96);border-top:1px solid var(--line-soft);box-shadow:0 -8px 24px rgba(13,63,104,.08);transform:translateY(110%);transition:transform .3s var(--ease);}
  .mbar.show{transform:none;}
  .mbar .side-cta{flex:1;padding:13px 16px;font-size:14px;}
  body{padding-bottom:72px;}
}

/* ============================================================
   2026-10-22 v2 (Bolun: "Bar + sliders + panel"): headline result + metric cards in a
   results bar that stays in view from 900px; sliders left with charts/breakdowns under
   them; one compact booking card right, sticky just under the bar.
   Sticky stack: .calcnav top:0 (56px) -> .result-bar top:56px -> .side top:56px + bar + 16px.
   --bar-h is set by calc-lead.js (ResizeObserver) because each calculator's bar differs.
   1280 content - 320 panel - 32 gap = 928px left column, so inputs and results stack.
   ============================================================ */
.calc-layout .calc-grid{grid-template-columns:minmax(0,1fr)!important;}
.results-rest{position:static;}

.result-bar{margin-bottom:clamp(18px,2.4vw,24px);}
.result-bar-inner{display:grid;grid-template-columns:1fr;background:var(--white);border:1px solid var(--line-soft);border-radius:var(--r-lg);box-shadow:var(--shadow-card);overflow:hidden;}
.result-bar .result-hero{border-bottom:1px solid var(--line-soft);}
.result-bar .metrics{grid-template-columns:repeat(2,minmax(0,1fr));}
@media(min-width:900px){
  .result-bar{position:sticky;top:56px;z-index:30;}
  .result-bar-inner{grid-template-columns:minmax(260px,auto) minmax(0,1fr);box-shadow:var(--shadow-pop);}
  .result-bar .result-hero{text-align:left;border-bottom:0;border-right:1px solid var(--line-soft);padding:14px 26px;display:flex;flex-direction:column;justify-content:center;}
  .result-bar .result-hero .label{font-size:11px;margin-bottom:6px;}
  .result-bar .result-hero .amount{font-size:clamp(32px,3vw,42px);}
  .result-bar .result-hero .sub{font-size:12.5px;margin-top:6px;}
  .result-bar .metrics{display:grid;grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);}
  .result-bar .metric{padding:14px 18px;display:flex;flex-direction:column;justify-content:center;}
  .result-bar .metric .k{font-size:10.5px;margin-bottom:5px;}
  .result-bar .metric .v{font-size:clamp(19px,1.7vw,24px);}
  .side{top:calc(56px + var(--bar-h, 0px) + 16px);max-height:calc(100vh - 56px - var(--bar-h, 0px) - 32px);overflow:auto;scrollbar-width:thin;}
}

/* one compact booking card */
.side-card{padding:20px;}
.side-or{display:flex;align-items:center;gap:10px;margin:16px 0 12px;font-family:var(--font-b);font-size:11px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:var(--ink-subtle);}
.side-or::before,.side-or::after{content:"";flex:1;height:1px;background:var(--line-soft);}
.side h2{font-size:18px;}
.side .lead{font-size:12.5px;margin-bottom:12px;}
.side .field{margin-bottom:9px;}
.side input,.side select{padding:9px 11px;font-size:13.5px;}
.side .bio-top{margin-top:14px;padding-top:14px;border-top:1px solid var(--line-soft);gap:12px;}
.side .bio-top img{width:44px;height:44px;}
.side .bio-top b{font-size:14px;}
.side .bio-top small{font-size:11.5px;}
/* panel fits a 900px-tall screen under the bar (measured 690px tall, 706px available; Tim row clipped): tighten ~40px */
.side .side-cta{padding:13px 16px;font-size:14.5px;}
.side .side-note{margin-top:7px;}
.side-or{margin:12px 0 9px;}
.side .lead{margin-bottom:10px;line-height:1.5;}
.side .field{margin-bottom:8px;}
.side .fineprint{margin-top:8px;}
.side .bio-top{margin-top:10px;padding-top:10px;}
.side .side-card{padding:17px 20px;}.side .bio-top{margin-top:8px;padding-top:9px;}
/* team row above the booking button: Tim, Charu, Shaun (2026-10-22, replaces the Tim row under the form) */
.side .team-row{display:flex;align-items:center;gap:12px;margin-bottom:14px;}
.side .team-row .faces{display:flex;flex:none;}
.side .team-row .faces img{width:40px;height:40px;border-radius:50%;object-fit:cover;object-position:50% 22%;border:2px solid #fff;}
.side .team-row .faces img+img{margin-left:-10px;}
.side .team-row b{display:block;font-family:var(--font-b);font-size:14px;color:var(--ink);}
.side .team-row small{display:block;font-family:var(--font-b);font-size:11.5px;color:var(--ink-muted);line-height:1.4;}
/* results bar: 10px gap under the nav, and a solid paper strip (full width) behind the card so
   scrolling content can't show through the gap or the rounded corners (Bolun, 2026-10-22).
   Bar is now 16px taller (10 top + 6 bottom), so the panel offset drops 16px -> 10px (visual gap
   stays 16px) and its bottom margin 16px -> 12px: 900 - 56 - 138 - 10 - 12 = 684px >= 682px panel. */
@media (min-width:900px){
  .result-bar{padding:10px 0 6px;margin-top:-10px;background:var(--paper);box-shadow:0 0 0 100vmax var(--paper);clip-path:inset(0 -100vmax);}
  .side{top:calc(56px + var(--bar-h, 0px) + 10px);max-height:calc(100vh - 56px - var(--bar-h, 0px) - 22px);}
}
/* phones and tablets (<900px): the results card stays pinned under the nav showing the big number only;
   a "Details" button opens the smaller result cards (Bolun, 2026-10-23). Button is added by calc-lead.js. */
.rb-toggle{display:none;}
@media (max-width:899px){
  .result-bar{position:sticky;top:56px;z-index:30;padding:8px 0 6px;margin-top:-8px;background:var(--paper);box-shadow:0 0 0 100vmax var(--paper);clip-path:inset(0 -100vmax);}
  .result-bar-inner{grid-template-columns:minmax(0,1fr) auto;align-items:center;box-shadow:var(--shadow-pop);}
  .result-bar .result-hero{text-align:left;border-bottom:0;padding:12px 4px 12px 18px;}
  .result-bar .result-hero .label{font-size:10.5px;margin-bottom:2px;}
  .result-bar .result-hero .amount{font-size:30px;line-height:1.15;}
  .result-bar .result-hero > :not(.label):not(.amount):not(.sr-only){display:none;}   /* .sub, .hero-note etc. */
  .result-bar.open .result-hero > :not(.label):not(.amount):not(.sr-only){display:block;font-size:12px;margin-top:4px;}
  .rb-toggle{display:inline-flex;align-items:center;gap:6px;margin-right:14px;font-family:var(--font-b);font-size:12.5px;font-weight:700;color:var(--blue-deep);background:var(--blue-pale);border:0;border-radius:100px;padding:9px 13px;cursor:pointer;}
  .rb-toggle svg{transition:transform .2s var(--ease);}
  .result-bar.open .rb-toggle svg{transform:rotate(180deg);}
  .result-bar .metrics{grid-column:1/-1;display:none;border-top:1px solid var(--line-soft);}
  .result-bar.open .metrics{display:grid;}
  .result-bar .metric{padding:12px 18px;}
  .result-bar .metric .v{font-size:20px;}
}
/* phones and tablets (<1100px, panel stacks under the calculator): one booking section only.
   The dark blue section carries the team + booking button; the panel below keeps just the form.
   Pinned results card and bottom booking bar move away while that section or the form is on screen
   (calc-lead.js adds .cta-near to <html>). Bolun, 2026-10-23. */
.band-team{display:none;}
@media (max-width:1099px){
  .band-team{display:flex;flex-direction:column;align-items:center;gap:2px;margin-bottom:18px;}
  .band-team .faces{display:flex;margin-bottom:8px;}
  .band-team .faces img{width:44px;height:44px;border-radius:50%;object-fit:cover;object-position:50% 22%;border:2px solid var(--blue-deep);}
  .band-team .faces img+img{margin-left:-10px;}
  .band-team b{font-family:var(--font-b);font-size:15px;color:var(--white);}
  .band-team small{font-family:var(--font-b);font-size:12.5px;color:rgba(214,234,248,.85);}
  .side .team-row,.side .side-cta,.side .side-note,.side .side-or{display:none;}
  .result-bar,.mbar{transition:transform .3s var(--ease);}
  .cta-near .result-bar{transform:translateY(calc(-100% - 64px));pointer-events:none;}
  .cta-near .mbar.show{transform:translateY(110%);}
}

/* ===== 2026-10-23 (Bolun) =====
   1. Phones (<900px): no blue top bar; the blue logo sits at the left of the white menu bar, tabs scroll beside it.
      Footer keeps only the disclaimer (logo and contact links hidden). Menu bar stays 56px tall.
   2. Results card backing: a solid page-colour strip from the menu bar down to the card, then a 20px fade,
      so content fades in behind the card instead of meeting a hard edge. Replaces the clip-path strip,
      which also clipped tooltips. body clips sideways overflow from the full-width strip. */
.calcnav-logo{display:none;}
@media (max-width:899px){
  .topbar{display:none;}
  .calcnav{display:flex;align-items:center;padding-left:var(--g);}
  .calcnav-logo{display:flex;align-items:center;flex:none;padding-right:12px;margin-right:2px;border-right:1px solid var(--line-soft);}
  .calcnav-logo img{height:30px;width:auto;}
  .calcnav-inner{flex:1;min-width:0;margin:0;padding:0 var(--g) 0 2px;-webkit-mask-image:linear-gradient(to right,#000 82%,transparent);mask-image:linear-gradient(to right,#000 82%,transparent);}
  .calcnav a{padding:16px 10px;}
  .footer-grid{display:none;}
  .footer-compliance{border-top:0;padding-top:0;}
}
body{overflow-x:clip;}
.result-bar{background:transparent;box-shadow:none;clip-path:none;}
.result-bar::before,.result-bar::after{content:"";position:absolute;z-index:-1;left:50%;width:100vw;transform:translateX(-50%);pointer-events:none;}
.result-bar::before{top:-1px;bottom:0;background:var(--paper);}
.result-bar::after{top:100%;height:20px;background:linear-gradient(to bottom,var(--paper),rgba(248,246,242,0));}
/* tooltips: calc-lead.js pins an open tooltip to the screen (above the icon, or below when the menu bar or
   results card is in the way) and keeps it inside the screen edges; the arrow follows the icon. */
.info .tip.tip-fixed{position:fixed;bottom:auto;right:auto;transform:none;z-index:80;}
.info .tip.tip-fixed::after{left:var(--ax,50%);right:auto;transform:translateX(-50%);}
.info .tip.tip-below::after{top:auto;bottom:100%;border-top-color:transparent;border-bottom-color:var(--blue-deep);}
/* logo link is an <a> inside .calcnav: undo the tab padding/underline so the bar stays 56px */
@media (max-width:899px){ .calcnav a.calcnav-logo{padding:0 12px 0 0;border-bottom:0;} }
/* tap / keyboard focus opens a tooltip on every calculator (was only on stamp duty's page CSS) */
.info:focus{outline:none;background:var(--blue-light);color:var(--blue-deep);}
.info:focus .tip,.info:focus-within .tip{opacity:1;visibility:visible;}
.info:focus-visible{box-shadow:0 0 0 3px rgba(30,117,184,.25);}
/* 2026-10-23 (Bolun): the dark blue booking card lives at the top of the right panel on every screen size
   (team, "Numbers looking tight", booking button), with the form card under it. */
.band-team{display:flex;flex-direction:column;align-items:center;gap:2px;margin-bottom:18px;}
.band-team .faces{display:flex;margin-bottom:8px;}
.band-team .faces img{width:44px;height:44px;border-radius:50%;object-fit:cover;object-position:50% 22%;border:2px solid var(--blue-deep);}
.band-team .faces img+img{margin-left:-10px;}
.band-team b{font-family:var(--font-b);font-size:15px;color:var(--white);}
.band-team small{font-family:var(--font-b);font-size:12.5px;color:rgba(214,234,248,.85);}
.side .cta-band{margin:0 0 14px;}
@media (min-width:1100px){
  .side .cta-band{padding:20px;}
  .side .band-team{margin-bottom:12px;}
  .side .band-team .faces{margin-bottom:6px;}
  .side .band-team .faces img{width:38px;height:38px;}
  .side .band-team b{font-size:14px;}
  .side .band-team small{font-size:11.5px;}
  .side .cta-band h2{font-size:20px;margin-bottom:8px;}
  .side .cta-band p{font-size:13px;line-height:1.5;margin-bottom:14px;}
  .side .cta-band .btn{display:flex;justify-content:center;width:100%;padding:12px 14px;font-size:14px;}
}
/* computers: the blue card + form must fit beside the results card on a 900px-tall screen
   (measured 807px vs 684px available). Heading made visible (it inherited .side h2 blue);
   team row goes side by side (-40px); form labels move into the boxes, kept for screen readers (-66px). */
.side .cta-band h2{color:var(--white);}
@media (min-width:1100px){
  .side .band-team{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;column-gap:12px;row-gap:0;align-items:center;text-align:left;}
  .side .band-team .faces{grid-row:1/3;margin-bottom:0;}
  .side .band-team b{align-self:end;}
  .side .band-team small{align-self:start;line-height:1.35;}
  .side .cta-band{text-align:left;}
  .side .cta-band p{margin-left:0;}
  .side label{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}
  .side .field{margin-bottom:8px;}
}
/* final trim to fit 684px at 1440x900 (measured 699-719px): band-to-card gap 30->12 (the flex gap
   plus band margin stacked), and 2-4px off each inner spacing. */
@media (min-width:1100px){
  .side .cta-band{margin-bottom:0;padding:18px 20px;}
  .side .band-team{margin-bottom:10px;}
  .side .cta-band h2{margin-bottom:6px;}
  .side .cta-band p{margin-bottom:12px;}
  .side .cta-band .btn{padding:11px 14px;}
  .side .side-card{padding:15px 20px;}
  .side .fineprint{margin-top:8px;}
}
/* offset's blue card has one more line of copy (689px vs 684px): panel gap 16->12, fineprint margin 8->6 */
@media (min-width:1100px){ .side{gap:12px;} .side .fineprint{margin-top:6px;} }
/* copy audit 2026-10-23: section labels and tags in sentence case, not capitals (result-card labels keep capitals) */
.section-lbl,.cmp-tag,.cmp-block h4,.cost-block h4,.side-or{text-transform:none !important;letter-spacing:0 !important;}

/* ============================================================================
   Comprehensive PDF report: band under the calculator + form dialog (calc-report.js, 2026-10-23)
   ============================================================================ */
.rpt-eyebrow{font-family:var(--font-b);font-size:12px;font-weight:700;color:var(--blue);margin-bottom:8px;}
.rpt-dialog h2{font-family:var(--font-d);font-weight:400;font-size:clamp(24px,3vw,32px);line-height:1.12;letter-spacing:-.01em;color:var(--blue-deep);margin-bottom:10px;}
.rpt-dialog h2 em{font-style:italic;}
.rpt-list{list-style:none;display:grid;grid-template-columns:minmax(0,1fr);gap:8px 20px;margin:0 0 20px;padding:0;}
@media(min-width:560px){.rpt-list{grid-template-columns:repeat(2,minmax(0,1fr));}}
.rpt-list li{display:flex;gap:9px;align-items:flex-start;font-family:var(--font-b);font-size:13.5px;font-weight:600;line-height:1.45;color:var(--ink);}
.rpt-list svg{flex:none;margin-top:2px;color:var(--green);}
.rpt-btn,.rpt-submit{display:inline-flex;align-items:center;justify-content:center;gap:10px;font-family:var(--font-b);font-weight:700;font-size:15px;padding:15px 26px;border-radius:100px;border:0;background:var(--blue);color:#fff;cursor:pointer;box-shadow:0 14px 30px -12px rgba(30,117,184,.6);transition:background .2s var(--ease),transform .25s var(--ease);}
.rpt-btn:hover,.rpt-submit:hover{background:var(--blue-dark);transform:translateY(-2px);}
.rpt-btn:focus-visible,.rpt-submit:focus-visible,.rpt-book:focus-visible,.rpt-x:focus-visible{outline:3px solid var(--blue-light);outline-offset:2px;}
.rpt-submit:disabled{opacity:.7;cursor:wait;transform:none;}
.rpt-note{font-family:var(--font-b);font-size:12px;color:var(--ink-muted);margin-top:10px;}
.rpt-lock,.rpt-lock body{overflow:hidden;}
.rpt-modal{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;padding:16px;}
.rpt-modal[hidden]{display:none;}
.rpt-backdrop{position:absolute;inset:0;background:rgba(13,63,104,.55);}
.rpt-dialog{position:relative;width:100%;max-width:480px;max-height:calc(100vh - 32px);overflow:auto;background:#fff;border-radius:var(--r-lg);box-shadow:0 30px 80px rgba(13,63,104,.35);padding:clamp(22px,4vw,32px);}
.rpt-dialog h2{font-size:clamp(22px,4vw,27px);padding-right:28px;}
.rpt-x{position:absolute;top:12px;right:12px;width:36px;height:36px;border:0;border-radius:50%;background:var(--paper);color:var(--ink-muted);font-size:22px;line-height:1;cursor:pointer;}
.rpt-x:hover{background:var(--line-soft);}
.rpt-lead{font-family:var(--font-b);font-size:14px;line-height:1.55;color:var(--ink-muted);margin-bottom:16px;}
.rpt-row{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
@media(max-width:380px){.rpt-row{grid-template-columns:1fr;}}
.rpt-field{margin-bottom:12px;}
.rpt-field[hidden]{display:none;}
.rpt-field label{display:block;font-family:var(--font-b);font-size:12.5px;font-weight:600;color:var(--ink);margin-bottom:5px;}
.rpt-req{color:var(--red);font-weight:700;margin-left:3px;}
.rpt-field input,.rpt-field select{width:100%;font-family:var(--font-b);font-size:15px;color:var(--ink);background:var(--paper);border:1.5px solid var(--line-soft);border-radius:var(--r-sm);padding:11px 12px;}
.rpt-field input:focus,.rpt-field select:focus{outline:none;border-color:var(--blue);background:#fff;}
.rpt-phone{display:grid;grid-template-columns:132px minmax(0,1fr);gap:8px;}
.rpt-ts:empty{display:none;}
.rpt-ts{margin:4px 0 10px;}
.rpt-dialog .rpt-submit{width:100%;margin-top:4px;}
.rpt-fail{font-family:var(--font-b);font-size:13px;line-height:1.55;color:var(--red);margin-top:10px;}
.rpt-fail a{text-decoration:underline;}
.rpt-fine{font-family:var(--font-b);font-size:11px;color:var(--ink-subtle);line-height:1.5;margin-top:12px;}
.rpt-fine a{text-decoration:underline;}
.rpt-done-ico{width:48px;height:48px;border-radius:50%;background:var(--green-bg);color:var(--green);display:flex;align-items:center;justify-content:center;margin-bottom:14px;}
.rpt-done-ico svg{width:24px;height:24px;}
.rpt-done-btns{display:grid;gap:10px;}
.rpt-done-btns .rpt-again{background:#fff;color:var(--blue-deep);border:1.5px solid var(--blue);box-shadow:none;}
.rpt-done-btns .rpt-again:hover{background:var(--blue-pale);}
.rpt-done-btns .rpt-again[hidden]{display:none;}
.rpt-book{display:flex;align-items:center;justify-content:center;gap:10px;font-family:var(--font-b);font-weight:700;font-size:15px;padding:15px 22px;border-radius:100px;background:var(--blue);color:#fff;}
.rpt-book:hover{background:var(--blue-dark);}
@media(prefers-reduced-motion:reduce){.rpt-btn,.rpt-submit{transition:none;}.rpt-btn:hover,.rpt-submit:hover{transform:none;}}

/* 2026-10-23 (Bolun): the report is the main action. Dark blue side card = report; white card = book a call. */
.side .rpt-side .rpt-eyebrow{color:#7EC8F4;margin-bottom:6px;}
.side .rpt-side p{margin-bottom:10px;}
.side .rpt-side .rpt-list{grid-template-columns:minmax(0,1fr);gap:5px;margin:0 0 14px;}
.side .rpt-side .rpt-list li{font-size:12.5px;font-weight:500;color:rgba(255,255,255,.92);}
.side .rpt-side .rpt-list svg{color:var(--green-soft);}
.side .rpt-side .btn{display:flex;justify-content:center;width:100%;border:0;cursor:pointer;}
.side .call-card h2{font-size:18px;margin:10px 0 4px;}
.side .call-card .lead{margin-bottom:12px;}
.side .call-card .band-team b{color:var(--ink);}
.side .call-card .band-team small{color:var(--ink-muted);}
.side .call-card .band-team .faces img{border-color:#fff;}
.side .call-card .side-cta{padding:12px 16px;font-size:14px;}
.mbar button.side-cta{border:0;cursor:pointer;width:100%;background:var(--blue-deep);box-shadow:0 14px 30px -12px rgba(13,63,104,.6);}
.mbar button.side-cta:hover{background:var(--blue-dark);}
/* top results card: "Lock my numbers" as its own column on computers; phones use the bottom bar */
.rb-lock{display:none;}
@media (min-width:900px){
  .result-bar-inner{grid-template-columns:minmax(260px,auto) minmax(0,1fr) auto;}
  .rb-lock{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;padding:12px 18px;border-left:1px solid var(--line-soft);}
  .rb-lock button{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-b);font-size:14px;font-weight:700;color:#fff;background:var(--blue-deep);border:0;border-radius:100px;padding:12px 18px;cursor:pointer;white-space:nowrap;transition:background .2s var(--ease);}
  .rb-lock button:hover{background:var(--blue-dark);}
  .rb-lock button:focus-visible{outline:3px solid var(--blue-light);outline-offset:2px;}
  .rb-lock small{font-family:var(--font-b);font-size:11px;color:var(--ink-muted);}
}
/* the numbers frozen for the report, shown at the top of the form */
.rpt-locked:empty{display:none;}
.rpt-locked{background:var(--blue-pale);border:1px solid var(--blue-light);border-radius:var(--r-md);padding:12px 14px;margin:4px 0 14px;font-family:var(--font-b);}
.rpt-locked-top{display:flex;align-items:center;gap:6px;font-size:12px;font-weight:700;color:var(--green);margin-bottom:6px;}
.rpt-locked-k{font-size:11.5px;color:var(--ink-muted);}
.rpt-locked-v{font-size:22px;font-weight:800;color:var(--blue-deep);line-height:1.2;margin-bottom:4px;}
.rpt-locked span{display:block;font-size:12.5px;color:var(--ink);}
.rpt-locked small{display:block;font-size:11.5px;color:var(--ink-muted);margin-top:6px;line-height:1.45;}

/* ============================================================================
   Typography audit 2026-10-23 (Bolun): brand guide = Montserrat only, hierarchy by weight
   (AEXPHL Knowledge Wiki/wiki/aexphl/assets/AEXPHL-DESIGN-GUIDE.html, section 02).
   Exception kept on purpose: the result figures stay in Fraunces (.result-hero .amount,
   .metric .v, the donut centre), because Bolun likes that number style.
   ============================================================================ */
.h-display,.h-section,.h-card,.calc-head h1,.card-title,.cta-band h2,.side h2,.rpt-dialog h2,.sec-head h3,.hub b{font-family:var(--font-b);}
.calc-head h1{font-weight:800;letter-spacing:-1.5px;line-height:1.1;color:#2B2C2E;}
.h-display{font-weight:800;letter-spacing:-1.5px;color:#2B2C2E;}
.h-section,.cta-band h2{font-weight:700;letter-spacing:-.6px;line-height:1.15;}
.h-card,.card-title,.side h2,.sec-head h3,.hub b{font-weight:700;letter-spacing:-.3px;}
.rpt-dialog h2{font-weight:700;letter-spacing:-.6px;line-height:1.15;}
/* emphasis inside headings: Montserrat has no italic loaded, so colour carries it */
.calc-head h1 em,.h-display em,.h-section em,.cta-band h2 em,.side h2 em,.rpt-dialog h2 em{font-style:normal;color:var(--blue);font-weight:inherit;}
.side .rpt-side h2 em,.cta-band h2 em{color:#7EC8F4;}
@media (min-width:1100px){ .side .cta-band h2{font-size:19px;} .side .call-card h2{font-size:16.5px;} }
.rpt-locked-v{font-family:var(--font-d);font-weight:500;font-size:26px;letter-spacing:-.01em;}   /* numbers keep the page's number font */


/* ===== 2026-10-28 phone fixes (outputs/_shared/REPORT-calculator-phone-qa-2026-10-28.md) =====
   1. Report pop-up: height follows the visible screen (Safari toolbars), close button 44px.
   2. Phones/tablets: report fields at 16px so iPhone does not zoom in on tap; every button
      at least 44px tall; "i" icons and sliders get a larger invisible tap area, same look. */
.rpt-dialog{max-height:calc(100vh - 32px);max-height:calc(100dvh - 32px);overscroll-behavior:contain;}
.rpt-x{width:44px;height:44px;top:8px;right:8px;}
@media (max-width:1099px){
  .rpt-field input,.rpt-field select{font-size:16px;}
  .rb-toggle,.seg button,.pills button,.reset-btn,.mini-toggle button{min-height:44px;}
  .calcnav a.calcnav-logo{min-height:44px;}
  .info::before{content:"";position:absolute;inset:-14px;}
  input[type=range]{height:32px;margin:-7px 0;padding:13px 0;background-clip:content-box;}
}
.calcnav-inner.at-end{-webkit-mask-image:none;mask-image:none;}
/* phones: when a field is focused (keyboard opening), the browser keeps it clear of the pinned menu + results card and the bottom bar */
@media (max-width:899px){ html{scroll-padding-top:calc(56px + var(--bar-h, 90px) + 8px);scroll-padding-bottom:84px;} }

/* Lender-fit questions in the report form (Bolun, 11 Nov; calc-report.js lfFields). 6px parts, no pills. */
.rpt-lf{border:0;margin:0 0 14px;padding:0 0 4px;border-bottom:1px solid var(--line-soft);min-width:0;}
.rpt-lab{display:block;font-family:var(--font-b);font-size:12.5px;font-weight:600;color:var(--ink);margin-bottom:5px;}
.rpt-opts{display:grid;gap:6px;}
.rpt-field .rpt-opt{display:flex;align-items:center;gap:10px;margin:0;font-family:var(--font-b);font-size:14px;font-weight:500;color:var(--ink);background:var(--paper);border:1.5px solid var(--line-soft);border-radius:6px;padding:10px 12px;cursor:pointer;}
.rpt-field .rpt-opt input{width:18px;height:18px;flex:none;margin:0;padding:0;accent-color:var(--blue);}
.rpt-field .rpt-opt:has(input:checked){border-color:var(--blue);background:var(--blue-pale);}
.rpt-field .rpt-opt:has(input:focus-visible){outline:3px solid var(--blue-light);outline-offset:1px;}