/* ==========================================================================
   قارقارک — بخش‌های بدنه: کارخانه، توانمندی‌ها، جدول مشخصات، مسیرها،
   سوالات متداول، نوار کنش موبایل، نوار CTA
   منبع: qarqarakheroabout v1 و v2 — روی توکن‌های برند یکپارچه شده.
   ========================================================================== */

/* ==========================================================================
   ۱. کارخانه — روایت + ایستگاه‌های سال
   ========================================================================== */
.story__grid { display: grid; gap: var(--sp-8); align-items: start; }
.story__copy p { color: var(--text-muted); font-size: var(--fs-md); max-inline-size: 64ch; }
.story__copy p + p { margin-block-start: var(--sp-3); }
.story__copy strong { color: var(--text-strong); font-weight: 700; }

.sign {
  display: flex; align-items: center; gap: var(--sp-3);
  margin-block-start: var(--sp-6); padding-block-start: var(--sp-4);
  border-block-start: 1px solid var(--line);
}
.sign span {
  inline-size: 44px; block-size: 44px; flex: 0 0 auto;
  display: grid; place-items: center; border-radius: 50%;
  /* برنجیِ فیل روی این قطر فقط ۴٫۴۷:۱ می‌داد؛ سطح روشن + متن برنجیِ تیره */
  background: var(--surface-3); color: var(--accent-text);
  border: 1px solid var(--line-strong);
  font-weight: 800; font-size: var(--fs-lg);
}
.sign p { font-size: var(--fs-xs); color: var(--text-strong); font-weight: 700; }
.sign p i { display: block; font-style: normal; color: var(--text-faint); font-weight: 400; }

/* ایستگاه‌های سال — خودشان یک خط‌کش‌اند */
.stations { position: relative; padding-inline-start: var(--sp-6); }
.stations::before {
  content: ''; position: absolute; inset-block: 6px; inset-inline-start: 11px;
  inline-size: 1px; background: var(--line-strong);
}
.stations li { position: relative; padding-block-end: var(--sp-5); }
.stations li:last-child { padding-block-end: 0; }
.stations li::before {                    /* تیک بلند ایستگاه */
  content: ''; position: absolute; inset-block-start: 11px;
  inset-inline-start: calc(-1 * var(--sp-6) + 4px);
  inline-size: 16px; block-size: 1px; background: var(--accent);
}
.stations li::after {
  content: ''; position: absolute; inset-block-start: 8px;
  inset-inline-start: calc(-1 * var(--sp-6) + 8px);
  inline-size: 7px; block-size: 7px; border-radius: 50%;
  background: var(--bg); border: 1.5px solid var(--accent);
}
.stations b {
  display: block; font-family: var(--font-mono);
  font-size: var(--fs-md); font-weight: 800;
  color: var(--accent-text); line-height: 1.4;
}
.stations span { font-size: var(--fs-xs); color: var(--text-muted); line-height: 1.8; }

/* توانمندی‌ها — فهرست، نه گرید کارتِ هم‌اندازه */
.caps { display: grid; gap: var(--sp-4); margin-block-start: var(--sp-6); }
.caps li {
  display: flex; align-items: flex-start; gap: var(--sp-3);
  padding-block-end: var(--sp-4);
  border-block-end: 1px solid var(--line);
}
.caps li:last-child { border-block-end: 0; padding-block-end: 0; }
.caps svg { inline-size: 22px; block-size: 22px; color: var(--accent-text); flex: 0 0 auto; margin-block-start: 3px; }
.caps__t { display: grid; gap: 2px; }
.caps__t b { font-size: var(--fs-sm); color: var(--text-strong); }
/* عمداً کلاس، نه سلکتور «span داخل span»: آن سلکتور هر <span class="ltr">
   داخل متن را هم بلاک می‌کرد و واحدها به خط بعد می‌افتادند. */
.caps__d { font-size: var(--fs-xs); color: var(--text-muted); line-height: 1.8; }

/* ==========================================================================
   ۲. جدول مشخصات
   دسکتاپ: جدول واقعی. موبایل: هر سطر یک بلوکِ قرائت با همان زبان.
   یک نشانه‌گذاری، دو چیدمان — بدون تکرار محتوا.
   ========================================================================== */
.specs__hd {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: var(--sp-4); flex-wrap: wrap;
}
.specs__hd p { color: var(--text-muted); font-size: var(--fs-xs); }

.tbl { inline-size: 100%; margin-block-start: var(--sp-5); border-collapse: collapse; }
.tbl caption {
  text-align: start; padding-block-end: var(--sp-3);
  font-size: var(--fs-2xs); color: var(--text-faint);
}
.tbl .v { font-family: var(--font-mono); color: var(--text); }
.tbl .ok { color: var(--accent-text); font-weight: 700; }

/* — چیدمان موبایل: هر سطر یک بلوکِ خط‌کشی‌شده، نه کارت — */
@media (max-width: 57.999rem) {
  .tbl thead { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); }
  .tbl tr { display: block; padding-block: var(--sp-5); border-block-start: 1px solid var(--line); }
  .tbl tbody tr:first-child { border-block-start: 0; padding-block-start: 0; }
  /* هر سلول خودش گرید دو ستونه است، پس تعداد فرزندانش بی‌اهمیت می‌شود */
  .tbl td, .tbl tbody th {
    display: grid; grid-template-columns: 5.5rem 1fr; gap: var(--sp-3);
    align-items: baseline; padding-block: var(--sp-1);
  }
  /* justify-self:start وگرنه سلولِ گرید کش می‌آید و مقدارِ لاتین (کد فنی،
     ابعاد) به لبه‌ی دور از برچسبش می‌چسبد و جفت‌شدنشان دیده نمی‌شود. */
  .tbl .cv { min-inline-size: 0; justify-self: start; text-align: start; }
  .tbl td::before, .tbl tbody th::before {
    content: attr(data-l);
    font-size: var(--fs-2xs); color: var(--text-faint); line-height: 1.9;
  }
  .tbl .c-part {
    display: flex; align-items: center; gap: var(--sp-3);
    padding-block: 0 var(--sp-3); margin-block-end: var(--sp-2);
    font-size: var(--fs-md); font-weight: 800; text-align: start;
    color: var(--text-strong);
  }
  .tbl .c-part::before { display: none; }
  .tbl .c-part svg { inline-size: 30px; block-size: 30px; flex: 0 0 auto; color: var(--accent-text); }
}
/* — چیدمان دسکتاپ: جدول — */
@media (min-width: 58rem) {
  .tbl td::before, .tbl tbody th::before { display: none; }
  .tbl thead th {
    text-align: start; padding: var(--sp-3);
    font-size: var(--fs-2xs); font-weight: 700; color: var(--text-faint);
    border-block-end: 1px solid var(--line-strong);
    white-space: nowrap;
  }
  .tbl tbody tr { border-block-end: 1px solid var(--line); }
  .tbl tbody tr:hover { background: var(--surface-2); }
  .tbl td, .tbl tbody th {
    padding: var(--sp-3); font-size: var(--fs-xs);
    vertical-align: middle; text-align: start; font-weight: 400;
  }
  .tbl .c-part {
    display: flex; align-items: center; gap: var(--sp-3);
    font-weight: 700; font-size: var(--fs-sm); color: var(--text-strong);
  }
  .tbl .c-part svg { inline-size: 28px; block-size: 28px; flex: 0 0 auto; color: var(--accent-text); }
}

/* ==========================================================================
   ۳. مسیرها — سه ایستگاه روی یک خط‌کش پیوسته (عمداً کارت نیست)
   ========================================================================== */
.rail { position: relative; margin-block-start: var(--sp-8); }
.rail::before {                              /* خودِ خط‌کش */
  content: ''; position: absolute; inset-inline: 0; inset-block-start: 0; block-size: 1px;
  background: var(--line-strong);
}
.rail::after {                               /* آج ریز روی خط‌کش */
  content: ''; position: absolute; inset-inline: 0; inset-block-start: 1px; block-size: 7px;
  background-image: repeating-linear-gradient(to right, var(--line) 0 1px, transparent 1px 12px);
}
.rail ul { display: grid; gap: var(--sp-6); }
.station {
  position: relative; display: block; padding-block-start: var(--sp-5);
  min-block-size: 44px;
}
.station::before {                           /* تیک بلندِ ایستگاه */
  content: ''; position: absolute; inset-block-start: 0; inset-inline-start: 0;
  inline-size: 2px; block-size: 18px; background: var(--accent);
}
.station b {
  display: block; font-size: var(--fs-md); font-weight: 800; line-height: 1.4;
  color: var(--text-strong);
  transition: color var(--d-fast) var(--e-out);
}
.station i {
  display: block; font-style: normal; margin-block-start: var(--sp-1);
  font-size: var(--fs-xs); color: var(--text-muted); max-inline-size: 36ch;
}
.station u {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  margin-block-start: var(--sp-3); text-decoration: none;
  font-size: var(--fs-xs); font-weight: 700; color: var(--accent-text);
  text-underline-offset: 5px; text-decoration-thickness: 1px;
}
.station:hover b { color: var(--accent-text); }
.station:hover u { text-decoration: underline; }
.station u svg { inline-size: 15px; block-size: 15px; }

/* ==========================================================================
   ۴. سوالات متداول
   <details> بومی: بدون JS، با کیبورد کار می‌کند و محتوایش در DOM است
   پس خزنده می‌بیندش. علامت، یک تیکِ ماشین‌کاری‌شده است نه فلش کتابخانه‌ای.
   ========================================================================== */
.faq__list { margin-block-start: var(--sp-6); max-inline-size: 72ch; }
.q { border-block-start: 1px solid var(--line); }
.q:first-of-type { border-block-start: 0; }
.q > summary {
  display: flex; align-items: center; gap: var(--sp-4);
  min-block-size: 60px; padding-block: var(--sp-3);
  cursor: pointer; list-style: none;
  font-size: var(--fs-sm); font-weight: 700; line-height: 1.6;
  color: var(--text-strong);
}
.q > summary::-webkit-details-marker { display: none; }
.q__mark { position: relative; inline-size: 16px; block-size: 16px; flex: 0 0 auto; margin-inline-start: auto; }
.q__mark::before, .q__mark::after {
  content: ''; position: absolute; inset-inline: 0; inset-block-start: 7.5px;
  block-size: 1.5px; background: var(--accent);
  transition: transform var(--d-base) var(--e-out);
}
.q__mark::after { transform: rotate(90deg); }
.q[open] .q__mark::after { transform: rotate(0deg); }
.q > div { padding-block-end: var(--sp-5); }
.q p { font-size: var(--fs-xs); color: var(--text-muted); line-height: 1.95; max-inline-size: 68ch; }
.q p + p { margin-block-start: var(--sp-3); }
.q a {
  color: var(--accent-text); font-weight: 700;
  text-decoration-line: underline; text-underline-offset: 4px; text-decoration-thickness: 1px;
}

/* ==========================================================================
   ۵. نوار CTA پایانی
   ========================================================================== */
.cta {
  position: relative; overflow: hidden;
  border-radius: var(--r-2xl);
  background: linear-gradient(160deg, var(--qq-ink-700), var(--qq-ink-900));
  color: var(--text-oninverse);
  padding: var(--sp-10) var(--sp-8);
  display: grid; gap: var(--sp-6); align-items: center;
  box-shadow: var(--shadow-lg);
}
.cta::before {
  content: ''; position: absolute; inline-size: 22rem; block-size: 22rem;
  inset-block-start: -8rem; inset-inline-start: -6rem; border-radius: 50%;
  background: radial-gradient(circle, rgba(220,174,78,.22), transparent 70%);
  pointer-events: none;
}
/* عنوان کوتاه و با مقیاسِ سیال تا ارتفاع نگیرد: در دسکتاپ یک خط،
   در موبایل حداکثر دو خطِ کوتاه. */
.cta h2 {
  position: relative;
  font-size: clamp(1.25rem, 1.05rem + .9vw, 1.875rem);
  font-weight: 800; line-height: 1.35;
  max-inline-size: 34ch; text-wrap: balance; color: #fff;
}
.cta p {
  position: relative;
  margin-block-start: var(--sp-2);
  font-size: var(--fs-sm); color: rgba(238,242,246,.78); max-inline-size: 52ch;
}
/* چیدمانش از کلاس مشترک .actions می‌آید */
.cta__acts { position: relative; }
.cta .btn--out { color: #fff; border-color: rgba(255,255,255,.3); }
.cta .btn--out:hover { border-color: var(--qq-brass-300); color: var(--qq-brass-300); }

/* ==========================================================================
   ۶. نوار کنش چسبان — فقط موبایل، فقط وقتی هیچ کنشی روی صفحه دیده نمی‌شود
   ========================================================================== */
.actionbar {
  position: fixed; inset-block-end: 0; inset-inline: 0; z-index: var(--z-actionbar);
  display: flex; gap: var(--sp-2); padding: var(--sp-2) var(--sp-3);
  padding-block-end: max(var(--sp-2), env(safe-area-inset-bottom));
  background: var(--glass-strong);
  border-block-start: 1px solid var(--line-strong);
  translate: 0 110%;
  transition: translate var(--d-base) var(--e-out);
}
@supports (backdrop-filter: blur(1px)) {
  .actionbar { -webkit-backdrop-filter: blur(14px) saturate(1.5); backdrop-filter: blur(14px) saturate(1.5); }
}
.actionbar.is-on { translate: 0 0; }
.actionbar .btn { flex: 1 1 auto; min-block-size: 48px; padding-inline: var(--sp-3); }
.actionbar .btn--out { flex: 0 0 auto; inline-size: 56px; padding-inline: 0; }

/* ==========================================================================
   ۷. نقشه‌ی فلاپ‌ها — عکس مرجع + کالوتِ زنده + فهرست هم‌بسته
   ----------------------------------------------------------------------
   عکس فقط «تصویر» است. هر عدد و هر نامی که روی نقشه دیده می‌شود از HTML
   می‌آید، نه از پیکسل‌های عکس: برچسب‌های سوخته‌ی عکس مرجع در
   build/flapmap-image.py پاک شده‌اند. سه دلیل: متنِ داخل تصویر نه ایندکس
   می‌شود، نه اسکرین‌ریدر می‌خواندش، نه با زوم و دارک‌مود سازگار است.

   فهرست، منبع حقیقت است؛ لایه‌ی SVG فقط بازتاب بصری همان انتخاب. اگر
   جاوااسکریپت اجرا نشود، فهرست کامل و عکس کامل هر دو سرِ جای‌شان هستند.
   ========================================================================== */
.fm { display: grid; gap: var(--sp-6); }
.fm__fig {
  margin: 0;
  padding: var(--sp-4);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  background:
    radial-gradient(120% 90% at 70% 10%, var(--surface) 0%, var(--surface-2) 70%);
  box-shadow: var(--inner-hair), var(--shadow-sm);
  overflow: hidden;
}
.fm__fig figcaption {
  margin-block-start: var(--sp-3);
  padding-block-start: var(--sp-3);
  border-block-start: 1px solid var(--line);
  font-size: var(--fs-2xs); color: var(--text-faint); line-height: 1.8;
}

/* ---------- صحنه: عکس + لایه‌ی کالوت ----------
   نسبت ابعاد از width/height خودِ <img> می‌آید، پس جای صحنه پیش از رسیدن
   عکس رزرو است و CLS صفر می‌ماند. */
.fm__stage {
  --fm-plate: #EDF1F5;
  position: relative;
  isolation: isolate;                 /* لازمه‌ی mix-blend-mode پایین‌تر */
  container: fmstage / inline-size;   /* مقیاسِ کالوت‌ها به عرضِ خودِ عکس */
  border-radius: var(--r-lg);
  overflow: hidden;
  background:
    radial-gradient(110% 80% at 50% 0%, #FFF 0%, var(--fm-plate) 72%);
  box-shadow: inset 0 0 0 1px var(--line);
}
:root[data-theme="dark"] .fm__stage { --fm-plate: #DCE2E9; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .fm__stage { --fm-plate: #DCE2E9; }
}

.fm__photo {
  display: block; inline-size: 100%; block-size: auto;
  /* زمینه‌ی سفیدِ عکس روی صفحه‌ی استودیو ضرب می‌شود: نه هاله‌ی برش دارد،
     نه در تم تیره یک مستطیل سفیدِ کورکننده می‌سازد. */
  mix-blend-mode: multiply;
}
@supports not (mix-blend-mode: multiply) {
  .fm__stage { background: #FFF; }
}
:root[data-theme="dark"] .fm__photo { filter: brightness(.94) contrast(1.03); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .fm__photo { filter: brightness(.94) contrast(1.03); }
}

/* لایه‌ی روی عکس؛ viewBox آن دقیقاً ابعاد پیکسلیِ عکسِ برش‌خورده است، پس
   مختصات نقطه‌ها همان مختصات عکس‌اند و با هر عرضی هم‌جا می‌مانند. */
.fm__layer {
  position: absolute; inset: 0;
  inline-size: 100%; block-size: 100%;
  overflow: visible;
}

/* ---------- ناحیه‌های قابل انتخاب ----------
   حلقه‌ی چین‌دار عمداً انتخاب شده: مرزِ ناحیه تقریبی است، نه برشِ دقیقِ قطعه،
   و خطِ چین همین را می‌گوید. non-scaling-stroke ضخامتِ حلقه را در هر عرضِ
   صفحه ۲٫۵ پیکسل نگه می‌دارد. */
.fm__part {
  fill: transparent;
  stroke: transparent;
  stroke-width: 2.5;
  stroke-dasharray: 9 7;
  stroke-linecap: round;
  cursor: pointer;
  vector-effect: non-scaling-stroke;
  transition: fill var(--d-base) var(--e-out), stroke var(--d-base) var(--e-out);
}
.fm__part * { vector-effect: non-scaling-stroke; }

/* ---------- کالوت‌ها ----------
   عکس با عرضِ صفحه کوچک و بزرگ می‌شود، اما یک شماره‌ی ۱۳ پیکسلی روی موبایل
   نه خوانده می‌شود و نه قابل لمس است. پس دیسک و عدد با کوئریِ کانتینر —
   یعنی عرضِ واقعیِ خودِ عکس، نه عرضِ ویوپورت — بزرگ‌نمایی می‌شوند تا اندازه‌ی
   روی صفحه در همه‌ی عرض‌ها حدوداً ثابت بماند. */
.fm__layer { --fm-pin: 1; }
@container fmstage (max-width: 40rem) { .fm__layer { --fm-pin: 1.45; } }
@container fmstage (max-width: 26rem) { .fm__layer { --fm-pin: 1.9; } }

.fm__pins { fill: none; }
.fm__pins .fm__lead {
  stroke: var(--qq-ink-700); stroke-linecap: round; opacity: .6;
  stroke-width: calc(3px * var(--fm-pin));
}
.fm__pins .fm__dot,
.fm__pins .fm__disc,
.fm__pins text { transform-box: fill-box; transform-origin: center; scale: var(--fm-pin); }
.fm__pins .fm__dot { fill: var(--qq-ink-700); stroke: #FFF; stroke-width: 2.5; }
.fm__pins .fm__disc {
  fill: #FFF; stroke: var(--qq-ink-700); stroke-width: 2.5;
  filter: drop-shadow(0 2px 4px rgba(11,17,22,.28));
}
.fm__pins text {
  fill: var(--qq-ink-700); stroke: none;
  font-family: inherit; font-size: 26px; font-weight: 800;
  text-anchor: middle; dominant-baseline: central;
  font-feature-settings: 'ss01' 1;
}
.fm__pins > g { transition: opacity var(--d-base) var(--e-out); }

/* ---------- حالت انتخاب ----------
   عکس تیره یا بی‌رنگ نمی‌شود: کاربر آمده همان قطعه را ببیند، پس پوشاندنش
   با یک لکه‌ی پررنگ خلافِ هدف است. به‌جای آن ناحیه‌ی هدف حلقه و هاله می‌گیرد
   و شماره‌های دیگر عقب می‌نشینند. انتقالِ معنا فقط با رنگ نیست: حلقه شکل
   دارد، شماره‌ی فعال پررنگ می‌شود و ردیفِ فهرست aria-pressed می‌گیرد. */
.fm[data-active] .fm__part.is-on {
  fill: color-mix(in oklab, var(--qq-brass-500) 9%, transparent);
  stroke: var(--qq-brass-700);
  filter: drop-shadow(0 0 5px rgba(200,149,46,.6));
}
.fm[data-active] .fm__pins > g { opacity: .3; }
.fm[data-active] .fm__pins > g.is-on { opacity: 1; }
.fm__pins > g.is-on .fm__disc { fill: var(--qq-brass-500); stroke: var(--qq-ink-700); }
.fm__pins > g.is-on .fm__lead { opacity: 1; }
@media (hover: hover) {
  .fm:not([data-active]) .fm__part:hover {
    fill: color-mix(in oklab, var(--qq-brass-500) 10%, transparent);
    stroke: var(--qq-brass-700);
  }
}
@supports not (color: color-mix(in oklab, #000 50%, #FFF)) {
  .fm[data-active] .fm__part.is-on { fill: rgba(200,149,46,.09); }
  @media (hover: hover) {
    .fm:not([data-active]) .fm__part:hover { fill: rgba(200,149,46,.10); }
  }
}
@media (prefers-reduced-motion: reduce) {
  .fm__photo, .fm__part, .fm__pins > g { transition: none; }
}

/* فهرست قطعات */
.fm__legend { display: grid; gap: var(--sp-2); }
.fm__legend button {
  inline-size: 100%; text-align: start;
  display: grid; gap: 2px;
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface);
  transition: border-color var(--d-fast) var(--e-out), background var(--d-fast) var(--e-out),
              transform var(--d-fast) var(--e-out);
}
.fm__legend button:hover { border-color: var(--line-accent); background: var(--surface-2); }
.fm__legend button[aria-pressed="true"] {
  border-color: var(--accent); background: var(--accent-softer);
  transform: translateX(-3px);          /* در RTL یعنی حرکت به داخل */
}
.fm__legend b {
  display: flex; align-items: center; gap: var(--sp-2);
  font-size: var(--fs-sm); font-weight: 700; color: var(--text-strong);
}
.fm__legend b .num {
  inline-size: 1.5rem; block-size: 1.5rem; flex: 0 0 auto;
  display: grid; place-items: center; border-radius: 50%;
  font-size: var(--fs-3xs); font-weight: 800;
  color: var(--accent-text); background: var(--accent-soft);
  border: 1px solid var(--line-accent);
}
.fm__legend i {
  font-style: normal; font-size: var(--fs-xs);
  color: var(--text-muted); line-height: 1.8;
}

/* ==========================================================================
   ۸. دسته‌بندی قطعات — گرید کارت‌های محتوایی
   ========================================================================== */
.cats {
  display: grid; gap: var(--sp-4);
  grid-template-columns: repeat(auto-fit, minmax(15.5rem, 1fr));
}
.cat {
  display: grid; align-content: start; gap: var(--sp-2);
  padding: var(--sp-5);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
  box-shadow: var(--inner-hair);
  scroll-margin-block-start: calc(var(--header-total) + 1rem);
  transition: border-color var(--d-base) var(--e-out), box-shadow var(--d-base) var(--e-out);
}
.cat:hover { border-color: var(--line-accent); box-shadow: var(--inner-hair), var(--shadow-sm); }
.cat:target { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.cat__ico {
  inline-size: 44px; block-size: 44px;
  display: grid; place-items: center;
  border-radius: var(--r-md);
  background: var(--accent-soft); color: var(--accent-text);
  margin-block-end: var(--sp-1);
}
.cat__ico svg { inline-size: 24px; block-size: 24px; }
.cat h3 { font-size: var(--fs-md); font-weight: 800; color: var(--text-strong); line-height: 1.5; }
.cat > p { font-size: var(--fs-xs); color: var(--text-muted); line-height: 1.8; }
.cat__list {
  display: grid; gap: var(--sp-1);
  margin-block-start: var(--sp-2); padding-block-start: var(--sp-3);
  border-block-start: 1px solid var(--line);
}
.cat__list li {
  position: relative;
  padding-inline-start: var(--sp-4);
  font-size: var(--fs-xs); color: var(--text-muted); line-height: 1.85;
}
.cat__list li::before {
  content: ''; position: absolute;
  inset-inline-start: 0; inset-block-start: .8em;
  inline-size: 6px; block-size: 1px; background: var(--accent);
}

/* عنوان‌های بلندِ بخش‌ها، هم‌مقیاس با .sec-head h2 */
.story__h, .specs__h {
  font-size: var(--fs-3xl); font-weight: 800; line-height: 1.3;
  letter-spacing: var(--tracking-brand); color: var(--text-strong);
  max-inline-size: 22ch; text-wrap: balance;
}
.story__h em, .specs__h em { font-style: normal; color: var(--accent-text); }
.story__copy > p { margin-block-start: var(--sp-4); }
.tbl .warn { color: var(--warn); font-weight: 700; }