
/* WC Skills SEO + UX v3
   Adds accessible content hierarchy, readable long-form sections,
   breadcrumbs, TOC, comparison tables, and mobile-first spacing.
*/
:root{--wc-navy:#102a43;--wc-blue:#1f5eff;--wc-sky:#e8f1ff;--wc-ink:#17212b;--wc-muted:#5f6b76;--wc-border:#dbe4ee;--wc-card:#fff}
.wcseo-wrap{max-width:1180px;margin:0 auto;padding:0 20px}
.wcseo-section{padding:64px 0}
.wcseo-section.alt{background:#f7f9fc}
.wcseo-kicker{display:inline-block;font-size:.78rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--wc-blue);margin-bottom:10px}
.wcseo-title{font-size:clamp(1.8rem,3vw,2.55rem);line-height:1.16;color:var(--wc-navy);margin:0 0 14px}
.wcseo-lead{font-size:1.08rem;line-height:1.75;color:var(--wc-muted);max-width:900px}
.wcseo-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.wcseo-card{background:var(--wc-card);border:1px solid var(--wc-border);border-radius:16px;padding:24px;box-shadow:0 8px 24px rgba(16,42,67,.05)}
.wcseo-card h3{margin:0 0 10px;color:var(--wc-navy);font-size:1.12rem}
.wcseo-card p,.wcseo-card li{color:#51606f;line-height:1.7}
.wcseo-card ul{padding-left:20px}
.wcseo-toc{background:#f7f9fc;border:1px solid var(--wc-border);border-radius:16px;padding:22px;margin:26px 0}
.wcseo-toc strong{color:var(--wc-navy)}
.wcseo-toc a{color:var(--wc-blue);text-decoration:none}
.wcseo-toc ul{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 24px;margin:12px 0 0;padding-left:20px}
.wcseo-faq details{border-bottom:1px solid var(--wc-border);padding:16px 0}
.wcseo-faq summary{cursor:pointer;font-weight:750;color:var(--wc-navy)}
.wcseo-faq p{color:#536271;line-height:1.7;margin:10px 0 0}
.wcseo-table{width:100%;border-collapse:collapse;margin:20px 0;background:#fff;border:1px solid var(--wc-border);border-radius:12px;overflow:hidden}
.wcseo-table th,.wcseo-table td{padding:13px 15px;border-bottom:1px solid var(--wc-border);text-align:left;vertical-align:top}
.wcseo-table th{background:#f1f5f9;color:var(--wc-navy)}
.wcseo-note{border-left:4px solid var(--wc-blue);background:var(--wc-sky);padding:16px 18px;border-radius:8px;color:#34495e;margin:20px 0}
.wcseo-cta{background:linear-gradient(135deg,#102a43,#1f5eff);color:#fff;border-radius:20px;padding:34px;margin:30px 0}
.wcseo-cta h2,.wcseo-cta p{color:#fff}
.wcseo-links{display:flex;flex-wrap:wrap;gap:10px}
.wcseo-links a{display:inline-block;padding:9px 13px;border:1px solid var(--wc-border);border-radius:999px;text-decoration:none;color:var(--wc-blue);background:#fff}
.wcseo-badge{display:inline-block;padding:6px 10px;border-radius:999px;background:#eef4ff;color:#1f5eff;font-size:.78rem;font-weight:700}
@media(max-width:900px){.wcseo-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:620px){.wcseo-section{padding:42px 0}.wcseo-wrap{padding:0 16px}.wcseo-grid{grid-template-columns:1fr}.wcseo-toc ul{grid-template-columns:1fr}.wcseo-card{padding:20px}.wcseo-table{font-size:.92rem;display:block;overflow-x:auto;white-space:nowrap}}
