/* KINETIQ, one stylesheet for the whole site.
   GENERATED. Do not edit by hand: rebuild from index.html and blog.html.

   Until now eight pages each carried their own inline copy of the shared rules.
   Every recent bug came from that: a footer rule added to one copy and not the
   others, and .btn--sm written twice at two different sizes in the same file.
   One file cannot disagree with itself.

   Held for 30 days by the assets rule in web.config. The query string on the
   link is a hash of this content, so regenerating it busts the cache without
   anyone having to remember to. */


:root,
:root[data-theme="dark"],
:root[data-theme="light"]{
  --ink:#222831;
  --ink-2:#393E46;
  --accent:#00ADB5;
  --paper:#EEEEEE;
  --white:#fff;

  /* One ink, many strengths. Every grey is derived from the brand ink rather
     than introduced as a new colour - that is what keeps a light page from
     going muddy. */
  --ink-70:rgba(34,40,49,.70);
  --ink-55:rgba(34,40,49,.55);
  --ink-42:rgba(34,40,49,.42);
  --hair:rgba(34,40,49,.10);
  --hair-2:rgba(34,40,49,.07);

  --font:'Assistant',system-ui,-apple-system,'Segoe UI',Arial,sans-serif;
  --r:8px;
  /* The hover teal is darker than the brand teal on purpose: #00ADB5 on white
     is 3.0:1, which fails for text at this size. This one is 5.1:1. */
  --accent-dk:#007A81;
  --bar-h:78px;
  --pad:clamp(20px,4vw,40px);
  --wrap:1240px;

  color-scheme:light;

  /* additions to the agreed block, same ink, no new hues */
  --ink-34:rgba(34,40,49,.34);
  --ink-22:rgba(34,40,49,.22);
  --hair-p:rgba(34,40,49,.16);
  /* The band behind the services. It matches the footer grey on purpose, so the
     lower half of the page sits on one ground. It stays a separate token from
     --paper even though the value is the same right now, because --paper is
     also the phone screen and the avatar plate and those are not this. */
  --band:#EEEEEE;
}
*,*::before,*::after{box-sizing:border-box}
html{
  -webkit-text-size-adjust:100%;background:#fff;
  /* every in page link glides instead of jumping. The sections already carry a
     scroll-margin for the sticky bar, so the landing position is unchanged. */
  scroll-behavior:smooth;
}
body{
  margin:0;background:var(--white);color:var(--ink);
  font-family:var(--font);font-size:16px;line-height:1.6;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:2px}
b,strong{font-weight:600}
h1,h2,h3,h4{margin:0;font-weight:400;line-height:1.2;letter-spacing:-.015em}
p{margin:0}
ul{margin:0;padding:0;list-style:none}

.kq{display:flex;flex-direction:column;min-height:100vh}
.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--pad)}

/* ============================ TOP BAR ============================ */
.bar{
  position:sticky;top:0;z-index:100;background:var(--white);
  border-bottom:1px solid transparent;
  transition:border-color .25s ease;
}
.bar.is-stuck{border-bottom-color:var(--hair)}
.bar__in{
  display:flex;align-items:center;justify-content:space-between;
  gap:20px;min-height:var(--bar-h);
}
.brand{display:flex;align-items:center;flex:none;min-height:44px}
.brand img{height:29px;width:auto}

/* The outline language: a hairline on transparent at rest. On hover only the
   label changes colour - the fill never arrives, so the bar keeps its weight
   whatever the pointer is doing. */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  border-radius:var(--r);border:0;background:none;cursor:pointer;
  font-family:inherit;font-size:15.5px;font-weight:600;
  min-height:48px;padding:0 26px;color:var(--ink);
  transition:color .2s ease,box-shadow .2s ease,transform .12s ease;
}
.btn:active{transform:translateY(1px)}
.btn--1{box-shadow:inset 0 0 0 1.5px var(--accent)}
.btn--1:hover{color:var(--accent-dk)}
.btn--sm{min-height:46px;padding:0 22px;font-size:15.5px}

/* the second rank of the same language - still a hairline, never a fill */
.btn--2{box-shadow:inset 0 0 0 1px var(--ink-22);color:var(--ink-55)}
.btn--2:hover{color:var(--accent-dk)}
.btn--lg{min-height:56px;padding:0 32px;font-size:16.5px}
.paper .btn--2{box-shadow:inset 0 0 0 1px var(--ink-34)}

/* ============================ SHARED TYPE ============================ */
.paper{background:var(--band)}
.sec{padding-block:clamp(64px,9vw,132px)}
/* the sticky bar must not sit on top of whatever an in-page link lands on */
main section[id]{scroll-margin-top:calc(var(--bar-h) + 14px)}
.h-lead{
  font-weight:300;line-height:1.03;letter-spacing:-.015em;
  font-size:clamp(40px,7.4vw,84px);
}
.h-2{
  font-weight:300;line-height:1.06;letter-spacing:-.012em;
  font-size:clamp(30px,4.6vw,56px);
}
.h-3{
  font-weight:300;line-height:1.1;letter-spacing:-.01em;
  font-size:clamp(26px,3.4vw,42px);
}
.hl{display:block;color:var(--accent-dk);font-weight:600}
.hl-in{color:var(--accent-dk);font-weight:600}
.lede{
  font-size:clamp(16.5px,1.35vw,19px);line-height:1.62;color:var(--ink-70);
  max-width:56ch;
}
.lede.sm{font-size:clamp(16px,1.1vw,17.5px)}
.acts{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.sec-logo{height:clamp(22px,2.5vw,30px);width:auto}

/* reveals: only ever under .js, so a page without script is fully visible */
.js .rv{opacity:0;transform:translateY(16px);transition:opacity .7s ease,transform .7s cubic-bezier(.22,.61,.36,1)}
.js .rv.in{opacity:1;transform:none}
/* The hero is exempt from the reveal. Everything below the fold can fade in on
   scroll, but the hero holds the largest element the browser paints, and hiding
   it until an end of body script runs delays that paint for no gain: it is
   already on screen when the page opens, so there is nothing to reveal.
   This rule must sit after .js .rv.in, not before. The two have identical
   specificity, so order is the only thing deciding which wins. */
.js .hero .rv{opacity:1;transform:none;transition:none}
/* The wordmark lifts out of the flow and its slot collapses to nothing until a
   script measures it and writes a height back, which moves everything under it.
   Reserving the height up front removes that shift. The clamp is copied from
   .hero__mark rather than restated, so the two cannot drift apart. */
.js .markslot{height:clamp(60px,8.2vw,108px)}
.js .rv.d1{transition-delay:.08s}
.js .rv.d2{transition-delay:.16s}

/* ============================ PROMO ============================ */
.clock{
  margin-inline-start:auto;display:inline-flex;align-items:center;gap:5px;
  direction:ltr;font-variant-numeric:tabular-nums;
}
.clock .u{display:inline-flex;flex-direction:column;align-items:center;line-height:1}
.clock .n{font-weight:600;font-size:15px;color:var(--ink)}
.clock .t{font-size:9.5px;letter-spacing:.04em;color:var(--ink-42);margin-top:3px}
.clock .sep{font-weight:300;color:var(--ink-34);transform:translateY(-4px)}

/* ============================ HERO ============================ */
/* The figure is the page. No card, no shadow, no container - it stands on the
   white ground and the section edge crops it. */
.hero{position:relative;overflow:hidden;background:var(--white)}
.hero__in{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.9fr);
  /* start, not end: both columns now begin on the same line, which is what puts
     the top of the wordmark exactly level with the top of the handset */
  align-items:start;gap:clamp(16px,3vw,50px);
  /* Halved from 86px. The sticky bar already spends 79 pixels at the top, and
     on a 768px laptop the old figure meant nothing on the page began until a
     fifth of the screen had gone by. Only the top changes: the space under the
     hero is doing a different job and is left alone. The mobile rules below
     have their own padding and are untouched. */
  padding-block:clamp(30px,3.2vw,48px) clamp(40px,5vw,72px);
}
.hero__type{min-width:0}
.hero__type .sec-logo{margin-bottom:20px}

/* The travelling mark.
   In flow it would simply scroll away like everything else, and the only added
   motion would be the shrink - which does not read as travel at all. So under
   script it is lifted out of the flow and driven from the hero position to the
   bar position on its own eased curve, moving slower than the page. The slot
   below keeps its space so nothing jumps when it lifts. */
.markslot{display:block;margin-bottom:clamp(22px,2.6vw,34px)}
.hero__mark{height:clamp(60px,8.2vw,108px);width:auto}
.js .hero__mark{
  position:fixed;top:0;left:0;z-index:120;
  transform-origin:0 0;will-change:transform;
  /* No opacity:0 here any more. The mark is placed by the transform that
     paintFly writes, and measureFly and paintFly both run synchronously at the
     end of body, so it was never racing anything: hiding it only guaranteed
     that the first paint had one fewer thing in it. */
}
/* If the flight is not going to run - reduced motion, or a measurement that
   came back empty - the mark must go straight back into the flow. Left fixed
   with no transform it pins itself to the top left corner of the window, which
   is precisely what a half-applied effect looks like. */
.js .hero__mark.nofly{
  position:static;opacity:1;transform:none;z-index:auto;will-change:auto;
}

/* Only script hides the bar mark. With JavaScript off both marks simply show,
   which is correct rather than broken. */
.js .brand img{opacity:0}
.hero h1{margin-bottom:26px}
/* was 34. The tallest tongue reaches 34px above the button, so the old gap put
   the fire right on the last line of the paragraph. */
.hero .lede{margin-bottom:clamp(54px,4.6vw,60px)}
.figure{
  min-width:0;
  transform:translate3d(0,var(--py,0px),0);
  will-change:transform;
}
.hero__fig{display:flex;justify-content:center;align-items:flex-end}

/* ---------- the phone: a real device running a real conversation ----------
   Everything here is CSS and inline SVG, so the whole sequence runs with
   JavaScript disabled and cannot throw. The device is drawn rather than
   photographed, which keeps it sharp at every size and weighs nothing.
   The one deliberate palette exception is the read receipt: the double tick
   is universally understood as blue, and the brand teal is close enough to
   carry that meaning without introducing a foreign hue. */
.phone{
  position:relative;
  width:min(100%,308px);
  /* the section padding now carries the space below, so the handset can sit
     flush with the top of the column and line up with the wordmark */
  margin-bottom:0;
  /* Measured, not guessed: with every row of every scene forced open the chat
     needs 583px of device. 600 leaves a little room in case a line wraps at a
     narrower width, and nothing more. */
  aspect-ratio:307/600;
  border-radius:44px;
  background:var(--ink);
  padding:11px;
  /* no float here. The handset is meant to sit level with the wordmark, and a
     16px bob breaks that alignment on every pass. */
  box-shadow:0 26px 60px -34px rgba(34,40,49,.55);
}
/* Side hardware. These are physical edges of a device, so they use left and
   right rather than logical properties - a phone does not mirror in Hebrew. */
.phone::before,.phone::after{
  content:"";position:absolute;width:3px;border-radius:99px;
  background:var(--ink-2);
}
.phone::before{left:-3px;top:118px;height:54px}   /* volume up */
.phone::after {left:-3px;top:182px;height:54px}   /* volume down */
.phone__pwr{
  position:absolute;right:-3px;top:150px;width:3px;height:80px;
  border-radius:99px;background:var(--ink-2);
}

.screen{
  position:relative;height:100%;width:100%;
  border-radius:34px;overflow:hidden;
  background:var(--paper);
  display:flex;flex-direction:column;
}
/* the thin bright edge where the glass meets the frame */
.screen::after{
  content:"";position:absolute;inset:0;border-radius:34px;pointer-events:none;z-index:6;
  box-shadow:inset 0 0 0 1px rgba(238,238,238,.14);
}
/* the dynamic island */
.island{
  position:absolute;top:9px;left:50%;transform:translateX(-50%);
  width:86px;height:23px;border-radius:99px;background:var(--ink);z-index:5;
}

/* ---- status bar ---- */
.sbar{
  flex:none;display:flex;align-items:center;justify-content:space-between;
  padding:13px 20px 7px;font-size:11.5px;font-weight:600;color:var(--white);
  background:var(--ink-2);direction:ltr;
}
.sbar__r{display:inline-flex;align-items:center;gap:5px}
.sbar svg{width:14px;height:14px;display:block}
/* the handset clock follows the scene: a call about a car at midnight should
   not sit under a status bar that says 09:41 */
.sbar__t{position:relative;display:inline-block;min-width:34px;height:14px}
.sbar__t span{position:absolute;left:0;top:0;opacity:0;animation:clk 54s linear infinite}
.sbar__t .c2{animation-delay:18s}
.sbar__t .c3{animation-delay:36s}
@keyframes clk{0%,32.6%{opacity:1} 33.4%,100%{opacity:0}}

/* ---- chat header ---- */
.wahead{
  flex:none;display:flex;align-items:center;gap:9px;
  padding:7px 12px 9px;background:var(--ink-2);color:var(--white);
}
.wahead__back{width:17px;height:17px;flex:none;opacity:.85}
.wahead__av{
  width:34px;height:34px;border-radius:50%;flex:none;overflow:hidden;
  background:var(--paper);
  display:flex;align-items:center;justify-content:center;
}
/* the mark sits inside the circle rather than filling it, so the grey ring
   reads as an avatar plate instead of a cropped photo */
.wahead__av img{width:19px;height:19px;object-fit:contain;display:block}
.wahead__id{min-width:0;line-height:1.3}
.wahead__nm{font-size:13.5px;font-weight:600;display:block}
/* the status line swaps to "typing" exactly when the dots appear below */
.wahead__st{font-size:11px;opacity:.75;display:block;position:relative;height:14px}
.wahead__st span{position:absolute;inset-inline-start:0;top:0;white-space:nowrap}
/* The status line reads "typing" exactly while the dots are on screen below.
   Six windows: two per scene, at +0, +33.3 and +66.7 of the master cycle. */
.st-on{animation:stOn 54s linear infinite}
.st-typ{opacity:0;color:var(--accent);animation:stTyp 54s linear infinite}
@keyframes stTyp{
  0%,4.5%{opacity:0}    5.5%,8%{opacity:1}    9%,16.5%{opacity:0}
  17.5%,20%{opacity:1}  21%,37.8%{opacity:0}  38.8%,41.3%{opacity:1}
  42.3%,49.8%{opacity:0} 50.8%,53.3%{opacity:1} 54.3%,71.1%{opacity:0}
  72.1%,74.6%{opacity:1} 75.6%,83.1%{opacity:0} 84.1%,86.6%{opacity:1}
  87.6%,100%{opacity:0}
}
@keyframes stOn{
  0%,4.5%{opacity:.75}    5.5%,8%{opacity:0}    9%,16.5%{opacity:.75}
  17.5%,20%{opacity:0}    21%,37.8%{opacity:.75} 38.8%,41.3%{opacity:0}
  42.3%,49.8%{opacity:.75} 50.8%,53.3%{opacity:0} 54.3%,71.1%{opacity:.75}
  72.1%,74.6%{opacity:0}  75.6%,83.1%{opacity:.75} 84.1%,86.6%{opacity:0}
  87.6%,100%{opacity:.75}
}
.wahead__ic{margin-inline-start:auto;display:inline-flex;gap:13px;opacity:.85}
.wahead__ic svg{width:16px;height:16px}

/* ---- the thread ---- */
.wachat{
  flex:1;min-height:0;position:relative;
  /* WhatsApp's own chat surface colour. The doodle artwork on top of it is
     theirs and is not reproduced here - what is matched is the ground. */
  background:#EFEAE2;
  /* the safety net: if a thread ever outgrows the screen it is clipped at the
     top like a real scrolled chat, instead of climbing over the header */
  overflow:hidden;
}

/* Three conversations share the screen. Each is stacked in the same box and
   takes its turn, so the visitor sees three real use cases rather than one
   scripted exchange on repeat. Every scene runs the SAME row keyframes and is
   simply offset by one slot, which is why adding a fourth scenario later is
   two lines rather than a new timeline. */
.scene{
  position:absolute;inset:0;
  padding:10px 10px 6px;
  display:flex;flex-direction:column;
  opacity:0;
  animation:sceneShow 54s linear infinite;
}
/* The encryption notice and the date belong to the head of a thread, so they
   pin to the top. The messages keep growing off the bottom, and the empty
   wallpaper sits between the two - which is exactly where it sits in a real
   chat that has only just started. */
.scene__head{flex:none;display:flex;flex-direction:column;gap:5px;margin-bottom:5px}
.scene__body{
  flex:1;min-height:0;overflow:hidden;
  display:flex;flex-direction:column;justify-content:flex-end;
}
.s1,.s1 .row{animation-delay:0s}
.s2,.s2 .row{animation-delay:18s}
.s3,.s3 .row{animation-delay:36s}
@keyframes sceneShow{0%,32.6%{opacity:1} 33.4%,100%{opacity:0}}
/* a barely-there texture so the surface is not dead flat */
.wachat::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:
    repeating-linear-gradient(45deg,rgba(34,40,49,.016) 0 1px,transparent 1px 11px),
    repeating-linear-gradient(-45deg,rgba(34,40,49,.016) 0 1px,transparent 1px 11px);
}
/* Never let flex squeeze a bubble: it must keep its height and be clipped.
   Scoped to the scene body on purpose - the older, broader version of this rule
   sat after .scene and quietly overrode its position:absolute, which stacked
   the three conversations one under another instead of on top of each other. */
.scene__body > *{position:relative;flex:none}
.scene__head > *{position:relative}

.day{
  align-self:center;font-size:10.5px;color:var(--ink-55);
  background:var(--white);border-radius:7px;padding:3px 10px;margin-bottom:2px;
}
/* the encryption notice every real thread opens with. It also fills the empty
   head of the thread, which otherwise reads as a rendering gap rather than as
   a conversation that simply has not started yet. */
.enc{
  align-self:center;max-width:88%;text-align:center;
  font-size:9.5px;line-height:1.45;color:var(--ink-55);
  /* WhatsApp's notice is a pale yellow. Rather than import a foreign hue this
     is the brand marker yellow at low strength - visually the same, and it
     keeps the file's colour list honest. */
  background:rgba(255,210,76,.24);
  border-radius:7px;padding:5px 10px;margin-bottom:6px;
}
.enc svg{width:9px;height:9px;display:inline-block;vertical-align:-1px;margin-inline-end:3px}
/* Each message lives in a row that collapses to nothing when the message is
   not on screen yet. Without this the hidden messages still reserve their
   space, which leaves gaping holes between the visible bubbles and pushes the
   whole thread out of the screen. The row also carries the padding the tail
   pokes into, so clipping the row never clips the tail. */
.row{
  display:flex;max-height:0;margin-bottom:0;opacity:0;overflow:hidden;
  animation-duration:54s;animation-iteration-count:infinite;animation-timing-function:ease;
}
.row.out{justify-content:flex-end;padding-inline-end:8px}
.row.in{justify-content:flex-start;padding-inline-start:8px}

.msg{
  position:relative;max-width:88%;
  font-size:12.8px;line-height:1.45;
  padding:6px 9px 16px;border-radius:9px;
}
/* the agent sits at the reading start, the visitor's own messages opposite -
   the arrangement every Hebrew chat app uses */
.msg--in{background:var(--white);color:var(--ink);border-start-start-radius:2px}
.msg--out{background:#D9F2F3;color:var(--ink);border-start-end-radius:2px}
/* the little tail */
.msg--in::before,.msg--out::before{content:"";position:absolute;top:0;width:9px;height:12px}
.msg--in::before{inset-inline-start:-7px;background:var(--white);clip-path:polygon(100% 0,100% 100%,0 0)}
.msg--out::before{inset-inline-end:-7px;background:#D9F2F3;clip-path:polygon(0 0,0 100%,100% 0)}

.meta{
  position:absolute;bottom:4px;inset-inline-end:9px;
  display:inline-flex;align-items:center;gap:3px;
  font-size:9.5px;color:var(--ink-42);direction:ltr;
}
.meta svg{width:13px;height:13px;display:block}
.tick{color:var(--ink-42)}
/* The read receipt is the one place the real WhatsApp blue is used, at the
   client's request. It is the only colour in the file from outside the brand
   palette, and it is confined to this 13px mark. */
.t-read{animation:tickRead 18s linear infinite}
@keyframes tickRead{0%,17%{color:rgba(34,40,49,.42)}20%,100%{color:#53BDEB}}

.typing{
  display:inline-flex;gap:3px;
  background:var(--white);border-radius:9px;padding:9px 11px;
  border-start-start-radius:2px;
}
.typing i{
  width:5px;height:5px;border-radius:50%;background:var(--ink-42);
  animation:typedot 1.15s ease-in-out infinite;
}
.typing i:nth-child(2){animation-delay:.17s}
.typing i:nth-child(3){animation-delay:.34s}
@keyframes typedot{0%,100%{opacity:.3;transform:translateY(0)}50%{opacity:1;transform:translateY(-3px)}}

/* ---- composer ---- */
.wabar{
  flex:none;display:flex;align-items:center;gap:7px;
  padding:8px 10px 12px;background:#EFEAE2;
}
.wabar__f{
  flex:1;min-width:0;background:var(--white);border-radius:99px;
  padding:8px 12px;font-size:12px;color:var(--ink-42);
  display:flex;align-items:center;gap:7px;
}
.wabar__f svg{width:15px;height:15px;flex:none;opacity:.55}
.wabar__send{
  width:32px;height:32px;border-radius:50%;flex:none;
  background:var(--accent);display:flex;align-items:center;justify-content:center;
}
.wabar__send svg{width:15px;height:15px;color:var(--ink)}

/* the home indicator, and a little breathing room under the composer for it */
.homebar{
  flex:none;height:20px;display:flex;align-items:center;justify-content:center;
  background:#EFEAE2;
}
.homebar span{width:104px;height:4px;border-radius:99px;background:var(--ink-34)}

/* One 54s master cycle, three 18s slots. These percentages describe the first
   slot only; scenes two and three reuse them verbatim with an 18s and a 36s
   delay. Rows open by growing, which is what makes the stack climb the way a
   real thread does. */
.m1{animation-name:m1}
.ty1{animation-name:ty1}
.m2{animation-name:m2}
.m3{animation-name:m3}
.ty2{animation-name:ty2}
.m4{animation-name:m4}
@keyframes m1 {0%,1.5%{opacity:0;max-height:0;margin-bottom:0}  3%,30.5%{opacity:1;max-height:96px;margin-bottom:5px} 32.5%,100%{opacity:0;max-height:0;margin-bottom:0}}
@keyframes ty1{0%,4.5%{opacity:0;max-height:0;margin-bottom:0}  5.5%,8%{opacity:1;max-height:96px;margin-bottom:5px}    9%,100%{opacity:0;max-height:0;margin-bottom:0}}
@keyframes m2 {0%,8%{opacity:0;max-height:0;margin-bottom:0}    9.5%,30.5%{opacity:1;max-height:96px;margin-bottom:5px} 32.5%,100%{opacity:0;max-height:0;margin-bottom:0}}
@keyframes m3 {0%,13%{opacity:0;max-height:0;margin-bottom:0}  14.5%,30.5%{opacity:1;max-height:96px;margin-bottom:5px} 32.5%,100%{opacity:0;max-height:0;margin-bottom:0}}
@keyframes ty2{0%,16.5%{opacity:0;max-height:0;margin-bottom:0} 17.5%,20%{opacity:1;max-height:96px;margin-bottom:5px}  21%,100%{opacity:0;max-height:0;margin-bottom:0}}
@keyframes m4 {0%,20%{opacity:0;max-height:0;margin-bottom:0}  21.5%,30.5%{opacity:1;max-height:96px;margin-bottom:5px} 32.5%,100%{opacity:0;max-height:0;margin-bottom:0}}

@keyframes bob{
  0%,100%{transform:translate3d(0,0,0)}
  50%{transform:translate3d(0,-16px,0)}
}

/* ============================ ABOUT ============================ */
/* One statement carries the section. The principles sit beside it rather than
   under it, so the eye reads the position first and the proof second without
   scrolling. Each icon says what its line is about - service, standard, price -
   so none of them is decoration. */
.av2{background:var(--white);padding-block:clamp(70px,10vw,150px)}
.av2__in{
  display:grid;grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr);
  /* centre, not start: the list is shorter than the statement, so aligning
     both to the top left it hanging with all the slack underneath it. */
  gap:clamp(30px,5vw,88px);align-items:center;
}
.av2 .av2__say{
  font-size:clamp(28px,3.9vw,54px);font-weight:300;line-height:1.16;
  letter-spacing:-.02em;max-width:15ch;text-wrap:balance;
}
.av2__say b{font-weight:600;color:var(--accent-dk)}

/* No rules between the principles either. The separation is the gap, which has
   to be larger than the internal gap of a row or the three read as six lines. */
.av2__list{
  display:flex;flex-direction:column;gap:clamp(30px,3.8vw,46px);
  max-width:390px;margin-inline:auto;
}
.av2__item{
  display:grid;grid-template-columns:auto minmax(0,1fr);
  gap:clamp(14px,1.9vw,24px);align-items:center;text-align:center;
}
/* centred against the whole text block, not hung off the first line */
.av2__item svg{
  width:clamp(30px,2.6vw,38px);height:clamp(30px,2.6vw,38px);
  flex:none;color:var(--accent);stroke-width:1.4;
}
.av2__item b{display:block;font-size:clamp(17px,1.7vw,21px);font-weight:600;line-height:1.3}
.av2__item p{color:var(--ink-55);font-size:15.5px;line-height:1.6;margin-top:6px}

@media (max-width:900px){
  .av2__in{grid-template-columns:1fr;gap:34px}
  .av2__say{max-width:20ch}
}
/* ============================ SERVICES ============================ */
/* No rule between the services. With the dividers gone the separation has to
   come from space instead, so the padding grows to carry the rhythm. */
.svc{padding-block:clamp(64px,8vw,116px)}
/* The same two column split as the about section, and centred for the same
   reason: the list is shorter than the statement beside it, so aligning both to
   the top leaves the list hanging with all the slack underneath. */
.svc__in{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(30px,5vw,88px);align-items:center;
}
/* The middle section is mirrored, and it still lines up because the two columns
   are exactly the same width. What holds the grid together is not that every
   heading sits on one line, it is that only two lines exist at all: whatever is
   on the right starts where every other right hand block starts. */
.svc--flip .svc__head{order:2}
.svc--flip .svc__body{order:1}
.svc__head h2{margin-top:4px}
/* the description now belongs to its own heading rather than to the column
   opposite it */
.svc__head .lede{margin-top:clamp(18px,2.2vw,26px)}

/* Deliberately the same shape as .av2__list. It stays a grid rather than a free
   flowing centre so the icon column is the same width in all three rows and the
   icons line up under one another even though the text is centred. */
.svclist{
  display:flex;flex-direction:column;gap:clamp(30px,3.8vw,46px);
  /* Sits at the reading edge of its column rather than centred inside it.
     Centred, the list floated off the column edge and the mirrored section
     produced four different x lines instead of two; against the edge, whatever
     is on the right always starts on the same line. The width cap stays so the
     lines do not get long. */
  max-width:390px;margin-inline:0;
}
.svcitem{
  display:grid;grid-template-columns:auto minmax(0,1fr);
  gap:clamp(14px,1.9vw,24px);align-items:center;text-align:center;
}
.svcitem svg{
  width:clamp(30px,2.6vw,38px);height:clamp(30px,2.6vw,38px);
  flex:none;color:var(--accent);stroke-width:1.4;
}
.svcitem b{display:block;font-size:clamp(17px,1.7vw,21px);font-weight:600;line-height:1.3}
.svcitem p{color:var(--ink-55);font-size:15.5px;line-height:1.6;margin-top:6px}
/* ============================ PRICING ============================ */
.pricing h2{margin-bottom:10px;display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.pricing h2 .h-logo{height:clamp(20px,2.4vw,30px);width:auto;align-self:center}
.hint{font-size:13.5px;color:var(--ink-55);margin-top:14px;display:none}
/* Eight rows, one per part of a plan: the label, the name, the tag line, the
   price, the vat note, the button, the divider and the feature list. Each plan
   is a subgrid of those same rows, so the four columns share them instead of
   each column stacking on its own. That is what makes Enterprise line up even
   though its price is a sentence and everyone else's is a number. */
.plans{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  grid-template-rows:repeat(8,auto);
  margin-top:clamp(34px,4vw,56px);
}
.plan{
  padding:0 clamp(12px,1.6vw,24px);
  border-inline-start:1px solid var(--hair-p);
  display:grid;grid-row:span 8;grid-template-rows:subgrid;
  min-width:0;
}
/* each part sits at the top of its shared row rather than stretching down it */
.plan > *{align-self:start}
/* The price is the exception. Enterprise says a sentence where the others say a
   number, so its type is smaller; aligned to the top of the row its text would
   float above theirs. Baseline alignment puts all four on one line regardless
   of size, which is what "the same line" actually means for type. */
.plan .amt{align-self:baseline}
.plan:first-child{border-inline-start:0;padding-inline-start:0}
.rec-lbl{display:block;min-height:18px;font-size:12px;color:var(--accent-dk);font-weight:600}
.plan h3{font-size:22px;font-weight:600;letter-spacing:.01em;direction:ltr;text-align:right}
.plan .tag{color:var(--ink-55);font-size:14.5px;line-height:1.45;margin-top:6px;min-height:44px}
.amt{margin-top:18px;font-size:clamp(26px,2.6vw,34px);font-weight:300;letter-spacing:-.01em}
.amt .per{font-size:14.5px;color:var(--ink-55);font-weight:400}
.amt.custom{font-size:clamp(19px,1.8vw,23px);line-height:1.3}
.vat{font-size:13px;color:var(--ink-42);margin-top:4px;min-height:20px}
.plan .btn{width:100%;margin-top:20px}
.feath{
  margin-top:26px;padding-top:16px;border-top:1px solid var(--hair-p);
  font-size:12.5px;font-weight:600;letter-spacing:.06em;color:var(--ink-42);
}
.feats{margin-top:14px;display:flex;flex-direction:column;gap:11px}
.feats li{display:grid;grid-template-columns:17px minmax(0,1fr);gap:9px;font-size:15px;color:var(--ink-70);line-height:1.45}
.feats svg{width:15px;height:15px;color:var(--accent);margin-top:5px}
.feats b{color:var(--ink)}
.ymark{
  background:url(assets/yellow-mark.png) center/100% 100% no-repeat;
  padding:1px 7px 3px;margin-inline:-3px;
}
.vatnote{
  margin-top:clamp(28px,3.5vw,44px);padding-top:18px;
  border-top:1px solid var(--hair-p);font-size:13.5px;color:var(--ink-55);
  /* The note carries three definitions now, not one line about VAT, and on a
     wide screen it ran the full 1160px of the wrap: a 172 character line that
     the eye loses on the way back. Every other readable block on this site is
     capped - the lede at 56ch, an answer at 64ch, a legal document at 74ch -
     and this one had no cap at all because it never needed one. */
  max-width:80ch;margin-inline:auto;
}

/* ---- the price list as cards ---- */
/* Each plan becomes an object you can point at. The outline is the same
   hairline used everywhere else, so the cards read as part of the page rather
   than as a widget dropped into it. Grow carries a teal outline and a label
   instead of a fill, because a filled card would be the loudest thing on a page
   whose whole language is outlines. */
.plans{column-gap:clamp(10px,1.2vw,18px)}
.plan{
  border-inline-start:0;border-radius:var(--r);
  padding:clamp(16px,1.8vw,24px);
  box-shadow:inset 0 0 0 1px var(--hair-p);
  background:var(--white);
}
.plan:first-child{padding-inline-start:clamp(16px,1.8vw,24px)}
.plan:nth-child(2){box-shadow:inset 0 0 0 1.5px var(--accent)}
.plan:nth-child(2) .rec-lbl::after{content:"הנבחרת"}
.plan .btn{margin-top:20px}

@media (max-width:980px){
  .plans{row-gap:clamp(10px,1.2vw,18px)}
  /* the divider rules from the column layout have nothing to divide now */
  .plan{border-top:0}
  .plan:nth-child(1),.plan:nth-child(2){border-top:0}
}
@media (max-width:620px){
  /* in the carousel each plan is already its own card, so the borders that used
     to separate columns would only draw a second line beside the outline */
  .plan,.plan:first-child,.plan:nth-child(odd){
    border-inline-start:0;
    padding:clamp(16px,1.8vw,24px);
  }
  .plans{gap:10px}
}
/* ============================ LEAD FORM ============================ */
.lead__in{display:grid;grid-template-columns:minmax(0,.72fr) minmax(0,1fr);gap:clamp(30px,5vw,84px);align-items:start}
.lead h2{margin-bottom:16px}
.fgrid{position:relative;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 20px}
.f{display:flex;flex-direction:column;gap:7px;min-width:0}
.f.wide{grid-column:1/-1}
.f label{font-size:13.5px;color:var(--ink-55)}
.f input,.f select{
  font-family:inherit;font-size:16px;color:var(--ink);
  min-height:48px;padding:0 14px;border:0;border-radius:var(--r);
  background:none;box-shadow:inset 0 0 0 1px var(--ink-22);
  transition:box-shadow .2s ease,color .2s ease;width:100%;
}
.f select{
  appearance:none;cursor:pointer;padding-inline-end:38px;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23222831' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-size:15px 15px;background-position:left 14px center;
}
.f input:hover,.f select:hover{color:var(--accent-dk)}
.f input:focus,.f select:focus{outline:2px solid var(--accent);outline-offset:2px}
.f input::placeholder{color:var(--ink-42)}
.hp{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.consent{
  grid-column:1/-1;display:grid;grid-template-columns:22px minmax(0,1fr);gap:12px;
  align-items:start;font-size:14.5px;color:var(--ink-55);cursor:pointer;
  transition:color .2s ease;
  /* 24 is the floor for a pointer of any kind, so it is not only a touch rule */
  min-height:26px;
}
.consent:hover{color:var(--accent-dk)}
.consent input{
  appearance:none;width:22px;height:22px;margin:0;border-radius:var(--r);
  box-shadow:inset 0 0 0 1px var(--ink-22);background:none;cursor:pointer;
  position:relative;flex:none;
}
.consent input:checked::after{
  content:"";position:absolute;inset:5px;border-radius:2px;background:var(--accent);
}
.formfoot{display:flex;flex-wrap:wrap;align-items:center;gap:16px;margin-top:24px}
.msg{font-size:14px;color:var(--ink-55)}
.msg.err{color:var(--ink)}
.done{display:none}
.lead.is-done .fwrap{display:none}
.lead.is-done .done{display:block}
.done h3{font-size:clamp(22px,2.4vw,30px);font-weight:600;margin-bottom:10px}
.done p{color:var(--ink-55);margin-bottom:20px}

/* ============================ BOTTOM BAR ============================ */
/* Idea 04: the light grey from the palette carries the mark and the contact
   details, and a thin strip of the dark grey underneath carries the documents.
   Two greys from the same palette doing two different jobs, and the strip is
   what gives the page a definite end instead of it simply running out. */
.foot{background:var(--paper);color:var(--ink)}
.foot__top{
  display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;
  gap:28px 60px;padding-block:clamp(38px,4.6vw,54px);
}
.foot__brand img{height:27px;width:auto}

.reach{display:flex;flex-direction:column;gap:11px;align-items:flex-start}
.reach h4{margin:0;font-size:12.5px;font-weight:600;color:var(--ink-42);letter-spacing:.06em}
/* The row stays right to left so the icon sits on the reading side. Only the
   value inside is forced left to right, which is what an address and a number
   need, and doing it on the inner span rather than the whole link is what keeps
   the icon from flipping to the far side with it. */
.reach a{
  display:inline-flex;align-items:center;gap:9px;min-height:30px;
  font-size:15px;color:var(--ink);transition:color .18s ease;
}

.reach a:hover{color:var(--accent-dk)}
.reach svg{width:16px;height:16px;flex:none;color:var(--ink-42);transition:color .18s ease}
.reach a:hover svg{color:var(--accent-dk)}
.reach .ltr{direction:ltr;unicode-bidi:isolate}

/* the strip */
.foot__strip{background:var(--ink-2)}
.foot__strip .wrap{
  display:flex;flex-wrap:wrap;align-items:center;
  gap:8px 22px;padding-block:15px;
}
/* white at 52 percent on this grey is 4.3:1. The brand teal would be 3.9 and
   would fail, so hover goes to white here rather than to the accent. */
.foot__strip a{
  display:inline-flex;align-items:center;min-height:26px;
  color:rgba(255,255,255,.52);font-size:13.5px;transition:color .18s ease;
}
.foot__strip a:hover{color:#fff}

/* ============================ RESPONSIVE ============================ */
@media (max-width:1100px){
  .hero__in{grid-template-columns:minmax(0,1fr) minmax(0,.82fr)}
  .plan .tag{min-height:64px}
}
@media (max-width:980px){
  .svc--flip .svc__head,.svc--flip .svc__body{order:0}
  .svc__in,.lead__in{grid-template-columns:minmax(0,1fr)}
  .plans{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(16,auto);gap:0 0}
  .plan{padding-block:26px;border-top:1px solid var(--hair-p)}
  .plan:nth-child(odd){border-inline-start:0;padding-inline-start:0}
  .plan:nth-child(1),.plan:nth-child(2){border-top:0}
}
@media (max-width:900px){
  :root{--bar-h:64px}
  .foot__top{gap:30px}
  .hero__in{
    grid-template-columns:minmax(0,1fr);
    padding-block:clamp(30px,5vw,50px) 0;
  }
  .hero__type{padding-bottom:26px}
  .hero__fig{justify-content:flex-start}
  .hero__fig img{width:min(96%,470px);margin-bottom:-60px}
}
@media (max-width:620px){
  /* One plan on the screen at a time, with arrows, because four cards side by
     side on a phone is either four unreadable columns or a scroll nobody
     notices. The swipe hint goes: the arrows say it better than a sentence. */
  .hint{display:none}
  .plans{grid-template-rows:auto;gap:10px}
  /* Without script the four simply stack, one under the other. Nothing here is
     behind an interaction that might not load. */
  .plans:not(.is-deck){display:flex;flex-direction:column}
  /* Not a shared grid cell. In a grid every card sits in the same row, so the
     row takes the height of the longest plan and Enterprise, which has three
     fewer lines, carried three hundred pixels of nothing. Here the card on
     screen is in the flow and sets the height; the other three float over it. */
  .plans.is-deck{display:block;position:relative;overflow:hidden}
  .plans.is-deck > .plan{position:absolute;inset-block-start:0;inset-inline:0}
  .plans.is-deck > .plan.is-on{position:relative}
  .plan{
    grid-row:auto;grid-template-rows:none;
    display:flex;flex-direction:column;
    border-inline-start:0;border-top:0;
    border-radius:var(--r);box-shadow:inset 0 0 0 1px var(--hair-p);
    background:var(--white);
  }
  /* The card states its own padding, and it has to out specify the two column
     tablet layout to do it. That layout zeroes the reading side of every odd
     column so the pair share one gutter, and .plan:nth-child(odd) beats a bare
     .plan, so down here Basic and Pro had nothing at all between their text and
     the outline while Grow and Enterprise had a proper margin. */
  .plan,.plan:first-child,.plan:nth-child(odd),.plan:nth-child(even){
    padding:clamp(18px,5vw,26px);
  }
  /* align-self:start is a rule from the desktop subgrid, where it means the top
     of a shared row. In this column flex it addresses the other axis, so every
     part of the card shrank to the width of its own text: the rule above the
     feature list was a 72px stub instead of a line across the card, and the
     list itself sat in 179px of a 302px card and wrapped early. */
  .plan > *,.plan .amt{align-self:stretch}
  /* nothing to reserve a row for when there is one card on the screen */
  .plan .rec-lbl{min-height:0}
  .plan:nth-child(2) .rec-lbl{margin-bottom:4px}
  .plan:nth-child(2){box-shadow:inset 0 0 0 1.5px var(--accent)}
  .plan .tag{min-height:0}
  /* the browser keeps vertical panning and pinch to zoom; only the horizontal
     drag is handed to the script, so a swipe cannot be read as a scroll */
  .plans.is-deck{touch-action:pan-y pinch-zoom}

  /* One card in the middle of the screen wants the things around it in the
     middle too. On a wide screen the heading introduces four columns from the
     reading edge and stays there; here it sits over a single centred object. */
  .pricing h2{justify-content:center}
  .vatnote{text-align:center}
  .plans.is-deck > .plan{
    opacity:0;pointer-events:none;transform:translateX(var(--from,0));
    transition:opacity .26s ease,transform .34s cubic-bezier(.34,.9,.36,1);
  }
  .plans.is-deck > .plan.is-on{opacity:1;pointer-events:auto;transform:none}

  /* the control row */
  .pnav{
    display:flex;align-items:center;justify-content:space-between;gap:12px;
    margin-top:clamp(26px,6vw,34px);margin-bottom:14px;
  }
  .pnav__b{
    flex:none;width:46px;height:46px;border-radius:50%;border:0;background:none;
    cursor:pointer;display:grid;place-items:center;color:var(--ink);
    box-shadow:inset 0 0 0 1px var(--ink-22);
    transition:color .18s ease,box-shadow .18s ease,opacity .18s ease;
  }
  .pnav__b:hover{color:var(--accent-dk);box-shadow:inset 0 0 0 1.5px var(--accent)}
  .pnav__b:disabled{opacity:.32;cursor:default}
  .pnav__b svg{width:19px;height:19px;stroke-width:2}
  .pnav__t{
    flex:1;text-align:center;font-size:16px;font-weight:600;color:var(--ink);
    display:flex;flex-direction:column;gap:5px;align-items:center;
  }
  .pnav__dots{display:flex;gap:6px}
  .pnav__dots i{
    width:6px;height:6px;border-radius:50%;display:block;
    box-shadow:inset 0 0 0 1px var(--ink-22);transition:background .2s ease,box-shadow .2s ease;
  }
  .pnav__dots i.on{background:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}

  .fgrid{grid-template-columns:minmax(0,1fr)}
  .clock{margin-inline-start:0}
}
@media (min-width:621px){ .pnav{display:none} }
@media (max-width:560px){
  .brand img{height:25px}
  .btn--sm{padding:0 17px;font-size:14.5px}
  .btn--lg{width:100%}
  .acts{gap:10px}
}
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{transition-duration:.001ms !important;animation-duration:.001ms !important}
  html{scroll-behavior:auto}
  .js .rv{opacity:1 !important;transform:none !important}
  .figure{transform:none !important}
  .hero__fig img,.kv__fig img{animation:none !important}
  /* Every message ends its cycle at opacity 0, so collapsing the duration above
     would leave the whole conversation invisible. Show it as a finished thread
     instead, and drop the typing dots because nothing is being typed. */
  .phone{animation:none !important}
  /* one scene, fully open, no cycling and no typing dots */
  .scene{animation:none !important;opacity:0 !important}
  .scene.s1{opacity:1 !important}
  .sbar__t span{animation:none !important;opacity:0 !important}
  .sbar__t .c1{opacity:1 !important}
  .row{animation:none !important;opacity:1 !important;max-height:none !important;margin-bottom:5px !important}
  .row.typ{display:none !important}
  .st-typ{display:none !important}
  .st-on{animation:none !important;opacity:.75 !important}
  .t-read{animation:none !important;color:#53BDEB !important}
}
/* ============================ FLOATING WHATSAPP ============================ */
/* It stacks above the accessibility launcher, which positions itself fixed at
   the middle of the right edge. The two sizes and the gap live here as one set
   of variables so the relationship between the buttons is stated once instead
   of being a magic offset that breaks the next time either size changes. */
:root{--fab:58px;--fab-gap:14px;--fab-edge:24px}
.wafab{
  /* physical right, not inset-inline-end. The page is RTL, so the logical end
     is the left edge, and the accessibility launcher this stacks onto is
     anchored with a physical right of its own. */
  position:fixed;top:50%;right:var(--fab-edge);z-index:9997;
  /* centre to centre distance is one button plus the gap */
  transform:translateY(calc(-50% - var(--fab) - var(--fab-gap)));
  width:var(--fab);height:var(--fab);border-radius:50%;
  display:grid;place-items:center;
  background:var(--accent);color:#fff;
  box-shadow:0 10px 28px -8px rgba(0,173,181,.55);
  transition:background .2s ease,transform .2s ease,box-shadow .2s ease;
}
.wafab svg{width:29px;height:29px;fill:currentColor;display:block}
/* the transform has to carry the stacking offset or hover throws it off place */
.wafab:hover{
  background:var(--accent-dk);
  transform:translateY(calc(-50% - var(--fab) - var(--fab-gap))) scale(1.07);
  box-shadow:0 14px 34px -8px rgba(0,122,129,.6);
}
.wafab:focus-visible{outline:3px solid var(--white);outline-offset:3px}
@media (max-width:470px){
  :root{--fab:52px;--fab-gap:12px;--fab-edge:16px}
  .wafab svg{width:26px;height:26px}
}
@media (prefers-reduced-motion: reduce){
  .wafab:hover{transform:translateY(calc(-50% - var(--fab) - var(--fab-gap)))}
}
/* ===================== KV START =====================
   Fire field, torch behaviour. */

/* KIVOICE. The whole section ground is fire and it answers the pointer. No
   badge any more: the fire is the mark, and a pill that says hot on top of a
   burning section is saying it twice. */
.kv{position:relative;overflow:hidden;background:var(--white);padding-block:clamp(84px,11vw,150px)}

/* The canvas is the section floor. It sits under everything and never takes a
   click, so the buttons and the price panel behave exactly as before. */
.kvfx{
  position:absolute;inset:0;width:100%;height:100%;
  pointer-events:none;z-index:0;display:block;
}
.kv .wrap{position:relative;z-index:1}

/* ---- the two faces ---- */
.kvflip{position:relative}
/* Without script both faces simply stack and the anchor jumps to the prices,
   which is why the height juggling only starts once .js is on the document. */
.js .kvflip{transition:height .52s cubic-bezier(.4,0,.2,1)}
.js .kvflip.no-anim{transition:none}
.kvface{width:100%}
/* Not visibility:hidden. That would take the whole price list out of the page's
   rendered text, so the prices would stop existing for anything that reads the
   page rather than clicking through it. Transparent plus inert keeps the text
   in the document while keeping the hidden face off the keyboard path. */
.js .kvface{
  position:absolute;top:0;inset-inline:0;
  /* Deliberately not 100%. Both edges are already pinned, so a width as well
     over constrains the box, and the rule an RTL browser uses to resolve that
     is to drop the left edge. The price face has a negative margin on both
     sides to let its plate bleed past the column; with the left dropped it bled
     right and ate the same distance off the left instead, which put the whole
     panel out of centre by clamp(16px,2vw,26px) at every screen size. Letting
     the two pinned edges settle the width is what actually centres it. */
  width:auto;
  opacity:0;pointer-events:none;
  transition:opacity .3s ease,transform .44s cubic-bezier(.34,.9,.36,1);
}
.js .kvflip.no-inert .kvface{visibility:hidden;transition:opacity .3s ease,transform .44s cubic-bezier(.34,.9,.36,1),visibility 0s linear .44s}
.js .kvflip.no-inert .kvface.is-on{visibility:visible}
.js .kvface:not(.is-on){transform:translateY(18px)}
.js .kvflip.is-back .kvface:not(.is-on){transform:translateY(-18px)}
.js .kvface.is-on{opacity:1;pointer-events:auto;transform:none;transition-delay:.13s,.13s,0s}

/* ---- face one: the pitch ---- */
.kvface--main{text-align:center}
.kv__type{max-width:62ch;margin-inline:auto;position:relative}
.kv__type .sec-logo{height:clamp(38px,4vw,54px);width:auto;margin:0 auto 26px}
.kv h2{margin-bottom:22px}
.kv .lede{margin:0 auto 34px;text-wrap:pretty}
.kv .acts{justify-content:center}
/* The type sits on a soft clearing rather than straight on the fire. It is the
   difference between a section with fire behind it and a section you cannot
   read, and it costs nothing visually because the plate is white on white. */
.kv__type::before{
  content:"";position:absolute;inset:-8% -12%;z-index:-1;
  background:radial-gradient(58% 62% at 50% 45%,rgba(255,255,255,.94) 0,rgba(255,255,255,.80) 55%,rgba(255,255,255,0) 100%);
  pointer-events:none;
}

/* ---- face two: the prices ---- */
.kvface--price{
  /* the price list needs a real ground under it, not a fire */
  background:rgba(255,255,255,.92);border-radius:var(--r);
  padding:clamp(16px,2vw,26px);margin-inline:calc(clamp(16px,2vw,26px) * -1);
}
.kvback{
  display:none;align-items:center;gap:8px;
  min-height:42px;padding:0 17px 0 14px;border-radius:var(--r);
  border:0;background:none;cursor:pointer;font-family:inherit;
  font-size:14.5px;font-weight:600;color:var(--ink);
  box-shadow:inset 0 0 0 1px var(--ink-22);transition:color .2s ease;
  margin-bottom:clamp(22px,2.8vw,32px);
}
.js .kvback{display:inline-flex}
.kvback:hover{color:var(--accent-dk)}
/* the arrow points the way the reader travels, which in Hebrew is rightward */
.kvback svg{width:16px;height:16px;flex:none;stroke-width:2}
/* Focus moves to this heading when the prices open, so that anyone being read
   the page is told where they have landed. The ring that comes with it is only
   any use to someone who arrived on a key press: a tap already showed them.
   :focus-visible was doing the deciding and gets it wrong here, because Chrome
   counts this programmatic focus as keyboard focus once anything on the page
   has been keyed, and on a phone from the first tap. So the modality is
   recorded on the way in rather than guessed at.
   The declaration is important and deliberately more specific than it looks:
   accessibility.js injects *:focus-visible with an important outline of its
   own, and an ordinary rule here never reached the element at all. Where the
   key was real this stands aside and lets that ring through, which is the one
   the accessibility layer exists to guarantee. */
.kvflip:not(.by-key) .kvface--price h2:focus{outline:none !important}

/* A pointer is not a given. On touch and for anyone who never moves a mouse the
   field runs on its own, so the section is never a dead rectangle waiting for
   an input that will not come. */
@media (hover:none){
  .kv{padding-block:clamp(74px,10vw,126px)}
}

/* ====================== KV END ====================== */
/* ===================== FIRE START =====================
   Everything the hot button's flames need lives here and nowhere else, which
   is what lets one variant be swapped for another without touching the page.
   It sits last in the sheet on purpose: the clearance it needs above the
   button has to win over the hero's own spacing. */

/* ---- the hot product ---- */
/* The fire stays in the brand teal and stays translucent. Orange flames on a
   solid fill would read as a sale banner, which is the one thing this page is
   not allowed to look like. The hairline is 1px against the primary button's
   1.5px, so the flames carry the attention and the order of the two CTAs is
   still readable without them. */
.btn--hot{position:relative;box-shadow:inset 0 0 0 1px var(--accent);color:var(--ink)}
.btn--hot:hover{color:var(--accent-dk)}

/* Physical left/right on purpose: the fire is symmetrical and rises the same
   way whichever direction the label runs, so a logical property would only
   flip it for no reason. */
/* The fire gets its own width rather than the button's. On a phone the button
   goes full width, and five tongues spread across 350px read as five smudges
   instead of one fire. A fixed band keeps the flames the same distance apart
   whatever the button does. */
.hot__fire{
  position:absolute;left:50%;transform:translateX(-50%);
  width:min(100%,168px);bottom:calc(100% - 10px);
  height:44px;pointer-events:none;
}
/* the glow is what stops the tongues from looking like five cut out shapes */
.hot__glow{
  position:absolute;left:5%;right:5%;bottom:-9px;height:32px;border-radius:50%;
  background:radial-gradient(closest-side,rgba(0,173,181,.34),rgba(0,173,181,0));
  filter:blur(6px);animation:hotBreathe 2.8s ease-in-out infinite;
}
.fl{
  position:absolute;bottom:0;display:block;transform-origin:50% 100%;
  opacity:var(--o);
  animation:hotLick var(--d) ease-in-out infinite,
            hotFlick calc(var(--d) * .61) ease-in-out infinite;
}
.fl svg{display:block;width:100%;height:100%}
.fl path{fill:var(--accent)}
/* Sizes, blur and timing are all different per tongue. Anything shared makes
   the row pulse in unison, and fire never does that. */
.fl1{left:7%; width:13px;height:26px;--o:.30;--d:2.3s;filter:blur(1.5px);animation-delay:-.2s,-1.1s}
.fl2{left:23%;width:18px;height:37px;--o:.42;--d:1.9s;filter:blur(1.1px);animation-delay:-.9s,-.3s}
.fl3{left:44%;width:22px;height:44px;--o:.50;--d:2.6s;filter:blur(.9px); animation-delay:-1.4s,-2s}
.fl4{left:65%;width:17px;height:34px;--o:.38;--d:2.1s;filter:blur(1.2px);animation-delay:-.5s,-1.6s}
.fl5{left:83%;width:12px;height:24px;--o:.26;--d:2.4s;filter:blur(1.7px);animation-delay:-1.8s,-.7s}
.em{
  position:absolute;bottom:7px;width:3px;height:3px;border-radius:50%;
  background:var(--accent);opacity:0;animation:hotEmber 3.4s ease-out infinite;
}
.em1{left:31%;animation-delay:-.4s}
.em2{left:53%;animation-duration:4.1s;animation-delay:-2.1s}
.em3{left:71%;animation-duration:3.7s;animation-delay:-3s}

@keyframes hotLick{
  0%,100%{transform:translateY(2px)  scaleY(.86) scaleX(1.04) skewX(0deg)}
  25%    {transform:translateY(-3px) scaleY(1.14) scaleX(.94) skewX(-3deg)}
  50%    {transform:translateY(0)    scaleY(.96) scaleX(1.02) skewX(2deg)}
  75%    {transform:translateY(-5px) scaleY(1.22) scaleX(.90) skewX(-1.5deg)}
}
@keyframes hotFlick{0%,100%{opacity:var(--o)} 50%{opacity:calc(var(--o) * .55)}}
@keyframes hotBreathe{0%,100%{opacity:.72;transform:scaleX(.96)} 50%{opacity:1;transform:scaleX(1.06)}}
@keyframes hotEmber{
  0%  {opacity:0;transform:translate(0,0) scale(1)}
  14% {opacity:.5}
  70% {opacity:.22}
  100%{opacity:0;transform:translate(-7px,-38px) scale(.4)}
}

@media (max-width:560px){
/* The buttons go full width here, so the row becomes a column and the fire
   would rise straight into the button above it. Shorter tongues, no embers,
   and real clearance above the hot button. */
.btn--hot{margin-top:32px}
.hot__fire{height:36px;width:min(100%,160px)}
.fl1{width:11px;height:21px}
.fl2{width:15px;height:29px}
.fl3{width:19px;height:36px}
.fl4{width:14px;height:27px}
.fl5{width:10px;height:19px}
.em{display:none}
}

@media (prefers-reduced-motion: reduce){
/* The flames stop moving but stay lit. A still tongue of fire still says hot,
   and hiding them would leave the label unexplained. The embers do go, since
   a frozen spark in mid air only reads as a stray dot. */
.fl,.hot__glow{animation:none !important}
.em{display:none !important}
}
/* ====================== FIRE END ====================== */
/* ---- the hero on a phone ---- */
/* Order on a phone is not the order on a desktop. The mark and the sentence
   introduce the company, the handset shows what it does, and only then is
   there anything to ask for. .hero__type gives up its box so its three parts
   can be ordered against the handset instead of being locked inside it. */
@media (max-width:900px){
  .hero__in{
    display:flex;flex-direction:column;align-items:center;text-align:center;
    gap:0;padding-block:clamp(30px,7vw,54px) clamp(34px,7vw,56px);
  }
  .hero__type{display:contents}
  .markslot{order:1;margin-bottom:clamp(16px,4vw,24px)}
  .hero .h-lead{order:2}
  .hero .lede{order:3;margin-inline:auto;margin-bottom:clamp(26px,6vw,36px)}
  .hero__fig{order:4}
  .hero .acts{order:5}
  .hero__mark{margin-inline:auto}
  .hero .h-lead .hl{display:inline}

  /* The handset keeps its full 308px layout and is drawn smaller. Narrowing it
     instead would be the obvious move and the wrong one: every bubble wraps
     onto more lines as it gets thinner, so the chat needs more height exactly
     as the device offers less. Measured, it stops fitting below 308. */
  .hero__fig{
    --ps:.80;
    position:relative;margin-inline:auto;
    width:calc(308px * var(--ps));height:calc(602px * var(--ps));
    justify-content:center;
  }
  .phone{
    position:absolute;top:0;inset-inline-start:0;
    width:308px;height:602px;margin:0;
    transform:scale(var(--ps));transform-origin:top right;
  }

  /* both buttons on one line, side by side, and no longer full width */
  .hero .acts{
    display:flex;flex-wrap:nowrap;justify-content:center;align-items:flex-start;
    gap:10px;
    /* the fire on the hot button rises about 34px, so this is the gap you see
       plus room for it rather than the gap you see minus it */
    margin-top:clamp(52px,12vw,76px);
  }
  .hero .acts .btn--lg{width:auto;flex:0 1 auto;padding:0 clamp(14px,4vw,24px)}
  /* stacked they needed clearance above; side by side the fire has the gap
     between the handset and the row to rise into */
  .hero .acts .btn--hot{margin-top:0}
}
@media (max-width:420px){ .hero__fig{--ps:.74} }
@media (max-width:345px){ .hero__fig{--ps:.66} }

/* ---- everything centres on a phone ---- */
/* On a wide screen a statement on one side and its proof on the other is a
   composition. On a phone everything is one column anyway, and text hard
   against the reading edge under a centred heading reads as a mistake rather
   than as a decision. So the whole column centres. */
@media (max-width:900px){
  .av2__in,.av2__say,.av2__list,
  .svc__in,.svc__head,.svc__head .lede,.svclist,
  .lead__in,.lead h2,.lead .lede{text-align:center}

  .av2__say{margin-inline:auto}
  .svclist{margin-inline:auto}
  .svc__head .lede,.lead .lede{margin-inline:auto}

  /* the icon and its text are a pair, so the pair centres rather than the text
     inside a box that stays put */
  .svcitem,.av2__item{justify-content:center}
  .svclist,.av2__list{width:fit-content;max-width:100%}


  /* The one exception. A form is scanned down its labels, and a centred label
     over a full width field gives the eye nothing to run along. The fields keep
     the reading edge; everything introducing them centres. */
  .fgrid,.f,.f label,.consent{text-align:start}
  .consent{justify-content:start}
  .formfoot{justify-content:center}
}

/* ---- the section headings on a phone ---- */
/* On a wide screen each of these sits beside its own list of advantages and
   shares the weight with it. On a phone it is alone at the top of a column and
   is the only thing announcing that a new section has started, so at 26px it
   read as a subheading of whatever came before. Sized here rather than in the
   shared scale because the same class introduces smaller things elsewhere. */
@media (max-width:900px){
  .svc__head h2{font-size:clamp(31px,8.2vw,40px);line-height:1.08}
}

/* ---- the footer on a phone ---- */
/* The same two columns as on a wide screen: the mark on the reading side, the
   contact details opposite it. They were stacking instead, which put the
   details back under the mark on the right. Nothing wraps, so the pair stay
   opposite each other all the way down; the mark gives up the height it needs
   to let that happen. */
@media (max-width:560px){
  .foot__top{
    flex-wrap:nowrap;align-items:flex-start;justify-content:space-between;
    gap:18px;
  }
  .foot__brand{flex:none}
  .foot__brand img{height:22px}
  .reach{flex:none}
}
@media (max-width:360px){
  .foot__brand img{height:20px}
  .reach a{font-size:14px}
  .foot__top{gap:12px}
}

/* ---- the two floating buttons on a phone ---- */
/* They were pinned to the middle of the right edge, which on a phone is the
   middle of whatever is being read, and is also the edge the price deck puts
   its previous button on. The bottom left corner is the one part of an RTL
   page nothing else claims: the footer links sit on the right, the form runs
   down the middle. Side by side rather than stacked, so the pair covers one
   button of height instead of two.
   The accessibility launcher styles itself from a stylesheet it injects into
   the head, which lands after this one, so these have to out specify it rather
   than merely follow it. Its resting state carries a transform, and every rule
   that moves it has to clear that or it goes back to the middle on hover. */
@media (max-width:620px){
  :root{--fab:46px;--fab-edge:12px}
  .wafab{
    top:auto;bottom:var(--fab-edge);
    right:auto;left:calc(var(--fab-edge) + var(--fab) + 10px);
    transform:none;
  }
  .wafab:hover{transform:scale(1.06)}
  .wafab svg{width:24px;height:24px}
  body .a11y-btn{
    top:auto;bottom:var(--fab-edge);
    right:auto;left:var(--fab-edge);
    width:var(--fab);height:var(--fab);
    transform:none;
  }
  body .a11y-btn:hover{transform:scale(1.06)}
  body .a11y-btn svg{width:24px;height:24px}
}
@media (max-width:620px) and (prefers-reduced-motion:reduce){
  .wafab:hover,body .a11y-btn:hover{transform:none}
}

/* ---- touch ---- */
/* Last in the sheet, after every block including the KIVOICE one. Twice now an
   override sat before a rule it was meant to beat and did nothing at all, which
   is the quietest way for a fix to look applied and not be.
   The size follows the input device rather than the window: a small laptop
   keeps the compact spacing, a large tablet does not. */
@media (pointer:coarse){
  .reach a{min-height:44px}
  .consent{min-height:44px;padding-block:11px;margin-block:-11px}
  .btn--sm{min-height:44px}
  .kvback{min-height:44px}
  /* height alone is not enough: a short word is only 27px wide, and a target
     has to be reachable in both directions */
  .foot__strip a{
    justify-content:center;min-height:44px;min-width:44px;padding-inline:10px;
  }
  .foot__strip .wrap{gap:0 6px;margin-inline-start:-10px}
}

/* 01 - the handset plays the film. A 9:16 film in a 9:16 screen crops nothing,
   and the device is already the centre of the hero, so the film arrives inside
   something the eye is already looking at. */
.phonevid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:3;background:var(--ink)}
/* The chat is only stood down once the film has proved it can actually paint.
   Until then it stays exactly as it is, so a browser that cannot decode the
   file shows the conversation it always showed rather than a black rectangle.
   The swap is driven by a class the script adds, never by the stylesheet alone.
   Excluding by name missed things last time: the chat header and its status
   line kept rendering behind an opaque film, and with the screen no longer
   aria-hidden a screen reader began announcing a conversation that was not
   there. Whatever is not the film or its button is not on this screen. */
.screen > .phonevid,.screen > .vsound{display:none}
.screen.has-film > .phonevid,.screen.has-film > .vsound{display:block}
.screen.has-film > .vsound{display:grid}
.screen.has-film > *:not(.phonevid):not(.vsound){display:none}

/* In the bottom left corner of the screen itself, over the film.
   The handset is drawn at a scale on a phone (0.80 down to 0.66), and every
   child scales with it, so a 46px button would arrive as 30px at the smallest
   size, under the floor for a touch target. The counter scale undoes exactly
   the parent's, which is why it is written from the same variable rather than
   as a number: the two can never drift apart. Above 900 the variable does not
   exist and the fallback of 1 leaves the button alone. */
.vsound{
  position:absolute;z-index:6;
  /* physical left and bottom: this is a corner of a picture, not a reading edge */
  left:10px;bottom:10px;
  width:32px;height:32px;border-radius:50%;border:0;cursor:pointer;padding:0;
  display:grid;place-items:center;
  transform:scale(calc(1 / var(--ps, 1)));
  transform-origin:bottom left;
  background:rgba(34,40,49,.55);color:#fff;
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.35);
  transition:background .2s ease,box-shadow .2s ease;
}
/* The circle is 32px because a bigger one sat on the film. What a finger has to
   hit is not the circle: this reaches out to 44px on every side, so the target
   still clears the floor while the thing you see stays small. */
.vsound::before{content:"";position:absolute;inset:-6px;border-radius:50%}
.vsound:hover{background:rgba(34,40,49,.72)}
.vsound.is-on{background:var(--accent);box-shadow:inset 0 0 0 1px rgba(255,255,255,.5)}
.vsound svg{width:15px;height:15px;position:relative;z-index:1}
.vsound .vsound__on{display:none}
.vsound.is-on .vsound__off{display:none}
.vsound.is-on .vsound__on{display:block}

/* While the film is silent and waiting for permission, the button breathes once
   in a while. Sound cannot start on its own, so the one thing that helps is
   telling the visitor the sound is there at all. It stops the moment sound is
   on, and never runs for anyone who asked for less motion. */
.vsound__ring{
  position:absolute;inset:0;border-radius:50%;pointer-events:none;
  box-shadow:0 0 0 0 rgba(0,173,181,.55);
}
.vsound.is-waiting .vsound__ring{animation:vpulse 2.6s ease-out infinite}
@keyframes vpulse{
  0%{box-shadow:0 0 0 0 rgba(0,173,181,.55)}
  60%{box-shadow:0 0 0 13px rgba(0,173,181,0)}
  100%{box-shadow:0 0 0 0 rgba(0,173,181,0)}
}
@media (prefers-reduced-motion: reduce){ .vsound.is-waiting .vsound__ring{animation:none} }


/* ===================== FAQ =====================
   Lifted from the KIVOICE landing page. It was written there and it worked
   there, but that page is noindex, so the only place on this site that defined
   the product or answered a question was invisible to every search engine and
   every AI assistant. It belongs on the page that is allowed to be found. */
/* ---- the questions ---- */
/* Hairlines rather than boxes, the same device the price list and the documents
   use, so an answer opening does not make a card appear out of nowhere. */
.faq__in{max-width:800px;margin-inline:auto}
.faq h2{text-align:center;margin-bottom:clamp(22px,3vw,34px)}
.qa{border-top:1px solid var(--hair-p)}
.qa:last-of-type{border-bottom:1px solid var(--hair-p)}
.qa summary{
  list-style:none;cursor:pointer;
  display:grid;grid-template-columns:minmax(0,1fr) 18px;gap:16px;align-items:center;
  padding:clamp(15px,1.9vw,19px) 0;min-height:44px;
  font-size:clamp(16px,1.5vw,17.5px);font-weight:600;line-height:1.4;
  transition:color .2s ease;
}
.qa summary::-webkit-details-marker{display:none}
.qa summary::marker{content:""}
.qa summary:hover{color:var(--accent-dk)}
/* a plus that becomes a minus. Physical left/right: the sign is symmetrical and
   the column it sits in is already placed by the grid. */
.sign{position:relative;width:16px;height:16px;justify-self:end;flex:none}
.sign::before,.sign::after{
  content:"";position:absolute;background:var(--accent);border-radius:1px;
  transition:transform .26s cubic-bezier(.34,.9,.36,1);
}
.sign::before{left:0;right:0;top:7px;height:2px}
.sign::after{top:0;bottom:0;left:7px;width:2px}
.qa[open] .sign::after{transform:scaleY(0)}
.qa__a{padding-bottom:clamp(15px,1.9vw,21px)}
.qa__a p{color:var(--ink-70);line-height:1.72;margin:0 0 10px;max-width:64ch}
.qa__a p:last-child{margin-bottom:0}

/* The article titles are links on one line at tablet width, which made them a
   22px tall tap target. The padding grows the target to 44px and the paragraph
   below is pushed down by the same amount, so nothing moves into anything. */

/* ===================== FOOTER PRODUCT COLUMN =====================
   A third column joined the top of the footer. Below 560px the two column
   version is deliberately pinned with flex-wrap:nowrap so the logo and the
   contact details stay on one line; with three columns that same rule squeezes
   all of them. Wrapping is allowed again, and only when the column is present,
   so the two column footer on the landing pages is untouched. */
.foot__nav h4{white-space:nowrap}
/* Three columns under justify-content:space-between get pushed to the far
   corners, which left the product list marooned in the middle of the footer
   with a wide gap on either side. An auto margin on its start edge absorbs the
   free space instead, so the brand keeps the far edge and the product list and
   the contact details sit together as one block at the other. */
.foot__nav{margin-inline-start:auto}
@media (max-width:560px){
  .foot__nav{margin-inline-start:0}
}
@media (max-width:560px){
  .foot__top:has(.foot__nav){flex-wrap:wrap;gap:26px 20px}
}
/* :has is not everywhere yet. Without it the three columns simply keep the
   nowrap rule, which is tight but not broken, so this is progressive rather
   than load bearing. */


/* ==================================================================
   The document pages add these. blog.html carries the superset, so this
   block is taken from it whole and covers the terms, the privacy policy,
   the accessibility statement, the blog index and the three articles.
   ================================================================== */
/* ============================ DOCUMENT PAGE ============================ */
/* A legal document is read, not scanned, so the craft here is typographic and
   nothing else. Same tokens, same hairline language, same bar and footer as the
   rest of the site; what changes is that the page is one column of text with a
   contents rail beside it. */

.doc{padding-block:clamp(40px,5vw,72px) clamp(60px,8vw,110px)}
.doc__in{
  display:grid;grid-template-columns:minmax(0,240px) minmax(0,1fr);
  gap:clamp(30px,5vw,76px);align-items:start;
}

/* ---- the head of the document ---- */
.doc__head{
  grid-column:1 / -1;
  padding-bottom:clamp(26px,3.4vw,40px);
  border-bottom:1px solid var(--hair);
  margin-bottom:clamp(30px,4vw,52px);
}
.doc__head h1{
  font-weight:300;line-height:1.06;letter-spacing:-.018em;
  font-size:clamp(34px,5.4vw,62px);
}
.doc__head h1 b{font-weight:600;color:var(--accent-dk)}
.doc__meta{
  display:flex;flex-wrap:wrap;gap:6px 22px;
  margin-top:clamp(16px,2vw,22px);font-size:13.5px;color:var(--ink-55);
}
.doc__meta b{color:var(--ink);font-weight:600}

/* ---- the contents rail ---- */
.toc{position:sticky;top:calc(var(--bar-h) + 22px)}
.toc h2{
  font-size:12.5px;font-weight:600;letter-spacing:.09em;color:var(--ink-42);
  margin:0 0 14px;
}
.toc ol{list-style:none;margin:0;padding:0;counter-reset:toc}
.toc li{counter-increment:toc}
.toc a{
  display:grid;grid-template-columns:1.7em minmax(0,1fr);
  gap:2px;padding-block:7px;font-size:14.5px;line-height:1.4;
  color:var(--ink-70);transition:color .18s ease;
}
/* No direction override here. Left to right lays the digit down first and the
   full stop after it, which on a right to left page puts the stop on the right
   and the reader meets it before the number. Inheriting the page direction is
   what produces 1. rather than .1 */
.toc a::before{content:counter(toc) ".";color:var(--ink-42);font-variant-numeric:tabular-nums}
.toc a:hover{color:var(--accent-dk)}
.toc a:hover::before{color:var(--accent-dk)}

/* ---- the body ---- */
.doc__body{min-width:0;max-width:74ch}
.doc__body h2{
  font-size:clamp(21px,2.3vw,28px);font-weight:600;line-height:1.25;
  letter-spacing:-.01em;margin:clamp(38px,4.6vw,58px) 0 14px;
  /* the sticky bar must not sit on whatever a contents link lands on */
  scroll-margin-top:calc(var(--bar-h) + 18px);
}
.doc__body h2:first-child{margin-top:0}
.doc__body h3{
  font-size:clamp(17px,1.7vw,19.5px);font-weight:600;line-height:1.35;
  margin:clamp(24px,2.8vw,34px) 0 10px;
  scroll-margin-top:calc(var(--bar-h) + 18px);
}
.doc__body p{margin:0 0 14px;color:var(--ink-70);line-height:1.75;font-size:16.5px}
.doc__body strong{color:var(--ink);font-weight:600}
.doc__body ul,.doc__body ol{margin:0 0 16px;padding-inline-start:0;list-style:none}
.doc__body li{
  position:relative;padding-inline-start:20px;margin-bottom:9px;
  color:var(--ink-70);line-height:1.7;font-size:16.5px;
}
/* a hairline tick rather than a bullet, so the list belongs to the same
   drawing language as the rest of the site */
.doc__body ul > li::before{
  content:"";position:absolute;inset-inline-start:1px;top:.72em;
  width:7px;height:7px;border-radius:50%;
  box-shadow:inset 0 0 0 1.5px var(--accent);
}
.doc__body ol{counter-reset:item}
.doc__body ol > li{counter-increment:item}
.doc__body ol > li::before{
  content:counter(item) ".";position:absolute;inset-inline-start:0;top:0;
  color:var(--ink-42);font-variant-numeric:tabular-nums;font-size:14.5px;
}
.doc__body a{color:var(--accent-dk);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.doc__body a:hover{color:var(--ink)}

/* a boxed aside for the things a reader must not miss */
.callout{
  margin:clamp(22px,2.6vw,30px) 0;padding:clamp(16px,2vw,22px);
  border-radius:var(--r);background:var(--band);
  box-shadow:inset 0 0 0 1px var(--hair);
}
.callout p:last-child{margin-bottom:0}
.callout p{color:var(--ink-70)}

.contact-box{
  margin-top:clamp(22px,2.6vw,30px);padding:clamp(16px,2vw,22px);
  border-radius:var(--r);box-shadow:inset 0 0 0 1px var(--hair);
}
.contact-box p{margin-bottom:8px}
.contact-box p:last-child{margin-bottom:0}
.contact-box .ltr{direction:ltr;unicode-bidi:isolate}

/* the way back, at the end of a long read */
/* Scoped through .doc__body on purpose. Written as .doc__back alone it loses to
   .doc__body a, which is one class plus one element and therefore stronger, and
   the underline stayed on. */
.doc__body .doc__back{
  text-decoration:none;
  display:inline-flex;align-items:center;gap:8px;
  margin-top:clamp(36px,4.6vw,56px);min-height:46px;padding:0 20px;
  border-radius:var(--r);font-size:15px;font-weight:600;color:var(--ink);
  box-shadow:inset 0 0 0 1.5px var(--accent);transition:color .2s ease;
}
.doc__body .doc__back:hover{color:var(--accent-dk);text-decoration:none}
.doc__back svg{width:16px;height:16px;flex:none;stroke-width:2}

@media (max-width:900px){
  .doc__in{grid-template-columns:1fr;gap:0}
  /* on a phone a sticky rail eats the screen, so the contents becomes a block
     the reader can pass by */
  .toc{
    position:static;padding:clamp(16px,2.4vw,20px);border-radius:var(--r);
    background:var(--band);margin-bottom:clamp(30px,4vw,42px);
  }
  .toc a{padding-block:9px}
  /* not none. Without a cap the paragraphs run past a hundred characters on a
     tablet, which is where reading stops being comfortable. */
  .doc__body{max-width:70ch}
}

/* on a document page the mark in the bar is a real link home */
.brand{transition:opacity .18s ease}
.brand:hover{opacity:.72}
/* ---- touch ---- */
@media (pointer:coarse){
  /* a line in the contents is a target, not only a line */
  .toc a{padding-block:11px;min-height:44px}
  .doc__body .doc__back{min-height:48px}
}
/* ============================ BOTTOM BAR ============================ */
/* Idea 04: the light grey from the palette carries the mark and the contact
   details, and a thin strip of the dark grey underneath carries the documents.
   Two greys from the same palette doing two different jobs, and the strip is
   what gives the page a definite end instead of it simply running out. */
.foot{background:var(--paper);color:var(--ink)}
.foot__top{
  display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;
  gap:28px 60px;padding-block:clamp(38px,4.6vw,54px);
}
.foot__brand img{height:27px;width:auto}

.reach{display:flex;flex-direction:column;gap:11px;align-items:flex-start}
.reach h4{margin:0;font-size:12.5px;font-weight:600;color:var(--ink-42);letter-spacing:.06em}
/* The row stays right to left so the icon sits on the reading side. Only the
   value inside is forced left to right, which is what an address and a number
   need, and doing it on the inner span rather than the whole link is what keeps
   the icon from flipping to the far side with it. */
.reach a{
  display:inline-flex;align-items:center;gap:9px;min-height:30px;
  font-size:15px;color:var(--ink);transition:color .18s ease;
}

.reach a:hover{color:var(--accent-dk)}
.reach svg{width:16px;height:16px;flex:none;color:var(--ink-42);transition:color .18s ease}
.reach a:hover svg{color:var(--accent-dk)}
.reach .ltr{direction:ltr;unicode-bidi:isolate}

/* the strip */
.foot__strip{background:var(--ink-2)}
.foot__strip .wrap{
  display:flex;flex-wrap:wrap;align-items:center;
  gap:8px 22px;padding-block:15px;
}
/* white at 52 percent on this grey is 4.3:1. The brand teal would be 3.9 and
   would fail, so hover goes to white here rather than to the accent. */
.foot__strip a{
  display:inline-flex;align-items:center;min-height:26px;
  color:rgba(255,255,255,.52);font-size:13.5px;transition:color .18s ease;
}
.foot__strip a:hover{color:#fff}
/* The strip carries both documents on both of them, so it doubles as a way to
   cross between the two. The one you are already reading says so rather than
   looking like a link that does nothing when pressed. */
.foot__strip a[aria-current="page"]{color:rgba(255,255,255,.88);font-weight:600}


/* ============================ FLOATING WHATSAPP ============================ */
/* It stacks above the accessibility launcher, which positions itself fixed at
   the middle of the right edge. The two sizes and the gap live here as one set
   of variables so the relationship between the buttons is stated once instead
   of being a magic offset that breaks the next time either size changes. */
:root{--fab:58px;--fab-gap:14px;--fab-edge:24px}
.wafab{
  /* physical right, not inset-inline-end. The page is RTL, so the logical end
     is the left edge, and the accessibility launcher this stacks onto is
     anchored with a physical right of its own. */
  position:fixed;top:50%;right:var(--fab-edge);z-index:9997;
  /* centre to centre distance is one button plus the gap */
  transform:translateY(calc(-50% - var(--fab) - var(--fab-gap)));
  width:var(--fab);height:var(--fab);border-radius:50%;
  display:grid;place-items:center;
  background:var(--accent);color:#fff;
  box-shadow:0 10px 28px -8px rgba(0,173,181,.55);
  transition:background .2s ease,transform .2s ease,box-shadow .2s ease;
}
.wafab svg{width:29px;height:29px;fill:currentColor;display:block}
/* the transform has to carry the stacking offset or hover throws it off place */
.wafab:hover{
  background:var(--accent-dk);
  transform:translateY(calc(-50% - var(--fab) - var(--fab-gap))) scale(1.07);
  box-shadow:0 14px 34px -8px rgba(0,122,129,.6);
}
.wafab:focus-visible{outline:3px solid var(--white);outline-offset:3px}
@media (max-width:470px){
  :root{--fab:52px;--fab-gap:12px;--fab-edge:16px}
  .wafab svg{width:26px;height:26px}
}
@media (prefers-reduced-motion: reduce){
  .wafab:hover{transform:translateY(calc(-50% - var(--fab) - var(--fab-gap)))}
}

/* ---- the two floating buttons on a phone ---- */
/* The middle of the right edge is the middle of the column being read, and a
   document is nothing but a column being read. The bottom left corner is the
   one part of an RTL page nothing else claims. Side by side rather than
   stacked, so the pair covers one button of height instead of two.
   The accessibility launcher styles itself from a sheet it injects into the
   head, which lands after this one, so these have to out specify it rather
   than merely follow it. Its resting state carries a transform, and every rule
   that moves it has to clear that or it returns to the middle on hover. */
@media (max-width:620px){
  :root{--fab:46px;--fab-edge:12px}
  .wafab{
    top:auto;bottom:var(--fab-edge);
    right:auto;left:calc(var(--fab-edge) + var(--fab) + 10px);
    transform:none;
  }
  .wafab:hover{transform:scale(1.06)}
  .wafab svg{width:24px;height:24px}
  body .a11y-btn{
    top:auto;bottom:var(--fab-edge);
    right:auto;left:var(--fab-edge);
    width:var(--fab);height:var(--fab);
    transform:none;
  }
  body .a11y-btn:hover{transform:scale(1.06)}
  body .a11y-btn svg{width:24px;height:24px}
}
@media (max-width:620px) and (prefers-reduced-motion:reduce){
  .wafab:hover,body .a11y-btn:hover{transform:none}
}

/* ---- touch ---- */
/* Last in the sheet, after every block including the KIVOICE one. Twice now an
   override sat before a rule it was meant to beat and did nothing at all, which
   is the quietest way for a fix to look applied and not be.
   The size follows the input device rather than the window: a small laptop
   keeps the compact spacing, a large tablet does not. */
@media (pointer:coarse){
  .reach a{min-height:44px}
  .consent{min-height:44px;padding-block:11px;margin-block:-11px}
  .btn--sm{min-height:44px}
  .kvback{min-height:44px}
  /* height alone is not enough: a short word is only 27px wide, and a target
     has to be reachable in both directions */
  .foot__strip a{
    justify-content:center;min-height:44px;min-width:44px;padding-inline:10px;
  }
  .foot__strip .wrap{gap:0 6px;margin-inline-start:-10px}
}
@media (max-width:900px){
  :root{--bar-h:64px}
}


/* ============================ BLOG CLUSTER ============================
   Three things a legal document does not have: a list of cards, a trail above
   the title, and a picture at the top of the read. Everything else on these
   pages is the document sheet above, unchanged. */

/* The index has no contents rail. Without this the single child lands in the
   240px column the rail would have used and the page renders as a stripe with
   half the screen empty beside it, which is a failure a capped
   list hits whenever it sits inside a full width wrap. */
.doc__in--solo{grid-template-columns:minmax(0,1fr)}
.doc__body--wide{max-width:none}

.doc__head .lede{
  font-size:clamp(16.5px,1.35vw,19px);line-height:1.62;color:var(--ink-70);
  max-width:56ch;margin-top:clamp(16px,2vw,22px);
}

/* An article headline is nine words where a contract headline is one, so the
   display step that suits "תקנון." is far too loud here. Weight stays 300. */
.doc--article .doc__head h1{
  font-size:clamp(30px,4.2vw,46px);line-height:1.1;letter-spacing:-.015em;
}

/* The rail numbers its entries, which is right for a contract whose sections
   are numbered on the page and wrong for an article whose are not. */
.doc--article .toc a{grid-template-columns:minmax(0,1fr)}
.doc--article .toc a::before{content:none}

/* ---- the trail above the title ---- */
/* "בית" is two characters, which is an 18px wide target. Height alone does not
   fix that: the minimum is a box, not a line. So each link is padded in both
   directions to 44px rather than being grown vertically and left thin.
   No negative block margin here. The first version used one to keep the row
   visually short, and on a narrow screen the taller boxes then overlapped the
   separators beside them. The row is simply allowed to be 44px tall, and the
   space is taken back out of the margin below it. */
.crumb{
  display:flex;flex-wrap:wrap;align-items:center;gap:2px;
  margin:0 0 clamp(8px,1.2vw,14px);margin-inline-start:-8px;
  font-size:13.5px;color:var(--ink-42);
}
.crumb a,.crumb > span{
  display:inline-flex;align-items:center;justify-content:center;min-height:44px;
}
.crumb a{min-width:44px;padding-inline:8px;color:var(--ink-55);transition:color .18s ease}
.crumb > span{padding-inline:3px}
.crumb a:hover{color:var(--accent-dk)}
.crumb span[aria-hidden]{color:var(--ink-22)}

/* ---- the picture at the top of the read ---- */
/* The ratio is declared rather than a fixed height: these files are 1600x900
   and cropping them to a band throws away the illustration.
   The hairline is an outline pulled inward, not the site's usual inset shadow:
   an inset shadow paints behind an opaque bitmap and is simply not there. */
.doc__hero{
  width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;
  border-radius:var(--r);outline:1px solid var(--hair);outline-offset:-1px;
  margin:0 0 clamp(22px,3vw,34px);
}

/* ---- the ask at the end of the read ---- */
/* .doc__body a is one class plus one element, so it beats .btn and would put
   an underline back on the button. The override is scoped to win. */
.doc__cta{
  margin-top:clamp(30px,3.6vw,44px);padding:clamp(16px,2vw,22px);
  border-radius:var(--r);box-shadow:inset 0 0 0 1px var(--hair);
}
.doc__cta p{margin:0 0 14px;color:var(--ink);font-size:16.5px;font-weight:600}
.doc__body .doc__cta .btn{text-decoration:none;color:var(--ink)}
.doc__body .doc__cta .btn:hover{color:var(--accent-dk);text-decoration:none}

/* ---- the index list ---- */
/* A list of three articles: picture, then the title as the link, then the
   excerpt. The underline on the title is the affordance, so the card itself
   does not need a hover lift or a shadow to say that it is clickable. */
.artlist{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(26px,3vw,44px);margin:clamp(24px,2.6vw,32px) 0 0;
  padding:0;list-style:none;max-width:none;
}
/* The card list is a <ul> inside .doc__body, so it inherits the document
   bullet: .doc__body ul > li::before draws a teal ring at the start of every
   item, which landed beside each picture. A card is not a bulleted point. */
.doc__body .artlist > li{padding-inline-start:0}
.doc__body .artlist > li::before{content:none}
.artitem{display:block;text-align:start;min-width:0}
.artitem img{
  width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;
  border-radius:var(--r);outline:1px solid var(--hair);outline-offset:-1px;
  margin-bottom:clamp(14px,1.6vw,20px);
}
/* the doc base gives every heading a negative tracking that this size does not
   want, so it is reset rather than inherited */
.artitem h2{
  font-size:clamp(17px,1.7vw,21px);font-weight:600;line-height:1.3;
  letter-spacing:normal;margin:0;
}
.artitem h2 a{
  display:inline-block;padding-block:11px;margin-block:-11px;
  color:inherit;text-decoration:underline;text-decoration-thickness:1px;
  text-underline-offset:5px;text-decoration-color:rgba(0,173,181,.5);
  transition:color .18s ease,text-decoration-color .18s ease;
}
.artitem h2 a:hover,.artitem h2 a:focus-visible{
  color:var(--accent-dk);text-decoration-color:var(--accent-dk);
}
.artitem p{color:var(--ink-55);font-size:15.5px;line-height:1.6;margin:18px 0 0}
/* the separator is the gap, not a glyph, which is how .doc__meta does it */
.artitem__meta{
  display:flex;flex-wrap:wrap;gap:4px 16px;
  margin-top:10px;font-size:13px;color:var(--ink-42);
}

@media (max-width:980px){
  .artlist{grid-template-columns:minmax(0,1fr);gap:clamp(30px,3.8vw,46px)}
  .artitem{text-align:center}
  .artitem__meta{justify-content:center}
}