/* Tools — same abyss, atmosphere and chrome as the rest of the site.
   Loaded last so it wins over the tools inline shell. */

:root{
  --abyss:#01112b;--deep:#041634;--navy:#081d42;--navy2:#0a1f47;
  --gold:#d4a853;--gold2:#e9c478;--gold3:#b8912f;
  --light:#fff;--muted:#c1ccde;--faint:#8fa2c0;
  --glass:rgba(255,255,255,.035);--line:rgba(255,255,255,.08);
  --radius:16px
}

.skip{
  position:fixed!important;top:8px;inset-inline-start:16px!important;z-index:400;
  background:var(--gold);color:#01112b;font-weight:800;
  padding:8px 14px;border-radius:8px;
  transform:translateY(-220%)!important;transition:transform .25s ease
}
.skip:focus{transform:translateY(0)!important}

html{
  background:linear-gradient(180deg,#01112b 0%,#041634 34%,#081d42 72%,#041634 100%)!important
}
body{
  font-family:'Segoe UI','Helvetica Neue',Helvetica,Arial,sans-serif!important;
  background:transparent!important;
  color:#fff
}

.asp-pill{display:none!important}

body > nav,
nav:has(.nav-in){
  position:fixed!important;top:0;left:0;right:0;z-index:200;
  display:block!important;padding:0!important;gap:0!important;
  justify-content:stretch!important;align-items:stretch!important;
  backdrop-filter:blur(14px);
  background:rgba(1,17,43,.78)!important;
  border-bottom:1px solid rgba(255,255,255,.08)
}
nav .nav-in{
  max-width:1180px;margin:0 auto;padding:0 23px;height:58px;
  display:flex;align-items:center;gap:16px
}
nav .brand{
  display:grid!important;grid-template-columns:auto auto auto!important;
  align-items:center;column-gap:12px;gap:0!important;
  text-decoration:none!important;color:#fff!important;line-height:1.18
}
nav .brand img{display:none!important}
nav .brand > div{display:contents}
nav .brand .b-en{
  justify-self:end;color:#fff!important;font-weight:800;font-size:14px;
  letter-spacing:.2px;white-space:nowrap
}
nav .brand .b-logo{
  width:42px;height:42px;display:inline-block!important;
  background:url(/assets/logo.webp) center/contain no-repeat;
  animation:spin 48s linear infinite;
  filter:drop-shadow(0 0 8px rgba(212,168,83,.35))
}
nav .brand .b-ar{
  justify-self:start;color:#e9c478!important;font-weight:700;font-size:13.5px;
  white-space:nowrap;direction:rtl
}
nav .nav-links{
  display:flex;gap:16px;align-items:center;font-size:13.5px;
  margin-left:auto;flex-wrap:nowrap
}
nav .nav-links a{
  color:#c1ccde!important;text-decoration:none;font-weight:400;
  background:none;border:none;padding:0;box-shadow:none
}
nav .nav-links a:hover{color:#fff!important}
nav .nav-links a[aria-current="page"]{color:#d4a853!important}
nav .nav-links a.lang,
nav .nav-links button.lang{
  color:#d4a853!important;background:none!important;border:none!important;
  padding:0!important;border-radius:0!important;box-shadow:none!important;
  font-size:13.5px;cursor:pointer;font-family:'Cairo','Segoe UI',Tahoma,sans-serif;
  font-weight:400
}
nav .navauth a.nalogin,
nav .navauth a.nasignup{
  color:#c1ccde!important;background:none!important;border:none!important;
  padding:0!important;border-radius:0!important;font-weight:600
}
nav .navauth a.nalogin:hover,
nav .navauth a.nasignup:hover{color:#fff!important}

.wrap{
  max-width:920px!important;
  margin:0 auto!important;
  padding:84px 23px 40px!important
}
body.thub .wrap{max-width:1180px!important}
/* Homepage .hero is 100vh + centered. Tools reuse that class — kill the leak. */
.wrap > .hero,
.hero{
  min-height:0!important;height:auto!important;
  display:block!important;align-items:stretch!important;justify-content:flex-start!important;
  text-align:left!important;padding:0 0 10px!important
}
.hero .kicker{
  font-size:11.5px;letter-spacing:2.6px;text-transform:uppercase;color:var(--gold);
  display:flex;gap:12px;align-items:center;font-weight:700
}
.hero h1{
  font-size:clamp(26px,3.4vw,38px)!important;
  font-weight:800;letter-spacing:-.5px;margin:10px 0 8px!important;line-height:1.15
}
.hero h1 .g{
  background:linear-gradient(110deg,#e9c478,#d4a853 45%,#f3ddad);
  -webkit-background-clip:text;background-clip:text;color:transparent
}
.hero .sub{
  margin:0!important;max-width:640px!important;text-align:left;
  color:var(--muted);font-size:14.5px;line-height:1.75
}
body:not(.thub) .hero{text-align:center!important}
body:not(.thub) .hero .sub{text-align:center;margin-left:auto!important;margin-right:auto!important}

.phase{margin:22px 0 12px!important;gap:12px!important}
.phase h2{font-size:18px!important;color:#fff;margin:0}
.hub-grid{gap:14px!important}

.tcard{
  background:rgba(255,255,255,.045)!important;
  border:1px solid rgba(212,168,83,.2)!important;
  border-radius:16px!important;padding:20px!important
}
.tcard:hover{
  transform:translateY(-4px)!important;
  border-color:var(--gold)!important;
  background:rgba(255,255,255,.07)!important;
  box-shadow:0 14px 34px rgba(0,0,0,.35)!important
}
.tcard .ic{
  width:46px;height:46px;display:grid;place-items:center;
  background:rgba(212,168,83,.1);border:1px solid rgba(212,168,83,.22);
  border-radius:12px;margin-bottom:4px;
  animation:float 4s ease-in-out infinite
}
.tcard .ic svg{width:22px;height:22px}
.tcard:nth-child(2n) .ic{animation-delay:.7s}
.tcard:nth-child(3n) .ic{animation-delay:1.3s}
.tcard .t-ico{font-size:22px}

.card{
  background:rgba(255,255,255,.035)!important;
  border:1px solid var(--line)!important
}

footer{
  display:block!important;
  border-top:1px solid var(--line)!important;
  margin-top:60px!important;
  padding:30px 23px!important;
  text-align:center!important
}
.logo-lock + footer{margin-top:8px!important}
footer .f-links{
  display:flex!important;gap:26px!important;justify-content:center!important;
  flex-wrap:wrap!important;font-size:13px!important
}
footer .f-links a{color:var(--muted)!important;text-decoration:none!important}
footer .f-note{margin-top:14px!important;font-size:12px!important;color:var(--faint)!important}

@media(max-width:900px){
  nav .brand .b-ar{display:none}
  nav .brand{grid-template-columns:auto auto!important}
}
@media(max-width:620px){
  nav .nav-in{flex-wrap:wrap;height:auto;min-height:56px;padding:10px 16px}
  nav .nav-in .brand{flex:1 1 100%;justify-content:center}
  nav .nav-links{width:100%;margin-left:0;justify-content:center;flex-wrap:wrap;gap:8px 14px;font-size:12.5px}
  .wrap{padding:176px 16px 32px!important}
}
@media(prefers-reduced-motion:reduce){
  nav .brand .b-logo{animation:none}
}

/* Results must be readable. Email is a save step under the numbers, not a blur overlay. */
.gated.locked{filter:none!important;pointer-events:auto!important;user-select:auto!important}
.gate-wrap{position:relative;margin-top:8px}
.gate-veil{
  position:relative!important;inset:auto!important;z-index:1;
  display:flex;align-items:center;justify-content:center;
  background:rgba(1,17,43,.55)!important;
  border:1px solid rgba(212,168,83,.28);
  border-radius:16px;padding:22px;text-align:center;margin-top:18px;
  backdrop-filter:none
}
.gate-veil .inner{max-width:420px}
.gate-title{font-size:18px;font-weight:800;margin-bottom:8px;color:#fff}
.gate-sub{font-size:13px;color:var(--muted);line-height:1.6;margin-bottom:16px}
.gate-form{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
.gate-form input{flex:1;min-width:180px}
.gate-note{font-size:11px;color:var(--faint);margin-top:12px}

/* Stagger entrance must never leave fields/buttons invisible (reduce-motion kills the animation). */
.stagger>*{opacity:1!important;transform:none!important;animation:none!important}

.g-live{
  display:none;margin-top:12px;padding:12px 16px;
  border:1px solid rgba(212,168,83,.35);border-radius:12px;
  background:rgba(212,168,83,.08);font-size:14px;line-height:1.6;color:var(--muted);
  white-space:normal;overflow-wrap:anywhere
}
.g-live b{color:var(--gold2);font-size:18px}

.grid-mobile{
  display:grid;grid-template-columns:auto 1fr;gap:26px;align-items:center
}
#g-rows{min-width:0}
.kv{min-width:0}
.kv span,.kv b{overflow-wrap:anywhere;min-width:0}
.gauge .result-lbl{white-space:normal;max-width:11em;margin:0 auto;line-height:1.3}

.wrap.has-free-stamp{position:relative;overflow:visible}


/* v6.40 mobile — stamp in flow, no overlap */
@media(max-width:720px){
  .wrap{padding-top:176px!important;padding-left:16px!important;padding-right:16px!important;padding-bottom:88px!important}
  .free-stamp,
  .hero>.free-stamp,
  html.lang-ar .free-stamp,
  html[dir="rtl"] .free-stamp{
    position:relative!important;top:auto!important;right:auto!important;left:auto!important;bottom:auto!important;
    display:flex;justify-content:center;width:100%;margin:8px auto 14px;
    transform:rotate(-8deg) scale(.82)!important;transform-origin:center;filter:none
  }
  html.lang-ar .free-stamp,
  html[dir="rtl"] .free-stamp{transform:rotate(8deg) scale(.82)!important}
  .gate-form{flex-direction:column}
  .gate-form input,.gate-form .btn{width:100%}
  .gate-form .btn{display:block;min-height:48px;margin-top:4px}
  .hero h1,.hero .sub{overflow-wrap:anywhere}
  .stagger>*{opacity:1!important;transform:none!important;animation:none!important}
  .g-live{display:none!important}
  .grid-mobile{
    display:flex!important;flex-direction:column;align-items:center;gap:18px
  }
  #g-rows{width:100%}
  .kv{flex-wrap:wrap;align-items:baseline;gap:4px 12px}
  .kv span{flex:1 1 120px}
  .kv b{flex:1 1 auto;text-align:end}
  .gauge{width:168px!important;height:168px!important}
  .result-num{font-size:34px}
  .gauge .result-lbl{font-size:10.5px;letter-spacing:.5px}
  #g-result .card,.gate-wrap,.gated{overflow:visible}
  .asp-top{bottom:88px;right:12px}
}