/* ============================================================================
   ch-118 — صفحه‌ی اشتراک (templates/subscriptions/plans.html)
   ch-122 — بازطراحی: سرصفحه‌ی میانه‌چین، کارت‌های سفید و تخت (بی سربرگ رنگی، بی خط سوراخ‌دار، بی گرادیان)، قیمت درشت با
   دکمه‌ی خرید درست زیر آن، پلن «پیشنهاد ما» با قاب طلایی و برچسب روی لبه، نوار اعتماد زیر کارت‌ها. رنگ هر پلن فقط یک نقطه‌ی
   کوچک کنار نامش و در سربرگ جدول است. تم شب با همان توکن‌ها.
   ============================================================================ */
.sbx{--sbx-canvas:var(--sk-bg,#f6f6f4);--sbx-surface:var(--sk-surface,#fff);--sbx-ink:var(--sk-ink,#15171a);
  --sbx-soft:#565a61;--sbx-faint:#868b93;--sbx-line:#e4e2dc;--sbx-line-strong:#cfccc4;--sbx-amber:#ffc218;--sbx-amber-deep:#f0b400;
  --sbx-amber-soft:#fff6d6;--sbx-coal:#181a1d;--sbx-ok:#16793c;--sbx-ok-soft:rgba(31,157,87,.11);--sbx-r:14px;
  color:var(--sbx-ink);padding-bottom:84px}
[data-theme="dark"] .sbx{--sbx-soft:#a9adb3;--sbx-faint:#7d828a;--sbx-line:#2b2d31;--sbx-line-strong:#3a3d43;--sbx-amber-soft:rgba(255,194,24,.12);
  --sbx-ok:#4ade80;--sbx-ok-soft:rgba(74,222,128,.12)}

/* رنگ پلن‌ها: فقط نقطه‌ی کنار نام و سربرگ جدول */
.sbx .tone-amber{--pc:#e9ad00}
.sbx .tone-teal{--pc:#0f766e}
.sbx .tone-indigo{--pc:#4f46e5}
.sbx .tone-rose{--pc:#e11d48}
.sbx .tone-slate{--pc:#475569}
[data-theme="dark"] .sbx .tone-amber{--pc:#ffc218}
[data-theme="dark"] .sbx .tone-teal{--pc:#2dd4bf}
[data-theme="dark"] .sbx .tone-indigo{--pc:#818cf8}
[data-theme="dark"] .sbx .tone-rose{--pc:#fb7185}
[data-theme="dark"] .sbx .tone-slate{--pc:#94a3b8}
.sbx .sbx-dot{display:inline-block;width:10px;height:10px;border-radius:50%;background:var(--pc,var(--sbx-amber));vertical-align:2px;margin-inline-end:8px}

/* ── نوار بالا ─────────────────────────────────────────────────────────── */
.sbx-top{background:var(--sbx-canvas);border-bottom:1px solid var(--sbx-line);padding-bottom:30px}
.sbx-intro{padding:6px 0 0}
.sbx-intro .sk-mkt-crumb{display:none}
.sbx-intro__row{display:flex;flex-direction:column;align-items:center;gap:22px;padding-top:34px;text-align:center}
.sbx-intro__txt{max-width:680px}
.sbx-kicker{display:inline-flex;align-items:center;gap:7px;margin:0 0 10px;padding:5px 12px 5px 10px;border-radius:999px;background:var(--sbx-amber-soft);
  color:#6b4e00;font-size:12.5px;font-weight:800;line-height:1.8}
.sbx-kicker svg{width:15px;height:15px}
[data-theme="dark"] .sbx-kicker{color:#ffd666}
.sbx-intro h1{margin:0;font-size:clamp(28px,3.4vw,42px);font-weight:900;line-height:1.4;letter-spacing:-.3px;text-wrap:balance}
.sbx-intro__txt p{margin:12px auto 0;max-width:46em;color:var(--sbx-soft);font-size:15.5px;line-height:2;text-wrap:pretty;display: none;}

.sbx-dur{border:0;margin:0;padding:0;min-width:0;text-align:center}
.sbx-dur legend{padding:0;margin:0 auto 8px;font-size:12.5px;font-weight:700;color:var(--sbx-soft)}
.sbx-dur__opts{display:inline-flex;gap:4px;padding:5px;border-radius:999px;background:var(--sbx-surface);border:1px solid var(--sbx-line)}
.sbx-dur__in{position:absolute;opacity:0;width:1px;height:1px;margin:0;pointer-events:none}
.sbx-dur__opt{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;min-width:112px;min-height:40px;padding:6px 14px;
  border-radius:999px;cursor:pointer;user-select:none;transition:background-color .16s ease,color .16s ease}
.sbx-dur__opt b{font-size:15px;font-weight:800;color:var(--sbx-ink)}
.sbx-dur__opt:hover{background:color-mix(in srgb,var(--sbx-canvas) 70%,transparent)}
.sbx-dur__in:checked+.sbx-dur__opt{background:var(--sbx-coal)}
.sbx-dur__in:checked+.sbx-dur__opt b{color:#fff}
.sbx-dur__in:focus-visible+.sbx-dur__opt{outline:3px solid var(--sbx-amber);outline-offset:2px}
[data-theme="dark"] .sbx-dur__in:checked+.sbx-dur__opt{background:var(--sbx-amber)}
[data-theme="dark"] .sbx-dur__in:checked+.sbx-dur__opt b{color:#231c00}
.sbx-dur__note{margin:-8px 0 0;min-height:1.9em;font-size:13px;font-weight:700;line-height:1.9;color:var(--sbx-ok)}

.sbx-note{display:flex;align-items:center;gap:10px 12px;flex-wrap:wrap;margin:22px auto 0;max-width:860px;padding:12px 16px;border-radius:var(--sbx-r);
  background:var(--sbx-surface);border:1px solid var(--sbx-line);font-size:13.5px;line-height:1.95;text-align:start}
.sbx-note svg{flex:none;width:20px;height:20px;color:var(--sbx-soft)}
.sbx-note span{flex:1;min-width:220px}
.sbx-note a{font-weight:800;color:inherit;text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:1.5px}
.sbx-note.is-preview{background:#fff6d9;border-color:#efd27c;color:#4d3900}
.sbx-note.is-preview svg{color:#8a6500}
.sbx-note.is-mine svg{color:#0f766e}
[data-theme="dark"] .sbx-note.is-preview{background:rgba(255,194,24,.1);border-color:rgba(255,194,24,.35);color:#ffe08a}
[data-theme="dark"] .sbx-note.is-mine svg{color:#5eead4}

/* ── کارت‌های پلن ──────────────────────────────────────────────────────── */
.sbx-plans-sec{padding-top:40px}
.sbx-plans{display:grid;grid-template-columns:repeat(var(--n,3),minmax(0,1fr));gap:20px;align-items:stretch}
.sbx-tk{--bw:1px;--bc:var(--sbx-line);--pad:24px;position:relative;display:grid;grid-row:span 5;grid-template-rows:subgrid;row-gap:0;
  background:var(--sbx-surface);border:var(--bw) solid var(--bc);border-radius:var(--sbx-r);min-width:0;padding:4px 0 var(--pad);
  transition:border-color .18s ease,box-shadow .18s ease}
.sbx-tk:hover{border-color:var(--sbx-line-strong)}
.sbx-tk.is-featured{--bw:2px;--bc:var(--sbx-amber);box-shadow:0 24px 50px -36px rgba(24,26,29,.45)}
@media (min-width:981px){.sbx-tk.is-featured{transform:translateY(-10px)}}
.sbx-tk__flag{position:absolute;top:0;left:50%;transform:translate(-50%,-50%);z-index:1;padding:4px 14px;border-radius:999px;
  background:var(--sbx-amber);color:#231c00;font-size:12px;font-weight:900;line-height:1.8;white-space:nowrap}
.sbx-tk__flag.is-mine{background:var(--sbx-coal);color:#fff}

.sbx-tk__head{padding:22px var(--pad) 0}
.sbx-tk__head h2{margin:0;display:flex;align-items:center;font-size:21px;font-weight:900;line-height:1.5}
.sbx-tk__head p{margin:4px 0 0;font-size:13px;line-height:1.9;color:var(--sbx-soft)}

.sbx-tk__price{padding:16px var(--pad) 0}
.sbx-price{display:flex;align-items:baseline;gap:7px;margin:0}
.sbx-price b{font-size:38px;font-weight:900;letter-spacing:-.6px;line-height:1.15;/* font-variant-numeric:tabular-nums; */}
.sbx-price span{font-size:14px;font-weight:700;color:var(--sbx-soft)}
.sbx-per{display:flex;flex-direction:column;gap:1px;margin:8px 0 0;font-size:13px;line-height:1.9;color:var(--sbx-soft)}
.sbx-per__m b{font-weight:800;color:var(--sbx-ink)}
.sbx-per s{color:var(--sbx-faint);text-decoration-thickness:1.5px;font-size:12.5px}
.sbx-na{margin:0;color:var(--sbx-faint);font-size:13.5px;line-height:2}

.sbx-tk__cta{padding:16px var(--pad) 0}
.sbx-cta{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;min-height:50px;padding:8px 14px;border-radius:999px;
  border:1.5px solid var(--sbx-ink);background:transparent;color:var(--sbx-ink);font:inherit;font-size:15px;font-weight:800;text-align:center;
  text-decoration:none;cursor:pointer;transition:background-color .15s ease,color .15s ease,border-color .15s ease,transform .15s ease}
.sbx-cta:hover{background:var(--sbx-ink);color:var(--sbx-surface)}
.sbx-cta:focus-visible{outline:3px solid var(--sbx-amber);outline-offset:3px}
.sbx-tk.is-featured .sbx-cta{background:var(--sbx-amber);border-color:var(--sbx-amber);color:#231c00;box-shadow:0 12px 26px -14px rgba(207,154,0,.8)}
.sbx-tk.is-featured .sbx-cta:hover{background:var(--sbx-amber-deep);border-color:var(--sbx-amber-deep);transform:translateY(-1px)}
.sbx-tk.is-featured .sbx-cta:focus-visible{outline-color:var(--sbx-ink)}
.sbx-cta.is-off,.sbx-tk.is-featured .sbx-cta.is-off{border:1.5px dashed var(--sbx-line-strong);background:none;color:var(--sbx-faint);cursor:not-allowed;font-size:13.5px;box-shadow:none}
.sbx-cta.is-off:hover{background:none;color:var(--sbx-faint);transform:none}

.sbx-tk__quota{padding:20px var(--pad) 0}
.sbx-tk__label{margin:0 0 4px;font-size:12px;font-weight:800;color:var(--sbx-faint);letter-spacing:.01em}
.sbx-q{margin:0;padding:0;list-style:none}
.sbx-q li{display:flex;align-items:center;gap:10px;min-height:44px;padding:4px 0;border-bottom:1px solid var(--sbx-line)}
.sbx-q li:last-child{border-bottom:0}
.sbx-q__ic{flex:none;display:grid;place-items:center;width:30px;height:30px;border-radius:9px;background:var(--sbx-canvas);color:var(--sbx-ink)}
.sbx-q__ic svg{width:17px;height:17px}
.sbx-q__l{flex:1;min-width:0;font-size:13.5px;font-weight:600;line-height:1.7}
.sbx-q b{font-size:19px;font-weight:900;line-height:1;font-variant-numeric:tabular-nums}
.sbx-q li.is-zero .sbx-q__l{color:var(--sbx-faint)}
.sbx-q li.is-zero b{font-size:12.5px;font-weight:700;color:var(--sbx-faint)}
.sbx-q li.is-zero .sbx-q__ic{background:transparent;color:var(--sbx-faint);box-shadow:inset 0 0 0 1px var(--sbx-line)}

.sbx-tk__feats{list-style:none;margin:0;padding:14px var(--pad) 0;display:grid;gap:9px;align-content:start;border-top:1px solid var(--sbx-line);margin-top:16px;margin-inline:var(--pad);padding-inline:0}
.sbx-tk__feats li{display:flex;gap:9px;align-items:flex-start;font-size:13.5px;line-height:1.85}
.sbx-tk__feats li>svg{flex:none;width:18px;height:18px;margin-top:3px;color:var(--sbx-ok)}
.sbx-tk__feats li small{display:block;color:var(--sbx-soft);font-size:12px;line-height:1.8}
.sbx-tk__feats li.is-off{color:var(--sbx-faint)}
.sbx-tk__feats li.is-off>svg{color:var(--sbx-faint)}

/* نوار اعتماد زیر کارت‌ها */
.sbx-assure{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 26px;margin:26px 0 0;padding:0;list-style:none}
.sbx-assure li{display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:700;color:var(--sbx-soft)}
.sbx-assure svg{width:17px;height:17px;color:var(--sbx-ok)}

.sbx-empty{display:flex;flex-direction:column;align-items:center;gap:8px;max-width:420px;margin:12px auto 0;padding:36px 24px;text-align:center;
  border:1.5px dashed var(--sbx-line);border-radius:20px;background:var(--sbx-surface)}
.sbx-empty svg{width:34px;height:34px;color:var(--sbx-faint)}
.sbx-empty b{font-size:16px}
.sbx-empty span{font-size:13.5px;color:var(--sbx-soft);line-height:2}
.sbx-empty .sbx-cta{width:auto;margin-top:8px;min-height:44px;padding-inline:22px}

/* نمایش محتوای مدت انتخاب‌شده */
.sbx-o,.sbx-v{display:none}
.sbx[data-dur="3"] .sbx-o[data-m="3"],.sbx[data-dur="6"] .sbx-o[data-m="6"],.sbx[data-dur="12"] .sbx-o[data-m="12"]{display:block}
.sbx[data-dur="3"] .sbx-v[data-m="3"],.sbx[data-dur="6"] .sbx-v[data-m="6"],.sbx[data-dur="12"] .sbx-v[data-m="12"]{display:inline}
@keyframes sbx-in{from{opacity:.25;transform:translateY(3px)}to{opacity:1;transform:none}}
.sbx.is-switching .sbx-tk__price .sbx-o,.sbx.is-switching .sbx-q{animation:sbx-in .22s ease-out}

/* ── بخش‌های پایین ─────────────────────────────────────────────────────── */
.sbx-sec{padding-top:68px}
.sbx-h2{margin:0;font-size:24px;font-weight:900;line-height:1.5;letter-spacing:-.2px}
.sbx-sec__h{display:flex;align-items:flex-end;justify-content:space-between;gap:10px 18px;flex-wrap:wrap;margin-bottom:20px}
.sbx-sec__h--center{flex-direction:column;align-items:center;text-align:center;margin-bottom:28px}
.sbx-sec__sub{margin:0;color:var(--sbx-soft);font-size:13.5px}
.sbx-more{font-size:14px;font-weight:800;color:var(--sbx-ink);text-decoration:underline;text-underline-offset:6px;text-decoration-thickness:1.5px;text-decoration-color:var(--sbx-amber)}
.sbx-more:hover{text-decoration-color:currentColor}

/* گام‌ها */
.sbx-steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.sbx-steps li{position:relative;display:grid;gap:6px;align-content:start;padding:22px 22px 24px;border:1px solid var(--sbx-line);border-radius:var(--sbx-r);background:var(--sbx-surface)}
.sbx-steps__n{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--sbx-coal);color:var(--sbx-amber);font-size:16px;font-weight:900;margin-bottom:6px}
.sbx-steps b{font-size:16px;font-weight:800;line-height:1.7}
.sbx-steps p{margin:0;color:var(--sbx-soft);font-size:14px;line-height:2;max-width:40ch}
[data-theme="dark"] .sbx-steps__n{background:var(--sbx-amber);color:#231c00}

/* جدول مقایسه */
.sbx-tablewrap{position:relative;overflow-x:auto;border:1px solid var(--sbx-line);border-radius:var(--sbx-r);background:var(--sbx-surface)}   /* relative: متن صفحه‌خوان جدول (tk-sr) هم داخل همین قاب بماند و صفحه را در گوشی پهن نکند */
.sbx-tablewrap:focus-visible{outline:3px solid var(--sbx-amber);outline-offset:3px}
.sbx-table{width:100%;min-width:660px;border-collapse:collapse;font-size:14px}
.sbx-table th,.sbx-table td{padding:14px 18px;text-align:center;vertical-align:middle;border-bottom:1px solid var(--sbx-line)}
.sbx-table tbody tr:last-child>*{border-bottom:0}
.sbx-table tbody th{text-align:start;font-weight:700;color:var(--sbx-soft);width:30%;line-height:1.9}
.sbx-table thead th{font-size:15.5px;font-weight:900;padding-block:18px;white-space:nowrap}
.sbx-table thead th.is-featured{background:var(--sbx-amber-soft);color:var(--sbx-ink)}
.sbx-table td.is-featured{background:color-mix(in srgb,var(--sbx-amber-soft) 45%,transparent)}
.sbx-table td b{font-size:15.5px;font-weight:900}
.sbx-table td small{display:block;margin-top:3px;font-size:12px;color:var(--sbx-soft)}
.sbx-table .sbx-none{color:var(--sbx-faint);font-size:13px}
.sbx-yes,.sbx-no{display:inline-grid;place-items:center;width:26px;height:26px;border-radius:50%;vertical-align:middle}
.sbx-yes{background:var(--sbx-ok-soft);color:var(--sbx-ok)}
.sbx-no{color:var(--sbx-faint)}
.sbx-yes svg,.sbx-no svg{width:16px;height:16px}

.sbx-cards{margin-top:4px}
@media (min-width:1100px){.sbx .sbx-cards{grid-template-columns:repeat(4,minmax(0,1fr))}}

/* پرسش‌های متداول */
.sbx-faq-wrap{max-width:860px}
.sbx-faq{margin-top:16px;border-top:1px solid var(--sbx-line)}
.sbx-faq__i{border-bottom:1px solid var(--sbx-line)}
.sbx-faq__i summary{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 2px;font-size:15.5px;font-weight:800;line-height:1.9;cursor:pointer;list-style:none}
.sbx-faq__i summary::-webkit-details-marker{display:none}
.sbx-faq__i summary:focus-visible{outline:3px solid var(--sbx-amber);outline-offset:2px;border-radius:8px}
.sbx-faq__i summary svg{flex:none;width:20px;height:20px;color:var(--sbx-soft);transition:transform .2s ease}
.sbx-faq__i[open] summary svg{transform:rotate(180deg)}
.sbx-faq__i p{margin:-4px 0 20px;color:var(--sbx-soft);font-size:14.5px;line-height:2.15;max-width:72ch}

/* اعتماد و فروشنده */
.sbx-trust{display:grid;grid-template-columns:minmax(0,1.75fr) minmax(280px,1fr);gap:20px;margin-top:20px;align-items:start}
.sbx-trust__list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.sbx-trust__list li{display:flex;gap:13px;align-items:flex-start;padding:16px 16px 14px;border-radius:var(--sbx-r);background:var(--sbx-surface);border:1px solid var(--sbx-line)}
.sbx-trust__ic{flex:none;display:grid;place-items:center;width:40px;height:40px;border-radius:12px;background:var(--sbx-amber-soft);color:var(--sbx-ink)}
.sbx-trust__ic svg{width:21px;height:21px}
.sbx-trust__list b{display:block;font-size:15px;font-weight:800;line-height:1.8}
.sbx-trust__list p{margin:3px 0 0;font-size:13.5px;line-height:2;color:var(--sbx-soft)}
.sbx-trust__list a{color:var(--sbx-ink);font-weight:800;text-decoration:underline;text-underline-offset:4px}
[data-theme="dark"] .sbx-trust__ic{color:#ffd666}

.sbx-legal{display:flex;flex-direction:column;gap:6px;padding:22px;border-radius:var(--sbx-r);background:var(--sbx-coal);color:#eceee9}
.sbx-legal__t{font-size:13px;font-weight:700;color:#b3b7bd}
.sbx-legal__name{margin:0;font-size:16.5px;font-weight:900;line-height:1.8;color:#fff}
.sbx-legal__addr{margin:0;font-size:13.5px;line-height:2.05;color:#c9ccd1}
.sbx-legal__links{display:flex;flex-wrap:wrap;gap:6px 16px;margin-top:6px}
.sbx-legal__links a{color:#fff;font-size:13px;font-weight:700;text-decoration:underline;text-underline-offset:4px;text-decoration-color:rgba(255,194,24,.7)}
.sbx-legal a:focus-visible{outline:3px solid var(--sbx-amber);outline-offset:3px;border-radius:6px}
.sbx-enamad{display:inline-flex;align-self:flex-start;margin-top:14px;padding:8px;border-radius:12px;background:#fff}
.sbx-enamad img{display:block;width:auto;height:96px}
[data-theme="dark"] .sbx-legal{background:#1b1d21;border:1px solid var(--sbx-line)}

/* ── پهنای کمتر ───────────────────────────────────────────────────────── */
@media (max-width:980px){
  .sbx-plans{grid-template-columns:minmax(0,1fr);max-width:540px;margin-inline:auto;gap:22px}
  .sbx-tk{display:flex;flex-direction:column}
  .sbx-steps{grid-template-columns:minmax(0,1fr);gap:12px}
  .sbx-steps li{grid-template-columns:40px minmax(0,1fr);column-gap:14px}
  .sbx-steps li .sbx-steps__n{grid-row:span 2;margin-bottom:0}
  .sbx-steps b{margin-top:8px}
  .sbx-trust{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:640px){
  .sbx-intro__row{padding-top:24px;gap:18px}
  .sbx-intro h1{font-size:27px}
  .sbx-intro__txt p{font-size:14.5px}
  .sbx-dur{width:100%}
  .sbx-dur__opts{display:flex;width:100%}
  .sbx-dur__opt{flex:1;min-width:0;padding-inline:4px}
  .sbx-dur__opt b{font-size:14px}
  .sbx-dur__note{font-size:12.5px}
  .sbx-plans-sec{padding-top:34px}
  .sbx-tk{--pad:18px}
  .sbx-price b{font-size:33px}
  .sbx-assure{gap:8px 16px;margin-top:22px}
  .sbx-assure li{font-size:12.5px}
  .sbx-trust__list{grid-template-columns:minmax(0,1fr)}
  .sbx-sec{padding-top:52px}
  .sbx-h2{font-size:21px}
}
@media (prefers-reduced-motion:reduce){
  .sbx.is-switching .sbx-tk__price .sbx-o,.sbx.is-switching .sbx-q{animation:none}
  .sbx-faq__i summary svg{transition:none}
  .sbx-cta,.sbx-tk{transition:none}
}
@media (forced-colors:active){
  .sbx-tk,.sbx-tablewrap,.sbx-dur__opts{border:1px solid CanvasText}
  .sbx-dur__in:checked+.sbx-dur__opt{outline:2px solid Highlight}
}