/* KupaLi — kupali.co.il. VoVi's design system (brand/design.md), Hebrew and RTL.
   Same tokens, same radii, same one-lime-moment-per-view discipline. What
   changes here is direction and type, not identity. */

/* Self-hosted Latin faces (same files the US site ships) — no third-party requests */
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:500;font-display:swap;src:url('fonts/space-grotesk-500.woff2') format('woff2')}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:700;font-display:swap;src:url('fonts/space-grotesk-700.woff2') format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/inter-400.woff2') format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url('fonts/inter-500.woff2') format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url('fonts/inter-600.woff2') format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:700;font-display:swap;src:url('fonts/inter-700.woff2') format('woff2')}
@font-face{font-family:'Space Mono';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/space-mono-400.woff2') format('woff2')}
@font-face{font-family:'Space Mono';font-style:normal;font-weight:700;font-display:swap;src:url('fonts/space-mono-700.woff2') format('woff2')}

/* Heebo (OFL), self-hosted. The stacks below have named 'Heebo' first since the
   site was written, but nothing ever shipped the file — so the name only ever
   matched on a machine that already had Heebo installed, and every other
   visitor fell through to Assistant or to a system face. Israeli Hebrew now
   comes from one family everywhere, and it arrives from this origin: no
   fonts.googleapis.com, no fonts.gstatic.com, no third party at all, which is
   what lets the privacy policy list no font vendor.
   Two files, not six: Google serves Heebo as one VARIABLE woff2 per subset, so
   the three weights share a URL and each rule pins its own point on the weight
   axis. unicode-range is verbatim from the upstream CSS. */
@font-face{font-family:'Heebo';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/heebo-hebrew.woff2') format('woff2');unicode-range:U+0307-0308,U+0590-05FF,U+200C-2010,U+20AA,U+25CC,U+FB1D-FB4F}
@font-face{font-family:'Heebo';font-style:normal;font-weight:500;font-display:swap;src:url('fonts/heebo-hebrew.woff2') format('woff2');unicode-range:U+0307-0308,U+0590-05FF,U+200C-2010,U+20AA,U+25CC,U+FB1D-FB4F}
@font-face{font-family:'Heebo';font-style:normal;font-weight:700;font-display:swap;src:url('fonts/heebo-hebrew.woff2') format('woff2');unicode-range:U+0307-0308,U+0590-05FF,U+200C-2010,U+20AA,U+25CC,U+FB1D-FB4F}
@font-face{font-family:'Heebo';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/heebo-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Heebo';font-style:normal;font-weight:500;font-display:swap;src:url('fonts/heebo-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Heebo';font-style:normal;font-weight:700;font-display:swap;src:url('fonts/heebo-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

:root{
  --ink:#0A0B0F;
  --paper:#F6F5F1;
  --cream:#F4F3EE;
  --lime:#D8F34F;
  --lime-deep:#B8D13A;
  --indigo:#3E3BFF;
  --mist:#E9E7E1;
  --slate:#57564F;      /* secondary text on light — ≥7:1 on paper */
  --fog:#9B9CA6;        /* secondary text on dark only */
  --danger:#A8382F;
  --radius:20px;
  --z-nav:50; --z-veil:100; --z-modal:110; --z-toast:200;

  /* Hebrew face first, brand faces behind it. Font fallback is per-glyph, so
     putting Space Grotesk first would set the Hebrew from one family and every
     digit, comma and shekel sign from another — two type systems fighting inside
     a single word. The worst of it lands on ₪, which no Latin brand face carries
     and which is the most important glyph on this site: at 100px it arrived as a
     heavy slab beside Space Grotesk's geometric "50".
     Heebo and Assistant are the Hebrew screen faces most Israeli machines
     already carry; Segoe UI (Windows), Arial Hebrew (macOS) and Noto Sans Hebrew
     (Android/Linux) cover the rest. Space Grotesk and Inter stay in the stack —
     they still catch anything the Hebrew face lacks — and Space Mono is kept for
     the deliberately Latin moments via .mono-latin.
     Heebo is now SHIPPED (see the @font-face block above) rather than merely
     hoped for, so the first name in this stack is the one that answers on every
     machine. The system names behind it stay as the tail for the seconds before
     the file lands and for anyone who blocks webfonts. */
  --sans-he:'Heebo','Assistant','Segoe UI','Arial Hebrew','Noto Sans Hebrew';
  --font-display:var(--sans-he),'Space Grotesk',system-ui,sans-serif;
  --font-body:var(--sans-he),'Inter',system-ui,sans-serif;
  --font-mono:var(--sans-he),'Space Mono',ui-monospace,monospace;
}
*{margin:0;padding:0;box-sizing:border-box}
/* The scrollbar's width is reserved whether or not there is a scrollbar, so
   locking the page behind a modal cannot shift the layout underneath it. One
   declaration instead of measuring the gutter in JS and padding a side that is
   the LEFT one in RTL on some engines and the right one on others. */
html{scroll-behavior:smooth;scrollbar-gutter:stable}
html.modal-open{overflow:hidden}
body{
  font-family:var(--font-body);
  background:var(--paper);
  color:var(--ink);
  line-height:1.72;          /* Hebrew has no ascender/descender relief — it needs the air */
  -webkit-font-smoothing:antialiased;
}
/* Hebrew does not take the tight tracking Latin display type wants. */
h1,h2,h3{font-family:var(--font-display);line-height:1.24;letter-spacing:0;text-wrap:balance}
p{text-wrap:pretty}
a{color:inherit;text-decoration:none}
img,svg{display:block;max-width:100%}
.wrap{max-width:1160px;margin:0 auto;padding:0 24px}
/* Numbers, prices and any Latin run inside Hebrew copy. Without an explicit
   isolate, "₪79" beside a Hebrew word reorders unpredictably across engines. */
.ltr{direction:ltr;unicode-bidi:isolate;display:inline-block}
.num{font-variant-numeric:tabular-nums;direction:ltr;unicode-bidi:isolate}
/* Where the Latin texture is the point rather than an accident: the receipt's
   reference line, and anything set as a code. */
.mono-latin{font-family:'Space Mono',ui-monospace,monospace;direction:ltr;unicode-bidi:isolate}

/* accessibility plumbing */
.skip-link{
  position:absolute;inset-inline-start:16px;top:-60px;z-index:var(--z-toast);
  background:var(--ink);color:var(--cream);padding:10px 18px;border-radius:10px;
  font-weight:600;transition:top .2s;
}
.skip-link:focus{top:12px}
:focus-visible{outline:2.5px solid var(--indigo);outline-offset:2px;border-radius:4px}
.btn:focus-visible,input:focus-visible,select:focus-visible{outline:2.5px solid var(--indigo);outline-offset:2px}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
[hidden]{display:none!important}

/* single brand kicker — the orbit dot system */
.kicker{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--font-mono);font-size:12.5px;
  letter-spacing:0.08em;color:var(--slate);
  border:1px solid var(--mist);background:#fff;border-radius:999px;padding:8px 16px;
}
.kicker::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--lime);border:1.5px solid var(--lime-deep);flex:none}

/* headings end on the orbit dot */
h2 .odot{display:inline-block;width:0.18em;height:0.18em;border-radius:50%;background:var(--lime);border:0.045em solid var(--lime-deep);margin-inline-start:0.14em;vertical-align:0.08em}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:var(--font-display);font-weight:700;font-size:16px;
  border-radius:999px;padding:14px 30px;border:none;cursor:pointer;
  transition:transform .18s cubic-bezier(.22,1,.36,1), box-shadow .18s;
  white-space:nowrap;line-height:1.4;
}
.btn:active{transform:scale(.97)}
.btn-ink{background:var(--ink);color:var(--cream)}
.btn-ink:hover{box-shadow:0 10px 26px -8px rgba(10,11,15,.45);transform:translateY(-1.5px)}
.btn-lime{background:var(--lime);color:var(--ink)}
.btn-lime:hover{box-shadow:0 10px 26px -8px rgba(140,160,30,.55);transform:translateY(-1.5px)}
.btn-ghost{background:transparent;color:var(--ink);border:1.5px solid var(--ink)}
.btn-ghost:hover{background:var(--ink);color:var(--cream)}
.btn-sm{padding:10px 20px;font-size:14px}

/* ---------- nav ----------
   Rebuilt 2026-08-25. The bar used to be seven undifferentiated utility links
   (יכולות · מחיר · שאלות נפוצות · בלוג · עלינו · מרכז עזרה · צור קשר) — a site
   map rather than a route. It is now the three things a visitor comes to buy,
   then the three they come to check, and the four secondary pages moved to the
   footer where a site map belongs.

   Two consequences the CSS has to carry: the labels got much longer (קופה
   ממוחשבת חכמה is 17 glyphs), and Hebrew here is set in whatever face the
   visitor's device has — Heebo on some, Segoe UI on others, and the second is
   materially wider. So the row NEVER wraps and never pushes the CTAs off the
   bar: it is a nowrap flex line that can scroll, which at desktop it never
   needs to and below 980px it becomes the deliberate second-row strip. */
.site-nav{
  position:sticky;top:0;z-index:var(--z-nav);
  background:rgba(246,245,241,.88);backdrop-filter:blur(14px);
  border-bottom:1px solid var(--mist);
}
.nav-inner{display:flex;align-items:center;gap:clamp(18px,2.4vw,34px);height:72px}
/* The KupaLi wordmark carries a descender, so its box is taller than VoVi's
   relative to the cap height. 38px here is 30px of VoVi optically. */
.nav-logo{flex:none}
.nav-logo svg{height:38px;width:auto}
.nav-links{
  display:flex;align-items:center;gap:clamp(13px,1.5vw,21px);
  font-size:15px;font-weight:500;color:var(--slate);
  min-width:0;flex:0 1 auto;
  overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;
}
.nav-links::-webkit-scrollbar{display:none}
.nav-links a{flex:none;white-space:nowrap;position:relative;padding:7px 0;transition:color .16s}
.nav-links a:hover{color:var(--ink)}
/* The three product routes are the nav's reason to exist; מחיר · בלוג · צור
   קשר are what you check on the way. Weight and colour carry that, so the bar
   has a hierarchy without a second row of chrome to explain it. */
.nav-links .nav-type{color:var(--ink);font-weight:600}
.nav-links a[aria-current]{color:var(--ink);font-weight:600}
/* The current page is marked with the brand's own lime rather than a colour
   change, which on a bar that already uses colour for hierarchy would read as
   a fourth state nobody can name. */
.nav-links a[aria-current]::after{
  content:"";position:absolute;inset-inline:0;bottom:1px;height:2.5px;
  border-radius:2px;background:var(--lime);
}
.nav-sep{flex:none;width:1px;height:18px;background:var(--mist);margin:0 2px}
.nav-cta{margin-inline-start:auto;display:flex;gap:12px;align-items:center;flex:none}

/* Below 980px the links drop to their own row under the bar and become a
   snapping strip. Everything stays one tap away — which for a nav that IS the
   router beats hiding six routes behind a burger — and the partial glyph at
   the overflow edge is the affordance that says the row continues. */
@media(max-width:979px){
  .nav-inner{gap:14px;height:64px}
  .nav-links{
    position:absolute;inset-inline:0;top:64px;height:50px;
    gap:0;background:var(--paper);border-bottom:1px solid var(--mist);
    padding:0 clamp(14px,4vw,24px);font-size:14.5px;
    scroll-snap-type:inline proximity;
  }
  .nav-links a{padding:0 13px;height:100%;display:flex;align-items:center;scroll-snap-align:start}
  .nav-links a:first-of-type{padding-inline-start:0}
  .nav-links a[aria-current]::after{inset-inline:13px;bottom:9px}
  .nav-links a:first-of-type[aria-current]::after{inset-inline-start:0}
  .nav-sep{height:16px;margin:0 7px}
  .site-nav{padding-bottom:50px}
}
@media(max-width:430px){
  .nav-cta{gap:7px}
  .nav-cta .btn-sm{padding:9px 13px;font-size:13px;white-space:nowrap}
  .nav-logo svg{height:32px}
}

/* ---------- hero ---------- */
.hero{padding:clamp(48px,8vh,88px) 0 72px}
.hero-grid{display:grid;grid-template-columns:1.12fr .88fr;gap:clamp(32px,5vw,64px);align-items:center}
@media(max-width:980px){.hero-grid{grid-template-columns:1fr}}
.hero h1{font-size:clamp(38px,5.2vw,66px);font-weight:700;margin:0 0 20px}
/* The homepage H1 is two sentences split by a <br>. It is a longer line than
   the one it replaced, so it is set a size down from the shared hero rule —
   enough for "קופה רושמת מלאה," to hold one line at desktop instead of dropping
   a single word below it — with balanced wrapping as the fallback everywhere
   else, since the Hebrew face here is whatever the visitor's device has. */
.hero-grid h1{font-size:clamp(36px,4.9vw,62px);text-wrap:balance}
.hero h1 .hl{position:relative;white-space:nowrap}
/* The marker stroke. 8%/32% is drawn for Latin, where a third of the highlight
   is spent covering descenders; Hebrew has almost none, so those pixels landed
   in the whitespace under the baseline and the stroke read as an underline
   rather than a highlight. Raised so it crosses the letter bodies and stops
   just below the baseline. */
.hero h1 .hl::after{
  content:"";position:absolute;inset-inline:-2%;bottom:17%;height:34%;
  background:var(--lime);z-index:-1;border-radius:6px;transform:rotate(-1.2deg);
}
.hero .lede{font-size:19px;color:var(--slate);max-width:46ch;margin-bottom:30px}
.hero .lede b{color:var(--ink);font-weight:600}
.hero-ctas{display:flex;gap:14px;flex-wrap:wrap}
.hero-facts{display:inline-flex;max-width:100%;gap:0;margin-top:36px;align-items:flex-start}
/* Keep the price proof compact. Equal-width flex items made the short ₪79
   message look stranded inside a large empty column on wide screens. */
.fact{padding:0 22px;border-inline-start:1.5px solid var(--mist);flex:0 1 auto;min-width:0}
.fact:first-child{padding-inline-start:0;border-inline-start:none}
.fact b{font-family:var(--font-display);font-size:clamp(25px,2.2vw,31px);display:block;line-height:1.2;text-wrap:balance}
.fact > span{font-size:13.5px;color:var(--slate)}
@media(max-width:560px){
  .hero-facts{display:grid;grid-template-columns:1fr;width:100%;gap:16px;margin-top:32px}
  .fact{padding:0;border-inline-start:none}
  .fact + .fact{padding-top:16px;border-top:1px solid var(--mist)}
}

/* ---------- lead card ----------
   Slimmed 2026-08-25. In the hero this card sits beside the H1 and the lede,
   and at 30px of padding around four full-height fields it was taller than the
   copy it was supposed to sit next to — so the argument got squeezed by the
   form that only works if the argument lands first. Two required fields stay
   in the open; the two optional ones moved behind a disclosure. Nothing was
   removed: the inputs are in the form whether or not the disclosure is open,
   so form[data-lead] still reads all four. */
.lead-card{
  background:#fff;border:1px solid var(--mist);border-radius:var(--radius);
  padding:clamp(20px,2.4vw,26px);box-shadow:0 24px 60px -30px rgba(10,11,15,.25);
}
.lead-card h2{font-size:18.5px;margin-bottom:5px}
.lead-card .sub{font-size:13.5px;color:var(--slate);margin-bottom:17px;line-height:1.6;max-width:44ch}
.field{margin-bottom:11px}
.field label{display:block;font-size:13px;font-weight:600;margin-bottom:5px}
.field label .opt{color:var(--slate);font-weight:400}
.field input,.field select{
  width:100%;font:inherit;font-size:15px;padding:10px 13px;color:var(--ink);
  border:1.5px solid #DAD8D0;border-radius:11px;background:var(--paper);
  transition:border-color .15s;
}
/* iOS Safari zooms the whole page when a focused input is set below 16px, and
   the visitor then has to pinch their way back out mid-form. */
@media(max-width:640px){.field input,.field select{font-size:16px}}

/* The two optional fields. A real <details>, so it works before JavaScript and
   is keyboard- and screen-reader-native; main.js only ever opens it, and only
   to reveal a field it has just marked invalid. */
.more-fields{margin:3px 0 13px}
.more-fields > summary{
  display:inline-flex;align-items:center;gap:8px;cursor:pointer;list-style:none;
  font-size:13px;font-weight:600;color:var(--slate);
  padding:7px 14px;border:1px solid var(--mist);border-radius:999px;background:#fff;
  transition:border-color .18s,color .18s,background .18s;
}
.more-fields > summary::-webkit-details-marker{display:none}
.more-fields > summary:hover{border-color:#C9C6BE;color:var(--ink);background:var(--paper)}
.more-fields > summary:focus-visible{outline:2.5px solid var(--indigo);outline-offset:3px}
.more-fields > summary::after{
  content:"";width:7px;height:7px;border-inline-end:2px solid currentColor;border-bottom:2px solid currentColor;
  transform:rotate(45deg) translate(-1px,-1px);transition:transform .24s cubic-bezier(.22,1,.36,1);
}
.more-fields[open] > summary{color:var(--ink);border-color:#D6D4CC}
.more-fields[open] > summary::after{transform:rotate(-135deg) translate(-2px,-2px)}
.more-fields .mf-body{padding-top:13px}
.more-fields .mf-body .field:last-child{margin-bottom:2px}
.field ::placeholder{color:#6E6D66;opacity:1}
.field input:focus,.field select:focus{border-color:var(--indigo)}
.field input:focus-visible,.field select:focus-visible{outline:2.5px solid var(--indigo);outline-offset:2px}
/* Phone numbers and email addresses are read and typed left-to-right even in
   Hebrew: both are Latin runs, and left alone in an RTL field the caret starts
   at the wrong edge and the placeholder hangs off the far side of the box. */
.field input[type=tel],.field input[type=email]{direction:ltr;text-align:start}
.phone-row{display:flex;gap:8px}
.phone-row select{width:126px;flex:none;direction:ltr;text-align:start}
.field .err{display:none;font-size:12.5px;color:var(--danger);margin-top:5px;font-weight:500}
.field.bad input{border-color:var(--danger)}
.field.bad .err{display:block}
.lead-card .btn{width:100%;margin-top:6px}
/* The same card standing on its own, outside the hero grid (the pricing page). */
.lead-card-solo{max-width:520px;margin-inline:auto;padding:clamp(26px,4vw,36px)}
.fine{font-size:12px;color:var(--slate);text-align:center;margin-top:12px;line-height:1.65}
.fine a{text-decoration:underline;text-underline-offset:2px}
.form-done{text-align:center;padding:26px 6px;display:none}
/* Was a 🎉. An emoji renders as a different picture on every platform and is a
   costume where the rest of the site draws its own marks — this is the same
   lime disc and hand-drawn tick the modal confirms with. */
.form-done .tick{
  width:56px;height:56px;margin:0 auto 14px;border-radius:50%;
  background:var(--lime);display:grid;place-items:center;
}
.form-done .tick svg{width:27px;height:27px;stroke:var(--ink);stroke-width:2.6;fill:none;
  stroke-linecap:round;stroke-linejoin:round}
.form-done h3{font-size:20px;margin-bottom:6px}
.form-done p{font-size:14.5px;color:var(--slate)}

/* ---------- breadcrumb / a way back ----------
   Each of the three landing pages is an entry point from search: a visitor can
   arrive on קופה ניידת having never seen the home page, and the wordmark alone
   is not a route anyone is sure of. In RTL the previous page is to the RIGHT,
   so the arrow points that way — and it is drawn, because → renders as a
   different weight in every Hebrew fallback face this site runs in. */
.crumbs{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  font-size:13.5px;color:var(--slate);margin-bottom:clamp(16px,2.4vw,24px);
}
.crumbs .home{
  display:inline-flex;align-items:center;gap:8px;font-weight:600;color:var(--ink);
  border:1px solid var(--mist);background:#fff;border-radius:999px;padding:7px 15px;
  transition:border-color .18s,background .18s,transform .18s cubic-bezier(.22,1,.36,1);
}
.crumbs .home:hover{border-color:var(--ink);background:var(--paper)}
.crumbs .home .arw{flex:none;width:14px;height:14px;stroke:currentColor;stroke-width:2.2;
  fill:none;stroke-linecap:round;stroke-linejoin:round;transition:transform .18s cubic-bezier(.22,1,.36,1)}
.crumbs .home:hover .arw{transform:translateX(3px)}
.crumbs .sep{opacity:.4;flex:none}
.crumbs .here{color:var(--slate)}

/* The same route again at the foot of the page, for the reader who got to the
   bottom rather than back to the top. */
.back-row{margin-top:clamp(30px,4vw,44px);display:flex;justify-content:center}
.back-row .btn .arw{width:15px;height:15px;stroke:currentColor;stroke-width:2.2;fill:none;
  stroke-linecap:round;stroke-linejoin:round;transition:transform .18s cubic-bezier(.22,1,.36,1)}
.back-row .btn:hover .arw{transform:translateX(3px)}

/* ---------- sections ---------- */
section{padding:clamp(60px,9vw,100px) 0}
.sec-head{max-width:680px;margin-bottom:clamp(32px,5vw,52px)}
.sec-head h2{font-size:clamp(28px,3.8vw,42px)}
.sec-head p{color:var(--slate);margin-top:14px;font-size:17px;max-width:56ch}
.sec-head p a,.vs-note a,.byo p a,.step p a,.cap p a,.editorial-link{
  color:var(--ink);font-weight:650;text-decoration:none;border-radius:3px;
  box-shadow:inset 0 -.34em 0 rgba(216,243,79,.72);
  transition:box-shadow .18s ease,background .18s ease;
}
.sec-head p a:hover,.vs-note a:hover,.byo p a:hover,.step p a:hover,.cap p a:hover,.editorial-link:hover{
  background:rgba(216,243,79,.34);box-shadow:inset 0 -.12em 0 var(--lime-deep);
}
/* The three facts under a hero CTA row. Beats .sec-head p on specificity so it
   stays a small aside rather than a second lede. */
.sec-head p.hero-fine,.hero-fine{font-size:14.5px;color:var(--slate);margin-top:16px;max-width:46ch}
/* presales.js fills [data-wa-slot] only when the server has a WhatsApp number.
   Empty, it would still take a flex gap — so it collapses instead. */
.wa-slot:empty{display:none}

/* ---------- photo band ---------- */
.photo-band{padding:0}
.photo-band .frame{position:relative;border-radius:26px;overflow:hidden;box-shadow:0 30px 70px -40px rgba(10,11,15,.5)}
.photo-band img{width:100%;height:clamp(320px,50vw,540px);object-fit:cover}
.photo-band .plate{
  position:absolute;inset-inline:clamp(18px,4vw,44px);bottom:clamp(18px,4vw,44px);
  max-inline-size:540px;background:rgba(10,11,15,.82);backdrop-filter:blur(8px);
  color:var(--cream);border-radius:18px;padding:clamp(20px,3vw,30px);
}
.photo-band .plate h2{font-size:clamp(21px,2.5vw,29px);margin-bottom:8px}
.photo-band .plate p{font-size:15px;color:#C9CAD1}
.band-duo{display:grid;grid-template-columns:1fr 1fr;gap:26px;margin-top:26px}
@media(max-width:760px){.band-duo{grid-template-columns:1fr}}
.band-duo .frame img{height:clamp(220px,30vw,340px)}
.band-duo figcaption{font-size:13.5px;color:var(--slate);margin-top:10px;text-align:center}
.band-duo .frame{border-radius:22px}

/* ---------- the price plate ----------
   This was built when there was one number: a plate rather than a comparison
   table, because the whole persuasion was that nothing came after it. The line
   up is three now, so the plate no longer carries the pricing story — .plans
   below does. It is kept because it still does the job it is good at: stating
   ONE number loudly on a page that is about one thing (each of the three
   landing pages). */
.price-plate{
  background:radial-gradient(130% 170% at 50% -30%, #1B1D26 0%, #0A0B0F 58%);
  color:var(--cream);border-radius:30px;padding:clamp(40px,6vw,68px) clamp(24px,5vw,56px);
  text-align:center;
}
.price-plate .who{font-family:var(--font-mono);font-size:12px;letter-spacing:.12em;color:var(--lime);margin-bottom:18px}
.price-tag{
  display:flex;align-items:baseline;justify-content:center;gap:12px;flex-wrap:wrap;
  font-family:var(--font-display);font-weight:700;line-height:1;
}
.price-tag .amt{font-size:clamp(58px,10vw,104px);letter-spacing:-.03em;direction:ltr;unicode-bidi:isolate}
.price-tag .per{font-size:clamp(17px,2.2vw,23px);color:#C9CAD1;font-weight:500}
.price-plate .vat{margin-top:14px;font-size:15.5px;color:#C9CAD1}
.price-plate .vat b{color:var(--cream);font-weight:600}
.price-included{
  list-style:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:12px 30px;margin:clamp(30px,4vw,42px) auto 0;max-width:840px;text-align:start;
}
.price-included li{display:flex;gap:11px;align-items:flex-start;font-size:15.5px;color:#DEDFE4}
.price-included li::before{content:"";flex:none;width:9px;height:9px;border-radius:50%;background:var(--lime);margin-top:10px}
.price-plate .btn{margin-top:clamp(30px,4vw,40px)}
.price-plate .after{display:block;margin-top:16px;font-size:13.5px;color:#9B9CA6}

/* Sixteen identical lines read as legal text. Five headings turn the same list
   into something an owner can scan for the one line their business needs. */
.price-groups{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(228px,1fr));
  gap:clamp(24px,3.4vw,34px) clamp(24px,4vw,44px);
  margin:clamp(30px,4vw,42px) auto 0;max-width:900px;text-align:start;
}
.pgroup h3{font-family:var(--font-mono);font-size:11.5px;font-weight:700;
  letter-spacing:.12em;color:var(--lime);margin-bottom:13px}
.pgroup ul{list-style:none;display:grid;gap:10px}
.pgroup li{display:flex;gap:11px;align-items:flex-start;font-size:15px;line-height:1.5;color:#DEDFE4}
.pgroup li::before{content:"";flex:none;width:8px;height:8px;border-radius:50%;
  background:var(--lime);margin-top:8px}

/* ---------- the three offerings ----------
   Two plans priced per STATION and one suite priced per LOCATION. That
   difference is the single thing a pricing page like this usually hides, so it
   is given its own line inside each card rather than a footnote at the bottom.

   The middle card is the dark one: קופה ממוחשבת חכמה is the plan most businesses land
   on, and the one lime moment per view belongs to it. The suite is the third
   card and is deliberately NOT styled as a third plan — it is an add-on, and a
   card that looks like a peer of the other two would imply you can buy it
   alone. Hence .plan-add: same grid cell, lighter weight, dashed edge. */
.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,1.6vw,20px);align-items:stretch}
@media(max-width:960px){.plans{grid-template-columns:1fr;max-width:520px;margin-inline:auto}}
.plan{
  display:flex;flex-direction:column;background:#fff;border:1px solid var(--mist);
  border-radius:26px;padding:clamp(26px,3vw,34px);
}
.plan-best{background:radial-gradient(130% 170% at 50% -30%, #1B1D26 0%, #0A0B0F 58%);
  color:var(--cream);border-color:transparent;box-shadow:0 34px 74px -46px rgba(10,11,15,.55)}
.plan-add{background:transparent;border-style:dashed;border-color:#C9C6BE}
.plan .tier{font-family:var(--font-mono);font-size:11.5px;letter-spacing:.12em;
  color:var(--slate);margin-bottom:15px;display:flex;align-items:center;gap:9px}
.plan-best .tier{color:var(--lime)}
.plan .tier::before{content:"";flex:none;width:8px;height:8px;border-radius:50%;background:currentColor}
.plan h3{font-size:clamp(21px,2.3vw,26px)}
.plan .amt{font-family:var(--font-display);font-weight:700;
  font-size:clamp(42px,5.6vw,58px);letter-spacing:-.03em;line-height:1.1;margin-top:16px;
  direction:ltr;unicode-bidi:isolate;text-align:start}
.plan .per{font-size:14.5px;color:var(--slate);margin-top:4px;font-weight:500}
.plan-best .per{color:#C9CAD1}
/* The VAT line and the per-station/per-location line are the two facts an owner
   will otherwise have to ask for on the phone. They are never smaller than 13px. */
.plan .vat{font-size:13px;color:var(--slate);margin-top:10px;line-height:1.6}
.plan-best .vat{color:#9B9CA6}
.plan .blurb{font-size:15px;line-height:1.72;color:var(--slate);margin-top:18px}
.plan-best .blurb{color:#DEDFE4}
.plan ul{list-style:none;display:grid;gap:9px;margin-top:20px}
.plan li{display:flex;gap:11px;align-items:flex-start;font-size:14.5px;line-height:1.55;color:var(--slate)}
.plan-best li{color:#DEDFE4}
.plan li::before{content:"";flex:none;width:8px;height:8px;border-radius:50%;
  background:var(--ink);margin-top:8px;opacity:.35}
.plan-best li::before{background:var(--lime);opacity:1}
.plan li b{color:var(--ink);font-weight:600}
.plan-best li b{color:var(--cream)}
/* margin-top:auto pins every card's button to the same baseline whatever the
   list above it is doing — the three cards are deliberately different lengths. */
.plan .plan-cta{margin-top:auto;padding-top:26px}
.plan .plan-cta .btn{width:100%}
.plan .more{display:block;margin-top:13px;font-size:13.5px;color:var(--slate);
  text-align:center;text-decoration:underline;text-underline-offset:3px}
.plan-best .more{color:#9B9CA6}

/* The combined price, stated once, under the cards. It is the number people
   will quote back to us, so it gets a line of its own and its qualification
   ("one station, one location") sits in the same sentence — never a footnote. */
.combo{
  margin-top:clamp(20px,2.6vw,28px);background:var(--cream);border:1px solid var(--mist);
  border-radius:22px;padding:clamp(22px,3vw,30px);display:flex;gap:clamp(16px,3vw,34px);
  align-items:center;flex-wrap:wrap;justify-content:center;text-align:center;
}
.combo .sum{font-family:var(--font-display);font-weight:700;font-size:clamp(26px,3.4vw,36px);
  letter-spacing:-.02em;direction:ltr;unicode-bidi:isolate;line-height:1.15}
.combo p{font-size:14.5px;color:var(--slate);max-width:48ch;line-height:1.7}

/* ---------- the three product types (home page strip) ----------
   A router, not a feature grid: three cards whose only job is to send a visitor
   to the page that matches what they came to buy.

   Rebuilt 2026-08-25. The card used to end on a bare underlined link in the
   indigo the rest of the sheet reserves for body-copy links, which on a white
   card read as a default browser anchor rather than as this site's own
   language. Each card now carries a real button — the ask — with the page link
   demoted underneath it, and the card itself is one target: the heading's
   anchor stretches across the whole surface, and .type-actions sits above that
   overlay so its two controls stay separately clickable. */
.types{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,1.8vw,20px)}
@media(max-width:900px){.types{grid-template-columns:1fr;max-width:540px;margin-inline:auto}}
.type-card{
  position:relative;display:flex;flex-direction:column;
  background:#fff;border:1px solid var(--mist);
  border-radius:26px;padding:clamp(24px,2.8vw,32px);
  transition:transform .24s cubic-bezier(.22,1,.36,1),box-shadow .24s,border-color .24s;
}
.type-card:hover{transform:translateY(-4px);border-color:#D6D4CC;
  box-shadow:0 26px 54px -32px rgba(10,11,15,.45)}
/* The stretched hit area. The outline moves to the CARD when the heading link
   is focused by keyboard, because a 3px ring around six words in the middle of
   a card does not tell a keyboard user that the whole card is the target. */
.type-card .stretch::after{content:"";position:absolute;inset:0;border-radius:inherit;z-index:1}
.type-card .stretch:focus-visible{outline:none}
.type-card:has(.stretch:focus-visible){outline:2.5px solid var(--indigo);outline-offset:3px}
.type-card .tt{
  font-family:var(--font-mono);font-size:11.5px;letter-spacing:.1em;color:var(--slate);
  display:flex;align-items:center;gap:9px;
}
.type-card .tt::before{content:"";flex:none;width:8px;height:8px;border-radius:50%;background:var(--ink);opacity:.3}
.type-card h3{font-size:clamp(20px,2.2vw,25px);margin-top:13px}
.type-card .desc{font-size:14.5px;color:var(--slate);margin-top:10px;line-height:1.7}
.type-actions{
  position:relative;z-index:2;margin-top:auto;padding-top:22px;
  display:flex;flex-direction:column;gap:11px;
}
.type-actions .btn{width:100%}
.type-card:hover .type-actions .btn-ink{box-shadow:0 12px 28px -12px rgba(10,11,15,.5)}
.type-card:hover .type-actions .btn-lime{box-shadow:0 12px 28px -12px rgba(140,160,30,.7)}
.type-more{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  font-size:13.5px;font-weight:600;color:var(--slate);
  padding:4px 6px;border-radius:9px;transition:color .16s;
}
.type-more:hover{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.type-more .arw{flex:none;width:14px;height:14px;stroke:currentColor;stroke-width:2.1;fill:none;
  stroke-linecap:round;stroke-linejoin:round;transition:transform .22s cubic-bezier(.22,1,.36,1)}
/* Forward, in RTL, is leftward. */
.type-more:hover .arw{transform:translateX(-3px)}

/* The card the strip is built around. Same dark plate as .plan-best on the
   pricing block below it, so the two sections tell the same story about which
   plan most businesses land on — and it is where this view spends its lime. */
.type-card--lead{
  background:radial-gradient(130% 170% at 50% -30%, #1B1D26 0%, #0A0B0F 58%);
  color:var(--cream);border-color:transparent;
  box-shadow:0 34px 74px -46px rgba(10,11,15,.55);
}
.type-card--lead:hover{border-color:transparent;box-shadow:0 40px 84px -42px rgba(10,11,15,.62)}
.type-card--lead .tt{color:var(--lime)}
.type-card--lead .tt::before{background:var(--lime);opacity:1}
.type-card--lead .desc{color:#DEDFE4}
.type-card--lead .type-more{color:#9B9CA6}
.type-card--lead .type-more:hover{color:var(--cream)}

/* ---------- the marketing suite, under the strip ----------
   This was a centred paragraph in the same small grey as a photo caption, with
   an inline-styled indigo link at the end of it — an afterthought under three
   cards that are not. It is the one thing on the page that is priced
   differently from everything above it (per LOCATION, not per station), so it
   gets a surface of its own and states that in its own sentence. */
.suite-band{
  margin-top:clamp(18px,2.4vw,26px);
  display:flex;align-items:center;gap:clamp(16px,3vw,32px);flex-wrap:wrap;
  background:var(--cream);border:1px solid var(--mist);border-radius:22px;
  padding:clamp(19px,2.4vw,25px) clamp(20px,3vw,28px);
}
.suite-band .sb-copy{flex:1 1 400px;min-width:0}
.suite-band .sb-lead{
  display:flex;align-items:center;gap:10px;
  font-family:var(--font-display);font-weight:700;font-size:16.5px;color:var(--ink);
}
.suite-band .sb-lead::before{content:"";flex:none;width:10px;height:10px;border-radius:50%;
  background:var(--lime);border:1.5px solid var(--lime-deep)}
.suite-band p{font-size:14.5px;line-height:1.7;color:var(--slate);margin-top:6px;max-width:62ch}
.suite-band p b{color:var(--ink);font-weight:600}
.suite-band .btn{flex:none}
@media(max-width:600px){.suite-band .btn{width:100%}}

/* ---------- a screenshot standing in a device ----------
   Used where we have a real screen capture but no photograph of the hardware:
   the frame is drawn in CSS so the pixels inside it stay our own, unretouched
   screenshot rather than something a model imagined. */
.device-shot{
  max-width:340px;margin-inline:auto;background:#101218;border-radius:34px;
  padding:14px 12px 46px;box-shadow:0 40px 80px -44px rgba(10,11,15,.62);position:relative;
}
.device-shot img{border-radius:22px;width:100%}
/* The paper slot of a terminal with a printer in its chin. */
.device-shot::after{content:"";position:absolute;left:22%;right:22%;bottom:20px;height:5px;
  border-radius:3px;background:#2C2F3A}

/* ---------- cost stepper (how many registers?) ----------
   A slider was the wrong control for a two-to-five-answer question, and a
   range input's fill direction has to be fought in RTL. Two buttons and a
   number is honest about how small the arithmetic is. */
.calc{background:#fff;border:1px solid var(--mist);border-radius:26px;padding:clamp(26px,4vw,44px);box-shadow:0 30px 70px -45px rgba(10,11,15,.3)}
.calc-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(26px,4vw,52px);align-items:center}
@media(max-width:820px){.calc-grid{grid-template-columns:1fr}}
.calc .cl{font-weight:600;font-size:15px;display:block;margin-bottom:14px}
/* Plan chooser. Real radio inputs, visually hidden, so the group is keyboard
   and screen-reader native and works before JavaScript has run — the label is
   the control. */
.seg{display:grid;gap:9px;margin-bottom:26px}
.seg label{
  display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;cursor:pointer;
  border:1.5px solid var(--mist);border-radius:16px;padding:13px 16px;
  font-size:15px;transition:border-color .16s,background .16s;
}
.seg label:hover{border-color:#C9C6BE}
.seg input{position:absolute;width:1px;height:1px;opacity:0}
.seg input:checked + label,.seg label:has(input:checked){border-color:var(--ink);background:#fff}
.seg input:focus-visible + label,.seg label:has(input:focus-visible){outline:2.5px solid var(--indigo);outline-offset:2px}
.seg .nm{font-weight:600}
.seg .pr{font-family:var(--font-display);font-weight:700;margin-inline-start:auto;
  direction:ltr;unicode-bidi:isolate}
.seg .sub{flex-basis:100%;font-size:12.5px;color:var(--slate);line-height:1.55}
/* One extra line under the result when the suite is in the basket, because the
   suite is charged per location and the stepper counts stations. */
.calc-split{font-size:13px;color:var(--slate);margin-top:14px;line-height:1.7;
  padding-top:14px;border-top:1px solid var(--mist);text-align:center}
.calc-split b{color:var(--ink);font-weight:600}
.stepper{display:flex;align-items:center;gap:18px}
.stepper button{
  width:52px;height:52px;border-radius:50%;border:1.5px solid var(--ink);background:transparent;
  font-family:var(--font-display);font-size:26px;font-weight:700;line-height:1;color:var(--ink);
  cursor:pointer;flex:none;transition:background .18s,color .18s;
}
.stepper button:hover:not(:disabled){background:var(--ink);color:var(--cream)}
.stepper button:disabled{opacity:.3;cursor:not-allowed}
.stepper .val{
  font-family:var(--font-display);font-weight:700;font-size:52px;line-height:1;
  min-width:2.2ch;text-align:center;font-variant-numeric:tabular-nums;
}
/* The unit belongs to the number, not to the row: pulled in against it so the
   pair reads as one quantity with a button on either side of it. */
.stepper .unit{font-size:15px;color:var(--slate);font-weight:500;margin-inline-start:-9px}
.calc-note{font-size:13px;color:var(--slate);margin-top:18px;max-width:44ch;line-height:1.6}
.calc-result{text-align:center}
.save-line{margin-bottom:20px}
.save-line .amt{font-family:var(--font-display);font-weight:700;font-size:clamp(38px,5vw,54px);
  letter-spacing:-.03em;line-height:1.05;font-variant-numeric:tabular-nums;direction:ltr;unicode-bidi:isolate}
.save-line .amt.year{color:var(--indigo)}
.save-line .lbl{font-family:var(--font-mono);font-size:12px;letter-spacing:.08em;color:var(--slate);margin-top:4px}

/* ---------- thank-you receipt ----------
   The confirmation a point-of-sale company should have: the lead's order prints
   out of the register. Space Mono is doing literal work here, not costume. */
.receipt-wrap{
  position:relative;z-index:var(--z-modal);width:100%;max-width:372px;
  filter:drop-shadow(0 26px 50px rgba(10,11,15,.45));
}
.receipt{
  --tooth-w:15px;--tooth-h:8px;
  background:#fff;padding:calc(26px + var(--tooth-h)) 26px calc(22px + var(--tooth-h));
  text-align:center;position:relative;
  --zig:
    conic-gradient(from -45deg at bottom,#0000,#000 1deg 89deg,#0000 90deg) bottom/var(--tooth-w) var(--tooth-h) repeat-x,
    conic-gradient(from 135deg at top,#0000,#000 1deg 89deg,#0000 90deg) top/var(--tooth-w) var(--tooth-h) repeat-x,
    linear-gradient(#000 0 0) center/100% calc(100% - 2*var(--tooth-h)) no-repeat;
  -webkit-mask:var(--zig);mask:var(--zig);
  animation:print .62s cubic-bezier(.16,1,.3,1) both;
}
@keyframes print{
  from{clip-path:inset(0 0 100% 0);transform:translateY(-12px)}
  to{clip-path:inset(0 0 0 0);transform:none}
}
.receipt .close{
  position:absolute;top:calc(6px + var(--tooth-h));inset-inline-end:10px;border:none;background:none;
  font-size:19px;line-height:1;cursor:pointer;color:var(--slate);padding:7px;border-radius:8px;
}
.receipt .close:hover{background:var(--mist);color:var(--ink)}
.receipt .mark{display:inline-block;width:74px}
.receipt .who{
  font-family:var(--font-mono);font-size:11.5px;letter-spacing:.06em;
  color:var(--slate);margin-top:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.receipt h2{font-family:var(--font-display);font-weight:700;font-size:25px;line-height:1.25;margin-top:4px;text-wrap:balance}
.receipt .sub{font-size:13.5px;line-height:1.6;color:var(--slate);margin-top:8px;max-width:32ch;margin-inline:auto}
.receipt hr{border:none;border-top:1.5px dashed #CFCDC4;margin:18px 0 14px}
.receipt .items{list-style:none;font-family:var(--font-mono);font-size:12px;text-align:start}
.receipt .items li{
  display:flex;align-items:baseline;gap:6px;padding:3.5px 0;color:#3A3934;
  animation:lineIn .38s cubic-bezier(.16,1,.3,1) both;animation-delay:calc(220ms + var(--i) * 48ms);
}
.receipt .items b{font-weight:400}
.receipt .items span{flex:1;border-bottom:1px dotted #D3D1C8;transform:translateY(-3px)}
.receipt .items em{font-style:normal;font-weight:700;color:var(--ink)}
@keyframes lineIn{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}
.receipt .total{
  display:flex;align-items:baseline;justify-content:space-between;
  font-family:var(--font-display);font-weight:700;font-size:17px;
}
.receipt .total span{font-size:12px;font-family:var(--font-mono);font-weight:400;letter-spacing:.06em;color:var(--slate)}
.receipt .stamp{
  display:inline-block;margin-top:16px;padding:5px 14px 6px;border:2.5px solid var(--lime-deep);
  border-radius:8px;color:#5E6B12;background:rgba(216,243,79,.28);
  font-family:var(--font-mono);font-weight:700;font-size:12.5px;letter-spacing:.06em;
  transform:rotate(-6deg);animation:stamp .3s cubic-bezier(.2,.9,.3,1) .58s both;
}
@keyframes stamp{from{opacity:0;transform:rotate(-14deg) scale(1.5)}to{opacity:1;transform:rotate(-6deg) scale(1)}}
.receipt .barcode{
  height:32px;margin:18px 0 4px;
  background:repeating-linear-gradient(90deg,
    var(--ink) 0 2px,#fff 2px 4px,var(--ink) 4px 5px,#fff 5px 9px,
    var(--ink) 9px 12px,#fff 12px 13px,var(--ink) 13px 14px,#fff 14px 18px);
  opacity:.85;
}
.receipt .code{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.12em;color:var(--slate)}
.receipt .btn{width:100%;margin-top:18px}
.receipt .after{display:block;margin-top:12px;font-size:12.5px;color:var(--slate);text-decoration:underline;text-underline-offset:3px}
.receipt .after:hover{color:var(--ink)}

@media (prefers-reduced-motion:reduce){
  /* Same information, no theatre: the paper is simply already there. */
  .receipt{animation:receiptIn .18s ease-out both;clip-path:none;transform:none}
  .receipt .items li{animation:receiptIn .18s ease-out both;animation-delay:0s;transform:none}
  .receipt .stamp{animation:receiptIn .18s ease-out both;animation-delay:0s;transform:rotate(-6deg)}
  @keyframes receiptIn{from{opacity:0}to{opacity:1}}
}

.modal-veil{
  position:fixed;inset:0;background:rgba(10,11,15,.55);backdrop-filter:blur(4px);
  display:none;justify-content:center;z-index:var(--z-veil);padding:20px;
  overflow-y:auto;overscroll-behavior:contain;
}
.modal-veil.open{display:flex}
.modal-veil > *{margin:auto}

/* ---------- the type lead catcher ----------
   Clicking "רוצה קופה רושמת" on a card used to jump the page to a form at the
   top, which throws away the one piece of information the click just produced —
   WHICH of the three they want — and asks a visitor who was reading about a
   handheld terminal to re-find their place afterwards. The ask happens where
   it was made, the chosen type is named in the heading, and it rides along to
   the lead so the callback opens on the right subject.

   Two fields are required, two are not, and the optional pair is behind the
   same disclosure the hero card uses. Email is NOT required: the callback is a
   phone call. */
.lead-modal{
  position:relative;z-index:var(--z-modal);width:100%;max-width:436px;
  background:#fff;border-radius:26px;padding:clamp(24px,4vw,30px);
  box-shadow:0 40px 90px -38px rgba(10,11,15,.62);
  animation:modalIn .34s cubic-bezier(.16,1,.3,1) both;
}
@keyframes modalIn{from{opacity:0;transform:translateY(16px) scale(.985)}to{opacity:1;transform:none}}
.lead-modal .close{
  position:absolute;top:13px;inset-inline-end:13px;border:none;background:none;
  width:34px;height:34px;display:grid;place-items:center;border-radius:10px;
  cursor:pointer;color:var(--slate);transition:background .16s,color .16s;
}
.lead-modal .close svg{width:16px;height:16px;stroke:currentColor;stroke-width:2.2;fill:none;stroke-linecap:round}
.lead-modal .close:hover{background:var(--mist);color:var(--ink)}
.lm-tag{
  display:flex;align-items:center;gap:9px;
  font-family:var(--font-mono);font-size:11.5px;letter-spacing:.1em;color:var(--slate);
}
.lm-tag::before{content:"";flex:none;width:8px;height:8px;border-radius:50%;
  background:var(--lime);border:1.5px solid var(--lime-deep)}
.lead-modal h2{font-size:clamp(21px,3vw,25px);margin-top:11px;padding-inline-end:26px}
.lm-sub{font-size:13.5px;color:var(--slate);margin:8px 0 19px;line-height:1.65}
.lead-modal .btn[type=submit]{width:100%;margin-top:4px}

/* ---------- the confirmation ---------- */
.lm-done{text-align:center;padding:6px 0 2px}
.lm-done .tick{
  width:66px;height:66px;margin:0 auto 17px;border-radius:50%;
  background:var(--lime);display:grid;place-items:center;
}
.lm-done .tick svg{
  width:31px;height:31px;stroke:var(--ink);stroke-width:2.7;fill:none;
  stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:30;stroke-dashoffset:30;
  animation:tick .44s cubic-bezier(.5,0,.25,1) .14s forwards;
}
@keyframes tick{to{stroke-dashoffset:0}}
.lm-done h2{font-size:24px;padding:0}
.lm-done p{font-size:14.5px;color:var(--slate);margin-top:9px;max-width:30ch;margin-inline:auto}
/* The auto-close is visible and countable. A dialog that vanishes on its own
   without saying it is going to is a dialog people distrust. */
.lm-count{
  display:inline-flex;align-items:center;gap:11px;margin-top:22px;
  font-size:12.5px;color:var(--slate);
}
.lm-count .ring{position:relative;width:28px;height:28px;flex:none}
.lm-count .ring svg{width:28px;height:28px;transform:rotate(-90deg)}
.lm-count .ring circle{fill:none;stroke-width:2.5}
.lm-count .ring .track{stroke:var(--mist)}
.lm-count .ring .prog{stroke:var(--lime-deep);stroke-linecap:round;
  stroke-dasharray:69.115;transition:stroke-dashoffset .98s linear}
.lm-count .n{position:absolute;inset:0;display:grid;place-items:center;
  font-size:11.5px;font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums}

/* Fired once, above the veil, and removed when it lands. Never interactive. */
.confetti{position:fixed;inset:0;z-index:calc(var(--z-modal) + 5);pointer-events:none}

@media(prefers-reduced-motion:reduce){
  /* Same confirmation, no theatre. main.js skips the confetti entirely; the
     tick and the panel simply arrive. */
  .lead-modal{animation:none}
  .lm-done .tick svg{animation:none;stroke-dashoffset:0}
  .lm-count .ring .prog{transition:none}
  .crumbs .home,.crumbs .home .arw,.back-row .btn .arw,.type-more .arw,.type-card{transition:none}
}

/* ---------- featured product split ---------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,64px);align-items:center}
@media(max-width:880px){.split{grid-template-columns:1fr}}
.split .photo{border-radius:22px;overflow:hidden;box-shadow:0 26px 60px -36px rgba(10,11,15,.45)}
.split .photo img{width:100%;height:100%;object-fit:cover}
.split h2{font-size:clamp(26px,3.2vw,36px);margin-bottom:14px}
.split .body{font-size:16.5px;color:var(--slate);max-width:52ch;margin-bottom:22px}
.split .body b{color:var(--ink);font-weight:600}
.mini-list{list-style:none;display:grid;gap:14px}
.mini-list li{display:flex;gap:14px;align-items:flex-start;font-size:15.5px}
.mini-list .mi{flex:none;width:40px;height:40px;border-radius:12px;background:#fff;border:1px solid var(--mist);display:flex;align-items:center;justify-content:center}
.mini-list .mi svg{width:20px;height:20px;stroke:var(--ink)}
.mini-list b{display:block;font-weight:600}
.mini-list span{color:var(--slate);font-size:14px}

/* ---------- capability rows ---------- */
.cap-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;background:var(--mist);border:1px solid var(--mist);border-radius:22px;overflow:hidden}
@media(max-width:960px){.cap-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.cap-grid{grid-template-columns:1fr}}
.cap{background:var(--paper);padding:28px;transition:background .2s}
.cap:hover{background:#fff}
.cap svg{width:26px;height:26px;stroke:var(--ink);margin-bottom:14px}
.cap h3{font-size:17px;margin-bottom:7px}
.cap p{font-size:14.5px;color:var(--slate)}

/* ---------- preview devices ---------- */
.devices{display:grid;grid-template-columns:1.5fr 1fr .62fr;gap:26px;align-items:end}
@media(max-width:900px){.devices{grid-template-columns:1fr 1fr}.devices .dev:first-child{grid-column:span 2}}
.dev{background:var(--ink);border-radius:18px;padding:10px;box-shadow:0 24px 50px -30px rgba(10,11,15,.5)}
.dev .screen{
  border-radius:10px;aspect-ratio:16/10;position:relative;overflow:hidden;
  background:repeating-linear-gradient(-45deg,#EFEEE9 0 14px,#E7E5DE 14px 28px);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;
}
.dev.ph .screen{aspect-ratio:390/844;border-radius:14px}
.dev .screen img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
/* Until the Hebrew UI merges these slots are empty, and an empty slot must say
   so rather than look like a broken image. */
.dev .screen .pending{
  font-family:var(--font-mono);font-size:11px;letter-spacing:.06em;color:#8B8A82;
  padding:0 14px;text-align:center;line-height:1.7;
}
.pos-stand{display:flex;flex-direction:column;align-items:center}
.pos-stand .neck{width:54px;height:15px;background:#20222B;border-radius:0 0 7px 7px}
.pos-stand .base{width:128px;height:9px;background:#20222B;border-radius:99px;margin-top:2px}
/* The caption sits inside the device's ink frame, so it takes --fog, the token
   this sheet already reserves for secondary text on dark. It was --slate,
   which is tuned for paper: on --ink it measures 2.7:1 and these three lines
   are what name the three screenshots. --fog is 7.2:1. */
.dev-cap{font-size:13.5px;color:var(--fog);margin-top:12px;text-align:center}
/* Two columns puts a full back-office capture in ~165px on a phone, which is
   texture rather than a screenshot. Below 560px each device gets the column to
   itself; the phone is held to its own width so it does not tower over them. */
@media(max-width:560px){
  .devices{grid-template-columns:1fr;gap:30px}
  .devices .dev:first-child{grid-column:auto}
  .dev.ph{max-width:250px;margin-inline:auto}
}
.soon-note{margin-top:26px;text-align:center;font-size:14px;color:var(--slate)}
.soon-note b{color:var(--ink);font-weight:600}

/* ---------- steps ---------- */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
@media(max-width:820px){.steps{grid-template-columns:1fr}}
.step{background:#fff;border:1px solid var(--mist);border-radius:var(--radius);padding:30px}
.step .n{
  font-family:var(--font-display);font-weight:700;width:40px;height:40px;border-radius:50%;
  background:var(--lime);display:flex;align-items:center;justify-content:center;font-size:18px;margin-bottom:16px;
}
.step h3{font-size:18px;margin-bottom:8px}
.step p{font-size:14.5px;color:var(--slate)}

/* ---------- faq ---------- */
.faq{max-width:820px}
.faq details{background:#fff;border:1px solid var(--mist);border-radius:16px;margin-bottom:12px;overflow:hidden}
.faq summary{
  cursor:pointer;list-style:none;padding:19px 24px;font-family:var(--font-display);font-weight:700;font-size:16.5px;
  display:flex;justify-content:space-between;align-items:center;gap:12px;line-height:1.45;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-size:22px;color:var(--slate);transition:transform .2s;flex:none}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq .a{padding:0 24px 20px;font-size:15px;color:var(--slate);max-width:66ch}
.faq .a a{color:var(--ink);font-weight:650;text-decoration-color:var(--lime-deep);text-decoration-thickness:2px;text-underline-offset:3px}

/* ---------- final band + footer ---------- */
.band{
  background:radial-gradient(130% 170% at 50% -30%, #1B1D26 0%, #0A0B0F 58%);
  color:var(--cream);border-radius:30px;padding:clamp(46px,7vw,78px) clamp(24px,5vw,48px);text-align:center;
}
.band .logo{height:66px;width:auto;margin:0 auto 26px}
.band h2{font-size:clamp(28px,3.8vw,42px)}
.band p{color:#B9BAC2;margin:14px auto 30px;max-width:44ch}
.final-cta{padding-bottom:clamp(32px,5vw,52px)}
footer{padding:clamp(46px,6vw,68px) 0 28px;color:#C5C6CC;font-size:14px;background:var(--ink);border-top:1px solid #24262F;margin-top:0}
.foot-grid{display:grid;grid-template-columns:minmax(250px,.8fr) minmax(0,1.6fr);gap:clamp(38px,6vw,90px);align-items:start}
.foot-brand :is(svg,img){display:block;height:38px;width:auto;margin-bottom:10px}
.foot-brand svg g{stroke:var(--cream)}
.foot-brand p{color:#B9BAC2}
.foot-social{display:flex;gap:10px;margin-top:22px;flex-wrap:wrap}
.foot-social a{min-height:44px;padding:0 14px;border:1px solid #353843;border-radius:12px;display:inline-flex;align-items:center;gap:9px;color:var(--cream);background:#15171D;font-weight:650;transition:background .2s,color .2s,border-color .2s,transform .2s cubic-bezier(.22,1,.36,1)}
.foot-social a:hover{background:var(--lime);color:var(--ink);border-color:var(--lime);transform:translateY(-2px)}
.foot-social svg{width:18px;height:18px;margin:0;fill:currentColor;flex:none}
.foot-links{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px 28px;font-weight:550}
.foot-links a{color:#DADBDF;padding:7px 0;border-bottom:1px solid transparent;transition:color .18s,border-color .18s}
.foot-links a:hover{color:var(--lime);border-bottom-color:#464A55}
.foot-legal{margin-top:38px;padding-top:22px;border-top:1px solid #2A2C34;font-size:12.5px;color:#9698A2;display:flex;gap:10px 22px;flex-wrap:wrap;align-items:center}
.foot-legal a{text-decoration:none;color:#B9BAC2}
.foot-legal a:hover{color:var(--lime)}
.foot-legal .foot-us{margin-inline-start:auto;color:var(--cream);font-weight:600}
@media(max-width:760px){
  footer{padding-bottom:96px}
  .foot-grid{grid-template-columns:1fr;gap:34px}
  .foot-links{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 20px}
  .foot-legal{align-items:flex-start}
  .foot-legal .foot-us{flex-basis:100%;margin-inline-start:0;margin-top:6px}
}

/* reveal on scroll — progressive enhancement only; content visible without JS */
html.js .rv{opacity:0;transform:translateY(14px);transition:opacity .55s cubic-bezier(.22,1,.36,1),transform .55s cubic-bezier(.22,1,.36,1)}
html.js .rv.in{opacity:1;transform:none}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  html.js .rv{opacity:1;transform:none;transition:none}
  .btn,.cap{transition:none}
}

/* ---------- legal / document pages ---------- */
.doc{max-width:780px;margin:0 auto;padding:52px 24px 80px}
.doc h1{font-size:clamp(28px,4vw,38px);margin-bottom:8px}
.doc .updated{font-family:var(--font-mono);font-size:12.5px;letter-spacing:.04em;color:var(--slate);margin-bottom:34px}
.doc h2{font-size:21px;margin:36px 0 12px}
.doc h3{font-size:17px;margin:26px 0 8px}
.doc p,.doc li{font-size:15.5px;color:#33322E;line-height:1.85;max-width:68ch}
.doc p{margin-bottom:14px}
.doc ul,.doc ol{padding-inline-start:22px;margin-bottom:14px}
.doc li{margin-bottom:6px}
.doc a{color:var(--indigo);text-decoration:underline;text-underline-offset:2px}
.doc strong{color:var(--ink);font-weight:600}
.doc .toc{background:#fff;border:1px solid var(--mist);border-radius:14px;padding:18px 22px;margin-bottom:30px;font-size:14.5px}
.doc .toc a{display:inline-block;margin:2px 0 2px 0;margin-inline-end:14px}
/* Legal tables keep their natural column widths for readability, but the
   overflow belongs to the table region rather than to the RTL document. */
.doc-table-scroll{max-width:100%;overflow-x:auto;overscroll-behavior-inline:contain}
.doc table{border-collapse:collapse;width:100%;font-size:14.5px;margin-bottom:16px}
.doc th,.doc td{border:1px solid var(--mist);padding:10px 12px;text-align:start;vertical-align:top}
.doc th{background:#fff;font-family:var(--font-display)}

/* ---------- login page ---------- */
.login-page{min-height:100vh;display:flex;flex-direction:column}
.login-main{flex:1;display:flex;align-items:center;justify-content:center;padding:40px 20px}
.login-card{background:#fff;border:1px solid var(--mist);border-radius:24px;padding:38px;width:100%;max-width:460px;box-shadow:0 30px 70px -45px rgba(10,11,15,.35)}
.login-card .logo-link svg{height:42px;width:auto;margin:0 auto 10px}
.login-card h1{font-size:23px;text-align:center;margin-bottom:6px}
.login-card .sub{text-align:center;font-size:14px;color:var(--slate);margin-bottom:24px;line-height:1.7}
.login-card .btn{width:100%;margin-top:8px}
.login-alt{text-align:center;font-size:13.5px;color:var(--slate);margin-top:16px;line-height:1.9}
.login-alt a{color:var(--indigo);font-weight:600}
/* The three doors into the product, for people who already know which one. */
.login-doors{display:grid;gap:10px;margin-top:24px;padding-top:22px;border-top:1px solid var(--mist)}
.login-doors a{
  display:flex;align-items:center;gap:12px;padding:13px 16px;border:1.5px solid var(--mist);
  border-radius:14px;font-size:14.5px;transition:border-color .18s,background .18s;
}
.login-doors a:hover{border-color:var(--ink);background:var(--paper)}
.login-doors b{font-weight:600;display:block}
.login-doors span{color:var(--slate);font-size:13px}
.login-doors .arw{margin-inline-start:auto;color:var(--slate);flex:none}

.toast{
  position:fixed;inset-inline-start:50%;bottom:30px;transform:translateX(50%) translateY(80px);
  background:var(--ink);color:var(--cream);border-radius:999px;padding:13px 26px;font-size:14.5px;
  transition:transform .3s ease,visibility .3s;z-index:var(--z-toast);visibility:hidden;
}
.toast.show{transform:translateX(50%);visibility:visible}

/* ---------- features by audience ---------- */
.for-who{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:clamp(24px,3.4vw,44px)}
.who-col{padding-top:20px;border-top:2px solid var(--ink)}
.who-tag{font-family:var(--font-mono);font-size:11.5px;letter-spacing:.06em;
  color:var(--slate);margin-bottom:10px}
.who-col h3{font-size:clamp(19px,2.1vw,24px);margin-bottom:16px}
.who-col ul{list-style:none;margin:0;padding:0}
.who-col li{position:relative;padding-inline-start:22px;font-size:15px;line-height:1.7;color:var(--slate)}
.who-col li + li{margin-top:14px}
.who-col li::before{content:"";position:absolute;inset-inline-start:0;top:11px;width:9px;height:9px;
  border-radius:50%;background:var(--lime)}
.who-col li b{color:var(--ink);font-weight:600}
@media(min-width:760px){.who-col h3{min-height:2.5em}}

/* The homepage audience stories form one deliberate 2x2 editorial matrix.
   Scoping keeps the three-column feature-page lists unchanged. */
.for-who.who-home{grid-template-columns:repeat(2,minmax(0,1fr));gap:0;border-block:1px solid var(--ink)}
.who-home .who-col{padding:clamp(26px,3.2vw,38px);border-top:0}
.who-home .who-col:nth-child(odd){border-inline-end:1px solid var(--line)}
.who-home .who-col:nth-child(-n+2){border-block-end:1px solid var(--line)}
.who-home .who-col h3{min-height:0;margin:0;font-size:clamp(21px,2.2vw,27px)}
.who-home .who-tag{margin:8px 0 20px;color:var(--slate)}
@media(max-width:759px){
  .for-who.who-home{grid-template-columns:1fr}
  .who-home .who-col:nth-child(odd){border-inline-end:0}
  .who-home .who-col:nth-child(-n+2){border-block-end:0}
  .who-home .who-col:not(:last-child){border-block-end:1px solid var(--line)}
}

/* Anchored sections must clear the sticky nav — which below 980px is 50px
   taller, because the links moved to their own row there. */
section[id],header[id],div[id]{scroll-margin-top:92px}
@media(max-width:979px){section[id],header[id],div[id]{scroll-margin-top:128px}}

/* ---------- feature grid ----------
   Collapsed, a card is a name and one line — that is the scan. Opened, the card
   takes the whole row so the screenshot inside it has room to be legible; at a
   quarter width it would be 260px and pointless. */
.feat-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(14px,1.5vw,18px)}
.feat{
  display:flex;flex-direction:column;background:#fff;border:1px solid var(--mist);
  border-radius:20px;padding:clamp(18px,1.9vw,24px);
  transition:border-color .25s cubic-bezier(.22,1,.36,1),box-shadow .25s cubic-bezier(.22,1,.36,1);
}
.feat:hover{border-color:#D6D4CC;box-shadow:0 18px 40px -30px rgba(10,11,15,.4)}
.feat-accent{background:linear-gradient(180deg,#FCFEF3,#fff 62%);border-color:#E4EFB4}
@media(max-width:1080px){.feat-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:620px){.feat-grid{grid-template-columns:minmax(0,1fr)}}
.feat:has(.feat-more[open]){grid-column:1/-1;border-color:#C9C7BF;box-shadow:0 22px 50px -34px rgba(10,11,15,.45)}
.feat-ic{
  width:42px;height:42px;border-radius:12px;display:flex;align-items:center;justify-content:center;
  background:var(--ink);color:var(--lime);margin-bottom:14px;flex:none;
}
.feat-ic svg{width:22px;height:22px;stroke:currentColor}
.feat-accent .feat-ic{background:var(--lime);color:var(--ink)}
.feat h3{font-size:clamp(17px,1.5vw,19px);line-height:1.3;margin-bottom:8px;text-wrap:balance}
.feat-hook{font-size:14.5px;line-height:1.6;color:var(--slate)}
.feat-more{margin-top:auto;padding-top:15px}
.feat-more summary{
  display:inline-flex;align-items:center;gap:7px;cursor:pointer;list-style:none;
  font-size:13.5px;font-weight:700;color:var(--ink);
  border:1px solid var(--mist);border-radius:999px;padding:7px 15px;
  transition:background .2s ease,border-color .2s ease;
}
.feat-more summary::-webkit-details-marker{display:none}
.feat-more summary:hover{background:#F1F0EC;border-color:#D6D4CC}
.feat-more summary:focus-visible{outline:2.5px solid var(--indigo);outline-offset:3px}
.feat-more summary::after{
  content:"";width:8px;height:8px;border-inline-end:2px solid currentColor;border-bottom:2px solid currentColor;
  transform:rotate(45deg) translate(-1px,-1px);transition:transform .25s cubic-bezier(.22,1,.36,1);
}
.feat-more[open] summary{background:var(--ink);color:#fff;border-color:var(--ink)}
.feat-more[open] summary::after{transform:rotate(-135deg) translate(-2px,-2px)}
.feat-more[open] summary .lbl-more{display:none}
.feat-more .lbl-less{display:none}
.feat-more[open] summary .lbl-less{display:inline}
.feat-body{
  padding-top:18px;display:grid;grid-template-columns:minmax(0,0.85fr) minmax(0,1.15fr);
  gap:clamp(20px,3vw,34px);align-items:start;animation:feat-open .32s cubic-bezier(.22,1,.36,1);
}
@media(max-width:880px){.feat-body{grid-template-columns:minmax(0,1fr)}}
.fb-copy p{font-size:14.8px;line-height:1.75;color:var(--slate);margin-bottom:11px;max-width:58ch;text-wrap:pretty}
.fb-copy p:last-child{margin-bottom:0}
.fb-copy b{color:var(--ink);font-weight:600}
.fb-copy em{font-style:normal;box-shadow:inset 0 -.42em 0 rgba(216,243,79,.55)}
.fb-shot{margin:0}
.fb-shot img{
  width:100%;height:auto;display:block;border:1px solid var(--mist);border-radius:12px;
  background:#fff;box-shadow:0 14px 34px -26px rgba(10,11,15,.5);
}
.fb-shot figcaption{margin-top:9px;font-size:12.5px;color:var(--slate)}
/* Screenshot slots reserve their real aspect ratio before the image exists, so
   adding the captures later cannot shift the page. */
.fb-shot .slot,.dev .screen .slot{
  display:grid;place-items:center;background:repeating-linear-gradient(-45deg,#F1F0EC 0 12px,#E9E7E1 12px 24px);
  border:1px dashed #CFCDC4;border-radius:12px;
}
.fb-shot .slot{aspect-ratio:var(--ar,892/338)}
.fb-shot .slot span{font-family:var(--font-mono);font-size:11px;color:#8B8A82;letter-spacing:.04em;padding:0 12px;text-align:center}
@keyframes feat-open{from{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){
  .feat-body{animation:none}
  .feat-more summary::after,.feat{transition:none}
}
@media(max-width:620px){
  .feat-more summary{padding:11px 18px;font-size:14.5px}
}

/* ---------- contact page ---------- */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,60px);align-items:start}
@media(max-width:880px){.contact-grid{grid-template-columns:1fr}}
.contact-list{list-style:none;display:grid;gap:22px;margin-top:30px}
.contact-list li{display:flex;gap:14px;align-items:flex-start}
.contact-list .mi{flex:none;width:42px;height:42px;border-radius:12px;background:var(--ink);color:var(--lime);display:grid;place-items:center}
.contact-list .mi svg{width:21px;height:21px;stroke:currentColor}
.contact-list b{display:block;font-weight:600}
.contact-list span,.contact-list a{color:var(--slate);font-size:14.5px}
.contact-list a{color:var(--indigo);text-decoration:underline;text-underline-offset:3px}

/* ══════════════════════════════════════════════════════════════════════════
   הדלפק — the blog (/blog and /blog/:slug)
   ──────────────────────────────────────────────────────────────────────────
   server/src/blog/render.js is one renderer for both editions, and it links
   whichever /site-assets/styles.css the region mounted. The US sheet carries
   this chrome; this one did not, so every KupaLi blog page rendered as
   unstyled markup — 1112px measure, no paragraph rhythm, topic filter as one
   run-on line of links.
   Ported from the US block, then re-cut for Hebrew rather than mirrored:
   physical sides become logical, and the two places the US leans on Latin
   typographic habits — Space Mono/Space Grotesk in small chrome, uppercase,
   wide tracking — are dropped, because Hebrew has no case, takes no tracking,
   and would pull every glyph out of a Latin face that has no Hebrew in it.
   ══════════════════════════════════════════════════════════════════════════ */

/* reading progress — the only chrome the article page adds. Anchored to the
   inline start, which on this page is the right edge, so it fills leftward as
   the reader descends. */
.read-bar{position:fixed;top:0;inset-inline:0;height:3px;width:100%;z-index:var(--z-nav);
  background:var(--lime);transform:scaleX(var(--p,0));transform-origin:100% 50%;
  transition:transform .12s linear;pointer-events:none}
@media(prefers-reduced-motion:reduce){.read-bar{transition:none}}

/* ---------- index hero ---------- */
.blog-hero{padding:clamp(48px,7vw,84px) 0 clamp(28px,4vw,44px)}
.blog-hero h1{font-size:clamp(38px,5.6vw,68px);margin:18px 0 14px}
.blog-hero .lede{font-size:clamp(16.5px,1.5vw,19px);color:var(--slate);max-width:58ch}

/* ---------- topic filter ---------- */
.topics{display:flex;flex-wrap:wrap;gap:9px;margin-top:26px}
.topic{font-size:14px;font-weight:500;padding:8px 16px;border-radius:999px;
  border:1.5px solid var(--mist);background:#fff;color:var(--slate);
  transition:border-color .18s,color .18s,background .18s}
.topic:hover{border-color:var(--ink);color:var(--ink)}
.topic[aria-current="true"]{background:var(--ink);border-color:var(--ink);color:var(--cream)}

/* ---------- featured lead ---------- */
.lead-post{display:block;position:relative;border-radius:26px;overflow:hidden;
  margin-top:clamp(26px,3.5vw,40px);background:var(--ink);
  box-shadow:0 30px 70px -40px rgba(10,11,15,.5)}
.lead-post img{width:100%;height:clamp(300px,42vw,470px);object-fit:cover;
  transition:transform .7s cubic-bezier(.22,1,.36,1)}
.lead-post:hover img{transform:scale(1.03)}
.lead-plate{position:absolute;inset-inline:clamp(16px,2.5vw,32px);
  bottom:clamp(16px,2.5vw,32px);max-inline-size:640px;
  background:rgba(10,11,15,.82);backdrop-filter:blur(14px);
  border-radius:18px;padding:clamp(20px,2.6vw,30px)}
.lead-plate h2{color:var(--cream);font-size:clamp(22px,2.7vw,33px);margin-bottom:10px}
.lead-plate p{color:#C9CAD1;font-size:15.5px;margin-bottom:16px}
@media(max-width:640px){.lead-plate{position:static;background:var(--ink);backdrop-filter:none;border-radius:0;max-inline-size:none}}

/* ---------- post rows (deliberately not an identical card grid) ----------
   The 300px track is declared first, so in RTL the frame lands at the reading
   start — the right — and the headline runs away from it. */
.post-rows{margin-top:clamp(34px,4.5vw,54px);border-top:1px solid var(--mist)}
.post-row{display:grid;grid-template-columns:300px 1fr;gap:clamp(20px,3vw,38px);
  align-items:center;padding:clamp(22px,3vw,32px) 0;border-bottom:1px solid var(--mist)}
.post-row .shot{border-radius:16px;overflow:hidden;background:var(--mist);aspect-ratio:16/10}
.post-row .shot img{width:100%;height:100%;object-fit:cover;
  transition:transform .6s cubic-bezier(.22,1,.36,1)}
.post-row:hover .shot img{transform:scale(1.04)}
.post-row h3{font-size:clamp(20px,2.1vw,26px);margin-bottom:9px}
.post-row:hover h3{color:var(--indigo)}
.post-row p{color:var(--slate);font-size:15.5px;max-width:58ch}
@media(max-width:720px){.post-row{grid-template-columns:1fr;gap:16px}}

/* shared meta line. No uppercase and no tracking: Hebrew has neither a
   second case nor the counters that survive being pulled apart. */
.pmeta{display:flex;flex-wrap:wrap;align-items:center;gap:9px;
  font-family:var(--font-mono);font-size:12.5px;
  letter-spacing:.02em;color:var(--slate);margin-top:12px}
.pmeta .sep{opacity:.4}
.lead-plate .pmeta{color:#B9BAC2;margin:0 0 12px}
.tag-chip{background:var(--lime);color:var(--ink);border-radius:999px;
  padding:4px 12px;font-weight:700}

/* ---------- article ---------- */
.article-head{padding:clamp(34px,5vw,60px) 0 0;max-width:860px;margin:0 auto}
.article-head h1{font-size:clamp(33px,4.8vw,56px);margin:16px 0 18px}
.article-head .dek{font-size:clamp(17px,1.7vw,21px);color:var(--slate);
  line-height:1.6;max-width:58ch}
.article-hero{margin:clamp(28px,4vw,44px) auto 0;border-radius:26px;overflow:hidden;
  max-width:1000px;box-shadow:0 30px 70px -45px rgba(10,11,15,.45)}
.article-hero img{width:100%;height:auto}

/* prose — Hebrew reads without ascenders or descenders to break the line up,
   so it wants both a shorter measure and more leading than the US sheet sets. */
.prose{max-width:66ch;margin:clamp(34px,4.5vw,52px) auto 0;
  font-size:17.5px;line-height:1.85;color:#1C1D22}
.prose > * + *{margin-top:1.1em}
.prose h2{font-size:clamp(24px,2.8vw,31px);margin-top:1.9em;line-height:1.28}
.prose h2::after{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;
  background:var(--lime);margin-inline-start:7px;vertical-align:baseline}
.prose h3{font-size:clamp(19px,2.1vw,23px);margin-top:1.6em;line-height:1.35}
.prose ul,.prose ol{padding-inline-start:1.35em}
.prose li + li{margin-top:.5em}
.prose li::marker{color:var(--slate)}
.prose a{color:var(--indigo);text-decoration:underline;text-underline-offset:3px;
  text-decoration-thickness:1.5px}
.prose a:hover{background:rgba(62,59,255,.09)}
.prose strong{font-weight:700;color:var(--ink)}
.prose blockquote{border:none;padding:0;padding-inline-start:22px;position:relative;
  font-size:19.5px;line-height:1.65;color:var(--ink);font-weight:500}
.prose blockquote::before{content:"";position:absolute;inset-inline-start:0;top:6px;bottom:6px;
  width:3px;border-radius:2px;background:var(--lime)}
.prose figure{margin-top:1.7em}
.prose figure img{border-radius:18px;width:100%}
.prose figcaption{font-size:13.5px;color:var(--slate);margin-top:9px;text-align:center}
.prose hr{border:none;border-top:1px solid var(--mist);margin:2.2em 0}
.prose table{width:100%;border-collapse:collapse;font-size:15.5px;display:block;overflow-x:auto}
.prose th,.prose td{text-align:start;padding:11px 12px;border-bottom:1px solid var(--mist)}
.prose th{font-family:var(--font-display);font-size:14px;color:var(--slate);font-weight:700}

/* callout — full border + tint (never a side stripe) */
.prose .callout{background:#fff;border:1.5px solid var(--mist);border-radius:18px;
  padding:22px 24px;font-size:16px;line-height:1.75}
.prose .callout p{margin:0}
.prose .callout p + p{margin-top:.7em}
.prose .callout strong:first-child{display:block;font-family:var(--font-display);
  font-size:15.5px;margin-bottom:6px}
.prose .takeaways{background:var(--ink);color:var(--cream);border-radius:20px;
  padding:clamp(22px,3vw,30px)}
.prose .takeaways h3{color:var(--cream);margin:0 0 12px;font-size:19px}
.prose .takeaways h3::after{display:none}
.prose .takeaways ul{padding-inline-start:1.2em;margin:0}
.prose .takeaways li{color:#DEDFE4;margin-top:.45em}
.prose .takeaways li::marker{color:var(--lime)}

/* end-of-article CTA + related */
.article-foot{max-width:66ch;margin:clamp(38px,5vw,56px) auto 0}
.preferred-source{margin:28px 0;padding:24px;border:1px solid var(--line);background:var(--paper);text-align:start}
.preferred-source h2{margin:0;font-size:clamp(1.25rem,2vw,1.55rem)}
.preferred-source p{margin:8px 0 18px;color:var(--muted);line-height:1.65}
.preferred-source--compact{margin:22px 0 0;padding:16px 18px}
.preferred-source--compact h2{font-size:1.05rem}
.preferred-source--compact p{margin:5px 0 12px;font-size:.9rem}
.byline-card{display:flex;gap:16px;align-items:flex-start;background:#fff;
  border:1.5px solid var(--mist);border-radius:20px;padding:22px 24px}
.byline-card .mark{flex:none;width:44px;height:44px;border-radius:12px;background:var(--ink);
  display:grid;place-items:center}
.byline-card .mark svg{width:26px;height:auto}
.byline-card h4{font-family:var(--font-display);font-size:16.5px;margin-bottom:4px}
.byline-card p{font-size:14.5px;color:var(--slate);line-height:1.7}
.related{margin-top:clamp(40px,5vw,60px)}
.related h2{font-size:clamp(22px,2.4vw,28px);margin-bottom:20px}
.related-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:20px}
.related-item .shot{border-radius:14px;overflow:hidden;aspect-ratio:16/10;background:var(--mist)}
.related-item .shot img{width:100%;height:100%;object-fit:cover}
.related-item h3{font-size:17px;margin-top:12px;line-height:1.35}
.related-item:hover h3{color:var(--indigo)}

/* empty state */
.blog-empty{text-align:center;padding:clamp(50px,8vw,90px) 0;color:var(--slate)}
.blog-empty h2{color:var(--ink);margin-bottom:10px}

/* ---------- mobile sticky CTA (pricing page) ----------
   On a phone the pricing page is a long plate, a calculator and nine FAQ items;
   somebody convinced at the last one should not have to scroll back up. No
   script: the bar is always in the DOM and the media query decides. Logical
   properties only, so it mirrors itself in RTL, and the body reserves its
   height so the footer is never sitting underneath it. */
.sticky-cta{display:none}
@media(max-width:720px){
  .sticky-cta{
    display:flex;align-items:center;justify-content:center;gap:9px;
    position:fixed;inset-inline:0;bottom:0;z-index:110;
    padding:14px 18px calc(14px + env(safe-area-inset-bottom,0px));
    background:var(--ink);color:var(--cream);
    font-family:var(--font-display);font-weight:700;font-size:16px;line-height:1.2;
    box-shadow:0 -8px 26px rgba(10,11,15,.22);
  }
  .sticky-cta b{color:var(--lime);font-weight:700}
  .sticky-cta .num{direction:ltr;unicode-bidi:isolate}
  .sticky-cta .sep{opacity:.45;font-weight:400}
  body.has-sticky-cta{padding-bottom:calc(76px + env(safe-area-inset-bottom,0px))}
  /* Keep the pre-sales launcher clear of the bar it would otherwise sit on. */
  body.has-sticky-cta .pl-launch{inset-block-end:calc(80px + env(safe-area-inset-bottom,0px))}
}

/* ---------- login: the company address is Latin ----------
   Typing a Hebrew business name here is the expected thing to do, not a
   mistake — so it gets an explanation in the page's own voice, not a red
   error. .login-hint is revealed by the inline script on login.html. */
.login-hint{
  margin-top:10px;padding:12px 14px;background:var(--paper);
  border:1px solid var(--mist);border-radius:12px;
  font-size:13px;line-height:1.7;color:var(--slate);
}
.login-hint code{font-family:var(--font-mono);font-size:12.5px;color:var(--ink);
  direction:ltr;unicode-bidi:isolate}
.login-hint a{color:var(--indigo);font-weight:600;text-decoration:underline;text-underline-offset:2px}

/* ══════════════════════════════════════════════════════════════════════════
   THE THREE OFFERING PAGES
   קופה רושמת · קופה ממוחשבת חכמה · קופה ניידת

   Everything below belongs to those three pages and to nothing else. They
   share a spine — an answer plate near the top, a strip that places the
   reader among the three, a FAQ — and each one carries exactly one drawn
   moment of its own: the printed bill, the size-and-colour matrix, and the
   two routes to a sale. One per page, not three each; a page with a single
   thing worth looking at is looked at.
   ══════════════════════════════════════════════════════════════════════════ */

/* ---------- the answer plate ----------
   One question, spelled the way it is typed into a search box, answered
   completely in the paragraph directly beneath it. An answer engine lifts a
   block, not a layout, so nothing here defers, teases, or continues after a
   heading — the paragraph has to survive being quoted with the page removed
   from around it. Which is also, as it happens, what a hurried human wants. */
.ans{
  position:relative;background:#fff;border:1px solid var(--mist);border-radius:24px;
  padding:clamp(26px,3.6vw,38px) clamp(24px,3.6vw,40px);max-width:880px;
  box-shadow:0 26px 62px -50px rgba(10,11,15,.55);
}
/* A rule down the reading edge — in RTL that is the right-hand one, so it is
   set with a logical property and never flips into the wrong margin. */
.ans::before{
  content:"";position:absolute;inset-block:clamp(26px,3.6vw,38px);inset-inline-start:0;
  width:4px;border-radius:99px;background:var(--lime);
}
.ans .q-tag{
  display:flex;align-items:center;gap:9px;margin-bottom:13px;
  font-family:var(--font-mono);font-size:11.5px;letter-spacing:.12em;color:var(--slate);
}
.ans .q-tag::before{content:"";flex:none;width:8px;height:8px;border-radius:50%;
  background:var(--lime);border:1.5px solid var(--lime-deep)}
.ans h2{font-size:clamp(22px,2.9vw,30px);margin-bottom:15px}
.ans p{font-size:clamp(16px,1.7vw,18px);line-height:1.8;color:#33322E;max-width:64ch}
.ans p b{color:var(--ink);font-weight:600}
.ans p + p{margin-top:13px}
.ans .ans-more{
  display:flex;gap:8px 20px;flex-wrap:wrap;margin-top:19px;
  padding-top:17px;border-top:1px dashed #D7D4CC;font-size:14px;
}
.ans .ans-more a{color:var(--indigo);text-decoration:underline;text-underline-offset:3px;font-weight:500}
.ans .ans-more a:hover{background:rgba(62,59,255,.09)}

/* ---------- which of the three ----------
   Every one of these pages is reached by someone who does not yet know the
   line-up, so each carries the whole line-up — with the page they are on
   drawn as the dark card and labelled as such. A visitor who lands on the
   wrong page from a search result should be able to leave for the right one
   without going back to the results. */
.fit{
  display:grid;grid-template-columns:repeat(3,1fr);gap:2px;
  background:var(--mist);border:1px solid var(--mist);border-radius:22px;overflow:hidden;
}
@media(max-width:860px){.fit{grid-template-columns:1fr}}
.fit-col{background:var(--paper);padding:clamp(24px,2.8vw,32px);display:flex;flex-direction:column}
.fit-col.here{background:radial-gradient(130% 170% at 50% -30%,#1B1D26 0%,#0A0B0F 58%);color:var(--cream)}
.fit-col .ft{
  display:flex;align-items:center;gap:8px;margin-bottom:12px;
  font-family:var(--font-mono);font-size:11px;letter-spacing:.12em;color:var(--slate);
}
.fit-col.here .ft{color:var(--lime)}
.fit-col .ft::before{content:"";flex:none;width:7px;height:7px;border-radius:50%;background:currentColor}
.fit-col h3{font-size:19px;margin-bottom:5px}
/* This line is a Hebrew sentence with a number in it, not a number — so it
   stays RTL and only the price is isolated, via .num on the figure itself.
   Forcing direction:ltr on the whole line (which is what it used to do,
   copied from the bare-numeral rules above) reordered the two Hebrew words
   around the price and turned "₪79 לחודש · לעמדה" into "₪79 לעמדה · לחודש". */
.fit-col .fp{
  font-family:var(--font-display);font-weight:700;font-size:14.5px;color:var(--slate);
  margin-bottom:15px;text-align:start;
}
.fit-col.here .fp{color:#C9CAD1}
.fit-col ul{list-style:none;display:grid;gap:9px;margin-bottom:20px}
.fit-col li{display:flex;gap:10px;align-items:flex-start;font-size:14.5px;line-height:1.6;color:var(--slate)}
.fit-col.here li{color:#DEDFE4}
.fit-col li::before{content:"";flex:none;width:7px;height:7px;border-radius:50%;
  background:var(--ink);opacity:.34;margin-top:8px}
.fit-col.here li::before{background:var(--lime);opacity:1}
/* margin-top:auto lands the three links on one baseline whatever the list above
   them measures, so the strip reads as a row rather than as three leaflets. */
.fit-col .fgo{
  margin-top:auto;display:inline-flex;align-items:center;gap:7px;
  font-weight:600;font-size:14.5px;color:var(--indigo);
}
.fit-col.here .fgo{color:var(--lime)}
.fit-col .fgo .arw{width:14px;height:14px;flex:none;stroke:currentColor;stroke-width:2;
  fill:none;stroke-linecap:round;stroke-linejoin:round;transition:transform .2s}
.fit-col a.fgo:hover .arw{transform:translateX(-4px)}
.fit-col .fgo.static{color:var(--slate);font-weight:500}
.fit-col.here .fgo.static{color:#9B9CA6}
.fit-note{font-size:13.5px;color:var(--slate);margin-top:18px;max-width:76ch;line-height:1.72}
.fit-note b{color:var(--ink);font-weight:600}
.fit-note a{color:var(--indigo);text-decoration:underline;text-underline-offset:3px}

/* ---------- the bill, printed ----------
   קופה רושמת's one drawn moment. A point-of-sale company that wants to argue
   its own invoice is short should print the invoice: same teeth, same dotted
   leaders, same mono face the register's own receipt uses, because this IS
   what the product prints. The lines cascade only after the block reaches the
   viewport, so the printing reads as printing rather than as a picture of
   paper that was already lying there. */
.bill-stage{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(30px,5vw,64px);align-items:center}
@media(max-width:900px){.bill-stage{grid-template-columns:1fr;gap:34px}}
.bill-wrap{width:100%;max-width:352px;margin-inline:auto;filter:drop-shadow(0 24px 46px rgba(10,11,15,.3))}
.bill{
  --tooth-w:15px;--tooth-h:8px;
  position:relative;background:#fff;
  padding:calc(28px + var(--tooth-h)) 26px calc(24px + var(--tooth-h));
  --zig:
    conic-gradient(from -45deg at bottom,#0000,#000 1deg 89deg,#0000 90deg) bottom/var(--tooth-w) var(--tooth-h) repeat-x,
    conic-gradient(from 135deg at top,#0000,#000 1deg 89deg,#0000 90deg) top/var(--tooth-w) var(--tooth-h) repeat-x,
    linear-gradient(#000 0 0) center/100% calc(100% - 2*var(--tooth-h)) no-repeat;
  -webkit-mask:var(--zig);mask:var(--zig);
}
html.js .rv .bill{clip-path:inset(0 0 100% 0)}
html.js .rv.in .bill{animation:billPrint .82s cubic-bezier(.16,1,.3,1) both}
@keyframes billPrint{from{clip-path:inset(0 0 100% 0)}to{clip-path:inset(0 0 0 0)}}
.bill .mark{display:block;width:66px;margin:0 auto 12px}
.bill .head{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.1em;color:var(--slate);text-align:center}
.bill h3{font-family:var(--font-display);font-weight:700;font-size:18px;text-align:center;margin-top:5px;line-height:1.3}
.bill hr{border:none;border-top:1.5px dashed #CFCDC4;margin:16px 0 12px}
.bill ul{list-style:none;font-family:var(--font-mono);font-size:12.5px}
.bill li{display:flex;align-items:baseline;gap:6px;padding:4.5px 0;color:#3A3934}
html.js .rv .bill li{opacity:0}
html.js .rv.in .bill li{animation:lineIn .38s cubic-bezier(.16,1,.3,1) both;animation-delay:calc(320ms + var(--i)*78ms)}
.bill li .lead{flex:1;border-bottom:1px dotted #D3D1C8;transform:translateY(-3px)}
.bill li em{font-style:normal;font-weight:700;color:var(--ink);direction:ltr;unicode-bidi:isolate}
.bill li.nil em{color:#8E8C84}
.bill .total{
  display:flex;align-items:baseline;justify-content:space-between;gap:10px;
  font-family:var(--font-display);font-weight:700;font-size:19px;
}
.bill .total .t-amt{direction:ltr;unicode-bidi:isolate}
.bill .total span{font-family:var(--font-mono);font-size:11px;font-weight:400;letter-spacing:.06em;color:var(--slate)}
.bill .with-vat{font-family:var(--font-mono);font-size:11.5px;color:var(--slate);text-align:center;margin-top:9px}
.bill .stamp{
  display:block;width:fit-content;margin:17px auto 2px;padding:5px 14px 6px;
  border:2.5px solid var(--lime-deep);border-radius:8px;
  color:#57630F;background:rgba(216,243,79,.34);
  font-family:var(--font-mono);font-weight:700;font-size:12.5px;letter-spacing:.05em;
  transform:rotate(-6deg);
}
html.js .rv .bill .stamp{opacity:0}
html.js .rv.in .bill .stamp{animation:stampIn .32s cubic-bezier(.2,.9,.3,1) .95s both}
@keyframes stampIn{from{opacity:0;transform:rotate(-14deg) scale(1.55)}to{opacity:1;transform:rotate(-6deg) scale(1)}}
.bill .barcode{
  height:28px;margin:16px 0 5px;opacity:.85;
  background:repeating-linear-gradient(90deg,
    var(--ink) 0 2px,#fff 2px 4px,var(--ink) 4px 5px,#fff 5px 9px,
    var(--ink) 9px 12px,#fff 12px 13px,var(--ink) 13px 14px,#fff 14px 18px);
}
.bill .code{font-family:var(--font-mono);font-size:10px;letter-spacing:.12em;color:var(--slate);text-align:center}

/* ---------- the size-and-colour matrix ----------
   קופה ממוחשבת חכמה's one drawn moment. מטריצת מידה וצבע is the capability that
   decides this page for a clothing shop, and putting it in a bullet is
   describing a spreadsheet in a sentence. So it is drawn: one garment,
   colours down, sizes across, a real count in every cell, and the only colour
   on the block spent on the two cells an owner actually looks for — the empty
   one and the last one left. A real table element, because that is what it is,
   and a screen reader should get the row and column headers with it. The
   numbers illustrate the shape; the copy beside it says so in as many words. */
.mtx-stage{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(30px,5vw,58px);align-items:center}
@media(max-width:920px){.mtx-stage{grid-template-columns:1fr;gap:32px}}
.mtx-card{
  background:#fff;border:1px solid var(--mist);border-radius:24px;
  padding:clamp(20px,2.6vw,28px);box-shadow:0 28px 66px -50px rgba(10,11,15,.55);
  overflow-x:auto;
}
.mtx{border-collapse:separate;border-spacing:6px;width:100%;min-width:326px}
.mtx caption{
  caption-side:top;text-align:start;padding:2px 6px 14px;
  font-family:var(--font-mono);font-size:11px;letter-spacing:.1em;color:var(--slate);
}
.mtx th{
  font-family:var(--font-mono);font-size:11.5px;font-weight:400;letter-spacing:.06em;
  color:var(--slate);padding:3px 6px;text-align:center;white-space:nowrap;
}
.mtx th[scope=row]{
  font-family:var(--font-body);font-size:13.5px;font-weight:600;color:var(--ink);
  text-align:start;padding-inline-end:10px;
}
.mtx th[scope=row] i{
  display:inline-block;width:11px;height:11px;border-radius:50%;
  margin-inline-end:8px;vertical-align:-1px;border:1px solid rgba(10,11,15,.22);
}
.mtx .c{
  display:flex;align-items:center;justify-content:center;
  height:clamp(38px,4.4vw,48px);border-radius:11px;
  background:var(--cream);border:1px solid var(--mist);
  font-family:var(--font-display);font-weight:700;font-size:15.5px;
  font-variant-numeric:tabular-nums;color:var(--ink);
}
.mtx .c.zero{background:#fff;border-style:dashed;border-color:#D3D0C8;color:#B3B1A9}
.mtx .c.low{background:var(--lime);border-color:var(--lime-deep);
  box-shadow:0 7px 18px -9px rgba(140,160,30,.95)}
html.js .rv .mtx .c{opacity:0}
html.js .rv.in .mtx .c{animation:cellIn .34s cubic-bezier(.22,1,.36,1) both;
  animation-delay:calc(150ms + var(--i)*34ms)}
@keyframes cellIn{from{opacity:0;transform:scale(.88)}to{opacity:1;transform:none}}
.mtx-legend{
  display:flex;gap:10px 22px;flex-wrap:wrap;margin-top:16px;
  font-family:var(--font-mono);font-size:11.5px;color:var(--slate);
}
.mtx-legend span{display:inline-flex;align-items:center;gap:8px}
.mtx-legend i{width:13px;height:13px;border-radius:4px;flex:none;border:1px solid var(--mist);background:var(--cream)}
.mtx-legend i.zero{background:#fff;border-style:dashed;border-color:#D3D0C8}
.mtx-legend i.low{background:var(--lime);border-color:var(--lime-deep)}
/* On a phone the card is 342px and the table's min-width pushed it 24px wider,
   so the one thing on the page worth looking at arrived needing a sideways
   drag. The cells lose a few pixels each instead and the grid fits whole —
   .mtx-card keeps its overflow-x for the narrower phones below this. */
@media(max-width:430px){
  .mtx{min-width:0;border-spacing:4px}
  .mtx th{font-size:10.5px;padding:2px 3px}
  .mtx th[scope=row]{font-size:12px;padding-inline-end:6px}
  .mtx th[scope=row] i{width:9px;height:9px;margin-inline-end:5px}
  .mtx .c{height:36px;font-size:14px;border-radius:9px}
}

/* ---------- the two routes to one sale ----------
   קופה ניידת's one drawn moment. The argument the page makes is about distance:
   a customer who has decided is a customer you can still lose on the walk to
   the counter. So the two routes are drawn beside each other and counted. No
   percentage is claimed and none is needed — the beats are the evidence, and
   the reader has stood in both of these queues. */
.routes{display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px,2.4vw,26px);align-items:start}
@media(max-width:720px){.routes{grid-template-columns:1fr}}
.route{
  background:var(--paper);border:1px solid var(--mist);border-radius:24px;
  padding:clamp(24px,2.8vw,32px);position:relative;
}
.route.short{background:radial-gradient(130% 170% at 50% -30%,#1B1D26 0%,#0A0B0F 58%);
  color:var(--cream);border-color:transparent;box-shadow:0 34px 74px -48px rgba(10,11,15,.6)}
.route .rt{
  display:flex;align-items:center;gap:8px;
  font-family:var(--font-mono);font-size:11px;letter-spacing:.12em;color:var(--slate);
}
.route.short .rt{color:var(--lime)}
.route .rt::before{content:"";flex:none;width:7px;height:7px;border-radius:50%;background:currentColor}
.route h3{font-size:19px;margin:11px 0 4px}
.route .rcount{font-family:var(--font-mono);font-size:12px;color:var(--slate);margin-bottom:20px}
.route.short .rcount{color:#9B9CA6}
.route ol{list-style:none;display:grid;gap:0;position:relative}
.route li{
  display:flex;gap:14px;align-items:flex-start;
  font-size:14.5px;line-height:1.6;color:var(--slate);padding-bottom:16px;position:relative;
}
.route.short li{color:#DEDFE4}
.route li:last-child{padding-bottom:0}
/* The bead-and-rail. The rail is a pseudo-element on the beat rather than a
   drawn line behind the list, so the last beat simply has none and the column
   ends where the walk ends. */
.route li .bead{
  flex:none;width:26px;height:26px;border-radius:50%;
  display:grid;place-items:center;position:relative;z-index:1;
  background:#fff;border:1.5px solid var(--mist);
  font-family:var(--font-mono);font-size:11.5px;font-weight:700;color:var(--slate);
}
.route.short li .bead{background:var(--lime);border-color:var(--lime-deep);color:var(--ink)}
.route li:not(:last-child)::before{
  content:"";position:absolute;inset-inline-start:12.5px;top:26px;bottom:2px;
  width:1.5px;background:var(--mist);transform-origin:top;
}
.route.short li:not(:last-child)::before{background:rgba(216,243,79,.34)}
html.js .rv .route li:not(:last-child)::before{transform:scaleY(0)}
html.js .rv.in .route li:not(:last-child)::before{
  animation:railDraw .34s ease-out both;animation-delay:calc(220ms + var(--i)*150ms)}
@keyframes railDraw{from{transform:scaleY(0)}to{transform:scaleY(1)}}
html.js .rv .route li .bead,html.js .rv .route li .btxt{opacity:0}
html.js .rv.in .route li .bead,html.js .rv.in .route li .btxt{
  animation:beatIn .3s cubic-bezier(.22,1,.36,1) both;animation-delay:calc(150ms + var(--i)*150ms)}
@keyframes beatIn{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}
.route li .btxt{flex:1;min-width:0}
.route li b{display:block;font-weight:600;color:var(--ink)}
.route.short li b{color:var(--cream)}
.route .rend{
  margin-top:20px;padding-top:17px;border-top:1px dashed #D7D4CC;
  font-size:14px;color:var(--slate);line-height:1.65;
}
.route.short .rend{border-top-color:rgba(216,243,79,.28);color:#DEDFE4}
.route .rend b{color:var(--ink);font-weight:600}
.route.short .rend b{color:var(--lime)}

/* ---------- the arithmetic block ----------
   Used where a price needs its working shown rather than its adjective: the
   percentage-of-sales comparison on קופה רושמת and the per-station/per-location
   sum on קופה ממוחשבת חכמה. Every figure in one of these is either our own
   published price or a multiplication the reader can redo on a napkin — never
   a market statistic, which we have no honest source for. */
.sums{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:2px;
  background:var(--mist);border:1px solid var(--mist);border-radius:20px;overflow:hidden}
.sum{background:#fff;padding:clamp(22px,2.6vw,28px)}
.sum .sl{font-family:var(--font-mono);font-size:11px;letter-spacing:.1em;color:var(--slate)}
.sum .sv{
  font-family:var(--font-display);font-weight:700;font-size:clamp(28px,3.6vw,38px);
  letter-spacing:-.02em;line-height:1.15;margin-top:11px;
  direction:ltr;unicode-bidi:isolate;text-align:start;font-variant-numeric:tabular-nums;
}
.sum .sv.accent{color:var(--indigo)}
.sum .sd{font-size:14px;color:var(--slate);margin-top:9px;line-height:1.65}
.sum .sd b{color:var(--ink);font-weight:600}
.sums-note{font-size:13.5px;color:var(--slate);margin-top:16px;max-width:74ch;line-height:1.72}
.sums-note b{color:var(--ink);font-weight:600}
.sums-note a{color:var(--indigo);text-decoration:underline;text-underline-offset:3px}
/* The prose that stands beside the printed bill. Held to a reading measure so
   it does not stretch to the column's full width just because the column is
   the wider half of the pair. */
.bill-copy p{font-size:16.5px;color:var(--slate);line-height:1.78;max-width:52ch}
.bill-copy p + p{margin-top:14px}
.bill-copy p b{color:var(--ink);font-weight:600}
.bill-copy .kicker{margin-bottom:18px}

/* ---------- proof shot ----------
   A screenshot on a marketing page is a claim, so these three pages only carry
   captures of screens that exist in Hebrew today, and the caption says what is
   in the frame instead of admiring it. */
.proof{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,44px);align-items:center}
@media(max-width:880px){.proof{grid-template-columns:1fr}}
.proof.flip > figure{order:-1}
@media(max-width:880px){.proof.flip > figure{order:0}}
.proof figure{margin:0}
/* height:auto is load-bearing, not tidiness. These captures carry width and
   height attributes so the browser can reserve their box before they decode;
   with only `width` set in CSS, that height attribute wins and a 2880×1320
   screenshot renders 1320px tall inside a 534px column. */
.proof figure img{
  width:100%;height:auto;border-radius:18px;border:1px solid var(--mist);background:#fff;
  box-shadow:0 26px 58px -40px rgba(10,11,15,.45);
}
.proof figcaption{font-size:13.5px;color:var(--slate);margin-top:12px;line-height:1.6}
/* A letterbox capture — a table strip, a report row — does not survive being
   squeezed into half of a two-up: at 534px wide a 1920×500 frame becomes a
   140px sliver standing beside a 500px column of text, and reads as a
   decoration rather than as evidence. When the frame is far wider than it is
   tall, the copy goes above it and the capture takes the whole measure. */
.proof.wide{grid-template-columns:1fr;gap:clamp(20px,2.6vw,28px)}
.proof.wide > div{max-width:74ch}
.proof.wide ul{grid-template-columns:repeat(auto-fit,minmax(238px,1fr));gap:9px 26px}
@media(max-width:880px){.proof.wide ul{grid-template-columns:1fr}}
/* The mirror of the same problem: a portrait capture of a phone screen renders
   1155px tall in a 534px column and towers over the copy it is meant to
   support. Held to roughly a phone's width and centred in its half. */
.proof.tall figure{max-width:264px;margin-inline:auto}

/* ---------- the handheld, held ----------
   קופה ניידת's hero photograph, and the one image on these pages big enough to
   set the whole first screen. It carries width and height attributes so its
   box is reserved before it decodes; height:auto is what stops the browser
   taking that 1400 literally the moment max-width shrinks the width — without
   it the photo renders 461px wide and still 1400px tall, and pushes the call
   to action a full screen below the fold on a laptop. The cap keeps the device
   commanding without letting it become the entire first impression. */
.hero-shot{margin:0;border-radius:26px;overflow:hidden;box-shadow:0 30px 70px -40px rgba(10,11,15,.5)}
.hero-shot img{width:100%;height:auto;max-height:min(72vh,600px);object-fit:cover;object-position:50% 42%}
.proof h3{font-size:clamp(21px,2.6vw,27px);margin-bottom:12px}
.proof p{font-size:16px;color:var(--slate);line-height:1.78;max-width:50ch}
.proof p + p{margin-top:12px}
.proof p b{color:var(--ink);font-weight:600}
.proof ul{list-style:none;display:grid;gap:9px;margin-top:16px}
.proof li{display:flex;gap:10px;align-items:flex-start;font-size:15px;line-height:1.6;color:var(--slate)}
.proof li::before{content:"";flex:none;width:7px;height:7px;border-radius:50%;
  background:var(--lime);border:1px solid var(--lime-deep);margin-top:8px}

/* The same bulleted run of facts, used outside a .proof grid — beside the
   matrix, where the column is already the text half of a two-up. */
.tick-list{list-style:none;display:grid;gap:9px;margin-top:20px}
.tick-list li{display:flex;gap:10px;align-items:flex-start;font-size:15px;line-height:1.6;color:var(--slate)}
.tick-list li::before{content:"";flex:none;width:7px;height:7px;border-radius:50%;
  background:var(--lime);border:1px solid var(--lime-deep);margin-top:8px}

@media(prefers-reduced-motion:reduce){
  /* Every drawn moment above states the same thing standing still. Nothing
     here carries information that only the motion delivers, so the motion is
     simply removed rather than shortened. */
  html.js .rv .bill,html.js .rv.in .bill{animation:none;clip-path:none}
  html.js .rv .bill li,html.js .rv.in .bill li,
  html.js .rv .bill .stamp,html.js .rv.in .bill .stamp,
  html.js .rv .mtx .c,html.js .rv.in .mtx .c,
  html.js .rv .route li .bead,html.js .rv.in .route li .bead,
  html.js .rv .route li .btxt,html.js .rv.in .route li .btxt{
    animation:none;opacity:1;transform:none}
  html.js .rv .bill .stamp,html.js .rv.in .bill .stamp{transform:rotate(-6deg)}
  html.js .rv .route li:not(:last-child)::before,
  html.js .rv.in .route li:not(:last-child)::before{animation:none;transform:none}
  .fit-col .fgo .arw{transition:none}
}

/* Editorial links use the same ink-and-lime language as the rest of KupaLi.
   Indigo remains reserved for focus and data accents, not body-copy links. */
.doc a,.login-alt a,.contact-list a,.prose a,.login-hint a,
.ans .ans-more a,.fit-note a,.sums-note a,.fit-col .fgo{
  color:var(--ink);text-decoration-color:var(--lime-deep);
  text-decoration-thickness:2px;text-underline-offset:3px;
}
.post-row:hover h3,.related-item:hover h3{color:var(--ink);text-decoration:underline var(--lime-deep) 2px;text-underline-offset:4px}