/* Article V2 staging prototype. Scoped to .article-page--v2. */

.article-page--v2 { --v2-navy:#0b244d; --v2-blue:#0b3b82; --v2-soft:#f8f6f1; --v2-line:#d9d5cb; --v2-panel:#f4f1e9; --v2-panel-soft:#f8f6f1; --v2-accent:#294b3d; --v2-accent-soft:#e7eee9; }
.article-page--v2 .page-hero { padding:34px 0 22px; background:#fff; }
.article-v2-hero__shell { width:min(calc(100% - 96px),1400px); margin:0 auto; }
.article-page--v2 .page-hero .cta-note[aria-label="Breadcrumb"] { margin:0 0 30px; color:#607087; font-size:.86rem; }
.article-page--v2 .page-hero .eyebrow { display:none; }
.article-page--v2 .page-hero h1 { max-width:1040px; margin:0 0 14px; color:var(--v2-navy); font-size:clamp(3.15rem,4.6vw,4.85rem); line-height:1.01; letter-spacing:-.04em; }
.article-page--v2 .page-hero > .article-v2-hero__shell > .cta-note:last-child { margin:0; color:#65758a; font-size:.95rem; }

.article-page--v2 .article-v2-main { padding:18px 0 60px; }
.article-v2-shell { width:min(calc(100% - 96px),1400px); margin:0 auto; display:grid; grid-template-columns:minmax(0,1fr) clamp(220px,20vw,290px); gap:clamp(30px,3vw,42px); align-items:start; }
.article-v2-content { min-width:0; color:#243750; font-size:1.11rem; line-height:1.7; }
.article-v2-content > :first-child { margin-top:0; }
.article-v2-content > p,
.article-v2-content > h2,
.article-v2-content > h3,
.article-v2-content > ul,
.article-v2-content > ol,
.article-v2-content > blockquote,
.article-v2-content > .faq-list { max-width:900px; }
.article-v2-content p { margin-bottom:20px; }
.article-v2-content h2 { margin-top:40px; margin-bottom:12px; color:var(--v2-navy); font-size:2.08rem; line-height:1.1; letter-spacing:-.03em; }
.article-v2-content h3 { color:var(--v2-navy); font-size:1.42rem; line-height:1.2; }
.article-v2-content h2[id], .article-v2-content h3[id] { scroll-margin-top:102px; }

.article-v2-quick-answer { max-width:none!important; margin:0 0 22px!important; padding:24px 28px; border:1px solid rgba(41,75,61,.08); border-radius:9px; background:linear-gradient(135deg,var(--v2-panel-soft),var(--v2-panel)); box-shadow:none; color:#243750; }
.article-v2-quick-answer p { max-width:none!important; margin:0; font-size:1.08rem; line-height:1.66; }
.article-v2-quick-answer strong { display:block; margin-bottom:7px; color:var(--v2-accent); font-family:Georgia,"Times New Roman",serif; font-size:1.62rem; line-height:1.12; }

.article-v2-rail { position:sticky; top:94px; display:grid; grid-template-rows:max-content max-content; gap:18px; align-self:start; align-content:start; }
.article-v2-toc { max-height:calc(100vh - 118px); overflow-y:auto; overscroll-behavior:contain; padding:clamp(16px,1.4vw,20px) clamp(14px,1.25vw,18px) clamp(15px,1.25vw,18px); border:1px solid rgba(41,75,61,.08); border-radius:10px; background:linear-gradient(145deg,var(--v2-panel-soft),var(--v2-panel)); scrollbar-width:thin; }
.article-page--v2 .article-v2-toc__title { margin:0 0 14px; color:var(--v2-navy); font-family:Arial,sans-serif; font-size:clamp(1.02rem,1.15vw,1.22rem); font-weight:800; line-height:1.1; letter-spacing:-.025em; }
.article-v2-toc__list { margin:0; padding:0 0 0 16px; border-left:1px solid #cfd6d0; list-style:none; }
.article-v2-toc__list li { margin:0; }
.article-v2-toc__list a { position:relative; display:block; padding:clamp(5px,.5vw,7px) 0; color:#3e4c45; font-size:clamp(.78rem,.72vw,.89rem); line-height:1.32; text-decoration:none!important; }
.article-v2-toc__list a:hover,.article-v2-toc__list a:focus-visible { color:var(--v2-accent); }
.article-v2-toc__list a.is-active { color:var(--v2-accent); font-weight:700; }
.article-v2-toc__list a.is-active::before { content:""; position:absolute; left:-17px; top:4px; bottom:4px; width:2px; background:var(--v2-accent); }

/* The final TOC entry is the last narrative section because FAQ headings are excluded by the layout script. When it becomes active, hand the sticky rail from the TOC to the CTA so the CTA is immediately available beside the closing section and FAQs. */
@supports selector(:has(*)) {
 .article-v2-rail:has(.article-v2-toc__list li:last-child a.is-active) .article-v2-toc { display:none; }
}

.article-v2-cta { align-self:start; padding:20px 18px; border:1px solid rgba(41,75,61,.08); border-radius:10px; background:linear-gradient(145deg,var(--v2-panel-soft),var(--v2-panel)); box-shadow:0 8px 22px rgba(31,42,37,.04); }
.article-v2-cta__eyebrow { margin:0 0 7px!important; color:var(--v2-accent)!important; font-size:.7rem!important; font-weight:800; line-height:1.25!important; letter-spacing:.08em; text-transform:uppercase; }
.article-v2-cta h2 { margin:0 0 9px; color:var(--v2-navy); font-size:1.2rem; line-height:1.18; letter-spacing:-.02em; }
.article-v2-cta p { margin:0 0 14px; color:#536158; font-size:.87rem; line-height:1.48; }
.article-v2-cta .button { width:100%; min-height:46px; padding:12px 14px; border-radius:6px; font-size:.88rem; }

.article-v2-infographic { max-width:none!important; margin:28px 0 36px; }
.article-v2-infographic img { display:block; width:100%; height:auto; border:1px solid var(--v2-line); border-radius:8px; background:#fff; box-shadow:0 12px 30px rgba(31,42,37,.05); }

.article-v2-mobile-nav,.article-v2-mobile-cta { display:none; }

@media (max-width:1280px) {
 .article-v2-hero__shell,.article-v2-shell { width:min(calc(100% - 64px),1180px); }
 .article-v2-shell { grid-template-columns:minmax(0,1fr) clamp(220px,21vw,260px); gap:clamp(28px,3vw,36px); }
 .article-page--v2 .page-hero h1 { max-width:920px; font-size:clamp(2.8rem,4.2vw,4.1rem); }
}

@media (max-width:1040px) {
 .article-v2-hero__shell,.article-v2-shell { width:min(calc(100% - 48px),960px); }
 .article-v2-shell { grid-template-columns:minmax(0,1fr) clamp(210px,23vw,230px); gap:clamp(24px,3vw,30px); }
 .article-v2-content { font-size:1.05rem; }
 .article-v2-content h2 { font-size:1.85rem; }
}

@media (max-width:820px) {
 .article-v2-hero__shell { width:min(calc(100% - 36px),720px); }
 .article-page--v2 .page-hero { padding:20px 0 14px; }
 .article-page--v2 .page-hero .cta-note[aria-label="Breadcrumb"] { margin-bottom:22px; font-size:.75rem; }
 .article-page--v2 .page-hero h1 { font-size:clamp(2.15rem,9vw,3rem); line-height:1.04; }
 .article-page--v2 .article-v2-main { padding-top:16px; }
 .article-v2-shell { width:min(calc(100% - 36px),720px); display:block; }
 .article-v2-rail { display:none; }
 .article-v2-content { font-size:1.02rem; line-height:1.66; }
 .article-v2-content > p,.article-v2-content > h2,.article-v2-content > h3,.article-v2-content > ul,.article-v2-content > ol,.article-v2-content > blockquote,.article-v2-content > .faq-list { max-width:none; }
 .article-v2-content h2 { margin-top:34px; font-size:1.75rem; }
 .article-v2-quick-answer { padding:20px; }
 .article-v2-quick-answer strong { font-size:1.4rem; }
 .article-v2-mobile-nav { display:block; width:min(calc(100% - 36px),720px); margin:8px auto 4px; overflow:hidden; }
 .article-v2-mobile-nav__label { display:block; margin-bottom:8px; color:var(--v2-navy); font-size:.76rem; font-weight:800; text-transform:uppercase; letter-spacing:.08em; }
 .article-v2-mobile-nav__scroller { display:flex; gap:8px; overflow-x:auto; padding:0 0 10px; scrollbar-width:none; }
 .article-v2-mobile-nav__scroller::-webkit-scrollbar { display:none; }
 .article-v2-mobile-nav__scroller a { flex:0 0 auto; padding:8px 11px; border:1px solid var(--v2-line); border-radius:999px; color:#3e4c45; background:var(--v2-panel-soft); font-size:.78rem; line-height:1; text-decoration:none; white-space:nowrap; }
 .article-v2-mobile-nav__scroller a.is-active { border-color:#9fb2a6; color:var(--v2-accent); background:var(--v2-accent-soft); font-weight:700; }
 .article-v2-mobile-cta { display:block; margin-top:32px; padding:22px; border:1px solid rgba(41,75,61,.08); border-radius:8px; background:var(--v2-panel-soft); }
 .article-v2-mobile-cta h2 { margin:0 0 10px; color:var(--v2-navy); font-size:1.4rem; }
 .article-v2-mobile-cta .button { width:100%; }
 .article-v2-infographic { margin:24px 0 30px; }
 .article-v2-infographic img { box-shadow:none; }
}