/* ==========================================================================
   site.css — gptneow.com
   گسترش دیزاین سیستم پنل به وب. لایهٔ ۱ (primitive) عیناً همان پنل است؛
   لایهٔ ۲ (semantic) برای برند دوم بازنویسی شده؛ لایهٔ ۳ (component) فقط اندازه، شعاع و تایپ.
   قاعدهٔ دائمی: رنگ در کامپوننت همیشه از لایهٔ معنایی.
   ========================================================================== */
@font-face { font-family: 'Peyda'; src: url('fonts/PeydaWebVF.woff2') format('woff2'), url('fonts/PeydaWebVF.woff') format('woff'); font-weight: 100 900; font-display: swap; }

/* لایهٔ ۱ — primitive (کپی از panel.css) */
:root {
  /* brand — همان پالت پنل؛ سایت آن را فقط برای فوکوس و لینک به کار می‌برد */
  --brand-50:#EEF0FF;
  --brand-100:#E0E4FF;
  --brand-200:#C3CAFF;
  --brand-400:#7B89FF;
  --brand-500:#5B6CFF;
  --brand-600:#4757E6;
  --brand-700:#3542B8;

  /* neutrals — خنک، هرگز مشکی خالص */
  --gray-0:#FFFFFF;
  --gray-50:#F6F7FB;
  --gray-100:#F1F3F8;
  --gray-200:#E4E7EF;
  --gray-300:#CFD4E0;
  --gray-400:#A0A6B8;
  --gray-500:#6C7385;
  --gray-700:#3B4152;
  --gray-900:#1E2235;

  /* canvas — میز خاکستری‌آبی که فریم سفید رویش شناور است */
  --canvas-a:#F2F4F8;
  --canvas-b:#DEE3EC;

  /* status — مستقل از برند */
  --green-500:#17B26A; --green-50:#E7F8F0; --green-700:#0F7A49;
  --red-500:#F04438;   --red-50:#FDECEA;   --red-700:#B42318;
  --coral-500:#FF7A59; --coral-50:#FFE9E3; --coral-700:#B54724;
  --amber-500:#F5A524; --amber-50:#FFF4E0; --amber-700:#8A5A06;

  --navy-900:#1E1B3A;

  /* فاصله — شبکهٔ ۸ */
  --s-1: 4px;   /* فقط درون کنترل‌ها */
  --s-2: 8px;
  --s-3: 12px;  /* فقط درون کنترل‌ها */
  --s-4: 16px;
  --s-6: 24px;
  --s-8: 32px;
  --s-10: 40px;
  --s-12: 48px;
  --s-16: 64px;

  /* شعاع — پنج مقدار مجاز Soft UI. ۶ و ۸ و ۲۰ ممنوع‌اند */
  --r-frame: 32px;
  --r-card: 24px;
  --r-tile: 16px;
  --r-control: 12px;
  --r-pill: 999px;
  --r-mini: var(--r-control);

  /* تایپ — مقیاس Soft UI؛ فارسی یک وزن بالاتر و بدون tracking */
  --font-fa: 'Peyda', 'Vazirmatn', 'Tahoma', system-ui, sans-serif;
  --fs-display: 32px;
  --fs-h1: 28px;
  --fs-h2: 24px;
  --fs-h3: 18px;
  --fs-body: 15px;
  --fs-sm: 13px;
  --fs-mono: 14px;
  --lh-tight: 1.3;
  --lh-body: 1.8;
  --w-regular: 400;
  --w-medium: 500;
  --w-semi: 600;
  --w-bold: 700;
  --w-fa-strong: 800;

  --dur-fast: 160ms;
  --dur: 240ms;
  --ease: cubic-bezier(.2, .8, .2, 1);
  --ease-soft: cubic-bezier(.32, .72, 0, 1);
}

/* لایهٔ ۱ — افزودهٔ وب: مقیاس تایپ بازتر. پنل ۱۵ بدنه دارد؛ سایت خوانده می‌شود، نه اسکن. */
:root {
  --ws-display: clamp(36px, 5.2vw, 60px);
  --ws-h1: clamp(30px, 3.6vw, 44px);
  --ws-h2: clamp(24px, 2.6vw, 32px);
  --ws-h3: 20px;
  --ws-lead: clamp(17px, 1.5vw, 20px);
  --ws-body: 17px;
  --ws-sm: 14px;
  --ws-price: clamp(28px, 2.6vw, 34px);
  --ws-lh: 1.85;
  --ws-max: 1200px;
  --ws-gutter: clamp(20px, 4vw, 48px);
  --ws-section: clamp(64px, 9vw, 120px);
}

/* لایهٔ ۲ — semantic، روشن. جهت: «جوهر و کاغذ» — CTA جوهری تقریباً سیاه، تنها رنگ اشباع = سبز تحویل/گارانتی */
:root, [data-theme='light'] {
  --bg: #F4F5F7;
  --bg-sunken: var(--gray-100);
  --surface: var(--gray-0);
  --surface-quiet: var(--gray-50);
  --text: var(--gray-900);
  --text-muted: var(--gray-500);
  --text-faint: var(--gray-400);
  --line: var(--gray-200);
  --line-strong: var(--gray-300);
  --ink: var(--gray-900);
  --ink-hover: #000000;
  --on-ink: #FFFFFF;
  --proof: var(--green-500);
  --proof-quiet: var(--green-50);
  --proof-text: var(--green-700);
  --danger: var(--red-500);
  --danger-quiet: var(--red-50);
  --danger-text: var(--red-700);
  --link: var(--gray-900);
  --focus-ring: 0 0 0 3px var(--brand-100), 0 0 0 4px var(--brand-500);
  --overlay: rgb(30 34 53 / .4);
  --sh-1: 0 1px 2px rgb(30 34 53 / .04), 0 12px 32px -12px rgb(30 34 53 / .10);
  --sh-2: 0 4px 12px rgb(30 34 53 / .05), 0 28px 64px -24px rgb(30 34 53 / .22);
  color-scheme: light;
}
[data-theme='dark'] {
  --bg: #0E1018;
  --bg-sunken: #1A1D2A;
  --surface: #151823;
  --surface-quiet: #1A1D2A;
  --text: #F2F3F8;
  --text-muted: #9AA0B5;
  --text-faint: #6C7385;
  --line: rgb(255 255 255 / .08);
  --line-strong: rgb(255 255 255 / .18);
  --ink: #F2F3F8;
  --ink-hover: #FFFFFF;
  --on-ink: #0E1018;
  --proof: var(--green-500);
  --proof-quiet: rgb(23 178 106 / .16);
  --proof-text: #7FE3B4;
  --danger: var(--red-500);
  --danger-quiet: rgb(240 68 56 / .16);
  --danger-text: #FFB4AC;
  --link: #F2F3F8;
  --focus-ring: 0 0 0 3px rgb(123 137 255 / .35), 0 0 0 4px var(--brand-400);
  --overlay: rgb(8 9 20 / .66);
  --sh-1: 0 1px 2px rgb(0 0 0 / .3), 0 12px 32px -12px rgb(0 0 0 / .5);
  --sh-2: 0 4px 12px rgb(0 0 0 / .35), 0 28px 64px -24px rgb(0 0 0 / .7);
  color-scheme: dark;
}

/* لایهٔ ۳ — component: اندازه، شعاع، تایپ */
:root {
  --btn-h: 52px; --btn-h-sm: 40px; --btn-radius: var(--r-control);
  --field-h: 52px; --card-radius: var(--r-card); --card-pad: clamp(24px, 3vw, 32px);
}

/* پایه */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--font-fa); font-size: var(--ws-body); line-height: var(--ws-lh); }
h1, h2, h3 { margin: 0; line-height: var(--lh-tight); text-wrap: balance; font-weight: var(--w-bold); }
p { margin: 0; text-wrap: pretty; }
a { color: var(--link); text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 4px; }
a:hover { text-decoration-color: currentColor; }
:where(a, button, input, summary, [tabindex]):focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--r-control); }
.num { font-variant-numeric: tabular-nums; direction: ltr; unicode-bidi: isolate; }
.fa { unicode-bidi: isolate; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.skip { position: absolute; top: -60px; inset-inline-start: 16px; z-index: 100; background: var(--surface); padding: 8px 16px; border-radius: var(--r-control); box-shadow: var(--sh-2); }
.skip:focus { top: 16px; }

.wrap { max-width: var(--ws-max); margin-inline: auto; padding-inline: var(--ws-gutter); }
.section { padding-block: var(--ws-section); }
.section--tight { padding-block: calc(var(--ws-section) * .6); }
.eyebrow { font-size: var(--ws-sm); font-weight: var(--w-semi); color: var(--text-muted); }
.lead { font-size: var(--ws-lead); color: var(--text-muted); line-height: 1.8; max-width: 52ch; }
.h-display { font-size: var(--ws-display); font-weight: var(--w-fa-strong); line-height: 1.2; }
.h1 { font-size: var(--ws-h1); }
.h2 { font-size: var(--ws-h2); }
.h3 { font-size: var(--ws-h3); font-weight: var(--w-semi); }
.muted { color: var(--text-muted); }
.stack { display: flex; flex-direction: column; gap: var(--s-4); }
.row { display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap; }

/* دکمه */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2); min-height: var(--btn-h); padding: 0 var(--s-6); border: 1.5px solid transparent; border-radius: var(--btn-radius); font: var(--w-semi) var(--ws-body) / 1 var(--font-fa); text-decoration: none; cursor: pointer; transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease), transform var(--dur) var(--ease); white-space: nowrap; }
.btn:active { transform: scale(.98); }
.btn--ink { background: var(--ink); color: var(--on-ink); }
.btn--ink:hover { background: var(--ink-hover); }
.btn--line { background: var(--surface); color: var(--text); border-color: var(--line-strong); }
.btn--line:hover { border-color: var(--ink); }
.btn--ghost { background: transparent; color: var(--text); }
.btn--ghost:hover { background: var(--bg-sunken); }
.btn--sm { min-height: var(--btn-h-sm); padding: 0 var(--s-4); font-size: var(--ws-sm); }
.btn--block { width: 100%; }
.btn[disabled] { background: var(--bg-sunken); color: var(--text-faint); border-color: transparent; cursor: not-allowed; }

/* نشان اثبات — تنها رنگ اشباع سایت؛ همیشه با متن */
.proof { display: inline-flex; align-items: center; gap: 0; font-size: var(--ws-sm); font-weight: var(--w-semi); color: var(--proof-text); }
.proof::before { content: ''; width: 8px; height: 8px; border-radius: var(--r-pill); background: var(--proof); flex: none; margin-inline-end: 8px; }
.chip { display: inline-flex; align-items: center; min-height: 28px; padding: 0 12px; border-radius: var(--r-pill); background: var(--bg-sunken); font-size: var(--ws-sm); font-weight: var(--w-semi); color: var(--text-muted); }
.chip--proof { background: var(--proof-quiet); color: var(--proof-text); }

/* هدر */
.site-head { position: sticky; top: 0; z-index: 30; background: color-mix(in oklab, var(--bg) 88%, transparent); backdrop-filter: blur(12px); border-bottom: 1px solid var(--line); }
.site-head__in { display: flex; align-items: center; gap: var(--s-6); min-height: 72px; }
.logo { display: inline-flex; align-items: baseline; gap: 2px; font-weight: var(--w-fa-strong); font-size: 22px; letter-spacing: -.01em; direction: ltr; text-decoration: none; color: var(--text); }
.logo b { color: var(--proof); font-weight: inherit; }
.nav { display: flex; gap: var(--s-1); margin-inline-start: var(--s-4); align-self: stretch; }
.nav__item { display: flex; align-items: center; }
.nav__btn { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 14px; border: 0; border-radius: var(--r-control); background: transparent; font: var(--w-medium) 15px var(--font-fa); color: var(--text-muted); cursor: pointer; }
.nav__btn svg { width: 12px; height: 12px; transition: transform var(--dur) var(--ease); }
.nav__btn:hover, .nav__btn[aria-expanded='true'] { color: var(--text); background: var(--bg-sunken); }
.nav__btn[aria-current='true'] { color: var(--text); font-weight: var(--w-semi); }
.nav__btn[aria-expanded='true'] svg { transform: rotate(180deg); }
/* مگامنو — کارت شناور لبه‌گرد زیر هدر، هم‌عرض محتوا */
.mega { position: absolute; inset-inline: 0; top: 100%; padding: var(--s-2) var(--ws-gutter) 0; }
.mega__in { max-width: calc(var(--ws-max) - 2 * var(--ws-gutter)); margin-inline: auto; padding: var(--s-6); background: var(--surface); border-radius: var(--r-card); box-shadow: var(--sh-2); display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--s-6); }
.mega__col { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.mega__h { font-size: 12.5px; font-weight: var(--w-semi); color: var(--text-muted); padding: 0 12px var(--s-2); }
.mega__link, .mega__plan { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border-radius: var(--r-control); text-decoration: none; color: var(--text); }
.mega__link:hover, .mega__plan:hover { background: var(--bg-sunken); }
.mega__link b { font-weight: var(--w-semi); font-size: 15px; }
.mega__link span { font-size: 13px; color: var(--text-muted); line-height: 1.6; }
.mega__plan { flex-direction: row; align-items: baseline; justify-content: space-between; gap: var(--s-4); }
.mega__plan-n { font-weight: var(--w-semi); direction: ltr; }
.mega__plan-p { font-size: 13.5px; color: var(--text-muted); white-space: nowrap; }
.mega__plan-p em { font-style: normal; font-size: 12px; color: var(--text-faint); margin-inline-start: 4px; }
.mega__card { gap: var(--s-2); padding: var(--s-6); border-radius: var(--r-tile); background: var(--bg-sunken); align-items: flex-start; }
.mega__card b { font-size: var(--ws-h3); }
.mega__card p { font-size: 13.5px; color: var(--text-muted); line-height: 1.7; }
.mega__card .btn { margin-top: var(--s-2); }
.mega__biz { font-size: 13.5px; margin-top: var(--s-1); }
/* حساب کاربر واردشده — منوی کشویی لبه‌گرد، هم‌زبان مگامنو */
.acct { position: relative; }
.acct__btn { display: inline-flex; align-items: center; gap: 10px; min-height: 40px; padding: 0 6px 0 14px; border: 0; border-radius: var(--r-control); background: var(--surface); box-shadow: var(--sh-1); font: var(--w-semi) 14px var(--font-fa); color: var(--text); cursor: pointer; }
.acct__btn:hover, .acct__btn[aria-expanded='true'] { box-shadow: var(--sh-2); }
.acct__av { width: 30px; height: 30px; border-radius: var(--r-pill); background: var(--ink); color: var(--on-ink); display: grid; place-items: center; font-size: 13px; font-weight: var(--w-bold); }
.acct__menu { position: absolute; top: calc(100% + 8px); inset-inline-end: 0; width: 300px; padding: var(--s-2); background: var(--surface); border-radius: var(--r-card); box-shadow: var(--sh-2); z-index: 40; display: flex; flex-direction: column; gap: 2px; }
.acct__head { display: flex; flex-direction: column; gap: var(--s-1); padding: var(--s-3) var(--s-3) var(--s-4); }
.acct__phone { font-weight: var(--w-bold); direction: ltr; text-align: right; font-variant-numeric: tabular-nums; }
.acct__bal { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); margin: 0 var(--s-1) var(--s-2); padding: var(--s-3) var(--s-4); border-radius: var(--r-tile); background: var(--bg-sunken); }
.acct__bal b { font-size: 20px; font-weight: var(--w-fa-strong); font-variant-numeric: tabular-nums; }
.acct__bal small { font-size: 12.5px; color: var(--text-muted); display: block; }
.acct__a { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); min-height: 44px; padding: 0 var(--s-3); border-radius: var(--r-control); text-decoration: none; color: var(--text); font-weight: var(--w-medium); font-size: 15px; }
.acct__a:hover { background: var(--bg-sunken); }
.acct__a em { font-style: normal; font-size: 12px; color: var(--text-faint); }
.acct__a .chip { min-height: 22px; }
.acct__sep { height: 1px; background: var(--line); margin: var(--s-1) var(--s-3); }
.acct__out { color: var(--danger-text); }
/* ورود با تلگرام */
.btn--lg { min-height: 56px; font-size: 17px; }
.btn svg { width: 20px; height: 20px; flex: none; }
.tglogin { display: flex; flex-direction: column; }
.tglogin__s { display: flex; flex-direction: column; gap: var(--s-3); }
.tglogin__wait { align-items: center; text-align: center; padding: var(--s-6) var(--s-4); border-radius: var(--r-tile); background: var(--bg-sunken); }
.tglogin__wait b { font-size: 17px; font-weight: var(--w-bold); line-height: 1.6; }
.tglogin__spin { width: 32px; height: 32px; border-radius: var(--r-pill); border: 3px solid var(--line-strong); border-top-color: var(--ink); animation: tg-spin .9s linear infinite; }
@keyframes tg-spin { to { transform: rotate(360deg); } }
.or { display: flex; align-items: center; gap: var(--s-3); font-size: 13px; color: var(--text-muted); }
.or::before, .or::after { content: ''; flex: 1; height: 1px; background: var(--line); }
.options--2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s-3); }
.options--2 > legend, .options--2 > .note, .options--2 > .deliv { grid-column: 1 / -1; }
.options--2 > .opt { grid-template-columns: 22px minmax(0, 1fr) !important; align-items: start; height: 100%; }
@media (max-width: 560px) { .options--2 { grid-template-columns: minmax(0, 1fr); } }
/* حالت تحویل در ساعت کاری (کد آماده نیست) */
.deliv { display: flex; gap: var(--s-3); align-items: flex-start; padding: var(--s-4); border-radius: var(--r-tile); background: var(--bg-sunken); line-height: 1.8; font-size: 15px; }
.deliv::before { content: ''; width: 8px; height: 8px; margin-top: 10px; border-radius: var(--r-pill); background: var(--warn, #F79009); flex: none; }
.iconbtn.menu-btn { display: none; }
.mnav { position: fixed; inset: 0; z-index: 60; background: var(--overlay); }
.mnav__panel { position: absolute; inset-block: var(--s-2); inset-inline-start: var(--s-2); width: min(360px, calc(100vw - 32px)); background: var(--surface); border-radius: var(--r-card); box-shadow: var(--sh-2); padding: var(--s-4); overflow-y: auto; display: flex; flex-direction: column; gap: var(--s-1); }
.mnav__head { display: flex; align-items: center; justify-content: space-between; padding-bottom: var(--s-2); border-bottom: 1px solid var(--line); margin-bottom: var(--s-2); }
.mnav__g { border-bottom: 1px solid var(--line); }
.mnav__g summary { list-style: none; display: flex; justify-content: space-between; align-items: center; min-height: 52px; padding: 0 var(--s-2); font-weight: var(--w-semi); cursor: pointer; }
.mnav__g summary::-webkit-details-marker { display: none; }
.mnav__g summary::after { content: '+'; font-size: 20px; color: var(--text-muted); transition: transform var(--dur) var(--ease); }
.mnav__g[open] summary::after { transform: rotate(45deg); }
.mnav__g > div { display: flex; flex-direction: column; padding-bottom: var(--s-3); }
.mnav__g a { display: flex; justify-content: space-between; gap: var(--s-3); min-height: 44px; align-items: center; padding: 0 var(--s-3); border-radius: var(--r-control); text-decoration: none; color: var(--text); }
.mnav__g a:hover { background: var(--bg-sunken); }
.mnav__g a .num { font-size: 13px; color: var(--text-muted); }
.mnav .btn { margin-top: var(--s-4); }
.site-head__end { margin-inline-start: auto; display: flex; align-items: center; gap: var(--s-2); }
.iconbtn { width: 44px; height: 44px; display: grid; place-items: center; border: 0; border-radius: var(--r-control); background: transparent; color: var(--text-muted); cursor: pointer; }
.iconbtn:hover { background: var(--bg-sunken); color: var(--text); }
.iconbtn svg { width: 20px; height: 20px; }
.wallet { display: inline-flex; align-items: center; gap: 8px; padding: 0 14px; min-height: 40px; border-radius: var(--r-pill); background: var(--surface); box-shadow: var(--sh-1); font-size: var(--ws-sm); font-weight: var(--w-semi); text-decoration: none; color: var(--text); }

/* کارت */
.card { background: var(--surface); border-radius: var(--card-radius); box-shadow: var(--sh-1); padding: var(--card-pad); }
.card--sunken { background: var(--bg-sunken); box-shadow: none; border-radius: var(--r-tile); }

/* دو قول اصلی — درشت‌ترین پیام بعد از هیرو */
.promise { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s-4); }
.promise__i { position: relative; overflow: hidden; display: flex; flex-direction: column; gap: var(--s-3); padding: clamp(24px, 3.5vw, 44px); border-radius: var(--card-radius); background: var(--proof-quiet); box-shadow: inset 0 0 0 1.5px color-mix(in oklab, var(--proof) 40%, transparent); }
.promise__k { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: var(--w-bold); color: var(--proof-text); }
.promise__k::before { content: ''; width: 10px; height: 10px; border-radius: var(--r-pill); background: var(--proof); }
.promise__t { font-size: clamp(30px, 4.2vw, 52px); font-weight: var(--w-fa-strong); line-height: 1.15; color: var(--text); text-wrap: balance; }
.promise__t mark { background: none; color: var(--proof-text); }
.promise__d { font-size: 16.5px; line-height: 1.8; color: var(--text); max-width: 44ch; }
.promise__d b { font-weight: var(--w-bold); }
.promise-bar { display: flex; align-items: center; justify-content: center; gap: var(--s-2) var(--s-6); flex-wrap: wrap; padding: var(--s-3) var(--s-4); border-radius: var(--r-tile); background: var(--proof-quiet); color: var(--proof-text); font-weight: var(--w-bold); font-size: 15px; text-align: center; }

.promise.promise--1, .edge.edge--1 { grid-template-columns: minmax(0, 1fr); }

/* سه برتری — بلافاصله بعد از هیرو؛ عدد درشت، یک خط توضیح */
.edge { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-4); }
.edge__i { display: flex; flex-direction: column; gap: var(--s-2); padding: var(--card-pad); background: var(--surface); border-radius: var(--card-radius); box-shadow: var(--sh-1); }
.edge__n { font-size: clamp(28px, 3vw, 40px); font-weight: var(--w-fa-strong); line-height: 1.15; font-variant-numeric: tabular-nums; }
.edge__n--proof { color: var(--proof-text); }
.edge__t { font-weight: var(--w-bold); }
.edge__d { font-size: 15px; color: var(--text-muted); line-height: 1.8; }
/* شمارندهٔ تعداد و جدول قیمت پلکانی */
.qty-row { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); }
.qty { display: inline-flex; align-items: center; border-radius: var(--r-control); background: var(--bg-sunken); padding: 4px; }
.qty button { width: 40px; height: 40px; border: 0; border-radius: var(--r-control); background: var(--surface); color: var(--text); font: var(--w-bold) 20px/1 var(--font-fa); cursor: pointer; box-shadow: var(--sh-1); }
.qty button:disabled { opacity: .4; cursor: not-allowed; box-shadow: none; }
.qty input { width: 56px; height: 40px; border: 0; background: transparent; text-align: center; font: var(--w-bold) 18px var(--font-fa); font-variant-numeric: tabular-nums; color: var(--text); -moz-appearance: textfield; }
.qty input::-webkit-outer-spin-button, .qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.tiers { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 14px; font-variant-numeric: tabular-nums; }
.tiers th { font-size: 12.5px; font-weight: var(--w-semi); color: var(--text-muted); text-align: start; padding: 0 10px 6px; }
.tiers td { padding: 8px 10px; border-top: 1px solid var(--line); }
.tiers td:last-child, .tiers th:last-child { text-align: end; }
.tiers tr[aria-current='true'] td { background: var(--proof-quiet); color: var(--text); font-weight: var(--w-bold); border-top-color: transparent; }
.tiers tr[aria-current='true'] td:first-child { border-start-start-radius: var(--r-control); border-end-start-radius: var(--r-control); }
.tiers tr[aria-current='true'] td:last-child { border-start-end-radius: var(--r-control); border-end-end-radius: var(--r-control); }
.tiers tr[aria-current='true'] + tr td { border-top-color: transparent; }
.tiers__off { color: var(--proof-text); font-weight: var(--w-semi); }
.total { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-3); padding-top: var(--s-3); border-top: 1px solid var(--line); }
.total b { font-size: 20px; font-weight: var(--w-fa-strong); font-variant-numeric: tabular-nums; }
.total__hint { font-size: 13px; color: var(--proof-text); font-weight: var(--w-semi); }

/* مقایسهٔ قیمت با پرداخت مستقیم */
.vs { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px var(--s-4); align-items: baseline; font-size: 14.5px; padding: var(--s-4); border-radius: var(--r-tile); background: var(--proof-quiet); }
.vs dt { color: var(--text-muted); }
.vs dd { margin: 0; text-align: end; font-weight: var(--w-semi); font-variant-numeric: tabular-nums; }
.vs__save { color: var(--proof-text); font-weight: var(--w-bold); }
.vs__row--us dt, .vs__row--us dd { color: var(--text); font-weight: var(--w-bold); }
/* فروش سازمانی */
.biz-band { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: var(--s-8); align-items: center; padding: clamp(24px, 4vw, 48px); background: var(--ink); color: var(--on-ink); border-radius: var(--card-radius); }
.biz-band .lead, .biz-band .hint { color: color-mix(in oklab, var(--on-ink) 72%, transparent); }
.biz-band ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: var(--s-3); }
.biz-band li { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: var(--s-3); line-height: 1.8; }
.biz-band li::before { content: '✓'; font-weight: var(--w-bold); color: var(--proof); }
.btn--inv { background: var(--on-ink); color: var(--ink); }
.btn--inv:hover { background: color-mix(in oklab, var(--on-ink) 88%, var(--ink)); }
.biz-line { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); padding-top: var(--s-4); border-top: 1px solid var(--line); font-size: 14px; }

/* کارت محصول */
.plans { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-4); }
.plan { display: flex; flex-direction: column; gap: var(--s-4); background: var(--surface); border-radius: var(--card-radius); box-shadow: var(--sh-1); padding: var(--card-pad); color: inherit; text-decoration: none; transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
a.plan:hover { transform: translateY(-2px); box-shadow: var(--sh-2); }
.plan__name { font-size: var(--ws-h3); font-weight: var(--w-bold); direction: ltr; text-align: right; }
.plan__for { font-size: var(--ws-sm); color: var(--text-muted); line-height: 1.7; min-height: 3.4em; }
.price { display: flex; flex-direction: column; gap: 2px; }
/* سایت: تومان اول (price__main)، دلار دوم (price__sub). بات برعکس است. */
.price__main { font-size: var(--ws-price); font-weight: var(--w-bold); font-variant-numeric: tabular-nums; line-height: 1.2; }
.price__main small { font-size: .5em; font-weight: var(--w-semi); color: var(--text-muted); }
.price__sub { font-size: var(--ws-sm); font-weight: var(--w-semi); color: var(--text-muted); font-variant-numeric: tabular-nums; }
.plans--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.variants { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s-2); }
.price__usd { font-size: var(--ws-price); font-weight: var(--w-bold); font-variant-numeric: tabular-nums; direction: ltr; text-align: right; line-height: 1.2; }
.price__usd small, .price__irr small { font-size: .5em; font-weight: var(--w-semi); color: var(--text-muted); margin-inline-start: 4px; }
.price__irr { font-size: var(--ws-sm); font-weight: var(--w-semi); color: var(--text-muted); font-variant-numeric: tabular-nums; }
.price__irr small { font-size: 1em; }
.plan__facts { display: flex; flex-direction: column; gap: 6px; padding-top: var(--s-4); border-top: 1px solid var(--line); margin-top: auto; }
.plan__cta { margin-top: var(--s-2); }

/* سه ستون اطمینان */
.assure { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-4); }
.assure.assure--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.assure__item { display: flex; flex-direction: column; gap: var(--s-3); padding: var(--card-pad); background: var(--surface); border-radius: var(--card-radius); box-shadow: var(--sh-1); }
.assure__k { font-size: var(--ws-sm); font-weight: var(--w-bold); color: var(--proof-text); font-variant-numeric: tabular-nums; }
.assure__t { font-size: var(--ws-h3); font-weight: var(--w-bold); }
.assure__d { color: var(--text-muted); font-size: 15.5px; line-height: 1.85; }

/* رسید نمونه — نشان می‌دهد دقیقاً چه چیزی می‌گیرید */
.receipt { background: var(--surface); border-radius: var(--r-frame); box-shadow: var(--sh-2); padding: clamp(24px, 3vw, 36px); display: flex; flex-direction: column; gap: var(--s-4); }
.receipt__head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-3); }
.receipt__tag { font-size: 12px; font-weight: var(--w-semi); color: var(--text-muted); border: 1px dashed var(--line-strong); padding: 2px 10px; border-radius: var(--r-pill); }
.receipt__lines { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px var(--s-4); font-size: 15px; margin: 0; }
.receipt__lines dt { color: var(--text-muted); }
.receipt__lines dd { margin: 0; text-align: end; font-weight: var(--w-medium); }
.receipt__code { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); padding: 14px var(--s-4); border-radius: var(--r-tile); background: var(--bg-sunken); font-family: ui-monospace, 'SFMono-Regular', Menlo, monospace; font-size: 15px; direction: ltr; letter-spacing: .06em; }
.receipt__timeline { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-2); }
.receipt__step { display: flex; flex-direction: column; gap: 2px; padding-top: 10px; border-top: 3px solid var(--proof); font-size: 13px; }
.receipt__step b { font-weight: var(--w-semi); }
.receipt__step span { color: var(--text-muted); font-variant-numeric: tabular-nums; direction: ltr; text-align: right; }

/* مراحل */
.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-8); counter-reset: s; }
.step { display: flex; flex-direction: column; gap: var(--s-2); }
.step__n { width: 40px; height: 40px; border-radius: var(--r-pill); display: grid; place-items: center; background: var(--ink); color: var(--on-ink); font-weight: var(--w-bold); margin-bottom: var(--s-2); }
.step__t { font-size: var(--ws-h3); font-weight: var(--w-bold); }
.step__d { color: var(--text-muted); line-height: 1.85; }

/* شرایط گارانتی — جدول صریح، نه وعدهٔ کلی */
.terms { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s-4); }
.terms__col h3 { font-size: var(--ws-h3); margin-bottom: var(--s-4); display: flex; align-items: center; gap: var(--s-2); }
.terms__col ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: var(--s-3); }
.terms__col li { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: var(--s-3); line-height: 1.8; }
.mark { width: 20px; height: 20px; border-radius: var(--r-pill); display: grid; place-items: center; font-size: 12px; font-weight: var(--w-bold); margin-top: 5px; }
.mark--yes { background: var(--proof-quiet); color: var(--proof-text); }
.mark--no { background: var(--bg-sunken); color: var(--text-muted); }

/* هویت کسب‌وکار */
.biz { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: var(--s-6); align-items: start; }
.biz__facts { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 14px var(--s-6); margin: 0; }
.biz__facts dt { color: var(--text-muted); font-size: 15px; }
.biz__facts dd { margin: 0; font-weight: var(--w-semi); }
.badges { display: flex; gap: var(--s-4); flex-wrap: wrap; }
.badge-slot { width: 120px; height: 132px; border-radius: var(--r-tile); border: 1.5px dashed var(--line-strong); display: grid; place-items: center; text-align: center; font-size: 12px; color: var(--text-muted); padding: var(--s-2); background: var(--surface); }
.todo { background: var(--bg-sunken); border: 1px dashed var(--line-strong); border-radius: 6px; padding: 0 6px; color: var(--text-muted); font-weight: var(--w-medium); }

/* سؤال‌ها */
.faq { display: flex; flex-direction: column; gap: var(--s-2); }
.faq details { background: var(--surface); border-radius: var(--r-tile); box-shadow: var(--sh-1); }
.faq summary { list-style: none; cursor: pointer; padding: var(--s-4) var(--s-6); font-weight: var(--w-semi); display: flex; justify-content: space-between; gap: var(--s-4); align-items: center; min-height: 60px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; font-size: 22px; color: var(--text-muted); flex: none; transition: transform var(--dur) var(--ease); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details > div { padding: 0 var(--s-6) var(--s-6); color: var(--text-muted); line-height: 1.9; max-width: 70ch; }

/* فوتر */
.site-foot { border-top: 1px solid var(--line); padding-block: var(--s-12); font-size: 15px; }
.site-foot__grid { display: grid; grid-template-columns: 1.4fr repeat(4, minmax(0, 1fr)); gap: var(--s-8); }
.fcol summary { list-style: none; }
.fcol summary::-webkit-details-marker { display: none; }
.site-foot h4, .fcol summary { margin: 0 0 var(--s-3); font-size: var(--ws-sm); color: var(--text-muted); font-weight: var(--w-semi); }
.site-foot ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--s-2); }
.site-foot a { text-decoration: none; }
.site-foot a:hover { text-decoration: underline; }
.foot-badges { display: flex; gap: var(--s-3); flex-wrap: wrap; margin-top: var(--s-2); }
/* جای نشان با اندازهٔ واقعی تصویر صادرشده رزرو می‌شود تا با رسیدن تصویر چیدمان جابه‌جا نشود */
.badge-slot--enamad, .badge-slot--samandehi { width: 125px; height: 136px; flex: none; text-decoration: none; font-weight: var(--w-medium); }
.foot-disc { margin-top: var(--s-8); padding: var(--s-4) var(--s-6); border-radius: var(--r-tile); background: var(--bg-sunken); font-size: 14px; font-weight: var(--w-semi); color: var(--text); line-height: 1.8; }
.site-foot__legal { margin-top: var(--s-8); padding-top: var(--s-6); border-top: 1px solid var(--line); color: var(--text-muted); font-size: var(--ws-sm); display: flex; justify-content: space-between; gap: var(--s-4); flex-wrap: wrap; }

/* ورود با موبایل و کد یک‌بارمصرف */
.dialog { border: 0; border-radius: var(--r-card); padding: var(--card-pad); width: min(440px, calc(100% - 32px)); background: var(--surface); color: var(--text); box-shadow: var(--sh-2); }
.dialog::backdrop { background: var(--overlay); }
.field { display: flex; flex-direction: column; gap: var(--s-2); }
.field label { font-size: var(--ws-sm); font-weight: var(--w-semi); }
.input { min-height: var(--field-h); padding: 0 var(--s-4); border: 1.5px solid var(--line-strong); border-radius: var(--r-control); background: var(--surface); color: var(--text); font: var(--w-semi) 18px var(--font-fa); width: 100%; }
.input:focus { border-color: var(--ink); outline: none; }
.input[aria-invalid='true'] { border-color: var(--danger); }
.input--ltr { direction: ltr; text-align: left; font-variant-numeric: tabular-nums; letter-spacing: .04em; }
.input--otp { text-align: center; font-size: 28px; letter-spacing: .5em; padding-inline-start: .5em; }
.hint { font-size: var(--ws-sm); color: var(--text-muted); }
.err { font-size: var(--ws-sm); font-weight: var(--w-semi); color: var(--danger-text); }

/* دسته و محصول */
.crumbs { display: flex; gap: var(--s-2); flex-wrap: wrap; font-size: var(--ws-sm); color: var(--text-muted); }
.crumbs a { color: inherit; text-decoration: none; }
.crumbs a:hover { color: var(--text); }
.compare { width: 100%; border-collapse: separate; border-spacing: 0; background: var(--surface); border-radius: var(--card-radius); box-shadow: var(--sh-1); overflow: hidden; font-size: 15.5px; }
.compare th, .compare td { padding: var(--s-4) var(--s-6); text-align: start; border-bottom: 1px solid var(--line); vertical-align: top; }
.compare thead th { background: var(--bg-sunken); font-size: var(--ws-sm); color: var(--text-muted); font-weight: var(--w-semi); }
.compare tbody tr:last-child td, .compare tbody tr:last-child th { border-bottom: 0; }
.compare tbody th { font-weight: var(--w-bold); direction: ltr; text-align: right; white-space: nowrap; }
.compare .num { font-weight: var(--w-semi); }
.pdp { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 64px); align-items: start; }
/* تصویر شاخص محصول — آیکون کوچک داخل جعبهٔ خرید، بالای قیمت. همان featured image؛ Schema سه برش بزرگ را می‌خواند. */
.pthumb { display: flex; align-items: center; gap: var(--s-3); }
.pthumb__img { width: 56px; height: 56px; flex: none; border-radius: var(--r-tile); background: var(--bg-sunken); display: grid; place-items: center; overflow: hidden; color: var(--text-faint); }
.pthumb__img img { width: 100%; height: 100%; object-fit: cover; }
.pthumb__img svg { width: 24px; height: 24px; }
.pthumb__name { font-weight: var(--w-bold); direction: ltr; text-align: right; }
.pdp--checkout { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); }
/* هفت بلوک اعتماد صفحهٔ محصول — به ترتیب ترس خریدار؛ جداکنندهٔ خطی، نه کارت روی کارت */
.pblocks { display: flex; flex-direction: column; }
.pb { display: flex; flex-direction: column; gap: var(--s-3); padding-block: var(--s-6); border-top: 1px solid var(--line); }
.pb:first-child { border-top: 0; padding-top: 0; }
.pb__h { font-size: var(--ws-h3); font-weight: var(--w-bold); }
.pb p, .pb li, .pb dd { line-height: 1.85; }
.pb__dl { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px var(--s-6); margin: 0; }
.pb__dl dt { color: var(--text-muted); font-size: 15px; }
.pb__dl dd { margin: 0; font-weight: var(--w-medium); }
.pb__ol, .pb ul { margin: 0; padding-inline-start: 1.2em; display: flex; flex-direction: column; gap: 6px; }
.pb__cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s-4); }
.pb__cols > div { display: flex; flex-direction: column; gap: var(--s-2); padding: var(--s-4); border-radius: var(--r-tile); background: var(--bg-sunken); }
.pb__sub { font-weight: var(--w-bold); }
.pb__prices { display: flex; flex-direction: column; gap: var(--s-2); }
.pb__price { display: flex; align-items: baseline; gap: var(--s-2); flex-wrap: wrap; }
.pb__price b { font-size: 26px; font-weight: var(--w-fa-strong); font-variant-numeric: tabular-nums; }
.pb__vl { min-width: 72px; font-weight: var(--w-semi); color: var(--text-muted); }
@media (max-width: 560px) { .pb__cols { grid-template-columns: minmax(0, 1fr); } .pb__dl { grid-template-columns: minmax(0, 1fr); gap: 2px; } .pb__dl dd { margin-bottom: var(--s-2); } }
.buybox { position: sticky; top: 96px; display: flex; flex-direction: column; gap: var(--s-6); }
.options { display: flex; flex-direction: column; gap: var(--s-2); }
.opt { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; gap: var(--s-3); align-items: center; padding: var(--s-4); border: 1.5px solid var(--line); border-radius: var(--r-tile); cursor: pointer; background: var(--surface); }
.opt:has(input:checked) { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.opt input { accent-color: var(--ink); width: 18px; height: 18px; margin: 0; }
.opt__name { font-weight: var(--w-semi); direction: ltr; text-align: right; }
.opt__price { text-align: end; font-variant-numeric: tabular-nums; }
.opt__price b { display: block; font-weight: var(--w-bold); direction: ltr; unicode-bidi: isolate; }
.opt__price span { font-size: 13px; color: var(--text-muted); }
.stock { display: flex; align-items: center; gap: var(--s-2); font-size: var(--ws-sm); font-weight: var(--w-semi); }
.stock::before { content: ''; width: 8px; height: 8px; border-radius: var(--r-pill); background: var(--proof); }
.stock--out { color: var(--text-muted); }
.stock--out::before { background: var(--text-faint); }
.paywith { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s-2); }
.facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-4); }
.fact { padding: var(--s-4) var(--s-6); background: var(--surface); border-radius: var(--r-tile); box-shadow: var(--sh-1); }
.fact b { display: block; font-size: var(--ws-h3); white-space: nowrap; }
.fact span { font-size: var(--ws-sm); color: var(--text-muted); }
.prose { max-width: 68ch; display: flex; flex-direction: column; gap: var(--s-4); line-height: 1.95; }
.prose h2 { font-size: var(--ws-h2); margin-top: var(--s-6); }
.prose ul { margin: 0; padding-inline-start: 1.2em; display: flex; flex-direction: column; gap: var(--s-2); }

/* متن سئو انتهای صفحه‌های آرشیو — محتوا همیشه در HTML است؛ فقط ارتفاعش بسته می‌شود */
.seo { border-top: 1px solid var(--line); padding-top: var(--s-8); }
.seo__body { position: relative; max-height: 18em; overflow: hidden; transition: max-height var(--dur) var(--ease); }
.seo__body::after { content: ''; position: absolute; inset-inline: 0; bottom: 0; height: 6em; background: linear-gradient(to bottom, transparent, var(--bg)); pointer-events: none; }
.seo[data-open='true'] .seo__body { max-height: none; }
.seo[data-open='true'] .seo__body::after { display: none; }
.seo__body h2 { font-size: var(--ws-h3); margin-top: var(--s-6); }
.seo__body h2:first-child { margin-top: 0; }
.seo__body p, .seo__body li { color: var(--text-muted); }
.seo__toggle { margin-top: var(--s-4); }
.seo__toggle::after { content: '▾'; font-size: 12px; transition: transform var(--dur) var(--ease); }
.seo[data-open='true'] .seo__toggle::after { transform: rotate(180deg); }
@media print { .seo__body { max-height: none; } .seo__body::after, .seo__toggle { display: none; } }

/* حساب کاربری */
.acc-layout { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: var(--s-6); align-items: start; }
.acc-nav { position: sticky; top: 96px; display: flex; flex-direction: column; gap: 2px; padding: var(--s-2); background: var(--surface); border-radius: var(--r-card); box-shadow: var(--sh-1); }
.acc-nav a, .acc-nav button { display: flex; align-items: center; justify-content: space-between; gap: var(--s-2); min-height: 44px; padding: 0 var(--s-3); border: 0; border-radius: var(--r-control); background: none; font: var(--w-medium) 15px var(--font-fa); color: var(--text-muted); text-decoration: none; cursor: pointer; text-align: start; }
.acc-nav a:hover, .acc-nav button:hover { background: var(--bg-sunken); color: var(--text); }
.acc-nav a[aria-current='page'] { background: var(--bg-sunken); color: var(--text); font-weight: var(--w-bold); }
.acc-nav .acc-nav__out { color: var(--danger-text); }
.acc-main { display: flex; flex-direction: column; gap: var(--s-6); min-width: 0; }
.acc-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s-4); flex-wrap: wrap; }
.acc-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--s-4); }
.stat { display: flex; flex-direction: column; gap: 4px; }
.stat__k { font-size: 13px; font-weight: var(--w-semi); color: var(--text-muted); }
.stat__v { font-size: 28px; font-weight: var(--w-fa-strong); font-variant-numeric: tabular-nums; line-height: 1.2; }
.stat__s { font-size: 13.5px; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.st { display: inline-flex; align-items: center; gap: 6px; min-height: 26px; padding: 0 10px; border-radius: var(--r-pill); font-size: 12.5px; font-weight: var(--w-semi); white-space: nowrap; background: var(--bg-sunken); color: var(--text-muted); }
.st::before { content: ''; width: 6px; height: 6px; border-radius: var(--r-pill); background: currentColor; }
.st--ok { background: var(--proof-quiet); color: var(--proof-text); }
.st--wait { background: var(--info-quiet, #FFF4E0); color: var(--info-text, #8A5A06); }
.st--bad { background: var(--danger-quiet); color: var(--danger-text); }
.list { background: var(--surface); border-radius: var(--r-card); box-shadow: var(--sh-1); overflow: hidden; }
.list__row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: var(--s-4); align-items: center; padding: var(--s-4) var(--s-6); border-bottom: 1px solid var(--line); color: inherit; text-decoration: none; }
.list__row:last-child { border-bottom: 0; }
a.list__row:hover { background: var(--surface-quiet); }
.list__main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.list__t { font-weight: var(--w-semi); }
.list__m { font-size: 13.5px; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.list__amt { font-weight: var(--w-bold); font-variant-numeric: tabular-nums; text-align: end; white-space: nowrap; }
.amt-in { color: var(--proof-text); }
.codes { display: flex; flex-direction: column; gap: var(--s-2); }
.code > span { min-width: 0; overflow-wrap: anywhere; }
.code { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); padding: 12px var(--s-4); border-radius: var(--r-tile); background: var(--bg-sunken); font: 600 16px ui-monospace, 'SFMono-Regular', Menlo, monospace; direction: ltr; letter-spacing: .04em; }
.code .btn { font-family: var(--font-fa); letter-spacing: 0; }
.issue { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-2); }
.issue button { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-height: 64px; padding: var(--s-3) var(--s-4); border: 1px solid var(--line); border-radius: var(--r-tile); background: var(--surface); font: inherit; color: var(--text); text-align: start; cursor: pointer; }
.issue button:hover { border-color: var(--text); }
.issue b { font-weight: var(--w-semi); }
.issue span { font-size: 13px; color: var(--text-muted); }
.note { padding: var(--s-4) var(--s-6); border-radius: var(--r-tile); background: var(--bg-sunken); line-height: 1.8; }
.note--proof { background: var(--proof-quiet); }
.demo-pills { display: inline-flex; gap: 4px; padding: 4px; border-radius: var(--r-pill); background: var(--bg-sunken); flex-wrap: wrap; }
.demo-pills button { min-height: 32px; padding: 0 12px; border: 0; border-radius: var(--r-pill); background: transparent; font: var(--w-semi) 13px var(--font-fa); color: var(--text-muted); cursor: pointer; }
.demo-pills button[aria-pressed='true'] { background: var(--surface); color: var(--text); box-shadow: var(--sh-1); }
.demo-cap { font-size: 12px; color: var(--text-faint); }
.drop { display: grid; place-items: center; gap: var(--s-2); min-height: 140px; padding: var(--s-6); border: 1.5px dashed var(--line-strong); border-radius: var(--r-tile); text-align: center; color: var(--text-muted); cursor: pointer; }
.drop:hover { border-color: var(--text); }
.chk { display: flex; gap: var(--s-3); align-items: flex-start; line-height: 1.8; cursor: pointer; }
.chk input { width: 20px; height: 20px; margin-top: 4px; accent-color: var(--ink); flex: none; }
.sumrow { display: flex; justify-content: space-between; gap: var(--s-3); font-variant-numeric: tabular-nums; }
.sumrow--total { padding-top: var(--s-3); border-top: 1px solid var(--line); font-weight: var(--w-bold); font-size: 18px; }
.sumrow--off { color: var(--proof-text); }
.thread { display: flex; flex-direction: column; gap: var(--s-3); }
.msg { max-width: 78%; padding: var(--s-3) var(--s-4); border-radius: var(--r-tile); line-height: 1.8; }
.msg--me { align-self: flex-start; background: var(--bg-sunken); }
.msg--staff { align-self: flex-end; background: var(--proof-quiet); }
.msg__who { display: block; font-size: 12.5px; color: var(--text-muted); margin-bottom: 2px; }
/* نوار خرید چسبان موبایل در صفحهٔ محصول */
.buybar { display: none; }
@media (max-width: 860px) {
  .acc-layout { grid-template-columns: minmax(0, 1fr); }
  .acc-nav { position: static; flex-direction: row; overflow-x: auto; scrollbar-width: none; }
  .acc-nav a, .acc-nav button { flex: none; }
  .issue { grid-template-columns: minmax(0, 1fr); }
  .list__row { grid-template-columns: minmax(0, 1fr) auto; padding: var(--s-4); }
  .list__row > :nth-child(2) { grid-column: 1; grid-row: 2; justify-self: start; }
  .buybar { display: flex; position: fixed; inset-inline: 0; bottom: 0; z-index: 35; align-items: center; justify-content: space-between; gap: var(--s-3); padding: var(--s-3) var(--s-4) calc(var(--s-3) + env(safe-area-inset-bottom)); background: var(--surface); box-shadow: 0 -8px 24px -12px rgb(30 34 53 / .25); border-radius: var(--r-card) var(--r-card) 0 0; transition: transform var(--dur) var(--ease); }
  .buybar[data-hide='true'] { transform: translateY(110%); }
  .buybar__p { display: flex; flex-direction: column; line-height: 1.3; }
  .buybar__p b { font-size: 18px; font-weight: var(--w-fa-strong); font-variant-numeric: tabular-nums; }
  .buybar__p span { font-size: 12.5px; color: var(--text-muted); }
  .buybar .btn { min-width: 150px; }
  body:has(.buybar) .site-foot { padding-bottom: 96px; }
}

/* بخش‌های پایین صفحهٔ محصول */
.ptabs { position: sticky; top: 72px; z-index: 20; display: flex; gap: 4px; padding: 4px; border-radius: var(--r-pill); background: var(--surface); box-shadow: var(--sh-1); overflow-x: auto; scrollbar-width: none; align-self: flex-start; max-width: 100%; }
.ptabs a { flex: none; display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px; border-radius: var(--r-pill); font-weight: var(--w-semi); font-size: 14.5px; color: var(--text-muted); text-decoration: none; }
.ptabs a:hover, .ptabs a[aria-current='true'] { background: var(--bg-sunken); color: var(--text); }
.psec { scroll-margin-top: 140px; display: flex; flex-direction: column; gap: var(--s-4); }
.specs { width: 100%; border-collapse: separate; border-spacing: 0; background: var(--surface); border-radius: var(--r-card); box-shadow: var(--sh-1); overflow: hidden; font-size: 15px; }
.specs th, .specs td { padding: 14px var(--s-6); text-align: start; border-bottom: 1px solid var(--line); vertical-align: top; }
.specs tr:last-child th, .specs tr:last-child td { border-bottom: 0; }
.specs th { width: 34%; font-weight: var(--w-semi); color: var(--text-muted); background: var(--surface-quiet); }
.longdesc { position: relative; max-height: 22em; overflow: hidden; }
.longdesc::after { content: ''; position: absolute; inset-inline: 0; bottom: 0; height: 6em; background: linear-gradient(to bottom, transparent, var(--surface)); pointer-events: none; }
.longdesc[data-open='true'] { max-height: none; }
.longdesc[data-open='true']::after { display: none; }
.longdesc h3 { font-size: 18px; margin-top: var(--s-4); }
.longdesc p, .longdesc li { color: var(--text-muted); line-height: 1.95; }
.reviews { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: var(--s-6); align-items: start; }
.rv-empty { display: flex; flex-direction: column; gap: var(--s-2); align-items: flex-start; }
.stars { display: inline-flex; gap: 4px; direction: ltr; }
.stars input { position: absolute; opacity: 0; width: 0; height: 0; }
.stars label { width: 40px; height: 40px; display: grid; place-items: center; border-radius: var(--r-control); background: var(--bg-sunken); cursor: pointer; color: var(--text-faint); font-size: 20px; }
.stars label:hover, .stars label:hover ~ label, .stars input:checked ~ label { color: var(--amber-500); }
.stars { flex-direction: row-reverse; justify-content: flex-end; }
.stars input:focus-visible + label { box-shadow: var(--focus-ring); }
.rv-badge { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: var(--w-semi); color: var(--proof-text); }
@media (max-width: 860px) {
  .reviews { grid-template-columns: minmax(0, 1fr); }
  .specs, .specs tbody, .specs tr { display: block; }
  .specs th, .specs td { display: block; width: auto; padding: 10px var(--s-4); }
  .specs th { border-bottom: 0; padding-bottom: 2px; background: none; font-size: 13px; }
  .ptabs { top: 64px; }
}

/* برگه‌های سیستم (فقط S1) */
.spec { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: var(--s-6); padding-block: var(--s-8); border-top: 1px solid var(--line); }
.spec__k { font-size: var(--ws-sm); font-weight: var(--w-semi); color: var(--text-muted); }
.swatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--s-3); }
.sw { border-radius: var(--r-tile); overflow: hidden; background: var(--surface); box-shadow: var(--sh-1); font-size: 13px; }
.sw i { display: block; height: 64px; }
.sw div { padding: 10px 12px; display: flex; flex-direction: column; }
.sw code { color: var(--text-muted); direction: ltr; text-align: right; font-size: 12px; }

@media (max-width: 1080px) {
  .plans { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .site-foot__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .plans--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 1080px) and (min-width: 861px) { .mega__card { display: none; } }
@media (max-width: 860px) {
  .nav { display: none; }
  .iconbtn.menu-btn { display: grid; }
  .plans--3 { grid-template-columns: minmax(0, 1fr); }
  .assure, .assure.assure--2, .steps, .terms, .biz, .pdp, .facts { grid-template-columns: minmax(0, 1fr); }
  /* تصویر شاخص محصول — ۴:۳ روی زمینهٔ پاستلی؛ تا فایل واقعی نرسیده، جای خالی با برچسب دیده می‌شود */
.pimg { position: relative; margin: 0; aspect-ratio: 4 / 3; border-radius: var(--r-card); overflow: hidden; background: #DCE3EA; display: grid; place-items: center; }
[data-theme='dark'] .pimg { background: #1F2338; }
.pimg img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pimg__todo { font-size: var(--ws-sm); color: var(--text-muted); text-align: center; padding: var(--s-4); border: 1px dashed var(--line-strong); border-radius: var(--r-tile); background: color-mix(in oklab, var(--surface) 70%, transparent); max-width: 32ch; line-height: 1.7; }
.buybox { position: static; }
  .spec { grid-template-columns: minmax(0, 1fr); gap: var(--s-3); }
  .compare { display: block; overflow-x: auto; }
}
@media (max-width: 860px) {
  .site-foot__grid { grid-template-columns: minmax(0, 1fr) !important; gap: 0; }
  .site-foot__grid > .stack { padding-bottom: var(--s-4); }
  .fcol { border-top: 1px solid var(--line); }
  .fcol summary { display: flex; align-items: center; justify-content: space-between; min-height: 52px; margin: 0; font-size: 15px; color: var(--text); font-weight: var(--w-semi); cursor: pointer; }
  .fcol summary::after { content: '+'; font-size: 20px; color: var(--text-muted); transition: transform var(--dur) var(--ease); }
  .fcol[open] summary::after { transform: rotate(45deg); }
  .fcol ul { padding-bottom: var(--s-4); }
  .fcol li a { display: flex; align-items: center; min-height: 40px; }
  .site-foot__legal { flex-direction: column; gap: var(--s-2); }
  .biz-band { padding: var(--s-6); gap: var(--s-6); }
  .biz-band .h2 { font-size: 22px; }
  .biz-band .row { flex-direction: column; align-items: stretch; }
  .biz-band .row .btn { width: 100%; }
  .biz-band li { font-size: 15px; }
}
/* ممیزی موبایل */
@media (max-width: 860px) {
  .edge, .promise, .biz-band, .assure, .assure.assure--2, .terms, .steps, .facts, .pdp { grid-template-columns: minmax(0, 1fr) !important; }
  .edge__n { font-size: 28px; }
  .promise__t { font-size: 30px; }
  .promise__i, .edge__i, .assure__item { padding: var(--s-6); }
  .row > a:not(.btn), .stack > a:not(.btn):not(.plan):not(.assure__item), .compare a, .biz-line a, a.hint, .list__m a, .eyebrow a { display: inline-flex; align-items: center; min-height: 44px; }
  .buybox, .card { padding: var(--s-6) var(--s-4); }
  .h-display { font-size: 34px; }
  .receipt { padding: var(--s-4); }
}
@media (max-width: 560px) {
  /* جدول‌ها روی موبایل به کارت ردیفی تبدیل می‌شوند؛ برچسب هر خانه از data-label */
  .compare { display: block; overflow: visible; background: none; box-shadow: none; }
  .compare thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .compare tbody { display: flex; flex-direction: column; gap: var(--s-2); }
  .compare tr { display: flex; flex-direction: column; background: var(--surface); border-radius: var(--r-tile); box-shadow: var(--sh-1); padding: var(--s-2) 0; }
  .compare th, .compare td { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-3); padding: 8px var(--s-4); border: 0; text-align: end; white-space: normal !important; }
  .compare [data-label]::before { content: attr(data-label); font-size: 12.5px; font-weight: var(--w-semi); color: var(--text-muted); text-align: start; flex: none; }
  .compare tbody th { font-size: 16px; justify-content: flex-start; }
  .compare td > div { text-align: end; }
  .code { font-size: 14px; }
  .qty-row { flex-wrap: wrap; }
}
@media (min-width: 861px) { .fcol summary { pointer-events: none; } }
@media (max-width: 560px) {
  .acct__btn > span:not(.acct__av) { display: none; }
  .acct__btn { padding: 0 5px; }
  .plans { grid-template-columns: minmax(0, 1fr); }
  .site-foot__grid { grid-template-columns: minmax(0, 1fr); }
  .paywith { grid-template-columns: minmax(0, 1fr); }
  .site-head__in { gap: var(--s-2); }
  .wallet span { display: none; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: 1ms !important; } html { scroll-behavior: auto; } }