/* Final Blog Hub typography and spacing layer.
   Loaded after shared site systems so this page stays consistent without
   changing typography or section rhythm on any other route. */
body[data-page="blog"]{--blog-faq-surface:#f7f4ee}

html:root:root:root:root body[data-page="blog"][data-page="blog"] main #browse-title,
html:root:root:root:root body[data-page="blog"][data-page="blog"] main .faq-library-head h2{
  margin-inline:0!important;
  color:#123047!important;
  font-family:"Manrope","Noto Sans SC","Segoe UI",Arial,sans-serif!important;
  font-size:clamp(36px,3.3vw,48px)!important;
  font-weight:700!important;
  line-height:1.12!important;
  letter-spacing:-.035em!important;
  text-align:left!important;
}

html body[data-page="blog"] main .catalogue{
  padding:76px 0 72px!important;
}

html body[data-page="blog"] main .catalogue>.shell>.eyebrow{
  margin-bottom:12px;
  font-size:12px;
  font-weight:800;
  letter-spacing:.14em;
}

html body[data-page="blog"] main .catalogue-filter-row{
  margin-top:26px;
  margin-bottom:20px;
}

html body[data-page="blog"] main :is(.topic-filter,.faq-filter){
  font-size:14px!important;
  line-height:1.2!important;
  font-weight:750!important;
}

html body[data-page="blog"] main :is(.guide-count,.faq-result-count){
  font-size:13.5px!important;
  line-height:1.4!important;
  font-weight:650!important;
}

html:root:root:root:root body[data-page="blog"][data-page="blog"] main .guide-card h3{
  font-family:"Manrope","Noto Sans SC","Segoe UI",Arial,sans-serif!important;
  font-size:22px!important;
  font-weight:700!important;
  line-height:1.25!important;
  letter-spacing:-.025em!important;
}

html:root:root:root:root body[data-page="blog"][data-page="blog"] main .guide-summary{
  min-height:74px;
  margin:13px 0 18px;
  color:#354e5e!important;
  font-size:15px!important;
  font-weight:500!important;
  line-height:1.65!important;
}

html body[data-page="blog"] main .guide-category{
  margin-bottom:8px;
  font-size:11.5px!important;
  font-weight:800!important;
  line-height:1.35!important;
}

html body[data-page="blog"] main .guide-card-footer{
  font-size:12.5px;
  line-height:1.35;
}

html body[data-page="blog"] main .faq-library-section{
  padding:72px 0!important;
  background:var(--blog-faq-surface)!important;
}

html body[data-page="blog"] main .faq-library-panel{
  padding:52px 44px 44px;
  background:#fff;
}

html:root:root:root:root:root:root body[data-page="blog"][data-page="blog"] main #faqs.faq-library-section .faq-library-head p{
  max-width:720px;
  margin-top:13px;
  color:#536b7a!important;
  font-size:17px!important;
  font-weight:500!important;
  line-height:1.65!important;
  text-align:left!important;
}

html body[data-page="blog"] main .faq-library-head{
  margin-bottom:26px;
}

html:root:root:root:root:root:root body[data-page="blog"][data-page="blog"] main #faqs.faq-library-section .faq-item button{
  font-family:"Manrope","Noto Sans SC","Segoe UI",Arial,sans-serif!important;
  font-size:16px!important;
  font-weight:700!important;
  line-height:1.4!important;
  letter-spacing:-.012em!important;
}

html:root:root:root:root body[data-page="blog"][data-page="blog"] main .faq-answer p{
  color:#3f5664!important;
  font-size:15px!important;
  font-weight:500!important;
  line-height:1.65!important;
}

html body[data-page="blog"] main .faq-load-more-wrap{
  margin-top:30px;
}

html:root:root:root:root:root:root body[data-page="blog"][data-page="blog"] main .blog-final-cta.blog-final-cta .blog-final-cta-copy h2{
  font-family:"Manrope","Noto Sans SC","Segoe UI",Arial,sans-serif!important;
  font-size:clamp(30px,2.5vw,36px)!important;
  font-weight:800!important;
  line-height:1.12!important;
  letter-spacing:-.025em!important;
}

html:root:root:root:root:root:root body[data-page="blog"][data-page="blog"] main .blog-final-cta.blog-final-cta .blog-final-cta-copy>p:not(.eyebrow){
  margin-top:13px!important;
  color:#fff!important;
  font-size:16px!important;
  font-weight:600!important;
  line-height:1.55!important;
}

@media(max-width:960px){
  html body[data-page="blog"] main .catalogue{padding:64px 0 60px!important}
  html body[data-page="blog"] main .faq-library-section{padding:60px 0!important}
}

@media(max-width:640px){
  html:root:root:root:root body[data-page="blog"][data-page="blog"] main #browse-title,
  html:root:root:root:root body[data-page="blog"][data-page="blog"] main .faq-library-head h2{
    font-size:36px!important;
    line-height:1.12!important;
  }

  html body[data-page="blog"] main .catalogue{padding:56px 0 52px!important}
  html body[data-page="blog"] main .faq-library-section{padding:52px 0!important}
  html body[data-page="blog"] main .faq-library-panel{padding:36px 18px 34px}
  html:root:root:root:root:root:root body[data-page="blog"][data-page="blog"] main #faqs.faq-library-section .faq-library-head p{font-size:16px!important}
  html:root:root:root:root body[data-page="blog"][data-page="blog"] main .guide-card h3{font-size:23px!important}
  html:root:root:root:root body[data-page="blog"][data-page="blog"] main .guide-summary{min-height:0;font-size:15px!important}
  html:root:root:root:root:root:root body[data-page="blog"][data-page="blog"] main #faqs.faq-library-section .faq-item button{font-size:15.5px!important}
  html:root:root:root:root body[data-page="blog"][data-page="blog"] main .faq-answer p{font-size:14.5px!important}
  html:root:root:root:root:root:root body[data-page="blog"][data-page="blog"] main .blog-final-cta.blog-final-cta .blog-final-cta-copy h2{font-size:28px!important}
  html:root:root:root:root:root:root body[data-page="blog"][data-page="blog"] main .blog-final-cta.blog-final-cta .blog-final-cta-copy>p:not(.eyebrow){font-size:15px!important}
}

html:root:root:root:root body[data-page="blog"][data-page="blog"] main .blog-hero.blog-hero::before{content:none!important;background:none!important;background-image:none!important}

/* Keep the approved V2 Final CTA artwork available under both HTTP and file previews. */
html:root:root:root:root:root:root body[data-page="blog"][data-page="blog"] main .blog-final-cta.blog-final-cta{
  background:
    linear-gradient(90deg,rgba(3,21,36,.94) 0%,rgba(3,21,36,.88) 46%,rgba(3,21,36,.74) 100%),
    url('../images/banner.jpg') center 56%/cover no-repeat!important;
}

html body[data-page="blog"] main :is(#guides,#faqs){scroll-margin-top:150px}