:root{
  --seo-text:#17233f;
  --seo-muted:rgba(23,35,63,.76);
  --seo-card:rgba(255,255,255,.82);
  --seo-border:rgba(39,58,101,.14);
  --seo-accent:#6557e8;
}

/* Separate light theme for SEO article pages. */
.seo-light-page{
  background:
    radial-gradient(circle at 12% 8%, rgba(98,197,255,.22), transparent 34rem),
    radial-gradient(circle at 88% 4%, rgba(129,103,255,.18), transparent 34rem),
    #f5f8ff;
  color:var(--seo-text);
}

.seo-light-page .site-bg{
  opacity:.55;
}

.seo-light-page .navbar{
  background:rgba(247,250,255,.88);
  border-bottom:1px solid rgba(39,58,101,.10);
  box-shadow:0 8px 30px rgba(35,53,91,.07);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
}

.seo-light-page .logo strong,
.seo-light-page .logo small,
.seo-light-page .nav-links a{
  color:#17233f;
}

.seo-light-page .burger span{
  background:#17233f;
}

.article-page{
  padding:132px 0 88px;
  position:relative;
  z-index:2;
}

.article-shell{
  max-width:1040px;
  margin:0 auto;
}

.breadcrumbs{
  display:flex;
  gap:9px;
  flex-wrap:wrap;
  align-items:center;
  margin-bottom:24px;
  font-size:14px;
  color:var(--seo-muted);
}

.breadcrumbs a{
  color:var(--seo-muted);
  text-decoration:none;
}

.breadcrumbs a:hover{
  color:#111a30;
}

.article-hero{
  padding:38px;
  border:1px solid var(--seo-border);
  border-radius:30px;
  background:
    linear-gradient(145deg,rgba(255,255,255,.94),rgba(235,240,255,.88));
  box-shadow:0 22px 70px rgba(38,55,94,.14);
}

.article-kicker{
  display:inline-flex;
  padding:8px 13px;
  border-radius:999px;
  background:rgba(101,87,232,.12);
  color:#5849d5;
  font-size:13px;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.article-hero h1{
  color:#17233f !important;
  font-size:clamp(38px,6vw,68px);
  line-height:1.04;
  margin:18px 0;
}

.article-lead{
  font-size:clamp(18px,2.4vw,22px);
  line-height:1.65;
  color:var(--seo-muted) !important;
  max-width:880px;
}

.article-meta{
  margin-top:22px;
  color:rgba(23,35,63,.58) !important;
  font-size:14px;
}

.article-disclaimer{
  margin-top:22px;
  padding:16px 18px;
  border-left:3px solid var(--seo-accent);
  background:rgba(101,87,232,.075);
  border-radius:0 14px 14px 0;
  color:var(--seo-muted) !important;
  line-height:1.55;
}

.article-disclaimer a{
  color:#5142cb;
  font-weight:700;
}

.article-content{
  display:grid;
  grid-template-columns:minmax(0,1fr) 280px;
  gap:30px;
  margin-top:30px;
}

.article-main{
  display:grid;
  gap:22px;
}

.article-card,
.toc-card,
.related-card{
  padding:28px;
  border:1px solid var(--seo-border);
  border-radius:24px;
  background:var(--seo-card);
  box-shadow:0 14px 38px rgba(38,55,94,.08);
}

.article-card h2,
.article-card h3,
.toc-card h2,
.related-card h2,
.article-faq summary{
  color:#17233f !important;
}

.article-card h2{
  font-size:clamp(26px,3.5vw,38px);
  margin:0 0 13px;
}

.article-card h3{
  font-size:22px;
  margin:24px 0 10px;
}

.article-card p,
.article-card li,
.article-faq p{
  color:var(--seo-muted) !important;
  line-height:1.78;
}

.article-card ul,
.article-card ol{
  padding-left:22px;
  display:grid;
  gap:9px;
}

.article-card a{
  color:#5142cb;
}

.article-card code{
  color:#302591;
  padding:2px 7px;
  border-radius:7px;
  background:rgba(101,87,232,.10);
}

.article-aside{
  display:grid;
  align-content:start;
  gap:18px;
  position:sticky;
  top:112px;
  height:max-content;
}

.toc-card h2,
.related-card h2{
  font-size:18px;
  margin:0 0 13px;
}

.toc-card nav,
.related-card nav{
  display:grid;
  gap:10px;
}

.toc-card a,
.related-card a{
  color:var(--seo-muted);
  text-decoration:none;
  line-height:1.45;
}

.toc-card a:hover,
.related-card a:hover{
  color:#5142cb;
}

.fact-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px;
  margin-top:18px;
}

.fact{
  padding:18px;
  border:1px solid var(--seo-border);
  border-radius:18px;
  background:rgba(241,244,255,.78);
}

.fact strong{
  display:block;
  margin-bottom:6px;
  color:#17233f !important;
}

.fact span{
  color:var(--seo-muted) !important;
  line-height:1.5;
}

.article-actions{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  margin-top:20px;
}

.article-faq{
  display:grid;
  gap:12px;
}

.article-faq details{
  padding:18px 20px;
  border:1px solid var(--seo-border);
  border-radius:18px;
  background:rgba(245,247,255,.92);
}

.article-faq summary{
  cursor:pointer;
  font-weight:800;
}

.article-faq p{
  margin:12px 0 0;
}

/* Cards on the home page. These rules are neutral and readable on a light section. */
.cluster-section{
  padding:80px 0;
}

.cluster-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:18px;
}

.cluster-card{
  display:block;
  padding:25px;
  border:1px solid rgba(39,58,101,.13);
  border-radius:24px;
  background:rgba(255,255,255,.78);
  box-shadow:0 14px 34px rgba(38,55,94,.08);
  text-decoration:none;
  transition:.22s;
}

.cluster-card:hover{
  transform:translateY(-3px);
  border-color:rgba(101,87,232,.48);
}

.cluster-card small{
  color:#6557e8;
  font-weight:800;
  letter-spacing:.06em;
}

.cluster-card h3{
  color:#17233f !important;
  margin:10px 0;
}

.cluster-card p{
  color:rgba(23,35,63,.72) !important;
  line-height:1.6;
}

.seo-light-page .footer{
  color:#edf0ff;
}

@media(max-width:900px){
  .article-content{grid-template-columns:1fr}
  .article-aside{position:static}
  .cluster-grid{grid-template-columns:1fr}
  .fact-grid{grid-template-columns:1fr}
}

@media(max-width:620px){
  .article-page{padding-top:108px}
  .article-hero,.article-card{padding:22px}
}


/* Footer contrast fix for light SEO pages */
.seo-light-page .footer{
  color:#eef3ff !important;
}

.seo-light-page .footer .footer-glass{
  background:#102440 !important;
  border-color:rgba(255,255,255,.10) !important;
}

.seo-light-page .footer .footer-brand h3{
  color:#ffffff !important;
}

.seo-light-page .footer .footer-brand p,
.seo-light-page .footer .footer-bottom p{
  color:rgba(238,243,255,.78) !important;
}

.seo-light-page .footer .footer-links a{
  color:rgba(238,243,255,.84) !important;
}

.seo-light-page .footer .footer-links a:hover{
  color:#ffffff !important;
}

.seo-light-page .footer .btn-primary{
  color:#ffffff !important;
}

.seo-light-page .footer .footer-bottom{
  border-top-color:rgba(255,255,255,.12) !important;
}