/* ═══════════════════════════════════════════════════════════
   site-en.css — فقط صفحه‌های انگلیسی (*-en.html)

   tools/build-nav.cjs این فایل را خودش به صفحه‌های انگلیسی
   اضافه می‌کند و از صفحه‌های فارسی برمی‌دارد. آخرین شیت لود‌شده
   است، پس روی هم‌وزن‌هایش برنده می‌شود.

   چیدمان LTR در assets/site-nav.css است (بلوک «چیدمان LTR»).
   ═══════════════════════════════════════════════════════════ */

/* ── ۱) فونت ──
   نسخهٔ اول این فایل سعی می‌کرد خانواده‌های فارسی را با @font-face
   دوباره تعریف کند و به فایل‌های لاتین وصل کند. کار نکرد، و دلیلش
   آموزنده است:

     tokens/typography.css خانوادهٔ "AbarMidFaNum" را در وزن‌های
     ۶۰۰ و ۷۰۰ و ۸۰۰ با unicode-range کامل تعریف کرده است. مرورگر
     هنگام انتخاب face اول «وزن» را تطبیق می‌دهد و بعد سراغ ترتیب
     تعریف می‌رود. پس برای عنصری با وزن پیش‌فرض ۴۰۰ تعریفِ تازهٔ ما
     هیچ‌وقت برنده نمی‌شد و رقم «3» با گلیفِ فارسیِ ۳ رندر می‌شد.
     (FaNum یعنی همین: ارقام فارسی به‌جای لاتین.)

   حالا به‌جای آن، نامِ خانواده مستقیماً در خروجیِ انگلیسی عوض
   می‌شود (در i18n-apply)، و این‌جا فقط شیت‌های مشترک override
   می‌شوند — آن‌ها را نمی‌شود ویرایش کرد چون هر دو زبان لودشان
   می‌کنند. */

:root {
  --en-body: "Futura PT", "Jost", system-ui, sans-serif;
  --en-logo: "HandelGothic", "Teko", monospace
}

[dir="ltr"] body,
[dir="ltr"] .nav-links a,
[dir="ltr"] .lang-btn,
[dir="ltr"] .foot-col-h,
[dir="ltr"] .foot-links a,
[dir="ltr"] .foot-links .foot-product-disabled,
[dir="ltr"] .contact-line,
[dir="ltr"] .foot-copy,
[dir="ltr"] .foot-legal,
[dir="ltr"] .skip-link {
  font-family: var(--en-body)
}

[dir="ltr"] .foot-logo-text {
  font-family: var(--en-logo)
}

/* ── ۲) متنِ داخل دکمه ──
   دکمه‌ها عرضِ ثابتِ اینلاین دارند (۱۷۲px) و padding افقیِ ۳۴px،
   یعنی جعبهٔ محتوا فقط ۱۰۴px است. برچسب فارسی در آن جا می‌شد،
   ولی «About the company» عرضش ۱۲۵px است و سرریز می‌کند — و
   وقتی متن از جعبه بزند بیرون، text-align:center دیگر کاری
   نمی‌کند و متن به یک سمت می‌چسبد (۳۴px از چپ، ۱۳px از راست).

   پس دکمه فلکسِ وسط‌چین می‌شود و padding افقی کم می‌شود تا متن
   واقعاً جا شود. nowrap هم می‌ماند، چون بدون آن متن دو خط می‌شد
   و در ارتفاع ثابتِ ۴۸px بریده می‌شد. */
.btn-p,
.btn-s,
.btn-t,
.btn-o,
.hero-cta a,
.cta-card a {
  white-space: nowrap
}

[dir="ltr"] .btn-p,
[dir="ltr"] .btn-s,
[dir="ltr"] .btn-t,
[dir="ltr"] .btn-o {
  display: flex;
  align-items: center;
  justify-content: center;
  padding-left: 14px;
  padding-right: 14px
}

/* ── ۳) فوتر ──
   assets/site-footer.css بین دو زبان مشترک است و پنج قانون
   text-align:right دارد که برای RTL نوشته شده‌اند («شروعِ خط»). */
[dir="ltr"] .foot-logo-text,
[dir="ltr"] .foot-tagline,
[dir="ltr"] .foot-col-h,
[dir="ltr"] .foot-links a,
[dir="ltr"] .foot-links .foot-product-disabled,
[dir="ltr"] .contact-line {
  text-align: left
}

/* ── ۴) تیترِ بخش خط لوله ──
   در نسخهٔ فارسی وسطِ این تیتر یک SVG است که متنش به مسیر تبدیل
   شده (uploads/text.svg = «به سوی تصمیم گیری»). قابل ترجمه نیست،
   پس در خروجی انگلیسی با متن واقعی جایگزین می‌شود و ظاهرِ توخالیِ
   همان گرافیک این‌جا بازسازی می‌شود. */
.pipe-outline-en {
  color: transparent;
  -webkit-text-stroke: 1.3px #1a1a2e;
  text-stroke: 1.3px #1a1a2e;
  padding-inline: .12em
}

/* ── ۵) نقشهٔ سایت در صفحهٔ سیستم طراحی ──
   کارت‌ها عرض ثابت ۲۳۲px دارند و برچسب‌ها با ellipsis بریده
   می‌شوند. نام‌های انگلیسی استانداردهای CFA بلندترند، پس ۱۵ تا از
   ۵۸ برچسب نصفه می‌شد. */
[dir="ltr"] .map-list {
  grid-template-columns: repeat(auto-fill, minmax(318px, 1fr))
}

/* ── ۶) تیترِ «ARESS Terminal» در کارت محصول ──
   دو ایراد داشت و هر دو از RTL می‌آمد:

   ۱) لوگو چسبیده بود به متن. ظرفِ .bgt فلکس است بدون gap؛ در
      فارسی ترتیب برعکس بود و فاصله از جای دیگری می‌آمد.
   ۲) فاصلهٔ ARESS تا Terminal دوبرابر بود: هم padding-right: 20px
      اینلاینِ .brand و هم یک فاصلهٔ واقعیِ متنی که از شکستِ خطِ
      مارکاپ بین دو <span> می‌آید. در فارسی آن فاصلهٔ متنی بین دو
      واژه دیده نمی‌شد، در انگلیسی روی هم جمع می‌شدند.

   پس: لوگو فاصله می‌گیرد، و padding صفر می‌شود تا فقط همان
   فاصلهٔ طبیعیِ یک کلمه بماند.
   !important چون طرفِ مقابل style اینلاین است. */
[dir="ltr"] .p-name {
  margin-left: 12px
}

[dir="ltr"] .p-name .brand {
  padding-right: 0 !important
}

/* ── ۷) ماکاپ مانیتور در کارت محصول ──
   تصویر یک style اینلاین با left: 5% دارد. left ویژگیِ فیزیکی است
   و در هر دو جهت به راست هل می‌دهد: در RTL به سمت داخلِ کارت، ولی
   در LTR به سمت لبهٔ بیرونی. نتیجه این بود که تصویر به لبه می‌چسبید
   و overflow:hidden لبه‌اش را می‌برید. آینه‌اش می‌کنیم.
   !important لازم است چون طرفِ مقابل style اینلاین است. */
[dir="ltr"] .p-screens img {
  left: -5% !important
}

/* ── ۸) جا شدن در عرض موبایل ──
   واژهٔ چرخانِ هیرو اندازه‌اش ۴۰px ثابت و !important بود. برای
   «مدیریت ثروت» جا می‌شد، برای «Wealth management» نه: در ۳۷۵px
   عرضش ۳۸۰px می‌شد و از هر دو لبه بیرون می‌زد. */
[dir="ltr"] #tickerTrack > span {
  font-size: clamp(22px, 7.4vw, 40px) !important
}

@media (max-width: 480px) {
  [dir="ltr"] .hero-ctas {
    flex-wrap: wrap;
    justify-content: center
  }

}

/* ── ۹) فلشِ دکمهٔ محصول ──
   آیکن assets/icons/png/glass/arrow-upleft.svg است، یعنی فلشی که
   به بالا-چپ اشاره می‌کند. در RTL «بالا-چپ» جهتِ رو به جلو است،
   در LTR جهتِ رو به عقب. آینه‌اش می‌کنیم تا به بالا-راست اشاره کند. */
[dir="ltr"] .p-cta img {
  transform: scaleX(-1)
}

/* ── ۱۰) نشانگرِ فهرست‌ها (بولت) ──
   این فهرست‌ها بولت پیش‌فرض ندارند؛ به‌جایش یک ::before با
   position:absolute و right:0 دارند و متن با padding-right جا باز
   می‌کند. هر دو ویژگیِ «فیزیکی»اند، پس در LTR نقطه سمت راستِ متن
   می‌افتاد و تورفتگی هم از سمت اشتباه بود.

   چرا این‌جا و نه در ترجمهٔ خودکار: آینه‌کردنِ کورکورانهٔ هر
   left/right در کل شیت خطرناک است — خیلی از آن‌ها تزئینی‌اند
   (واترمارک، موج، درخشش) یا متقارن‌اند (left:0;right:0). پس فقط
   همین الگوی مشخصِ «نشانگرِ فهرست» دستی آینه شده است. */

/* درباره ما — پشتِ کارت اعضای تیم */
[dir="ltr"] .ot-back-list li {
  padding-left: 14px;
  padding-right: 0
}

[dir="ltr"] .ot-back-list li::before {
  left: 0;
  right: auto
}

/* قوانین و مقررات — فهرست مواد و بندها */
[dir="ltr"] .tm-toc-h {
  padding-left: 14px;
  padding-right: 0
}

[dir="ltr"] .tm-clauses > li {
  padding-left: 34px;
  padding-right: 0
}

[dir="ltr"] .tm-clauses > li::before {
  left: 0;
  right: auto
}

/* پردازش اطلاعات مالی — نوارِ کنارِ کارتِ منابع */
[dir="ltr"] .src-card::before {
  left: 0;
  right: auto
}

/* خانه — قابِ بخش رسالت */
[dir="ltr"] .mission-frame {
  padding-left: 24px;
  padding-right: 0
}

/* ── ۱۱) فلشِ راهنمای کاروسلِ «مسیر آرسس» ──
   SVG یک فلشِ رو‌به‌چپ است و انیمیشنش هم ۶px به چپ تکان می‌خورد؛
   در RTL «چپ» یعنی رو به جلو، در LTR یعنی رو به عقب.

   فلیپ روی خودِ <path> زده می‌شود و نه روی <svg>، چون انیمیشن روی
   <svg> نشسته و transform اش هر فلیپی را روی همان عنصر بازنویسی
   می‌کند. transform-box: fill-box لازم است تا مرکزِ چرخش، کادرِ
   خودِ path باشد نه بوم SVG. */
[dir="ltr"] .os-hint svg path {
  transform: scaleX(-1);
  transform-box: fill-box;
  transform-origin: center
}

[dir="ltr"] .os-hint svg {
  animation-name: osArrowEn
}

@keyframes osArrowEn {
  0%, 100% { transform: translateX(0) }
  50% { transform: translateX(6px) }
}

/* ── فونتِ صفحه‌های اصول اخلاقی ──
   بازنویسیِ نامِ فونت در i18n-apply فقط به خودِ صفحه دست می‌زند،
   و این پنجاه صفحه فونتشان را از assets/ethics-base.css می‌گیرند
   که شیتی مشترک است و هر دو زبان لودش می‌کنند. نتیجه: صفحهٔ
   انگلیسی با Vazirmatn و AbarMid رندر می‌شد.

   پس این دو توکن همان‌جا که تعریف شده‌اند override می‌شوند.
   :root[dir="ltr"] به‌جای [dir="ltr"] نوشته شده تا وزنش (۰,۲,۰)
   از :root در ethics-base.css بیشتر باشد و برندگی‌اش به ترتیبِ
   لودِ شیت‌ها بند نباشد. */
:root[dir="ltr"] {
  --body: var(--en-body);
  --display: "Futura PT", "Jost", system-ui, sans-serif
}

/* ── فهرستِ زیربندهای یک قاعده ──
   فقط انگلیسی: متن رسمیِ پنج استاندارد زیربندِ شماره‌دار دارد و
   map-ethics-rule.cjs آن‌ها را <ol> می‌سازد. صفحهٔ فارسی همان‌ها را
   در یک پاراگراف خلاصه کرده، پس این کلاس آن‌جا اصلاً وجود ندارد. */
.rule-items {
  margin: 10px 0 0;
  padding-inline-start: 22px;
  list-style: decimal
}

.rule-items li {
  margin-top: 8px
}

/* ── فلشِ قبلی/بعدی در پوستهٔ صفحه‌های اخلاق ──
   assets/icons/chevron-next.svg به چپ اشاره می‌کند، چون در RTL
   «بعدی» سمت چپ است. در LTR همان فلش به عقب اشاره می‌کند، یعنی
   دکمه «Next» می‌گوید و فلشش «برگرد» را نشان می‌دهد.

   خودِ فایلِ SVG عوض نمی‌شود: هر دو زبان همان فایل را می‌گیرند.
   این‌جا فقط روی صفحهٔ انگلیسی آینه می‌شود. */
[dir="ltr"] .ec-next .ec-icon,
[dir="ltr"] .ec-prev .ec-icon {
  transform: scaleX(-1)
}

/* ═══════════════════════════════════════════════════════════
   چیدمانِ LTR صفحه‌های اصول اخلاقی

   assets/ethics-base.css و دو شیتِ آزمون، جهت را با مقدارهای
   «فیزیکی» نوشته‌اند: text-align:right، border-right، left:14px.
   این‌ها برخلاف start/end از dir پیروی نمی‌کنند، و چون شیت‌ها
   مشترک‌اند، آینه‌کردنِ چیدمان در i18n-apply — که فقط داخل خودِ
   صفحه کار می‌کند — اصلاً آن‌ها را نمی‌بیند.

   پس همه این‌جا برای [dir="ltr"] آینه می‌شوند. خودِ شیت‌ها دست
   نمی‌خورند تا نسخهٔ فارسی هیچ تغییری نکند.
   ═══════════════════════════════════════════════════════════ */

/* ── متنِ گزینه‌ها و کارت‌ها ── */
[dir="ltr"] .tile,
[dir="ltr"] .opt,
[dir="ltr"] .qz .opt,
[dir="ltr"] .qz .ri,
[dir="ltr"] .fq .opt,
[dir="ltr"] .fq .ri {
  text-align: left
}

/* ── نوارِ تأکیدِ کنارهٔ پنل‌ها ──
   border-right در RTL لبهٔ «آغاز» است؛ در LTR لبهٔ پایان، که
   نوار را به سمت اشتباه می‌برد. */
/* .rule را body.has-chrome با !important می‌نویسد، پس آینه‌اش
   هم باید !important باشد وگرنه اصلاً برنده نمی‌شود. */
[dir="ltr"] body.has-chrome .rule {
  border-right: 1px solid rgba(255, 255, 255, .08) !important;
  border-left: 2px solid var(--brand-light) !important
}

[dir="ltr"] .rule {
  border-right: 1px solid rgba(101, 50, 255, .20);
  border-left: 2px solid var(--brand)
}

[dir="ltr"] .qz .scen,
[dir="ltr"] .fq .scen {
  border-right: 0;
  border-left: 2px solid var(--ac)
}

/* ── نشانِ حرفِ گزینه در آزمون‌ها ──
   .k با left:14px چیده شده و padding هم از چپ باز شده. در LTR
   هر دو باید برعکس شوند، وگرنه نشان روی متن می‌افتد. */
[dir="ltr"] .qz .opt,
[dir="ltr"] .fq .opt {
  padding: 14px 48px 14px 16px
}

[dir="ltr"] .qz .opt .k,
[dir="ltr"] .fq .opt .k,
[dir="ltr"] .fq .gain {
  left: auto;
  right: 14px
}

/* ── شمارهٔ بزرگِ پس‌زمینهٔ آزمون ── */
[dir="ltr"] .qz .rn {
  left: auto;
  right: 20px
}

@media (max-width: 900px) {
  [dir="ltr"] .qz .rn { left: auto; right: 14px }
}

/* ── کارتِ «بعدی» در نوار پایین ──
   در RTL به چپِ ردیف می‌چسبد، که انتهای ردیف است. در LTR
   انتهای ردیف سمت راست است. */
[dir="ltr"] .eth-pn.next {
  text-align: right
}

[dir="ltr"] .eth-pn.next:hover { transform: translateX(4px) }
[dir="ltr"] .eth-pn.prev:hover { transform: translateX(-4px) }

@media (max-width: 900px) {
  [dir="ltr"] .eth-pn.next { text-align: left }
}

/* ── فاصلهٔ نشانِ ✓/✕ کنار گزینه ── */
[dir="ltr"] .opt .mark {
  margin-left: 0;
  margin-right: 8px
}

[dir="ltr"] .eth-pn .t b {
  margin-left: 0;
  margin-right: 5px
}

/* ── حبابِ راهنمای مسکات ──
   left:calc(100% + 12px) یعنی «سمت راستِ تصویر»، که در RTL
   بعد از آن است و در LTR قبل از آن. */
[dir="ltr"] .guide .say {
  left: auto;
  right: calc(100% + 12px);
  border-radius: 14px 14px 4px 14px
}

/* ── حرکتِ hover گزینه‌ها ── */
[dir="ltr"] .qz .opt:hover:not(:disabled),
[dir="ltr"] .qz .ri:hover,
[dir="ltr"] .fq .opt:hover:not(:disabled),
[dir="ltr"] .fq .ri:hover {
  transform: translateX(3px)
}

/* ── برچسبِ دکمه‌های قبلی/بعدی در نوار پایین ──
   این‌ها متنِ واقعی ندارند: ethics-base.css عنوان قاعده را
   display:none می‌کند و برچسب را با content: در شبه‌عنصر می‌سازد.

   متنِ داخل content نه مارکاپ است نه رشتهٔ اسکریپت، پس نه
   i18n-apply آن را می‌بیند و نه دیکشنریِ ethics-chrome.js —
   و دکمه بی‌هیچ خطایی فارسی می‌ماند.

   جای شورون خودش درست می‌شود: ::before اولین آیتمِ فلکس است،
   پس در RTL راست می‌نشیند و در LTR چپ. فقط متن عوض می‌شود. */
[dir="ltr"] body.has-chrome .eth-pn.prev::after { content: 'Previous' }
[dir="ltr"] body.has-chrome .eth-pn.next::before { content: 'Next' }
[dir="ltr"] body.has-chrome .eth-pn-final::before { content: 'Comprehensive quiz' }

/* ── شورونِ همان دکمه‌ها ──
   ethics-base.css دو متغیر دارد: --eth-chev-r به راست و
   --eth-chev-l به چپ. «بعدی» از چپی استفاده می‌کند، که در RTL
   یعنی «جلو». در LTR جلو سمت راست است.

   به‌جای بازنویسی قاعده‌ها، فقط خودِ دو متغیر با هم عوض می‌شوند:
   هر جایی که شورون استفاده شود — حالا و بعداً — خودکار درست
   می‌شود، و هیچ انتخابگری تکرار نمی‌شود. */
[dir="ltr"] body.has-chrome {
  --eth-chev-r: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 5l-7 7 7 7'/%3E%3C/svg%3E");
  --eth-chev-l: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 5l7 7-7 7'/%3E%3C/svg%3E")
}

/* ── نوار مرحله‌های هیروی fdp ──
   خطِ زیر نقطه‌ها از قطعه‌های جداگانه ساخته می‌شود: هر .hs-item یک
   ::before با left:0;right:0 دارد و کنار هم یک خط پیوسته می‌شوند.
   دو سرِ خط باید نصف شوند تا از بیرونی‌ترین نقطه جلوتر نروند، و
   fdp.html این کار را با right:50% روی first-child و left:50% روی
   last-child انجام می‌دهد.

   این دو، افستِ فیزیکی‌اند و فقط در RTL درست‌اند: آنجا first-child
   راست‌ترین است. در LTR اولین مورد چپ‌ترین می‌شود، پس right:50%
   نیمهٔ *قبلِ* نقطهٔ اول را رنگ می‌کند و نیمهٔ بعدش خالی می‌ماند.
   نتیجه دقیقاً همان چیزی است که دیده شد: خط بین نقطهٔ ۱ و ۲ و بین
   ۵ و ۶ قطع می‌شود و دو زائده هم از دو سرِ بیرونی بیرون می‌زند.

   mirror() در apply.cjs فقط text-align و flex-direction را آینه
   می‌کند، نه left/right، پس اینجا آینه می‌شود. */
[dir="ltr"] .hs-item:first-child::before { right: 0; left: 50% }
[dir="ltr"] .hs-item:last-child::before  { left: 0; right: 50% }

/* ── متنِ خودِ استاندارد در کادر تیره ──
   .rule-items فقط در خروجی انگلیسی هست (map-ethics-rule.cjs آن را
   می‌سازد)، پس هیچ قاعده‌ای در ethics-base.css رنگش نمی‌داد و رنگِ
   تیرهٔ متنِ صفحه را ارث می‌برد — یعنی جوهرِ تقریباً مشکی روی کادرِ
   بنفشِ تیره. متن آن‌جا بود ولی دیده نمی‌شد؛ فقط با انتخاب‌کردن
   پیدا می‌شد. دقیقاً همان رنگی که .rule p می‌گیرد. */
.rule-items li { color: var(--ink-2) }
body.has-chrome .rule-items li { color: rgba(255, 255, 255, .78) }
body.has-chrome .rule-items b  { color: #fff }

/* ── ردیفِ بردکرامب و کنترل‌های بالا ──
   بردکرامبِ انگلیسی خیلی بلندتر از فارسی است («Code of Professional
   Ethics › Standard V — Investment Analysis, Recommendations, and
   Actions › …» حدود ۸۳۱px در ظرفِ ۸۹۲px). flex-item به‌طور پیش‌فرض
   با min-width:auto کوچک نمی‌شود، پس کنترل‌ها به خطِ بعد می‌افتادند
   و چون .eth-hero-block .eth-crumb-row حاشیهٔ پایینش صفر است، روی
   ردیفِ «Standard V(A)» می‌نشستند.

   min-width:0 به‌تنهایی کافی نیست: ردیف خودش flex-wrap:wrap دارد و
   مرورگر وقتی بتواند بشکند، ترجیح می‌دهد بشکند تا کوچک کند. پس
   هم شکستنِ ردیف برداشته می‌شود و هم به بردکرامب اجازهٔ کوچک‌شدن
   داده می‌شود؛ خودِ بردکرامب flex-wrap:wrap دارد، پس متنش به دو
   خط می‌رود و کنترل‌ها کنارش می‌مانند — همان رفتاری که نسخهٔ فارسی
   دارد. آن‌وقت justify-content:space-between خودش کنترل‌ها را در
   LTR به راست می‌برد و هیچ قاعدهٔ جهت‌دارِ تازه‌ای لازم نیست.

   زیر ۶۴۰px دست نمی‌خورد: آن‌جا ethics-base.css ردیف را عمداً
   ستونی می‌کند و nowrap همه را به هم می‌فشرد. */
@media (min-width: 641px) {
  [dir="ltr"] .eth-crumb-row { flex-wrap: nowrap }
  [dir="ltr"] .eth-crumb-row .eth-crumb { min-width: 0 }
}

/* بردکرامبِ انگلیسی دو خط می‌شود، پس ردیف یک خط بلندتر از فارسی
   است و ردیفِ «Standard V(A)» را می‌چسباند به خودش.
   .eth-hero-block فلکس است، پس حاشیهٔ پایینِ همین ردیف کار می‌کند. */
[dir="ltr"] .eth-hero-block .eth-crumb-row { margin-bottom: 22px }

/* ── شمارهٔ واترمارکِ کارت‌ها ──
   ethics-base.css آن را counter(card, persian) می‌نویسد، یعنی سبکِ
   شمارشِ فارسی، نه یک متنِ فارسی. پس هیچ اسکنی پیدایش نمی‌کند:
   در HTML عددی نیست، در جدولِ ترجمه کلیدی نیست، و حتی خواندنِ
   content هم رشتهٔ «counter(card, persian)» را می‌دهد که خودش یک
   حرف فارسی ندارد. فقط در مرورگر، به‌شکل ۱۲۳۴، دیده می‌شود.

   جای کارت با inset-inline-end تعریف شده که خودش با dir می‌چرخد،
   پس فقط خودِ سبکِ شمارش عوض می‌شود. */
[dir="ltr"] body.has-chrome .card::after { content: counter(card, decimal) }

/* ── شمارهٔ بندهای صفحهٔ شرایط ──
   terms.html آن‌ها را counter(cl, persian) "،" می‌نویسد: هم رقمِ
   فارسی و هم ویرگولِ فارسی به‌عنوان جداکننده. مثل واترمارکِ کارت‌ها،
   این هم یک سبکِ شمارش است نه متن، پس نه در مارکاپ رقمی هست و نه
   در جدولِ ترجمه کلیدی. حتی innerText هم نشانش نمی‌دهد، چون محتوای
   شبه‌عنصر در آن نمی‌آید — تنها راهِ دیدنش خواندنِ computed content
   یا نگاه‌کردن به صفحه است. */
[dir="ltr"] .tm-clauses > li::before { content: counter(cl, decimal) "." }