/* Practeca: the home-page hero, scoped under .hx (header, stage, devices, notifications, entrance). */
.hx{--navy:#12263F; --deep:#07111D; --navy-2:#1B3556; --ink:#0B1520;
  --teal:#2DD4BF; --teal-2:#5EEAD4; --teal-3:#99F6E4; --teal-type:#0F766E; --teal-fill:#00A697; --wash:#F0FDFA;
  --orange:#F26D00; --orange-2:#FB923C; --orange-type:#C2410C;
  --text:#1F2937; --body:#4B5563; --muted:#6B7280; --line:#E2E8F0; --raised:#F1F5F9; --page:#F7F9F8;
  --hero-body:#A9BBCC; --hero-line:#33557A;
  --latin:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --arabic:"IBM Plex Sans Arabic","Noto Sans Arabic","Segoe UI",Tahoma,Arial,sans-serif;
  --dir:1; --hdr:68px;
  color-scheme:light;}
[dir="rtl"] .hx{--dir:-1}
.hx *,.hx *::before,.hx *::after{box-sizing:border-box}
.hx{-webkit-text-size-adjust:100%}
.hx{margin:0;background:var(--deep);color:#fff;font-family:var(--latin);line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:clip}
.hx:lang(ar){font-family:var(--arabic);line-height:1.8}
.hx h1,.hx h3,.hx p{margin:0}
.hx a{color:inherit}
.hx :focus-visible{outline:2px solid var(--teal);outline-offset:3px;border-radius:6px}
.hx .num{font-family:var(--latin);font-variant-numeric:tabular-nums}
.hx .wrap{width:100%;max-width:1280px;margin-inline:auto;padding-inline:clamp(1rem,4vw,2rem)}
.hx .hdr{position:fixed;inset-inline:0;top:0;z-index:50;height:var(--hdr);transition:background-color .3s,border-color .3s;border-bottom:1px solid transparent}
.hx .hdr.scrolled{background:rgba(7,17,29,.72);backdrop-filter:saturate(1.4) blur(14px);-webkit-backdrop-filter:saturate(1.4) blur(14px);border-bottom-color:rgba(255,255,255,.08)}
.hx .hdr .wrap{display:flex;align-items:center;gap:1rem;height:100%}
.hx .brand{display:inline-flex;align-items:center;gap:.6rem;text-decoration:none;font-family:var(--latin);font-weight:700;font-size:1.125rem;letter-spacing:-.01em;min-height:44px}
.hx .brand svg{width:28px;height:28px}
.hx .nav{display:flex;gap:.25rem;margin-inline-start:1.5rem}
.hx .nav a{color:var(--hero-body);text-decoration:none;font-size:.9375rem;font-weight:500;padding:.5rem .75rem;border-radius:10px;min-height:44px;display:inline-flex;align-items:center}
.hx .nav a:hover{color:#fff;background:rgba(255,255,255,.06)}
.hx .act{margin-inline-start:auto;display:flex;gap:.5rem;align-items:center}
.hx .lang{display:inline-flex;align-items:center;gap:.4rem;min-height:44px;padding-inline:.8rem;border:1px solid rgba(255,255,255,.16);border-radius:12px;text-decoration:none;font-size:.9375rem;font-weight:500}
.hx .btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;min-height:48px;padding-inline:1.4rem;border-radius:14px;font:inherit;font-weight:600;text-decoration:none;border:1px solid transparent;transition:transform .2s,box-shadow .2s,background-color .2s}
.hx .btn-sm{min-height:44px;padding-inline:1.05rem;font-size:.9375rem;border-radius:12px}
.hx .btn-p{background:var(--teal);color:var(--navy);box-shadow:0 0 0 1px rgba(255,255,255,.2) inset,0 10px 30px -8px rgba(45,212,191,.55)}
.hx .btn-p:hover{background:var(--teal-2);transform:translateY(-1px)}
.hx .btn-g{color:#fff;border-color:rgba(255,255,255,.22);background:rgba(255,255,255,.04)}
.hx .btn-g:hover{border-color:#fff}
@media (max-width:900px){
  .hx .nav{display:none}
}
@media (max-width:380px){
  .hx .lang span{display:none}
}
.hx .stage{position:relative;height:100svh;min-height:640px;overflow:clip;isolation:isolate}
.hx .bg{position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(60% 50% at 50% 78%, rgba(45,212,191,.42), transparent 70%),
    radial-gradient(35% 30% at calc(50% + 28% * var(--dir)) 70%, rgba(242,109,0,.16), transparent 70%),
    radial-gradient(80% 60% at 50% 0%, #17324F 0%, transparent 70%),
    var(--deep)}
.hx .bg::before{content:"";position:absolute;inset:0;
  background:conic-gradient(from 180deg at 50% -10%, transparent 42%, rgba(153,246,228,.10) 48%, rgba(153,246,228,.16) 50%, rgba(153,246,228,.10) 52%, transparent 58%);
  mask-image:linear-gradient(#000 40%,transparent 85%);-webkit-mask-image:linear-gradient(#000 40%,transparent 85%)}
.hx .bg::after{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);background-size:64px 64px;
  mask-image:radial-gradient(70% 55% at 50% 30%,#000,transparent 75%);-webkit-mask-image:radial-gradient(70% 55% at 50% 30%,#000,transparent 75%)}
.hx .copy{position:relative;z-index:3;padding-top:calc(var(--hdr) + clamp(1.75rem,5.5vh,4rem));display:grid;justify-items:center;text-align:center;gap:1.25rem}
.hx .copy h1{font-weight:700;font-size:clamp(2.4rem,5vw,4.9rem);line-height:1.02;letter-spacing:-.045em}
.hx .copy h1:lang(ar),:lang(ar) .hx .copy h1{letter-spacing:0;line-height:1.28;font-size:clamp(2.7rem,6vw,5.8rem);max-width:none}
.hx .copy h1 span{display:block}
.hx .copy h1 .b{background:linear-gradient(90deg,var(--teal) 0%,var(--teal-3) 50%,var(--teal) 100%);-webkit-background-clip:text;background-clip:text;color:transparent;padding-bottom:.04em}
.hx .sub{color:var(--hero-body);font-size:clamp(1.0625rem,1.35vw,1.25rem);max-width:40rem}
.hx .ctas{display:flex;flex-wrap:wrap;justify-content:center;gap:.75rem;margin-top:.25rem}
.hx .scene{position:relative;margin-top:clamp(2rem,5vh,3.25rem);display:grid;justify-items:center;perspective:2400px;perspective-origin:50% -20%;z-index:2}
.hx .rise,.hx .tilt{transform-style:preserve-3d;width:min(1120px,94vw)}
.hx .tilt{transform:rotateX(34deg);transform-origin:50% 0%}
.hx .tablet{position:relative;width:100%;aspect-ratio:4/3;border-radius:clamp(22px,3vw,40px);padding:clamp(8px,1vw,14px);
  background:linear-gradient(160deg,#2A3B4F,#0B1520 40%,#0B1520 70%,#243649);
  box-shadow:0 0 0 1px rgba(255,255,255,.12) inset,0 0 0 2px #05090F,0 60px 120px -30px rgba(0,0,0,.7),0 0 120px -10px rgba(45,212,191,.35);
  transform-style:preserve-3d;container-type:inline-size}
.hx .tablet::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:linear-gradient(115deg,rgba(255,255,255,.14),transparent 30%,transparent 70%,rgba(255,255,255,.05))}
.hx .screen{position:relative;height:100%;border-radius:clamp(14px,2vw,28px);overflow:hidden;background:#fff}
.hx .glare{position:absolute;inset:0;pointer-events:none;background:linear-gradient(120deg,rgba(255,255,255,.35) 0%,transparent 28%,transparent 100%),radial-gradient(90% 70% at 50% 35%,transparent 55%,rgba(18,38,63,.16) 100%);mix-blend-mode:normal}
.hx .floor{position:absolute;left:50%;top:92%;width:min(1300px,110vw);height:220px;transform:translateX(-50%);background:radial-gradient(50% 50% at 50% 50%,rgba(45,212,191,.35),transparent 70%);filter:blur(20px);z-index:-1}
.hx .app{height:100%;display:grid;grid-template-columns:15% 1fr 30%;grid-template-rows:auto 1fr;font-size:1.35cqw;color:var(--text);background:var(--page)}
.hx .app:lang(ar){font-family:var(--arabic)}
.hx .top{grid-column:1/-1;display:flex;align-items:center;gap:1.2em;padding:1em 1.4em;background:#fff;border-bottom:1px solid var(--line)}
.hx .top .mk{width:2em;height:2em;border-radius:.6em;background:var(--navy);box-shadow:inset 0 0 0 .5em var(--navy),inset 0 0 0 .68em var(--teal)}
.hx .top b{font-weight:700;color:var(--navy);font-size:1.1em}
.hx .top .day{color:var(--muted)}
.hx .top .search{margin-inline-start:auto;width:30%;height:2.2em;border-radius:999px;background:var(--raised)}
.hx .top .me{width:2.2em;height:2.2em;border-radius:50%;background:linear-gradient(135deg,var(--teal-3),var(--teal-fill))}
.hx .side{background:#fff;border-inline-end:1px solid var(--line);padding:1em .8em;display:grid;gap:.35em;align-content:start}
.hx .side span{display:flex;align-items:center;gap:.6em;padding:.6em .7em;border-radius:.7em;color:var(--body);font-weight:500}
.hx .side span i{width:1em;height:1em;border-radius:.3em;border:.14em solid currentColor;flex:none}
.hx .side span.on{background:var(--navy);color:#fff}
.hx .main{padding:1.1em 1.3em;display:grid;gap:.5em;align-content:start;min-width:0}
.hx .main h3{font-size:1.25em;color:var(--navy);margin-bottom:.2em;display:flex;align-items:center;gap:.6em}
.hx .main h3 small{font-size:.65em;font-weight:600;color:var(--teal-type);background:var(--wash);border-radius:999px;padding:.2em .7em}
.hx .row{display:grid;grid-template-columns:5em 1fr auto;align-items:center;gap:.8em;padding:.7em .9em;border-radius:.8em;background:#fff;border:1px solid var(--line)}
.hx .row .t{color:var(--muted)}
.hx .row .n{font-weight:600;color:var(--navy);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hx .chip{font-size:.8em;font-weight:600;border-radius:999px;padding:.25em .8em;white-space:nowrap;background:var(--raised);color:var(--body)}
.hx .chip.ok{background:var(--wash);color:var(--teal-type)}
.hx .chip.or{background:#FFF7ED;color:var(--orange-type)}
.hx .row.now{background:var(--navy);border-color:var(--navy);box-shadow:0 .6em 1.4em -.6em rgba(18,38,63,.6)}
.hx .row.now .n{color:#fff}
.hx .row.now .t{color:var(--hero-body)}
.hx .row.now .chip{background:var(--teal);color:var(--navy)}
.hx .rhythm{display:flex;align-items:center;gap:.4em;margin-top:.6em;padding:.8em .9em;border-radius:.8em;background:#fff;border:1px solid var(--line)}
.hx .rhythm em{font-style:normal;color:var(--muted);font-size:.85em;margin-inline-end:.6em;white-space:nowrap}
.hx .rhythm i{width:.7em;height:.7em;border-radius:50%;background:var(--teal-fill);flex:none}
.hx .rhythm i.next{background:#fff;border:.15em dashed var(--teal-fill)}
.hx .rhythm s{flex:1;height:.14em;background:var(--line);text-decoration:none}
.hx .msgs{background:#fff;border-inline-start:1px solid var(--line);padding:1.1em 1em;display:grid;gap:.6em;align-content:start}
.hx .msgs h4{margin:0 0 .2em;font-size:1em;color:var(--navy)}
.hx .msg{border-radius:.9em;padding:.7em .8em;background:var(--page);display:grid;gap:.15em}
.hx .msg b{font-size:.92em;color:var(--navy)}
.hx .msg span{font-size:.85em;color:var(--body)}
.hx .msg.new{background:var(--wash);box-shadow:inset .25em 0 0 var(--teal-fill)}
[dir="rtl"] .hx .msg.new{box-shadow:inset -.25em 0 0 var(--teal-fill)}
.hx .phone-wrap{position:absolute;z-index:4;inset-inline-end:max(2vw,calc(50% - 640px));top:-4.5rem;width:clamp(150px,21vw,310px);perspective:1400px}
.hx .phone-tilt{transform:rotateY(calc(-16deg * var(--dir))) rotateX(6deg) rotateZ(calc(2deg * var(--dir)));transform-style:preserve-3d}
.hx .phone{border-radius:clamp(22px,3vw,40px);padding:clamp(5px,.55vw,8px);background:linear-gradient(160deg,#33475C,#0B1520 35%,#0B1520 75%,#2A3B4F);
  box-shadow:0 0 0 1px rgba(255,255,255,.14) inset,0 50px 90px -25px rgba(0,0,0,.8),0 0 80px -10px rgba(45,212,191,.4);container-type:inline-size}
.hx .pscr{aspect-ratio:9/19;border-radius:clamp(17px,2.4vw,32px);overflow:hidden;background:linear-gradient(180deg,#fff 0%,var(--page) 100%);display:grid;align-content:start;gap:4cqw;padding:12cqw 7cqw 7cqw;font-size:6.2cqw;color:var(--text)}
.hx .toasts{position:absolute;z-index:5;inset-inline:0;top:calc(var(--hdr) + clamp(8rem,19vh,11rem));pointer-events:none}
.hx .toast{position:absolute;display:inline-flex;align-items:center;gap:.6rem;padding:.55rem 1rem .55rem .55rem;border-radius:999px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.18);
  backdrop-filter:blur(14px) saturate(1.4);-webkit-backdrop-filter:blur(14px) saturate(1.4);color:#fff;font-size:.9375rem;font-weight:500;white-space:nowrap;box-shadow:0 20px 40px -20px rgba(0,0,0,.6)}
[dir="rtl"] .hx .toast{padding:.55rem .55rem .55rem 1rem}
.hx .toast i{width:26px;height:26px;border-radius:50%;background:var(--teal);color:var(--navy);display:grid;place-items:center;font-style:normal;font-weight:700;font-size:.85rem}
.hx .toast:nth-child(1){inset-inline-start:max(2.5vw,calc(50% - 640px));top:0}
.hx .toast:nth-child(2){inset-inline-start:max(6vw,calc(50% - 590px));top:5.25rem}
.hx .toast:nth-child(3){inset-inline-end:max(2.5vw,calc(50% - 640px));top:2.4rem}
.hx .sheen{position:absolute;inset:-10% auto -10% 0;width:40%;pointer-events:none;background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);transform:translateX(-160%) skewX(-12deg);opacity:0}
.hx .fict{display:inline-flex;align-items:center;gap:.4em;font-size:.78em;font-weight:600;color:var(--muted);border:1px solid var(--line);border-radius:999px;padding:.2em .8em;background:#fff;white-space:nowrap}
.hx .fict::before{content:"";width:.5em;height:.5em;border-radius:50%;background:var(--orange)}
@media (max-width:760px){
  .hx .rise,.hx .tilt{width:128vw}
  .hx .tilt{transform:rotateX(30deg)}
  .hx .app{grid-template-columns:1fr}
  .hx .side,.hx .msgs{display:none}
  .hx .main{grid-column:1}
  .hx .app{font-size:2cqw}
  .hx .phone-wrap{top:1.5rem;width:34vw;inset-inline-end:4vw}
  .hx .toasts{display:none}
}
.hx .phone{padding:clamp(4px,.45vw,7px)}
.hx .app{grid-template-rows:auto auto 1fr}
.hx .tsb{grid-column:1/-1;display:flex;justify-content:space-between;align-items:center;padding:.35em 1.4em 0;background:#fff;font-family:var(--latin);font-size:.8em;font-weight:600;color:#111}
.hx .tsb .ri{display:flex;align-items:center;gap:.35em}
.hx .tsb .sig{display:flex;align-items:flex-end;gap:.12em}
.hx .tsb .sig i{width:.22em;background:#111;border-radius:1px}
.hx .tsb .sig i:nth-child(1){height:.3em}
.hx .tsb .sig i:nth-child(2){height:.45em}
.hx .tsb .sig i:nth-child(3){height:.6em}
.hx .tsb .sig i:nth-child(4){height:.75em}
.hx .tsb .sig svg{width:1.1em;height:.85em;margin-inline-start:.3em}
.hx .tsb .bat b{display:block;width:1.7em;height:.85em;border:1px solid rgba(0,0,0,.4);border-radius:.25em;padding:1px}
.hx .tsb .bat b::before{content:"";display:block;height:100%;width:80%;background:#111;border-radius:.12em}
.hx .top .search{display:flex;align-items:center;gap:.5em;padding-inline:.9em;color:#56606E;font-size:.9em;border-radius:.7em}
.hx .top .search svg{width:1em;height:1em;flex:none}
.hx .top .me{display:grid;place-items:center;color:#fff;font-weight:700;font-size:.9em}
.hx .main .sum{margin:-.3em 0 .3em;color:#5F6470;font-size:.85em}
.hx .msg b{display:flex;justify-content:space-between;gap:.5em}
.hx .msg time{font-family:var(--latin);font-weight:500;font-size:.85em;color:#5F6470}
.hx .mk-l{display:none}
/* The tablet and phone are never cut off and stand together as one group: hero.js moves the phone into .tilt,
   so it tilts with the tablet, and this block sizes the group so it fits under the header once flat. */
[data-hero="whole"] .hx .stage{--gap:1rem;--pw:.25;--px:.205;--py:.06;
  --tw:max(20rem,min(1120px,calc((100vw - 3rem) / (1 + var(--px)) / 1.26),calc((100svh - var(--hdr) - 2 * var(--gap)) / (.75 + var(--py) + .04))));
  height:auto;min-height:100svh;padding-bottom:calc(var(--tw) * var(--py) + 7.25rem)}
[data-hero="whole"] .hx .rise,[data-hero="whole"] .hx .tilt{width:var(--tw)}
[data-hero="whole"] .hx .rise{margin-inline-end:calc(var(--tw) * var(--px))}
[data-hero="whole"] .hx .tilt{position:relative}
[data-hero="whole"] .hx .tilt > .phone-wrap{top:auto;bottom:calc(var(--tw) * var(--py) * -1);inset-inline-end:calc(var(--tw) * var(--px) * -1);
  width:calc(var(--tw) * var(--pw));transform:translateZ(10px)}
@media (max-width:760px){
  /* Phone widths: the same composition, smaller. The tablet is about 80% of the screen, pushed to the inline-start side;
     the phone stands on its lower inline-end corner (lower left in Arabic, lower right in English). */
  [data-hero="whole"] .hx .stage{--pw:.31;--px:.13;--py:.48;
        --tw:min(calc((100vw - 1.5rem) / (1 + var(--px)) / 1.05),calc((100svh - var(--hdr) - 2 * var(--gap)) / 1.5));
        padding-bottom:calc(var(--tw) * var(--py) + 2.5rem)}
}
[data-hero="whole"] .hx .msgs{padding-inline-end:3.4em}
.hx .tday{margin-top:.4em;display:grid;grid-template-columns:1fr 1fr;gap:.45em;padding:.8em;border-radius:.9em;background:#fff;border:1px solid var(--line)}
.hx .tday h4{grid-column:1/-1;margin:0;font-size:.92em;color:var(--navy)}
.hx .tday div{display:grid;gap:.05em;padding:.5em .6em;border-radius:.7em;background:var(--page)}
.hx .tday b{font-size:1.35em;line-height:1.1;color:var(--navy)}
.hx .tday span{font-size:.78em;color:var(--body);white-space:nowrap}
/* Slow first paints. The head adds .hx-intro when motion is allowed, so the parts the entrance animates are not painted
   in their final place first; hero.js lifts it as the entrance starts (or the head does, after 4s). Phones get a cheaper hero. */
.hx-intro:not([data-hero="split"]) .hx .copy,.hx-intro .hx .scene,.hx-intro .hx .toasts{visibility:hidden}
@media (max-width:760px){
  .hx .floor{filter:none}
  .hx .tablet{box-shadow:0 0 0 1px rgba(255,255,255,.12) inset,0 0 0 2px #05090F,0 30px 60px -24px rgba(0,0,0,.7),0 0 60px -10px rgba(45,212,191,.3)}
  .hx .phone{box-shadow:0 0 0 1px rgba(255,255,255,.14) inset,0 24px 48px -18px rgba(0,0,0,.8)}
  .hx .tilt{will-change:transform}
}