/* Second shared SEO file. Loaded only by pages that use any of the contained
   selectors. Pure-base-chrome pages stay on seo-base.css alone.

   Lifted from inline <style> blocks 2026-05-25 (Phase 2 item #7) — covers
   the cross-group selectors used by vs-* comparison pages, matrix-family
   pages (best-*-alternative + online-clipboard-comparison), Group B / Group C
   transfer + how-to pages, airdrop-alternative-for-windows, clipboard-history-
   across-devices, how-it-works, use-cases, about, and the two blog posts.

   Selector inventory:
     .tldr, .callout                  — call-out box (visually identical, deduped)
     .tldr p:last-child, .callout ... — trailing-paragraph margin reset
     .comparison + th + td + tr       — comparison table
     .check, .cross                   — table cell indicators (post-2026-05-25
                                        recolor: var(--text) / var(--text-muted))
     .cta-block + p                   — bottom-of-page CTA section
     .cta-btn + :hover                — primary CTA button
     .page-links + a + a:hover        — related-pages footer block

   Drift notes (kept as inline overrides on the affected pages):
     - .callout { margin: 28px 0 } on use-cases EN/ES + the two blog posts EN/ES
     - .cta-btn transition + .cta-btn:active animation on use-cases EN +
       how-it-works EN (their ES twins do not have it)
*/

.tldr, .callout { border-left: 3px solid var(--text); padding: 16px 20px; background: var(--accent-bg); border-radius: 0 8px 8px 0; margin: 24px 0; }
.tldr p:last-child, .callout p:last-child { margin-bottom: 0; }

.comparison { width: 100%; border-collapse: collapse; margin: 24px 0 40px; font-size: .9rem; }
.comparison th { text-align: left; padding: 8px 12px; border-bottom: 2px solid var(--border); font-weight: 600; }
.comparison td { padding: 8px 12px; border-bottom: 1px solid var(--border); vertical-align: top; }
.comparison tr:last-child td { border-bottom: none; }

.check { color: var(--text); font-weight: 700; }
.cross { color: var(--text-muted); }

.cta-block { margin-top: 56px; border-top: 1px solid var(--border); padding-top: 40px; text-align: center; }
.cta-block p { color: var(--text-muted); margin-bottom: 20px; }
.cta-btn { display: inline-block; padding: 12px 32px; background: var(--text); color: var(--bg); border-radius: 8px; text-decoration: none; font-weight: 600; font-size: 1rem; }
.cta-btn:hover { opacity: .85; }

.page-links { margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--border); display: flex; flex-wrap: wrap; gap: 16px; font-size: .9rem; }
.page-links a { text-decoration: none; }
.page-links a:hover { text-decoration: underline; }