/* dmhouse-web-price.css — شیوه‌نامهٔ قالب «قیمت طراحی سایت».
   توکن‌های رنگ، فونت‌ها و دکمهٔ درخشان از base.css سراسری می‌آیند؛ هرچه اینجاست با
   پیشوند dmpr محدود شده و هیچ قاعدهٔ عنصرِ برهنه‌ای ندارد تا به هدر و فوتر نشت نکند. */

/* ═══════════ پایه ═══════════ */

.dmpr-main {
    overflow-x: clip;
}

.dmpr-skip {
    position: absolute;
    inset-block-start: -100px;
    inset-inline-start: 16px;
    z-index: 200;
    padding: 10px 18px;
    border-radius: 0 0 12px 12px;
    background-color: var(--color-navy, #0a192f);
    color: #fff;
    transition: inset-block-start .2s ease;
}

.dmpr-skip:focus {
    inset-block-start: 0;
}

.dmpr-visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
}

/* ⚠ فاصلهٔ سکشن‌ها از یک جا می‌آید و دستی جای دیگری نوشته نمی‌شود.
   نکتهٔ اصلی که قبلاً رعایت نشده بود: سکشنی که موج دارد، موج را روی سقف و کف خودش
   می‌کشد و ارتفاع موج تا صد و بیست پیکسل می‌رسد؛ با فاصلهٔ معمولی، متن زیر موج
   می‌رفت و آن سکشن «چسبیده به بالا» دیده می‌شد. پس سکشن موج‌دار فاصلهٔ بیشتری
   می‌گیرد و همهٔ سکشن‌ها با همین دو قاعده یکسان می‌مانند. */
/* ⚠ همان مقیاس سه قالب کدی دیگر، عیناً. فاصلهٔ سکشن موج‌دار با همان فرمول نوشته
   می‌شود: ارتفاع موج به‌علاوهٔ فاصلهٔ تنفس. */
.dmpr-sec {
    position: relative;
    padding-block: clamp(56px, 7vw, 110px);
}

.dmpr-sec.section-meld {
    padding-block: calc(clamp(50px, 8vw, 120px) + clamp(40px, 5vw, 70px));
}

.dmpr-head {
    max-width: 900px;
    margin-block-end: clamp(24px, 3.5vw, 46px);
}

.dmpr-head--center {
    max-width: 760px;
    margin-inline: auto;
    text-align: center;
}

/* ⚠ برچسب بالای عنوان دیگر نسخهٔ محلی ندارد: کلاس سراسری dm-eyebrow در base.css
   استفاده می‌شود و مرجعش صفحهٔ اصلی است. */

/* ⚠ اندازه و ترازِ عنوان‌ها اینجا بازنویسی می‌شود: شیوه‌نامهٔ پایه به عنوان سطح دو
   اندازهٔ ۴۴ و وسط‌چینی می‌دهد که برای عنوان‌های بلند این صفحه بیش از حد است. */
.dmpr-title {
    margin: 0 0 14px;
    font-size: clamp(22px, 2.6vw, 34px);
    line-height: 1.7;
    color: var(--text-primary);
    text-align: start;
}

.dmpr-head--center .dmpr-title {
    text-align: center;
}

.dmpr-title--bar {
    padding-inline-start: 16px;
    border-inline-start: 4px solid var(--accent-primary);
}

.dmpr-lead {
    margin: 0 0 12px;
    font-size: 15px;
    line-height: 2.1;
    color: var(--text-secondary);
    text-align: justify;
}

/* ⚠ رنگ پیوندها: نسخهٔ قبلی فقط چند متن آزاد را پوشش می‌داد و بقیه (نوار انکرها، مسیر
   راهنما، دکمهٔ ثانویه) صورتی می‌ماندند. علتش یک قاعدهٔ سطح سایت است که رنگ پیوند را از
   متغیر رنگِ اصلیِ سازندهٔ صفحه می‌گیرد و با important می‌نشاند؛ هیچ ویژگی سلکتوری بر
   important غلبه نمی‌کند، پس تنها راه، important در برابر important است.
   گام اول: هر پیوندِ داخل این قالب رنگ را از عنصر والدش ارث می‌برد، یعنی رنگ تحمیلی
   خنثی می‌شود. گام دوم: هر جایی که واقعاً باید رنگ تأکیدی داشته باشد، صریح گفته می‌شود.
   این ترتیب باعث می‌شود پیوند تازه‌ای که فردا اضافه شود هم خودبه‌خود سالم باشد. */
.dmpr-main a,
.dmpr-main a:link,
.dmpr-main a:visited,
.dmpr-main a:hover,
.dmpr-main a:focus,
.dmpr-main a:active {
    color: inherit !important;
}

.dmpr-lead a,
.dmpr-lead a:visited,
.dmpr-hero__desc a,
.dmpr-hero__desc a:visited,
.dmpr-slide__intro a,
.dmpr-slide__intro a:visited,
.dmpr-note__text a,
.dmpr-note__text a:visited,
.dmpr-read__body a,
.dmpr-read__body a:visited,
.dmpr-crumbs__item--current span,
.dmpr-tabs__link.is-active,
.dmpr-tabs__link.is-active:visited {
    color: var(--accent-primary) !important;
    font-weight: 700;
    text-decoration: none;
}

.dmpr-lead a,
.dmpr-lead a:visited,
.dmpr-hero__desc a,
.dmpr-hero__desc a:visited,
.dmpr-slide__intro a,
.dmpr-slide__intro a:visited,
.dmpr-note__text a,
.dmpr-note__text a:visited,
.dmpr-read__body a,
.dmpr-read__body a:visited {
    border-block-end: 1px dashed currentColor;
}

.dmpr-lead a:hover,
.dmpr-hero__desc a:hover,
.dmpr-slide__intro a:hover,
.dmpr-note__text a:hover,
.dmpr-read__body a:hover {
    color: var(--accent-secondary) !important;
}

.dmpr-crumbs a,
.dmpr-crumbs a:visited {
    color: var(--text-secondary) !important;
}

.dmpr-crumbs a:hover {
    color: var(--accent-primary) !important;
}

.dmpr-tabs__link,
.dmpr-tabs__link:visited {
    color: var(--text-secondary) !important;
}

.dmpr-tabs__link:hover {
    color: var(--text-primary) !important;
}

.dmpr-hero__ghost,
.dmpr-hero__ghost:visited {
    color: var(--text-primary) !important;
}

.dmpr-hero__ghost:hover {
    color: var(--accent-primary) !important;
}

/* ═══════════ هیرو ═══════════ */

/* ⚠ فقط کفِ هیرو موج دارد (موج سقف پایین‌تر خاموش شده)، پس تنها همان سمت فاصلهٔ
   موج‌دار می‌گیرد و سقف فاصلهٔ معمولی می‌ماند. */
.dmpr-hero.dmpr-sec.section-meld {
    overflow: hidden;
    padding-block: clamp(70px, 10vw, 130px) clamp(110px, 13vw, 180px);
}

/* ⚠ موج بالای سکشن با رنگ سکشن قبلی کشیده می‌شود و بالای هیرو چیزی نیست؛ آن موج فقط
   یک نوار سفید بی‌معنا می‌شد. موج پایین می‌ماند و به سکشن روشن بعدی وصل است. */
.dmpr-hero.section-meld::before {
    display: none;
}

.dmpr-hero__grid {
    position: relative;
    z-index: 5;
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
    gap: clamp(32px, 5vw, 64px);
    align-items: center;
}

.dmpr-crumbs {
    margin-block-end: 16px;
    font-size: 13px;
    color: var(--text-secondary);
}

.dmpr-crumbs__list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.dmpr-crumbs__item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.dmpr-crumbs__item + .dmpr-crumbs__item::before {
    content: "»";
    color: var(--text-secondary);
    opacity: .55;
}

.dmpr-crumbs__item--current span {
    color: var(--accent-primary);
}

.dmpr-hero__title {
    margin: 0 0 18px;
    font-size: clamp(32px, 4.6vw, 58px);
    line-height: 1.4;
    color: var(--text-primary);
    text-align: start;
}

.dmpr-hero__desc {
    margin: 0 0 30px;
    max-width: 64ch;
    font-size: 16px;
    line-height: 2.2;
    color: var(--text-secondary);
    text-align: justify;
}

.dmpr-hero__desc a {
    font-weight: 700;
    border-block-end: 1px solid currentColor;
}

.dmpr-hero__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px;
}

.dmpr-hero__ghost {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 15px 24px;
    border: 1px solid var(--border-color);
    border-radius: var(--pill-radius, 50px);
    font-size: 15px;
    font-weight: 700;
    color: var(--text-primary);
    transition: border-color var(--transition-fast), color var(--transition-fast);
}

/* ⚠ حاشیه‌ها فیزیکی‌اند نه منطقی: با حاشیهٔ منطقی، در صفحهٔ راست‌به‌چپ لبهٔ «آغاز» همان
   لبهٔ راست می‌شود و پیکان وارونه می‌افتد. این دکمه به بخشی پایین‌تر در همین صفحه
   می‌پرد، پس نوکِ پیکان رو به پایین درست‌ترین نشانه است. */
.dmpr-hero__ghost::after {
    content: "";
    width: 7px;
    height: 7px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: translateY(-2.2px) rotate(45deg);
}

.dmpr-hero__ghost:hover {
    border-color: var(--accent-primary);
    color: var(--accent-primary);
}

.dmpr-hero__figure {
    position: relative;
    margin: 0;
    padding: 12px;
    border: 1px solid var(--border-color);
    border-radius: 26px;
    background-color: rgba(255, 255, 255, .04);
    box-shadow: var(--card-shadow);
}

.dmpr-hero__figure img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 11;
    object-fit: cover;
    border-radius: 18px;
}

/* ═══════════ طرح جایگزینِ تصویر هیرو ═══════════ */

/* ⚠ وقتی تصویری در تنظیمات برگه انتخاب نشده، این طرح جای آن می‌نشیند تا قاب هیرو خالی
   نماند. طرحِ این قالب «پلکان پلن‌ها»ست چون موضوع صفحه قیمت است؛ دو قالب دیگر طرح
   خودشان را دارند و هر سه عمداً با هم فرق می‌کنند.
   ⚠ فقط رنگ و شکل؛ نه فیلتر، نه پرسپکتیو. هیچ متنی هم داخلش نیست، پس چیزی برای
   صفحه‌خوان و موتور جستجو اضافه نمی‌کند. */
.dmpr-mock {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 16 / 11;
    padding: 26px 26px 0;
    border-radius: 18px;
    background-image: linear-gradient(180deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, 0) 60%);
    background-color: rgba(255, 255, 255, .03);
}

/* سه خط افقیِ کم‌رنگ، مثل خطوط راهنمای یک نمودار. */
.dmpr-mock__grid {
    position: absolute;
    inset: 26px 26px 34px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.dmpr-mock__grid i {
    display: block;
    height: 1px;
    background-color: rgba(245, 214, 143, .12);
}

.dmpr-mock__bars {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 6%;
    height: calc(100% - 34px);
}

.dmpr-mock__bar {
    position: relative;
    flex: 1;
    border-radius: 12px 12px 0 0;
    background-image: linear-gradient(180deg, rgba(245, 214, 143, .22), rgba(245, 214, 143, .05));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22);
}

.dmpr-mock__bar--a { height: 34%; }
.dmpr-mock__bar--b { height: 52%; }
.dmpr-mock__bar--d { height: 68%; }

/* ستون سوم، ستونِ «پیشنهادی»: توپر و روشن‌تر از بقیه. */
.dmpr-mock__bar--c {
    height: 88%;
    background-image: linear-gradient(180deg, #c98a4d 0%, #b87333 55%, #9c5c25 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .38),
                0 10px 22px -16px rgba(90, 52, 18, .95);
}

/* برچسبِ کوچکِ بالای همان ستون. */
.dmpr-mock__tag {
    position: absolute;
    inset-block-start: -22px;
    inset-inline: 12%;
    height: 12px;
    border-radius: var(--pill-radius, 50px);
    background-color: rgba(245, 214, 143, .55);
}

.dmpr-mock__base {
    position: absolute;
    inset-inline: 26px;
    inset-block-end: 34px;
    height: 2px;
    border-radius: 2px;
    background-image: linear-gradient(to left, rgba(245, 214, 143, .45), rgba(245, 214, 143, .08));
}

/* نشانِ قیمت شروع؛ روی لبهٔ قاب می‌نشیند و از تصویر بیرون می‌زند. */
.dmpr-hero__badge {
    position: absolute;
    inset-block-end: -18px;
    inset-inline-start: -14px;
    display: grid;
    gap: 2px;
    padding: 12px 20px;
    border: 1px solid rgba(245, 214, 143, .34);
    border-radius: 16px;
    background-color: var(--color-navy, #0a192f);
    background-image: linear-gradient(160deg, rgba(245, 214, 143, .18), rgba(245, 214, 143, 0) 70%);
    box-shadow: 0 18px 40px -24px rgba(0, 0, 0, .9);
}

.dmpr-hero__badge-label {
    font-size: 12px;
    color: rgba(255, 255, 255, .7);
}

.dmpr-hero__badge-value {
    font-size: clamp(15px, 1.6vw, 18px);
    font-weight: 800;
    color: var(--color-gold, #f5d68f);
}

/* ═══════════ نوار انکرها ═══════════ */

/* ⚠ نوار چسبان است ولی هدر سایت هم ثابت است؛ فاصله از بالا باید از ارتفاع هدر بیشتر
   بماند وگرنه انکرها زیر هدر پنهان می‌شوند. */
.dmpr-tabs {
    position: sticky;
    inset-block-start: clamp(100px, 9vh, 140px);
    z-index: 20;
    margin-block-end: clamp(22px, 3vw, 36px);
    padding: 8px;
    border: 1px solid var(--border-color);
    border-radius: var(--pill-radius, 50px);
    background-color: var(--bg-secondary);
    box-shadow: 0 20px 44px -34px rgba(0, 0, 0, .9);
}

.dmpr-tabs__list {
    display: flex;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.dmpr-tabs__item {
    flex: 1 1 0;
    min-width: 0;
}

.dmpr-tabs__link {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    width: 100%;
    padding: 12px 14px;
    border: 1px solid transparent;
    border-radius: var(--pill-radius, 50px);
    font-size: 14px;
    font-weight: 700;
    color: var(--text-secondary);
    white-space: nowrap;
    transition: background-color var(--transition-fast), color var(--transition-fast),
                border-color var(--transition-fast);
}

.dmpr-tabs__num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    height: 24px;
    border-radius: 50%;
    background-color: rgba(245, 214, 143, .12);
    font-size: 12px;
    font-weight: 800;
    color: var(--accent-primary);
    transition: background-color var(--transition-fast), color var(--transition-fast);
}

.dmpr-tabs__link:hover {
    border-color: var(--border-color);
    color: var(--text-primary);
}

.dmpr-tabs__link.is-active {
    border-color: rgba(245, 214, 143, .4);
    background-color: rgba(245, 214, 143, .12);
    color: var(--accent-primary);
}

.dmpr-tabs__link.is-active .dmpr-tabs__num {
    background-color: var(--accent-primary);
    color: var(--color-navy, #0a192f);
}

/* ═══════════ اسلایدر ═══════════ */

.dmpr-slider {
    position: relative;
}

/* ⚠ اینجا هیچ ظرف اسکرول افقی‌ای نیست و این تصمیم پس از یک شکست واقعی گرفته شده:
   نسخهٔ اول از چسبیدنِ اسکرول بومی استفاده می‌کرد، ولی عنصری که در یک محور اسکرول
   می‌شود در محور دیگر هم ناچار ظرف اسکرول می‌شود؛ چون هر اسلاید بلندتر از یک نمای
   صفحه بود، چرخ ماوس روی آن گیر می‌کرد و کاربر حس می‌کرد کل صفحه قفل شده. ارتفاع
   نامساوی اسلایدها و فضای خالی هم از همان‌جا می‌آمد.
   حالا فقط اسلاید جاری در جریان صفحه است؛ کشیدن با انگشت را جاوااسکریپت می‌گرداند. */
.dmpr-slider__stage {
    position: relative;
    /* روی لمس، کشیدن عمودی مال مرورگر می‌ماند و افقی به ما می‌رسد. */
    touch-action: pan-y;
}

.dmpr-slide {
    padding: clamp(20px, 2.6vw, 34px);
    border: 1px solid var(--border-color);
    border-radius: 26px;
    background-color: var(--bg-secondary);
    /* فاصله‌ای که لنگرِ مرورگر هنگام پرش رعایت می‌کند تا زیر نوار چسبان نرود. */
    scroll-margin-block-start: clamp(150px, 16vh, 210px);
}

/* بدون جاوااسکریپت، هر پنج اسلاید پشت سر هم دیده می‌شوند. */
.dmpr-slider:not(.is-ready) .dmpr-slide + .dmpr-slide {
    margin-block-start: clamp(16px, 2vw, 24px);
}

.dmpr-slide.is-current {
    border-color: rgba(245, 214, 143, .34);
    animation: dmprSlideIn .35s ease both;
}

@keyframes dmprSlideIn {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: none; }
}

/* ⚠ صفت hidden وزن ۰-۱-۰ دارد و هر کلاسی که display بدهد آن را می‌بازد؛ این قاعده
   تضمین می‌کند اسلایدی که اسکریپت پنهان کرده واقعاً پنهان بماند. */
.dmpr-slide[hidden] {
    display: none !important;
}

.dmpr-slide__head {
    margin-block-end: clamp(18px, 2.4vw, 28px);
}

.dmpr-slide__step {
    display: inline-block;
    margin-block-end: 10px;
    padding: 4px 13px;
    border-radius: var(--pill-radius, 50px);
    background-color: rgba(245, 214, 143, .12);
    font-size: 12px;
    font-weight: 700;
    color: var(--accent-primary);
}

.dmpr-slide__title {
    margin: 0 0 12px;
    font-size: clamp(20px, 2.3vw, 30px);
    line-height: 1.7;
    color: var(--text-primary);
    text-align: start;
}

.dmpr-slide__intro {
    margin: 0;
    max-width: 92ch;
    font-size: 15px;
    line-height: 2.1;
    color: var(--text-secondary);
    text-align: justify;
}

.dmpr-slide__intro a {
    font-weight: 700;
    color: var(--accent-primary);
    border-block-end: 1px solid currentColor;
}

/* ── دکمه‌های قبل و بعد، با نام مقصد ── */

/* دکمه‌ها بالای اسلاید نشسته‌اند تا در نمای اول دیده شوند؛ اندازه‌گیری شد که اسلاید
   حتی با جدولِ کوتاه‌شده بلندتر از یک نمای صفحه است. */
.dmpr-slider__nav {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(10px, 1.4vw, 18px);
    margin-block-start: clamp(14px, 1.8vw, 20px);
}

.dmpr-navbtn {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 18px;
    border: 1px solid var(--border-color);
    border-radius: 18px;
    background-color: transparent;
    font-family: inherit;
    cursor: pointer;
    text-align: start;
    transition: border-color var(--transition-fast), background-color var(--transition-fast),
                opacity var(--transition-fast);
}

.dmpr-navbtn--next {
    justify-content: flex-end;
    text-align: end;
}

.dmpr-navbtn:hover:not(:disabled) {
    border-color: rgba(245, 214, 143, .4);
    background-color: rgba(245, 214, 143, .06);
}

.dmpr-navbtn:disabled {
    opacity: .35;
    cursor: default;
}

.dmpr-navbtn__text {
    display: grid;
    gap: 3px;
    min-width: 0;
}

.dmpr-navbtn__hint {
    font-size: 12px;
    color: var(--text-secondary);
}

.dmpr-navbtn__name {
    font-size: 14px;
    font-weight: 700;
    color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ⚠ حاشیه‌های پیکان فیزیکی‌اند نه منطقی: با حاشیهٔ منطقی، در صفحهٔ راست‌به‌چپ جهت
   پیکان وارونه می‌شود. «قبلی» در راست‌به‌چپ یعنی نوکِ پیکان به راست. */
.dmpr-navbtn__icon {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border: 1px solid var(--border-color);
    border-radius: 50%;
    color: var(--accent-primary);
}

.dmpr-navbtn__icon::before {
    content: "";
    width: 9px;
    height: 9px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
}

.dmpr-navbtn--prev .dmpr-navbtn__icon::before {
    transform: translate(-3.2px, 0) rotate(-45deg);
}

.dmpr-navbtn--next .dmpr-navbtn__icon::before {
    transform: translate(3.2px, 0) rotate(135deg);
}

/* ═══════════ جدول ═══════════ */

/* ⚠ نشانه‌گذاری جدول از افزونهٔ جدول‌ها می‌آید، پس همهٔ قاعده‌ها روی کلاس‌های همان افزونه
   نوشته شده‌اند و زیر ریشهٔ این قالب محدود شده‌اند تا به جدول‌های جای دیگر سایت نزنند.
   ⚠ ویژگی سلکتور عمداً بالا برده شده: شیوه‌نامهٔ خودِ افزونه و شیوه‌نامهٔ سازندهٔ صفحه هر
   دو روی همین کلاس‌ها قاعده دارند و با ویژگی پایین، رنگ و فاصله‌ها برنده نمی‌شدند. */

.dmpr-table {
    position: relative;
    margin-block-start: clamp(18px, 2.4vw, 26px);
}

/* ⚠ چیدمان انعطافی است، و این یک ترفند نیست بلکه تنها مکانیزم قابل اتکاست.
   سه بار «عرض» را با important نوشتیم و روی سایت زنده جدول باز هم نصف قاب ماند؛
   در بستر آزمایش همان نشانه‌گذاری با همین شیوه‌نامه کامل پر می‌شد، یعنی قاعده درست
   است و چیزی در سایت آن را می‌شکند. در چیدمان انعطافی، کِشش عضو از خصوصیتِ «عرض»
   خوانده نمی‌شود؛ پس هر قاعده‌ای که عرض را دستکاری کند دیگر بی‌اثر است.
   ⚠ عضو فقط بزرگ می‌شود و کوچک نمی‌شود، تا جدول‌های پهن همچنان بتوانند سرریز کنند و
   همین ظرف اسکرول افقی‌شان بدهد. */
/* ⚠ ظرف دیگر قاب نیست: از وقتی خانه‌ها جدا از هم و هرکدام یک کارت مستقل شدند، یک قاب
   دور آن‌ها جدول را دوباره «جعبه» می‌کرد و همان جدایی را خنثی می‌کرد.
   ⚠ فاصلهٔ درونی لازم است، نه تزئینی: سرریزِ افقی، برش عمودی هم می‌آورد و بدون این
   فاصله سایهٔ زیر کارت‌ها از لبهٔ ظرف بریده می‌شد. */
.dmpr-table__scroll {
    display: flex;
    overflow-x: auto;
    padding: 6px 4px 14px;
    border: 0;
    background-color: transparent;
}

/* ⚠ سلکتور عمداً به نام کلاسِ افزونه و به پوششِ بیرونی وابسته نیست: هر جدولی که
   مستقیم داخل این ظرف بنشیند کشیده می‌شود. اگر روزی افزونه نام کلاسش را عوض کند یا
   پوشش بیرونی جابه‌جا شود، این قاعده همچنان کار می‌کند. */
.dmpr-table__scroll > table {
    flex: 1 0 auto;
}

.dmpr-table__missing {
    margin: 12px 0;
    padding: 12px 16px;
    border: 1px dashed var(--border-color);
    border-radius: 12px;
    font-size: 14px;
    color: var(--text-secondary);
}

/* ⚠ عرض جدول با important نوشته می‌شود و این تصمیم بر پایهٔ اندازه‌گیری است نه حدس:
   همین نشانه‌گذاری و همین شیوه‌نامه در یک صفحهٔ ایزوله سنجیده شد و جدول کامل عرض قابش
   را گرفت (۱۳۵۸ از ۱۳۶۰ پیکسل). پس قاعدهٔ ما درست است و روی سایت زنده قاعدهٔ دیگری
   آن را می‌شکند؛ تنها چیزی که بر important غلبه می‌کند، important است.
   هر سه خصوصیت با هم می‌آیند: نوشتن فقط عرض کافی نیست اگر آن قاعده سقف عرض یا کف عرض
   را هم بسته باشد. */
/* ⚠ display اینجا عمداً inline-table است و این تنها تکه‌ای از این پرونده است که بر پایهٔ
   آزمایشِ خودِ کارفرما روی سایت زنده نوشته شده، نه بر پایهٔ اندازه‌گیری من: در محیط
   ایزوله — حتی با بارکردن شیوه‌نامهٔ خودِ افزونه — جدول همیشه کامل عرض می‌گرفت، پس
   قاعده‌ای بیرون از هر دو پرونده در کار است. محتمل‌ترین جا «سی‌اس‌اس سفارشی» خودِ
   افزونه است که در پایگاه داده ذخیره می‌شود و بعد از شیوه‌نامه‌اش بار می‌شود؛ چون در
   پرونده‌های افزونه نیست، با خواندن کد پیدا نمی‌شود.
   در ظرفِ انعطافی، این مقدار خودبه‌خود به table تبدیل می‌شود و بی‌اثر است؛ پس هر دو
   مسیر پوشش داده می‌شوند و هیچ‌کدام دیگری را خراب نمی‌کند.
   ⚠ حاشیهٔ صفر هم لازم است: شیوه‌نامهٔ افزونه margin خودکار می‌دهد و حاشیهٔ خودکار در
   ظرف انعطافی فضای آزاد را می‌بلعد. */
.dmpr-main .dmpr-table .tablepress {
    display: inline-table;
    width: 100% !important;
    min-width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    border: 0;
    border-collapse: separate;
    /* ⚠ همین یک خط است که خانه‌ها را از هم جدا می‌کند؛ بدون آن هیچ کارتی از کارت کناری
       فاصله نمی‌گیرد و شعاع گوشه‌ها هم دیده نمی‌شود. */
    border-spacing: 9px;
    font-size: 14px;
    background-color: transparent;
}

/* ⚠ خط جداکنندهٔ افقی برداشته شد: وقتی هر خانه یک کارت جداست، خط زیر آن یک مرزِ دوم
   می‌سازد و همان چیزی است که جدول را شلوغ نشان می‌دهد. جدایی را فاصله می‌سازد. */
.dmpr-main .dmpr-table .tablepress th,
.dmpr-main .dmpr-table .tablepress td {
    padding: 15px 17px;
    border: 0;
    border-radius: 13px;
    line-height: 1.9;
    vertical-align: middle;
    background-color: transparent;
    word-break: normal;
    overflow-wrap: anywhere;
    transition: box-shadow var(--transition-fast), border-color var(--transition-fast);
}

/* ستون اول=نام ویژگی: آغازچین و پررنگ. بقیهٔ ستون‌ها مقدارند و وسط‌چین می‌مانند تا
   ستون‌ها در یک نگاه با هم مقایسه شوند. */
.dmpr-main .dmpr-table .tablepress .column-1 {
    min-width: 190px;
    text-align: start;
    font-weight: 700;
    color: var(--text-primary);
}

/* خانه‌های مقدار: کارت برجستهٔ روشن. یک خط نوریِ یک‌پیکسلی بالای کارت و یک سایهٔ کوتاه
   زیرش، همان حداقلی که برای «بالا بودن» لازم است. */
/* ⚠ اعلان اول یک عقب‌نشینی است، نه تکرار: مرورگری که color-mix را نشناسد خط دوم را
   نادیده می‌گیرد و همان رنگ توپر را می‌گیرد؛ بدون آن، خانه بی‌رنگ می‌شد.
   نیمه‌شفافی هم عمدی است: رنگ سکشن کمی از پشت کارت پیداست و همین است که سطح را
   شیشه‌ای می‌کند، بدون آنکه چیزی واقعاً تار شود. */
.dmpr-main .dmpr-table .tablepress td:not(.column-1) {
    background-color: var(--bg-secondary);
    background-color: color-mix(in srgb, var(--bg-secondary) 82%, transparent);
    background-image: linear-gradient(180deg,
                      rgba(255, 255, 255, .85) 0%,
                      rgba(255, 255, 255, .30) 47%,
                      rgba(255, 255, 255, 0) 48%,
                      rgba(255, 255, 255, .14) 100%);
    box-shadow: inset 0 0 0 1px var(--border-color),
                inset 0 1px 0 rgba(255, 255, 255, .95),
                0 6px 12px -9px rgba(10, 25, 47, .60);
    text-align: center;
    color: var(--text-secondary);
}

/* ⚠ برجستگی از «لبه» ساخته می‌شود، نه از «سایهٔ پخش». هر لایه بدون پخش‌شدگی و فقط یک
   تا سه پیکسل است: تابش لبهٔ بالا (نور از بالا)، تیرگی لبهٔ پایین، و یک لبِ کوتاه زیر
   ردیف که ضخامت را می‌سازد. سایهٔ پخش روی ردیفِ تمام‌عرض به‌جای عمق، لکه می‌سازد.
   ⚠ نه فیلتر و نه جابه‌جایی: هر دو ردیف را به لایهٔ گرافیکی جدا می‌برند و در موبایل
   متن جدول را مات می‌کنند. */
/* ⚠ سرستون حالا یک کلید توپرِ مسی است، نه یک ته‌رنگ. برجستگی از چهار لایهٔ کوتاه
   می‌آید و هیچ‌کدام پخش نمی‌شوند: تابش لبهٔ بالا، تیرگی لبهٔ پایین، یک لبِ تیرهٔ سه
   پیکسلی که ضخامت کارت را می‌سازد، و یک سایهٔ کوتاه زیر آن که کارت را از زمینه بلند
   می‌کند. سایهٔ پخش روی کارتی به این پهنا لکه می‌سازد، نه عمق.
   ⚠ نه پرسپکتیو و نه فیلتر: هر دو خانه را به لایهٔ گرافیکی جدا می‌برند و متن جدول را
   در موبایل مات می‌کنند. */
.dmpr-main .dmpr-table .tablepress thead th {
    position: relative;
    z-index: 2;
    padding-block: 18px;
    border: 0;
    border-radius: 15px;
    /* ⚠ براقیِ شیشه‌ای با «رنگ» ساخته می‌شود نه با فیلتر: یک لایهٔ نورِ بالا که درست
       نزدیک میانهٔ کارت قطع می‌شود، همان چیزی که بازتاب روی سطح صیقلی را می‌سازد.
       backdrop-filter و filter عمداً به‌کار نرفته‌اند — هر دو خانه را روی لایهٔ گرافیکی
       جدا می‌برند و در موبایل متن را مات می‌کنند، و خواستهٔ صریح این بود که تار نشود. */
    background-image: linear-gradient(180deg,
                      rgba(255, 255, 255, .34) 0%,
                      rgba(255, 255, 255, .11) 47%,
                      rgba(255, 255, 255, 0) 48%,
                      rgba(255, 255, 255, .07) 100%),
                      linear-gradient(170deg, #c98a4d 0%, #b87333 52%, #9c5c25 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55),
                inset 1px 0 0 rgba(255, 255, 255, .22),
                inset -1px 0 0 rgba(255, 255, 255, .22),
                inset 0 -1px 0 rgba(60, 32, 8, .40),
                inset 0 -4px 0 -1px rgba(96, 54, 18, .32),
                0 5px 10px -7px rgba(90, 52, 18, .85),
                0 12px 22px -18px rgba(40, 22, 6, .90);
    font-size: 15px;
    font-weight: 800;
    letter-spacing: .2px;
    color: #fff;
    text-shadow: 0 1px 1px rgba(60, 32, 8, .45);
    text-align: center;
}

/* ⚠ سرستون اول عمداً توپر نیست: در جدول‌های این صفحه، خانهٔ اول «نام ویژگی» است نه یک
   گزینه؛ اگر آن هم مسیِ توپر شود، چشم سه کارتِ هم‌وزن می‌بیند و دیگر معلوم نیست کدام
   ستون‌ها با هم مقایسه می‌شوند. اینجا یک کارتِ خالی با قاب مسی می‌نشیند. */
.dmpr-main .dmpr-table .tablepress thead th.column-1 {
    background-color: var(--bg-primary);
    background-color: color-mix(in srgb, var(--bg-primary) 74%, transparent);
    background-image: linear-gradient(180deg,
                      rgba(255, 255, 255, .55) 0%,
                      rgba(255, 255, 255, .16) 47%,
                      rgba(255, 255, 255, 0) 48%,
                      rgba(255, 255, 255, .10) 100%);
    box-shadow: inset 0 0 0 1px rgba(184, 115, 51, .38),
                inset 0 1px 0 rgba(255, 255, 255, .85),
                0 4px 9px -8px rgba(60, 40, 15, .70);
    color: var(--accent-primary);
    text-shadow: none;
    text-align: start;
}

/* ستون اولِ هر ردیف عنوان است، نه مقدار؛ پس همان زبان برجستگیِ سرستون را می‌گیرد،
   فقط ملایم‌تر تا با آن رقابت نکند: تابش لبهٔ بالا، تیرگی لبهٔ پایین، و یک سایهٔ کوتاه
   روی لبه‌ای که به ستون‌های مقدار می‌رسد — همان چیزی که ستون را «بالاتر» نشان می‌دهد. */
/* ⚠ خانهٔ عنوان برعکسِ خانه‌های مقدار «فرورفته» است، نه برجسته. دو سطح در یک جدول
   بهتر از سه سطحِ هم‌جنس کار می‌کند: چشم بلافاصله می‌فهمد کدام ستون سؤال است و کدام
   ستون‌ها جواب. سایه از بالا به داخل می‌افتد، یعنی نور همچنان از بالاست و با سرستون
   جور درمی‌آید. */
.dmpr-main .dmpr-table .tablepress tbody td.column-1 {
    position: relative;
    background-color: rgba(184, 115, 51, .10);
    /* براقیِ این یکی ضعیف‌تر است: سطح فرورفته نور کمتری برمی‌گرداند و اگر هم‌اندازهٔ
       خانه‌های مقدار براق شود، تفاوت فرورفته و برجسته از بین می‌رود. */
    background-image: linear-gradient(180deg,
                      rgba(255, 255, 255, .30) 0%,
                      rgba(255, 255, 255, .08) 47%,
                      rgba(255, 255, 255, 0) 48%,
                      rgba(255, 255, 255, .06) 100%);
    box-shadow: inset 0 0 0 1px var(--border-color),
                inset 0 3px 5px -3px rgba(10, 25, 47, .35),
                inset 0 -1px 0 rgba(255, 255, 255, .55),
                inset 3px 0 0 0 rgba(184, 115, 51, .45);
    font-weight: 800;
}

/* ⚠ ته‌رنگ یک‌درمیان عمداً نیست: وقتی هر خانه کارت جداست، ته‌رنگِ ردیف روی کارت‌ها
   می‌نشیند و کارت‌بودنشان را از بین می‌برد. تأکید فقط با نشانگر می‌آید.
   ⚠ هیچ transform ای هم در کار نیست: خانهٔ جدول به transform پاسخ قابل اتکایی نمی‌دهد
   و پرسپکتیو در موبایل متن را مات می‌کند؛ حس بلندشدن فقط از سایه ساخته می‌شود. */
.dmpr-main .dmpr-table .tablepress tbody tr:hover td:not(.column-1) {
    box-shadow: inset 0 0 0 1px rgba(184, 115, 51, .42),
                inset 0 1px 0 rgba(255, 255, 255, .85),
                0 10px 20px -12px rgba(10, 25, 47, .60);
    color: var(--text-primary);
}

/* خانهٔ عنوانِ ردیفِ زیر نشانگر: همان کارتِ فرورفته، فقط ریلش زنده می‌شود.
   ⚠ هر چهار لایه دوباره نوشته می‌شوند؛ box-shadow جایگزین می‌شود نه افزوده، و نوشتن
   تنهای ریل، فرورفتگی خانه را صاف می‌کرد. */
.dmpr-main .dmpr-table .tablepress tbody tr:hover td.column-1 {
    box-shadow: inset 0 0 0 1px rgba(184, 115, 51, .38),
                inset 0 3px 5px -3px rgba(10, 25, 47, .35),
                inset 0 -1px 0 rgba(255, 255, 255, .55),
                inset 4px 0 0 0 var(--accent-primary);
    color: var(--accent-primary);
}

/* ⚠ «دارد / ندارد» با شکل و رنگ هر دو نشان داده می‌شود، نه فقط رنگ؛ متن معادلش هم برای
   صفحه‌خوان در نشانه‌گذاری می‌ماند. تکیه بر رنگِ تنها برای کاربر نابینای رنگ بی‌معناست و
   اینجا تفاوت «دارد» و «ندارد» تفاوت قیمت است.
   کلاس‌ها را اسکریپت از روی متن خانه می‌گذارد؛ بدون آن، همان نویسهٔ اصلی دیده می‌شود. */
.dmpr-main .dmpr-table .tablepress td.dmpr-yes,
.dmpr-main .dmpr-table .tablepress td.dmpr-no {
    font-size: 0;
}

/* ⚠ نشان روی ::after می‌آید نه ::before: در حالت کارتیِ موبایل، ::before نام ستون را
   می‌نویسد و اگر نشان هم همان‌جا بود، یکی دیگری را پاک می‌کرد. */
.dmpr-main .dmpr-table .tablepress td.dmpr-yes::after,
.dmpr-main .dmpr-table .tablepress td.dmpr-no::after {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 9px;
    font-size: 14px;
    font-weight: 800;
    line-height: 1;
}

.dmpr-main .dmpr-table .tablepress td.dmpr-yes::after {
    content: "✓";
    background-color: rgba(47, 158, 106, .16);
    color: #2f9e6a;
}

.dmpr-main .dmpr-table .tablepress td.dmpr-no::after {
    /* ⚠ همان نویسه‌ای که در داده هست، نه یک نشانهٔ دیگر: خانه در جدول ضربدر دارد و
       جایگزین‌کردنش با خط تیره معنای «ندارد» را به «نامشخص» تغییر می‌داد.
       جایگزینی خودِ نویسه سر جایش می‌ماند، چون منبع سه شکل مختلف ضربدر می‌نویسد و
       این‌جا همه به یک شکل واحد و قابل استایل‌دهی می‌رسند. */
    content: "✕";
    background-color: rgba(210, 74, 99, .14);
    color: #c2415a;
}

/* ⚠ پیوند «ویرایش» که افزونه فقط برای مدیر زیر جدول می‌گذارد. افزونه روی خودِ عنصر
   سبک درون‌خطی می‌نویسد (تراز به چپ، بدون فاصله)، و سبک درون‌خطی را هیچ ویژگی
   سلکتوری نمی‌برد؛ پس تراز و فاصله اینجا با important بازنویسی می‌شوند. بازدیدکنندهٔ
   عادی این را اصلاً نمی‌بیند، ولی برای مدیر هم نباید بی‌ریخت باشد. */
.dmpr-main .dmpr-table .tablepress caption {
    padding: 10px 18px !important;
    text-align: start !important;
    font-size: 12px;
    line-height: 1.8;
    color: var(--text-secondary);
}

.dmpr-main .dmpr-table .tablepress caption a,
.dmpr-main .dmpr-table .tablepress caption a:visited {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    border: 1px solid var(--border-color);
    border-radius: var(--pill-radius, 50px);
    font-size: 12px;
    font-weight: 700;
    color: var(--text-secondary) !important;
    transition: border-color var(--transition-fast), color var(--transition-fast);
}

.dmpr-main .dmpr-table .tablepress caption a::before {
    content: "✎";
    font-size: 11px;
}

.dmpr-main .dmpr-table .tablepress caption a:hover {
    border-color: var(--accent-primary);
    color: var(--accent-primary) !important;
}


/* ── کوتاه‌سازی ── */

/* ⚠ این عدد با آستانهٔ داخل اسکریپت یکی است؛ اگر یکی عوض شد، آن یکی هم باید. هدف این
   است که سرِ جدول و دکمهٔ «مشاهده بیشتر» با هم در یک نمای صفحه جا شوند. */
.dmpr-table.is-clamped .dmpr-table__scroll {
    max-height: clamp(280px, 40vh, 420px);
    overflow-y: hidden;
}

.dmpr-table__fade {
    display: none;
}

.dmpr-table.is-clamped .dmpr-table__fade {
    display: block;
    position: absolute;
    inset-inline: 1px;
    inset-block-end: 58px;
    height: 120px;
    /* ⚠ رنگ پایانِ محوشدگی از پس‌زمینهٔ سکشن خوانده می‌شود نه از ظرف جدول: ظرف دیگر
       پس‌زمینه ندارد و کارت‌ها مستقیم روی سکشن می‌نشینند. */
    background-image: linear-gradient(to bottom, rgba(10, 25, 47, 0), var(--bg-primary));
    pointer-events: none;
}

.dmpr-table__more {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-block-start: 14px;
    padding: 11px 22px;
    border: 1px solid rgba(245, 214, 143, .4);
    border-radius: var(--pill-radius, 50px);
    background-color: rgba(245, 214, 143, .08);
    font-family: inherit;
    font-size: 14px;
    font-weight: 700;
    color: var(--accent-primary);
    cursor: pointer;
    transition: background-color var(--transition-fast);
}

.dmpr-table__more:hover {
    background-color: rgba(245, 214, 143, .16);
}

.dmpr-table__more-icon {
    width: 8px;
    height: 8px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: translateY(-2.5px) rotate(45deg);
    transition: transform .3s ease;
}

.dmpr-table.is-open .dmpr-table__more-icon {
    transform: translateY(2.5px) rotate(225deg);
}

/* ═══════════ نوشته‌های شماره‌دار ═══════════ */

.dmpr-notes__grid--split {
    display: grid;
    grid-template-columns: minmax(0, 36fr) minmax(0, 64fr);
    gap: clamp(24px, 3.4vw, 48px);
    align-items: start;
}

.dmpr-notes__figure {
    margin: 0;
    overflow: hidden;
    border: 1px solid var(--border-color);
    border-radius: 22px;
    position: sticky;
    inset-block-start: clamp(150px, 16vh, 200px);
}

.dmpr-notes__figure img {
    display: block;
    width: 100%;
    height: 100%;
    aspect-ratio: 4 / 5;
    object-fit: cover;
}

/* ریلِ پیشرفت کنار فهرست؛ فقط وقتی اسکریپت آماده است دیده می‌شود. */
.dmpr-notes__list {
    position: relative;
    display: grid;
    gap: clamp(14px, 1.8vw, 22px);
}

.dmpr-notes__rail {
    display: none;
}

.dmpr-notes__list.is-ready .dmpr-notes__rail {
    display: block;
    position: absolute;
    inset-block: 18px;
    inset-inline-start: -18px;
    width: 2px;
    border-radius: 2px;
    background-color: var(--border-color);
}

.dmpr-notes__rail-fill {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 2px;
    background-image: linear-gradient(to bottom, var(--accent-primary), rgba(245, 214, 143, .25));
    transform: scaleY(0);
    transform-origin: top center;
    transition: transform .45s cubic-bezier(.22, 1, .36, 1);
}

.dmpr-note {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 16px;
    padding: clamp(18px, 2.2vw, 26px);
    border: 1px solid var(--border-color);
    border-radius: 20px;
    background-color: var(--bg-secondary);
    transition: border-color var(--transition-fast), opacity .4s ease,
                background-color var(--transition-fast), box-shadow var(--transition-fast);
}

/* ⚠ کم‌رنگی فقط پس از آماده‌شدن اسکریپت اعمال می‌شود؛ وگرنه بدون جاوااسکریپت دو بند از
   سه بند برای همیشه محو می‌ماندند و متن سئویی عملاً از دست می‌رفت. */
.dmpr-notes__list.is-ready .dmpr-note {
    opacity: .5;
}

.dmpr-notes__list.is-ready .dmpr-note.is-focus {
    opacity: 1;
    border-color: rgba(245, 214, 143, .42);
    background-color: rgba(245, 214, 143, .05);
    box-shadow: 0 26px 54px -40px rgba(0, 0, 0, .95);
}

.dmpr-note__num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border: 1px solid rgba(245, 214, 143, .32);
    border-radius: 12px;
    background-image: linear-gradient(160deg, rgba(245, 214, 143, .2), rgba(184, 115, 51, .05));
    font-size: 14px;
    font-weight: 800;
    color: var(--accent-primary);
    transition: background-color var(--transition-fast), color var(--transition-fast);
}

.dmpr-notes__list.is-ready .dmpr-note.is-focus .dmpr-note__num {
    background-image: none;
    background-color: var(--accent-primary);
    color: var(--color-navy, #0a192f);
}

.dmpr-note__title {
    margin: 0 0 8px;
    font-size: clamp(17px, 1.8vw, 21px);
    line-height: 1.7;
    color: var(--text-primary);
    text-align: start;
}

.dmpr-note__text {
    margin: 0;
    font-size: 15px;
    line-height: 2.1;
    color: var(--text-secondary);
    text-align: justify;
}

.dmpr-note__text a {
    font-weight: 700;
    border-block-end: 1px solid currentColor;
}


/* ═══════════ سه مقایسهٔ کوتاه ═══════════ */

.dmpr-duels__stack {
    display: grid;
    gap: clamp(34px, 4.5vw, 72px);
}

.dmpr-duel {
    position: relative;
    display: grid;
    gap: clamp(22px, 3vw, 40px);
    align-items: start;
}

/* ⚠ ستون متن ۳۰٪ و ستون جدول ۷۰٪. minmax(0,…) لازم است وگرنه جدولِ پهن
   عرض ستون خودش را باز می‌کند و نسبت به هم می‌ریزد. */
@media (min-width: 993px) {
    .dmpr-duels__stack {
        gap: 130px;
    }
    .dmpr-duel {
        grid-template-columns: minmax(0, 30fr) minmax(0, 70fr);
    }
    
    .dmpr-duel--flip {
         grid-template-columns: minmax(0, 70fr) minmax(0, 30fr);
    }


    /* ستون اول در راست‌به‌چپ سمت راست است؛ برای وارونه‌کردن فقط order جابه‌جا می‌شود. */
    .dmpr-duel--flip .dmpr-duel__text {
        order: 2;
    }

    .dmpr-duel--flip .dmpr-duel__table {
        order: 1;
    }
}

.dmpr-duel__text {
    position: relative;
}

/* در ردیف وارونه، نوار عنوان و تراز متن هم به همان سمت می‌روند تا ستون متن
   به لبهٔ بیرونی خودش تکیه بدهد نه به فاصلهٔ میان دو ستون. فقط در دسکتاپ،
   چون در حالت تک‌ستونی همهٔ ردیف‌ها یک تراز دارند. */
@media (min-width: 993px) {
    .dmpr-duel--flip .dmpr-title--bar {
        padding-inline-start: 0;
        padding-inline-end: 16px;
        border-inline-start: 0;
        border-inline-end: 4px solid var(--accent-primary);
        text-align: end;
    }

    .dmpr-duel--flip .dmpr-duel__num {
        text-align: end;
    }
}

.dmpr-duel__num {
    display: block;
    margin-block-end: 6px;
    font-size: clamp(34px, 5vw, 54px);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -1px;
    color: transparent;
    -webkit-text-stroke: 1px rgba(245, 214, 143, .45);
}

.dmpr-duel .dmpr-title {
    margin-block-start: 0;
}

.dmpr-duel .dmpr-lead {
    text-align: justify;
}

.dmpr-duel__table {
    min-width: 0;
}

/* ═══════════ دو پرسش تصمیم‌ساز ═══════════ */

.dmpr-asks {
    max-width: 1000px;
    margin-inline: auto;
}

/* کلید دوحالته: شناور پشت دکمه‌ها می‌لغزد و انتخاب فعال را نشان می‌دهد. */
.dmpr-asks__switch {
    position: relative;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
    padding: 7px;
    border: 1px solid var(--border-color);
    border-radius: var(--pill-radius, 50px);
    background-color: var(--bg-secondary);
}

.dmpr-asks__thumb {
    position: absolute;
    inset-block: 7px;
    inset-inline-start: 7px;
    width: calc(50% - 10px);
    border-radius: var(--pill-radius, 50px);
    background-image: linear-gradient(140deg, rgba(245, 214, 143, .22), rgba(184, 115, 51, .10));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22);
    transition: transform .4s cubic-bezier(.22, 1, .36, 1);
    pointer-events: none;
}

/* ⚠ جابه‌جایی منفی است چون صفحه راست‌به‌چپ است و «دومی» سمت چپ می‌نشیند. */
.dmpr-asks.is-second .dmpr-asks__thumb {
    transform: translateX(calc(-100% - 6px));
}

.dmpr-asks__pill {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    padding: 13px 16px;
    border: 0;
    border-radius: var(--pill-radius, 50px);
    background: transparent;
    font-family: inherit;
    text-align: start;
    cursor: pointer;
    transition: color var(--transition-fast);
}

.dmpr-asks__pill:focus-visible {
    outline: 2px solid var(--accent-primary);
    outline-offset: 2px;
}

.dmpr-asks__pill-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background-color: rgba(245, 214, 143, .14);
    font-size: 12px;
    font-weight: 800;
    color: var(--accent-primary);
    transition: background-color var(--transition-fast), color var(--transition-fast);
}

.dmpr-asks__pill-text {
    font-size: 14px;
    font-weight: 700;
    line-height: 1.7;
    color: var(--text-secondary);
    transition: color var(--transition-fast);
}

.dmpr-asks__pill.is-on .dmpr-asks__pill-text {
    color: var(--text-primary);
}

.dmpr-asks__pill.is-on .dmpr-asks__pill-num {
    background-color: var(--accent-primary);
    color: var(--color-navy, #0a192f);
}

.dmpr-asks__stage {
    position: relative;
    margin-block-start: clamp(16px, 2vw, 24px);
    padding: clamp(24px, 3vw, 40px);
    border: 1px solid var(--border-color);
    border-radius: 26px;
    background-color: var(--bg-secondary);
    overflow: hidden;
}

.dmpr-asks__mark {
    position: absolute;
    inset-block-start: -26px;
    inset-inline-start: 18px;
    font-size: 150px;
    font-weight: 800;
    line-height: 1;
    color: rgba(245, 214, 143, .07);
    pointer-events: none;
}

.dmpr-asks__panel {
    position: relative;
}

.dmpr-asks__q {
    margin: 0 0 14px;
    padding-inline-start: 14px;
    border-inline-start: 3px solid var(--accent-primary);
    font-size: clamp(17px, 1.8vw, 22px);
    line-height: 1.7;
    color: var(--text-primary);
    text-align: start;
}

.dmpr-asks__panel .dmpr-lead:last-child {
    margin-block-end: 0;
}

/* ⚠ پنهان‌سازی فقط پس از آماده‌شدن اسکریپت انجام می‌شود؛ بدون جاوااسکریپت هر دو پرسش
   با پاسخ کاملشان پشت سر هم دیده می‌شوند. */
.dmpr-asks:not(.is-ready) .dmpr-asks__switch {
    display: none;
}

.dmpr-asks:not(.is-ready) .dmpr-asks__panel + .dmpr-asks__panel {
    margin-block-start: clamp(24px, 3vw, 36px);
    padding-block-start: clamp(24px, 3vw, 36px);
    border-block-start: 1px dashed var(--border-color);
}

.dmpr-asks.is-ready .dmpr-asks__panel {
    display: none;
    animation: dmprAskIn .35s ease both;
}

.dmpr-asks.is-ready .dmpr-asks__panel.is-on {
    display: block;
}

@keyframes dmprAskIn {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: none; }
}

/* ⚠ اینجا هیچ قاعده‌ای برای سوالات متداول نیست و نباید باشد. آن سکشن مؤلفهٔ مشترک
   صفحه‌های کدی است و شیوه‌نامهٔ مستقل خودش را دارد که در همین قالب صف می‌شود؛ نسخهٔ
   قبلی یک کپیِ واگرا بود و ظاهر این صفحه را با بقیه ناهمگون کرده بود. */


/* ═══════════ کاروسل نظرها ═══════════ */

/* ⚠ همان مؤلفهٔ قالب خدمات طراحی سایت با پیشوند این قالب. آن مؤلفه مشترک نیست و در
   قالب خودش زندگی می‌کند؛ تکرارش اینجا پذیرفته شده تا این قالب به قالب دیگری وابسته
   نشود. اگر آنجا عوض شد، اینجا هم باید. */
.dmpr-quotes__title {
    margin-block-end: clamp(16px, 2vw, 26px);
}

.dmpr-quotes__viewport {
    overflow: hidden;
    padding-block: 10px 24px;
}

.dmpr-quotes__track {
    display: flex;
    align-items: stretch;
    gap: clamp(16px, 2vw, 28px);
    margin: 0;
    padding: 0;
    list-style: none;
    transition: transform .6s ease;
    will-change: transform;
}

.dmpr-quotes__item {
    flex: 0 0 calc((100% - 2 * clamp(16px, 2vw, 28px)) / 3);
    min-width: 0;
    height: clamp(330px, 30vw, 420px);
}

.dmpr-quotes__card {
    position: relative;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas:
        "logo who"
        "text text";
    align-content: start;
    gap: 8px 14px;
    height: 100%;
    padding: clamp(24px, 2.4vw, 36px);
    border: 1px solid var(--border-color);
    border-radius: 28px;
    overflow: hidden;
    background-color: var(--bg-secondary);
    transform: scale(.94);
    opacity: .5;
    transition: transform .6s ease, opacity .6s ease, border-color .3s ease, box-shadow .3s ease;
}

.dmpr-quotes__card::before {
    content: "";
    position: absolute;
    inset-block-start: 0;
    inset-inline: 0;
    height: 3px;
    background-image: linear-gradient(to left, var(--color-gold, #f5d68f), var(--color-copper, #b87333));
    transform: scaleX(0);
    transform-origin: right center;
    transition: transform .6s ease;
}

.dmpr-quotes__item.is-active .dmpr-quotes__card {
    transform: scale(1);
    opacity: 1;
    border-color: rgba(245, 214, 143, .4);
    box-shadow: 0 6px 18px rgba(0, 0, 0, .12);
}

.dmpr-quotes__item.is-active .dmpr-quotes__card::before {
    transform: scaleX(1);
}

.dmpr-quotes__mark {
    position: absolute;
    inset-block-start: -18px;
    inset-inline-start: 14px;
    font-size: 120px;
    line-height: 1;
    color: rgba(245, 214, 143, .09);
    pointer-events: none;
}

.dmpr-quotes__logo {
    grid-area: logo;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 58px;
    height: 58px;
    padding: 9px;
    border: 1px solid var(--border-color);
    border-radius: 18px;
    background-color: rgba(255, 255, 255, .9);
}

.dmpr-quotes__logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.dmpr-quotes__author {
    grid-area: who;
    align-self: center;
}

.dmpr-quotes__name {
    margin: 0 0 3px;
    font-size: 16px;
    line-height: 1.8;
    color: var(--text-primary);
    text-align: start;
}

.dmpr-quotes__role {
    display: inline-block;
    padding: 3px 10px;
    border-radius: var(--pill-radius, 50px);
    background-color: rgba(245, 214, 143, .12);
    font-size: 12px;
    color: var(--accent-primary);
}

.dmpr-quotes__text {
    grid-area: text;
    margin: 6px 0 0;
    padding-block-start: 16px;
    border-block-start: 1px solid var(--border-color);
    font-size: 15px;
    line-height: 2.1;
    color: var(--text-secondary);
    text-align: start;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 6;
    line-clamp: 6;
}

.dmpr-quotes__item.is-active .dmpr-quotes__text {
    font-size: 16px;
    color: var(--text-primary);
}

.dmpr-quotes__nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin-block-start: clamp(18px, 2vw, 30px);
}

.dmpr-quotes__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border: 1px solid var(--border-color);
    border-radius: 50%;
    background-color: rgba(245, 214, 143, .12);
    color: var(--accent-primary);
    cursor: pointer;
    transition: background-color .3s ease, color .3s ease, transform .3s ease;
}

.dmpr-quotes__btn:hover {
    background-color: var(--accent-primary);
    color: var(--color-navy, #0a192f);
    transform: translateY(-2px);
}

.dmpr-quotes__dots {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-inline: 6px;
}

.dmpr-quotes__dot {
    width: 9px;
    height: 9px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background-color: rgba(10, 25, 47, .22);
    cursor: pointer;
    transition: width .3s ease, background-color .3s ease;
}

.dmpr-quotes__dot.is-on {
    width: 26px;
    border-radius: var(--pill-radius, 50px);
    background-color: var(--accent-primary);
}

/* ═══════════ جعبهٔ متن سئویی ═══════════ */

/* ⚠ همهٔ متن‌های بلندِ انتهای صفحه در همین یک جعبه‌اند و ارتفاعش مهار می‌شود. کل متن در
   نشانه‌گذاری هست و چیزی از موتور جستجو پنهان نمی‌شود؛ فقط صفحه چند هزار کلمه بلندتر
   نمی‌شود. همان الگویی که در قالب خدمات طراحی سایت هم به کار رفته است. */
.dmpr-read__box {
    position: relative;
    padding: clamp(22px, 2.6vw, 34px);
    border: 1px solid var(--border-color);
    border-radius: 26px;
    background-color: var(--bg-secondary);
}

/* ⚠ محوشدن لبهٔ پایین با یک لایهٔ گرادیانی ساخته می‌شود، نه با ماسک روی خودِ متن:
   ماسک، متن را به لایهٔ گرافیکی جدا می‌برد و روی موبایل حروف تار می‌شوند. */
.dmpr-read__box::after {
    content: "";
    position: absolute;
    inset-inline: 1px;
    inset-block-end: 1px;
    height: 70px;
    border-radius: 0 0 26px 26px;
    background-image: linear-gradient(to top, var(--bg-secondary), transparent);
    pointer-events: none;
}

.dmpr-read__body {
    max-height: clamp(420px, 58vh, 620px);
    overflow-y: auto;
    padding-inline-end: 16px;
    padding-block-end: 40px;
}

.dmpr-read__body:focus-visible {
    outline: 2px solid var(--accent-primary);
    outline-offset: 6px;
}

.dmpr-read__body::-webkit-scrollbar {
    width: 8px;
}

.dmpr-read__body::-webkit-scrollbar-thumb {
    border-radius: 8px;
    background-color: rgba(10, 25, 47, .22);
}

.dmpr-read__body > :first-child {
    margin-block-start: 0;
}

.dmpr-read__body h3 {
    margin: 30px 0 10px;
    font-size: clamp(18px, 1.8vw, 23px);
    line-height: 1.8;
    color: var(--text-primary);
    text-align: start;
}

.dmpr-read__body h4 {
    margin: 22px 0 8px;
    padding-inline-start: 12px;
    border-inline-start: 3px solid var(--accent-primary);
    font-size: 16px;
    line-height: 1.8;
    color: var(--text-primary);
    text-align: start;
}

.dmpr-read__body h5 {
    margin: 16px 0 6px;
    font-size: 15px;
    line-height: 1.8;
    color: var(--accent-primary);
    text-align: start;
}

.dmpr-read__body p {
    margin: 0 0 14px;
    font-size: 15px;
    line-height: 2.1;
    color: var(--text-secondary);
    text-align: justify;
}

.dmpr-read__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 6px 0 16px;
    padding: 0;
    list-style: none;
}

.dmpr-read__chips li {
    padding: 6px 14px;
    border: 1px solid var(--border-color);
    border-radius: var(--pill-radius, 50px);
    font-size: 13px;
    color: var(--text-primary);
}

/* ═══════════ دیدگاه‌ها ═══════════ */

/* ⚠ این جعبه هیچ استایل تازه‌ای ندارد و فقط توکن‌های ماژول دیدگاه‌ها را به توکن‌های این
   صفحه گره می‌زند. نبودِ همین چند خط بود که باعث شد دیدگاه‌ها کاملاً بی‌استایل بیایند:
   شیوه‌نامهٔ دیدگاه‌ها بار می‌شد ولی هر رنگ و فاصله‌اش به متغیری اشاره داشت که هیچ‌جا
   تعریف نشده بود. همان الگوی قالب خدمات طراحی سایت. */
.dmpr-comments__box {
    --dmhb-bg: transparent;
    --dmhb-surface: var(--bg-secondary);
    --dmhb-surface-2: var(--bg-primary);
    --dmhb-text: var(--text-primary);
    --dmhb-muted: var(--text-secondary);
    --dmhb-border: var(--border-color);
    --dmhb-accent: var(--accent-primary);
    --dmhb-accent-soft: var(--accent-secondary);
    --dmhb-radius: 16px;
    --dmhb-shadow: 0 12px 30px rgba(0, 0, 0, .35);
}


/* ═══════════ ریسپانسیو ═══════════ */

@media (max-width: 991px) {
    .dmpr-hero__grid,
    .dmpr-notes__grid--split {
        grid-template-columns: minmax(0, 1fr);
    }

    /* ریلِ پیشرفتِ کنار بندها در عرض کم جا ندارد و به لبهٔ صفحه می‌چسبد. */
    .dmpr-notes__list.is-ready .dmpr-notes__rail {
        display: none;
    }

    /* دو دکمهٔ کلید کنار هم در عرض کم جا نمی‌شوند و متن حرف‌به‌حرف می‌شکند. */
    .dmpr-asks__switch {
        grid-template-columns: minmax(0, 1fr);
        border-radius: 20px;
    }

    .dmpr-asks__thumb {
        inset-inline: 7px;
        width: auto;
        height: calc(50% - 7px);
        inset-block-start: 7px;
        inset-block-end: auto;
    }

    .dmpr-asks.is-second .dmpr-asks__thumb {
        transform: translateY(calc(100% + 6px));
    }

    .dmpr-hero__media {
        order: -1;
    }

    .dmpr-notes__figure {
        position: static;
    }

    /* ⚠ نوار انکرها در عرض کم به ریل افقی تبدیل می‌شود: پنج برچسب کنار هم جا نمی‌شوند
       و فشرده‌کردنشان متن را حرف‌به‌حرف می‌شکند. کشیدن افقی بهتر از شکستن است. */
    /* ⚠ اینجا هیچ ماسکی نیست و نباید باشد: ماسک، عنصر را روی لایهٔ گرافیکی جدا می‌برد و
       متن روی آن لایه در مرورگرهای موبایل مات رندر می‌شود — همان تاری که در دکمه‌های
       این نوار دیده شد. محوشدنِ لبه اگر لازم شد باید با یک لایهٔ گرادیانیِ جدا ساخته
       شود، نه با ماسک روی خودِ نوار. */
    .dmpr-tabs {
        border-radius: 18px;
        overflow-x: auto;
        /* ⚠ محور عمودی صریحاً بسته می‌شود: عنصری که در یک محور اسکرول دارد، محور دیگرش
           هم خودبه‌خود auto می‌شود و می‌تواند چرخ ماوس را بگیرد. همان چیزی که یک بار
           باعث شد کاربر حس کند کل صفحه قفل شده. */
        overflow-y: hidden;
        scrollbar-width: none;
    }

    .dmpr-tabs::-webkit-scrollbar {
        display: none;
    }

    .dmpr-tabs__item {
        flex: 0 0 auto;
    }

}

/* ⚠ زیر ۷۶۸ پیکسل جدول چهارستونی خوانا نیست. هر ردیف به یک کارت تبدیل می‌شود و نام
   ستون از data-label روی خودِ خانه می‌آید، پس نشانه‌گذاری یکی می‌ماند و جدول واقعی
   برای صفحه‌خوان و موتور جستجو دست‌نخورده باقی است. */
@media (max-width: 768px) {
    .dmpr-table__scroll {
        border: 0;
        border-radius: 0;
        overflow-x: visible;
    }

    /* ⚠ فاصلهٔ میان‌خانه‌ای در حالت کارت باید صفر شود: آنجا هر ردیف خودش یک کارت است و
       خانه‌ها نوارهای پشت سر هم داخل آن؛ فاصلهٔ ارثی، درزهای خالی داخل کارت می‌ساخت.
       شعاع گوشهٔ خانه‌ها هم برداشته می‌شود چون شعاعِ کارت مالِ خودِ ردیف است. */
    .dmpr-main .dmpr-table .tablepress,
    .dmpr-main .dmpr-table .tablepress tbody,
    .dmpr-main .dmpr-table .tablepress tr,
    .dmpr-main .dmpr-table .tablepress th,
    .dmpr-main .dmpr-table .tablepress td {
        display: block;
        width: auto;
        min-width: 0;
        border-spacing: 0;
        border-radius: 0;
    }

    /* ⚠ در حالت کارت، براقی و شیشه‌ای‌بودن مالِ خودِ ردیف است نه تک‌تک خانه‌ها؛ اگر
       نوارهای درون یک کارت هرکدام بازتاب خودشان را داشته باشند، کارت تکه‌تکه دیده
       می‌شود. background-image هم صریح خاموش می‌شود، وگرنه فقط رنگ پاک می‌شد و
       لایهٔ نور سر جایش می‌ماند. */
    .dmpr-main .dmpr-table .tablepress tbody td:not(.column-1) {
        background-color: transparent;
        background-image: none;
        box-shadow: none;
    }

    .dmpr-main .dmpr-table .tablepress thead {
        position: absolute;
        width: 1px;
        height: 1px;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
    }

    .dmpr-main .dmpr-table .tablepress tbody tr {
        margin-block-end: 12px;
        border: 1px solid var(--border-color);
        border-radius: 16px;
        overflow: hidden;
        background-color: var(--bg-primary);
        background-color: color-mix(in srgb, var(--bg-primary) 72%, transparent);
        background-image: linear-gradient(180deg,
                          rgba(255, 255, 255, .50) 0%,
                          rgba(255, 255, 255, .14) 22%,
                          rgba(255, 255, 255, 0) 23%);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, .85),
                    0 6px 14px -12px rgba(10, 25, 47, .65);
    }

    /* ⚠ ویژگی این سلکتورها عمداً با نسخهٔ دسکتاپ برابر شده (td در سلکتور هست). پیش از
       این «tbody .column-1» نوشته شده بود که یک درجه پایین‌تر است و قاعدهٔ دسکتاپ در
       موبایل هم برنده می‌شد — رسانه‌ای‌بودن قاعده هیچ امتیازی اضافه نمی‌کند. */
    .dmpr-main .dmpr-table .tablepress tbody tr:hover td,
    .dmpr-main .dmpr-table .tablepress tbody tr:hover th {
        background-color: transparent;
    }

    .dmpr-main .dmpr-table .tablepress tbody tr:hover td:not(.column-1) {
        box-shadow: none;
    }

    .dmpr-main .dmpr-table .tablepress tbody tr:hover td.column-1 {
        box-shadow: inset 0 -1px 0 rgba(120, 72, 30, .12);
        color: var(--text-primary);
    }

    /* ⚠ در حالت کارت، خانهٔ عنوان یک نوار تمام‌عرض بالای کارت است، نه یک ستون؛ پس نه
       فرورفتگی می‌گیرد و نه ریل کناری، فقط یک ته‌رنگ و یک خط جداکننده. */
    .dmpr-main .dmpr-table .tablepress tbody td.column-1 {
        padding: 13px 16px;
        border-block-end: 1px solid var(--border-color);
        background-color: rgba(184, 115, 51, .07);
        background-image: none;
        box-shadow: inset 0 -1px 0 rgba(120, 72, 30, .12);
        font-size: 14px;
        text-align: start;
    }

    /* ⚠ نام ستون از صفت data-label می‌آید و آن را اسکریپت از روی سرستون‌های خودِ جدول
       می‌نویسد؛ نشانه‌گذاری افزونه چنین صفتی ندارد و بدون آن، خانه‌ها در موبایل
       بی‌عنوان می‌شدند. اگر اسکریپت اجرا نشود، صفت خالی است و فقط عنوان دیده نمی‌شود. */
    .dmpr-main .dmpr-table .tablepress tbody td:not(.column-1) {
        display: grid;
        grid-template-columns: minmax(0, 40%) minmax(0, 1fr);
        gap: 10px;
        padding: 11px 16px;
        border-block-end: 1px solid var(--border-color);
        text-align: start;
    }

    .dmpr-main .dmpr-table .tablepress tbody tr td:last-child {
        border-block-end: 0;
    }

    .dmpr-main .dmpr-table .tablepress tbody td:not(.column-1)::before {
        content: attr(data-label);
        font-size: 12px;
        font-weight: 700;
        color: var(--text-primary);
    }

    /* در حالت کارتی، نشانِ «دارد/ندارد» ستون دوم کارت است و به لبهٔ آغازین می‌چسبد. */
    .dmpr-main .dmpr-table .tablepress td.dmpr-yes::after,
    .dmpr-main .dmpr-table .tablepress td.dmpr-no::after {
        justify-self: start;
    }


    .dmpr-table.is-clamped .dmpr-table__fade {
        background-image: linear-gradient(to bottom, rgba(10, 25, 47, 0), var(--bg-primary));
    }

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

    .dmpr-navbtn--next {
        justify-content: flex-start;
        text-align: start;
        flex-direction: row-reverse;
    }
}

@media (max-width: 991px) {
    /* دو کارت به‌جای سه؛ زیر این عرض، سه کارت متن را حرف‌به‌حرف می‌شکند. */
    .dmpr-quotes__item {
        flex-basis: calc((100% - clamp(16px, 2vw, 28px)) / 2);
    }

}

@media (max-width: 640px) {
    .dmpr-quotes__item {
        flex-basis: 100%;
    }

    /* روی یک کارت، کم‌رنگ‌کردن و کوچک‌کردنِ کارتِ غیرفعال معنا ندارد. */
    .dmpr-quotes__card,
    .dmpr-quotes__item.is-active .dmpr-quotes__card {
        transform: none;
        opacity: 1;
    }

    .dmpr-hero__badge {
        inset-inline-start: 50%;
        transform: translateX(50%);
    }

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

@media (prefers-reduced-motion: reduce) {
    .dmpr-slide.is-current {
        animation: none;
    }

    .dmpr-table__more-icon,
    .dmpr-notes__rail-fill,
    .dmpr-asks__thumb {
        transition: none;
    }

    .dmpr-notes__list.is-ready .dmpr-note {
        opacity: 1;
    }
}