/* VaultX — resource article layout (VLTX-ART-01) */
/* Loaded after /styles.css. Scoped to article pages only. */

/* ---- Reading progress bar ---- */
.readbar{position:fixed; top:0; left:0; width:100%; height:3px; background:transparent; z-index:60; pointer-events:none}
.readbar i{display:block; height:100%; width:0%; background:var(--yellow)}

/* ---- Article header (dark band) ---- */
.art-head{background:var(--black); color:#fff; padding:40px 0 36px}
.art-head .wrap{max-width:820px}
.breadcrumb{font-size:12px; letter-spacing:.06em; color:var(--gray); margin:0 0 18px; display:flex; align-items:center; gap:8px; flex-wrap:wrap}
.breadcrumb a{color:var(--gray); text-decoration:none}
.breadcrumb a:hover{color:var(--yellow)}
.breadcrumb span.sep{color:#4a5158}
.breadcrumb span[aria-current]{color:#cfd3d8}
.art-head .eyebrow{margin-bottom:14px}
.art-head h1{color:#fff; font-size:clamp(30px,5vw,48px); margin-bottom:16px}
.art-dek{color:#c9ccd1; font-size:clamp(16px,2vw,19px); max-width:64ch; margin:0 0 18px; font-family:Inter,system-ui,sans-serif}
.art-meta{color:var(--gray); font-size:12.5px; letter-spacing:.06em; margin:0}

/* ---- Body layout ---- */
.art-bodywrap{background:var(--paper)}
.art-body{padding-top:48px}
.art-grid{display:grid; grid-template-columns:1fr; gap:40px; align-items:start}
@media(min-width:1024px){
  .art-grid{grid-template-columns:minmax(0,68ch) 300px; gap:56px; justify-content:space-between}
}
.art-main{max-width:68ch; min-width:0}

/* ---- Key takeaways ---- */
.takeaways{background:var(--white); border:1px solid var(--line); border-left:4px solid var(--yellow); border-radius:10px; padding:22px 24px; margin:0 0 32px}
.takeaways .label{margin:0 0 10px; font-size:11px; letter-spacing:.14em; color:var(--gray); font-weight:600}
.takeaways ul{margin:0; padding-left:1.15em}
.takeaways li{color:var(--ink); font-size:15.5px; line-height:1.6; margin:0 0 8px}
.takeaways li:last-child{margin-bottom:0}

/* ---- Mobile TOC (details) ---- */
.toc-mobile{display:block; background:var(--white); border:1px solid var(--line); border-radius:10px; margin:0 0 32px; overflow:hidden}
.toc-mobile summary{cursor:pointer; padding:14px 18px; font-family:"IBM Plex Mono",monospace; font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--steel); font-weight:600; list-style:none; display:flex; align-items:center; justify-content:space-between}
.toc-mobile summary::-webkit-details-marker{display:none}
.toc-mobile summary::after{content:"+"; font-size:16px; color:var(--gray)}
.toc-mobile[open] summary::after{content:"–"}
.toc-mobile nav{padding:0 18px 16px}
.toc-mobile ul{margin:0; padding:0; list-style:none}
.toc-mobile li{margin:0}
.toc-mobile a{display:block; padding:8px 0; font-size:14.5px; color:var(--ink-soft); text-decoration:none; border-left:2px solid transparent; padding-left:10px}
.toc-mobile a.active{border-left-color:var(--yellow); color:var(--ink); font-weight:600}
@media(min-width:1024px){
  .toc-mobile{display:none}
}

/* ---- Prose overrides for article body (Inter, sentence case) ---- */
.prose{max-width:none}
.prose p{font-size:18px; line-height:1.7; color:var(--ink); margin:0 0 20px}
.prose .lead{font-size:19px; line-height:1.65; color:var(--ink-soft)}
.prose h2{
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  text-transform:none; letter-spacing:0; font-weight:700; font-size:24px;
  color:var(--ink); margin:44px 0 14px; line-height:1.3; scroll-margin-top:84px;
  display:flex; align-items:baseline; gap:8px;
}
.prose h2:first-child{margin-top:0}
.heading-anchor{opacity:0; text-decoration:none; color:var(--gray); font-weight:400; font-size:16px; transition:none}
.prose h2:hover .heading-anchor, .heading-anchor:focus-visible{opacity:1}
.prose h2 .h-text{flex:0 1 auto}

/* ---- Stat callout ---- */
.callout{background:#fff8e6; border:1px solid #f3dfa3; border-left:4px solid var(--yellow); border-radius:10px; padding:18px 22px; margin:-4px 0 22px}
.callout .n{font-family:"Big Shoulders Stencil Display",Impact,sans-serif; font-weight:800; font-size:28px; color:var(--black); line-height:1; text-transform:uppercase}
.callout p{margin:6px 0 0; font-size:14.5px; color:var(--ink-soft)}

/* ---- Related reading ---- */
.related{margin-top:48px; padding-top:36px; border-top:1px solid var(--line)}
.related .label{margin:0 0 16px; font-size:11px; letter-spacing:.14em; color:var(--gray); font-weight:600}
.related-grid{display:grid; grid-template-columns:1fr; gap:16px; margin-bottom:20px}
@media(min-width:640px){.related-grid{grid-template-columns:1fr 1fr}}
.related-card{display:block; background:var(--white); border:1px solid var(--line); border-radius:10px; padding:18px 20px; text-decoration:none; color:inherit; transition:border-color .15s}
.related-card:hover{border-color:var(--yellow)}
.related-card h3{font-family:Inter,sans-serif; text-transform:none; letter-spacing:0; font-size:16px; font-weight:700; margin:0 0 6px; color:var(--ink)}
.related-card p{margin:0; font-size:14px; color:var(--ink-soft); line-height:1.5}
.all-resources{display:inline-block; font-weight:600; color:var(--steel); text-decoration:underline; text-decoration-color:var(--yellow); text-underline-offset:3px; font-size:14.5px}

/* ---- CTA card (dark) ---- */
.cta-card{background:var(--black); color:#fff; border-radius:12px; padding:24px}
.cta-card h3{font-family:Inter,sans-serif; text-transform:none; letter-spacing:0; color:#fff; font-size:18px; font-weight:700; margin:0 0 8px}
.cta-card p{color:#c9ccd1; font-size:14px; margin:0 0 16px; line-height:1.5}
.cta-card .btn{width:100%; text-align:center; box-sizing:border-box}
.cta-card .cta-contact{margin-top:16px; display:flex; flex-direction:column; gap:6px; font-size:13px}
.cta-card .cta-contact a{color:#cfd3d8; text-decoration:none}
.cta-card .cta-contact a:hover{color:var(--yellow)}
.cta-mobile{margin:36px 0}
@media(min-width:1024px){
  .cta-mobile{display:none}
}

/* ---- Sidebar (desktop) ---- */
.art-sidebar{display:none}
@media(min-width:1024px){
  .art-sidebar{display:flex; flex-direction:column; gap:24px; position:sticky; top:84px; align-self:start}
}
.toc-desktop{background:var(--white); border:1px solid var(--line); border-radius:10px; padding:18px 20px}
.toc-desktop .label{margin:0 0 12px; font-size:11px; letter-spacing:.14em; color:var(--gray); font-weight:600}
.toc-desktop ul{margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:2px}
.toc-desktop a{display:block; padding:7px 0 7px 12px; font-size:14px; color:var(--ink-soft); text-decoration:none; border-left:2px solid var(--line); line-height:1.4}
.toc-desktop a:hover{color:var(--ink)}
.toc-desktop a.active{border-left:2px solid var(--yellow); color:var(--ink); font-weight:600}

.art-body-end{padding-bottom:64px}

@media(max-width:375px){
  .art-body .wrap, .art-body{padding-left:16px; padding-right:16px}
}

/* ---- Lists, data tables, FAQ, sources (added 2026-10-01) ---- */
.prose ul{margin:0 0 20px; padding-left:1.2em}
.prose li{font-size:17px; line-height:1.65; color:var(--ink); margin:0 0 8px}
.table-wrap{overflow-x:auto; margin:4px 0 6px; border:1px solid var(--line); border-radius:10px; background:var(--white)}
.prose table{width:100%; border-collapse:collapse; font-size:15.5px; line-height:1.5}
.prose caption{text-align:left; padding:14px 16px 4px; font-weight:700; color:var(--ink); font-size:15px}
.prose th,.prose td{text-align:left; padding:10px 16px; border-bottom:1px solid var(--line); vertical-align:top}
.prose th{font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--gray); font-weight:600}
.prose tbody tr:last-child td{border-bottom:0}
.prose td:nth-child(2){font-weight:700; white-space:nowrap}
.table-src{font-size:13px !important; color:var(--gray) !important; margin:0 0 22px !important}
.faq-q{border-top:1px solid var(--line); padding-top:16px; margin-top:16px}
.faq-q h3{font-family:Inter,sans-serif; text-transform:none; letter-spacing:0; font-size:18px; font-weight:700; color:var(--ink); margin:0 0 6px}
.faq-q p{margin:0 0 4px}
.sources li{font-size:15px}
.sources a{color:var(--steel)}

/* Phones use the sticky Call / Request a demo bar instead of the in-body CTA card */
@media(max-width:767px){.cta-mobile{display:none}}
.all-resources{padding:10px 0}
.src-dates{display:block; font-size:13px; color:var(--gray); margin-top:2px}
.art-asof{font-size:12px; color:var(--gray); margin:6px 0 0; letter-spacing:.04em}