/* ─────────────────────────────────────────────────────────────
   SimPlan V2 - DESIGN LAYER  (local mockup, NOT deployed)
   Reskins the REAL deployed app: identical DOM, JS, buttons, assets,
   patterns and functionality - only the visual design changes.
   Deep-green scheme · Frank Ruhl Libre + Assistant · refined depth.
   Live-tweakable via the explorer widget (data-accent / data-font on
   <html>) + a free colour picker. No palette attr = these defaults.
   ───────────────────────────────────────────────────────────── */

:root{
  /* canvas + type */
  --paper:#f5f5f1; --surface:#ffffff;
  --hairline:#e7e5db; --hairline-2:#d6d3c5;
  --serif:"Frank Ruhl Libre",Georgia,serif;
  --sans:"Assistant","Segoe UI",Arial,sans-serif;
  --r-s:12px; --r-m:18px; --r-l:26px;
  /* accent (overrides the deployed bronze) + mint for dark surfaces */
  --bronze:#b8912f; --bronze-hi:#caa542; --bronze-soft:#f3ecd4; --mint:#e6ce88;
  --best:#0a7d57; --best-soft:#e0f2ea;
  --num:"Bellefair",Georgia,serif;
  --sh-1: 0 1px 2px rgba(15,25,20,.05), 0 6px 18px rgba(15,25,20,.06);
  --sh-2: 0 4px 12px rgba(15,25,20,.08), 0 20px 44px -12px rgba(15,25,20,.16);
  --sh-3: 0 10px 30px rgba(15,25,20,.14), 0 40px 90px -20px rgba(15,25,20,.30);
}
/* ── accent explorations (deep, rich) ── */
:root[data-accent="gold"]    {--bronze:#b8912f;--bronze-hi:#caa542;--bronze-soft:#f3ecd4;--mint:#e6ce88}
:root[data-accent="forest"]  {--bronze:#0b6b47;--bronze-hi:#0f8a5c;--bronze-soft:#dcefe6;--mint:#7fe3b8}
:root[data-accent="emerald"] {--bronze:#0a8a5e;--bronze-hi:#10a870;--bronze-soft:#ddf2e9;--mint:#86edbf}
:root[data-accent="pine"]    {--bronze:#0a6b58;--bronze-hi:#0e8a73;--bronze-soft:#daf0eb;--mint:#79e6cf}
:root[data-accent="teal"]    {--bronze:#0a6b74;--bronze-hi:#0e8a95;--bronze-soft:#d9f0f2;--mint:#7fe6ee}
:root[data-accent="petrol"]  {--bronze:#0c5566;--bronze-hi:#0f6d82;--bronze-soft:#d8eef2;--mint:#7fdcec}
:root[data-accent="indigo"]  {--bronze:#17457e;--bronze-hi:#1f5aa0;--bronze-soft:#e2e9f5;--mint:#9db8ee}
:root[data-accent="ink"]     {--bronze:#1e3a2f;--bronze-hi:#2b5344;--bronze-soft:#dde8e2;--mint:#86c9ac}
:root[data-accent="olive"]   {--bronze:#4a5d23;--bronze-hi:#5f772e;--bronze-soft:#eaefd8;--mint:#c2d67a}
:root[data-accent="bordeaux"]{--bronze:#7a2338;--bronze-hi:#99304a;--bronze-soft:#f4e1e6;--mint:#e79aac}
/* ── font explorations (curated Hebrew Google Fonts) ── */
:root[data-font="serif"]     {--serif:"Frank Ruhl Libre",Georgia,serif;--sans:"Assistant","Segoe UI",Arial,sans-serif}
:root[data-font="serifheebo"]{--serif:"Frank Ruhl Libre",Georgia,serif;--sans:"Heebo","Segoe UI",Arial,sans-serif}
:root[data-font="bellefair"] {--serif:"Bellefair",Georgia,serif;--sans:"Assistant","Segoe UI",Arial,sans-serif}
:root[data-font="noto"]      {--serif:"Noto Serif Hebrew",Georgia,serif;--sans:"Noto Sans Hebrew","Segoe UI",Arial,sans-serif}
:root[data-font="david"]     {--serif:"David Libre",Georgia,serif;--sans:"Assistant","Segoe UI",Arial,sans-serif}
:root[data-font="slab"]      {--serif:"Suez One",Georgia,serif;--sans:"Rubik","Segoe UI",Arial,sans-serif}
:root[data-font="secular"]   {--serif:"Secular One","Segoe UI",Arial,sans-serif;--sans:"Assistant","Segoe UI",Arial,sans-serif}
:root[data-font="heebo"]     {--serif:"Heebo","Segoe UI",Arial,sans-serif;--sans:"Heebo","Segoe UI",Arial,sans-serif}
:root[data-font="rubik"]     {--serif:"Rubik","Segoe UI",Arial,sans-serif;--sans:"Rubik","Segoe UI",Arial,sans-serif}
:root[data-font="karantina"] {--serif:"Karantina","Segoe UI",Arial,sans-serif;--sans:"Assistant","Segoe UI",Arial,sans-serif}

/* ── light component polish - refine the feel, keep every pattern ── */
.card{ border:1px solid var(--hairline); box-shadow:var(--sh-1); }
.card:hover{ box-shadow:var(--sh-2); }
/* accent-on-dark elements need the light mint, not the deep accent */
.hero-eyebrow{ color:var(--mint); }
/* filled primary/accent buttons read better than outline for our look */
.btn.primary,.btn.bronze{ background:var(--bronze); border-color:var(--bronze); color:#fff; }
.btn.primary:hover,.btn.bronze:hover{ background:var(--bronze-hi); border-color:var(--bronze-hi); box-shadow:var(--sh-1); }
.badge.bronze{ background:var(--bronze); }
.chip.on{ background:var(--bronze); border-color:var(--bronze); color:#fff; }
/* section titles: a touch more editorial presence */
.sec-title{ letter-spacing:-.015em; }
::selection{ background:var(--bronze-soft); }

/* ── explorer widget (design tweak panel, mockup-only) ── */
.dl-explore{position:fixed;bottom:20px;inset-inline-start:20px;z-index:2000;font-family:var(--sans)}
.dl-toggle{display:inline-flex;align-items:center;gap:8px;background:#12181a;color:#fff;border:0;border-radius:999px;
  padding:11px 18px;font-weight:700;font-size:13px;box-shadow:var(--sh-2);cursor:pointer}
.dl-body{position:absolute;bottom:calc(100% + 10px);inset-inline-start:0;background:#fff;border:1px solid var(--hairline);
  border-radius:18px;box-shadow:var(--sh-3);padding:16px;display:none;flex-direction:column;gap:10px;width:264px;max-height:min(74vh,580px);overflow:auto}
.dl-explore.open .dl-body{display:flex}
.dl-sec{font-size:10.5px;font-weight:800;letter-spacing:.09em;color:#9aa09a;text-transform:uppercase;margin-top:2px}
.dl-swg{display:flex;flex-wrap:wrap;gap:8px}
.dl-sw{width:26px;height:26px;border-radius:50%;cursor:pointer;border:2px solid #fff;box-shadow:0 0 0 1px #d6d3c5;transition:transform .15s}
.dl-sw:hover{transform:scale(1.14)}.dl-sw.on{box-shadow:0 0 0 2px #12181a}
.dl-cc{display:flex;align-items:center;justify-content:space-between;gap:8px;background:#f5f5f1;border:1px solid var(--hairline);border-radius:11px;padding:8px 12px}
.dl-cc label{display:flex;align-items:center;gap:9px;font-size:12.5px;font-weight:700;cursor:pointer;color:#12181a}
.dl-cc input[type=color]{width:30px;height:30px;border:1px solid #d6d3c5;border-radius:8px;padding:0;background:none;cursor:pointer}
.dl-hex{font-size:11px;font-weight:700;color:#9aa09a;font-family:ui-monospace,monospace}
.dl-fl{display:flex;flex-direction:column;gap:5px}
.dl-fb{display:flex;align-items:center;gap:9px;justify-content:flex-start;text-align:start;border:1px solid #d6d3c5;background:#fff;
  border-radius:10px;padding:8px 11px;font-size:11px;font-weight:600;color:#565d57;width:100%;cursor:pointer}
.dl-fb b{font-size:17px;color:#12181a;font-weight:700;line-height:1}
.dl-fb:hover{border-color:#12181a}
.dl-fb.on{background:#12181a;border-color:#12181a;color:#fff}.dl-fb.on b{color:var(--mint)}
@media(max-width:640px){.dl-explore{bottom:14px}}

/* capture helper (local only): ?flat=1 flattens the tall hero for screenshots */
:root[data-cap="1"] .hero{ min-height:560px !important; height:560px !important; }

/* ═══════════════ MODERN LANDING (design layer, mockup-only) ═══════════════ */
body.is-landing{background:var(--paper)}
.landing{font-family:var(--sans);background:var(--paper)!important;color:var(--ink)!important}
.nl-nav{position:fixed;inset-inline:0;top:0;z-index:1500;display:flex;align-items:center;gap:22px;
  padding:15px max(28px,calc((100vw - 1240px)/2));transition:background .3s,box-shadow .3s,border-color .3s;border-bottom:1px solid transparent}
.nl-nav.solid{background:color-mix(in srgb,var(--paper) 88%,transparent);backdrop-filter:blur(16px);border-bottom-color:var(--hairline);box-shadow:var(--sh-1)}
.nl-brand{display:flex;align-items:center;gap:10px;font-family:var(--serif);font-weight:900;font-size:23px;color:#fff;text-decoration:none;transition:color .3s}
.nl-nav.solid .nl-brand{color:var(--ink)}
.nl-links{display:flex;gap:26px;margin-inline-start:auto;font-size:14.5px;font-weight:600;color:rgba(255,255,255,.9)}
.nl-nav.solid .nl-links{color:var(--ink-soft)}
.nl-links a{color:inherit;text-decoration:none}.nl-links a:hover{color:var(--mint)}.nl-nav.solid .nl-links a:hover{color:var(--bronze)}
/* "דוגמה" opens a hover menu: there is more than one example project */
.nl-demo-menu{position:relative;display:inline-flex}
.nl-demo-pop{position:absolute;top:100%;inset-inline-end:0;padding-top:12px;display:flex;
  flex-direction:column;gap:6px;min-width:250px;opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity .18s,transform .18s,visibility .18s}
.nl-demo-menu:hover .nl-demo-pop,.nl-demo-menu:focus-within .nl-demo-pop{opacity:1;visibility:visible;transform:none}
.nl-demo-pop::before{content:"";position:absolute;inset:12px 0 0 0;border-radius:16px;
  background:color-mix(in srgb,var(--paper) 96%,transparent);backdrop-filter:blur(14px);
  border:1px solid var(--hairline);box-shadow:var(--sh-2)}
.nl-demo-pop button{position:relative;margin:6px;padding:9px 14px;border:0;border-radius:11px;
  background:transparent;color:var(--ink);font-family:var(--sans);text-align:start;cursor:pointer;
  display:flex;flex-direction:column;gap:2px;transition:background .15s}
.nl-demo-pop button:first-of-type{margin-top:12px}
.nl-demo-pop button:hover{background:color-mix(in srgb,var(--bronze) 12%,transparent)}
.nl-demo-pop .nl-demo-n{font-size:14.5px;font-weight:700}
.nl-demo-pop .nl-demo-s{font-size:12px;font-weight:500;color:var(--ink-soft)}
.nl-login{font-size:14px;font-weight:700;padding:9px 18px;border-radius:999px;border:1px solid rgba(255,255,255,.4);background:transparent;color:#fff;cursor:pointer}
.nl-nav.solid .nl-login{border-color:var(--hairline-2);color:var(--ink)}
.nl-login:hover{background:var(--bronze);border-color:var(--bronze);color:#fff}

.nl-hero{position:relative;min-height:100svh;display:flex;align-items:flex-end;overflow:hidden;isolation:isolate}
/* The hero background is the looping showreel (aerial → interior → dollhouse →
   plan, cross-dissolved; the last frame returns to the first, so plain `loop`
   reads as one continuous take). The poster stays as the background-image so
   the first paint is never empty, and remains the whole background when the
   video is refused: reduced-motion, save-data, or an autoplay block. */
.nl-hero-bg{position:absolute;inset:0;z-index:-2;background:url(/static/v2/media/hero-r22-poster.webp) center/cover no-repeat;transform:scale(1.05)}
.nl-hero-vid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transition:opacity .8s ease;pointer-events:none}
.nl-hero-vid.on{opacity:1}
/* ::after paints after the video (same stacking context, later in paint order),
   so the shade sits on the footage without a z-index race.
   The first layer is new: the reel runs from a dusk aerial to a near-white
   floor plan, and the old shade — tuned for one dark render — left the white
   headline sitting on beige. A scrim down the right edge (where the RTL copy
   lives) keeps the type readable through the bright half of the loop without
   flattening the aerial. */
.nl-hero-bg::after{content:"";position:absolute;inset:0;
  background:linear-gradient(to left,rgba(8,14,10,.58) 0,rgba(8,14,10,.34) 34%,rgba(8,14,10,.10) 62%,transparent 84%),
  linear-gradient(180deg,rgba(8,14,10,.62) 0,rgba(8,14,10,.16) 26%,rgba(8,14,10,.30) 58%,rgba(8,14,10,.92) 100%),
  radial-gradient(120% 80% at 82% 6%,color-mix(in srgb,var(--bronze) 40%,transparent),transparent 55%)}
/* on a phone the copy runs full width, so the side scrim only veils footage —
   let the vertical shade do the work instead */
@media(max-width:900px){.nl-hero-bg::after{
  background:linear-gradient(180deg,rgba(8,14,10,.66) 0,rgba(8,14,10,.34) 30%,rgba(8,14,10,.52) 62%,rgba(8,14,10,.94) 100%),
  radial-gradient(120% 80% at 82% 6%,color-mix(in srgb,var(--bronze) 40%,transparent),transparent 55%)}}
@media (prefers-reduced-motion:reduce){.nl-hero-vid{display:none}}
.nl-hero-in{width:100%;max-width:1240px;margin:0 auto;padding:0 30px 56px;position:relative;z-index:1;
  display:grid;grid-template-columns:minmax(0,1.32fr) minmax(0,.88fr);gap:40px;align-items:end}
.nl-hero-copy{color:#fff}
.nl-eyebrow{display:inline-flex;align-items:center;gap:9px;font-size:12.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--mint)}
.nl-eyebrow::before{content:"";width:22px;height:2px;background:var(--mint);border-radius:2px}
.nl-h1{color:#fff;font-family:var(--serif);font-weight:900;font-size:clamp(46px,7vw,104px);letter-spacing:-.03em;line-height:.94;margin:20px 0 0;text-shadow:0 2px 40px rgba(0,0,0,.3)}
.nl-h1 em{font-style:italic;color:var(--mint)}
.nl-sub{color:rgba(255,255,255,.9);font-size:clamp(17px,1.6vw,20px);max-width:44ch;margin:22px 0 0;line-height:1.55}
.nl-console{background:rgba(255,255,255,.14);backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px);
  border:1px solid rgba(255,255,255,.26);border-radius:26px;padding:24px;box-shadow:var(--sh-3);color:#fff}
.nl-cbadge{display:inline-flex;align-items:center;gap:8px;background:color-mix(in srgb,var(--mint) 22%,transparent);border:1px solid color-mix(in srgb,var(--mint) 42%,transparent);
  color:#eafff5;padding:6px 12px;border-radius:999px;font-size:12px;font-weight:700;margin-bottom:15px}
.nl-ctitle{font-family:var(--serif);font-weight:800;color:#fff;font-size:21px}
.nl-cp{color:rgba(255,255,255,.78);font-size:13.5px;margin:5px 0 16px}
.nl-form{display:flex;gap:8px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.24);border-radius:14px;padding:6px 6px 6px 16px}
.nl-form input{flex:1;min-width:0;background:transparent;border:0;outline:none;color:#fff;font-size:17px;font-family:var(--serif);font-weight:700}
.nl-form input::placeholder{color:rgba(255,255,255,.55)}
.nl-go{border:0;background:var(--bronze);color:#fff;border-radius:10px;padding:0 22px;font-weight:700;font-size:15px;white-space:nowrap;cursor:pointer;transition:background .2s}
.nl-go:hover{background:var(--bronze-hi)}
.nl-trust{display:flex;gap:16px;margin-top:14px;font-size:12px;color:rgba(255,255,255,.82);flex-wrap:wrap}
.nl-trust span{display:flex;align-items:center;gap:6px}.nl-trust span::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--mint)}
#land-result .lr-card{background:#fff;color:var(--ink);border-radius:14px;padding:16px;margin-top:12px;box-shadow:var(--sh-2)}
/* This layer made the result card white, but everything inside it kept v2.css's colours for the old dark card: the
   "not on the site yet" line and the "עוד לא" button were white on white, and so was everything a visitor typed into
   the lead form (found 2026-10-11). Colours for a white card, each at least 4.5:1 on white: */
#land-result .lr-flag{color:#8a6a1c}
#land-result .lr-flag.miss{color:#5d6a76}
#land-result .lr-price b{color:#8a6a1c}
#land-result .lr-chips span{background:var(--paper);border-color:var(--hairline-2);color:var(--ink)}
#land-result .lr-btns .btn:not(.bronze){background:var(--surface);color:var(--ink);border:1.5px solid var(--hairline-2)}
#land-result .lr-btns .btn:not(.bronze):hover{border-color:var(--ink);background:var(--paper)}
#land-result .lr-note.ok{color:var(--best)}
#land-result .lr-in{background:var(--surface);color:var(--ink);border:1px solid var(--hairline-2)}
#land-result .lr-in::placeholder{color:#5d6a76}
#land-result .lr-fine a{color:#8a6a1c}
.nl-console .land-error{color:#ffcabc;font-size:13px;margin-top:10px}
/* "גללו" in the middle with an arrow, on phones too: the feature clips are right below (Yuval, 2026-10-19). On a phone
   the hero is taller than the screen, and a hint pinned to the foot of the screen covered the lottery field, so it stays
   at the hero's end there as well, just above the clips. */
.nl-scroll{position:absolute;bottom:12px;left:50%;transform:translateX(-50%);z-index:2;display:flex;flex-direction:column;
  align-items:center;gap:1px;color:rgba(255,255,255,.88);font-size:13px;font-weight:600;letter-spacing:.1em;text-decoration:none}
.nl-scroll svg{width:20px;height:20px;animation:nl-bob 1.8s ease-in-out infinite}
@keyframes nl-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(4px)}}
@media (prefers-reduced-motion:reduce){.nl-scroll svg{animation:none}}
/* minmax(0,…), not a bare 1fr: a bare track never goes below its content's min-content width, and the lottery
   input's built-in width (about 217 px) held the column at 360 px, so on a phone the card ran off the screen's
   left edge and took the hero text with it (audit 2.15) */
/* on a phone the hero's content is taller than the screen, so it starts at the very top: the top padding keeps its
   first line ("מחיר למשתכן · דירה בהנחה") out from under the fixed bar (Yuval's iPhone, 2026-10-19) */
@media(max-width:900px){.nl-hero-in{grid-template-columns:minmax(0,1fr);gap:26px;padding-top:88px}}
/* a phone's card is narrow enough that the example in the field ("…למשל 2025") was cut; a little less padding
   gives it back. 16 px is the smallest field text iOS does not zoom into on focus. */
@media(max-width:420px){
  .nl-console{padding:20px 16px}
  .nl-form{padding:6px 6px 6px 10px}
  .nl-form input{font-size:16px}
  .nl-console .nl-go{padding:0 15px}
}
/* a 360 px phone (many Androids) was still 7 px short of the whole example; narrower than 350 px the field gets the
   hint without the example (v2.js), since no padding gives back the 47 px a 320 px screen lacks (Yuval, 2026-10-13) */
@media(max-width:380px){
  .nl-console{padding:20px 12px}
  .nl-form{gap:6px}
}

.nl-sec{max-width:1240px;margin:0 auto;padding:100px 30px}
.nl-head{max-width:64ch}
.nl-eyebrow2{display:inline-flex;align-items:center;gap:9px;font-size:12.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--bronze)}
.nl-eyebrow2::before{content:"";width:22px;height:2px;background:var(--bronze);border-radius:2px}
.nl-h2{font-family:var(--serif);font-weight:900;font-size:clamp(32px,4.6vw,58px);letter-spacing:-.025em;margin:14px 0 0;color:var(--ink)}
.nl-mark{background:linear-gradient(transparent 62%,var(--bronze-soft) 62%)}
.nl-lead{color:var(--ink-soft);font-size:19px;margin:16px 0 0;max-width:60ch}
.nl-bento{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:44px}
.nl-card{background:var(--surface);border:1px solid var(--hairline);border-radius:24px;padding:26px;box-shadow:var(--sh-1);
  transition:transform .25s cubic-bezier(.2,.8,.2,1),box-shadow .25s}
.nl-card:hover{transform:translateY(-6px);box-shadow:var(--sh-2)}
.nl-ci{width:46px;height:46px;border-radius:13px;background:var(--bronze-soft);display:grid;place-items:center;margin-bottom:16px}
.nl-ci svg{width:22px;height:22px;stroke:var(--bronze);fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.nl-card h3{font-family:var(--serif);font-weight:800;font-size:22px;margin:0 0 8px;color:var(--ink)}
.nl-card p{color:var(--ink-soft);font-size:15px;margin:0;line-height:1.55}
@media(max-width:900px){.nl-bento{grid-template-columns:1fr}}

/* feature clips (v2.js mountFeatureReel): the player, with the list of tools beside it on a computer and as a
   swipeable strip under it on a phone */
/* its heading is one line on a computer (the shared .nl-head cap of 64ch broke it in two) */
#nl-watch .nl-head{max-width:none}
@media(min-width:901px){#nl-watch .nl-h2{white-space:nowrap}}
#nl-watch+#nl-get{padding-top:20px}
.fr{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:28px;margin-top:40px;align-items:start}
.fr-stage{position:relative;aspect-ratio:16/10;border-radius:22px;overflow:hidden;background:#efeadf;box-shadow:var(--sh-2);border:1px solid var(--hairline)}
.fr-stage video{display:block;width:100%;height:100%;object-fit:cover;cursor:pointer}
.fr-big{position:absolute;inset:0;margin:auto;width:76px;height:76px;border-radius:50%;border:0;background:rgba(18,24,26,.72);
  display:grid;place-items:center;cursor:pointer;box-shadow:var(--sh-2)}
.fr-big[hidden]{display:none}
.fr-big svg{width:34px;height:34px;fill:#fff}
.fr-ctl{position:absolute;bottom:12px;inset-inline-start:12px;display:flex;gap:8px;opacity:0;transition:opacity .2s}
.fr-stage:hover .fr-ctl,.fr.paused .fr-ctl,.fr-ctl:focus-within{opacity:1}
.fr-ctl button{width:38px;height:38px;border-radius:50%;border:0;background:rgba(18,24,26,.7);display:grid;place-items:center;cursor:pointer}
.fr-ctl svg{width:18px;height:18px;fill:#fff}
.fr-ctl #fr-full svg{fill:none;stroke:#fff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.fr .i-play{display:none}.fr.paused .i-play{display:block}.fr.paused .i-pause{display:none}
.fr-list{display:flex;flex-direction:column;gap:2px}
.fr-item{position:relative;text-align:start;border:0;background:transparent;border-radius:12px;padding:10px 16px 10px 14px;cursor:pointer;
  font:inherit;color:var(--ink-soft);transition:background .2s,color .2s}
.fr-item b{display:block;font-size:16px;font-weight:700}
.fr-item:hover{background:var(--surface)}
.fr-item.on{background:var(--surface);color:var(--ink);box-shadow:var(--sh-1)}
.fr-desc{display:block;font-size:13.5px;line-height:1.5;max-height:0;overflow:hidden;opacity:0;transition:max-height .3s,opacity .3s,margin .3s}
.fr-item.on .fr-desc{max-height:60px;opacity:1;margin-top:3px}
.fr-bar{position:absolute;inset-block:10px;inset-inline-start:0;width:3px;border-radius:3px;background:var(--hairline);overflow:hidden;opacity:0}
.fr-item.on .fr-bar{opacity:1}
.fr-bar i{position:absolute;inset:0;background:var(--bronze);transform-origin:top;transform:scaleY(var(--p,0))}
.fr-line{display:none}
@media(max-width:900px){
  .fr{grid-template-columns:minmax(0,1fr);gap:14px;margin-top:28px}
  .fr-stage{border-radius:16px}
  .fr-ctl{opacity:1;bottom:8px;inset-inline-start:8px;gap:6px}
  .fr-ctl button{width:32px;height:32px}
  .fr-ctl svg{width:15px;height:15px}
  .fr-list{flex-direction:row;overflow-x:auto;gap:8px;scrollbar-width:none;-webkit-overflow-scrolling:touch;
    scroll-snap-type:x proximity;margin:0 -30px;padding:2px 30px 6px}
  .fr-list::-webkit-scrollbar{display:none}
  .fr-item{flex:none;scroll-snap-align:center;border:1px solid var(--hairline-2);border-radius:999px;padding:9px 16px;background:var(--surface);overflow:hidden}
  .fr-item b{font-size:14px;white-space:nowrap}
  .fr-item.on{background:var(--ink);color:#fff;border-color:var(--ink)}
  .fr-desc{display:none}
  .fr-bar{inset:auto 0 0 0;width:auto;height:3px;border-radius:0;background:transparent}
  .fr-bar i{transform-origin:right;transform:scaleX(var(--p,0))}
  .fr-line{display:block;margin:0;color:var(--ink-soft);font-size:15px;line-height:1.55;min-height:3.1em}
}

.nl-manifesto{max-width:1240px;margin:0 auto;padding:0 30px}
.nl-mani-in{background:#12181a;color:#fff;border-radius:28px;padding:clamp(40px,6vw,84px);position:relative;overflow:hidden}
.nl-mani-in::after{content:"";position:absolute;inset:0;background:radial-gradient(90% 120% at 90% -10%,color-mix(in srgb,var(--bronze) 55%,transparent),transparent 55%);pointer-events:none}
.nl-mani-in .nl-eyebrow{position:relative}
.nl-mani-in blockquote{position:relative;font-family:var(--serif);font-weight:800;font-size:clamp(28px,4.4vw,54px);line-height:1.16;letter-spacing:-.02em;margin:20px 0 0;max-width:20ch;color:#fff}
.nl-mani-in blockquote em{color:var(--mint);font-style:italic}
.nl-mani-in>div>p{position:relative;margin:24px 0 0;color:rgba(255,255,255,.72);font-size:16px;max-width:52ch}

.nl-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin-top:44px;position:relative}
.nl-step{padding:0 28px;position:relative;text-align:center}
.nl-step::before{content:"";position:absolute;top:27px;inset-inline-start:0;width:100%;height:2px;background:var(--hairline-2)}
.nl-step:first-child::before{inset-inline-start:50%;width:50%}.nl-step:last-child::before{width:50%}
.nl-num{position:relative;width:56px;height:56px;border-radius:50%;background:var(--surface);border:2px solid var(--ink);display:grid;place-items:center;
  font-family:var(--serif);font-weight:900;font-size:23px;margin:0 auto 22px;color:var(--ink)}
.nl-step:first-child .nl-num{background:var(--bronze);border-color:var(--bronze);color:#fff}
.nl-step h3{font-family:var(--serif);font-weight:800;font-size:21px;margin:0 0 8px;color:var(--ink)}
.nl-step p{color:var(--ink-soft);font-size:15px;margin:0}
@media(max-width:820px){.nl-steps{grid-template-columns:1fr;gap:32px}.nl-step::before{display:none}}

.nl-trustwrap{display:grid;grid-template-columns:1.15fr .85fr;gap:26px;margin-top:40px;align-items:stretch}
.nl-quote{background:var(--surface);border:1px solid var(--hairline);border-radius:26px;padding:40px;box-shadow:var(--sh-1)}
.nl-q{font-family:var(--serif);font-weight:800;font-size:clamp(24px,2.9vw,34px);line-height:1.25;letter-spacing:-.01em;color:var(--ink)}
.nl-q em{color:var(--bronze);font-style:normal}
.nl-quote>p{color:var(--ink-soft);font-size:16px;margin:20px 0 0}
.nl-ledger{background:#12181a;color:#fff;border-radius:26px;overflow:hidden;box-shadow:var(--sh-2)}
.nl-lrow{display:flex;justify-content:space-between;align-items:center;padding:22px 26px;border-bottom:1px solid rgba(255,255,255,.09)}
.nl-lrow:last-child{border-bottom:0}
.nl-lrow .k{color:rgba(255,255,255,.7);font-size:14.5px}.nl-lrow .v{font-family:var(--serif);font-weight:900;font-size:24px;color:var(--mint)}
@media(max-width:820px){.nl-trustwrap{grid-template-columns:1fr}}

.nl-cta-wrap{max-width:1240px;margin:0 auto;padding:60px 30px}
.nl-cta{position:relative;border-radius:28px;overflow:hidden;padding:clamp(48px,7vw,92px) 40px;text-align:center;color:#fff;isolation:isolate}
.nl-cta-bg{position:absolute;inset:0;z-index:-2;background:url(/static/v2/media/demo-8642-courtyard-r1.jpg) center/cover}
.nl-cta::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(8,14,10,.82),rgba(8,14,10,.72)),radial-gradient(80% 120% at 50% -20%,color-mix(in srgb,var(--bronze) 55%,transparent),transparent 60%)}
.nl-cta h2{color:#fff;font-family:var(--serif);font-weight:900;font-size:clamp(30px,4.6vw,54px);letter-spacing:-.02em}
.nl-cta p{color:rgba(255,255,255,.82);font-size:18px;max-width:46ch;margin:18px auto 30px}
.nl-cta-actions{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.nl-btn{border:0;border-radius:999px;padding:15px 30px;font-size:15px;font-weight:700;cursor:pointer;font-family:var(--sans);transition:transform .2s,box-shadow .2s,background .2s}
.nl-btn:hover{transform:translateY(-2px)}
.nl-btn.primary{background:var(--bronze);color:#fff}.nl-btn.primary:hover{background:var(--bronze-hi);box-shadow:var(--sh-2)}
.nl-btn.ghost{background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.3);color:#fff;backdrop-filter:blur(8px)}
.nl-btn.ghost:hover{background:rgba(255,255,255,.22)}
/* a demo button names its project (there is more than one example project) */
.nl-btn .nl-demo-n{display:block;line-height:1.25}
.nl-btn .nl-demo-s{display:block;font-weight:500;font-size:12.5px;opacity:.78;margin-top:3px}

.nl-footer{max-width:1240px;margin:60px auto 0;padding:56px 30px 34px;border-top:1px solid var(--hairline)}
.nl-footer-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:30px}
.nl-fabout{color:var(--muted);font-size:13.5px;max-width:36ch;margin:14px 0 0;line-height:1.6}
.nl-fcol{display:flex;flex-direction:column;gap:9px}
.nl-fh{font-family:var(--serif);font-weight:800;font-size:15px;margin-bottom:4px;color:var(--ink)}
.nl-fcol a{color:var(--ink-soft);font-size:13.5px;text-decoration:none}.nl-fcol a:hover{color:var(--ink)}
.nl-soon em{font-style:normal;font-size:11px;color:var(--bronze);background:var(--bronze-soft);border-radius:6px;padding:1px 6px;margin-inline-start:5px}
.nl-legal{color:var(--muted);font-size:12.5px;margin-top:30px;border-top:1px solid var(--hairline);padding-top:20px;line-height:1.6}
@media(max-width:820px){.nl-footer-grid{grid-template-columns:1fr 1fr}}

:root[data-cap="1"] .nl-hero{min-height:640px !important}

/* ── solo numbers in Bellefair (brand decision) ── */
.hstat-v,.afact-v,.cstat-v,.card-price,.card-ppm,.card-monthly b,
.cmp-price,.dw-price,.mkt-gap,.calc-out b,.calc-out strong{font-family:var(--num)!important}
.mkt-table td{font-family:var(--num)}
.mkt-table td:first-child{font-family:var(--sans)}

/* ═══════════════ ANALYSIS STEPPER (design layer, mockup-only) ═══════════════ */
.stg-bar{position:sticky;top:var(--topbar-h,57px);z-index:58;background:color-mix(in srgb,var(--paper) 94%,transparent);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--hairline);box-shadow:var(--sh-1)}
.stg-in{max-width:1240px;margin:0 auto;padding:9px 24px;display:flex;align-items:center;gap:12px}
.stg-tabs{display:flex;align-items:center;gap:4px;overflow-x:auto;scrollbar-width:none;flex:1;min-width:0}
.stg-tabs::-webkit-scrollbar{display:none}
/* prev/next live in the bar itself, so the stepper needs no second row */
.stg-arrow{display:inline-flex;align-items:center;gap:6px;flex:none;cursor:pointer;font-family:var(--sans);
  border:1px solid var(--hairline-2);background:var(--surface);color:var(--ink);border-radius:999px;
  padding:8px 15px;font-weight:700;font-size:13px}
.stg-arrow:hover:not(:disabled){border-color:var(--bronze);color:var(--bronze)}
.stg-arrow:disabled{opacity:.35;cursor:default}
.stg-arrow .stg-ar{font-size:15px;line-height:1}
.stg-tab{display:inline-flex;align-items:center;gap:8px;border:0;background:transparent;color:var(--ink-soft);
  font-weight:600;font-size:13.5px;padding:8px 13px;border-radius:999px;white-space:nowrap;cursor:pointer;font-family:var(--sans)}
.stg-tab:hover{color:var(--ink)}
.stg-tab.on{background:var(--bronze-soft);color:var(--bronze)}
.stg-no{width:22px;height:22px;border-radius:50%;background:var(--hairline);color:var(--ink-soft);display:grid;place-items:center;
  font-family:var(--num);font-weight:700;font-size:12.5px}
.stg-tab.on .stg-no{background:var(--bronze);color:#fff}
.stg-tab.done .stg-no{background:var(--bronze-hi);color:#fff}
.stg-prog{height:3px;background:var(--hairline)}
.stg-prog i{display:block;height:100%;width:0;background:var(--bronze);transition:width .35s cubic-bezier(.2,.8,.2,1)}
/* the app's apartments toolbar must sit below the stepper bar — real heights
   are measured into --topbar-h/--stgbar-h at runtime (no hardcoded stack) */
.apts-sec .toolbar-wrap{top:calc(var(--topbar-h,57px) + var(--stgbar-h,0px))!important}
/* fixed bottom tutorial nav */
.stg-foot{position:fixed;inset-inline:0;bottom:0;z-index:57;display:flex;align-items:center;justify-content:center;gap:18px;
  padding:11px 24px;background:color-mix(in srgb,var(--paper) 92%,transparent);backdrop-filter:blur(14px);
  border-top:1px solid var(--hairline);box-shadow:0 -6px 24px rgba(15,25,20,.08)}
.stg-count{font-size:13.5px;color:var(--ink-soft)}
.stg-count b{font-family:var(--num);color:var(--ink);font-size:17px;margin:0 3px}
.stg-fprev,.stg-fnext{border:1px solid var(--hairline-2);background:var(--surface);color:var(--ink);border-radius:999px;
  padding:10px 24px;font-weight:700;font-size:14px;cursor:pointer;font-family:var(--sans)}
.stg-fnext{background:var(--bronze);border-color:var(--bronze);color:#fff}
.stg-fnext:hover:not(:disabled){background:var(--bronze-hi)}
.stg-fprev:hover:not(:disabled){border-color:var(--bronze);color:var(--bronze)}
.stg-fprev:disabled,.stg-fnext:disabled{opacity:.35;cursor:default}
body:not(.is-landing){padding-bottom:66px}

/* ═══════════════ STEPPER SUMMARY STAGE (design layer) ═══════════════ */
.stg-summary-sec{padding-top:42px;padding-bottom:20px}
.stg-sum-head{margin-bottom:22px}
.stg-sum-kick{display:inline-block;font-size:12px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--bronze);margin-bottom:8px}
.stg-sum-sub{color:var(--ink-soft);font-size:16px;max-width:66ch;margin:10px 0 0;line-height:1.6}
.stg-sum-card{background:var(--surface);border:1px solid var(--hairline);border-radius:var(--r-l);box-shadow:var(--sh-1);overflow:hidden}
.stg-sum-table{width:100%;border-collapse:collapse;font-size:14.5px}
.stg-sum-table th{text-align:start;font-size:12px;font-weight:700;color:var(--muted);padding:14px 16px;background:#f2f1ec;border-bottom:1px solid var(--hairline)}
.stg-sum-table td{padding:14px 16px;border-bottom:1px solid var(--hairline);vertical-align:middle}
.stg-sum-table tbody tr:last-child td{border-bottom:0}
.stg-sum-table tbody tr:hover{background:#faf9f5}
.sm-rk{font-family:var(--num);font-weight:700;font-size:18px;color:var(--bronze);width:40px}
.sm-nm{font-weight:700}.sm-nm span{display:block;font-size:12px;color:var(--muted);font-weight:500;margin-top:1px}
.sm-pr{font-family:var(--num);font-weight:700;font-size:17px}
.sm-act{text-align:end;white-space:nowrap}
.stg-sum-empty{padding:38px 26px;text-align:center;color:var(--muted);display:flex;flex-direction:column;
  align-items:center;gap:10px}
.stg-sum-empty b{font-family:var(--serif);font-size:21px;font-weight:800;color:var(--ink)}
.stg-sum-empty span{font-size:14.5px;line-height:1.6;max-width:46ch}
.stg-sum-empty .btn{margin-top:6px}
.stg-sum-actions{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:22px}
.stg-sum-exp{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.stg-sum-explbl{font-size:13px;color:var(--ink-soft);font-weight:600}
.stg-sum-exp .btn b{font-family:var(--sans)}
@media(max-width:640px){.stg-sum-table th:nth-child(4),.stg-sum-table td:nth-child(4),.stg-sum-table th:nth-child(6),.stg-sum-table td:nth-child(6){display:none}}

/* ═══════════════ MOBILE FIXES (design layer) ═══════════════ */
/* clip decorative hero scale-overflow without breaking sticky */
html{overflow-x:clip}
.hero,.nl-hero{overflow:hidden}
/* market table: scroll horizontally on small screens instead of pushing the page */
@media (max-width:760px){
  .mkt-table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch}
  .mkt-table thead,.mkt-table tbody{display:table;width:100%;min-width:560px}
}
/* ── stepper on phones: ONE line, and only one ─────────────────────────────
   Before: six wrapped tabs (three rows of the bar) plus a fixed bottom pill
   with two big buttons — four bands of chrome around the content. Now the bar
   shows arrows + numbered steps with only the live step spelled out, and the
   bottom pill is gone (the bar is sticky, so הבא/הקודם are always in reach). */
@media (max-width:760px){
  .stg-in{gap:6px;padding:7px 10px}
  .stg-tabs{flex-wrap:nowrap;overflow-x:auto;justify-content:center;gap:3px}
  .stg-tab{padding:4px;gap:0;border-radius:999px}
  .stg-tab .stg-nm{display:none}
  .stg-tab.on{padding:4px 12px 4px 4px;gap:7px;max-width:46vw}
  .stg-tab.on .stg-nm{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12.5px}
  .stg-arrow{padding:7px 10px;font-size:12.5px}
  .stg-arrow .stg-lbl{display:none}
  .stg-arrow .stg-ar{font-size:17px}
  .stg-foot{display:none}
  body:not(.is-landing){padding-bottom:76px}   /* just clears the FABs */
}
/* in-content stage nav: phones only (desktop keeps the fixed bottom pill).
   Declared BEFORE the media query that turns it on — a later plain rule would
   win over an earlier @media one at equal specificity. */
.stg-jump{display:none;gap:10px;max-width:1240px;margin:6px auto 30px;padding:0 16px}
.stg-jump[hidden]{display:none}
.stg-jump button{flex:1 1 0;min-height:48px;border-radius:14px;font-family:var(--sans);
  font-weight:800;font-size:15px;cursor:pointer;padding:12px 14px;
  display:inline-flex;align-items:center;justify-content:center;gap:8px}
.stg-jump button[hidden]{display:none}
.stg-jprev{border:1px solid var(--hairline-2);background:var(--surface);color:var(--ink)}
.stg-jnext{border:1px solid var(--bronze);background:var(--bronze);color:#fff;
  box-shadow:0 6px 18px rgba(176,124,42,.25)}
.stg-jump button span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* a flex item never shrinks below its content unless told it may: without this the two buttons held their full
   labels and the apartments step was 426 px wide on a 390 px phone (audit 5.1); now the labels' ellipsis works */
.stg-jump button{min-width:0}
@media (max-width:760px){ .stg-jump:not([hidden]){display:flex} }

/* ── summary as cards (replaces the cramped table) ── */
.stg-sum-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
@media(max-width:900px){.stg-sum-grid{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.stg-sum-grid{grid-template-columns:1fr;gap:12px}
  .ssi-media{height:118px}          /* one summary card per screen was a lot of scrolling */
  .ssi-b{padding:13px;gap:8px}}
.ssi{background:var(--surface);border:1px solid var(--hairline);border-radius:var(--r-l);overflow:hidden;
  box-shadow:var(--sh-1);display:flex;flex-direction:column;transition:transform .2s cubic-bezier(.2,.8,.2,1),box-shadow .2s}
.ssi:hover{transform:translateY(-4px);box-shadow:var(--sh-2)}
.ssi-media{position:relative;height:150px;background:#eef0ee center/cover no-repeat;border-bottom:1px solid var(--hairline)}
.ssi-media.whole{background-color:#fff;background-size:contain}   /* a tour's cover: the whole flat, never cropped */
.ssi-rk{position:absolute;top:10px;inset-inline-start:10px;width:32px;height:32px;border-radius:10px;background:var(--bronze);color:#fff;
  font-family:var(--num);font-weight:700;font-size:17px;display:grid;place-items:center;box-shadow:var(--sh-1)}
.ssi-b{padding:16px;display:flex;flex-direction:column;gap:11px;flex:1}
.ssi-h{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.ssi-nm{font-family:var(--serif);font-weight:800;font-size:19px;white-space:nowrap}
.ssi-loc{font-size:12px;color:var(--muted);font-weight:600;text-align:end}
.ssi-specs{display:flex;flex-wrap:wrap;gap:6px}
.ssi-specs span{font-size:11.5px;font-weight:600;color:var(--ink-soft);background:#f2f1ec;border-radius:8px;padding:4px 10px}
.ssi-foot{display:flex;align-items:flex-end;justify-content:space-between;gap:8px;margin-top:auto}
.ssi-btns{display:flex;align-items:center;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.ssi-btns .btn{white-space:nowrap}
@media(max-width:600px){.ssi-btns{flex-wrap:nowrap}}
.ssi-price{display:flex;flex-direction:column;gap:1px}
.ssi-p{font-family:var(--num);font-weight:700;font-size:21px;line-height:1}
.ssi-mo{font-size:11px;color:var(--ink-soft)}
.ssi-rm{align-self:flex-start;border:0;background:none;color:var(--muted);font-size:12px;font-weight:600;cursor:pointer;padding:0}
.ssi-rm:hover{color:var(--over);text-decoration:underline}

/* ── mobile fixes (v2): landing nav + stepper bottom nav clears the FABs ── */
@media (max-width:700px){
  .nl-links{display:none}                 /* stop the ugly word-wrap; brand + כניסה remain */
  .nl-nav{gap:12px}
}

/* ═══════════ SUMMARY STAGE · working actions ═══════════ */
.stg-sum-stats{display:flex;gap:18px;flex-wrap:wrap;margin-top:12px}
.stg-sum-stat{font-size:13px;color:var(--ink-soft);font-weight:600}
.stg-sum-stat b{font-family:var(--num);font-size:17px;color:var(--ink);margin-inline-start:5px}
.stg-sum-order{color:var(--muted);font-weight:500}
.stg-sum-exp .btn.primary{font-weight:800}
.stg-sum-cta{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
@media(max-width:640px){
  .stg-sum-actions{flex-direction:column;align-items:stretch}
  .stg-sum-cta{flex-direction:column;align-items:stretch}
  .stg-sum-cta .btn{justify-content:center}
}

/* ── landing: FAQ ──────────────────────────────────────────────── */
/* .landing is a flex column, where a section with auto margins shrinks to its content: the FAQ widened when a
   question opened and narrowed when it closed. It keeps the open width, the list's 760px and the section's padding
   (designer's note D12, Yuval 2026-10-17). */
#nl-faq{width:min(820px,100%)}
.nl-faq{max-width:760px;margin:0 auto;display:flex;flex-direction:column;gap:10px}
.nl-faq details{background:#fff;border:1px solid var(--line,#e5dfd2);border-radius:14px;padding:0 20px;overflow:hidden}
.nl-faq summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:12px;
  padding:17px 0;font-weight:700;font-size:15.5px;color:#22303c}
.nl-faq summary::-webkit-details-marker{display:none}
.nl-faq summary::after{content:'+';font-size:20px;font-weight:400;color:var(--bronze,#b07c2a);flex:0 0 auto;transition:transform .18s}
.nl-faq details[open] summary::after{transform:rotate(45deg)}
.nl-faq details p{margin:0;padding:0 0 18px;font-size:14.5px;line-height:1.7;color:#5a6675}

/* ── landing: contact form ─────────────────────────────────────── */
.nl-contact{max-width:560px;margin:0 auto;display:flex;flex-direction:column;gap:12px}
.nl-contact .lc-row{display:flex;gap:12px}
.nl-contact .lc-row input{flex:1;min-width:0}
.nl-contact input,.nl-contact textarea{font:inherit;font-size:15px;padding:12px 14px;border:1px solid var(--line,#e5dfd2);
  border-radius:12px;background:#fff;color:#22303c;resize:vertical}
.nl-contact input:focus,.nl-contact textarea:focus{outline:none;border-color:var(--bronze,#b07c2a)}
/* Spam honeypot. It has to stay a real, fillable, on-canvas input — a bot that
   fills every field is the whole point — so it hides with opacity, not
   display:none. It used to sit at left:-9999px, which is the LTR trick: in an
   RTL document the left is the END edge, so that parked the page's scroll
   width at ~10,400px. Chromium hid the damage behind the html{overflow-x:clip}
   below; WebKit still sized the layout canvas to it, which is why iOS could pan
   sideways and why pinch-zoom-out shrank the whole page to fit. Stay in bounds. */
.nl-contact #lc-company{position:absolute;inset-inline-start:0;top:0;width:1px;height:1px;
  padding:0;border:0;opacity:0;pointer-events:none;z-index:-1}
.nl-contact .nl-go{padding:13px 22px;border-radius:12px}
.lc-note{margin:0;text-align:center;font-size:13px;color:#8a94a0}
.lc-status{margin:0;text-align:center;font-size:14px;font-weight:700;color:#5a6675}
.lc-status.ok{color:#2e7d43}
.lc-status.err{color:#b0392a}
@media (max-width:560px){ .nl-contact .lc-row{flex-direction:column} }

/* ── landing: sticky mobile CTA ────────────────────────────────── */
.nl-sticky{display:none}
@media (max-width:720px){
  .nl-sticky{display:block;position:fixed;left:0;right:0;bottom:0;z-index:70;
    padding:10px 14px calc(10px + env(safe-area-inset-bottom));
    background:rgba(13,18,24,.92);backdrop-filter:blur(8px)}
  .nl-sticky[hidden]{display:none}
  .nl-sticky button{width:100%;border:0;border-radius:12px;padding:14px;cursor:pointer;
    background:linear-gradient(#c98f33,var(--bronze,#b07c2a));color:#fff;font:700 16px Assistant,'Segoe UI',sans-serif}
  body.is-landing .a11y-fab{bottom:78px}
}

/* ── live availability: sold marking everywhere ─────────────────── */
.card.is-sold{position:relative}
.card.is-sold .card-body,.card.is-sold .card-media,.card.is-sold img{opacity:.55;filter:saturate(.4)}
.card-sold-stamp{position:absolute;top:14px;left:-8px;z-index:5;background:#c0392b;color:#fff;
  font:800 17px/1 Assistant,'Segoe UI',sans-serif;letter-spacing:.03em;padding:8px 22px;
  transform:rotate(-8deg);border-radius:6px;box-shadow:0 3px 12px rgba(160,30,20,.35)}
.dw-sold{display:inline-block;margin-top:8px;background:#c0392b;color:#fff;font-weight:800;
  font-size:15px;padding:6px 16px;border-radius:9px}
.rank-row.is-sold td{opacity:.5;text-decoration:line-through;text-decoration-color:rgba(192,57,43,.6)}
.rank-row.is-sold td:first-child{text-decoration:none}

/* ── "לא רלוונטית" (dislike): out of the ranking, never out of sight ── */
.card-dis{position:absolute;top:13px;inset-inline-end:62px;z-index:6;width:40px;height:40px;border-radius:50%;
  border:none;background:rgba(255,255,255,.95);color:#b6aa97;font-size:20px;line-height:1;cursor:pointer;
  display:flex;align-items:center;justify-content:center;box-shadow:var(--sh-1,0 2px 8px rgba(0,0,0,.12));
  transition:transform .15s,color .15s}
.card-dis:hover{transform:scale(1.12)}
.card-dis.on{color:#c0392b;background:#fdeeea}
.dw-head .card-dis{position:static;width:38px;height:38px}
.card.is-dis .card-body,.card.is-dis .card-media,.card.is-dis img{opacity:.5;filter:saturate(.35)}
.card-dis-tag{position:absolute;top:64px;inset-inline-start:12px;z-index:5;background:#5a3a3a;color:#fff;
  font:600 12.5px Assistant,'Segoe UI',sans-serif;padding:5px 12px;border-radius:999px}
.card-dis-tag a{color:#ffd9a8;font-weight:800;text-decoration:none;margin-inline-start:4px}

/* live availability toast */
#avail-toast{position:fixed;bottom:24px;left:50%;transform:translate(-50%,16px);z-index:120;
  background:#161c24;color:#fff;font:600 14.5px Assistant,'Segoe UI',sans-serif;direction:rtl;
  padding:12px 22px;border-radius:999px;box-shadow:0 6px 22px rgba(0,0,0,.3);
  border:1px solid rgba(217,169,78,.4);opacity:0;pointer-events:none;transition:opacity .3s,transform .3s}
#avail-toast.show{opacity:1;transform:translate(-50%,0)}

/* weights can step aside on DESKTOP too (the seg toggle was mobile-only) */
.mt-seg{display:flex;gap:8px;max-width:360px;margin:0 auto 6px}
.mt-seg-b{flex:1 1 0;font:800 14px Assistant,'Segoe UI',sans-serif;padding:9px 0;border-radius:10px;
  border:1.5px solid var(--line,#ddd6c8);background:#fff;color:#22303c;cursor:pointer}
.mt-seg-b.on{background:var(--bronze,#b07c2a);border-color:var(--bronze,#b07c2a);color:#fff}
.match-body.weights-collapsed .mt-sliders{display:none}

.dw-report{align-self:center;font-weight:700;font-size:13px;padding:8px 14px;border:1.5px solid var(--bronze,#b07c2a);
  border-radius:10px;color:var(--bronze,#b07c2a);text-decoration:none;white-space:nowrap}
.dw-report:hover{background:var(--bronze,#b07c2a);color:#fff}

/* the ranking table gets the room: one slim line above, legal below */
.mt-oneline{margin:0 0 8px;font-size:12.5px;color:#8a94a0}
.match-body .mt-sliders{padding-bottom:2px}


/* a project that could not load (v2.js showLoadError): a mistyped number or a failing server */
.load-err{min-height:100vh;min-height:100dvh;box-sizing:border-box;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:14px;padding:40px 22px;text-align:center;background:var(--paper);color:var(--ink);
  font-family:var(--sans)}
.load-err .load-err-brand{font-size:26px;margin-bottom:8px}
.load-err h1{font-family:var(--serif);font-weight:800;font-size:clamp(24px,5vw,34px);line-height:1.25;margin:0;max-width:24ch}
.load-err p{font-size:16px;line-height:1.6;color:var(--muted,#5d6a76);margin:0;max-width:46ch}
.load-err-btns{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:10px}

/* keyboard focus always shows (audit 5.6); a mouse click does not draw it. The lottery field draws it on its frame. */
:focus-visible{outline:3px solid var(--bronze);outline-offset:2px}
.nl-form:focus-within{box-shadow:0 0 0 3px color-mix(in srgb,var(--mint) 75%,transparent)}
.nl-form input:focus-visible{outline:none}
/* a full-screen overlay is open (v2.js ovSync): the floating accessibility and chat buttons step aside (audit 6.17) */
body.ov-full .a11y-fab,body.ov-full #aichat-btn{display:none!important}
/* the lightbox on a phone: the picture takes the fingers (pinch, drag, double-tap in v2.js), and the whole picture
   opens on its own for the browser's native zoom (audit 6.12) */
#lb-img{touch-action:none}
/* a zoomed plan fills the screen: the close button stays above it (it was painted under the picture), dark so its
   white mark shows on a white plan too */
.lb-close{z-index:2;background:rgba(10,14,18,.72);box-shadow:0 0 0 1px rgba(255,255,255,.4)}
.lb-close:hover{background:rgba(10,14,18,.9)}
.lb-full{display:inline-block;margin-top:10px;padding:6px 14px;border-radius:999px;border:1px solid rgba(255,255,255,.45);
  color:#fff;font-size:14px;font-weight:600;text-decoration:none}
.lb-full:hover{background:rgba(255,255,255,.12)}
.pro-note{margin:10px 0 0;font-size:13px;line-height:1.5;color:#5d6a76}
/* the hero's availability tile: the line saying as of when (v2.js availWhen) */
.hstat-n{display:block;font-size:11.5px;color:rgba(255,255,255,.66);margin-top:1px;letter-spacing:.02em}
/* the compare table says by how much a flat trails the best one (audit 13.20) */
.cmp .cell .cmp-delta{display:block;font-size:12px;font-weight:500;color:var(--muted);margin-top:3px;line-height:1.3}
/* floor neighbours with rooms, type and state, each opening its flat (audit 13.19) */
.dw-neighbors{line-height:1.9}
.dw-neighbors .nb-chip{margin-inline:0 4px;font-weight:600;color:var(--ink);white-space:nowrap}
.dw-neighbors .nb-chip.is-sold{color:var(--muted);font-weight:500}
/* Off-screen cards skip layout and paint until they near the screen: a full list redraw on a phone went from about
   1.3 s to 0.25 s at a 4x slower CPU (audit 4.8). The sizes are the measured card heights per layout, and "auto"
   keeps each card's real height once it has been drawn, so the scrollbar does not jump. */
#cards .card{content-visibility:auto;contain-intrinsic-size:auto 531px}
#cards.lay-dense .card{contain-intrinsic-size:auto 430px}
#cards.lay-rows .card{contain-intrinsic-size:auto 140px}
/* a starred flat that sold is marked in the summary too (audit 13.1) */
.ssi-sold{color:#c0392b;font-weight:800}
/* ── phone screens (designer's note D1): the compare table, the ranking, the open flat and the filter fill the screen
   and close with a back arrow at the start corner (BACK_SVG in v2.js); a computer keeps them as they were ── */
.ov-back,.tb-back,.tb-show,.cmp-swipe{display:none}
@keyframes scrIn{from{opacity:0;transform:translateX(-18px)}to{opacity:1;transform:none}}
@media (max-width:760px){
  #compare-ov,#match-ov{padding:0;align-items:stretch;justify-content:stretch;background:var(--paper);backdrop-filter:none}
  #compare-ov>.ov-panel,#match-ov>.ov-panel{width:100%;max-width:none;height:100%;max-height:none;border-radius:0;
    box-shadow:none;border:0;animation:scrIn .22s ease both}
  #compare-ov .ov-x,#match-ov .ov-x,.dw-head .ov-x{display:none}
  #compare-ov .ov-back,#match-ov .ov-back,.dw-head .ov-back{display:block}
  #compare-ov .ov-close,#match-ov .ov-close,.dw-head .ov-close{display:inline-flex;align-items:center;justify-content:center;
    width:40px;height:40px;background:transparent;color:var(--ink)}
  /* two flats side by side and a strip of the next, so it shows there is more to swipe to; the labels stay put */
  #compare-ov .cmp{grid-template-columns:92px repeat(var(--cmp-cols),minmax(calc((100vw - 92px) / 2.2),1fr))}
  #compare-ov .cmp>div{padding:10px 8px}
  #compare-ov .cmp .rowh{font-size:12px;line-height:1.3}
  #compare-ov .cmp .cell{font-size:14px}
  #compare-ov .cmp-price{font-size:16px}
  #compare-ov .cmp .colhead{padding:12px 8px 10px;scroll-snap-align:start}
  #compare-ov .cmp .colhead img{height:84px}
  #compare-ov .ov-body{scroll-snap-type:x mandatory;scroll-padding-inline-start:92px}
  .cmp-swipe{display:block;order:4;flex:1 1 100%;margin:0;font-size:12.5px;color:var(--muted)}
  #match-ov .mt-field{flex:1 1 100%}   /* one slider a row: the whole width to drag on */
  /* the open flat: the whole width, its name always in the header (the ⊘ and "דוח דירה" had pushed it out) */
  .drawer,.rank-split .drawer{width:100%}
  .drawer-scrim{display:none!important}
  .dw-head{display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;grid-template-areas:"back title dis fav" "back title rep rep";
    align-items:center;gap:6px 8px;padding:10px 12px;min-height:0;flex:0 0 auto}
  .dw-head>div:first-child{grid-area:title;min-width:0}
  .dw-head .ov-close{grid-area:back;position:static;inset:auto;margin:0}
  .dw-head .card-fav{grid-area:fav;position:static;inset:auto;transform:none;margin:0;width:38px;height:38px}
  .dw-head .card-dis{grid-area:dis;margin:0}
  .dw-head .dw-report{grid-area:rep;justify-self:stretch;justify-content:center;margin:0;padding:4px 10px;min-height:0}
  .dw-sold{font-size:12px;padding:3px 10px;border-radius:7px;margin-top:4px}
  /* the filter as a screen of its own, above the page and under any screen it opens (the ranking) */
  body.filters-full .apts-sec .toolbar-wrap,body.filters-full .toolbar-wrap{position:fixed;inset:0;top:0!important;z-index:89;
    padding:0;background:var(--paper);overflow-y:auto;-webkit-overflow-scrolling:touch}
  body.filters-full .toolbar-wrap>.wrap{padding:0;max-width:none}
  body.filters-full .toolbar-wrap #toolbar{max-height:none;min-height:100%;border-radius:0;box-shadow:none;padding:0 16px 96px}
  body.filters-full .tb-head{position:sticky;top:0;z-index:2;background:var(--surface);margin:0 -16px;padding:14px 16px;
    flex-basis:calc(100% + 32px);border-bottom:1px solid var(--hairline)}
  body.filters-full .tb-back{display:block;flex:0 0 auto}
  body.filters-full .tb-chev{display:none}
  body.filters-full .tb-show{display:flex;position:fixed;inset-inline:16px;bottom:max(16px,env(safe-area-inset-bottom));z-index:3;
    justify-content:center;font-size:16px;padding:14px;border-radius:14px;box-shadow:0 0 0 16px var(--paper)}
  body.filters-full .tray,body.filters-full .a11y-fab,body.filters-full #aichat-btn{display:none!important}
}
/* the example project from the first screen (designer's note D5): on a phone it was only in the block near the end */
.nl-cp a{color:#fff;font-weight:700;text-decoration:underline;text-underline-offset:3px}
/* the spec digest for a layman (designer's note D11): an icon per category, a term's plain meaning under its point */
.spec-ic{width:20px;height:20px;flex:0 0 auto;fill:none;stroke:var(--bronze);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.spec-gloss{margin:5px 0 0;font-size:13px;line-height:1.55;color:var(--ink-soft)}
.spec-gloss b{font-weight:700;color:var(--ink)}
/* the logo (brand.css, designer's note D10) in the front page's menu and footer; on the menu's light state, past the
   hero, the name turns ink like the rest of the menu */
.nl-nav .sim-brand{font-size:22px}
.nl-nav.solid .sim-word{color:var(--sim-ink)}
.nl-nav.solid .sim-plan{color:var(--sim-gold)}
.nl-fbrand .sim-brand{font-size:20px}

/* ── the hero's demo tab (renderLanding, demoTabHTML): a small glass invitation under the hero's lead ── */
.nl-demo-tab{display:inline-flex;align-items:center;gap:12px;margin-top:26px;max-width:600px;padding:9px 10px 9px 14px;
  border-radius:16px;background:rgba(255,255,255,.13);border:1px solid rgba(255,255,255,.26);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);color:#fff;text-decoration:none;
  transition:background .2s,border-color .2s,transform .2s}
.nl-demo-tab:hover{background:rgba(255,255,255,.2);border-color:rgba(255,255,255,.4);transform:translateY(-1px)}
.nl-demo-tag{flex:none;padding:5px 11px;border-radius:999px;background:var(--bronze);color:#fff;font-size:12.5px;font-weight:800}
.nl-demo-txt{font-size:14.5px;line-height:1.45;color:rgba(255,255,255,.9)}
.nl-demo-txt b{color:#fff;font-weight:800}
.nl-demo-enter{flex:none;margin-inline-start:auto;padding:7px 14px;border-radius:10px;background:rgba(255,255,255,.92);
  color:var(--ink);font-size:13.5px;font-weight:800;white-space:nowrap}
.nl-demo-enter span{display:inline-block;transition:transform .2s}
.nl-demo-tab:hover .nl-demo-enter span{transform:translateX(-3px)}
@media(max-width:900px){
  .nl-demo-tab{display:flex;flex-wrap:wrap;margin-top:18px;gap:8px 10px;padding:10px 10px 10px 12px}
  .nl-demo-txt{flex:1 1 0;min-width:0;font-size:13.5px}
}
@media(max-width:420px){
  .nl-demo-tag{order:-1}
  .nl-demo-txt{flex-basis:100%;order:2}
  .nl-demo-enter{order:1}
}