/* ═══ صفحه‌ی «امکانات» (D-799) ═══════════════════════════════════════
   کارفرما: «گرافیکی، آیکون‌دار، مدرن و زیبا — رنگ‌های آرام: فیروزه‌ای و آبیِ آسمانی». زمینه، متن و خط از
   توکن‌های `riqx.css` (پس تیره خودبه‌خود)؛ فقط دو رنگِ این صفحه این‌جا تعریف می‌شوند، هر کدام با نسخه‌ی تیره.
   سربرگ و نوارِ پایانی رنگِ ثابت دارند با متنِ سفید — همان قاعده‌ی سربرگِ تعرفه‌ها (D-699). */

.ft-page {
  --ft-teal: #0F766E; --ft-teal-2: #14B8A6; --ft-teal-wash: #E6FAF6; --ft-teal-line: #B5EDE2;
  --ft-sky: #0369A1; --ft-sky-2: #38BDF8; --ft-sky-wash: #E9F6FE; --ft-sky-line: #BAE3FB;
  --ft-grad: linear-gradient(135deg, #0F766E 0%, #0E7490 48%, #0369A1 100%);
  max-width: 1240px; margin: 0 auto; padding: 36px 16px 64px;
  /* `body` ستونِ flex است و `margin: auto` پهنای فرزند را «به اندازه‌ی محتوا» می‌کند: نوارِ بی‌شکستِ دسته‌ها
     صفحه را در 390px تا 1240px باز می‌کرد (سرریزِ افقی). پهنای صریح، تا `max-width` سقف بماند نه کف. */
  width: 100%; box-sizing: border-box; min-width: 0;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .ft-page {
    --ft-teal: #5EEAD4; --ft-teal-2: #2DD4BF; --ft-teal-wash: #0D2E33; --ft-teal-line: #17474C;
    --ft-sky: #7DD3FC; --ft-sky-2: #38BDF8; --ft-sky-wash: #0C2840; --ft-sky-line: #16405F;
  }
}
:root[data-theme="dark"] .ft-page {
  --ft-teal: #5EEAD4; --ft-teal-2: #2DD4BF; --ft-teal-wash: #0D2E33; --ft-teal-line: #17474C;
  --ft-sky: #7DD3FC; --ft-sky-2: #38BDF8; --ft-sky-wash: #0C2840; --ft-sky-line: #16405F;
}

/* هر دسته یکی از دو رنگ — پشتِ‌هم، تا چشم دسته‌ها را از هم جدا کند */
/* `--tone-solid`: زمینه‌ی نمادِ سفید — در هر دو پوسته پررنگ، چون نسخه‌ی تیره‌ی `--tone` روشن است و سفید رویش گم می‌شد */
.ft-tone-teal { --tone-solid: linear-gradient(135deg, #0F766E, #14B8A6); --tone: var(--ft-teal); --tone-2: var(--ft-teal-2); --tone-wash: var(--ft-teal-wash); --tone-line: var(--ft-teal-line); }
.ft-tone-sky { --tone-solid: linear-gradient(135deg, #0369A1, #0EA5E9); --tone: var(--ft-sky); --tone-2: var(--ft-sky-2); --tone-wash: var(--ft-sky-wash); --tone-line: var(--ft-sky-line); }

/* ── سربرگ ── */
.ft-hero { position: relative; overflow: hidden; isolation: isolate; text-align: center; color: #fff;
  padding: 48px 24px 40px; border-radius: 28px; margin-bottom: 18px; background: var(--ft-grad);
  box-shadow: 0 30px 60px -36px #0E7490; }
.ft-hero::before, .ft-hero::after { content: ""; position: absolute; z-index: -1; border-radius: 50%; }
.ft-hero::before { width: 380px; height: 380px; top: -190px; left: -90px; background: rgba(255, 255, 255, .10); }
.ft-hero::after { width: 260px; height: 260px; bottom: -150px; right: 8%; background: rgba(125, 211, 252, .18); }
.ft-kicker { display: inline-block; font-size: .8rem; font-weight: 700; padding: 4px 14px; border-radius: 999px;
  background: rgba(255, 255, 255, .18); border: 1px solid rgba(255, 255, 255, .3); }
.ft-hero h1 { margin: 14px auto 8px; max-width: 760px; font-size: 2rem; line-height: 1.6; color: #fff; }
.ft-hero p { margin: 0 auto; max-width: 680px; line-height: 2; color: rgba(255, 255, 255, .92); }
.ft-perks { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 22px 0 0; padding: 0; }
.ft-perks li { display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; border-radius: 999px;
  font-size: .86rem; background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .26); }
.ft-perks svg, .ft-toc svg, .ft-gicon svg, .ft-icon svg, .ft-yes svg { fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round; }
.ft-perks svg { width: 16px; height: 16px; }

/* ── دکمه‌ها ── */
.ft-cta { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 22px; }
.ft-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 10px 22px;
  border-radius: 14px; font-weight: 800; font-size: .95rem; text-decoration: none;
  transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease; }
.ft-btn:hover { transform: translateY(-2px); }
.ft-btn.is-light { background: #fff; color: #0E7490; box-shadow: 0 12px 26px -14px rgba(0, 0, 0, .45); }
.ft-btn.is-ghost { color: #fff; border: 1.5px solid rgba(255, 255, 255, .55); background: rgba(255, 255, 255, .08); }
.ft-btn.is-ghost:hover { background: rgba(255, 255, 255, .16); }
.ft-btn.is-solid { color: #fff; background: var(--ft-grad); box-shadow: 0 14px 28px -16px #0E7490; }

/* ── نوارِ دسته‌ها: روی گوشی یک ردیفِ لغزان، نه چند ردیفِ شلوغ ── */
.ft-toc { position: sticky; top: 84px; z-index: 5; display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none;
  margin: 0 0 26px; padding: 10px; border-radius: 18px; background: color-mix(in srgb, var(--surface) 88%, transparent);
  backdrop-filter: blur(10px); border: 1px solid var(--line-soft); box-shadow: var(--shadow-s); }
.ft-toc::-webkit-scrollbar { display: none; }
.ft-toc a { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px; border-radius: 12px;
  font-size: .86rem; font-weight: 700; color: var(--ink-soft); text-decoration: none; white-space: nowrap;
  transition: background-color .15s ease, color .15s ease; }
.ft-toc a svg { width: 17px; height: 17px; color: var(--tone, var(--ft-sky)); }
.ft-toc a:hover { background: var(--tone-wash, var(--ft-sky-wash)); color: var(--ink); }
.ft-toc a.is-compare { margin-inline-start: auto; }

/* ── دسته ── */
.ft-group { scroll-margin-top: 160px; margin: 0 0 34px; padding: 26px; border-radius: 28px;
  background: linear-gradient(180deg, var(--tone-wash) 0%, transparent 220px), var(--surface);
  border: 1px solid var(--line-soft); }
.ft-ghead { display: flex; align-items: center; gap: 16px; margin-bottom: 20px; }
.ft-ghead > div { flex: 1; min-width: 0; }
.ft-gicon { flex: 0 0 auto; display: grid; place-items: center; width: 56px; height: 56px; border-radius: 18px;
  color: #fff; background: var(--tone-solid); box-shadow: 0 14px 26px -16px var(--tone-2); }
.ft-gicon svg { width: 28px; height: 28px; }
.ft-ghead h2 { margin: 0; font-size: 1.4rem; color: var(--ink); }
.ft-ghead p { margin: 4px 0 0; color: var(--ink-soft); line-height: 1.9; font-size: .95rem; }
.ft-gcount { flex: 0 0 auto; padding: 5px 12px; border-radius: 999px; font-size: .8rem; font-weight: 800;
  color: var(--tone); background: var(--tone-wash); border: 1px solid var(--tone-line); }

.ft-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 1060px) { .ft-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) {
  .ft-grid { grid-template-columns: 1fr; }
  .ft-hero { padding: 36px 18px 32px; }
  .ft-hero h1 { font-size: 1.45rem; }
  .ft-group { padding: 18px 14px; border-radius: 22px; }
  .ft-ghead { flex-wrap: wrap; }
  .ft-gcount { order: -1; margin-inline-start: auto; }
  .ft-toc { top: 72px; }
}

/* ── کارت ── */
.ft-card { display: flex; flex-direction: column; padding: 18px 18px 16px; border-radius: 20px; background: var(--surface);
  border: 1px solid var(--line-soft); box-shadow: var(--shadow-s);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.ft-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-m); border-color: var(--tone-line); }
.ft-ctop { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.ft-icon { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 14px; flex: 0 0 auto;
  color: var(--tone); background: var(--tone-wash); border: 1px solid var(--tone-line); }
.ft-icon svg { width: 24px; height: 24px; }
.ft-card h3 { margin: 0 0 6px; font-size: 1.05rem; line-height: 1.7; color: var(--ink); }
.ft-card p { margin: 0; flex: 1; font-size: .9rem; line-height: 1.95; color: var(--ink-soft); }

/* «در کدام پلن؟» — سبز برای همه، رنگِ دسته برای پولی، خاکستری برای چند پلنِ نام‌برده */
.ft-plan { max-width: 62%; padding: 4px 10px; border-radius: 999px; font-size: .74rem; font-weight: 800; line-height: 1.7;
  text-align: center; color: var(--ink-soft); background: var(--surface-2); border: 1px solid var(--line-soft); }
.ft-plan.is-all { color: var(--ok); background: var(--ok-wash); border-color: transparent; }
.ft-plan.is-paid { color: var(--tone); background: var(--tone-wash); border-color: var(--tone-line); }

.ft-more { margin-top: 12px; border-top: 1px dashed var(--line); padding-top: 10px; }
.ft-more summary { cursor: pointer; list-style: none; display: inline-flex; align-items: center; gap: 6px;
  font-size: .84rem; font-weight: 800; color: var(--tone); }
.ft-more summary::-webkit-details-marker { display: none; }
.ft-more summary::after { content: ""; width: 7px; height: 7px; border: solid currentColor; border-width: 0 2px 2px 0;
  transform: rotate(45deg) translateY(-2px); transition: transform .2s ease; }
.ft-more[open] summary::after { transform: rotate(-135deg) translateY(-2px); }
.ft-more ul { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 7px; }
.ft-more li { position: relative; padding-inline-start: 20px; font-size: .86rem; line-height: 1.85; color: var(--ink); }
.ft-more li::before { content: ""; position: absolute; inset-inline-start: 2px; top: .62em; width: 8px; height: 8px;
  border-radius: 50%; background: var(--tone-2); }

/* ── جدولِ مقایسه — لغزش درونِ قاب، نه صفحه ── */
.ft-compare { scroll-margin-top: 160px; margin: 10px 0 34px; padding: 26px; border-radius: 28px; background: var(--surface);
  border: 1px solid var(--line-soft); }
.ft-chead h2 { margin: 0; font-size: 1.4rem; color: var(--ink); }
.ft-chead p { margin: 4px 0 18px; color: var(--ink-soft); font-size: .95rem; }
.ft-table-wrap { overflow-x: auto; border-radius: 18px; border: 1px solid var(--line-soft); }
.ft-table { width: 100%; min-width: 760px; border-collapse: collapse; font-size: .9rem; }
.ft-table th, .ft-table td { padding: 12px 14px; text-align: center; border-bottom: 1px solid var(--line-soft);
  color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
/* سرستون یکدست — گرادیانِ هر خانه جدا نوارنوار دیده می‌شد */
.ft-table thead th { position: sticky; top: 0; font-weight: 800; color: #fff; background: #0E7490; white-space: nowrap; }
.ft-table thead th:first-child { background: #0F766E; }
.ft-table thead th.is-hot { background: #0369A1; box-shadow: inset 0 -3px 0 #A5F3FC; }
.ft-table tbody th { text-align: start; font-weight: 700; color: var(--ink-soft); white-space: nowrap;
  position: sticky; inset-inline-start: 0; background: var(--surface); }
.ft-table tbody tr:nth-child(even) td, .ft-table tbody tr:nth-child(even) th { background: var(--surface-2); }
.ft-table tbody tr:last-child td, .ft-table tbody tr:last-child th { border-bottom: 0; }
.ft-yes { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 8px;
  color: var(--ok); background: var(--ok-wash); }
.ft-yes svg { width: 16px; height: 16px; stroke-width: 2.6; }
.ft-no { color: var(--ink-faint); }
.ft-cta.is-center { justify-content: center; }
@media (max-width: 640px) { .ft-compare { padding: 18px 14px; border-radius: 22px; } }

/* ── نوارِ پایانی ── */
.ft-end { position: relative; overflow: hidden; isolation: isolate; text-align: center; color: #fff; padding: 40px 22px;
  border-radius: 28px; background: var(--ft-grad); }
.ft-end::before { content: ""; position: absolute; z-index: -1; width: 300px; height: 300px; border-radius: 50%;
  top: -150px; right: -60px; background: rgba(255, 255, 255, .10); }
.ft-end h2 { margin: 0 0 6px; font-size: 1.5rem; color: #fff; }
.ft-end p { margin: 0 auto; max-width: 560px; line-height: 2; color: rgba(255, 255, 255, .92); }

@media (prefers-reduced-motion: reduce) { .ft-card, .ft-btn, .ft-more summary::after { transition: none; } }