@font-face{font-family:"GFSans";src:url("/fonts/iranyekanwebregular.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"GFSans";src:url("/fonts/iranyekanwebmedium.woff2") format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"GFSans";src:url("/fonts/iranyekanwebbold.woff2") format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"GFSans";src:url("/fonts/iranyekanwebextrabold.woff2") format("woff2");font-weight:800;font-display:swap}

:root{
  --green:#8ede2a; --green-2:#5fbe12; --green-3:#3f8f08; --ink-green:#0d2a05;
  --bg:#ffffff; --bg-soft:#f4f7f1; --bg-tint:#eef6e6;
  --text:#1b2119; --text-2:#4d5a4a; --muted:#727f6e;
  --line:#e2e8dd; --line-2:#cfd9c9;
  --card:#ffffff; --shadow:0 1px 2px rgba(20,40,10,.05), 0 10px 30px rgba(20,40,10,.06);
  --shadow-lg:0 2px 4px rgba(20,40,10,.05), 0 24px 60px rgba(20,40,10,.10);
  --r:18px; --r-lg:26px;
  --ease:cubic-bezier(.22,1,.36,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;overflow-x:clip}
body{font-family:"GFSans",-apple-system,system-ui,"Segoe UI",sans-serif;background:var(--bg);
  color:var(--text);line-height:1.9;overflow-x:clip;-webkit-font-smoothing:antialiased}
/* The default iOS tap highlight is a translucent black rectangle; tinted green it stops looking
   like a rendering fault on the cards. It is NOT removed from links — on a touch screen it is the
   only confirmation that the tap registered, and this site has no JS to replace it with. It *is*
   removed from the burger and the FAQ rows, where the box spans a whole row and reads as a bug. */
a{color:inherit;text-decoration:none;-webkit-tap-highlight-color:rgba(95,190,18,.14)}
label,summary{-webkit-tap-highlight-color:transparent}
img,video{display:block;max-width:100%}
h1,h2,h3,h4,p,ul,ol{margin:0}
::selection{background:#d9f5ac}
/* Every in-page anchor on this site otherwise lands *underneath* the 66px sticky header: the
   install badges point at /نصب/#ios and #android, and each HowToStep's `url` in the tutorial
   JSON-LD points at a real <li id="stepN"> — a step deep-link arriving from search would scroll
   the step out of sight. One rule covers all of them, present and future. */
[id]{scroll-margin-top:78px}
/* Not a flat 20px: the viewport meta opts into viewport-fit=cover, so on a notched phone held
   sideways the leading 20px of every .wrap sits under the rounded corner or the sensor housing.
   max() keeps exactly 20px on every device that reports a zero inset, which is most of them. */
.wrap{max-width:1120px;margin-inline:auto;
  padding-right:max(20px,env(safe-area-inset-right));
  padding-left:max(20px,env(safe-area-inset-left))}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------------- header ---------------- */
.site-head{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.86);
  backdrop-filter:saturate(180%) blur(18px);-webkit-backdrop-filter:saturate(180%) blur(18px);
  border-bottom:1px solid var(--line)}
.site-head .wrap{display:flex;align-items:center;gap:14px;height:66px}
.brand{display:flex;align-items:center;gap:10px;flex-shrink:0}
.brand img{width:36px;height:36px;border-radius:10px}
/* No negative letter-spacing on Persian text anywhere on this site. Latin display type tightens
   up nicely; Arabic script does not — the letters are joined, so pulling them together crowds the
   joins and the dots/diacritics start to collide with the neighbouring glyph. It is worst exactly
   where it used to be heaviest: the hero h1 clamps down to 32px on a phone, where -1px is ~3% of
   the em rather than the ~2% it was at the desktop 54px. */
.brand b{font-size:18px;font-weight:800}
.brand span{font-size:11px;color:var(--muted);font-weight:500;margin-inline-start:2px}
.nav{display:flex;gap:2px;margin-inline-start:14px}
.nav a{font-size:14px;font-weight:700;color:var(--text-2);padding:8px 13px;border-radius:11px;
  transition:background .18s,color .18s}
.nav a:hover{background:var(--bg-soft);color:var(--text)}
.nav a.on{color:var(--green-3);background:var(--bg-tint)}
.site-head .sp{flex:1}
.head-cta{background:var(--text);color:#fff;font-size:13.5px;font-weight:800;padding:10px 18px;
  border-radius:12px;white-space:nowrap;transition:transform .18s var(--ease),background .18s}
.head-cta:hover{background:var(--green-3);transform:translateY(-1px)}
.burger{display:none;width:44px;height:44px;border:1px solid var(--line);border-radius:11px;
  background:#fff;place-items:center;cursor:pointer}
.burger span{display:block;width:17px;height:2px;background:var(--text);border-radius:2px;
  box-shadow:0 -5px 0 var(--text),0 5px 0 var(--text)}
.burger:active{background:var(--bg-soft)}
#mnav:checked ~ .burger{background:var(--bg-tint);border-color:var(--line-2)}
@media (max-width:840px){
  .nav{position:fixed;inset:66px 0 auto 0;background:#fff;border-bottom:1px solid var(--line);
    flex-direction:column;padding:10px 20px 16px;gap:2px;display:none;box-shadow:var(--shadow);
    /* A fixed panel with no height cap is fine in portrait and unusable in landscape, where five
       rows plus the header are taller than the viewport and the overflow simply isn't reachable.
       overscroll-behavior stops a fling inside the open menu from scrolling the page behind it. */
    max-height:calc(100vh - 66px);max-height:calc(100dvh - 66px);overflow-y:auto;
    overscroll-behavior:contain;padding-bottom:calc(16px + env(safe-area-inset-bottom))}
  .nav a{padding:12px 8px;font-size:15px}
  #mnav:checked ~ .nav{display:flex}
  .burger{display:grid}
  .head-cta{padding:9px 14px;font-size:12.5px}
  .brand span{display:none}
}
/* At 320-360px the row (brand + «باز کردن اپ» + burger) is wider than the viewport and the burger
   gets pushed off the edge. Tightening the gap and the CTA is enough; nothing has to be hidden. */
@media (max-width:380px){
  .site-head .wrap{gap:8px}
  .brand b{font-size:16px}
  .brand img{width:32px;height:32px}
  .head-cta{padding:9px 11px;font-size:12px}
}
/* NOT display:none. The burger is a <label> and this checkbox holds the open/closed state, so with
   the input removed from the render tree neither element is focusable — the entire mobile menu was
   unreachable by keyboard and by switch control, with no JS fallback to reach it another way.
   Clipping it instead keeps it in the tab order, and the burger draws the focus ring on its behalf
   (it is a later sibling of the input, which is why the ~ selector works). */
#mnav{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none;margin:0}
#mnav:focus-visible ~ .burger{outline:2px solid var(--green-3);outline-offset:2px}

/* ---------------- generic bits ---------------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;font-weight:800;
  border-radius:15px;transition:transform .18s var(--ease),box-shadow .2s,background .2s;cursor:pointer}
.btn:active{transform:scale(.975)}
.btn-primary{background:linear-gradient(160deg,var(--green),var(--green-2));color:var(--ink-green);
  padding:15px 28px;font-size:16px;box-shadow:0 8px 24px rgba(110,190,25,.30)}
.btn-primary:hover{box-shadow:0 14px 34px rgba(110,190,25,.42);transform:translateY(-2px)}
.btn-dark{background:var(--text);color:#fff;padding:15px 28px;font-size:16px}
.btn-dark:hover{background:#000;transform:translateY(-2px)}
.btn-ghost{background:#fff;border:1px solid var(--line-2);color:var(--text);padding:14px 24px;font-size:15px}
.btn-ghost:hover{border-color:var(--green-2);color:var(--green-3)}
.chip{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;font-weight:700;color:var(--text-2);
  background:var(--bg-soft);border:1px solid var(--line);border-radius:99px;padding:6px 13px}
.chip .dot{width:7px;height:7px;border-radius:99px;background:var(--green-2)}
.eyebrow{font-size:12.5px;font-weight:800;color:var(--green-3);letter-spacing:.4px}
h2.sec{font-size:clamp(23px,3.4vw,32px);font-weight:800;margin:8px 0 6px}
p.sub{font-size:15.5px;color:var(--muted);max-width:620px}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:20px;
  box-shadow:var(--shadow)}

/* ---------------- install badges ---------------- */
.badges{display:flex;gap:11px;flex-wrap:wrap}
.badge{display:flex;align-items:center;gap:11px;background:var(--text);color:#fff;border-radius:15px;
  padding:10px 18px 10px 15px;transition:transform .18s var(--ease),background .2s;min-width:168px}
.badge:hover{background:#000;transform:translateY(-2px)}
.badge svg{width:26px;height:26px;flex-shrink:0;fill:#fff}
.badge .t{display:flex;flex-direction:column;line-height:1.35}
.badge .t small{font-size:10.5px;opacity:.72;font-weight:500}
.badge .t b{font-size:14.5px;font-weight:800}
.badge.pwa{background:linear-gradient(160deg,var(--green),var(--green-2));color:var(--ink-green)}
.badge.pwa svg{fill:var(--ink-green)}
.badge.pwa:hover{background:linear-gradient(160deg,#96e63a,#63c614)}

/* ---------------- footer ---------------- */
.site-foot{border-top:1px solid var(--line);background:var(--bg-soft);margin-top:70px;
  padding:38px 0 calc(44px + env(safe-area-inset-bottom))}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:26px}
@media (max-width:760px){.foot-grid{grid-template-columns:1fr 1fr;gap:22px}.foot-grid>:first-child{grid-column:1/-1}}
.foot-grid h4{font-size:13px;font-weight:800;color:var(--text);margin-bottom:9px}
.foot-grid a,.foot-grid p{font-size:13px;color:var(--muted);display:block;margin:5px 0}
.foot-grid a:hover{color:var(--green-3)}
.socials{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.socials a{display:inline-flex;align-items:center;gap:7px;margin:0;padding:7px 12px;border-radius:11px;
  background:#fff;border:1px solid var(--line);font-size:12.5px;font-weight:700;color:var(--text-2);
  transition:border-color .18s,color .18s}
.socials a:hover{border-color:var(--green-2);color:var(--green-3)}
.socials svg{width:16px;height:16px;fill:currentColor;flex-shrink:0}
.foot-bot{margin-top:30px;padding-top:18px;border-top:1px solid var(--line-2);
  display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;font-size:12.5px;color:var(--muted)}

/* ---------------- touch devices ---------------- */
/* Keyed on (hover:none) rather than a width breakpoint: this is about the input device, and a wide
   tablet needs the same 44px targets a narrow phone does.
   The footer links are the worst offenders on the site — 13px text in a ~25px box, stacked 5px
   apart, which is a coin-flip tap. :not(.brand) because the footer's logo link is also a
   .foot-grid a and it is already 36px of image. */
@media (hover:none){
  .foot-grid a:not(.brand){display:flex;align-items:center;min-height:44px;margin:0}
  .socials a{min-height:44px;padding:9px 14px}
  .foot-bot{gap:6px 12px}
}
/* :hover latches after a tap on a touch screen: the card stays lifted, with its bigger shadow,
   until you touch something else — which reads as a layout that has come apart rather than as a
   hover state. Colour changes are harmless and stay; the transforms do not. Rules defined in the
   per-page stylesheets are neutralised there, since those load after this one and would win. */
@media (hover:none){
  .head-cta:hover,.btn-primary:hover,.btn-dark:hover,.badge:hover{transform:none}
  .btn-primary:hover{box-shadow:0 8px 24px rgba(110,190,25,.30)}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition-duration:.01ms !important;animation-duration:.01ms !important}
}