/* ============================================================
   WASILBOX · v3 — premium pass
   Display: Alexandria · Body: IBM Plex Sans Arabic
   ============================================================ */
/* v37: fonts are linked from <head> (preconnect + link) instead of an @import chain */

:root{
  --ink:#0A1113; --ink-2:#3C484C; --ink-3:#69767A;
  --paper:#FFFFFF; --cream:#F6F4EF; --line:#E5E7E5;
  --lime:#D4EC5A; --lime-2:#C6E23E;
  --wa:#25D366; --ig:#E1306C; --ms:#0084FF; --fb:#1877F2;

  --fs-0:clamp(.8rem,.77rem + .15vw,.88rem);
  --fs-1:clamp(.95rem,.9rem + .2vw,1.06rem);
  --fs-2:clamp(1.15rem,1.05rem + .55vw,1.5rem);
  --fs-3:clamp(2.3rem,1.5rem + 4vw,4.8rem);

  --wrap:1280px;
  --r-lg:32px; --r-md:16px; --r-sm:10px;
  --ease:cubic-bezier(.22,.61,.36,1);
  --spring:cubic-bezier(.34,1.56,.64,1);
  --disp:'Alexandria','IBM Plex Sans Arabic',sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);
  font-family:'IBM Plex Sans Arabic',system-ui,sans-serif;
  font-size:var(--fs-1);line-height:1.75;}
img,svg,video{max-width:100%;display:block}
a{color:inherit} button{font:inherit}
:focus-visible{outline:2.5px solid var(--ink);outline-offset:3px;border-radius:4px}
::selection{background:var(--lime);color:var(--ink)}

[data-lang]{display:none}
html[lang="ar"] [data-lang="ar"]{display:revert}
html[lang="en"] [data-lang="en"]{display:revert}

.wrap{width:min(var(--wrap),100%);margin-inline:auto;padding-inline:clamp(1rem,4vw,2.5rem)}

/* ============================================================ HEADER */
.hdr{position:sticky;top:0;z-index:100;background:rgba(255,255,255,.92);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-block-end:1px solid transparent;
  transition:border-color .25s var(--ease),box-shadow .25s var(--ease)}
.hdr.scrolled{border-color:var(--line);box-shadow:0 10px 30px -22px rgba(10,17,19,.35)}

.hdr-top{height:38px;display:flex;align-items:center;justify-content:flex-end;gap:1.4rem;
  font-size:var(--fs-0);color:var(--ink-2);
  transition:height .25s var(--ease),opacity .2s}
.hdr.scrolled .hdr-top{height:0;opacity:0;overflow:hidden;pointer-events:none}
.hdr-top a{display:inline-flex;align-items:center;gap:.38rem;color:inherit;text-decoration:none;font-weight:500}
.hdr-top a:hover{color:var(--ink)}
.hdr-top svg{width:14px;height:14px}

.lang-toggle{display:inline-flex;align-items:stretch;border:1px solid var(--line);
  border-radius:999px;overflow:hidden;background:var(--paper);cursor:pointer;padding:2px;gap:2px}
.lang-toggle .opt{padding:.18rem .66rem;font-size:.76rem;font-weight:700;color:var(--ink-3);
  border-radius:999px;line-height:1.6;transition:background .2s,color .2s}
.lang-toggle .opt.on{background:var(--ink);color:var(--paper)}
.lang-toggle:hover .opt:not(.on){color:var(--ink)}

.hdr-main{height:92px;display:flex;align-items:center;gap:clamp(1rem,3vw,3rem);
  transition:height .25s var(--ease)}
.hdr.scrolled .hdr-main{height:66px}

/* logo — horizontal lockup, strong */
.logo{display:flex;align-items:center;gap:11px;text-decoration:none;line-height:1}
.logo svg{width:42px;height:24px;overflow:visible;flex:0 0 auto;
  transition:width .25s var(--ease),height .25s var(--ease)}
.hdr.scrolled .logo svg{width:36px;height:21px}
.logo b{font-family:var(--disp);font-weight:800;font-size:1.42rem;letter-spacing:-.02em;color:var(--ink)}
.logo b i{font-style:normal;color:var(--lime-2)}

.nav{display:flex;align-items:center;gap:clamp(.1rem,1vw,.7rem);margin-inline-end:auto}
.nav-item{position:relative}
.nav-btn{display:inline-flex;align-items:center;gap:.4rem;background:none;border:0;cursor:pointer;white-space:nowrap;
  color:var(--ink);font-weight:600;font-size:.96rem;padding:.55rem .7rem;border-radius:10px;text-decoration:none;
  transition:background .18s}
.nav-btn:hover{background:var(--cream)}
@media (max-width:1240px){.nav-btn{font-size:.9rem;padding:.5rem .55rem} .hdr-main{gap:clamp(.7rem,1.6vw,1.6rem)} .hdr-cta .btn{padding:.7rem 1.15rem;font-size:.92rem}}
.nav-btn .car{width:11px;height:11px;transition:transform .28s var(--ease)}
.nav-item:hover .car,.nav-item:focus-within .car{transform:rotate(180deg)}

.dd{position:absolute;inset-inline-start:0;top:calc(100% + 12px);min-width:320px;background:var(--paper);
  border:1px solid var(--line);border-radius:var(--r-md);
  box-shadow:0 30px 70px -28px rgba(10,17,19,.35);
  padding:.65rem;opacity:0;visibility:hidden;transform:translateY(12px) scale(.97);
  transform-origin:top;transition:opacity .25s var(--ease),transform .25s var(--ease),visibility .25s;z-index:60}
.nav-item:hover .dd,.nav-item:focus-within .dd{opacity:1;visibility:visible;transform:translateY(0) scale(1)}
.dd a{display:block;padding:.66rem .8rem;border-radius:var(--r-sm);text-decoration:none;
  opacity:0;translate:0 8px;transition:background .15s,opacity .3s var(--ease),translate .3s var(--ease)}
.nav-item:hover .dd a,.nav-item:focus-within .dd a{opacity:1;translate:0 0}
.dd a:nth-child(1){transition-delay:.03s}.dd a:nth-child(2){transition-delay:.07s}
.dd a:nth-child(3){transition-delay:.11s}.dd a:nth-child(4){transition-delay:.15s}
.dd a:nth-child(5){transition-delay:.19s}
.dd a:hover{background:var(--cream)}
.dd .t{font-weight:700;font-size:var(--fs-1);line-height:1.35}
.dd .d{font-size:var(--fs-0);color:var(--ink-3);line-height:1.45;margin-top:2px}

.hdr-cta{display:flex;align-items:center;gap:.65rem}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  font-weight:700;font-size:var(--fs-1);text-decoration:none;cursor:pointer;
  border-radius:999px;padding:.78rem 1.6rem;border:1.5px solid transparent;
  transition:transform .3s var(--spring),background .18s,border-color .18s,box-shadow .25s;white-space:nowrap}
.btn:active{transform:scale(.96)}
.btn-lime{background:var(--lime);color:var(--ink)}
.btn-lime:hover{background:var(--lime-2);box-shadow:0 14px 30px -12px rgba(178,208,35,.75);transform:translateY(-2px)}
.btn-line{border-color:var(--ink);color:var(--ink);background:transparent}
.btn-line:hover{background:var(--ink);color:var(--paper)}
.btn .arr{width:16px;height:16px;transition:transform .3s var(--spring)}
html[dir="rtl"] .btn .arr{scale:-1 1}
.btn:hover .arr{transform:translateX(4px)}
html[dir="rtl"] .btn:hover .arr{transform:translateX(-4px)}

.burger{display:none;background:none;border:0;cursor:pointer;padding:.5rem;margin-inline-start:.2rem}
.burger svg{width:27px;height:27px}
.mobile{display:none}

@media (max-width:1060px){
  .hdr-top{display:none}
  .nav{display:none}
  .hdr-main{height:70px;justify-content:space-between}
  .hdr.scrolled .hdr-main{height:62px}
  .hdr-cta .btn-line{display:none}
  .burger{display:block}
  .mobile{display:block;position:fixed;inset:0;top:70px;background:var(--paper);
    padding:1.4rem clamp(1.1rem,5vw,2rem) 2.4rem;overflow:auto;z-index:90;
    opacity:0;visibility:hidden;transform:translateY(-10px);
    transition:opacity .25s var(--ease),transform .25s var(--ease),visibility .25s}
  body.menu-open .mobile{opacity:1;visibility:visible;transform:none}
  body.menu-open{overflow:hidden}
  .m-group{border-block-end:1px solid var(--line)}
  .m-head{width:100%;display:flex;align-items:center;justify-content:space-between;
    background:none;border:0;cursor:pointer;padding:1.1rem .2rem;
    font-family:var(--disp);font-weight:700;font-size:1.3rem;color:var(--ink)}
  .m-head .car{width:14px;height:14px;transition:transform .28s var(--ease)}
  .m-group.open .m-head .car{transform:rotate(180deg)}
  .m-body{display:grid;grid-template-rows:0fr;transition:grid-template-rows .32s var(--ease)}
  .m-group.open .m-body{grid-template-rows:1fr}
  .m-body>div{overflow:hidden}
  .m-body a{display:block;padding:.6rem .4rem .6rem 1rem;text-decoration:none;color:var(--ink-2);font-weight:500}
  html[dir="rtl"] .m-body a{padding:.6rem 1rem .6rem .4rem}
  .m-links{display:flex;flex-direction:column;gap:.15rem;padding-block:1.1rem;align-items:flex-start}
  .m-links a{padding:.55rem .2rem;text-decoration:none;font-weight:700;font-size:1.05rem}
  .m-links .lang-toggle{margin-block-start:.7rem;align-self:flex-start}
  .m-links .lang-toggle .opt{padding:.35rem .95rem;font-size:.9rem}
  .m-cta{display:flex;flex-direction:column;gap:.75rem;padding-block:1.3rem}
  /* staggered entrance */
  .mobile>*{opacity:0;translate:0 14px;transition:opacity .4s var(--ease),translate .4s var(--ease)}
  body.menu-open .mobile>*{opacity:1;translate:0 0}
  body.menu-open .mobile>*:nth-child(1){transition-delay:.05s}
  body.menu-open .mobile>*:nth-child(2){transition-delay:.1s}
  body.menu-open .mobile>*:nth-child(3){transition-delay:.15s}
  body.menu-open .mobile>*:nth-child(4){transition-delay:.2s}
  body.menu-open .mobile>*:nth-child(5){transition-delay:.25s}
}

/* ============================================================ HERO */
.hero{padding-block:clamp(.5rem,1.5vw,1rem) clamp(1.6rem,4vw,2.6rem)}
.hero-wrap{width:min(1600px,100% - clamp(14px,2.6vw,48px));margin-inline:auto}
.hero-card{position:relative;border-radius:var(--r-lg);overflow:hidden;background:var(--ink);
  min-height:clamp(620px,86vh,900px);display:flex;align-items:center;
  box-shadow:0 40px 90px -40px rgba(10,17,19,.5)}
.hero-media{position:absolute;inset:0;overflow:hidden}
.hero-media video,.hero-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transform:translate3d(var(--vx,0px),var(--vy,0px),0) scale(1.09);
  transition:transform .35s ease-out;will-change:transform;
  filter:saturate(1.08) contrast(1.05) brightness(.97)}
.hero-shade{position:absolute;inset:0;z-index:1;
  background:linear-gradient(to left,rgba(6,10,12,.85) 0%,rgba(6,10,12,.5) 46%,rgba(6,10,12,.04) 80%)}
html[dir="ltr"] .hero-shade{
  background:linear-gradient(to right,rgba(6,10,12,.88) 0%,rgba(6,10,12,.55) 46%,rgba(6,10,12,.12) 80%)}
html[dir="ltr"] .hero-media video,html[dir="ltr"] .hero-media img{transform:translate3d(calc(var(--vx,0px) * -1),var(--vy,0px),0) scale(1.09) scaleX(-1)}
/* film grain */
.grain{position:absolute;inset:0;z-index:1;pointer-events:none;opacity:.5;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .06 0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E")}
.spot{position:absolute;inset:0;z-index:1;pointer-events:none;opacity:0;
  transition:opacity .5s var(--ease);
  background:radial-gradient(300px circle at var(--mx,60%) var(--my,40%),rgba(255,255,255,.16),transparent 70%);
  mix-blend-mode:screen}
.hero-card:hover .spot{opacity:1}

.hero-inner{position:relative;z-index:2;width:100%;
  display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);
  gap:2rem;align-items:center;
  padding:clamp(1.7rem,4.5vw,4.6rem)}
.hero-copy{color:#fff;max-width:37rem}
.hero-copy>*{opacity:0;translate:0 30px;animation:rise .85s var(--ease) forwards}
.hero-copy>*:nth-child(1){animation-delay:.12s}
.hero-copy>*:nth-child(2){animation-delay:.26s}
.hero-copy>*:nth-child(3){animation-delay:.42s}
.hero-copy>*:nth-child(4){animation-delay:.55s}
.hero-copy>*:nth-child(5){animation-delay:.66s}
.hero-copy>*:nth-child(6){animation-delay:.76s}
@keyframes rise{to{opacity:1;translate:0 0}}

.eyebrow{display:inline-flex;align-items:center;gap:.55rem;
  font-size:var(--fs-0);font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:#EDF1EE;margin:0 0 1.3rem}
.eyebrow::before{content:"";width:26px;height:2px;background:var(--lime);border-radius:2px}

.hero h1{font-family:var(--disp);font-size:var(--fs-3);font-weight:700;line-height:1.14;
  letter-spacing:-.02em;margin:0 0 1.2rem;text-wrap:balance}
.hero h1 .lime{color:var(--lime);position:relative;display:inline-block}
.hero h1 .lime::after{content:"";position:absolute;inset-inline:0;bottom:-.06em;height:3px;
  background:var(--lime);opacity:.55;border-radius:3px;
  transform:scaleX(0);transform-origin:inline-start;
  animation:sweep .9s var(--ease) 1.25s forwards}
@keyframes sweep{to{transform:scaleX(1)}}

.hero-sub{font-size:var(--fs-2);font-weight:400;line-height:1.65;color:#DFE5E2;margin:0 0 1.7rem;max-width:31rem}

.trial-note{display:flex;align-items:center;gap:.5rem;font-size:var(--fs-0);font-weight:600;color:#fff;margin:0 0 .75rem}
.trial-note svg{width:17px;height:17px;color:var(--lime)}

.hero-form{display:flex;gap:.65rem;flex-wrap:wrap;max-width:31rem}
.hero-form input{flex:1 1 230px;min-width:0;font:inherit;font-size:var(--fs-1);
  padding:.85rem 1.2rem;border-radius:999px;border:1.5px solid rgba(255,255,255,.35);
  background:rgba(255,255,255,.97);color:var(--ink)}
.hero-form input::placeholder{color:var(--ink-3)}
.hero-form input:focus{outline:3px solid var(--lime);outline-offset:1px;border-color:transparent}
.hero-privacy{font-size:.74rem;color:#B7C0BC;margin:.75rem 0 0}

/* floating cluster */
.cluster{position:relative;z-index:2;height:100%;min-height:420px;perspective:1200px;translate:0 var(--cy,0)}
.tilt{position:absolute;inset:0;transform-style:preserve-3d;transition:transform .18s ease-out}
.bub{position:absolute;display:flex;gap:.65rem;align-items:flex-start;
  background:#fff;border:1px solid rgba(10,17,19,.06);border-radius:18px;
  padding:.78rem .95rem;box-shadow:0 26px 50px -20px rgba(3,8,10,.6);
  max-width:252px;opacity:0;
  animation:pop .8s var(--spring) forwards, floaty 6.5s ease-in-out infinite}
.bub .ic{width:34px;height:34px;border-radius:11px;flex:0 0 auto;display:grid;place-items:center;
  box-shadow:0 6px 14px -6px rgba(0,0,0,.35)}
.bub .ic svg{width:19px;height:19px;color:#fff}
.bub .nm{font-size:.78rem;font-weight:700;line-height:1.25}
.bub .tm{font-size:.66rem;color:var(--ink-3);font-weight:500;margin-inline-start:.4rem}
.bub .tx{font-size:.8rem;color:var(--ink-2);line-height:1.5;margin-top:1px}
.ic.wa{background:var(--wa)} .ic.ig{background:linear-gradient(45deg,#F58529,#DD2A7B,#8134AF)} .ic.ms{background:var(--ms)}

.b1{top:7%;inset-inline-end:10%;animation-delay:.4s,1.2s;
  transform:translate3d(var(--px1,0px),var(--py1,0px),70px)}
.b2{top:35%;inset-inline-end:38%;animation-delay:1s,1.8s;
  transform:translate3d(var(--px2,0px),var(--py2,0px),120px)}
.b3{top:62%;inset-inline-end:42%;animation-delay:1.6s,2.4s;
  transform:translate3d(var(--px3,0px),var(--py3,0px),45px)}

.mini{position:absolute;bottom:5%;inset-inline-end:2%;width:258px;
  background:#fff;border-radius:18px;overflow:hidden;
  border:1px solid rgba(10,17,19,.06);
  box-shadow:0 34px 70px -24px rgba(3,8,10,.65);
  opacity:0;animation:pop .8s var(--spring) 2.2s forwards, floaty 7.5s ease-in-out 3s infinite;
  transform:translate3d(var(--px4,0px),var(--py4,0px),95px)}
.mini-h{display:flex;align-items:center;gap:.5rem;padding:.65rem .85rem;border-block-end:1px solid var(--line);background:var(--cream)}
.mini-h b{font-size:.8rem}
.mini-h .n{margin-inline-start:auto;background:var(--lime);color:var(--ink);font-size:.68rem;font-weight:800;
  border-radius:999px;min-width:20px;height:20px;display:grid;place-items:center;padding-inline:5px}
.mini-r{display:flex;align-items:center;gap:.55rem;padding:.55rem .85rem;border-block-end:1px solid #F2F3F1}
.mini-r:last-child{border:0}
.mini-r i{width:8px;height:8px;border-radius:50%;flex:0 0 auto}
.mini-r span{font-size:.75rem;color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

@keyframes pop{from{opacity:0;translate:0 22px}to{opacity:1;translate:0 0}}
@keyframes floaty{0%,100%{margin-top:0}50%{margin-top:-10px}}

@media (max-width:920px){
  .hero-inner{grid-template-columns:1fr;padding:clamp(1.4rem,5vw,2.2rem)}
  .hero-card{min-height:0}
  .hero-copy{padding-block:1.3rem .4rem}
  .cluster{min-height:320px;margin-top:.5rem}
  .b2{inset-inline-end:48%}
  .b3{inset-inline-end:52%;top:58%}
  .mini{inset-inline-end:4%;bottom:0}
  .hero-shade{background:linear-gradient(to top,rgba(6,10,12,.88) 32%,rgba(6,10,12,.35) 100%)}
}

/* ============================================================ TRUST STRIP */
.trust{border-block-end:1px solid var(--line);padding-block:clamp(1.4rem,3vw,2rem)}
.trust .wrap{display:flex;align-items:center;gap:1rem 2.6rem;flex-wrap:wrap}
.trust-label{max-width:26rem}
.trust-label b{display:block;font-family:var(--disp);font-size:1.08rem;font-weight:700;line-height:1.4}
.trust-label span{font-size:var(--fs-0);color:var(--ink-3)}
.chans{display:flex;align-items:center;gap:clamp(1.2rem,3.5vw,2.8rem);flex-wrap:wrap;margin-inline-start:auto}
.chan{display:flex;align-items:center;gap:.55rem;font-weight:700;font-size:1rem;
  transition:transform .3s var(--spring)}
.chan:hover{transform:translateY(-3px)}
.chan svg{width:25px;height:25px}

.io-reveal{opacity:0;translate:0 28px;transition:opacity .8s var(--ease),translate .8s var(--ease)}
.io-reveal.in{opacity:1;translate:0 0}

.tiny-foot{padding:1.3rem 0 1.7rem;text-align:center;color:var(--ink-3);font-size:var(--fs-0)}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .hero-copy>*,.bub,.mini,.io-reveal{opacity:1!important;translate:0 0!important;transform:none!important}
  .hero h1 .lime::after{transform:scaleX(1)!important}
  .hero-media video{transform:none!important}
}

/* ============================================================
   SECTION 2 — "الفوضى بتترتّب"  (scroll-driven chaos → order)
   ============================================================ */
.chaos{position:relative;background:var(--ink);height:300vh;
  border-block-start:1px solid rgba(255,255,255,.06)}
.chaos-stick{position:sticky;top:0;height:100vh;overflow:hidden;
  display:flex;flex-direction:column;align-items:center;justify-content:center}
.chaos-stick::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(620px circle at 50% 58%,rgba(212,236,90,.07),transparent 70%)}
.chaos-stick::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.4;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E")}

.chaos-head{position:absolute;top:clamp(3rem,11vh,6.5rem);inset-inline:0;
  text-align:center;padding-inline:1rem;z-index:3}
.chaos-head h2{font-family:var(--disp);color:#fff;margin:0;
  font-size:clamp(1.7rem,1.1rem + 3vw,3.4rem);font-weight:700;line-height:1.2;letter-spacing:-.02em}
.chaos-head h2 .lime{color:var(--lime)}
.chaos-kick{color:#93A09C;font-size:var(--fs-0);font-weight:600;margin:.7rem 0 0;
  transition:opacity .4s var(--ease)}
.chaos-kick .dn{display:inline-block;animation:dn 1.6s ease-in-out infinite}
@keyframes dn{0%,100%{translate:0 0}50%{translate:0 6px}}

.cbox{width:min(620px,92vw);border-radius:20px;overflow:visible;z-index:2;margin-top:clamp(2rem,8vh,4rem)}
.cbox-h{display:flex;align-items:center;gap:.55rem;padding:.75rem 1rem;
  background:var(--cream);border:1px solid var(--line);border-bottom:0;
  border-radius:20px 20px 0 0;position:relative;z-index:4}
.cbox-h b{font-size:.92rem}
.cbox-h .n{margin-inline-start:auto;background:#E9ECE7;color:var(--ink);font-size:.74rem;font-weight:800;
  border-radius:999px;min-width:24px;height:24px;display:grid;place-items:center;padding-inline:7px;
  transition:background .3s,transform .3s var(--spring)}
.cbox-h.done .n{background:var(--lime);transform:scale(1.15)}
.cbox-body{position:relative;background:#fff;border:1px solid var(--line);border-top:0;
  border-radius:0 0 20px 20px;height:calc(8*54px + 14px);padding:7px 0}
.slotline{position:absolute;inset-inline:12px;top:calc(7px + var(--slot)*54px);height:48px;
  border:1.5px dashed #E3E6E2;border-radius:14px;z-index:1;
  transition:opacity .4s var(--ease)}
.slotline.filled{opacity:0}

.chip{position:absolute;inset-inline-start:12px;top:calc(7px + var(--slot)*54px);height:48px;
  width:var(--w,calc(100% - 24px));
  display:flex;align-items:center;gap:.6rem;background:#fff;
  border:1px solid transparent;border-radius:14px;padding-inline:.75rem;
  box-shadow:0 20px 46px -14px rgba(0,0,0,.55);
  will-change:transform,width;z-index:3;overflow:hidden}
.chip.landed{box-shadow:none;border-color:#EFF1EE}
.chip .ic{width:28px;height:28px;border-radius:8px;flex:0 0 auto;display:grid;place-items:center}
.chip .ic svg{width:16px;height:16px;color:#fff}
.chip .ic.fb{background:var(--fb)}
.chip b{font-size:.8rem;white-space:nowrap}
.chip .msg{font-size:.8rem;color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.chaos-end{position:absolute;bottom:clamp(1.4rem,6vh,3.5rem);inset-inline:0;text-align:center;
  color:#fff;font-weight:600;font-size:var(--fs-1);opacity:0;z-index:3;padding-inline:1rem}
.chaos-end svg{width:18px;height:18px;color:var(--lime);vertical-align:-3px;margin-inline-end:.4rem}

@media (max-width:640px){
  .cbox-body{height:calc(8*50px + 12px)}
  .chip{height:44px;top:calc(6px + var(--slot)*50px)}
  .chip .msg{font-size:.74rem}
}

@media (prefers-reduced-motion:reduce){
  .chaos{height:auto;padding-block:5rem}
  .chaos-stick{position:static;height:auto;gap:2rem}
  .chaos-head{position:static}
  .chaos-end{position:static;opacity:1!important}
  .chip{transform:none!important;box-shadow:none;border-color:#EFF1EE;width:calc(100% - 24px)!important}
  .slotline{display:none}
}


/* ============================================================
   CHAOS v6 — sound toggle, side counters, light threads
   ============================================================ */
.sndbtn{position:absolute;top:clamp(1rem,3.5vh,2rem);inset-inline-end:clamp(1rem,3vw,2rem);z-index:5;
  display:flex;align-items:center;gap:.45rem;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16);
  color:#CBD4D0;border-radius:999px;padding:.42rem .9rem;cursor:pointer;
  font-size:.78rem;font-weight:700;backdrop-filter:blur(6px);
  transition:background .2s,color .2s,border-color .2s}
.sndbtn:hover{background:rgba(255,255,255,.14);color:#fff}
.sndbtn.on{background:var(--lime);border-color:var(--lime);color:var(--ink)}
.sndbtn svg{width:15px;height:15px}

.ccount-side{position:absolute;z-index:2;color:#5E6B67;font-family:var(--disp);
  font-weight:700;line-height:1.3;pointer-events:none;
  transition:opacity .6s var(--ease),translate .6s var(--ease)}
.ccount-side .num{display:block;font-size:clamp(1.6rem,3.4vw,2.8rem);color:#8F9C97}
.ccount-side .lbl{display:block;font-size:var(--fs-0);font-weight:600;color:#5E6B67}
.ccount-side.off{opacity:0;translate:0 -14px}
.cs1{top:26%;inset-inline-start:clamp(1rem,6vw,5.5rem)}
.cs2{top:52%;inset-inline-start:clamp(.8rem,4.5vw,4rem)}
.cs3{top:36%;inset-inline-end:clamp(1rem,6vw,5.5rem)}
.cs-final{position:absolute;top:44%;inset-inline-end:clamp(1rem,5vw,4.5rem);z-index:2;
  display:flex;align-items:center;gap:.5rem;color:var(--lime);
  font-family:var(--disp);font-weight:700;font-size:clamp(1rem,1.6vw,1.35rem);
  opacity:0;translate:0 14px;transition:opacity .6s var(--ease),translate .6s var(--ease);pointer-events:none}
.cs-final.on{opacity:1;translate:0 0}
.cs-final svg{width:20px;height:20px}
@media (max-width:820px){.ccount-side,.cs-final{display:none}}

.threads{position:absolute;inset:0;z-index:2;pointer-events:none}
.threads path{fill:none;stroke:url(#tg);stroke-width:1.5;opacity:0}

/* ============================================================
   SECTION 3 — particle morph story
   ============================================================ */
.morph{position:relative;background:var(--ink);height:520vh;
  border-block-start:1px solid rgba(255,255,255,.05)}
.morph-stick{position:sticky;top:0;height:100vh;overflow:hidden}
.morph-stick::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(700px circle at 62% 46%,rgba(212,236,90,.06),transparent 70%)}
#morphCanvas{position:absolute;inset:0;width:100%;height:100%;display:block}

.mpanel{position:absolute;top:50%;translate:0 -50%;inset-inline-start:clamp(1.2rem,6vw,6rem);
  max-width:26rem;color:#fff;z-index:3;
  opacity:0;visibility:hidden;transform:translateY(26px);
  transition:opacity .55s var(--ease),transform .55s var(--ease),visibility .55s;pointer-events:none}
.mpanel.on{opacity:1;visibility:visible;transform:translateY(0);pointer-events:auto}
.mpanel .kick{display:inline-flex;align-items:center;gap:.5rem;
  font-size:var(--fs-0);font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:#AEB9B4;margin:0 0 .9rem}
.mpanel .kick::before{content:"";width:22px;height:2px;background:var(--lime);border-radius:2px}
.mpanel h3{font-family:var(--disp);font-size:clamp(1.6rem,1.1rem + 2.2vw,2.9rem);
  font-weight:700;line-height:1.2;letter-spacing:-.02em;margin:0 0 .8rem}
.mpanel h3 .lime{color:var(--lime)}
.mpanel p{color:#C8D1CC;font-size:var(--fs-1);line-height:1.75;margin:0}
.mpanel .feats{display:flex;flex-wrap:wrap;gap:.45rem .9rem;margin-top:1rem;padding:0;list-style:none}
.mpanel .feats li{display:flex;align-items:center;gap:.4rem;font-size:var(--fs-0);font-weight:600;color:#E7EDEA}
.mpanel .feats svg{width:14px;height:14px;color:var(--lime)}
.mpanel .btn{margin-top:1.4rem}

.mdots{position:absolute;top:50%;translate:0 -50%;inset-inline-end:clamp(1rem,3.5vw,2.6rem);
  display:flex;flex-direction:column;gap:.7rem;z-index:3}
.mdot{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.22);
  transition:background .3s,transform .3s var(--spring)}
.mdot.on{background:var(--lime);transform:scale(1.5)}

.morph-fallback{display:none}
.morph.static{height:auto}
.morph.static .morph-stick{position:static;height:auto}
.morph-fallback.show{display:grid;gap:3rem;padding:clamp(3rem,8vw,6rem) clamp(1.2rem,6vw,6rem);color:#fff}
.morph-fallback.show .mpanel{position:static;translate:none;opacity:1;visibility:visible;transform:none;pointer-events:auto}

@media (max-width:820px){
  .mpanel{inset-inline:1.1rem;top:auto;bottom:clamp(1.2rem,6vh,3rem);translate:0 0;max-width:none;
    background:rgba(10,17,19,.55);backdrop-filter:blur(10px);
    border:1px solid rgba(255,255,255,.09);border-radius:16px;padding:1rem 1.1rem}
  .mpanel.on{transform:none}
  .mdots{top:auto;bottom:45%;flex-direction:row;inset-inline:0;justify-content:center}
}

/* ============================================================
   SECTION 3 — BROADCAST RADAR
   ============================================================ */
.bcast{background:var(--ink);color:#fff;padding-block:clamp(3.5rem,9vw,7rem);
  border-block-start:1px solid rgba(255,255,255,.05);overflow:hidden;position:relative}
.bcast::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(680px circle at 72% 50%,rgba(212,236,90,.07),transparent 70%)}
html[dir="ltr"] .bcast::before{background:radial-gradient(680px circle at 28% 50%,rgba(212,236,90,.07),transparent 70%)}

.bcast-grid{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
  gap:clamp(2rem,5vw,4.5rem);align-items:center}
@media (max-width:940px){.bcast-grid{grid-template-columns:1fr}}

.bcast-copy .kick{display:inline-flex;align-items:center;gap:.55rem;font-size:var(--fs-0);
  font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:#AEB9B4;margin:0 0 1rem}
.bcast-copy .kick::before{content:"";width:24px;height:2px;background:var(--lime);border-radius:2px}
.bcast-copy h2{font-family:var(--disp);font-size:clamp(1.9rem,1.2rem + 3vw,3.5rem);
  font-weight:700;line-height:1.18;letter-spacing:-.02em;margin:0 0 1rem}
.bcast-copy h2 .lime{color:var(--lime)}
.bcast-copy .lede{color:#C6D0CB;font-size:var(--fs-2);line-height:1.7;margin:0 0 1.5rem;max-width:32rem}
.bcast-copy .feats{list-style:none;margin:0 0 1.8rem;padding:0;display:grid;gap:.55rem}
@media (min-width:520px){.bcast-copy .feats{grid-template-columns:1fr 1fr}}
.bcast-copy .feats li{display:flex;align-items:center;gap:.5rem;font-size:var(--fs-0);font-weight:600;color:#E7EDEA}
.bcast-copy .feats svg{width:15px;height:15px;color:var(--lime);flex:0 0 auto}

/* --- radar stage --- */
.radar{position:relative;display:grid;gap:1.2rem;justify-items:center}
.stats{display:flex;gap:.6rem;flex-wrap:wrap;justify-content:center;width:100%}
.stats div{flex:1 1 118px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);
  border-radius:14px;padding:.7rem .8rem;text-align:center;backdrop-filter:blur(6px)}
.stats span{display:block;font-size:.72rem;color:#9BA7A2;font-weight:600}
.stats b{display:block;font-family:var(--disp);font-size:clamp(1.15rem,2.2vw,1.55rem);
  font-weight:700;margin-top:.15rem;color:#fff;font-variant-numeric:tabular-nums}

.orbits{position:relative;width:min(520px,88vw);aspect-ratio:1;display:grid;place-items:center}
.orb{position:absolute;border-radius:50%;border:1px solid rgba(255,255,255,.09)}
.orb.o1{width:44%;height:44%}
.orb.o2{width:70%;height:70%}
.orb.o3{width:96%;height:96%;border-style:dashed;border-color:rgba(255,255,255,.06)}

.pulse{position:absolute;width:44%;height:44%;border-radius:50%;
  border:1.5px solid var(--lime);opacity:0;pointer-events:none}
.pulse.go{animation:ping 2.4s cubic-bezier(.2,.7,.3,1) forwards}
@keyframes ping{
  0%{width:16%;height:16%;opacity:.9;border-width:2px}
  70%{opacity:.35}
  100%{width:104%;height:104%;opacity:0;border-width:.5px}
}

/* template card at the centre */
.tpl{position:relative;z-index:3;width:min(240px,54%);background:#fff;color:var(--ink);
  border-radius:16px;overflow:hidden;box-shadow:0 26px 60px -20px rgba(0,0,0,.75)}
.tpl-h{display:flex;align-items:center;gap:.45rem;padding:.55rem .7rem;background:var(--cream);
  border-block-end:1px solid var(--line)}
.tpl-h .wa-ic{width:20px;height:20px;border-radius:6px;background:var(--wa);display:grid;place-items:center;flex:0 0 auto}
.tpl-h .wa-ic svg{width:12px;height:12px;color:#fff}
.tpl-h b{font-size:.72rem}
.tpl-h .ok{margin-inline-start:auto;color:#1B9E52;font-weight:800;font-size:.8rem}
.tpl-b{padding:.65rem .7rem;font-size:.76rem;line-height:1.6;color:var(--ink-2)}
.tpl-btn{margin:0 .7rem .7rem;padding:.42rem;text-align:center;border-radius:8px;
  background:#EAF3EC;color:#0F7C3F;font-size:.74rem;font-weight:700}

/* customer chips on the orbits */
.cust{position:absolute;top:50%;inset-inline-start:50%;width:0;height:0;z-index:2}
.cust.o1{--r:22%} .cust.o2{--r:35%} .cust.o3{--r:48%}
.cust .av{position:absolute;translate:-50% -50%;
  transform:rotate(var(--a)) translateX(var(--r)) rotate(calc(-1 * var(--a)));
  width:34px;height:34px;border-radius:50%;display:grid;place-items:center;
  background:#16201F;border:1.5px solid var(--c);color:#fff;
  font-size:.68rem;font-weight:700;white-space:nowrap;
  transition:box-shadow .35s var(--ease),transform .35s var(--spring),background .35s}
.cust.lit .av{background:var(--c);box-shadow:0 0 0 5px color-mix(in srgb,var(--c) 26%,transparent)}
.cust .tick{position:absolute;translate:-50% -50%;
  transform:rotate(var(--a)) translateX(var(--r)) rotate(calc(-1 * var(--a))) translateY(-26px);
  font-size:.66rem;font-weight:800;color:var(--lime);opacity:0;transition:opacity .3s,translate .3s}
.cust.done .tick{opacity:1}

@media (max-width:940px){
  .radar{margin-top:2rem}
  .orbits{width:min(430px,86vw)}
  .cust .av{width:30px;height:30px;font-size:.62rem}
}
@media (prefers-reduced-motion:reduce){
  .pulse{display:none}
  .cust .av{background:var(--c)}
  .cust .tick{opacity:1}
}

/* ============================================================
   MOBILE REBUILD  ·  v9
   ============================================================ */
@media (max-width:920px){

  /* ---------- header ---------- */
  .hdr-main{height:64px;gap:.6rem;padding-inline:0}
  .hdr.scrolled .hdr-main{height:58px}
  .logo{gap:8px}
  .logo svg{width:34px;height:20px}
  .hdr.scrolled .logo svg{width:31px;height:18px}
  .logo b{font-size:1.18rem}
  .hdr-cta{gap:.35rem;margin-inline-start:auto}
  .hdr-cta .btn-lime{padding:.56rem 1.05rem;font-size:.86rem}
  .burger{padding:.4rem;margin-inline-start:.1rem}
  .burger svg{width:24px;height:24px}
  .mobile{top:64px}

  /* ---------- hero ---------- */
  .hero{padding-block:.5rem 1.4rem}
  .hero-wrap{width:calc(100% - 1.6rem)}
  .hero-card{min-height:0;border-radius:22px}
  .hero-inner{grid-template-columns:1fr;gap:0;padding:1.5rem 1.25rem 1.6rem}
  .hero-copy{max-width:none;padding:0}
  .hero h1{font-size:clamp(1.85rem,7.2vw,2.5rem);line-height:1.22;margin-bottom:.85rem}
  .hero-sub{font-size:1rem;line-height:1.65;margin-bottom:1.25rem;max-width:none}
  .eyebrow{margin-bottom:.85rem;font-size:.72rem;letter-spacing:.1em}
  .hero-form{flex-direction:column;gap:.5rem;max-width:none}
  .hero-form input{flex:none;width:100%;padding:.8rem 1rem}
  .hero-form .btn{width:100%}
  .hero-privacy{font-size:.7rem}
  .hero-shade{background:linear-gradient(to top,rgba(6,10,12,.93) 42%,rgba(6,10,12,.55) 100%)}

  /* single bubble only, sitting below the copy */
  .cluster{min-height:0;height:auto;margin-top:1.4rem;perspective:none}
  .tilt{position:static;transform:none!important;transform-style:flat}
  .bub{position:static;max-width:none;width:100%;margin:0;
    animation:pop .7s var(--ease) .9s forwards;transform:none!important}
  .b2,.b3,.mini{display:none}

  /* ---------- trust strip ---------- */
  .trust{padding-block:1.3rem}
  .trust .wrap{flex-direction:column;align-items:flex-start;gap:.9rem}
  .trust-label b{font-size:1rem}
  .chans{margin-inline-start:0;gap:.9rem 1.4rem}
  .chan{font-size:.88rem;gap:.42rem}
  .chan svg{width:20px;height:20px}

  /* ---------- chaos section ---------- */
  .chaos{height:260vh}
  .chaos-head{top:clamp(4.5rem,13vh,7rem)}
  .chaos-head h2{font-size:clamp(1.5rem,5.6vw,2rem);padding-inline:.4rem}
  .cbox{width:calc(100% - 1.6rem);margin-top:clamp(4rem,15vh,7rem)}
  .cbox-body{height:calc(8*46px + 12px)}
  .chip{height:42px;top:calc(6px + var(--slot)*46px);border-radius:12px;gap:.45rem;padding-inline:.6rem}
  .chip .ic{width:24px;height:24px;border-radius:7px}
  .chip .ic svg{width:14px;height:14px}
  .chip b{font-size:.72rem}
  .chip .msg{font-size:.7rem}
  .slotline{height:42px;top:calc(6px + var(--slot)*46px);border-radius:12px;inset-inline:10px}
  .chaos-end{font-size:.86rem;bottom:1.4rem;padding-inline:1.2rem;line-height:1.6}
  .sndbtn{top:.9rem;inset-inline-end:.9rem;padding:.34rem .7rem;font-size:.72rem}

  /* ---------- broadcast radar ---------- */
  .bcast{padding-block:2.6rem}
  .bcast-copy h2{font-size:clamp(1.7rem,6.4vw,2.3rem)}
  .bcast-copy .lede{font-size:1rem}
  .bcast-copy .feats{grid-template-columns:1fr;gap:.5rem;margin-bottom:1.4rem}
  .bcast-copy .btn{width:100%}
  .radar{margin-top:2.2rem;gap:1rem}
  .stats div{padding:.55rem .5rem;border-radius:12px}
  .stats span{font-size:.66rem}
  .stats b{font-size:1.05rem}
  .orbits{width:min(340px,90vw)}
  .tpl{width:min(190px,58%);border-radius:13px}
  .tpl-b{font-size:.68rem;padding:.5rem .55rem}
  .tpl-h b{font-size:.66rem}
  .tpl-btn{font-size:.66rem;margin:0 .55rem .55rem;padding:.35rem}
  .cust .av{width:26px;height:26px;font-size:.58rem;border-width:1.2px}
  .cust .tick{font-size:.58rem;transform:rotate(var(--a)) translateX(var(--r)) rotate(calc(-1 * var(--a))) translateY(-20px)}
  .cust.o1{--r:20%} .cust.o2{--r:33%} .cust.o3{--r:46%}
}

@media (max-width:400px){
  .hdr-cta .btn-lime{padding:.5rem .85rem;font-size:.8rem}
  .logo b{font-size:1.05rem}
  .chip .msg{display:none}
  .orbits{width:min(300px,92vw)}
}

/* ============================================================
   v10 — 3D template deck + mobile menu rebuild
   ============================================================ */
.stats .lb{display:block;font-size:.72rem;color:#9BA7A2;font-weight:600}

.tpl-media{position:relative;height:96px;display:grid;place-items:center;overflow:hidden}
.tpl-media.img{background:linear-gradient(135deg,#2F4A3B,#7C9A4E 55%,#C6E23E)}
.tpl-media.vid{background:linear-gradient(135deg,#132028,#2C4552 60%,#4C7186)}
.tpl-media .play{width:38px;height:38px;border-radius:50%;background:rgba(255,255,255,.94);
  display:grid;place-items:center;box-shadow:0 6px 18px rgba(0,0,0,.3)}
.tpl-media .play svg{width:17px;height:17px;color:var(--ink);margin-inline-start:2px}
.mtag{position:absolute;bottom:7px;inset-inline-start:8px;background:rgba(0,0,0,.55);color:#fff;
  font-size:.58rem;font-weight:700;letter-spacing:.06em;padding:.18rem .42rem;border-radius:5px}

.tpl-file{display:flex;align-items:center;gap:.55rem;margin:.6rem .7rem 0;padding:.55rem .6rem;
  background:#F4F6F3;border:1px solid var(--line);border-radius:10px}
.tpl-file .fi{width:30px;height:34px;border-radius:6px;background:#E4453A;display:grid;place-items:center;flex:0 0 auto}
.tpl-file .fi svg{width:16px;height:16px;color:#fff}
.tpl-file .fn{min-width:0}
.tpl-file .fn b{display:block;font-size:.7rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tpl-file .fn small{display:block;font-size:.62rem;color:var(--ink-3)}

.tpl-btn{display:flex;align-items:center;justify-content:center;gap:.35rem}
.tpl-btn svg{width:13px;height:13px;flex:0 0 auto}


/* ---------- mobile menu — full, comfortable ---------- */
@media (max-width:1060px){
  .mobile{top:64px;height:calc(100dvh - 64px);
    padding:1.1rem clamp(1.1rem,5vw,1.6rem) calc(2rem + env(safe-area-inset-bottom));
    display:flex;flex-direction:column}
  .m-head{padding:.95rem .1rem;font-size:1.18rem}
  .m-body a{padding:.66rem .3rem .66rem 1.1rem;font-size:1rem}
  html[dir="rtl"] .m-body a{padding:.66rem 1.1rem .66rem .3rem}
  .m-links{gap:0;padding-block:.8rem}
  .m-links a{padding:.72rem .1rem;font-size:1.05rem;border-block-end:1px solid var(--line)}
  .m-links a:last-of-type{border:0}
  .m-links .lang-toggle{margin-block-start:1rem}
  .m-cta{margin-top:auto;padding-block:1rem .4rem;gap:.6rem}
  .m-cta .btn{width:100%;padding:.9rem 1.4rem;font-size:1rem}
  .m-cta .btn-line{display:inline-flex}
}



/* ============================================================
   v13 — ASSEMBLY LINE inside a real WhatsApp phone
   ============================================================ */
.line{position:relative;z-index:3;width:min(330px,80%);display:grid;place-items:center;perspective:1400px}

.rail{position:absolute;inset-inline:-14%;top:64%;height:2px;z-index:0;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.14) 18%,rgba(255,255,255,.14) 82%,transparent);
  display:flex;justify-content:space-between;align-items:center}
.rail i{width:6px;height:6px;border-radius:50%;background:rgba(212,236,90,.5);animation:railmove 2.4s linear infinite}
.rail i:nth-child(2){animation-delay:.8s} .rail i:nth-child(3){animation-delay:1.6s}
@keyframes railmove{0%{opacity:0;transform:translateX(-40px)}20%,80%{opacity:1}100%{opacity:0;transform:translateX(40px)}}

.stage3d{position:relative;transform-style:preserve-3d;transition:transform .5s var(--ease)}

/* --- phone shell --- */
.phone{position:relative;width:min(290px,100%);border-radius:30px;overflow:hidden;
  background:#0E1618;border:8px solid #1B2426;
  box-shadow:0 36px 80px -26px rgba(0,0,0,.85),0 0 0 1px rgba(255,255,255,.05);
  transform-style:preserve-3d}
.ph-top{display:flex;align-items:center;gap:.5rem;padding:.7rem .8rem;background:#0F5C4A}
.ph-av{width:26px;height:26px;border-radius:50%;background:var(--wa);display:grid;place-items:center;flex:0 0 auto}
.ph-av svg{width:15px;height:15px;color:#fff}
.ph-name{color:#fff;font-size:.78rem;font-weight:700}
.ph-body{min-height:330px;padding:.9rem .7rem 1.4rem;
  background:#ECE4DA url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='90'%3E%3Cg fill='none' stroke='%23D9CFC2' stroke-width='1' opacity='.55'%3E%3Ccircle cx='18' cy='20' r='5'/%3E%3Cpath d='M52 14h12v10H52zM26 58l6-8 6 8zM66 56c3 0 5 2 5 5s-2 5-5 5-5-2-5-5 2-5 5-5'/%3E%3Cpath d='M12 72h10M74 30h8'/%3E%3C/g%3E%3C/svg%3E");
  display:flex;align-items:flex-start;justify-content:flex-start}

/* --- the message being built --- */
.build{position:relative;width:100%;background:#fff;border-radius:12px;overflow:hidden;
  box-shadow:0 2px 6px rgba(0,0,0,.14);
  transform-style:preserve-3d;
  transition:transform .8s var(--ease),opacity .55s var(--ease)}
.build.drop{transform:translate3d(0,-150px,-70px) rotateX(28deg);opacity:0}
.build.here{transform:none;opacity:1}
.build.ship{transform:translate3d(var(--out,240px),0,-50px) rotateY(-22deg);opacity:0}
html[dir="rtl"] .build.ship{transform:translate3d(calc(-1 * var(--out,240px)),0,-50px) rotateY(22deg)}

.b-media{position:relative;height:0;overflow:hidden;background:#111;
  opacity:0;transition:height .6s var(--ease),opacity .45s var(--ease)}
.build.has-media.s2 .b-media{height:168px;opacity:1}
.b-media img,.b-media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:none}
.build.kind-image .b-img{display:block}
.build.kind-video .b-vid{display:block}
.b-hd,.b-dur{position:absolute;bottom:7px;background:rgba(0,0,0,.6);color:#fff;
  font-size:.56rem;font-weight:700;padding:.14rem .38rem;border-radius:4px;display:none}
.b-hd{inset-inline-start:7px} .b-dur{inset-inline-start:32px}
.build.kind-video .b-hd,.build.kind-video .b-dur{display:block}
.b-play{position:absolute;top:50%;inset-inline-start:50%;translate:-50% -50%;
  width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,.9);
  display:none;place-items:center;box-shadow:0 4px 14px rgba(0,0,0,.35)}
.build.kind-video .b-play{display:grid}
.b-play svg{width:19px;height:19px;color:#111;margin-inline-start:2px}

.b-file{display:none;align-items:center;gap:.5rem;margin:.5rem .5rem 0;padding:.5rem;
  background:#F5F6F6;border-radius:8px;opacity:0;translate:0 10px;
  transition:opacity .45s var(--ease),translate .45s var(--ease)}
.build.kind-file .b-file{display:flex}
.build.kind-file.s2 .b-file{opacity:1;translate:0 0}
.b-file .fi{width:30px;height:34px;border-radius:5px;background:#E4453A;display:grid;place-items:center;flex:0 0 auto}
.b-file .fi svg{width:15px;height:15px;color:#fff}
.b-file .fn b{display:block;font-size:.68rem;color:#111}
.b-file .fn small{display:block;font-size:.6rem;color:#7C8B87}

.b-body{padding:.5rem .6rem .3rem;font-size:.74rem;line-height:1.65;color:#111;
  min-height:3.4em;position:relative;text-align:start}
.caret{display:inline-block;width:2px;height:.9em;background:#111;vertical-align:-2px;margin-inline-start:1px;opacity:0}
.build.typing .caret{opacity:1;animation:blink .9s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.b-more{display:none;color:#128C7E;font-weight:700;font-size:.72rem;margin-top:.15rem}
.build.s3.long .b-more{display:block}
.b-time{display:block;text-align:end;font-size:.58rem;color:#8A9591;margin-top:.15rem;opacity:0;transition:opacity .4s}
.build.s3 .b-time{opacity:1}

.b-actions{display:grid}
.b-btn{display:flex;align-items:center;justify-content:center;gap:.34rem;
  padding:.5rem;border-top:1px solid #E9EDEB;color:#128C7E;font-size:.73rem;font-weight:600;
  opacity:0;transform:translateY(8px);transition:opacity .4s var(--spring),transform .45s var(--spring)}
.b-btn svg{width:13px;height:13px;flex:0 0 auto}
.build.s4 .b-btn.b1{opacity:1;transform:none}
.build.s4.two-btn .b-btn.b2{opacity:1;transform:none;transition-delay:.14s}
.b-btn.b2{display:none}
.build.two-btn .b-btn.b2{display:flex}

.b-stamp{position:absolute;top:8px;inset-inline-end:8px;z-index:4;
  display:flex;align-items:center;gap:.28rem;background:var(--lime);color:var(--ink);
  border-radius:999px;padding:.2rem .55rem;font-size:.62rem;font-weight:800;
  opacity:0;transform:scale(.4) rotate(-12deg);
  transition:opacity .35s var(--spring),transform .45s var(--spring)}
.build.s5 .b-stamp{opacity:1;transform:scale(1) rotate(-6deg);animation:stampglow 1.1s ease-out}
@keyframes stampglow{0%{box-shadow:0 0 0 0 rgba(212,236,90,.75)}100%{box-shadow:0 0 0 20px rgba(212,236,90,0)}}
.b-stamp svg{width:10px;height:10px}

.steps{margin-top:1.1rem;display:flex;justify-content:center;gap:.5rem;flex-wrap:wrap}
.lstep{display:inline-flex;align-items:center;gap:.32rem;font-size:.68rem;font-weight:700;color:#66746F;transition:color .3s}
.lstep i{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.2);transition:background .3s,transform .3s var(--spring)}
.lstep.on{color:#fff}
.lstep.on i{background:var(--lime);transform:scale(1.5)}

@media (max-width:920px){
  .line{width:min(290px,92%)}
  .phone{width:min(250px,100%);border-width:7px;border-radius:26px}
  .ph-body{min-height:290px}
  .build.has-media.s2 .b-media{height:142px}
  .steps{gap:.32rem;margin-top:.9rem}
  .lstep{font-size:.62rem}
}
@media (prefers-reduced-motion:reduce){
  .rail i{animation:none}.build{transition:none}.caret{display:none}
}

/* ============================================================
   v14 — CAROUSEL (5th message type): 3 product cards side by side
   ============================================================ */
.b-cards{display:none;grid-template-columns:repeat(3,minmax(0,1fr));gap:.34rem;
  padding:.15rem .45rem 0;max-height:0;overflow:hidden;
  transition:max-height .6s var(--ease),padding .6s var(--ease)}
.build.kind-carousel .b-cards{display:grid}
.build.kind-carousel.s2 .b-cards{max-height:190px;padding-bottom:.5rem}
.build.kind-carousel .b-actions{display:none}

.b-card{min-width:0;background:#fff;border:1px solid #E6EAE8;border-radius:9px;overflow:hidden;
  box-shadow:0 1px 3px rgba(0,0,0,.08);text-align:start;
  opacity:0;transform:translateY(14px) scale(.9);
  transition:opacity .4s var(--spring),transform .5s var(--spring)}
.build.kind-carousel.s2 .b-card{opacity:1;transform:none}
.b-card:nth-child(2){transition-delay:.13s} .b-card:nth-child(3){transition-delay:.26s}

.b-card .c-img{display:block;width:100%;aspect-ratio:1/1;object-fit:cover;background:#EEF0EF}
.b-card .c-name{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;
  font-size:.56rem;line-height:1.3;min-height:calc(2 * 1.3em + .3rem);color:#111;padding:.3rem .32rem 0}
.b-card .c-price{display:block;font-size:.58rem;font-weight:800;color:#128C7E;padding:.06rem .32rem .3rem}
.b-card .c-btn{display:block;border-top:1px solid #E9EDEB;color:#128C7E;font-size:.54rem;font-weight:700;
  text-align:center;padding:.3rem .15rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  opacity:0;transform:translateY(6px);transition:opacity .35s var(--spring),transform .4s var(--spring)}
.build.kind-carousel.s4 .b-card .c-btn{opacity:1;transform:none}
.build.kind-carousel.s4 .b-card:nth-child(2) .c-btn{transition-delay:.1s}
.build.kind-carousel.s4 .b-card:nth-child(3) .c-btn{transition-delay:.2s}

@media (max-width:920px){
  .b-cards{gap:.26rem;padding-inline:.38rem}
  .build.kind-carousel.s2 .b-cards{max-height:170px}
  .b-card .c-name{font-size:.5rem} .b-card .c-price{font-size:.52rem} .b-card .c-btn{font-size:.48rem}
}
@media (prefers-reduced-motion:reduce){
  .b-cards,.b-card,.b-card .c-btn{transition:none}
}

/* ============================================================
   v15 — fix: stat labels showed both languages (.stats span beat [data-lang])
   ============================================================ */
.stats span[data-lang]{display:none}
html[lang="ar"] .stats span[data-lang="ar"],html[lang="en"] .stats span[data-lang="en"]{display:inline}

/* ============================================================
   v15 — BROADCAST goes cream (Zendesk-style light section)
   ============================================================ */
.bcast{background:var(--cream);color:var(--ink);border-block-start-color:var(--line)}
.bcast::before{background:radial-gradient(680px circle at 72% 50%,rgba(212,236,90,.32),transparent 70%)}
html[dir="ltr"] .bcast::before{background:radial-gradient(680px circle at 28% 50%,rgba(212,236,90,.32),transparent 70%)}
.bcast-copy .kick{color:var(--ink-3)}
.bcast-copy h2 .lime{color:var(--ink);padding-inline:.06em;
  background:linear-gradient(transparent 60%,var(--lime) 60%,var(--lime) 94%,transparent 94%);
  -webkit-box-decoration-break:clone;box-decoration-break:clone}
.bcast-copy .lede{color:var(--ink-2)}
.bcast-copy .feats li{color:var(--ink)}
.bcast-copy .feats svg{color:#1B9E52}
.stats div{background:#fff;border-color:var(--line);box-shadow:0 10px 28px -16px rgba(10,17,19,.22);backdrop-filter:none}
.stats .lb,.stats span{color:var(--ink-3)}
.stats b{color:var(--ink)}
.orb{border-color:rgba(10,17,19,.13)} .orb.o3{border-color:rgba(10,17,19,.10)}
.pulse{border-color:var(--wa)}
.rail{background:linear-gradient(90deg,transparent,rgba(10,17,19,.16) 18%,rgba(10,17,19,.16) 82%,transparent)}
.rail i{background:rgba(10,17,19,.28)}
.lstep{color:#8A9591} .lstep i{background:rgba(10,17,19,.15)}
.lstep.on{color:var(--ink)} .lstep.on i{background:var(--ink)}

/* ============================================================
   v15 — 3D SCENE
   1) stronger, eased phone tilt  2) depth layers inside the phone
   3) cursor light + moving shadow  4) orbit rings become a tilted disc
   JS drives these variables on .orbits: --px --py (cursor, -.5..+.5),
   --mx --my (glare origin), --tilt (disc angle), --sx --sy (shadow offset)
   ============================================================ */
.orbits{perspective:1400px;transform-style:preserve-3d;--tilt:62deg;--dy:64px}
.orbits .stage3d{transition:none}

/* 4 · the disc: rings + pulse + customers share one tilted plane */
.disc{position:absolute;inset:0;display:grid;place-items:center;z-index:1;
  transform-style:preserve-3d;transform:translateY(var(--dy)) rotateX(var(--tilt))}
.cust{inset-inline-start:auto;left:calc(50% + var(--x));top:calc(50% + var(--y));transform-style:preserve-3d}
.cust .av{transform:rotateX(calc(-1 * var(--tilt)));                 /* stand upright on the disc */
  width:30px;height:30px;font-size:.62rem;background:#fff;color:var(--c);
  border:1.5px solid var(--c);box-shadow:0 6px 14px -8px rgba(10,17,19,.35);
  transition:box-shadow .35s var(--ease),background .35s,color .35s}
.cust.lit .av{background:var(--c);color:#fff;box-shadow:0 0 0 5px color-mix(in srgb,var(--c) 22%,transparent)}
.cust .tick{transform:rotateX(calc(-1 * var(--tilt))) translateY(-23px);color:#128C7E;font-size:.6rem}

/* 2 · parallax layers inside the phone (translate is independent of the build animations) */
.orbits .build{translate:calc(var(--px,0) * 12px) calc(var(--py,0) * 9px)}
.orbits .b-stamp{translate:calc(var(--px,0) * 22px) calc(var(--py,0) * 16px)}
.orbits .b-media img,.orbits .b-media video{scale:1.08;translate:calc(var(--px,0) * -10px) calc(var(--py,0) * -8px)}
.orbits .b-card:nth-child(1){translate:calc(var(--px,0) * 6px) calc(var(--py,0) * 5px)}
.orbits .b-card:nth-child(2){translate:calc(var(--px,0) * 11px) calc(var(--py,0) * 8px)}
.orbits .b-card:nth-child(3){translate:calc(var(--px,0) * 16px) calc(var(--py,0) * 11px)}
.orbits .ph-top{translate:calc(var(--px,0) * 5px) 0}

/* 3 · light on the glass + a shadow that leans away from the cursor */
.phone{box-shadow:var(--sx,0px) calc(36px + var(--sy,0px)) 80px -26px rgba(10,17,19,.55),0 0 0 1px rgba(0,0,0,.05)}
.phone::after{content:"";position:absolute;inset:0;z-index:9;pointer-events:none;border-radius:inherit;
  background:radial-gradient(240px circle at var(--mx,50%) var(--my,20%),rgba(255,255,255,.32),rgba(255,255,255,0) 70%);
  opacity:0;transition:opacity .45s var(--ease)}
.orbits.hot .phone::after{opacity:1}

@media (max-width:640px){
  .orbits{--dy:44px}
  .cust{display:none}
}
@media (prefers-reduced-motion:reduce){
  .disc{transform:none}
  .cust .av,.cust .tick{transform:none}
  .cust .tick{translate:-50% calc(-50% - 23px)}
  .phone::after{display:none}
}

/* v15 fixes: the phone used to shrink to its text while typing (width followed content);
   chips sat 30px off in RTL because absolutely-positioned boxes anchor to the right edge there */
.stage3d{width:min(290px,100%)}
@media (max-width:920px){.stage3d{width:min(250px,100%)}}
.cust .av,.cust .tick{left:0;top:0}

/* ============================================================
   v16 — MOBILE HERO tightened: smaller display size so each sentence
   holds one line (3 lines total instead of 4), tighter rhythm between
   eyebrow → title → sub → trial note → form → chip
   ============================================================ */
@media (max-width:920px){
  .hero-wrap{width:calc(100% - 1.2rem)}
  .hero-inner{padding:1.35rem .95rem 1.4rem}
  .eyebrow{margin-bottom:.7rem;font-size:.68rem}
  /* Alexandria is a wide face: 26px is the largest size at which the first sentence
     still holds one line on a 360px phone; the lime phrase always takes its own line */
  .hero h1{font-size:clamp(1.65rem,7vw,2.15rem);line-height:1.2;margin-bottom:.7rem}
  .hero h1 .lime{display:block;width:max-content;max-width:100%}
  .hero h1 .lime::after{height:2px;bottom:-.04em}
  .hero-sub{font-size:.95rem;line-height:1.6;margin-bottom:.95rem}
  .trial-note{font-size:.86rem;margin-bottom:.8rem}
  .trial-note svg{width:15px;height:15px}
  .hero-form{gap:.45rem}
  .hero-form input{padding:.74rem .95rem;font-size:.95rem}
  .hero-form .btn{padding:.8rem 1rem;font-size:.98rem}
  .hero-privacy{margin-top:.55rem;line-height:1.5}
  .cluster{margin-top:1.1rem}
  .bub{padding:.72rem .85rem}
  .bub .ic{width:30px;height:30px;border-radius:9px} .bub .ic svg{width:17px;height:17px}
  .bub .nm{font-size:.76rem} .bub .tx{font-size:.78rem}
}

/* ============================================================
   v17 — 🛡️ SHIELD · "Goodbye to bans" (warm dark block after broadcast)
   ============================================================ */
.shield{background:#1B1A16;color:#fff;padding-block:clamp(3.5rem,9vw,7rem);position:relative;overflow:hidden;
  border-block-start:1px solid rgba(255,255,255,.05)}
.shield::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(640px circle at 28% 56%,rgba(212,236,90,.11),transparent 70%),
             radial-gradient(420px circle at 14% 24%,rgba(255,77,61,.09),transparent 70%)}
html[dir="ltr"] .shield::before{
  background:radial-gradient(640px circle at 72% 56%,rgba(212,236,90,.11),transparent 70%),
             radial-gradient(420px circle at 86% 24%,rgba(255,77,61,.09),transparent 70%)}

.shield-grid{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
  gap:clamp(2rem,5vw,4.5rem);align-items:center}
@media (max-width:940px){.shield-grid{grid-template-columns:1fr}}

.shield-copy .kick{display:inline-flex;align-items:center;gap:.55rem;font-size:var(--fs-0);font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;color:#B4B2A3;margin:0 0 1rem}
.shield-copy .kick::before{content:"";width:24px;height:2px;background:var(--lime);border-radius:2px}
.shield-copy h2{font-family:var(--disp);font-size:clamp(2.1rem,1.3rem + 3.4vw,4rem);font-weight:700;
  line-height:1.12;letter-spacing:-.02em;margin:0 0 .9rem}
.shield-copy h2 .strike{position:relative;display:inline-block}
.shield-copy h2 .strike::after{content:"";position:absolute;inset-inline:-.04em;top:53%;height:.1em;border-radius:3px;
  background:#FF4D3D;transform:scaleX(0);transform-origin:var(--strike-origin,right);transition:transform .55s var(--ease) .55s}
html[dir="ltr"] .shield-copy h2 .strike::after{--strike-origin:left}
.shield.in h2 .strike::after{transform:scaleX(1)}
.shield-copy .sub{font-size:var(--fs-2);font-weight:600;line-height:1.55;color:#F3F1E8;margin:0 0 1rem}
.shield-copy .sub .lime{color:var(--lime)}
.shield-copy .lede{color:#C9C6B8;font-size:var(--fs-1);line-height:1.8;margin:0 0 1.4rem;max-width:34rem}
.pillars{list-style:none;margin:0 0 1.8rem;padding:0;display:grid;gap:.6rem}
.pillars li{display:flex;align-items:center;gap:.65rem;font-size:var(--fs-0);font-weight:600;color:#ECEADF}
.pillars li i{width:28px;height:28px;border-radius:9px;flex:0 0 auto;display:grid;place-items:center;
  background:rgba(212,236,90,.12);border:1px solid rgba(212,236,90,.32)}
.pillars li i svg{width:15px;height:15px;color:var(--lime)}
.shield-cta{display:flex;align-items:center;gap:1.25rem;flex-wrap:wrap}
.link-arrow{color:#ECEADF;font-weight:600;font-size:var(--fs-0);text-decoration:none;
  border-bottom:1px solid rgba(255,255,255,.3);padding-bottom:2px;transition:color .3s,border-color .3s}
.link-arrow:hover{color:var(--lime);border-color:var(--lime)}

/* ---------- scene ---------- */
.shield-scene{position:relative;display:grid;gap:.8rem;justify-items:center;width:100%}
.sh-hud{display:flex;gap:.6rem;width:100%;max-width:560px;justify-content:center}
.sh-card{flex:1 1 0;border-radius:14px;padding:.55rem .9rem;text-align:center;opacity:.5;
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);transition:opacity .5s,background .5s,border-color .5s,transform .5s var(--spring)}
.sh-card .lb{display:block;font-size:.6rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:#9F9D90}
.sh-card b{display:block;font-size:.92rem;color:#fff;margin-top:.1rem;font-family:var(--disp)}
.sh-card.on{opacity:1;transform:translateY(-2px)}
.sh-card.before.on{border-color:rgba(255,77,61,.55);background:rgba(255,77,61,.10)} .sh-card.before.on .lb{color:#FF7A6C}
.sh-card.after.on{border-color:rgba(212,236,90,.55);background:rgba(212,236,90,.10)} .sh-card.after.on .lb{color:var(--lime)}

.sh-stage{position:relative;width:100%;max-width:560px;height:470px;perspective:1400px;perspective-origin:50% 42%}
.sh-stage.hot{cursor:none}
.sh-snd{top:.2rem;inset-inline-end:.2rem;z-index:20}
.sh-world{position:absolute;inset:0;transform-style:preserve-3d;
  transform:rotateX(var(--wrx,0deg)) rotateY(var(--wry,0deg))}
.sh-world>*{position:absolute;left:50%;top:50%}
.sh-msgs{width:0;height:0;transform-style:preserve-3d}
.sh-msgs>*{position:absolute;left:0;top:0}

/* phones (the first gets banned and becomes a ghost, the second lives behind the shield) */
.sh-phone{width:200px;border-width:6px;border-radius:26px;--px:0px;--py:6px;
  transform:translate(-50%,-50%) translate3d(var(--px),var(--py),0);
  transition:transform .95s var(--ease),opacity .7s,filter .95s;
  box-shadow:0 40px 90px -30px rgba(0,0,0,.9),0 0 0 1px rgba(255,255,255,.05)}
.sh-phone .ph-top{padding:.5rem .65rem} .sh-phone .ph-av{width:22px;height:22px} .sh-phone .ph-av svg{width:13px;height:13px} .sh-phone .ph-name{font-size:.7rem}
.sh-phone .ph-body{min-height:262px;padding:.55rem .5rem .8rem;display:block;position:relative;transition:filter .5s}
.sh-phone.next{opacity:0;transform:translate(-50%,-50%) translate3d(var(--px),var(--py),-260px) scale(.92)}
.sh-phone.ghost{opacity:.4;filter:grayscale(1) brightness(.72);
  transform:translate(-50%,-50%) translate3d(calc(var(--px) + var(--gx,150px)),calc(var(--py) - 44px),-360px) rotateY(var(--gr,-26deg))}
.sh-quality{display:flex;align-items:center;gap:.4rem;font-size:.56rem;font-weight:700;color:#4A5551;
  background:rgba(255,255,255,.74);border-radius:8px;padding:.28rem .45rem;margin-bottom:.45rem}
.sh-quality i{flex:1;height:5px;border-radius:3px;background:rgba(0,0,0,.09);overflow:hidden;display:block}
.sh-quality b{display:block;height:100%;width:100%;background:#1B9E52;border-radius:3px;transition:width .5s var(--ease),background .5s}
.sh-feed{display:grid;gap:.35rem;justify-items:start}
.sh-bub{max-width:94%;border-radius:11px;padding:.34rem .5rem .28rem;font-size:.6rem;line-height:1.35;background:#fff;color:#111;
  box-shadow:0 1px 2px rgba(0,0,0,.08);animation:shpop .45s var(--spring)}
.sh-bub.spam{background:#EDEDEB;color:#6B6B66}
.sh-bub small{display:block;text-align:end;font-size:.5rem;color:#6C7A75;margin-top:.1rem}
.sh-bub small b{color:#34B7F1;font-weight:800}
.sh-bub.out{opacity:0;transform:translateY(-6px);transition:opacity .3s,transform .3s}
@keyframes shpop{from{opacity:0;transform:translateY(8px) scale(.9)}to{opacity:1;transform:none}}
.sh-stamp{position:absolute;inset:0;display:grid;place-items:center;background:rgba(20,10,8,.55);opacity:0;pointer-events:none;transition:opacity .3s}
.sh-stamp>span{border:3px solid #FF4D3D;color:#FF4D3D;border-radius:8px;padding:.35rem .6rem;font-weight:900;font-size:.84rem;
  white-space:nowrap;background:rgba(255,255,255,.92);box-shadow:0 10px 30px rgba(0,0,0,.4);
  transform:rotate(-12deg) scale(2.3);transition:transform .38s cubic-bezier(.2,1.5,.5,1)}
.sh-phone.banned .sh-stamp,.sh-phone.ghost .sh-stamp{opacity:1}
.sh-phone.banned .sh-stamp>span,.sh-phone.ghost .sh-stamp>span{transform:rotate(-12deg) scale(1)}
.sh-phone.banned .ph-body{filter:saturate(.3)}
.sh-phone.shake{animation:shshake .5s}
@keyframes shshake{0%,100%{translate:0 0}20%{translate:-4px 0}40%{translate:4px 0}60%{translate:-3px 0}80%{translate:3px 0}}

/* the shield — positioned by JS, unfolds via the inner element */
.sh-shield{width:250px;height:300px;pointer-events:none;transform-style:preserve-3d;
  transform:translate(-50%,-50%) translate3d(var(--sx,0px),var(--sy,0px),170px) rotateX(var(--srx,0deg)) rotateY(var(--sry,0deg))}
.sh-shield-in{position:absolute;inset:0;transform:scale(.15);opacity:0;transition:transform .85s var(--spring),opacity .5s}
.sh-shield.on .sh-shield-in{transform:none;opacity:1}
.sh-shield svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;filter:drop-shadow(0 0 18px rgba(212,236,90,.35))}
.sh-shield .glass{fill:url(#shg);stroke:var(--lime);stroke-width:2.4;stroke-linejoin:round}
.sh-shield .grid{stroke:rgba(212,236,90,.16);stroke-width:1;fill:none}
.sh-shield .mark{transition:fill-opacity .3s}
.sh-glow{position:absolute;inset:-14%;border-radius:50%;pointer-events:none;
  background:radial-gradient(closest-side,rgba(212,236,90,.26),transparent);filter:blur(12px);animation:shbreathe 3.2s ease-in-out infinite}
@keyframes shbreathe{0%,100%{opacity:.65}50%{opacity:1}}
.sh-shield.hit .sh-shield-in{animation:shflash .35s}
@keyframes shflash{0%{filter:brightness(1)}30%{filter:brightness(1.45)}100%{filter:brightness(1)}}
.sh-ripples{position:absolute;inset:0;pointer-events:none}
.sh-ripple{position:absolute;width:130px;height:130px;border-radius:50%;border:2px solid var(--lime);translate:-50% -50%;
  animation:shrip .6s ease-out forwards}
.sh-ripple.red{border-color:#FF6B5C;border-width:3px}
@keyframes shrip{0%{opacity:.95;transform:scale(.12)}100%{opacity:0;transform:scale(1)}}

/* flying messages */
.sh-msg{display:flex;align-items:center;gap:.42rem;padding:.34rem .6rem;border-radius:11px;font-size:.66rem;font-weight:700;
  white-space:nowrap;will-change:transform;box-shadow:0 10px 26px -10px rgba(0,0,0,.65);backface-visibility:hidden}
.sh-msg.blocked{background:#33322D;color:#D9D6C9;border:1px solid rgba(255,255,255,.12)}
.sh-msg.blocked i{width:8px;height:8px;border-radius:50%;background:#FF4D3D;flex:0 0 auto;box-shadow:0 0 0 3px rgba(255,77,61,.22)}
.sh-msg.approved{background:var(--lime);color:var(--ink);border:1px solid rgba(0,0,0,.08)}
.sh-msg.approved i{width:14px;height:14px;border-radius:50%;background:var(--ink);color:var(--lime);display:grid;place-items:center;font-size:.5rem;flex:0 0 auto;font-style:normal}
.sh-frag{width:10px;height:6px;border-radius:2px;background:#D9D6C9;opacity:.95;pointer-events:none;
  animation:shfrag .8s cubic-bezier(.18,.7,.4,1) forwards}
@keyframes shfrag{
  from{transform:translate(-50%,-50%) translate3d(var(--x),var(--y),170px) rotate(0deg);opacity:1}
  to{transform:translate(-50%,-50%) translate3d(calc(var(--x) + var(--dx)),calc(var(--y) + var(--dy)),calc(170px + var(--dz))) rotate(var(--rot));opacity:0}}

/* foot */
.sh-foot{width:100%;max-width:560px;display:grid;gap:.45rem;justify-items:center}
.sh-counters{display:flex;gap:1.4rem;opacity:0;translate:0 6px;transition:opacity .6s,translate .6s var(--ease)}
.sh-counters.on{opacity:1;translate:0 0}
.sh-counters div{text-align:center;min-width:64px}
.sh-counters div>span{display:block;font-size:.6rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:#9F9D90}
.sh-counters b{display:block;font-size:1.2rem;font-family:var(--disp);font-variant-numeric:tabular-nums;line-height:1.2}
.sh-counters .blk b{color:#FF8A7E} .sh-counters .del b{color:var(--lime)} .sh-counters .ban b{color:#fff}
.sh-cap{margin:0;font-size:.82rem;font-weight:600;color:#C9C6B8;text-align:center;min-height:1.5em;transition:color .4s}
.sh-cap.bad{color:#FF8A7E} .sh-cap.good{color:var(--lime)}

@media (max-width:940px){
  .shield-scene{margin-top:1.5rem}
  .sh-stage{height:420px;perspective:1100px}
  .sh-phone{width:162px;--py:8px} .sh-phone .ph-body{min-height:210px}
  .sh-shield{width:214px;height:256px}
  .sh-msg{font-size:.6rem;padding:.3rem .5rem}
  .sh-card{padding:.45rem .6rem} .sh-card b{font-size:.82rem}
  .sh-counters{gap:1rem} .sh-counters b{font-size:1.05rem}
  .sh-snd{padding:.34rem .7rem;font-size:.72rem}
}
@media (prefers-reduced-motion:reduce){
  .sh-shield-in,.sh-phone,.sh-card,.sh-counters,.sh-bub,.sh-glow,.sh-frag,.sh-ripple{transition:none;animation:none}
  .shield-copy h2 .strike::after{transform:scaleX(1);transition:none}
}

/* ============================================================
   v19 — CHAOS → BOX: eight 3D cubes tumble in with scroll, snap into one
   2×2×2 Wasilbox, the lid opens and the box becomes the inbox.
   ============================================================ */
.chaos-sub{color:#B9C3BF;font-size:var(--fs-1);font-weight:600;margin:.55rem 0 0}
.chip .ic{position:relative}
.chip .cmb{position:absolute;inset-inline-end:-6px;bottom:-6px;width:15px;height:15px;border-radius:5px;background:#fff;
  display:grid;place-items:center;box-shadow:0 1px 3px rgba(0,0,0,.25)}
.chip .cmb svg{width:9px;height:9px;color:var(--ink)}

.cube-stage{position:absolute;inset:0;z-index:2;pointer-events:none;perspective:1300px;perspective-origin:50% 50%}
.cube-world{position:absolute;left:50%;top:50%;width:0;height:0;transform-style:preserve-3d;will-change:transform,opacity}
.cube-world>*{position:absolute;left:0;top:0}
.cube{width:var(--s,60px);height:var(--s,60px);transform-style:preserve-3d;will-change:transform;margin:calc(var(--s,60px) / -2)}
.cube .f{position:absolute;inset:0;display:grid;place-items:center;overflow:hidden;
  background:var(--c,#333);color:#fff;border:1px solid rgba(255,255,255,.28);box-sizing:border-box;
  backface-visibility:hidden;-webkit-backface-visibility:hidden}
.cube .f::after{content:"";position:absolute;inset:0;pointer-events:none;background:var(--shade,transparent)}
.cube .f.fr{transform:translateZ(calc(var(--s,60px) / 2))}
.cube .f.bk{transform:rotateY(180deg) translateZ(calc(var(--s,60px) / 2));--shade:rgba(0,0,0,.28)}
.cube .f.rt{transform:rotateY(90deg) translateZ(calc(var(--s,60px) / 2));--shade:rgba(0,0,0,.18)}
.cube .f.lf{transform:rotateY(-90deg) translateZ(calc(var(--s,60px) / 2));--shade:rgba(0,0,0,.18)}
.cube .f.tp{transform:rotateX(90deg) translateZ(calc(var(--s,60px) / 2));--shade:rgba(255,255,255,.14)}
.cube .f.bt{transform:rotateX(-90deg) translateZ(calc(var(--s,60px) / 2));--shade:rgba(0,0,0,.42)}
.cube .f svg{width:46%;height:46%;position:relative;z-index:1}
.cube .f .nm{position:relative;z-index:1;font-size:.6rem;font-weight:800;line-height:1.15;text-align:center;padding:.15rem .25rem;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.cube .f .tx{position:relative;z-index:1;font-size:.5rem;font-weight:600;line-height:1.25;text-align:center;padding:.2rem .3rem;
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden;opacity:.95}
.cube.ig .f{--c:#C1275F;background:linear-gradient(135deg,#F58529,#DD2A7B 55%,#8134AF)}
.cube.wa .f{--c:#1FB458} .cube.ms .f{--c:#0084FF} .cube.fb .f{--c:#1877F2}
.cube .f .cmk{position:absolute;top:4px;inset-inline-end:4px;width:16px;height:16px;border-radius:5px;background:rgba(255,255,255,.92);
  display:grid;place-items:center;z-index:2} .cube .f .cmk svg{width:10px;height:10px;color:var(--ink)}
.cube .f::after{transition:background .4s}
.cube.flash .f::after{background:rgba(255,255,255,.62)!important;transition:none}
.cube .f{transition:box-shadow .3s}
.cube.locked .f{box-shadow:inset 0 0 0 1px rgba(212,236,90,.85)}
.cube.nofront .f.fr{visibility:hidden}

.trail{width:var(--s,60px);height:var(--s,60px);margin:calc(var(--s,60px) / -2);border-radius:8px;background:var(--c,#333);opacity:0;pointer-events:none;will-change:transform,opacity}
.trail.ig{background:linear-gradient(135deg,#F58529,#DD2A7B 55%,#8134AF)} .trail.wa{background:#1FB458} .trail.ms{background:#0084FF} .trail.fb{background:#1877F2}

/* the assembled box: lid with the Wasilbox mark, inner glow, seams */
.lid{width:var(--D,124px);height:var(--D,124px);margin:calc(var(--D,124px) / -2);transform-origin:50% 100%;
  background:#0E1618;border:1px solid rgba(212,236,90,.5);box-shadow:inset 0 0 0 1px rgba(255,255,255,.06),0 0 40px rgba(212,236,90,.18);
  display:grid;place-items:center;opacity:0;backface-visibility:hidden;will-change:transform,opacity}
.lid svg{width:54%;height:auto;overflow:visible}
.lid b{position:absolute;bottom:9%;left:0;right:0;text-align:center;font-family:var(--disp);font-weight:800;color:#fff;font-size:calc(var(--D,124px) * .11);letter-spacing:-.02em;direction:ltr}
.lid b i{font-style:normal;color:var(--lime)}
.lid::after{content:"";position:absolute;inset:0;background:linear-gradient(160deg,rgba(255,255,255,.08),transparent 55%)}
.lid-in{width:var(--D,124px);height:var(--D,124px);margin:calc(var(--D,124px) / -2);background:#0E1618;
  border:1px solid rgba(212,236,90,.35);display:grid;place-items:center;opacity:0;will-change:opacity}
.lid-in i{width:70%;height:70%;border-radius:50%;background:radial-gradient(closest-side,rgba(212,236,90,.9),rgba(212,236,90,.15) 60%,transparent);filter:blur(4px)}
.seams{width:var(--D,124px);height:var(--D,124px);margin:calc(var(--D,124px) / -2);opacity:0;pointer-events:none;
  background:linear-gradient(90deg,transparent calc(50% - 1px),rgba(212,236,90,.9) calc(50% - 1px),rgba(212,236,90,.9) calc(50% + 1px),transparent calc(50% + 1px)),
             linear-gradient(0deg,transparent calc(50% - 1px),rgba(212,236,90,.9) calc(50% - 1px),rgba(212,236,90,.9) calc(50% + 1px),transparent calc(50% + 1px));
  box-shadow:0 0 24px rgba(212,236,90,.45);will-change:opacity}

/* the inbox card fades in as the box opens; rows land afterwards */
.cbox{opacity:0;transform:scale(.86);will-change:transform,opacity}
.cbox.on{opacity:1;transform:none}
.chip{opacity:0}
.chip.landed,.chip.flying{opacity:1}

@media (max-width:920px){
  .chaos-sub{font-size:.9rem;padding-inline:1rem}
  .cube{--s:46px} .trail{--s:46px}
  .cube .f .nm{font-size:.52rem} .cube .f .tx{font-size:.44rem;-webkit-line-clamp:2}
}
@media (prefers-reduced-motion:reduce){
  .cube-stage{display:none}
  .cbox{opacity:1;transform:none}
  .chip{opacity:1}
}

/* v19 fix: the chaos sound button sat under the sticky header */
.chaos-stick .sndbtn{top:calc(72px + 1.1rem)}
@media (max-width:920px){.chaos-stick .sndbtn{top:calc(64px + .8rem)}}

/* v19: the lid is a flat overlay placed over the box's front face (keeps it out of the 3D sort) */
.box-flat{position:absolute;left:0;top:0;width:100px;height:100px;opacity:0;pointer-events:none;perspective:900px;will-change:left,top,width,height,opacity}
.bf-in{position:absolute;inset:0;background:#0B1214;border:1px solid rgba(212,236,90,.35);display:grid;place-items:center;opacity:0}
.bf-in i{width:70%;height:70%;border-radius:50%;background:radial-gradient(closest-side,rgba(212,236,90,.95),rgba(212,236,90,.18) 60%,transparent);filter:blur(5px)}
.bf-lid{position:absolute;inset:0;transform-origin:50% 100%;background:#0E1618;border:1px solid rgba(212,236,90,.55);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.06),0 0 44px rgba(212,236,90,.22);display:grid;place-items:center;backface-visibility:hidden;will-change:transform}
.bf-lid::after{content:"";position:absolute;inset:0;background:linear-gradient(160deg,rgba(255,255,255,.08),transparent 55%)}
.bf-lid svg{width:54%;height:auto;overflow:visible}
.bf-lid b{position:absolute;bottom:9%;left:0;right:0;text-align:center;font-family:var(--disp);font-weight:800;color:#fff;font-size:11cqw;letter-spacing:-.02em;direction:ltr}
.box-flat{container-type:size}
.bf-lid b i{font-style:normal;color:var(--lime)}

/* ============================================================
   v20 — PRICING: boxes that open, hanging price tags that flip,
   a plan finder, and the ownership vault with its break-even chart
   ============================================================ */
.pricing{background:#fff;color:var(--ink);padding-block:clamp(3.5rem,9vw,7rem);position:relative;overflow:hidden;
  border-block-start:1px solid rgba(0,0,0,.04)}
.pricing::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(760px circle at 50% 0%,rgba(212,236,90,.22),transparent 70%)}
.pr-head{position:relative;text-align:center;max-width:44rem;margin:0 auto 2rem}
.pr-head .kick{display:inline-flex;align-items:center;gap:.55rem;font-size:var(--fs-0);font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink-3);margin:0 0 .9rem}
.pr-head .kick::before,.pr-head .kick::after{content:"";width:22px;height:2px;background:var(--lime);border-radius:2px}
.pr-head h2{font-family:var(--disp);font-size:clamp(1.9rem,1.2rem + 3vw,3.4rem);font-weight:700;line-height:1.15;letter-spacing:-.02em;margin:0 0 .9rem}
.pr-head h2 .hl{background:linear-gradient(transparent 60%,var(--lime) 60%,var(--lime) 94%,transparent 94%);padding-inline:.06em;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.pr-head .lede{color:var(--ink-2);font-size:var(--fs-1);line-height:1.7;margin:0 0 1.4rem}

/* billing toggle */
.pr-toggle{position:relative;display:inline-grid;grid-template-columns:1fr 1fr;background:#EEF0EC;border-radius:999px;padding:4px;isolation:isolate}
.pr-toggle button{position:relative;z-index:1;border:0;background:none;padding:.55rem 1.3rem;border-radius:999px;font-weight:700;
  font-size:var(--fs-0);color:var(--ink-3);cursor:pointer;display:inline-flex;align-items:center;gap:.45rem;transition:color .25s}
.pr-toggle button.on{color:var(--ink)}
.pr-toggle button i{font-style:normal;font-size:.62rem;font-weight:800;background:var(--lime);color:var(--ink);border-radius:999px;padding:.12rem .5rem}
.pr-pill{position:absolute;z-index:0;top:4px;bottom:4px;inset-inline-start:4px;width:calc(50% - 4px);background:#fff;border-radius:999px;
  box-shadow:0 2px 8px rgba(0,0,0,.12);transition:translate .35s var(--spring)}
.pr-toggle.yearly .pr-pill{translate:100% 0} html[dir="rtl"] .pr-toggle.yearly .pr-pill{translate:-100% 0}

/* plan finder */
.pf{position:relative;display:grid;grid-template-columns:1fr 1fr auto;gap:1rem 1.6rem;align-items:end;max-width:60rem;margin:0 auto 2.4rem;
  background:var(--cream);border:1px solid var(--line);border-radius:18px;padding:1rem 1.3rem}
.pf-q label{display:flex;justify-content:space-between;align-items:baseline;gap:.6rem;font-size:var(--fs-0);font-weight:700;color:var(--ink-2);margin-bottom:.35rem}
.pf-q output{font-family:var(--disp);font-size:1.15rem;color:var(--ink);min-width:2ch;text-align:center;background:#fff;border:1px solid var(--line);border-radius:8px;padding:0 .4rem}
.pf-q input[type=range]{width:100%;accent-color:#9DB70E;cursor:pointer}
.pf-res{font-size:var(--fs-0);font-weight:700;color:var(--ink-3);white-space:nowrap;padding-bottom:.3rem}
.pf-res b{display:inline-block;font-family:var(--disp);font-size:1.05rem;color:var(--ink);background:var(--lime);border-radius:999px;padding:.15rem .8rem;margin-inline-start:.3rem;transition:transform .35s var(--spring)}
.pf-res b.pop{transform:scale(1.12)}

/* the four boxes */
.pgrid{position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1rem;align-items:start;perspective:1600px}
.pbox{position:relative;transform-style:preserve-3d;transition:transform .5s var(--spring),opacity .4s;transform:translateY(var(--lift,0px)) rotateY(var(--ty,0deg)) rotateX(var(--tx,0deg))}
.pbox.fit{--lift:-10px} .pbox.far{opacity:.72}
.pb-rim{position:relative;height:30px;perspective:900px;z-index:2;filter:drop-shadow(0 -1px 0 rgba(0,0,0,.05))}
.pb-rim::before{content:"";position:absolute;inset:0;background:linear-gradient(#DCDCD3,#E9E8E1);clip-path:polygon(7% 0,93% 0,100% 100%,0 100%)}
.pb-rim::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.28),rgba(0,0,0,.05));clip-path:polygon(9% 12%,91% 12%,97% 92%,3% 92%)}
.pb-lid{position:absolute;inset:0;background:linear-gradient(#F4F3EE,#E4E3DB);clip-path:polygon(7% 0,93% 0,100% 100%,0 100%);
  transform-origin:50% 0;transform:rotateX(0deg);transition:transform 1.1s cubic-bezier(.2,.8,.2,1) .35s;backface-visibility:hidden;z-index:3}
.pricing.in .pb-lid{transform:rotateX(-112deg)}
.pbox:nth-child(2) .pb-lid{transition-delay:.47s} .pbox:nth-child(3) .pb-lid{transition-delay:.59s} .pbox:nth-child(4) .pb-lid{transition-delay:.71s}
.pb-card{position:relative;background:#fff;border:1px solid var(--line);border-top:0;border-radius:0 0 22px 22px;padding:1.4rem 1.3rem 1.5rem;
  box-shadow:0 24px 50px -30px rgba(10,17,19,.28);display:flex;flex-direction:column;gap:.9rem;min-height:100%}
.pbox.featured .pb-card{border-color:rgba(157,183,14,.55);box-shadow:0 0 0 2px var(--lime),0 30px 60px -30px rgba(157,183,14,.45)}
.pb-badge{position:absolute;top:-13px;inset-inline-start:1.2rem;background:var(--lime);color:var(--ink);font-size:.66rem;font-weight:800;
  letter-spacing:.06em;border-radius:999px;padding:.22rem .8rem;white-space:nowrap;z-index:3}
.pb-head{display:grid;gap:.15rem;padding-inline-end:6.2rem}
.pb-name{font-family:var(--disp);font-size:1.45rem;font-weight:800;letter-spacing:-.02em}
.pb-for{font-size:.78rem;color:var(--ink-3);font-weight:600}

/* content unpacks from the box once the lid opens */
.pb-card>*:not(.pb-badge){opacity:0;translate:0 14px;transition:opacity .5s var(--ease),translate .55s var(--ease);transition-delay:calc(.9s + var(--i,0) * 60ms)}
.pb-badge{opacity:0;transition:opacity .5s 1.3s} .pricing.in .pb-badge{opacity:1}
.pb-feats li{opacity:0;translate:0 12px;transition:opacity .45s var(--ease),translate .5s var(--ease);transition-delay:calc(.9s + var(--i,0) * 60ms)}
.pbox:nth-child(2) .pb-card>*:not(.pb-badge),.pbox:nth-child(2) .pb-feats li{transition-delay:calc(1.02s + var(--i,0) * 60ms)}
.pbox:nth-child(3) .pb-card>*:not(.pb-badge),.pbox:nth-child(3) .pb-feats li{transition-delay:calc(1.14s + var(--i,0) * 60ms)}
.pbox:nth-child(4) .pb-card>*:not(.pb-badge),.pbox:nth-child(4) .pb-feats li{transition-delay:calc(1.26s + var(--i,0) * 60ms)}
.pricing.in .pb-card>*:not(.pb-badge),.pricing.in .pb-feats li{opacity:1;translate:0 0}
.pb-card>.pb-feats{opacity:1;translate:0 0}
.pb-feats{list-style:none;margin:0;padding:0;display:grid;gap:.42rem}
.pb-feats li{display:flex;align-items:flex-start;gap:.5rem;font-size:.82rem;font-weight:600;color:var(--ink-2);line-height:1.4}
.pb-feats svg{width:14px;height:14px;color:#8CA80B;flex:0 0 auto;margin-top:.22rem}
.pb-card .btn{margin-top:auto;width:100%;padding-inline:1rem}
.pb-more{font-size:.78rem;font-weight:700;color:#C9C6B8;text-decoration:none;text-align:center;border-bottom:0}
.pb-more:hover{color:var(--lime)}

/* hanging price tag: front = monthly, back = yearly */
.tag{position:absolute;top:-6px;inset-inline-end:1.1rem;width:5.7rem;height:4.9rem;transform-style:preserve-3d;transition:transform .8s cubic-bezier(.3,1.3,.4,1);z-index:2}
.tag::before{content:"";position:absolute;left:50%;top:-30px;width:1.5px;height:30px;background:#B9B6A8;translate:-50% 0}
.tf{position:absolute;inset:0;display:grid;place-content:center;text-align:center;gap:.05rem;border-radius:10px;backface-visibility:hidden;
  background:#FFFDF2;border:1.5px solid #E1DFCF;box-shadow:0 8px 20px -12px rgba(10,17,19,.35)}
.tf::before{content:"";position:absolute;top:6px;left:50%;width:7px;height:7px;border-radius:50%;background:#fff;border:1.5px solid #CFCCBB;translate:-50% 0}
.tf b{font-family:var(--disp);font-size:1.35rem;font-weight:800;letter-spacing:-.03em;line-height:1;margin-top:.5rem}
.tf small{font-size:.62rem;font-weight:700;color:var(--ink-3)}
.tf em{font-style:normal;font-size:.52rem;font-weight:700;color:#7A8B0A;white-space:nowrap;margin-top:.1rem}
.tf.back{transform:rotateY(180deg);background:#F5FBD6;border-color:#C6D66A}
.rib{position:absolute;bottom:-10px;left:50%;translate:-50% 0;font-style:normal;font-size:.55rem;font-weight:800;background:var(--lime);color:var(--ink);border-radius:999px;padding:.1rem .45rem;white-space:nowrap}
.pgrid.yearly .tag:not(.once){transform:rotateY(180deg)}
html[dir="rtl"] .tf.back{transform:rotateY(180deg)}

/* ownership vault */
.pbox.own .pb-rim::before{background:linear-gradient(#0F1A1C,#16232A)}
.pbox.own .pb-rim::after{background:linear-gradient(180deg,rgba(212,236,90,.35),rgba(212,236,90,.05))}
.pbox.own .pb-lid{background:linear-gradient(#1B2A2E,#0E1618);transform-origin:0 50%;transform:rotateY(0deg)}
html[dir="rtl"] .pbox.own .pb-lid{transform-origin:100% 50%}
.pricing.in .pbox.own .pb-lid{transform:rotateY(-105deg)} html[dir="rtl"] .pricing.in .pbox.own .pb-lid{transform:rotateY(105deg)}
.pbox.own .pb-card{background:#0E1618;color:#fff;border-color:rgba(212,236,90,.35);box-shadow:0 30px 60px -30px rgba(0,0,0,.7)}
.pbox.own .pb-card::before{content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;
  background:radial-gradient(360px circle at 50% 0%,rgba(212,236,90,.16),transparent 70%)}
.pbox.own .pb-for{color:#B9C3BF} .pbox.own .pb-feats li{color:#E7EDEA} .pbox.own .pb-feats svg{color:var(--lime)}
.pbox.own .tf{background:#15201F;border-color:rgba(212,236,90,.5);color:#fff} .pbox.own .tf::before{background:#0E1618;border-color:rgba(212,236,90,.6)}
.pbox.own .tf small{color:#B9C3BF} .pbox.own .tag::before{background:rgba(212,236,90,.6)}
.pbox.own .pb-name::before{content:"";display:inline-block;width:20px;height:20px;margin-inline-end:.4rem;vertical-align:-3px;
  background:var(--lime);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M15 3a6 6 0 0 0-5.8 7.6L2 17.8V22h4v-2h2v-2h2l1.5-1.5A6 6 0 1 0 15 3Zm1.5 6a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3Z'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M15 3a6 6 0 0 0-5.8 7.6L2 17.8V22h4v-2h2v-2h2l1.5-1.5A6 6 0 1 0 15 3Zm1.5 6a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3Z'/%3E%3C/svg%3E") center/contain no-repeat}

/* break-even chart */
.be{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);border-radius:14px;padding:.6rem .7rem .5rem}
.be svg{width:100%;height:auto;display:block;overflow:visible;direction:ltr}
.be-axis{fill:none;stroke:rgba(255,255,255,.14);stroke-width:1}
.be-own{fill:none;stroke:var(--lime);stroke-width:2;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.2s var(--ease) 1.3s}
.be-pro{fill:none;stroke:#FF8A7E;stroke-width:2;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.6s var(--ease) 1.5s}
.be-dot{fill:#fff;stroke:var(--lime);stroke-width:3;opacity:0;transition:opacity .4s 2.9s}
.be-t{font-size:9px;font-weight:700;fill:#B9C3BF;font-family:inherit} .be-t1{fill:#FF8A7E} .be-t2{fill:var(--lime)} .be-t3{fill:#fff;font-size:8.5px;opacity:0;transition:opacity .4s 3s}
.pricing.in .be-own,.pricing.in .be-pro{stroke-dashoffset:0} .pricing.in .be-dot,.pricing.in .be-t3{opacity:1}
.be tspan{display:none} html[lang="ar"] .be tspan[data-lang="ar"],html[lang="en"] .be tspan[data-lang="en"]{display:inline}
.be p{margin:.5rem 0 0;font-size:.74rem;line-height:1.5;color:#E7EDEA;font-weight:600}

/* common strip + note */
.pr-common{display:flex;flex-wrap:wrap;justify-content:center;gap:.55rem .9rem;margin:2.2rem auto 0;max-width:62rem;align-items:center}
.pr-common b{font-size:var(--fs-0);color:var(--ink);margin-inline-end:.3rem}
.pr-common>span{display:inline-flex;align-items:center;gap:.4rem;font-size:.82rem;font-weight:700;color:var(--ink);border-radius:14px;padding:.55rem .95rem}
.pr-common>span::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--lime)}
.pr-note{text-align:center;font-size:.8rem;color:var(--ink-3);margin:1.2rem auto 0;max-width:46rem;line-height:1.6}
.pr-note b{color:var(--ink)}

@media (max-width:1100px){.pgrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:1.4rem 1rem}}
@media (max-width:940px){
  .pf{grid-template-columns:1fr;gap:.9rem} .pf-res{padding-bottom:0}
}
@media (max-width:640px){
  .pricing{padding-block:2.8rem}
  .pgrid{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:.9rem;padding:14px .4rem 1.4rem;margin-inline:-.4rem;scrollbar-width:none;perspective:none}
  .pgrid::-webkit-scrollbar{display:none}
  .pbox{flex:0 0 82vw;scroll-snap-align:center;transform:none!important}
  .pbox.featured{order:-1} .pbox.far{opacity:1}
  .pb-card{padding:1.2rem 1.05rem 1.3rem}
  .pr-common{gap:.45rem .5rem} .pr-common span{font-size:.72rem;padding:.25rem .6rem}
}
@media (prefers-reduced-motion:reduce){
  .pb-lid,.pb-card>*,.pb-feats li,.tag,.be-own,.be-pro,.be-dot,.be-t3{transition:none}
  .pb-card>*:not(.pb-badge),.pb-feats li{opacity:1;translate:0 0}
}

/* ============================================================
   v21 — PRICING · luxe pass
   nested-box entrance · soft rounded cards · cursor halo & sheen · premium plan finder
   ============================================================ */
.pricing .wrap{position:relative}
.pgrid{perspective:1400px;padding-top:.6rem}
.pbox{transform-style:flat;--px:0px;--py:0px;--sc:1;--tx:0deg;--ty:0deg;--lift:0px;
  transform:translate3d(var(--px),var(--py),0) translateY(var(--lift)) scale(var(--sc)) rotateX(var(--tx)) rotateY(var(--ty));
  transition:transform .55s cubic-bezier(.2,.8,.2,1),opacity .4s;will-change:transform}
.pbox.nest{transition:transform 1.15s cubic-bezier(.16,1,.3,1),opacity .4s}
.pbox:hover{z-index:10}
.pbox::before{content:"";position:absolute;inset:-9% -13%;border-radius:48px;z-index:-1;pointer-events:none;
  background:radial-gradient(380px circle at var(--mx,50%) var(--my,50%),rgba(212,236,90,.95),rgba(212,236,90,.4) 42%,transparent 72%);
  filter:blur(28px);opacity:0;transition:opacity .4s var(--ease)}
.pbox:hover::before,.pbox.glow::before{opacity:1}
.pbox.fit::before{opacity:.55}

.pb-card{border:1px solid rgba(10,17,19,.09);border-radius:28px;padding:1.5rem 1.35rem 1.55rem;
  background:linear-gradient(180deg,#FFFFFF,#F9F9F5);
  box-shadow:0 34px 70px -40px rgba(10,17,19,.38),inset 0 1px 0 rgba(255,255,255,.9),inset 0 -1px 0 rgba(10,17,19,.03);overflow:visible}
.pb-card::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:radial-gradient(240px circle at var(--mx,50%) var(--my,50%),rgba(255,255,255,.55),transparent 62%);opacity:0;transition:opacity .35s}
.pbox:hover .pb-card::after{opacity:1}
.pbox.featured .pb-card{border:1.5px solid transparent;
  background:linear-gradient(180deg,#FFFFFF,#F9F9F5) padding-box,linear-gradient(150deg,#D4EC5A,#9DB70E 60%,#D4EC5A) border-box;
  box-shadow:0 40px 80px -40px rgba(157,183,14,.55),inset 0 1px 0 rgba(255,255,255,.9)}
.pbox.own .pb-card{border:1.5px solid transparent;color:#fff;
  background:linear-gradient(160deg,#16232A,#0B1214 70%) padding-box,linear-gradient(150deg,rgba(212,236,90,.7),rgba(212,236,90,.15) 50%,rgba(212,236,90,.6)) border-box;
  box-shadow:0 40px 80px -36px rgba(0,0,0,.75),inset 0 1px 0 rgba(255,255,255,.08)}
.pbox.own .pb-card::before{border-radius:inherit}
.pbox.own .pb-card::after{background:radial-gradient(240px circle at var(--mx,50%) var(--my,50%),rgba(212,236,90,.18),transparent 62%)}
.pbox.own::before{background:radial-gradient(380px circle at var(--mx,50%) var(--my,50%),rgba(212,236,90,1),rgba(212,236,90,.45) 42%,transparent 72%)}
.pbox.pb-pulse .pb-card{animation:pbpulse .7s var(--ease)}
@keyframes pbpulse{0%{box-shadow:0 0 0 0 rgba(212,236,90,.7),0 34px 70px -40px rgba(10,17,19,.38)}100%{box-shadow:0 0 0 22px rgba(212,236,90,0),0 34px 70px -40px rgba(10,17,19,.38)}}

/* content no longer unpacks from a lid — always visible */
.pb-card>*:not(.pb-badge),.pb-feats li,.pbox:nth-child(2) .pb-card>*:not(.pb-badge),.pbox:nth-child(3) .pb-card>*:not(.pb-badge),.pbox:nth-child(4) .pb-card>*:not(.pb-badge){opacity:1;translate:0 0;transition:none}
.pb-badge{opacity:1;transition:none;top:-12px;box-shadow:0 6px 16px -8px rgba(157,183,14,.8)}
.tag{top:-14px} .tag::before{top:-22px;height:22px}
.pb-more{color:#B9C3BF}

/* ---- premium plan finder ---- */
.pf{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:1.2rem 1.6rem;align-items:stretch;max-width:64rem;margin:0 auto 2.2rem;
  background:linear-gradient(160deg,#FAFAF7,#EFEFEA);border:1px solid rgba(10,17,19,.08);border-radius:26px;padding:1.25rem 1.45rem;
  box-shadow:0 30px 60px -40px rgba(10,17,19,.3),inset 0 1px 0 #fff}
.pf-panel{display:grid;gap:1.15rem}
.pf-q{display:grid;gap:.45rem}
.pf-lab{display:flex;align-items:center;gap:.6rem;font-size:var(--fs-0);font-weight:700;color:var(--ink-2)}
.pf-ic{width:32px;height:32px;border-radius:10px;display:grid;place-items:center;flex:0 0 auto;
  background:#fff;border:1px solid rgba(10,17,19,.08);box-shadow:0 4px 10px -6px rgba(10,17,19,.25)}
.pf-ic svg{width:17px;height:17px;color:var(--ink)}
.pf-range{position:relative;padding-top:2rem}
.pf-range input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:12px;border-radius:999px;outline:none;cursor:pointer;margin:0;
  background:linear-gradient(to right,#C6E23E 0 var(--p,20%),#DCDDD5 var(--p,20%));box-shadow:inset 0 1px 3px rgba(0,0,0,.12)}
html[dir="rtl"] .pf-range input[type=range]{background:linear-gradient(to left,#C6E23E 0 var(--p,20%),#DCDDD5 var(--p,20%))}
.pf-range input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:28px;height:28px;border-radius:50%;background:#fff;border:3px solid #9DB70E;
  box-shadow:0 4px 16px rgba(157,183,14,.55),0 0 0 6px rgba(212,236,90,.25);transition:transform .2s var(--spring),box-shadow .2s}
.pf-range input[type=range]::-moz-range-thumb{width:22px;height:22px;border-radius:50%;background:#fff;border:3px solid #9DB70E;box-shadow:0 4px 16px rgba(157,183,14,.55),0 0 0 6px rgba(212,236,90,.25)}
.pf-range input[type=range]:hover::-webkit-slider-thumb,.pf-range input[type=range]:active::-webkit-slider-thumb{transform:scale(1.12);box-shadow:0 6px 20px rgba(157,183,14,.7),0 0 0 10px rgba(212,236,90,.28)}
.pf-range input[type=range]:focus-visible{outline:2px solid var(--ink);outline-offset:4px}
.pf-bub{position:absolute;top:0;left:var(--bx,20%);translate:-50% 0;background:var(--ink);color:#fff;font-family:var(--disp);font-weight:800;font-size:.9rem;
  line-height:1;padding:.36rem .7rem;border-radius:9px;min-width:2.2rem;text-align:center;pointer-events:none;transition:left .06s linear;white-space:nowrap}
.pf-bub::after{content:"";position:absolute;left:50%;bottom:-5px;width:9px;height:9px;background:var(--ink);translate:-50% 0;rotate:45deg;border-radius:2px}
.pf-ticks{display:flex;justify-content:space-between;padding:.35rem 8px 0;font-size:.64rem;font-weight:700;color:#9AA39F;font-variant-numeric:tabular-nums}
.pf-out{position:relative;min-width:15rem;display:grid;align-content:center;justify-items:center;gap:.15rem;text-align:center;
  background:linear-gradient(160deg,#141F22,#0B1214);color:#fff;border-radius:20px;padding:1.1rem 1.3rem;
  border:1px solid rgba(212,236,90,.35);box-shadow:0 30px 60px -36px rgba(0,0,0,.7)}
.pf-out::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:radial-gradient(200px circle at 50% 0%,rgba(212,236,90,.22),transparent 70%)}
.pf-out-l{font-size:.64rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:#B9C3BF}
.pf-out b{font-family:var(--disp);font-size:1.7rem;font-weight:800;letter-spacing:-.02em;color:var(--lime);line-height:1.15;transition:transform .35s var(--spring)}
.pf-out b.pop{animation:pfpop .5s var(--spring)}
@keyframes pfpop{0%{transform:translateY(8px) scale(.9);opacity:.2}100%{transform:none;opacity:1}}
.pf-price{font-family:var(--disp);font-size:1rem;font-weight:700;color:#fff}
.pf-hint{font-size:.72rem;font-weight:600;color:#9FB2AA}
.pf-beam{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:1;overflow:visible}
.pf-beam path{fill:none;stroke:url(#pfbg);stroke-width:2;stroke-dasharray:7 9;animation:pfflow 1.1s linear infinite;opacity:0;transition:opacity .4s}
.pricing.in .pf-beam path.on{opacity:.9}
@keyframes pfflow{to{stroke-dashoffset:-32}}

@media (max-width:940px){
  .pf{grid-template-columns:1fr;padding:1.1rem 1.1rem} .pf-out{min-width:0}
  .pf-beam{display:none}
}
@media (max-width:640px){
  .pbox::before{display:none} .pb-card::after{display:none}
  .pgrid{padding-top:1rem}
}
@media (prefers-reduced-motion:reduce){
  .pbox,.pbox.nest{transition:none} .pf-beam path{animation:none} .pf-out b.pop{animation:none} .pbox.pb-pulse .pb-card{animation:none}
}

/* ============================================================
   v22 — PRICING refinements: equal-height cards, softer halo, floating finder (no panel),
   cleaner nested entrance (shells peel out, content fades in on arrival)
   ============================================================ */
.pgrid{align-items:stretch}
.pbox{display:flex;flex-direction:column}
.pb-card{flex:1 1 auto;min-height:0}
.pbox.fit{--lift:-6px}
.pbox::before{inset:-8% -12%;
  background:radial-gradient(360px circle at var(--mx,50%) var(--my,50%),rgba(212,236,90,.5),rgba(212,236,90,.16) 45%,transparent 72%);filter:blur(30px)}
.pbox.own::before{background:radial-gradient(360px circle at var(--mx,50%) var(--my,50%),rgba(212,236,90,.6),rgba(212,236,90,.2) 45%,transparent 72%)}
.pbox.fit::before{opacity:.28}
.pbox.glow::before{opacity:.45}

/* shells: while nested, cards are clean rounded shapes; content fades in once each card lands */
.pgrid .pbox .pb-card>*:not(.pb-badge),.pgrid .pbox .pb-feats li,.pgrid .pbox .pb-badge{transition:opacity .5s var(--ease)}
.pgrid .pbox.shell .pb-card>*,.pgrid .pbox.shell .pb-feats li,.pgrid .pbox.shell .pb-badge{opacity:0!important;transition:none!important}
.pbox.nest{transition:transform 1.05s cubic-bezier(.16,1,.3,1),opacity .4s}

/* the finder floats: no panel, softer controls */
.pf{background:none;border:0;box-shadow:none;padding:.2rem .4rem;gap:1rem 2.6rem;align-items:center;max-width:62rem;margin-bottom:2.6rem}
.pf-panel{gap:1rem}
.pf-lab{color:var(--ink-2)}
.pf-ic{background:#F4F4EF;border-color:rgba(10,17,19,.06);box-shadow:none}
.pf-range{padding-top:1.9rem}
.pf-range input[type=range]{height:8px;box-shadow:none;background:linear-gradient(to right,#CFE45C 0 var(--p,20%),#ECECE6 var(--p,20%))}
html[dir="rtl"] .pf-range input[type=range]{background:linear-gradient(to left,#CFE45C 0 var(--p,20%),#ECECE6 var(--p,20%))}
.pf-range input[type=range]::-webkit-slider-thumb{width:24px;height:24px;border-width:2.5px;box-shadow:0 3px 12px rgba(157,183,14,.4),0 0 0 5px rgba(212,236,90,.18)}
.pf-range input[type=range]::-moz-range-thumb{width:20px;height:20px;border-width:2.5px;box-shadow:0 3px 12px rgba(157,183,14,.4),0 0 0 5px rgba(212,236,90,.18)}
.pf-bub{background:#1B2426;font-size:.84rem;padding:.3rem .62rem;border-radius:8px;box-shadow:0 6px 14px -8px rgba(0,0,0,.5)}
.pf-bub::after{background:#1B2426}
.pf-ticks{color:#B4BAB6}
.pf-out{background:none;border:0;box-shadow:none;padding:.2rem 0;min-width:13.5rem;color:var(--ink);gap:.2rem}
.pf-out::before{display:none}
.pf-out-l{color:var(--ink-3)}
.pf-out b{position:relative;color:var(--ink);padding:.05rem .7rem;isolation:isolate}
.pf-out b::before{content:"";position:absolute;inset:-4px -14px;border-radius:999px;z-index:-1;
  background:radial-gradient(closest-side,rgba(212,236,90,.7),rgba(212,236,90,.25) 70%,transparent);filter:blur(5px)}
.pf-price{color:var(--ink-2)} .pf-hint{color:var(--ink-3)}
@media (max-width:940px){.pf{padding:0;gap:1.1rem} .pf-out{justify-items:start;text-align:start}}

/* ============================================================
   v25 — CONTACT PAGE · Zendesk-style: plain page, one column, labels above, grey fields, full-width lime send
   ============================================================ */
.zc{background:#fff;padding-block:clamp(2rem,5vw,4rem) clamp(3rem,7vw,6rem);min-height:calc(100vh - 140px)}
.zc-in{max-width:640px;margin-inline-start:0}
.zc-kick{font-size:var(--fs-0);font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--ink);margin:0 0 1rem}
.zc h1{font-family:var(--disp);font-size:clamp(2.2rem,1.4rem + 3.4vw,3.6rem);font-weight:700;line-height:1.1;letter-spacing:-.02em;margin:0 0 1.2rem}
.zc-lede{color:var(--ink-2);font-size:var(--fs-1);line-height:1.7;margin:0 0 2rem}
.zc-form{display:grid;gap:1.25rem;position:relative}
.zc-form .hp{position:absolute;inset-inline-start:0;top:0;width:1px;height:1px;opacity:0;overflow:hidden;pointer-events:none;border:0;padding:0;margin:0}
.zc-form label{display:grid;gap:.55rem;font-size:var(--fs-1);font-weight:500;color:var(--ink)}
.zc-form label em{font-style:normal;color:var(--ink-3);font-size:.9em}
.zc-form input,.zc-form select,.zc-form textarea{font:inherit;font-size:var(--fs-1);color:var(--ink);background:#F3F3F1;border:1px solid #8C8C86;border-radius:14px;padding:.95rem 1.1rem;outline:none;width:100%;
  transition:border-color .2s,box-shadow .2s,background .2s}
.zc-form input:focus,.zc-form select:focus,.zc-form textarea:focus{border-color:var(--ink);background:#fff;box-shadow:0 0 0 3px rgba(212,236,90,.6)}
.zc-form .bad{border-color:#D6336C;box-shadow:0 0 0 3px rgba(214,51,108,.15)}
.zc-form textarea{resize:vertical;min-height:140px}
.zc-form select{appearance:none;-webkit-appearance:none;padding-inline-end:2.6rem;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230A1113' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-size:18px;background-position:right 1rem center}
html[dir="rtl"] .zc-form select{background-position:left 1rem center}
.zc-consent{margin:.2rem 0 0;font-size:.92rem;line-height:1.6;color:var(--ink-2)}
.zc-consent a{color:var(--ink);font-weight:700}
.zc-send{width:100%;padding:1rem 1.4rem;font-size:1.05rem;border-radius:999px}
.zc-send.busy{opacity:.6;pointer-events:none}
.c-state{display:none;border-radius:16px;padding:1rem 1.1rem;gap:.15rem}
.c-state b{display:block;font-size:1rem} .c-state>span{display:block;font-size:.9rem;color:var(--ink-2)}
.c-state.ok{background:#F0F8DA;border:1px solid #CFE45C} .c-state.err{background:#FDECEF;border:1px solid #F3B7C6}
.zc-form.sent .c-state.ok{display:grid}
.zc-form.sent label,.zc-form.sent .zc-consent,.zc-form.sent .zc-send{display:none}
.zc-alt{display:flex;flex-wrap:wrap;align-items:center;gap:1rem 1.4rem;margin-top:2.2rem;padding-top:1.6rem;border-top:1px solid var(--line)}
.zc-wa{display:inline-flex;align-items:center;gap:.6rem;text-decoration:none;color:var(--ink);font-weight:700}
.zc-wa i{width:36px;height:36px;border-radius:50%;background:var(--wa);color:#fff;display:grid;place-items:center} .zc-wa i svg{width:20px;height:20px}
.zc-mail{color:var(--ink-2);text-decoration:none;font-weight:600;border-bottom:1px solid var(--line)} .zc-mail:hover{color:var(--ink);border-color:var(--ink)}
@media (max-width:640px){.zc{padding-block:1.6rem 3rem} .zc-in{max-width:none}}

/* ============================================================
   v27 — THE LAST SCREEN · cinematic finale: the page goes dark, the line appears word by word
   at full-screen size, then the form and buttons rise out of the light at the centre
   ============================================================ */
body.fin-on .hdr{opacity:0;pointer-events:none;transition:opacity .7s var(--ease)}
.hdr{transition:border-color .25s var(--ease),box-shadow .25s var(--ease),opacity .5s var(--ease),margin-bottom .25s var(--ease)}
.fin{position:relative;isolation:isolate;background:#050809;color:#fff;min-height:100vh;min-height:100svh;display:grid;place-items:center;overflow:hidden;padding:clamp(3rem,8vh,6rem) 1rem}
.fin::after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(120% 90% at 50% 50%,transparent 45%,rgba(0,0,0,.65) 100%)}
.fin-stage{position:static;width:100%;min-height:calc(100svh - 6rem);display:grid;place-items:center}
.fin-c{position:absolute;inset:0;width:100%;height:100%;display:block;z-index:0;pointer-events:none}
.fin-light{position:absolute;left:50%;top:50%;width:90vmax;height:90vmax;translate:-50% -50%;border-radius:50%;pointer-events:none;z-index:1;
  background:radial-gradient(closest-side,rgba(212,236,90,.62),rgba(212,236,90,.16) 38%,rgba(212,236,90,.03) 62%,transparent 72%);
  transform:scale(0);opacity:0;transition:transform 1.1s cubic-bezier(.16,1,.3,1),opacity .7s}
.fin-light.on{transform:scale(1);opacity:1}
.fin-light.calm{opacity:.55;animation:finbreathe 4.5s ease-in-out infinite}
@keyframes finbreathe{0%,100%{transform:scale(1)}50%{transform:scale(1.06)}}
.fin-words{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none;z-index:2;text-align:center}
.fw{font-family:var(--disp);font-weight:800;font-size:clamp(3.4rem,15vw,15rem);line-height:1;letter-spacing:-.04em;color:#fff;white-space:nowrap;
  opacity:0;transform:scale(.86);filter:blur(10px);transition:opacity .3s var(--ease),transform .75s cubic-bezier(.2,.8,.2,1),filter .4s var(--ease),color .4s}
.fw.in{opacity:1;transform:scale(1);filter:blur(0)}
html[lang="en"] .fw{font-size:clamp(2.6rem,9.5vw,9.5rem)}
.fw.out{opacity:0;transform:scale(1.14);filter:blur(12px);transition:opacity .24s var(--ease),transform .4s var(--ease),filter .3s}
.fw.lime{color:var(--lime);text-shadow:0 0 70px rgba(212,236,90,.55)}
.fw.rise{opacity:0;transform:translateY(-22vh) scale(.24);filter:blur(4px);transition:opacity .4s var(--ease) .25s,transform .7s cubic-bezier(.2,.8,.2,1),filter .5s}
.fin-panel{position:relative;z-index:3;width:min(100%,700px);text-align:center;pointer-events:none}
.fin-panel>*{opacity:0;transform:scale(.72) translateY(14px);filter:blur(14px);
  transition:opacity .55s var(--ease),transform .8s cubic-bezier(.16,1,.3,1),filter .6s var(--ease);transition-delay:calc(var(--i,0) * 85ms)}
.fin-panel.on{pointer-events:auto} .fin-panel.on>*{opacity:1;transform:none;filter:blur(0)}
.fin-line{font-family:var(--disp);font-weight:700;font-size:clamp(1rem,1.6vw,1.25rem);letter-spacing:.02em;color:var(--lime);margin:0 0 .9rem}
.fin-panel h2{font-family:var(--disp);font-size:clamp(2.4rem,1.6rem + 4vw,4.6rem);font-weight:800;line-height:1.05;letter-spacing:-.03em;margin:0 0 .9rem}
.fin-panel .lede{font-size:var(--fs-1);line-height:1.7;color:#C9D2CE;margin:0 auto 1.4rem;max-width:34rem}
.fin-form{position:relative;display:flex;gap:.55rem;flex-wrap:wrap;justify-content:center;max-width:34rem;margin:0 auto}
.fin-form .hp{position:absolute;inset-inline-start:0;top:0;width:1px;height:1px;opacity:0;overflow:hidden;pointer-events:none;border:0;padding:0;margin:0}
.fin-form input[type=email]{flex:1 1 220px;min-width:0;border:1.5px solid rgba(255,255,255,.2);background:rgba(255,255,255,.06);color:#fff;border-radius:999px;padding:.9rem 1.25rem;font:inherit;font-size:var(--fs-1);outline:none;transition:border-color .2s,box-shadow .2s,background .2s}
.fin-form input::placeholder{color:#8E9B96}
.fin-form input[type=email]:focus{border-color:var(--lime);background:rgba(255,255,255,.09);box-shadow:0 0 0 4px rgba(212,236,90,.18)}
.fin-form input.bad{border-color:#FF6B5C;box-shadow:0 0 0 4px rgba(255,107,92,.18)}
.fin-form .btn{box-shadow:0 20px 50px -20px rgba(212,236,90,.7)}
.fin-ok{display:none;flex-basis:100%;margin:.2rem 0 0;font-size:.9rem;font-weight:700;color:var(--lime)}
.fin-form.sent .fin-ok{display:block} .fin-form.sent input,.fin-form.sent .btn{display:none}
.fin-note{font-size:.78rem;font-weight:600;color:#8E9B96;margin:.9rem 0 1.5rem}
.fin-actions{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:.7rem 1rem}
.fin-wa{display:inline-flex;align-items:center;gap:.6rem;text-decoration:none;color:#fff;background:#128C7E;border-radius:999px;padding:.5rem 1rem .5rem .55rem;box-shadow:0 12px 26px -14px rgba(18,140,126,.9);transition:transform .3s var(--spring),background .2s}
.fin-wa:hover{background:#0F7A6E;transform:translateY(-2px)}
.fin-wa i{width:32px;height:32px;border-radius:50%;background:var(--wa);display:grid;place-items:center;flex:0 0 auto} .fin-wa i svg{width:18px;height:18px}
.fin-wa b{display:block;font-size:.84rem;line-height:1.2;text-align:start}
.fin-wa small{display:block;font-size:.64rem;opacity:.85;max-width:15rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:start} .fin-wa small:empty{display:none}
.fin-wa.wiggle{animation:ctawiggle .7s var(--spring)}
@keyframes ctawiggle{0%,100%{rotate:0deg}20%{rotate:-4deg}40%{rotate:4deg}60%{rotate:-3deg}80%{rotate:2deg}}
.fin-page{border-color:rgba(255,255,255,.5);color:#fff;padding:.6rem 1.15rem;font-size:.9rem} .fin-page:hover{background:#fff;color:var(--ink)}
.fin-mail{color:#EDF2F0;text-decoration:none;font-weight:600;font-size:.9rem;border-bottom:1px solid rgba(255,255,255,.3)} .fin-mail:hover{color:var(--lime);border-color:var(--lime)}
.fin-247{display:inline-flex;align-items:center;gap:.4rem;font-size:.8rem;font-weight:700;color:#8E9B96}
.fin-247 i{width:8px;height:8px;border-radius:50%;background:#1B9E52;box-shadow:0 0 0 4px rgba(27,158,82,.25);animation:cta-live 2s ease-in-out infinite}
@keyframes cta-live{0%,100%{box-shadow:0 0 0 3px rgba(27,158,82,.25)}50%{box-shadow:0 0 0 7px rgba(27,158,82,.08)}}
.fin-replay{position:absolute;bottom:.4rem;inset-inline-end:.4rem;z-index:4;width:40px;height:40px;border-radius:50%;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.05);color:#8E9B96;display:grid;place-items:center;cursor:pointer;opacity:0;transition:opacity .5s,color .2s,border-color .2s}
.fin-replay svg{width:18px;height:18px} .fin-replay.show{opacity:1} .fin-replay:hover{color:var(--lime);border-color:var(--lime)}
@media (max-width:640px){
  .fin{padding:2.5rem .9rem} .fin-stage{min-height:calc(100svh - 5rem)}
  .fw{font-size:clamp(3rem,19vw,6rem)}
  .fin-form input[type=email]{flex-basis:100%} .fin-form .btn{width:100%}
}
@media (prefers-reduced-motion:reduce){
  .fw,.fin-light,.fin-panel>*,.hdr{transition:none} .fin-light.calm{animation:none}
}

/* ============================================================
   v29 — FOOTER "الصندوق" (all pages) + LEGAL PAGES (basic, no motion)
   ============================================================ */
.foot{position:relative;background:#070B0C;color:#C9D2CE;padding:clamp(3rem,6vw,4.5rem) 0 1.6rem;overflow:hidden;border-top:1px solid rgba(255,255,255,.06)}
.foot .wrap{position:relative;z-index:1}
.foot-bg{position:absolute;inset-inline:0;bottom:-.18em;text-align:center;pointer-events:none;user-select:none;z-index:0;
  font-family:var(--disp);font-weight:800;font-size:clamp(5rem,19vw,20rem);line-height:1;letter-spacing:-.05em;color:transparent;
  -webkit-text-stroke:1.5px rgba(212,236,90,.10);translate:0 var(--fbg,0px);direction:ltr}
.foot-grid{display:grid;grid-template-columns:1.5fr repeat(3,minmax(0,1fr));gap:2.4rem 2rem;align-items:start}
.foot-logo{color:#fff} .foot-logo b{color:#fff} .foot-logo svg{transition:transform 1.1s cubic-bezier(.2,.8,.2,1)}
.foot.in .foot-logo svg{transform:rotate(360deg)}
.foot-tag{margin:1rem 0 1.2rem;font-family:var(--disp);font-weight:700;font-size:1.05rem;color:var(--lime)}
.foot-icons{display:flex;gap:.55rem;flex-wrap:wrap}
.foot-icons a{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;color:#EDF2F0;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);
  transition:background .2s,color .2s,transform .25s var(--spring),border-color .2s}
.foot-icons a svg{width:19px;height:19px}
.foot-icons a:hover{background:var(--lime);color:var(--ink);border-color:var(--lime);transform:translateY(-3px)}
.foot-loc{margin:1rem 0 0;font-size:.82rem;color:#8E9B96}
.foot-col{display:grid;gap:.55rem;align-content:start}
.foot-col b{color:#fff;font-size:.8rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;margin-bottom:.35rem}
.foot-col a{color:#C9D2CE;text-decoration:none;font-size:.92rem;transition:color .2s,translate .2s;width:max-content}
.foot-col a:hover{color:var(--lime);translate:var(--hx,-3px) 0} html[dir="ltr"] .foot-col a{--hx:3px}
.foot-bottom{margin-top:2.6rem;padding-top:1.2rem;border-top:1px solid rgba(255,255,255,.08);display:flex;flex-wrap:wrap;align-items:center;gap:.8rem 1.4rem;font-size:.78rem;color:#8E9B96}
.foot-copy{color:#C9D2CE}
.foot-lang{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);color:#C9D2CE}
.foot-lang .opt.on{background:var(--lime);color:var(--ink)}
.foot-meta{flex:1 1 100%;font-size:.7rem;color:#6B7772;line-height:1.5}
.legal-page .foot,.contact-page .foot{margin-top:0}
@media (max-width:940px){.foot-grid{grid-template-columns:1fr 1fr;gap:1.8rem 1.4rem} .foot-brand{grid-column:1 / -1}}
@media (max-width:520px){.foot-grid{grid-template-columns:1fr} .foot-bg{font-size:24vw}}
@media (prefers-reduced-motion:reduce){.foot-logo svg{transition:none} .foot.in .foot-logo svg{transform:none}}

/* legal pages */
.legal{background:#fff;color:var(--ink);padding:clamp(2rem,5vw,4rem) 0 clamp(3rem,7vw,6rem);min-height:60vh}
/* v45 · SITE4-04: one article per page (one <h1>, both languages inside it); its two tables of contents, "last updated"
   lines and section sets carry data-lang, so only the page's language is shown (the hidden one is display:none) */
.legal-art{display:grid;grid-template-columns:240px minmax(0,1fr);gap:clamp(1.5rem,4vw,4rem);align-items:start}
.legal-toc{position:sticky;top:96px;background:var(--cream);border:1px solid var(--line);border-radius:16px;padding:1rem 1.1rem;font-size:.86rem}
.legal-toc b{display:block;font-size:.72rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);margin-bottom:.6rem}
.legal-toc ol{margin:0;padding-inline-start:1.2rem;display:grid;gap:.35rem;color:var(--ink-3)}
.legal-toc a{color:var(--ink-2);text-decoration:none} .legal-toc a:hover{color:var(--ink);text-decoration:underline}
.legal-body{max-width:760px}
.legal-body h1{font-family:var(--disp);font-size:clamp(2rem,1.3rem + 2.6vw,3.2rem);font-weight:700;line-height:1.15;letter-spacing:-.02em;margin:0 0 .6rem}
.legal-meta{color:var(--ink-3);font-size:.9rem;margin:0 0 2rem;padding-bottom:1.2rem;border-bottom:1px solid var(--line)}
.legal-body section{margin:0 0 2rem;scroll-margin-top:100px}
.legal-body h2{font-family:var(--disp);font-size:1.25rem;font-weight:700;margin:0 0 .6rem;letter-spacing:-.01em}
.legal-body p,.legal-body li{font-size:1rem;line-height:1.85;color:var(--ink-2);margin:0 0 .75rem}
.legal-body ul,.legal-body ol{padding-inline-start:1.4rem;margin:0 0 .9rem}
.legal-body li{margin-bottom:.35rem}
.legal-body a{color:var(--ink);font-weight:600;text-decoration:underline;text-decoration-color:rgba(10,17,19,.3);text-underline-offset:3px}
.legal-body a:hover{text-decoration-color:var(--ink)}
.legal-body b{color:var(--ink)}
.legal-example{background:var(--cream);border:1px solid var(--line);border-radius:14px;padding:1rem 1.2rem;margin:.6rem 0 1rem}
.legal-example>b{display:block;font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);margin-bottom:.5rem}
.legal-example p{font-size:.95rem;margin-bottom:.5rem}
@media (max-width:940px){.legal-art{grid-template-columns:1fr} .legal-toc{position:static}}

/* ============================================================
   v31 — HERO · messages flow along a lime dashed semicircle into the inbox
   (five chips incl. a Facebook and an Instagram comment) + calmer type scale
   ============================================================ */
.hero h1{font-size:clamp(2.3rem,1.45rem + 2.9vw,4rem);line-height:1.1;margin-bottom:1.1rem}
.hero-sub{font-size:clamp(1rem,.94rem + .3vw,1.18rem);line-height:1.65;margin-bottom:1.5rem;max-width:30rem}
.trial-note{font-size:.9rem}
.hero-form input{font-size:1rem}
.hero-privacy{font-size:.76rem}

.cluster{min-height:520px}
.tilt{overflow:visible}
.orbit-arc{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.orbit-arc path{fill:none;stroke-linecap:round}
.orbit-arc #orbitpath{stroke:var(--lime);stroke-width:2.2;stroke-dasharray:7 9;animation:orbitflow 1.25s linear infinite}
.orbit-arc .orbit-glow{stroke:rgba(212,236,90,.28);stroke-width:12;filter:blur(6px)}
@keyframes orbitflow{to{stroke-dashoffset:-32}}

/* chips ride the arc (CSS motion path set by JS as px), keep upright, and are swallowed by the inbox at the end */
.bub{animation:none;opacity:0;max-width:236px;padding:.66rem .85rem;border-radius:16px;
  offset-rotate:0deg;offset-anchor:50% 50%;inset-inline:auto;left:0;right:auto;top:0;
  animation:bubride var(--cycle,15s) linear infinite;animation-delay:calc(var(--k,0) * (var(--cycle,15s) / 5))}
.b1,.b2,.b3,.b4,.b5{top:0;inset-inline:auto;left:0;right:auto;transform:none}
@keyframes bubride{
  0%{offset-distance:0%;opacity:0;transform:scale(.7)}
  4%{opacity:1;transform:scale(1)}
  80%{offset-distance:100%;opacity:1;transform:scale(1)}
  88%{offset-distance:100%;opacity:0;transform:scale(.45) translateY(18px)}
  100%{offset-distance:100%;opacity:0;transform:scale(.45) translateY(18px)}}
.bub .ic{position:relative;width:32px;height:32px}
.bub .cmb{position:absolute;inset-inline-end:-6px;bottom:-6px;width:15px;height:15px;border-radius:5px;background:#fff;display:grid;place-items:center;box-shadow:0 1px 3px rgba(0,0,0,.25)}
.bub .cmb svg{width:9px;height:9px;color:var(--ink)}
.ic.fb{background:var(--fb)}
.bub .nm{font-size:.76rem} .bub .tx{font-size:.78rem}

.mini{bottom:auto;inset-inline-end:auto;left:0;top:0;width:250px;animation:pop .8s var(--spring) .6s forwards;transform:none}
.mini-h .n{transition:transform .3s var(--spring)}
.mini-r{position:relative;overflow:hidden}
.mini-r::after{content:"";position:absolute;inset:0;background:rgba(212,236,90,.35);opacity:0;
  animation:rowhit var(--cycle,15s) linear infinite;animation-delay:calc(var(--k,0) * (var(--cycle,15s) / 5) + var(--cycle,15s) * .8)}
@keyframes rowhit{0%{opacity:.9}5%{opacity:0}100%{opacity:0}}
.mini.hit .n{transform:scale(1.25)}

@media (max-width:920px){
  .hero .cluster{position:relative;min-height:330px;height:330px;margin-top:1.2rem;perspective:none}
  .hero .tilt{position:absolute;inset:0;transform:none!important;transform-style:flat}
  .hero .bub{position:absolute;width:auto;max-width:var(--bubw,200px);margin:0;padding:.5rem .65rem;border-radius:13px;gap:.5rem}
  .hero .bub .ic{width:26px;height:26px;border-radius:8px} .hero .bub .ic svg{width:15px;height:15px}
  .hero .bub .nm{font-size:.66rem} .hero .bub .tx{font-size:.68rem} .hero .bub .tm{display:none}
  .hero .b2,.hero .b3,.hero .b4,.hero .b5,.hero .mini{display:flex}
  .hero .mini{display:block;width:200px}
  .hero .mini-h{padding:.45rem .65rem} .hero .mini-h b{font-size:.72rem}
  .hero .mini-r{padding:.4rem .65rem} .hero .mini-r span{font-size:.66rem}
  .hero .mini-r:nth-child(n+5){display:none}   /* three rows fit the small card */
}
@media (prefers-reduced-motion:reduce){
  .bub{animation:none;opacity:1;offset-distance:calc(var(--k,0) * 22%)} .orbit-arc #orbitpath{animation:none} .mini-r::after{animation:none}
}

/* ============================================================
   v32 — 404 page (dark, on-brand, no motion beyond a gentle float)
   ============================================================ */
.nf{background:#0A1113;color:#fff;min-height:calc(100vh - 140px);display:grid;place-items:center;padding:clamp(3rem,8vw,6rem) 0;position:relative;overflow:hidden}
.nf::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(600px circle at 50% 40%,rgba(212,236,90,.12),transparent 70%)}
.nf-in{position:relative;text-align:center;max-width:44rem;display:grid;justify-items:center;gap:1rem}
.nf-box{position:relative;width:120px;height:120px;transform-style:preserve-3d;transform:rotateX(-22deg) rotateY(32deg);margin-bottom:1.6rem;--s:120px;animation:nffloat 5s ease-in-out infinite}
@keyframes nffloat{0%,100%{translate:0 0}50%{translate:0 -8px}}
.nf-box .of{position:absolute;inset:0;background:#0E1618;border:1px solid rgba(212,236,90,.45);box-sizing:border-box;display:grid;place-items:center}
.nf-box .of.fr span{font-family:var(--disp);font-weight:800;font-size:2rem;color:var(--lime);letter-spacing:-.04em}
.nf .kick{display:inline-flex;align-items:center;gap:.55rem;font-size:var(--fs-0);font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:#B4B2A3;margin:0}
.nf .kick::before,.nf .kick::after{content:"";width:18px;height:2px;background:var(--lime);border-radius:2px}
.nf h1{font-family:var(--disp);font-size:clamp(1.9rem,1.2rem + 3vw,3.4rem);font-weight:700;line-height:1.15;letter-spacing:-.02em;margin:0}
.nf h1 .lime{color:var(--lime)}
.nf .lede{color:#C9C6B8;font-size:var(--fs-1);line-height:1.7;margin:0;max-width:32rem}
.nf-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:.8rem;margin-top:.6rem}
.nf .btn-line{border-color:rgba(255,255,255,.5);color:#fff} .nf .btn-line:hover{background:#fff;color:var(--ink)}
@media (prefers-reduced-motion:reduce){.nf-box{animation:none}}
.nf-box .of.fr{transform:translateZ(calc(var(--s) / 2))}
.nf-box .of.bk{transform:rotateY(180deg) translateZ(calc(var(--s) / 2));background:#141F22}
.nf-box .of.lf{transform:rotateY(-90deg) translateZ(calc(var(--s) / 2));background:#0B1214}
.nf-box .of.rt{transform:rotateY(90deg) translateZ(calc(var(--s) / 2));background:#121C1F}
.nf-box .of.bt{transform:rotateX(-90deg) translateZ(calc(var(--s) / 2));background:radial-gradient(closest-side,rgba(212,236,90,.4),#0B1214 80%)}
.nf-box .of.olid{transform:rotateX(90deg) translateZ(calc(var(--s) / 2)) translateY(calc(var(--s) / -2)) rotateX(112deg) translateY(calc(var(--s) / 2));background:linear-gradient(#1B2A2E,#0E1618);border-color:rgba(212,236,90,.6)}

/* ============================================================
   v38 — 3D tilt cards (.wb-tilt): pricing chips + chatbot chips. Driven by assets/tilt.js
   ============================================================ */
.wb-tilt{position:relative;transform-style:preserve-3d;transform:perspective(720px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));
  background:linear-gradient(180deg,#ffffff 0%,#f4f6ea 100%);border:1px solid #e1e5d2;
  box-shadow:0 1px 0 #fff inset,0 -1px 0 rgba(10,17,19,.06) inset,0 14px 26px -16px rgba(10,17,19,.35),0 2px 6px -2px rgba(10,17,19,.12);
  transition:box-shadow .3s var(--ease),border-color .3s;will-change:transform;
  animation:wbfloat 5.2s ease-in-out infinite;animation-delay:var(--fi,0s)}
.wb-tilt::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .3s;
  background:radial-gradient(150px circle at var(--mx,50%) var(--my,50%),rgba(255,255,255,.9),rgba(212,236,90,.28) 42%,transparent 72%)}
.wb-tilt.hover{box-shadow:0 26px 44px -20px rgba(10,17,19,.45),0 0 0 2px rgba(212,236,90,.65),0 1px 0 #fff inset;border-color:rgba(190,215,60,.9)}
.wb-tilt.hover::after{opacity:1}
.wb-tilt>*{transform:translateZ(16px)}
.pr-common>span.wb-tilt::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--lime);box-shadow:0 0 0 3px rgba(212,236,90,.28);transform:translateZ(16px)}
@keyframes wbfloat{0%,100%{translate:0 0}50%{translate:0 -4px}}
@media (prefers-reduced-motion:reduce){.wb-tilt{animation:none;transform:none}}

/* ============================================================
   v42 — QA fixes (SITE-10/14/18/19/23/24)
   ============================================================ */
/* SITE-19 · skip link (first focusable element on every page) + focus rings that stay visible on the dark sections */
.skip-link{position:fixed;top:12px;inset-inline-start:12px;z-index:10000;background:var(--ink);color:#fff;font-weight:700;font-size:.95rem;line-height:1.4;
  padding:.7rem 1.1rem;border-radius:12px;text-decoration:none;transform:translateY(-200%);transition:transform .2s var(--ease)}
.skip-link:focus{transform:none;box-shadow:0 12px 30px -12px rgba(0,0,0,.55);outline:2px solid var(--lime);outline-offset:-5px}
main:focus{outline:none}
.hero-card :focus-visible,.chaos :focus-visible,.wbai-final :focus-visible,.shield :focus-visible,.pbox.own :focus-visible,.fin :focus-visible,.foot :focus-visible{outline-color:var(--lime)}
/* SITE-10 · the floating chat launcher never sits on top of the open mobile menu */
@media (max-width:1060px){html.wb-menu-open .wbc-root,body.menu-open .wbc-root{display:none!important}}
/* SITE-24 · the last footer line can scroll clear of the chat launcher (60px button, 20px from the corner) */
@media (max-width:1365px){.foot{padding-bottom:calc(1.6rem + 76px)}}
/* SITE-14/18 · visible field errors + visually hidden labels */
.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0 0 0 0)!important;white-space:nowrap!important;border:0!important}
.f-err{margin:-.8rem 0 0;font-size:.88rem;font-weight:600;line-height:1.5;color:#B4234F}
.form-err{flex-basis:100%;margin:.1rem 0 0;font-size:.86rem;font-weight:700;line-height:1.5;color:#FFB4A8}
.fin-form .form-err{text-align:center}
.f-err[hidden],.form-err[hidden]{display:none}
.hero-form input.bad{border-color:#FF6B5C;box-shadow:0 0 0 4px rgba(255,107,92,.35)} .hero-form input.bad:focus{outline-color:#FF6B5C}
/* SITE-22/23 · yearly per-month prices carry "≈"; "billed yearly $X" is 12px and may wrap in two lines — in yearly mode the
   hanging tag grows a little so the line clears the "2 months free" ribbon (the monthly tag keeps its size) */
.tf em{font-size:.75rem;line-height:1.25;white-space:normal;max-width:5.4rem;margin-top:.2rem}
.tf.back small{line-height:1.35}
.tf b .apx{font-size:.7em;font-weight:700;margin-inline-end:.05em;opacity:.8}
.pgrid.yearly .tag:not(.once){height:6.5rem}
@media (prefers-reduced-motion:no-preference){.tag{transition:transform .8s cubic-bezier(.3,1.3,.4,1),height .4s var(--ease)}}

/* ================= v43 (QA pass #2) ================= */
/* SITE-24 · phones & tablets: the floating chat button steps aside while the page scrolls (site.js sets html.wb-scrolling)
   and comes back as soon as the scrolling stops */
@media (max-width:1060px){
  .wbc-root .wbc-launch{transition:opacity .22s ease,transform .22s ease}
  html.wb-scrolling .wbc-root:not(.open) .wbc-launch{opacity:0;transform:translateY(18px) scale(.9);pointer-events:none}
}
@media (max-width:1060px) and (prefers-reduced-motion:reduce){.wbc-root .wbc-launch{transition:none}}
/* U12 · computers: the open chat window stays below the sticky header (it covered "Try for free" on 1366×768) */
@media (min-width:601px){.wbc-root .wbc-panel{height:min(640px,calc(100vh - 240px))}}


/* ================= v45 (QA pass #4) ================= */
/* SITE3-08 · the sticky header shrinks once the page scrolls (131 → 67 px on computers); a bottom margin takes up the
   difference, so nothing below it moves. A jump to a section (table of contents, menu, a link from another page, a reload)
   now ends where the browser computed it — the content used to rise 64 px after the jump and the heading slid under the
   header. Keep these in step with the .hdr-top / .hdr-main heights above. */
.hdr.scrolled{margin-bottom:64px}                            /* (38 + 92) - 66 */
@media (max-width:1060px){.hdr.scrolled{margin-bottom:8px}}  /* 70 - 62 */
@media (max-width:920px){.hdr.scrolled{margin-bottom:6px}}   /* 64 - 58 */
/* site.js shrinks the header once this marker is off screen: only after the page has scrolled at least as far as the header
   gets shorter, so the margin above always lies under the (smaller) header and never shows as a gap */
.hdr-mark{height:65px}
@media (max-width:1060px){.hdr-mark{height:9px}}
/* PERF4-10 · a section that is off screen pauses its looping CSS animations (site.js marks it .wb-off); they kept phones
   busy repainting parts of the page nobody was looking at. Only the looping ones are listed, so marking a section costs
   little (a new looping animation belongs here too). */
.wb-off .bub,.wb-off .mini,.wb-off .mini-r::after,.wb-off #orbitpath,.wb-off .dn,.wb-off .rail i,.wb-off .caret,.wb-off .sh-glow,
.wb-off #pfbeamp,.wb-off .fin-light,.wb-off .fin-247 i,.wb-off .wb-tilt,.wb-off .wbai-typing i,.wb-off .wbbot-step i,
.wb-off .wbbot-typing i,.wb-off .wbcmp-typing i,.wb-off .wasil,.wb-off .eye,.wb-off .wsl-ray,.wb-off .ag-body,.wb-off .ag-head,
.wb-off .ag-sweat,.wb-off .ag-nb,.wb-off .nf-box{animation-play-state:paused!important}
/* SITE4-02 · phones & tablets: the website chat button sits in the bottom-right corner in both languages, so in English the
   "Sound" buttons move to the left side (in Arabic they already are there) — they never pass under the chat button */
@media (max-width:1060px){
  html[dir="ltr"] .sndbtn{right:auto;left:clamp(1rem,3vw,2rem)}
  html[dir="ltr"] .sh-snd{left:.2rem}
}
@media (max-width:920px){html[dir="ltr"] .sndbtn:not(.sh-snd){left:.9rem}}
/* ============================================================
   v46 (QA pass #5)
   ============================================================ */
/* a menu link to a section lands below the sticky header — on phones the section's title went under it (the legal pages keep
   their own 100px) */
:where(main[id],section[id]){scroll-margin-top:76px}
/* the Arabic hero title: room between its lines for the diacritics (they touched at 1366 and 768) */
html[lang="ar"] .hero h1{line-height:1.28}
/* the menu button shows ✕ while the phone menu is open (it kept showing ☰) */
.burger .bg-x{display:none}
.menu-open .burger .bg-lines{display:none}
.menu-open .burger .bg-x{display:inline}
/* the "Sound" and "Replay" buttons sit on the left in English on every screen (in Arabic they already are) — the website chat
   button (bottom right in both languages) covered them for ~60–100 px of scrolling on a desktop (SITE4-02) */
@media (min-width:1061px){html[dir="ltr"] .chaos-stick .sndbtn{right:auto;left:clamp(1rem,3vw,2rem)}}
html[dir="ltr"] .fin-replay{right:auto;left:.4rem}
/* the phone menu: a closed section's links are out of the keyboard's reach (they took Tab while invisible); they stay
   drawn until the section has finished closing. An open section inherits the menu's own visibility ("inherit", never
   "visible": the closed menu is only transparent, so its links would stay tappable over the page) */
.m-body>div{visibility:hidden;transition:visibility 0s linear .32s}
.m-group.open .m-body>div{visibility:inherit;transition:visibility 0s}
/* ============================================================
   v49 (QA pass #6)
   ============================================================ */
/* PERF6-06 / SITE6-08 · a first visit gets the web fonts right after the first paint (see the pages' <head>). Until they
   arrive the text is drawn with local fonts scaled to the web fonts' widths, so no line breaks differently and nothing moves
   when IBM Plex Sans Arabic / Alexandria take over (terms page on a computer: layout shift 0.14 → 0). Latin text: Arial,
   Helvetica or Liberation Sans (same widths); Arabic text: DejaVu Sans. Each factor = width of the same paragraph in the web
   font ÷ width in the local font, per weight. Any other local font is used as before, unscaled. */
@font-face{font-family:'WB Plex Fallback';font-weight:400;size-adjust:100%;src:local('Arial'),local('ArialMT'),local('Helvetica'),local('Liberation Sans'),local('LiberationSans');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'WB Plex Fallback';font-weight:500;size-adjust:103.5%;src:local('Arial'),local('ArialMT'),local('Helvetica'),local('Liberation Sans'),local('LiberationSans');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'WB Plex Fallback';font-weight:600;size-adjust:96.5%;src:local('Arial Bold'),local('Arial-BoldMT'),local('Helvetica Bold'),local('Helvetica-Bold'),local('Liberation Sans Bold'),local('LiberationSans-Bold');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'WB Plex Fallback';font-weight:700;size-adjust:97.8%;src:local('Arial Bold'),local('Arial-BoldMT'),local('Helvetica Bold'),local('Helvetica-Bold'),local('Liberation Sans Bold'),local('LiberationSans-Bold');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'WB Plex Fallback';font-weight:400;size-adjust:89.4%;src:local('DejaVu Sans'),local('DejaVuSans');
  unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}
@font-face{font-family:'WB Plex Fallback';font-weight:500;size-adjust:92.5%;src:local('DejaVu Sans'),local('DejaVuSans');
  unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}
@font-face{font-family:'WB Plex Fallback';font-weight:600;size-adjust:80.6%;src:local('DejaVu Sans Bold'),local('DejaVuSans-Bold');
  unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}
@font-face{font-family:'WB Plex Fallback';font-weight:700;size-adjust:82.2%;src:local('DejaVu Sans Bold'),local('DejaVuSans-Bold');
  unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}
@font-face{font-family:'WB Alexandria Fallback';font-weight:500;size-adjust:112.4%;src:local('Arial'),local('ArialMT'),local('Helvetica'),local('Liberation Sans'),local('LiberationSans');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'WB Alexandria Fallback';font-weight:700;size-adjust:106.2%;src:local('Arial Bold'),local('Arial-BoldMT'),local('Helvetica Bold'),local('Helvetica-Bold'),local('Liberation Sans Bold'),local('LiberationSans-Bold');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'WB Alexandria Fallback';font-weight:800;size-adjust:108.4%;src:local('Arial Bold'),local('Arial-BoldMT'),local('Helvetica Bold'),local('Helvetica-Bold'),local('Liberation Sans Bold'),local('LiberationSans-Bold');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'WB Alexandria Fallback';font-weight:500;size-adjust:106%;src:local('DejaVu Sans'),local('DejaVuSans');
  unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}
@font-face{font-family:'WB Alexandria Fallback';font-weight:700;size-adjust:96.4%;src:local('DejaVu Sans Bold'),local('DejaVuSans-Bold');
  unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}
@font-face{font-family:'WB Alexandria Fallback';font-weight:800;size-adjust:98.8%;src:local('DejaVu Sans Bold'),local('DejaVuSans-Bold');
  unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}
/* v49 · SITE6-08 on phones: Android (and ChromeOS) have none of the fonts above, so the text was drawn unscaled there and
   re-wrapped when the web fonts came. Their own fonts, each scaled the same way (Roboto 5.3 / Noto Naskh Arabic / Noto Sans
   Arabic from @fontsource, measured against the web fonts: Latin = the same paragraph + headings, Arabic = as drawn here, its
   spaces and Latin in the scaled Roboto face): Latin text Roboto, Arabic text Noto Naskh Arabic (Android's Arabic font) or
   else Noto Sans Arabic. Every face lists only the font it was measured with, so a device that has none of them skips it.
   Apple (SF Arabic / Geeza Pro) and Windows (Segoe UI / Tahoma) Arabic fonts are not here: their widths are not published and
   the fonts can't be downloaded to measure (their Latin text already uses the Arial / Helvetica faces above). */
@font-face{font-family:'WB Plex Roboto';font-weight:400;size-adjust:100.7%;src:local('Roboto'),local('Roboto Regular'),local('Roboto-Regular');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'WB Plex Roboto';font-weight:500;size-adjust:104.1%;src:local('Roboto'),local('Roboto Regular'),local('Roboto-Regular');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'WB Plex Roboto';font-weight:600;size-adjust:103.9%;src:local('Roboto Bold'),local('Roboto-Bold');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'WB Plex Roboto';font-weight:700;size-adjust:105.3%;src:local('Roboto Bold'),local('Roboto-Bold');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'WB Plex Naskh';font-weight:400;size-adjust:103.5%;src:local('Noto Naskh Arabic'),local('Noto Naskh Arabic Regular'),local('NotoNaskhArabic-Regular');
  unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}
@font-face{font-family:'WB Plex Naskh';font-weight:500;size-adjust:107.1%;src:local('Noto Naskh Arabic'),local('Noto Naskh Arabic Regular'),local('NotoNaskhArabic-Regular');
  unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}
@font-face{font-family:'WB Plex Naskh';font-weight:600;size-adjust:105.5%;src:local('Noto Naskh Arabic Bold'),local('NotoNaskhArabic-Bold');
  unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}
@font-face{font-family:'WB Plex Naskh';font-weight:700;size-adjust:108%;src:local('Noto Naskh Arabic Bold'),local('NotoNaskhArabic-Bold');
  unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}
@font-face{font-family:'WB Plex Noto Sans';font-weight:400;size-adjust:94.2%;src:local('Noto Sans Arabic'),local('Noto Sans Arabic Regular'),local('NotoSansArabic-Regular');
  unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}
@font-face{font-family:'WB Plex Noto Sans';font-weight:500;size-adjust:97.3%;src:local('Noto Sans Arabic'),local('Noto Sans Arabic Regular'),local('NotoSansArabic-Regular');
  unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}
@font-face{font-family:'WB Plex Noto Sans';font-weight:600;size-adjust:92.9%;src:local('Noto Sans Arabic Bold'),local('NotoSansArabic-Bold');
  unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}
@font-face{font-family:'WB Plex Noto Sans';font-weight:700;size-adjust:95.1%;src:local('Noto Sans Arabic Bold'),local('NotoSansArabic-Bold');
  unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}
@font-face{font-family:'WB Alexandria Roboto';font-weight:500;size-adjust:112.9%;src:local('Roboto'),local('Roboto Regular'),local('Roboto-Regular');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'WB Alexandria Roboto';font-weight:700;size-adjust:114.4%;src:local('Roboto Bold'),local('Roboto-Bold');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'WB Alexandria Roboto';font-weight:800;size-adjust:116.7%;src:local('Roboto Bold'),local('Roboto-Bold');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'WB Alexandria Naskh';font-weight:500;size-adjust:122.8%;src:local('Noto Naskh Arabic'),local('Noto Naskh Arabic Regular'),local('NotoNaskhArabic-Regular');
  unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}
@font-face{font-family:'WB Alexandria Naskh';font-weight:700;size-adjust:126.6%;src:local('Noto Naskh Arabic Bold'),local('NotoNaskhArabic-Bold');
  unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}
@font-face{font-family:'WB Alexandria Naskh';font-weight:800;size-adjust:130.4%;src:local('Noto Naskh Arabic Bold'),local('NotoNaskhArabic-Bold');
  unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}
@font-face{font-family:'WB Alexandria Noto Sans';font-weight:500;size-adjust:111.1%;src:local('Noto Sans Arabic'),local('Noto Sans Arabic Regular'),local('NotoSansArabic-Regular');
  unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}
@font-face{font-family:'WB Alexandria Noto Sans';font-weight:700;size-adjust:112.1%;src:local('Noto Sans Arabic Bold'),local('NotoSansArabic-Bold');
  unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}
@font-face{font-family:'WB Alexandria Noto Sans';font-weight:800;size-adjust:115.4%;src:local('Noto Sans Arabic Bold'),local('NotoSansArabic-Bold');
  unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}
/* the web fonts join the stacks together once every face has arrived (html.wb-fonts, set in <head>) — until then, and for any
   character they don't have, the scaled local fonts */
:root{--wb-plex:'WB Plex Fallback';--wb-alex:'WB Alexandria Fallback';
  --disp:var(--wb-alex),'WB Alexandria Fallback','WB Alexandria Roboto','WB Alexandria Naskh','WB Alexandria Noto Sans',var(--wb-plex),
    'WB Plex Fallback','WB Plex Roboto','WB Plex Naskh','WB Plex Noto Sans',sans-serif}
html.wb-fonts{--wb-plex:'IBM Plex Sans Arabic';--wb-alex:'Alexandria'}
body{font-family:var(--wb-plex),'WB Plex Fallback','WB Plex Roboto','WB Plex Naskh','WB Plex Noto Sans',system-ui,sans-serif}

/* SITE6-12 · the language switch is two buttons (EN / ع); the page's language is the pressed one (site.js) */
.lang-toggle{overflow:visible}
.lang-toggle .opt{margin:0;border:0;background:transparent;font-family:inherit;cursor:pointer}
.lang-toggle .opt:focus-visible{outline-offset:1px}
/* SITE6-13 · legal pages on a computer: the table of contents (sticky beside the text) carries the switch, so it is at hand
   wherever the reader is once the header has shrunk (its top row, with the header's switch, folds away) */
.toc-head{display:flex;align-items:center;justify-content:space-between;gap:.6rem;margin-bottom:.6rem}
.legal-toc .toc-head b{margin:0}
.toc-lang{display:none;flex:0 0 auto}
@media (min-width:941px){.toc-lang{display:inline-flex}}

/* SITE6-06 · the plan finder's numbers: a dark bubble with a white number (a rule for the old number boxes overrode it) */
.pf-range .pf-bub{background:var(--ink);color:#fff;font-size:.9rem;line-height:1;padding:.36rem .7rem;border:0;border-radius:9px;min-width:2.2rem}

/* SITE6-09 · e-mail fields run left to right (dir="ltr", like the phone field); the Arabic placeholder stays on the right */
html[dir="rtl"] input[type="email"][dir="ltr"]:placeholder-shown{text-align:right}

/* SITE6-17 · the example number in the phone message stays on one line */
.nowrap{white-space:nowrap}

/* SITE6-19 · the hero title: the lime words stay together, but the line may break before them (an inline block kept «من» /
   "from" alone on a line); below 375 px the title is a little smaller so the last line holds "from one inbox." */
.hero h1 .lime{display:inline;white-space:nowrap}
@media (max-width:374px){.hero h1{font-size:clamp(1.95rem,8.9vw,2.3rem)}}

/* SITE6-03 · the last screen's ↻ is out of the Tab order while it is invisible: it fades out first, then leaves the order
   (v50: kept when the show came back, the look is v48's) */
.fin-replay{visibility:hidden;transition:opacity .5s,color .2s,border-color .2s,visibility 0s linear .5s}
.fin-replay.show{visibility:visible;transition:opacity .5s,color .2s,border-color .2s,visibility 0s}

/* SITE5-07 · contrast ≥ 4.5:1 — "Contents" / "Example" (4.27 → 5.1), the footer's small print (4.24 → 5.2, and 12 px instead
   of 11.2 so it counts as legible text) and the footer's language switch (3.73 → 6.9) */
.legal-toc b,.legal-example>b{color:#5E6A6E}
.foot-meta{color:#7A8681;font-size:.75rem}
.foot-lang .opt:not(.on){color:#A3AEAA}

/* SITE5-09 · touch targets on phones: at least 24 px, 44 px for the main controls (logo, menu button, "Try for free", the
   menu's language switch) */
.legal-toc a{display:inline-block;padding-block:2px}
.pb-more{padding-block:2px}
.foot-logo{display:inline-flex;min-height:44px}   /* its link no longer spans the footer's width (under the chat button too) */
@media (max-width:1060px){
  .hdr .logo{min-height:44px}
  .burger{display:grid;place-items:center;min-width:44px;min-height:44px}
  .hdr-cta .btn{min-height:44px}
  .m-links .lang-toggle .opt{min-width:52px;min-height:44px;display:inline-flex;align-items:center;justify-content:center}
  /* SITE5-03 · the chat button sits in the bottom-right corner in both languages; in Arabic the footer's links and icons are
     right-aligned, so the footer keeps that corner's column free (they passed under the button while scrolling) */
  html[dir="rtl"] .foot .wrap{padding-right:calc(clamp(1rem,4vw,2.5rem) + 58px)}
}
.foot-lang:hover .opt:not(.on){color:#fff}

/* ============================================================
   v51 — QA pass #7 (SITE7-07 / 09 / 10 / 16)
   ============================================================ */
/* SITE7-16 · a part that is still fading in (or not reached yet) is shown at once, without its fade, when the keyboard focus
   enters it — site.js wbShowNow() adds .wb-now for two frames: the end state is styled at once, then the transitions are back */
.wb-now,.wb-now *,.wb-now *::before,.wb-now *::after{transition:none!important}
/* SITE7-07 · focus rings on the dark AI and compare stages */
.wbai :focus-visible,.wbcmp-stage :focus-visible{outline-color:var(--lime)}
/* SITE7-10 · phones and tablets (and any touch screen): every control the finger needs is at least 44 px — the footer's links,
   icons and language buttons, the legal pages' contents, "How do templates get approved?" / "Subscription vs. ownership?",
   the billing switch, ↻, the e-mail links (the underline moves from a border to the text, so the taller box keeps the look), and
   the sound buttons' tap area; links inside running text are left as they are */
@media (max-width:1060px),(pointer:coarse){
  .foot-col{gap:0}
  .foot-col b{margin-bottom:.2rem}
  .foot-col a{display:inline-flex;align-items:center;min-height:44px;min-width:44px}
  .foot-icons a{width:44px;height:44px}
  .foot-lang .opt{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px}
  .legal-toc ol{gap:0}
  .legal-toc a{display:inline-flex;align-items:center;min-height:44px;min-width:44px;padding-block:0}
  .pb-more{display:flex;align-items:center;justify-content:center;min-height:44px;padding-block:0}
  .link-arrow,.fin-mail,.zc-mail{display:inline-flex;align-items:center;min-height:44px;padding-bottom:0;border-bottom:0;
    text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px}
  .link-arrow,.fin-mail{text-decoration-color:rgba(255,255,255,.3)} .zc-mail{text-decoration-color:var(--line)}
  .link-arrow:hover,.fin-mail:hover{text-decoration-color:var(--lime)} .zc-mail:hover{text-decoration-color:var(--ink)}
  .zc-wa{min-height:44px}
  .pr-toggle button{min-height:44px}
  /* the sound buttons sit right above the chaos title: their tap area is 45 px tall, the pill keeps its 33 px */
  .sndbtn::after{content:"";position:absolute;inset:-7px -3px}   /* from the padding box: 6 px beyond the border, 45 px */
  .fin-replay{width:44px;height:44px}
  .skip-link{padding-block:.72rem}
  /* the 44 px language buttons made the English footer's last row reach under the chat button (bottom-right): that row keeps
     the button's corner free, as the Arabic footer does (SITE5-03) */
  html[dir="ltr"] .foot-bottom{padding-right:58px}
}
/* v51 · PERF7-06: the hero's chips and inbox card are placed after the first frame (site.js) — hidden until then */
.cluster:not(.placed) .bub,.cluster:not(.placed) .mini{visibility:hidden}