/* ============================================================
   Inspectra app screens, drawn in the hero video's language
   (tools/hero-animation): the warm grey canvas, white cards, black
   pills and chips, one blue accent, Heebo. Every screen is one
   340 x 764 CSS px canvas (.vs), the shape of the site's phone screen.
   The site scales it into its phone; tools/screens/render.js photographs the same
   markup into assets/img/app/*.webp.

   Motion: an element's resting style is its final state. Inside a
   .vs-play canvas the same elements run their entrance once, the way
   the video does it (see the "motion" block at the end). Without
   .vs-play nothing moves. The phones play like the site's videos,
   reduced-motion phones included; the accessibility menu's
   "צמצום אנימציות" (html.a11y-nomotion) stops them.
   ============================================================ */
.vs{--bg:#EBE8E3;--card:#FFFFFF;--ink:#0D0D0E;--ink2:#3A3935;--mut:#8B867E;--mut2:#B3AEA6;--chip:#F2F0EC;--chip2:#E8E5E0;--line:#ECE9E4;
  --acc:#2563EB;--acc-soft:#EAF0FE;--hov:#26262A;
  position:relative;width:340px;height:764px;overflow:hidden;background:var(--bg);color:var(--ink);
  font-family:Heebo,system-ui,sans-serif;direction:rtl;text-align:right;line-height:1.35;
  -webkit-font-smoothing:antialiased;font-feature-settings:"tnum" 1,"lnum" 1}
.vs *,.vs *::before,.vs *::after{box-sizing:border-box;margin:0;padding:0}
.vs svg{display:block;overflow:visible}
.vs .ltr{direction:ltr;unicode-bidi:isolate}

/* ---------- device ---------- */
.vs-sb{position:absolute;top:0;left:0;right:0;height:48px;z-index:6;color:var(--ink)}
.vs-sb .t{position:absolute;top:14px;right:30px;font:700 15px/20px Heebo,system-ui,sans-serif;letter-spacing:-.2px;direction:ltr}
.vs-sb .gl{position:absolute;top:18px;left:22px;display:flex;align-items:center;gap:5px;direction:ltr;transform:scale(.9);transform-origin:left center}
.vs-isl{position:absolute;top:10px;left:50%;z-index:7;width:108px;height:32px;margin-left:-54px;border-radius:16px;background:#0D0D0E;color:#fff;overflow:hidden}
/* the island opened into the app's offline note (as in the video) */
.vs-isl.x{width:316px;height:72px;margin-left:-158px;border-radius:28px;display:flex;align-items:center;gap:11px;padding:0 14px}
.vs-isl.x .c{width:42px;height:42px;border-radius:21px;background:#2A2A2D;display:grid;place-items:center;flex:none}
.vs-isl.x b{display:block;font-size:15px;font-weight:700;line-height:1.25}
.vs-isl.x small{display:block;font-size:11.5px;color:#A8A39B;line-height:1.3;white-space:nowrap}
.vs-isl.p{width:176px;margin-left:-88px;display:flex;align-items:center;justify-content:center;gap:8px;font-size:13.5px;font-weight:600}

/* ---------- page ---------- */
.vs-pg{position:absolute;top:48px;left:0;right:0;bottom:0;padding:8px 14px 24px;display:flex;flex-direction:column;gap:11px}
.vs-hd{display:flex;align-items:center;gap:10px;min-height:46px}
.vs-hd .vs-h{flex:1;margin:0;font-size:25px;font-weight:800;letter-spacing:-.01em;line-height:1.15}
.vs-hd .sub{display:block;margin-top:3px;font-size:13.5px;font-weight:500;color:var(--mut);letter-spacing:0}
.vs-back{width:40px;height:40px;border-radius:20px;background:var(--card);display:grid;place-items:center;flex:none;box-shadow:0 1px 2px rgba(40,30,15,.08)}
.vs-card{background:var(--card);border-radius:24px;padding:16px;box-shadow:0 1px 2px rgba(40,30,15,.06),0 12px 26px -16px rgba(40,30,15,.22)}
.vs-card.tight{padding:6px 14px}
.vs-t{font-size:17px;font-weight:800;letter-spacing:-.005em}
.vs-s{font-size:13.5px;color:var(--mut);line-height:1.45}
.vs-lbl{font-size:12.5px;font-weight:700;color:var(--mut);letter-spacing:.01em}
.vs-col{display:flex;flex-direction:column;gap:10px}
.vs-rowf{display:flex;align-items:center;gap:10px}
.vs-grow{flex:1;min-width:0}
.vs-wrap{display:flex;flex-wrap:wrap;gap:8px}
.vs-ic{width:20px;height:20px;flex:none;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.vs-ic.s{width:16px;height:16px}
.vs-ic.l{width:26px;height:26px}

/* the app's bottom bar (בית · היסטוריה · פרויקט חדש · עדכונים · פרופיל) on top-level screens */
.vs-nav{position:absolute;left:0;right:0;bottom:0;height:78px;z-index:5;background:var(--card);box-shadow:0 -1px 0 var(--line);display:flex;align-items:flex-start;padding:9px 4px 0}
.vs-nav>span{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;font-size:10.5px;font-weight:600;color:var(--mut);white-space:nowrap}
.vs-nav>span.on{color:var(--ink);font-weight:800}
.vs-nav .fab{width:50px;height:50px;border-radius:25px;background:var(--ink);color:#fff;display:grid;place-items:center;margin-top:-24px;box-shadow:0 0 0 4px var(--card),0 10px 18px -8px rgba(0,0,0,.4)}

/* ---------- controls ---------- */
.vs-chip{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:38px;padding:0 15px;border-radius:19px;background:var(--chip);font-size:14.5px;font-weight:600;white-space:nowrap}
.vs-chip.on{background:var(--ink);color:#fff}
.vs-chip.sm{height:30px;padding:0 11px;border-radius:15px;font-size:12.5px}
.vs-pill{display:flex;align-items:center;justify-content:center;gap:8px;height:52px;padding:0 20px;border-radius:26px;background:var(--ink);color:#fff;font-size:16px;font-weight:700;white-space:nowrap}
.vs-pill.ghost{background:var(--chip);color:var(--ink)}
.vs-pill.white{background:var(--card);color:var(--ink);box-shadow:0 1px 2px rgba(40,30,15,.08)}
.vs-pill.sm{height:42px;padding:0 16px;border-radius:21px;font-size:14.5px}
.vs-pills{display:flex;gap:8px}
.vs-pills>*{flex:1}
.vs-tag{display:inline-flex;align-items:center;gap:5px;height:26px;padding:0 10px;border-radius:13px;background:var(--chip);font-size:12.5px;font-weight:700;white-space:nowrap;color:var(--ink)}
.vs-tag.acc{background:var(--acc-soft);color:var(--acc)}
.vs-tag.ink{background:var(--ink);color:#fff}
.vs-tag.line{background:var(--card);box-shadow:inset 0 0 0 1.5px var(--line)}
.vs-dot{width:8px;height:8px;border-radius:4px;background:var(--ink2);flex:none}
.vs-dot.acc{background:var(--acc)}
.vs-field{display:flex;align-items:center;gap:10px;height:50px;padding:0 16px;border-radius:25px;background:var(--chip);font-size:15px;color:var(--mut);white-space:nowrap;overflow:hidden}
.vs-field.v{color:var(--ink);font-weight:500}
.vs-field.focus{background:var(--card);box-shadow:inset 0 0 0 2px var(--acc)}
.vs-area{border-radius:18px;background:var(--chip);padding:12px 14px;font-size:14px;line-height:1.5;color:var(--ink)}
.vs-seg{position:relative;display:flex;height:46px;padding:4px;border-radius:23px;background:var(--chip)}
.vs-seg span{position:relative;z-index:1;flex:1;display:grid;place-items:center;border-radius:19px;font-size:14px;font-weight:600;white-space:nowrap}
.vs-seg span.on{background:var(--ink);color:#fff}
.vs-seg.sm{height:38px}
.vs-seg.sm span{font-size:13px}
.vs-sw{position:relative;width:48px;height:28px;border-radius:14px;background:var(--chip2);flex:none}
.vs-sw::after{content:"";position:absolute;top:3px;right:3px;width:22px;height:22px;border-radius:11px;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.18)}
.vs-sw.on{background:var(--ink)}
.vs-sw.on::after{translate:-20px 0}
.vs-cbx{width:22px;height:22px;border-radius:7px;background:var(--card);box-shadow:inset 0 0 0 2px var(--mut2);display:grid;place-items:center;flex:none}
.vs-cbx.on{background:var(--ink);box-shadow:none;color:#fff}
.vs-radio{width:22px;height:22px;border-radius:11px;box-shadow:inset 0 0 0 2px var(--mut2);flex:none}
.vs-radio.on{box-shadow:inset 0 0 0 7px var(--ink)}
.vs-bar{height:8px;border-radius:4px;background:var(--chip2);overflow:hidden}
.vs-bar i{display:block;height:100%;border-radius:4px;background:var(--ink)}

/* ---------- lists ---------- */
.vs-list>*+*{border-top:1px solid var(--line)}
.vs-row{display:flex;align-items:center;gap:12px;padding:11px 0}
.vs-th{position:relative;width:58px;height:58px;border-radius:15px;overflow:hidden;flex:none;background:#d9d4cc}
.vs-th img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.vs-nm{font-size:15px;font-weight:700;line-height:1.3}
.vs-mt{margin-top:3px;font-size:12.5px;color:var(--mut);line-height:1.35}
.vs-ico{width:42px;height:42px;border-radius:13px;background:var(--chip);display:grid;place-items:center;flex:none}
.vs-ico.ink{background:var(--ink);color:#fff}
.vs-ico.acc{background:var(--acc-soft);color:var(--acc)}
.vs-count{min-width:30px;height:26px;padding:0 9px;border-radius:13px;background:var(--chip);font-size:12.5px;font-weight:700;display:grid;place-items:center}

/* ---------- photo + marking ---------- */
.vs-photo{position:relative;border-radius:20px;overflow:hidden;background:#d9d4cc}
.vs-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.vs-photo svg{position:absolute;inset:0;width:100%;height:100%}
.vs-photo .badge{position:absolute;top:12px;right:12px;height:32px;padding:0 13px;border-radius:16px;background:#fff;font-size:13px;font-weight:700;display:flex;align-items:center}
.vs-colors{display:flex;gap:10px;align-items:center}
.vs-colors i{width:22px;height:22px;border-radius:11px;display:block}
.vs-colors i.on{box-shadow:0 0 0 3px var(--bg),0 0 0 5px var(--ink)}

/* ---------- the four inspection types (the video's opening grid) ---------- */
.vs-tiles{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.vs-tile{height:118px;border-radius:20px;background:var(--chip);padding:14px 14px 12px;display:flex;flex-direction:column;justify-content:space-between;align-items:flex-start}
.vs-tile b{font-size:17px;font-weight:800}
.vs-tile.on{background:var(--ink);color:#fff}

/* ---------- numbers ---------- */
.vs-roll{display:block;height:26px;line-height:26px;overflow:hidden}
.vs-roll>span{display:block;translate:0 -50%}
.vs-big{font-size:54px;font-weight:800;letter-spacing:-.02em;line-height:1}
.vs-big small{font-size:.55em;font-weight:700;margin-left:4px}
.vs-stats{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.vs-stat{border-radius:16px;background:var(--chip);padding:10px 12px}
.vs-stat b{display:block;font-size:22px;font-weight:800;line-height:1.1}
.vs-stat>span{font-size:12px;color:var(--mut)}
.vs-stat .vs-roll{height:26px;line-height:26px}
.vs-slider{position:relative;height:10px;border-radius:5px;background:var(--chip2);margin:14px 0 8px}
.vs-slider i{position:absolute;top:0;bottom:0;right:0;border-radius:5px;background:var(--ink)}
.vs-slider b{position:absolute;top:50%;width:30px;height:30px;margin:-15px -15px 0 0;border-radius:15px;background:#fff;box-shadow:0 0 0 1.5px rgba(0,0,0,.08),0 3px 8px rgba(0,0,0,.2)}

/* ---------- report / client page ---------- */
.vs-doc{background:#fff;border-radius:6px;box-shadow:0 0 0 1px var(--line),0 8px 20px -10px rgba(40,30,15,.3)}
.vs-url{display:flex;align-items:center;justify-content:center;gap:6px;height:38px;border-radius:19px;background:var(--card);font-size:13px;color:var(--mut)}

/* ---------- motion (only inside .vs-play; resting style = final state) ---------- */
@keyframes vs-rise{from{opacity:0;translate:0 14px}to{opacity:1;translate:none}}
@keyframes vs-pop{0%{opacity:0;scale:.55}60%{opacity:1;scale:1.06}100%{opacity:1;scale:1}}
@keyframes vs-ring{0%{box-shadow:0 0 0 0 rgba(37,99,235,.45)}100%{box-shadow:0 0 0 14px rgba(37,99,235,0)}}
@keyframes vs-swing{from{rotate:-40deg}to{rotate:0deg}}
@keyframes vs-slide{from{opacity:0;translate:14px 0}to{opacity:1;translate:none}}
@keyframes vs-draw{from{stroke-dashoffset:var(--len,1200)}to{stroke-dashoffset:0}}
@keyframes vs-drop{from{opacity:0;translate:0 -26px;scale:.96}to{opacity:1;translate:none;scale:1}}
@keyframes vs-glow{0%{background:var(--acc-soft)}100%{background:transparent}}
@keyframes vs-type{from{clip-path:inset(0 0 0 100%)}to{clip-path:inset(0 0 0 0)}}
@keyframes vs-knob{from{right:var(--from)}to{right:var(--to)}}
@keyframes vs-fill{from{width:var(--from)}to{width:var(--to)}}
@keyframes vs-island{0%{width:108px;height:32px;margin-left:-54px;border-radius:16px}100%{width:316px;height:72px;margin-left:-158px;border-radius:28px}}
@keyframes vs-fade{from{opacity:0}to{opacity:1}}
@keyframes vs-press{0%,100%{scale:1}40%{scale:.95}}
@keyframes vs-spin{to{rotate:360deg}}
@keyframes vs-roll{from{translate:0 0}to{translate:0 -50%}}
@keyframes vs-type-ltr{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
.vs-play [data-m]{animation-duration:.55s;animation-timing-function:cubic-bezier(.2,.7,.2,1);animation-fill-mode:both;animation-delay:calc(var(--d,0) * 1s)}
.vs-play [data-m="rise"]{animation-name:vs-rise}
.vs-play [data-m="pop"]{animation-name:vs-pop;animation-duration:.6s}
.vs-play [data-m="ring"]{animation-name:vs-pop,vs-ring;animation-duration:.6s,1s;animation-delay:calc(var(--d,0) * 1s),calc(var(--d,0) * 1s + .25s)}
.vs-play [data-m="swing"]{animation-name:vs-swing;animation-duration:.7s;transform-origin:50% 50%}
.vs-play [data-m="slide"]{animation-name:vs-slide}
.vs-play [data-m="draw"]{animation-name:vs-draw;animation-duration:1.3s;animation-timing-function:cubic-bezier(.45,.05,.3,1)}
.vs-play [data-m="drop"]{animation-name:vs-drop;animation-duration:.6s}
.vs-play [data-m="glow"]{animation-name:vs-glow;animation-duration:2.4s;animation-timing-function:ease-out}
.vs-play [data-m="type"]{animation-name:vs-type;animation-duration:.5s;animation-timing-function:steps(3,end)}
.vs-play [data-m="knob"]{animation-name:vs-knob;animation-duration:.9s;animation-timing-function:cubic-bezier(.6,0,.2,1)}
.vs-play [data-m="fill"]{animation-name:vs-fill;animation-duration:.9s;animation-timing-function:cubic-bezier(.6,0,.2,1)}
.vs-play [data-m="island"]{animation-name:vs-island;animation-duration:.6s}
.vs-play [data-m="fade"]{animation-name:vs-fade;animation-duration:.4s}
.vs-play [data-m="press"]{animation-name:vs-press;animation-duration:.35s}
.vs-play [data-m="roll"]{animation-name:vs-roll;animation-duration:.5s}
.vs-play [data-m="spin-once"]{animation-name:vs-spin;animation-duration:.55s}
.vs-play [data-m="type-ltr"]{animation-name:vs-type-ltr;animation-duration:.8s;animation-timing-function:steps(16,end)}
/* a screen without motion of its own: its cards rise one after another, the header stays */
.vs-play.vs-auto>.vs-pg>:not(.vs-hd){animation:vs-rise .55s cubic-bezier(.2,.7,.2,1) both}
.vs-play.vs-auto>.vs-pg>:nth-child(2){animation-delay:.08s}
.vs-play.vs-auto>.vs-pg>:nth-child(3){animation-delay:.18s}
.vs-play.vs-auto>.vs-pg>:nth-child(4){animation-delay:.28s}
.vs-play.vs-auto>.vs-pg>:nth-child(n+5){animation-delay:.38s}

/* ---------- demos (DEMOS in screens.js, played by assets/js/v2.js) ----------
   A demo winds a screen back to its first state, then plays it forward:
   the cursor from the opening film moves and taps, text types itself,
   rows appear, a screen pushes the next one in. */
.ix-live__fit>.vs{position:absolute;inset:0}
.vs-away{visibility:hidden}
.vs-hide{display:none!important}
.vs-show{animation:vs-rise .45s cubic-bezier(.2,.7,.2,1) both}
.vs-show.pop{animation-name:vs-pop;animation-duration:.5s}
.vs-show.drop{animation-name:vs-drop;animation-duration:.55s}
.vs-show.fade{animation-name:vs-fade;animation-duration:.4s}
.vs-in-l{animation:vs-push-in .5s cubic-bezier(.2,.7,.2,1) both}
.vs-out-r{animation:vs-push-out .5s cubic-bezier(.2,.7,.2,1) both}
.vs-in-r{animation:vs-back-in .5s cubic-bezier(.2,.7,.2,1) both}
.vs-out-l{animation:vs-back-out .5s cubic-bezier(.2,.7,.2,1) both}
.vs-in-f{animation:vs-fade .3s ease both}
@keyframes vs-push-in{from{translate:-100% 0}to{translate:none}}
@keyframes vs-push-out{from{translate:none}to{translate:28% 0;filter:brightness(.9)}}
@keyframes vs-back-in{from{translate:28% 0;filter:brightness(.9)}to{translate:none;filter:none}}
@keyframes vs-back-out{from{translate:none}to{translate:-100% 0}}
.vs-typing::after{content:"";display:inline-block;width:2px;height:1.05em;margin-inline-start:2px;vertical-align:-.15em;background:var(--acc);animation:vs-caret .9s steps(1) infinite}
@keyframes vs-caret{50%{opacity:0}}
[data-k]{transition:scale .14s ease,background-color .25s,color .25s,box-shadow .25s}
.vs-press{scale:.94}
.vs-cur{position:absolute;left:0;top:0;z-index:30;width:23px;height:32px;pointer-events:none;opacity:0;transition:translate .55s cubic-bezier(.35,.1,.25,1),opacity .3s;filter:drop-shadow(0 2px 3px rgba(0,0,0,.28))}
.vs-cur.drag{transition:opacity .3s}
.vs-cur svg{display:block;width:100%;height:100%;transform-origin:4px 3px;transition:scale .12s}
.vs-cur.dn svg{scale:.82}
.vs-ripple{position:absolute;z-index:29;width:46px;height:46px;margin:-23px 0 0 -23px;border-radius:50%;background:rgba(37,99,235,.3);pointer-events:none;animation:vs-ripple .55s ease-out forwards}
@keyframes vs-ripple{from{scale:.3;opacity:1}to{scale:1.4;opacity:0}}
.vs-toast{position:absolute;left:50%;top:60px;z-index:25;display:flex;align-items:center;gap:8px;padding:10px 16px 10px 13px;border-radius:22px;background:#0D0D0E;color:#fff;font-size:13.5px;font-weight:700;white-space:nowrap;translate:-50% 0;box-shadow:0 14px 28px -12px rgba(0,0,0,.55);animation:vs-toast 1.9s cubic-bezier(.2,.7,.2,1) both}
.vs-toast svg{width:16px;height:16px;flex:none;fill:none;stroke:#4ADE80;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.vs-toast.spin svg{stroke:#fff;animation:vs-spin .8s linear infinite}
@keyframes vs-toast{0%{opacity:0;translate:-50% -10px;scale:.96}12%,84%{opacity:1;translate:-50% 0;scale:1}100%{opacity:0;translate:-50% -6px;scale:1}}
.vs-flash{position:absolute;inset:0;z-index:28;background:#fff;pointer-events:none;animation:vs-flash .45s ease-out forwards}
@keyframes vs-flash{from{opacity:.42}to{opacity:0}}
.vs-ringing{animation:vs-ring 1s 2}
.vs-spin1{animation:vs-spin .55s}
.vs-tag.ok{background:#DCFCE7;color:#15803D}
.vs-cbx:not(.on) svg{display:none}
.vs-slider i,.vs-slider b{transition:width .8s cubic-bezier(.6,0,.2,1),right .8s cubic-bezier(.6,0,.2,1)}
.vs-bar i{transition:width .6s cubic-bezier(.6,0,.2,1)}
.vs-roll>span{transition:translate .5s cubic-bezier(.3,.7,.3,1)}
.vs-isl{transition:width .5s cubic-bezier(.2,.7,.2,1),height .5s cubic-bezier(.2,.7,.2,1),margin-left .5s cubic-bezier(.2,.7,.2,1),border-radius .5s}
.vs-sw{transition:background-color .25s}
.vs-sw::after{transition:translate .25s cubic-bezier(.3,.7,.3,1)}
/* while a demo winds the screen back, nothing animates; then the phone fades up on it */
.vs-instant,.vs-instant *{transition:none!important;animation:none!important}
.ix-live__fit.vs-restart{animation:vs-fade .35s ease both}