/* vx.css — the Rohit pages' visual language (scripts/new-homes/vision.css, Oct 10, 2026) for the hand-built pages that
   follow it: the four calculators, the YEG Map and the builder pages (Vita first). Same tokens, same type, same chips,
   rate box, sheets and rows, so a visitor moving from a Rohit home to the mortgage calculator to a Vita lot feels one site.
   Brand: olive #544E2E, light olive #B3AA8D, stone #E8E8E3, black; Spectral + Jost (self-hosted, /assets/fonts/).
   Dark is the site default (html.sar-dark); light follows the visitor's toggle. assets/theme.css loads first; the few of
   its light-mode rules that would repaint these components (every field beige, every link olive) are answered at the end. */

/* stand-in fonts sized to the brand fonts, so nothing re-wraps when they arrive (the Rohit pages' measurements, Oct 10) */
@font-face{font-family:'Spectral Fallback';font-style:normal;font-weight:100 400;src:local('Georgia');size-adjust:96.9%;}
@font-face{font-family:'Spectral Fallback';font-style:normal;font-weight:500 900;src:local('Georgia');size-adjust:98.6%;}
@font-face{font-family:'Spectral Fallback';font-style:italic;font-weight:100 900;src:local('Georgia Italic'),local('Georgia-Italic'),local('Georgia');size-adjust:88.2%;}
@font-face{font-family:'Jost Fallback';font-style:normal;font-weight:100 350;src:local('Arial'),local('ArialMT');size-adjust:93.1%;}
@font-face{font-family:'Jost Fallback';font-style:normal;font-weight:351 900;src:local('Arial'),local('ArialMT');size-adjust:95.2%;}
:root{
  --bg:#EFEDE5; --bg2:#E6E3D7; --card:#FBFAF4; --ink:#26231A; --ink2:#4A4536; --ink3:#67614B;
  --line:rgba(52,47,28,.13); --line2:rgba(52,47,28,.24); --gold:#6B6142; --olive:#544E2E; --fill:#544E2E; --fill-ink:#F7F5EE;
  --chip:#E6E2D5; --ok:#476951; --warn:#8A4B1E; --amber:#6B4E12; --amber-bg:#F2E8CF; --veil:rgba(239,237,229,.9);
  --shadow:0 1px 2px rgba(40,36,20,.06),0 14px 34px -20px rgba(40,36,20,.38);
  --r:18px; --r2:14px; --serif:Spectral,'Spectral Fallback',Georgia,'Times New Roman',serif; --sans:Jost,'Jost Fallback',system-ui,-apple-system,'Segoe UI',sans-serif;
  --pad:var(--col-pad); --ease:cubic-bezier(.2,.8,.2,1); --navh:57px;
  --maxw:var(--col-max); /* the page's one column — the site's (assets/theme.css --col-pad / --col-max, Oct 25): every title, row, grid, map and list shares its edges with the header's logo and the footer (Fadi, Oct 10) */
  --c1:#544E2E; --c2:#B3AA8D; --c3:#8C9A7B; --c4:#C9B48A; /* chart colours: olive, light olive, sage, wheat */
}
html.sar-dark{
  --bg:#0B0A07; --bg2:#121109; --card:#17160F; --ink:#EFECE3; --ink2:rgba(239,236,227,.78); --ink3:rgba(239,236,227,.6);
  --line:rgba(232,228,214,.10); --line2:rgba(232,228,214,.20); --gold:#CFC4A0; --olive:#B3AA8D; --fill:#C9BE9A; --fill-ink:#0B0A07;
  --chip:#1F1E15; --ok:#A9C79E; --warn:#E3A57A; --amber:#E9BC72; --amber-bg:rgba(233,188,114,.14); --veil:rgba(11,10,7,.86); --shadow:none;
  --c1:#C9BE9A; --c2:#6E6850; --c3:#A9C79E; --c4:#E9BC72;
}
@view-transition{navigation:auto;}
::view-transition-old(root),::view-transition-new(root){animation-duration:.28s;}
@media (prefers-reduced-motion:reduce){@view-transition{navigation:none;} *{animation-duration:.001s!important;transition-duration:.001s!important;scroll-behavior:auto!important;}}

*,*::before,*::after{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html{scroll-padding-top:calc(var(--navh) + 20px);}
body.vx{margin:0;background:var(--bg);color:var(--ink);font:400 15px/1.55 var(--sans);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;}
:where(body.vx) img{display:block;max-width:100%;height:auto;}
:where(body.vx) a{color:inherit;}
:where(body.vx) button{font:inherit;color:inherit;}
body.vx :focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:6px;}
.skip{position:absolute;left:-999px;top:8px;z-index:9999;background:var(--fill);color:var(--fill-ink);padding:10px 14px;border-radius:10px;}
.skip:focus{left:12px;}
body.vx main{display:block;overflow-x:clip;}
body.vx h1,body.vx h2,body.vx h3{font-family:var(--serif);font-weight:400;letter-spacing:-.01em;margin:0;color:var(--ink);}
.vx .eyebrow{font:500 10.5px/1.3 var(--sans);letter-spacing:.24em;text-transform:uppercase;color:var(--gold);margin:0 0 12px;}
.vx .hint{font-size:12.5px;line-height:1.55;color:var(--ink3);margin:10px 0 0;}
.vx svg{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;}
/* the site header (assets/site-nav.js, deferred) takes the .nh-slot's place: the page keeps its room from the first paint —
   the slot's height is theme.css's (the header's own measured step, t-222) */
.col{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--pad);}

/* ---- buttons, chips, pills ---- */
.vx .btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:50px;padding:0 22px;border-radius:999px;border:1px solid transparent;text-decoration:none;cursor:pointer;
  font:500 12px/1.2 var(--sans);letter-spacing:.14em;text-transform:uppercase;transition:transform .3s var(--ease),background .25s,border-color .25s,color .25s;text-align:center;}
.vx .btn:active{transform:scale(.97);}
.vx .btn-fill{background:var(--fill);color:var(--fill-ink);}
.vx .btn-ghost{background:transparent;border-color:var(--line2);color:var(--ink);}
.vx .btn-ghost:hover{border-color:var(--gold);}
.vx .btn svg{width:16px;height:16px;}
.chips{display:flex;flex-wrap:wrap;gap:8px;}
.vx .chip{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 15px;border-radius:999px;border:1px solid var(--line2);background:var(--card);font:400 14px/1.2 var(--sans);cursor:pointer;color:var(--ink);transition:background .2s,border-color .2s,color .2s;}
.vx .chip[aria-pressed="true"],.vx .chip[aria-selected="true"]{background:var(--fill);border-color:var(--fill);color:var(--fill-ink);}
.vx .chip .c{opacity:.65;font-size:12px;}
.vx .chip[aria-pressed="true"] .c,.vx .chip[aria-selected="true"] .c{opacity:.85;}   /* on the filled chip .65 read 4.3:1 (light); .85 gives 6:1 (Oct 26 contrast gate) */
.vx .chip:disabled{opacity:.45;cursor:default;}
.vpill{display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:0 10px 0 13px;border-radius:999px;background:var(--chip);border:1px solid var(--line);font-size:13px;color:var(--ink);cursor:pointer;}
.vpill i{font-style:normal;opacity:.6;font-size:15px;line-height:1;padding:0 3px;}
.tag{display:inline-flex;align-items:center;font:500 10.5px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;padding:7px 10px;border-radius:999px;background:var(--chip);color:var(--ink2);}
.tag--ok{background:color-mix(in srgb,var(--ok) 16%,transparent);color:var(--ok);}
.tag--amber{background:var(--amber-bg);color:var(--amber);}

/* ---- hero ---- */
.vhero{max-width:var(--maxw);margin:0 auto;padding:clamp(22px,5vh,60px) var(--pad) 8px;}
.vhero h1{font-weight:300;font-size:clamp(38px,9.6vw,78px);line-height:1;letter-spacing:-.025em;}
.vhero h1 em{font-style:italic;color:var(--gold);}
.vhero .lede{margin:14px 0 0;max-width:60ch;font-size:15.5px;color:var(--ink2);}
.live{display:flex;align-items:flex-start;gap:10px;margin:14px 0 0;font-size:13.5px;line-height:1.5;color:var(--ink2);}
.live b{color:var(--ink);font-weight:500;}
.pulse{width:8px;height:8px;margin-top:6px;border-radius:50%;background:var(--ok);flex:none;animation:pulse 2.4s infinite;}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(120,170,120,.55);}70%{box-shadow:0 0 0 10px rgba(120,170,120,0);}100%{box-shadow:0 0 0 0 rgba(120,170,120,0);}}
/* phones (Oct 11, 2026): the dot hangs in the margin, so the sentence starts on the column with the heading above it (it was
   indented 18 px by the dot) */
/* the live dot hangs in the margin so the words start on the heading's edge (Fadi, Oct 12: "Yes to all" — the computer view gets the same fix as the phone) */
.live{position:relative;} .live .pulse{position:absolute;left:-15px;top:0;}
.crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:6px;font-size:12px;color:var(--ink3);margin:0 0 14px;}
.crumbs a{text-decoration:none;color:inherit;display:inline-flex;align-items:center;min-height:44px;margin:-6px 0;}
.crumbs a:hover{color:var(--gold);}
/* "Back" (assets/theme.css .sn-back) and the breadcrumbs share one row; on a phone the pill alone (it names the page above;
   the breadcrumbs stay in the page's structured data), so a calculator's answer still shows on the first screen (Fadi, Oct 11) */
.vh-top{display:flex;flex-wrap:wrap;align-items:center;gap:6px 16px;margin:0 0 14px;}
.vh-top .sn-back,.vh-top .crumbs{margin:0;}
@media (max-width:599px){.vh-top .crumbs{display:none;}}

/* ---- section headers ---- */
.sec{max-width:var(--maxw);margin:clamp(34px,6vh,64px) auto 0;padding:0 var(--pad);}
.sec-h{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin:0 0 14px;}
.sec-h h2{font-size:clamp(24px,5.6vw,34px);line-height:1.12;}
.sec-h p{margin:5px 0 0;font-size:13.5px;color:var(--ink3);max-width:70ch;}

/* ---- the plain-words search box (the Rohit hub's), used by the YEG Map ---- */
.ask-box{display:flex;align-items:center;gap:12px;min-height:60px;padding:0 8px 0 20px;border-radius:20px;background:var(--card);border:1px solid var(--line2);box-shadow:var(--shadow);transition:border-color .25s,box-shadow .25s;cursor:text;}
.ask-box:focus-within{border-color:var(--gold);box-shadow:0 0 0 4px color-mix(in srgb,var(--gold) 18%,transparent),var(--shadow);}
.ask-box>svg{color:var(--gold);width:20px;height:20px;}
.ask-box input{flex:1;min-width:0;border:0;outline:0;background:transparent;color:var(--ink);font:400 16.5px/1.3 var(--sans);padding:12px 0;-webkit-appearance:none;appearance:none;}
.ask-box input:focus-visible{outline:none;}
.ask-box input::placeholder{color:var(--ink3);opacity:1;}
.ask-box input::-webkit-search-cancel-button{display:none;}
.ask-go{flex:none;width:46px;height:46px;border-radius:14px;border:0;background:var(--fill);color:var(--fill-ink);display:flex;align-items:center;justify-content:center;cursor:pointer;}
.ask-out{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:12px 0 0;}
.ask-out:empty{display:none;}
.ask-out .got{font-size:12.5px;color:var(--ink3);}
.ask-try{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0 0;}
.vx .try{min-height:44px;padding:0 15px;border-radius:999px;border:1px solid var(--line2);background:transparent;font-size:13px;color:var(--ink2);cursor:pointer;transition:border-color .2s,color .2s;}
.vx .try:hover{border-color:var(--gold);color:var(--ink);}

/* ---- the rate: the published rate is a chip; beside it, a box for the rate a bank offered (Fadi, Oct 10, d-091) ---- */
.rate-row{display:flex;flex-wrap:wrap;align-items:center;gap:8px;}
.rate-mine{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 14px 0 15px;border-radius:999px;border:1px dashed var(--line2);background:var(--card);font-size:14px;color:var(--ink2);cursor:text;transition:border-color .2s,background .2s;}
.rate-mine:focus-within{border-style:solid;border-color:var(--gold);}
.rate-mine.on{border-style:solid;border-color:var(--fill);background:color-mix(in srgb,var(--fill) 12%,var(--card));color:var(--ink);}
.rate-mine input{width:5.6ch;border:0;outline:0;padding:0;background:transparent;color:var(--ink);font:500 16px/1 var(--sans);text-align:right;-moz-appearance:textfield;appearance:textfield;}
.rate-mine input::-webkit-outer-spin-button,.rate-mine input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0;}
.rate-mine input::placeholder{color:var(--ink3);opacity:1;}
.rate-mine i{font-style:normal;color:var(--ink3);}

/* ---- rows you swipe (with arrows for a mouse, added by assets/calculators/ui.js) ---- */
.rail-wrap{position:relative;}
.rail{display:flex;gap:14px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;padding:4px 0 12px;scrollbar-width:none;}
.rail::-webkit-scrollbar{display:none;}
.rail>*{flex:0 0 auto;scroll-snap-align:start;}
.rail-nav{display:none;}
@media (hover:hover) and (pointer:fine){
  .rail-nav{position:absolute;top:50%;z-index:5;display:flex;align-items:center;justify-content:center;width:46px;height:46px;margin-top:-23px;border-radius:50%;
    border:1px solid var(--line2);background:var(--veil);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);color:var(--ink);cursor:pointer;box-shadow:0 10px 26px -12px rgba(0,0,0,.5);transition:transform .25s var(--ease);}
  .rail-nav:hover{transform:scale(1.06);}
  .rail-nav.prev{left:-23px;} .rail-nav.next{right:-23px;}
  .rail-nav[hidden]{display:none;}
}

/* ---- FAQ, guide, notes ---- */
.faq details{border-bottom:1px solid var(--line);}
.faq summary{cursor:pointer;list-style:none;padding:16px 34px 16px 0;position:relative;font:400 18px/1.35 var(--serif);color:var(--ink);}
.faq summary::-webkit-details-marker{display:none;}
.faq summary::after{content:"+";position:absolute;right:4px;top:14px;font:300 24px/1 var(--sans);color:var(--gold);transition:transform .3s var(--ease);}
.faq details[open] summary::after{transform:rotate(45deg);}
.faq details p{margin:0 0 16px;color:var(--ink2);max-width:72ch;}
.faq details p b{color:var(--ink);font-weight:500;}
.faq details p a{color:var(--gold);}
.vguide{display:flex;gap:18px;align-items:center;max-width:var(--maxw);margin:clamp(40px,7vh,70px) auto 0;padding:0 var(--pad);}
.vguide img{width:96px;height:96px;border-radius:50%;object-fit:cover;flex:none;}
.vguide h2{font-size:26px;}
.vguide p{margin:6px 0 0;color:var(--ink2);max-width:56ch;}
.guide-a{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px;}
@media (max-width:560px){.vguide{flex-direction:column;align-items:flex-start;}}
.vguide .byline{margin:10px 0 0;font-size:12.5px;letter-spacing:.02em;color:var(--ink3);}   /* "Reviewed by Fadi Georgi, REALTOR® · <date>" (Oct 25, 2026) */
.vguide .byline a{color:inherit;text-decoration:underline;text-underline-offset:3px;}
.datanote{max-width:calc(var(--maxw) - 2*var(--pad));width:calc(100% - 2*var(--pad));margin:clamp(40px,7vh,70px) auto 0;padding:18px 0 26px;font-size:12px;line-height:1.7;color:var(--ink3);border-top:1px solid var(--line);}
.datanote b{color:var(--ink2);font-weight:500;}
.datanote a{color:var(--gold);}
.more-tools{display:flex;flex-wrap:wrap;align-items:center;gap:8px;}
.more-tools .lbl{font:500 10.5px/1 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--ink3);margin-right:4px;}
.vx a.xlink{display:inline-flex;align-items:center;min-height:44px;padding:0 16px;border-radius:999px;border:1px solid var(--line2);font:400 13.5px/1 var(--sans);letter-spacing:0;text-transform:none;color:var(--ink);text-decoration:none;}
.vx a.xlink:hover{border-color:var(--gold);}

/* ---- sheets (dialogs that rise from the bottom on phones; tap outside to close is coded for iPhone) ---- */
dialog.sheet{position:fixed;inset:auto 0 0 0;margin:0;width:100%;max-width:none;max-height:min(88dvh,820px);padding:0;border:0;border-radius:24px 24px 0 0;background:var(--bg);color:var(--ink);overflow:hidden;box-shadow:0 -20px 60px -20px rgba(0,0,0,.5);}
dialog.sheet[open]{display:flex;animation:sheetUp .42s var(--ease);}
dialog.sheet::backdrop{background:rgba(8,7,4,.55);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);}
@keyframes sheetUp{from{transform:translateY(100%);}to{transform:none;}}
@media (min-width:760px){dialog.sheet{inset:0;margin:auto;width:min(600px,92vw);max-height:min(86dvh,860px);border-radius:24px;}dialog.sheet[open]{animation:pop2 .32s var(--ease);}}
@keyframes pop2{from{opacity:0;transform:translateY(18px) scale(.98);}to{opacity:1;transform:none;}}
.sheet-in{display:flex;flex-direction:column;width:100%;max-height:inherit;min-height:0;}
.sheet-h{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:20px 20px 14px;border-bottom:1px solid var(--line);position:relative;}
.sheet-h::before{content:"";position:absolute;top:8px;left:50%;width:40px;height:4px;margin-left:-20px;border-radius:999px;background:var(--line2);}
@media (min-width:760px){.sheet-h::before{display:none;}}
.sheet-h h2{font-size:25px;}
.vx .x{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:50%;border:1px solid var(--line2);background:transparent;cursor:pointer;color:var(--ink);flex:none;}
.sheet-b{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:16px 20px 20px;}
.sheet-f{display:flex;flex-wrap:wrap;gap:10px;padding:14px 20px calc(14px + env(safe-area-inset-bottom));border-top:1px solid var(--line);}
.sheet-f .btn{flex:1 1 160px;}
.toast{position:fixed;left:50%;bottom:calc(30px + env(safe-area-inset-bottom));transform:translate(-50%,20px);z-index:3000;padding:12px 18px;border-radius:999px;background:var(--ink);color:var(--bg);font-size:13.5px;opacity:0;pointer-events:none;transition:opacity .25s,transform .35s var(--ease);max-width:calc(100vw - 32px);}
.toast.on{opacity:1;transform:translate(-50%,0);}

/* ---- a money breakdown (the Rohit home page's "What it could cost each month") ---- */
.m-row{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:9px 0;border-bottom:1px dashed var(--line);font-size:14px;color:var(--ink2);}
.m-row b{color:var(--ink);font-weight:500;font-variant-numeric:tabular-nums;white-space:nowrap;}
.m-row.total{border:0;padding-top:14px;}
.m-row.total b{font:400 28px/1 var(--serif);color:var(--gold);}

/* ---- arrive gently ---- */
.reveal{opacity:0;transform:translateY(14px);transition:opacity .7s var(--ease),transform .7s var(--ease);}
.reveal.in{opacity:1;transform:none;}

/* ---- the site's light theme (theme.css) paints every field beige, every eyebrow and summary olive and adds borders under
   sections; on these pages the fields and text follow the tokens above ---- */
html:not(.sar-dark) body.vx{background:var(--bg)!important;color:var(--ink)!important;}
html:not(.sar-dark) body.vx input,html:not(.sar-dark) body.vx select,html:not(.sar-dark) body.vx textarea{background-color:transparent!important;color:var(--ink)!important;border-color:transparent!important;}
html:not(.sar-dark) body.vx .fx-in input,html:not(.sar-dark) body.vx .fx-in select,html:not(.sar-dark) body.vx .fld input,html:not(.sar-dark) body.vx .fld textarea{background-color:var(--card)!important;border-color:var(--line2)!important;}
html:not(.sar-dark) body.vx .fx-in input:focus,html:not(.sar-dark) body.vx .fx-in select:focus{border-color:var(--gold)!important;}
html:not(.sar-dark) body.vx .eyebrow{color:var(--gold)!important;}
html:not(.sar-dark) body.vx summary{color:var(--ink)!important;}
html:not(.sar-dark) body.vx details p{color:var(--ink2)!important;}
html:not(.sar-dark) body.vx section{border-bottom-color:transparent!important;}
html:not(.sar-dark) body.vx .headline{color:var(--gold)!important;}
html:not(.sar-dark) body.vx a.xlink{color:var(--ink)!important;border-color:var(--line2)!important;}
html:not(.sar-dark) body.vx .vx-dark-on-photo{color:#F4F2EB!important;}