/* ============================================================
   سبزحساب — صفحه تعرفه روی دامنه اصلی

   مستقل از پوسته پنل است: این صفحه برای کسی رسم می‌شود که هنوز
   وارد نشده و شاید هیچ‌وقت هم نشود. فقط tokens.css را می‌گیرد تا
   رنگ و قلم برند یکی بماند.
   ============================================================ */

.pr-page {
    min-block-size: 100vh;
    display: flex; flex-direction: column;
    background:
        radial-gradient(1100px 520px at 84% -14%, rgba(87, 211, 98, .14), transparent 60%),
        radial-gradient(900px 480px at 8% 104%, rgba(17, 173, 133, .10), transparent 60%),
        var(--ground);
    color: var(--ink);
}

/* ---------- نوار بالا ---------- */
.pr-top {
    display: flex; align-items: center; gap: var(--sp-4);
    padding: var(--sp-5) var(--sp-6); flex-wrap: wrap;
}
.pr-brand {
    display: inline-flex; align-items: center; gap: 10px;
    font-weight: 800; font-size: 20px; color: var(--ink); text-decoration: none;
}
.pr-top nav { margin-inline-start: auto; display: flex; gap: var(--sp-2); align-items: center; }
.pr-top nav a {
    padding: 8px 16px; border-radius: var(--r-pill); text-decoration: none;
    font-size: var(--text-sub); font-weight: 500; color: var(--ink-muted);
}
.pr-top nav a:hover { color: var(--ink); background: rgb(255 255 255 / .6); }
.pr-top nav a.is-cta {
    background: var(--brand-primary); color: #fff; font-weight: 700;
    box-shadow: 0 8px 20px rgb(17 173 133 / .25);
}

/* ---------- سربرگ ---------- */
.pr-head { text-align: center; padding: var(--sp-8) var(--sp-5) var(--sp-6); }
.pr-head h1 { font-size: clamp(28px, 5vw, 42px); font-weight: 800; margin: 0 0 var(--sp-3); }
.pr-head h1 .g {
    background: linear-gradient(120deg, #11AD85, #57D362 60%, #98E766);
    -webkit-background-clip: text; background-clip: text; color: transparent;
}
.pr-head p {
    margin: 0 auto; max-inline-size: 60ch;
    font-size: clamp(14px, 2vw, 17px); line-height: 2; color: var(--ink-muted);
}

/* اعلان وضعیت — صادق و دیده‌شدنی، نه در پانوشت */
.pr-notice {
    max-inline-size: 62ch; margin: var(--sp-6) auto 0;
    display: flex; align-items: flex-start; gap: var(--sp-3);
    padding: var(--sp-4) var(--sp-5);
    background: var(--warning-bg); border: 1px solid rgb(181 71 8 / .22);
    border-radius: var(--r-card);
    font-size: var(--text-sub); line-height: 1.9; color: var(--ink);
    text-align: start;
}
.pr-notice svg { flex: none; margin-block-start: 3px; color: var(--warning); }

/* ---------- کارت طرح‌ها ---------- */
/* پنج کارت باید در یک ردیف بنشینند: آزمایشی تا سازمانی، صعودی.
   اگر یکی به ردیف بعد بیفتد، ترتیب صعودی دیگر خوانده نمی‌شود. */
.pr-plans {
    display: grid; gap: var(--sp-3);
    grid-template-columns: repeat(auto-fit, minmax(205px, 1fr));
    max-inline-size: 1240px; margin: var(--sp-8) auto 0; padding: 0 var(--sp-5);
    align-items: stretch;
}
.pr-plan {
    display: flex; flex-direction: column;
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--r-modal); padding: var(--sp-6) var(--sp-4);
    position: relative;
}
/* طرح پیشنهادی یک پله جلو می‌آید — قاعده قدیمی صفحه‌های تعرفه */
.pr-plan.is-popular {
    border-color: var(--brand-primary);
    box-shadow: 0 16px 40px -14px rgb(17 173 133 / .35);
}
.pr-badge {
    position: absolute; inset-block-start: -11px; inset-inline-start: var(--sp-5);
    background: var(--brand-primary); color: #fff;
    font-size: var(--text-tiny); font-weight: 700;
    padding: 3px 12px; border-radius: var(--r-pill);
}
.pr-plan h2 { font-size: var(--text-section); font-weight: 800; margin: 0 0 4px; }
.pr-plan .pr-tag {
    font-size: var(--text-label); color: var(--ink-muted);
    line-height: 1.8; min-block-size: 3.2em;
}

.pr-price { margin: var(--sp-4) 0 var(--sp-2); }
.pr-price b {
    font-family: var(--font-num); font-size: 30px; font-weight: 800;
    line-height: 1.1; display: inline-block;
}
/* واحد زیر عدد، نه کنارش: در ستون ۲۰۵ پیکسلی «تومان / ماه» کنار یک
   عدد هفت‌رقمی می‌شکند و بد دیده می‌شود. */
.pr-price span { display: block; font-size: var(--text-label); color: var(--ink-muted); margin-block-start: 2px; }
.pr-price .pr-free { font-size: 26px; }
.pr-yearly {
    font-size: var(--text-label); color: var(--ink-muted); line-height: 1.9;
    min-block-size: 3.6em;
}
.pr-yearly b { font-family: var(--font-num); color: var(--ink); font-weight: 700; }
.pr-yearly em {
    font-style: normal; color: var(--positive); font-weight: 700;
    background: var(--positive-bg); border-radius: var(--r-pill);
    padding: 1px 8px; margin-inline-start: 4px; font-size: var(--text-tiny);
}

.pr-limits {
    list-style: none; margin: var(--sp-4) 0 0; padding: var(--sp-4) 0 0;
    border-block-start: 1px solid var(--border);
    display: flex; flex-direction: column; gap: 7px;
}
.pr-limits li {
    display: flex; align-items: baseline; gap: var(--sp-2);
    font-size: var(--text-sub); color: var(--ink-muted);
}
.pr-limits li b { color: var(--ink); font-weight: 700; }
.pr-limits .n { font-family: var(--font-num); }

.pr-plan .pr-cta {
    margin-block-start: auto; padding-block-start: var(--sp-5);
}
.pr-plan .pr-cta a,
.pr-plan .pr-cta span {
    display: block; text-align: center; padding: 11px var(--sp-4);
    border-radius: var(--r-field); font-size: var(--text-sub); font-weight: 700;
    text-decoration: none;
}
.pr-plan .pr-cta a {
    background: var(--brand-primary); color: #fff;
}
.pr-plan .pr-cta span {
    background: var(--surface-sunken); color: var(--ink-faint);
    border: 1px dashed var(--border-strong);
}

/* ---------- لایسنس ---------- */
.pr-license {
    max-inline-size: 1240px; margin: var(--sp-5) auto 0; padding: 0 var(--sp-5);
}
.pr-license__box {
    display: flex; align-items: center; gap: var(--sp-5); flex-wrap: wrap;
    background: var(--brand-950); color: #EAF3EF;
    border-radius: var(--r-modal); padding: var(--sp-6);
}
.pr-license__box h2 { margin: 0 0 6px; font-size: var(--text-section); font-weight: 800; color: #fff; }
.pr-license__box p { margin: 0; font-size: var(--text-sub); line-height: 1.9; color: #A9C6BC; max-inline-size: 58ch; }
.pr-license__box .pr-cta { margin-inline-start: auto; }
.pr-license__box .pr-cta span {
    display: inline-block; padding: 11px var(--sp-5); border-radius: var(--r-field);
    background: rgb(255 255 255 / .10); border: 1px dashed rgb(255 255 255 / .28);
    font-size: var(--text-sub); font-weight: 700; color: #EAF3EF;
}

/* ---------- چرا این‌طور قیمت می‌دهیم ---------- */
.pr-why {
    max-inline-size: 1240px; margin: var(--sp-10) auto 0; padding: 0 var(--sp-5);
    display: grid; gap: var(--sp-4);
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.pr-why__card {
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--r-card); padding: var(--sp-5);
}
.pr-why__card b { display: block; font-size: var(--text-card); font-weight: 700; margin-bottom: 6px; }
.pr-why__card p { margin: 0; font-size: var(--text-sub); line-height: 2; color: var(--ink-muted); }

/* ---------- جدول امکانات ---------- */
.pr-matrix { max-inline-size: 1240px; margin: var(--sp-10) auto 0; padding: 0 var(--sp-5); }
.pr-matrix h2 { font-size: var(--text-title); font-weight: 800; margin: 0 0 var(--sp-2); }
.pr-matrix > p { margin: 0 0 var(--sp-5); font-size: var(--text-sub); color: var(--ink-muted); line-height: 1.9; }

/* جدول عریض روی موبایل باید داخل خودش بلغزد، نه اینکه صفحه را پهن کند */
.pr-scroll { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--r-card); background: var(--surface); }
.pr-table { inline-size: 100%; border-collapse: collapse; min-inline-size: 660px; }
.pr-table th, .pr-table td { padding: 10px var(--sp-4); text-align: start; font-size: var(--text-sub); }
.pr-table thead th {
    position: sticky; inset-block-start: 0; z-index: 1;
    background: var(--surface-sunken); font-weight: 700;
    border-block-end: 1px solid var(--border);
}
.pr-table thead th:not(:first-child) { text-align: center; inline-size: 110px; }
.pr-table tbody td:not(:first-child) { text-align: center; }
.pr-table tbody tr + tr td { border-block-start: 1px solid var(--border); }
.pr-table .pr-group td {
    background: var(--brand-50); font-weight: 700; color: var(--brand-700);
    border-block-start: 1px solid var(--border);
}
.pr-table .pr-group em {
    font-style: normal; font-weight: 400; color: var(--ink-muted);
    font-size: var(--text-tiny); margin-inline-start: var(--sp-2);
}
.pr-yes { color: var(--positive); }
.pr-no { color: var(--border-strong); }

/* ---------- پرسش‌ها ---------- */
.pr-faq { max-inline-size: 820px; margin: var(--sp-10) auto 0; padding: 0 var(--sp-5); }
.pr-faq h2 { font-size: var(--text-title); font-weight: 800; margin: 0 0 var(--sp-5); }
.pr-faq details {
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--r-card); padding: var(--sp-4) var(--sp-5); margin-bottom: var(--sp-3);
}
.pr-faq summary { cursor: pointer; font-weight: 700; font-size: var(--text-card); list-style: none; }
.pr-faq summary::-webkit-details-marker { display: none; }
.pr-faq summary::after { content: "+"; float: inline-end; color: var(--ink-faint); font-weight: 400; }
.pr-faq details[open] summary::after { content: "−"; }
.pr-faq p { margin: var(--sp-3) 0 0; font-size: var(--text-sub); line-height: 2.1; color: var(--ink-muted); }

/* ---------- پاورقی ---------- */
.pr-foot {
    margin-block-start: var(--sp-12);
    border-block-start: 1px solid var(--border);
    padding: var(--sp-6) var(--sp-5);
    text-align: center; font-size: var(--text-label); color: var(--ink-faint); line-height: 2;
}
.pr-foot a { color: var(--ink-muted); }

@media (max-width: 720px) {
    .pr-top { padding: var(--sp-4); }
    .pr-license__box .pr-cta { margin-inline-start: 0; }
}