/* Asktimate, the public page (CC-ASK-4304; A-624, T-1280; brief 77, slice 2). Built to overflow-queue/mockups/asktimate/mockup.html.
   The page wears the site's own header (build.js marker) and site.css; this file lays out the page's own cards, the range bar, the comp table and the map.
   ⚠️ Mode green is a FILL under white and mode-d is the text colour on cream (the contrast notes in public/fsbo/fsbo.css apply here too). The mic red (#B5462F)
   marks the "mark" on the bar and the disclaimer, as the mockup does. Fonts come from /css/fonts.css (self-hosted Jost and Source Sans 3). */
:root{--at-red:#B5462F;--at-red-soft:#FBEDE9;--cream:#FAF8F4;--line:#E8E2D8;--soft:#6E655C;--ink:#2B2622}
:root[data-mode]{background:#fff;border-top:0}
body{background:#fff}
/* The header's CTA has a phone label (build.js passes `short`): the long form is too wide beside the brand and the menu under 480px (the same two rules /fsbo/ carries). */
.nav-cta-short{display:none}
@media (max-width:480px){.nav-cta [data-copy-res],.nav-cta [data-copy-com]{display:none!important}.nav-cta .nav-cta-short{display:inline}}
.at-wrap{max-width:1000px;margin:0 auto;padding:18px 16px 28px}
.at-crumb{font-size:.85rem;color:var(--soft);margin:0 0 6px}
.at-wrap h1{font-size:clamp(1.55rem,5vw,2.2rem);margin:0 0 4px}
.at-sub{color:var(--soft);margin:6px 0 18px}
.at-load{color:var(--soft)}
.at-card{background:var(--cream);border:1px solid var(--line);border-radius:14px;padding:18px;max-width:640px;margin:0 0 14px}
.at-card h2{font-size:1.2rem;margin:0 0 6px}
.at-card p{margin:0 0 10px}
.at-step{font-size:.8rem;font-weight:700;color:var(--mode-d);text-transform:uppercase;letter-spacing:.06em;margin:0 0 6px!important}
.at-q{display:block;font:700 1.15rem var(--font-head);margin:0 0 10px}
.at-card label:not(.at-q){display:block;font-weight:600;margin:0 0 4px}
.at-card input[type=text],.at-card input[type=email]{width:100%;font:inherit;padding:12px;border:1px solid #cfc6b8;border-radius:10px;background:#fff;color:var(--ink);min-width:0}
.at-card input:focus{outline:2px solid var(--mode);outline-offset:1px;border-color:var(--mode)}
.at-where{font-size:.9rem;color:var(--soft);margin:-4px 0 10px!important;overflow-wrap:anywhere}
.at-facts{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.at-facts label{font-size:.85rem}
.at-facts small{font-weight:400;color:var(--soft)}
@media(max-width:560px){.at-facts{grid-template-columns:1fr 1fr}}
.at-btn{display:inline-block;border:0;border-radius:10px;background:var(--mode);color:#fff;font:700 1rem var(--font-body);padding:13px 22px;margin-top:14px;cursor:pointer}
.at-btn:hover{background:var(--mode-d)}
.at-btn[disabled]{opacity:.6;cursor:wait}
.at-full{width:100%}
.at-link{background:none;border:0;padding:0;color:var(--mode-d);font:inherit;text-decoration:underline;cursor:pointer}
.at-hint{font-size:.85rem;color:var(--soft);margin:8px 0 0}
.at-msg{font-size:.92rem;color:var(--at-red);margin:8px 0 0;min-height:0}
.at-msg:empty{display:none}
.at-trap{position:absolute;left:-9999px}
.voice-wrap{display:block}
/* the range */
.at-range{max-width:760px}
.at-range h2{font-size:clamp(1.35rem,4.6vw,2rem)}
.at-range h2 em{font-style:normal;color:var(--mode-d);white-space:nowrap}
.at-bar{position:relative;height:14px;border-radius:7px;background:linear-gradient(90deg,var(--mode-soft),#bfe3cc,var(--mode-soft));margin:46px 10px 40px}
.at-bar .at-lo,.at-bar .at-hi{position:absolute;top:22px;font:700 .9rem var(--font-head);white-space:nowrap}
.at-bar .at-lo{left:0;transform:translateX(-30%)}
.at-bar .at-hi{right:0;transform:translateX(30%)}
.at-mark{position:absolute;top:-12px;width:4px;height:38px;border-radius:2px;background:var(--at-red)}
.at-mark span{position:absolute;bottom:42px;left:50%;transform:translateX(-50%);background:var(--at-red);color:#fff;font:700 .78rem/1 var(--font-body);padding:6px 9px;border-radius:8px;white-space:nowrap}
.at-mark span:after{content:"";position:absolute;left:50%;top:100%;margin-left:-5px;border:5px solid transparent;border-top-color:var(--at-red)}
.at-mark.lean-l span{left:-4px;transform:none}.at-mark.lean-l span:after{left:10px;margin-left:0}
.at-mark.lean-r span{left:auto;right:-4px;transform:none}.at-mark.lean-r span:after{left:auto;right:10px;margin-left:0}
.at-facts-line{display:flex;gap:8px 18px;flex-wrap:wrap;margin:6px 0 10px;font-size:.95rem}
.at-pill{display:inline-block;background:var(--mode-soft);color:var(--mode-d);font-weight:700;border-radius:999px;padding:3px 11px;font-size:.88rem}
.at-caveat{border-left:4px solid var(--at-red);background:var(--at-red-soft);padding:12px 14px;border-radius:0 10px 10px 0;font-size:.95rem;margin:12px 0}
.at-cta{margin-top:6px}
/* the gate */
.at-h2{font-size:1.6rem;margin:0 0 6px}
.at-two{display:grid;grid-template-columns:1fr 1fr;gap:12px;align-items:end}
@media(max-width:760px){.at-two{grid-template-columns:1fr}}
.at-gsi{min-width:0;overflow:hidden}
.at-gsi .gsi-row{margin:0}
/* the comp table */
.at-stamp{font-weight:600}
.at-tablebox{margin-top:8px;overflow-x:auto}
.at-comps table{width:100%;border-collapse:collapse;font-size:.93rem}
.at-comps th{text-align:left;font-size:.78rem;text-transform:uppercase;letter-spacing:.05em;color:var(--soft);padding:8px;border-bottom:2px solid var(--line)}
.at-comps td{padding:10px 8px;border-bottom:1px solid var(--line);vertical-align:top}
.at-comps td.n,.at-comps th.n{text-align:right}
.at-cour,.at-sum{display:block;font-size:.78rem;color:var(--soft)}
.at-num{display:inline-block;min-width:1.4em;height:1.4em;line-height:1.4em;text-align:center;border-radius:50%;background:var(--mode);color:#fff;font-size:.72rem;font-weight:700;margin-right:6px}
.at-comps td a{font-weight:700}
.at-mapbox{max-width:420px;margin:14px 0;border:1px solid var(--line);border-radius:12px;overflow:hidden}
.at-mapbox svg{display:block;width:100%;height:auto}
.at-mls{font-size:.82rem;color:var(--soft)}
@media(max-width:640px){
  .at-comps table,.at-comps thead,.at-comps tbody,.at-comps tr,.at-comps td{display:block;width:100%}
  .at-comps thead{position:absolute;left:-9999px}
  .at-comps tr{border:1px solid var(--line);border-radius:12px;padding:8px 10px;margin-bottom:10px}
  .at-comps td{border:0;padding:2px 0;display:flex;justify-content:space-between;gap:10px}
  .at-comps td:before{content:attr(data-l);color:var(--soft);font-size:.78rem;text-transform:uppercase;letter-spacing:.04em;flex:none;padding-top:3px}
  .at-comps td.n{text-align:right}
  .at-comps td.addr{display:block;font-weight:700;overflow-wrap:anywhere}
  .at-comps td.addr:before{content:none}
}
.at-empty{max-width:520px}
.at-foot{border-top:1px solid var(--line);padding:12px 16px;font-size:.8rem;color:var(--soft);background:var(--cream)}
.at-foot a{color:var(--mode-d);text-decoration:underline;text-underline-offset:2px}
.at-check{display:flex;gap:.6rem;align-items:flex-start;margin:.9rem 0 .2rem;font-size:.95rem;line-height:1.4}
.at-check input{flex:none;width:1.25rem;height:1.25rem;margin:.1rem 0 0;accent-color:#00843D}