/* ============================================================
   ARTICLE PAGES — guides and comparisons (10 Sep 2026).
   The same quiet, centred column the trust / legal pages use, so a
   guide reads like the rest of the site. Shared here instead of
   copied into every page. Classes are the trust page's (.tr-) plus
   a few for article furniture (.ar-).
   ============================================================ */
.tr-hero { padding: 48px 0 36px; border-bottom: 1px solid var(--line); background:
  radial-gradient(760px 380px at 80% -34%, rgba(59,130,246,.10), transparent 62%),
  radial-gradient(600px 320px at 2% 124%, rgba(16,185,129,.07), transparent 58%), #fff; }
.tr-col { max-width: 78ch; margin: 0 auto; padding: 0 24px; }
.tr-tag { display: inline-block; font-size: .68rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  color: var(--blue); background: #eef4ff; border: 1px solid #dce8ff; border-radius: 8px; padding: 6px 11px; }
h1.tr-h1 { margin-top: 16px; font-size: clamp(1.85rem, 3.4vw, 2.5rem); font-weight: 300; letter-spacing: -.03em; line-height: 1.14; }
h1.tr-h1 b { font-weight: 700; }
.tr-meta { margin-top: 12px; font-size: .82rem; color: var(--faint); }
.tr-lead { margin-top: 18px; font-size: 1rem; line-height: 1.85; color: var(--body); }
.tr-lead a { color: var(--blue); font-weight: 500; }
.tr-facts { margin-top: 30px; display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; }
.tr-fact { border: 1px solid var(--line); border-radius: 8px; background: #fff; padding: 16px 18px; }
.tr-fact .k { font-size: .66rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--faint); }
.tr-fact .v { margin-top: 7px; font-size: .95rem; font-weight: 500; color: var(--ink); line-height: 1.5; }
.tr-body { padding: 44px 0 12px; }
.tr-sec { margin-top: 42px; scroll-margin-top: 92px; }
.tr-sec:first-child { margin-top: 0; }
.tr-sec > h2 { font-size: 1.2rem; font-weight: 600; letter-spacing: -.015em; color: var(--ink); padding-bottom: 11px; border-bottom: 1px solid var(--line); }
.tr-sec h3 { margin-top: 24px; font-size: .97rem; font-weight: 600; letter-spacing: -.01em; color: var(--ink); }
.tr-sec p { margin-top: 14px; font-size: .95rem; line-height: 1.85; color: var(--body); }
.tr-sec a { color: var(--blue); font-weight: 500; }
.tr-sec strong { font-weight: 600; color: #1e293b; }
.tr-sec ul, .tr-sec ol { margin-top: 14px; list-style: none; }
.tr-sec ul li, .tr-sec ol li { position: relative; padding: 7px 0 7px 24px; font-size: .93rem; line-height: 1.75; color: var(--body); }
.tr-sec ul li::before { content: ""; position: absolute; left: 4px; top: 17px; width: 6px; height: 6px; border-radius: 50%; background: #93b4f5; }
.tr-sec ol { counter-reset: steps; }
.tr-sec ol li { padding-left: 30px; counter-increment: steps; }
.tr-sec ol li::before { content: counter(steps); position: absolute; left: 0; top: 9px; width: 20px; height: 20px; border-radius: 6px; background: #eef4ff; color: var(--blue); font-size: .72rem; font-weight: 700; display: grid; place-items: center; }
.tr-toc { margin-top: 28px; border: 1px solid var(--line); border-radius: 8px; background: #fbfcff; padding: 20px 22px 18px; }
.tr-toc .t { font-size: .7rem; font-weight: 600; letter-spacing: .13em; text-transform: uppercase; color: var(--faint); }
.tr-toc ol { margin-top: 12px; columns: 2; column-gap: 34px; list-style: none; counter-reset: toc; }
.tr-toc li { break-inside: avoid; counter-increment: toc; position: relative; padding: 4px 0 4px 27px; font-size: .875rem; line-height: 1.55; }
.tr-toc li::before { content: counter(toc) "."; position: absolute; left: 0; top: 4px; color: #94a3b8; font-size: .78rem; font-variant-numeric: tabular-nums; }
.tr-toc a { color: var(--body); }
.tr-toc a:hover { color: var(--blue); }
.tr-tablewrap { margin-top: 16px; overflow-x: auto; border: 1px solid var(--line); border-radius: 8px; }
table.tr-table { width: 100%; border-collapse: collapse; font-size: .88rem; min-width: 560px; }
table.tr-table th { text-align: left; font-weight: 600; font-size: .68rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--faint); padding: 12px 14px; background: #fbfcff; border-bottom: 1px solid var(--line); white-space: nowrap; }
table.tr-table td { padding: 12px 14px; border-bottom: 1px solid #eef2f8; color: var(--body); line-height: 1.6; vertical-align: top; }
table.tr-table tr:last-child td { border-bottom: 0; }
table.tr-table td b { color: var(--ink); font-weight: 600; }
.tr-note { margin-top: 34px; border: 1px solid #dce8ff; background: #f6f9ff; border-radius: 8px; padding: 20px 22px; }
.tr-note h4 { font-size: .95rem; font-weight: 600; color: var(--ink); }
.tr-note p { margin-top: 9px; font-size: .92rem; line-height: 1.75; color: var(--body); }
.tr-note a { color: var(--blue); font-weight: 500; }
/* FAQ — <details> pairs; the SEO generator lifts them into FAQPage schema */
.ar-faq details { border-top: 1px solid var(--line); padding: 12px 0; }
.ar-faq details:last-child { border-bottom: 1px solid var(--line); }
.ar-faq summary { cursor: pointer; font-size: .95rem; font-weight: 600; color: var(--ink); list-style: none; display: flex; justify-content: space-between; gap: 14px; }
.ar-faq summary::-webkit-details-marker { display: none; }
.ar-faq summary::after { content: "+"; color: var(--blue); font-weight: 500; }
.ar-faq details[open] summary::after { content: "–"; }
.ar-faq details p { margin-top: 10px; font-size: .93rem; line-height: 1.8; color: var(--body); }
/* article CTA and index cards */
.ar-cta { margin-top: 40px; display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.ar-cta .btn-demo, .ar-cta .btn-mig { position: static; }
.ar-cards { margin-top: 26px; display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 14px; }
.ar-card { display: block; border: 1px solid var(--line); border-radius: 8px; background: #fff; padding: 18px 20px; text-decoration: none; transition: border-color .16s, box-shadow .16s, transform .16s; }
.ar-card:hover { border-color: #bfd6ff; box-shadow: 0 14px 30px -22px rgba(29,78,216,.5); transform: translateY(-1px); }
.ar-card .k { font-size: .66rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--blue); }
.ar-card h3 { margin-top: 8px; font-size: 1rem; font-weight: 600; color: var(--ink); line-height: 1.4; }
.ar-card p { margin-top: 8px; font-size: .88rem; line-height: 1.7; color: var(--body); }
.ar-crumbs { font-size: .8rem; color: var(--faint); }
.ar-crumbs a { color: var(--faint); text-decoration: none; }
.ar-crumbs a:hover { color: var(--blue); }
.ar-crumbs span { margin: 0 6px; }
@media (max-width: 640px) { .tr-toc ol { columns: 1; } }

/* glossary — each term is an anchor; the "Also called" line reads as a subtitle */
.tr-sec.gl h3 { margin-top: 30px; scroll-margin-top: 90px; }
.tr-sec.gl p.aka em { font-style: normal; font-weight: 600; color: var(--faint); font-size: .8rem; letter-spacing: .04em; text-transform: uppercase; }
.tr-sec.gl p.aka { margin-top: 6px; font-size: .88rem; color: var(--faint); }

/* related reading — three sibling pages at the foot of every guide and comparison */
.ar-related { padding: 8px 0 48px; }
.ar-related-h { font-size: 1.05rem; font-weight: 600; letter-spacing: -.01em; color: var(--ink); padding-bottom: 11px; border-bottom: 1px solid var(--line); }
.ar-related .ar-cards { margin-top: 18px; }