/* ===== Article detail — editorial layout ===== */
#read-progress{position:fixed;top:0;left:0;height:3px;width:0;background:linear-gradient(90deg,var(--pink),var(--red));z-index:9999;transition:width .08s linear}
.article-detail .container{max-width:1240px!important;margin:0 auto!important;padding:0 var(--gap)!important;box-sizing:border-box}
/* neutralize the wide side padding on the content wrapper */
.article-detail .content{width:auto!important;max-width:none!important;height:auto!important;padding-left:0!important;padding-right:0!important}
/* the article text flows as inline spans inside .body -> constrain .body to the reading measure */
.article-detail .body{max-width:650px!important;margin:0 auto!important;font-family:Jost!important;font-weight:300!important;font-size:17px!important;line-height:1.85!important;color:#454550!important}
.article-detail .body b{color:var(--stale-blue)!important}
.article-detail .body h3{font-family:CenturyGothic!important;font-weight:bold!important;font-size:26px!important;line-height:1.35!important;color:var(--stale-blue)!important;margin:46px 0 14px!important;scroll-margin-top:110px}
/* WordPress-block articles use <h2 class="wp-block-heading"> for sections — match the h3 section style so all articles render consistently */
.article-detail .body h2.wp-block-heading{font-family:CenturyGothic!important;font-weight:bold!important;font-size:26px!important;line-height:1.35!important;color:var(--stale-blue)!important;margin:46px 0 14px!important;scroll-margin-top:110px}
.article-detail .body h3.wp-block-heading{font-family:CenturyGothic!important;font-weight:bold!important;font-size:20px!important;line-height:1.4!important;color:var(--stale-blue)!important;margin:34px 0 10px!important;scroll-margin-top:110px}
.article-detail .body h4.wp-block-heading{font-family:CenturyGothic!important;font-weight:bold!important;font-size:17px!important;line-height:1.45!important;color:var(--stale-blue)!important;margin:28px 0 8px!important;scroll-margin-top:110px}
/* Table of Contents */
.article-detail .body .article-toc{display:block!important;position:static!important;float:none!important;width:auto!important;clear:both!important;box-sizing:border-box;margin:8px 0 34px!important;padding:20px 26px!important;background:#f7f8fa;border:1px solid #e9ecf1;border-radius:12px}
.article-detail .body .article-toc .toc-title{font-family:CenturyGothic!important;font-weight:bold!important;color:var(--stale-blue)!important;font-size:14px!important;letter-spacing:.06em;text-transform:uppercase;margin:0 0 12px!important;line-height:1.3!important}
.article-detail .body .article-toc ol{margin:0!important;padding-left:20px!important}
.article-detail .body .article-toc li{margin:0 0 8px!important;line-height:1.4!important;font-size:16px!important}
.article-detail .body .article-toc a{color:#454550!important;text-decoration:none;border-bottom:1px solid transparent;transition:color .15s,border-color .15s}
.article-detail .body .article-toc a:hover{color:var(--stale-blue)!important;border-bottom-color:var(--stale-blue)}
/* "On this page" sidebar TOC — desktop only (>=1280px). Below that it falls back
   to the inline box (the base .article-toc rule), so tablet/mobile are untouched. */
@media(min-width:1280px){
  /* aligned directly under the brand logo (logo sits at 3vw) */
  .article-detail .body .article-toc--side{position:fixed!important;top:150px;left:3vw!important;width:224px!important;max-height:76vh;overflow-y:auto;margin:0!important;padding:0!important;background:none!important;border:none!important;border-radius:0!important}
  .article-detail .body .article-toc--side .toc-title{color:#9a9aa3!important;font-family:CenturyGothic!important;font-size:12.5px!important;letter-spacing:.12em;margin:0 0 22px!important}
  .article-detail .body .article-toc--side ol{list-style:none!important;margin:0!important;padding:0 0 0 22px!important;border-left:2px solid #e2e3e8!important}
  .article-detail .body .article-toc--side li{margin:0 0 18px!important;font-size:15.5px!important;line-height:1.35!important}
  .article-detail .body .article-toc--side a{display:block;position:relative;color:#8c8c95!important;border:none!important;padding:0;transition:color .15s}
  .article-detail .body .article-toc--side a:hover{color:var(--stale-blue)!important}
  .article-detail .body .article-toc--side a.is-active{color:var(--stale-blue)!important;font-weight:500}
  /* active bar sits exactly on the 2px rail line */
  .article-detail .body .article-toc--side a.is-active::before{content:"";position:absolute;left:-32px;top:1px;bottom:1px;width:2px;background:var(--stale-blue);border-radius:1px}
}
.article-detail .body ol,.article-detail .body ul{padding-left:22px!important;margin:6px 0 22px!important}
.article-detail .body li{margin:0 0 9px!important}
/* title / meta / share (outside .body) share the same measure */
.article-detail h1{font-family:CenturyGothic!important;font-weight:bold!important;color:var(--stale-blue)!important;font-size:40px!important;line-height:1.18!important;max-width:650px!important;margin:0 auto 14px!important}
.article-detail .article-meta,.article-detail .article-share{max-width:650px!important;margin-left:auto!important;margin-right:auto!important}
.article-detail .article-meta{display:flex;gap:14px;align-items:center;color:#8b8b95;font-size:14px;font-family:Jost}
.article-detail .article-meta .cat{color:var(--pink);font-weight:500}
/* images break out wider than the text */
.article-detail img{width:100%!important;max-width:100%!important;margin:14px 0 30px!important;display:block!important;border-radius:18px!important;box-shadow:0 16px 44px rgba(20,30,50,.10)!important}
/* floating sticky table of contents */
.article-toc{position:fixed;top:150px;left:34px;width:200px;font-family:Jost;max-height:68vh;overflow:auto}
.article-toc .toc-h{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:#9a9aa3;margin:0 0 12px}
.article-toc a{display:block;padding:7px 0 7px 16px;border-left:2px solid #e6e6ec;color:#9a9aa3;font-size:13px;line-height:1.4;text-decoration:none;transition:.2s}
.article-toc a:hover{color:var(--stale-blue)}
.article-toc a.active{border-color:var(--pink);color:var(--stale-blue);font-weight:500}
@media(max-width:1380px){.article-toc{display:none}}
/* mid-article CTA */
.article-cta{max-width:650px!important;background:linear-gradient(135deg,#2b3550,#445471);color:#fff;border-radius:22px;padding:34px 38px;margin:48px auto!important;display:flex;flex-wrap:wrap;gap:18px;align-items:center;justify-content:space-between}
.article-cta h4{font-family:CenturyGothic;font-size:22px;margin:0 0 6px;color:#fff}
.article-cta p{color:rgba(255,255,255,.82)!important;margin:0!important;font-size:14.5px!important}
.article-cta a.cta-btn{background:#fff;color:var(--stale-blue);padding:12px 24px;border-radius:99px;font-family:Jost;font-weight:500;text-decoration:none;white-space:nowrap;transition:transform .2s}
.article-cta a.cta-btn:hover{transform:translateX(4px)}
/* share */
.article-share{display:flex;gap:10px;align-items:center;margin:6px auto 26px!important;font-family:Jost;color:#9a9aa3;font-size:14px}
.article-share button{border:1px solid #e0e0e6;background:#fff;border-radius:99px;padding:7px 15px;cursor:pointer;font-family:Jost;font-size:12.5px;color:var(--stale-blue);transition:.2s}
.article-share button:hover{border-color:var(--pink);color:var(--pink)}

/* align the WHOLE article column (breadcrumb, title, meta, share, image, body) to 650 */
.article-detail .container>*{max-width:650px!important;margin-left:auto!important;margin-right:auto!important}
.article-detail .body{max-width:none!important}

/* === refinements: breadcrumb, fonts, image, share icons === */
/* breadcrumb: clean single inline row */
.article-detail .breadcrumb{display:flex!important;flex-wrap:wrap;align-items:center;gap:8px;max-width:650px!important;margin:0 auto 22px!important;padding:0!important}
.article-detail .breadcrumb .list{display:inline-flex!important;align-items:center;gap:8px;margin:0!important;padding:0!important;width:auto!important}
.article-detail .breadcrumb .list a{font-family:Jost!important;font-size:13px!important;color:#9a9aa3!important;text-decoration:none!important;white-space:nowrap}
.article-detail .breadcrumb .list.active a{color:var(--pink)!important;white-space:normal}
.article-detail .breadcrumb .list svg{width:5px!important;height:9px!important;flex:none;opacity:.5}
.article-detail .breadcrumb .list svg path{stroke:#b9b9c2}
/* font sizes */
.article-detail h1{font-size:38px!important}
.article-detail .article-meta{font-size:14px!important}
.article-detail .article-meta .cat{font-size:14px!important}
.article-detail .article-share{font-size:13px!important;gap:8px!important;align-items:center}
/* image: same width as text (650) */
.article-detail .container>*{max-width:650px!important}
.article-detail .blog-image{width:100%!important;max-width:100%!important}
/* share as circular icon buttons */
.article-detail .article-share button{width:38px!important;height:38px!important;border-radius:50%!important;padding:0!important;display:inline-flex!important;align-items:center;justify-content:center;border:1px solid #e2e2e8!important;background:#fff!important;color:var(--stale-blue)!important;cursor:pointer;transition:.2s}
.article-detail .article-share button:hover{border-color:var(--pink)!important;color:var(--pink)!important;transform:translateY(-2px)}
.article-detail .article-share button.copied{border-color:#22c55e!important;color:#22c55e!important}

/* FINAL: lock content + body to the 650 column so the text aligns with the header/image */
.article-detail .content,.article-detail .body{max-width:650px!important;width:auto!important;margin-left:auto!important;margin-right:auto!important;padding-left:0!important;padding-right:0!important}

/* FINAL2: header inner content (breadcrumb, title, meta, share, image) fills the
   column and left-aligns, so it lines up with the body text below */
.article-detail .header{display:block!important;text-align:left!important;max-width:650px!important;margin:0 auto!important;padding:0!important;width:auto!important}
.article-detail .header>*{max-width:100%!important;width:auto!important;margin-left:0!important;margin-right:0!important;left:auto!important}
.article-detail .header>div{width:100%!important;display:block!important}
.article-detail .blog-image{width:100%!important;max-width:100%!important;height:auto!important}

/* clear the fixed navbar so the breadcrumb/title don't sit under it */
.article-detail{padding-top:130px!important}
@media(max-width:768px){.article-detail{padding-top:110px!important}}

/* spacing: around the meta separator and between "Share" and the icons */
.article-detail .article-meta{display:flex!important;gap:9px!important;align-items:center;flex-wrap:wrap}
.article-detail .article-share{display:flex!important;gap:13px!important;align-items:center}
.article-detail .article-share>span:first-child{margin-right:8px!important}

/* CTA: readable heading on the navy card + pink theme accent */
.article-detail .article-cta h4{color:#fff!important}
.article-detail .article-cta .cta-eyebrow{display:block!important;color:var(--pink)!important;font-family:Jost!important;font-weight:500!important;font-size:12px!important;letter-spacing:.14em!important;text-transform:uppercase!important;margin-bottom:9px!important}
.article-detail .article-cta a.cta-btn{color:var(--stale-blue)!important}

/* === list + paragraph cleanup (Word/Docs paste) === */
/* bare <span> paragraphs (intro prose AND the "Budget:" notes) -> real spaced paragraphs */
.article-detail .body>span{display:block!important;margin:0 0 18px!important}
/* numbered/bulleted lists: flush-aligned with the paragraphs, pink markers, even rhythm */
.article-detail .body ol,.article-detail .body ul{padding-left:1.4em!important;margin:4px 0 20px!important;list-style-position:outside!important}
.article-detail .body ol li,.article-detail .body ul li{margin:0 0 13px!important;padding-left:8px!important;line-height:1.8!important;color:#454550!important}
.article-detail .body ol li::marker{color:var(--pink)!important;font-weight:700!important;font-family:Jost!important}
.article-detail .body ul li::marker{color:var(--pink)!important}
.article-detail .body ol li b,.article-detail .body ul li b{color:var(--stale-blue)!important}
/* tighten the gap a single-item <ol> leaves before its budget note */
.article-detail .body ol+span{margin-top:-6px!important}

/* meta + share as an aligned 2-column grid: [label] [value], values left-aligned */
.article-detail .header>.article-meta,.article-detail .header>.article-share{display:grid!important;grid-template-columns:66px 1fr!important;column-gap:22px!important;align-items:center!important;max-width:650px!important;margin-left:auto!important;margin-right:auto!important}
.article-detail .article-meta{margin-bottom:12px!important}
.article-detail .article-meta .cat{color:var(--pink)!important;font-weight:500!important;justify-self:start}
.article-detail .article-meta .rt{color:#8b8b95!important;justify-self:start}
.article-detail .article-share .shlbl{color:#9a9aa3!important;justify-self:start}
.article-detail .article-share .share-btns{display:flex!important;gap:13px!important;align-items:center;justify-self:start}

/* hide the category data-marker injected for the meta */
.article-detail [data-article-category]{display:none!important}
/* category link in meta (keep pink, no underline) */
.article-detail .article-meta a.cat{color:var(--pink)!important;text-decoration:none!important;font-weight:500!important}
.article-detail .article-meta a.cat:hover{text-decoration:underline!important}

/* ===== Key Takeaways + FAQ (AEO blocks) ===== */
/* Quick answer — concise featured-snippet / AI-Overview target at the top of the article */
.article-detail .body .quick-answer{max-width:650px!important;margin:18px auto 22px!important;background:#fff!important;border:1px solid #eceef3!important;border-left:4px solid var(--pink)!important;border-radius:12px!important;padding:20px 26px!important;box-shadow:0 1px 3px rgba(20,30,55,.05)!important}
.article-detail .body .quick-answer .qa-label{font-family:CenturyGothic!important;font-weight:bold!important;font-size:12px!important;letter-spacing:.13em!important;text-transform:uppercase!important;color:var(--pink)!important;margin:0 0 8px!important}
.article-detail .body .quick-answer .qa-q{font-family:CenturyGothic!important;font-weight:bold!important;font-size:17px!important;line-height:1.4!important;color:var(--stale-blue)!important;margin:0 0 8px!important}
.article-detail .body .quick-answer .qa-a{font-family:Jost!important;font-weight:300!important;font-size:16px!important;line-height:1.7!important;color:#454550!important;margin:0!important}
.article-detail .body .key-takeaways{max-width:650px!important;margin:18px auto 30px!important;background:#f4f6fa!important;border-radius:14px!important;padding:24px 30px!important;box-shadow:0 1px 3px rgba(20,30,55,.06)!important}
.article-detail .body .key-takeaways h2{font-family:CenturyGothic!important;font-weight:bold!important;font-size:16px!important;letter-spacing:.09em!important;color:var(--stale-blue)!important;background:none!important;margin:0!important;padding:0!important;text-transform:uppercase!important}
.article-detail .body .key-takeaways ul:not(.spec-list){margin:10px 0 0!important;padding:0!important;list-style:none!important;counter-reset:kt!important}
.article-detail .body .key-takeaways ul:not(.spec-list)>li{counter-increment:kt!important;position:static!important;display:flex!important;gap:18px!important;align-items:baseline!important;margin:0!important;padding:15px 2px!important;border-top:1px solid rgba(20,30,55,.1)!important;font-family:Jost!important;font-size:15.5px!important;line-height:1.6!important;color:#454550!important}
.article-detail .body .key-takeaways ul:not(.spec-list)>li:first-child{border-top:0!important;padding-top:4px!important}
.article-detail .body .key-takeaways ul:not(.spec-list)>li::before{content:counter(kt,decimal-leading-zero)!important;position:static!important;background:none!important;width:auto!important;height:auto!important;transform:none!important;border-radius:0!important;left:auto!important;top:auto!important;flex:0 0 auto!important;font-family:CenturyGothic!important;font-weight:bold!important;font-size:15px!important;color:var(--pink)!important;letter-spacing:.02em!important;min-width:26px!important}
.article-detail .article-faq{max-width:650px!important;margin:46px auto 10px!important;border-top:1px solid #e7e8ec!important;padding-top:30px!important;counter-reset:faq!important}
.article-detail .article-faq h2{font-family:CenturyGothic!important;font-weight:bold!important;font-size:28px!important;color:var(--stale-blue)!important;margin:0 0 22px!important}
.article-detail .article-faq .faq-item{counter-increment:faq!important;position:relative!important;margin:0 0 22px!important;padding:0 0 22px 48px!important;border:0!important;border-bottom:1px solid #eef0f3!important;border-radius:0!important;background:none!important;box-shadow:none!important}
.article-detail .article-faq .faq-item:last-child{border-bottom:none!important;margin-bottom:0!important}
.article-detail .article-faq .faq-item::before{content:"Q" counter(faq)!important;position:absolute!important;left:0!important;top:1px!important;font-family:CenturyGothic!important;font-weight:bold!important;font-size:16px!important;color:var(--pink)!important;letter-spacing:.02em!important}
.article-detail .article-faq .faq-item h3{font-family:Jost!important;font-weight:500!important;font-size:18px!important;line-height:1.4!important;color:var(--stale-blue)!important;margin:0 0 8px!important}
.article-detail .article-faq .faq-item p{font-family:Jost!important;font-weight:300!important;font-size:16px!important;line-height:1.75!important;color:#454550!important;margin:0!important}

/* hide the TOC's internal scrollbar (it auto-follows the active section via JS) */
.article-toc{scrollbar-width:none!important;-ms-overflow-style:none!important;scroll-behavior:smooth}
.article-toc::-webkit-scrollbar{width:0!important;height:0!important;display:none!important}

/* ===== styled bullet lists (converted from Word-paste dash runs) ===== */
.article-detail .body ul.spec-list{list-style:none!important;padding-left:2px!important;margin:12px 0 26px!important}
.article-detail .body ul.spec-list li{position:relative!important;padding-left:26px!important;margin:0 0 11px!important;line-height:1.62!important;color:#454550!important;font-size:17px!important}
.article-detail .body ul.spec-list li::before{content:""!important;position:absolute!important;left:3px!important;top:.55em!important;width:8px!important;height:8px!important;background:linear-gradient(135deg,var(--pink),var(--red))!important;border-radius:2px!important;transform:rotate(45deg)!important}
.article-detail .body ul.spec-list li b.spec-name{color:var(--stale-blue)!important;font-weight:500!important}
.article-detail .body ul.spec-list .list-total{margin:2px 0 0!important;padding-left:26px!important;font-weight:600!important;color:var(--stale-blue)!important;font-size:17px!important}
/* give real <ul> bullets the same on-brand diamond for consistency */
.article-detail .body ul:not(.spec-list){list-style:none!important;padding-left:2px!important}
.article-detail .body ul:not(.spec-list)>li{position:relative!important;padding-left:26px!important}
.article-detail .body ul:not(.spec-list)>li::before{content:""!important;position:absolute!important;left:3px!important;top:.55em!important;width:8px!important;height:8px!important;background:linear-gradient(135deg,var(--pink),var(--red))!important;border-radius:2px!important;transform:rotate(45deg)!important}

/* ===== Related articles — refined horizontal carousel (contained) =====
   article.css is article-only; selectors target the related section directly. */
section.blog-list.blog-home{max-width:none!important;margin-top:54px!important;margin-bottom:0!important;margin-left:calc((100vw - 650px)/2)!important;margin-right:0!important;width:auto!important;padding:0!important;background:none!important}
section.blog-list.blog-home .container{max-width:none!important;width:auto!important;margin:0!important;padding:0!important}
section.blog-list.blog-home .header{margin:0!important;padding:34px 0 0!important;border-top:1px solid #e7e8ec!important}
section.blog-list.blog-home .header h5{font-family:CenturyGothic!important;font-weight:bold!important;font-size:28px!important;color:var(--stale-blue)!important;margin:0!important;letter-spacing:0!important;text-transform:none!important;line-height:1.2!important}
section.blog-list.blog-home .blog-container{display:flex!important;flex-direction:row!important;flex-wrap:nowrap!important;overflow-x:auto!important;overflow-y:hidden!important;gap:22px!important;padding:26px 0 12px!important;scroll-snap-type:x proximity!important;scrollbar-width:none!important;-ms-overflow-style:none!important;cursor:grab!important;-webkit-overflow-scrolling:touch!important}
section.blog-list.blog-home .blog-container::-webkit-scrollbar{display:none!important;height:0!important}
section.blog-list.blog-home .blog-card{flex:0 0 282px!important;min-width:282px!important;max-width:282px!important;width:282px!important;margin:0!important;background:none!important;box-shadow:none!important;border:0!important;border-radius:0!important;scroll-snap-align:start!important;display:block!important}
section.blog-list.blog-home .blog-card a{display:block!important;text-decoration:none!important}
section.blog-list.blog-home .blog-card .blog-image{display:block!important;width:100%!important;height:auto!important;aspect-ratio:4/3!important;object-fit:cover!important;border-radius:12px!important;min-height:0!important}
section.blog-list.blog-home .blog-content{padding:14px 2px 0!important}
section.blog-list.blog-home .blog-category{display:block!important;font-family:Jost!important;font-weight:400!important;font-size:12px!important;letter-spacing:.07em!important;text-transform:uppercase!important;color:var(--pink)!important}
section.blog-list.blog-home .blog-title{font-family:Jost!important;font-weight:500!important;font-size:16px!important;line-height:1.4!important;color:var(--stale-blue)!important;margin:7px 0 0!important}
section.blog-list.blog-home .blog-nav,section.blog-list.blog-home #prevBtn,section.blog-list.blog-home #nextBtn,section.blog-list.blog-home .prevBtn,section.blog-list.blog-home .nextBtn{display:none!important}