/* ZOHAR before/after — עמוד מלא */
body{margin:0;font-size:17px;line-height:1.7}
.skip-link{position:fixed;top:-90px;inset-inline-start:14px;z-index:99;background:var(--z-espresso);color:var(--z-milk);padding:10px 18px;border-radius:10px;text-decoration:none;font-weight:600;transition:top .2s}
.skip-link:focus-visible{top:10px}
main{width:min(100% - clamp(32px,6vw,60px),1100px);margin-inline:auto;padding-block:clamp(40px,7vw,80px)}
.ba-head{display:grid;justify-items:center;text-align:center;gap:12px;margin-block-end:clamp(34px,5vw,56px)}
.ba-head h1{font-size:clamp(1.7rem,3.6vw,2.5rem);font-weight:500;margin:0}
.ba-head p{max-width:42em;color:var(--z-body-muted);margin:0}

.z-ba-stage{position:relative;border-radius:var(--z-r);overflow:hidden;aspect-ratio:16/10;box-shadow:0 24px 60px rgba(58,42,38,.18)}
.z-ba-after,.z-ba-before{position:absolute;inset:0}
[dir="rtl"] .z-ba-before{clip-path:inset(0 0 0 var(--cut,50%))}
.ba-after-side{position:absolute;inset:0;background:var(--z-espresso);display:grid;place-items:center;padding:5%}
.ba-after-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;width:min(560px,86%)}
.ba-after-grid img{width:100%;border-radius:6px}
.ba-before-side{position:absolute;inset:0;background:#DCCDBC}
.ba-before-grid{position:absolute;inset:6%;display:grid;grid-template-columns:repeat(3,1fr);gap:10px;transform:rotate(-2deg)}
.ba-before-grid span{aspect-ratio:4/5;border-radius:6px;background-image:var(--i);background-size:230%;background-position:var(--p);filter:var(--f)}
.ba-before-grid span:nth-child(2){translate:0 10px}
.ba-before-grid span:nth-child(5){translate:0 -8px}
.z-ba-chip{position:absolute;z-index:2;font-weight:800;font-size:clamp(1rem,2.4vw,1.5rem);letter-spacing:.06em;background:#B3452F;color:#fff;padding:.35em .8em;border-radius:6px;rotate:var(--r);inset-block-start:14%;inset-inline-end:16%}
.z-ba-chip-b{background:#2E5C43;inset-block-start:auto;inset-block-end:20%;inset-inline-end:auto;inset-inline-start:18%}
.z-ba-handle{position:absolute;inset-block:0;left:var(--cut,50%);translate:-50% 0;width:2px;background:var(--z-milk);box-shadow:0 0 0 1px rgba(58,42,38,.25)}
.z-ba-handle span{position:absolute;top:50%;left:50%;translate:-50% -50%;width:46px;height:46px;border-radius:50%;background:var(--z-milk);box-shadow:0 6px 18px rgba(58,42,38,.3);display:grid;place-items:center}
.z-ba-handle span::before{content:"⇄";color:var(--z-espresso);font-size:1.15rem}
.z-ba-label{display:block;margin-block-start:18px;font-size:.95rem;color:var(--z-body-muted);text-align:center}
.z-ba input[type="range"]{width:100%;margin-block-start:10px;accent-color:var(--z-espresso);height:34px}
.z-ba-legends{display:flex;justify-content:space-between;font-size:.85rem;color:var(--z-mocha)}

.ba-notes{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,2.5vw,26px);margin-block-start:clamp(40px,6vw,64px)}
.ba-notes div{background:#fff;border:1px solid var(--z-milk-line);border-radius:var(--z-r);padding:24px;display:grid;gap:8px;align-content:start}
.ba-notes b{font-size:1.05rem}
.ba-notes span{font-size:.95rem;color:var(--z-body-muted)}
.ba-foot{padding:20px 0 56px;text-align:center}
@media (max-width:760px){
  .z-ba-stage{aspect-ratio:4/5}
  .ba-notes{grid-template-columns:1fr}
  .ba-after-grid{grid-template-columns:repeat(2,1fr)}
  .ba-after-grid img:nth-child(n+5){display:none}
}