/* Base tokens (--navy/--gold/etc.), nav, footer, .container, .btn-primary
   etc. all come from the site's real /style.css, loaded before this file —
   not duplicated here, so the blog never drifts from the rest of the site's
   look. BUT style.css never sets a body background — the main site avoids
   needing one because every section on those pages fills the viewport with
   its own dark background. The blog's layout has gaps that don't (e.g. the
   scroll-bounce/overscroll area), so without this the default white shows
   through the moment you scroll. */
/* overflow-x:clip, not :hidden — :hidden establishes a scroll container on
   body, which breaks position:sticky for .toc-col/.sidebar-col on this
   page; :clip blocks the same horizontal bleed without creating one. */
body{background:var(--navy);color:var(--white);font-family:'DM Sans',sans-serif;font-size:16px;line-height:1.65;overflow-x:clip}

/* Hide the default page scrollbar on blog pages — scrolling still works
   via wheel/keyboard/touch, just no visible native scrollbar track. */
html{scrollbar-width:none;overflow-x:clip}
html::-webkit-scrollbar{display:none}

/* ── Blog listing page ─────────────────────────────────────────────── */
.blog-hero{padding:80px 0 64px;background:var(--navy);position:relative;overflow:hidden;margin-top:0}
.blog-hero-inner{max-width:700px}
.blog-eyebrow{font-size:.65rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);margin-bottom:14px}
.blog-hero h1{font-family:"Fraunces",serif;font-size:clamp(2rem,4vw,2.8rem);font-weight:300;line-height:1.18;color:var(--white);margin:0 0 18px}
.blog-hero h1 em{font-style:italic;color:var(--gold)}
.blog-hero-sub{font-size:.95rem;color:var(--muted);line-height:1.7;max-width:540px;margin-bottom:32px}
.blog-search{display:flex;gap:0;max-width:480px;border:1px solid var(--border);border-radius:3px;overflow:hidden;background:var(--card)}
.blog-search input{flex:1;background:transparent;border:none;outline:none;padding:13px 18px;font-size:.88rem;color:var(--white);font-family:"DM Sans",sans-serif}
.blog-search button{background:var(--gold);border:none;padding:13px 20px;cursor:pointer;color:var(--navy);font-weight:700;font-size:.85rem}
.cat-bar{background:var(--navy2);border-bottom:1px solid var(--border);position:sticky;top:64px;z-index:90}
.cat-bar-inner{display:flex;gap:6px;padding:14px 0;overflow-x:auto;scrollbar-width:none}
.cat-pill{display:inline-flex;align-items:center;gap:6px;padding:6px 16px;border-radius:20px;border:1px solid var(--border);background:transparent;cursor:pointer;font-size:.76rem;font-weight:600;color:var(--muted);white-space:nowrap;text-decoration:none;font-family:"DM Sans",sans-serif}
.cat-pill .dot{width:7px;height:7px;border-radius:50%;flex-shrink:0;opacity:.7}
.cat-pill.active{color:var(--navy);font-weight:700}
.blog-layout{display:grid;grid-template-columns:1fr 320px;gap:40px;padding:48px 0 80px;align-items:start}
.blog-sidebar{position:sticky;top:120px}
.featured-card{border:1px solid rgba(201,168,76,.25);border-radius:6px;overflow:hidden;background:var(--card);margin-bottom:36px;display:grid;grid-template-columns:1fr 1fr;text-decoration:none}
.featured-img{background:linear-gradient(135deg,rgba(201,168,76,.08) 0%,rgba(10,15,30,.6) 100%);display:flex;align-items:center;justify-content:center;min-height:240px;position:relative;overflow:hidden}
.featured-img img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0}
.featured-img-icon{font-size:3.5rem;position:relative;z-index:1;opacity:.6}
.featured-body{padding:32px 28px;display:flex;flex-direction:column;justify-content:center}
.featured-label{font-size:.65rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--gold);margin-bottom:10px}
.featured-title{font-family:"Fraunces",serif;font-size:1.3rem;font-weight:300;line-height:1.3;color:var(--white);margin:0 0 14px}
.article-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.article-card{border:1px solid var(--border);border-radius:5px;padding:22px;background:var(--card);display:flex;flex-direction:column;text-decoration:none}
.ac-icon{font-size:1.3rem;margin-bottom:8px}
.ac-cat{font-size:.6rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;margin-bottom:8px}
.ac-title{font-family:"Fraunces",serif;font-size:1.05rem;font-weight:400;color:var(--white);margin-bottom:8px;line-height:1.35}
.ac-desc{font-size:.82rem;color:var(--muted);line-height:1.65;margin-bottom:12px}
.ac-meta{font-size:.7rem;color:var(--muted);margin-top:auto}
@media(max-width:1100px){.blog-layout{grid-template-columns:1fr 280px;gap:28px}}
@media(max-width:960px){.blog-layout{grid-template-columns:1fr}.blog-sidebar{position:static}.featured-card{grid-template-columns:1fr}.article-grid{grid-template-columns:1fr}}

/* ── Article page ──────────────────────────────────────────────────── */
.article-layout{display:grid;grid-template-columns:220px 1fr 300px;gap:0;min-height:100vh;align-items:start;background:var(--navy3);margin-top:64px}
.toc-col{position:sticky;top:72px;height:calc(100vh - 72px);overflow-y:auto;background:var(--navy2);border-right:1px solid rgba(201,168,76,.12);scrollbar-width:none}
.toc-col::-webkit-scrollbar{display:none}
.toc-header{padding:20px 20px 16px 24px;border-bottom:1px solid rgba(201,168,76,.12);background:rgba(201,168,76,.04);display:flex;align-items:center;gap:8px}
.toc-label{font-size:.6rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--gold)}
.toc-inner{padding:8px 0 20px}
.toc-list{list-style:none;display:flex;flex-direction:column;gap:0}
.toc-item{border-bottom:1px solid var(--border)}
.toc-item:last-child{border-bottom:none}
.toc-item a{display:flex;align-items:flex-start;gap:0;padding:0;text-decoration:none;border-left:3px solid transparent;transition:all .18s;position:relative;background:transparent}
.toc-item a:hover{border-left-color:rgba(201,168,76,.4);background:var(--border)}
.toc-item a.active{border-left-color:var(--gold);background:rgba(201,168,76,.07)}
.toc-item a.active .toc-num{color:var(--gold);font-weight:800}
.toc-item a.active .toc-text{color:var(--white);font-weight:600;font-size:.77rem}
.toc-num{font-size:.6rem;font-weight:700;color:var(--muted);flex-shrink:0;width:40px;padding:10px 0 10px 14px;transition:color .18s;letter-spacing:.04em}
.toc-item a:hover .toc-num{color:rgba(201,168,76,.5)}
.toc-text{font-size:.76rem;color:var(--muted);line-height:1.4;transition:color .18s;padding:10px 16px 10px 0;flex:1}
.toc-item a:hover .toc-text{color:var(--white2)}
.toc-item a.active::before{content:"";position:absolute;left:-3px;top:50%;transform:translateY(-50%);width:3px;height:70%;background:var(--gold);border-radius:0 2px 2px 0;box-shadow:0 0 8px rgba(201,168,76,.6);animation:tocGlow .8s ease-in-out infinite alternate}
@keyframes tocGlow{from{box-shadow:0 0 4px rgba(201,168,76,.4);opacity:.8}to{box-shadow:0 0 12px rgba(201,168,76,.8);opacity:1}}

.toc-back-top{display:flex;align-items:center;gap:6px;padding:10px 20px;margin-top:8px;font-size:.72rem;color:var(--muted);cursor:pointer;border-top:1px solid var(--border)}
.toc-back-top:hover{background:var(--border);color:var(--gold)}
.toc-back-top-icon{color:var(--gold)}
.toc-progress-mini{padding:14px 20px 4px;border-top:1px solid var(--border);margin-top:8px}
.toc-pct{display:flex;justify-content:space-between;font-size:.66rem;color:var(--muted);margin-bottom:6px}
.toc-pct-val{color:var(--gold);font-weight:700}
.toc-bar{height:3px;background:var(--border);border-radius:2px;overflow:hidden}
.toc-fill{height:100%;width:0%;background:var(--gold);transition:width .1s linear}

/* Reading progress bar (fixed, under the site nav) — `top` is a fallback
   only; JS overrides it live to track the nav's real height (the nav is
   injected async and its height changes between scrolled/unscrolled). */
#progressBarWrap{position:fixed;top:84px;left:0;right:0;z-index:150;height:4px;background:var(--border);pointer-events:none;transition:top .2s}
#progressBar{height:4px;width:0%;background:linear-gradient(90deg,var(--gold),var(--gold-light,#e8c96a));transition:width .1s linear;box-shadow:0 0 10px rgba(201,168,76,.8)}
#progressPct{position:fixed;top:92px;right:16px;z-index:150;font-size:.6rem;font-weight:700;color:var(--gold);background:rgba(10,15,30,.9);border:1px solid rgba(201,168,76,.3);border-radius:20px;padding:2px 9px;letter-spacing:.06em;opacity:0;transition:opacity .3s,top .2s;pointer-events:none}
#progressPct.show{opacity:1}

.article-col{padding:51px 56px 48px;max-width:none;border-right:1px solid var(--border)}
.article-breadcrumb{display:flex;align-items:center;gap:6px;font-size:.72rem;color:var(--muted);margin-bottom:16px}
.article-breadcrumb a{color:var(--muted);text-decoration:none}
.article-breadcrumb a:hover{color:var(--gold)}
.article-breadcrumb span{color:var(--muted)}
.article-hero{margin-bottom:40px;padding-bottom:32px;border-bottom:1px solid var(--border)}
.article-hero-img{border-radius:6px;overflow:hidden;position:relative;aspect-ratio:1200/630;min-height:180px;background:linear-gradient(135deg,rgba(201,168,76,.1),rgba(10,15,30,.7));margin-bottom:20px;display:flex;align-items:flex-end;padding:16px}
.article-hero-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.article-cat{position:relative;display:inline-block;font-size:.62rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;padding:4px 12px;border-radius:20px}
.article-title{font-family:"Fraunces",serif;font-size:clamp(1.6rem,3vw,2.2rem);font-weight:300;line-height:1.2;color:var(--white);margin:0 0 14px}
.article-standfirst{font-size:.98rem;color:var(--muted);line-height:1.72;margin-bottom:20px;font-style:italic;border-left:3px solid rgba(201,168,76,.3);padding-left:16px}
.article-meta{display:flex;align-items:center;gap:16px;flex-wrap:wrap;font-size:.76rem;color:var(--muted)}
.article-country-tags{display:flex;gap:7px;flex-wrap:wrap;margin-top:14px}
.actag{font-size:.68rem;font-weight:600;color:var(--muted);background:var(--border);border:1px solid var(--border);border-radius:3px;padding:3px 10px;text-decoration:none}
.actag:hover{color:var(--gold)}

.article-body{font-size:.94rem;line-height:1.85;color:var(--white2)}
.article-body h2{font-family:"Fraunces",serif;font-size:1.35rem;font-weight:300;color:var(--white);margin:44px 0 16px;scroll-margin-top:88px}
.article-body h3{font-family:"Fraunces",serif;font-size:1.1rem;font-weight:400;color:var(--white2);margin:28px 0 12px}
.article-body p{margin:0 0 18px}
.article-body strong{color:var(--white);font-weight:600}
.article-body a{color:var(--gold);text-decoration:none;border-bottom:1px solid rgba(201,168,76,.3)}
.article-body ul,.article-body ol{margin:0 0 18px;padding-left:0;list-style:none}
.article-body ul li,.article-body ol li{display:flex;gap:10px;margin-bottom:10px;font-size:.92rem;line-height:1.7}
.article-body ul li::before{content:"→";color:var(--gold);flex-shrink:0;font-weight:700;margin-top:1px}
.article-body ol{counter-reset:ol-counter}
.article-body ol li{counter-increment:ol-counter}
.article-body ol li::before{content:counter(ol-counter)".";color:var(--gold);flex-shrink:0;font-weight:700;min-width:20px}
.article-body ul ul,.article-body ul ol,.article-body ol ul,.article-body ol ol{margin:8px 0 0;padding-left:22px}
.pull-quote{border-left:3px solid var(--gold);padding:16px 20px;margin:28px 0;background:rgba(201,168,76,.04);border-radius:0 4px 4px 0}
.pull-quote p{font-family:"Fraunces",serif;font-size:1.05rem;font-style:italic;color:var(--gold);line-height:1.55;margin:0}

/* Rich-text block output (headings/blockquote/table/checklist authored via
   the portal's paragraph editor) — h2/h3/p/strong/a/ul/ol above already
   apply generically since they're descendant selectors. */
.article-body h1{font-family:"Fraunces",serif;font-size:1.65rem;font-weight:300;color:var(--white);margin:48px 0 18px;scroll-margin-top:88px}
.article-body blockquote{border-radius:4px;padding:18px 20px;margin:24px 0;background:rgba(201,168,76,.06);border:1px solid rgba(201,168,76,.25);color:var(--white2)}
.article-body blockquote p{margin:0}
.article-body table{width:100%;border-collapse:collapse;font-size:.83rem;margin:28px 0}
.article-body table th{background:rgba(201,168,76,.08);color:var(--gold);font-size:.68rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:12px 16px;text-align:left;border-bottom:1px solid var(--border)}
.article-body table td{padding:11px 16px;border-bottom:1px solid var(--border);color:var(--white2);vertical-align:top;line-height:1.5}
.article-body table tr:last-child td{border-bottom:none}
.article-body ul[data-type="taskList"]{list-style:none;padding-left:0}
.article-body ul[data-type="taskList"] li{display:flex;align-items:flex-start;gap:10px}
.article-body ul[data-type="taskList"] li::before{content:none}
.article-body ul[data-type="taskList"] li>label{display:flex;align-items:center;margin-top:2px}
.article-body ul[data-type="taskList"] li>label input[type="checkbox"]{accent-color:var(--gold);width:15px;height:15px}
.article-body ul[data-type="taskList"] li>div{flex:1}
.article-body ul[data-type="taskList"] li[data-checked="true"]>div{color:var(--muted);text-decoration:line-through}

.callout{border-radius:4px;padding:18px 20px;margin:24px 0;display:flex;gap:14px}
.callout-icon{font-size:1.1rem;flex-shrink:0;margin-top:1px}
.callout-title{font-size:.72rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;margin-bottom:6px}
.callout-text{font-size:.85rem;line-height:1.65}
.callout.warning{background:rgba(248,113,113,.06);border:1px solid rgba(248,113,113,.25)}
.callout.warning .callout-title{color:#f87171}
.callout.warning .callout-text{color:rgba(248,113,113,.85)}
.callout.tip{background:rgba(201,168,76,.06);border:1px solid rgba(201,168,76,.25)}
.callout.tip .callout-title{color:var(--gold)}
.callout.tip .callout-text{color:rgba(201,168,76,.85)}
.callout.info{background:rgba(96,165,250,.06);border:1px solid rgba(96,165,250,.25)}
.callout.info .callout-title{color:#60a5fa}
.callout.info .callout-text{color:rgba(96,165,250,.85)}

.comp-table-wrap{overflow-x:auto;margin:28px 0;border-radius:5px;border:1px solid var(--border)}
.comp-table{width:100%;border-collapse:collapse;font-size:.83rem}
.comp-table th{background:rgba(201,168,76,.08);color:var(--gold);font-size:.68rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:12px 16px;text-align:left;border-bottom:1px solid var(--border);white-space:nowrap}
.comp-table td{padding:11px 16px;border-bottom:1px solid var(--border);color:var(--white2);vertical-align:top;line-height:1.5}
.comp-table tr:last-child td{border-bottom:none}
.comp-table tr.hl td{background:rgba(201,168,76,.04)}
.comp-table td.good{color:#4ade80;font-weight:600}
.comp-table td.warn{color:#f87171;font-weight:600}
.comp-table td.neu{color:var(--muted)}

.mid-cta{background:linear-gradient(135deg,rgba(201,168,76,.1),rgba(201,168,76,.04));border:1px solid rgba(201,168,76,.3);border-radius:5px;padding:22px 24px;margin:36px 0;display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap}
.mid-cta-eyebrow{font-size:.62rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--gold);margin-bottom:4px}
.mid-cta-title{font-size:.95rem;font-weight:600;color:var(--white);line-height:1.3}
.mid-cta-sub{font-size:.78rem;color:var(--muted);margin-top:4px}

.takeaways{background:var(--card);border:1px solid var(--border);border-radius:5px;padding:24px;margin:40px 0 28px}
.takeaways-title{font-size:.68rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--gold);margin-bottom:14px}
.takeaways ul{list-style:none;display:flex;flex-direction:column;gap:9px;margin:0;padding:0}
.takeaways ul li{display:flex;gap:10px;font-size:.85rem;color:var(--white2);line-height:1.55}
.takeaways ul li::before{content:"✓";color:#4ade80;flex-shrink:0;font-weight:700}

.faq-item{border-bottom:1px solid var(--border)}
.faq-q{display:flex;justify-content:space-between;align-items:center;padding:15px 0;font-size:.86rem;font-weight:600;color:var(--white);cursor:pointer;gap:12px}
.faq-icon{color:var(--gold);font-size:1.1rem;transition:transform .2s}
.faq-item.open .faq-icon{transform:rotate(45deg)}
.faq-a{display:none;padding:0 0 15px;font-size:.81rem;color:var(--muted);line-height:1.78}
.faq-item.open .faq-a{display:block}

.author-bio{display:flex;gap:18px;align-items:flex-start;padding:24px;background:var(--card);border:1px solid var(--border);border-radius:5px;margin:28px 0}
.author-avatar{font-size:1.6rem;flex-shrink:0}
.author-name{font-size:.88rem;font-weight:700;color:var(--white)}
.author-creds{font-size:.72rem;color:var(--gold);margin:4px 0 8px}
.author-desc{font-size:.79rem;color:var(--muted);line-height:1.65}

.share-bar{display:flex;align-items:center;gap:10px;padding:20px 0;border-top:1px solid var(--border);border-bottom:1px solid var(--border);margin:28px 0;flex-wrap:wrap}
.share-label{font-size:.72rem;color:var(--muted);font-weight:600}
.share-btn{display:flex;align-items:center;gap:6px;font-size:.76rem;color:var(--white2);text-decoration:none;padding:7px 14px;border:1px solid var(--border);border-radius:20px;background:none;cursor:pointer;font-family:"DM Sans",sans-serif}
.share-btn:hover{border-color:var(--gold);color:var(--gold)}
.share-btn.wa{color:#4ade80;border-color:rgba(74,222,128,.25)}
.share-btn.wa:hover{border-color:#4ade80;color:#4ade80;background:rgba(74,222,128,.08)}

.sidebar-col{position:sticky;top:72px;height:calc(100vh - 72px);overflow-y:auto;padding:28px 28px 28px 24px;scrollbar-width:thin;scrollbar-color:rgba(201,168,76,.2) transparent}
.sidebar-col::-webkit-scrollbar{width:3px}
.sidebar-col::-webkit-scrollbar-thumb{background:rgba(201,168,76,.2);border-radius:20px}
.sb-cta{position:relative;overflow:hidden;border-radius:6px;padding:24px;margin-bottom:18px;text-align:center;background:var(--navy);border:1px solid rgba(201,168,76,.35)}
.sb-cta::before{content:"";position:absolute;inset:0;background:linear-gradient(135deg,rgba(201,168,76,.18) 0%,rgba(201,168,76,.06) 50%,rgba(10,15,30,0) 100%);pointer-events:none}
.sb-cta::after{content:"";position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent,var(--gold),transparent)}
.sb-cta-glow{position:absolute;top:-40px;left:50%;transform:translateX(-50%);width:200px;height:200px;background:radial-gradient(circle,rgba(201,168,76,.12) 0%,transparent 70%);pointer-events:none}
.sb-cta-eyebrow{position:relative;font-size:.6rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);margin-bottom:10px;display:flex;align-items:center;justify-content:center;gap:6px}
.sb-cta-eyebrow::before,.sb-cta-eyebrow::after{content:"";flex:1;height:1px;background:rgba(201,168,76,.2);max-width:30px}
.sb-cta-title{font-family:"Fraunces",serif;font-size:1.05rem;font-weight:300;color:var(--white);line-height:1.3;margin-bottom:6px}
.sb-cta-sub{font-size:.74rem;color:var(--muted);margin-bottom:18px;line-height:1.6}
.sb-cta-btn{display:block;width:100%;padding:12px;background:var(--gold);color:var(--navy);font-size:.8rem;font-weight:700;border:none;border-radius:4px;cursor:pointer;text-decoration:none;text-align:center;font-family:"DM Sans",sans-serif;letter-spacing:.04em;transition:opacity .2s;margin-bottom:10px}
.sb-cta-btn:hover{opacity:.88}
.sb-cta-wa{display:flex;align-items:center;justify-content:center;gap:7px;font-size:.74rem;color:#4ade80;text-decoration:none;padding:8px;border-radius:3px;border:1px solid rgba(74,222,128,.2);background:rgba(74,222,128,.04);transition:all .2s}
.sb-cta-wa:hover{background:rgba(74,222,128,.08);border-color:rgba(74,222,128,.35)}
.sb-cta-trust{display:flex;align-items:center;justify-content:center;gap:12px;margin-top:12px;flex-wrap:wrap}
.sb-cta-trust span{font-size:.62rem;color:var(--muted);display:flex;align-items:center;gap:4px}
.sb-cta-trust span em{color:#4ade80;font-style:normal;font-weight:700}
.sb-stats{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--border);border-radius:5px;overflow:hidden;margin-bottom:16px;border:1px solid var(--border)}
.sb-stat-item{background:var(--navy3);padding:14px;text-align:center}
.sb-stat-val{font-family:"Fraunces",serif;font-size:1.1rem;color:var(--gold)}
.sb-stat-lbl{font-size:.62rem;color:var(--muted);text-transform:uppercase;letter-spacing:.06em}
.sb-widget{border:1px solid var(--border);border-radius:5px;background:var(--card);margin-bottom:14px;overflow:hidden}
.sb-widget-header{padding:14px 16px 0;display:flex;align-items:center;gap:8px}
.sb-widget-icon{font-size:.95rem}
.sb-widget-title{font-size:.62rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--gold)}
.sb-widget-body{padding:12px 16px 16px}
.sb-related-item{display:flex;gap:10px;padding:10px 0;border-bottom:1px solid var(--border);text-decoration:none}
.sb-related-item:last-child{border-bottom:none}
.sb-ri-title{font-size:.79rem;color:var(--white2);line-height:1.4}
.sb-country-tags{display:flex;flex-wrap:wrap;gap:6px}
.sb-ctag{font-size:.72rem;color:var(--muted);border:1px solid var(--border);border-radius:20px;padding:4px 10px;text-decoration:none}
.sb-cat-row{display:flex;align-items:center;gap:8px;padding:8px 0;text-decoration:none;border-bottom:1px solid var(--border)}
.sb-cat-row:last-child{border-bottom:none}
.sb-cat-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.sb-cat-name{font-size:.79rem;color:var(--muted);flex:1}
.sb-cat-cnt{font-size:.65rem;color:var(--muted);background:var(--border);border-radius:20px;padding:1px 7px}

.related-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:24px}
.related-card{border:1px solid var(--border);border-radius:4px;padding:16px;text-decoration:none;background:var(--card)}
.rc-icon{font-size:1.3rem;margin-bottom:6px}
.rc-name{font-size:.82rem;font-weight:600;color:var(--white);margin-bottom:3px}
.rc-desc{font-size:.72rem;color:var(--muted);line-height:1.55}

/* ── Mobile TOC floating button + bottom drawer (replaces the sidebar
   TOC once it's hidden below 1024px) ── */
.toc-mobile-btn{display:none;position:fixed;bottom:24px;left:20px;z-index:200;width:48px;height:48px;border-radius:50%;background:var(--gold);border:none;cursor:pointer;align-items:center;justify-content:center;font-size:.75rem;font-weight:800;color:var(--navy);box-shadow:0 4px 16px rgba(201,168,76,.35);font-family:"DM Sans",sans-serif;flex-direction:column;line-height:1;transition:transform .15s}
.toc-mobile-btn:hover{transform:scale(1.05)}
.toc-mobile-btn span{font-size:.55rem;text-transform:uppercase;letter-spacing:.06em}
.toc-drawer{position:fixed;bottom:0;left:0;right:0;z-index:300;background:var(--navy2);border-top:1px solid var(--border);border-radius:16px 16px 0 0;padding:20px 24px 32px;transform:translateY(100%);transition:transform .28s cubic-bezier(.4,0,.2,1);max-height:70vh;overflow-y:auto}
.toc-drawer.open{transform:translateY(0)}
.toc-drawer-handle{width:36px;height:3px;background:var(--muted);border-radius:20px;margin:0 auto 18px}
.toc-drawer-title{font-size:.65rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--gold);margin-bottom:14px}
.toc-drawer-list{list-style:none;display:flex;flex-direction:column;gap:0}
.toc-drawer-item a{display:flex;align-items:flex-start;gap:10px;padding:11px 0;border-bottom:1px solid var(--border);text-decoration:none;color:var(--muted);font-size:.84rem;line-height:1.4;transition:color .15s}
.toc-drawer-item:last-child a{border-bottom:none}
.toc-drawer-item a:hover,.toc-drawer-item a.active{color:var(--white)}
.toc-drawer-overlay{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:299;display:none}
.toc-drawer-overlay.open{display:block}

/* minmax(0,1fr) everywhere here, not bare 1fr — a bare 1fr track has an
   implicit auto minimum, so it refuses to shrink below its content's
   min-content width (a nowrap table header, a long link, etc.) and the
   whole grid silently overflows its container on narrow screens, cutting
   off text/images at the edge instead of wrapping. minmax(0,1fr) removes
   that floor so the column actually shrinks to fit. */
@media(max-width:1200px){.article-layout{grid-template-columns:180px minmax(0,1fr) 260px}}
@media(max-width:1024px){
  .article-layout{grid-template-columns:minmax(0,1fr) 260px}
  .toc-col{display:none}
  .toc-mobile-btn{display:flex}
}
/* ── "Start Now" onboarding modal — dynamic per jurisdiction ──────
   Self-contained dark component (background + text colours are fixed
   together, not tied to the page's light/dark variables), opened by any
   .js-start-reg element via onboarding-modal.js. */
.cvm-overlay{position:fixed;inset:0;background:rgba(4,7,16,.82);backdrop-filter:blur(6px);z-index:100000;display:none;align-items:center;justify-content:center;padding:20px}
.cvm-overlay.open{display:flex}
.cvm{width:100%;max-width:520px;max-height:92vh;overflow-y:auto;background:linear-gradient(180deg,#111731,#0b1024);border:1px solid rgba(201,168,76,.4);border-radius:14px;box-shadow:0 30px 90px rgba(0,0,0,.6);position:relative}
.cvm-top{padding:20px 24px 0}
.cvm-row{display:flex;align-items:center;gap:12px}
.cvm-step{font-family:'DM Sans',sans-serif;font-size:.72rem;font-weight:700;letter-spacing:1.6px;color:#c9a84c;text-transform:uppercase}
.cvm-x{margin-left:auto;background:none;border:none;color:rgba(255,255,255,.5);font-size:1.5rem;line-height:1;cursor:pointer;padding:0 4px}
.cvm-x:hover{color:#f5f3ee}
.cvm-prog{display:flex;gap:6px;margin:14px 0 4px}
.cvm-seg{flex:1;height:3px;border-radius:2px;background:rgba(255,255,255,.12)}
.cvm-seg.on{background:#c9a84c}
.cvm-body{padding:18px 24px 24px}
.cvm-h{font-family:'Fraunces',Georgia,serif;font-size:1.5rem;color:#f5f3ee;margin:0 0 6px;line-height:1.25}
.cvm-sub{font-family:'DM Sans',sans-serif;font-size:.84rem;color:#a9b0c4;margin:0 0 18px;line-height:1.6}
.cvm-opt{display:block;width:100%;text-align:left;padding:14px 16px;margin-bottom:10px;border-radius:8px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.12);cursor:pointer;transition:.15s;font-family:'DM Sans',sans-serif}
.cvm-opt:hover{border-color:rgba(201,168,76,.55);background:rgba(201,168,76,.07)}
.cvm-opt.sel{border-color:#c9a84c;background:rgba(201,168,76,.12)}
.cvm-opt-t{font-size:.95rem;font-weight:600;color:#f5f3ee;display:flex;align-items:center;gap:8px}
.cvm-opt-d{font-size:.78rem;color:#a9b0c4;margin-top:3px;line-height:1.5}
.cvm-tag{font-size:.62rem;font-weight:700;letter-spacing:.8px;text-transform:uppercase;padding:3px 8px;border-radius:20px;background:rgba(201,168,76,.2);color:#c9a84c}
.cvm-lbl{display:block;font-family:'DM Sans',sans-serif;font-size:.76rem;font-weight:600;color:#a9b0c4;margin:0 0 6px;letter-spacing:.3px}
.cvm-in{width:100%;padding:12px 14px;margin-bottom:14px;border-radius:7px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.14);color:#f5f3ee;font-family:'DM Sans',sans-serif;font-size:.92rem;box-sizing:border-box}
.cvm-in:focus{outline:none;border-color:#c9a84c;background:rgba(201,168,76,.06)}
.cvm-in::placeholder{color:rgba(255,255,255,.3)}
textarea.cvm-in{resize:vertical;min-height:74px;line-height:1.55;font-family:'DM Sans',sans-serif}
select.cvm-in{appearance:none;cursor:pointer}
select.cvm-in option{background:#111731;color:#f5f3ee}
.cvm-hint{font-family:'DM Sans',sans-serif;font-size:.72rem;color:#8b93a8;margin:-8px 0 14px;line-height:1.55}
.cvm-err{border-color:#f87171!important}
.cvm-btn{width:100%;padding:14px;border-radius:7px;background:#c9a84c;color:#0a0f1e!important;border:none;font-family:'DM Sans',sans-serif;font-size:.92rem;font-weight:700;letter-spacing:.4px;cursor:pointer;transition:.15s}
.cvm-btn:hover{background:#e3c46b}
.cvm-btn[disabled]{opacity:.45;cursor:not-allowed}
.cvm-back{background:none;border:none;color:#a9b0c4;font-family:'DM Sans',sans-serif;font-size:.82rem;cursor:pointer;padding:10px 0 0;display:block;margin:0 auto}
.cvm-back:hover{color:#f5f3ee}
.cvm-note{font-family:'DM Sans',sans-serif;font-size:.72rem;color:#8b93a8;text-align:center;margin-top:14px;line-height:1.6}
.cvm-alt{display:flex;align-items:center;gap:10px;margin-top:16px}
.cvm-alt a{flex:1;text-align:center;padding:11px;border-radius:7px;border:1px solid rgba(255,255,255,.16);color:#a9b0c4!important;font-family:'DM Sans',sans-serif;font-size:.82rem;text-decoration:none!important}
.cvm-alt a:hover{border-color:rgba(201,168,76,.5);color:#f5f3ee!important}
.cvm-done{text-align:center;padding:14px 0}
.cvm-tick{width:56px;height:56px;border-radius:50%;background:rgba(74,222,128,.14);border:2px solid #4ade80;display:flex;align-items:center;justify-content:center;margin:0 auto 16px;font-size:1.6rem;color:#4ade80}
@media(max-width:560px){.cvm{max-width:100%;border-radius:12px}.cvm-h{font-size:1.28rem}}

/* ── Sticky "Start Now" bar ────────────────────────────────────────
   Same self-contained dark treatment as the modal above. Reveals once
   the reader has scrolled past the intro, hides near the footer, and
   stays dismissed for the rest of the session once closed. */
.cv-sticky{position:fixed;left:0;right:0;bottom:0;z-index:9500;transform:translateY(110%);transition:transform .3s ease;
  background:linear-gradient(180deg,#131a33,#0b1024);border-top:1px solid rgba(201,168,76,.45);
  box-shadow:0 -8px 32px rgba(0,0,0,.45)}
.cv-sticky.show{transform:translateY(0)}
.cv-sticky-in{max-width:1180px;margin:0 auto;padding:13px 22px;display:flex;align-items:center;gap:18px}
.cv-sticky-txt{flex:1;min-width:0}
.cv-sticky-t{font-family:'DM Sans',sans-serif;font-size:.92rem;font-weight:700;color:#f5f3ee;line-height:1.35}
.cv-sticky-s{font-family:'DM Sans',sans-serif;font-size:.78rem;color:#a9b0c4;margin-top:2px;line-height:1.45}
.cv-sticky-btn{flex-shrink:0;padding:12px 24px;border-radius:5px;background:#c9a84c;color:#0a0f1e!important;
  font-family:'DM Sans',sans-serif;font-size:.85rem;font-weight:700;letter-spacing:.3px;text-decoration:none!important;
  white-space:nowrap;transition:background .15s}
.cv-sticky-btn:hover{background:#e3c46b}
.cv-sticky-x{flex-shrink:0;background:none;border:none;color:rgba(255,255,255,.4);font-size:1.35rem;line-height:1;
  cursor:pointer;padding:0 2px}
.cv-sticky-x:hover{color:#f5f3ee}
@media(max-width:700px){
  .cv-sticky-in{padding:11px 14px;gap:11px}
  .cv-sticky-s{display:none}
  .cv-sticky-t{font-size:.82rem}
  .cv-sticky-btn{padding:11px 16px;font-size:.8rem}
}

@media(max-width:960px){
  .article-layout{grid-template-columns:minmax(0,1fr)}
  .sidebar-col{position:static;height:auto}
  .article-col{padding:28px 20px;border-right:none;min-width:0}
  .related-grid{grid-template-columns:1fr 1fr}
}