/* Fonts are loaded per language by the page (see language pack meta.fontUrl). */
:root{
  --navy:#0F2A4A;--navy2:#1E4A7A;--green:#2BB673;--ink:#1B2A3A;--muted:#5F6E80;--line:#E1E7EE;--bg:#F3F6FA;--card:#fff;
  --D:#D64541;--I:#F2B531;--S:#3AA35B;--C:#2F6DB5;--danger:#C0392B;--focus:#2F6DB5;
  --r:16px;--shadow:0 10px 30px rgba(15,42,74,.08);
}
*{box-sizing:border-box}
html,body{margin:0}
body{font-family:Cairo,'Segoe UI',Tahoma,Arial,sans-serif;background:var(--bg);color:var(--ink);font-size:16px;line-height:1.6;min-height:100vh;-webkit-font-smoothing:antialiased}
a{color:var(--C)}
button,input{font:inherit}
.wrap{max-width:720px;margin:0 auto;padding:0 16px}
.top{background:var(--navy);color:#fff;position:sticky;top:0;z-index:10}
.top .wrap{display:flex;align-items:center;justify-content:space-between;height:60px}
.brand{font-weight:800;font-size:20px;letter-spacing:.2px;direction:ltr;display:flex;align-items:center;gap:8px;color:#fff;text-decoration:none}
.brand b{color:var(--green)}.brand small{font-weight:500;opacity:.7;font-size:14px}
.stripe{height:4px;background:linear-gradient(90deg,var(--D) 25%,var(--I) 25% 50%,var(--S) 50% 75%,var(--C) 75%)}
.lang{background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.25);color:#fff;border-radius:999px;padding:8px 16px;min-height:44px;cursor:pointer;font-weight:700}
.lang:focus-visible,.btn:focus-visible,.opt button:focus-visible,input:focus-visible,.gender label:focus-within{outline:3px solid var(--focus);outline-offset:2px}
main{padding:24px 0 48px}
.card{background:var(--card);border-radius:var(--r);box-shadow:var(--shadow);padding:24px}
h1{font-size:28px;line-height:1.3;margin:0 0 8px;color:var(--navy)}
h2{font-size:21px;margin:0 0 6px;color:var(--navy)}
.lead{color:var(--muted);margin:0 0 18px}
.hero{background:radial-gradient(120% 120% at 100% 0,var(--navy2),var(--navy) 60%);color:#fff;border-radius:var(--r);padding:28px 22px;margin-bottom:16px;overflow:hidden;position:relative}
[dir=rtl] .hero{background:radial-gradient(120% 120% at 0 0,var(--navy2),var(--navy) 60%)}
.hero h1{color:#fff;font-size:30px}.hero p{color:#C9D8EA;margin:0 0 18px}
.disc{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:18px 0 4px;direction:ltr}
.disc span{border-radius:12px;padding:10px 4px;text-align:center;font-weight:800;font-size:22px;color:#fff}
.disc small{display:block;font-size:11px;font-weight:600;opacity:.9}
.feats{display:grid;gap:10px;margin:16px 0 0;padding:0;list-style:none}
.feats li{display:flex;gap:10px;align-items:flex-start;background:#fff;border-radius:12px;padding:12px 14px;box-shadow:var(--shadow)}
.feats i{font-style:normal;flex:none;width:28px;height:28px;border-radius:8px;background:#EAF6EF;color:var(--S);display:flex;align-items:center;justify-content:center;font-weight:800}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:50px;padding:12px 22px;border-radius:12px;border:0;background:var(--green);color:#fff;font-weight:800;font-size:17px;cursor:pointer;width:100%;transition:transform .1s,opacity .2s}
.btn:active{transform:scale(.98)}.btn[disabled]{opacity:.45;cursor:not-allowed}
.btn.ghost{background:transparent;color:var(--navy);border:2px solid var(--line)}
.btn.light{background:#fff;color:var(--navy)}
.row{display:flex;gap:10px}.row>*{flex:1}
.field{margin:0 0 16px}
.field label,.flabel{display:block;font-weight:700;margin-bottom:6px}
.field input[type=text],.field input[type=email]{width:100%;min-height:50px;border:2px solid var(--line);border-radius:12px;padding:10px 14px;background:#fff;color:var(--ink)}
.field input:focus{border-color:var(--C);outline:none}
.hint{font-size:13px;color:var(--muted);margin-top:4px}
.gender{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.gender label{display:flex;align-items:center;justify-content:center;gap:8px;min-height:50px;border:2px solid var(--line);border-radius:12px;cursor:pointer;font-weight:700;background:#fff}
.gender input{position:absolute;opacity:0;pointer-events:none}
.gender label:has(input:checked){border-color:var(--navy);background:#EEF3F9;color:var(--navy)}
.check{display:flex;gap:10px;align-items:flex-start;font-size:14px;color:var(--muted);margin:4px 0 18px;cursor:pointer}
.check input{width:22px;height:22px;flex:none;margin-top:2px;accent-color:var(--navy)}
.err{background:#FDECEA;color:var(--danger);border-radius:10px;padding:10px 14px;margin:0 0 14px;font-weight:600;font-size:14px}
.ok{background:#EAF6EF;color:#1E7A43;border-radius:10px;padding:10px 14px;margin:0 0 14px;font-weight:600;font-size:14px}
.otp{width:100%;min-height:64px;text-align:center;font-size:32px;letter-spacing:12px;font-weight:800;border:2px solid var(--line);border-radius:14px;direction:ltr;color:var(--navy)}
.otp:focus{border-color:var(--C);outline:none}
.linkbtn{background:none;border:0;color:var(--C);font-weight:700;cursor:pointer;padding:10px 4px;min-height:44px}
.linkbtn[disabled]{color:var(--muted);cursor:default}
.center{text-align:center}
.example{border:2px dashed var(--line);border-radius:14px;padding:14px;margin:14px 0}
.steps{padding-inline-start:20px;margin:8px 0 0}.steps li{margin-bottom:8px}
.prog{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.bar{flex:1;height:10px;background:#E3E9F0;border-radius:99px;overflow:hidden}
.bar i{display:block;height:100%;background:linear-gradient(90deg,var(--D),var(--I),var(--S),var(--C));border-radius:99px;transition:width .3s}
.prog b{font-size:14px;color:var(--muted);white-space:nowrap}
.legend{display:grid;grid-template-columns:1fr auto auto;gap:8px;align-items:center;font-size:13px;font-weight:700;color:var(--muted);padding:0 4px 6px}
.legend span:nth-child(2),.legend span:nth-child(3){width:64px;text-align:center}
.opt{display:grid;grid-template-columns:1fr auto auto;gap:8px;align-items:center;background:#fff;border:2px solid var(--line);border-radius:14px;padding:8px 8px;margin-bottom:10px;padding-inline-start:16px;transition:border-color .15s,background .15s}
.opt .w{font-weight:700;font-size:18px}
.opt button{width:64px;height:52px;border-radius:12px;border:2px solid var(--line);background:#F8FAFC;cursor:pointer;font-size:22px;font-weight:800;color:#AEB9C6}
.opt button.m[aria-pressed=true]{background:var(--S);border-color:var(--S);color:#fff}
.opt button.l[aria-pressed=true]{background:var(--D);border-color:var(--D);color:#fff}
.opt.is-m{border-color:var(--S);background:#F3FAF5}.opt.is-l{border-color:var(--D);background:#FDF4F3}
.nav{display:flex;gap:10px;margin-top:16px}.nav .btn{flex:1}
.done-ico{width:84px;height:84px;border-radius:50%;background:#EAF6EF;color:var(--S);display:flex;align-items:center;justify-content:center;font-size:42px;margin:6px auto 14px}
.spin{width:22px;height:22px;border:3px solid rgba(255,255,255,.4);border-top-color:#fff;border-radius:50%;animation:sp 1s linear infinite}
.btn.ghost .spin{border-color:#ccd;border-top-color:var(--navy)}
@keyframes sp{to{transform:rotate(360deg)}}
.foot{color:var(--muted);text-align:center;font-size:13px;padding:10px 16px 30px}
.hidden{display:none!important}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
@media (min-width:640px){.hero{padding:40px 36px}.hero h1{font-size:38px}.card{padding:32px}.feats{grid-template-columns:1fr 1fr}}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}
/* Language switcher, notices, selects */
a.lang{display:inline-flex;align-items:center;text-decoration:none}
select.lang{appearance:none;-webkit-appearance:none;padding-inline-end:28px;background-image:linear-gradient(45deg,transparent 50%,#fff 50%),linear-gradient(135deg,#fff 50%,transparent 50%);background-position:calc(100% - 16px) 19px,calc(100% - 11px) 19px;background-size:5px 5px;background-repeat:no-repeat}
[dir=rtl] select.lang{background-position:16px 19px,21px 19px}
select.lang option{color:var(--navy)}
main>.card,main>section{margin-bottom:16px}
.card h2{margin-bottom:8px}
.notice{border:2px solid #F5DFA6;background:#FFFBF0}
.notice p{margin:0 0 12px}.notice p b{color:var(--navy)}
.notice .btn{margin-top:6px}
.select{width:100%;min-height:50px;border:2px solid var(--line);border-radius:12px;padding:10px 14px;background:#fff;color:var(--ink);font:inherit}
.linkbtn{text-decoration:none;display:inline-block}
.btn,a.btn{text-decoration:none}