/* הפרגונים בחמשת המקומות. כרטיסי ההודעות הם .pf של הדף עצמו, אז הם נראים בדיוק כמו אלה שכבר בדף. */
.lx2-spot{position:relative;margin-top:clamp(34px,5vw,56px)}
.lx2-sm{margin:2px 0 16px}

/* ---------- כרטיס דירוג ---------- */
.lx-rc{flex:0 0 auto;margin:0;direction:rtl;text-align:right;background:#fff;color:#16111c;border-radius:20px;
  padding:16px 18px 14px;width:var(--rc-w,268px);display:flex;flex-direction:column;gap:9px;
  box-shadow:0 26px 60px -30px rgba(0,0,0,.85),0 0 0 1px rgba(255,46,110,.14)}
.lx2-spot .lx-rc{width:auto}
.lx-rc__stars{display:flex;gap:3px}
.lx-rc__stars svg{width:18px;height:18px;fill:#ffb400}
.lx-rc__q{margin:0;font-size:17px;line-height:1.4;font-weight:700;color:#16111c}
.lx-rc__by{display:flex;align-items:center;gap:9px;margin-top:auto;padding-top:10px;border-top:1px solid #f1e6ea}
.lx-rc__ava{flex:0 0 auto;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;color:#fff;font-weight:700;font-size:14px;
  background:linear-gradient(135deg,#ff4d85,#e4155a)}
.lx-rc__who{display:flex;flex-direction:column;min-width:0;line-height:1.3}
.lx-rc__who b{font-size:15px;font-weight:700}
.lx-rc__who small{font-size:14px;color:#6f6470}

/* ---------- הודעה קולית: עיגול ניגון, גל ומשך, ומתחת התמליל ---------- */
.vo{display:flex;align-items:center;gap:9px;direction:ltr;margin-bottom:8px}
.vo__p{flex:none;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--a1-grad,var(--a1))}
.vo__p svg{width:14px;height:14px;fill:var(--a1-ink,#1a0010);margin-left:2px}
.vo__w{display:flex;align-items:center;gap:2.5px;flex:1;min-width:0;height:22px;overflow:hidden}
.vo__w i{flex:none;width:2.5px;border-radius:2px;background:rgba(var(--ivory-rgb),.42)}
.vo b{font-size:14px;font-weight:500;color:var(--t-low);font-variant-numeric:tabular-nums}
.bub--vo{min-width:min(100%,250px)}

/* ---------- רשת: כל שורה באותו גובה, והשורה האחרונה מתמלאת לרוחב, אז אין חור בסוף ---------- */
.lx2-grid{display:flex;flex-wrap:wrap;gap:14px;--c:1;--g:14px}
.lx2-grid>*{flex:1 0 calc((100% - (var(--c) - 1) * var(--g)) / var(--c) - .5px);min-width:0}
@media (min-width:760px){.lx2-msg .lx2-grid{--c:2;--g:18px;gap:18px}}
@media (min-width:1100px){.lx2-msg .lx2-grid{--c:3}}
.lx2-rate .lx2-grid{--c:2;--g:12px;gap:12px}
@media (min-width:700px){.lx2-rate .lx2-grid{--c:3;--g:16px;gap:16px}}
.lx2-sm .lx2-grid{--c:2;--g:8px;gap:8px}
@media (max-width:480px){.lx2-rate:not(.lx2-sm) .lx2-grid .lx-rc{padding:14px 13px 12px}.lx2-rate:not(.lx2-sm) .lx2-grid .lx-rc__q{font-size:15.5px}}

/* ---------- רשימה בכרטיס אחד ---------- */
.lx2-list{max-width:640px;margin-inline:auto;border-radius:22px;padding:4px 22px;
  background:linear-gradient(168deg,rgba(255,255,255,.07),rgba(255,255,255,.022) 56%),var(--sf-1);
  border:1px solid rgba(var(--ivory-rgb),.1);box-shadow:0 26px 52px -34px rgba(0,0,0,.95)}
.lx2-spot .lx2-list>.lx2-flat{background:none;border:0;box-shadow:none;border-radius:0;padding:20px 0;border-bottom:1px solid rgba(var(--ivory-rgb),.09)}
.lx2-spot .lx2-list>.lx2-flat:last-child{border-bottom:0}
.lx2-list>.lx2-flat::after{display:none}
.lx2-rate .lx2-list{background:#fff;border:0;max-width:520px;padding:2px 20px}
.lx2-spot.lx2-rate .lx2-list>.lx2-flat{border-bottom:1px solid #f1e6ea;padding:16px 0}
.lx2-spot.lx2-rate .lx2-list>.lx2-flat:last-child{border-bottom:0}
.lx2-rate .lx2-list .lx-rc__by{border-top:0;padding-top:2px}

/* ---------- אחד שמתחלף ---------- */
.lx2-fade,.lx2-stackw,.lx2-tick{max-width:600px;margin-inline:auto}
.lx2-rate .lx2-fade,.lx2-rate .lx2-stackw,.lx2-rate .lx2-tick{max-width:420px}
/* חותך את מה שגולש, כדי שכרטיס ארוך לא יעלה על הנקודות בזמן שהקופסה גדלה. הריפוד שומר על הצל */
.lx2-stage{position:relative;cursor:pointer;transition:height .6s ease;overflow:hidden;box-sizing:content-box;padding:2px 2px 18px;margin:-2px -2px -18px}
.lx2-stage>*{position:absolute;top:2px;left:2px;right:2px;opacity:0;visibility:hidden;transition:opacity .7s ease,visibility 0s .7s}
.lx2-stage>.on{opacity:1;visibility:visible;transition:opacity .7s ease,visibility 0s}
.lx2-dots{display:flex;justify-content:center;gap:8px;margin-top:16px;direction:rtl}
.lx2-dots i{width:7px;height:7px;border-radius:999px;background:rgba(var(--ivory-rgb),.22);cursor:pointer;transition:width .4s,background .4s}
.lx2-dots i.on{width:22px;background:var(--a1)}

/* ---------- ערימה: הכרטיס בגובה הטבעי שלו, ושני דפים מאחוריו שתמיד באותו גודל ---------- */
.lx2-stack{position:relative;box-sizing:content-box;padding-bottom:30px;cursor:pointer;transition:height .5s ease}
.lx2-stk{position:absolute;top:0;left:0;right:0;isolation:isolate;opacity:0;visibility:hidden;transform:translateY(-10px);
  transition:opacity .5s,transform .5s,visibility 0s .5s}
.lx2-stk.on{opacity:1;visibility:visible;transform:none;transition:opacity .5s .15s,transform .5s .15s,visibility 0s}
.lx2-stk.lx2-out{visibility:visible;opacity:0;transform:translateY(54px);transition:opacity .45s,transform .45s}
.lx2-stk__g{position:absolute;inset:0;z-index:-1;border-radius:22px;transform-origin:50% 100%;
  background:linear-gradient(168deg,rgba(255,255,255,.06),rgba(255,255,255,.02)),var(--sf-1);border:1px solid rgba(var(--ivory-rgb),.12)}
.lx2-stk__g1{transform:translateY(13px) scale(.95);filter:brightness(.8)}
.lx2-stk__g2{transform:translateY(26px) scale(.9);opacity:.55}
.lx2-rate .lx2-stk__g{background:#fff;border:0;border-radius:20px}
.lx2-rate .lx2-stk__g1{filter:none;opacity:.7}
.lx2-rate .lx2-stk__g2{opacity:.4}

/* ---------- עמודה שזזה למעלה ---------- */
.lx2-tick{height:var(--h,560px);overflow:hidden;
  -webkit-mask:linear-gradient(transparent,#000 10%,#000 90%,transparent);mask:linear-gradient(transparent,#000 10%,#000 90%,transparent)}
.lx2-rate .lx2-tick{--h:460px}
.lx2-tick__col{animation:lx2Up var(--dur,40s) linear infinite}
.lx2-tick__col>*{margin-bottom:14px}
.lx2-tick:hover .lx2-tick__col,.lx2-tick:active .lx2-tick__col{animation-play-state:paused}
@keyframes lx2Up{to{transform:translateY(-50%)}}

/* ---------- בתוך טלפון ---------- */
.lx2-ph{position:relative;width:min(330px,86vw);height:620px;margin-inline:auto;padding:11px;border-radius:50px;
  background:linear-gradient(160deg,#2b2131,#0b080d);box-shadow:0 0 0 1.5px rgba(var(--ivory-rgb),.16),0 50px 90px -40px #000}
.lx2-ph::before{content:"";position:absolute;z-index:2;top:22px;left:50%;width:92px;height:25px;margin-left:-46px;border-radius:20px;background:#000}
.lx2-ph__scr{height:100%;border-radius:40px;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end;gap:10px;padding:60px 12px 18px;
  background:radial-gradient(120% 55% at 50% 0%,rgba(var(--a1-rgb),.16),transparent 62%),#130e17;
  -webkit-mask:linear-gradient(transparent 0,transparent 50px,#000 132px);mask:linear-gradient(transparent 0,transparent 50px,#000 132px)}
.lx2-ph__it{display:none;flex:none}
.lx2-ph__it.on{display:flex;animation:lx2In .55s cubic-bezier(.2,.8,.2,1)}
.lx2-ph__it.pf.on{display:block}
@keyframes lx2In{from{opacity:0;transform:translateY(20px) scale(.96)}}
.lx2-ph .pf{padding:14px;border-radius:18px}
.lx2-ph .pf__txt,.lx2-ph .bub p{font-size:15px;line-height:1.55}
.lx2-ph .pf__head{gap:9px;margin-bottom:9px}
.lx2-ph .pf__ava{width:30px;height:30px}
.lx2-ph .bub{max-width:100%;padding:8px 11px 6px}
.lx2-ph .lx-rc{padding:13px 14px 12px;gap:7px}
.lx2-ph .lx-rc__q{font-size:16px}

/* ---------- ציטוטים גדולים ---------- */
.lx2-quotes{max-width:720px;margin-inline:auto}
.lx2-quotes>.pf,.lx2-quotes>.lx-rc{display:flex;flex-direction:column;align-items:center;text-align:center;width:auto;
  background:none;border:0;box-shadow:none;border-radius:0;padding:30px 0;border-bottom:1px solid rgba(var(--ivory-rgb),.1)}
.lx2-quotes>*:last-child{border-bottom:0}
.lx2-quotes>.pf::after{display:none}
.lx2-quotes>.pf::before,.lx2-quotes>.lx-rc::before{content:"\201D";display:block;height:30px;font:700 72px/1 Georgia,serif;color:var(--a1);opacity:.75}
.lx2-quotes>.lx-rc::before{display:none}
.lx2-quotes .pf__head{order:2;margin:16px 0 0}
.lx2-quotes .pf__meta{display:none}
.lx2-quotes .pf__txt,.lx2-quotes .bub p{font-size:clamp(21px,2.6vw,27px);line-height:1.5;font-weight:500;color:var(--ivory)}
.lx2-quotes .lx2-long .pf__txt,.lx2-quotes .lx2-long .bub p{font-size:clamp(18px,2vw,21px)}
.lx2-quotes .pf__chat{justify-items:center;gap:12px}
.lx2-quotes .bub{background:none;border:0;padding:0;max-width:none}
.lx2-quotes .bub time{display:none}
.lx2-quotes .vo{justify-content:center;width:min(100%,280px);margin-inline:auto}
.lx2-quotes .lx-rc{color:var(--ivory);gap:14px}
.lx2-quotes .lx-rc__q{color:var(--ivory);font-size:clamp(22px,2.8vw,29px);font-weight:500}
.lx2-quotes .lx-rc__stars svg{width:22px;height:22px}
.lx2-quotes .lx-rc__by{border-top:0;padding-top:0;margin-top:0}
.lx2-quotes .lx-rc__who{text-align:start}
.lx2-quotes .lx-rc__who small{color:var(--t-low)}

/* ---------- פתקים על לוח ---------- */
.lx2-notes{display:flex;flex-wrap:wrap;justify-content:center;align-items:flex-start;gap:26px 16px;padding:12px 6px 18px;--c:1}
.lx2-notes>*{flex:0 0 calc((100% - (var(--c) - 1) * 16px) / var(--c) - .5px);min-width:0}
@media (min-width:760px){.lx2-msg .lx2-notes{--c:2}}
@media (min-width:1100px){.lx2-msg .lx2-notes{--c:3}}
.lx2-rate .lx2-notes{--c:2}
@media (min-width:700px){.lx2-rate .lx2-notes{--c:3}}
.lx2-notes>*{position:relative;overflow:visible;transform:rotate(var(--r,0deg));border:0;border-radius:6px;box-shadow:0 22px 34px -20px rgba(0,0,0,.9);
  --ink:#1d1620;background:#fff4d2;color:var(--ink)}
.lx2-notes>*:nth-child(3n+2){background:#ffe3ec}
.lx2-notes>*:nth-child(3n){background:#ece6ff}
.lx2-notes>*:nth-child(4n+1){--r:-1.8deg}.lx2-notes>*:nth-child(4n+2){--r:1.5deg}.lx2-notes>*:nth-child(4n+3){--r:.9deg}.lx2-notes>*:nth-child(4n){--r:-1.2deg}
.lx2-notes>*::after{content:"";display:block;position:absolute;inset:auto;top:-10px;left:50%;width:66px;height:20px;margin-left:-33px;background:rgba(255,255,255,.6);transform:rotate(-3deg);box-shadow:0 1px 3px rgba(0,0,0,.18)}
.lx2-notes .pf__txt,.lx2-notes .bub p,.lx2-notes .pf .hl{color:var(--ink)}
.lx2-notes .pf__name{background:linear-gradient(90deg,rgba(29,22,32,.5),rgba(29,22,32,.2))}
.lx2-notes .pf__meta,.lx2-notes .bub time,.lx2-notes .vo b{color:rgba(29,22,32,.55)}
.lx2-notes .pf__meta svg{fill:rgba(29,22,32,.4)}
.lx2-notes .bub{background:rgba(29,22,32,.06);border-color:rgba(29,22,32,.08)}
.lx2-notes .vo__w i{background:rgba(29,22,32,.32)}
.lx2-notes .lx-rc__by{border-top-color:rgba(29,22,32,.1)}

/* ---------- פסיפס ---------- */
.lx2-bento>.lx2-big{margin:0 auto 12px;max-width:760px}
.lx2-bento>.lx2-big .pf__txt,.lx2-bento>.lx2-big .bub p{font-size:clamp(19px,2.3vw,23px);font-weight:500}
.lx2-bento>.lx-rc.lx2-big .lx-rc__q{font-size:clamp(22px,2.6vw,28px)}
.lx2-bento__cols{columns:2;column-gap:12px}
.lx2-bento__cols>*{break-inside:avoid;margin-bottom:12px;width:auto}
@media (min-width:900px){.lx2-bento__cols{columns:3;column-gap:16px}.lx2-bento__cols>*{margin-bottom:16px}}
@media (max-width:600px){.lx2-msg .lx2-bento__cols{columns:1}}
/* דירוגים: פסיפס אמיתי. במחשב הגדול תופס ריבוע של ארבעה, בטלפון שורה שלמה */
.lx2-rate .lx2-bento{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.lx2-rate .lx2-bento__cols{display:contents}
.lx2-rate .lx2-bento>.lx2-big{grid-column:1/-1;margin:0;max-width:none}
.lx2-rate .lx2-bento__cols>*{margin:0}
.lx2-rate .lx2-bento__cols>*:last-child:nth-child(odd){grid-column:1/-1}
@media (min-width:760px){
  .lx2-rate .lx2-bento{grid-template-columns:repeat(3,1fr);gap:16px}
  .lx2-rate .lx2-bento>.lx2-big{grid-column:span 2;grid-row:span 2;justify-content:center;padding:28px 30px}
  .lx2-rate .lx2-bento>.lx2-big .lx-rc__by{margin-top:0}
  .lx2-rate .lx2-bento__cols>*:last-child:nth-child(odd){grid-column:auto}
}
@media (max-width:600px){
  .lx2-msg .lx2-bento__cols .pf{padding:14px 13px;border-radius:16px}
  .lx2-msg .lx2-bento__cols .pf__txt,.lx2-msg .lx2-bento__cols .bub p{font-size:14.5px;line-height:1.55}
  .lx2-msg .lx2-bento__cols .pf__head{gap:8px;margin-bottom:9px}
  .lx2-msg .lx2-bento__cols .pf__ava{width:28px;height:28px}
  .lx2-msg .lx2-bento__cols .bub{padding:8px 10px 6px;max-width:100%}
  .lx2-msg .lx2-bento__cols .bub--vo{min-width:0}
  .lx2-rate .lx2-bento__cols .lx-rc{padding:13px 12px 12px}
  .lx2-rate .lx2-bento__cols .lx-rc__q{font-size:15.5px}
}

/* ---------- החלקה ביד ---------- */
.lx2-sw{display:flex;align-items:flex-start;gap:12px;overflow-x:auto;overflow-y:hidden;box-sizing:content-box;transition:height .35s ease;scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch;
  margin-inline:calc(50% - 50vw);padding:6px max(10vw,calc(50vw - 200px)) 12px}
.lx2-sw::-webkit-scrollbar{display:none}
.lx2-sw>*{flex:0 0 min(80vw,400px);scroll-snap-align:center;transition:opacity .35s}
.lx2-sw>.lx2-side{opacity:.4}
.lx2-rate .lx2-sw{padding-inline:max(15vw,calc(50vw - 160px))}
/* במחשב הדף בזום, אז השורה נשארת ברוחב התוכן ודועכת בצדדים במקום להיחתך */
@media (min-width:1024px){
  .lx2-sw,.lx2-rate .lx2-sw{margin-inline:0;padding-inline:calc(50% - 200px);
    -webkit-mask:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
  .lx2-rate .lx2-sw{padding-inline:calc(50% - 160px)}
}
.lx2-rate .lx2-sw>*{flex-basis:min(70vw,320px)}

/* ---------- שורה שזזה (רק בכרטיס ההרשמה) ---------- */
.lx-mq{direction:ltr;overflow:hidden;padding-block:10px;margin-inline:-6px;
  -webkit-mask:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);mask:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.lx-mq__track{display:flex;align-items:center;width:max-content;animation:lxMq var(--dur,60s) linear infinite}
.lx-mq__track>*{margin-right:12px}
.lx-mq:hover .lx-mq__track{animation-play-state:paused}
.lx-mq .lx-rc{width:220px}
@keyframes lxMq{to{transform:translateX(-50%)}}

/* ---------- בתוך כרטיס ההרשמה: הכל קטן יותר ---------- */
.lx2-sm .lx-rc{padding:12px 14px 11px;gap:6px;border-radius:16px;box-shadow:0 18px 40px -26px rgba(0,0,0,.8)}
.lx2-sm .lx-rc__q{font-size:15px}
.lx2-sm .lx-rc__stars svg{width:15px;height:15px}
.lx2-sm .lx-rc__ava{width:26px;height:26px;font-size:13px}
.lx2-sm .lx-rc__who b{font-size:14px}
.lx2-sm .lx-rc__who small{font-size:14px}
.lx2-sm .lx2-fade,.lx2-sm .lx2-stackw{max-width:360px}
.lx2-sm .lx2-stack{padding-bottom:20px}
.lx2-sm .lx2-stk__g{border-radius:16px}
.lx2-sm .lx2-stk__g1{transform:translateY(8px) scale(.95)}
.lx2-sm .lx2-stk__g2{transform:translateY(16px) scale(.9)}
.lx2-sm .lx2-dots{margin-top:10px}
.lx2-sm .lx2-list{padding:0 14px;border-radius:16px}
.lx2-spot.lx2-sm .lx2-list>.lx2-flat{padding:10px 0}

@media (prefers-reduced-motion:reduce){.lx2-tick__col,.lx-mq__track{animation:none}.lx2-tick{overflow-y:auto}}