/* ============================================================
   فونت برندِ نمونه — یکان بخ

   فقط چهار وزنی که سند واقعاً استفاده می‌کند بارگذاری می‌شود
   (۱۴۴ کیلوبایت). با هشت وزن کامل، حجم دو برابر می‌شد بدون اینکه
   چیزی به نمایش اضافه کند.

   font-display:swap تا متن بلافاصله با فونت جایگزین دیده شود و
   صفحه منتظر دانلود نماند.
   ============================================================ */
@font-face{
  font-family:'Yekan Bakh';
  src:url('../../font/YekanBakh-Regular.woff2') format('woff2');
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Yekan Bakh';
  src:url('../../font/YekanBakh-SemiBold.woff2') format('woff2');
  font-weight:600; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Yekan Bakh';
  src:url('../../font/YekanBakh-Bold.woff2') format('woff2');
  font-weight:700; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Yekan Bakh';
  src:url('../../font/YekanBakh-ExtraBold.woff2') format('woff2');
  font-weight:800; font-style:normal; font-display:swap;
}

/* ============================================================
   DISIPHEE — Brand Book
   متغیرها از style.css می‌آیند.

   یادداشت برند: پس‌زمینه‌ی متحرک و Glow پیاده نشده‌اند (گرادیان و
   درخشش در برند بوک ممنوع‌اند). حس «زنده بودن» از حرکت خودِ عناصر
   می‌آید، نه از افکت پس‌زمینه.
   ============================================================ */

.bb-sec, .bb-hero, .bb-cta, .bb-crumb, .bb-shell, .bb-pulse{ box-sizing:border-box; }
.bb-sec *, .bb-hero *, .bb-cta *, .bb-shell *, .bb-pulse *{ box-sizing:border-box; }

/* ورود مشترک */
.bb-rise{
  opacity:0; transform:translateY(18px);
  transition:opacity .55s ease, transform .55s ease;
}
.bb-rise.is-in{ opacity:1; transform:none; }

/* ---------- مسیر ناوبری ---------- */
.bb-crumb{ background:var(--white); border-bottom:1px solid var(--stroke); padding:14px var(--dzf-gutter); }
.bb-crumb__inner{
  max-width:var(--dzf-container); margin:0 auto;
  display:flex; align-items:center; flex-wrap:wrap; gap:8px;
  font-size:13px; color:var(--dzf-muted-2);
}
.bb-crumb a{ color:var(--dzf-muted); }
.bb-crumb a:hover{ color:var(--primary); }
.bb-crumb b{ color:var(--primary); font-weight:600; unicode-bidi:plaintext; }

/* ---------- چیپ و تیتر ---------- */
.bb-chip{
  display:inline-block; margin-bottom:12px;
  padding:7px 16px; border-radius:999px;
  border:1px solid var(--stroke);
  font-size:12px; font-weight:700; color:var(--primary);
  unicode-bidi:plaintext;
}
.bb-chip--accent{ background:var(--accent); border-color:var(--accent); }

/* ============================================================
   Brand Pulse — جریان اطلاعات
   ============================================================ */
.bb-pulse{ background:var(--primary); padding:var(--dzf-space-md) var(--dzf-gutter); }
.bb-pulse__inner{ max-width:var(--dzf-container); margin:0 auto; }
.bb-pulse__flow{
  display:grid; grid-template-columns:repeat(4, minmax(0,1fr));
  gap:1px; background:rgba(226,227,231,.14);
  border-radius:16px; overflow:hidden;
  margin:0; padding:0; list-style:none;
  position:relative;
}
.bb-pulse__flow li{
  background:var(--primary);
  padding:14px 16px;
  position:relative; overflow:hidden;
}
.bb-pulse__flow span{ display:block; font-size:13px; font-weight:700; color:var(--bg); unicode-bidi:plaintext; }
.bb-pulse__flow em{ display:block; margin-top:2px; font-style:normal; font-size:11.5px; color:var(--bg); opacity:.5; }
.bb-pulse__flow li.is-here span{ color:var(--accent); }
/* خط نوری که یک‌بار از ابتدا تا انتهای زنجیره می‌رود */
.bb-pulse__flow li::after{
  content:""; position:absolute; inset-inline-start:0; bottom:0;
  width:100%; height:2px; background:var(--accent);
  transform:scaleX(0); transform-origin:right;
  transition:transform .5s ease;
}
.bb-pulse__flow.is-lit li::after{ transform:scaleX(1); }
.bb-pulse__flow.is-lit li:nth-child(2)::after{ transition-delay:.35s; }
.bb-pulse__flow.is-lit li:nth-child(3)::after{ transition-delay:.7s; }
.bb-pulse__flow.is-lit li:nth-child(4)::after{ transition-delay:1.05s; }

/* ============================================================
   هرو
   ============================================================ */
.bb-hero{
  background:var(--white);
  padding:var(--dzf-space-xxl) var(--dzf-gutter);
  border-bottom:1px solid var(--stroke);
}
.bb-hero__inner{
  max-width:var(--dzf-container); margin:0 auto;
  display:grid; grid-template-columns:1.1fr .9fr;
  gap:var(--dzf-space-xl); align-items:center;
}
.bb-hero__t{ margin:0 0 var(--dzf-space-sm); font-weight:800; color:var(--primary); }
.bb-hero__t b{ display:block; font-size:clamp(1.6rem,3.4vw,2.5rem); line-height:1.3; unicode-bidi:plaintext; }
.bb-hero__t span{
  display:block; margin-top:6px;
  font-size:clamp(1rem,1.7vw,1.3rem); font-weight:600; line-height:1.6; color:var(--dzf-muted);
}
.bb-hero__l{ margin:0 0 var(--dzf-space-md); max-width:58ch; font-size:15px; line-height:2; color:var(--dzf-muted); }
.bb-hero__meta{
  display:flex; flex-wrap:wrap; gap:var(--dzf-space-md);
  margin:0 0 var(--dzf-space-md); padding:var(--dzf-space-sm) 0;
  border-top:1px solid var(--stroke); border-bottom:1px solid var(--stroke);
  list-style:none;
}
.bb-hero__meta span{ display:block; font-size:11.5px; color:var(--dzf-muted-2); unicode-bidi:plaintext; }
.bb-hero__meta b{ display:block; margin-top:2px; font-size:15px; font-weight:800; color:var(--primary); }
.bb-hero__btns{ display:flex; flex-wrap:wrap; gap:12px; }

/* ---------- کتاب زنده ---------- */
.bb-hero__book{ display:flex; justify-content:center; perspective:1400px; }
.bb-book{ position:relative; width:min(360px,90%); aspect-ratio:5/4; transform-style:preserve-3d; }
.bb-book__page,
.bb-book__cover{
  position:absolute; inset:0;
  border:1px solid var(--stroke); border-radius:20px;
  padding:var(--dzf-space-md);
}
.bb-book__page{ background:var(--white); }
.bb-book__k{
  display:block; margin-bottom:var(--dzf-space-sm);
  padding-bottom:10px; border-bottom:1px solid var(--stroke);
  font-size:13px; font-weight:700; color:var(--primary); unicode-bidi:plaintext;
}
.bb-book__rows{ display:flex; flex-direction:column; gap:8px; margin-bottom:var(--dzf-space-sm); }
.bb-book__rows i{ display:block; height:9px; border-radius:999px; background:var(--bg); }
.bb-book__sw{ display:flex; gap:8px; margin-bottom:var(--dzf-space-sm); }
.bb-sw{ width:26px; height:26px; border-radius:9px; display:inline-block; }
/* نمونه‌رنگ‌های برندِ نمونه.
   این‌ها عمداً hex ثابت‌اند و از متغیرهای پالت دیزیفی نمی‌آیند —
   پالت یک برند دیگر است، نه پالت ما. اگر روزی رنگ برند دیزیفی
   عوض شود، برند بوکِ نمونه نباید با آن عوض شود. */
.bb-sw--coffee{  background:#3F1D0E; }
.bb-sw--caramel{ background:#A2663C; }
.bb-sw--cream{   background:#E4CDB0; }
.bb-sw--milk{    background:#E6E2D7; }
.bb-sw--matcha{  background:#ABBF9B; }

.bb-book__cover{
  background:var(--primary); border-color:var(--primary);
  display:flex; flex-direction:column; align-items:flex-start; justify-content:space-between;
  transform-origin:right center;
  transform:rotateY(0deg);
  transition:transform 1.4s cubic-bezier(.22,.8,.28,1);
  backface-visibility:hidden;
}
.bb-book.is-open .bb-book__cover{ transform:rotateY(-118deg); }
.bb-book__cover img{ filter:brightness(0) invert(1); }
.bb-book__cover span{ font-size:13px; color:var(--bg); opacity:.6; unicode-bidi:plaintext; }
.bb-book__cover b{
  padding:6px 14px; border-radius:999px;
  background:var(--accent); color:var(--primary);
  font-size:12px; font-weight:700; unicode-bidi:plaintext;
}

/* ============================================================
   بدنه‌ی سند: ریل + محتوا
   ============================================================ */
.bb-shell{
  max-width:var(--dzf-container); margin:0 auto;
  padding:var(--dzf-space-xxl) var(--dzf-gutter);
  display:grid; grid-template-columns:230px 1fr;
  gap:var(--dzf-space-xl);
  align-items:start;
}
.bb-rail{ position:sticky; top:100px; }
.bb-rail ul{ display:flex; flex-direction:column; gap:2px; margin:0; padding:0; list-style:none; }
.bb-rail a{
  display:block; padding:10px 14px; border-radius:12px;
  border-inline-start:2px solid transparent;
  transition:background-color .2s ease, border-color .2s ease;
}
.bb-rail a b{ display:block; font-size:13px; font-weight:600; color:var(--dzf-muted); unicode-bidi:plaintext; }
.bb-rail a span{ display:block; font-size:11.5px; color:var(--dzf-muted-3); }
.bb-rail a:hover{ background:var(--white); }
.bb-rail a.is-on{ background:var(--white); border-inline-start-color:var(--accent); }
.bb-rail a.is-on b{ color:var(--primary); }

/* ============================================================
   پالت برندِ نمونه — فقط داخل سند

   نکته‌ی اصلی این صفحه: چیزی که داخل سند دیده می‌شود، برند بوکِ
   «کافه رسته» است، نه برند بوک دیزیفی. پس دکمه‌ها، برچسب‌ها،
   هشدارها و پیش‌نمایش‌ها هم باید با پالت همان کافه رنگ بگیرند —
   نه با زرد و سرمه‌ای ما.

   به‌جای بازنویسی ده‌ها قانون، همان متغیرهای پالت فقط در محدوده‌ی
   .bb-doc دوباره تعریف می‌شوند. هر قانونی که از قبل var(--accent)
   یا var(--primary) داشت، خودکار رنگ کافه می‌گیرد.

   بیرون از این محدوده — هرو، نوار Pulse، ریل ناوبری و CTA — پوسته‌ی
   خودِ سایت است و باید پالت دیزیفی بماند.
   ============================================================ */
.bb-doc{
  --primary:  #3F1D0E;                  /* قهوه — متن و سطح‌های تیره */
  --accent:   #E4CDB0;                  /* کرم — رنگ تأکیدی */
  --bg:       #E6E2D7;                  /* شیر — پس‌زمینه */
  --white:    #FFFFFF;
  --stroke:   rgba(63,29,14,.14);       /* استروک هم‌رنگ برند، نه خاکستری خنثی */

  --dzf-muted:   rgba(63,29,14,.72);
  --dzf-muted-2: rgba(63,29,14,.48);
  --dzf-muted-3: rgba(63,29,14,.32);

  /* سند با فونت خودِ برند نمونه رندر می‌شود، نه با دانا.
     یک برند بوک واقعی با فونت خودش دیده می‌شود؛ اگر با فونت ما
     نوشته می‌شد، بخش تایپوگرافی حرفی می‌زد که خودش نقضش می‌کرد. */
  font-family:'Yekan Bakh', var(--dzf-font);

  min-width:0; display:flex; flex-direction:column; gap:var(--dzf-space-xxl);
}
.bb-b{ scroll-margin-top:110px; }
.bb-b__h{ margin-bottom:var(--dzf-space-lg); }
.bb-num{
  display:inline-block; margin-bottom:10px;
  padding:5px 12px; border-radius:999px;
  background:var(--accent); color:var(--primary);
  font-size:11.5px; font-weight:700;
}
.bb-b__h h2{
  margin:0 0 8px; font-size:clamp(1.25rem,2.4vw,1.75rem);
  font-weight:800; line-height:1.5; color:var(--primary);
  unicode-bidi:plaintext;
}
.bb-b__h p{ margin:0; max-width:68ch; font-size:14.5px; line-height:1.95; color:var(--dzf-muted); }
.bb-h3{
  margin:var(--dzf-space-lg) 0 var(--dzf-space-sm);
  font-size:15px; font-weight:700; color:var(--primary);
}
.bb-h3:first-of-type{ margin-top:0; }
.bb-note{ margin:var(--dzf-space-sm) 0 0; font-size:13px; line-height:1.9; color:var(--dzf-muted-2); }
.bb-note a{ color:var(--primary); font-weight:600; border-bottom:1.5px solid var(--accent); }

/* ---------- شناسنامه ---------- */
.bb-over{
  display:grid; grid-template-columns:repeat(4, minmax(0,1fr));
  gap:1px; background:var(--stroke);
  border-radius:18px; overflow:hidden; margin:0;
}
.bb-over > div{ background:var(--white); padding:var(--dzf-space-md); }
.bb-over dt{ font-size:11.5px; color:var(--dzf-muted-2); unicode-bidi:plaintext; }
.bb-over dd{ margin:6px 0 0; font-size:15px; font-weight:700; color:var(--primary); unicode-bidi:plaintext; }

/* ---------- هویت ---------- */
.bb-id{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:var(--dzf-space-sm); }
.bb-id__c{
  background:var(--white); border:1px solid var(--stroke);
  border-radius:20px; padding:var(--dzf-space-md);
}
.bb-id__top{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
.bb-id__top strong{ font-size:14.5px; color:var(--primary); unicode-bidi:plaintext; }
.bb-auto{
  padding:4px 10px; border-radius:999px;
  background:var(--accent); color:var(--primary);
  font-size:10px; font-weight:700; unicode-bidi:plaintext;
}
.bb-id__fa{ display:block; margin-top:2px; font-size:12px; color:var(--dzf-muted-2); }
.bb-id__c p{ margin:10px 0 0; font-size:13.5px; line-height:1.9; color:var(--dzf-muted); }

/* ---------- رنگ‌ها ---------- */
.bb-colors{
  display:grid; grid-template-columns:repeat(5, minmax(0,1fr));
  gap:var(--dzf-space-sm); margin:0; padding:0; list-style:none;
}
.bb-color{
  display:block; width:100%; text-align:start; cursor:pointer;
  background:var(--white); border:1px solid var(--stroke);
  border-radius:18px; padding:var(--dzf-space-sm);
  font-family:var(--dzf-font);
  transition:border-color .22s ease;
}
.bb-color:hover{ border-color:var(--primary); }
.bb-color__sw{
  display:block; width:100%; height:56px; border-radius:12px;
  margin-bottom:10px;
  transition:transform .28s cubic-bezier(.22,.8,.28,1);
}
.bb-color:hover .bb-color__sw{ transform:scale(1.05); }
.bb-color b{ display:block; font-size:13px; color:var(--primary); }
.bb-color code{
  display:block; margin-top:3px;
  font-size:11.5px; color:var(--dzf-muted-2); direction:ltr;
  opacity:0; transition:opacity .22s ease;
}
.bb-color:hover code, .bb-color:focus-visible code{ opacity:1; }
.bb-color__hint{
  display:inline-block; margin-top:8px;
  padding:4px 10px; border-radius:999px;
  background:var(--bg); font-size:10.5px; font-weight:700; color:var(--dzf-muted-2);
}
.bb-color.is-copied .bb-color__hint{ background:var(--accent); color:var(--primary); }

/* ---------- تایپوگرافی ---------- */
.bb-type{
  margin:0; padding:0; list-style:none;
  border:1px solid var(--stroke); border-radius:18px; overflow:hidden;
}
.bb-type li{
  display:flex; align-items:center; gap:16px;
  padding:var(--dzf-space-sm) var(--dzf-space-md);
  background:var(--white);
  border-bottom:1px solid var(--stroke);
}
.bb-type li:last-child{ border-bottom:0; }
.bb-type__k{ width:48px; flex-shrink:0; font-size:12px; font-weight:700; color:var(--dzf-muted-2); unicode-bidi:plaintext; }
.bb-type__s{
  flex:1; font-size:clamp(1rem,2vw,1.35rem); color:var(--primary);
  transition:font-weight .4s ease;
}
.bb-type__m{ font-size:11.5px; color:var(--dzf-muted-2); text-align:end; unicode-bidi:plaintext; }

/* ---------- فاصله‌گذاری ---------- */
.bb-space{
  display:grid; grid-template-columns:repeat(4, minmax(0,1fr));
  gap:var(--dzf-space-sm); margin:0; padding:0; list-style:none;
}
.bb-space li{
  background:var(--white); border:1px solid var(--stroke);
  border-radius:18px; padding:var(--dzf-space-md);
}
.bb-space b{ display:block; font-size:1.3rem; font-weight:800; color:var(--primary); }
.bb-space span{ display:block; margin:3px 0 10px; font-size:12px; color:var(--dzf-muted-2); }
.bb-space i{ display:block; height:10px; border-radius:3px; background:var(--accent); }

/* ============================================================
   Live Sync
   ============================================================ */
.bb-sync{
  /* رنگ زنده‌ی دمو؛ JS همین متغیر را عوض می‌کند */
  --live: #E4CDB0;
  --live-ink: #3F1D0E;
  display:grid; grid-template-columns:.85fr 1.15fr;
  gap:var(--dzf-space-md);
  /* سبزِ تیره‌ی برند بود و کارت‌های سفید پیش‌نمایش رویش شناور
     می‌شدند. حالا کرم روشن با استروک سبز: پیش‌نمایش‌ها روی سطحی
     می‌نشینند که خودش بخشی از پالت است، نه یک بلوک تیره‌ی جدا. */
  background:var(--bg);
  border:1px solid var(--stroke);
  border-radius:24px;
  padding:var(--dzf-space-md);
}
.bb-sync__k{ display:block; font-size:12px; color:var(--dzf-muted-2); margin-bottom:10px; }
.bb-sync__opts{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:var(--dzf-space-md); }
.bb-sync__opt{
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 14px; border-radius:999px;
  background:var(--white); cursor:pointer;
  border:1.5px solid var(--stroke);
  font-family:var(--dzf-font); font-size:12.5px; font-weight:600; color:var(--primary);
  transition:border-color .22s ease, background-color .22s ease;
}
.bb-sync__opt i{ width:16px; height:16px; border-radius:6px; }
.bb-sync__opt.is-on{ border-color:var(--primary); background:var(--white); }
/* هشدار «این تغییر روی موارد زیر اثر می‌گذارد» — رنگ‌هایش برای
   زمینه‌ی تیره تنظیم شده بود و روی سطح روشنِ تازه محو می‌شد. */
.bb-sync__warn{
  margin:0 0 var(--dzf-space-sm);
  padding:14px 16px; border-radius:14px;
  background:var(--white);
  border:1px solid var(--stroke);
  border-inline-start:3px solid var(--primary);
}
.bb-sync__warn strong{ display:block; font-size:13px; color:var(--primary); }
.bb-sync__warn span{ display:block; margin-top:6px; font-size:12px; line-height:1.9; color:var(--dzf-muted); unicode-bidi:plaintext; }
.bb-sync__btn{
  /* در پشته‌ی عمودی، دکمه نباید تمام‌عرض شود؛ به اندازه‌ی متنش می‌ماند */
  align-self:flex-start;
  display:inline-block; padding:10px 20px; border-radius:999px;
  background:var(--accent); color:var(--primary);
  font-size:13px; font-weight:700;
}

/* پیش‌نمایش‌ها */
.bb-sync__prev{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:12px; min-width:0; }
.bb-mock{
  min-width:0;
  background:var(--white);
  /* روی سطح تیره‌ی قبلی، لبه‌ی کارت خودبه‌خود دیده می‌شد. روی سطح
     کرم روشن، بدون استروک با پس‌زمینه یکی می‌شود. */
  border:1px solid var(--stroke);
  border-radius:16px; padding:14px;
  display:flex; flex-direction:column; gap:8px;
}
.bb-mock__k{ font-size:10.5px; font-weight:700; color:var(--dzf-muted-2); unicode-bidi:plaintext; }
.bb-mock__bar{ display:flex; gap:4px; }
.bb-mock__bar i{ width:6px; height:6px; border-radius:999px; background:var(--bg); }
.bb-mock__bar i:first-child{ background:var(--live); transition:background-color .45s ease; }
.bb-mock__line{ display:block; height:8px; border-radius:999px; background:var(--bg); }
.bb-mock__hero{ display:flex; flex-direction:column; gap:7px; }
.bb-mock__cta,
.bb-mock__btn{
  align-self:flex-start; margin-top:4px;
  padding:7px 16px; border-radius:999px;
  background:var(--live); color:var(--live-ink);
  font-size:11px; font-weight:700;
  transition:background-color .5s ease, color .5s ease;
}
.bb-mock__sq{
  aspect-ratio:1; border-radius:12px; background:var(--bg);
  padding:12px; display:flex; flex-direction:column; justify-content:flex-end; gap:6px;
  position:relative; overflow:hidden;
}
.bb-mock__blob{
  position:absolute; top:-16px; inset-inline-end:-16px;
  width:70px; height:70px; border-radius:999px;
  background:var(--live);
  transition:background-color .5s ease;
}
.bb-mock__sq .bb-mock__line{ background:var(--white); }
.bb-mock__badge{
  align-self:flex-start;
  padding:5px 12px; border-radius:999px;
  border:1.5px solid var(--live); color:var(--primary);
  font-size:10.5px; font-weight:700;
  transition:border-color .5s ease;
}
.bb-mock__card{
  display:flex; align-items:center; gap:8px;
  padding:10px; border-radius:12px; border:1px solid var(--stroke);
}
.bb-mock__dot{
  width:22px; height:22px; border-radius:8px; flex-shrink:0;
  background:var(--live); transition:background-color .45s ease;
}

/* ============================================================
   کاربرد لوگو
   ============================================================ */
.bb-logo{
  display:grid; grid-template-columns:repeat(4, minmax(0,1fr));
  gap:var(--dzf-space-sm); margin:0; padding:0; list-style:none;
}
.bb-logo__c b{ display:block; margin-top:10px; font-size:13.5px; color:var(--primary); }
.bb-logo__c > span{ display:block; margin-top:3px; font-size:12px; line-height:1.7; color:var(--dzf-muted-2); }
.bb-logo__stage{
  position:relative; overflow:hidden;
  display:flex; align-items:center; justify-content:center;
  height:104px; border-radius:16px;
  background:var(--white); border:1px solid var(--stroke);
}
.bb-logo__stage img{ max-width:70%; height:auto; }
.bb-logo__stage--dark{ background:var(--primary); border-color:var(--primary); }
.bb-logo__stage--dark img{ filter:brightness(0) invert(1); }
.bb-logo__min{ max-width:52% !important; }
/* فضای امن — همان منطق: خودکار، نه با هاور.
   کادر خط‌چین کمی جمع و باز می‌شود تا «حداقل فاصله» به‌جای یک خط
   ثابت، مثل یک اندازه‌گیری دیده شود. */
.bb-logo__stage--space::before{
  content:""; position:absolute; inset:18px;
  border:1px dashed var(--dzf-muted-3); border-radius:10px;
  opacity:0;
  animation:bb-safe 4s ease-in-out infinite;
}
@keyframes bb-safe{
  0%, 12%   { opacity:0; inset:24px; }
  28%, 66%  { opacity:1; inset:18px; }
  84%, 100% { opacity:0; inset:24px; }
}
.bb-logo__stage--busy{ background:var(--bg); }


/* حالت‌های غیرمجاز — با هاور، خطا اجرا می‌شود */
.bb-logo__x{
  position:absolute; top:10px; inset-inline-end:12px;
  width:24px; height:24px; border-radius:999px;
  display:flex; align-items:center; justify-content:center;
  background:var(--primary); color:var(--white);
  font-size:12px; font-weight:700;
  opacity:0; transform:scale(.6);
  transition:opacity .25s ease .45s, transform .25s ease .45s;
}
/* ---------- حالت‌های غیرمجاز: لوپ خودکار ----------

   قبلاً هر چهار خطا فقط با هاور اجرا می‌شدند. دو مشکل داشت: روی
   موبایل هاور وجود ندارد، پس نصف کاربران هیچ‌وقت نمی‌دیدند خطا چیست؛
   و روی دسکتاپ هم کاربر باید حدس می‌زد که باید ماوس ببرد.

   حالا هر کارت چرخه‌ی چهار ثانیه‌ای خودش را دارد و با تأخیر پلکانی
   شروع می‌کند تا هر چهارتا هم‌زمان تکان نخورند — چهار انیمیشن
   هم‌فاز، شلوغ می‌شود.

   هر چرخه سه پرده دارد: حالت درست → خطا → مکث → بازگشت. آن مکث
   عمدی است؛ بدون آن، خطا فقط یک پرش دیده می‌شود نه یک وضعیت. */
.bb-logo--bad .bb-logo__c .bb-logo__stage{
  animation:bb-bad-frame 4s ease-in-out infinite;
  animation-delay:calc(var(--i, 0) * .55s);
}
.bb-logo--bad .bb-logo__x{
  animation:bb-bad-x 4s ease-in-out infinite;
  animation-delay:calc(var(--i, 0) * .55s);
}
.bb-logo__c[data-bad="stretch"] img{ animation:bb-bad-stretch 4s ease-in-out infinite; animation-delay:calc(var(--i,0) * .55s); }
.bb-logo__c[data-bad="rotate"]  img{ animation:bb-bad-rotate  4s ease-in-out infinite; animation-delay:calc(var(--i,0) * .55s); }
.bb-logo__c[data-bad="color"]   img{ animation:bb-bad-color   4s ease-in-out infinite; animation-delay:calc(var(--i,0) * .55s); }
.bb-logo__c[data-bad="busy"]    img{ animation:bb-bad-busy    4s ease-in-out infinite; animation-delay:calc(var(--i,0) * .55s); }

@keyframes bb-bad-frame{
  0%, 22%   { border-color:var(--stroke); }
  30%, 72%  { border-color:var(--primary); }
  84%, 100% { border-color:var(--stroke); }
}
@keyframes bb-bad-x{
  0%, 26%   { opacity:0; transform:scale(.6); }
  34%, 72%  { opacity:1; transform:scale(1); }
  82%, 100% { opacity:0; transform:scale(.6); }
}
@keyframes bb-bad-stretch{
  0%, 20%   { transform:none; }
  32%, 70%  { transform:scaleX(1.45) scaleY(.75); }
  84%, 100% { transform:none; }
}
@keyframes bb-bad-rotate{
  0%, 20%   { transform:none; }
  32%, 70%  { transform:rotate(-14deg); }
  84%, 100% { transform:none; }
}
@keyframes bb-bad-color{
  0%, 20%   { filter:none; }
  32%, 70%  { filter:grayscale(1) contrast(.4) sepia(1) hue-rotate(120deg); }
  84%, 100% { filter:none; }
}
@keyframes bb-bad-busy{
  0%, 20%   { opacity:1; }
  32%, 70%  { opacity:.42; }
  84%, 100% { opacity:1; }
}

/* ============================================================
   لحن
   ============================================================ */
.bb-voice{ display:grid; grid-template-columns:.8fr 1.2fr; gap:var(--dzf-space-sm); }
.bb-voice__lists{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:var(--dzf-space-sm); }
.bb-voice__col{
  background:var(--white); border:1px solid var(--stroke);
  border-radius:20px; padding:var(--dzf-space-md);
}
.bb-voice__k{
  display:inline-block; margin-bottom:12px;
  padding:5px 12px; border-radius:999px;
  background:var(--bg); font-size:11.5px; font-weight:700; color:var(--dzf-muted);
}
.bb-voice__k--do{ background:var(--accent); color:var(--primary); }
.bb-voice__col ul{ margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:8px; }
.bb-voice__col li{ position:relative; padding-inline-start:18px; font-size:13.5px; color:var(--primary); }
.bb-voice__col li::before{
  content:""; position:absolute; inset-inline-start:0; top:8px;
  width:7px; height:7px; border-radius:999px; background:var(--accent);
}
.bb-voice__no li{ color:var(--dzf-muted-2); }
.bb-voice__no li::before{ background:var(--dzf-muted-3); }

.bb-voice__demo{
  background:var(--primary); border-radius:20px; padding:var(--dzf-space-md);
  display:flex; flex-direction:column;
}
.bb-voice__tabs{ display:flex; gap:8px; margin-bottom:var(--dzf-space-sm); }
.bb-voice__tabs span{
  padding:7px 16px; border-radius:999px;
  border:1.5px solid rgba(226,227,231,.3);
  font-size:12.5px; font-weight:600; color:var(--bg);
  transition:background-color .3s ease, color .3s ease, border-color .3s ease;
}
.bb-voice__tabs span.is-on{ background:var(--accent); border-color:var(--accent); color:var(--primary); }
.bb-voice__out{
  margin:0; flex:1;
  font-size:15px; line-height:2.1; color:var(--bg);
  min-height:5.5em;
}
.bb-caret{
  display:inline-block; width:2px; height:1em; vertical-align:-2px;
  background:var(--accent); margin-inline-start:2px;
  animation:bb-caret 1s steps(1) infinite;
}
@keyframes bb-caret{ 50%{ opacity:0; } }

/* ============================================================
   اجزای رابط
   ============================================================ */
.bb-comp{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:var(--dzf-space-sm); }
.bb-comp__c{
  background:var(--white); border:1px solid var(--stroke);
  border-radius:20px; padding:var(--dzf-space-md);
}
.bb-comp__k{
  display:block; margin-bottom:14px;
  font-size:11.5px; font-weight:700; color:var(--dzf-muted-2); unicode-bidi:plaintext;
}
.bb-comp__row{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.bb-btn{ padding:9px 18px; border-radius:999px; font-size:12.5px; font-weight:600; }
.bb-btn--solid{ background:var(--primary); color:var(--bg); }
.bb-btn--hover{ background:var(--accent); color:var(--primary); }
.bb-btn--ghost{ border:1.5px solid var(--primary); color:var(--primary); }
.bb-btn--off{ background:var(--bg); color:var(--dzf-muted-3); }
.bb-badge{ padding:5px 12px; border-radius:999px; border:1px solid var(--stroke); font-size:11.5px; font-weight:700; color:var(--dzf-muted); }
.bb-badge--on{ background:var(--accent); border-color:var(--accent); color:var(--primary); }
.bb-badge--dark{ background:var(--primary); border-color:var(--primary); color:var(--bg); }
.bb-comp__card{
  display:flex; align-items:center; gap:10px;
  padding:14px; border-radius:14px; border:1px solid var(--stroke);
}
.bb-comp__card .bb-mock__line{ flex:1; }
.bb-comp__card .bb-mock__dot{ background:var(--accent); }
.bb-comp__field{
  padding:12px 16px; border-radius:999px; border:1.5px solid var(--stroke);
  font-size:13px; color:var(--dzf-muted-3); margin-bottom:8px;
}
.bb-comp__field--on{ border-color:var(--primary); color:var(--primary); margin-bottom:0; }
.bb-comp__alert{
  display:flex; align-items:center; gap:10px;
  padding:12px 14px; border-radius:14px;
  background:var(--bg); border-inline-start:3px solid var(--accent);
}
.bb-comp__alert b{
  width:22px; height:22px; flex-shrink:0; border-radius:999px;
  display:flex; align-items:center; justify-content:center;
  background:var(--accent); color:var(--primary); font-size:12px;
}
.bb-comp__alert span{ font-size:12.5px; line-height:1.7; color:var(--primary); }
.bb-comp__icons i{ width:34px; height:34px; border-radius:12px; background:var(--bg); }
.bb-comp__m{ display:block; margin-top:10px; font-size:11.5px; color:var(--dzf-muted-2); }

/* ============================================================
   بررسی هوشمند
   ============================================================ */
/* کنسول بررسی — سطح تیره اینجا عمدی است (حس «در حال پردازش»)، ولی
   سبزِ کاملاً تیره‌ی برند، نوارها را در خودش گم می‌کرد. یک پله
   روشن‌تر با استروک، عمق می‌دهد بدون اینکه محتوا را ببلعد. */
.bb-review{
  background:#5A3222;
  border:1px solid rgba(228,205,176,.24);
  border-radius:24px;
  padding:var(--dzf-space-md); margin-bottom:var(--dzf-space-sm);
}
.bb-review__scan{ display:flex; align-items:center; gap:14px; font-size:14px; color:#E6E2D7; opacity:.85; }
.bb-review__dots{ display:flex; gap:6px; }
.bb-review__dots i{
  width:8px; height:8px; border-radius:999px; background:var(--accent);
  animation:bb-dot 1.1s ease-in-out infinite;
}
.bb-review__dots i:nth-child(2){ animation-delay:.1s; }
.bb-review__dots i:nth-child(3){ animation-delay:.2s; }
.bb-review__dots i:nth-child(4){ animation-delay:.3s; }
.bb-review__dots i:nth-child(5){ animation-delay:.4s; }
@keyframes bb-dot{
  0%,100%{ opacity:.25; transform:translateY(0); }
  50%{ opacity:1; transform:translateY(-4px); }
}
.bb-review__out{ margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:14px; }
.bb-review__out[hidden]{ display:none; }
.bb-review__out li{
  opacity:0; transform:translateY(10px);
  transition:opacity .45s ease, transform .45s ease;
}
.bb-review__out li.is-in{ opacity:1; transform:none; }
.bb-review__top{ display:flex; align-items:baseline; justify-content:space-between; margin-bottom:8px; }
.bb-review__top strong{ font-size:14px; color:#E6E2D7; unicode-bidi:plaintext; }
.bb-review__top b{ font-size:1.1rem; font-weight:800; color:var(--accent); }
.bb-review__top b i{ font-style:normal; }
.bb-bar{ display:block; height:8px; border-radius:999px; background:rgba(230,226,215,.18); overflow:hidden; }
.bb-bar i{
  display:block; height:100%; width:0; border-radius:999px; background:var(--accent);
  transition:width 1.2s cubic-bezier(.22,.8,.28,1);
}

/* دموی هماهنگی */
.bb-cons{
  display:flex; align-items:center; flex-wrap:wrap; gap:var(--dzf-space-md);
  background:var(--white); border:1px solid var(--stroke);
  border-radius:20px; padding:var(--dzf-space-md);
}
.bb-cons__pair{ display:flex; gap:12px; }
.bb-cons__i{ text-align:center; }
.bb-cons__i span{ display:block; margin-bottom:8px; font-size:11.5px; color:var(--dzf-muted-2); unicode-bidi:plaintext; }
/* نمونه‌رنگ دوتکه: هر دارایی با جفت‌رنگ خودش دیده می‌شود.
   با یک رنگ، «ناهماهنگی» فقط یعنی دو مربع متفاوت؛ با دو رنگ معلوم
   می‌شود اینستاگرام اصلاً از پالت دیگری استفاده می‌کند. */
.bb-cons__sw{
  display:flex; overflow:hidden;
  width:76px; height:52px; border-radius:14px;
  border:1px solid var(--stroke);
}
.bb-cons__sw b{
  flex:1;
  transition:background-color .7s cubic-bezier(.22,.8,.28,1);
}
.bb-cons__mid{ margin-inline-start:auto; text-align:center; }
.bb-cons__k{ display:block; font-size:11.5px; color:var(--dzf-muted-2); unicode-bidi:plaintext; }
.bb-cons__mid b{ display:block; font-size:1.7rem; font-weight:800; color:var(--primary); }
.bb-cons__mid b i{ font-style:normal; }
/* دکمه‌ی «هماهنگ کن».
   حالت اولیه پر و سبز تیره است چون اقدام اصلی همین است؛ بعد از
   هماهنگ شدن به حالت خنثی برمی‌گردد، چون «برگرد به حالت قبل»
   دیگر اقدام اصلی نیست و نباید مثل آن جلب توجه کند. */
.bb-cons__btn{
  padding:11px 24px; border-radius:999px; cursor:pointer;
  background:var(--primary); color:var(--bg);
  border:1.5px solid var(--primary);
  font-family:var(--dzf-font); font-size:13.5px; font-weight:700;
  transition:background-color .22s ease, color .22s ease, border-color .22s ease;
}
.bb-cons__btn:hover{ background:var(--accent); color:var(--primary); border-color:var(--accent); }
.bb-cons.is-done .bb-cons__btn{
  background:transparent; color:var(--primary); border-color:var(--stroke);
}
.bb-cons.is-done .bb-cons__btn:hover{ border-color:var(--primary); background:var(--white); }

/* ============================================================
   دانلودها
   ============================================================ */
.bb-dl{
  display:grid; grid-template-columns:repeat(3, minmax(0,1fr));
  gap:var(--dzf-space-sm); margin:0; padding:0; list-style:none;
}
.bb-dl li{
  display:flex; flex-direction:column; align-items:flex-start; gap:4px;
  background:var(--white); border:1px solid var(--stroke);
  border-radius:20px; padding:var(--dzf-space-md);
  transition:border-color .22s ease, transform .22s ease;
}
.bb-dl li:hover{ border-color:var(--primary); transform:translateY(-3px); }
.bb-dl__ico{
  display:flex; align-items:center; justify-content:center;
  width:42px; height:42px; margin-bottom:8px;
  border-radius:14px; background:var(--bg); color:var(--primary);
  transition:background-color .22s ease;
}
.bb-dl li:hover .bb-dl__ico{ background:var(--accent); }
.bb-dl__ico svg{ width:20px; height:20px; }
.bb-dl b{ font-size:14px; color:var(--primary); unicode-bidi:plaintext; }
.bb-dl li > span{ font-size:12px; color:var(--dzf-muted-2); }

/* ============================================================
   تاریخچه‌ی نسخه‌ها
   ============================================================ */
.bb-vers{
  display:grid; grid-template-columns:repeat(4, minmax(0,1fr));
  gap:var(--dzf-space-sm);
  margin:0; padding:var(--dzf-space-md) 0 0; list-style:none; position:relative;
}
.bb-vers::before{
  content:""; position:absolute; top:5px; right:0; left:0; height:1px; background:var(--stroke);
}
.bb-vers li{ position:relative; padding-top:var(--dzf-space-md); }
.bb-vers__dot{
  position:absolute; top:0; inset-inline-start:0;
  width:11px; height:11px; border-radius:999px;
  background:var(--white); border:2px solid var(--dzf-muted-3);
}
.bb-vers li.is-now .bb-vers__dot{ background:var(--accent); border-color:var(--accent); }
.bb-vers b{ display:block; font-size:12px; font-weight:700; color:var(--dzf-muted-2); unicode-bidi:plaintext; }
.bb-vers strong{ display:block; margin-top:4px; font-size:14px; color:var(--primary); }
.bb-vers p{ margin:6px 0 0; font-size:12.5px; line-height:1.8; color:var(--dzf-muted-2); }
.bb-vers__flag{
  display:inline-block; margin-top:10px; font-style:normal;
  padding:4px 10px; border-radius:999px;
  background:var(--accent); color:var(--primary);
  font-size:10.5px; font-weight:700;
}

/* ============================================================
   ماژول‌های متصل + CTA
   ============================================================ */
.bb-sec{ padding:var(--dzf-space-xxl) var(--dzf-gutter); background:var(--white); }
.bb-sec__inner{ max-width:var(--dzf-container); margin:0 auto; }
.bb-sec__head{ max-width:70ch; margin-bottom:var(--dzf-space-xl); }
.bb-sec__head h2{
  margin:0 0 12px; font-size:clamp(1.3rem,2.6vw,1.9rem);
  font-weight:800; line-height:1.5; color:var(--primary); text-wrap:balance;
}
.bb-sec__head p{ margin:0; font-size:15px; line-height:2; color:var(--dzf-muted); }

.bb-chain{
  display:grid; grid-template-columns:repeat(6, minmax(0,1fr));
  gap:var(--dzf-space-sm); margin:0; padding:0; list-style:none;
}
.bb-chain__c{
  display:block; height:100%;
  background:var(--white); border:1px solid var(--stroke);
  border-radius:20px; padding:var(--dzf-space-md);
  transition:border-color .22s ease, opacity .22s ease;
}
.bb-chain__c:hover{ border-color:var(--primary); }
.bb-chain__c.is-here{ background:var(--primary); border-color:var(--primary); }
.bb-chain.is-hot li:not(.is-lit) .bb-chain__c{ opacity:.42; }
.bb-chain li.is-lit .bb-chain__c{ border-color:var(--accent); }
.bb-chain__n{
  display:flex; align-items:center; justify-content:center;
  width:32px; height:32px; margin-bottom:12px;
  border-radius:999px; background:var(--bg); color:var(--primary);
  font-size:13px; font-weight:700;
}
.bb-chain__c.is-here .bb-chain__n{ background:var(--accent); }
.bb-chain__c strong{ display:block; font-size:14px; color:var(--primary); unicode-bidi:plaintext; }
.bb-chain__fa{ display:block; margin-top:2px; font-size:12px; color:var(--dzf-muted-2); }
.bb-chain__c.is-here strong{ color:var(--white); }
.bb-chain__c.is-here .bb-chain__fa{ color:var(--bg); opacity:.6; }
.bb-chain__flag{
  display:inline-block; margin-top:10px; font-style:normal;
  padding:4px 10px; border-radius:999px;
  background:var(--accent); color:var(--primary);
  font-size:10.5px; font-weight:700;
}

.bb-cta{ background:var(--primary); padding:var(--dzf-space-xxl) var(--dzf-gutter); text-align:center; }
.bb-cta__inner{ max-width:760px; margin:0 auto; }
.bb-cta h2{
  margin:0 0 var(--dzf-space-sm);
  font-size:clamp(1.4rem,2.8vw,2.1rem); font-weight:800; line-height:1.5;
  color:var(--white); text-wrap:balance;
}
.bb-cta p{ margin:0 auto var(--dzf-space-md); max-width:60ch; font-size:15px; line-height:2; color:var(--bg); opacity:.72; }
.bb-cta__btns{ display:flex; flex-wrap:wrap; gap:12px; justify-content:center; }
.bb-cta .dzf-hbtn--solid{
  background:var(--accent) !important; color:var(--primary) !important; border-color:var(--accent) !important;
}
.bb-cta .dzf-hbtn--solid:hover{ background:var(--white) !important; border-color:var(--white) !important; }
.bb-cta .dzf-hbtn--ghost{ color:var(--bg) !important; border-color:rgba(226,227,231,.35) !important; }

/* هاور دکمه‌ی شبح روی کارت تیره.
   بدون این، قانون بالا (color:var(--bg)) با `.dzf-hbtn--ghost:hover`
   در style.css هم‌وزن می‌شود و چون این فایل دیرتر لود می‌شود برنده
   می‌ماند — یعنی پس‌زمینه زرد می‌شد ولی متن روشن باقی می‌ماند. */
.bb-cta .dzf-hbtn--ghost:hover{ background:var(--accent) !important; color:var(--primary) !important; border-color:var(--accent) !important; }

/* ویژگی دوکلاسه تا از `.bb-cta p` بالاتر بنشیند — همان باگی که در
   Dashboard و Roadmap هم بود: margin با !important نجات یافته بود
   ولی font-size همچنان ۱۵px می‌ماند. */
.bb-cta .bb-cta__sub{ margin:var(--dzf-space-md) 0 0; font-size:13.5px; opacity:.6; }
.bb-cta .bb-cta__sub a{ color:var(--accent); font-weight:600; }

/* ============================================================
   واکنش‌گرایی
   ============================================================ */
@media (max-width:1100px){
  .bb-hero__inner{ grid-template-columns:1fr; gap:var(--dzf-space-lg); }
  .bb-shell{ grid-template-columns:1fr; gap:var(--dzf-space-lg); }
  /* ریل روی موبایل: قرص‌های چیده‌شده در چند خط، نه نوار افقیِ چسبان.

     نسخه‌ی قبلی یک نوار اسکرول افقی بود که با margin منفی تمام‌عرض
     می‌شد. سه مشکل داشت: بخش‌های بعدی بریده می‌شدند و هیچ نشانه‌ای
     نبود که باید افقی اسکرول کرد؛ margin منفی بدون بُرش، یک اسکرول
     افقی روی کل صفحه می‌ساخت؛ و چسبان بودنش با هدرِ چسبانِ سایت
     روی هم می‌افتاد.

     حالا همه‌ی ده بخش هم‌زمان دیده می‌شوند و هیچ‌چیز بریده نمی‌شود. */
  .bb-rail{
    position:static;
    margin:0 0 var(--dzf-space-md);
    padding:var(--dzf-space-sm);
    background:var(--white);
    border:1px solid var(--stroke);
    border-radius:18px;
  }
  .bb-rail ul{ flex-direction:row; flex-wrap:wrap; gap:8px; }
  .bb-rail li{ flex:0 0 auto; }
  .bb-rail a{
    border-inline-start:0; border:1px solid var(--stroke);
    border-radius:999px; padding:8px 14px;
  }
  .bb-rail a.is-on{ background:var(--accent); border-color:var(--accent); }

  .bb-sync{ grid-template-columns:1fr; }
  .bb-over{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  .bb-id, .bb-comp{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  .bb-colors{ grid-template-columns:repeat(3, minmax(0,1fr)); }
  .bb-voice{ grid-template-columns:1fr; }
  .bb-vers{ grid-template-columns:repeat(2, minmax(0,1fr)); row-gap:var(--dzf-space-lg); }
  .bb-vers::before{ display:none; }
  .bb-chain{ grid-template-columns:repeat(3, minmax(0,1fr)); }
}
@media (max-width:860px){
  .bb-hero, .bb-sec, .bb-cta, .bb-shell{
    padding-top:var(--dzf-space-xl); padding-bottom:var(--dzf-space-xl);
  }
  .bb-doc{ gap:var(--dzf-space-xl); }
  .bb-pulse__flow{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  .bb-logo{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  .bb-space{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  .bb-dl{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  .bb-sync__prev{ grid-template-columns:1fr; }
}
@media (max-width:560px){
  .bb-over, .bb-id, .bb-comp, .bb-colors, .bb-logo,
  .bb-space, .bb-dl, .bb-vers, .bb-chain,
  .bb-voice__lists{ grid-template-columns:1fr; }
  .bb-type li{ flex-wrap:wrap; }
  .bb-type__m{ width:100%; text-align:start; }
  .bb-cons__mid{ margin-inline-start:0; }
  .bb-cons__btn{ width:100%; }
}

/* ============================================================
   احترام به prefers-reduced-motion
   ============================================================ */
@media (prefers-reduced-motion: reduce){
  .bb-rise, .bb-review__out li{ opacity:1 !important; transform:none !important; transition:none !important; }
  .bb-book__cover{ transition:none !important; }
  .bb-caret, .bb-review__dots i{ animation:none !important; }
  .bb-logo__c:hover img{ animation:none !important; }
  .bb-pulse__flow li::after,
  .bb-bar i, .bb-cons__sw b, .bb-color__sw, .bb-dl li{ transition:none !important; }
  /* لوپ‌های بخش لوگو کاملاً خاموش و روی حالت «درست» ثابت می‌شوند */
  .bb-logo--bad .bb-logo__c .bb-logo__stage,
  .bb-logo--bad .bb-logo__x,
  .bb-logo__c img,
  .bb-logo__stage--space::before{ animation:none !important; }
  .bb-logo--bad .bb-logo__x{ opacity:1; transform:none; }
  .bb-logo__stage--space::before{ opacity:1; }
  .bb-dl li:hover{ transform:none; }
}

/* ============================================================
   تکمیل‌های ساختاری
   ============================================================ */

/* این‌ها در HTML بودند و هیچ قانونی نداشتند. الان فقط چون فرزند
   مستقیم گرید یا بخش‌اند سر جایشان می‌مانند. */
.bb-hero__txt{ min-width:0; }
.bb-chain-sec .bb-sec__inner{ min-width:0; }
.bb-sync-b, .bb-review-b{ scroll-margin-top:96px; }
/* ستون کنترل بخش همگام‌سازی.

   این قانون قبلاً `display:flex; align-items:center` بود — یعنی
   برچسب، قرص‌های رنگ، جعبه‌ی هشدار و دکمه در یک ردیف افقی کنار هم
   می‌نشستند. روی دسکتاپ که ستون پهن بود کمتر به چشم می‌آمد، ولی
   روی موبایل مجموع عرضشان از ستون بیشتر می‌شد و همه از کادر بیرون
   می‌زدند — دقیقاً همان چیزی که در اسکرین‌شات دیده می‌شود.

   این‌ها یک پشته‌ی عمودی‌اند، نه یک ردیف. */
.bb-sync__ctl{
  display:flex; flex-direction:column; align-items:stretch;
  min-width:0;
}

/* سه پیش‌نمایش همگام‌سازی زنده. قرار بود از هم متمایز باشند و
   هر سه یک شکل بودند؛ حالا هرکدام نسبت و نشانه‌ی خودش را دارد
   تا «سایت»، «پست» و «رابط» بدون برچسب هم قابل تشخیص باشند. */
.bb-mock--site{ aspect-ratio:16/10; }
.bb-mock--post{ aspect-ratio:1; }
.bb-mock--ui{   aspect-ratio:4/3; }
.bb-mock--site::before,
.bb-mock--post::before,
.bb-mock--ui::before{
  content:""; position:absolute; inset-inline:0; top:0; height:14px;
  background:rgba(0,0,0,.06);
  border-radius:inherit; border-end-start-radius:0; border-end-end-radius:0;
}
.bb-mock--post::before{ display:none; }

/* نشان روی جلد کتاب — جای لوگوی دیزیفی که برداشته شد */
.bb-book__mark{
  display:flex; align-items:center; justify-content:center;
  width:44px; height:44px; border-radius:14px;
  background:#E4CDB0; color:#3F1D0E;
  font-family:var(--dzf-font); font-size:22px; font-weight:800;
}

/* ============================================================
   اصلاح‌های موبایل

   ریل روی موبایل با margin منفی تمام‌عرض می‌شد، ولی هیچ‌کس آن را
   نمی‌بُرید؛ نتیجه یک اسکرول افقی روی کل صفحه بود. عرض ویوپورت هم
   جای دیگری کنترل نمی‌شد، پس هر عنصر کمی پهن‌تر، همان اسکرول را
   برمی‌گرداند.
   ============================================================ */
@media (max-width:1100px){
  /* هیچ عنصری نباید از عرض ویوپورت بزند */
  .bb-shell{ overflow-x:clip; }

  /* در حالت قرصی، برچسب فارسی خوانده می‌شود نه نام لاتین —
     کاربر فارسی‌زبان باید بخش را با یک نگاه پیدا کند. */
  .bb-rail a b{ display:none; }
  .bb-rail a span{
    display:block; font-size:12.5px; font-weight:600;
    color:var(--dzf-muted); white-space:nowrap;
  }
  .bb-rail a.is-on span{ color:var(--primary); }
}

@media (max-width:860px){
  /* نوار Pulse در دو ستون، فلش‌های بینشان بی‌معنا می‌شوند */
  .bb-pulse__flow li::after{ display:none; }
}

@media (max-width:640px){
  /* در این عرض، دو ستون هم برای این بلوک‌ها جا نمی‌شود:
     نام لاتین کنار برچسب فارسی، هر دو در یک سطر نمی‌گنجند. */
  .bb-chain{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  .bb-colors{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  .bb-logo{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  .bb-space{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  .bb-dl{ grid-template-columns:repeat(2, minmax(0,1fr)); }
}

@media (max-width:560px){
  .bb-pulse__flow{ grid-template-columns:1fr; }
  /* .bb-comp و .bb-voice__lists هیچ بازنویسی نداشتند و تا آخر
     چندستونه می‌ماندند — روی گوشی، محتوایشان له می‌شد. */
  .bb-comp{ grid-template-columns:1fr; }
  .bb-voice__lists{ grid-template-columns:1fr; gap:var(--dzf-space-sm); }
  .bb-id{ grid-template-columns:1fr; }
  .bb-over{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  .bb-vers{ grid-template-columns:1fr; }
  .bb-cons__pair{ width:100%; justify-content:space-between; }
  .bb-cons__sw{ width:100%; }
  .bb-cons__i{ flex:1; }
  .bb-hero__meta{ flex-wrap:wrap; gap:12px; }
  .bb-book{ width:min(300px, 100%); }
  .bb-sync__prev{ grid-template-columns:1fr; }
  .bb-cta__btns .dzf-hbtn{ width:100%; }
  .bb-cta__btns{ flex-direction:column; }
}