/**
 * DM-Plus — طراحیِ تأییدشدهٔ صفحهٔ اشتراک (همان طراحیِ نسخهٔ قبلی، بایت‌به‌بایت).
 *
 * VENDORED از نسخهٔ قبلی افزونهٔ پلاس که خودش از قالب آمده بود — اینجا ویرایش نشود مگر عمداً.
 * رنگِ هر بسته از «پوستهٔ رنگ» آن بسته می‌آید (silver / gold / diamond) که به‌صورتِ کلاسِ dmhp-plan--{پوسته} چاپ می‌شود؛
 * پس تعداد بسته‌ها آزاد است و هر بستهٔ تازه یکی از همین سه ظاهرِ تأییدشده را می‌گیرد.
 * نام کلاس‌ها عمداً دست‌نخورده مانده تا طراحیِ تأییدشده مو‌به‌مو همان بماند؛
 * اگر روزی قالب عوض شود، افزونه همین ظاهر را با خودش می‌آورد (اصلِ استقلال).
 */

/* ============================================================
   DM Gold — تمپلیت «اشتراک پلاس»
   ------------------------------------------------------------
   ⚠ سطوح و متن‌ها از توکن‌های خودِ قالب می‌آیند، پس سوییچ روز/شبِ
   هدر بدونِ هیچ کارِ اضافه‌ای روی این صفحه هم کار می‌کند.
   توکن‌هایی مثل --dm-paper / --dm-line / --dm-ink-* در قالب عمداً
   فقط داخلِ بلوکِ حالتِ شب تعریف شده‌اند؛ پس مقدارِ fallback همان
   پالتِ حالتِ روشن است. حذفِ fallback = خرابیِ حالتِ روشن.

   ⚠ رنگ‌های نقره‌ای/طلایی/آبی عمداً ثابت‌اند و به رنگِ اصلیِ سایت
   وصل نشده‌اند: این‌ها هویتِ سه پلنِ محصول‌اند نه رنگِ برند — پلنِ
   «طلایی» نمی‌تواند نارنجی باشد. اگر خواستی لهجهٔ صفحه به رنگِ
   داینامیکِ سایت وصل شود، فقط --dmhp-gold را به var(--dm-primary)
   تغییر بده؛ بقیهٔ فایل دست نمی‌خورد.

   ⚠ فونت عمداً تعریف نشده: قالب فونت را از تنظیماتِ مدیر روی body
   می‌نشاند و این صفحه همان را ارث می‌برد.

   بریک‌پوینت‌ها (قرارداد این فایل، از آن انحراف نده):
     ۱۲۰۰ : دسکتاپ کوچک
      ۹۹۲ : تبلت
      ۷۰۰ : موبایل بزرگ  ← اینجا جدول مقایسه به بلوک تبدیل می‌شود
      ۴۸۰ : موبایل کوچک

   ⚠⚠ اگر روزی نسخهٔ لوکالِ لندینگ را دوباره روی این فایل کپی کردی،
   این شش تغییرِ عمدی از بین می‌روند و باید دوباره اعمال شوند:
     ۱) همین بلوکِ توکن (توکن‌های قالب به‌جای رنگ‌های ثابتِ تیره)
     ۲) بلوکِ body.theme-dark .dmhp-page پایین‌تر
     ۳) حذفِ @font-face و font-family (فونت از قالب می‌آید)
     ۴) عرضِ .dmhp-shell از --dm-container به‌جای ۱۱۸۰ ثابت
     ۵) دو پوششِ کم‌رنگ که به var(--dmhp-overlay) تبدیل شده‌اند
     ۶) بلوکِ «پس‌گرفتنِ رنگِ عنوان‌ها» در انتهای فایل
   ============================================================ */

.dmhp-page {
    /* ── سطوح: توکنِ قالب، با پالتِ روشن به‌عنوان fallback ── */
    --dmhp-bg: var(--dm-bg-soft, #f7f8fb);
    --dmhp-surface: var(--dm-paper, #ffffff);
    --dmhp-surface-2: var(--dm-paper-2, #f4f6fa);
    --dmhp-line: var(--dm-line, #e4e8f0);
    --dmhp-line-soft: var(--dm-line, #edf0f6);

    /* ── متن ── */
    --dmhp-text: var(--dm-ink-1, #14171f);
    --dmhp-muted: var(--dm-ink-2, #4c5462);
    --dmhp-dim: var(--dm-ink-3, #858c9b);

    /* ── مقادیرِ بدونِ توکنِ معادل؛ در حالت شب بازتعریف می‌شوند ── */
    --dmhp-overlay: rgba(16, 24, 40, .025);
    --dmhp-silver-ink: #6b7280;

    /* ── رنگ پلن‌ها (ثابت، هویتِ محصول) ── */
    --dmhp-gold: #e5a323;
    --dmhp-gold-soft: #f2c76b;
    --dmhp-gold-deep: #b8791a;
    --dmhp-silver: var(--dmhp-silver-ink);
    --dmhp-silver-deep: #6b7280;
    --dmhp-blue: #2f6fe0;
    --dmhp-blue-soft: #2f6fe0;
    --dmhp-purple: #7c3aed;
    --dmhp-green: #17a45f;

    /* ── هندسه ── */
    --dmhp-r-card: 18px;
    --dmhp-r-box: 14px;
    --dmhp-r-btn: 11px;
    --dmhp-gap: 18px;
    --dmhp-section: 46px;

    background: var(--dmhp-bg);
    color: var(--dmhp-text);
    line-height: 1.9;
    padding-block: 26px 34px;
    /*
     * ⚠ شبکهٔ ایمنی، نه راه‌حل: هر سرریز افقی باید در خودِ عنصر مقصر حل شود.
     * clip به‌جای hidden چون hidden این عنصر را ظرفِ اسکرول می‌کند و هر
     * position:sticky ای را در نوادگانش می‌شکند.
     */
    overflow-x: hidden;
    overflow-x: clip;
}

/*
 * حالت شب — فقط همان چند مقداری که توکنِ معادل ندارند.
 * بقیهٔ صفحه خودکار برمی‌گردد چون همه‌جا توکن مصرف شده. وزنِ
 * body.theme-dark برابر ۰-۱-۱ است و همیشه از بلوکِ بالا (۰-۱-۰) بالاتر
 * می‌ایستد، پس ترتیبِ بارگذاریِ فایل‌ها اهمیتی ندارد.
 */
body.theme-dark .dmhp-page {
    --dmhp-overlay: rgba(255, 255, 255, .022);
    --dmhp-silver-ink: #aab2c0;
    --dmhp-blue: #3b82f6;
    --dmhp-blue-soft: #7bb0ff;
}

.dmhp-page *,
.dmhp-page *::before,
.dmhp-page *::after { box-sizing: border-box; }

.dmhp-page :where(a) { color: inherit; text-decoration: none; }

.dmhp-page :where(a, button, summary):focus-visible {
    outline: 2px solid var(--dmhp-gold);
    outline-offset: 3px;
    border-radius: 6px;
}

[hidden] { display: none !important; }

/* مجموعهٔ آیکون‌ها نباید فضایی اشغال کند */
.dmhp-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* متنِ فقط-صفحه‌خوان */
.dmhp-sr {
    position: absolute; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}

/*
 * ⚠ عرض از توکنِ خودِ قالب می‌آید تا این صفحه دقیقاً هم‌عرضِ هدر و فوتر باشد.
 * ظرفِ هدر در دسکتاپ هیچ پدینگِ کناری ندارد، پس اینجا هم صفر است و فقط در
 * عرض‌های کوچک‌تر پدینگ برمی‌گردد — همان کاری که صفحهٔ اصلی می‌کند.
 */
.dmhp-shell {
    width: 100%;
    max-width: var(--dm-container, 1500px);
    margin-inline: auto;
    padding-inline: 0;
}

/* هر سکشن فاصلهٔ یکسان می‌گیرد — فاصله‌گذاری در یک جا کنترل می‌شود */
.dmhp-page > section { margin-bottom: var(--dmhp-section); }
.dmhp-page > section:last-child { margin-bottom: 0; }


/* ════════════════════════════════════════════
   ظرفِ مشترکِ سکشن‌ها (مقایسه، مزایا، سوالات)
   ════════════════════════════════════════════ */
.dmhp-panel {
    background: var(--dmhp-surface);
    border: 1px solid var(--dmhp-line);
    border-radius: var(--dmhp-r-card);
    padding: 24px;
}
.dmhp-panel__title {
    margin: 0 0 20px;
    font-size: 21px;
    font-weight: 900;
    text-align: center;
    color: var(--dmhp-text);
}
.dmhp-panel__title--sm { font-size: 18px; margin-bottom: 16px; }

/*
 * عنوانِ «روی خط»: مثل legend یک fieldset، وسطِ خطِ بالای ظرف می‌نشیند و
 * خط از دو طرفش رد می‌شود.
 * ⚠ پس‌زمینهٔ عنوان باید دقیقاً پس‌زمینهٔ پشتِ ظرف باشد (نه پس‌زمینهٔ خودِ
 * ظرف)، وگرنه به‌جای بریدنِ خط، یک مستطیلِ هم‌رنگِ کارت روی آن می‌افتد.
 */
.dmhp-panel--legend {
    position: relative;
    margin-top: 15px;
    padding-top: 30px;
    /*
     * خطِ بالای ظرف نامرئی می‌شود ولی هندسه‌اش سرِ جایش می‌ماند (چیدمان تکان
     * نمی‌خورد)؛ خودِ عنوان با دو خطِ کناری همان خط را می‌کشد.
     */
    border-top-color: transparent;
}

/*
 * ⚠ دو باگِ واقعی که اینجا حل شده:
 *
 * ۱) پس‌زمینه: نسخهٔ قبلی یک نوارِ هم‌رنگِ پس‌زمینهٔ صفحه زیرِ متن می‌گذاشت تا
 *    خط را ببُرد. اما پس‌زمینهٔ پشتِ این عنوان «کارت» است نه «صفحه»، پس آن نوار
 *    به‌صورت یک مستطیلِ رنگیِ متمایز دیده می‌شد. حالا اصلاً پس‌زمینه‌ای در کار
 *    نیست: خط با دو شبه‌عنصرِ کناری کشیده می‌شود و وسطش خالی می‌ماند.
 *
 * ۲) جابه‌جاییِ عمودی: margin عمودیِ پیش‌فرضِ h2 صفر نشده بود. روی عنصرِ
 *    absolute با inset-block-start:0 آن margin عنصر را پایین می‌بَرد و فقط
 *    تصادفاً با translateY(-50%) خنثی می‌شد. با فونت و line-height قالب آن
 *    تصادف به هم خورد و عنوان افتاد پایینِ خط و روی محتوا. صفرکردنِ صریحِ
 *    margin موقعیت را قطعی می‌کند.
 */
.dmhp-panel__legend {
    position: absolute;
    inset-block-start: 0;
    /* از شعاعِ گوشه فاصله می‌گیرد تا خط داخلِ قوسِ گوشه شروع نشود */
    inset-inline: 18px;
    margin: 0;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    gap: 14px;
    font-size: 21px;
    font-weight: 900;
    line-height: 1.6;
    text-align: center;
    color: var(--dmhp-text);
}
.dmhp-panel__legend::before,
.dmhp-panel__legend::after {
    content: '';
    flex: 1 1 auto;
    block-size: 1px;
    background: var(--dmhp-line);
}


/* ════════════════════════════════════════════
   ۱. سربرگ
   ════════════════════════════════════════════ */
.dmhp-hero__row {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: start;
    gap: var(--dmhp-gap);
}

/* جعبه‌های گوشه: متن سمت راست، آیکون سمت چپ */
.dmhp-badgebox {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    inline-size: fit-content;
    max-inline-size: 260px;
    padding: 12px 14px;
    background: var(--dmhp-surface);
    border: 1px solid var(--dmhp-line);
    border-radius: var(--dmhp-r-box);
}
/* جعبهٔ سمت چپ به لبهٔ چپ می‌چسبد */
.dmhp-hero__row > .dmhp-badgebox:last-child { margin-inline-start: auto; }

.dmhp-badgebox__text { min-inline-size: 0; }
.dmhp-badgebox__title {
    margin: 0;
    font-size: 13.5px;
    font-weight: 900;
    color: var(--dmhp-gold);
    line-height: 1.7;
}
.dmhp-badgebox__desc {
    margin: 0;
    font-size: 11px;
    line-height: 1.75;
    color: var(--dmhp-muted);
}
.dmhp-badgebox__icon {
    flex-shrink: 0;
    display: grid;
    place-items: center;
    inline-size: 40px;
    block-size: 40px;
    border-radius: 11px;
    background: rgba(229, 163, 35, .12);
    color: var(--dmhp-gold);
}
.dmhp-badgebox__icon svg { inline-size: 22px; block-size: 22px; }

.dmhp-hero__main { text-align: center; padding-top: 2px; }
.dmhp-hero__title {
    margin: 0;
    font-size: 42px;
    font-weight: 900;
    line-height: 1.35;
    color: var(--dmhp-gold);
    letter-spacing: -.5px;
}
.dmhp-hero__title span { color: var(--dmhp-gold-soft); }
.dmhp-hero__sub {
    margin: 2px 0 0;
    font-size: 15px;
    color: var(--dmhp-muted);
}

.dmhp-hero__pill {
    margin: 18px auto 0;
    inline-size: fit-content;
    max-inline-size: 100%;
    padding: 9px 24px;
    border: 1px solid var(--dmhp-line);
    /* مستطیلِ گوشه‌گرد، مطابق مرجع — نه کپسول */
    border-radius: 12px;
    background: var(--dmhp-surface);
    font-size: 13px;
    color: var(--dmhp-muted);
    text-align: center;
}


/* ════════════════════════════════════════════
   ۲. انتخاب دوره
   ════════════════════════════════════════════ */
.dmhp-periods__bar {
    display: grid;
    grid-template-columns: 1fr 1.25fr 1fr;
    align-items: stretch;
    gap: 6px;
    padding: 6px;
    background: var(--dmhp-surface);
    border: 1px solid var(--dmhp-line);
    /* کپسولی، مطابق مرجع — نه مستطیلِ گوشه‌گرد */
    border-radius: 999px;
    /*
     * ⚠ فاصلهٔ بالا برای نشانِ «به بهترین انتخاب» است که از لبهٔ بالای تبِ
     * میانی بیرون می‌زند. بدون این فاصله، نشان زیر سکشن قبلی می‌رود.
     */
    margin-top: 14px;
}

.dmhp-period {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    padding: 12px 14px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--dmhp-text);
    font-family: inherit;
    cursor: pointer;
    transition: background .2s, color .2s;
}
.dmhp-period:hover:not(.is-active) { background: var(--dmhp-surface-2); }

.dmhp-period__title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 16px;
    font-weight: 900;
    line-height: 1.6;
}
.dmhp-period__desc {
    font-size: 11.5px;
    color: var(--dmhp-muted);
    line-height: 1.7;
}

/* نشانِ بنفشِ «محبوب برای شروع» بالای تبِ سه‌ماهه */
.dmhp-period__tag {
    align-self: center;
    margin-bottom: 2px;
    padding: 2px 10px;
    border-radius: 999px;
    background: var(--dmhp-purple);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    line-height: 1.8;
}

/* تبِ میانی: پرشده، بلندتر، با نشانِ بیرون‌زده */
.dmhp-period--best {
    background: linear-gradient(180deg, var(--dmhp-gold-soft), var(--dmhp-gold));
    color: #241a05;
    margin-block: -14px -6px;
    padding-block: 20px 14px;
    box-shadow: 0 10px 26px rgba(229, 163, 35, .22);
    /*
     * ⚠ برخلافِ نوارِ بیرونی که کاملاً کپسولی است، خودِ تبِ طلایی در مرجع
     * مستطیلِ گوشه‌گرد است نه کپسول.
     */
    border-radius: 16px;
}
.dmhp-period--best:hover { background: linear-gradient(180deg, var(--dmhp-gold-soft), var(--dmhp-gold)); }
.dmhp-period--best .dmhp-period__desc { color: #4a3708; }

.dmhp-period__flag {
    position: absolute;
    inset-block-start: -11px;
    inset-inline: 0;
    inline-size: fit-content;
    margin-inline: auto;
    padding: 2px 14px;
    border-radius: 999px;
    background: var(--dmhp-gold-deep);
    color: #fff;
    font-size: 10.5px;
    font-weight: 700;
    line-height: 1.9;
    white-space: nowrap;
}

.dmhp-period__free {
    padding: 1px 9px;
    border-radius: 999px;
    background: var(--dmhp-green);
    color: #fff;
    font-size: 10.5px;
    font-weight: 700;
    line-height: 1.9;
    white-space: nowrap;
}

/* تب‌های غیرفعال وقتی میانی فعال نیست هم باید درست دیده شوند */
.dmhp-period.is-active:not(.dmhp-period--best) {
    background: var(--dmhp-surface-2);
    box-shadow: inset 0 0 0 1px var(--dmhp-line);
}


/* ════════════════════════════════════════════
   ۳. پلن‌ها
   ════════════════════════════════════════════ */
.dmhp-plans__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    align-items: stretch;
    gap: var(--dmhp-gap);
    /* فضای نشانِ «محبوب ترین پلن» که از بالای کارت طلایی بیرون می‌زند */
    padding-top: 14px;
}

.dmhp-plan {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 22px 20px 20px;
    background: var(--dmhp-surface);
    border: 1px solid var(--dmhp-line);
    border-radius: var(--dmhp-r-card);
    transition: border-color .2s, transform .2s;
}
.dmhp-plan:hover { transform: translateY(-2px); }

.dmhp-plan--silver:hover { border-color: var(--dmhp-silver-deep); }
.dmhp-plan--diamond { border-color: rgba(59, 130, 246, .45); }
.dmhp-plan--diamond:hover { border-color: var(--dmhp-blue); }

.dmhp-plan--gold.is-featured {
    border-color: var(--dmhp-gold);
    background: linear-gradient(180deg, rgba(229, 163, 35, .07), transparent 220px), var(--dmhp-surface);
    box-shadow: 0 14px 40px rgba(0, 0, 0, .45);
}

.dmhp-plan__ribbon {
    position: absolute;
    inset-block-start: -13px;
    inset-inline: 0;
    inline-size: fit-content;
    margin-inline: auto;
    padding: 3px 16px;
    border-radius: 999px;
    background: linear-gradient(180deg, var(--dmhp-gold-soft), var(--dmhp-gold));
    color: #241a05;
    font-size: 11px;
    font-weight: 900;
    line-height: 1.9;
    white-space: nowrap;
}

/* سرِ کارت: نام و نشان به‌صورت یک گروهِ وسط‌چین (نشان سمت چپِ نام) */
.dmhp-plan__head {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
}
.dmhp-plan__id { min-inline-size: 0; text-align: center; }
.dmhp-plan__name {
    margin: 0;
    font-size: 20px;
    font-weight: 900;
    line-height: 1.6;
}
.dmhp-plan__en {
    display: block;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.5;
    opacity: .85;
}
.dmhp-plan__seal { flex-shrink: 0; }
.dmhp-plan__seal svg { inline-size: 54px; block-size: 54px; display: block; }

.dmhp-plan--silver .dmhp-plan__name,
.dmhp-plan--silver .dmhp-plan__en,
.dmhp-plan--silver .dmhp-plan__seal { color: var(--dmhp-silver); }
.dmhp-plan--gold .dmhp-plan__name,
.dmhp-plan--gold .dmhp-plan__en,
.dmhp-plan--gold .dmhp-plan__seal { color: var(--dmhp-gold); }
.dmhp-plan--diamond .dmhp-plan__name,
.dmhp-plan--diamond .dmhp-plan__en,
.dmhp-plan--diamond .dmhp-plan__seal { color: var(--dmhp-blue); }

.dmhp-plan__tagline {
    margin: 8px 0 0;
    font-size: 12px;
    color: var(--dmhp-dim);
    line-height: 1.8;
    text-align: center;
}

/*
 * فهرست امکانات: آیکون سمت راست، متن سمت چپِ آن.
 * قابِ دور فهرست و پوششِ کم‌رنگِ پشتش عمدی است و در مرجع هم هست —
 * فهرست را از بدنهٔ کارت جدا می‌کند.
 */
.dmhp-plan__list {
    list-style: none;
    /* فاصله تا بلوکِ قیمت اینجا گرفته می‌شود، نه با margin روی خودِ قیمت‌ها */
    margin: 16px 0 18px;
    padding: 4px 14px;
    border: 1px solid var(--dmhp-line-soft);
    border-radius: 13px;
    /* پوششِ کم‌رنگ — در حالت روشن تیره و در حالت شب روشن است */
    background: var(--dmhp-overlay);
    display: flex;
    flex-direction: column;
    /*
     * فهرست فضای خالیِ کارت را می‌بلعد تا در هر سه کارت هم‌قد شود و در نتیجه
     * بلوکِ قیمت و دکمه‌ها دقیقاً روی یک خط بیفتند — حتی وقتی تعداد آیتم‌ها
     * فرق دارد. لازمهٔ کار این است که بلوکِ قیمت هم در هر سه کارت هم‌ارتفاع
     * باشد؛ برای همین در کارت نقره‌ای یک خطِ خالیِ رزرو برای «۲ ماه رایگان»
     * گذاشته شده (در HTML).
     */
    flex: 1 1 auto;
}
/* خطِ جداکننده بین آیتم‌ها، مطابق مرجع */
.dmhp-plan__list li { padding-block: 10px; }
.dmhp-plan__list li + li { border-top: 1px solid var(--dmhp-line-soft); }
.dmhp-plan--silver .dmhp-plan__list { border-color: rgba(170, 178, 192, .22); }
.dmhp-plan--gold .dmhp-plan__list {
    border-color: rgba(229, 163, 35, .32);
    background: rgba(229, 163, 35, .04);
}
.dmhp-plan--diamond .dmhp-plan__list {
    border-color: rgba(59, 130, 246, .3);
    background: rgba(59, 130, 246, .04);
}
.dmhp-plan__list li {
    display: flex;
    align-items: center;
    gap: 10px;
}
.dmhp-plan__ico {
    flex-shrink: 0;
    display: grid;
    place-items: center;
    inline-size: 26px;
    block-size: 26px;
    margin-top: 2px;
    border-radius: 8px;
}
.dmhp-plan__ico svg { inline-size: 14px; block-size: 14px; }

.dmhp-plan--silver .dmhp-plan__ico { background: rgba(170, 178, 192, .14); color: var(--dmhp-silver); }
.dmhp-plan--gold .dmhp-plan__ico { background: rgba(229, 163, 35, .14); color: var(--dmhp-gold); }
.dmhp-plan--diamond .dmhp-plan__ico { background: rgba(59, 130, 246, .15); color: var(--dmhp-blue-soft); }

.dmhp-plan__txt { display: flex; flex-direction: column; min-inline-size: 0; }
.dmhp-plan__txt strong {
    font-size: 12.5px;
    font-weight: 700;
    line-height: 1.85;
    color: var(--dmhp-text);
}
.dmhp-plan__txt span {
    font-size: 11px;
    line-height: 1.75;
    color: var(--dmhp-dim);
}

/*
 * ⚠ قیمت و دکمه با margin-top:auto به کفِ کارت می‌چسبند تا در هر سه کارت
 * هم‌تراز بمانند؛ وگرنه چون تعداد امکانات فرق دارد، دکمه‌ها پله‌پله می‌شوند.
 */
/*
 * سه سلولِ قیمت داخل یک قابِ مشترک با جداکنندهٔ عمودی می‌نشینند (مطابق مرجع).
 * ⚠ ظرف overflow:hidden دارد تا گوشهٔ گرد سلول‌ها را ببُرد؛ به همین دلیل
 * سلولِ فعال به‌جای border از سایهٔ داخلی استفاده می‌کند — border معمولی
 * زیر برشِ ظرف نصفه دیده می‌شد و چیدمان را هم یک پیکسل جابه‌جا می‌کرد.
 */
.dmhp-plan__prices {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    align-items: stretch;
    gap: 0;
    /*
     * ⚠ فقط همین یک اعلانِ margin بالا مجاز است. قبلاً یک
     * margin-block-start: 18px بعد از این خط نشسته بود و چون هم‌معنیِ
     * margin-top است، auto را بی‌صدا از کار انداخته بود ⇒ قیمت و دکمه
     * دیگر به کفِ کارت نمی‌چسبیدند. فاصله از فهرست با margin خودِ فهرست.
     */
    margin-top: auto;
    border: 1px solid var(--dmhp-line);
    border-radius: 12px;
    overflow: hidden;
}
.dmhp-price {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1px;
    /*
     * ⚠ پدینگ باید از فاصلهٔ ۳ پیکسلیِ قابِ سلولِ فعال بیشتر باشد، وگرنه متن
     * به خطِ قاب می‌چسبد. الان ~۹ پیکسل فاصله تا خط می‌ماند.
     */
    padding: 14px 12px;
    text-align: center;
    transition: background .2s, box-shadow .2s;
}
.dmhp-price + .dmhp-price { border-inline-start: 1px solid var(--dmhp-line); }
.dmhp-price__label { font-size: 11px; color: var(--dmhp-dim); line-height: 1.7; }
.dmhp-price__num {
    font-size: 17px;
    font-weight: 900;
    line-height: 1.5;
    color: var(--dmhp-text);
    font-variant-numeric: tabular-nums;
}
.dmhp-price__unit { font-size: 10.5px; color: var(--dmhp-dim); line-height: 1.7; }
.dmhp-price__bonus { font-size: 10px; line-height: 1.7; }

.dmhp-price.is-active .dmhp-price__num { font-size: 19px; }

/*
 * ⚠ قابِ سلولِ فعال یک لایهٔ جداگانه با inset است، نه border/سایهٔ خودِ سلول.
 * چرا: سلول تا لبهٔ ظرف کشیده شده و ظرف گوشهٔ گرد + overflow دارد، پس هر
 * قابی روی خودِ سلول یا زیر برشِ گوشه نصفه می‌شد یا روی خطِ ظرف می‌افتاد و
 * «بیرون‌زده» دیده می‌شد. با inset، قاب همیشه کاملاً داخلِ ظرف می‌ماند.
 */
.dmhp-price.is-active::after {
    content: '';
    position: absolute;
    inset: 3px;
    border-radius: 9px;
    border: 1.5px solid currentColor;
    pointer-events: none;
}

.dmhp-plan--silver .dmhp-price.is-active,
.dmhp-plan--gold .dmhp-price.is-active {
    background: rgba(229, 163, 35, .09);
    color: var(--dmhp-gold);
}
/*
 * در مرجع، سلولِ «سالانه» در کارت نقره‌ای هم طلایی است نه نقره‌ای: طلایی
 * اینجا نشانهٔ «انتخابِ به‌صرفه» است، نه رنگِ آن پلن. فقط الماسی آبی می‌ماند.
 */
.dmhp-plan--silver .dmhp-price.is-active .dmhp-price__num,
.dmhp-plan--gold .dmhp-price.is-active .dmhp-price__num { color: var(--dmhp-gold); }
.dmhp-plan--gold .dmhp-price__bonus { color: var(--dmhp-gold); }

.dmhp-plan--diamond .dmhp-price.is-active {
    background: rgba(59, 130, 246, .1);
    color: var(--dmhp-blue);
}
.dmhp-plan--diamond .dmhp-price.is-active .dmhp-price__num { color: var(--dmhp-text); }
.dmhp-plan--diamond .dmhp-price__bonus { color: var(--dmhp-blue-soft); }

.dmhp-plan__foot { padding-top: 16px; }
.dmhp-plan__cta {
    inline-size: 100%;
    min-block-size: 46px;
    padding: 11px 18px;
    border: 0;
    border-radius: var(--dmhp-r-btn);
    font-family: inherit;
    font-size: 14px;
    font-weight: 900;
    cursor: pointer;
    transition: filter .2s;
}
.dmhp-plan__cta:hover { filter: brightness(1.08); }

.dmhp-plan--silver .dmhp-plan__cta {
    background: linear-gradient(180deg, #6f7787, #4b5261);
    color: #f2f5fa;
}
.dmhp-plan--gold .dmhp-plan__cta {
    background: linear-gradient(180deg, var(--dmhp-gold-soft), var(--dmhp-gold));
    color: #241a05;
}
.dmhp-plan--diamond .dmhp-plan__cta {
    background: linear-gradient(180deg, #4f92ff, #1f6ae0);
    color: #fff;
}

.dmhp-plan__more {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    /* حداقلِ ارتفاعِ هدفِ لمسی — بدون آن ۲۳ پیکسل می‌شد */
    min-block-size: 28px;
    margin-top: 10px;
    font-size: 12px;
    color: var(--dmhp-muted);
    transition: color .2s;
}
.dmhp-plan__more:hover { color: var(--dmhp-text); }
.dmhp-plan__more-i { inline-size: 13px; block-size: 13px; }


/* ════════════════════════════════════════════
   ۴. جدول مقایسه
   ════════════════════════════════════════════ */
.dmhp-compare__scroll { overflow-x: auto; }

.dmhp-table {
    inline-size: 100%;
    border-collapse: collapse;
    font-size: 12.5px;
    /*
     * ⚠ fixed لازم است تا سه ستونِ پلن دقیقاً هم‌عرض شوند. با چیدمانِ خودکار،
     * عرض از محتوا می‌آمد و ستونِ الماسی (که مقادیرِ کوتاه‌تری دارد) باریک‌تر
     * از بقیه می‌افتاد.
     */
    table-layout: fixed;
}
.dmhp-table__feat { inline-size: 34%; }
.dmhp-table__silver,
.dmhp-table__gold,
.dmhp-table__diamond { inline-size: 22%; }
.dmhp-table th,
.dmhp-table td {
    padding: 11px 12px;
    text-align: center;
    border-bottom: 1px solid var(--dmhp-line-soft);
    font-weight: 400;
    color: var(--dmhp-muted);
}
.dmhp-table tbody tr:last-child th,
.dmhp-table tbody tr:last-child td { border-bottom: 0; }

.dmhp-table thead th {
    padding-block: 14px;
    border-bottom: 1px solid var(--dmhp-line);
    background: var(--dmhp-surface-2);
    vertical-align: bottom;
}
.dmhp-table thead th:first-child { border-start-end-radius: 10px; }
.dmhp-table thead th:last-child { border-start-start-radius: 10px; }

/* ستون نام امکانات: راست‌چین و پررنگ‌تر */
.dmhp-table__feat {
    text-align: start !important;
    color: var(--dmhp-text) !important;
    font-weight: 700 !important;
    inline-size: 34%;
}
.dmhp-table thead .dmhp-table__feat { font-size: 14px; font-weight: 900 !important; }

.dmhp-table__plan {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 900;
}
.dmhp-table__seal { inline-size: 26px; block-size: 26px; flex-shrink: 0; }

.dmhp-table thead .dmhp-table__silver { color: var(--dmhp-silver); }
.dmhp-table thead .dmhp-table__gold { color: var(--dmhp-gold); }
.dmhp-table thead .dmhp-table__diamond { color: var(--dmhp-blue); }

/*
 * هر ستون یک پس‌زمینهٔ بسیار کم‌رنگ به رنگِ همان پلن می‌گیرد (مطابق مرجع).
 * ⚠ مقادیر عمداً خیلی پایین‌اند: هدف تفکیکِ بصریِ ستون‌هاست، نه رنگی‌کردنِ
 * جدول؛ هر چه بالاتر برود، خواناییِ متنِ روی آن افت می‌کند.
 */
.dmhp-table .dmhp-table__silver { background: rgba(148, 163, 184, .055); }
.dmhp-table .dmhp-table__diamond { background: rgba(59, 130, 246, .055); }
.dmhp-table thead .dmhp-table__silver { background: rgba(148, 163, 184, .1); }
.dmhp-table thead .dmhp-table__diamond { background: rgba(59, 130, 246, .1); }

/* کنارِ نامِ پلن می‌نشیند، نه بالای آن (مطابق مرجع) */
.dmhp-table__hot {
    padding: 2px 10px;
    border-radius: 999px;
    background: var(--dmhp-gold);
    color: #241a05;
    font-size: 10px;
    font-weight: 900;
    line-height: 1.9;
}

/*
 * ستون طلایی به‌صورت یک قاب پیوسته دیده می‌شود: خط کناری روی همهٔ ردیف‌ها،
 * خط بالا فقط روی سر جدول و خط پایین فقط روی ردیف آخر.
 */
.dmhp-table thead .dmhp-table__gold {
    border-inline: 1px solid var(--dmhp-gold);
    border-block-start: 1px solid var(--dmhp-gold);
    background: rgba(229, 163, 35, .07);
}
.dmhp-table tbody .dmhp-table__gold {
    border-inline: 1px solid var(--dmhp-gold);
    background: rgba(229, 163, 35, .04);
}
.dmhp-table tbody tr:last-child .dmhp-table__gold {
    border-block-end: 1px solid var(--dmhp-gold);
    border-end-start-radius: 10px;
    border-end-end-radius: 10px;
}

.dmhp-table__check {
    inline-size: 17px;
    block-size: 17px;
    color: var(--dmhp-blue);
    vertical-align: middle;
}


/* ════════════════════════════════════════════
   ۵. مزایای مشترک
   ════════════════════════════════════════════ */
.dmhp-perks__row {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(6, 1fr);
}
/*
 * ⚠ جداکننده با border روی خودِ آیتم غلط بود: تمامِ ارتفاعِ سلول را می‌گرفت و
 * هنگام شکستن گرید به چند ردیف، خط‌های بریده و نامرتب می‌ساخت.
 * حالا یک خطِ کوتاهِ وسط‌چین است که فقط بینِ ستون‌های یک ردیف می‌آید و
 * قانونِ «اولین آیتمِ هر ردیف خط ندارد» در هر بریک‌پوینت جدا تنظیم می‌شود.
 */
.dmhp-perk {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 4px 14px;
}
.dmhp-perk::before {
    content: '';
    position: absolute;
    inset-inline-start: 0;
    inset-block-start: 50%;
    transform: translateY(-50%);
    inline-size: 1px;
    block-size: 34px;
    background: var(--dmhp-line);
}
.dmhp-perk:nth-child(6n+1)::before { content: none; }

.dmhp-perk__icon {
    flex-shrink: 0;
    display: grid;
    place-items: center;
    inline-size: 38px;
    block-size: 38px;
    border-radius: 50%;
    background: rgba(229, 163, 35, .12);
    color: var(--dmhp-gold);
}
.dmhp-perk__icon svg { inline-size: 19px; block-size: 19px; }

.dmhp-perk__text { display: flex; flex-direction: column; min-inline-size: 0; }
.dmhp-perk__text strong { font-size: 12px; font-weight: 700; line-height: 1.7; color: var(--dmhp-text); }
.dmhp-perk__text span { font-size: 10.5px; line-height: 1.7; color: var(--dmhp-dim); }


/* ════════════════════════════════════════════
   ۶. سوالات متداول
   ════════════════════════════════════════════ */
.dmhp-faq__grid {
    display: grid;
    grid-template-columns: 340px minmax(0, 1fr);
    align-items: stretch;
    gap: var(--dmhp-gap);
}

.dmhp-switch {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 26px 22px;
    background: var(--dmhp-surface);
    border: 1px solid var(--dmhp-line);
    border-radius: var(--dmhp-r-card);
    text-align: center;
}
.dmhp-switch__title {
    margin: 0;
    font-size: 22px;
    font-weight: 900;
    color: var(--dmhp-gold);
    line-height: 1.6;
}
.dmhp-switch__desc {
    margin: 0;
    font-size: 13px;
    color: var(--dmhp-muted);
    line-height: 1.95;
    max-inline-size: 34ch;
}
.dmhp-switch__icon {
    display: grid;
    place-items: center;
    margin-top: 8px;
    color: var(--dmhp-gold);
}
.dmhp-switch__icon svg { inline-size: 30px; block-size: 30px; }

.dmhp-faq__list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    align-items: start;
}

.dmhp-q {
    background: var(--dmhp-surface-2);
    border: 1px solid var(--dmhp-line-soft);
    border-radius: 10px;
    transition: border-color .2s;
}
.dmhp-q[open] { border-color: var(--dmhp-gold); }

.dmhp-q__head {
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 11px 13px;
    font-size: 12.5px;
    font-weight: 700;
    line-height: 1.8;
    color: var(--dmhp-text);
    cursor: pointer;
}
.dmhp-q__head::-webkit-details-marker { display: none; }

.dmhp-q__chev {
    flex-shrink: 0;
    inline-size: 15px;
    block-size: 15px;
    color: var(--dmhp-muted);
    transition: transform .25s;
}
.dmhp-q[open] .dmhp-q__chev { transform: rotate(180deg); color: var(--dmhp-gold); }

.dmhp-q__body {
    padding: 0 13px 12px;
    font-size: 12px;
    line-height: 2;
    color: var(--dmhp-muted);
}


/* ════════════════════════════════════════════
   ۷. دعوت پایانی
   ════════════════════════════════════════════ */
.dmhp-cta__bar {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: var(--dmhp-gap);
    padding: 20px 24px;
    background: var(--dmhp-surface);
    border: 1px solid var(--dmhp-line);
    border-radius: var(--dmhp-r-card);
}

.dmhp-cta__side { display: flex; align-items: center; gap: 11px; }
.dmhp-cta__icon {
    flex-shrink: 0;
    display: grid;
    place-items: center;
    inline-size: 42px;
    block-size: 42px;
    border-radius: 50%;
    background: rgba(229, 163, 35, .12);
    color: var(--dmhp-gold);
}
.dmhp-cta__icon svg { inline-size: 21px; block-size: 21px; }
.dmhp-cta__side-text { display: flex; flex-direction: column; min-inline-size: 0; }
.dmhp-cta__side-text strong { font-size: 13px; font-weight: 900; color: var(--dmhp-gold); line-height: 1.7; }
.dmhp-cta__side-text span { font-size: 11px; color: var(--dmhp-dim); line-height: 1.7; }

.dmhp-cta__main { text-align: center; }
.dmhp-cta__title { margin: 0; font-size: 19px; font-weight: 900; color: var(--dmhp-text); line-height: 1.7; }
.dmhp-cta__sub { margin: 0; font-size: 12.5px; color: var(--dmhp-muted); line-height: 1.7; }

.dmhp-cta__btn {
    justify-self: end;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-block-size: 50px;
    padding: 12px 34px;
    border-radius: var(--dmhp-r-btn);
    background: linear-gradient(180deg, var(--dmhp-gold-soft), var(--dmhp-gold));
    color: #241a05;
    font-size: 15px;
    font-weight: 900;
    transition: filter .2s;
}
.dmhp-cta__btn:hover { filter: brightness(1.08); }
.dmhp-cta__btn-i { inline-size: 16px; block-size: 16px; }


/* ════════════════════════════════════════════════════════════
   ریسپانسیو — از پایه بازنویسی شد
   منطق: در هر پله فقط یک تصمیم چیدمانی گرفته می‌شود، نه
   بازتعریفِ پراکندهٔ ده‌ها قانون. هیچ‌جا اسکرول افقی
   تحمیل نمی‌شود مگر جدول، که آن هم زیر ۷۰۰ کلاً بلوکی می‌شود.
   ════════════════════════════════════════════════════════════ */

/* ── دسکتاپ کوچک ─────────────────────────────────────────── */
@media (max-width: 1200px) {
    .dmhp-page { --dmhp-section: 40px; }
    .dmhp-hero__title { font-size: 36px; }
    .dmhp-plan__seal svg { inline-size: 46px; block-size: 46px; }
    /* سه ستون ⇒ خطِ جداکننده فقط بین ستون‌ها، و ردیف دوم فاصلهٔ عمودی می‌گیرد */
    .dmhp-perks__row { grid-template-columns: repeat(3, 1fr); row-gap: 18px; }
    .dmhp-perk::before { content: ''; }
    .dmhp-perk:nth-child(3n+1)::before { content: none; }
    .dmhp-faq__grid { grid-template-columns: 290px minmax(0, 1fr); }
}

/* ── تبلت ─────────────────────────────────────────────────
   سه ستونِ پلن‌ها اینجا می‌شکند. کارت طلایی اول می‌آید چون
   انتخابِ پیشنهادی ماست و در یک ستون باید اول دیده شود.      */
@media (max-width: 992px) {
    .dmhp-page { --dmhp-section: 34px; padding-block: 18px 26px; }
    .dmhp-shell { padding-inline: 16px; }

    /* سربرگ: عنوان بالا، دو جعبه زیرش کنار هم */
    .dmhp-hero__row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
    }
    .dmhp-hero__main {
        grid-column: 1 / -1;
        order: -1;
        margin-bottom: 4px;
    }
    .dmhp-badgebox { max-inline-size: none; inline-size: 100%; }
    .dmhp-hero__row > .dmhp-badgebox:last-child { margin-inline-start: 0; }
    .dmhp-hero__title { font-size: 31px; }
    .dmhp-hero__pill { margin-top: 14px; font-size: 12.5px; padding: 8px 18px; }

    /* پلن‌ها: دو ستون، طلایی اول و تمام‌عرض */
    .dmhp-plans__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .dmhp-plan--gold { order: -1; grid-column: 1 / -1; }

    /* سوالات: بنر بالا، فهرست زیرش */
    .dmhp-faq__grid { grid-template-columns: 1fr; }
    .dmhp-switch { padding: 22px 18px; }
    .dmhp-switch__title { font-size: 20px; }

    /* دعوت پایانی: ستونی و وسط‌چین */
    .dmhp-cta__bar {
        grid-template-columns: 1fr;
        justify-items: center;
        gap: 16px;
        text-align: center;
    }
    .dmhp-cta__main { order: -1; }
    .dmhp-cta__btn { justify-self: center; inline-size: 100%; max-inline-size: 340px; }
}

/* ── موبایل بزرگ ──────────────────────────────────────────
   اینجا دو تصمیم مهم گرفته می‌شود:
   ۱) نوار دوره‌ها عمودی می‌شود. سه تبِ کنار هم در این عرض یا
      سرریز می‌کرد یا آن‌قدر باریک می‌شد که متنش می‌شکست.
   ۲) جدول مقایسه از حالت جدولی خارج و بلوکی می‌شود؛ اسکرولِ
      افقیِ جدول روی موبایل عملاً غیرقابل‌استفاده است.        */
@media (max-width: 700px) {
    .dmhp-page { --dmhp-section: 26px; --dmhp-gap: 12px; }
    .dmhp-panel { padding: 18px 14px; }
    .dmhp-panel__title { font-size: 18px; margin-bottom: 16px; }

    /*
     * ⚠ عنوانِ روی‌خط در موبایل: با فونتِ بزرگ، متن دو خطی می‌شد و نیمهٔ
     * پایینش روی محتوای داخلِ کارت می‌افتاد. فونت کوچک‌تر + فاصلهٔ بالای
     * بیشترِ ظرف، برخورد را حذف می‌کند.
     */
    .dmhp-panel--legend { padding-top: 26px; margin-top: 18px; }
    .dmhp-panel__legend { font-size: 16px; inset-inline: 12px; gap: 10px; }

    .dmhp-hero__row { grid-template-columns: 1fr; }
    .dmhp-hero__title { font-size: 27px; }
    .dmhp-hero__sub { font-size: 13.5px; }
    .dmhp-hero__pill { font-size: 12px; line-height: 1.9; border-radius: 16px; }

    /* نوار دوره‌ها: عمودی، بدون بیرون‌زدگی */
    .dmhp-periods__bar {
        grid-template-columns: 1fr;
        gap: 8px;
        border-radius: 16px;
        margin-top: 12px;
    }
    .dmhp-period {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        gap: 4px 10px;
        padding: 12px;
        border-radius: 12px;
    }
    .dmhp-period__desc { flex-basis: 100%; text-align: center; }
    /* بیرون‌زدگیِ تبِ میانی در حالت عمودی معنا ندارد */
    .dmhp-period--best { margin-block: 0; padding-block: 16px 12px; }
    .dmhp-period__flag { inset-block-start: -10px; }
    .dmhp-period__tag { position: static; margin: 0; }

    /* پلن‌ها: تک‌ستونی */
    .dmhp-plans__grid { grid-template-columns: 1fr; }
    .dmhp-plan--gold { grid-column: auto; }
    .dmhp-plan { padding: 20px 16px 18px; }

    /* ── جدول مقایسه ← بلوک ──
       هر امکان یک کارت می‌شود و سه پلن زیرش ردیف‌به‌ردیف با
       برچسبِ خودشان می‌آیند. برچسب از data-plan خوانده می‌شود. */
    .dmhp-compare__scroll { overflow-x: visible; }
    .dmhp-table,
    .dmhp-table thead,
    .dmhp-table tbody,
    .dmhp-table tr,
    .dmhp-table th,
    .dmhp-table td { display: block; inline-size: auto; }

    .dmhp-table thead { display: none; }

    .dmhp-table tbody tr {
        margin-bottom: 10px;
        background: var(--dmhp-surface-2);
        border: 1px solid var(--dmhp-line-soft);
        border-radius: 12px;
        overflow: hidden;
    }
    .dmhp-table tbody tr:last-child { margin-bottom: 0; }

    .dmhp-table tbody .dmhp-table__feat {
        inline-size: auto;
        padding: 10px 13px;
        background: var(--dmhp-overlay);
        border-bottom: 1px solid var(--dmhp-line-soft) !important;
        font-size: 13px;
    }

    .dmhp-table tbody td {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        padding: 8px 13px;
        text-align: end;
        border-bottom: 1px solid var(--dmhp-line-soft);
    }
    .dmhp-table tbody tr td:last-child { border-bottom: 0; }

    /* برچسبِ نام پلن سمت راست هر ردیف */
    .dmhp-table tbody td::before {
        content: attr(data-plan);
        font-weight: 700;
        color: var(--dmhp-dim);
        font-size: 12px;
    }
    .dmhp-table tbody .dmhp-table__silver::before { color: var(--dmhp-silver); }
    .dmhp-table tbody .dmhp-table__gold::before { color: var(--dmhp-gold); }
    .dmhp-table tbody .dmhp-table__diamond::before { color: var(--dmhp-blue-soft); }

    /*
     * ⚠ قابِ طلاییِ ستون در حالت بلوکی بی‌معنی است و به‌صورت خطوطِ بریده
     * دیده می‌شد؛ اینجا به یک پس‌زمینهٔ ملایم تبدیل می‌شود.
     */
    .dmhp-table tbody .dmhp-table__gold {
        border-inline: 0;
        border-block-start: 0;
        border-end-start-radius: 0;
        border-end-end-radius: 0;
        background: rgba(229, 163, 35, .06);
    }
    .dmhp-table tbody tr:last-child .dmhp-table__gold { border-block-end: 0; }

    /* مزایا: دو ستون، بدون خطِ جداکننده (در این عرض شلوغ می‌کرد) */
    .dmhp-perks__row { grid-template-columns: repeat(2, 1fr); gap: 16px 12px; }
    .dmhp-perk { padding: 0; }
    .dmhp-perk::before { content: none; }

    /* سوالات: یک ستون */
    .dmhp-faq__list { grid-template-columns: 1fr; }

    .dmhp-cta__bar { padding: 18px 14px; }
    .dmhp-cta__title { font-size: 16.5px; }
}

/* ── موبایل کوچک ─────────────────────────────────────────── */
@media (max-width: 480px) {
    .dmhp-shell { padding-inline: 12px; }
    .dmhp-hero__title { font-size: 24px; }
    .dmhp-badgebox { padding: 11px 12px; }

    /*
     * ⚠ روی موبایل متن‌های فرعی بزرگ‌تر می‌شوند، نه کوچک‌تر.
     * در دسکتاپ ۱۰ تا ۱۱ پیکسل قابل قبول است چون در کنار متنِ اصلی و
     * با فاصلهٔ دیدِ کمتر خوانده می‌شود؛ روی گوشی همان اندازه عملاً
     * ناخواناست. کف را روی ۱۱٫۵ می‌گذاریم.
     */
    .dmhp-badgebox__desc,
    .dmhp-perk__text span,
    .dmhp-price__bonus,
    .dmhp-period__tag,
    .dmhp-period__free,
    .dmhp-period__flag,
    .dmhp-plan__txt span,
    .dmhp-cta__side-text span,
    .dmhp-price__unit { font-size: 11.5px; }

    /* سه ستونِ قیمت در این عرض به هم می‌چسبید؛ عمودی می‌شود */
    .dmhp-plan__prices { grid-template-columns: 1fr; gap: 8px; }
    .dmhp-price {
        flex-direction: row;
        justify-content: space-between;
        gap: 10px;
        padding: 13px 15px;
        text-align: start;
    }
    .dmhp-price__label { font-size: 12px; }
    .dmhp-price__num, .dmhp-price.is-active .dmhp-price__num { font-size: 16px; }
    .dmhp-price__unit { margin-inline-end: auto; }

    /* مزایا: تک‌ستونی */
    .dmhp-perks__row { grid-template-columns: 1fr; }

    .dmhp-plan__name { font-size: 18px; }
    .dmhp-plan__seal svg { inline-size: 40px; block-size: 40px; }
    .dmhp-cta__title { font-size: 15px; }
    .dmhp-cta__btn { font-size: 14px; padding-inline: 20px; }
}


/* ════════════════════════════════════════════════════════════
   پس‌گرفتنِ رنگِ عنوان‌ها از قانونِ سراسریِ حالت شب
   ------------------------------------------------------------
   ⚠ باگِ واقعی، نه احتیاط: dark-mode.css قالب این قانون را دارد
       body.theme-dark h1,h2,h3,h4,h5,h6 { color: var(--dm-text-strong) }
   که وزنش ۰-۱-۱ است و از قوانینِ تک‌کلاسهٔ این فایل (۰-۱-۰) بالاتر
   می‌ایستد ⇒ در حالت شب عنوانِ طلاییِ سربرگ، تیترِ جعبه‌های گوشه و
   تیترِ «تغییر پلن در هر زمان» سفید می‌شدند و لهجهٔ طلاییِ صفحه از
   بین می‌رفت. این بلوک با وزنِ ۰-۲-۰ رنگ را پس می‌گیرد.
   (نامِ پلن‌ها از قبل با دو کلاس هدف‌گیری شده بود و سالم مانده.)
   ════════════════════════════════════════════════════════════ */
.dmhp-page .dmhp-hero__title,
.dmhp-page .dmhp-badgebox__title,
.dmhp-page .dmhp-switch__title { color: var(--dmhp-gold); }

.dmhp-page .dmhp-panel__title,
.dmhp-page .dmhp-panel__legend { color: var(--dmhp-text); }


/* ════════════════════════════════════════════
   کاهش حرکت
   ════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
    .dmhp-page *, .dmhp-page *::before, .dmhp-page *::after {
        animation-duration: .01ms !important;
        transition-duration: .01ms !important;
    }
}


/* ============================================================
   افزودهٔ افزونه.

   طراحیِ اصلی برای سه دورهٔ ثابت و قیمت‌های کوتاه ساخته شده بود. افزونه می‌تواند
   چهار دوره داشته باشد و قیمت‌ها هم عددهای واقعیِ نُه‌رقمی‌اند. این بلوک فقط
   همان دو فرضِ شکسته را ترمیم می‌کند و به بقیهٔ طراحی دست نمی‌زند.
   ============================================================ */

/* ── ۱. شبکه‌های شمارش‌پذیر ──
   در حالتِ سه‌تایی دقیقاً همان مقادیرِ اصلی برمی‌گردند. */

.dmhp-page .dmhp-periods__bar {
	grid-template-columns: repeat(var(--dmhp-period-cols, 3), minmax(0, 1fr));
}

.dmhp-page .dmhp-periods__bar[data-count="3"] {
	grid-template-columns: 1fr 1.25fr 1fr;
}

.dmhp-page .dmhp-plans__grid {
	grid-template-columns: repeat(var(--dmhp-plan-cols, 3), minmax(0, 1fr));
}

/* ── ۲. تب‌های دوره ──
   ⚠ مشکلی که دیده شد: تبِ «برجسته» (طلایی) و تبِ «انتخاب‌شده» از هم قابلِ
   تشخیص نبودند؛ وقتی مشتری تبِ دیگری را می‌زد، تبِ طلایی همچنان بلندتر و
   پررنگ‌تر بود و انگار هنوز همان فعال است.

   حالا انتخاب‌شده همیشه یک قابِ تیرهٔ واضح دارد، و تبِ طلاییِ انتخاب‌نشده
   کمی فروکش می‌کند تا نقشش «پیشنهادِ ویژه» بماند نه «انتخابِ فعلی». */

.dmhp-page .dmhp-period.is-active {
	box-shadow: inset 0 0 0 2px var(--dmhp-text);
}

.dmhp-page .dmhp-period--best:not(.is-active) {
	box-shadow: none;
	opacity: .82;
}

.dmhp-page .dmhp-period--best.is-active {
	box-shadow: inset 0 0 0 2px #241a05, 0 10px 26px rgba(229, 163, 35, .22);
}

/* عنوانِ تب در چهار ستون جا نمی‌شد و برچسبِ کنارش بیرون می‌زد. */
.dmhp-page .dmhp-period__title {
	flex-wrap: wrap;
	justify-content: center;
	gap: 6px;
	text-align: center;
}

.dmhp-page .dmhp-periods__bar[data-count="4"] .dmhp-period {
	padding-inline: 8px;
}

.dmhp-page .dmhp-periods__bar[data-count="4"] .dmhp-period__title {
	font-size: 14.5px;
}

.dmhp-page .dmhp-periods__bar[data-count="4"] .dmhp-period__desc {
	font-size: 10.5px;
}

/* ── ۳. قیمت: فقط دورهٔ انتخاب‌شده ──
   ⚠ چرا از ستون‌های کنارِ هم فاصله گرفتیم: در مرجع، عددها کوتاه بودند
   (۱۴۹ / ۳۹۹) و سه ستون جا می‌شد. با قیمت‌های واقعیِ نُه‌رقمی، چهار ستونِ
   فشرده کاملاً ناخوانا می‌شود.

   نوارِ دوره‌ها از قبل نقشِ تب را دارد، پس کارت فقط قیمتِ همان دوره را نشان
   می‌دهد و با کلیک عوض می‌شود — دقیقاً همان چیزی که تب‌ها وعده می‌دهند.
   همهٔ ستون‌ها در DOM می‌مانند چون دکمهٔ خرید شمارِ ماه را از ستونِ فعال
   می‌خواند. */

.dmhp-page .dmhp-plan__prices {
	grid-template-columns: 1fr;
}

.dmhp-page .dmhp-price {
	display: none;
	padding: 16px 12px;
}

.dmhp-page .dmhp-price.is-active {
	display: flex;
}

/* قابِ سلولِ فعال دیگر لازم نیست: تنها سلولِ دیده‌شده همین است. */
.dmhp-page .dmhp-price.is-active::after {
	content: none;
}

.dmhp-page .dmhp-price + .dmhp-price {
	border-inline-start: 0;
}

/* اندازهٔ عدد عمداً مینیمال است: قیمت باید خوانا باشد نه تشریفاتی. */
.dmhp-page .dmhp-price__num {
	font-size: 19px;
	font-weight: 800;
	line-height: 1.4;
	word-break: keep-all;
}

.dmhp-page .dmhp-price.is-active .dmhp-price__num {
	font-size: 19px;
}

.dmhp-page .dmhp-price__label {
	font-size: 11.5px;
}

.dmhp-page .dmhp-price__unit {
	font-size: 11px;
}

/* ── قیمتِ تخفیف‌خورده ──
   قیمتِ اصلیِ خط‌خورده و درصدِ تخفیف بالای رقمِ نهایی؛ بدونِ این، عددِ
   تخفیف‌خورده با یک قیمتِ معمولی از هم قابلِ تشخیص نبود. */

.dmhp-page .dmhp-price__now {
	display: inline-flex;
	align-items: baseline;
	justify-content: center;
	gap: 5px;
	flex-wrap: wrap;
}

.dmhp-page .dmhp-price__old {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	flex-wrap: wrap;
	margin-block-end: 2px;
	font-size: 11.5px;
	line-height: 1.7;
	color: var(--dmhp-dim, #858c9b);
}

.dmhp-page .dmhp-price__old del {
	text-decoration: line-through;
	font-variant-numeric: tabular-nums;
}

.dmhp-page .dmhp-price__off {
	padding: 1px 7px;
	border-radius: 999px;
	font-size: 10.5px;
	font-weight: 700;
	color: #7a1420;
	background: rgba(220, 38, 38, .12);
}

/* ── نشانهٔ متنیِ تبِ انتخاب‌شده ── */

.dmhp-page .dmhp-period__state {
	display: none;
	margin-block-start: 6px;
	padding: 1px 8px;
	border-radius: 999px;
	font-size: 10.5px;
	font-weight: 700;
	background: var(--dmhp-text, #14161c);
	color: #fff;
}

.dmhp-page .dmhp-period.is-active .dmhp-period__state {
	display: inline-block;
}

.dmhp-page .dmhp-period--best.is-active .dmhp-period__state {
	background: #241a05;
}

/* ── تپشِ کوتاهِ قیمت هنگامِ تعویضِ دوره ── */

@keyframes dmhp-price-changed {
	0% { transform: scale(1); }
	40% { transform: scale(1.035); }
	100% { transform: scale(1); }
}

.dmhp-page .dmhp-price--changed {
	animation: dmhp-price-changed .28s ease-out;
}

@media (prefers-reduced-motion: reduce) {
	.dmhp-page .dmhp-price--changed { animation: none; }
	.dmhp-page * { scroll-behavior: auto; }
}

/* ── ۴. بافتِ حساب کاربری ── */

.dmhp-page--account {
	background: transparent;
	padding: 0;
}

.dmhp-page--account > section {
	margin-bottom: 22px;
}

.dmhp-page--account > section:last-child {
	margin-bottom: 0;
}

.dmhp-page--account .dmhp-shell {
	padding-inline: 0;
}

/* ── ۵. کارتِ پلنِ فعالِ خودِ کاربر ── */

.dmhp-page .dmhp-plan.is-current {
	outline: 2px solid var(--dmhp-gold-deep, #c8a04a);
	outline-offset: 2px;
}

.dmhp-empty {
	padding: 32px 16px;
	text-align: center;
	color: var(--dmhp-dim, #858c9b);
}

@media (max-width: 900px) {
	.dmhp-page .dmhp-price__num {
		font-size: 17px;
	}
}