/* memo × Attractions — partner site (memo.partners). Shared by / (en) and /he/ (rtl).
   Concept: "printed on site". One print ejects in the hero; the rest of the page is prints, signage, a live phone and footage from the field. */
:root{
  color-scheme:light;
  --paper:#f8f6fd;      /* lavender-tinted paper */
  --card:#ffffff;
  --ink:#1f1838;        /* deep plum ink */
  --ink-2:#5b5470;
  --line:#e2dcf3;
  --lav:#8f7ce0;        /* memo lavender (decorative / large type) */
  --lav-d:#6a4dc7;      /* white text sits only on this or darker */
  --lav-s:#ebe5fb;
  --lime:#cfe85a;       /* memo lime highlight */
  --display:"Bricolage Grotesque","Figtree",system-ui,sans-serif;
  --body:"Figtree",system-ui,-apple-system,"Segoe UI",sans-serif;
  --track:.2em;         /* letter-spacing for kickers; Hebrew has no caps, so it gets less */
  --wrap:1160px;
  --gutter:clamp(16px,4vw,40px);
  --bar-h:64px;
  --spring:cubic-bezier(.34,1.56,.64,1);
  --ease:cubic-bezier(.22,1,.36,1);
  --start:left; --end:right; --dir:1;
}
[dir="rtl"]{--start:right;--end:left;--dir:-1}
:lang(he){
  --display:"Rubik","Assistant",system-ui,sans-serif;
  --body:"Assistant",system-ui,-apple-system,"Segoe UI",sans-serif;
  --track:.06em;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--bar-h) + 12px);overflow-x:clip;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--body);font-size:clamp(1.02rem,.97rem + .25vw,1.16rem);line-height:1.6;overflow-x:clip;-webkit-font-smoothing:antialiased}
:lang(he) body{font-size:clamp(1.06rem,1rem + .28vw,1.2rem);line-height:1.65}
img,video{max-width:100%;height:auto;display:block}
a{color:var(--lav-d)}
button{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--lav-d);outline-offset:3px;border-radius:10px}
h1,h2,h3{font-family:var(--display);font-weight:800;line-height:1.02;letter-spacing:-.02em;margin:0;text-wrap:balance}
:lang(he) :is(h1,h2,h3){line-height:1.1;letter-spacing:-.01em}
p{margin:0}
.ltr{direction:ltr;unicode-bidi:isolate;display:inline-block}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip{position:absolute;inset-inline-start:12px;top:-60px;z-index:100;padding:10px 16px;border-radius:12px;background:var(--ink);color:#fff;font-weight:700;text-decoration:none}
.skip:focus{top:12px}
.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gutter)}
.sec{padding-block:clamp(72px,11vw,140px);position:relative}
.kicker{font-family:var(--body);font-weight:700;font-size:.8rem;letter-spacing:var(--track);text-transform:uppercase;color:var(--lav-d)}
:lang(he) .kicker{font-size:.95rem}
.h2{font-size:clamp(2.5rem,1.6rem + 4.4vw,5rem)}
:lang(he) .h2{font-size:clamp(2.3rem,1.5rem + 4vw,4.6rem)}
.h2 .soft{color:var(--lav)}
.lede{font-size:clamp(1.12rem,1rem + .5vw,1.35rem);color:var(--ink-2);max-width:62ch}
.lede b,.body b{color:var(--ink);font-weight:700}
.body{color:var(--ink-2);max-width:64ch}

/* ---------- top bar ---------- */
.bar{position:sticky;top:0;z-index:50;padding-top:env(safe-area-inset-top,0px);background:rgba(248,246,253,.86);backdrop-filter:blur(12px) saturate(1.3);-webkit-backdrop-filter:blur(12px) saturate(1.3);border-bottom:1px solid transparent;transition:border-color .3s}
.bar.stuck,.bar.open{border-bottom-color:var(--line)}
.bar-in{display:flex;align-items:center;gap:10px;min-height:var(--bar-h)}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--ink);flex:none;min-height:44px}
.brand img{width:76px}
.brand .tag{padding-inline-start:12px;border-inline-start:1.5px solid var(--line);font-weight:700;font-size:.74rem;letter-spacing:var(--track);text-transform:uppercase;color:var(--ink-2);line-height:1.2}
:lang(he) .brand .tag{font-size:.9rem}
.chapters{display:flex;gap:2px;list-style:none;margin:0 auto;padding:0}
.chapters a{display:block;padding:8px 12px;border-radius:999px;font-weight:600;font-size:.93rem;color:var(--ink-2);text-decoration:none;white-space:nowrap;transition:background-color .2s,color .2s}
:lang(he) .chapters a{font-size:1rem}
.chapters a:hover{background:var(--lav-s);color:var(--ink)}
.chapters a.on{background:var(--ink);color:#fff}
.bar-end{display:flex;align-items:center;gap:8px;margin-inline-start:auto}
/* language: a globe that opens a short list with flags */
.lang-wrap{position:relative}
.lang-btn{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;border:1.5px solid var(--line);background:var(--card);color:var(--ink);cursor:pointer;transition:border-color .2s,background-color .2s}
.lang-btn:hover,.lang-btn[aria-expanded="true"]{border-color:var(--ink)}
.lang-btn[aria-expanded="true"]{background:var(--lav-s)}
.lang-btn svg{width:20px;height:20px}
.lang-menu{position:absolute;top:calc(100% + 10px);inset-inline-end:0;z-index:60;min-width:196px;margin:0;padding:6px;list-style:none;background:var(--card);border:1.5px solid var(--ink);border-radius:16px;box-shadow:0 5px 0 var(--ink),0 26px 44px -22px rgba(31,24,56,.45);opacity:0;visibility:hidden;transform:translateY(-6px) scale(.97);transform-origin:top var(--end);transition:opacity .14s ease,transform .18s var(--ease),visibility 0s linear .18s}
.lang-wrap.open .lang-menu{opacity:1;visibility:visible;transform:none;transition:opacity .16s ease,transform .22s var(--spring)}
.lang-menu a{display:flex;align-items:center;gap:12px;min-height:46px;padding:0 12px;border-radius:11px;color:var(--ink);font-weight:600;font-size:1rem;text-decoration:none;transition:background-color .15s}
.lang-menu a:hover,.lang-menu a:focus-visible{background:var(--lav-s)}
.lang-menu a:focus-visible{outline-offset:-2px}
.lang-menu a[aria-current]{font-weight:800}
.lang-menu a[lang="he"]{font-family:"Assistant",system-ui,sans-serif;font-size:1.06rem}
.lang-menu a[lang="en"]{font-family:"Figtree",system-ui,sans-serif}
.lang-menu .flag{width:24px;height:auto;flex:none;border-radius:3px;box-shadow:0 0 0 1px rgba(31,24,56,.16)}
.lang-menu .chk{width:18px;height:18px;margin-inline-start:auto;color:var(--lav-d);flex:none}
.menu-btn{display:none;place-items:center;width:44px;height:44px;border-radius:50%;border:1.5px solid var(--ink);background:var(--card);cursor:pointer;flex:none}
.menu-btn svg{width:20px;height:20px}
.menu-btn .i-x{display:none}
.bar.open .menu-btn .i-x{display:block}
.bar.open .menu-btn .i-menu{display:none}
.progress{position:absolute;inset-inline-start:0;bottom:-1px;height:3px;width:100%;background:var(--lime);transform-origin:var(--start);transform:scaleX(var(--prog,0))}
@media (max-width:980px){
  .menu-btn{display:grid}
  .chapters{display:none;position:absolute;top:100%;inset-inline:0;flex-direction:column;gap:4px;margin:0;padding:12px var(--gutter) 18px;background:var(--paper);border-bottom:1px solid var(--line);box-shadow:0 24px 40px -24px rgba(31,24,56,.35)}
  .bar.open .chapters{display:flex}
  .chapters a{padding:13px 16px;font-size:1.08rem;border-radius:14px}
}
@media (max-width:640px){.brand .tag{display:none}}
@media (max-width:400px){.bar-cta{display:none}.bar.open .chapters::after{content:none}}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5em;min-height:50px;padding:.7em 1.4em;border-radius:999px;border:2px solid var(--ink);background:var(--card);color:var(--ink);font-weight:700;text-decoration:none;cursor:pointer;box-shadow:0 4px 0 var(--ink);transition:transform .18s var(--spring),box-shadow .18s var(--spring)}
.btn:hover{transform:translateY(-2px);box-shadow:0 6px 0 var(--ink)}
.btn:active{transform:translateY(3px);box-shadow:0 1px 0 var(--ink);transition-duration:.06s}
.btn-lime{background:var(--lime)}
.btn-ink{background:var(--ink);color:#fff}
.btn-sm{min-height:44px;padding:.4em 1.05em;font-size:.95rem;box-shadow:0 3px 0 var(--ink)}
.btn svg{width:18px;height:18px;flex:none}
[dir="rtl"] .btn .arr{transform:scaleX(-1)}

/* ---------- hero ---------- */
.hero{padding-block:clamp(36px,6vw,80px) clamp(64px,9vw,120px);overflow:clip}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(28px,5vw,72px);align-items:center}
.hero h1{font-size:clamp(2.9rem,1.3rem + 5vw,5.6rem);margin-top:16px}
:lang(he) .hero h1{font-size:clamp(2.7rem,1.3rem + 4.6vw,5.2rem)}
.hero h1 .mark{background:linear-gradient(var(--lime),var(--lime)) no-repeat 0 88%/100% .26em;-webkit-box-decoration-break:clone;box-decoration-break:clone;padding-inline:.04em}
[dir="rtl"] .hero h1 .mark{background-position:100% 88%}
.js .hero h1 .mark{background-size:0% .26em;animation:swipe .8s var(--ease) 1.5s forwards}
@keyframes swipe{to{background-size:100% .26em}}
.chips{display:flex;flex-wrap:wrap;gap:10px;margin:28px 0 0;list-style:none;padding:0}
.chips li{display:flex;align-items:center;gap:8px;padding-block:9px;padding-inline:12px 16px;border-radius:999px;background:var(--card);border:1.5px solid var(--line);font-weight:600;font-size:1rem}
.chips li svg{width:18px;height:18px;flex:none;color:var(--lav-d)}
.chips li:last-child{background:var(--ink);color:#fff;border-color:var(--ink)}
.chips li:last-child svg{color:var(--lime)}
.same-time{margin-top:22px;font-family:var(--display);font-weight:500;font-size:clamp(1.15rem,1rem + .5vw,1.4rem);color:var(--ink-2)}
.hero-acts{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}

/* the print slot */
.printer{position:relative;padding-top:26px;perspective:1200px}
.slot{position:relative;z-index:3;height:26px;margin-inline:-4%;border-radius:14px;background:var(--ink);box-shadow:inset 0 -6px 0 rgba(255,255,255,.08),0 10px 24px rgba(31,24,56,.25)}
.slot::after{content:"";position:absolute;left:6%;right:6%;top:50%;height:4px;margin-top:-2px;border-radius:4px;background:#0c0918}
.slot .led{position:absolute;inset-inline-end:16px;top:9px;width:8px;height:8px;border-radius:50%;background:var(--lime);box-shadow:0 0 10px var(--lime)}
.js .slot .led{animation:blink 1s steps(2) 3}
@keyframes blink{50%{opacity:.2}}
.print-clip{position:relative;z-index:2;margin:-13px -6% 0;overflow:hidden;padding:0 10% 80px}
.print{position:relative;margin:0;background:#fff;padding:12px 12px 52px;border-radius:4px;box-shadow:0 30px 50px -18px rgba(31,24,56,.35),0 2px 0 rgba(31,24,56,.06);transform-origin:top center}
.print img{width:100%;border-radius:2px;aspect-ratio:941/577;object-fit:cover}
.print figcaption{position:absolute;left:12px;right:12px;bottom:14px;font-size:.68rem;letter-spacing:var(--track);text-transform:uppercase;color:var(--ink-2);text-align:center}
:lang(he) .print figcaption{font-size:.85rem}
.js .print{transform:translateY(-104%)}
.js .print img{filter:saturate(0) brightness(1.35) contrast(.7)}
.hero.go .print{animation:eject 1.25s cubic-bezier(.3,.7,.2,1) .35s forwards}
.hero.go .print img{animation:develop 1.8s ease 1.4s forwards}
@keyframes eject{0%{transform:translateY(-104%)}70%{transform:translateY(2%) rotate(0)}100%{transform:translateY(0) rotate(-2.2deg)}}
@keyframes develop{to{filter:none}}
.print.tilt{transition:transform .25s ease-out}
@media (max-width:860px){
  .hero-grid{grid-template-columns:1fr}
  .printer{max-width:560px;margin-inline:auto;width:100%}
}
@media (max-width:480px){.hero-acts .btn{flex:1 1 100%}}

/* ---------- the idea ---------- */
.idea-grid{display:grid;grid-template-columns:.95fr 1.05fr;gap:clamp(32px,6vw,84px);align-items:center}
.fridge{position:relative;border-radius:22px;overflow:hidden;box-shadow:0 30px 60px -24px rgba(31,24,56,.4)}
.fridge img{width:100%;aspect-ratio:var(--ar,900/960);object-fit:cover;transition:transform 1.2s var(--ease)}
.fridge:hover img{transform:scale(1.04)}
.idea h2{font-size:clamp(2.4rem,1.5rem + 4vw,4.6rem)}
:lang(he) .idea h2{font-size:clamp(2.1rem,1.3rem + 2.8vw,3.5rem)}
.idea h2 span{display:block;color:var(--lav)}
.pull{margin-top:30px;font-family:var(--display);font-weight:700;font-size:clamp(1.45rem,1.1rem + 1.5vw,2.2rem);line-height:1.18;letter-spacing:-.01em}
:lang(he) .pull{font-size:clamp(1.35rem,1.05rem + 1.3vw,2rem);line-height:1.3}
.pull em{font-style:normal;background:linear-gradient(transparent 62%,var(--lime) 62% 94%,transparent 94%)}
.pull + .body{margin-top:12px;font-size:1.06rem}
.idea .body.more{margin-top:24px}
@media (max-width:860px){.idea-grid{grid-template-columns:1fr}.fridge{order:2}}

/* ---------- difference ---------- */
.diff{background:var(--card);border-block:1px solid var(--line)}
.vs{display:grid;grid-template-columns:1fr auto 1fr;gap:clamp(14px,2.4vw,28px);align-items:stretch;margin-top:clamp(36px,5vw,56px)}
.card{position:relative;border-radius:24px;padding:clamp(26px,3vw,40px)}
.card .kicker{display:block;margin-bottom:14px}
.card h3{font-size:clamp(1.6rem,1.2rem + 1.2vw,2.2rem);line-height:1.1;padding-inline-end:52px}
.card p{margin-top:14px}
.usual{background:repeating-linear-gradient(-45deg,#f3f1f7 0 12px,#eeebf4 12px 24px);color:var(--ink-2);border:1.5px dashed #cfc8e0}
.usual .kicker{color:var(--ink-2)}
.usual h3{color:var(--ink-2)}
.usual .cam{position:absolute;top:22px;inset-inline-end:22px;width:42px;height:42px;color:#b7afcc}
.memo-card{background:var(--lav-d);color:#fff;box-shadow:0 26px 50px -20px rgba(106,77,199,.6);transform:rotate(calc(var(--dir) * 1deg));transition:transform .4s var(--spring)}
.memo-card:hover{transform:rotate(0) translateY(-4px)}
.memo-card .kicker{color:var(--lime)}
.memo-card p{color:#efeaff}
.memo-card .spark{position:absolute;top:20px;inset-inline-end:22px;width:42px;height:42px;color:var(--lime)}
.vs-badge{align-self:center;display:grid;place-items:center;width:58px;height:58px;border-radius:50%;background:var(--lime);border:2px solid var(--ink);font-family:"Bricolage Grotesque",var(--display);font-weight:800;font-size:1.05rem;box-shadow:0 4px 0 var(--ink)}
.one-other{margin-top:clamp(48px,7vw,84px);text-align:center;font-family:var(--display);font-weight:800;font-size:clamp(1.9rem,1.2rem + 3vw,3.6rem);line-height:1.08;letter-spacing:-.02em}
:lang(he) .one-other{font-size:clamp(1.8rem,1.15rem + 2.8vw,3.3rem);line-height:1.2}
.one-other span{display:block}
.one-other .b{color:var(--lav-d)}
.callout{margin:clamp(40px,6vw,64px) auto 0;max-width:820px;display:grid;grid-template-columns:auto 1fr;gap:18px;align-items:start;padding:24px 26px;border-radius:20px;background:var(--lav-s)}
.callout svg{width:34px;height:34px;color:var(--lav-d)}
.callout p{color:var(--ink-2)}
.callout b{color:var(--ink)}
@media (max-width:760px){.vs{grid-template-columns:1fr}.vs-badge{justify-self:center;margin-block:-30px;position:relative;z-index:2}.memo-card{transform:none}}

/* ---------- visitor: phone stepper ---------- */
.visitor-grid{display:grid;grid-template-columns:auto 1fr;gap:clamp(36px,7vw,100px);align-items:center;margin-top:clamp(36px,5vw,60px)}

/* iPhone 16 Pro proportions (402×874pt screen, 0.478 body): flat titanium rim, hairline bezel,
   Dynamic Island that reacts to each step, glass glare, and a slow 3D drift that follows the pointer */
.phone-stage{position:relative;perspective:1600px;isolation:isolate}
.phone-stage::before{content:"";position:absolute;z-index:-1;inset:8% -18% 4%;border-radius:50%;background:radial-gradient(closest-side,rgba(143,124,224,.42),rgba(207,232,90,.18) 55%,transparent);filter:blur(28px)}
.phone-stage::after{content:"";position:absolute;z-index:-1;left:12%;right:12%;bottom:-26px;height:34px;border-radius:50%;background:radial-gradient(closest-side,rgba(31,24,56,.38),transparent);filter:blur(6px)}
.phone{--w:clamp(250px,23vw,300px);position:relative;width:var(--w);padding:2.5px;border-radius:calc(var(--w) * .148);
  background:linear-gradient(150deg,#f4f2f6 0%,#a9a4b2 9%,#e9e6ee 20%,#7d7887 38%,#c9c5d0 55%,#6f6a79 74%,#dcd8e2 90%,#9c97a6 100%);
  box-shadow:inset 0 0 0 .5px rgba(255,255,255,.7),0 1px 0 rgba(255,255,255,.6),0 50px 80px -34px rgba(31,24,56,.55),0 14px 28px -14px rgba(31,24,56,.3);
  transform:rotateY(var(--ry,-7deg)) rotateX(var(--rx,3deg));transform-style:preserve-3d;transition:transform .7s var(--ease)}
.phone .bezel{padding:calc(var(--w) * .011);border-radius:calc(var(--w) * .14);background:#050407;box-shadow:inset 0 0 0 1px #1d1b22}
/* side buttons: action + volume (left), side button + Camera Control (right) */
.phone::before,.phone::after,.phone .cc{content:"";position:absolute;width:3px;border-radius:2px;background:linear-gradient(90deg,#6f6a79,#d9d5df 60%,#8e8998)}
.phone::before{left:-2.5px;top:16%;height:22%;background:linear-gradient(#a9a4b2 0 14%,transparent 14% 28%,#a9a4b2 28% 59%,transparent 59% 69%,#a9a4b2 69%);border-radius:2px 0 0 2px}
.phone::after{right:-2.5px;top:25%;height:13%;border-radius:0 2px 2px 0}
.phone .cc{right:-2px;top:55%;height:8.5%;width:2.5px;background:linear-gradient(#3c3846,#8f8a99 50%,#3c3846);border-radius:0 2px 2px 0}
.screen{position:relative;border-radius:calc(var(--w) * .128);overflow:hidden;background:var(--sb,#fff);container-type:inline-size;isolation:isolate;transition:background-color .45s ease}
.screen::after{content:"";position:absolute;inset:0;z-index:8;pointer-events:none;border-radius:inherit;background:linear-gradient(118deg,rgba(255,255,255,.13) 0%,rgba(255,255,255,.04) 22%,rgba(255,255,255,0) 34%,rgba(255,255,255,0) 72%,rgba(255,255,255,.07) 100%);transform:translateX(var(--glare,0%));transition:transform .7s var(--ease)}
.sbar{position:relative;z-index:6;direction:ltr;aspect-ratio:402/54;display:flex;align-items:center;justify-content:space-between;padding:0 7.4% 0 11.8%;font:600 4.2cqi/1 -apple-system,"SF Pro Text","Helvetica Neue",system-ui,sans-serif;letter-spacing:-.01em;color:#000}
.sbar .ico{display:flex;align-items:center;gap:1.3cqi}
.sbar svg{height:3cqi;width:auto;display:block}
.island{position:absolute;left:50%;top:20%;height:68%;width:31.3%;transform:translateX(-50%);border-radius:99px;background:#000;display:flex;align-items:center;justify-content:space-between;padding:0 3.2cqi;overflow:hidden;transition:width .55s cubic-bezier(.32,1.4,.5,1),height .55s cubic-bezier(.32,1.4,.5,1)}
.island::after{content:"";position:absolute;right:21%;top:50%;width:2.4cqi;height:2.4cqi;margin-top:-1.2cqi;border-radius:50%;background:radial-gradient(circle at 35% 35%,#2c3350,#0b0d18 60%);box-shadow:inset 0 0 0 .4cqi #11131c;transition:opacity .2s}
.island .num,.island .dot{opacity:0;transition:opacity .2s ease}
.island .num{font:700 3.3cqi/1 -apple-system,"SF Pro Text",system-ui,sans-serif;color:var(--lime);letter-spacing:.02em}
.island .dot{width:2.2cqi;height:2.2cqi;border-radius:50%;background:var(--lime);box-shadow:0 0 0 0 rgba(207,232,90,.6);animation:pulse 1.4s infinite}
.island.live{width:47%;height:74%}
.island.live::after{opacity:0}
.island.live .num,.island.live .dot{opacity:1;transition-delay:.18s}
.shots{position:relative;aspect-ratio:402/786;overflow:hidden;background:#fff}
.shots img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top center;opacity:0;transform:translateX(calc(var(--dir) * 14%)) scale(.98);transition:opacity .45s ease,transform .6s var(--ease)}
.shots img.on{opacity:1;transform:none}
.shots img.past{transform:translateX(calc(var(--dir) * -14%)) scale(.98)}
.home{position:relative;z-index:6;aspect-ratio:402/34;background:var(--hb,#fdfdfd);transition:background-color .45s ease}
.home::after{content:"";position:absolute;left:50%;top:50%;width:34%;height:1.25cqi;min-height:4px;transform:translate(-50%,-30%);border-radius:9px;background:#000}
@media (max-width:860px){.phone{--ry:0deg;--rx:0deg}}
.tap{position:absolute;z-index:4;width:44px;height:44px;margin:-22px 0 0 -22px;border-radius:50%;border:3px solid var(--lime);pointer-events:none;opacity:0}
.tap.go{animation:tap .8s ease-out}
@keyframes tap{0%{opacity:1;transform:scale(.4)}100%{opacity:0;transform:scale(1.5)}}
.steps{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.step{display:block;width:100%;text-align:start;padding:18px 22px;border-radius:20px;border:1.5px solid var(--line);background:var(--card);cursor:pointer;position:relative;overflow:hidden;transition:border-color .25s,background-color .25s,transform .3s var(--spring)}
.step:hover{transform:translateX(calc(var(--dir) * 4px))}
.step .t{display:flex;align-items:baseline;gap:12px;font-family:var(--display);font-weight:800;font-size:1.45rem;line-height:1.1}
.step .n{font-family:var(--body);font-size:.8rem;font-weight:700;color:var(--lav-d);letter-spacing:.1em}
.step .d{display:block;color:var(--ink-2);margin-top:4px}
.step .fill{position:absolute;inset-inline-start:0;bottom:0;height:3px;width:100%;background:var(--lav-d);transform-origin:var(--start);transform:scaleX(0)}
.step[aria-selected="true"]{border-color:var(--ink);background:var(--lav-s)}
.step[aria-selected="true"] .fill{animation:fill var(--dur,3600ms) linear forwards}
.steps.paused .step[aria-selected="true"] .fill{animation-play-state:paused}
@keyframes fill{to{transform:scaleX(1)}}
.step-ctrl{display:flex;align-items:center;gap:12px;margin-top:14px;color:var(--ink-2);font-size:.95rem}
.icon-btn{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;border:1.5px solid var(--ink);background:var(--card);cursor:pointer;flex:none}
.icon-btn svg{width:18px;height:18px}
.nod{margin-top:clamp(36px,5vw,56px);font-size:clamp(1.15rem,1rem + .5vw,1.4rem);max-width:60ch}
.nod b{font-family:var(--display);font-weight:800}
@media (max-width:860px){
  .visitor-grid{grid-template-columns:1fr;justify-items:center}
  .steps{grid-template-columns:1fr 1fr;width:100%}
  .step{padding:14px 16px}
  .step .t{font-size:1.2rem}
  .step .d{font-size:.92rem}
  .step:hover{transform:none}
  .step-ctrl{justify-content:center}
}

/* live demo */
.demo{margin-top:clamp(40px,6vw,64px);display:grid;grid-template-columns:1fr auto;gap:clamp(24px,4vw,48px);align-items:center;padding:clamp(28px,4vw,48px);border-radius:28px;background:var(--lav-d);color:#fff;position:relative;overflow:hidden;isolation:isolate}
.demo::before{content:"";position:absolute;width:420px;height:420px;border-radius:50%;background:var(--lav);inset-inline-end:-140px;top:-180px;z-index:-1;opacity:.7}
.demo .kicker{color:var(--lime);display:flex;align-items:center;gap:8px}
.demo .kicker i{width:9px;height:9px;border-radius:50%;background:var(--lime);box-shadow:0 0 0 0 rgba(207,232,90,.7);animation:pulse 1.8s infinite}
@keyframes pulse{70%{box-shadow:0 0 0 10px rgba(207,232,90,0)}100%{box-shadow:0 0 0 0 rgba(207,232,90,0)}}
.demo h3{font-size:clamp(1.7rem,1.2rem + 1.8vw,2.6rem);margin-top:12px;color:#fff}
.demo p{margin-top:12px;color:#efeaff;max-width:56ch}
.demo .url{font-weight:600;color:#fff;word-break:break-all}
.demo .btn{margin-top:22px}
.demo small{display:block;margin-top:16px;color:#ece6ff;font-size:.9rem}
.qr{display:grid;justify-items:center;gap:10px;padding:16px;border-radius:20px;background:#fff;color:var(--ink);font-size:.82rem;font-weight:700;text-align:center}
:lang(he) .qr{font-size:.95rem}
.qr canvas,.qr img{width:150px!important;height:150px!important}
@media (max-width:760px){.demo{grid-template-columns:1fr}.qr{display:none}}

/* ---------- field ---------- */
.field{background:var(--ink);color:#fff;overflow:clip}
.field .kicker{color:var(--lime)}
.field .h2{color:#fff}
.field .h2 .soft{color:var(--lav)}
.line{position:relative;margin-top:clamp(40px,6vw,70px);padding-top:30px}
.string{position:absolute;left:-5%;right:-5%;top:0;height:60px;width:110%;color:#7d71a8}
.prints{display:grid;grid-template-columns:1fr 1.45fr 1fr;gap:clamp(14px,2.6vw,36px);align-items:start}
.peg{position:relative;margin:0;background:#fff;padding:10px 10px 0;border-radius:3px;color:var(--ink);transform-origin:50% -24px;transform:rotate(var(--r));transition:transform .5s var(--spring);cursor:zoom-in;border:0;font:inherit;text-align:start;width:100%}
.peg:hover,.peg:focus-visible{transform:rotate(0) translateY(6px)}
.peg::before{content:"";position:absolute;top:-22px;left:50%;width:14px;height:34px;margin-left:-7px;border-radius:3px;background:linear-gradient(90deg,#d9c79f,#efe2c2,#d9c79f);box-shadow:0 2px 0 rgba(0,0,0,.2)}
.peg img{width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:2px}
.peg.wide img{aspect-ratio:820/957}
.peg .cap{display:block;padding:12px 4px 14px}
.peg .cap b{display:block;font-family:var(--display);font-weight:800;font-size:1.1rem;line-height:1.2}
.peg .cap span{display:block;color:var(--ink-2);font-size:.92rem}
:lang(he) .peg .cap span{font-size:1rem}
.js .peg{animation:sway 6s ease-in-out infinite;animation-delay:var(--dl,0s)}
.peg:hover{animation-play-state:paused}
@keyframes sway{0%,100%{rotate:0deg}50%{rotate:1.2deg}}

/* footage from the field */
.run{display:grid;grid-template-columns:auto 1fr;gap:clamp(32px,6vw,80px);align-items:center;margin-top:clamp(56px,8vw,96px)}
.clip{position:relative;width:clamp(232px,22vw,290px);aspect-ratio:384/848;border-radius:30px;overflow:hidden;background:#0c0918;box-shadow:0 0 0 1px rgba(255,255,255,.14),0 40px 70px -30px rgba(0,0,0,.7);transform:rotate(calc(var(--dir) * -1.5deg))}
.clip video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.clip .live{position:absolute;top:14px;inset-inline-start:14px;inset-inline-end:14px;display:flex;align-items:center;gap:8px;width:max-content;max-width:calc(100% - 28px);padding:7px 12px;border-radius:999px;background:rgba(15,11,30,.62);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);color:#fff;font-weight:700;font-size:.8rem;line-height:1.2}
:lang(he) .clip .live{font-size:.92rem}
.clip .live i{width:8px;height:8px;border-radius:50%;background:var(--lime);flex:none;animation:pulse 1.8s infinite}
.clip .ctl{position:absolute;bottom:14px;inset-inline-end:14px;display:flex;gap:8px}
.clip .ctl button{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;border:0;background:rgba(15,11,30,.62);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);color:#fff;cursor:pointer}
.clip .ctl svg{width:18px;height:18px}
.clip .ctl [hidden]{display:none}
.run-txt{display:grid;gap:clamp(20px,3vw,28px)}
.run-txt .txt{font-size:1.1rem;color:#d9d3ea;max-width:58ch}
.run-txt .txt b{color:#fff}
.behind{padding:26px 28px;border-radius:22px;background:#2c2450;border:1px solid #3e3568}
.behind h3{font-size:1.5rem;color:var(--lime)}
.behind p{margin-top:10px;color:#d9d3ea}
.behind b{color:#fff}
.active-at{display:flex;align-items:center;gap:10px;color:#d9d3ea}
.active-at b{color:#fff}
.active-at svg{width:22px;height:22px;color:var(--lime);flex:none}
@media (max-width:760px){
  .prints{grid-template-columns:1fr 1fr}
  .prints .peg.wide{grid-column:1 / -1;order:-1;max-width:420px;justify-self:center}
  .string{display:none}
  .run{grid-template-columns:1fr;justify-items:center}
  .clip{transform:none}
}
dialog.lb{border:0;padding:0;background:transparent;max-width:min(92vw,900px);max-height:92vh;overflow:visible}
dialog.lb::backdrop{background:rgba(15,11,30,.82);backdrop-filter:blur(4px)}
dialog.lb figure{margin:0;background:#fff;padding:12px;border-radius:6px}
dialog.lb img{max-height:78vh;width:auto;margin:auto}
dialog.lb figcaption{padding:10px 4px 2px;font-weight:600;color:var(--ink)}
dialog.lb .close{position:absolute;top:8px;inset-inline-end:8px;width:44px;height:44px;border-radius:50%;border:0;background:var(--ink);color:#fff;cursor:pointer;display:grid;place-items:center}

/* ---------- numbers ---------- */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(12px,1.6vw,20px);margin-top:clamp(36px,5vw,56px)}
.stat{position:relative;padding:24px 22px 22px;border-radius:22px;background:var(--card);border:1.5px solid var(--line);overflow:hidden}
.stat .v{display:block;font-family:"Bricolage Grotesque",var(--display);font-weight:800;font-size:clamp(2.6rem,1.8rem + 2.6vw,4rem);line-height:1;letter-spacing:-.03em;font-variant-numeric:tabular-nums;direction:ltr;text-align:start}
[dir="rtl"] .stat .v{text-align:end}
.stat .l{display:block;margin-top:10px;color:var(--ink-2);font-size:.98rem;line-height:1.4}
:lang(he) .stat .l{font-size:1.05rem}
.stat .meter{margin-top:18px;height:8px;border-radius:8px;background:var(--lav-s);overflow:hidden}
.stat .meter i{display:block;height:100%;width:calc(var(--pct) * 1%);background:var(--lav-d);border-radius:8px;transform-origin:var(--start);transition:transform 1.2s var(--ease)}
[dir="rtl"] .stat .meter i{margin-inline-start:0}
.stat:first-child{background:var(--lime);border-color:var(--ink)}
.stat:first-child .meter{background:rgba(31,24,56,.12)}
.stat:first-child .meter i{background:var(--ink)}
.stat:first-child .l{color:var(--ink)}
.basis{margin-top:22px;color:var(--ink-2);font-size:.98rem;max-width:90ch}
:lang(he) .basis{font-size:1.05rem}
.basis b{color:var(--ink)}
@media (max-width:860px){.stats{grid-template-columns:1fr 1fr}}

.sizer{margin-top:clamp(48px,7vw,80px);border-radius:28px;background:var(--card);border:1.5px solid var(--ink);box-shadow:0 8px 0 var(--ink);padding:clamp(22px,3.4vw,44px)}
.sizer-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:end;gap:16px}
.sizer h3{font-size:clamp(1.5rem,1.1rem + 1.4vw,2.2rem)}
.seg{display:flex;flex-wrap:wrap;gap:6px;padding:5px;border-radius:999px;background:var(--lav-s)}
.seg button{min-height:44px;padding:0 18px;border:0;border-radius:999px;background:transparent;font-weight:700;cursor:pointer;font-variant-numeric:tabular-nums;transition:background-color .2s,color .2s}
.seg button:hover{background:rgba(31,24,56,.07)}
.seg button[aria-pressed="true"]{background:var(--ink);color:#fff}
.readout{display:grid;grid-template-columns:repeat(var(--cols,3),1fr) 1.5fr;gap:clamp(12px,2vw,24px);margin-top:28px}
.ro{padding:18px 18px 16px;border-radius:18px;background:var(--paper)}
.ro .k{font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-2);font-weight:700}
:lang(he) .ro .k{font-size:.95rem;letter-spacing:0}
.ro .n{display:block;margin-top:6px;font-family:"Bricolage Grotesque",var(--display);font-weight:800;font-size:clamp(1.8rem,1.3rem + 1.6vw,2.6rem);line-height:1;font-variant-numeric:tabular-nums}
.ro.money{background:var(--lav-d);color:#fff}
.ro.money .k{color:#ece6ff}
.ro.money .n{font-size:clamp(2.2rem,1.5rem + 2.4vw,3.4rem)}
.stations{display:flex;gap:5px;margin-top:10px;flex-wrap:wrap}
.stations i{width:14px;height:18px;border-radius:3px;background:var(--lav-d);transform:scale(0);animation:pop .35s var(--spring) forwards;animation-delay:calc(var(--k) * 60ms)}
@keyframes pop{to{transform:scale(1)}}
.days{margin-top:24px;display:grid;grid-template-columns:1fr auto;gap:14px 24px;align-items:center;padding-top:22px;border-top:1px dashed var(--line)}
.days label,.days .lbl{font-weight:700}
.days label span,.days .lbl span{display:block;font-weight:400;color:var(--ink-2);font-size:.92rem}
:lang(he) .days .lbl span{font-size:1rem}
.days output{font-family:"Bricolage Grotesque",var(--display);font-weight:800;font-size:clamp(1.4rem,1.1rem + 1vw,2rem);font-variant-numeric:tabular-nums;text-align:end}
.days output small{display:block;font-family:var(--body);font-weight:500;font-size:.85rem;color:var(--ink-2)}
:lang(he) .days output small{font-size:.95rem}
.days .seg{grid-column:1 / -1;justify-self:start;border-radius:20px}
input[type=range]{grid-column:1 / -1;width:100%;accent-color:var(--lav-d);height:28px}
.tbl-wrap{margin-top:28px;overflow-x:auto}
table{width:100%;border-collapse:collapse;min-width:520px;font-variant-numeric:tabular-nums}
th{font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2);text-align:end;padding:10px 12px;font-weight:700}
:lang(he) th{font-size:.95rem;letter-spacing:0}
th:first-child,td:first-child{text-align:start}
td{padding:14px 12px;border-top:1px solid var(--line);text-align:end;color:var(--ink-2)}
td:first-child,td:last-child{color:var(--ink);font-weight:700}
tr.on td{background:var(--lav-s)}
tr.on td:first-child{border-start-start-radius:12px;border-end-start-radius:12px}
tr.on td:last-child{border-start-end-radius:12px;border-end-end-radius:12px}
.notes{margin-top:18px;color:var(--ink-2);font-size:.9rem;display:grid;gap:6px}
:lang(he) .notes{font-size:1rem}
.notes b{color:var(--ink)}
@media (max-width:860px){.readout{grid-template-columns:repeat(var(--cols,3),1fr)}.ro.money{grid-column:1 / -1}}
@media (max-width:600px){.sizer-head .seg{display:grid;grid-template-columns:repeat(var(--segs,4),1fr);width:100%;border-radius:18px}.seg button{padding:0 4px;font-size:.92rem}.days .seg{display:grid;grid-template-columns:repeat(3,1fr);width:100%;justify-self:stretch}}
@media (max-width:480px){.ro{padding:14px 12px}.ro .k{font-size:.64rem;letter-spacing:.1em}:lang(he) .ro .k{font-size:.85rem}}

/* ---------- next ---------- */
.next-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(32px,6vw,80px);align-items:start;margin-top:clamp(32px,5vw,56px)}
.spectrum{margin-top:32px}
.spec-bar{position:relative;height:14px;border-radius:14px;background:linear-gradient(to var(--end),var(--lav-d),var(--lav),var(--lime))}
.spec-zone{position:absolute;left:25%;right:25%;top:-10px;bottom:-10px;border:2px dashed var(--ink);border-radius:14px}
.spec-zone span{position:absolute;left:50%;top:calc(100% + 10px);transform:translateX(-50%);white-space:nowrap;font-weight:700;font-size:.92rem;background:var(--ink);color:#fff;padding:5px 12px;border-radius:999px}
.spec-dot{position:absolute;top:50%;width:26px;height:26px;margin:-13px 0 0 -13px;border-radius:50%;background:#fff;border:3px solid var(--ink);left:50%;animation:roam 7s ease-in-out infinite}
@keyframes roam{0%,100%{left:36%}50%{left:64%}}
.spec-ends{display:flex;justify-content:space-between;gap:20px;margin-top:62px}
.spec-ends div{max-width:46%}
.spec-ends div:last-child{text-align:end}
.spec-ends b{display:block;font-family:var(--display);font-weight:800;font-size:1.2rem;line-height:1.2}
.spec-ends span{color:var(--ink-2);font-size:.95rem}
.commercials{margin-top:36px;padding:24px 26px;border-radius:20px;background:var(--lav-s)}
.commercials p{color:var(--ink-2)}
.commercials b{color:var(--ink)}
.talk{position:sticky;top:calc(var(--bar-h) + 26px);padding:clamp(26px,3.4vw,40px);border-radius:28px;background:var(--lime);border:2px solid var(--ink);box-shadow:0 8px 0 var(--ink)}
.talk h3{font-size:clamp(2rem,1.4rem + 2vw,3rem)}
.talk .body{color:var(--ink);margin-top:14px;font-size:1.02rem}
.contacts{list-style:none;padding:0;margin:24px 0 0;display:grid;gap:10px}
.contacts li{display:flex;align-items:center;gap:12px;padding-block:10px;padding-inline:16px 10px;border-radius:16px;background:#fff;border:1.5px solid var(--ink)}
.contacts .k{font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;font-weight:700;color:var(--ink-2);width:76px;flex:none}
:lang(he) .contacts .k{font-size:.95rem;letter-spacing:0;width:64px}
.contacts .v{font-weight:700;font-size:1.05rem;user-select:all;min-width:0;overflow-wrap:anywhere}
.contacts .copy{margin-inline-start:auto;flex:none;min-height:44px;padding:0 14px;border-radius:999px;border:1.5px solid var(--ink);background:var(--paper);font-weight:700;font-size:.88rem;cursor:pointer}
.talk .acts{display:flex;flex-wrap:wrap;gap:12px;margin-top:22px}
.talk .acts .btn{flex:1 1 auto}
@media (max-width:860px){.next-grid{grid-template-columns:1fr}.talk{position:static}}
@media (max-width:480px){
  .spec-zone span{font-size:.8rem}.spec-ends b{font-size:1.05rem}
  .contacts li{display:grid;grid-template-columns:1fr auto;column-gap:10px;row-gap:2px}
  .contacts .k,:lang(he) .contacts .k{width:auto;grid-column:1;font-size:.7rem}
  :lang(he) .contacts .k{font-size:.88rem}
  .contacts .v{grid-column:1;grid-row:2}
  .contacts .copy{grid-column:2;grid-row:1 / span 2;align-self:center}
}

.foot{padding-block:40px 56px;border-top:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;font-size:.74rem;letter-spacing:var(--track);text-transform:uppercase;color:var(--ink-2)}
.foot img{width:64px}
.foot a{color:inherit;display:inline-flex;align-items:center;min-height:44px;padding-inline:8px;text-transform:none;letter-spacing:0;font-weight:700;font-size:.92rem}
:lang(he) .foot{font-size:.9rem}

/* reveal: animates from a visible resting state */
.js [data-rv]{transform:translateY(28px);transition:transform .9s var(--spring);transition-delay:var(--d,0s)}
.js [data-rv].in{transform:none}
.js .memo-card[data-rv].in{transform:rotate(calc(var(--dir) * 1deg))}
.js .memo-card[data-rv].in:hover{transform:translateY(-4px)}
.js .clip[data-rv].in{transform:rotate(calc(var(--dir) * -1.5deg))}
@media (max-width:760px){.js .memo-card[data-rv].in,.js .clip[data-rv].in{transform:none}}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;transition-delay:0s!important}
  .js .print{transform:rotate(-2deg)!important}
  .js .print img{filter:none!important}
  .js .hero h1 .mark{background-size:100% .26em!important}
  .js [data-rv]{transform:none!important}
  .spec-dot{left:50%!important}
  .phone{--ry:0deg!important;--rx:0deg!important}
  .island.live{width:31.3%;height:68%}
}