/* Blog article layout (two-column), used by every page in src/pages/blog.
   Markup is generated by scripts/convert-blog-layout.py. Fonts and colours follow type-guide.css. */
.vva {
  --vva-ink: #000;
  --vva-text: #3d4350;
  --vva-muted: #62666d;
  --vva-slate: #4f5d75;
  --vva-blue: #0066ff;
  --vva-blue-ink: #0047b3;
  --vva-blue-tint: #eef4ff;
  --vva-hero: #f2f4f7;
  --vva-line: #e4e7ec;
  --vva-h: Urbanist, sans-serif;
  --vva-t: Geist, sans-serif;
  font-family: var(--vva-t);
  color: var(--vva-text);
}
.vva *, .vva *::before, .vva *::after { box-sizing: border-box; }
.vva-wrap { max-width: 1240px; margin: 0 auto; padding: 0 32px; }
.vva a { text-decoration: none; }

/* Hero band */
.vva-hero { background: var(--vva-hero); padding: 150px 0 64px; }
.vva-crumbs { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; padding: 0; margin: 0 0 20px; font-size: 14px; color: var(--vva-muted); }
.vva-crumbs li + li::before { content: "/"; margin-right: 6px; opacity: .5; }
.vva-crumbs a { color: var(--vva-ink); font-weight: 500; }
.vva-crumbs a:hover { color: var(--vva-blue); }
.vva-crumbs li[aria-current] { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 46ch; }
.vva-tags { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; padding: 0; margin: 0 0 16px; }
.vva-tag {
  display: inline-block; padding: 5px 12px 4px; border-radius: 30px; background: var(--vva-blue-tint);
  font-family: var(--vva-t); font-weight: 600; font-size: 12px; letter-spacing: .04em; text-transform: uppercase; color: var(--vva-blue-ink);
}
.vva-tag.is-hero { background: #fff; }
a.vva-tag:hover { background: var(--vva-blue); color: #fff; }
.vva .vva-title {
  font-family: var(--vva-h); font-weight: 600; font-size: 56px; line-height: 1.1; letter-spacing: -.03em;
  color: var(--vva-ink); margin: 0 0 18px; max-width: 920px;
}
.vva-summary { max-width: 680px; font-size: 19px; line-height: 1.6; color: var(--vva-slate); margin: 0; }
.vva-byline { display: flex; align-items: center; gap: 14px; margin-top: 28px; }
.vva-byline img { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; }
.vva-byline a { display: block; font-family: var(--vva-h); font-weight: 600; font-size: 17px; color: var(--vva-ink); }
.vva-byline span { font-size: 14px; color: var(--vva-muted); }

/* Image */
.vva-article { padding: 0 0 90px; }
.vva-image { margin: 56px 0 52px; }
.vva-image img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 28px; display: block; }
.vva-image figcaption { font-size: 13px; color: var(--vva-muted); margin-top: 10px; }
.vva-image figcaption a { color: var(--vva-muted); text-decoration: underline; }

/* Two columns */
.vva-grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 72px; align-items: start; }
.vva-main { max-width: 740px; }
/* The sidebar column must span the full row height, or the sticky TOC has no room to travel. */
.vva-side { align-self: stretch; }
/* .sr-page uses overflow: hidden, which disables position: sticky. clip still stops sideways scroll without breaking it. */
.sr-page:has(.vva-grid) { overflow: clip; }

/* Learn box */
.vva-learn { background: var(--vva-blue-tint); border-radius: 24px; padding: 30px 34px; margin-bottom: 44px; }
.vva-learn h2 { font-family: var(--vva-h); font-weight: 600; font-size: 22px; letter-spacing: -.01em; color: var(--vva-ink); margin: 0 0 18px; }
.vva-learn ol { list-style: none; padding: 0; margin: 0; counter-reset: vva-learn; }
.vva-learn li {
  counter-increment: vva-learn; position: relative; padding-left: 44px; margin-bottom: 14px;
  font-family: var(--vva-h); font-weight: 600; font-size: 18px; line-height: 1.5; color: var(--vva-ink);
}
.vva-learn li:last-child { margin-bottom: 0; }
.vva-learn li::before {
  content: counter(vva-learn); position: absolute; left: 0; top: 0; width: 28px; height: 28px; border-radius: 50%;
  background: var(--vva-blue); color: #fff; font-family: var(--vva-t); font-weight: 700; font-size: 14px; line-height: 28px; text-align: center;
}

/* Body */
.vva-body p, .vva-body li { font-size: 18px; line-height: 1.72; color: var(--vva-text); }
.vva-body p { margin: 0 0 20px; }
.vva-body h2 {
  font-family: var(--vva-h); font-weight: 600; font-size: 32px; line-height: 1.2; letter-spacing: -.025em;
  color: var(--vva-ink); margin: 52px 0 16px; scroll-margin-top: 110px;
}
.vva-body h3 { font-family: var(--vva-h); font-weight: 600; font-size: 22px; letter-spacing: -.02em; color: var(--vva-ink); margin: 32px 0 10px; }
.vva-body strong { color: var(--vva-ink); font-weight: 600; }
.vva-body a { color: var(--vva-blue); text-decoration: underline; text-underline-offset: 3px; }
.vva-body a strong { color: inherit; }
.vva-body ul { list-style: none; margin: 0 0 24px; padding: 0; }
.vva-body ul li { position: relative; padding-left: 24px; margin-bottom: 10px; }
.vva-body ul li::before { content: ""; position: absolute; left: 4px; top: 13px; width: 7px; height: 7px; border-radius: 50%; background: var(--vva-blue); }
.vva-body ol { list-style: none; margin: 0 0 24px; padding: 0; counter-reset: vva-ol; }
.vva-body ol li { position: relative; padding-left: 38px; margin-bottom: 12px; counter-increment: vva-ol; }
.vva-body ol li::before {
  content: counter(vva-ol); position: absolute; left: 0; top: 3px; width: 26px; height: 26px; border-radius: 50%;
  background: var(--vva-blue-tint); color: var(--vva-blue); font-weight: 700; font-size: 14px; line-height: 26px; text-align: center;
}
.vva-body blockquote { border-left: 4px solid var(--vva-blue); background: var(--vva-blue-tint); border-radius: 0 16px 16px 0; padding: 18px 24px; margin: 28px 0; }
.vva-body figure { margin: 32px 0; max-width: 100%; }
.vva-body figure img { display: block; width: auto; max-width: 100%; height: auto; margin: 0 auto; border-radius: 16px; }
.vva-body figcaption { font-size: 13px; color: var(--vva-muted); margin-top: 8px; text-align: center; }
.vva-body img { max-width: 100%; height: auto; }
.vva-body table { width: 100%; border-collapse: collapse; font-size: 16px; margin: 0 0 24px; display: block; overflow-x: auto; }
.vva-body th, .vva-body td { border-bottom: 1px solid var(--vva-line); padding: 10px 12px; text-align: left; vertical-align: top; }
.vva-body th { font-family: var(--vva-h); font-weight: 600; color: var(--vva-ink); }
.vva-body > :first-child { margin-top: 0; }
.vva-body blockquote p { margin: 0; font-weight: 600; color: var(--vva-ink); font-size: 18px; }

/* Foot + author */
.vva-foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 18px; border-top: 1px solid var(--vva-line); padding-top: 26px; margin-top: 44px; }
.vva-foot > div:empty { display: none; }
.vva-foot > div { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.vva-foot > div > span { font-family: var(--vva-h); font-weight: 600; color: var(--vva-ink); }
.vva-foot .vva-tags { margin: 0; }
.vva-share a { width: 38px; height: 38px; border-radius: 50%; background: var(--vva-blue-tint); color: var(--vva-blue); display: inline-flex; align-items: center; justify-content: center; transition: all .2s; }
.vva-share a:hover { background: var(--vva-blue); color: #fff; }
.vva-author { display: flex; gap: 22px; align-items: flex-start; background: var(--vva-hero); border-radius: 24px; padding: 28px; margin-top: 34px; }
.vva-author img { width: 88px; height: 88px; border-radius: 50%; object-fit: cover; flex: 0 0 88px; }
.vva-author-role { font-size: 12px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--vva-blue-ink); }
.vva-author h3 { font-family: var(--vva-h); font-weight: 600; font-size: 22px; margin: 4px 0 6px; }
.vva-author h3 a { color: var(--vva-ink); }
.vva-author p { margin: 0; font-size: 15px; line-height: 1.65; color: var(--vva-muted); }

/* Sidebar */
.vva-aside { position: sticky; top: 110px; display: flex; flex-direction: column; gap: 24px; max-height: calc(100vh - 130px); }
.vva-toc { border: 1px solid var(--vva-line); border-radius: 24px; padding: 26px 28px; background: #fff; }
/* On short screens the contents list scrolls inside its box so the CTA below stays visible. */
.vva-toc { min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.vva-cta { flex-shrink: 0; }
.vva-toc h2 { font-family: var(--vva-h); font-weight: 600; font-size: 19px; color: var(--vva-ink); margin: 0 0 12px; }
.vva-toc ol, .vva-toc-mobile ol { list-style: none; padding: 0; margin: 0; counter-reset: vva-toc; }
.vva-toc li, .vva-toc-mobile li { counter-increment: vva-toc; padding: 9px 0; border-bottom: 1px solid #f0f2f5; font-size: 15px; line-height: 1.45; }
.vva-toc li:last-child, .vva-toc-mobile li:last-child { border-bottom: 0; }
.vva-toc li a, .vva-toc-mobile li a { color: var(--vva-text); display: flex; gap: 10px; }
.vva-toc li a::before, .vva-toc-mobile li a::before { content: counter(vva-toc, decimal-leading-zero); color: var(--vva-blue); font-weight: 700; font-size: 13px; padding-top: 1px; }
.vva-toc li a:hover { color: var(--vva-blue); }
.vva-cta { background: #000; border-radius: 24px; padding: 30px 28px; }
.vva-cta h2 { font-family: var(--vva-h); font-weight: 600; font-size: 24px; line-height: 1.2; letter-spacing: -.02em; color: #fff; margin: 0 0 12px; }
.vva-cta p { color: rgba(255,255,255,.72); font-size: 15px; line-height: 1.6; margin: 0 0 22px; }
.vva-btn { display: inline-block; background: var(--vva-blue); color: #fff !important; border-radius: 30px; padding: 12px 26px; font-weight: 600; font-size: 15px; transition: background .2s; }
.vva-btn:hover { background: #0052cc; }
.vva-toc-mobile { display: none; }

/* Related */
.vva-related { padding: 0 0 40px; }
.vva-eyebrow { display: block; font-size: 13px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--vva-blue); margin-bottom: 8px; }
.vva .vva-related-title { font-family: var(--vva-h); font-weight: 600; font-size: 40px; letter-spacing: -.03em; color: var(--vva-ink); margin: 0 0 32px; }
.vva-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
.vva-card { background: #fff; border: 1px solid var(--vva-line); border-radius: 24px; overflow: hidden; display: flex; flex-direction: column; transition: box-shadow .25s, transform .25s; }
.vva-card:hover { box-shadow: 0 20px 50px rgba(0, 20, 60, .08); transform: translateY(-3px); }
.vva-card-thumb { display: block; aspect-ratio: 16 / 9; overflow: hidden; background: var(--vva-blue-tint); }
.vva-card-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s; }
.vva-card:hover .vva-card-thumb img { transform: scale(1.04); }
.vva-card-body { padding: 22px 24px 24px; display: flex; flex-direction: column; flex: 1; }
.vva-card-body .vva-tag { align-self: flex-start; margin-bottom: 12px; }
.vva-card-body h3 { font-family: var(--vva-h); font-weight: 600; font-size: 21px; line-height: 1.3; letter-spacing: -.01em; margin: 0 0 10px; }
.vva-card-body h3 a { color: var(--vva-ink); }
.vva-card-body h3 a:hover { color: var(--vva-blue); }
.vva-card-body p { font-size: 15px; line-height: 1.6; color: var(--vva-muted); margin: 0 0 16px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.vva-card-meta { margin-top: auto; font-size: 13px; color: var(--vva-muted); }

@media (max-width: 991px) {
  .vva-grid { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .vva-side { display: none; }
  .vva-main { max-width: none; }
  .vva-toc-mobile { display: block; border: 1px solid var(--vva-line); border-radius: 20px; margin: 0 0 36px; background: #fff; }
  .vva-learn + .vva-toc-mobile { margin-top: -20px; }
  .vva-toc-mobile summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; min-height: 44px; padding: 12px 22px; font-family: var(--vva-h); font-weight: 600; font-size: 17px; color: var(--vva-ink); }
  .vva-toc-mobile summary::-webkit-details-marker { display: none; }
  .vva-toc-mobile summary::after { content: "+"; font-size: 22px; color: var(--vva-blue); line-height: 1; }
  .vva-toc-mobile[open] summary::after { content: "–"; }
  .vva-toc-mobile ol { padding: 0 22px 12px; }
  .vva-cards { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
@media (max-width: 767px) {
  .vva-wrap { padding: 0 16px; }
  .vva-hero { padding: 120px 0 44px; }
  .vva .vva-title { font-size: 38px; }
  .vva-summary { font-size: 17px; }
  .vva-image { margin: 32px 0 36px; }
  .vva-image img { border-radius: 18px; aspect-ratio: 3 / 2; }
  .vva-learn { padding: 24px 22px; }
  .vva-body p, .vva-body li { font-size: 17px; }
  .vva-body h2 { font-size: 26px; margin-top: 40px; }
  .vva-author { flex-direction: column; }
  .vva-cards { grid-template-columns: minmax(0, 1fr); }
  .vva .vva-related-title { font-size: 30px; }
}