/* صفحه‌ی معرفی — تنها صفحه‌ی عمومیِ سایت.
 *
 * app.css پیش از این می‌آید و توکن‌ها، فونت، دکمه و کارت از آنجا می‌آیند؛
 * اینجا فقط چیدمانِ همین صفحه است. بدنه کلاسِ «login-page» را هم دارد تا
 * متغیرهای --lg-* و پس‌زمینه‌ی شیشه‌ای دقیقاً همان صفحه‌ی ورود باشد —
 * غریبه‌ای که وارد می‌شود نباید حس کند به سایتِ دیگری رفته.
 */

/* گرادیانِ .login-page برای صفحه‌ای به‌قدِ یک نما نوشته شده؛ روی صفحه‌ای
   شش‌هزار پیکسلی کش می‌آید و محو می‌شود.
   «background-attachment: fixed» درستش می‌کرد ولی گران‌ترین راهش بود —
   مرورگر مجبور است با هر اسکرول کلِ زمینه را دوباره بکشد. زمینه‌ی تخت
   بگذار و درخشش را به همان لایه‌ی .login-bg بسپار که از قبل fixed است و
   کارش را می‌کند. */
.lp { background: var(--lg-base); }

/* ─── نوار بالا ─── */

.lp-nav {
  position: sticky; top: 0; z-index: 20;
  padding: 0 max(16px, env(safe-area-inset-right)) 0 max(16px, env(safe-area-inset-left));
  background: color-mix(in srgb, var(--lg-base) 84%, transparent);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
}
/* خط و پس‌زمینه تا لبه‌ی پنجره، ولی محتوا در همان ستونِ بقیه‌ی صفحه. */
.lp-navin {
  max-width: 1060px; margin: 0 auto;
  display: flex; align-items: center; gap: 12px; padding: 10px 0;
}
.lp-brand {
  display: flex; align-items: center; gap: 9px;
  font-weight: 700; font-size: 1.06rem; color: var(--text);
}
.lp-brand:hover { text-decoration: none; }
.lp-brand img { width: 28px; height: 28px; display: block; }
.lp-nav .spacer { flex: 1; }

/* ─── قالبِ بخش‌ها ─── */

.lp-main { position: relative; z-index: 1; }
.lp-sec {
  max-width: 1060px; margin: 0 auto;
  padding: 54px max(16px, env(safe-area-inset-right)) 0 max(16px, env(safe-area-inset-left));
}
.lp-sec > h2 {
  font-size: clamp(1.24rem, 3.4vw, 1.62rem); font-weight: 700;
  letter-spacing: -.01em; margin: 0 0 10px; color: var(--text);
}
.lp-lede { color: var(--muted); font-size: 1rem; max-width: 62ch; margin: 0 0 6px; }
.lp-lede + .lp-lede { margin-top: 12px; }
.lp-lede strong { color: var(--text); font-weight: 600; }
.lp-pain {
  color: var(--faint); font-size: .95rem; font-style: italic;
  margin: 0 0 14px; border-inline-start: 3px solid var(--border);
  padding-inline-start: 12px;
}

/* ─── قهرمان ─── */

.lp-hero { text-align: center; padding-top: 62px; position: relative; }

/* ─── نوارِ نرخ پشتِ هیرو ───
   `currentColor` می‌گیرد تا در هر دو تم از خودِ رنگِ تأکید بیاید و لازم
   نباشد دو بار تعریفش کنیم. زیرِ متن می‌نشیند و کلیک را نمی‌گیرد. */
.lp-tape {
  position: absolute; inset-inline: 0; bottom: 0; z-index: 0;
  width: 100%; height: 300px; color: var(--accent);
  pointer-events: none;
}
/* متن باید بالای نوار بماند، وگرنه ترتیبِ رسم آن را می‌پوشاند. */
.lp-hero > *:not(.lp-tape) { position: relative; z-index: 1; }
@media (max-width: 700px) { .lp-tape { height: 210px; } }
.lp-hero h1 {
  font-size: clamp(1.7rem, 6vw, 3rem); line-height: 1.28; font-weight: 700;
  letter-spacing: -.025em; margin: 0 auto 16px; max-width: 17ch;
}
.lp-hero .lp-lede { margin: 0 auto; text-align: center; font-size: 1.05rem; }
.lp-cta {
  display: flex; flex-wrap: wrap; gap: 10px;
  justify-content: center; margin: 26px 0 8px;
}
.lp-cta .btn { padding: 11px 22px; border-radius: 11px; font-size: 1rem; font-weight: 600; }
.lp-cta .btn:not(.ghost) { box-shadow: 0 14px 28px -16px var(--accent); }
.lp-note { color: var(--faint); font-size: .82rem; }

/* ─── قابِ «نمونه» ───
   هر ماکِت باید آشکارا نمونه باشد. روبان تزئین نیست: بی آن، بازدیدکننده
   می‌تواند این اعداد را دادهٔ واقعیِ کسی بپندارد. */

/* بدونِ backdrop-filter — عمداً.
   صفحه‌ی ورود یک کارتِ شیشه‌ای دارد و ارزشش را دارد. اینجا ده کارت است،
   هر کدام روی یک پس‌زمینه‌ی ثابت: هر بار اسکرول یعنی ده بار تارکردنِ
   دوباره‌ی زمینه. روی گوشیِ میان‌رده همین یک ویژگی صفحه را کُند می‌کند —
   و مخاطبِ این صفحه دقیقاً همان گوشی را دارد. زمینه‌ی نیمه‌شفافِ ساده
   همان تصویر را می‌دهد، بی آن هزینه. */
.mock {
  position: relative;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 16px; padding: 20px 16px 16px;
  box-shadow: var(--shadow);
  margin-top: 22px; min-width: 0;
}
.mock::before {
  content: "دادهٔ نمونه";
  position: absolute; top: -9px; inset-inline-start: 16px;
  background: var(--surface-2); color: var(--faint);
  border: 1px solid var(--border); border-radius: 999px;
  font-size: .68rem; padding: 1px 9px;
}
.mock.plain::before { content: none; }
.mock h3 {
  font-size: .8rem; font-weight: 500; color: var(--muted); margin: 0 0 10px;
}

/* ─── نوارِ فرمان و کارتِ تأیید ─── */

.demo {
  display: grid; gap: 14px; align-items: center;
  grid-template-columns: 1fr auto 1fr auto 1fr;
}
.demo .arrow { color: var(--faint); display: grid; place-items: center; }
.demo .arrow svg { width: 20px; height: 20px; }
.demo .dpane { min-width: 0; }

.cmd {
  display: flex; align-items: center; gap: 8px;
  background: var(--lg-field); border: 1px solid var(--lg-edge);
  border-radius: 11px; padding: 9px 12px;
}
.cmd .txt { flex: 1; min-width: 0; font-size: .95rem; overflow-wrap: anywhere; }
.cmd .caret {
  display: inline-block; width: 2px; height: 1.05em; vertical-align: -2px;
  background: var(--accent); animation: lp-blink 1.1s steps(1) infinite;
}
@keyframes lp-blink { 50% { opacity: 0; } }
.cmd .go {
  flex: 0 0 auto; background: var(--accent); color: #fff;
  border-radius: 8px; padding: 4px 12px; font-size: .84rem; font-weight: 600;
}

.saidbox {
  background: var(--surface-2); border-radius: 9px; padding: 7px 10px;
  font-size: .84rem; color: var(--muted); margin-bottom: 10px;
  overflow-wrap: anywhere;
}
.saidbox b { color: var(--text); font-weight: 500; }

.pairs { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; font-size: .89rem; margin: 0; }
.pairs dt { color: var(--muted); }
.pairs dd { margin: 0; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }

.toggles { display: flex; flex-wrap: wrap; gap: 7px; margin: 12px 0; }
.tg {
  display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid var(--border); border-radius: 999px;
  padding: 3px 11px; font-size: .8rem; color: var(--muted);
}
.tg::before {
  content: ""; width: 24px; height: 14px; border-radius: 999px; flex: 0 0 auto;
  background: var(--surface-2); border: 1px solid var(--border);
  box-shadow: inset -11px 0 0 -9px var(--faint);
}
.tg.on { color: var(--pos); border-color: var(--pos); }
.tg.on::before { background: var(--pos-bg); box-shadow: inset 11px 0 0 -9px var(--pos); }

/* ─── سطرهای دفتری ─── */

.entries { display: grid; gap: 7px; }
.entryline {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 10px; font-size: .88rem;
  border: 1px solid var(--border); border-radius: 9px; padding: 7px 11px;
  background: var(--surface);
}
.entryline .who { color: var(--muted); min-width: 0; overflow-wrap: anywhere; }
.entryline .amt { font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; }
.zerosum {
  margin-top: 9px; padding-top: 8px; border-top: 1px dashed var(--border);
  font-size: .8rem; color: var(--muted);
  display: flex; gap: 8px; justify-content: space-between; flex-wrap: wrap;
}
.zerosum b { color: var(--accent-2); font-variant-numeric: tabular-nums; }

/* ─── گوشی و ربات ─── */

.phone {
  border: 1px solid var(--border); border-radius: 20px; padding: 12px 10px;
  background: var(--surface); max-width: 300px; margin-inline: auto;
}
.phone .lp-notch {
  width: 44px; height: 4px; border-radius: 999px; background: var(--border);
  margin: 0 auto 12px;
}
.bubble {
  background: var(--accent-bg); color: var(--accent-2);
  border-radius: 12px 12px 3px 12px; padding: 7px 11px; font-size: .85rem;
  margin-bottom: 9px; overflow-wrap: anywhere;
}
.bubble.them {
  background: var(--surface-2); color: var(--text);
  border-radius: 12px 12px 12px 3px;
}
.botkeys { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 10px; }
.botkeys span {
  border: 1px solid var(--border); border-radius: 8px;
  padding: 3px 9px; font-size: .76rem; color: var(--muted);
}

/* ─── جدولِ ماکِت ─── */

.mocktable { width: 100%; border-collapse: collapse; font-size: .87rem; }
.mocktable th {
  text-align: right; font-weight: 500; color: var(--muted); font-size: .77rem;
  padding: 6px 8px; border-bottom: 1px solid var(--border); white-space: nowrap;
}
.mocktable td { padding: 9px 8px; border-bottom: 1px solid var(--border); vertical-align: top; }
.mocktable tr:last-child td { border-bottom: none; }
.mocktable .num { font-variant-numeric: tabular-nums; white-space: nowrap; }

/* روی گوشی، جدول کارت می‌شود — نه اسکرولِ افقی. عددی که باید کشیده شود تا
   دیده شود، دیده نمی‌شود. */
@media (max-width: 640px) {
  .mocktable, .mocktable tbody, .mocktable tr, .mocktable td { display: block; width: 100%; }
  .mocktable thead { display: none; }
  .mocktable tr {
    border: 1px solid var(--border); border-radius: 10px;
    padding: 8px 10px; margin-bottom: 8px; background: var(--surface);
  }
  .mocktable td {
    border: none; padding: 3px 0;
    display: flex; gap: 10px; justify-content: space-between;
  }
  .mocktable td::before {
    content: attr(data-label); color: var(--muted); font-size: .78rem; flex: 0 0 auto;
  }
}

/* ─── کارت‌های آماری ─── */

.statrow { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(165px, 1fr)); }
.statbox {
  border: 1px solid var(--border); border-radius: 11px; padding: 11px 13px;
  background: var(--surface); min-width: 0;
}
.statbox .lbl { color: var(--muted); font-size: .78rem; margin-bottom: 4px; }
.statbox .big {
  font-size: 1.28rem; font-weight: 700; letter-spacing: -.02em;
  font-variant-numeric: tabular-nums; overflow-wrap: anywhere;
}
.statbox .sm { color: var(--faint); font-size: .77rem; margin-top: 3px; }

/* ─── نمودارِ نمونه ─── */

.lp-chart { width: 100%; height: auto; display: block; margin-top: 14px; }
.lp-chart .gl { stroke: var(--border); stroke-width: 1; }
.lp-chart .zl { stroke: var(--faint); stroke-width: 1; }
.lp-chart .up { fill: var(--pos); }
.lp-chart .dn { fill: var(--neg); }
.lp-chart .ax { fill: var(--faint); font-size: 9px; }

.aside {
  border: 1px dashed var(--border); border-radius: 10px; padding: 9px 12px;
  color: var(--muted); font-size: .84rem; margin-top: 12px;
}

/* ─── صف حساب‌ها ─── */

.qrow {
  border: 1px solid var(--border); border-radius: 11px; padding: 10px 12px;
  background: var(--surface); margin-bottom: 9px; min-width: 0;
}
.qrow.late { border-color: var(--neg); }
.qhead { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; margin-bottom: 8px; }
.iban {
  direction: ltr; text-align: left; font-variant-numeric: tabular-nums;
  font-size: .85rem; letter-spacing: .02em; overflow-wrap: anywhere;
  flex: 1 1 220px; min-width: 0;
}
.iban u { text-decoration: underline wavy var(--neg); text-underline-offset: 3px; }
/* نوارِ پیشرفت از app.css می‌آید — .bar با .bar-done و .bar-held. همان
   کامپوننتی که در صفحه‌ی حساب‌ها کار می‌کند، نه بدلی از آن: صفحه‌ی معرفی
   باید همان چیزی را نشان بدهد که هست، و نسخه‌ی دوم روزی از اصل جدا می‌افتد. */
.qfoot { color: var(--muted); font-size: .78rem; font-variant-numeric: tabular-nums; }

/* ─── جداییِ دفترها ─── */

.books { display: grid; grid-template-columns: 1fr auto 1fr; gap: 10px; }
.bookbox {
  border: 1px solid var(--border); border-radius: 11px; padding: 14px;
  background: var(--surface); text-align: center; min-width: 0;
}
.bookbox .nm { font-weight: 600; margin-bottom: 6px; }
.bookbox .it { color: var(--muted); font-size: .8rem; }
.wall { width: 0; border-inline-start: 2px dashed var(--border); margin-inline: 8px; }

.matrix { width: 100%; min-width: 330px; border-collapse: collapse; font-size: .84rem; }
.matrix th, .matrix td {
  padding: 7px 6px; border-bottom: 1px solid var(--border); text-align: center;
}
.matrix tr:last-child td { border-bottom: none; }
.matrix th:first-child, .matrix td:first-child { text-align: right; white-space: nowrap; }
.matrix th { color: var(--muted); font-weight: 500; font-size: .76rem; }
.matrix .y { color: var(--pos); font-weight: 700; }
.matrix .r { color: var(--faint); font-size: .76rem; }

/* ─── هست و نیست ─── */

.haves { display: grid; grid-template-columns: 1fr 1fr; }
.haves > div { padding: 4px 16px; min-width: 0; }
.haves > div + div { border-inline-start: 1px solid var(--border); }
.haves ul { list-style: none; margin: 0; padding: 0; }
.haves li { font-size: .89rem; margin-bottom: 10px; display: flex; gap: 8px; }
.haves li i { flex: 0 0 auto; font-style: normal; font-weight: 700; }
.haves .yes i { color: var(--pos); }
.haves .no { color: var(--muted); }
.haves .no i { color: var(--faint); font-weight: 400; }
.haves .no small { display: block; color: var(--faint); font-size: .76rem; margin-top: 2px; }

/* ─── قدم‌ها ─── */

.steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(215px, 1fr)); gap: 12px; }
.step {
  position: relative; border: 1px solid var(--border); border-radius: 12px;
  padding: 14px 15px; background: var(--surface); overflow: hidden; min-width: 0;
}
.step .n {
  position: absolute; inset-inline-end: 8px; top: -10px;
  font-size: 3.1rem; font-weight: 700; color: var(--border);
  line-height: 1; pointer-events: none;
}
.step .t { font-weight: 600; margin-bottom: 5px; position: relative; }
.step .d { color: var(--muted); font-size: .86rem; position: relative; }

/* ─── پاورقی ─── */

.lp-foot {
  max-width: 1060px; margin: 56px auto 0; padding: 20px 16px 34px;
  border-top: 1px solid var(--border);
  color: var(--faint); font-size: .8rem;
  display: flex; flex-wrap: wrap; gap: 10px; justify-content: space-between;
}
.lp-foot a { color: var(--muted); }

/* ─── باریک ─── */

@media (max-width: 860px) {
  .demo { grid-template-columns: 1fr; }
  .demo .arrow { transform: rotate(90deg); }
  .books { grid-template-columns: 1fr; }
  .wall {
    width: auto; height: 0; margin: 4px 0;
    border-inline-start: none; border-top: 2px dashed var(--border);
  }
  .haves { grid-template-columns: 1fr; }
  .haves > div + div {
    border-inline-start: none; border-top: 1px solid var(--border);
    padding-top: 18px; margin-top: 10px;
  }
}

@media (max-width: 560px) {
  .lp-sec { padding-top: 42px; }
  .lp-hero { padding-top: 40px; }
  .mock { padding: 17px 12px 13px; border-radius: 14px; }
  .lp-cta .btn { width: 100%; }
  .lp .login-bg .orb-3 { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .cmd .caret { animation: none; }
}

/* ═══════════════ منوی رسپانسیو ═══════════════
 *
 * باز و بسته شدن با چک‌باکس است نه با جاوااسکریپت: اگر اسکریپت نرسد،
 * منوی موبایل باز نمی‌شود و صفحه بی‌راه می‌ماند. چک‌باکس *بیرون* از هدر
 * است تا با سلکتور همزاد (~) به منو برسد.
 */

.lp-links { display: flex; align-items: center; gap: 6px; flex: 1; min-width: 0; }
.lp-links > a:not(.btn) {
  color: var(--muted); font-size: .92rem; padding: 8px 12px;
  border-radius: 8px; white-space: nowrap;
}
.lp-links > a:not(.btn):hover {
  color: var(--text); background: var(--surface-2); text-decoration: none;
}
.navgap { flex: 1; }
.burger { display: none; }

/* لنگرها زیر هدرِ چسبان پنهان نشوند */
.lp-sec[id] { scroll-margin-top: 74px; }

@media (max-width: 900px) {
  .lp-navin { flex-wrap: wrap; }
  .burger {
    display: inline-flex; flex-direction: column; align-items: center;
    justify-content: center; gap: 4px;
    width: 40px; height: 36px; margin-inline-start: auto;
    border: 1px solid var(--border); border-radius: 9px;
    background: var(--surface); cursor: pointer;
  }
  .burger span {
    display: block; width: 17px; height: 2px; border-radius: 2px;
    background: var(--text); transition: transform .18s ease, opacity .18s ease;
  }
  .navchk:checked ~ .lp-nav .burger span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
  .navchk:checked ~ .lp-nav .burger span:nth-child(2) { opacity: 0; }
  .navchk:checked ~ .lp-nav .burger span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

  .lp-links {
    display: none; flex: 0 0 100%; flex-direction: column;
    align-items: stretch; gap: 2px; padding: 4px 0 10px;
  }
  .navchk:checked ~ .lp-nav .lp-links { display: flex; }
  .lp-links > a:not(.btn) { padding: 11px 12px; font-size: 1rem; }
  .lp-links .btn { text-align: center; margin-top: 4px; }
  .navgap { display: none; }
}

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

.eyebrow {
  color: var(--accent); font-size: .82rem; font-weight: 600;
  letter-spacing: .01em; margin-bottom: 12px;
}

/* ═══════════════ سه مزیت ═══════════════ */

.hl {
  display: grid; gap: 2px;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}
.hlbox { padding: 4px 18px; }
.hlbox + .hlbox { border-inline-start: 1px solid var(--border); }
.hlbox h3 { margin: 0 0 5px; font-size: 1rem; font-weight: 600; }
.hlbox p { margin: 0; color: var(--muted); font-size: .89rem; }

@media (max-width: 700px) {
  .hlbox { padding: 12px 0; }
  .hlbox + .hlbox {
    border-inline-start: none; border-top: 1px solid var(--border);
  }
}

/* ═══════════════ بولت‌ها ═══════════════ */

.lp-points { list-style: none; margin: 0 0 4px; padding: 0; max-width: 66ch; }
.lp-points li {
  color: var(--muted); font-size: .95rem; line-height: 1.75;
  padding-inline-start: 18px; position: relative;
}
.lp-points li::before {
  content: ""; position: absolute; inset-inline-start: 2px; top: .72em;
  width: 5px; height: 5px; border-radius: 50%; background: var(--accent);
}
.lp-points strong, .lp-points b { color: var(--text); font-weight: 600; }

/* ═══════════════ شبکه‌ی امکانات ═══════════════ */

.fgrid {
  display: grid; gap: 1px; margin-top: 16px;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  background: var(--border); border: 1px solid var(--border);
  border-radius: var(--radius); overflow: hidden;
}
.fgrid > div {
  background: color-mix(in srgb, var(--surface) 74%, transparent);
  padding: 13px 15px; color: var(--muted); font-size: .87rem; line-height: 1.6;
}
.fgrid b { display: block; color: var(--text); font-weight: 600; font-size: .92rem; }

/* ═══════════════ جدول مقایسه ═══════════════ */

.cmp { width: 100%; min-width: 420px; border-collapse: collapse; font-size: .9rem; }
.cmp th {
  text-align: right; padding: 10px 12px; font-size: .8rem; font-weight: 500;
  color: var(--muted); border-bottom: 1px solid var(--border);
}
.cmp th:last-child { color: var(--accent); font-weight: 600; }
.cmp td { padding: 11px 12px; border-bottom: 1px solid var(--border); vertical-align: top; }
.cmp tr:last-child td { border-bottom: none; }
.cmp td:first-child { font-weight: 600; white-space: nowrap; }
.cmp td:nth-child(2) { color: var(--faint); }
.cmp td:last-child { color: var(--text); }

@media (max-width: 640px) {
  .cmp { min-width: 0; }
  .cmp thead { display: none; }
  .cmp tr { display: block; padding: 12px 0; border-bottom: 1px solid var(--border); }
  .cmp tr:last-child { border-bottom: none; }
  .cmp td { display: block; border: none; padding: 2px 0; }
  .cmp td:first-child { font-size: .95rem; margin-bottom: 4px; }
  .cmp td:not(:first-child)::before {
    content: attr(data-label) ": "; color: var(--faint); font-size: .78rem;
  }
}

/* ═══════════════ دعوت میانی ═══════════════ */

.ctabar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 14px;
  justify-content: space-between;
  padding: 20px 22px; border-radius: var(--radius);
  border: 1px solid var(--accent);
  background: color-mix(in srgb, var(--accent-bg) 60%, transparent);
}
.ctabar strong { display: block; font-size: 1.02rem; margin-bottom: 3px; }
.ctabar span { color: var(--muted); font-size: .89rem; }

/* ═══════════════ مناسب است / نیست ═══════════════ */

.fit { display: grid; grid-template-columns: 1fr 1fr; gap: 0; }
.fit > div { padding: 4px 18px; min-width: 0; }
.fit > div + div { border-inline-start: 1px solid var(--border); }
.fit h3 { margin: 0 0 10px; font-size: .95rem; font-weight: 600; }
.fit .yes h3 { color: var(--pos); }
.fit .no h3 { color: var(--faint); }
.fit ul { list-style: none; margin: 0; padding: 0; }
.fit li {
  font-size: .89rem; color: var(--muted); margin-bottom: 9px;
  padding-inline-start: 20px; position: relative; line-height: 1.6;
}
.fit li::before { position: absolute; inset-inline-start: 0; font-size: .82rem; }
.fit .yes li::before { content: "✓"; color: var(--pos); }
.fit .no li::before { content: "✕"; color: var(--faint); }

@media (max-width: 700px) {
  .fit { grid-template-columns: 1fr; }
  .fit > div + div {
    border-inline-start: none; border-top: 1px solid var(--border);
    padding-top: 16px; margin-top: 12px;
  }
}

/* ═══════════════ تعرفه ═══════════════ */

.price {
  display: flex; flex-wrap: wrap; align-items: center; gap: 18px;
  justify-content: space-between;
  padding: 20px 22px; border-radius: var(--radius);
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--surface) 70%, transparent);
}
.price .lp-points { margin: 0; }

/* ═══════════════ سوال‌های پرتکرار ═══════════════ */

.faq { border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.faq details { border-bottom: 1px solid var(--border); }
.faq details:last-child { border-bottom: none; }
.faq summary {
  cursor: pointer; padding: 14px 16px; font-weight: 600; font-size: .95rem;
  list-style: none; display: flex; align-items: center; gap: 10px;
  background: color-mix(in srgb, var(--surface) 62%, transparent);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::before {
  content: "+"; color: var(--accent); font-weight: 700; font-size: 1.05rem;
  width: 14px; flex: 0 0 auto;
}
.faq details[open] summary::before { content: "−"; }
.faq summary:hover { color: var(--accent); }
.faq p {
  margin: 0; padding: 2px 40px 16px 16px; color: var(--muted);
  font-size: .9rem; line-height: 1.8; max-width: 70ch;
}

/* ═══════════════ پایان ═══════════════ */

.lp-end { text-align: center; }
.lp-end .lp-lede { margin: 0 auto; }
.lp-end .lp-cta { margin-top: 20px; }


/* ─── نمونه‌ی گفت‌وگو با ربات ───
   شکلِ چت آشناست و بی هیچ توضیحی می‌گوید «این را آنجا می‌نویسی، این را
   جواب می‌گیری». تصویر نیست: متن است، پس روی هر اندازه‌ای می‌شکند و
   بایتی هم دانلود نمی‌شود. */
.chat { display: flex; flex-direction: column; gap: 9px; padding: 4px; }
.chat > div {
  max-width: 82%; padding: 9px 13px; border-radius: 14px;
  font-size: .88rem; line-height: 1.95;
}
.chat-you {
  align-self: flex-start; background: var(--accent); color: #fff;
  border-end-start-radius: 4px;
}
.chat-bot {
  align-self: flex-end; background: var(--surface-2);
  border: 1px solid var(--border); border-end-end-radius: 4px;
}
.chat .dim { color: var(--muted); font-size: .82rem; }

.lp-bot {
  font-weight: 700; background: var(--surface-2);
  border: 1px solid var(--border); border-radius: 9px;
  padding: 3px 10px; display: inline-block;
}