/* Qalam Lina — page-specific styles. */
.pricing-grid .card.popular { border: 2px solid var(--color-accent); position: relative; }
.popular-tag { position: absolute; top: -14px; inset-inline-start: 50%; transform: translateX(50%); background: var(--color-accent); color: #0a0a0b; padding: 0.15rem 0.9rem; border-radius: 999px; font-size: 0.8rem; font-weight: 700; }
html[dir="rtl"] .popular-tag { transform: translateX(-50%); }
.price { font-family: var(--font-mono); font-size: 2rem; color: var(--color-accent); }
.price-old { text-decoration: line-through; color: var(--color-muted); font-size: 1.1rem; }
.feature-list { list-style: none; padding: 0; }
.feature-list li { padding: 0.35rem 0; }
.feature-list li.no { color: var(--color-muted); text-decoration: line-through; }
.article { max-width: 760px; margin: 0 auto; }
.article pre { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: 1rem; overflow-x: auto; direction: ltr; text-align: left; }
.article code { font-family: var(--font-mono); font-size: 0.9rem; }
.demo-box { max-width: 560px; margin: 0 auto; }
.stat-table { width: 100%; border-collapse: collapse; }
.stat-table th, .stat-table td { border: 1px solid var(--color-border); padding: 0.6rem; text-align: start; }
.stat-table th { background: var(--color-surface); }