/* ══════════════════════════════════════════════════════════════════════════
   header.css — هدرِ مشترک: نوار، منوهای بازشو و منوی موبایل.

   🔴 چرا فایلِ جداست: صفحهٔ اصلی (index.html) خودکفاست و site.css را لود نمی‌کند،
   چون بدنه‌اش تاییدشده است و بلعیدنِ کلِ پوسته تکانش می‌دهد. ولی هدرش باید **دقیقا**
   همان هدرِ ۲۴ صفحهٔ دیگر باشد. تنها راهِ بدونِ تکرار همین است: یک فایلِ هدر که هم
   site.css واردش می‌کند هم index.html مستقیم لینکش می‌دهد.
   ⚠ پس اینجا هیچ توکنی تعریف نمی‌شود و هیچ `.btn`ی؛ هر دو صفحه خودشان دارند.
   ══════════════════════════════════════════════════════════════════════════ */

/* ═══ هدر ═══ */
/* «پرش به محتوا» — دکمهٔ دسترس‌پذیری. کسی که با کیبورد می‌گردد، با اولین Tab
   می‌تواند از رویِ کلِ منو بپرد وسطِ محتوا. با ماوس هرگز نباید دیده شود.

   🔴 دو باگ داشت:
   ۱. `top:-48px` یک عددِ حدسی بود و ارتفاعِ واقعیِ دکمه کمی بیشتر از ۴۸ درمی‌آمد،
      پس **نوکش از بالای صفحه بیرون می‌زد** و با کلیک باز می‌شد. حالا با
      `translateY(-200%)` بیرون می‌رود، که به ارتفاع بند نیست.
   ۲. `position:absolute` بود، یعنی نسبت به کلِ سند؛ روی صفحهٔ اسکرول‌شده جای
      اشتباهی می‌رفت. `fixed` یعنی نسبت به پنجره، که رفتارِ درستِ این دکمه است. */
.skip{position:fixed;inset-inline-start:8px;top:8px;z-index:99;background:var(--gc-violet);
  color:#fff;padding:10px 18px;border-radius:var(--r-sm);
  transform:translateY(-200%);transition:transform .2s var(--ease-ui)}
.skip:focus{transform:none}
/* 🔴 چرا تقریبا مات و نه ۰٫۷۲: مالک سه بار گفت «هدر صفحه گاردین با بقیه فرق
   داره». اندازه گرفتم و **هندسه‌اش مو نمی‌زد** ــ همبرگر روی همان y، ارتفاع
   همان ۷۳ (و ۶۱ در حالت فشرده)، لوگو همان ۳۰. فرق **رنگ** بود: هاله بنفشِ
   هیروی گاردین دقیقا از زیر هدر شروع می‌شود و هدرِ ۲۸٪-شفاف آن را می‌مکید، پس
   روی آن یک صفحه بنفش می‌زد و روی بقیه سیاه بود.
   با ۰٫۹۶ رنگِ پشت دیگر رد نمی‌شود. روی صفحه‌های دیگر هیچ تغییرِ دیدنی ندارد،
   چون پشتشان از قبل همین سیاه بود. بلور می‌ماند تا لبه‌اش زنده بماند. */
header{position:sticky;top:0;z-index:50;background:rgba(8,8,10,.96);
  backdrop-filter:blur(12px);border-bottom:1px solid transparent;
  transition:background .3s ease,border-color .3s ease}
header .hd{display:flex;align-items:center;justify-content:space-between;gap:28px;
  padding-block:16px;transition:padding .3s ease}
header.tight{background:rgba(8,8,10,.99);border-bottom-color:var(--gc-hairline)}
header.tight .hd{padding-block:10px}
.brand{display:flex;align-items:center}
/* برشِ CSS از فایلِ ترکیبِ سه‌لوگو؛ مختصات از اسکنِ آلفای خودِ تصویر */
.logo-fa{display:block;width:110px;height:30px;
  background:url('../brand/tweakfa/TweakFa - Fa+En.webp') no-repeat;
  background-size:321.6px auto;background-position:-1.7px -19.5px}
/* 🔴 align-items:center لازم است: دو آیتمِ بازشو <button> اند و <button>
   برخلافِ <a> مقدارِ line-height را از والد ارث نمی‌برد (پیش‌فرضش normal
   است، یعنی ~۱.۲ در برابرِ ۱.۹ بدنه). بدونِ این، «فونیکس» و «محاسبه‌گر»
   چند پیکسل بالاتر از «مشاوره خرید» و «بلاگ» می‌نشستند. */
nav.main{display:flex;align-items:center;gap:32px;font-size:14px;font-weight:500;
  color:var(--gc-text-mid)}
nav.main a{transition:color .18s ease;padding-block:4px}
nav.main a:hover,nav.main a[aria-current="page"]{color:var(--gc-text)}
nav.main a[aria-current="page"]{font-weight:700}
nav.main a:focus-visible{outline:2px solid var(--gc-violet-ink);outline-offset:2px}
.hd-act{display:flex;align-items:center;gap:10px}
/* ظرفِ بخشِ حساب. جدا است تا `refreshHeader()` فقط همین را بازنویسی کند و
   دکمهٔ منو ــ که خواهرش است ــ دست‌نخورده و سیم‌کشی‌شده بماند. */
.hd-acct{display:flex;align-items:center;gap:10px}
.hd-act .btn{height:40px;padding:0 18px;font-size:13px}
/* دایرهٔ حساب — آدمک، نه حرفِ اولِ نام (دستور مالک، ۲۳ مرداد).
   لوگوی شخصِ ثالث نداریم و نمی‌سازیم؛ آیکن از خودِ پوسته می‌آید (TF.person). */
.avatar{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;flex:none;
  font-weight:700;font-size:13.5px;background:rgba(var(--gc-violet-rgb),.22);color:var(--gc-violet-ink);
  box-shadow:inset 0 0 0 1px rgba(var(--gc-violet-rgb),.4)}
.avatar svg{display:block}

/* ═══ منوهای بازشوی هدر ═══
   زبانِ حرکتِ سایت همین‌جا هم تکرار می‌شود: بالاآمدن + محو، با --ease-ui، و یک
   شکوفهٔ بنفشِ کم‌رنگ بالای پنل — همان نوری که در هیروها هست. */
.navgrp{position:relative}
.navtop{display:inline-flex;align-items:center;gap:5px;border:0;background:0;padding:4px 0;
  cursor:pointer;font-family:inherit;font-size:14px;font-weight:500;line-height:inherit;
  color:var(--gc-text-mid);transition:color .18s ease}
.navtop:hover,.navgrp.on .navtop{color:var(--gc-text)}
.navtop[aria-current="page"]{color:var(--gc-text);font-weight:700}
.navtop:focus-visible{outline:2px solid var(--gc-violet-ink);outline-offset:2px;border-radius:5px}
.navtop .chev{transition:transform .26s var(--ease-ui);opacity:.75}
.navgrp.on .navtop .chev{transform:rotate(180deg)}

/* کادر عمدا سبک است: مویینِ معمولی نه پررنگ، سایه‌ی کم‌عمق‌تر، و پدینگِ کمتر.
   نورِ پس‌زمینه و نقطه‌های رنگی دست‌نخورده ماندند (خواسته‌ی مالک: «صرفا کادر»). */
.navpop{position:absolute;top:calc(100% + 11px);inset-inline-start:50%;z-index:60;
  min-width:196px;padding:5px;border-radius:12px;
  background:var(--gc-surface);box-shadow:inset 0 0 0 1px var(--gc-hairline),
    0 10px 26px rgba(0,0,0,.38);
  opacity:0;transform:translate(50%,-9px) scale(.97);transform-origin:top center;
  pointer-events:none;
  transition:opacity .2s var(--ease-ui),transform .26s var(--ease-ui)}
/* 🔴 در RTL، inset-inline-start یعنی right، پس translateX باید **مثبت** باشد تا
   پنل زیرِ مرکزِ سرگروه بنشیند. با translateX(-50%) به بیرونِ صفحه می‌رفت. */
.navgrp.on .navpop{opacity:1;transform:translate(50%,0) scale(1);pointer-events:auto}

/* شکوفهٔ بنفش بالای پنل */
.navpop::before{content:'';position:absolute;inset:0 0 auto;height:74px;pointer-events:none;
  border-radius:var(--r-md) var(--r-md) 0 0;
  background:radial-gradient(70% 100% at 50% 0,rgba(var(--gc-violet-rgb),.22),transparent 72%)}

.navpop a{position:relative;display:flex;align-items:center;gap:10px;
  padding:9px 10px;border-radius:9px;font-size:13.5px;font-weight:500;
  color:var(--gc-text-mid);white-space:nowrap;
  transition:background .16s ease,color .16s ease}
.navpop a:hover{background:var(--gc-tint-1);color:var(--gc-text)}
.navpop a[aria-current="page"]{color:var(--gc-text);font-weight:700}
.navpop a:focus-visible{outline:2px solid var(--gc-violet-ink);outline-offset:-2px}
.navpop .dot{width:7px;height:7px;border-radius:50%;flex:none;
  background:rgb(var(--dc));box-shadow:0 0 0 3px rgba(var(--dc),.15);
  transition:box-shadow .16s ease}
.navpop a:hover .dot{box-shadow:0 0 0 4px rgba(var(--dc),.24)}
/* «اشتراک شاه‌پَر» محصول نیست، ردهٔ ویژه است ⇒ جدا از سه محصولِ بالا */
.navpop a.tier{margin-top:6px;padding-top:14px}
.navpop a.tier::before{content:'';position:absolute;top:0;inset-inline:6px;height:1px;
  background:var(--gc-hairline)}

/* ورودِ پلکانیِ ردیف‌ها. فقط وقتی باز است تاخیر دارد، پس بسته‌شدن سریع است. */
.navpop a{opacity:0;transform:translateY(-5px);
  transition:opacity .2s var(--ease-ui),transform .2s var(--ease-ui),
             background .16s ease,color .16s ease}
.navgrp.on .navpop a{opacity:1;transform:none}
.navgrp.on .navpop a:nth-child(1){transition-delay:.03s}
.navgrp.on .navpop a:nth-child(2){transition-delay:.06s}
.navgrp.on .navpop a:nth-child(3){transition-delay:.09s}
.navgrp.on .navpop a:nth-child(4){transition-delay:.12s}

@media (prefers-reduced-motion:reduce){
  .navpop,.navpop a{transition-duration:.01ms!important;transform:none!important}
  .navgrp.on .navpop{transform:translateX(50%)!important}
  .navtop .chev{transition:none}
}

/* ═══ منوی موبایل ═══
   🔴 تا ۲۱ مرداد ۱۴۰۵ زیرِ ۹۰۰ پیکسل کلِ nav.main حذف می‌شد و **هیچ‌چیز جایش
   را نمی‌گرفت**: نه دکمهٔ همبرگری، نه کشو. یعنی روی موبایل کلِ سایت دو لینک
   داشت. دکمه و پنلِ زیر همان حفره را می‌بندند و از همان NAV ساخته می‌شوند. */
.burger{display:none;width:40px;height:40px;border:0;cursor:pointer;padding:0;
  border-radius:var(--r-sm);background:var(--gc-tint-0);color:var(--gc-text-mid);
  place-items:center;gap:4.5px;align-content:center;
  box-shadow:inset 0 0 0 1px var(--gc-hairline)}
/* ۲ پیکسل و نه ۱٫۸: کرومیوم عرضِ خط را به پیکسلِ کاملِ دستگاه گرد می‌کند و
   ۱٫۸ روی ۱۰۰٪ به ۱ می‌افتد، که شکننده دیده می‌شود. */
.burger span{display:block;width:17px;height:2px;border-radius:2px;background:currentColor;
  transition:transform .22s var(--ease-ui),opacity .16s ease}
.burger:hover{color:var(--gc-text)}
/* باز که هست، خودِ دکمه هم بگوید باز است ، نه فقط شکلِ ضربدر */
.burger[aria-expanded="true"]{background:rgba(var(--gc-violet-rgb),.18);
  color:var(--gc-violet-ink);box-shadow:inset 0 0 0 1px rgba(var(--gc-violet-rgb),.4)}
.burger:focus-visible{outline:2px solid var(--gc-violet-ink);outline-offset:2px}
/* ضربدر شدن: خطِ وسط محو، دو خطِ دیگر قیچی می‌شوند */
/* ۶٫۵ و نه ۶٫۳: فاصلهٔ مرکز تا مرکزِ دو خط = ارتفاع ۲ + گپ ۴٫۵. با عددِ قبلی
   (که برای خطِ ۱٫۸ حساب شده بود) دو بازوی ضربدر ۰٫۲ پیکسل روی هم نمی‌افتادند. */
[aria-expanded="true"].burger span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
[aria-expanded="true"].burger span:nth-child(2){opacity:0}
[aria-expanded="true"].burger span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}

/* ══════════════════════════════════════════════════════════════════════
   پنلِ منوی موبایل — کارتِ جدا، لنگر در هدر
   ══════════════════════════════════════════════════════════════════════
   تا ۲۴ مرداد ۱۴۰۵ این یک فهرستِ صافِ تمام‌عرض بود که از زیرِ هدر باز می‌شد و
   هر ردیفش فقط یک نقطهٔ ۷ پیکسلی داشت. حالا کارتی است با فاصله از لبه‌ها،
   و محتوایش گروه‌بندی‌شده: محصول‌ها با کاشیِ رنگیِ خودشان، شاه‌پَر با کادرِ
   طلایی، سه محاسبه‌گر در یک ردیف، و بقیهٔ مقصدها در شبکهٔ دوستونی.

   🔴 چرا clip-path و نه translate: پنل از **پشتِ هدر** می‌آید بیرون؛ چیزی که
   از پشتِ یک لبه بیرون می‌آید پرده‌وار ظاهر می‌شود. سُر خوردن یعنی «از بیرونِ
   صفحه آمد»، که اینجا دروغ است. `round` داخلِ inset لازم است وگرنه گوشه‌های
   گرد در طولِ باز شدن مربع می‌شوند. */
/* 🔴 `display:block` صریح لازم است، وگرنه صفحه اصلی منو را نشان نمی‌داد:
   `index.html` در CSS خودش `@media (max-width:900px){ nav{display:none} }`
   دارد ــ یک سلکتور برهنه که **هر** `<nav>` را زیر ۹۰۰ می‌خواباند، و این پنل
   هم `<nav>` است. تا دیروز قاعدهٔ `.mnav:not([hidden]){display:flex}` جلویش را
   می‌گرفت؛ با حذف آن، `nav{display:none}` برنده شد. یک کلاس (۰،۱،۰) از یک تگ
   (۰،۰،۱) قوی‌تر است، پس این خط پوسته را در برابر همین دست قاعده‌ها بیمه می‌کند. */
.mpanel{display:block;position:absolute;inset-inline:12px;top:calc(100% + 8px);z-index:45;
  max-height:calc(100svh - 100% - 34px);overflow-y:auto;scrollbar-width:none;
  padding:14px 16px 20px;border-radius:20px;background:var(--gc-surface);
  box-shadow:0 26px 52px rgba(0,0,0,.66),inset 0 0 0 1px var(--gc-hairline-strong);
  clip-path:inset(0 0 100% 0 round 20px);transform:translateY(-6px);
  pointer-events:none;
  transition:clip-path .38s var(--ease-ui),transform .38s var(--ease-ui)}
.mpanel::-webkit-scrollbar{display:none}
.mnav-on .mpanel{clip-path:inset(0 0 0 0 round 20px);transform:none;pointer-events:auto}
/* همان شکوفهٔ بنفشی که پنل‌های بازشوی دسکتاپ دارند */
.mpanel::before{content:'';position:absolute;inset:0 0 auto;height:130px;pointer-events:none;
  background:radial-gradient(72% 100% at 50% 0,rgba(var(--gc-violet-rgb),.2),transparent 74%)}

.mp-lb{display:block;margin:15px 2px 7px;font-size:11px;font-weight:700;
  letter-spacing:.05em;color:var(--gc-text-low)}
.mp-lb:first-child{margin-top:2px}
.mp-row{position:relative;display:flex;align-items:center;gap:12px;padding:7px 8px;
  margin-inline:-8px;border-radius:13px;transition:background .18s ease}
.mp-row:active{background:var(--gc-tint-1)}
.mp-row[aria-current="page"]{background:var(--gc-tint-1)}
.mp-tile{width:40px;height:40px;border-radius:12px;flex:none;display:grid;place-items:center;
  background:rgba(var(--dc),.13);box-shadow:inset 0 0 0 1px rgba(var(--dc),.3)}
.mp-tile svg{width:21px;height:21px;color:rgb(var(--dc))}
.mp-tile img{width:40px;height:40px;border-radius:12px;display:block}
.mp-row .mp-nm{font-size:15px;font-weight:600;color:var(--gc-text)}
.mp-soon{margin-inline-start:auto;padding:3px 9px;border-radius:999px;font-size:10.5px;
  font-weight:700;color:var(--gc-cyan);background:rgba(var(--gc-cyan-rgb),.12);
  box-shadow:inset 0 0 0 1px rgba(var(--gc-cyan-rgb),.3)}
.mp-row .mp-chev{margin-inline-start:auto;width:16px;height:16px;flex:none;
  color:var(--gc-text-low)}

/* شاه‌پَر رده است نه محصول ⇒ کادرِ طلاییِ خودش، با یک برقِ **یک‌بار** موقعِ باز
   شدن. حلقه نیست، پس قاعدهٔ هم‌ضربیِ لوپ‌ها اینجا موضوعیت ندارد. */
.mp-row.tier{margin-top:10px;padding:9px 10px;overflow:hidden;
  background:linear-gradient(180deg,rgba(var(--gc-gold-rgb),.09),rgba(var(--gc-gold-rgb),.03));
  box-shadow:inset 0 0 0 1px rgba(var(--gc-gold-rgb),.26)}
.mp-row.tier .mp-nm{color:var(--gc-gold)}
.mp-row.tier .mp-chev{color:rgba(var(--gc-gold-rgb),.5)}
.mp-row.tier::after{content:'';position:absolute;inset:0;pointer-events:none;opacity:0;
  background:linear-gradient(105deg,transparent 38%,rgba(var(--gc-gold-rgb),.17) 47%,transparent 56%);
  transform:translateX(-130%)}
.mnav-on .mp-row.tier::after{animation:mp-sheen 1.15s var(--ease-sweep,ease) .5s 1 both}
@keyframes mp-sheen{0%{transform:translateX(-130%);opacity:0}16%{opacity:1}84%{opacity:1}
  100%{transform:translateX(130%);opacity:0}}

/* سه محاسبه‌گر یک خانواده‌اند ⇒ یک ردیفِ سه‌تایی، نه سه سطرِ جدا */
.mp-trio{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.mp-trio a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;
  padding:12px 4px;border-radius:14px;background:rgba(var(--gc-success-rgb),.08);
  box-shadow:inset 0 0 0 1px rgba(var(--gc-success-rgb),.2);
  font-size:12px;font-weight:600;color:var(--gc-text);transition:background .18s ease}
.mp-trio a:active,.mp-trio a[aria-current="page"]{background:rgba(var(--gc-success-rgb),.18)}
.mp-trio svg{width:21px;height:21px;color:var(--gc-success-ink)}

.mp-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:10px}
.mp-grid a{display:flex;align-items:center;gap:9px;padding:11px 12px;border-radius:13px;
  background:var(--gc-tint-0);box-shadow:inset 0 0 0 1px var(--gc-hairline);
  font-size:13.5px;font-weight:600;color:var(--gc-text);transition:background .18s ease}
.mp-grid a:active,.mp-grid a[aria-current="page"]{background:var(--gc-tint-1)}
.mp-grid svg{width:18px;height:18px;color:var(--gc-text-mid);flex:none}
.mp-grid a.acc,.mp-grid a.acc svg{color:var(--gc-violet-ink)}

.mpanel a:focus-visible{outline:2px solid var(--gc-violet-ink);outline-offset:-3px}
/* خودِ پنل فقط گیرندهٔ فوکوس است تا Tab داخل بماند؛ حلقه نمی‌خواهد */
.mpanel:focus{outline:none}

/* صفحهٔ جاری باید در پنل پیدا باشد. رنگِ پس‌زمینهٔ تنها کافی نبود ــ روی
   کاشی‌های کم‌رنگ اصلاً دیده نمی‌شد. */
.mp-row[aria-current="page"] .mp-nm,
.mp-trio a[aria-current="page"],
.mp-grid a[aria-current="page"]{color:var(--gc-violet-ink)}
.mp-trio a[aria-current="page"],
.mp-grid a[aria-current="page"]{box-shadow:inset 0 0 0 1px rgba(var(--gc-violet-rgb),.45)}
.mp-row[aria-current="page"]{box-shadow:inset 0 0 0 1px rgba(var(--gc-violet-rgb),.35)}

/* ورودِ پلکانی، هم‌جهت با پرده: ردیف‌ها از **بالا** می‌آیند پایین. با لنگرِ
   بالا، حرکتِ رو به بالا خلافِ جهتِ پرده می‌شد و لرزان به‌نظر می‌رسید. */
.mpanel>*{opacity:0;transform:translateY(-9px);
  transition:opacity .26s var(--ease-ui),transform .3s var(--ease-ui)}
.mnav-on .mpanel>*{opacity:1;transform:none}
.mnav-on .mpanel>*:nth-child(1){transition-delay:.06s}
.mnav-on .mpanel>*:nth-child(2){transition-delay:.09s}
.mnav-on .mpanel>*:nth-child(3){transition-delay:.12s}
.mnav-on .mpanel>*:nth-child(4){transition-delay:.15s}
.mnav-on .mpanel>*:nth-child(5){transition-delay:.18s}
.mnav-on .mpanel>*:nth-child(6){transition-delay:.2s}
.mnav-on .mpanel>*:nth-child(7){transition-delay:.22s}
.mnav-on .mpanel>*:nth-child(8){transition-delay:.24s}
.mnav-on .mpanel>*:nth-child(9){transition-delay:.26s}
.mnav-on .mpanel>*:nth-child(10){transition-delay:.28s}

.mnav-scrim{display:none;position:fixed;inset:0;z-index:40;background:rgba(4,4,6,.6);
  backdrop-filter:blur(2px)}

/* 🔴 قفلِ اسکرول. مالک: «وقتی منو بازه، صفحه شروع به حرکت کردن نکنه».
   فقط `overflow:hidden` روی html کافی نیست ، سافاریِ موبایل با لمس بازش
   می‌کند. بدنه fixed می‌شود و site.js جای اسکرول را در `top` نگه می‌دارد و
   موقعِ بستن دقیقاً همان‌جا برمی‌گرداند، وگرنه صفحه به بالا می‌پرد.
   ⚠ position:fixed روی body بسترِ چیدمانِ `position:fixed`ِ نوادگان را عوض
     نمی‌کند (فقط transform/filter/contain این کار را می‌کنند)، پس شیتِ
     محاسبه‌گر سرِ جایش می‌ماند. */
html.nav-lock,html.nav-lock body{overflow:hidden}
html.nav-lock body{position:fixed;inset-inline:0;width:100%}
/* 🔴 و بلافاصله هدر هم باید fixed شود. با بدنهٔ fixedِ نشسته روی `top:-Y`،
   هیچ ظرفِ اسکرولی نمی‌ماند و `position:sticky` به جای ایستادنِ بالای پنجره،
   به جای استاتیکِ خودش برمی‌گردد ــ یعنی `-Y` پیکسل **بالای صفحه**. روی
   صفحه‌ای که کاربر پایین رفته، هدر و دکمهٔ بستنِ منو کامل از دید بیرون
   می‌افتادند و منو راهِ بسته‌شدن نداشت. */
html.nav-lock #hdr{position:fixed;top:0;inset-inline:0}

@media (prefers-reduced-motion:reduce){
  .mpanel,.mpanel>*{transition-duration:.01ms!important}
  .mpanel>*{transform:none!important}
  .mp-row.tier::after{animation:none!important}
}

@media (max-width:900px){
  nav.main{display:none}
  .burger{display:grid}
  /* 🔴 «دانلود گاردین» از هدرِ موبایل برداشته شد (دستور مالک، ۲۴ مرداد).
     گاردین برنامهٔ ویندوزی است و کسی که با گوشی آمده نمی‌تواند نصبش کند؛ آن
     دکمه پهن‌ترین چیزِ سطر بود و سطر فقط ۱۴٫۵ پیکسل جا داشت. دانلود از خودِ
     صفحهٔ محصول می‌آید. */
  .hd-act .btn-p{display:none}
  .mnav-scrim:not([hidden]){display:block}
}
/* بالای ۹۰۰ هرگز دیده نشوند، حتی اگر hidden به هر دلیلی برداشته شود */
@media (min-width:901px){ .mpanel,.mnav-scrim{display:none!important} }

@media (max-width:900px){
  .fcols{grid-template-columns:repeat(2,1fr);gap:32px}
  .emblem{width:min(400px,86vw)}
  .otp input{width:46px;height:54px;font-size:20px}
  /* ستونِ «چرا حساب» زیرِ فرم می‌رود، نه کنارش. ترتیبِ سند هم همین است. */
  .auth-grid{grid-template-columns:minmax(0,1fr);max-width:460px}
}
@media (max-width:480px){
  :root{--pad:16px}
  .hd-act .btn{padding:0 13px;font-size:12.5px}
  .otp{gap:7px}
  .otp input{width:40px;height:50px;font-size:18px}
  .btn-row{flex-direction:column}
  .claim{font-size:25px;letter-spacing:.16em;text-indent:.16em}
}

/* ⚠ نوارِ پیشرفتِ ناوبری حذف شد (دستور مالک: «رو مخه»). دلیلِ وجودی‌اش
   «نشانهٔ در جریان بودن» بود، ولی حالا خودِ انیمیشنِ خروجِ صفحه همان نشانه
   است و نوارِ دوم فقط شلوغی بود. */

/* ⚠ اینجا یک تکرارِ دومِ همان بلوکِ ریسپانسیوِ هدر بود، **بعد از** بلوکِ اصلی.
   چون آخر بود برنده می‌شد و `.hd-act .btn-p{padding:0 11px}`ِ آن، قاعدهٔ تازهٔ
   `display:none` را بی‌اثر می‌کرد ، یعنی دکمهٔ دانلود روی موبایل می‌ماند و
   کسی نمی‌فهمید چرا. حذف شد؛ بلوکِ معتبر همان بالایی است. */