/* Ask page: one short landing. Ask -> the question flies to the mascot -> the answer appears in his speech bubble.
   Brand: night / orange / cream, Noto Sans Hebrew 900 condensed display, one word on the brush label. Mascot is never rotated, stretched or recoloured (only moved / uniformly scaled). */
:root{--d:clamp(52px,17.5vw,104px);--o:#FD902A;--o2:#F2671C;--night:#0F0D1A;--cream:#F6EADC;--ink:#1B1519;--plum:#6B2F86;--mut:#CFC5BC;--link:#B1470A}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;overflow-x:clip}
body{min-height:100vh;overflow-x:clip;color:var(--cream);font-family:'Noto Sans Hebrew',Heebo,Arial,sans-serif;font-stretch:100%;line-height:1.4;
  background:radial-gradient(520px 420px at 12% 100%,rgba(107,47,134,.40),rgba(107,47,134,0) 70%),radial-gradient(760px 560px at 90% 0,#231d33,rgba(15,13,26,0) 70%),var(--night);background-attachment:fixed}
.wrap{width:min(100%,560px);margin:0 auto;padding:0 22px;text-align:center}
.top{padding:22px 0 0}
.top img{width:150px;height:auto;display:inline-block}
a{color:var(--o);text-underline-offset:4px;overflow-wrap:anywhere}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
#fx{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:45}

/* hero */
.lead{font-weight:420;font-size:clamp(19px,5.2vw,25px);line-height:1.25;color:var(--mut)}
.lead b{font-weight:800;color:var(--cream)}
.disp{font-weight:900;font-stretch:62.5%;font-size:var(--d);line-height:.94;letter-spacing:-.01em;color:var(--cream)}
.lbl{position:relative;display:inline-block;color:var(--ink);padding:.02em .16em .04em;z-index:0}
.lbl svg{position:absolute;z-index:-1;overflow:visible}
.hero{padding-top:14px}
.hero .disp{margin-top:8px}
.hero .disp.big{font-size:calc(var(--d)*1.2);margin-top:4px}

/* entrance: words rise, the brush paints "עונים" from right to left */
.rise{opacity:0;animation:rise .75s cubic-bezier(.2,.8,.2,1) forwards}
.r1{animation-delay:.08s}.r2{animation-delay:.22s}.r3{animation-delay:.5s}.r4{animation-delay:.7s}
@keyframes rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.paint svg{clip-path:inset(0 0 0 100%);animation:paint .9s .5s cubic-bezier(.65,0,.25,1) forwards}
@keyframes paint{to{clip-path:inset(0 0 0 0)}}

/* ask */
.ask{display:grid;grid-template-rows:1fr;margin-top:22px;transition:grid-template-rows .7s cubic-bezier(.6,0,.2,1)}
.ask.done{grid-template-rows:0fr;margin-top:0;pointer-events:none}
.askin{min-height:0;overflow:hidden;padding:6px 6px 0;margin:-6px -6px 0}
form{text-align:right}
label,.lg{display:block;font-weight:600;font-size:17px;color:var(--mut);margin:0 4px 8px}
.in{width:100%;display:block;border:0;border-radius:22px;background:var(--cream);color:var(--ink);font:500 20px/1.45 'Noto Sans Hebrew',Heebo,Arial,sans-serif;padding:16px 20px;-webkit-appearance:none;appearance:none}
.in::placeholder{color:#8a7f78;font-weight:420}
.in:focus{outline:3px solid var(--o);outline-offset:3px}
textarea.in{resize:none;min-height:92px;max-height:240px}
.in.sm{font-size:18px;padding:12px 18px;border-radius:16px}
.hint{display:flex;justify-content:space-between;margin:8px 6px 0;font-size:14px;color:#9d948c}
.opt{margin-top:14px}
.opt summary{list-style:none;cursor:pointer;display:inline-block;font-weight:800;font-size:16px;color:var(--o);text-decoration:underline;text-underline-offset:5px}
.opt summary::-webkit-details-marker{display:none}
.opt summary span{font-weight:420;color:#9d948c;text-decoration:none}
.optin{display:grid;gap:20px;margin-top:18px;animation:rise .5s both}
.chips{display:flex;flex-wrap:wrap;gap:10px}
.chip{display:inline-block;position:relative;margin:0}
.chip input{position:absolute;opacity:0;pointer-events:none;width:1px;height:1px}
.chip span{display:inline-block;border-radius:999px;padding:10px 17px;font-weight:700;font-size:16px;line-height:1.2;color:var(--cream);box-shadow:inset 0 0 0 2px rgba(246,234,220,.28);cursor:pointer;transition:background .15s,color .15s}
.chip:hover span{box-shadow:inset 0 0 0 2px rgba(246,234,220,.55)}
.chip input:checked+span{background:var(--o);color:var(--ink);box-shadow:none}
.chip input:focus-visible+span{outline:3px solid var(--cream);outline-offset:3px}
.btn{display:flex;align-items:center;justify-content:center;gap:12px;width:100%;margin-top:18px;border:0;border-radius:999px;background:var(--o);color:var(--ink);
  font:900 26px/1 'Noto Sans Hebrew',Heebo,Arial,sans-serif;padding:20px 24px;min-height:64px;cursor:pointer;text-decoration:none;transition:transform .15s,background .15s;box-shadow:0 14px 34px rgba(253,144,42,.28)}
.btn:hover{transform:translateY(-2px);background:#ffa03c}
.btn:active{transform:translateY(0) scale(.99)}
.btn:focus-visible{outline:3px solid var(--cream);outline-offset:3px}
.btn[disabled]{opacity:.75;cursor:wait;transform:none}
.btn svg{width:26px;height:26px;flex:none;transition:transform .25s}
.btn:hover svg{transform:translateX(-4px)}
.btn.ghost{background:transparent;color:var(--o);box-shadow:inset 0 0 0 2.5px var(--o)}
.btn.ghost:hover{background:var(--o);color:var(--ink)}
.btn.sm{width:auto;display:inline-flex;margin-top:14px;padding:13px 22px;min-height:0;font-size:18px}
.note{margin-top:12px;font-size:15px;line-height:1.5;color:#9d948c;text-align:center}
.err{margin-top:12px;font-weight:600;font-size:17px;color:#ffb066;text-align:center;min-height:1.3em}
.hp{position:absolute;opacity:0;pointer-events:none;height:0;width:0;overflow:hidden}

/* the question in flight */
.fly{position:fixed;left:0;top:0;z-index:50;pointer-events:none;max-width:300px;background:var(--o);color:var(--ink);font-weight:800;font-size:18px;line-height:1.3;border-radius:22px;padding:12px 18px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;box-shadow:0 16px 34px rgba(0,0,0,.45);will-change:transform}

/* mascot + his speech bubble = the answer */
.stage{margin-top:8px}
.mwrap{display:flex;justify-content:center;animation:float 5s ease-in-out infinite;position:relative;z-index:1}
.guide{display:block;width:min(42vw,165px);height:auto;filter:drop-shadow(0 18px 24px rgba(0,0,0,.45));will-change:transform}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
.bub{position:relative;margin-top:-6px;background:var(--cream);color:var(--ink);border-radius:30px;padding:22px 22px 24px;text-align:right;min-height:112px}
.bub::before{content:'';position:absolute;top:-13px;inset-inline-start:calc(50% - 14px);border:14px solid transparent;border-top:0;border-bottom-color:var(--cream)}
.bub>div{display:none}
.bub[data-s=ghost] .g,.bub[data-s=wait] .w,.bub[data-s=ans] .a{display:block}
.bub .g{color:#9a8f86;font-weight:600;font-size:19px;text-align:center;padding:16px 0}
.bub .w{text-align:center}
.dots{display:inline-flex;gap:8px;margin:6px 0 10px}
.dots i{width:12px;height:12px;border-radius:50%;background:var(--o);animation:bnc 1.15s ease-in-out infinite}
.dots i:nth-child(2){animation-delay:.16s}.dots i:nth-child(3){animation-delay:.32s}
@keyframes bnc{0%,70%,100%{transform:translateY(0);opacity:.55}35%{transform:translateY(-9px);opacity:1}}
.wt{font-weight:800;font-size:21px;line-height:1.35}
.wt span{display:block;margin-top:6px;font-weight:420;font-size:16px;color:#6d625b}
.qq{font-size:15px;line-height:1.45;color:#7a6f67;overflow-wrap:anywhere;margin:0 0 12px;padding-bottom:12px;border-bottom:1px solid rgba(27,21,25,.14);text-align:right}
.qq:empty{display:none}
.k{display:inline-block;font-weight:900;font-size:14px;color:var(--link);margin-bottom:6px}
.at{font-weight:450;font-size:clamp(19px,5vw,21px);line-height:1.65;white-space:pre-wrap;overflow-wrap:anywhere}
.at a{color:var(--link);direction:ltr;unicode-bidi:isolate}
.bub.pop{animation:popin .7s cubic-bezier(.2,1.2,.3,1)}
@keyframes popin{0%{transform:scale(.94);box-shadow:0 0 0 0 rgba(253,144,42,.7)}55%{transform:scale(1.02);box-shadow:0 0 0 14px rgba(253,144,42,0)}100%{transform:none;box-shadow:0 0 0 0 rgba(253,144,42,0)}}
.tabsq{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin:0 0 10px}
.tabsq button{border:0;border-radius:999px;background:transparent;color:var(--mut);box-shadow:inset 0 0 0 2px rgba(246,234,220,.28);font:700 15px 'Noto Sans Hebrew',Arial,sans-serif;padding:7px 14px;cursor:pointer;display:inline-flex;align-items:center;gap:7px}
.tabsq button.on{background:var(--cream);color:var(--ink);box-shadow:none}
.tabsq button i{width:9px;height:9px;border-radius:50%;background:#8a7f78}
.tabsq button i.done{background:var(--o)}
.tools{display:flex;gap:26px;justify-content:center;margin-top:16px}
.lnkbtn{background:none;border:0;color:var(--o);font:800 17px 'Noto Sans Hebrew',Arial,sans-serif;cursor:pointer;text-decoration:underline;text-underline-offset:5px}
.mylink{margin-top:16px;padding-top:16px;border-top:1px solid rgba(246,234,220,.14);font-size:16px;color:var(--mut)}
.lnk{display:flex;gap:8px;margin-top:12px}
.lnk input{flex:1;min-width:0;border:0;border-radius:16px;background:rgba(246,234,220,.1);color:var(--cream);font:500 16px/1.3 'Noto Sans Hebrew',Arial,sans-serif;padding:14px 16px;direction:ltr;text-align:left}
.lnk button{flex:none;border:0;border-radius:16px;background:var(--cream);color:var(--ink);font:800 17px 'Noto Sans Hebrew',Arial,sans-serif;padding:0 20px;cursor:pointer}

.more{margin-top:44px;padding:30px 0 48px;border-top:1px solid rgba(246,234,220,.14)}
.cta{display:inline-block;font-size:18px;line-height:1.5;color:var(--mut);text-decoration:none}
.cta b{color:var(--o);text-decoration:underline;text-underline-offset:5px;font-weight:800}

@media (min-width:700px){.top img{width:170px}.wrap{padding:0 32px}}
@media (prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important}
  .rise{opacity:1}.paint svg{clip-path:none}
}