/*
Theme Name: MehdiSafari (Hello Child)
Template: hello-elementor
Description: قالب فرزند hello-elementor — دیزاین‌سیستم پرسونال‌برند v4: مونوکروم اِدیتوریال (سیاه/سفید، تایپوگرافی سنگین، خطوط مویی). مرجع: DavidSenra.com. Managed by Claude via git.
Version: 4.6.1
Text Domain: mehdisafari
*/

/* ============================================================
   1. فونت‌ها (سلف‌هاست — fonts/)
   ============================================================ */
@font-face {
  font-family: 'Archivo';
  src: url('fonts/archivo-var.woff2') format('woff2');
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Space Mono';
  src: url('fonts/space-mono-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Space Mono';
  src: url('fonts/space-mono-700.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ============================================================
   2. توکن‌ها — فقط سیاه، سفید، خاکستری
   ============================================================ */
:root {
  --ink: #0a0a0a;
  --paper: #ffffff;
  --mut: #595959;          /* متن ثانویه */
  --mut-2: #8a8a8a;        /* متن کم‌اهمیت */
  --hair: #0a0a0a;         /* خط مویی اصلی — سیاه */
  --hair-soft: #e8e8e8;    /* خط مویی نرم — جداکننده ردیف‌ها */
  --dark-hair: #2b2b2b;    /* خط مویی روی زمینه سیاه */

  --font-fa: Vazirmatn, Tahoma, Arial, sans-serif;
  --disp: 'Archivo', Inter, -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif;
  --mono: 'Space Mono', ui-monospace, SFMono-Regular, Menlo, 'Courier New', monospace;
  /* عناصر مونو که ممکن است فارسی داشته باشند: بعد از Space Mono مستقیم وزیرمتن —
     نه generic monospace (در ویندوز فارسیِ Courier New حروف را جدا رندر می‌کند) */
  --mono-fa: 'Space Mono', Vazirmatn, Tahoma, Arial, sans-serif;

  --container: 80rem;
  --pad-x: clamp(20px, 4vw, 44px);
  --header-h: 64px;

  /* سازگاری با کلاس‌های auth/داشبورد/صفحات قدیمی */
  --ms-ink: var(--ink);
  --ms-ink-soft: var(--mut);
  --ms-paper: var(--paper);
  --ms-paper-warm: #f5f5f5;
  --ms-accent: var(--ink);
  --ms-accent-dark: #000000;
  --ms-warm: var(--ink);
  --ms-line: var(--hair-soft);
  --ms-danger: #b42318;
  --ms-primary: var(--ink);
  --ms-primary-dark: #000000;
  --ms-text: var(--ink);
  --ms-muted: var(--mut);
  --ms-bg: #f5f5f5;
  --ms-card: #ffffff;
  --ms-border: var(--hair-soft);
  --ms-radius: 0px;
  --ms-radius-lg: 0px;
  --ms-container: 70rem;
  --ms-prose: 42rem;
  --ms-font-fa: var(--font-fa);
  --ms-font-en: var(--disp);
  --ms-serif-en: var(--disp);
  --ms-shadow-soft: none;
  --ms-shadow-lift: none;
}

/* ============================================================
   3. پایه
   ============================================================ */
html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 24px);
}
body {
  font-family: var(--font-fa);
  color: var(--ink);
  background: var(--paper);
  font-size: 1.05rem;
  line-height: 2;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
html[lang^="en"] body {
  font-family: var(--disp);
  line-height: 1.72;
}

h1, h2, h3, h4, h5, h6 {
  font-family: inherit;
  color: var(--ink);
  font-weight: 800;
  line-height: 1.25;
}
html[lang^="en"] h1,
html[lang^="en"] h2,
html[lang^="en"] h3 {
  font-family: var(--disp);
  letter-spacing: -0.01em;
  line-height: 1.1;
}

button, input, select, textarea { font-family: inherit; }
a { color: var(--ink); text-underline-offset: 3px; }
a:hover { color: #000; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.ms4-dark :focus-visible { outline-color: #fff; }
::selection { background: var(--ink); color: #fff; }
img { max-width: 100%; height: auto; }

/* ============================================================
   3.5 شکستن محدودیت عرض قالب مادر
   ============================================================ */
.site-main {
  max-width: none !important;
  width: 100%;
  padding-inline: 0 !important;
}
.archive .site-main,
.search .site-main,
.error404 .site-main {
  max-width: var(--ms-prose) !important;
  margin-inline: auto;
  padding-inline: clamp(18px, 4vw, 36px) !important;
  padding-block: 48px;
}
/* آرشیو ویدیوها تمپلیت v4 خودش را دارد — کپ عرض نگیرد */
.post-type-archive-ms_video .site-main {
  max-width: none !important;
  padding: 0 !important;
}
.page .ms-prose { padding-block: 56px; padding-inline: clamp(18px, 4vw, 36px); }

/* آندرلاین اجباری قالب مادر روی کامپوننت‌های ما خاموش */
a.ms-card, a.ms-card *,
.ms-project-row, .ms-project-row *,
.ms-quicklinks a, .ms-quicklinks a *,
.ms-article-list a, .ms-article-list a *,
.ms-btn, .ms-textlink, .ms-socials a,
.ms4-btn-ink, .ms4-btn-ink *,
.ms4-btn-ghost, .ms4-btn-ghost *,
.ms4-land-bar a, .ms4-land-risk a,
.ms4-v, .ms4-v *,
.ms4-row, .ms4-row *,
.ms4-co, .ms4-co *,
.ms4-btn, .ms4-btn *,
.ms4-textlink,
.ms4-foot a, .ms4-nl a {
  text-decoration: none !important;
}

/* ============================================================
   4. هدر — سفید، چسبان، خط مویی سیاه
   ============================================================ */
.site-header {
  position: sticky;
  top: 0;
  z-index: 200;
  background: var(--paper);
  border-bottom: 1px solid var(--hair);
  padding-block: 0 !important;
  padding-inline: max(var(--pad-x), calc((100% - var(--container)) / 2));
  align-items: center;
  min-height: var(--header-h);
}
.site-header .header-inner { align-items: center; }
.site-header .site-title,
.site-header h1.site-title a,
.site-header p.site-title a,
.site-header .site-title a {
  font-size: 1rem !important;
  font-weight: 800;
  letter-spacing: .01em;
  color: var(--ink) !important;
  text-decoration: none;
}
.site-header .site-description { display: none; }

.site-header nav a {
  font-family: var(--mono-fa);
  font-size: .8rem;
  font-weight: 400;
  letter-spacing: .04em;
  color: var(--ink) !important;
  text-decoration: none;
  transition: opacity .15s ease;
}
.site-header nav a:hover { opacity: .55; }
.site-header .site-navigation .menu { gap: clamp(10px, 1.6vw, 26px); align-items: center; }

/* سوییچ زبان — قاب مویی */
.site-header nav li.ms-lang-switch a {
  border: 1px solid var(--ink);
  padding: 4px 12px;
  font-size: .72rem;
}
.site-header nav li.ms-lang-switch a:hover { opacity: 1; background: var(--ink); color: #fff !important; }

/* CTA تلگرام — جعبه سیاه */
.site-header nav li.ms-nav-cta a {
  background: var(--ink);
  color: #fff !important;
  border: 1px solid var(--ink);
  padding: 8px 16px;
  font-weight: 700;
  font-size: .72rem;
  text-transform: uppercase;
}
.site-header nav li.ms-nav-cta a:hover { opacity: 1; background: transparent; color: var(--ink) !important; }

/* منوی موبایل قالب مادر */
.site-header .site-navigation-toggle { color: var(--ink); }
.site-navigation-dropdown {
  background: var(--paper);
  border-bottom: 1px solid var(--hair);
}
.site-navigation-dropdown .menu li a {
  font-family: var(--mono-fa);
  font-size: .95rem;
  color: var(--ink) !important;
  padding: 14px var(--pad-x);
  border-top: 1px solid var(--hair-soft);
}

/* ============================================================
   5. پریمیتیوهای v4
   ============================================================ */
.ms4-container {
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--pad-x);
}
.ms4-klabel {
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--mut);
  display: block;
}
.ms4-arr { font-family: var(--mono); display: inline-block; }

.ms4-textlink {
  font-family: var(--mono-fa);
  font-size: .85rem;
  font-weight: 700;
  color: var(--ink);
  border-bottom: 1px solid var(--ink);
  padding-bottom: 3px;
  transition: opacity .15s ease;
  display: inline-flex;
  gap: 8px;
  align-items: center;
}
.ms4-textlink:hover { opacity: .55; }

/* ============================================================
   6. هیرو — آناتومی DavidSenra: اسم فشرده‌ی یک‌خطی وسط، تگ‌لاین،
   کات‌اوت روی سفید خالص چسبیده به خط پایین، CTA کنار عکس
   ============================================================ */
.ms4-hero { border-bottom: 1px solid var(--hair); overflow: hidden; }
.ms4-hero-in {
  min-height: calc(100svh - var(--header-h));
  display: flex;
  flex-direction: column;
  align-items: center; /* اسم پهن‌تر از کانتینر هم قرینه سرریز می‌شود */
  padding-top: clamp(30px, 6vh, 70px);
}
.ms4-name {
  font-family: var(--disp);
  font-weight: 900;
  font-stretch: 64%;
  text-transform: uppercase;
  line-height: .84;
  letter-spacing: -0.005em;
  font-size: clamp(3.8rem, 16.5vw, 15rem);
  white-space: nowrap;
  text-align: center;
  margin: 0;
  color: var(--ink);
}
.ms4-tag {
  font-family: var(--mono);
  font-size: clamp(.78rem, 1.2vw, .98rem);
  letter-spacing: .02em;
  color: #3d3d3d;
  margin: clamp(16px, 2.6vh, 30px) 0 0;
  text-align: center;
}

/* صحنه: عکس وسط، CTA در ستون کناری (در RTL خودکار قرینه) */
.ms4-stage {
  flex: 1 1 auto;
  width: 100%;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: end;
  gap: clamp(14px, 2.5vw, 44px);
  margin-top: clamp(8px, 1.8vh, 24px);
}
.ms4-hero-photo {
  margin: 0;
  grid-column: 2;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.ms4-hero-photo img {
  display: block;
  width: min(74vw, 460px);
  height: auto;
  /* کات‌اوت روی سفید — بدون قاب، بدون پس‌زمینه، بدون سایه */
}
.ms4-hero-cta {
  grid-column: 3;
  align-self: center;
  justify-self: start;
  max-width: 250px;
  font-size: .88rem;
  line-height: 1.9;
  color: var(--mut);
}
.ms4-hero-cta p { margin: 0 0 16px; }
.ms4-btn-ink {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--ink);
  color: #fff !important;
  border: 1px solid var(--ink);
  font-family: var(--mono-fa);
  font-weight: 700;
  font-size: .78rem;
  letter-spacing: .04em;
  padding: 13px 22px;
  transition: background .16s ease, color .16s ease;
}
.ms4-btn-ink:hover { background: transparent; color: var(--ink) !important; }

/* ============================================================
   7. سکشن‌های شماره‌دار
   ============================================================ */
.ms4-sec { border-top: 1px solid var(--hair); }
.ms4-hero + .ms4-sec { border-top: none; } /* هیرو خودش خط پایین دارد — دوبل نشود */
.ms4-sec-grid {
  display: grid;
  grid-template-columns: minmax(150px, 300px) minmax(0, 1fr);
  gap: clamp(28px, 5vw, 88px);
  padding-block: clamp(64px, 9vw, 128px);
  align-items: start;
}
.ms4-rail { position: sticky; top: calc(var(--header-h) + 32px); }
.ms4-num {
  font-family: var(--disp);
  font-weight: 900;
  font-stretch: 110%;
  font-size: clamp(3.2rem, 6vw, 5.6rem);
  line-height: 1;
  display: block;
  color: transparent;
  -webkit-text-stroke: 1.5px var(--ink);
  margin-bottom: 14px;
}
@supports not (-webkit-text-stroke: 1px black) {
  .ms4-num { color: #e2e2e2; }
}
.ms4-rail .ms4-klabel { margin-bottom: 6px; }
.ms4-rail h2 {
  font-size: clamp(1.35rem, 2.2vw, 1.8rem);
  margin: 0;
  font-weight: 800;
}
html[lang^="en"] .ms4-rail h2 {
  text-transform: uppercase;
  letter-spacing: .01em;
  font-stretch: 108%;
}

.ms4-body { max-width: 46rem; }
.ms4-lead {
  font-size: clamp(1.45rem, 2.6vw, 2.1rem);
  font-weight: 800;
  line-height: 1.6;
  margin: 0 0 22px;
  color: var(--ink);
}
html[lang^="en"] .ms4-lead { line-height: 1.3; letter-spacing: -0.015em; }
.ms4-body p:not(.ms4-lead) { color: #333; margin: 0 0 20px; }
.ms4-body > :last-child { margin-bottom: 0; }

/* ============================================================
   8. ردیف‌ها — هاور معکوس
   ============================================================ */
.ms4-rows { display: block; margin-top: 8px; }
.ms4-row {
  display: grid;
  grid-template-columns: minmax(0, 15rem) minmax(0, 1fr) auto;
  gap: 10px 24px;
  align-items: baseline;
  padding: 20px 10px;
  border-top: 1px solid var(--hair-soft);
  color: var(--ink);
  transition: background .16s ease, color .16s ease;
}
.ms4-rows .ms4-row:last-child { border-bottom: 1px solid var(--hair-soft); }
.ms4-row-t {
  font-weight: 800;
  font-size: 1.05rem;
  line-height: 1.5;
}
html[lang^="en"] .ms4-row-t,
.ms4-row-t[dir="ltr"] {
  font-family: var(--disp);
  text-transform: uppercase;
  letter-spacing: .01em;
  font-stretch: 106%;
}
.ms4-row-d { color: var(--mut); font-size: .93rem; line-height: 1.8; }
.ms4-row .ms4-arr { color: var(--mut-2); transition: transform .16s ease, color .16s ease; }
a.ms4-row:hover { background: var(--ink); color: #fff; }
a.ms4-row:hover .ms4-row-d { color: #b5b5b5; }
a.ms4-row:hover .ms4-arr { color: #fff; transform: translateX(-4px); }
html[lang^="en"] a.ms4-row:hover .ms4-arr { transform: translateX(4px); }

/* چیپ‌های حوزه تمرکز */
.ms4-chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.ms4-chips li {
  list-style: none;
  font-family: var(--mono-fa);
  font-size: .78rem;
  letter-spacing: .03em;
  border: 1px solid var(--ink);
  padding: 7px 14px;
  white-space: nowrap;
}
.ms4-chips { padding: 0; margin-bottom: 0; }

/* ============================================================
   9. کسب‌وکارها
   ============================================================ */
.ms4-co {
  display: block;
  padding: clamp(28px, 4vw, 44px) 10px;
  border-top: 1px solid var(--hair-soft);
  color: var(--ink);
  transition: background .16s ease, color .16s ease;
}
.ms4-co:last-of-type { border-bottom: 1px solid var(--hair-soft); }
.ms4-co-head {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
.ms4-co-name {
  font-family: var(--disp);
  font-weight: 900;
  font-stretch: 114%;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  font-size: clamp(1.7rem, 3.6vw, 2.8rem);
  line-height: 1;
}
.ms4-co-role {
  font-family: var(--mono-fa);
  font-size: .7rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  border: 1px solid currentColor;
  padding: 5px 10px;
}
.ms4-co-d { color: var(--mut); margin: 0; max-width: 40rem; font-size: .97rem; }
.ms4-co-url {
  font-family: var(--mono);
  font-size: .8rem;
  color: var(--mut-2);
  display: inline-block;
  margin-top: 14px;
  transition: color .16s ease;
}
a.ms4-co:hover { background: var(--ink); color: #fff; }
a.ms4-co:hover .ms4-co-d { color: #b5b5b5; }
a.ms4-co:hover .ms4-co-url { color: #fff; }

/* ============================================================
   9.5 کتاب
   ============================================================ */
.ms4-book {
  display: grid;
  grid-template-columns: minmax(170px, 270px) minmax(0, 1fr);
  gap: clamp(26px, 4vw, 52px);
  align-items: start;
}
a.ms4-book-cover {
  display: block;
  transition: transform .2s ease;
}
a.ms4-book-cover:hover { transform: translateY(-5px); }
.ms4-book-cover img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--hair-soft);
}
.ms4-book-title {
  font-family: var(--disp);
  font-weight: 900;
  font-stretch: 106%;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  font-size: clamp(1.5rem, 2.8vw, 2.3rem);
  line-height: 1.05;
  margin: 0 0 12px;
}
.ms4-book-sub {
  font-family: var(--mono);
  font-size: .76rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--mut);
  display: block;
  margin-bottom: 20px;
}
.ms4-book-note {
  font-family: var(--mono);
  font-size: .7rem;
  letter-spacing: .08em;
  color: var(--mut-2);
  display: block;
  margin-top: 18px;
}
@media (max-width: 640px) {
  .ms4-book { grid-template-columns: 1fr; }
  .ms4-book-cover { max-width: 240px; }
}

/* ============================================================
   9.7 صفحه شروع — هدر صفحه + شبکه ویدیو (فاساد یوتیوب)
   ============================================================ */
.ms4-page-head { border-bottom: 1px solid var(--hair); }
.ms4-page-head-in { padding-block: clamp(44px, 7vw, 88px); }
.ms4-page-head .ms4-klabel { margin-bottom: 14px; }
.ms4-page-head h1 {
  font-size: clamp(2.3rem, 6vw, 4.2rem);
  font-weight: 900;
  line-height: 1.2;
  margin: 0 0 16px;
}
html[lang^="en"] .ms4-page-head h1 {
  font-family: var(--disp);
  font-stretch: 110%;
  text-transform: uppercase;
  line-height: 1;
}
.ms4-page-head .ms4-lead2 {
  font-size: 1.08rem;
  color: var(--mut);
  max-width: 44rem;
  margin: 0;
}
.ms4-featured { max-width: 860px; margin-top: clamp(28px, 4vw, 44px); }

.ms4-vgrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 16px;
  margin-top: 22px;
}
.ms4-v {
  display: block;
  border: 1px solid var(--hair-soft);
  color: var(--ink);
  background: #fff;
  transition: border-color .16s ease;
}
.ms4-v:hover { border-color: var(--ink); }
.ms4-v-thumb {
  display: block;
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #111;
}
.ms4-v-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: grayscale(1) contrast(1.04);
  transition: filter .25s ease;
}
.ms4-v:hover .ms4-v-thumb img { filter: grayscale(0); }
.ms4-v-thumb iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.ms4-v-n {
  position: absolute;
  top: 0;
  inset-inline-start: 0;
  background: var(--ink);
  color: #fff;
  font-family: var(--mono);
  font-size: .68rem;
  letter-spacing: .06em;
  padding: 5px 9px;
  z-index: 2;
}
.ms4-v-play {
  position: absolute;
  bottom: 0;
  inset-inline-start: 0;
  background: #fff;
  color: var(--ink);
  font-family: var(--mono);
  font-size: .68rem;
  letter-spacing: .06em;
  padding: 5px 9px;
  z-index: 2;
}
.ms4-v-t {
  display: block;
  padding: 12px 14px 4px;
  font-size: .85rem;
  font-weight: 600;
  line-height: 1.75;
}
.ms4-v-meta {
  display: block;
  padding: 0 14px 12px;
  font-family: var(--mono);
  font-size: .68rem;
  color: var(--mut-2);
}
.ms4-v:not(:has(.ms4-v-meta)) .ms4-v-t { padding-bottom: 12px; }
/* آرشیو ویدیوها: جدیدترین تمام‌عرض */
.ms4-varch .ms4-page-head-in { padding-bottom: clamp(24px, 4vw, 40px); }
.ms4-varch-list { padding-block: clamp(28px, 5vw, 56px) clamp(56px, 8vw, 96px); }
.ms4-v-lg { grid-column: 1 / -1; }
.ms4-v-lg .ms4-v-t { font-size: 1.05rem; padding: 16px 18px 6px; }
.ms4-v-lg .ms4-v-meta { padding: 0 18px 16px; }

/* ============================================================
   9.8 لندینگ «ترید با من» — موبایل‌فرست، تک‌هدف
   ============================================================ */
body.ms4-landing .site-header,
body.ms4-landing .site-footer { display: none; }

.ms4-land-bar {
  position: sticky;
  top: 0;
  z-index: 200;
  background: var(--paper);
  border-bottom: 1px solid var(--hair);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 58px;
  padding-inline: max(var(--pad-x), calc((100% - var(--container)) / 2));
}
.ms4-land-bar .ms4-land-mark {
  font-weight: 800;
  font-size: .95rem;
  color: var(--ink);
}
.ms4-land-bar .ms4-btn-ink { padding: 9px 16px; font-size: .72rem; }

/* هیرو لندینگ */
.ms4-land-hero {
  border-bottom: 1px solid var(--hair);
  overflow: hidden;
}
.ms4-land-hero-in {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 340px);
  gap: clamp(16px, 3vw, 48px);
  align-items: end;
  min-height: min(88svh, 780px);
}
.ms4-land-copy {
  padding-block: clamp(40px, 7vh, 80px);
  align-self: center;
}
.ms4-live {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--mono);
  font-size: .7rem;
  letter-spacing: .12em;
  border: 1px solid var(--ink);
  padding: 7px 13px;
  margin-bottom: clamp(18px, 3vh, 28px);
}
.ms4-live-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--ink);
}
@media (prefers-reduced-motion: no-preference) {
  .ms4-live-dot { animation: ms4-pulse 1.6s ease-in-out infinite; }
  @keyframes ms4-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: .25; transform: scale(.75); }
  }
}
.ms4-land-title {
  font-size: clamp(3rem, 12vw, 6.8rem);
  font-weight: 900;
  line-height: 1.12;
  margin: 0 0 18px;
  letter-spacing: -0.01em;
}
.ms4-land-lead {
  font-size: clamp(1.02rem, 1.5vw, 1.2rem);
  line-height: 2;
  color: #333;
  max-width: 34rem;
  margin: 0 0 14px;
}
.ms4-land-min {
  font-family: var(--mono);
  font-size: .74rem;
  letter-spacing: .1em;
  color: var(--mut);
  display: block;
  margin-bottom: clamp(22px, 4vh, 34px);
}
.ms4-land-cta-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.ms4-btn-ink.ms4-btn-lg { padding: 17px 30px; font-size: .88rem; }
.ms4-btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--ink);
  background: transparent;
  color: var(--ink) !important;
  font-family: var(--mono-fa);
  font-weight: 700;
  font-size: .78rem;
  padding: 15px 24px;
  transition: background .16s ease, color .16s ease;
}
.ms4-btn-ghost:hover { background: var(--ink); color: #fff !important; }
.ms4-land-photo { margin: 0; align-self: end; display: flex; justify-content: center; }
.ms4-land-photo img { display: block; width: min(64vw, 320px); height: auto; }

/* نوار متحرک */
.ms4-marquee {
  border-bottom: 1px solid var(--hair);
  background: var(--ink);
  color: #fff;
  overflow: hidden;
  white-space: nowrap;
  padding-block: 11px;
}
.ms4-marquee-track {
  display: inline-block;
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .14em;
}
@media (prefers-reduced-motion: no-preference) {
  .ms4-marquee-track { animation: ms4-marq 26s linear infinite; }
  @keyframes ms4-marq { from { transform: translateX(0); } to { transform: translateX(-50%); } }
}

/* هست / نیست */
.ms4-fit { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 6px; }
.ms4-fit-card { border: 1px solid var(--ink); padding: clamp(20px, 3vw, 30px); }
.ms4-fit-card.is-not { background: var(--ink); color: #fff; border-color: var(--ink); }
.ms4-fit-card h3 {
  font-size: 1.02rem;
  margin: 0 0 14px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.ms4-fit-card.is-not h3 { color: #fff; }
.ms4-fit-card ul { list-style: none; margin: 0; padding: 0; }
.ms4-fit-card li {
  padding: 9px 0;
  border-top: 1px solid var(--hair-soft);
  font-size: .92rem;
  line-height: 1.9;
}
.ms4-fit-card.is-not li { border-top-color: var(--dark-hair); color: #cfcfcf; }
.ms4-fit-tick { font-family: var(--mono); font-size: .8rem; }

/* قدم‌ها */
.ms4-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 6px; counter-reset: none; }
.ms4-step { border: 1px solid var(--hair-soft); padding: clamp(18px, 3vw, 28px); }
.ms4-step-n {
  font-family: var(--disp);
  font-weight: 900;
  font-stretch: 110%;
  font-size: 2.4rem;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1.2px var(--ink);
  display: block;
  margin-bottom: 12px;
}
@supports not (-webkit-text-stroke: 1px black) { .ms4-step-n { color: #e2e2e2; } }
.ms4-step h3 { font-size: 1rem; margin: 0 0 8px; }
.ms4-step p { font-size: .88rem; color: var(--mut); margin: 0; line-height: 1.9; }

/* FAQ */
.ms4-faq { margin-top: 6px; }
.ms4-faq details { border-top: 1px solid var(--hair-soft); }
.ms4-faq details:last-child { border-bottom: 1px solid var(--hair-soft); }
.ms4-faq summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  padding: 16px 6px;
  font-weight: 700;
  font-size: .98rem;
}
.ms4-faq summary::-webkit-details-marker { display: none; }
.ms4-faq summary::after {
  content: '+';
  font-family: var(--mono);
  font-size: 1rem;
  transition: transform .18s ease;
}
.ms4-faq details[open] summary::after { transform: rotate(45deg); }
.ms4-faq details p { margin: 0; padding: 0 6px 18px; color: var(--mut); font-size: .93rem; }

/* فرم لید — روی بند سیاه */
.ms4-lead-band { padding-block: clamp(64px, 10vw, 120px); }
.ms4-lead-band .ms4-klabel { color: #9a9a9a; margin-bottom: 16px; }
.ms4-lead-band h2 { color: #fff; font-size: clamp(1.9rem, 4.5vw, 3rem); margin: 0 0 12px; line-height: 1.35; }
.ms4-lead-band .ms4-lead-sub { color: #b5b5b5; max-width: 40rem; margin: 0 0 36px; }
.ms4-form { max-width: 34rem; }
.ms4-field { margin-bottom: 22px; }
.ms4-field label {
  display: block;
  font-family: var(--mono-fa);
  font-size: .72rem;
  letter-spacing: .04em;
  color: #9a9a9a;
  margin-bottom: 8px;
}
.ms4-field input,
.ms4-field select {
  width: 100%;
  background: transparent;
  border: 1px solid #3a3a3a;
  color: #fff;
  font-size: 1rem;
  padding: 14px 15px;
  transition: border-color .15s ease, background .15s ease;
}
.ms4-field input:focus,
.ms4-field select:focus {
  outline: none;
  border-color: #fff;
  background: rgba(255, 255, 255, .04);
}
.ms4-field input::placeholder { color: #5c5c5c; }
.ms4-field select {
  appearance: none;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23ffffff' fill='none'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: left 15px center;
  padding-inline-end: 15px;
}
html[lang^="en"] .ms4-field select { background-position: right 15px center; }
.ms4-field select option { color: #0a0a0a; background: #fff; }
.ms4-form .ms4-btn { width: 100%; justify-content: center; padding: 18px; font-size: .95rem; }
.ms4-form-note {
  font-family: var(--mono-fa);
  font-size: .7rem;
  color: #6e6e6e;
  display: block;
  margin-top: 16px;
  letter-spacing: 0;
}
.ms4-form-err { color: #ff9d9d; font-size: .85rem; margin-top: 14px; display: none; }
.ms4-hp { position: absolute; inset-inline-start: -9999px; opacity: 0; height: 0; overflow: hidden; }
.ms4-lead-ok { display: none; max-width: 34rem; }
.ms4-lead-ok .ms4-ok-mark {
  font-family: var(--mono);
  font-size: 2rem;
  border: 1px solid #fff;
  width: 64px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
}
.ms4-lead-ok h3 { color: #fff; font-size: 1.5rem; margin: 0 0 10px; }
.ms4-lead-ok p { color: #b5b5b5; margin: 0 0 24px; }
.ms4-lead-ok p:has(a) { margin-bottom: 12px; }

/* جداکننده «یا» + دکمه ghost روی زمینه سیاه (میان‌بر پشتیبان) */
.ms4-or {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 24px 0 18px;
  color: #6e6e6e;
  font-family: var(--mono-fa);
  font-size: .72rem;
  letter-spacing: 0;
}
.ms4-or::before,
.ms4-or::after { content: ''; flex: 1; border-top: 1px solid var(--dark-hair); }
.ms4-dark .ms4-btn-ghost { border-color: #fff; color: #fff !important; }
.ms4-dark .ms4-btn-ghost:hover { background: #fff; color: var(--ink) !important; }
.ms4-form .ms4-btn-ghost { width: 100%; justify-content: center; padding: 15px; }

/* ریسک + فوتر مینی */
.ms4-land-risk {
  border-top: 1px solid var(--dark-hair);
  padding-block: 26px;
  font-family: var(--mono-fa);
  font-size: .7rem;
  letter-spacing: 0;
  color: #8a8a8a;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 10px 24px;
}
.ms4-land-risk a { color: #b5b5b5; }

/* ============================================================
   9.9 لندینگ «صرافی‌های من» — تک‌ستونه، موبایل‌فرست، دایرکت‌پسند
   ============================================================ */
.ms4-ex-wrap { max-width: 34rem; margin-inline: auto; padding: 0 20px 56px; }
.ms4-ex-head { padding: clamp(34px, 6vh, 60px) 0 6px; }
.ms4-ex-head h1 { font-size: clamp(1.85rem, 6.4vw, 2.5rem); margin: 12px 0 12px; line-height: 1.45; }
.ms4-ex-head p { color: var(--mut); font-size: .97rem; line-height: 2; margin: 0; }
.ms4-ex-list { display: grid; gap: 16px; margin-top: 28px; }
.ms4-ex-card {
  border: 1px solid var(--hair-soft);
  padding: 20px;
  position: relative;
  transition: border-color .15s ease;
}
.ms4-ex-card:hover { border-color: var(--ink); }
.ms4-ex-i {
  position: absolute;
  top: 14px;
  inset-inline-end: 16px;
  font-family: var(--mono);
  font-size: .65rem;
  color: var(--mut-2);
}
.ms4-ex-top { display: flex; align-items: center; gap: 14px; margin-bottom: 10px; }
.ms4-ex-logo {
  width: 56px;
  height: 56px;
  flex: 0 0 56px;
  background: var(--ink);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--disp);
  font-weight: 900;
  font-stretch: 110%;
  font-size: 1.5rem;
}
/* لوگوی واقعی: رنگی — تنها لکه‌های رنگ صفحه */
.ms4-ex-logo.has-img {
  background: #fff;
  border: 1px solid var(--hair-soft);
  padding: 5px;
}
.ms4-ex-logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
/* لیست مزیت‌ها */
.ms4-ex-perks { list-style: none; margin: 4px 0 16px; padding: 0; }
.ms4-ex-perks li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 8px 0;
  border-top: 1px solid var(--hair-soft);
  font-size: .88rem;
  line-height: 1.9;
  color: #333;
}
.ms4-ex-perks li::before {
  content: '✓';
  font-family: var(--mono);
  font-size: .8rem;
  color: var(--ink);
  margin-top: 3px;
  flex: 0 0 auto;
}
.ms4-ex-name {
  font-family: var(--disp);
  font-weight: 900;
  font-stretch: 108%;
  text-transform: uppercase;
  font-size: 1.25rem;
  letter-spacing: .01em;
  line-height: 1.2;
}
.ms4-ex-use { color: #333; font-size: .93rem; line-height: 1.95; margin: 0 0 12px; }
.ms4-ex-perk {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--mono-fa);
  letter-spacing: 0;
  font-size: .74rem;
  border: 1px solid var(--ink);
  padding: 6px 12px;
  margin-bottom: 14px;
}
.ms4-ex-perk::before { content: '✓'; font-family: var(--mono); }
.ms4-ex-card .ms4-btn-ink { width: 100%; justify-content: center; padding: 15px; font-size: .86rem; }
.ms4-ex-note {
  margin-top: 30px;
  padding-top: 22px;
  border-top: 1px solid var(--hair-soft);
  font-size: .8rem;
  color: var(--mut);
  line-height: 2.1;
}
.ms4-ex-note .ms4-klabel { margin-bottom: 8px; }
.ms4-ex-foot {
  margin-top: 26px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px 20px;
  flex-wrap: wrap;
  font-family: var(--mono-fa);
  letter-spacing: 0;
  font-size: .7rem;
  color: var(--mut-2);
}
.ms4-ex-preview {
  font-family: var(--mono-fa);
  letter-spacing: 0;
  font-size: .72rem;
  background: #f5f5f5;
  border: 1px dashed var(--mut-2);
  padding: 8px 12px;
  margin-top: 16px;
  color: var(--mut);
}

/* CTA چسبان موبایل */
.ms4-land-sticky {
  position: fixed;
  bottom: 0;
  inset-inline: 0;
  z-index: 300;
  display: none;
  padding: 10px max(14px, env(safe-area-inset-left)) max(10px, env(safe-area-inset-bottom));
  background: linear-gradient(to top, rgba(255,255,255,.96) 65%, rgba(255,255,255,0));
}
.ms4-land-sticky.gone { display: none !important; }
.ms4-land-sticky .ms4-btn-ink { width: 100%; justify-content: center; padding: 16px; font-size: .9rem; }

@media (max-width: 900px) {
  .ms4-land-hero-in { grid-template-columns: 1fr; min-height: 0; align-items: start; }
  .ms4-land-copy { padding-block: clamp(34px, 6vh, 56px) 6px; }
  .ms4-land-photo { order: 2; }
  .ms4-land-photo img { width: min(58vw, 250px); }
  .ms4-fit { grid-template-columns: 1fr; }
  .ms4-steps { grid-template-columns: 1fr; }
  .ms4-land-sticky { display: block; }
  .ms4-land-bar .ms4-btn-ink { display: none; }
}

/* ============================================================
   9.9 مقالات — آرشیو + تک‌مقاله
   ============================================================ */
.ms4-container-narrow {
  max-width: 46rem;
  margin-inline: auto;
  padding-inline: var(--pad-x);
}
.ms4-page-head { border-bottom: 1px solid var(--hair); }
.ms4-page-head-in { padding-block: clamp(44px, 7vw, 80px) clamp(30px, 5vw, 52px); }
.ms4-page-head h1 {
  font-size: clamp(2.3rem, 5.5vw, 4rem);
  font-weight: 900;
  margin: 10px 0 12px;
  line-height: 1.2;
}
html[lang^="en"] .ms4-page-head h1 {
  text-transform: uppercase;
  font-stretch: 110%;
  letter-spacing: -0.01em;
}
.ms4-lead2 {
  color: var(--mut);
  max-width: 40rem;
  margin: 0;
  font-size: 1.05rem;
}
.ms4-featured { max-width: 56rem; margin-top: clamp(22px, 4vw, 36px); }

/* لیست آرشیو */
.ms4-arch-list { padding-block: clamp(28px, 4vw, 48px) clamp(56px, 8vw, 88px); }
.ms4-arch-item {
  display: grid;
  grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
  gap: clamp(18px, 3vw, 40px);
  align-items: start;
  padding-block: clamp(24px, 3.5vw, 38px);
  border-bottom: 1px solid var(--hair-soft);
  color: var(--ink);
  text-decoration: none !important;
}
.ms4-arch-item * { text-decoration: none !important; }
.ms4-arch-thumb {
  display: block;
  overflow: hidden;
  border: 1px solid var(--hair-soft);
}
.ms4-arch-thumb img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  transition: transform .3s ease;
}
.ms4-arch-item:hover .ms4-arch-thumb img { transform: scale(1.035); }
.ms4-arch-body { display: block; }
.ms4-arch-date {
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .1em;
  color: var(--mut-2);
  display: block;
  margin-bottom: 8px;
}
.ms4-arch-item h2 {
  font-size: clamp(1.25rem, 2.4vw, 1.7rem);
  font-weight: 800;
  margin: 0 0 10px;
  line-height: 1.55;
  transition: opacity .15s ease;
}
.ms4-arch-item:hover h2 { opacity: .6; }
.ms4-arch-ex {
  display: block;
  color: var(--mut);
  font-size: .95rem;
  line-height: 1.95;
  margin-bottom: 12px;
}
.ms4-arch-more {
  font-family: var(--mono-fa);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: 0;
  border-bottom: 1px solid var(--ink);
  padding-bottom: 2px;
}
.ms4-arch-pag { margin-top: 28px; font-family: var(--mono-fa); }
.ms4-arch-pag .page-numbers {
  display: inline-block;
  border: 1px solid var(--hair-soft);
  padding: 8px 14px;
  margin-inline-end: 8px;
  font-size: .8rem;
  color: var(--ink);
  text-decoration: none !important;
}
.ms4-arch-pag .page-numbers.current,
.ms4-arch-pag .page-numbers:hover { background: var(--ink); color: #fff; border-color: var(--ink); }
.ms4-arch-empty { color: var(--mut); padding-block: 40px; }

/* تک‌مقاله */
.ms4-post-head { border-bottom: 1px solid var(--hair); }
.ms4-post-head > div { padding-block: clamp(36px, 6vw, 64px) clamp(26px, 4vw, 44px); }
.ms4-post-back {
  font-family: var(--mono-fa);
  font-size: .74rem;
  color: var(--mut);
  display: inline-block;
  margin-bottom: 22px;
  letter-spacing: 0;
  text-decoration: none !important;
}
.ms4-post-back:hover { color: var(--ink); }
.ms4-post-head h1 {
  font-size: clamp(1.75rem, 4.2vw, 2.9rem);
  font-weight: 900;
  line-height: 1.45;
  margin: 12px 0 14px;
}
.ms4-post-lead { color: var(--mut); font-size: 1.08rem; line-height: 2; margin: 0; }
.ms4-post-cover { margin: 0; padding-block: clamp(26px, 4vw, 44px) 0; }
.ms4-post-cover img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--hair-soft);
}
.ms4-post-body { padding-block: clamp(30px, 5vw, 52px) clamp(24px, 4vw, 40px); }
.ms4-post-body > p { margin: 0 0 22px; line-height: 2.15; font-size: 1.06rem; }
.ms4-post-body h2 {
  font-size: clamp(1.3rem, 2.6vw, 1.65rem);
  margin: 2.4em 0 .8em;
  padding-top: 1.1em;
  border-top: 1px solid var(--hair-soft);
  line-height: 1.6;
}
.ms4-post-body h3 { font-size: 1.12rem; margin: 1.8em 0 .6em; }
.ms4-post-body ul,
.ms4-post-body ol { margin: 0 0 22px; padding-inline-start: 1.3em; }
.ms4-post-body li { margin-bottom: 10px; line-height: 2.05; }
.ms4-post-body li::marker { color: var(--mut-2); font-family: var(--mono); }
.ms4-post-body blockquote {
  border-inline-start: 2px solid var(--ink);
  margin: 28px 0;
  padding: 4px 22px;
  color: var(--mut);
  font-weight: 600;
}
.ms4-post-body blockquote p { margin: 0; }
.ms4-post-body a { color: var(--ink); font-weight: 700; text-underline-offset: 4px; }
.ms4-post-body figure.wp-block-table { margin: 28px 0; overflow-x: auto; }
.ms4-post-body table {
  width: 100%;
  border-collapse: collapse;
  font-size: .95rem;
}
.ms4-post-body th {
  background: var(--ink);
  color: #fff;
  font-family: var(--mono-fa);
  font-size: .78rem;
  letter-spacing: 0;
  padding: 12px 14px;
  text-align: start;
}
.ms4-post-body td {
  border: 1px solid var(--hair-soft);
  padding: 11px 14px;
  line-height: 1.9;
}
.ms4-post-body tr:nth-child(even) td { background: #f7f7f7; }

/* جعبه CTA انتهای مقاله */
.ms4-post-cta {
  background: var(--ink);
  color: #fff;
  padding: clamp(26px, 4vw, 40px);
  margin: 40px 0 8px;
}
.ms4-post-cta .ms4-klabel { color: #9a9a9a; margin-bottom: 12px; }
.ms4-post-cta p { color: #cfcfcf; margin: 0 0 20px; line-height: 2; }
.ms4-post-cta .ms4-btn { font-size: .85rem; padding: 14px 24px; }
.ms4-post-foot {
  padding-block: 8px clamp(56px, 8vw, 88px);
}

@media (max-width: 760px) {
  .ms4-arch-item { grid-template-columns: 1fr; gap: 14px; }
  .ms4-arch-thumb { max-width: 100%; }
}

/* ============================================================
   10. بند سیاه — خبرنامه + فوتر
   ============================================================ */
.ms4-dark { background: var(--ink); color: #fff; }
.ms4-dark ::selection { background: #fff; color: var(--ink); }
.ms4-nl { padding-block: clamp(72px, 11vw, 140px); }
.ms4-nl .ms4-klabel { color: #9a9a9a; margin-bottom: 18px; }
.ms4-nl h2 {
  color: #fff;
  font-size: clamp(2rem, 5vw, 3.6rem);
  line-height: 1.3;
  margin: 0 0 18px;
  max-width: 26ch;
}
html[lang^="en"] .ms4-nl h2 {
  text-transform: uppercase;
  font-stretch: 110%;
  font-weight: 900;
  line-height: 1.05;
  letter-spacing: -0.01em;
}
.ms4-nl p { color: #b5b5b5; max-width: 44rem; margin: 0 0 34px; }
.ms4-btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background: #fff;
  color: var(--ink) !important;
  border: 1px solid #fff;
  font-family: var(--mono-fa);
  font-weight: 700;
  font-size: .9rem;
  letter-spacing: .04em;
  padding: 17px 30px;
  transition: background .16s ease, color .16s ease;
}
.ms4-btn:hover { background: transparent; color: #fff !important; }
.ms4-nl-handle {
  font-family: var(--mono);
  font-size: .78rem;
  color: #777;
  display: block;
  margin-top: 22px;
}

/* فوتر داخل بند سیاه (فقط صفحه اصلی) */
.ms4-foot {
  border-top: 1px solid var(--dark-hair);
  padding-block: 34px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px 32px;
  flex-wrap: wrap;
}
.ms4-foot-mark {
  font-family: var(--disp);
  font-weight: 900;
  font-stretch: 114%;
  text-transform: uppercase;
  letter-spacing: .01em;
  color: #fff;
  font-size: .95rem;
}
.ms4-foot nav { display: flex; gap: 22px; flex-wrap: wrap; }
.ms4-foot a {
  font-family: var(--mono-fa);
  font-size: .76rem;
  letter-spacing: .05em;
  color: #b5b5b5;
  transition: color .15s ease;
}
.ms4-foot a:hover { color: #fff; }
.ms4-foot-c {
  font-family: var(--mono);
  font-size: .7rem;
  color: #6e6e6e;
  flex-basis: 100%;
  margin-top: 4px;
}
/* فوتر پیش‌فرض قالب در صفحه اصلی حذف — نسخه ما داخل بند سیاه است */
.home .site-footer { display: none; }
/* صفحات داخلی: فوتر پیش‌فرض مینیمال مونو */
.site-footer {
  border-top: 1px solid var(--hair-soft);
  padding-block: 26px !important;
  text-align: center;
}
.site-footer .site-description,
.site-footer .copyright p {
  font-family: var(--mono-fa);
  font-size: .72rem;
  letter-spacing: 0;
  color: var(--mut-2);
  margin: 0;
}
.site-footer .site-description { margin-bottom: 4px; }

/* ============================================================
   11. ریویل اسکرول (فقط با JS فعال می‌شود)
   ============================================================ */
@media (prefers-reduced-motion: no-preference) {
  html.ms4-io .ms4-r {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity .65s cubic-bezier(.2, .65, .3, 1), transform .65s cubic-bezier(.2, .65, .3, 1);
  }
  html.ms4-io .ms4-r.in { opacity: 1; transform: none; }
}

/* ============================================================
   12. ریسپانسیو
   ============================================================ */
@media (max-width: 980px) {
  .ms4-stage { grid-template-columns: 1fr; justify-items: center; gap: 10px; }
  .ms4-hero-photo { grid-column: 1; order: 1; }
  .ms4-hero-photo img { width: min(80vw, 420px); }
  .ms4-hero-cta {
    grid-column: 1;
    order: 2;
    align-self: auto;
    justify-self: center;
    max-width: 30rem;
    text-align: center;
    padding: 6px 0 40px;
  }
  .ms4-sec-grid { grid-template-columns: 1fr; gap: 28px; padding-block: clamp(52px, 9vw, 80px); }
  .ms4-rail { position: static; display: grid; grid-template-columns: auto 1fr; align-items: baseline; gap: 4px 16px; }
  .ms4-num { font-size: 2.2rem; margin-bottom: 0; grid-row: 1 / 3; }
  .ms4-rail h2 { font-size: 1.45rem; }
}
@media (max-width: 640px) {
  .ms4-row { grid-template-columns: 1fr auto; }
  .ms4-row-d { grid-column: 1 / -1; order: 3; }
  .ms4-co-name { font-size: 1.9rem; }
  .ms4-foot { flex-direction: column; align-items: flex-start; }
}

/* ============================================================
   13. سازگاری صفحات قدیمی (درباره/یادگیری/رسانه تا ری‌دیزاین)
   ============================================================ */
.ms-container { max-width: var(--ms-container); margin-inline: auto; padding-inline: clamp(18px, 4vw, 36px); }
.ms-section { padding-block: clamp(56px, 8vw, 96px); }
.ms-section-warm { background: #f5f5f5; }
.ms-grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(22px, 3vw, 44px); }
.ms-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(22px, 3vw, 44px); }
@media (max-width: 900px) { .ms-grid-3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .ms-grid-2, .ms-grid-3 { grid-template-columns: 1fr; } }
.ms-eyebrow {
  display: inline-block;
  font-family: var(--mono-fa);
  font-size: .72rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--mut);
  margin-bottom: 16px;
}
.ms-display { font-size: clamp(2.2rem, 5vw, 3.6rem); font-weight: 800; line-height: 1.25; margin: 0 0 20px; }
.ms-lead { font-size: 1.15rem; color: var(--mut); line-height: 1.9; max-width: 38rem; }
.ms-num { font-family: var(--mono); font-size: .8rem; color: var(--mut); display: block; margin-bottom: 8px; }
.ms-section-head { margin-bottom: clamp(28px, 5vw, 48px); }
.ms-section-title { font-size: clamp(1.7rem, 3.2vw, 2.4rem); margin: 0 0 12px; }
.ms-section-sub { color: var(--mut); margin: 0; max-width: 40rem; }
.ms-mark svg { display: none; }
.ms-muted { color: var(--mut); font-size: .875rem; }
.ms-prose { max-width: var(--ms-prose); margin-inline: auto; }
.ms-prose h2 { margin-top: 2.2em; font-size: 1.6rem; }
.ms-prose img { max-width: 100%; height: auto; }
.ms-prose blockquote { border-inline-start: 2px solid var(--ink); margin-inline: 0; padding-inline-start: 20px; color: var(--mut); }

.ms-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 13px 26px;
  border: 1px solid var(--ink);
  background: transparent;
  color: var(--ink) !important;
  font-weight: 700;
  font-size: .92rem;
  cursor: pointer;
  transition: background .16s ease, color .16s ease;
}
.ms-btn:hover { background: var(--ink); color: #fff !important; }
.ms-btn-primary { background: var(--ink); color: #fff !important; }
.ms-btn-primary:hover { background: transparent; color: var(--ink) !important; }
.ms-btn-danger { border-color: var(--ms-danger); color: var(--ms-danger) !important; }
.ms-btn-danger:hover { background: var(--ms-danger); color: #fff !important; }
.ms-textlink { font-weight: 700; color: var(--ink); border-bottom: 1px solid var(--ink); padding-bottom: 2px; }
.ms-textlink:hover { opacity: .6; }

.ms-socials { display: flex; gap: 12px; align-items: center; }
.ms-socials a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border: 1px solid var(--hair-soft);
  color: var(--ink);
  transition: all .16s ease;
}
.ms-socials a:hover { background: var(--ink); color: #fff; border-color: var(--ink); }

.ms-card { display: block; border: 1px solid var(--hair-soft); padding: 24px; color: var(--ink); transition: border-color .16s ease; }
.ms-card:hover { border-color: var(--ink); }
.ms-article-list { list-style: none; padding: 0; margin: 0; }
.ms-article-list a {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 18px;
  align-items: baseline;
  padding: 20px 6px;
  border-bottom: 1px solid var(--hair-soft);
  color: inherit;
  transition: background .16s ease;
}
.ms-article-list a:hover { background: #f4f4f4; }
.ms-article-list .ms-al-date { color: var(--mut); font-size: .82rem; font-family: var(--mono-fa); }
.ms-article-list .ms-al-title { font-weight: 700; font-size: 1.08rem; }
.ms-article-list .ms-al-arrow { color: var(--mut-2); }
@media (max-width: 640px) {
  .ms-article-list a { grid-template-columns: 1fr auto; }
  .ms-article-list .ms-al-date { grid-column: 1 / -1; order: 2; }
}
.ms-band-dark { background: var(--ink); color: #fff; text-align: center; }
.ms-band-dark .ms-section-title { color: #fff; }
.ms-band-dark p { color: #b5b5b5; max-width: 36rem; margin-inline: auto; }
.ms-band-dark .ms-btn { border-color: #fff; color: #fff !important; background: transparent; }
.ms-band-dark .ms-btn:hover { background: #fff; color: var(--ink) !important; }
.ms-band-dark .ms-btn-primary { background: #fff; color: var(--ink) !important; }
.ms-band-dark .ms-socials a { border-color: #555; color: #fff; }
.ms-band-dark .ms-socials a:hover { background: #fff; color: var(--ink); border-color: #fff; }

/* ============================================================
   14. ورود / ثبت‌نام / داشبورد
   ============================================================ */
.ms-auth-card {
  max-width: 420px;
  margin: 72px auto;
  padding: 38px;
  background: var(--ms-card);
  border: 1px solid var(--ink);
}
.ms-auth-card h2 { margin: 0 0 20px; font-size: 1.4rem; }
.ms-auth-card label { font-weight: 600; font-size: .9rem; }
.ms-auth-card input[type="text"],
.ms-auth-card input[type="email"],
.ms-auth-card input[type="password"] {
  width: 100%;
  margin-top: 6px;
  padding: 12px 14px;
  border: 1px solid var(--hair-soft);
  font-size: .98rem;
  background: #f7f7f7;
}
.ms-auth-card input:focus { outline: none; border-color: var(--ink); background: #fff; }
.ms-auth-card .ms-btn { width: 100%; justify-content: center; }
.ms-row label { font-weight: 400; font-size: .9rem; }

.ms-alert {
  background: #fdf3f2;
  color: var(--ms-danger);
  border: 1px solid #f2c7c2;
  padding: 10px 14px;
  margin-bottom: 16px;
  font-size: .9rem;
}

.ms-dashboard { max-width: var(--ms-container); margin: 40px auto; padding: 0 18px; }
.ms-dash-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  padding: 28px;
  background: var(--ms-card);
  border: 1px solid var(--hair-soft);
  margin-bottom: 22px;
}
.ms-dash-head h2 { margin: 0 0 6px; font-size: 1.4rem; }
.ms-dash-head p { margin: 0; }
.ms-dash-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.ms-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; }
@media (max-width: 600px) {
  .ms-dash-head { flex-direction: column; align-items: flex-start; }
}

/* موشن قدیمی — بدون انیمیشن، فقط نمایش */
.ms-fade-in, .ms-fade-in-2 { opacity: 1; }

/* ============================================================
   15. فارسی: حروف فارسی هرگز letter-spacing نمی‌گیرند
   (فاصله بین حروف، اتصال رسم‌الخط را می‌شکند)
   ============================================================ */
html[lang^="fa"] .site-header nav a { letter-spacing: 0; font-size: .875rem; }
html[lang^="fa"] .site-header nav li.ms-lang-switch a,
html[lang^="fa"] .site-header nav li.ms-nav-cta a { font-size: .78rem; }
html[lang^="fa"] .site-navigation-dropdown .menu li a { letter-spacing: 0; }
html[lang^="fa"] .ms4-chips li { letter-spacing: 0; }
html[lang^="fa"] .ms4-textlink { letter-spacing: 0; }
html[lang^="fa"] .ms4-btn { letter-spacing: 0; }
html[lang^="fa"] .ms4-co-role { letter-spacing: 0; }
html[lang^="fa"] .ms4-btn-ink { letter-spacing: 0; }
/* لیبل لاتین در RTL هم‌راستا با بقیه محتوا (ریل، بند خبرنامه، …) */
[dir="rtl"] .ms4-klabel { text-align: right; }