/* calc.css — the four calculators (mortgage, rent vs buy, rental property, cap rate), Oct 2026, on top of vx.css.
   Phone first: the answer comes first, in plain words, then the few numbers that change it (chips you tap, fields you type),
   then what the answer means — real homes at that budget, how the numbers move, a chart. On a computer the answer sits on
   the right and follows you while you change the numbers on the left; every block shares the page's one column. */

/* ---- answer + inputs ---- */
.cx{max-width:var(--maxw);margin:18px auto 0;padding:0 var(--pad);display:grid;gap:18px;grid-template-columns:minmax(0,1fr);}
@media (min-width:980px){.cx{grid-template-columns:minmax(0,1.15fr) minmax(360px,1fr);grid-template-areas:"in ans";gap:28px;align-items:start;margin-top:26px;}
  .cx-ans{grid-area:ans;position:sticky;top:calc(var(--navh) + 18px);} .cx-in{grid-area:in;}}
.cx-ans{padding:20px 20px 18px;border-radius:22px;background:var(--card);border:1px solid var(--line2);box-shadow:var(--shadow);}
.ans-k{margin:0;font:500 10.5px/1.3 var(--sans);letter-spacing:.22em;text-transform:uppercase;color:var(--gold);}
.vx .headline{margin:8px 0 0;font:300 clamp(50px,13vw,72px)/1 var(--serif);letter-spacing:-.02em;color:var(--gold);font-variant-numeric:lining-nums;}
.vx .headline small{font:400 15px/1 var(--sans);letter-spacing:0;color:var(--ink3);margin-left:4px;}
.headline.neg{color:var(--warn)!important;}
.ans-sub{margin:10px 0 0;font-size:15px;line-height:1.55;color:var(--ink2);}
/* the answer's sentence is written by the page's script: its room is kept from the first paint, so nothing below moves */
.cx-ans .ans-sub{min-height:calc(1.55em * 4);}
@media (min-width:980px){.cx-ans .ans-sub{min-height:calc(1.55em * 3);}}
.ans-sub b{color:var(--ink);font-weight:500;}
.ans-note{margin:12px 0 0;padding:11px 13px;border-radius:12px;background:var(--amber-bg);color:var(--amber);font-size:13px;line-height:1.5;}
.ans-note:empty{display:none;}
.ans-note.ok{background:rgba(71,105,81,.13);color:var(--ok);}
html.sar-dark .ans-note.ok{background:rgba(169,199,158,.12);}
.ans-bar{display:flex;height:12px;margin:16px 0 6px;border-radius:999px;overflow:hidden;background:var(--line);}
.ans-bar i{display:block;height:100%;min-width:0;transition:flex-basis .5s var(--ease);}
.ans-key{display:flex;flex-wrap:wrap;gap:4px 14px;margin:0 0 6px;padding:0;list-style:none;font-size:12.5px;color:var(--ink3);}
.ans-key li{display:inline-flex;align-items:center;gap:6px;}
.ans-key li::before{content:"";width:9px;height:9px;border-radius:3px;background:var(--k);}
.rows{margin-top:8px;}
.resrow{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:9px 0;border-bottom:1px dashed var(--line);}
.resrow:last-child{border-bottom:0;}
.vx .resrow .rl{font-size:13.5px;color:var(--ink2);letter-spacing:0;text-transform:none;}
.vx .resrow .rv2{font:500 15px/1.2 var(--sans);color:var(--ink);font-variant-numeric:tabular-nums;white-space:nowrap;}
.rows-more{margin-top:4px;}
.rows-more>summary{display:flex;align-items:center;gap:6px;min-height:44px;cursor:pointer;list-style:none;font-size:13px;color:var(--gold);}
.rows-more>summary::-webkit-details-marker{display:none;}
.rows-more>summary::after{content:"+";font:300 20px/1 var(--sans);}
.rows-more[open]>summary::after{content:"–";}
.ans-act{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px;}
.ans-act .btn{flex:1 1 150px;min-height:48px;padding:0 16px;}
.budget-note{margin:12px 0 0;font-size:12px;line-height:1.5;color:var(--ink3);}

/* ---- the inputs ---- */
.cx-in{display:flex;flex-direction:column;gap:6px;}
.grp{padding:16px 0 14px;border-bottom:1px solid var(--line);}
.grp:first-child{padding-top:4px;}
.grp:last-child{border-bottom:0;}
.grp-h{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin:0 0 10px;}
.grp-h h2,.grp-h h3{font:400 20px/1.2 var(--serif);}
.grp-h .v{font-size:13px;color:var(--ink3);text-align:right;}
.fxs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;}
.fxs--1{grid-template-columns:minmax(0,1fr);}
@media (min-width:560px){.fxs--3{grid-template-columns:repeat(3,minmax(0,1fr));}}
.fx{display:flex;flex-direction:column;gap:6px;min-width:0;}
.fx-l{font-size:12.5px;color:var(--ink2);}
.fx-in{position:relative;display:flex;align-items:center;}
.fx-in input,.fx-in select{width:100%;min-height:50px;padding:12px 14px;border-radius:12px;border:1px solid var(--line2);background:var(--card);color:var(--ink);font:400 17px/1.2 var(--sans);font-variant-numeric:tabular-nums;outline:0;-webkit-appearance:none;appearance:none;-moz-appearance:textfield;transition:border-color .2s;}
.fx-in input::-webkit-outer-spin-button,.fx-in input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0;}
.fx-in input:focus,.fx-in select:focus{border-color:var(--gold);}
.fx-in .pre,.fx-in .suf{position:absolute;font-size:15px;color:var(--ink3);pointer-events:none;}
.fx-in .pre{left:14px;} .fx-in .suf{right:14px;}
.fx-in .pre+input{padding-left:28px;}
.fx-in input:has(+.suf){padding-right:46px;}
.fx-in.big input{min-height:60px;font:300 30px/1 var(--serif);letter-spacing:-.01em;}
.fx-in.big .pre{font:300 26px/1 var(--serif);left:16px;}
.fx-in.big .pre+input{padding-left:36px;}
.fx-h{font-size:12px;line-height:1.45;color:var(--ink3);margin:0;}
.fx-h b{color:var(--ink2);font-weight:500;}
.grp .chips{margin-top:10px;}
.grp .chips .chip{min-height:44px;}
.sl{width:100%;margin:6px 0 0;accent-color:var(--olive);height:44px;cursor:pointer;}
.mine-tag{display:inline-flex;align-items:center;margin-left:8px;padding:3px 8px;border-radius:999px;background:color-mix(in srgb,var(--fill) 16%,transparent);color:var(--ink);font-size:11px;letter-spacing:.06em;text-transform:uppercase;vertical-align:middle;}
.mine-tag[hidden]{display:none;}
.toggle{display:flex;align-items:flex-start;gap:12px;padding:12px 0 2px;cursor:pointer;font-size:14px;color:var(--ink2);}
/* a 24 px box drawn inside a 44 px touch target (a 10 px transparent border a side is part of the control; negative margins keep
   the row where it was): audit C M12, Oct 24 — the rental calculator's 22 px box took 0 of 4 touches 21 px from its centre */
.toggle input{-webkit-appearance:none;appearance:none;box-sizing:content-box;width:24px;height:24px;margin:-10px;border:10px solid transparent;border-radius:17px;background:var(--card) center/15px 15px no-repeat;background-clip:padding-box;box-shadow:inset 0 0 0 1.5px var(--olive);flex:none;cursor:pointer;}
.toggle input:checked{background-color:var(--olive);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F7F5EE' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E");}
html.sar-dark .toggle input:checked{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230B0A07' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E");}
.toggle input:focus-visible{outline:2px solid var(--olive);outline-offset:-7px;}
details.grp>summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:44px;}
details.grp>summary::-webkit-details-marker{display:none;}
details.grp>summary h2,details.grp>summary h3{font:400 20px/1.2 var(--serif);}
details.grp>summary .v{font-size:13px;color:var(--ink3);margin-left:auto;}
details.grp>summary::after{content:"+";font:300 24px/1 var(--sans);color:var(--gold);transition:transform .3s var(--ease);}
details.grp[open]>summary::after{transform:rotate(45deg);}
details.grp[open]>summary{margin-bottom:10px;}

/* ---- the answer follows you on a phone: a slim bar at the bottom while the answer card is off screen ---- */
.ansbar{position:fixed;left:10px;right:10px;bottom:calc(10px + env(safe-area-inset-bottom));z-index:60;display:flex;align-items:center;gap:10px;padding:8px 8px 8px 18px;border-radius:999px;
  background:var(--veil);-webkit-backdrop-filter:blur(18px) saturate(1.3);backdrop-filter:blur(18px) saturate(1.3);border:1px solid var(--line2);box-shadow:0 18px 40px -18px rgba(0,0,0,.55);
  transform:translateY(140%);transition:transform .35s var(--ease);}
.ansbar.on{transform:none;}
.ansbar .k{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.15;}
.ansbar .k span{font-size:11px;color:var(--ink3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.ansbar .k b{font:400 22px/1.1 var(--serif);color:var(--ink);}
.ansbar .btn{min-height:44px;padding:0 16px;}
@media (min-width:980px){.ansbar{display:none;}}
.page-end-space{height:calc(84px + env(safe-area-inset-bottom));}
@media (min-width:980px){.page-end-space{display:none;}}

/* ---- homes at this budget (the Rohit list, read from /rohit-homes/homes.json) ---- */
.homes{display:grid;gap:10px;grid-template-columns:minmax(0,1fr);}
@media (min-width:700px){.homes{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media (min-width:1100px){.homes{grid-template-columns:repeat(3,minmax(0,1fr));}}
.hm{display:grid;grid-template-columns:96px minmax(0,1fr);gap:12px;align-items:center;padding:8px;border-radius:16px;border:1px solid var(--line);background:var(--card);text-decoration:none;color:inherit;transition:border-color .2s;}
.hm:hover{border-color:var(--gold);}
.hm img{width:96px;height:76px;border-radius:11px;object-fit:cover;background:var(--bg2);}
.hm b{display:block;font:400 19px/1.15 var(--serif);color:var(--ink);}
.hm .p{font-size:12.5px;color:var(--gold);font-weight:500;}
.hm .s{display:block;font-size:12.5px;line-height:1.35;color:var(--ink3);}
/* every builder partner's new builds (Oct 11, 2026): each card names its builder and what its price is */
.hm .k{display:block;margin-bottom:2px;font:500 10.5px/1.3 var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--ink3);}
.hm-ph{display:flex;align-items:center;justify-content:center;width:96px;height:76px;border-radius:11px;background:var(--bg2);font:400 15px/1 var(--serif);color:var(--ink3);}
.hm .s.c{font-size:11.5px;}
.hm-ex{position:relative;display:block;width:96px;height:76px;}
.hm-ex i{position:absolute;left:5px;bottom:5px;padding:3px 6px;border-radius:6px;background:rgba(11,10,7,.72);color:#F4F2EB;font:500 9.5px/1 var(--sans);font-style:normal;letter-spacing:.06em;text-transform:uppercase;}
.homes-rae{margin-top:14px;padding-top:10px;border-top:1px solid var(--line);font-size:11.5px;line-height:1.6;color:var(--ink3);}
.homes-rae p{margin:0 0 6px;}
.homes-empty{padding:16px;border-radius:14px;background:var(--chip);color:var(--ink2);font-size:14px;}
.links{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px;}

/* ---- "what changes it": a small table ---- */
.whatif{width:100%;border-collapse:collapse;font-size:14px;font-variant-numeric:tabular-nums;}
.whatif th,.whatif td{padding:11px 10px;text-align:right;border-bottom:1px solid var(--line);}
.whatif th:first-child,.whatif td:first-child{text-align:left;}
.whatif thead th{font:500 10.5px/1.3 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--ink3);}
.whatif td{color:var(--ink2);}
.whatif tr.me td{color:var(--ink);font-weight:500;background:rgba(84,78,46,.09);}
html.sar-dark .whatif tr.me td{background:rgba(201,190,154,.10);}
.whatif td small{display:block;font-size:11px;color:var(--ink3);font-weight:400;}
.scroll-x{overflow-x:auto;margin:0 calc(-1*var(--pad));padding:0 var(--pad);}

/* ---- charts (inline SVG drawn by the page's script; each carries a sentence for screen readers) ---- */
.chart{width:100%;height:auto;display:block;overflow:visible;}
.chart text{font:400 11px/1 var(--sans);fill:var(--ink3);}
.chart .grid line{stroke:var(--line);stroke-width:1;}
.chart .l1{fill:none;stroke:var(--c1);stroke-width:2.5;}
.chart .l2{fill:none;stroke:var(--c3);stroke-width:2.5;stroke-dasharray:6 5;}
.chart .a1{fill:color-mix(in srgb,var(--c1) 16%,transparent);}
.chart .dot{fill:var(--c1);}
.chart .mark{stroke:var(--gold);stroke-width:1.2;stroke-dasharray:3 4;}
.chart .lbl{fill:var(--ink);font-weight:500;}
.chart-key{display:flex;flex-wrap:wrap;gap:6px 16px;margin:10px 0 0;padding:0;list-style:none;font-size:12.5px;color:var(--ink3);}
.chart-key li{display:inline-flex;align-items:center;gap:7px;}
.chart-key li::before{content:"";width:18px;height:3px;border-radius:2px;background:var(--k);}
.chart-key li.dash::before{background:repeating-linear-gradient(90deg,var(--k) 0 6px,transparent 6px 10px);}
.card{padding:18px;border-radius:18px;background:var(--card);border:1px solid var(--line);}
.two{display:grid;gap:18px;grid-template-columns:minmax(0,1fr);}
@media (min-width:900px){.two{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;}}
.big-say{font:300 clamp(22px,4.8vw,30px)/1.25 var(--serif);color:var(--ink);margin:0;}
.big-say b{font-weight:400;color:var(--gold);}
.gst{margin-top:12px;padding:14px 16px;border-radius:14px;background:var(--chip);font-size:13.5px;line-height:1.55;color:var(--ink2);}
.gst b{color:var(--ink);font-weight:500;}
.gst a{color:var(--gold);}
.vx svg.chart{width:100%;height:auto;stroke:none;}
.ans-key li[hidden],.chart-key li[hidden]{display:none;}
/* preset chips sit in one even row (nothing wraps alone, nothing cut off) */
.chips.even{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:6px;}
.vx .chips.even .chip{justify-content:center;padding:0 4px;font-size:13.5px;}
@media (max-width:559px){details.grp>summary .v{display:none;} .grp-h{flex-direction:column;align-items:flex-start;gap:2px;} .grp-h .v{text-align:left;}}

/* ---- the GST rebate calculator (Oct 11, 2026, t-186) ---- */
.q-ch{margin-top:6px;}
.vx .q-ch.chips.even .chip{min-height:44px;height:auto;line-height:1.25;padding:6px 8px;white-space:normal;text-align:center;}
p.fx-l{margin:0;}
.gst-def{margin-top:8px;}
.gst-def summary{cursor:pointer;color:var(--gold);min-height:36px;display:flex;align-items:center;}
.gst-def p{margin:6px 0 0;}
.gst-def a,.gst-links a,.gst-src a,.cx-in .fx-h a{color:var(--gold);}
.gst-cmp{display:grid;gap:18px;grid-template-columns:minmax(0,1fr);}
@media (min-width:760px){.gst-cmp{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;}}
.gst-sc{padding:18px;border-radius:18px;background:var(--card);border:1px solid var(--line);transition:opacity .2s,border-color .2s;}
.gst-sc header{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;}
.gst-sc h3{margin:0;font:400 21px/1.2 var(--serif);color:var(--ink);}
.gst-tag{flex:none;font:500 10.5px/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;padding:7px 10px;border-radius:999px;background:var(--chip);color:var(--ink2);}
.gst-tag:empty{display:none;}
.gst-sc.best{border-color:var(--gold);box-shadow:inset 0 0 0 1px var(--gold);}
.gst-sc.best .gst-tag{background:var(--gold);color:var(--fill-ink);}
.gst-sc.off{opacity:.62;}
.gst-st{margin:8px 0 4px;font-size:13px;line-height:1.5;color:var(--ink3);}
.gst-links,.gst-src{margin:0;padding-left:18px;font-size:14px;line-height:1.6;color:var(--ink2);}
.gst-links li,.gst-src li{margin:0 0 8px;}
.gst-src span{color:var(--ink3);font-size:12.5px;}
#gst-incl p{font-size:14.5px;line-height:1.65;color:var(--ink2);}
/* what you actually pay (Oct 11, 2026): the price you have and the first-time question, then the answer, then the rest —
   on a phone in that order (the answer on the first screen); on a computer the questions left, the answer right */
@media (min-width:980px){.gst-cx{grid-template-areas:"in1 ans" "in2 ans";grid-template-rows:auto 1fr;} .gst-cx .gst-in1{grid-area:in1;} .gst-cx .gst-in2{grid-area:in2;}}
@media (max-width:979px){main[data-calc="gst"] .vhero h1{font-size:clamp(30px,8.4vw,48px);} main[data-calc="gst"] .vhero .crumbs,main[data-calc="gst"] .vh-top{margin-bottom:4px;}
  main[data-calc="gst"] .vhero .live{display:none;} /* said again in step 1 and "How it works" */
  .gst-cx .grp{padding:8px 0;} .gst-cx{gap:8px;margin-top:8px;} .gst-cx .grp-h{margin-bottom:6px;} .gst-cx .grp-h h2{font-size:18px;}
  .gst-in1 .chips[data-for="gst_price"]{display:none;} /* presets: on a computer; a phone types the price */
  .gst-def summary{min-height:36px;}}
.q-why{margin:6px 0 0;font-size:12.5px;line-height:1.45;color:var(--ink3);}
.vx .linkish.gst-full{display:inline-flex;align-items:center;margin-top:6px;padding:0;border:0;background:transparent;color:var(--gold);font:400 13px/1.35 var(--sans);text-align:left;text-decoration:underline;text-underline-offset:3px;min-height:44px;cursor:pointer;}
.vx .linkish.gst-full[aria-pressed="true"]{color:var(--ink);text-decoration:none;}
.vx .linkish.gst-full[aria-pressed="true"]::before{content:"✓ ";color:var(--gold);}
.gst-head small{display:block;margin:6px 0 0 2px!important;}
.wf{margin-top:10px;border-top:1px solid var(--line);}
.wf-row{display:grid;grid-template-columns:16px minmax(0,1fr) auto;gap:8px;align-items:baseline;padding:8px 0;border-bottom:1px dashed var(--line);}
.wf-row[hidden]{display:none;}
.wf-s{font:500 15px/1 var(--sans);color:var(--ink3);text-align:center;}
.wf-l{font-size:14px;line-height:1.35;color:var(--ink2);}
.wf-l small{display:block;margin-top:2px;font-size:11.5px;color:var(--ink3);}
.wf-v{font:500 15px/1.2 var(--sans);color:var(--ink);font-variant-numeric:tabular-nums;white-space:nowrap;}
.wf-row.sub .wf-l,.wf-row.sub .wf-v{color:var(--ink);font-weight:500;}
.wf-row.total{border-bottom:0;padding-top:12px;}
.wf-row.total .wf-l{color:var(--ink);font-weight:500;}
.wf-row.total .wf-v{font:400 24px/1.1 var(--serif);color:var(--gold);}
.gst-exact{margin-top:8px;font-size:13px;}
.gst-exact summary{cursor:pointer;color:var(--gold);min-height:44px;display:flex;align-items:center;}
.gst-mo{margin-top:4px;}
.vx .gst-mo .rl small{display:block;font-size:11.5px;color:var(--ink3);}
.gst-steps{margin:0;padding-left:22px;display:grid;gap:12px;font-size:15px;line-height:1.6;color:var(--ink2);}
.gst-steps b{color:var(--ink);font-weight:500;}
.gst-gloss{display:grid;gap:10px;margin:18px 0 0;grid-template-columns:minmax(0,1fr);}
@media (min-width:760px){.gst-gloss{grid-template-columns:repeat(3,minmax(0,1fr));}}
.gst-gloss div{padding:14px 16px;border-radius:14px;background:var(--card);border:1px solid var(--line);}
.gst-gloss dt{font:400 17px/1.25 var(--serif);color:var(--ink);}
.gst-gloss dd{margin:6px 0 0;font-size:13.5px;line-height:1.55;color:var(--ink2);}
.gst-p{font-size:14.5px;line-height:1.65;color:var(--ink2);}
.gst-sc .wf{margin-top:12px;}
/* the two parts of the GST that comes back, each saying where it goes */
.vx .resrow.part .rl small{display:block;margin-top:2px;font-size:11.5px;line-height:1.35;color:var(--ink3);}
.resrow[hidden]{display:none;}
.gst-how{margin-top:18px;padding:16px 18px;border-radius:16px;background:var(--chip);}
.gst-how h3{margin:0 0 8px;font:400 19px/1.25 var(--serif);color:var(--ink);}
.gst-how p{margin:0 0 10px;font-size:14px;line-height:1.6;color:var(--ink2);}
.gst-how p:last-child{margin-bottom:0;}
.gst-how b{color:var(--ink);font-weight:500;}
.gst-how a{color:var(--gold);}
/* the first-time rebate: taken off at closing, or claimed back after it (Oct 11, 2026) — it decides what is financed */
.cx-ans .gst-when{min-height:0;margin-top:8px;}
.gst-howq{margin-top:12px;padding-top:12px;border-top:1px solid var(--line);}
@media (max-width:560px){.vx .gst-howq .q-ch.chips.even{grid-auto-flow:row;grid-auto-columns:auto;}}
.vx .resrow .rl small.mo-on{display:block;margin-top:2px;font-size:11.5px;line-height:1.35;color:var(--ink3);}
.vx .resrow .rl small.mo-on:empty{display:none;}

/* ---- the phone pass (Oct 11, 2026): measured on iPhone sizes (440, 390, 375 wide) in Safari's engine and Chrome's;
   the computer view (980 px and up) is unchanged ---- */
/* "Compare lenders" and its arrow-out icon touched */
.rate-row .xlink{gap:7px;}
/* the sources of "New builds near this price", in small print under the homes (the sentence above stays plain) */
.homes-src{margin:10px 0 0;font-size:11.5px;line-height:1.55;color:var(--ink3);}
.homes-src[hidden]{display:none;}
/* the GST questions: an answer that needs two lines on a phone breaks between phrases, never inside one ("A builder’s price —
   “GST / included”", "No one — an / investment"); the phrases are marked in the page, the lines balanced. The answers keep
   their one row, so the answer card stays on a phone's first screen */
.vx .q-ch .chip{text-wrap:balance;}
.q-ch .nw{white-space:nowrap;}
@media (max-width:979px){
  /* one start for all five: the Back pill sits 12 px under the header, as on the GST page (the others had 48 px) */
  main[data-calc] .vhero{padding-top:12px;}
  /* the price slider: a 28 px handle in a 44 px touch row, on a track you can see in both themes (the unfilled part was
     invisible on the dark card); the filled part is drawn up to the handle (--p, set by the page's script) */
  .vx .sl{-webkit-appearance:none;appearance:none;height:44px;margin:6px 0 0;background:transparent;}
  .vx .sl::-webkit-slider-runnable-track{height:4px;border-radius:2px;background:linear-gradient(90deg,var(--fill) 0 var(--p,30%),color-mix(in srgb,var(--ink) 24%,transparent) var(--p,30%) 100%);}
  .vx .sl::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:28px;height:28px;margin-top:-12px;border-radius:50%;border:3px solid var(--card);background:var(--fill);box-shadow:0 2px 10px rgba(0,0,0,.35);cursor:pointer;}
  .vx .sl::-moz-range-track{height:4px;border-radius:2px;background:color-mix(in srgb,var(--ink) 24%,transparent);}
  .vx .sl::-moz-range-progress{height:4px;border-radius:2px;background:var(--fill);}
  .vx .sl::-moz-range-thumb{box-sizing:border-box;width:28px;height:28px;border-radius:50%;border:3px solid var(--card);background:var(--fill);box-shadow:0 2px 10px rgba(0,0,0,.35);cursor:pointer;}
  /* answer buttons: a label never breaks ("Talk to us about / it"); two that do not fit side by side stack, full width */
  .ans-act .btn{flex:1 1 auto;white-space:nowrap;}
  /* "More tools": the label on its own line, the tools under it from the column's edge */
  .more-tools .lbl{flex:0 0 100%;margin:0 0 4px;}
  /* the answer bar on the page's column (it sat 10 px from the screen edge, the column is 18–22 px), its label readable */
  .ansbar{left:var(--pad);right:var(--pad);}
  .ansbar .k span{font-size:12.5px;color:var(--ink2);}
}
/* the narrowest phones (375–419 wide): the button gives the answer room, so "$2,630 a month" keeps one line */
@media (max-width:419px){.ansbar{padding-left:16px;} .ansbar .btn{padding:0 13px;letter-spacing:.1em;} .ansbar .k b{font-size:20px;}}