/* Long-form pages on pinsay.dev: /features/*, /alternatives/* and their /ar/ versions (company/work/2026-11-01-seo-basics/
   PLAN-pages.md). Builds on landing.css tokens and components (.btn, .code, .faq, .final); adds the article column,
   breadcrumb, prose, comparison table, sources, related links, the language link, price slots and Arabic/RTL rules. */

.article { padding: clamp(28px, 5vw, 56px) 0 clamp(48px, 7vw, 88px); }
.article-wrap { max-width: 46rem; } /* .wrap sets the width and side gutters; this caps the reading column */

.breadcrumb ol { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 24px; padding: 0; list-style: none; font-size: 14px; color: var(--muted); }
.breadcrumb li + li::before { content: "/"; margin-inline-end: 6px; color: var(--line); }
.breadcrumb a { color: var(--muted); text-decoration: none; }
.breadcrumb a:hover { color: var(--ink); text-decoration: underline; }

.article-head h1 { margin: 0; font-size: clamp(2rem, 4.6vw, 3rem); line-height: 1.12; letter-spacing: -0.02em; text-wrap: balance; }
.article-lede { margin: 18px 0 0; max-width: 62ch; color: var(--muted); font-size: 1.125rem; line-height: 1.65; }
.article-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }

.prose { margin-top: clamp(40px, 6vw, 64px); font-size: 1.0625rem; line-height: 1.7; }
.prose h2, .article-section-title {
  margin: 0 0 16px; font-size: clamp(1.5rem, 3vw, 1.875rem); line-height: 1.2; letter-spacing: -0.01em;
  scroll-margin-top: calc(var(--header-h) + 16px);
}
.prose h2 { margin-top: 56px; }
.prose > h2:first-child { margin-top: 0; }
.prose h3 { margin: 32px 0 10px; font-size: 1.1875rem; line-height: 1.3; }
.prose p, .prose ul, .prose ol { margin: 0 0 16px; }
.prose ul, .prose ol { padding-inline-start: 1.4em; }
.prose li + li { margin-top: 6px; }
.prose a { color: var(--brand-ink); text-underline-offset: 3px; }
.prose strong { color: var(--ink); font-weight: 600; }
.prose :not(pre) > code, .article-lede code { padding: 0.1em 0.35em; border-radius: 4px; background: var(--gutter-strong); font-family: var(--font-mono); font-size: 0.88em; }
.prose .code { margin: 0 0 20px; }

.table-wrap { margin: 0 0 12px; overflow-x: auto; border: 1px solid var(--line-soft); border-radius: var(--radius-lg); background: var(--surface); }
.table-wrap:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.article-table { width: 100%; min-width: 600px; border-collapse: collapse; font-size: 15px; line-height: 1.5; }
.article-table th, .article-table td { padding: 12px 14px; border-bottom: 1px solid var(--line-soft); text-align: start; vertical-align: top; }
.article-table thead th { background: var(--gutter); color: var(--ink); font-weight: 600; white-space: nowrap; }
.article-table th[scope="row"] { color: var(--ink); font-weight: 500; }
.article-table td { color: var(--muted); }
.article-table tbody tr:last-child > * { border-bottom: 0; }
.table-note { margin: 0 0 16px; color: var(--muted); font-size: 14px; }

.article-faq, .article-sources, .article-related { margin-top: 64px; }
.article-faq .faq { margin-top: 8px; }
.article-sources p { margin: 0 0 12px; color: var(--muted); font-size: 15px; }
.article-sources ul { display: grid; gap: 8px; margin: 0 0 16px; padding: 0; list-style: none; color: var(--muted); font-size: 14px; }
.article-sources a { color: var(--brand-ink); overflow-wrap: anywhere; }
.article-note { margin: 0 0 16px; padding: 18px 20px; border: 1px solid var(--line-soft); border-radius: var(--radius-lg); background: var(--gutter); }
.article-note > :last-child { margin-bottom: 0; }
.article-related ul { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.article-related a {
  display: block; height: 100%; padding: 16px 18px; border: 1px solid var(--line-soft); border-radius: var(--radius-lg);
  background: var(--surface); color: var(--ink); text-decoration: none;
  transition: border-color var(--dur) var(--ease-out), background-color var(--dur) var(--ease-out);
}
.article-related a:hover { border-color: var(--line); background: var(--gutter); }
.related-title { display: block; font-weight: 600; }
.related-desc { display: block; margin-top: 4px; color: var(--muted); font-size: 14px; line-height: 1.5; }
@media (min-width: 720px) { .article-related ul { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.lang-link {
  display: inline-flex; align-items: center; min-height: 36px; padding: 0 10px; border-radius: var(--radius-sm);
  color: var(--muted); font-size: 15px; font-weight: 500; text-decoration: none;
}
.lang-link:hover { color: var(--ink); background: var(--hover); }
@media (pointer: coarse) { .lang-link { min-height: 44px; } }

.plan-price-slot.is-pending, .offer-slot.is-pending { display: inline-block; min-width: 6ch; visibility: hidden; }
.footer-note { margin-top: 8px; font-size: 13px; }

/* Arabic: system fonts first; theme-init.js adds ar-font.css (Thmanyah Sans) after load. Roomier lines, no tracking; code stays LTR. */
:lang(ar) { --font-sans: 'Geeza Pro', 'Noto Sans Arabic', 'Segoe UI', Tahoma, system-ui, sans-serif; }
.prose:lang(ar), .article-lede:lang(ar) { line-height: 1.85; }
[dir="rtl"] .article-head h1, [dir="rtl"] .prose h2, [dir="rtl"] .article-section-title { letter-spacing: 0; }
.prose code, .prose pre, .article-lede code { direction: ltr; unicode-bidi: isolate; }
[dir="rtl"] .prose pre { text-align: left; }