/* ==========================================================================
   VICS Article (single post) — 1:1 with Figma "Article Page VICS" (node 1-574)
   Scoped under .vics-article. Loaded only on single posts.
   ========================================================================== */
.vics-article, .vics-article *, .vics-article *::before, .vics-article *::after { box-sizing: border-box; }
.vics-article {
	--vb-ink: #080A18; --vb-blue: #3572FF; --vb-body: #42423D; --vb-muted: #7F7C75; --vb-line: #DBDBD8;
	--vb-font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	font-family: var(--vb-font); background: #fff; -webkit-font-smoothing: antialiased;
}
.vics-article a { text-decoration: none; }
.vics-article h1, .vics-article h2, .vics-article h3 { text-shadow: none; }

/* ===================== HEADER ===================== */
.va-head { background: #121210; }
.va-head__inner { max-width: 1440px; margin: 0 auto; padding: 150px 70px 56px; }
.va-crumb { display: flex; align-items: center; gap: 8px; font-size: 11px; line-height: 13px; }
.va-crumb a { color: #fff; }
.va-crumb a:last-child { font-weight: 700; }
.va-crumb a:hover { color: var(--vb-blue); }
.va-crumb__sep { color: var(--vb-muted); }
.va-head__cat { display: block; margin-top: 18px; color: var(--vb-blue); font-weight: 500; font-size: 10px; line-height: 12px; letter-spacing: 1.4px; }
.va-head__title { margin: 18px 0 0; max-width: 900px; color: #fff; font-weight: 600; font-size: 52px !important; line-height: 1.1; letter-spacing: -1.2px; text-wrap: balance; }
.va-head__excerpt { margin: 18px 0 0; max-width: 640px; color: rgba(255,255,255,0.86); font-weight: 400; font-size: 17px; line-height: 28px; }
.va-byline { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.va-byline__avatar { width: 36px; height: 36px; border-radius: 50%; background: #171714; border: 1px solid var(--vb-blue); display: flex; align-items: center; justify-content: center; color: #9D9A92; font-weight: 600; font-size: 12px; flex: none; }
.va-byline__who { display: flex; flex-direction: column; gap: 2px; }
.va-byline__name { color: #fff; font-weight: 500; font-size: 13px; line-height: 15px; }
.va-byline__role { color: rgba(255,255,255,0.7); font-weight: 400; font-size: 11px; line-height: 13px; }
.va-byline__dot { color: rgba(255,255,255,0.5); }
.va-byline__meta { color: rgba(255,255,255,0.82); font-weight: 400; font-size: 12px; line-height: 14px; }
.va-byline__tag { background: var(--vb-blue); color: #fff; font-weight: 400; font-size: 10px; line-height: 12px; letter-spacing: .5px; padding: 3px 8px; border-radius: 2px; }

/* ===================== HERO FIGURE ===================== */
.va-figure { margin: 0; }
.va-figure__inner { max-width: 1440px; margin: 0 auto; padding: 42px 70px; }
.va-figure__img { display: block; width: 100%; height: 460px; object-fit: cover; border-radius: 4px; }
.va-figure__cap { margin-top: 12px; color: var(--vb-muted); font-weight: 400; font-size: 11px; line-height: 16px; }

/* ===================== PAGE GRID ===================== */
.va-page { background: #fff; padding: 56px 0 96px; }
.va-grid { max-width: 1440px; margin: 0 auto; padding: 0 70px; display: grid; grid-template-columns: minmax(0,1fr) 280px; gap: 80px; align-items: start; }

/* ===================== BODY (prose) ===================== */
.art-body { min-width: 0; }
.art-body > p { margin: 0 0 24px; color: var(--vb-body); font-weight: 400; font-size: 16px; line-height: 28px; }
.art-body > p:first-child { color: #2C2C28; font-size: 18px; line-height: 30px; }
.art-body h2 { margin: 48px 0 16px; color: var(--vb-ink); font-weight: 600; font-size: 30px; line-height: 33px; letter-spacing: -.5px; scroll-margin-top: 100px; }
.art-body h3 { margin: 36px 0 12px; color: var(--vb-ink); font-weight: 600; font-size: 22px; line-height: 26px; letter-spacing: -.3px; }
.art-body a { color: var(--vb-blue); }
.art-body a:hover { text-decoration: underline; }
.art-body strong { color: var(--vb-ink); font-weight: 600; }

.art-body figure { margin: 8px 0 32px; }
.art-body figure img, .art-body > img { display: block; width: 100%; height: 440px; object-fit: cover; border-radius: 4px; }
.art-body figcaption { margin-top: 10px; color: var(--vb-muted); font-weight: 400; font-size: 11px; line-height: 16px; }

/* default lists */
.art-body ul:not(.art-takeaways__list) { margin: 8px 0 24px; padding-left: 20px; }
.art-body ul:not(.art-takeaways__list) li { color: var(--vb-body); font-weight: 400; font-size: 16px; line-height: 28px; margin-bottom: 8px; }

/* numbered list */
.art-body ol { list-style: none; counter-reset: vstep; margin: 8px 0 40px; padding: 0; }
.art-body ol li { counter-increment: vstep; position: relative; padding-left: 32px; margin-bottom: 14px; color: var(--vb-body); font-weight: 400; font-size: 15px; line-height: 24px; }
.art-body ol li::before { content: counter(vstep) "."; position: absolute; left: 0; top: 0; color: var(--vb-blue); font-weight: 700; font-size: 13px; line-height: 24px; }
.art-body ol li strong { color: var(--vb-ink); }

/* pullquote */
.art-body blockquote { margin: 40px 0; padding: 10px 0 10px 40px; border-left: 4px solid var(--vb-blue); color: var(--vb-ink); font-weight: 600; font-size: 30px; line-height: 40px; letter-spacing: -.3px; }
.art-body blockquote p { margin: 0; color: inherit; font: inherit; }

/* takeaways box */
.art-takeaways { background: #F3F7FF; border: 1px solid var(--vb-blue); border-radius: 10px; padding: 26px 30px 28px; margin: 8px 0 40px; }
.art-takeaways__label { display: block; color: var(--vb-blue); font-weight: 500; font-size: 10px; line-height: 12px; letter-spacing: 1px; margin-bottom: 14px; }
.art-takeaways__list { list-style: none; margin: 0; padding: 0; }
.art-takeaways__list li { position: relative; padding-left: 22px; color: var(--vb-body); font-weight: 400; font-size: 14px; line-height: 21px; margin-bottom: 10px; }
.art-takeaways__list li:last-child { margin-bottom: 0; }
.art-takeaways__list li::before { content: "—"; position: absolute; left: 0; top: 0; color: var(--vb-body); }

/* ===================== AUTHOR BIO ===================== */
.va-author { display: flex; gap: 20px; align-items: flex-start; margin-top: 8px; padding: 32px 0; border-top: 1px solid var(--vb-line); }
.va-author__avatar { width: 52px; height: 52px; border-radius: 50%; background: #F7F7F5; border: 1px solid var(--vb-line); display: flex; align-items: center; justify-content: center; color: var(--vb-muted); font-weight: 600; font-size: 16px; line-height: 19px; flex: none; }
.va-author__info { display: flex; flex-direction: column; gap: 4px; }
.va-author__name { color: var(--vb-ink); font-weight: 500; font-size: 14px; line-height: 16px; }
.va-author__role { color: var(--vb-blue); font-weight: 500; font-size: 11px; line-height: 13px; letter-spacing: .5px; }
.va-author__bio { margin: 0; color: var(--vb-muted); font-weight: 400; font-size: 13px; line-height: 21px; }

/* ===================== TAGS ===================== */
.va-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding-top: 40px; border-top: 1px solid var(--vb-line); }
.va-tags__label { color: var(--vb-muted); font-weight: 500; font-size: 11px; line-height: 13px; letter-spacing: .5px; margin-right: 4px; }
.va-tag { border: 1px solid var(--vb-line); border-radius: 4px; padding: 4px 10px; color: var(--vb-muted); font-weight: 400; font-size: 11px; line-height: 13px; }
.va-tag:hover { border-color: var(--vb-blue); color: var(--vb-blue); }

/* ===================== MORE ARTICLES ===================== */
.va-more { margin-top: 40px; padding-top: 40px; border-top: 1px solid var(--vb-line); }
.va-more__label { display: block; color: var(--vb-muted); font-weight: 500; font-size: 10px; line-height: 12px; letter-spacing: 1px; margin-bottom: 24px; }
.va-more__grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 24px; }
.va-mcard { display: flex; flex-direction: column; gap: 10px; }
.va-mcard__img { width: 100%; height: 193px; border-radius: 4px; background: #e9e9e6 center/cover no-repeat; }
.va-mcard__cat { color: var(--vb-blue); font-weight: 500; font-size: 10px; line-height: 12px; letter-spacing: 1.2px; }
.va-mcard__title { color: var(--vb-ink); font-weight: 600; font-size: 18px; line-height: 21px; letter-spacing: -.2px; }
.va-mcard:hover .va-mcard__title { color: var(--vb-blue); }
.va-mcard__meta { color: var(--vb-muted); font-weight: 400; font-size: 11px; line-height: 13px; }

/* ===================== SIDEBAR ===================== */
.va-side { position: sticky; top: 96px; align-self: start; display: flex; flex-direction: column; gap: 40px; }
.va-side__toc { border-top: 1px solid var(--vb-line); padding-top: 24px; }
.va-side__label { display: block; color: var(--vb-muted); font-weight: 500; font-size: 10px; line-height: 12px; letter-spacing: 1px; margin-bottom: 16px; }
.va-toc__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.va-toc__a { display: block; padding: 5px 0 5px 14px; border-left: 2px solid #D6D6D1; color: var(--vb-muted); font-weight: 400; font-size: 13px; line-height: 18px; }
.va-toc__a:hover { color: var(--vb-blue); }
.va-toc__a.is-active { color: var(--vb-blue); font-weight: 500; border-left-color: var(--vb-blue); }

.va-side__cta { position: relative; isolation: isolate; border-radius: 8px; overflow: hidden; padding: 24px; background: #080A18; }
.va-side__cta::before { content: ""; position: absolute; inset: 0; z-index: -2; background: var(--va-cta-img) center/cover no-repeat; opacity: .5; }
.va-side__cta::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(160deg, rgba(53,114,255,0.72) 0%, rgba(3,33,101,0.92) 55%, rgba(6,13,31,0.98) 100%); }
.va-cta__label { display: block; color: rgba(255,255,255,0.55); font-weight: 500; font-size: 10px; line-height: 12px; letter-spacing: 1px; }
.va-cta__title { margin: 12px 0 0; color: #fff; font-weight: 600; font-size: 21px; line-height: 23px; letter-spacing: -.3px; }
.va-cta__text { margin: 12px 0 0; color: rgba(255,255,255,0.8); font-weight: 400; font-size: 13px; line-height: 20px; }
.va-cta__btn { display: inline-flex; align-items: center; margin-top: 16px; background: var(--vb-blue); color: #fff; font-weight: 500; font-size: 12px; line-height: 14px; padding: 11px 18px; border-radius: 4px; }
.va-cta__btn:hover { background: #2a5fe0; }

/* ===================== RESPONSIVE ===================== */
@media (max-width: 1180px) {
	.va-head__inner, .va-figure__inner, .va-grid { padding-left: 40px; padding-right: 40px; }
	.va-head__title { font-size: 44px !important; line-height: 1.12; letter-spacing: -1px; }
}
@media (max-width: 980px) {
	.va-head__inner { padding-top: 110px; }
	.va-grid { grid-template-columns: 1fr; gap: 48px; }
	.va-side { position: static; }
	.va-figure__img { height: 360px; }
	.va-more__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
	.va-head__inner { padding: 90px 20px 40px; }
	.va-head__title { font-size: 30px !important; line-height: 1.18; letter-spacing: -0.6px; }
	.va-head__excerpt { font-size: 15px; line-height: 25px; }
	.va-figure__inner { padding: 24px 20px; }
	.va-figure__img { height: 220px; }
	.va-page { padding: 36px 0 56px; }
	.va-grid { padding: 0 20px; }
	.art-body h2 { font-size: 24px; line-height: 28px; }
	.art-body blockquote { font-size: 22px; line-height: 30px; padding-left: 24px; }
	.art-body figure img, .art-body > img { height: 220px; }
	.va-more__grid { grid-template-columns: 1fr; }
}

/* in-article quote CTA: make it clearly a clickable link (blue + underline), overriding .art-body strong dark ink */
.art-body a.js-quote-open, .art-body a.js-quote-open strong { color: var(--vb-blue); text-decoration: underline; cursor: pointer; }
.art-body a.js-quote-open:hover, .art-body a.js-quote-open:hover strong { text-decoration: underline; opacity: .85; }

/* tables mobile 2026-10-03 (Elena 12224) */
.va-grid>.art-body{min-width:0}
.art-body .wp-block-table{margin:28px 0;overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid #e3e6ee;border-radius:14px;background:#fff}
.art-body .wp-block-table table{width:100%;border-collapse:collapse;font-size:16px;line-height:1.45;margin:0}
.art-body .wp-block-table thead th{background:#080A18;color:#fff;font-weight:600;text-align:left;vertical-align:bottom;padding:13px 16px;border:0}
.art-body .wp-block-table td,.art-body .wp-block-table tbody th{padding:13px 16px;border:0;border-top:1px solid #e9ecf2;vertical-align:top;text-align:left;color:#1f2433}
.art-body .wp-block-table tbody tr:first-child td{border-top:0}
.art-body .wp-block-table tbody tr:nth-child(even) td{background:#f6f8fc}
.art-body .wp-block-table td:first-child{font-weight:600;color:#080A18}
.art-body .wp-block-table figcaption{font-size:14px;color:#5b6275;padding:10px 16px}
@media (max-width:600px){
.art-body .wp-block-table table{font-size:15px}
.art-body .wp-block-table th,.art-body .wp-block-table td{padding:11px 12px}
.art-body .wp-block-table table:has(tr>:nth-child(4)) :is(th,td){min-width:120px}
}

/* Vic's in-article CTA: one visual system, only title + text change per placement */
.art-body .va-inline-cta{margin:40px 0;padding:32px 36px;min-height:236px;display:flex;align-items:center}
.art-body .va-inline-cta__road{position:absolute;inset:0;z-index:0;pointer-events:none;left:auto;width:58%;background:var(--va-road) right bottom/100% 100% no-repeat;opacity:.13}
.art-body .va-inline-cta__glow{position:absolute;z-index:0;right:4%;bottom:6%;width:46%;height:70%;pointer-events:none;background:radial-gradient(closest-side,rgba(120,160,255,.28),rgba(120,160,255,0) 100%)}
.art-body .va-inline-cta__copy{position:relative;z-index:2;max-width:52%}
.art-body .va-inline-cta__logo{display:block;width:104px;height:auto;margin:0}
.art-body .va-inline-cta .va-cta__title{color:#fff;margin:14px 0 0;padding:0;font-size:24px;line-height:1.2;font-weight:600;letter-spacing:-.3px}
.art-body .va-inline-cta .va-cta__text{color:rgba(255,255,255,.8);margin:10px 0 0;font-size:15px;line-height:1.5}
.art-body .va-inline-cta .va-cta__btn,.art-body .va-inline-cta .va-cta__btn:hover{color:#fff;text-decoration:none;margin-top:20px;font-size:14px;padding:12px 20px}
.art-body .va-inline-cta__truck{position:absolute;z-index:1;right:3%;bottom:20px;width:38%;max-width:340px;height:auto;margin:0;border-radius:0;box-shadow:none;filter:drop-shadow(0 18px 14px rgba(0,0,0,.45))}
.art-body .va-inline-cta__shadow{position:absolute;z-index:1;right:4%;bottom:12px;width:36%;max-width:320px;height:22px;pointer-events:none;background:radial-gradient(closest-side,rgba(0,0,0,.55),rgba(0,0,0,0))}
@media (max-width:767px){
 .art-body .va-inline-cta{display:block;padding:188px 22px 26px;min-height:0}
 .art-body .va-inline-cta__copy{max-width:none}
 .art-body .va-inline-cta__truck{top:22px;bottom:auto;right:50%;transform:translateX(50%);width:260px;max-width:none}
 .art-body .va-inline-cta__shadow{top:160px;bottom:auto;right:50%;transform:translateX(50%);width:230px;max-width:none;height:18px}
 .art-body .va-inline-cta__road{width:100%;height:190px}
 .art-body .va-inline-cta__glow{top:0;bottom:auto;right:10%;width:80%;height:190px}
 .art-body .va-inline-cta .va-cta__title{font-size:21px}
}