:root{
  --bg:#F4EDE0;--bg2:#EBE2D2;--surface:#FBF7F0;--line:#DCD1BF;
  --ink:#14213D;--ink2:#47526B;--ink3:#59627A;
  --navy:#0E1931;--cream:#F4EDE0;
  --coral:#FF6B5B;--coral-tx:#B53A29;--coral-lt:#FFE3DD;
  --teal:#2A9D8F;--teal-dk:#1F7A6E;--teal-lt:#E3F2EF;
  --disp:"Marhey",system-ui,sans-serif;--body:"IBM Plex Sans Arabic",system-ui,sans-serif;
  --ease:cubic-bezier(.22,1,.36,1);
  --sh:0 1px 2px rgba(20,33,61,.06),0 10px 28px rgba(20,33,61,.09);
}
*{box-sizing:border-box;margin:0;padding:0}
html{background:var(--bg)}
body{font-family:var(--body);color:var(--ink);line-height:1.7}
button,input{font:inherit;color:inherit}
button{border:0;background:none;cursor:pointer}
:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
a{color:var(--coral-tx)}

.nav{display:flex;align-items:center;justify-content:space-between;max-width:1120px;margin:0 auto;padding:20px 24px}
.wm{display:flex;align-items:center;gap:12px;font:700 22px/1.02 var(--disp)}
.wm b{display:block;color:var(--coral-tx)}
.wm i{font:700 13px var(--body);font-style:normal;background:var(--coral);color:var(--ink);border-radius:999px;padding:2px 12px 4px}
.who{font:500 14px var(--body);color:var(--ink3)}

.wrap{max-width:1120px;margin:0 auto;padding:8px 24px 80px;display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:40px;align-items:start}
.hero{grid-column:1 / -1;padding:18px 0 6px}
.hero h1{font:700 clamp(34px,5vw,56px)/1.2 var(--disp);text-wrap:balance}
.hero h1 em{font-style:normal;color:var(--coral-tx)}
.hero p{font:500 18px/1.8 var(--body);color:var(--ink2);margin-top:8px;max-width:520px}

/* steps */
.steps{display:flex;flex-direction:column;gap:14px;min-width:0}
.side{min-width:0}
.step{border-radius:26px;background:var(--surface);border:1px solid var(--line);padding:22px 24px;transition:box-shadow .3s}
.step.act{box-shadow:var(--sh);border-color:transparent}
.step.lock{background:none;border-style:dashed}
.step.lock h2{color:var(--ink3)}
.sh{display:flex;align-items:center;gap:14px}
.sh .tick{flex:none;width:30px;height:30px;border-radius:50%;border:2px solid var(--line);display:grid;place-items:center}
.step.act .tick{border-color:var(--coral);box-shadow:inset 0 0 0 6px var(--surface),inset 0 0 0 20px var(--coral)}
.step.ok .tick{background:var(--teal);border-color:var(--teal)}
.step.ok .tick::after{content:"";width:12px;height:6px;border:solid #fff;border-width:0 0 2.5px 2.5px;transform:rotate(-45deg) translate(1px,-1px)}
.sh h2{font:700 20px var(--body);flex:1}
.sh .sum{font:500 15px var(--body);color:var(--ink3)}
.sh .edit{font:600 14px var(--body);color:var(--coral-tx);border-bottom:2px solid currentColor;line-height:1.3}
.body{display:none;padding:16px 44px 4px 0}
.step.act .body,.step.open .body{display:block}
.step:not(.ok) .sum,.step:not(.ok) .edit{display:none}
.body > p{font:400 15px/1.8 var(--body);color:var(--ink2);max-width:520px}

.field{display:block;margin-top:14px}
.field span{display:block;font:600 14px var(--body);margin-bottom:6px}
.inp{display:flex;align-items:center;height:56px;border-radius:16px;background:#fff;border:1.5px solid var(--line);padding:0 16px;gap:8px;max-width:420px}
.inp:focus-within{border-color:var(--ink)}
.inp input{flex:1;min-width:0;border:0;outline:0;background:none;font:500 17px var(--body)}
.inp.ltr{direction:ltr}
.inp.ltr b{font:600 17px var(--body);color:var(--ink3)}
.seg{display:inline-grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:4px;margin-top:8px;padding:4px;border-radius:16px;background:var(--bg2);min-width:280px}
.seg button{height:44px;padding:0 18px;border-radius:12px;font:600 15px var(--body);color:var(--ink2)}
.seg button.on{background:var(--surface);color:var(--ink);box-shadow:0 1px 2px rgba(20,33,61,.08),0 4px 10px rgba(20,33,61,.08)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;height:56px;padding:0 30px;border-radius:999px;background:var(--coral);color:var(--ink);font:700 17px var(--body);margin-top:18px;box-shadow:0 10px 24px rgba(255,107,91,.34)}
.btn.ghost{background:none;box-shadow:none;border:1.5px solid var(--line);font-weight:600}
.btn.sm{height:44px;padding:0 20px;font-size:15px;margin-top:0}
.alt{font:500 14px var(--body);color:var(--ink3);margin-inline-start:14px}

/* the code */
.code{margin-top:16px;display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.code .box{display:flex;align-items:center;gap:20px;padding:14px 18px 14px 14px;border-radius:22px;background:var(--navy);color:var(--cream)}
.code .box b{font:700 40px/1.2 var(--disp);padding:0 8px}
.copy{display:inline-flex;align-items:center;gap:8px;height:42px;padding:0 16px;border-radius:999px;background:rgba(244,237,224,.14);font:600 14px var(--body);color:var(--cream)}
.copy svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.copy.done{background:var(--teal);color:#fff}
.waitl{display:flex;align-items:center;gap:12px;margin-top:16px;font:600 15px var(--body)}
.waitl i{width:18px;height:18px;border-radius:50%;border:3px solid var(--line);border-top-color:var(--coral);animation:sp 1s linear infinite}
.waitl small{font:500 14px var(--body);color:var(--ink3);margin-inline-start:6px}
@keyframes sp{to{transform:rotate(360deg)}}

/* links */
.link{margin-top:12px;border-radius:20px;background:#fff;border:1.5px solid var(--line);padding:14px 16px 14px 14px;display:flex;align-items:center;gap:14px}
.link div{flex:1;min-width:0}
.link h3{font:700 16px var(--body)}
.link h3 small{font:500 13px var(--body);color:var(--coral-tx);margin-inline-start:8px}
.link code{display:block;direction:ltr;text-align:right;font:500 14px ui-monospace,Menlo,Consolas,monospace;color:var(--ink3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.link .copy{background:var(--ink);flex:none}
.link .copy.done{background:var(--teal)}
.only-phone{display:none}
.m-phone .only-phone{display:flex}
.m-phone .only-pc{display:none}
.guide{margin-top:22px;border-top:1px solid var(--line);padding-top:18px}
.guide h3{font:700 16px var(--body)}
.guide ol{margin:10px 22px 0 0;font:400 15px/1.9 var(--body);color:var(--ink2);max-width:540px}
.guide ol b{color:var(--ink);font-weight:600}
.guide ol::marker,.guide li::marker{font-weight:700;color:var(--ink)}
.g{display:none}
.g.on{display:block}
.rowb{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:20px}

/* side: free minutes + plans */
.side{position:sticky;top:20px;display:flex;flex-direction:column;gap:14px}
.card{border-radius:26px;background:var(--surface);border:1px solid var(--line);padding:22px}
.card.dark{background:var(--navy);color:var(--cream);border:0;background-image:radial-gradient(90% 70% at 50% 0%,rgba(255,107,91,.28),transparent 70%)}
.card h2{font:700 16px var(--body)}
.mins{display:flex;align-items:baseline;gap:10px;margin-top:6px}
.mins b{font:700 68px/1.1 var(--disp)}
.mins span{font:500 15px var(--body);color:rgba(244,237,224,.72)}
.mbar{height:8px;border-radius:4px;background:rgba(244,237,224,.16);margin-top:10px;overflow:hidden}
.mbar i{display:block;height:100%;width:70%;border-radius:4px;background:var(--coral)}
.card.dark p{font:400 14px/1.8 var(--body);color:rgba(244,237,224,.72);margin-top:12px}
.plans{display:flex;flex-direction:column;gap:8px;margin-top:12px}
.plan{display:flex;align-items:center;gap:12px;width:100%;text-align:right;padding:12px 16px;border-radius:18px;border:1.5px solid var(--line);background:#fff}
.plan .r{flex:none;width:20px;height:20px;border-radius:50%;border:2px solid var(--line)}
.plan div{flex:1}
.plan b{display:block;font:700 16px var(--body)}
.plan small{font:500 13px var(--body);color:var(--ink3)}
.plan .pr{font:700 26px var(--disp);flex:none}
.plan .pr small{font:500 13px var(--body);margin-inline-start:4px}
.plan.on{border-color:var(--ink);box-shadow:var(--sh)}
.plan.on .r{border-color:var(--coral);box-shadow:inset 0 0 0 4px #fff,inset 0 0 0 12px var(--coral)}
.card .btn{width:100%;margin-top:14px}
.fine{font:400 13px/1.8 var(--body);color:var(--ink3);margin-top:10px}

@media (max-width:900px){
  .wrap{grid-template-columns:1fr;gap:22px;padding:0 16px 60px}
  .nav{padding:16px}
  .side{position:static}
  .body{padding-right:0}
  .step{padding:18px}
  .who{display:none}
  .code .box b{font-size:34px}
  .seg{min-width:0;display:grid}
  .inp{max-width:none}
}
@media (prefers-reduced-motion:reduce){.waitl i{animation:none}}

/* ---------- live additions ---------- */
.err{margin-top:12px;font:600 14px var(--body);color:var(--coral-tx);min-height:1em}
.ok-note{margin-top:12px;font:600 14px var(--body);color:var(--teal-dk)}
.soon{max-width:560px;margin:60px auto;padding:0 24px;text-align:center}
.soon h1{font:700 clamp(40px,7vw,64px)/1.2 var(--disp)}
.soon p{font:500 18px/1.9 var(--body);color:var(--ink2);margin-top:12px}
.soon .btn{margin-top:24px}
.who button{font:600 13px var(--body);color:var(--coral-tx);margin-inline-start:10px;border-bottom:1.5px solid currentColor}
.dev{margin-top:14px;padding:10px 14px;border-radius:14px;background:var(--bg2);font:500 13px var(--body);color:var(--ink3)}
.dev button{font:600 13px var(--body);color:var(--coral-tx);margin-inline-start:10px;border-bottom:1.5px solid currentColor}
.plan[disabled]{cursor:default}
.btn[disabled]{opacity:.5;cursor:default;box-shadow:none}
.ts{margin-top:10px}
[hidden]{display:none!important}
.m-phone .guide.only-phone{display:block}