/* استایل پایهٔ سایت عمومی دنتیوال — قلم، دکمه، قهرمان، شبکه‌ها، صفحات فرود و بلوک‌های صفحه‌محور؛ توکن‌ها از dentival-tokens.css و قلم‌ها از fonts.css می‌آیند */

/* توکن‌های طراحی از dentival-tokens.css می‌آیند و پیش از این فایل بارگذاری می‌شوند */

/* هدر چسبان است، پس پرش لنگری باید به اندازهٔ ارتفاع هدر عقب بایستد تا تیتر مقصد زیر آن نیفتد؛ فقط فاصله، بدون اسکرول نرم */
html {
  scroll-padding-top: calc(var(--header-h) + var(--sp-4));
}

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

body.site-body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  color: var(--color-text);
  background: var(--color-page);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* اسکرول افقی فقط درونِ نوارهای کارت مجاز است؛ صفحه هیچ‌گاه کشیده نمی‌شود */
  overflow-x: hidden;
}

h1,
h2,
h3,
h4 {
  color: var(--color-text-strong);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-tight);
  font-weight: var(--fw-bold);
}

a {
  color: var(--color-brand);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-out);
}

a:hover {
  color: var(--color-brand-hover);
}

/* حالت فوکوس یکنواخت برای همهٔ عناصر تعاملی — الزام دسترس‌پذیری */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: var(--focus-ring-offset);
  border-radius: var(--radius-sm);
}

.container {
  width: min(var(--container), 100% - var(--gutter) * 2);
  margin: 0 auto;
}

.container-narrow {
  width: min(var(--container-narrow), 100% - var(--gutter) * 2);
  margin: 0 auto;
}

/* لایهٔ هدر و ناوبری به components/header.css منتقل شد (بارگذاری در layouts/marketing.ejs) */

/* ---------- دکمه‌ها: شعاع میانه، بدون فرم قرصی ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  padding: 0.6rem 1.15rem;
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  cursor: pointer;
  font-family: inherit;
  font-weight: var(--fw-medium);
  font-size: var(--fs-md);
  line-height: 1.5;
  transition: background var(--dur-fast) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out),
    color var(--dur-fast) var(--ease-out);
}

.btn-primary {
  background: var(--color-brand);
  border-color: var(--color-brand);
  color: var(--color-text-on-brand);
}

.btn-primary:hover {
  background: var(--color-brand-hover);
  border-color: var(--color-brand-hover);
  color: var(--color-text-on-brand);
}

.btn-primary:active {
  background: var(--color-brand-active);
}

.btn-outline {
  background: var(--color-surface);
  color: var(--color-brand-ink);
  border-color: var(--color-control-border);
}

.btn-outline:hover {
  background: var(--color-brand-subtle);
  border-color: var(--color-brand-border);
  color: var(--color-brand-ink);
}

.btn-ghost {
  background: transparent;
  color: var(--color-text);
  border-color: transparent;
}

.btn-ghost:hover {
  background: var(--color-surface-sunken);
  color: var(--color-text-strong);
}

.btn-lg {
  padding: 0.8rem 1.6rem;
  font-size: var(--fs-base);
}

.btn:disabled,
.btn[aria-disabled='true'] {
  opacity: 0.55;
  cursor: not-allowed;
}

/* ---------- قهرمان صفحه: سطح آرام با مرز پایین، بدون گرادیان سنگین ---------- */
.hero {
  padding: var(--section-y-lg) 0 var(--section-y);
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border-subtle);
}

.hero-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 2.5rem;
  align-items: center;
}

/* بخش قهرمان در تبلت و پایین‌تر تک‌ستونی می‌شود؛ قواعد کشوی موبایل و همبرگر پیش‌تر اینجا بودند و به components/header.css منتقل شدند */
@media (max-width: 980px) {
  .hero-grid {
    grid-template-columns: 1fr;
  }
}

.skip-link {
  position: absolute;
  top: -100px;
  right: var(--sp-4);
  background: var(--color-brand);
  color: var(--color-text-on-brand);
  padding: var(--sp-2) var(--sp-4);
  border-radius: var(--radius-md);
  z-index: var(--z-overlay);
}

.skip-link:focus {
  top: var(--sp-4);
}

.hero-kicker {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  color: var(--color-brand-ink);
  background: var(--color-brand-subtle);
  border: 1px solid var(--color-brand-border);
  font-weight: var(--fw-medium);
  font-size: var(--fs-xs);
  margin: 0 0 var(--sp-4);
  padding: var(--sp-1) var(--sp-3);
  border-radius: var(--radius-pill);
}

.hero-note {
  margin: var(--sp-4) 0 0;
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
}

.hero-sm {
  padding: var(--section-y) 0 var(--sp-4);
}

/* سطح فرورفتهٔ آرام برای تفکیک بخش‌ها — بدون گرادیان */
.section-muted {
  background: var(--color-surface-sunken);
  border-block: 1px solid var(--color-border-subtle);
}

.text-center {
  text-align: center;
}

.text-muted {
  color: var(--muted);
}

.text-danger {
  color: var(--color-danger-ink);
}

.pricing-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.25rem;
  align-items: stretch;
}

.pricing-grid-compact {
  max-width: 720px;
  margin: 0 auto;
}

.pricing-plan {
  position: relative;
  background: var(--color-surface);
  border-radius: var(--radius-xl);
  padding: var(--sp-6);
  box-shadow: var(--shadow-xs);
  border: 1px solid var(--color-border);
  display: flex;
  flex-direction: column;
}

/* حالت پیشنهادی با مرز پررنگ‌تر مشخص می‌شود، نه با سایهٔ سنگین */
.pricing-plan.featured {
  border-color: var(--color-brand);
  box-shadow: var(--shadow-sm);
}

.plan-badge {
  position: absolute;
  top: var(--sp-4);
  left: var(--sp-4);
  background: var(--color-brand-subtle);
  color: var(--color-brand-ink);
  border: 1px solid var(--color-brand-border);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-medium);
  padding: var(--sp-1) var(--sp-3);
  border-radius: var(--radius-pill);
}

.plan-name,
.pricing-plan h2,
.pricing-plan h3 {
  margin: 0 0 0.35rem;
  font-size: 1.25rem;
}

.plan-desc {
  color: var(--muted);
  font-size: 0.9rem;
  margin: 0 0 1rem;
  min-height: 2.5rem;
}

.plan-price-block {
  margin-bottom: 1rem;
}

.plan-price {
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--color-brand-ink);
  margin: 0;
  line-height: 1.2;
}

.plan-price-unit {
  margin: 0.15rem 0 0;
  color: var(--muted);
  font-size: 0.9rem;
}

.plan-yearly {
  margin: 0.35rem 0 0;
  font-size: 0.82rem;
  color: var(--muted);
}

.plan-features {
  list-style: none;
  padding: 0;
  margin: 0 0 1.25rem;
  flex: 1;
}

.plan-features li {
  padding: 0.35rem 0;
  font-size: 0.92rem;
  color: var(--text);
  display: flex;
  gap: 0.5rem;
  align-items: flex-start;
}

.plan-features i {
  color: var(--brand);
  margin-top: 0.2rem;
}

.plan-cta {
  width: 100%;
  margin-top: auto;
}

.trial-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  align-items: start;
}

@media (max-width: 768px) {
  .trial-grid {
    grid-template-columns: 1fr;
  }
}

.trial-summary {
  max-width: none;
}

.form-card-title {
  margin: 0 0 0.25rem;
  font-size: 1.15rem;
}

.form-card-sub {
  margin: 0 0 1.25rem;
  color: var(--muted);
  font-size: 0.9rem;
}

.form-hint {
  font-size: 0.82rem;
  color: var(--muted);
  margin: 0.75rem 0 0;
}

.faq-block {
  max-width: 760px;
  margin: 0 auto;
}

.faq-list {
  margin: 0;
}

/* هر پرسش یک کارت مستقل است تا فهرست، دیوارِ متن نشود */
.faq-item {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  margin-bottom: var(--sp-3);
  box-shadow: var(--shadow-xs);
  overflow: hidden;
  transition: border-color var(--dur-fast) var(--ease-out),
    box-shadow var(--dur-fast) var(--ease-out);
}

/* کارتِ باز برجسته می‌شود تا جای خواننده در فهرست گم نشود (§۲۱) */
.faq-item[open] {
  border-color: var(--color-brand-border);
  box-shadow: var(--shadow-sm);
}

.faq-item[open] .faq-num {
  color: var(--color-brand-ink);
  background: var(--color-brand-subtle);
  border-color: var(--color-brand-border);
}

/* کل سطر پرسش هدف کلیک است، پس ارتفاع لمسی کافی می‌گیرد */
.faq-question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  min-block-size: 3.25rem;
  padding: var(--sp-4) var(--sp-5);
  font-weight: 700;
  cursor: pointer;
  list-style: none;
}

/* مثلث پیش‌فرض مرورگر در RTL جهت اشتباه می‌گیرد، پس با آیکن خودمان جایگزین می‌شود */
.faq-question::-webkit-details-marker {
  display: none;
}

.faq-question::marker {
  content: '';
}

.faq-question:focus-visible {
  outline: 2px solid var(--color-brand);
  outline-offset: -2px;
}

/* چیدمانِ پرسش: شماره در یک نشانِ دایره‌ای و متن کنارش، آیکن در سمت مخالف */
.faq-q {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  min-inline-size: 0;
}

.faq-num {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  inline-size: 2rem;
  block-size: 2rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  background: var(--color-surface-sunken);
  color: var(--color-text-muted);
  font-size: var(--fs-sm);
  font-variant-numeric: tabular-nums;
  transition: color var(--dur-fast) var(--ease-out),
    background var(--dur-fast) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out);
}

.faq-q-text {
  min-inline-size: 0;
}

/* آیکن «+» حالت باز/بسته را نشان می‌دهد؛ در پرسشِ باز ۴۵ درجه می‌چرخد و «×» می‌شود */
.faq-caret {
  flex: 0 0 auto;
  font-size: 0.85rem;
  color: var(--muted);
  transition: transform var(--dur-base) var(--ease-out),
    color var(--dur-fast) var(--ease-out);
}

.faq-item[open] .faq-caret {
  transform: rotate(45deg);
  color: var(--color-brand-ink);
}

/* بازوبسته‌شدنِ نرم با transition روی ردیف شبکه (۰fr → 1fr)؛ بدون max-heightِ حدس‌خورده، هم باز و هم بسته شدن متحرک است (§۲۱) */
.faq-answer {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--dur-slow) var(--ease-in-out);
}

/* پرسشِ باز باید کل پاسخ را نشان دهد؛ نبودِ این قاعده باعث می‌شد باکس‌ها بسته/کوتاه بمانند و محتوا بریده شود */
.faq-item[open] .faq-answer {
  grid-template-rows: 1fr;
}

.faq-answer-inner {
  overflow: hidden;
  min-block-size: 0;
  padding: 0 var(--sp-5) var(--sp-4);
  color: var(--muted);
  font-size: 0.95rem;
  line-height: 1.9;
}

/* پاسخ می‌تواند متن ساده یا HTML از CMS باشد؛ حاشیهٔ آغاز/پایانِ عناصرِ داخل آن یکدست می‌شود */
.faq-answer-inner> :first-child {
  margin-block-start: 0;
}

.faq-answer-inner> :last-child {
  margin-block-end: 0;
}

@media (prefers-reduced-motion: reduce) {

  .faq-caret,
  .faq-num,
  .faq-item,
  .faq-answer {
    transition: none;
  }
}

/* بندِ پایانی قابی گوشه‌گرد داخلِ ستون است، نه نواری تا لبهٔ صفحه */
.cta-band {
  padding: var(--section-y) 0;
}

.cta-panel {
  background: var(--color-surface-inverse);
  color: var(--color-text-inverse);
  border-radius: var(--radius-2xl);
  padding: var(--sp-8) var(--sp-6);
}

/* موبایل ستونیِ وسط‌چین، از تبلت به بالا دو سرِ یک ردیف */
.cta-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--sp-6);
  flex-wrap: wrap;
}

.cta-band .hero-actions {
  justify-content: center;
}

@media (min-width: 768px) {
  .cta-panel {
    padding: var(--sp-12);
  }

  .cta-inner {
    flex-direction: row;
    justify-content: space-between;
    text-align: start;
  }

  .cta-band .hero-actions {
    justify-content: flex-start;
  }
}

.cta-band h2 {
  margin: 0 0 var(--sp-2);
  color: var(--color-text-inverse);
}

.cta-band p {
  margin: 0;
  color: var(--color-inverse-text-muted);
}

/* تراشهٔ روشن روی نوار تیره — با توکن inverse تا در دارک تیره‌روی‌تیره نشود */
.cta-band .btn-primary {
  background: var(--color-inverse-cta);
  border-color: var(--color-inverse-cta);
  color: var(--color-inverse-cta-ink);
}

.cta-band .btn-primary:hover {
  background: var(--color-inverse-cta-hover);
  border-color: var(--color-inverse-cta-hover);
  color: var(--color-inverse-cta-ink);
}

.cta-band .btn-outline {
  background: transparent;
  border-color: var(--color-inverse-border);
  color: var(--color-text-inverse);
}

.cta-band .btn-outline:hover {
  background: var(--color-inverse-surface);
  border-color: var(--color-inverse-border-strong);
  color: var(--color-text-inverse);
}

.nav-btn {
  padding: var(--sp-2) var(--sp-4) !important;
}

.hero h1 {
  font-size: var(--fs-h1);
  line-height: var(--lh-tight);
  margin: 0 0 var(--sp-4);
}

.hero p.lead {
  color: var(--color-text-muted);
  font-size: var(--fs-lg);
  line-height: var(--lh-relaxed);
  margin-bottom: var(--sp-6);
  max-width: 46ch;
}

.hero-actions {
  display: flex;
  gap: var(--sp-3);
  flex-wrap: wrap;
}

/* کارت تأکیدی قهرمان: سطح تیره یکدست به‌جای گرادیان */
.hero-card {
  background: var(--color-surface-inverse);
  color: var(--color-text-inverse);
  border-radius: var(--radius-xl);
  padding: var(--sp-8);
}

.hero-card ul {
  list-style: none;
  padding: 0;
  margin: 1rem 0 0;
}

.hero-card li {
  padding: 0.35rem 0;
  display: flex;
  gap: 0.5rem;
  align-items: flex-start;
}

.section {
  padding: var(--section-y) 0;
}

.section-title {
  text-align: center;
  margin-bottom: var(--sp-8);
  max-width: 58ch;
  margin-inline: auto;
}

.section-title h2 {
  margin: 0 0 var(--sp-2);
  font-size: var(--fs-h2);
}

/* ابرو از این قاعده کنار گذاشته می‌شود چون وزنِ گزینشگرش بالاتر بود و قلمِ ابرو را می‌پوشاند */
.section-title p:not(.section-eyebrow) {
  color: var(--color-text-muted);
  margin: 0;
}

/* ابروی مشترکِ سرِ بخش‌ها؛ همان قلمِ .hero-kicker تا نسخهٔ تکراری پنجم ساخته نشود */
.section-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  margin: 0 0 var(--sp-3);
  padding: var(--sp-1) var(--sp-3);
  border: 1px solid var(--color-brand-border);
  border-radius: var(--radius-pill);
  background: var(--color-brand-subtle);
  color: var(--color-brand-ink);
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
}

/* از تبلت به بالا فاصلهٔ سر تا محتوا بازتر می‌شود */
@media (min-width: 768px) {
  .section-title {
    margin-bottom: var(--sp-10);
  }
}

.features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.25rem;
}

.feature-card {
  background: var(--white);
  border-radius: var(--radius);
  padding: 1.5rem;
  box-shadow: var(--shadow);
}

.feature-card i {
  color: var(--brand);
  font-size: 1.5rem;
  margin-bottom: 0.75rem;
}

.feature-card h2,
.feature-card h3 {
  margin: 0 0 0.5rem;
  font-size: 1.05rem;
}

.feature-card p {
  margin: 0;
  color: var(--muted);
  font-size: 0.92rem;
}

.pricing-card {
  max-width: 420px;
  margin: 0 auto;
  background: var(--white);
  border-radius: var(--radius);
  padding: 2rem;
  box-shadow: var(--shadow);
  text-align: center;
  border: 2px solid var(--color-brand-border);
}

.pricing-card .price {
  font-size: 2rem;
  font-weight: 700;
  color: var(--color-brand-ink);
}

.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
}

@media (max-width: 768px) {
  .contact-grid {
    grid-template-columns: 1fr;
  }
}

/* کارت فرمِ تک‌ستونه و وسط‌چین؛ جانشین style درون‌خطی صفحه‌ها */
.form-card-narrow {
  max-width: 560px;
  margin-inline: auto;
}

.form-card {
  background: var(--white);
  border-radius: var(--radius);
  padding: 1.75rem;
  box-shadow: var(--shadow);
}

.form-group {
  margin-bottom: 1rem;
}

.form-group label {
  display: block;
  margin-bottom: 0.35rem;
  font-weight: 500;
  font-size: 0.9rem;
}

.form-control {
  width: 100%;
  padding: 0.65rem 0.85rem;
  background: var(--color-surface);
  color: var(--color-text);
  border: 1px solid var(--color-control-border);
  border-radius: 8px;
  font-family: inherit;
  font-size: 0.95rem;
}

.form-control:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: var(--focus-ring);
}

.alert {
  padding: 0.75rem 1rem;
  border-radius: 8px;
  margin-bottom: 1rem;
  font-size: 0.9rem;
}

.alert-success {
  background: var(--color-success-surface);
  color: var(--color-success-ink);
  border: 1px solid var(--color-success-border);
}

.alert-danger {
  background: var(--color-danger-surface);
  color: var(--color-danger-ink);
  border: 1px solid var(--color-danger-border);
}

.d-none {
  display: none !important;
}

/* اعتبارسنجی فرم‌ها */
.form-control.is-invalid {
  border-color: var(--color-danger);
}

.form-control.is-invalid:focus {
  border-color: var(--color-danger);
  box-shadow: 0 0 0 3px rgba(220, 53, 69, 0.25);
}

.form-group.has-error .form-control,
.form-field.has-error input,
.form-field.has-error textarea,
.lp-field.has-error input,
.lp-field.has-error textarea {
  border-color: var(--color-danger);
}

.form-group.has-error .form-control:focus,
.form-field.has-error input:focus,
.form-field.has-error textarea:focus,
.lp-field.has-error input:focus,
.lp-field.has-error textarea:focus {
  border-color: var(--color-danger);
  box-shadow: 0 0 0 3px rgba(220, 53, 69, 0.25);
}

.field-error {
  display: block;
  margin-top: 0.2rem;
  font-size: 0.78rem;
  color: var(--color-danger-ink);
  line-height: 1.4;
}

/* لایهٔ فوتر و .footer-meta به components/footer.css منتقل شدند */

.about-block {
  background: var(--white);
  border-radius: var(--radius);
  padding: 2rem;
  box-shadow: var(--shadow);
}

.btn-sm {
  padding: 0.45rem 0.9rem;
  font-size: 0.85rem;
}

.media-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.25rem;
}

.media-card {
  background: var(--white);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  border: 1px solid var(--color-border);
  display: flex;
  flex-direction: column;
}

.media-thumb {
  position: relative;
  background: var(--color-surface-inverse);
  color: var(--color-text-inverse);
  min-height: 140px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.5rem;
}

.catalog-thumb {
  background: var(--color-surface-inverse);
}

.media-duration {
  position: absolute;
  bottom: 0.75rem;
  left: 0.75rem;
  background: var(--color-overlay-media);
  color: var(--color-text-inverse);
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0.2rem 0.55rem;
  border-radius: 6px;
}

.media-body {
  padding: 1.25rem 1.35rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  flex: 1;
}

.media-body h2 {
  margin: 0;
  font-size: 1.05rem;
  line-height: 1.45;
}

.media-body p {
  margin: 0;
  color: var(--muted);
  font-size: 0.9rem;
  flex: 1;
}

.media-tag {
  display: inline-block;
  align-self: flex-start;
  background: var(--color-brand-subtle);
  color: var(--color-brand-ink);
  font-size: 0.75rem;
  font-weight: 700;
  padding: 0.15rem 0.55rem;
  border-radius: 999px;
}

.offices-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.25rem;
}

.office-card {
  background: var(--white);
  border-radius: var(--radius);
  padding: 1.5rem;
  box-shadow: var(--shadow);
  border: 1px solid var(--color-border);
}

.office-card h3 {
  margin: 0 0 0.25rem;
  font-size: 1.05rem;
}

.office-city {
  color: var(--color-brand-ink);
  font-weight: 600;
  font-size: 0.9rem;
  margin: 0 0 0.75rem;
}

.office-card p {
  margin: 0.4rem 0;
  font-size: 0.92rem;
}

/* فاصلهٔ آیکون با خصیصهٔ منطقی نوشته می‌شود نه left، تا قاعده به جهت صفحه گره نخورد */
.office-card i {
  color: var(--brand);
  width: 1.1rem;
  margin-inline-end: 0.35rem;
}

.checklist {
  list-style: none;
  padding: 0;
  margin: 1rem 0 0;
}

.checklist li {
  display: flex;
  gap: 0.55rem;
  align-items: flex-start;
  padding: 0.4rem 0;
  font-size: 0.95rem;
}

.checklist i {
  color: var(--brand);
  margin-top: 0.25rem;
}

/* فضای پس‌زمینهٔ قهرمان */
.hero {
  position: relative;
  overflow: hidden;
}

.hero-bg {
  position: absolute;
  inset: 0;
  background: var(--color-surface);
  z-index: 0;
}

.hero-home .hero-bg {
  background: var(--color-surface);
}

.hero .container,
.hero-inner,
.hero-grid {
  position: relative;
  z-index: 1;
}

.hero-inner {
  text-align: center;
  max-width: 720px;
  margin: 0 auto;
  padding: 2.5rem 0 1.5rem;
}

.hero-home .hero-grid {
  grid-template-columns: 1.05fr 0.95fr;
  max-width: none;
  gap: 2.5rem;
  align-items: center;
}

.hero-home .hero-copy {
  text-align: right;
}

.hero-home .hero-actions {
  justify-content: flex-start;
}

.hero-home .hero-note {
  text-align: right;
}

@media (max-width: 900px) {
  .hero-home .hero-grid {
    grid-template-columns: 1fr;
  }

  .hero-home .hero-copy {
    text-align: center;
  }

  .hero-home .hero-actions {
    justify-content: center;
  }

  .hero-home .hero-trust-row {
    justify-content: center;
  }
}

.plan-image-wrap {
  margin: -0.5rem -0.5rem 1rem;
  border-radius: 10px 10px 0 0;
  overflow: hidden;
  aspect-ratio: 16/9;
  background: var(--color-surface-sunken);
}

.plan-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.plan-detailed {
  font-size: 0.9rem;
  color: var(--muted);
  line-height: 1.65;
  margin: 0 0 1rem;
}

.compare-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
}

.compare-card {
  padding: 1.35rem;
  border-radius: var(--radius);
  background: var(--white);
  border: 1px solid var(--color-border);
}

.compare-card h3 {
  margin: 0 0 0.5rem;
  font-size: 1.05rem;
}

.compare-card p {
  margin: 0 0 0.75rem;
  font-size: 0.92rem;
  color: var(--muted);
}

.compare-card a {
  font-weight: 600;
  font-size: 0.9rem;
}

.lead-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.85rem;
  margin-bottom: 1rem;
}

.form-field-full {
  grid-column: 1 / -1;
}

.form-field label {
  display: block;
  font-size: 0.85rem;
  font-weight: 500;
  margin-bottom: 0.3rem;
  color: var(--text);
}

.form-field input,
.form-field textarea,
.form-field select {
  width: 100%;
  padding: 0.55rem 0.75rem;
  border: 1px solid var(--color-control-border);
  border-radius: 8px;
  font-family: inherit;
  font-size: 0.95rem;
}

/* راهنمای کوتاهِ زیر فیلد؛ پیش‌تر بی‌استایل بود و هم‌وزنِ متن اصلی دیده می‌شد */
.lead-form-hint {
  display: block;
  margin-top: 0.25rem;
  font-size: var(--fs-2xs);
  color: var(--color-text-muted);
  line-height: 1.6;
}

.lead-form-msg {
  font-size: var(--fs-sm);
  margin-bottom: var(--sp-3);
}

/* پیام درون‌فرم: رنگ از توکن وضعیت می‌آید، نه استایل inline در جاوااسکریپت */
.lead-form-msg.is-success {
  color: var(--color-success-ink);
}

.lead-form-msg.is-error {
  color: var(--color-danger-ink);
}

.reveal {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out);
}

.reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* بی جاوااسکریپت کلاس is-visible افزوده نمی‌شود و بخش‌ها نامرئی می‌ماندند */
@media (scripting: none) {
  .reveal {
    opacity: 1;
    transform: none;
  }
}

@media (max-width: 900px) {
  .compare-grid {
    grid-template-columns: 1fr;
  }

  .lead-form-grid {
    grid-template-columns: 1fr;
  }
}

/* ورود ملایم عناصر قهرمان */
@keyframes siteFadeUp {
  from {
    opacity: 0;
    transform: translateY(12px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.hero h1,
.hero .lead,
.hero .hero-actions {
  animation: siteFadeUp 0.55s ease both;
}

.hero h1 {
  animation-delay: 0.08s;
}

.hero .lead {
  animation-delay: 0.16s;
}

.hero .hero-actions {
  animation-delay: 0.24s;
}

.media-card,
.office-card,
.pricing-plan {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.media-card:hover,
.office-card:hover,
.pricing-plan:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lg);
}

/* نوار اعتماد و نظرات مشتریان */
.trust-band {
  padding-bottom: 1.5rem;
}

.trust-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 1rem;
}

.trust-stat {
  background: var(--white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 1.5rem 1rem;
  text-align: center;
  box-shadow: var(--shadow);
}

.trust-stat-value {
  display: block;
  font-size: clamp(1.5rem, 3vw, 2.1rem);
  font-weight: 700;
  color: var(--color-brand-ink);
  line-height: 1.2;
}

.trust-stat-label {
  display: block;
  margin-top: 0.35rem;
  font-size: 0.88rem;
  color: var(--muted);
}

.testimonial-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.25rem;
}

.testimonial-card {
  background: var(--white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 1.5rem;
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.testimonial-stars {
  color: var(--color-rating);
  font-size: 0.85rem;
  display: flex;
  gap: 0.15rem;
}

.testimonial-card blockquote {
  margin: 0;
  font-size: 0.95rem;
  color: var(--text);
  line-height: 1.85;
  flex: 1;
}

.testimonial-card figcaption {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  border-top: 1px solid var(--color-surface-sunken);
  padding-top: 0.85rem;
}

.testimonial-card figcaption strong {
  display: block;
  font-size: 0.92rem;
}

.testimonial-card figcaption small {
  color: var(--muted);
  font-size: 0.82rem;
}

.testimonial-avatar {
  width: 2.6rem;
  height: 2.6rem;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--color-brand-subtle);
  color: var(--color-brand-ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 1.1rem;
}

.testimonial-card {
  transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}

.testimonial-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

@media (prefers-reduced-motion: reduce) {

  .hero h1,
  .hero .lead,
  .hero .hero-actions,
  .media-card,
  .office-card,
  .pricing-plan,
  .testimonial-card,
  .reveal {
    animation: none;
    transition: none;
    opacity: 1;
    transform: none;
  }

  .media-card:hover,
  .office-card:hover,
  .pricing-plan:hover,
  .testimonial-card:hover {
    transform: none;
  }
}

/* تصویر قهرمان صفحهٔ اصلی */
.hero-trust-row {
  list-style: none;
  padding: 0;
  margin: 1.25rem 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  font-size: 0.85rem;
  color: var(--muted);
}

.hero-trust-row li {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.hero-trust-row li::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--brand);
  flex-shrink: 0;
}

.hero-visual {
  position: relative;
}

/* تصویر قهرمان: قاب آرام با سایهٔ بسیار ملایم طبق جهت طراحی */
.hero-photo {
  margin: 0;
  border-radius: var(--radius-xl);
  overflow: hidden;
  border: 1px solid var(--color-border-subtle);
  box-shadow: var(--shadow-md);
  position: relative;
  background: var(--color-surface-inverse);
}

.hero-photo img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4/3;
  object-fit: cover;
}

.hero-photo-caption {
  position: absolute;
  bottom: 0;
  right: 0;
  left: 0;
  padding: var(--sp-4) var(--sp-5);
  background: var(--color-overlay-strong);
  color: var(--color-text-inverse);
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.hero-photo-caption strong {
  font-size: 0.98rem;
}

.hero-photo-caption span {
  font-size: 0.82rem;
  opacity: 0.85;
}

.feature-icon {
  width: 2.75rem;
  height: 2.75rem;
  border-radius: var(--radius-md);
  background: var(--color-brand-subtle);
  color: var(--color-brand-ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.15rem;
  margin-bottom: var(--sp-3);
}

.features-grid-rich .feature-card {
  border: 1px solid var(--color-border);
  transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out);
}

/* میکرو-تعامل کوتاه: جابه‌جایی کم و سایهٔ ملایم، بدون افکت اغراق‌شده */
.features-grid-rich .feature-card:hover {
  transform: translateY(-2px);
  border-color: var(--color-brand-border);
  box-shadow: var(--shadow-md);
}

.features-grid-rich .feature-card i {
  margin: 0;
}

.pricing-grid-home {
  grid-template-columns: repeat(3, 1fr);
  max-width: none;
}

@media (max-width: 960px) {
  .pricing-grid-home {
    grid-template-columns: 1fr;
  }
}

.plans-more {
  margin-top: 1.75rem;
}

/* فرم‌های فشرده */
.section-tight {
  padding: 2rem 0 2.5rem;
}

.form-card-compact {
  padding: 1.25rem 1.35rem;
  max-width: 480px;
}

.form-compact .form-group {
  margin-bottom: 0.7rem;
}

.form-compact .form-control {
  padding: 0.5rem 0.75rem;
  font-size: 0.9rem;
}

/* دکمهٔ ارسال فرم‌های فشرده تمام‌عرض است؛ پیش‌تر با style درون‌خطی روی خودِ صفحه نوشته می‌شد */
.form-compact button[type='submit'] {
  width: 100%;
}

.form-row-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.65rem;
}

.opt {
  color: var(--muted);
  font-weight: 400;
  font-size: 0.8rem;
}

.contact-minimal {
  display: grid;
  grid-template-columns: minmax(200px, 280px) minmax(280px, 440px);
  gap: 1.5rem;
  align-items: start;
  justify-content: center;
}

.contact-side {
  background: var(--white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 1.25rem;
}

.contact-side h2 {
  margin: 0 0 0.45rem;
  font-size: 1.1rem;
}

.contact-side-intro {
  color: var(--muted);
  font-size: 0.86rem !important;
  line-height: 1.8;
}

.contact-side p {
  margin: 0 0 0.75rem;
  font-size: 0.92rem;
  display: flex;
  gap: 0.5rem;
  align-items: flex-start;
}

.contact-side i {
  color: var(--brand);
  margin-top: 0.2rem;
}

.contact-side-note {
  color: var(--muted);
  font-size: 0.82rem !important;
}

/* دکمهٔ شروع رایگانِ پایینِ کارت اطلاعات تماس؛ بالای فرمِ هم‌عرض خودش قرار می‌گیرد */
.contact-side-trial {
  width: 100%;
  margin-top: 0.9rem;
  justify-content: center;
}

/* برچسب فرعی هر راه تماس (نقش شماره یا کد پستی) زیر خودش می‌نشیند */
.contact-side-sub {
  display: block;
  color: var(--muted);
  font-size: 0.82rem;
}

.consult-minimal {
  max-width: 520px;
  margin: 0 auto;
}

.consult-form-wrap {
  max-width: none;
}

/* صفحهٔ درباره */
.about-hero-inner,
.trial-hero-inner {
  text-align: center;
  max-width: 680px;
  margin: 0 auto;
  padding: 1.5rem 0 0.5rem;
  position: relative;
  z-index: 1;
}

/* هیروِ صفحهٔ آزمایشی وسط‌چین است، پس دکمه‌هایش هم وسط می‌نشینند */
.trial-hero-inner .hero-actions {
  justify-content: center;
}

.about-layout {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 2rem;
  align-items: center;
}

.about-story h2 {
  margin: 0 0 0.75rem;
  font-size: 1.35rem;
}

.about-story p {
  color: var(--muted);
  margin: 0 0 1rem;
}

.about-visual {
  margin: 0;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: var(--shadow);
}

.about-visual img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 7/5;
  object-fit: cover;
}

.about-pillars {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.15rem;
}

.about-pillar {
  background: var(--white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 1.35rem;
}

.about-pillar h3 {
  margin: 0 0 0.5rem;
  font-size: 1.05rem;
  color: var(--color-brand-ink);
}

.about-pillar p {
  margin: 0;
  color: var(--muted);
  font-size: 0.92rem;
}

/* چشم‌انداز و مسیر آیندهٔ صفحهٔ درباره؛ متنِ باز با فهرستِ جهت‌گیری‌ها */
.about-vision-lead {
  max-width: 62ch;
  margin: 0 auto 0.75rem;
  text-align: center;
  color: var(--color-text-muted, var(--muted));
  line-height: 1.9;
}

.about-vision-list {
  max-width: 560px;
  margin: 0 auto;
}

.about-vision-list li {
  font-size: 0.92rem;
}

@media (max-width: 800px) {

  .about-layout,
  .about-pillars,
  .contact-minimal,
  .form-row-2 {
    grid-template-columns: 1fr;
  }

  .form-card-compact {
    max-width: none;
  }
}

/* حالت آکاردئونی پرسش‌های متداول */
.faq-item {
  border: 1px solid var(--color-border);
  cursor: default;
}

.faq-item dt {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.faq-item dt::before {
  content: '?';
  flex-shrink: 0;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  background: var(--color-brand-subtle);
  color: var(--color-brand-ink);
  font-size: 0.75rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* صفحات فرود (Landing Pages) — رنگ تاکیدی هر صفحه از دیتابیس روی --lp-accent می‌نشیند و همهٔ بلوک‌ها از همان می‌گیرند */
.lp-root {
  --lp-accent-soft: color-mix(in srgb, var(--lp-accent) 12%, var(--color-surface));
  --lp-accent-ink: color-mix(in srgb, var(--lp-accent) 80%, var(--color-text-strong));
}

.lp-section {
  padding: 3.5rem 0;
}

.lp-section:nth-of-type(even) {
  background: var(--color-surface-sunken);
}

.lp-narrow {
  width: min(760px, 92%);
}

.lp-align-center {
  text-align: center;
}

.lp-section-title {
  font-size: clamp(1.4rem, 1.1rem + 1.2vw, 2rem);
  font-weight: 700;
  color: var(--ink);
  margin: 0 0 0.75rem;
}

.lp-section-sub {
  color: var(--muted);
  margin: 0 0 1.75rem;
  line-height: 1.9;
}

.lp-section-actions {
  margin-top: 1.75rem;
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
}

/* دکمه‌ها */
.lp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 0.7rem 1.4rem;
  border-radius: 10px;
  border: 1.5px solid transparent;
  font-weight: 600;
  font-size: 0.95rem;
  cursor: pointer;
  transition: filter 0.15s ease, background 0.15s ease;
}

.lp-btn-primary {
  background: var(--lp-accent);
  color: var(--color-text-inverse);
}

.lp-btn-primary:hover {
  color: var(--color-text-inverse);
  filter: brightness(0.92);
}

.lp-btn-ghost {
  background: transparent;
  color: var(--lp-accent);
  border-color: var(--lp-accent);
}

.lp-btn-ghost:hover {
  background: var(--lp-accent-soft);
}

.lp-badge {
  display: inline-block;
  padding: 0.3rem 0.8rem;
  border-radius: 999px;
  background: var(--lp-accent-soft);
  color: var(--lp-accent-ink);
  font-size: 0.8rem;
  font-weight: 600;
  margin-bottom: 0.9rem;
}

/* هیرو */
.lp-hero {
  padding: var(--section-y-lg) 0;
  background: var(--lp-accent-soft);
}

.lp-hero-inner {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 2.5rem;
  align-items: center;
}

.lp-hero-title {
  font-size: clamp(1.7rem, 1.2rem + 2vw, 2.6rem);
  font-weight: 800;
  line-height: 1.35;
  color: var(--ink);
  margin: 0 0 1rem;
}

.lp-hero-sub {
  font-size: 1.05rem;
  color: var(--muted);
  line-height: 2;
  margin: 0 0 1.25rem;
}

.lp-hero-body {
  color: var(--muted);
  line-height: 2;
  margin-bottom: 1.25rem;
}

.lp-hero-bullets,
.lp-leadform-bullets {
  list-style: none;
  padding: 0;
  margin: 0 0 1.5rem;
  display: grid;
  gap: 0.6rem;
}

.lp-hero-bullets li,
.lp-leadform-bullets li {
  position: relative;
  padding-inline-start: 1.6rem;
  color: var(--ink);
  line-height: 1.9;
}

.lp-hero-bullets li::before,
.lp-leadform-bullets li::before {
  content: '✓';
  position: absolute;
  inset-inline-start: 0;
  color: var(--lp-accent);
  font-weight: 700;
}

.lp-hero-actions {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.lp-hero-image {
  width: 100%;
  height: auto;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.lp-hero-form-card,
.lp-leadform-card {
  background: var(--white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 1.75rem;
  box-shadow: var(--shadow);
}

.lp-hero-form-title {
  font-size: 1.15rem;
  font-weight: 700;
  margin: 0 0 0.35rem;
  color: var(--ink);
}

.lp-hero-form-note {
  color: var(--muted);
  font-size: 0.85rem;
  margin: 0 0 1.25rem;
}

/* فرم لید */
.lp-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.9rem;
}

.lp-field {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.lp-field-full {
  grid-column: 1 / -1;
}

.lp-field label {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--ink);
}

.lp-field input,
.lp-field textarea {
  width: 100%;
  padding: 0.65rem 0.8rem;
  border: 1px solid var(--color-control-border);
  border-radius: 10px;
  font: inherit;
  background: var(--white);
  color: var(--ink);
}

.lp-field input:focus,
.lp-field textarea:focus {
  outline: none;
  border-color: var(--lp-accent);
  box-shadow: 0 0 0 3px var(--lp-accent-soft);
}

/* فیلد تلهٔ ربات باید برای کاربر واقعی و صفحه‌خوان نامرئی باشد */
.lp-honeypot {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.lp-form .lp-btn {
  margin-top: 1.1rem;
  width: 100%;
}

.lp-form-msg {
  margin: 1rem 0 0;
  font-size: 0.9rem;
  line-height: 1.8;
}

.lp-form-msg.is-success {
  color: var(--lp-accent-ink);
}

.lp-form-msg.is-error {
  color: var(--color-danger-ink);
}

.lp-form-note {
  margin: 0.85rem 0 0;
  color: var(--muted);
  font-size: 0.8rem;
  line-height: 1.8;
}

/* ویژگی‌ها */
.lp-features-grid {
  display: grid;
  gap: 1.25rem;
}

.lp-cols-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.lp-cols-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.lp-cols-4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.lp-feature-card {
  background: var(--white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 1.5rem;
  box-shadow: var(--shadow);
}

.lp-feature-icon {
  font-size: 1.6rem;
  line-height: 1;
  display: inline-block;
  margin-bottom: 0.75rem;
}

.lp-feature-icon-img {
  width: 2.5rem;
  height: 2.5rem;
  object-fit: contain;
  margin-bottom: 0.75rem;
}

.lp-feature-title {
  font-size: 1.05rem;
  font-weight: 700;
  margin: 0 0 0.5rem;
  color: var(--ink);
}

.lp-feature-text {
  margin: 0;
  color: var(--muted);
  line-height: 1.9;
}

/* ویدیو */
.lp-video-frame {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  background: var(--color-surface-inverse);
  aspect-ratio: 16 / 9;
}

.lp-video-embed,
.lp-video-player {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

.lp-video-caption {
  margin: 1rem 0 0;
  color: var(--muted);
  font-size: 0.9rem;
  text-align: center;
}

/* نظرات */
.lp-testimonials-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.25rem;
}

.lp-testimonial-card {
  margin: 0;
  background: var(--white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 1.5rem;
  box-shadow: var(--shadow);
}

.lp-rating {
  color: var(--color-rating);
  letter-spacing: 0.1em;
  margin-bottom: 0.6rem;
  /* ستاره‌ها کوچک و فقط‌خواندنی‌اند؛ متنِ امتیاز در aria-label می‌آید */
  font-size: var(--fs-sm);
}

.lp-testimonial-text {
  margin: 0 0 1.1rem;
  padding: 0;
  border: 0;
  color: var(--ink);
  line-height: 2;
}

.lp-testimonial-meta {
  display: flex;
  align-items: center;
  gap: 0.7rem;
}

.lp-testimonial-avatar {
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  object-fit: cover;
}

.lp-testimonial-names {
  display: flex;
  flex-direction: column;
}

.lp-testimonial-names small {
  color: var(--muted);
  font-size: 0.8rem;
}

/* پلن‌ها */
.lp-pricing-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
  align-items: stretch;
}

@media (min-width: 700px) {
  .lp-pricing-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.5rem;
  }
}

@media (min-width: 1024px) {
  .lp-pricing-grid {
    gap: 2rem;
  }
}

.lp-plan-card {
  position: relative;
  background: var(--white);
  border: 1px solid var(--color-border);
  border-radius: 16px;
  padding: 2rem 1.75rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.lp-plan-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.08);
}

.lp-plan-highlight {
  border-color: var(--lp-accent);
  box-shadow: 0 4px 16px var(--lp-accent-soft);
}

.lp-plan-highlight:hover {
  box-shadow: 0 16px 32px var(--lp-accent-soft);
}

.lp-plan-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
}

.lp-plan-title {
  font-size: 1.15rem;
  font-weight: 700;
  margin: 0;
  color: var(--ink);
  line-height: 1.3;
}

.lp-plan-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.25rem 0.65rem;
  background: var(--lp-accent);
  color: var(--white);
  font-size: 0.7rem;
  font-weight: 700;
  border-radius: 20px;
  white-space: nowrap;
  letter-spacing: 0.02em;
}

.lp-plan-price {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--color-border-subtle);
}

.lp-plan-amount {
  font-size: 2.2rem;
  font-weight: 800;
  color: var(--lp-accent-ink);
  line-height: 1;
  letter-spacing: -0.02em;
}

.lp-plan-amount--lg {
  font-size: 1.5rem;
}

.lp-plan-unit {
  color: var(--muted);
  font-size: 0.85rem;
  font-weight: 500;
}

.lp-plan-features {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 0.75rem;
  flex: 1;
}

.lp-plan-features li {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  color: var(--text);
  font-size: 0.95rem;
  line-height: 1.6;
}

.lp-plan-check {
  color: var(--lp-accent);
  font-size: 0.8rem;
  margin-block-start: 0.25rem;
  flex-shrink: 0;
}

.lp-plan-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.8rem 1.25rem;
  border-radius: 10px;
  font-size: 0.95rem;
  font-weight: 600;
  text-align: center;
  text-decoration: none;
  transition: background 0.15s ease, border-color 0.15s ease;
  cursor: pointer;
}

.lp-pricing-note {
  margin: 1.5rem 0 0;
  color: var(--muted);
  font-size: 0.9rem;
  text-align: center;
}

@media (max-width: 699px) {
  .lp-plan-card {
    padding: 1.5rem 1.25rem;
  }

  .lp-plan-amount {
    font-size: 1.8rem;
  }

  .lp-plan-header {
    flex-direction: column;
  }

  .lp-plan-badge {
    align-self: flex-start;
  }
}

@media (prefers-reduced-motion: reduce) {
  .lp-plan-card {
    transition: none;
  }
}

/* پرسش‌های متداول */
.lp-faq-list {
  display: grid;
  gap: 0.75rem;
}

.lp-faq-item {
  background: var(--white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 1rem 1.25rem;
}

.lp-faq-question {
  font-weight: 600;
  color: var(--ink);
  cursor: pointer;
  line-height: 1.8;
}

.lp-faq-answer {
  margin-top: 0.75rem;
  color: var(--muted);
  line-height: 2;
  white-space: pre-line;
}

/* CTA */
.lp-cta-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
}

.lp-cta-accent {
  background: var(--lp-accent);
}

.lp-cta-accent .lp-cta-title,
.lp-cta-accent .lp-cta-sub,
.lp-cta-accent .lp-cta-note,
.lp-cta-accent .lp-cta-phone {
  color: var(--color-text-inverse);
}

.lp-cta-accent .lp-btn-primary {
  background: var(--color-surface);
  color: var(--lp-accent-ink);
}

.lp-cta-accent .lp-btn-ghost {
  color: var(--color-text-inverse);
  border-color: var(--color-inverse-border-solid);
}

.lp-cta-title {
  font-size: 1.35rem;
  font-weight: 700;
  margin: 0 0 0.5rem;
  color: var(--ink);
}

.lp-cta-sub,
.lp-cta-note {
  margin: 0;
  color: var(--muted);
  line-height: 1.9;
}

.lp-cta-actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.lp-cta-phone {
  font-weight: 700;
  font-size: 1.05rem;
}

/* متن غنی */
.lp-richtext-body {
  color: var(--ink);
  line-height: 2.1;
}

.lp-richtext-body h2,
.lp-richtext-body h3 {
  margin: 1.75rem 0 0.75rem;
  color: var(--ink);
}

.lp-richtext-body ul,
.lp-richtext-body ol {
  padding-inline-start: 1.4rem;
  line-height: 2;
}

.lp-richtext-body img {
  max-width: 100%;
  height: auto;
  border-radius: var(--radius);
}

.lp-pre-line {
  white-space: pre-line;
}

/* آمار */
.lp-stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 1.25rem;
}

.lp-stat-card {
  background: var(--white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 1.5rem 1rem;
  box-shadow: var(--shadow);
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.lp-stat-icon {
  font-size: 1.5rem;
}

.lp-stat-value {
  font-size: 1.7rem;
  font-weight: 800;
  color: var(--lp-accent-ink);
  line-height: 1.2;
}

.lp-stat-label {
  color: var(--muted);
  font-size: 0.88rem;
}

/* لوگوها */
.lp-logos-grid {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 1.5rem 2.5rem;
}

.lp-logo-item {
  /* اجازهٔ کوچک‌شدن می‌دهد تا وُردمارک پهن در موبایلِ باریک ظرف را نشکند */
  min-inline-size: 0;
}

/* پیوندِ درونِ آیتم بلوک می‌شود تا تصویرِ وُردمارک نسبت به ظرفِ محدودشده سنجیده شود */
.lp-logo-item a {
  display: block;
  max-inline-size: 100%;
}

.lp-logo-item img {
  height: 2.5rem;
  width: auto;
  /* وُردمارک پهن هرگز از ظرف بیرون نمی‌زند و در موبایل باریک (۳۲۰px) سرریز افقی نمی‌سازد */
  max-inline-size: 100%;
  object-fit: contain;
}

/* لوگو در حالت پایه کم‌رنگ (~۶۰٪) و در hover یا فوکوس کامل می‌شود؛ خاکستری‌شدن جدا و فقط با پرچم payload، بدون اسلایدر و پیمایش خودکار */
.lp-logo-item img,
.lp-logo-text {
  opacity: 0.6;
  transition: filter 0.2s ease, opacity 0.2s ease;
}

.lp-logos-gray .lp-logo-item img {
  filter: grayscale(1);
}

.lp-logo-item:hover img,
.lp-logo-item:focus-within img,
.lp-logo-item:hover .lp-logo-text,
.lp-logo-item:focus-within .lp-logo-text {
  filter: none;
  opacity: 1;
}

/* احترام به کاهش حرکت: گذارِ رنگی بی‌زمان انجام می‌شود */
@media (prefers-reduced-motion: reduce) {

  .lp-logo-item img,
  .lp-logo-text {
    transition: none;
  }
}

.lp-logo-text {
  font-weight: 600;
  color: var(--color-text-strong);
}

/* جدول مقایسه */
.lp-table-wrap {
  overflow-x: auto;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  background: var(--white);
}

.lp-comparison-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 480px;
}

.lp-comparison-table th,
.lp-comparison-table td {
  padding: 0.85rem 1rem;
  text-align: start;
  border-bottom: 1px solid var(--color-border);
  line-height: 1.8;
}

.lp-comparison-table thead th {
  background: var(--lp-accent-soft);
  color: var(--lp-accent-ink);
  font-weight: 700;
}

.lp-comparison-table tbody th {
  font-weight: 600;
  color: var(--ink);
}

.lp-comparison-table tbody td {
  color: var(--muted);
}

/* فرم لید تمام‌عرض */
.lp-leadform-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2.5rem;
  align-items: start;
}

.lp-leadform-body {
  color: var(--muted);
  line-height: 2;
  margin-bottom: 1.25rem;
}

/* فهرست کمپین‌ها و حالت خالی */
.lp-list-title {
  font-size: 1.6rem;
  font-weight: 700;
  margin: 0 0 0.5rem;
}

.lp-list-lead,
.lp-empty-text {
  color: var(--muted);
  line-height: 1.9;
}

.lp-list-grid {
  list-style: none;
  padding: 0;
  margin: 1.75rem 0 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1rem;
}

.lp-list-card {
  background: var(--white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.lp-list-link {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: 1.25rem;
}

.lp-list-card-title {
  font-weight: 700;
  color: var(--ink);
}

.lp-list-card-slug {
  color: var(--muted);
  font-size: 0.82rem;
}

.lp-empty-title {
  font-size: 1.5rem;
  margin: 0 0 0.5rem;
}

@media (max-width: 900px) {

  .lp-hero-inner,
  .lp-leadform-inner {
    grid-template-columns: 1fr;
  }

  .lp-cols-3,
  .lp-cols-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .lp-section {
    padding: 2.5rem 0;
  }

  .lp-form-grid,
  .lp-cols-2,
  .lp-cols-3,
  .lp-cols-4 {
    grid-template-columns: 1fr;
  }

  .lp-cta-inner {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* ═════════════ فاز ۳ — صفحهٔ قیمت داده‌محور، checkout و نتیجهٔ پرداخت ═════════════ */

/* متن مخصوص صفحه‌خوان — از نظر بصری پنهان اما برای دسترس‌پذیری خوانا */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ── ۳.۱ صفحهٔ قیمت ─────────────────────────────────────────────────────── */
.pricing-grid-4 {
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

/* نشان‌های کارت مدت در یک ردیف بالای کارت می‌نشینند نه معلق روی گوشه، تا ارتفاع کارت‌ها هم‌تراز بماند و نشان روی متن نیفتد */
.plan-badges {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-bottom: var(--sp-3);
  min-height: 1.5rem;
}

.plan-badges .plan-badge {
  position: static;
  top: auto;
  left: auto;
}

/* درصد تخفیف تنها نشانگر صرفه‌جویی است؛ قیمت خط‌خورده نمایش نمی‌دهیم */
.plan-badge-discount {
  background: var(--color-success-subtle, var(--color-brand-subtle));
  color: var(--color-success-ink, var(--color-brand-ink));
  border-color: var(--color-success-border, var(--color-brand-border));
}

.plan-price-cur {
  font-size: 0.95rem;
  font-weight: var(--fw-medium);
  color: var(--muted);
}

.plan-price-per-month {
  margin: 0.3rem 0 0;
  font-size: 0.82rem;
  color: var(--muted);
}

.plan-specs {
  list-style: none;
  margin: 0 0 1rem;
  padding: 0.85rem 0;
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  display: grid;
  gap: 0.4rem;
  font-size: 0.9rem;
  color: var(--muted);
}

.plan-specs li {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.plan-specs i {
  color: var(--brand);
  font-size: 0.85rem;
}

.plan-feature-note {
  color: var(--muted);
  font-size: 0.85rem;
}

.module-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 1rem;
}

.module-card {
  background: var(--white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.module-card h3 {
  margin: 0;
  font-size: 1.02rem;
}

.module-card p {
  margin: 0;
  color: var(--muted);
  font-size: 0.9rem;
}

.module-icon {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 12px;
  background: var(--color-brand-subtle);
  color: var(--brand);
  display: grid;
  place-items: center;
  margin-bottom: 0.25rem;
}

.module-price {
  margin-top: auto !important;
  color: var(--ink) !important;
  font-size: 0.95rem !important;
}

.module-price strong {
  color: var(--brand);
}

.module-note {
  margin: 1.5rem 0;
  text-align: center;
  color: var(--muted);
  font-size: 0.95rem;
}

.module-note i {
  color: var(--brand);
}

/* ── ۳.۲/۳.۳ صفحهٔ checkout ─────────────────────────────────────────────── */
/* قواعد `.co-*` این صفحه به `pages/checkout.css` منتقل شد تا یک منبع واحد بماند */

/* قواعد `.pr-*` صفحهٔ نتیجهٔ پرداخت به `pages/payment-result.css` منتقل شد (قاعدهٔ ۴: استایل صفحه‌محور) */

/* بلوک‌های صفحه‌محور خانه، ویژگی‌ها، تعرفه و محصولات — فقط با توکن‌های موجود؛ بدون گرادیان، شیشه‌ای یا سایهٔ سنگین */

/* پیش‌نمایش رابط محصول — کاملاً با markup ساخته شده و هیچ فایل تصویری خارجی ندارد */
.ui-preview {
  width: 100%;
}

.ui-preview-frame {
  overflow: hidden;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

/* نوار بالای پنجره */
.ui-chrome {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  background: var(--color-surface-sunken);
  border-bottom: 1px solid var(--color-border-subtle);
}

.ui-chrome-dots {
  display: inline-flex;
  gap: var(--sp-2);
}

.ui-chrome-dot {
  width: var(--sp-2);
  height: var(--sp-2);
  background: var(--color-border-strong);
  border-radius: var(--radius-pill);
}

.ui-chrome-title {
  flex: 1 1 auto;
  color: var(--color-text-muted);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-medium);
}

.ui-chrome-chip {
  padding: var(--sp-1) var(--sp-3);
  background: var(--color-brand-subtle);
  color: var(--color-brand-ink);
  border: 1px solid var(--color-brand-border);
  border-radius: var(--radius-pill);
  font-size: var(--fs-2xs);
}

/* بدنه: نوار کنارهٔ بخش‌ها + ناحیهٔ اصلی */
.ui-body {
  display: grid;
  grid-template-columns: var(--sp-16) 1fr;
  gap: var(--sp-4);
  padding: var(--sp-4);
}

.ui-side {
  display: grid;
  align-content: start;
  gap: var(--sp-3);
  padding: var(--sp-3);
  background: var(--color-surface-sunken);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-md);
}

.ui-side-brand {
  display: block;
  height: var(--sp-3);
  background: var(--color-brand);
  border-radius: var(--radius-xs);
}

.ui-side-item {
  display: block;
  height: var(--sp-2);
  background: var(--color-border);
  border-radius: var(--radius-xs);
}

.ui-side-item.is-active {
  background: var(--color-brand-border);
}

.ui-main {
  display: grid;
  gap: var(--sp-4);
  min-width: 0;
}

/* شاخص‌های کلیدی */
.ui-kpis {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-3);
}

.ui-kpi {
  padding: var(--sp-3);
  background: var(--color-surface-raised);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-md);
}

.ui-kpi-label {
  display: block;
  color: var(--color-text-muted);
  font-size: var(--fs-2xs);
}

.ui-kpi-value {
  display: block;
  margin-top: var(--sp-1);
  color: var(--color-text-strong);
  font-family: var(--font-num);
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
}

/* پنل فهرست نوبت‌ها */
.ui-panel {
  background: var(--color-surface-raised);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-md);
}

.ui-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--color-border-subtle);
}

.ui-panel-title {
  color: var(--color-text-strong);
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
}

.ui-panel-hint {
  color: var(--color-text-muted);
  font-size: var(--fs-2xs);
}

.ui-row {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--color-border-subtle);
}

.ui-row:last-child {
  border-bottom: 0;
}

.ui-row-quiet {
  background: var(--color-surface-sunken);
}

.ui-avatar {
  /* بدون display، ابعاد روی span نادیده گرفته می‌شد و حرف اول بیرون دایره می‌افتاد */
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: var(--sp-6);
  height: var(--sp-6);
  background: var(--color-brand-subtle);
  color: var(--color-brand-ink);
  border: 1px solid var(--color-brand-border);
  border-radius: var(--radius-pill);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-medium);
  line-height: 1;
}

.ui-row-body {
  flex: 1 1 auto;
  min-width: 0;
}

/* این دو پیش‌تر میلهٔ اسکلتی بودند ولی مارکاپ نام و خدمت واقعی داخلشان می‌گذارد؛ حالا متن‌اند و در عرض کم با «…» کوتاه می‌شوند تا سطر نشکند */
.ui-row-name {
  display: block;
  overflow: hidden;
  color: var(--color-text-strong);
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  line-height: var(--lh-tight);
  white-space: nowrap;
  text-overflow: ellipsis;
}

.ui-row-sub {
  display: block;
  overflow: hidden;
  margin-top: var(--sp-1);
  color: var(--color-text-muted);
  font-size: var(--fs-2xs);
  line-height: var(--lh-tight);
  white-space: nowrap;
  text-overflow: ellipsis;
}

.ui-row-time {
  flex: 0 0 auto;
  color: var(--color-text-muted);
  font-family: var(--font-num);
  font-size: var(--fs-2xs);
}

.ui-row-chip {
  flex: 0 0 auto;
  padding: var(--sp-1) var(--sp-3);
  background: var(--color-surface-sunken);
  color: var(--color-text-muted);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  font-size: var(--fs-2xs);
}

.ui-row-chip.is-ok {
  background: var(--color-brand-subtle);
  color: var(--color-brand-ink);
  border-color: var(--color-brand-border);
}

/* یادداشت‌های کنار پیش‌نمایش در هیرو */
.hero-visual-notes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-4);
  margin: var(--sp-4) 0 0;
  padding: 0;
  list-style: none;
  color: var(--color-text-muted);
  font-size: var(--fs-xs);
}

.hero-visual-notes li {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
}

.hero-visual-notes i {
  color: var(--color-brand);
}

/* حالت خالی حرفه‌ای برای مجموعه‌های بدون رکورد */
.empty-state {
  max-width: var(--container-narrow);
  margin-inline: auto;
  padding: var(--sp-8) var(--sp-6);
  text-align: center;
  background: var(--color-surface);
  border: 1px dashed var(--color-border-strong);
  border-radius: var(--radius-lg);
}

.empty-state-title {
  margin: 0 0 var(--sp-2);
  color: var(--color-text-strong);
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
  line-height: var(--lh-heading);
}

.empty-state-text {
  margin: 0 0 var(--sp-5);
  color: var(--color-text-muted);
  font-size: var(--fs-sm);
  line-height: var(--lh-body);
}

.empty-state .btn:last-child {
  margin: 0;
}

/* ردیف مراحل شماره‌دار */
.steps-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--sp-4);
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: none;
}

.step-item {
  padding: var(--sp-5);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}

.step-index {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--sp-8);
  height: var(--sp-8);
  margin-bottom: var(--sp-3);
  background: var(--color-brand-subtle);
  color: var(--color-brand-ink);
  border: 1px solid var(--color-brand-border);
  border-radius: var(--radius-md);
  font-family: var(--font-num);
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
}

.step-item h3 {
  margin: 0 0 var(--sp-2);
  font-size: var(--fs-base);
  font-weight: var(--fw-bold);
  line-height: var(--lh-heading);
}

.step-item p {
  margin: 0;
  color: var(--color-text-muted);
  font-size: var(--fs-sm);
  line-height: var(--lh-body);
}

/* کارت‌های یکپارچه‌سازی سخت‌افزار (اسکنر چک و پرینتر) */
.integration-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-6);
}

.integration-card {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  padding: var(--sp-6);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  transition: transform var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}

.integration-card:hover {
  transform: translateY(-2px);
  border-color: var(--color-border-strong);
}

.integration-card h3 {
  margin: 0;
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
  line-height: var(--lh-heading);
}

.integration-card>p {
  margin: 0;
  color: var(--color-text-muted);
  font-size: var(--fs-sm);
  line-height: var(--lh-body);
}

.integration-list {
  display: grid;
  gap: var(--sp-2);
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--fs-sm);
  line-height: var(--lh-body);
}

.integration-list li {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-2);
}

.integration-list i {
  margin-top: var(--sp-1);
  color: var(--color-brand);
}

/* فهرست بسترها و شیوه‌های استقرار */
.platform-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

.platform-item {
  padding: var(--sp-5);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}

.platform-item h3 {
  margin: 0 0 var(--sp-2);
  font-size: var(--fs-base);
  font-weight: var(--fw-bold);
  line-height: var(--lh-heading);
}

.platform-item p {
  margin: 0;
  color: var(--color-text-muted);
  font-size: var(--fs-sm);
  line-height: var(--lh-body);
}

/* عوامل چهارگانهٔ قیمت در صفحهٔ تعرفه */
.factor-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

.factor-item {
  padding: var(--sp-5);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}

.factor-item h3 {
  margin: 0 0 var(--sp-2);
  font-size: var(--fs-base);
  font-weight: var(--fw-bold);
  line-height: var(--lh-heading);
}

.factor-item p {
  margin: 0;
  color: var(--color-text-muted);
  font-size: var(--fs-sm);
  line-height: var(--lh-body);
}

/* یادداشت زیر جدول تعرفه */
.pricing-note {
  max-width: var(--container-narrow);
  margin: var(--sp-6) auto 0;
  padding: var(--sp-4) var(--sp-5);
  background: var(--color-surface-sunken);
  color: var(--color-text-muted);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-md);
  font-size: var(--fs-xs);
  line-height: var(--lh-body);
  text-align: center;
}

/* رفتار واکنش‌گرا */
@media (max-width: 900px) {
  .steps-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .integration-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .ui-body {
    grid-template-columns: 1fr;
  }

  .ui-side {
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    align-items: center;
  }

  .ui-side-brand,
  .ui-side-item {
    height: var(--sp-2);
  }

  .ui-kpis {
    grid-template-columns: 1fr;
  }

  .ui-row-time {
    display: none;
  }

  .steps-row,
  .platform-list,
  .factor-list {
    grid-template-columns: 1fr;
  }
}


/* حالت خالی: آیکون (گام W9.1) — پارشال empty-state.ejs این نشانه را همیشه می‌فرستد، پس استایلش اینجاست */
.empty-state-icon {
  display: block;
  margin-bottom: var(--sp-4);
  color: var(--color-icon-subtle);
  font-size: var(--fs-3xl);
  line-height: 1;
}


/* بخش‌های صفحهٔ اصلی: نوار اعتماد، مسئله/راه‌حل، پیش‌نمایش‌ها و جریان درمان — رنگ‌ها از توکن تا حالت تاریک بدون تغییر این فایل کار کند */

/* --- نوار اعتماد (زیر قهرمان صفحه) --- */
.trust-bar {
  padding: var(--sp-5) 0;
  background: var(--color-surface-sunken);
  border-block: 1px solid var(--color-border-subtle);
}

.trust-bar-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: var(--sp-4) var(--sp-6);
  margin: 0;
  padding: 0;
  list-style: none;
}

.trust-bar-item {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
}

.trust-bar-icon {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  background: var(--color-brand-subtle);
  color: var(--color-brand-ink);
  border: 1px solid var(--color-brand-border);
  border-radius: var(--radius-md);
  font-size: var(--fs-sm);
}

.trust-bar-title {
  display: block;
  color: var(--color-text-strong);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  line-height: var(--lh-tight);
}

.trust-bar-text {
  display: block;
  margin-top: var(--sp-1);
  color: var(--color-text-muted);
  font-size: var(--fs-xs);
  line-height: var(--lh-body);
}

/* --- مسئله در برابر راه‌حل --- */
.ps-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: stretch;
  gap: var(--sp-4);
}

.ps-col {
  padding: var(--sp-6);
  background: var(--color-surface);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-lg);
}

.ps-col-after {
  border-color: var(--color-brand-border);
  box-shadow: var(--shadow-sm);
}

.ps-col-head {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin-bottom: var(--sp-4);
}

.ps-col-head h3 {
  margin: 0;
  font-size: var(--fs-lg);
}

/* نشان «قبل/بعد» متن خودش را دارد؛ رنگ تنها نشانه نیست */
.ps-col-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-1) var(--sp-3);
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-medium);
  white-space: nowrap;
}

.ps-col-badge.is-before {
  background: var(--color-danger-surface);
  color: var(--color-danger-ink);
  border-color: var(--color-danger-border);
}

.ps-col-badge.is-after {
  background: var(--color-success-surface);
  color: var(--color-success-ink);
  border-color: var(--color-success-border);
}

.ps-list {
  display: grid;
  gap: var(--sp-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.ps-list li {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  color: var(--color-text-muted);
  font-size: var(--fs-sm);
  line-height: var(--lh-body);
}

.ps-list i {
  flex: 0 0 auto;
  margin-top: 0.15em;
}

.ps-col-before .ps-list i {
  color: var(--color-danger);
}

.ps-col-after .ps-list i {
  color: var(--color-success);
}

.ps-bridge {
  display: grid;
  place-items: center;
  color: var(--color-brand);
  font-size: var(--fs-xl);
}

@media (max-width: 900px) {
  .ps-grid {
    grid-template-columns: 1fr;
  }

  /* در یک ستون، پیکان میانی باید به پایین اشاره کند */
  .ps-bridge {
    transform: rotate(90deg);
  }
}

/* --- چیدمان مشترک پیش‌نمایش‌ها: قاب نرم‌افزار + توضیح کنارش --- */
.pv-split,
.pv-chart-split,
.pv-inv-split {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  gap: var(--sp-6);
  align-items: start;
}

@media (max-width: 992px) {

  .pv-split,
  .pv-chart-split,
  .pv-inv-split {
    grid-template-columns: 1fr;
  }
}

.pv-frame-wrap {
  min-width: 0;
}

.pv-aside-title {
  margin: 0 0 var(--sp-4);
  font-size: var(--fs-md);
}

.pv-aside-note {
  margin: var(--sp-4) 0 0;
  padding: var(--sp-3) var(--sp-4);
  background: var(--color-info-surface);
  color: var(--color-info-ink);
  border: 1px solid var(--color-info-border);
  border-radius: var(--radius-md);
  font-size: var(--fs-xs);
  line-height: var(--lh-body);
}

/* برچسب وضعیت — هر حالت متن خودش را دارد، رنگ تنها نشانه نیست */
.pv-tag {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  padding: 0.1rem var(--sp-2);
  background: var(--color-surface-sunken);
  color: var(--color-text-muted);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-pill);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-medium);
  white-space: nowrap;
}

.pv-tag.is-ok {
  background: var(--color-success-surface);
  color: var(--color-success-ink);
  border-color: var(--color-success-border);
}

.pv-tag.is-info {
  background: var(--color-info-surface);
  color: var(--color-info-ink);
  border-color: var(--color-info-border);
}

.pv-tag.is-warn {
  background: var(--color-warn-surface);
  color: var(--color-warn-ink);
  border-color: var(--color-warn-border);
}

/* --- پیش‌نمایش پروندهٔ بیمار --- */
.pv-pt-head {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-4);
  padding: var(--sp-5);
  border-bottom: 1px solid var(--color-border-subtle);
}

.pv-pt-avatar {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  background: var(--color-brand-subtle);
  color: var(--color-brand-ink);
  border-radius: var(--radius-pill);
  font-size: var(--fs-md);
  font-weight: var(--fw-bold);
}

.pv-pt-ident {
  min-width: 0;
}

.pv-pt-name {
  display: block;
  color: var(--color-text-strong);
  font-size: var(--fs-md);
  font-weight: var(--fw-medium);
}

.pv-pt-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-1) var(--sp-3);
  margin-top: var(--sp-1);
  color: var(--color-text-muted);
  font-size: var(--fs-2xs);
  font-variant-numeric: tabular-nums;
}

.pv-pt-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-inline-start: auto;
}

/* ردیف تب‌ها در عرض کم افقی می‌لغزد تا صفحه کشیده نشود */
.pv-tabrow {
  display: flex;
  overflow-x: auto;
  gap: var(--sp-1);
  padding: var(--sp-2) var(--sp-4) 0;
  border-bottom: 1px solid var(--color-border-subtle);
  scrollbar-width: thin;
}

.pv-tab {
  flex: 0 0 auto;
  padding: var(--sp-2) var(--sp-3);
  color: var(--color-text-muted);
  border-bottom: 2px solid transparent;
  font-size: var(--fs-2xs);
  white-space: nowrap;
}

/* تب فعال هم رنگ دارد هم خط زیرین — فقط رنگ نیست */
.pv-tab.is-active {
  color: var(--color-brand-ink);
  border-bottom-color: var(--color-brand);
  font-weight: var(--fw-medium);
}

.pv-pt-body {
  padding: var(--sp-5);
}

.pv-fields {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  gap: var(--sp-4);
  margin: 0;
}

.pv-field dt {
  color: var(--color-text-muted);
  font-size: var(--fs-2xs);
}

.pv-field dd {
  margin: var(--sp-1) 0 0;
  color: var(--color-text-strong);
  font-size: var(--fs-sm);
  font-variant-numeric: tabular-nums;
}

.pv-note {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  margin-top: var(--sp-5);
  padding: var(--sp-3) var(--sp-4);
  background: var(--color-warn-surface);
  color: var(--color-warn-ink);
  border: 1px solid var(--color-warn-border);
  border-radius: var(--radius-md);
  font-size: var(--fs-xs);
  line-height: var(--lh-body);
}

.pv-notes,
.pv-inv-points {
  display: grid;
  gap: var(--sp-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

.pv-notes li,
.pv-inv-points li {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  color: var(--color-text-muted);
  font-size: var(--fs-sm);
  line-height: var(--lh-body);
}

.pv-notes i,
.pv-inv-points i {
  flex: 0 0 auto;
  margin-top: 0.2em;
  color: var(--color-brand);
}

.pv-notes strong,
.pv-inv-points strong {
  color: var(--color-text-strong);
}

/* --- چارت دندان --- */
.dchart {
  padding: var(--sp-5);
}

.dchart-arch+.dchart-arch {
  margin-top: var(--sp-5);
}

.dchart-arch-title {
  margin: 0 0 var(--sp-3);
  color: var(--color-text-muted);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-medium);
}

/* در عرض کم، کمان دندان‌ها افقی می‌لغزد و صفحه را نمی‌کشد */
.dchart-scroll {
  overflow-x: auto;
  scrollbar-width: thin;
}

.dchart-arch-inner {
  display: grid;
  gap: var(--sp-2);
  min-width: max-content;
}

.dchart-jaw {
  display: flex;
  justify-content: center;
  gap: var(--sp-4);
}

.dchart-quad {
  display: flex;
  gap: var(--sp-1);
}

.dchart-tooth {
  display: grid;
  gap: 0.1rem;
  justify-items: center;
  width: 1.6rem;
}

.dchart-tooth-crown {
  display: grid;
  place-items: center;
  width: 100%;
  height: 1.75rem;
  background: var(--color-surface-sunken);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xs);
  color: var(--color-text-muted);
  font-size: var(--fs-2xs);
  line-height: 1;
}

.dchart-tooth-num {
  color: var(--color-text-muted);
  font-size: 0.55rem;
  font-variant-numeric: tabular-nums;
}

/* هر وضعیت هم رنگ دارد و هم نشانهٔ متنی — رنگ تنها حامل معنا نیست */
.dchart-tooth.is-filled .dchart-tooth-crown,
.dchart-swatch.is-filled {
  background: var(--color-success-surface);
  border-color: var(--color-success-border);
  color: var(--color-success-ink);
}

.dchart-tooth.is-endo .dchart-tooth-crown,
.dchart-swatch.is-endo {
  background: var(--color-info-surface);
  border-color: var(--color-info-border);
  color: var(--color-info-ink);
}

.dchart-tooth.is-missing .dchart-tooth-crown,
.dchart-swatch.is-missing {
  background: var(--color-danger-surface);
  border-color: var(--color-danger-border);
  color: var(--color-danger-ink);
}

.dchart-tooth.is-planned .dchart-tooth-crown,
.dchart-swatch.is-planned {
  background: var(--color-accent-subtle);
  border-color: var(--color-accent-border);
  color: var(--color-accent-ink);
}

.dchart-legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-4);
  margin-top: var(--sp-5);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--color-border-subtle);
}

.dchart-legend-item {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  color: var(--color-text-muted);
  font-size: var(--fs-2xs);
}

.dchart-swatch {
  display: grid;
  place-items: center;
  width: 1.1rem;
  height: 1.1rem;
  background: var(--color-surface-sunken);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xs);
  font-size: 0.6rem;
  line-height: 1;
}

.pv-tx-list {
  display: grid;
  gap: var(--sp-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.pv-tx-list li {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  padding: var(--sp-3);
  background: var(--color-surface);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-md);
}

.pv-tx-tooth {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  min-width: 2rem;
  padding: var(--sp-1);
  background: var(--color-surface-sunken);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xs);
  font-size: var(--fs-2xs);
  font-variant-numeric: tabular-nums;
}

.pv-tx-body {
  min-width: 0;
  display: grid;
  gap: var(--sp-1);
  justify-items: start;
  color: var(--color-text-muted);
  font-size: var(--fs-xs);
  line-height: var(--lh-body);
}

/* --- جریان درمان (گام‌به‌گام) --- */
.flow-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: var(--sp-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

.flow-step {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--sp-3);
  padding: var(--sp-5);
  background: var(--color-surface);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-lg);
}

.flow-index {
  display: grid;
  place-items: center;
  width: 1.9rem;
  height: 1.9rem;
  background: var(--color-brand);
  color: var(--color-text-on-brand);
  border-radius: var(--radius-pill);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  font-variant-numeric: tabular-nums;
}

.flow-step-title {
  margin: 0;
  align-self: center;
  font-size: var(--fs-md);
}

.flow-step-text {
  grid-column: 2;
  margin: var(--sp-2) 0 0;
  color: var(--color-text-muted);
  font-size: var(--fs-sm);
  line-height: var(--lh-body);
}

.flow-actor {
  grid-column: 2;
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  margin-top: var(--sp-3);
  padding: var(--sp-1) var(--sp-3);
  justify-self: start;
  background: var(--color-surface-sunken);
  color: var(--color-text-muted);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-pill);
  font-size: var(--fs-2xs);
}

/* --- پیش‌نمایش صورت‌حساب --- */
.inv-scroll {
  overflow-x: auto;
  scrollbar-width: thin;
}

.inv-table {
  width: 100%;
  min-width: 30rem;
  border-collapse: collapse;
  font-size: var(--fs-xs);
}

.inv-table th,
.inv-table td {
  padding: var(--sp-3) var(--sp-4);
  text-align: start;
  border-bottom: 1px solid var(--color-border-subtle);
}

.inv-table thead th {
  background: var(--color-surface-sunken);
  color: var(--color-text-muted);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-medium);
  white-space: nowrap;
}

.inv-table tbody tr:last-child td {
  border-bottom: 0;
}

.inv-service {
  color: var(--color-text-strong);
}

.inv-tooth {
  color: var(--color-text-muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.inv-num {
  text-align: end;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.inv-num.is-strong {
  color: var(--color-text-strong);
  font-weight: var(--fw-medium);
}

.inv-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: var(--sp-4);
  padding: var(--sp-5);
  border-top: 1px solid var(--color-border-subtle);
  background: var(--color-surface-sunken);
}

.inv-sum-label {
  display: block;
  color: var(--color-text-muted);
  font-size: var(--fs-2xs);
}

.inv-sum-value {
  display: block;
  margin-top: var(--sp-1);
  color: var(--color-text-strong);
  font-size: var(--fs-md);
  font-weight: var(--fw-medium);
  font-variant-numeric: tabular-nums;
}

/* مانده هم رنگ دارد هم برچسب «مانده» — رنگ تنها نشانه نیست */
.inv-sum-value.is-due {
  color: var(--color-danger-ink);
}

.inv-sum-progress {
  grid-column: 1 / -1;
}

.inv-sum-hint {
  display: block;
  margin-top: var(--sp-2);
  color: var(--color-text-muted);
  font-size: var(--fs-2xs);
  font-variant-numeric: tabular-nums;
}

.ui-meter {
  /* روی <span> است؛ بدون display خطی می‌ماند و height/margin اثر نمی‌کرد — میله دیده نمی‌شد */
  display: block;
  overflow: hidden;
  height: 0.5rem;
  margin-top: var(--sp-2);
  background: var(--color-border-subtle);
  border-radius: var(--radius-pill);
}

.ui-meter-fill {
  display: block;
  height: 100%;
  background: var(--color-brand);
  border-radius: inherit;
}

.inv-pay {
  padding: var(--sp-5);
  border-top: 1px solid var(--color-border-subtle);
}

.inv-pay-title {
  margin: 0 0 var(--sp-3);
  color: var(--color-text-muted);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-medium);
}

.inv-pay-row {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) 0;
  border-bottom: 1px solid var(--color-border-subtle);
}

.inv-pay-row:last-child {
  border-bottom: 0;
}

.inv-pay-icon {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 1.9rem;
  height: 1.9rem;
  background: var(--color-success-surface);
  color: var(--color-success-ink);
  border: 1px solid var(--color-success-border);
  border-radius: var(--radius-md);
  font-size: var(--fs-2xs);
}

.inv-pay-body {
  min-width: 0;
  color: var(--color-text-muted);
  font-size: var(--fs-xs);
}

.inv-pay-amount {
  margin-inline-start: auto;
  color: var(--color-text-strong);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* قاعده‌های جامانده پیش‌نمایش‌ها (prd2 §P1.1) — این کلاس‌ها در مارکاپ بودند ولی قاعده‌ای نداشتند و مرورگر <span> خطی می‌گرفتشان */

/* واحد پول/درصد زیر عدد KPI؛ جدا از مقدار می‌آید تا عدد درشت و واحد ریز بماند */
.ui-kpi-unit {
  display: block;
  margin-top: var(--sp-1);
  color: var(--color-text-muted);
  font-size: var(--fs-2xs);
  line-height: var(--lh-tight);
}

/* مبلغ تومانی رقم‌های بیشتری از یک عدد دو رقمی دارد؛ یک پله ریزتر تا در ستون سه‌تایی نشکند */
.ui-kpi-value.is-money {
  font-size: var(--fs-md);
  font-variant-numeric: tabular-nums;
}

/* نمودار درآمد هفته: ارتفاع ثابت رزرو می‌شود تا رسم SVG چیدمان را تکان ندهد (CLS) */
.ui-spark {
  padding: var(--sp-3) var(--sp-4) var(--sp-4);
  color: var(--color-brand);
}

.ui-spark svg {
  display: block;
  width: 100%;
  height: 3rem;
}

.ui-spark-line {
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  /* SVG با preserveAspectRatio="none" کشیده می‌شود و ضخامت خط را کج می‌کند؛ این جلوش را می‌گیرد */
  vector-effect: non-scaling-stroke;
}

.ui-spark-area {
  fill: var(--color-brand-subtle);
  stroke: none;
}

.ui-spark-axis {
  display: flex;
  justify-content: space-between;
  margin-top: var(--sp-2);
  color: var(--color-text-muted);
  font-size: var(--fs-2xs);
}

/* ردیف فعالیت اخیر — همان ریتم .ui-row تا دو جعبهٔ پشت‌سرهم یک‌دست دیده شوند */
.ui-act {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--color-border-subtle);
}

.ui-act:last-child {
  border-bottom: 0;
}

.ui-act-icon {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: var(--sp-6);
  height: var(--sp-6);
  background: var(--color-surface-sunken);
  color: var(--color-brand-ink);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-pill);
  font-size: var(--fs-2xs);
}

.ui-act-text {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  color: var(--color-text);
  font-size: var(--fs-xs);
  line-height: var(--lh-tight);
  white-space: nowrap;
  text-overflow: ellipsis;
}

.ui-act-time {
  flex: 0 0 auto;
  color: var(--color-text-muted);
  font-family: var(--font-num);
  font-size: var(--fs-2xs);
  white-space: nowrap;
}

/* ریزمتن زیر دکمه‌های نوار فراخوان (§۱۹) */
.cta-microcopy {
  margin: var(--sp-4) 0 0;
  color: var(--color-text-muted);
  font-size: var(--fs-xs);
  line-height: var(--lh-body);
}

/* فرزندان شبکه/فلکس که باید اجازهٔ کوچک‌شدن بگیرند؛ بدون min-width:0 متن یا جدول بلند ستون را پهن و صفحه را افقی اسکرول می‌کند (§۲۳) */
.inv-sum-cell,
.pv-inv-aside,
.trust-bar-body,
.footer-col,
.footer-brand-col,
.lp-hero-copy,
.lp-hero-side,
.lp-cta-copy,
.lp-leadform-copy {
  min-width: 0;
}

/* ورود بیمار — پیام وضعیت جانشین alert بومی؛ آیکن متنی تا رنگ تنها حامل معنا نباشد */
.pl-status {
  margin: var(--sp-3) 0 0;
  font-size: var(--fs-sm);
  line-height: var(--lh-heading);
}

.pl-status--ok {
  color: var(--color-success-ink);
}

.pl-status--ok::before {
  content: '✓ ';
}

.pl-status--error {
  color: var(--color-danger-ink);
}

.pl-status--error::before {
  content: '⚠ ';
}

/* ============================
   مشتریان دنتیوال — بخش داده‌محور
   پایهٔ کارت و چیدمانِ صفحهٔ اصلی در `pages/home.css` است؛ اینجا فقط چیزی می‌نشیند
   که هنوز پوشش داده نشده: کشیدنِ متادیتا به پایین کارت، ارتفاعِ برابر و لینکِ پایانی
   ============================ */
.hm-customers-grid {
  align-items: stretch;
}

.hm-customer-meta {
  margin-top: auto;
}

/* لینکِ پایانیِ بخش به فرم مشاوره می‌رود؛ دکمهٔ کامل نمی‌سازد چون خودش مسیرِ اصلی نیست */
.hm-customers-cta {
  margin: var(--sp-7) 0 0;
  text-align: center;
  font-size: var(--fs-sm);
}

.hm-customers-cta a {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-5);
  border: 1px solid var(--color-brand-border);
  border-radius: var(--radius-pill);
  background: var(--color-brand-subtle);
  color: var(--color-brand-ink);
  font-weight: var(--fw-medium);
  transition: background var(--dur-base) var(--ease-out),
    border-color var(--dur-base) var(--ease-out);
}

.hm-customers-cta a:hover {
  background: var(--c-brand-100);
  border-color: var(--color-brand);
}

@media (prefers-reduced-motion: reduce) {
  .hm-customers-cta a {
    transition: none;
  }
}