/*
 * ظاهر سایت عمومی (لندینگ، خدمات، مجله) روی همان سیستم طراحی ui.css؛ فقط توکن‌ها و رنگ‌های
 * معنایی. صفحه‌ها سبک‌اند و بی جاوااسکریپت هم کامل کار می‌کنند.
 */
.site main { min-height: 60vh; }
.site-cta { white-space: nowrap; }
.section { padding-block: var(--s-7); }
.section-alt { background: var(--raised); }
.section h2 { font-size: var(--fs-xl); margin-block: 0 var(--s-4); }
.lead-text { font-size: var(--fs-lg); color: var(--muted); max-width: var(--measure); }
.hero-site { padding-block: var(--s-7) var(--s-6); display: grid; gap: var(--s-5); align-items: center; }
.hero-site h1 { font-size: clamp(1.7rem, 5vw, 2.6rem); line-height: 1.4; margin: 0; }
.hero-site .actions { margin-block-start: var(--s-4); }
@media (min-width: 900px) { .hero-site { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); } }
.chat-demo { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--s-4); box-shadow: var(--shadow-2); }
.chat-demo .bubble { margin-block-end: var(--s-2); }
.steps-grid { display: grid; gap: var(--s-4); grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); counter-reset: step; }
.steps-grid .card::before { counter-increment: step; content: counter(step, persian); display: inline-grid; place-items: center; width: 2.2em; height: 2.2em; border-radius: var(--r-pill); background: var(--highlight-soft); font-weight: 800; margin-block-end: var(--s-2); }
.check-list { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--s-2); }
.check-list li { padding-inline-start: 1.6em; position: relative; }
.check-list li::before { content: "✓"; position: absolute; inset-inline-start: 0; color: var(--brand-primary); font-weight: 800; }
.cta-band { text-align: center; padding: var(--s-6) var(--s-4); border-radius: var(--r-lg); background: var(--highlight-soft); }
.article-body { max-width: var(--measure); margin-inline: auto; line-height: 2; font-size: var(--fs-md); }
.article-body h2 { margin-block: var(--s-6) var(--s-2); font-size: var(--fs-xl); }
.article-body h3 { margin-block: var(--s-5) var(--s-2); }
.article-body img { max-width: 100%; height: auto; border-radius: var(--r-md); }
.article-meta { color: var(--muted); font-size: var(--fs-sm); }
.crumbs { font-size: var(--fs-sm); color: var(--muted); margin-block: var(--s-4) var(--s-2); }
.crumbs a { color: var(--muted); }
.site-footer { border-top: 1px solid var(--line); padding-block: var(--s-6); margin-block-start: var(--s-7); }
.site-footer-grid { display: grid; gap: var(--s-5); grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); }
.plain-links { list-style: none; padding: 0; margin: var(--s-2) 0 0; display: grid; gap: var(--s-1); }
.price-range { font-size: var(--fs-2xl); font-weight: 800; }
details.faq-item { border-bottom: 1px solid var(--line); padding-block: var(--s-3); }
details.faq-item summary { font-weight: 700; cursor: pointer; }