/* MISHMERET: a payslip, read in red pen. Paper and ink everywhere; red only where the pen
   touches; WhatsApp green only on WhatsApp. Base CSS is the finished still: every pen mark drawn,
   every note shown. Script layers the scroll review on top, and all motion sits in the
   no-preference block at the end. */

@font-face{font-family:'Frank Ruhl Libre';src:url('assets/frank-ruhl-libre.woff') format('woff');font-weight:300 900;font-style:normal;font-display:swap}
@font-face{font-family:'Miriam Libre';src:url('assets/miriam-libre.woff') format('woff');font-weight:400 700;font-style:normal;font-display:swap}
/* Miriam's geometric shekel reads as two letters at small sizes; the sign comes from Frank Ruhl. */
@font-face{font-family:'Miriam Libre';src:url('assets/frank-ruhl-libre.woff') format('woff');font-weight:400 700;font-style:normal;font-display:swap;unicode-range:U+20AA}

:root{
  --paper:#f3f1eb;
  --sheet:#fffefa;
  --ink:#1b1c1e;
  --ink-2:#55575d;
  --stamp-ink:#5f6878;
  --hair:#e3e0d8;
  --rule:#c9c6bd;
  --band:#efede6;
  --pen:#c0141c;
  --wa:#12833f;
  --wa-press:#0b5b2c;
  --ease-out:cubic-bezier(0.23,1,0.32,1);
  --tap:44px;
  --gutter:clamp(16px,4vw,48px);
  --main:40rem;
  --rail:15.5rem;
  --gap:3rem;
  --sp:clamp(14px,3.4vw,34px);
  --slip-fs:clamp(13.5px,12.4px + .4vw,15px);
  --serif:'Frank Ruhl Libre','David','Times New Roman',serif;
  --sans:'Miriam Libre','Arial Hebrew',Arial,sans-serif;
  --paper-shadow:0 0 0 1px rgba(27,28,30,.07),0 1px 1px rgba(27,28,30,.05),0 22px 44px -24px rgba(27,28,30,.34);
  color-scheme:light;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scrollbar-color:#9a9da3 var(--paper);scroll-padding-top:16px}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--serif);font-size:18px;line-height:1.6;font-variant-numeric:lining-nums;-webkit-font-smoothing:antialiased}
h1,h2,h3,p,dl,dd,figure{margin:0}
img,svg{display:block}
a{color:inherit;text-underline-offset:.22em;text-decoration-thickness:1px}
button,input{font:inherit;color:inherit}
button{cursor:pointer;-webkit-tap-highlight-color:transparent}
::selection{background:var(--ink);color:var(--sheet)}
input{caret-color:var(--pen)}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
[hidden]{display:none!important}
.sprite{position:absolute;width:0;height:0;overflow:hidden}

.skip{position:fixed;z-index:50;inset-block-start:8px;inset-inline-start:8px;padding:10px 16px;background:var(--ink);color:var(--paper);font-family:var(--sans);font-weight:700;text-decoration:none;transform:translateY(-200%)}
.skip:focus{transform:none}

/* One measure for the whole page: a main column, and on wide screens a margin rail beside it
   where the pen writes. */
.frame{box-sizing:content-box;max-width:calc(var(--main) + var(--gap) + var(--rail));margin-inline:auto;padding-inline:var(--gutter)}

/* Masthead. */
.masthead{position:relative;z-index:20;display:flex;align-items:center;gap:clamp(16px,3vw,40px);padding:10px var(--gutter);border-bottom:1px solid var(--rule);background:var(--paper)}
.brand{display:flex;flex-direction:column;justify-content:center;min-height:var(--tap);margin-inline-end:auto;text-decoration:none}
.brand-name{font-family:var(--serif);font-weight:900;font-size:27px;line-height:1}
.brand-line{font-family:var(--sans);font-size:14px;line-height:1.3;color:var(--ink-2)}
.nav{display:flex;align-items:center;gap:clamp(12px,2vw,28px)}
.nav a{display:flex;align-items:center;min-height:var(--tap);font-family:var(--sans);font-size:16px;text-decoration:none}
.tools{display:flex;align-items:center;gap:8px}
.lang{min-height:var(--tap);min-width:var(--tap);padding:0 12px;border:1.5px solid var(--ink);background:transparent;font-family:var(--sans);font-weight:700;font-size:15px}
.menu{display:none;align-items:center;gap:10px;min-height:var(--tap);min-width:var(--tap);padding:0 12px;border:1.5px solid var(--ink);background:transparent;font-family:var(--sans);font-weight:700;font-size:15px}
.lang:active,.menu:active{background:var(--ink);color:var(--paper)}
.menu-bars{position:relative;width:18px;height:10px;border-block:2px solid currentColor}

/* Opening: the thesis in the legal voice, and the contact controls before anything else. */
.opening{padding-block:clamp(28px,6vw,72px) clamp(36px,6vw,80px)}
h1{font-family:var(--serif);font-weight:700;font-size:clamp(2.6rem,1.5rem + 4.6vw,5.2rem);line-height:1.02;letter-spacing:-.005em}
html[lang="en"] h1{letter-spacing:-.02em;font-size:clamp(2.4rem,1.3rem + 4.4vw,4.9rem)}
.h1-a{display:block}
.h1-b{position:relative;display:inline-block;color:var(--pen)}
.h1-pen{position:absolute;inset-inline-start:-.04em;inset-block-end:-.1em;width:calc(100% + .08em);height:.16em;overflow:visible;fill:none;stroke:var(--pen);stroke-width:2.6;stroke-linecap:round}
.lead{max-width:30ch;margin-top:18px;font-size:clamp(18px,.5vw + 16px,21px);line-height:1.5;color:var(--ink-2)}
.actions{display:flex;flex-wrap:wrap;gap:10px}
.opening .actions{margin-top:22px}
.act{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:var(--tap);padding:12px 18px;border:1.5px solid var(--ink);border-radius:0;background:transparent;font-family:var(--sans);font-weight:700;font-size:17px;line-height:1.2;text-decoration:none;text-align:center}
.act:active{background:var(--ink);color:var(--paper)}
.act .ico{flex:none;width:22px;height:22px}
.act-wa{border-color:var(--wa);background:var(--wa);color:#fff}
.act-wa .ico{fill:#fff}
.act-wa:active{border-color:var(--wa-press);background:var(--wa-press);color:#fff}
.act-call .ico{color:inherit}
.act-mark{background:var(--sheet)}

/* The demo note: what a control does on a real site. */
.demo-note{position:relative;max-width:34rem;margin-top:14px;padding:14px 52px 14px 16px;border:1px solid var(--rule);background:var(--sheet);font-family:var(--sans);font-size:16px;line-height:1.5}
html[dir="rtl"] .demo-note{padding:14px 16px 14px 52px}
.note-preview{margin-top:10px;padding:10px 12px;background:var(--paper);border-inline-start:1px solid var(--wa);white-space:pre-line;color:var(--ink)}
.note-close{position:absolute;inset-block-start:2px;inset-inline-end:2px;width:var(--tap);height:var(--tap);border:0;background:transparent}
.note-close::before,.note-close::after{content:"";position:absolute;inset-block-start:50%;inset-inline-start:50%;width:16px;height:1.5px;margin:-.75px 0 0 -8px;background:var(--ink);transform:rotate(45deg)}
.note-close::after{transform:rotate(-45deg)}

/* ---- The payslip. A plain payroll printout: off-white stock, hairlines, grey header bands,
   tabular figures, punched holes along the top. */
.desk{padding-block:0 clamp(56px,8vw,112px)}
.slip{position:relative;padding:40px var(--sp) var(--sp);background:var(--sheet);box-shadow:var(--paper-shadow);font-family:var(--sans);font-size:var(--slip-fs);line-height:1.3;font-variant-numeric:tabular-nums lining-nums;color:var(--ink)}
.slip::before{content:"";position:absolute;inset-inline:var(--sp);inset-block-start:13px;height:6px;background:radial-gradient(circle,var(--paper) 0 2.1px,transparent 2.5px) 0 50%/13px 6px repeat-x}
.slip-stamp{position:absolute;inset-block-start:30px;inset-inline-end:var(--sp);padding:1px 9px;border:1.5px solid currentColor;border-radius:3px;color:var(--stamp-ink);font-weight:700;font-size:.9em;letter-spacing:.05em;transform:rotate(-4deg);opacity:.8}
.slip-head{padding-bottom:12px;border-bottom:1.5px solid var(--ink)}
.slip-title{padding-inline-end:6.5em;font-family:var(--sans);font-size:1.32em;font-weight:700;line-height:1.25}
.slip-month{font-weight:400;color:var(--ink-2)}
.slip-meta{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 18px;margin-top:12px}
.slip-meta div{display:grid;gap:1px;padding-bottom:5px;border-bottom:1px dotted var(--rule)}
.slip-meta dt{font-size:.84em;color:var(--ink-2)}
.slip-meta dd{font-weight:700}

.ledger{width:100%;border-collapse:collapse;margin-top:16px}
.ledger th,.ledger td{padding:.36em .45em;border-bottom:1px solid var(--hair);font-weight:400;text-align:end;white-space:nowrap}
.ledger tbody th,.ledger tfoot th{text-align:start}
.ledger thead th{padding-block:.42em;background:var(--band);border-bottom:1px solid var(--rule);font-size:.84em;font-weight:700;color:var(--ink-2)}
.ledger thead th:first-child{text-align:start;color:var(--ink)}
.ledger tfoot th,.ledger tfoot td{border-top:1px solid var(--ink);border-bottom:0;font-weight:700}
.slip-pair{display:grid;grid-template-columns:minmax(0,1fr);align-items:start}
.slip-net{display:flex;justify-content:space-between;align-items:baseline;gap:16px;margin-top:20px;padding:10px .45em 0;border-top:3px double var(--ink);font-size:1.22em;font-weight:700}
.slip-caption{max-width:36rem;margin-top:14px;font-family:var(--sans);font-size:15px;line-height:1.5;color:var(--ink-2)}
.slip-after{margin-top:clamp(36px,5vw,56px)}
.after-line{max-width:30ch;font-size:clamp(19px,.6vw + 16px,22px);line-height:1.45}
.after-a{display:block;font-weight:700}
.slip-after .actions{margin-top:16px}

/* The pen. Strokes carry pathLength="1" so the review can draw them by dash offset. */
.mk{position:relative;display:inline-block}
.pen{position:absolute;overflow:visible;pointer-events:none;fill:none;stroke:var(--pen);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.pen-loop{inset-block-start:-.5em;inset-inline-start:-.62em;width:calc(100% + 1.24em);height:calc(100% + 1em)}
.pen-two{inset-block-start:-.42em;inset-inline-start:-.7em;width:calc(100% + 1.4em);height:calc(4.16em + 1px)}
.pen-tick{inset-block-start:-.18em;inset-inline-start:calc(100% + .32em);width:1.15em;height:1.05em;stroke-width:2.3}
.pen-under{inset-block-start:calc(100% - .05em);inset-inline-start:-.25em;width:calc(100% + .5em);height:.62em;stroke-width:2.3}
.pen-row td{padding:.1em .45em .8em;border-bottom:1px solid var(--hair);white-space:normal;text-align:start}
.pen-note{display:flex;gap:.55em;max-width:34rem;font-family:var(--serif);font-size:16px;font-weight:500;line-height:1.45;color:var(--pen);font-variant-numeric:lining-nums}
.pen-num{flex:none;display:grid;place-items:center;width:22px;height:22px;margin-top:1px;border:1.5px solid currentColor;border-radius:50%;font-family:var(--sans);font-size:12px;font-weight:700;line-height:1}

/* ---- The severance line: a final-settlement slip the visitor fills in. */
.settle-sec{padding-block:0 clamp(56px,8vw,112px)}
.sec-head{margin-bottom:clamp(22px,3vw,32px)}
h2{font-family:var(--serif);font-weight:700;font-size:clamp(2rem,1.3rem + 2.6vw,3.2rem);line-height:1.08;max-width:20ch}
h2 span{display:block}
.slip h2.slip-title{max-width:none;line-height:1.25}
.slip h2 span{display:inline}
.sec-lead{max-width:44ch;margin-top:12px;font-size:clamp(18px,.4vw + 16px,20px);color:var(--ink-2)}
.sheet{background:var(--sheet);box-shadow:var(--paper-shadow)}
.settle{padding:22px var(--sp) var(--sp);font-family:var(--sans);font-variant-numeric:tabular-nums lining-nums}
.settle-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding-bottom:10px;border-bottom:1.5px solid var(--ink)}
.settle-name{font-size:20px;font-weight:700}
.settle-sub{font-size:15px;color:var(--ink-2)}
.fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px 18px;margin-top:8px}
.field{display:flex;flex-direction:column;justify-content:flex-end;padding-top:10px}
.field label,.field-label{font-size:15px;line-height:1.3;color:var(--ink-2)}
.field-input{display:block;width:100%;min-height:var(--tap);padding:4px 0;border:0;border-bottom:1.5px solid var(--ink);border-radius:0;background:transparent;font-family:var(--sans);font-weight:700;font-size:18px;font-variant-numeric:tabular-nums;color:var(--ink);-webkit-appearance:none;appearance:none}
html[dir="rtl"] .field-input{text-align:right}
html[dir="rtl"] .field-input::-webkit-date-and-time-value{text-align:right}
.field-input::-webkit-calendar-picker-indicator{opacity:.6;cursor:pointer}
.field-input:not([data-filled]){font-weight:400;color:var(--ink-2)}
.field-input[aria-invalid="true"]{border-bottom-color:var(--pen)}
.field-out{display:flex;align-items:center;min-height:var(--tap);border-bottom:1px dotted var(--rule);font-size:17px;font-weight:700}
.field-out[data-empty]{font-weight:400;color:var(--ink-2)}
.settle-line{font-size:var(--slip-fs);margin-top:20px}
.settle-line td:empty::after{content:"";display:inline-block;width:3.4em;vertical-align:middle;border-bottom:1px dotted var(--rule)}
.settle-formula{margin-top:6px;font-size:14px;color:var(--ink-2);text-align:end}
.settle-total{display:flex;flex-direction:column;gap:2px;margin-top:18px;padding-top:10px;border-top:3px double var(--ink)}
.settle-total-label{font-size:15px;font-weight:700}
.settle-total-value{font-family:var(--serif);font-weight:800;font-size:clamp(40px,3vw + 26px,56px);line-height:1.05}
.settle-total-value[data-empty]{padding:8px 0 4px;font-family:var(--sans);font-weight:400;font-size:17px;line-height:1.4;color:var(--ink-2)}
.settle-msg{margin-top:10px;font-family:var(--serif);font-weight:500;font-size:16px;line-height:1.5;color:var(--pen)}
.stamp{display:inline-block;margin:16px 0 4px;padding:3px 10px;border:1.5px solid currentColor;border-radius:3px;color:var(--stamp-ink);font-weight:700;font-size:15px;line-height:1.35;transform:rotate(-1.4deg)}
html[dir="ltr"] .stamp{transform:rotate(1.4deg)}
.pen-aside{margin-top:12px;padding-inline-start:12px;border-inline-start:2px solid var(--pen);font-family:var(--serif);font-weight:500;font-size:16px;line-height:1.5;color:var(--pen)}
.settle .actions{margin-top:18px}
.settle .act{width:100%}
.settle-notes{display:grid;gap:10px;margin-top:16px;font-family:var(--sans);font-size:15px;line-height:1.5;color:var(--ink-2)}

/* ---- What a payslip shows, and what it does not. */
.practice{padding-block:0 clamp(56px,8vw,112px)}
.practice h2{margin-bottom:clamp(24px,3vw,36px)}
.split{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(28px,4vw,48px)}
.on-slip{padding:16px var(--sp) 6px}
.split-head{font-family:var(--sans);font-size:15px;font-weight:700}
.on-slip .split-head{padding:.4em .55em;background:var(--band);border-bottom:1px solid var(--rule)}
.off-slip .split-head{padding-bottom:8px;border-bottom:1.5px solid var(--ink)}
.area{padding:16px 0 18px;border-bottom:1px solid var(--hair)}
.area:last-child{border-bottom:0}
.off-slip .area{border-bottom-color:var(--rule)}
.area h3{margin-bottom:4px}
.on-slip .area h3{font-family:var(--sans);font-size:17px;font-weight:700}
.off-slip .area h3{font-family:var(--serif);font-size:clamp(21px,.5vw + 18px,24px);font-weight:700;line-height:1.25}
.area p{font-size:17px;line-height:1.6}
.area .law{margin-top:6px;font-family:var(--sans);font-size:14px;line-height:1.45;color:var(--ink-2)}
.practice-note{margin-top:18px;font-family:var(--sans);font-size:15px;color:var(--ink-2)}

/* ---- Questions. */
.faq{padding-block:0 clamp(56px,8vw,112px)}
.faq h2{margin-bottom:clamp(20px,3vw,32px)}
.faq-list{border-top:1.5px solid var(--ink)}
.qa{border-bottom:1px solid var(--rule)}
.qa summary{display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:var(--tap);padding:16px 0;font-family:var(--serif);font-weight:700;font-size:clamp(19px,.5vw + 16px,22px);line-height:1.35;list-style:none;cursor:pointer}
.qa summary::-webkit-details-marker{display:none}
.qa-mark{position:relative;flex:none;width:26px;height:26px}
.qa-mark::before,.qa-mark::after{content:"";position:absolute;inset-block-start:50%;inset-inline-start:50%;width:14px;height:1.5px;margin:-.75px 0 0 -7px;background:currentColor}
.qa-mark::after{transform:rotate(90deg)}
.qa[open] .qa-mark::after{transform:rotate(0deg)}
.qa-body{max-width:60ch;padding:0 0 22px}
.qa-body p{font-size:18px;line-height:1.65}

/* ---- Contact. */
.contact{padding-block:0 clamp(56px,8vw,112px)}
.contact .sec-lead{margin-bottom:clamp(24px,3vw,36px)}
.groups{display:grid;grid-template-columns:minmax(0,1fr);gap:24px}
.group h3{margin-bottom:10px;font-family:var(--sans);font-weight:700;font-size:16px;color:var(--ink-2)}
.group .actions{flex-direction:column;align-items:stretch}
.group .act{justify-content:flex-start}

.foot{display:grid;gap:8px;padding-block:28px 40px;border-top:1.5px solid var(--ink)}
.foot-brand{font-family:var(--serif);font-weight:900;font-size:24px;line-height:1.1}
.foot-concept,.foot-source{max-width:62ch;font-family:var(--sans);font-size:15px;line-height:1.5;color:var(--ink-2)}
.foot-top{display:flex;align-items:center;min-height:var(--tap);font-family:var(--sans);font-size:15px;justify-self:start}

/* Hover only where there is a fine pointer. */
@media (hover:hover) and (pointer:fine){
  .nav a:hover,.foot-top:hover,.settle-notes a:hover,.foot-source a:hover{text-decoration:underline}
  .act:hover{background:var(--ink);color:var(--paper)}
  .act-wa:hover{border-color:var(--wa-press);background:var(--wa-press);color:#fff}
  .lang:hover,.menu:hover{background:var(--ink);color:var(--paper)}
  .qa summary:hover .qa-q{text-decoration:underline;text-decoration-thickness:1px}
}

/* Phone: the menu is an opaque disclosure that shows every destination at once. */
@media (max-width:719px){
  .masthead{gap:10px}
  .brand-name{font-size:25px}
  .menu{display:inline-flex}
  .js .nav{display:none;position:absolute;inset-inline:0;inset-block-start:100%;flex-direction:column;align-items:stretch;gap:0;padding:4px var(--gutter) 12px;background:var(--paper);border-bottom:1.5px solid var(--ink)}
  .js .masthead[data-open] .nav{display:flex}
  .nav a{min-height:52px;font-size:18px;border-bottom:1px solid var(--rule)}
  .nav a:last-child{border-bottom:0}
  .opening .actions{gap:8px}
  .opening .act{flex:1 1 auto;padding-inline:12px;font-size:16px}
}

@media (max-width:359px){
  .brand-line{display:none}
  .fields,.slip-meta{grid-template-columns:minmax(0,1fr)}
}

@media (min-width:640px){
  .slip-meta{grid-template-columns:repeat(3,minmax(0,1fr))}
  .slip-pair{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:28px}
  .groups{grid-template-columns:repeat(3,minmax(0,1fr))}
  .foot{grid-template-columns:minmax(0,1fr) auto;column-gap:32px}
  .foot-brand,.foot-concept,.foot-source{grid-column:1}
  .foot-top{grid-column:2;grid-row:1}
}

@media (min-width:860px){
  .split{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* Wide: the margin rail opens. The opening puts its lead and controls in the rail beside the
   headline, and the pen's notes leave the slip for the margin, level with the line they mark. */
@media (min-width:1100px){
  .opening,.desk,.settle-sec{display:grid;grid-template-columns:minmax(0,var(--main)) minmax(0,var(--rail));column-gap:var(--gap)}
  .opening{align-items:end;padding-block:72px 96px}
  .opening h1{grid-column:1}
  .opening-side{grid-column:2;padding-bottom:6px}
  .lead{margin-top:0}
  .opening .actions{flex-direction:column;align-items:stretch}
  .desk>*{grid-column:1}
  .pen-row td{padding:0;border:0;line-height:0}
  /* Each note keeps its static vertical place in the table and is lifted, in slip-type units, to
     sit level with what it marks: note 1 between the overtime loop and the hours it contradicts. */
  .pen-note{position:absolute;inset-inline-start:calc(100% + 2.5rem);width:var(--rail);margin-top:calc(-1 * var(--lift) * var(--slip-fs));font-size:16.5px}
  .pen-note[data-after="pen-hours"]{--lift:10.6}
  .pen-note[data-after="pen-pension"]{--lift:4.4}
  .pen-note[data-after="pen-leave"]{--lift:2.4}
  .settle-sec>.sec-head,.settle-sec>.settle{grid-column:1}
  .settle-notes{grid-column:2;grid-row:2;align-self:start;margin-top:0;padding-top:24px}
  .practice h2,.practice .split,.practice-note{max-width:none}
  .faq-list,.faq h2{max-width:var(--main)}
}

/* Motion, only for visitors who have not asked for less. The review itself is scrubbed by
   scroll position in review.mjs: no transition, no clock. Touch responses: a press lands in
   100ms and releases in 160ms, a note or the menu enters in 200ms, an answer opens in 220ms. */
@media (prefers-reduced-motion: no-preference){
  :root{interpolate-size:allow-keywords}
  .slip[data-live] .pen-stroke{stroke-dasharray:1 2}
  .act,.lang,.menu{transition:transform 160ms var(--ease-out),background-color 140ms ease,color 140ms ease,border-color 140ms ease}
  .act:active,.lang:active,.menu:active{transform:scale(.97);transition-duration:100ms}
  .demo-note{transition:opacity 200ms var(--ease-out),transform 200ms var(--ease-out)}
  @starting-style{.demo-note{opacity:0;transform:translateY(-4px)}}
  .js .nav{transition:opacity 200ms var(--ease-out),transform 200ms var(--ease-out)}
  @starting-style{.js .masthead[data-open] .nav{opacity:0;transform:translateY(-6px)}}
  .qa::details-content{height:0;overflow:clip;opacity:0;transition:height 220ms var(--ease-out),opacity 220ms var(--ease-out),content-visibility 220ms allow-discrete}
  .qa[open]::details-content{height:auto;opacity:1}
  .qa-mark::after{transition:transform 200ms var(--ease-out)}
}