/* ══════════════════════════════════════════════════════════════════════════
   site.css — پوستهٔ مشترکِ همهٔ صفحه‌های نمونهٔ توییک‌فا.

   جایگاه: Design/site/site.css . صفحه‌ها در ریشهٔ Design می‌نشینند، پس آدرس‌های
   داخلِ این فایل با ../ شروع می‌شوند و آدرس‌های داخلِ HTML بدونِ آن.

   منبع: بلوک‌های آزموده‌شدهٔ HOMEPAGE_MOCKUP.html، عیناً کپی شده‌اند نه بازنویسی.
   ⚠ صفحهٔ اصلی هنوز CSSِ خودش را دارد. تا وقتی روی این پوسته منتقل نشده، هر تغییرِ
   توکن باید در هر دو جا انجام شود. این عمدی و موقتی است.
   ══════════════════════════════════════════════════════════════════════════ */

/* 🔴 هدر در فایلِ جداست تا index.html هم بتواند تنها همان را بگیرد.
   @import باید بالای همهٔ قاعده‌ها بماند.

   🔴 **عددِ `?v` دستی است و با هر تغییرِ header.css یا footer.css باید یکی بالا برود.**
   دلیلش یک تلهٔ واقعی بود (۲۴ مرداد): nginx روی `/site/` مقدارِ
   `Cache-Control: public, max-age=2592000` می‌دهد و `Asset::url()` فقط به فایل‌هایی
   که در نما با `<link>` می‌آیند `?v=<mtime>` می‌چسباند. این دو با `@import` می‌آیند،
   پس آدرسشان هیچ‌وقت عوض نمی‌شد و مرورگر یک ماه نسخهٔ کهنه را نگه می‌داشت.
   نشانه‌اش گیج‌کننده بود: صفحهٔ اصلی footer.css را با `<link>`ِ نسخه‌دار می‌گیرد و
   **درست** دیده می‌شد، ولی بقیهٔ صفحه‌ها همان فایل را بی‌نسخه از کش می‌خواندند و
   فوترشان قدیمی می‌ماند ، یعنی «روی یک صفحه درست، روی بقیه غلط».
   ⚠ راهِ ریشه‌ای‌ترش (برای بعد): در nginx فقط به درخواستِ بی‌کوئریِ `/site/*.css`
     اعتبارسنجی اجباری بدهیم تا این عدد دیگر لازم نباشد. */
@import url('header.css?v=2');
@import url('footer.css?v=2');

@font-face{font-family:'IRANYekanX';src:url('../phoenix-landing/fonts/IRANYekanX-Regular.ttf') format('truetype');font-weight:400;font-display:swap}
@font-face{font-family:'IRANYekanX';src:url('../phoenix-landing/fonts/IRANYekanX-Medium.ttf') format('truetype');font-weight:500;font-display:swap}
@font-face{font-family:'IRANYekanX';src:url('../phoenix-landing/fonts/IRANYekanX-DemiBold.ttf') format('truetype');font-weight:600;font-display:swap}
@font-face{font-family:'IRANYekanX';src:url('../phoenix-landing/fonts/IRANYekanX-Bold.ttf') format('truetype');font-weight:700;font-display:swap}
@font-face{font-family:'IRANYekanX';src:url('../phoenix-landing/fonts/IRANYekanX-ExtraBold.ttf') format('truetype');font-weight:800;font-display:swap}
@font-face{font-family:'Poppins';src:url('../phoenix-landing/fonts/Poppins-Regular.ttf') format('truetype');font-weight:400;font-display:swap}
@font-face{font-family:'Poppins';src:url('../phoenix-landing/fonts/Poppins-SemiBold.ttf') format('truetype');font-weight:600;font-display:swap}
@font-face{font-family:'Poppins';src:url('../phoenix-landing/fonts/Poppins-Bold.ttf') format('truetype');font-weight:700;font-display:swap}

/* ═══ رقمِ لاتین ═══
   🔴 فایلِ IRANYekanX که سرو می‌کنیم **هیچ رقمِ لاتینی ندارد**. گلیفِ `four` عیناً
   همان `uni06F4` است و هر چهار حالتِ salt/ss01/ss02/ss03 هم فارسی‌اند (با
   fontTools از خودِ فایل خوانده شد، و در مرورگر هم پیکسل‌به‌پیکسل: «7500» و
   «۷۵۰۰» یک تصویرِ کاملا یکسان می‌دهند). یعنی تا امروز «RTX 5090» روی صفحه
   «RTX ۵۰۹۰» دیده می‌شد ، ایرادی که مالک گرفت.

   ⇒ فقط بازهٔ رقمِ اسکی زیرِ **همان نامِ خانوادگی** از پاپینز گرفته می‌شود. بقیهٔ
     کاراکترها دست نمی‌خورند چون `unicode-range` فقط همین ده کاراکتر است.

   🔴 پیش‌شرطش انجام شده و بدونِ آن این قاعده خراب‌کار است: محتوای بلاگ ۲٬۹۴۰ رقمِ
   اسکی داشت که **وسطِ جملهٔ فارسی** بودند («برابر با 30 و پردازنده») و فقط چون
   فونت فارسی‌شان می‌کشید درست دیده می‌شدند. با `php artisan blog:digits --apply`
   آن‌ها به رقمِ فارسی تبدیل شدند. حالا هر رقمِ اسکیِ باقی‌مانده واقعا لاتین است.
   ⚠ اگر روزی محتوایی وارد شد که این تبدیل رویش نخورده، همان دستور را دوباره بزن.

   ⚠ پاپینز فقط سه وزن دارد؛ ۵۰۰ به Regular و ۸۰۰ به Bold نگاشت شده، وگرنه در آن
     دو وزن رقم دوباره از ایران‌یکان (فارسی) می‌آمد. تطبیقِ وزن **بعد از** فیلترِ
     unicode-range انجام می‌شود، پس نبودِ وزن یعنی برگشتِ بی‌صدا به شکلِ فارسی. */
@font-face{font-family:'IRANYekanX';src:url('../phoenix-landing/fonts/Poppins-Regular.ttf') format('truetype');font-weight:400;unicode-range:U+0030-0039;font-display:swap}
@font-face{font-family:'IRANYekanX';src:url('../phoenix-landing/fonts/Poppins-Regular.ttf') format('truetype');font-weight:500;unicode-range:U+0030-0039;font-display:swap}
@font-face{font-family:'IRANYekanX';src:url('../phoenix-landing/fonts/Poppins-SemiBold.ttf') format('truetype');font-weight:600;unicode-range:U+0030-0039;font-display:swap}
@font-face{font-family:'IRANYekanX';src:url('../phoenix-landing/fonts/Poppins-Bold.ttf') format('truetype');font-weight:700;unicode-range:U+0030-0039;font-display:swap}
@font-face{font-family:'IRANYekanX';src:url('../phoenix-landing/fonts/Poppins-Bold.ttf') format('truetype');font-weight:800;unicode-range:U+0030-0039;font-display:swap}

/* ═══ توکن‌ها ═══ */
:root{
  --gc-base:#08080a;--gc-surface:#0d0b13;
  --gc-violet:#6734ff;--gc-violet-rgb:103,52,255;--gc-violet-ink:#b79aff;
  --gc-gold:#fedb29;--gc-gold-rgb:254,219,41;--gc-gold-dim:rgba(254,219,41,.12);
  --gc-cyan:#6fd0ff;--gc-cyan-rgb:111,208,255;
  --gc-success:#1fbf9c;--gc-success-rgb:31,191,156;--gc-success-ink:#3fd6b4;
  --gc-danger:#e5484d;--gc-danger-rgb:229,72,77;--gc-danger-ink:#ff6369;
  --gc-tg:#2aabee;--gc-tg-rgb:42,171,238;
  --gc-elevated:#1b1b21;
  --gc-tint-0:rgba(255,255,255,.03);--gc-tint-1:rgba(255,255,255,.06);
  --gc-tint-2:rgba(255,255,255,.12);--gc-tint-3:rgba(255,255,255,.22);
  --gc-violet-ink3:#a98aff;--gc-violet-dim:rgba(103,52,255,.16);
  --gc-warning:#e08a00;--gc-warning-dim:rgba(224,138,0,.14);
  --gc-prem-1:#1c1526;--gc-prem-2:#14101d;
  --gc-text:#ededef;--gc-text-mid:#a7a7b0;--gc-text-low:#7a7a85;--gc-text-low2:#8b8b96;
  --gc-hairline:rgba(255,255,255,.08);--gc-hairline-strong:rgba(255,255,255,.16);
  --font-persian:'IRANYekanX',system-ui,sans-serif;
  --font-latin:'Poppins','IRANYekanX',sans-serif;
  /* 🔴 عرضِ کلِ سایت. تا قبل ۱۳۲۰ بود و فقط لندینگِ فونیکس گاردین با یک
     override محلی ۱۳۶۰ می‌شد؛ نتیجه‌اش این بود که هدر روی آن یک صفحه عریض‌تر
     از بقیه می‌افتاد. مالک ترجیح داد همه به ۱۳۶۰ برسند نه اینکه گاردین باریک
     شود. ⚠ تنها جای تعریفِ عرض همین‌جاست — دوباره override محلی نساز. */
  --r-sm:11px;--r-md:14px;--max:1360px;--pad:24px;
  --sect:clamp(56px,7vw,88px);
  --ease-ui:cubic-bezier(.2,.7,.2,1);
  --ease-unfold:cubic-bezier(.33,.9,.3,1);
  --ease-sweep:cubic-bezier(.4,0,.3,1);
  /* 🔴 ارتفاعِ واقعی: بلندترین فرزند 40px است، پس باز = 40+16×2+1 = 73 و
     فشرده = 40+10×2+1 = 61. عددِ قبلی ۶۹ بود که با **هیچ‌کدام** نمی‌خواند.
     ۶۱ انتخاب شد چون هر چیزی که به این متغیر بند است (سایدبارِ پنل، فهرستِ
     چسبانِ حقوقی) فقط بعد از اسکرول دیده می‌شود و آنجا هدر فشرده است. */
  --hdr-h:61px;
}

/* ═══ پایه ═══ */
*{box-sizing:border-box}
html{overflow-x:clip;scroll-behavior:smooth}
body{margin:0;background:var(--gc-base);color:var(--gc-text);font-family:var(--font-persian);
     overflow-x:clip;-webkit-font-smoothing:antialiased;font-size:15px;line-height:1.9}
a{color:inherit;text-decoration:none}
/* 🔴 height:auto اجباری است: صفتِ height روی <img> راهنمای ظاهری است و اگر CSS فقط
   width بدهد، ارتفاع از همان صفت می‌آید و تصویر بدشکل می‌شود. */
img{max-width:100%;height:auto}
[id]{scroll-margin-top:88px}
.ltr{direction:ltr;font-family:var(--font-latin);unicode-bidi:isolate}
.wrap{max-width:var(--max);margin-inline:auto;padding-inline:var(--pad)}
/* 🔴 `clip` و نه `hidden`: `overflow:hidden` یک ظرفِ اسکرول می‌سازد و هر
   `position:sticky`ِ داخلِ سکشن را بی‌اثر می‌کند — فهرستِ چسبانِ صفحه‌های حقوقی و
   کارتِ خلاصهٔ مشاوره هر دو داخلِ <section> اند و هیچ‌وقت نمی‌چسبیدند.
   `clip` همان بریدن را می‌دهد بدونِ ساختنِ ظرفِ اسکرول. */
section{position:relative;z-index:1;overflow:clip}
/* 🔴 سکشنی که هاله دارد، فقط **افقی** ببرد.
   مالک: «تو بعضی صفحات سایت دچار بریدگی شده، نمونش پنل کاربری و صفحه مشاوره».
   جارو زدم و «بعضی» نبود ، **هر ۱۶ صفحه‌ای که هاله دارد** از بالا بریده می‌شد،
   ۳۲ تا ۲۰۹ پیکسل. الگو همه‌جا یکی است: هاله با `top:-N%` عمدا از بالای سکشن
   می‌آید («نور از بالا») ولی `overflow:clip` وسطِ هستهٔ روشنش می‌بُرد و یک خطِ
   صافِ افقی می‌ساخت.
   ⚠ چرا اندازه‌ی هاله را کوچک نکردم: با `closest-side` گرادیان دقیقا سرِ لبهٔ
     خودش صفر می‌شود، پس هر برشی **قبل از** لبه، آلفای دیدنی دارد. کوچک‌کردن
     تا جایی که جا شود، خودِ طرح («نور از بالا») را از بین می‌برد.
   ⚠ چرا `overflow:visible` کامل نه: سرریزِ افقی نوارِ اسکرولِ صفحه می‌سازد.
     `clip` روی محور افقی می‌ماند و فقط محورِ عمودی آزاد می‌شود ، این ترکیب
     برخلافِ `hidden/visible` معتبر است و به `auto` تبدیل نمی‌شود.
   ⚠ سنجیده شد روی ۹ صفحه: `overflow-y` واقعا `visible` می‌شود، هیچ نیای دیگری
     دوباره نمی‌بُرد، و اسکرولِ افقی در هر ۹ صفحه صفر ماند (قبل و بعد).
   ⚠ مرورگرِ بدونِ `:has()` همان رفتارِ امروز را می‌گیرد، نه بدتر. */
section:has(> .glow){overflow-x:clip;overflow-y:visible}
.seam{height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.14),transparent)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ═══ نور و حرکتِ محیطی ═══ */
/* 🔴 محتوای سکشن **روی** هاله می‌نشیند، نه هاله روی محتوا.
   باگی که مالک دید و ریشه‌اش را هم خودش گفت: «هاله داره روی کامپوننت‌ها نمایش داده
   می‌شه… حین انیمیشن زیر باکس محاسبه‌گره و بعد از پایان انیمیشن یهو میاد روی باکس».

   چرا: در ترتیبِ نقاشیِ CSS، عنصرِ **جای‌گرفته** با `z-index:0` در پلهٔ ششم کشیده
   می‌شود ولی محتوای معمولیِ درون‌جریان در پلهٔ سوم ⇒ هاله همیشه روی متن بود.
   موقعِ ورودِ صفحه، `.rv` روی کارت `transform` دارد و همان زمینهٔ چیدمانِ خودش را
   می‌سازد، پس کارت هم به پلهٔ ششم می‌آید و چون در DOM بعد از هاله است برنده می‌شود.
   لحظه‌ای که ورود تمام می‌شود `transform:none` می‌گیرد، آن زمینه از بین می‌رود و
   هاله **یک‌دفعه** می‌آید رو ، همان «اول کم‌رنگ، بعد یهو پررنگ».
   ⚠ اثبات در مرورگر: `document.elementFromPoint` روی مرکزِ کارتِ محاسبه‌گر خودِ
     `.glow` را برمی‌گرداند، نه کارت را.

   🔴 **راهِ اول `z-index:-1` روی خودِ هاله بود و پس گرفته شد.** روی دو صفحه جواب
   نمی‌داد: `.tfbn-sec` و `.psu-sec` عمداً `z-index:auto` دارند (تا پاپ‌آپِ
   انتخابگر بتواند از سکشن بیرون بزند)، پس هیچ زمینهٔ چیدمانی بالای هاله نبود و
   منفی‌شدن یعنی رفتن زیرِ پس‌زمینهٔ صفحه ، یعنی هاله **ناپدید**.
   ⇒ به‌جایش محتوا بالا آمد. هیچ وابستگی‌ای به زمینهٔ چیدمانِ نیا ندارد و همه‌جا
     یکسان کار می‌کند. سنجیده شد: تنها فرزندانِ مستقیمِ سکشن‌های هاله‌دار در کلِ
     سایت `.wrap` و دو مورد `.compat` و `.hero-mid` اند. */
section > .wrap,
section > .compat,
section > .hero-mid{position:relative;z-index:1}
.glow{position:absolute;border-radius:50%;pointer-events:none;z-index:0;will-change:transform}
.glow.v{background:radial-gradient(closest-side,rgba(var(--gc-violet-rgb),.20),transparent)}
.glow.g{background:radial-gradient(closest-side,rgba(var(--gc-gold-rgb),.09),transparent)}
.glow.c{background:radial-gradient(closest-side,rgba(var(--gc-cyan-rgb),.14),transparent)}
@keyframes driftA{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(26px,16px) scale(1.14)}}
@keyframes driftB{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-22px,-14px) scale(1.1)}}
/* 🔴 دوره‌ها از ۱۱ و ۱۳ به اینها آمدند. ۱۱ و ۱۳ رُند بودند و بدتر از آن، در همان
   بخشی می‌چرخیدند که جرقه‌ها (۲۳.۱ تا ۲۷.۶ ثانیه) می‌روند: بدترین هم‌فازی ۱۸.۳ ثانیه
   می‌شد، درحالی‌که کفِ ثبت‌شدهٔ ما ۱۴۱ ثانیه است. خودِ دو لکه هم هر ۷۱.۵ ثانیه به هم
   می‌رسیدند.
   با ۲۳.۴۱ و ۲۶.۵۳: لکه با لکه ۱۹۹.۱ ثانیه، و کفِ کلِ خانوادهٔ آهسته همان ۱۴۱.۳
   ثانیهٔ خودِ جرقه‌ها می‌ماند، یعنی لکه‌ها دیگر تعیین‌کنندهٔ کف نیستند.
   ⚠ نبضِ کوچکِ خودِ جرقه (--p، ۳ تا ۵.۵ ثانیه) عمداً از این حساب بیرون است: یک
   سوسوی محلیِ چندپیکسلی است، نه حرکتِ بزرگی که چشم دو تایش را با هم ببیند. این
   تصمیم یک بار همین‌جا نوشته می‌شود تا صفحه‌های مختلف دو قاعده نداشته باشند. */
.dA{animation:driftA 23.41s ease-in-out infinite}
.dB{animation:driftB 26.53s ease-in-out infinite}

/* ═══ جرقه‌ها ═══
   🔴 دوره‌ها عمداً غیررُندند و همه در بازهٔ باریکِ ۲۳.۱ تا ۲۷.۶ ثانیه‌اند.
   خلافِ شهود ولی درست: دو حلقه هر T۱×T۲/|T۱−T۲| ثانیه هم‌فاز می‌شوند، پس دوره‌های
   دورتر زودتر هم‌فاز می‌شوند نه دیرتر. کوتاه‌ترین هم‌فازیِ این مجموعه ۱۴۱ ثانیه است.
   تنوعِ سرعت از --dy می‌آید نه از دوره. */
/* همان دلیلِ هاله ، جرقه‌ها هم روی متن کشیده می‌شدند. */
.sparks{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.spark{position:absolute;left:var(--x,50%);top:var(--y,80%);
  width:var(--s,4px);height:var(--s,4px);will-change:transform,opacity;
  animation:sparkRise var(--t,25s) linear var(--d,0s) infinite}
.spark i{display:block;width:100%;height:100%;border-radius:50%;
  background:radial-gradient(closest-side,rgba(var(--sc,var(--gc-violet-rgb)),.95),rgba(var(--sc,var(--gc-violet-rgb)),0) 70%);
  animation:sparkPulse var(--p,4s) ease-in-out infinite}
@keyframes sparkRise{
  0%{transform:translate3d(0,0,0);opacity:0}
  9%,84%{opacity:var(--so,.8)}
  100%{transform:translate3d(var(--dx,0),var(--dy,-320px),0);opacity:0}}
@keyframes sparkPulse{0%,100%{transform:scale(.8)}50%{transform:scale(1.75)}}

/* ═══ ورودِ اسکرول ═══
   ۰.۴ ثانیه و جهت‌دار (اندازه‌گیری‌شده از Overwolf). بدنه از پایین، تیتر و نوار از بالا.
   حالتِ پنهان فقط زیرِ html.rv-on، پس بدونِ JS همه‌چیز دیده می‌شود. */
.rv-on .rv{opacity:0;transform:translateY(18px);
  transition:opacity .4s var(--ease-ui),transform .4s var(--ease-ui)}
.rv-on .rv.dn{transform:translateY(-18px)}
.rv-on .rv.in{opacity:1;transform:none}   /* بعد از .dn تا در تساویِ ویژگی برنده شود */

/* ═══ شکستِ کلمه‌ایِ تیتر ═══
   بیرونی ماسک است و درونی از پایین بالا می‌آید. شکستن فقط سرِ فاصله انجام می‌شود،
   پس نیم‌فاصله داخلِ کلمه می‌ماند و اتصالِ حروف نمی‌شکند.
   🔴 اختیاری است و فقط روی عنصرِ دارای data-words اجرا می‌شود، وگرنه ۲۲ صفحه یک
   رفتارِ مخصوصِ هیرو را بی‌دلیل حمل می‌کردند. */
.rv-on [data-words] .w{display:inline-block;overflow:hidden;vertical-align:bottom}
.rv-on [data-words] .wi{display:inline-block;transform:translateY(115%);
  transition:transform .6s var(--ease-ui)}
.rv-on.go [data-words] .wi{transform:none}

/* ═══ کنترل‌ها ═══ */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;cursor:pointer;
  font-family:inherit;font-size:14.5px;font-weight:700;height:46px;padding:0 24px;
  border-radius:var(--r-sm);transition:transform .16s ease,background .2s ease,color .2s ease;
  white-space:nowrap;text-align:center}
.btn:active{transform:scale(.97)}
.btn:focus-visible{outline:2px solid var(--gc-violet-ink);outline-offset:3px}
.btn[disabled],.btn[aria-disabled="true"]{opacity:.45;pointer-events:none}
.btn-p{background:var(--gc-violet);color:#fff}
.btn-p:hover{background:#7442ff}
.btn-g{background:transparent;color:var(--gc-text);box-shadow:inset 0 0 0 1px var(--gc-hairline-strong)}
.btn-g:hover{background:rgba(255,255,255,.06)}
.btn-gold{background:var(--gc-gold);color:#08080a}
.btn-tg{background:var(--gc-tg);color:#fff}
.btn-tg:hover{background:#3db7f5}
.btn-cyan{background:rgba(var(--gc-cyan-rgb),.14);color:var(--gc-cyan);
  box-shadow:inset 0 0 0 1px rgba(var(--gc-cyan-rgb),.28)}
.btn-cyan:hover{background:rgba(var(--gc-cyan-rgb),.22)}
.btn-green{background:rgba(var(--gc-success-rgb),.14);color:var(--gc-success-ink);
  box-shadow:inset 0 0 0 1px rgba(var(--gc-success-rgb),.28)}
.btn-green:hover{background:rgba(var(--gc-success-rgb),.22)}
.btn-danger{background:rgba(var(--gc-danger-rgb),.13);color:var(--gc-danger-ink);
  box-shadow:inset 0 0 0 1px rgba(var(--gc-danger-rgb),.26)}
.btn-danger:hover{background:rgba(var(--gc-danger-rgb),.2)}
.btn-sm{height:40px;padding:0 18px;font-size:13.5px}
.btn-block{width:100%}

.kicker{display:inline-block;font-size:12.5px;font-weight:700;padding:5px 14px;
  background:rgba(var(--gc-violet-rgb),.16);color:var(--gc-violet-ink);
  clip-path:polygon(8px 0,100% 0,calc(100% - 8px) 100%,0 100%)}

/* چیپِ وضعیت — رنگ از --cc می‌آید تا یک قاعده همهٔ حالت‌ها را بپوشاند */
.chip{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;font-weight:700;
  padding:5px 12px;border-radius:999px;
  background:rgba(var(--cc,var(--gc-success-rgb)),.13);color:rgb(var(--cc,var(--gc-success-rgb)));
  box-shadow:inset 0 0 0 1px rgba(var(--cc,var(--gc-success-rgb)),.26)}
.chip i{width:7px;height:7px;border-radius:50%;background:currentColor;flex:none}
.chip.ok{--cc:var(--gc-success-rgb)}
.chip.warn{--cc:224,138,0}
.chip.bad{--cc:var(--gc-danger-rgb)}
.chip.tg{--cc:var(--gc-tg-rgb)}
.chip.mute{--cc:139,139,150}

/* ═══ تیترها ═══ */
.rvh{font-size:clamp(26px,3.1vw,42px);font-weight:800;line-height:1.4;margin:0;text-align:center}
.h-lead{font-size:15.5px;line-height:1.9;color:var(--gc-text-mid);text-align:center;margin:12px auto 0;max-width:60ch}
.page-head{padding-block:clamp(48px,6vw,76px) clamp(28px,3vw,40px);text-align:center}

/* ═══ فرم‌ها ═══ */
.field{display:block;margin-top:18px}
.field > .lab{display:block;font-size:13px;font-weight:700;color:var(--gc-text-mid);margin-bottom:8px}
.inp{width:100%;height:50px;padding:0 16px;border:0;border-radius:var(--r-sm);
  background:var(--gc-tint-0);color:var(--gc-text);font-family:inherit;font-size:15px;
  box-shadow:inset 0 0 0 1px var(--gc-hairline);
  transition:box-shadow .2s var(--ease-ui),background .2s var(--ease-ui)}
.inp::placeholder{color:var(--gc-text-low)}
.inp:hover{background:var(--gc-tint-1)}
.inp:focus{outline:0;background:var(--gc-tint-1);box-shadow:inset 0 0 0 1.5px var(--gc-violet-ink)}
.inp.num{font-family:var(--font-latin);direction:ltr;text-align:left;letter-spacing:.06em}
textarea.inp{height:auto;min-height:130px;padding:14px 16px;line-height:1.9;resize:vertical}
.hint{margin-top:8px;font-size:12.5px;color:var(--gc-text-low);line-height:1.8}
/* لینکِ داخلِ متن باید دیده شود، وگرنه «قوانین» فقط یک کلمه رنگی است */
.ul{color:var(--gc-text-mid);text-decoration:underline;text-underline-offset:3px;
  text-decoration-color:var(--gc-hairline-strong)}
.ul:hover{color:var(--gc-text);text-decoration-color:var(--gc-violet-ink)}
.err{margin-top:8px;font-size:12.5px;color:var(--gc-danger-ink);line-height:1.8;min-height:1.8em}
.form-card{max-width:440px;margin-inline:auto;background:var(--gc-surface);border-radius:var(--r-md);
  padding:clamp(24px,3vw,36px);box-shadow:inset 0 0 0 1px var(--gc-hairline);position:relative;z-index:1}

/* خانه‌های کدِ پیامکی — رقمِ لاتین چون داده است، در Poppins */
.otp{display:flex;gap:10px;direction:ltr;justify-content:center;margin-top:6px}
.otp input{width:52px;height:60px;text-align:center;font-family:var(--font-latin);
  font-size:22px;font-weight:700;border:0;border-radius:var(--r-sm);
  background:var(--gc-tint-0);color:var(--gc-text);box-shadow:inset 0 0 0 1px var(--gc-hairline)}
.otp input:focus{outline:0;background:var(--gc-tint-1);box-shadow:inset 0 0 0 1.5px var(--gc-violet-ink)}
/* کدِ غلط باید دیده شود، نه فقط خوانده شود */
@keyframes nudge{0%,100%{transform:translateX(0)}20%{transform:translateX(-6px)}
  40%{transform:translateX(6px)}60%{transform:translateX(-4px)}80%{transform:translateX(4px)}}
.otp.bad{animation:nudge .34s ease}
.otp.bad input{box-shadow:inset 0 0 0 1.5px rgba(var(--gc-danger-rgb),.6)}

/* ═══ صفحه‌های حساب — ورود، ثبت‌نام، رمز ═══ */
/* کارتِ فرم تنها وسطِ یک صفحهٔ پهن گم می‌شود. ستونِ دوم همان‌جا می‌گوید حساب به چه دردی می‌خورد. */
.auth-grid{display:grid;grid-template-columns:440px minmax(0,1fr);
  gap:clamp(28px,4vw,64px);align-items:start;max-width:980px;margin-inline:auto}
.auth-side{padding-top:6px}
.side-h{margin:0 0 6px;font-size:16px;font-weight:700}
.side-item{display:flex;gap:14px;padding-block:15px;border-top:1px solid var(--gc-hairline)}
.side-item:first-of-type{border-top:0}
.side-ic{width:38px;height:38px;border-radius:10px;flex:none;display:grid;place-items:center;
  background:rgba(var(--ac,var(--gc-violet-rgb)),.14);color:var(--ai,var(--gc-violet-ink))}
.side-ic svg{width:19px;height:19px}
.side-item h4{margin:0 0 2px;font-size:14.5px;font-weight:700}
.side-item p{margin:0;font-size:13.5px;color:var(--gc-text-low2);line-height:1.85}

/* گام‌های ویزارد. [hidden] صریح است چون هر قاعده‌ای که display بدهد آن را می‌بازاند. */
.wz-step[hidden]{display:none!important}
.wz-step{animation:wzIn .32s var(--ease-ui) both}
@keyframes wzIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.wz-h{margin:0;font-size:19px;font-weight:700;line-height:1.6}
.wz-sub{margin:6px 0 0;font-size:13.5px;color:var(--gc-text-low2);line-height:1.85}
.wz-links{display:flex;flex-wrap:wrap;gap:6px 20px;margin-top:18px;justify-content:center}

/* شماره‌ای که کاربر داد، با راهِ برگشت کنارش */
.who{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:14px;
  padding:9px 14px;border-radius:var(--r-sm);background:var(--gc-tint-0);
  box-shadow:inset 0 0 0 1px var(--gc-hairline)}
.who .n{font-family:var(--font-latin);direction:ltr;unicode-bidi:isolate;font-size:14px;font-weight:600}

.linkish{background:0;border:0;padding:0;font:inherit;font-size:13.5px;font-weight:700;
  color:var(--gc-violet-ink);cursor:pointer}
.linkish:hover{color:#cdb6ff}
.linkish:focus-visible{outline:2px solid var(--gc-violet-ink);outline-offset:3px;border-radius:4px}
.linkish.mute{color:var(--gc-text-low2);font-weight:500}
.linkish.mute:hover{color:var(--gc-text)}
.resend{margin-top:16px;text-align:center;font-size:13px;color:var(--gc-text-low)}

/* چشمکِ نمایشِ رمز */
.pw{position:relative}
.pw .inp{padding-inline-end:48px}
.pw-eye{position:absolute;inset-inline-end:6px;top:50%;transform:translateY(-50%);
  width:38px;height:38px;border:0;background:transparent;color:var(--gc-text-low);
  cursor:pointer;border-radius:8px;display:grid;place-items:center}
.pw-eye svg{width:19px;height:19px}
.pw-eye:hover{color:var(--gc-text);background:var(--gc-tint-1)}
.pw-eye.on{color:var(--gc-violet-ink)}
.pw-eye:focus-visible{outline:2px solid var(--gc-violet-ink);outline-offset:2px}
.pw-bar{display:flex;gap:6px;margin-top:10px}
.pw-bar i{height:4px;flex:1;border-radius:999px;background:var(--gc-tint-1);transition:background .22s}
.pw-bar.s1 i:nth-child(1){background:var(--gc-danger)}
.pw-bar.s2 i:nth-child(-n+2){background:var(--gc-warning)}
.pw-bar.s3 i{background:var(--gc-success)}

/* تیکِ اختیاری — رضایتِ پیامکِ تبلیغاتی باید خاموش شروع شود */
.check{display:flex;align-items:flex-start;gap:11px;cursor:pointer;font-size:13.5px;
  color:var(--gc-text-mid);line-height:1.8;margin-top:16px}
.check input{position:absolute;opacity:0;width:0;height:0}
.check .box{width:20px;height:20px;border-radius:6px;flex:none;margin-top:4px;
  background:var(--gc-tint-0);box-shadow:inset 0 0 0 1px var(--gc-hairline-strong);
  display:grid;place-items:center;transition:background .18s,box-shadow .18s}
.check .box svg{width:13px;height:13px;stroke:#fff;stroke-width:3;opacity:0;transform:scale(.6);
  transition:opacity .16s,transform .16s var(--ease-ui)}
.check input:checked + .box{background:var(--gc-violet);box-shadow:inset 0 0 0 1px var(--gc-violet)}
.check input:checked + .box svg{opacity:1;transform:none}
.check input:focus-visible + .box{outline:2px solid var(--gc-violet-ink);outline-offset:3px}

/* جعبهٔ حرفِ راست — جای گفتنِ چیزی که کاربر باید بداند، نه تبلیغ */
.callout{margin-top:18px;padding:13px 15px;border-radius:var(--r-sm);
  background:rgba(var(--cc,var(--gc-violet-rgb)),.09);
  box-shadow:inset 0 0 0 1px rgba(var(--cc,var(--gc-violet-rgb)),.22);
  font-size:13px;color:var(--gc-text-mid);line-height:1.9}
.callout.warn{--cc:224,138,0}
.callout b{color:var(--gc-text)}

.btn-row{display:flex;gap:10px;margin-top:20px}
.btn-row .btn{flex:1;min-width:0}

/* تیکِ بزرگِ پایانِ کار */
@keyframes pop{from{transform:scale(.7);opacity:0}to{transform:none;opacity:1}}
.done-mark{width:62px;height:62px;border-radius:50%;margin:0 auto 16px;display:grid;place-items:center;
  background:rgba(var(--gc-success-rgb),.14);color:var(--gc-success-ink);
  box-shadow:inset 0 0 0 1px rgba(var(--gc-success-rgb),.3);animation:pop .34s var(--ease-unfold) both}
.done-mark svg{width:28px;height:28px}

/* کدِ اتصالِ تلگرام. text-indent فاصلهٔ اضافی که letter-spacing بعدِ آخرین رقم
   می‌گذارد را جبران می‌کند، وگرنه عدد کمی چپ‌تر از مرکز می‌نشیند. */
.claim{font-family:var(--font-latin);direction:ltr;unicode-bidi:isolate;text-align:center;
  font-size:30px;font-weight:700;letter-spacing:.22em;text-indent:.22em;
  padding:16px 10px;margin-top:14px;border-radius:var(--r-sm);
  background:rgba(var(--gc-tg-rgb),.1);color:var(--gc-text);
  box-shadow:inset 0 0 0 1px rgba(var(--gc-tg-rgb),.28)}

/* ═══ کارت و جدول — پایهٔ پنل ═══ */
.card{background:var(--gc-surface);border-radius:var(--r-md);padding:22px;
  box-shadow:inset 0 0 0 1px var(--gc-hairline);position:relative;overflow:hidden}
.card > h3{margin:0 0 4px;font-size:16px;font-weight:700}
.card .sub{font-size:13.5px;color:var(--gc-text-low2);line-height:1.85}
.rowline{display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding-block:14px;border-top:1px solid var(--gc-hairline)}
.rowline:first-of-type{border-top:0}
.rowline .k{font-size:14px;color:var(--gc-text-mid)}
.rowline .v{font-size:14px;font-weight:700}
.tbl{width:100%;border-collapse:collapse;font-size:14px}
.tbl th{text-align:start;font-size:12.5px;font-weight:700;color:var(--gc-text-low);
  padding:0 12px 12px;white-space:nowrap}
.tbl td{padding:14px 12px;border-top:1px solid var(--gc-hairline);vertical-align:middle}
.tbl tr:hover td{background:var(--gc-tint-0)}
.money{font-family:var(--font-latin);direction:ltr;unicode-bidi:isolate;font-variant-numeric:tabular-nums}
.empty{text-align:center;padding:56px 20px;color:var(--gc-text-low)}
.empty .big{font-size:15px;color:var(--gc-text-mid);margin-bottom:6px}

/* ═══ نانِ سوخاری و پیام ═══ */
/* 🔴 سقفِ عرض: بدونِ آن، پیامِ بلند روی گوشی از هر دو طرف بیرون می‌زد. */
.toast{position:fixed;inset-inline-start:50%;bottom:28px;transform:translateX(50%) translateY(14px);
  z-index:200;background:var(--gc-elevated);color:var(--gc-text);font-size:14px;font-weight:500;
  padding:13px 20px;border-radius:var(--r-sm);box-shadow:0 14px 40px rgba(0,0,0,.55),inset 0 0 0 1px var(--gc-hairline-strong);
  opacity:0;pointer-events:none;transition:opacity .25s var(--ease-ui),transform .25s var(--ease-ui);max-width:min(92vw,420px);box-sizing:border-box}
.toast.on{opacity:1;transform:translateX(50%) translateY(0)}

/* ═══ نوارِ نمونه — یادآوری که این سایتِ واقعی نیست ═══ */
/* ⚠ نوارِ نمونه پایینِ صفحه روی جعبهٔ «نماد اعتماد» می‌افتاد. چون نوار موقتی است
   و روزِ انتشار برداشته می‌شود، فوتر تکان داده نشد؛ فقط خودِ نوار کمی بالاتر رفت. */
.protobar{position:fixed;inset-inline-end:14px;bottom:14px;z-index:180;
  display:flex;align-items:center;gap:10px;font-size:12px;color:var(--gc-text-low2);
  background:rgba(13,11,19,.92);backdrop-filter:blur(8px);padding:8px 14px;border-radius:999px;
  box-shadow:inset 0 0 0 1px var(--gc-hairline-strong)}
.protobar a{color:var(--gc-violet-ink);font-weight:700}
.protobar b{color:var(--gc-warning);font-weight:700}

/* ═══ ریسپانسیو ═══ */
/* ═══ جایگزینِ <select> ═══
   🔴 پنجرهٔ بازشوی selectِ بومی استایل‌پذیر نیست (همان مستطیلِ سفید با هایلایتِ
   آبیِ سیستم). خودِ select می‌ماند ولی دیده نمی‌شود؛ این‌ها روکشش‌اند. */
.dd{position:relative}
.dd-native{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none;
  clip:rect(0 0 0 0);overflow:hidden}
.dd-btn{display:flex;align-items:center;justify-content:space-between;gap:10px;
  width:100%;cursor:pointer;text-align:start;font-family:inherit;font-size:14.5px;
  color:var(--gc-text)}
.dd-btn .chev{flex:none;opacity:.6;transition:transform .26s var(--ease-ui)}
.dd.on .dd-btn .chev{transform:rotate(180deg)}
.dd.on .dd-btn{box-shadow:inset 0 0 0 1.5px var(--gc-violet-ink)}
.dd-v{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.dd-pop{position:absolute;top:calc(100% + 8px);inset-inline:0;z-index:70;
  padding:6px;border-radius:var(--r-md);
  background:var(--gc-surface);box-shadow:inset 0 0 0 1px var(--gc-hairline-strong),
    0 16px 40px rgba(0,0,0,.55);
  opacity:0;transform:translateY(-7px) scale(.98);transform-origin:top center;
  pointer-events:none;
  transition:opacity .18s var(--ease-ui),transform .22s var(--ease-ui)}
.dd.on .dd-pop{opacity:1;transform:none;pointer-events:auto}
.dd-pop button{display:flex;align-items:center;gap:9px;width:100%;border:0;cursor:pointer;
  padding:11px 12px;border-radius:var(--r-sm);background:0;
  font-family:inherit;font-size:13.5px;text-align:start;color:var(--gc-text-mid);
  transition:background .15s ease,color .15s ease}
.dd-pop button:hover{background:var(--gc-tint-1);color:var(--gc-text)}
.dd-pop button:focus-visible{outline:2px solid var(--gc-violet-ink);outline-offset:-2px}
/* گزینهٔ انتخاب‌شده: یک نقطهٔ بنفش، نه تیکِ درشت */
.dd-pop button[aria-selected="true"]{color:var(--gc-text);font-weight:700;
  background:rgba(var(--gc-violet-rgb),.14)}
.dd-pop button::before{content:'';width:6px;height:6px;border-radius:50%;flex:none;
  background:currentColor;opacity:0;transition:opacity .15s ease}
.dd-pop button[aria-selected="true"]::before{opacity:1;color:var(--gc-violet-ink)}
@media (prefers-reduced-motion:reduce){
  .dd-pop{transition-duration:.01ms!important;transform:none!important}
  .dd-btn .chev{transition:none}
}

/* 🔴 قفلِ ترنزیشن حینِ تعویضِ محتوا. وقتی <main> عوض می‌شود، هر عنصری که در
   صفحهٔ تازه مقدارِ اولیه‌اش با مقدارِ محاسبه‌شدهٔ لحظهٔ درج فرق داشته باشد، یک
   ترنزیشنِ بی‌دلیل راه می‌اندازد. یک بار همین باعث شد هر پنج اسلایدِ هیرو
   هم‌زمان نیم‌ثانیه محو شوند و عنوانشان روی هم دیده شود. */
html.tf-swap *,html.tf-swap *::before,html.tf-swap *::after{transition:none!important}
/* 🔴 برگشت به بالای صفحهٔ تازه باید **آنی** باشد. html سراسری scroll-behavior:smooth
   دارد و scrollTo با behavior:'auto' از همان پیروی می‌کند ⇒ بعد از تعویض، صفحهٔ
   جدید از جای اسکرولِ صفحهٔ قبل تا بالا «اسکرول‌کشان» می‌آمد — همان چیزی که مالک
   دید. تعویض همیشه زیر همین قفل انجام می‌شود، پس همین‌جا آنی می‌شود. */
html.tf-swap{scroll-behavior:auto}

/* ⚠ انیمیشنِ ورود و خروجِ صفحه در ناوبریِ بدونِ ریلود، دیگر اینجا نیست:
   نسخهٔ View Transitions سه راند ایرادِ دیداری گرفت (فلیکر و فیدِ عکس) و به
   خواستهٔ مالک با کوریوگرافیِ moveOut/moveIn در site.js جایگزین شد — تکه‌های
   واقعیِ صفحه با transform می‌روند و می‌آیند، هیچ عکسی و هیچ فیدی در کار نیست. */

/* ═══ توقفِ حلقه‌های بیرون از دید ═══ */
.anim-idle,.anim-idle *,.anim-idle::before,.anim-idle *::before,.anim-idle *::after{
  animation-play-state:paused!important}

/* ═══ حرکت‌نخواستن = هیچ حرکتی ═══ */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  html{scroll-behavior:auto}
  .rv-on .rv{opacity:1;transform:none}
  /* 🔴 شکستِ کلمه‌ای حالتِ پنهانش را از transform می‌گیرد و فقط کلاسِ `go` آزادش
     می‌کند. در حالتِ حرکتِ کمتر ترنزیشن خاموش است، پس اگر `go` به هر دلیلی نیاید
     تیتر **برای همیشه نامرئی** می‌ماند. اینجا حالتِ پنهان کلا برداشته می‌شود تا
     چنین حالتی اصلا وجود نداشته باشد. */
  .rv-on [data-words] .wi{transform:none}
  .rv-on [data-words] .w{overflow:visible}
  /* جرقه‌های یخ‌زده = چند نقطهٔ بی‌معنی. کلا حذف، نه فقط توقف. */
  .sparks{display:none}
}

/* ═══ ناوبریِ نمونه (بیرونِ طراحی) ═══
   🔴 دستور مالک: «توضیحاتی که برای من گذاشتی رو از طرح حذف کن». هر کنترل یا
   یادداشتی که مالِ نمونه است و نه مالِ محصول، اینجا می‌نشیند: یک نوارِ جمع‌شوندهٔ
   گوشه، بالای نوارِ «نمونه طراحی»، بیرونِ #main.
   قبلا فقط در panel.css بود و صفحه‌های فروش نداشتندش، برای همین کنترل‌هایشان
   وسطِ خودِ فرم می‌نشست. */
.demobar{position:fixed;inset-inline-end:14px;bottom:58px;z-index:180;width:min(268px,calc(100vw - 28px))}
.demobar .tog{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:700;color:var(--gc-violet-ink);
  background:rgba(13,11,19,.92);backdrop-filter:blur(8px);padding:8px 14px;border-radius:999px;border:0;
  cursor:pointer;font-family:inherit;box-shadow:inset 0 0 0 1px var(--gc-hairline-strong);margin-inline-start:auto}
.demobar .body{display:none;margin-bottom:9px;background:rgba(13,11,19,.96);backdrop-filter:blur(10px);
  border-radius:var(--r-md);padding:14px;box-shadow:inset 0 0 0 1px var(--gc-hairline-strong),0 16px 40px rgba(0,0,0,.5)}
.demobar.on .body{display:block}
.demobar .body h4{margin:0 0 10px;font-size:12px;font-weight:700;color:var(--gc-text-low)}
.demobar .grp{margin-top:12px}
.demobar .grp:first-of-type{margin-top:0}
.demobar .grp > span{display:block;font-size:11.5px;color:var(--gc-text-low);margin-bottom:6px}
.demobar .seg{width:100%;flex-wrap:wrap;overflow:visible}
.demobar .seg button{flex:1;padding:6px 9px;font-size:11.5px}



/* ═══ انتخابگرِ پلنِ شاه‌پَر ═══
   یک کامپوننت برای صفحهٔ پلن‌ها و لندینگ گاردین ، خواستهٔ مالک ۲۴ مرداد:
   ظاهرِ کارتِ صفحهٔ پلن‌ها + سازوکارِ انتخابِ لندینگ، بدونِ دکمه داخلِ کارت.
   🔴 اینجا (site.css) نشست نه در استایلِ درون‌خطیِ آن دو صفحه، چون حالا واقعا
      مشترک است؛ دو کپی یعنی همان واگراییِ قیمت‌ها که تازه بستیمش. */
.pp{max-width:1020px;margin-inline:auto}
.pp-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
/* کارت = دکمهٔ رادیو. `text-align:start` لازم است چون مرورگر دکمه را وسط‌چین می‌کند. */
.pp-card{position:relative;display:flex;flex-direction:column;align-items:stretch;
  text-align:start;background:var(--gc-surface);border:0;cursor:pointer;
  border-radius:var(--r-md);padding:26px 24px 22px;color:inherit;font:inherit;
  box-shadow:inset 0 0 0 1px var(--gc-hairline);
  transition:box-shadow .2s var(--ease-ui),transform .2s var(--ease-ui),filter .2s var(--ease-ui)}
/* 🔴 انتخاب‌نشده کم‌رنگ‌تر است، تا کاربر بفهمد سایت از قبل یکی را انتخاب کرده.
   🔴 با `filter` نه با `opacity` ، و این یک اشتباهِ گرفته‌شده است نه سلیقه:
      کورئوگرافیِ ورودِ سایت خودش صاحبِ opacity این کارت‌هاست
      (`.rv-on .rv.in{opacity:1}`، ویژگیِ ۰-۳-۰) و بر هر
      `.pp-card:not(.on){opacity:…}` (۰-۲-۰) می‌چربد ⇒ کم‌رنگی **هیچ‌وقت**
      اعمال نمی‌شد. در مرورگر سنجیده شد: کارتِ خاموش هم ۱ می‌ماند.
      بالابردنِ ویژگی هم جواب بود ولی جنگِ ویژگی با سیستمِ ورود، تلهٔ فردا است.
   ⚠ روشناییِ ۰.۸۲ و اشباعِ ۰.۷۲: پایین‌تر، قیمتِ کارتِ خاموش ناخوانا می‌شود و
     کارت «غیرفعال» خوانده می‌شود، درحالی‌که کاملا قابلِ انتخاب است. */
.pp-card:not(.on){filter:saturate(.72) brightness(.82)}
.pp-card:hover{transform:translateY(-3px);filter:none;
  box-shadow:inset 0 0 0 1px var(--gc-hairline-strong)}
.pp-card:focus-visible{outline:2px solid var(--gc-violet-ink);outline-offset:3px}
.pp-card.on{filter:none;box-shadow:inset 0 0 0 2px var(--gc-violet)}
/* پلنِ پیشنهادی طلایی است نه بنفش: بنفش رنگِ خودِ برند است و همه‌جای صفحه هست. */
.pp-card.is-best.on{box-shadow:inset 0 0 0 2px var(--gc-gold)}
.pp-card.is-best:not(.on){box-shadow:inset 0 0 0 1.5px rgba(var(--gc-gold-rgb),.34)}
.pp-bdg{position:absolute;top:0;inset-inline-end:20px;transform:translateY(-50%);
  background:var(--gc-gold);color:#08080a;font-size:11.5px;font-weight:700;
  padding:4px 12px;border-radius:999px;white-space:nowrap}
.pp-t{font-size:19px;font-weight:800;line-height:1.5}
.pp-s{margin-top:3px;font-size:13px;color:var(--gc-text-low2);line-height:1.8}
.pp-amt-row{display:flex;align-items:baseline;gap:9px;margin-top:16px;flex-wrap:wrap}
/* رقمِ مبلغ لاتین است تا tabular-nums بگیرد و ستون‌ها هم‌تراز بمانند. */
.pp-amt{font-family:var(--font-latin);font-size:31px;font-weight:700;line-height:1.25;
  direction:ltr;unicode-bidi:isolate;font-variant-numeric:tabular-nums}
.pp-cur{font-size:14px;font-weight:500;color:var(--gc-text-mid)}
.pp-old{font-family:var(--font-latin);direction:ltr;unicode-bidi:isolate;font-size:13.5px;
  color:var(--gc-text-low);text-decoration:line-through;text-decoration-thickness:1px}
.pp-per{margin-top:7px;font-size:12.5px;color:var(--gc-text-low2);min-height:1.7em}
/* جای دکمهٔ قبلیِ «تهیه اشتراک». بدونِ تخفیف هم یک خط می‌گیرد تا سه کارت
   هم‌قد بمانند و ردیفِ پایینشان نلغزد. */
.pp-off{margin-top:18px;align-self:flex-start;font-size:12.5px;font-weight:700;
  padding:5px 12px;border-radius:999px;
  background:var(--gc-tint-0);color:var(--gc-text-low);
  box-shadow:inset 0 0 0 1px var(--gc-hairline)}
.pp-off.has{background:rgba(var(--gc-success-rgb),.13);color:var(--gc-success-ink);
  box-shadow:inset 0 0 0 1px rgba(var(--gc-success-rgb),.3)}
.pp-card.is-best .pp-off.has{background:rgba(var(--gc-gold-rgb),.14);color:var(--gc-gold);
  box-shadow:inset 0 0 0 1px rgba(var(--gc-gold-rgb),.34)}
.pp-go{margin:26px auto 0;display:flex;min-width:220px}
@media (max-width:900px){
  .pp-grid{grid-template-columns:1fr;max-width:460px;margin-inline:auto}
  .pp-card.is-best{order:-1}
}
@media (prefers-reduced-motion:reduce){
  .pp-card:hover{transform:none}
}