/* LinguaIndex Learn — SEO Authority Pages */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
body{font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;color:#1a1a2e;background:#fafafa;line-height:1.7;-webkit-font-smoothing:antialiased}
a{color:#6c5ce7;text-decoration:none}a:hover{text-decoration:underline}
img{max-width:100%;height:auto}

/* Layout */
.l-container{max-width:1140px;margin:0 auto;padding:0 24px}
.l-narrow{max-width:760px;margin:0 auto;padding:0 24px}

/* Header */
.l-header{background:#0d0d1a;border-bottom:1px solid #1a1a2e;position:sticky;top:0;z-index:100}
.l-header-inner{display:flex;align-items:center;justify-content:space-between;height:60px}
.l-logo{display:flex;align-items:center;gap:10px;color:#fff;font-weight:700;font-size:1.15rem}
.l-logo-icon{width:34px;height:34px;background:#6c5ce7;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:1.1rem;color:#fff}
.l-nav{display:flex;gap:24px;align-items:center}
.l-nav a{color:rgba(255,255,255,.7);font-size:.9rem;font-weight:500}
.l-nav a:hover{color:#fff;text-decoration:none}
.l-btn{display:inline-block;padding:8px 20px;background:#6c5ce7;color:#fff;border-radius:6px;font-weight:600;font-size:.88rem}
.l-btn:hover{background:#5a4bd1;text-decoration:none;color:#fff}
.l-btn-outline{background:transparent;border:2px solid #6c5ce7;color:#6c5ce7}
.l-btn-outline:hover{background:#6c5ce7;color:#fff}

/* Breadcrumb */
.l-breadcrumb{padding:16px 0;font-size:.85rem;color:#666}
.l-breadcrumb ol{list-style:none;display:flex;flex-wrap:wrap;gap:4px}
.l-breadcrumb li::after{content:'›';margin-left:8px;color:#ccc}
.l-breadcrumb li:last-child::after{content:''}
.l-breadcrumb a{color:#6c5ce7}

/* Pillar Badge */
.l-pillar-badge{display:inline-block;font-size:.82rem;font-weight:500;color:#666;margin-bottom:12px;padding:4px 12px;background:#f3f0ff;border-radius:6px;border:1px solid #e0d9ff}
.l-pillar-badge a{color:#6c5ce7;font-weight:600}

/* Article Header */
.l-article-header{padding:48px 0 32px;border-bottom:1px solid #e5e7eb}
.l-article-header h1{font-size:2.4rem;line-height:1.2;font-weight:800;color:#0d0d1a;margin-bottom:16px}
.l-article-meta{display:flex;gap:16px;flex-wrap:wrap;font-size:.85rem;color:#666}
.l-article-meta time{color:#999}

/* Table of Contents */
.l-toc{background:#f3f0ff;border:1px solid #e0d9ff;border-radius:8px;padding:24px 28px;margin:32px 0}
.l-toc h2{font-size:1rem;font-weight:700;margin-bottom:12px;color:#0d0d1a}
.l-toc ol{padding-left:20px}
.l-toc li{margin-bottom:6px;font-size:.9rem}
.l-toc a{color:#4a3db5;font-weight:500}

/* Article Body */
.l-body{padding:40px 0 60px}
.l-body h2{font-size:1.6rem;font-weight:700;margin:48px 0 16px;color:#0d0d1a;border-bottom:2px solid #e5e7eb;padding-bottom:8px}
.l-body h3{font-size:1.2rem;font-weight:600;margin:32px 0 12px;color:#1a1a2e}
.l-body p{margin-bottom:18px;color:#333;font-size:1.02rem}
.l-body ul,.l-body ol{margin-bottom:18px;padding-left:24px}
.l-body li{margin-bottom:8px;font-size:1rem;color:#333}
.l-body blockquote{border-left:4px solid #6c5ce7;padding:16px 20px;background:#f9f8ff;margin:24px 0;font-style:italic;color:#444}
.l-body code{background:#f3f0ff;padding:2px 6px;border-radius:4px;font-size:.9rem;color:#4a3db5}
.l-body pre{background:#0d0d1a;color:#e0e0e0;padding:20px;border-radius:8px;overflow-x:auto;margin:24px 0;font-size:.88rem;line-height:1.6}
.l-body .callout{background:#eef9ee;border:1px solid #b5e6b5;border-radius:8px;padding:16px 20px;margin:24px 0}
.l-body .callout-warn{background:#fff8ee;border-color:#f0d6a0}
.l-body table{width:100%;border-collapse:collapse;margin:24px 0}
.l-body th,.l-body td{border:1px solid #e5e7eb;padding:10px 14px;text-align:left;font-size:.92rem}
.l-body th{background:#f3f0ff;font-weight:600}

/* FAQ Section */
.l-faq{margin:48px 0;padding:32px;background:#f9f8ff;border-radius:12px;border:1px solid #e0d9ff}
.l-faq h2{font-size:1.4rem;font-weight:700;margin-bottom:20px;border:0;padding:0}
.l-faq details{border-bottom:1px solid #e0d9ff;padding:12px 0}
.l-faq details:last-of-type{border-bottom:0}
.l-faq summary{cursor:pointer;font-weight:600;font-size:1rem;color:#1a1a2e;padding:4px 0}
.l-faq details[open] summary{color:#6c5ce7}
.l-faq details p{margin-top:8px;color:#555;font-size:.95rem}

/* Internal Links / Related */
.l-related{margin:48px auto;padding:32px 24px;border-top:2px solid #e5e7eb;max-width:1140px}
.l-related h2{font-size:1.2rem;font-weight:700;margin-bottom:16px;border:0;padding:0}
.l-related-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.l-related-card{display:block;padding:20px;background:#fff;border:1px solid #e5e7eb;border-radius:8px;transition:border-color .2s}
.l-related-card:hover{border-color:#6c5ce7;text-decoration:none}
.l-related-card .pill{display:inline-block;font-size:.7rem;font-weight:600;padding:2px 8px;border-radius:99px;background:#f3f0ff;color:#6c5ce7;margin-bottom:8px}
.l-related-card h3{font-size:1rem;font-weight:600;color:#0d0d1a;margin-bottom:6px}
.l-related-card p{font-size:.85rem;color:#666;margin:0}

/* Hub Grid */
.l-hub-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:20px;margin:32px 0}
.l-hub-card{display:block;padding:28px;background:#fff;border:1px solid #e5e7eb;border-radius:10px;transition:all .2s}
.l-hub-card:hover{border-color:#6c5ce7;box-shadow:0 4px 20px rgba(108,92,231,.1);text-decoration:none}
.l-hub-card .pill{display:inline-block;font-size:.75rem;font-weight:600;padding:3px 10px;border-radius:99px;background:#f3f0ff;color:#6c5ce7;margin-bottom:12px}
.l-hub-card h2,.l-hub-card h3{font-size:1.15rem;font-weight:700;color:#0d0d1a;margin-bottom:8px}
.l-hub-card p{font-size:.9rem;color:#666;margin:0}

/* Cluster Article Sections (on pillar pages) */
.l-cluster-articles{margin:48px 0;padding:32px;background:#f9f8ff;border-radius:12px;border:1px solid #e0d9ff}
.l-cluster-articles h2{font-size:1.3rem;font-weight:700;margin-bottom:8px;border:0;padding:0}
.l-cluster-articles p{color:#555;font-size:.95rem;margin-bottom:16px}
.l-cluster-articles .l-hub-grid{margin:0}

/* Topic Cluster Sections (on hub page) */
.l-cluster-section{margin:32px 0 48px;padding:32px 0;border-top:1px solid #e5e7eb}
.l-cluster-heading{font-size:1.2rem;font-weight:700;margin-bottom:4px}
.l-cluster-heading a{color:#6c5ce7}

/* Conversion CTA Section */
.l-cta-section{max-width:760px;margin:0 auto 60px;padding:48px 40px;background:linear-gradient(135deg,#0d0d1a 0%,#1a1440 100%);border-radius:16px;text-align:center;color:#fff}
.l-cta-section h2{font-size:1.5rem;font-weight:800;margin-bottom:12px;color:#fff}
.l-cta-section p{font-size:1rem;color:rgba(255,255,255,.75);margin-bottom:28px;max-width:520px;margin-left:auto;margin-right:auto}
.l-cta-buttons{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.l-cta-buttons .l-btn{padding:12px 28px;font-size:.95rem}
.l-cta-buttons .l-btn-outline{border-color:rgba(255,255,255,.3);color:#fff}
.l-cta-buttons .l-btn-outline:hover{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.5)}

/* Footer */
.l-footer{background:#0d0d1a;color:rgba(255,255,255,.5);padding:40px 0;margin-top:60px;font-size:.85rem}
.l-footer-inner{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:16px}
.l-footer a{color:rgba(255,255,255,.6)}
.l-footer a:hover{color:#fff}
.l-footer-links{display:flex;gap:20px}

/* Hero for hub */
.l-hero{padding:56px 0 40px;background:linear-gradient(135deg,#0d0d1a 0%,#1a1440 100%);color:#fff}
.l-hero h1{font-size:2.6rem;font-weight:800;margin-bottom:12px}
.l-hero p{font-size:1.1rem;color:rgba(255,255,255,.7);max-width:600px}

@media(max-width:768px){
  .l-article-header h1{font-size:1.7rem}
  .l-hero h1{font-size:1.8rem}
  .l-nav{gap:12px}
  .l-hub-grid{grid-template-columns:1fr}
  .l-related-grid{grid-template-columns:1fr}
  .l-cta-section{padding:32px 24px}
  .l-cta-section h2{font-size:1.3rem}
}
