/* ============================================================
   yancher.co.il — מדריך שמאי מקרקעין
   Layer on top of the site's design tokens (assets/style.css)
   ============================================================ */

/* height of the site header (.hdr in assets/style.css: sticky, top:0, z-index:60,
   min-height:70px + 1px border) — what sticky table headers have to clear */
:root{--hdr-h:71px}

/* ---------- breadcrumbs ---------- */
.crumbs{background:var(--card);border-bottom:1px solid var(--stone);font-size:14px;color:var(--ink-3)}
.crumbs .wrap{display:flex;flex-wrap:wrap;gap:8px;align-items:center;padding-block:11px}
.crumbs a{color:var(--ink-2);text-decoration:none}
.crumbs a:hover{color:var(--marker);text-decoration:underline}
.crumbs .sep{color:var(--measure)}

/* ---------- page head ---------- */
.phead{background:var(--card);border-bottom:1px solid var(--stone)}
.phead .wrap{padding-block:clamp(30px,5vw,54px)}
.phead h1{max-width:22ch}
.phead .lede{max-width:62ch;margin-top:14px}
.phead__meta{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px}
.pill{
  font-family:var(--f-mono);font-size:12px;
  background:var(--steel-tint);color:var(--steel);border:1px solid #D5E2E5;
  border-radius:999px;padding:5px 12px;white-space:nowrap;
}
/* tracking is a Latin device (see .fld label above): on Hebrew it only pulls
   the letters apart, so it is kept for text marked as another language */
.pill:not(:lang(he)){letter-spacing:.04em}
.pill--marker{background:#FAEEE8;color:var(--marker);border-color:#F0D6C9}
.pill--muted{background:var(--stone-2);color:var(--ink-2);border-color:var(--stone)}

/* ---------- filter bar ---------- */
.filters{
  background:var(--card);border:1px solid var(--stone);border-radius:12px;
  padding:16px;display:grid;gap:12px;
  grid-template-columns:minmax(220px,1.4fr) repeat(auto-fit,minmax(150px,1fr));
  align-items:end;box-shadow:0 1px 0 rgba(21,25,28,.03);
}
.fld{display:flex;flex-direction:column;gap:6px;min-width:0}
.fld label{font-family:var(--f-mono);font-size:11px;color:var(--ink-3)}
/* the mono eyebrow treatment (tracking + caps) is a Latin/numeric device: on Hebrew
   uppercase does nothing and the tracking pulls the letters apart. Keep it for any
   label explicitly marked as another language; the page itself is lang="he". */
.fld label:not(:lang(he)){letter-spacing:.12em;text-transform:uppercase}
.fld input,.fld select{
  font-family:var(--f-body);font-size:16px;color:var(--ink);background:var(--paper);
  border:1px solid var(--stone);border-radius:8px;padding:11px 12px;width:100%;
  appearance:none;-webkit-appearance:none;
}
.fld select{background-image:linear-gradient(45deg,transparent 50%,var(--ink-3) 50%),linear-gradient(135deg,var(--ink-3) 50%,transparent 50%);
  background-position:left 14px top 51%,left 9px top 51%;background-size:5px 5px,5px 5px;background-repeat:no-repeat}
.fld input:focus,.fld select:focus{outline:2px solid var(--marker);outline-offset:1px;border-color:transparent}
.filters__act{display:flex;gap:8px;align-items:center}
.count{font-family:var(--f-mono);font-size:13px;color:var(--ink-3);white-space:nowrap}
.lnk-reset{background:none;border:0;font-family:var(--f-body);font-size:14px;color:var(--steel);cursor:pointer;text-decoration:underline;padding:0}
.lnk-reset:hover{color:var(--marker)}

/* ---------- results table ---------- */
/* Any overflow value other than `visible` here makes .tbl-wrap the scrollport for
   the sticky thead below — and .tbl-wrap never scrolls vertically, so the header
   would scroll away with the page. The horizontal scroll is therefore kept only
   while it can actually be needed: from 760px up the content column
   (min(1120px, 100vw - 2*var(--gut))) is wider than the widest table, so the
   scroll container is dropped and the header sticks to the viewport instead. */
.tbl-wrap{overflow-x:auto;border:1px solid var(--stone);border-radius:12px;background:var(--card);margin-top:20px}
table.tbl{width:100%;border-collapse:collapse;font-size:15.5px;min-width:640px}
table.tbl th,table.tbl td{padding:13px 16px;text-align:right;border-bottom:1px solid var(--stone-2);vertical-align:top}
table.tbl thead th{
  font-family:var(--f-mono);font-size:11.5px;
  color:var(--ink-3);font-weight:500;background:var(--stone-2);border-bottom:1px solid var(--stone);
  /* stops under the site header; z-index stays well below .hdr's 60 so the
     header paints over it */
  position:sticky;top:var(--hdr-h);z-index:2;white-space:nowrap;
}
table.tbl thead th:not(:lang(he)){letter-spacing:.1em;text-transform:uppercase}

@media (min-width:760px){
  .tbl-wrap{overflow-x:visible}
  /* the wrapper no longer clips, so the corner cells carry the radius themselves */
  table.tbl:not(.tariff) thead th:first-child{border-start-start-radius:11px}
  table.tbl:not(.tariff) thead th:last-child{border-start-end-radius:11px}
  table.tbl tbody tr:last-child td:first-child{border-end-start-radius:11px}
  table.tbl tbody tr:last-child td:last-child{border-end-end-radius:11px}
}
table.tbl thead th.sortable{cursor:pointer;user-select:none}
table.tbl thead th.sortable:hover{color:var(--marker)}
table.tbl thead th .arr{opacity:.35;font-size:10px;margin-inline-start:4px}
table.tbl thead th[aria-sort] .arr{opacity:1;color:var(--marker)}
table.tbl tbody tr:hover{background:var(--steel-tint)}
table.tbl tbody tr:last-child td{border-bottom:0}
table.tbl td.num{font-family:var(--f-mono);white-space:nowrap;font-size:14px}
.t-name{font-weight:600;color:var(--ink);text-decoration:none}
.t-name:hover{color:var(--marker)}
.t-sub{display:block;font-size:13px;color:var(--ink-3);margin-top:2px}
.chips{display:flex;flex-wrap:wrap;gap:5px}
.chip{font-size:12.5px;background:var(--stone-2);border:1px solid var(--stone);border-radius:6px;padding:2px 8px;color:var(--ink-2);white-space:nowrap}
.chip--bank{background:var(--steel-tint);border-color:#D5E2E5;color:var(--steel)}
.empty{padding:44px 20px;text-align:center;color:var(--ink-3)}

/* ---------- card grid ---------- */
.grid{display:grid;gap:16px;grid-template-columns:repeat(auto-fill,minmax(250px,1fr))}
.card{
  background:var(--card);border:1px solid var(--stone);border-radius:12px;padding:20px;
  text-decoration:none;color:inherit;display:block;transition:border-color .18s var(--ease),transform .18s var(--ease);
}
a.card:hover{border-color:var(--steel-2);transform:translateY(-2px)}
.card h3{margin-bottom:6px}
.card p{margin:0;font-size:14.5px;color:var(--ink-2)}
.card__n{font-family:var(--f-mono);font-size:12px;color:var(--ink-3);display:block;margin-top:10px}

/* ---------- gated block ---------- */
.gate{
  border:1px dashed #CBBBA9;background:#FDF8F3;border-radius:12px;padding:20px;margin-top:8px;
}
.gate h4{font-family:var(--f-display);font-size:19px;font-weight:500;margin:0 0 6px}
.gate p{font-size:14.5px;color:var(--ink-2);margin:0 0 14px}
.gate .blur{filter:blur(4.5px);user-select:none;pointer-events:none;font-family:var(--f-mono);color:var(--ink-3)}
.gate form{display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));align-items:end}
.gate .note{font-size:12.5px;color:var(--ink-3);margin:10px 0 0;grid-column:1/-1}
.gate .msg{grid-column:1/-1;font-size:14px;margin:0}
.gate .msg--err{color:#A33B22}
.gate .msg--ok{color:#1F6B4F}
.revealed{background:var(--card);border:1px solid var(--stone);border-radius:12px;padding:20px}
.revealed dl{display:grid;grid-template-columns:auto 1fr;gap:8px 16px;margin:0;font-size:15px}
.revealed dt{font-family:var(--f-mono);font-size:12px;color:var(--ink-3);padding-top:3px}
.revealed dt:not(:lang(he)){letter-spacing:.06em;text-transform:uppercase}
.revealed dd{margin:0}

/* ---------- tariff table ---------- */
.tariff{margin-top:8px}
.tariff caption{text-align:right;font-family:var(--f-mono);font-size:12px;
  color:var(--ink-3);padding-bottom:10px}
.tariff caption:not(:lang(he)){letter-spacing:.08em;text-transform:uppercase}
.tariff td.num{font-size:15px;font-weight:500;color:var(--ink)}
.src{font-size:13px;color:var(--ink-3);margin-top:12px}
.src a{color:var(--ink-3)}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:var(--f-body);font-size:15.5px;font-weight:600;
  padding:12px 22px;border-radius:8px;text-decoration:none;border:1px solid transparent;cursor:pointer;
  transition:background .18s var(--ease),color .18s var(--ease),border-color .18s var(--ease);
}
.btn--marker{background:var(--marker);color:#fff}
.btn--marker:hover{background:#A8481F;color:#fff}
.btn--steel{background:var(--steel);color:#fff}
.btn--steel:hover{background:var(--steel-2);color:#fff}
.btn--ghost{background:transparent;color:#EDF2F3;border-color:rgba(237,242,243,.4)}
.btn--ghost:hover{background:rgba(237,242,243,.1);color:#fff}
.btn--sm{font-size:14px;padding:8px 14px}
.btn--out{background:transparent;color:var(--steel);border-color:var(--stone)}
.btn--out:hover{border-color:var(--steel-2);color:var(--marker)}

.cta-band__acts{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px}

/* ---------- prose ---------- */
.prose{max-width:70ch}
.prose h2{margin-top:var(--s5)}
.prose h3{margin-top:var(--s4);margin-bottom:8px}
.prose ul{padding-inline-start:1.1em;margin:0 0 1.05em}
.prose li{margin-bottom:.4em}
/* square corners on the striped (inline-start) side in both directions */
.notice{background:var(--stone-2);border-inline-start:3px solid var(--measure);
  border-start-start-radius:0;border-end-start-radius:0;
  border-start-end-radius:8px;border-end-end-radius:8px;
  padding:14px 18px;font-size:14.5px;color:var(--ink-2);margin:var(--s3) 0}

/* ---------- faq ---------- */
.faq details{border-bottom:1px solid var(--stone);padding:16px 0}
.faq summary{font-family:var(--f-display);font-size:19px;font-weight:500;cursor:pointer;list-style:none;
  display:flex;justify-content:space-between;gap:16px;align-items:baseline}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-family:var(--f-mono);color:var(--marker);font-size:20px;flex:0 0 auto}
.faq details[open] summary::after{content:"–"}
.faq details p{margin:12px 0 0;color:var(--ink-2)}

/* ---------- small screens ---------- */
@media (max-width:640px){
  .filters{grid-template-columns:1fr}
  table.tbl{font-size:14.5px;min-width:520px}
  table.tbl th,table.tbl td{padding:11px 12px}
  .revealed dl{grid-template-columns:1fr;gap:2px 0}
  .revealed dt{padding-top:10px}
}
/* ---------- phones: appraiser results as cards ---------- */
/* At 390px the four-column appraiser table (min-width:640px) can only be read by
   scrolling sideways. Below 560px each row becomes one block instead. Scoped by
   the filter-bar id so the three-column register table on reshima.html (#fr),
   which reads fine as a table, is left alone. */
@media (max-width:560px){
  .tbl[data-filters]:not([data-filters=fr]){display:block;min-width:0;font-size:15px}
  /* the head row becomes a sort strip: without it the sort controls would be gone
     on phones. Columns that cannot be sorted carry no information here. */
  .tbl[data-filters]:not([data-filters=fr]) thead{display:block}
  .tbl[data-filters]:not([data-filters=fr]) thead tr{
    display:flex;flex-wrap:wrap;gap:6px 18px;padding:9px 16px;
    background:var(--stone-2);border-bottom:1px solid var(--stone);
  }
  .tbl[data-filters]:not([data-filters=fr]) thead th{
    position:static;padding:5px 0;border:0;background:none;
  }
  .tbl[data-filters]:not([data-filters=fr]) thead th:not(.sortable){display:none}
  .tbl[data-filters]:not([data-filters=fr]) tbody{display:block}
  /* :not([hidden]) — an author `display` would otherwise beat the UA rule that
     hides the rows the filter/limit turned off */
  .tbl[data-filters]:not([data-filters=fr]) tbody tr:not([hidden]){display:block}
  .tbl[data-filters]:not([data-filters=fr]) tbody tr{
    padding:14px 16px;border-bottom:1px solid var(--stone-2);
  }
  .tbl[data-filters]:not([data-filters=fr]) tbody tr:last-child{border-bottom:0}
  .tbl[data-filters]:not([data-filters=fr]) tbody td{display:block;padding:0;border:0}
  .tbl[data-filters]:not([data-filters=fr]) tbody td+td{margin-top:9px}
  .tbl[data-filters]:not([data-filters=fr]) .t-name{font-size:17px;line-height:1.55}
  .tbl[data-filters]:not([data-filters=fr]) .t-sub{margin-top:1px}
  /* the bare number is the one cell that is unreadable without its column head */
  .tbl[data-filters]:not([data-filters=fr]) td.num{font-size:13px;color:var(--ink-3)}
  .tbl[data-filters]:not([data-filters=fr]) td.num::before{content:"דירוג · "}
}

/* The register table is three short columns — name · licence · city — and the
   640/520px floor above is sized for the four-column appraiser tables. Lifting
   it lets the site's most-used table fit the content column instead of
   scrolling sideways; the long names wrap rather than widen the row. The floor
   goes as soon as the wrapper can be narrower than it (.tbl-wrap stops
   scrolling at 760px), not only on phones. */
@media (max-width:760px){
  .tbl[data-filters=fr]{min-width:0}
}
@media (max-width:560px){
  .tbl[data-filters=fr]{font-size:15px}
  .tbl[data-filters=fr] th,.tbl[data-filters=fr] td{padding:10px 8px}
  .tbl[data-filters=fr] thead th{font-size:11px;white-space:normal}
  .tbl[data-filters=fr] td.num{font-size:13.5px}
  .tbl[data-filters=fr] .t-name{overflow-wrap:anywhere}
}

@media print{.hdr,.ftr,.cta-band,.filters,.crumbs{display:none}}

/* ---------- appraisal-fee calculator (mechshevon.html) -------------------
   Additive: every selector below is scoped to #calc or a .calc-* class that
   exists on no other page. ---------------------------------------------- */
.calc__form{
  display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  align-items:end;background:var(--card);border:1px solid var(--stone);
  border-radius:12px;padding:20px;
}
.calc__form .fld--wide{grid-column:1/-1}
.calc__checks{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:10px 26px;
  border-top:1px solid var(--stone-2);padding-top:16px}
.calc__check{display:flex;gap:9px;align-items:flex-start;font-size:15px;cursor:pointer;max-width:44ch}
.calc__check input{margin:3px 0 0;accent-color:var(--marker);width:17px;height:17px;flex:none}
.calc__check span small{display:block;font-size:12.5px;color:var(--ink-3);margin-top:2px}
.calc__note{grid-column:1/-1;font-size:13px;color:var(--ink-3);margin:0}

.calc__head{display:flex;flex-wrap:wrap;gap:10px;align-items:baseline;
  justify-content:space-between;margin-top:26px}
.calc__head h3{margin:0;font-size:19px}
.calc__basis{font-family:var(--f-mono);font-size:12px;color:var(--ink-3)}

table.calc-tbl{min-width:720px}
table.calc-tbl td.num{font-size:15px}
tr.calc-row--best{background:#FAEEE8}
tr.calc-row--best:hover{background:#F6E4DA}
.calc-bank{font-weight:600}
.calc-bank a{text-decoration:none;color:var(--steel)}
.calc-bank a:hover{color:var(--marker);text-decoration:underline}
.calc-sub{display:block;font-family:var(--f-mono);font-size:11.5px;color:var(--ink-3);margin-top:3px}
.calc-fee{font-family:var(--f-mono);font-size:17px;font-weight:600;color:var(--ink);white-space:nowrap}
.calc-fee--soft{font-size:14px;font-weight:400;color:var(--ink-2);white-space:normal}
.calc-why{list-style:none;padding:0;margin:0;font-size:13.5px;color:var(--ink-2);max-width:46ch}
.calc-why li{margin-bottom:5px;padding-inline-start:13px;position:relative}
.calc-why li::before{content:"";position:absolute;inset-inline-start:0;top:8px;
  width:5px;height:5px;border-radius:50%;background:var(--measure)}
.calc-why li.is-off::before{background:var(--stone)}
.calc-why li.is-off{color:var(--ink-3)}
.calc-why b{font-family:var(--f-mono);font-weight:500;font-size:13px}
.badge{display:inline-block;font-family:var(--f-mono);font-size:11px;
  border-radius:999px;padding:2px 8px;border:1px solid var(--stone);
  background:var(--stone-2);color:var(--ink-2);margin-inline-start:6px;white-space:nowrap}
.badge:not(:lang(he)){letter-spacing:.04em}
.badge--best{background:var(--marker);border-color:var(--marker);color:#fff}
.badge--warn{background:#FDF3E7;border-color:#EBD3B2;color:#8A5A18}
details.calc-src{margin-top:9px}
details.calc-src summary{font-family:var(--f-mono);font-size:11.5px;color:var(--ink-3);cursor:pointer}
details.calc-src summary:hover{color:var(--marker)}
details.calc-src blockquote{margin:8px 0 0;padding:9px 12px;border-inline-start:2px solid var(--stone);
  background:var(--stone-2);border-radius:0 6px 6px 0;font-size:13px;color:var(--ink-2)}
details.calc-src blockquote cite{display:block;font-family:var(--f-mono);font-size:11px;
  color:var(--ink-3);font-style:normal;margin-top:5px}
/* a refused value: the field says why, in the same red as the contact-gate
   error, and #calc-results repeats it in place of any stale price */
.calc-sub--err{color:#A33B22}
.calc-empty{padding:34px 20px;text-align:center;color:var(--ink-3)}
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

/* ============================================================
   בנקים בצבעים · מרחב · דירוג שמאים
   Additive block. Every selector below is either a bt-* tone, a .chip--region,
   or a .rv-/.rf- class that exists on no earlier page.
   ============================================================ */

/* ---------- one colour per bank ----------------------------------------
   The row of chips is the densest thing in the table, and until now every chip
   looked the same, so telling "which banks" apart meant reading seven words.
   Each bank gets its own hue, near enough its own brand to be guessable and far
   enough from its neighbours to be distinguishable; the text stays dark enough
   for contrast on the tint rather than sitting white on saturated colour. */
.chip--bank, .pill--bank{
  background:var(--stone-2);border:1px solid var(--stone);color:var(--ink-2);
  border-radius:6px;font-size:12.5px;padding:2px 8px;white-space:nowrap;
  text-decoration:none;position:relative;padding-inline-start:18px;
}
.pill--bank{border-radius:999px;padding:3px 12px 3px 12px;padding-inline-start:22px;font-size:12.5px}
a.chip--bank:hover, a.pill--bank:hover{filter:brightness(.97);text-decoration:none}
/* the dot is the colour key; the tint carries it at a glance, the dot confirms it */
.chip--bank::before, .pill--bank::before{
  content:"";position:absolute;inset-inline-start:7px;top:50%;transform:translateY(-50%);
  width:7px;height:7px;border-radius:50%;background:currentColor;opacity:.9;
}
.pill--bank::before{inset-inline-start:9px}

.bt-hapoalim    {background:#FCEBEC;border-color:#F0C6CA;color:#A81726}
.bt-leumi       {background:#E9EFF7;border-color:#C3D3E8;color:#1B4A87}
.bt-mizrahi     {background:#FDF0E2;border-color:#F2D3AC;color:#9A5A0B}
.bt-discount    {background:#E8F4EC;border-color:#BFDEC9;color:#1B6B3E}
.bt-mercantile  {background:#E4F2F3;border-color:#B4D9DC;color:#116068}
.bt-beinleumi   {background:#F0EBF7;border-color:#D3C6E7;color:#5B357F}
.bt-yerushalayim{background:#F6F0DE;border-color:#E2D3A6;color:#7A5C0C}
.bt-other       {background:var(--stone-2);border-color:var(--stone);color:var(--ink-2)}

/* the colour key above the table — a colour without a legend is decoration */
.bank-key{
  display:flex;flex-wrap:wrap;gap:8px 12px;align-items:center;
  margin:18px 0 4px;padding:12px 14px;background:var(--card);
  border:1px solid var(--stone);border-radius:10px;
}
.bank-key__t{font:500 11.5px var(--f-mono);letter-spacing:.09em;color:var(--ink-3);
  text-transform:uppercase}

/* ---------- מרחב, in the column where the cities used to be ---------- */
.chip--region{
  background:var(--steel-tint);border:1px solid #D5E2E5;color:var(--steel);
  border-radius:6px;font-size:12.5px;padding:2px 9px;white-space:nowrap;
  text-decoration:none;font-weight:600;
}
a.chip--region:hover{background:#DCE9EC;text-decoration:none}

/* ---------- the rating column ---------- */
.stars{display:inline-flex;gap:1px;direction:ltr;font-size:13px;line-height:1}
.stars i{font-style:normal;color:var(--stone)}
.stars i.on{color:#D79A2B}
.stars--lg{font-size:20px;gap:2px}
td.rate-cell{white-space:nowrap;text-align:start}
.rate-num{font-family:var(--f-mono);font-size:14px;font-weight:600;color:var(--ink);
  margin-inline-start:6px}
.rate-n{display:block;font-family:var(--f-mono);font-size:11px;color:var(--ink-3);margin-top:2px}
.rate-none,.rate-wait{font-size:12px;color:var(--ink-3)}

/* ---------- the review panel on an appraiser page ---------- */
.rv__loading{color:var(--ink-3);font-size:14px;margin:16px 0}
.rv__none{background:var(--stone-2);border:1px dashed var(--stone);border-radius:10px;
  padding:20px 22px;margin:18px 0}
.rv__none b{display:block;font:500 18px var(--f-display);color:var(--ink);margin-bottom:6px}
.rv__none p{margin:0;color:var(--ink-2);font-size:14.5px;max-width:56ch}

.rv__head{display:flex;flex-wrap:wrap;gap:18px 40px;align-items:center;margin:20px 0 6px}
.rv__big{display:flex;align-items:center;gap:12px}
.rv__big b{font:500 42px/1 var(--f-display);color:var(--ink)}
.rv__big span{font-family:var(--f-mono);font-size:12px;color:var(--ink-3)}
.rv__nps{border-inline-start:1px solid var(--stone);padding-inline-start:26px}
.rv__nps b{display:block;font:500 26px var(--f-display);color:var(--marker)}
.rv__nps span{font-family:var(--f-mono);font-size:11.5px;color:var(--ink-3)}

.rv__bars{display:grid;gap:7px;max-width:520px;margin:18px 0 4px}
.rv__bar{display:grid;grid-template-columns:1fr 130px 34px;gap:10px;align-items:center;font-size:13.5px}
.rv__bar-l{color:var(--ink-2)}
.rv__bar-t{height:6px;background:var(--stone-2);border-radius:999px;overflow:hidden}
.rv__bar-t i{display:block;height:100%;background:#D79A2B;border-radius:999px}
.rv__bar-v{font-family:var(--f-mono);font-size:12.5px;color:var(--ink);text-align:end}

.rv__list{display:grid;gap:14px;margin:26px 0 0}
.rv__item{background:var(--card);border:1px solid var(--stone);border-radius:12px;padding:16px 18px}
.rv__item header{display:flex;gap:12px;align-items:center}
.rv__av{position:relative;width:38px;height:38px;flex:none}
.rv__pic{position:absolute;inset:0;width:38px;height:38px;border-radius:50%;object-fit:cover;
  background:var(--stone-2)}
.rv__pic--f{display:flex;align-items:center;justify-content:center;
  font:600 16px var(--f-body);color:var(--ink-2)}
.rv__item header>div:nth-child(2){flex:1;min-width:0}
.rv__item header b{display:block;font-size:15px;color:var(--ink)}
.rv__meta{font-family:var(--f-mono);font-size:11.5px;color:var(--ink-3)}
.rv__rec{color:#1F6B4F;font-family:var(--f-body)}
.rv__norec{color:#A33B22;font-family:var(--f-body)}
.rv__score{display:flex;flex-direction:column;align-items:flex-end;gap:2px}
.rv__score b{font-family:var(--f-mono);font-size:13px;color:var(--ink)}
.rv__text{margin:12px 0 10px;font-size:15px;line-height:1.7;color:var(--ink);max-width:70ch}
.rv__det{display:flex;flex-wrap:wrap;gap:5px}
.rv__det span{font:500 11.5px var(--f-mono);background:var(--stone-2);border:1px solid var(--stone);
  border-radius:5px;padding:2px 7px;color:var(--ink-3)}

/* ---------- the form ---------- */
.rv__write{margin-top:34px;border-top:1px solid var(--stone);padding-top:26px}
.rv__write h3{margin:0 0 8px;font:500 21px var(--f-display);color:var(--ink)}
.rv__intro{margin:0 0 18px;font-size:14.5px;color:var(--ink-2);max-width:64ch}
.rv__auth{display:flex;flex-wrap:wrap;gap:12px 18px;align-items:center;
  background:var(--stone-2);border:1px solid var(--stone);border-radius:10px;padding:16px 18px}
.rv__authnote{margin:0;font-size:13.5px;color:var(--ink-3)}

.rf{margin-top:6px}
.rf__who{display:flex;align-items:center;gap:10px;background:var(--stone-2);
  border:1px solid var(--stone);border-radius:10px;padding:10px 14px;margin:0 0 18px;
  font-size:14px;color:var(--ink-2)}
.rf__who .rv__pic{position:static;width:28px;height:28px}
.rf__row{display:flex;flex-wrap:wrap;gap:8px 20px;align-items:center;justify-content:space-between;
  padding:11px 0;border-bottom:1px dashed var(--stone)}
.rf__lbl b{display:block;font-size:15px;color:var(--ink);font-weight:600}
.rf__lbl span{font-size:12.5px;color:var(--ink-3)}
.rf__stars{display:inline-flex;gap:2px;direction:ltr}
.rf__st{background:none;border:0;cursor:pointer;font-size:27px;line-height:1;padding:0 2px;
  color:var(--stone);transition:color .12s}
.rf__st.on{color:#D79A2B}
.rf__st.hv{color:#E7BC6B}
.rf__st:focus-visible{outline:2px solid var(--marker);outline-offset:2px;border-radius:4px}
.rf__stars.is-missing{outline:2px solid #C9614A;outline-offset:4px;border-radius:6px}
.rf__row--nps{border-bottom:0}
.rf__nps{display:flex;gap:18px}
.rf__nps label{display:flex;align-items:center;gap:7px;font-size:15px;cursor:pointer}
.rf__nps input{accent-color:var(--marker);width:17px;height:17px}

.rf__txt{margin:16px 0 0}
.rf__txt label{display:block;font-size:15px;font-weight:600;color:var(--ink);margin-bottom:6px}
.rf__txt label span{font-weight:400;font-size:12.5px;color:var(--ink-3)}
.rf__txt textarea{width:100%;border:1px solid var(--stone);border-radius:10px;padding:12px 14px;
  font:400 15px/1.65 var(--f-body);color:var(--ink);background:var(--card);resize:vertical}
.rf__txt textarea:focus{outline:2px solid var(--steel);outline-offset:1px;border-color:var(--steel)}
.rf__count{display:block;text-align:end;font-family:var(--f-mono);font-size:11.5px;
  color:var(--ink-3);margin-top:4px}
.rf__count.is-short{color:#A33B22}
.rf__act{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:18px 0 0}
.rv__thanks{background:#EAF3EE;border:1px solid #BEDACB;border-radius:10px;padding:20px 22px}
.rv__thanks b{display:block;font:500 20px var(--f-display);color:#1F6B4F;margin-bottom:5px}
.rv__thanks p{margin:0;color:var(--ink-2);font-size:14.5px}

@media (max-width:600px){
  .rv__bar{grid-template-columns:1fr 78px 30px}
  .rf__row{flex-direction:column;align-items:flex-start;gap:4px}
  .rv__big b{font-size:34px}
}

/* ---------- the valuation result: reported, never scored ----------
   A שומה under the contract price is often the correct answer. Scoring it would
   have made this directory pay appraisers in stars for inflating numbers, so the
   result is shown as a neutral fact and the note says so in as many words. */
.rv__oc-box{margin:22px 0 0;padding:16px 18px;background:var(--stone-2);
  border:1px solid var(--stone);border-radius:10px}
.rv__oc-t{display:block;font:500 11.5px var(--f-mono);letter-spacing:.09em;
  text-transform:uppercase;color:var(--ink-3);margin-bottom:10px}
.rv__ocs{display:flex;flex-wrap:wrap;gap:7px}
.rv__oc{display:inline-block;font-size:12.5px;border-radius:6px;padding:3px 10px;
  border:1px solid var(--stone);background:var(--card);color:var(--ink-2);white-space:nowrap}
.rv__oc b{font-family:var(--f-mono);font-weight:600;color:var(--ink)}
.rv__oc--higher{background:#EAF3EE;border-color:#C6DDD0;color:#1F6B4F}
.rv__oc--similar{background:#EEF2F4;border-color:#D3DEE2;color:#2F5560}
.rv__oc--lower{background:#FBF1E7;border-color:#EAD3B7;color:#8A5A18}
.rv__oc--much_lower{background:#FAEBE6;border-color:#E8C7BA;color:#98432A}
.rv__oc--na{color:var(--ink-3)}
.rv__gapstat{margin:12px 0 0;font-size:13.5px;color:var(--ink-2)}
.rv__gapstat span{color:var(--ink-3)}
.rv__gapstat ul{list-style:none;padding:0;margin:6px 0 0;display:flex;flex-wrap:wrap;gap:6px 20px}
.rv__gapstat b{font-family:var(--f-mono);font-size:14px;color:var(--ink)}
.rv__oc-n{margin:12px 0 0;font-size:12.5px;color:var(--ink-3);line-height:1.6;max-width:62ch}

.rv__oc-row{display:flex;flex-wrap:wrap;gap:5px;margin:0 0 8px}
.rv__gaptag{font:500 11.5px var(--f-mono);border-radius:5px;padding:2px 8px;
  border:1px solid var(--stone);background:var(--card)}
.rv__gaptag.yes{color:#1F6B4F;border-color:#C6DDD0}
.rv__gaptag.no{color:#98432A;border-color:#E8C7BA}

/* ---------- the outcome question on the form ---------- */
.rf__fs{border:1px solid var(--stone);border-radius:12px;padding:16px 18px 18px;
  margin:0 0 22px;background:var(--stone-2)}
.rf__fs legend{font:600 15px var(--f-body);color:var(--ink);padding:0 8px}
.rf__opts{display:flex;flex-wrap:wrap;gap:8px 18px}
.rf__opt{display:flex;align-items:center;gap:7px;font-size:14.5px;cursor:pointer;color:var(--ink-2)}
.rf__opt input{accent-color:var(--marker);width:16px;height:16px}
.rf__fair{margin:12px 0 0;font-size:13px;line-height:1.65;color:var(--ink-2);max-width:64ch;
  border-inline-start:3px solid var(--marker);padding-inline-start:11px}
.rf__fair b{font-weight:600;color:var(--ink)}
.rf__gap{margin:14px 0 0;padding:12px 14px 4px;background:var(--card);
  border:1px solid var(--stone);border-radius:10px}
.rf__row--yn{border-bottom:0;padding:7px 0}

/* ---------- privacy / terms ---------- */
.legal{max-width:70ch}
.legal h2{margin:30px 0 10px;font:500 21px var(--f-display);color:var(--ink)}
.legal h2:first-child{margin-top:0}
.legal p{margin:0 0 11px;font-size:15.5px;line-height:1.75;color:var(--ink-2)}
.legal p b{color:var(--ink);font-weight:600}
.legal a{color:var(--steel)}
.legal a:hover{color:var(--marker)}