*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:72px}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--f-ui);font-size:17px;line-height:1.7;min-height:100vh}
img{max-width:100%;display:block}
a{color:inherit}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;padding:0}
h1,h2,h3,h4{font-family:var(--f-read);font-weight:700;line-height:1.3;margin:0}
p{margin:0}
:focus-visible{outline:2px solid var(--acc);outline-offset:3px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;inset-inline-start:8px;top:-60px;background:var(--ink);color:var(--paper);padding:8px 14px;z-index:100}.skip:focus{top:8px}
.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--pad)}
.ic{width:20px;height:20px;flex:none}
.kicker{font-family:var(--f-kicker);font-weight:700;color:var(--acc);font-size:15px;letter-spacing:normal}
.lead{color:var(--mut);font-size:clamp(17px,1.6vw,19px);max-width:38em}
.fine{color:var(--mut);font-size:14px;display:flex;gap:6px;align-items:center}
.fine .ic{width:16px;height:16px}
.loading{padding:60px 0;text-align:center;color:var(--mut)}
.orn{width:180px;height:14px;color:var(--acc);display:block}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:var(--tap);padding:10px 20px;border:1.5px solid var(--ink);font-family:var(--f-ui);font-weight:700;font-size:17px;text-decoration:none;transition:background var(--t-fast),color var(--t-fast)}
.btn.pri{background:var(--ink);color:var(--paper)}
.btn.pri:hover{background:var(--acc);border-color:var(--acc);color:var(--acc-ink)}
.btn.ghost{background:transparent;color:var(--ink)}
.btn.ghost:hover{background:var(--paper2)}
.btn.sm{min-height:40px;padding:6px 14px;font-size:15px}
.btn.wide{width:100%}
.btn .ic{width:18px;height:18px}
.iconbtn{display:inline-grid;place-items:center;width:var(--tap);height:var(--tap);border:1px solid var(--line);color:var(--ink)}
.iconbtn:hover{border-color:var(--ink)}

/* header */
.top{position:sticky;top:0;z-index:20;background:var(--paper);border-bottom:3px double var(--ink)}
.topin{display:flex;align-items:center;gap:20px;height:64px}
.logo{display:inline-flex;align-items:center;gap:8px;font-family:var(--f-read);font-weight:700;font-size:23px;text-decoration:none;white-space:nowrap}
.logo .lg{color:var(--acc);width:24px;height:24px}
.logo .lgm{display:block;height:38px;width:auto;aspect-ratio:225/100}
.nav{display:flex;gap:22px}
.nav a{text-decoration:none;color:var(--mut);font-weight:700;padding:6px 0;border-bottom:2px solid transparent}
.nav a.on,.nav a:hover{color:var(--acc);border-color:var(--acc)}
.topact{margin-inline-start:auto;display:flex;align-items:center;gap:10px}
.me{font-weight:700;max-width:12em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.navbtn{display:none}
/* header buttons share one frame: 1.5px ink, like .btn */
.top .navbtn,.top .topact .btn{border:1.5px solid var(--ink)}
.top .topact .cta{white-space:nowrap;background:transparent;color:var(--acc);border-color:var(--acc)}
.top .topact .cta:hover{background:var(--acc);color:var(--acc-ink)}
@media(max-width:699px){
  .topin{gap:10px;height:58px}
  .logo{font-size:21px}
  .logo .lgm{height:32px}
  .navbtn{display:inline-grid;width:44px;height:44px}
  .topact .btn:not(.cta) span{display:none}.topact .cta{padding:6px 12px}.topact .btn{min-width:44px;padding:6px 10px;min-height:44px}
  .me{display:none}
  .nav{display:none;position:absolute;top:100%;inset-inline:0;background:var(--paper);border-bottom:3px double var(--ink);flex-direction:column;gap:0;padding:6px var(--pad) 12px}
  .nav.open{display:flex}
  .nav a{padding:12px 0;border-bottom:1px dotted var(--line);font-size:18px}
}

/* footer */
.foot{border-top:3px double var(--ink);margin-top:64px;padding:28px 0 calc(28px + env(safe-area-inset-bottom))}
.footin{display:flex;flex-wrap:wrap;gap:16px 40px;justify-content:space-between;align-items:flex-start}
.foot p{color:var(--mut);font-size:15px;max-width:34em;margin-top:6px}
.flinks{display:flex;gap:18px;flex-wrap:wrap}.flinks a{color:var(--mut);font-size:15px}

/* sheet (dialog) */
#sheet{position:fixed;inset:0;z-index:50;display:flex;align-items:flex-end;justify-content:center}
#sheet[hidden]{display:none}
.sheet-bg{position:absolute;inset:0;background:rgba(20,15,10,.55)}
.sheet-box{position:relative;width:100%;max-width:520px;max-height:88vh;overflow:auto;background:var(--paper);color:var(--ink);border:1px solid var(--ink);border-bottom:0;padding:26px 22px calc(22px + env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:12px;animation:up var(--t) ease}
.sheet-box::before{content:"";position:absolute;inset:5px;border:1px solid var(--line);pointer-events:none}
.sheet-box h2{font-size:26px}
.sheet-box p{color:var(--mut)}
.sheet-x{position:absolute;top:10px;inset-inline-end:10px;width:44px;height:44px;z-index:1;border:0}
@media(min-width:700px){#sheet{align-items:center}.sheet-box{border-bottom:1px solid var(--ink);padding-bottom:26px}}
@keyframes up{from{transform:translateY(24px);opacity:0}to{transform:none;opacity:1}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* toast */
#toast{position:fixed;left:50%;bottom:calc(24px + env(safe-area-inset-bottom));transform:translate(-50%,20px);background:var(--ink);color:var(--paper);padding:10px 18px;font-weight:700;font-size:16px;opacity:0;pointer-events:none;transition:opacity var(--t),transform var(--t);z-index:60;max-width:calc(100% - 32px);text-align:center}
#toast.on{opacity:1;transform:translate(-50%,0)}

/* «ثبّت التطبيق» (shown only when the browser can install, or on iPhone Safari) */
.install-slot:empty{display:none}
.install .ic{width:18px;height:18px;color:var(--acc)}
.install-slot.lib{display:block;margin-top:4px}
.ios-steps{margin:0;padding-inline-start:22px;display:flex;flex-direction:column;gap:8px;font-size:17px}
.ios-steps .ic{width:20px;height:20px;vertical-align:-4px;color:var(--acc)}