/*
 * Viva Insights Sample Code Library — brand layer
 * Loaded after Minima's main.css to apply Microsoft Viva Insights styling.
 * Palette aligned to the Microsoft Viva Insights identity (purple/magenta).
 */

:root {
  /* ---- Viva Insights brand identity (logo / wordmark / accents only) ---- */
  --vi-purple: #5C2D91;
  --vi-purple-dark: #44216B;
  --vi-magenta: #B4009E;
  --vi-purple-tint: #F3EEFA;
  --vi-border: #E6E1EF;
  --vi-grad: linear-gradient(135deg, #5C2D91 0%, #B4009E 100%);

  /* ---- Primary interaction colour (CTAs, focus, active states) ---- */
  --primary: #335CCC;
  --primary-h: #294DAE;
  --primary-tint: #EBF0FB;

  /* ---- Neutrals ---- */
  --ink: #0E1726;
  --text: #242424;
  --muted: #616161;
  --rule: #E0E0E0;
  --surface: #FFFFFF;
  --surface-alt: #FAF9F8;

  /* ---- Status / badge tones ---- */
  --tone-green-fg: #0E700E;
  --tone-green-bg: #F1FAF1;
  --tone-rose-fg:  #B33A55;
  --tone-rose-bg:  #FDEBF1;
  --tone-blue-fg:  #0F6CBD;
  --tone-blue-bg:  #EBF3FC;

  /* ---- Accent gradients (eyebrows / illustrations only — not buttons) ---- */
  --grad-cool: linear-gradient(96.15deg, #764FF5 12.38%, #3F6CE9 39.4%, #20BBC6 96.13%);
  --grad-warm: linear-gradient(96.15deg, #E76633 -1.08%, #9D68E3 14.88%, #20BBC6 96.13%);

  /* ---- Section background gradients ---- */
  --grad-section-lav: linear-gradient(113deg, rgba(240,231,255,0.7) 0%, rgba(255,255,255,1) 40%, rgba(228,243,255,0.9) 100%);
  --grad-section-warm: linear-gradient(90deg, #F0F0E9 0%, #FFFDF0 100%);

  /* ---- Card / surface system ---- */
  --shadow-card: 0 0 2px rgba(0,0,0,0.12), 0 4px 16px rgba(0,0,0,0.08);
  --shadow-card-hover: 0 0 2px rgba(0,0,0,0.14), 0 12px 28px rgba(14,23,38,0.14);
  --radius-card: 16px;
  --radius-pill: 9999px;

  /* ---- Layout rail + sticky stack offsets ----
     --sticky-offset is the scroll-margin / TOC-top used on inner pages
     (just the 48px nav + 8px breathing room). The homepage overrides it
     below to also account for the 44px tab rail. */
  --rail-max: 928px;
  --nav-h: 48px;
  --home-tab-h: 44px;
  --sticky-offset: calc(var(--nav-h) + 8px);
}

/* Homepage adds the tab rail underneath the primary nav. */
body:has(.home) {
  --sticky-offset: calc(var(--nav-h) + var(--home-tab-h) + 8px);
}

/* Re-open :root for the focus ring so the cascade is unchanged. */
:root {

  /* ---- Focus ring ---- */
  --focus-ring: 0 0 0 3px rgba(51, 92, 204, 0.35);
}

/* ---- Accessibility utilities ---- */
.vi-skip-link {
  position: absolute;
  left: 12px;
  top: -100px;
  z-index: 9999;
  background: var(--primary);
  color: #fff !important;
  padding: 10px 16px;
  border-radius: 8px;
  text-decoration: none !important;
  font-weight: 600;
  box-shadow: var(--shadow-card);
  transition: top 0.15s ease;
}
.vi-skip-link:focus,
.vi-skip-link:focus-visible {
  top: 12px;
  outline: none;
  box-shadow: var(--focus-ring), var(--shadow-card);
}
main#main-content:focus { outline: none; }
.vi-sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ---- Typography baseline ----
   Match the Labs aesthetic: Segoe UI throughout, tight letter-spacing on
   display headings, dark ink for body. Scoped to the page so we don't
   override Bootstrap navbar font sizing globally. */
body,
.page-content {
  font-family: "Segoe UI", "Segoe UI Web (West European)", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  color: var(--text);
}
/* Defensive: prevent absolutely-positioned overlays (mega panels, tooltips,
   illustrations) from spawning a horizontal scrollbar on the document.
   Vertical sticky still works under overflow-x: clip (unlike overflow: hidden). */
html, body {
  overflow-x: clip;
}
.page-content h1 {
  font-size: clamp(28px, 4.4vw, 40px);
  line-height: 1.2;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.page-content h2 {
  font-size: clamp(22px, 3vw, 32px);
  line-height: 1.25;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.page-content h3 {
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--ink);
}

/* ---- Global focus ring (applies to interactive elements) ---- */
a:focus-visible,
button:focus-visible,
[role="button"]:focus-visible,
.btn:focus-visible,
.nav-link:focus-visible,
.dropdown-item:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-radius: 4px;
}

/* ---- Layout width ----
   Inner pages use a 928px rail to match the homepage section rhythm.
   The homepage layout (which wraps its sections in <div class="home">)
   opts out of both the rail and the wrapper padding so its hero and
   section gradients can run full-bleed against the sticky tab rail. */
.wrapper {
  max-width: 928px;
}
.wrapper:has(> .home) {
  max-width: none;
  padding: 0;
}
.home > .page-heading { display: none; }
.home .page-content { padding-top: 0; padding-bottom: 0; }
/* Inner pages — extra breathing room above the first H1 so it doesn't
   sit flush under the 48px sticky nav. */
body:not(:has(.home)) main.page-content {
  padding-top: 24px;
}

/* ---- Links ----
   Strict role split: body links use the primary blue (interactive),
   never the brand purple. Purple is reserved for logo/identity. */
.page-content a:not(.btn):not(.nav-link):not(.dropdown-item):not(.navbar-brand):not(.vi-card):not(.vi-featured-card):not(.vi-cta):not(.vi-cta-secondary):not(.vi-cta-primary):not(.vi-cta-on-light):not(.page-meta-edit):not(.vi-search-link):not(.vi-tab):not(.vi-nav-link):not(.vi-nav-brand):not(.vi-nav-icon):not(.vi-mega-trigger),
a.post-link {
  color: var(--primary);
  text-decoration-color: rgba(51, 92, 204, 0.35);
}
.page-content a:not(.btn):not(.nav-link):not(.dropdown-item):not(.navbar-brand):not(.vi-card):not(.vi-featured-card):not(.vi-cta):not(.vi-cta-secondary):not(.vi-cta-primary):not(.vi-cta-on-light):not(.page-meta-edit):not(.vi-search-link):not(.vi-tab):not(.vi-nav-link):not(.vi-nav-brand):not(.vi-nav-icon):not(.vi-mega-trigger):hover {
  color: var(--primary-h);
  text-decoration-color: var(--primary-h);
}

/* ---- Hide default Minima header & navigation site-wide ---- */
.site-header {
  display: none !important;
}

/* =======================================================================
   Primary navigation (vi-nav) — 48px sticky bar with accessible mega-menus
   Replaces the old Bootstrap .custom-nav dropdown system. The legacy
   .custom-nav rules below are retained only for graceful fall-back if any
   inner page still references the older markup, but new markup is .vi-nav.
   ======================================================================= */
.vi-nav {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: #fff;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.08);
  height: var(--nav-h);
  font-family: "Segoe UI", "Segoe UI Web (West European)", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
}
/* Defensive resets — the nav lives inside Minima's .page-content, so its
   default ul/li/svg styles can leak in (bullets, full-width images, list
   margins). Reset them explicitly inside .vi-nav. */
.vi-nav ul,
.vi-nav ol,
.vi-nav li {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}
.vi-nav svg { max-width: none; display: inline-block; vertical-align: middle; }
.vi-nav-brand .vi-logo { width: 24px !important; height: 24px !important; }
.vi-mega-trigger .vi-caret { width: 10px !important; height: 6px !important; }
.vi-nav-inner {
  display: flex;
  align-items: center;
  height: var(--nav-h);
  padding: 0 24px;
  gap: 16px;
}
.vi-nav-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
  font-size: 14px;
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
}
.vi-nav-brand:hover { color: var(--ink); }
.vi-nav-brand .vi-logo { width: 24px; height: 24px; flex: 0 0 auto; }

.vi-nav-links {
  display: flex;
  align-items: center;
  gap: 16px;
  flex: 1;
  justify-content: flex-end;
}
.vi-nav-list {
  display: flex;
  align-items: center;
  gap: 2px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.vi-nav-link,
.vi-mega-trigger {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: var(--nav-h);
  padding: 0 12px;
  font-size: 14px;
  line-height: 20px;
  color: var(--text);
  background: none;
  border: none;
  cursor: pointer;
  text-decoration: none;
  font-family: inherit;
  white-space: nowrap;
}
.vi-nav-link:hover,
.vi-mega-trigger:hover { color: var(--ink); background: rgba(0, 0, 0, 0.03); }
.vi-mega-trigger[aria-expanded="true"] { color: var(--ink); background: rgba(0, 0, 0, 0.04); }
.vi-mega-trigger .vi-caret { width: 10px; height: 10px; transition: transform 0.15s ease; }
.vi-mega-trigger[aria-expanded="true"] .vi-caret { transform: rotate(180deg); }

.vi-mega-item { position: relative; }
.vi-mega-panel {
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: 4px;
  min-width: 280px;
  max-width: min(720px, calc(100vw - 24px));
  background: #fff;
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: 20px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px 24px;
  z-index: 1200;
}
/* When the panel would overflow the right edge of the viewport, flip its
   anchor so the right edge of the panel lines up with the right edge of
   the trigger. Toggled by the nav JS on open. */
.vi-mega-panel.is-right-anchored {
  left: auto;
  right: 0;
}
.vi-mega-panel[hidden] { display: none; }
.vi-mega-col { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.vi-mega-col h3 {
  font-size: 11px;
  line-height: 1.2;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
  margin: 4px 0 6px;
  padding: 0;
  border: none;
}
.vi-mega-col a {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: 6px;
  font-size: 13.5px;
  color: var(--text);
  text-decoration: none;
}
.vi-mega-col a:hover { background: var(--primary-tint); color: var(--ink); }
.vi-mega-col a.external::after { content: " \2197"; font-size: 0.8em; opacity: 0.6; }

.vi-nav-actions {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-left: 4px;
}
.vi-nav-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  color: var(--text);
  text-decoration: none;
}
.vi-nav-icon:hover { background: rgba(0, 0, 0, 0.06); color: var(--ink); }

.vi-nav-toggle {
  display: none;
  background: none;
  border: none;
  font-size: 22px;
  line-height: 1;
  padding: 4px 10px;
  color: var(--ink);
  cursor: pointer;
}

@media (max-width: 900px) {
  .vi-nav-inner { padding: 0 16px; }
  .vi-nav-toggle { display: inline-flex; align-items: center; }
  .vi-nav-links {
    position: absolute;
    top: var(--nav-h);
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    background: #fff;
    padding: 8px 12px 16px;
    border-bottom: 1px solid var(--rule);
    gap: 4px;
    max-height: calc(100vh - var(--nav-h));
    overflow-y: auto;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
  }
  .vi-nav-links[hidden] { display: none; }
  .vi-nav-list { flex-direction: column; align-items: stretch; gap: 0; width: 100%; }
  .vi-nav-link,
  .vi-mega-trigger { width: 100%; justify-content: space-between; height: 44px; padding: 0 8px; }
  .vi-mega-panel {
    position: static;
    margin: 0;
    box-shadow: none;
    padding: 4px 12px 12px;
    grid-template-columns: 1fr;
    gap: 4px;
    min-width: 0;
    max-width: none;
    border-radius: 0;
  }
  .vi-nav-actions {
    padding-top: 8px;
    border-top: 1px solid var(--rule);
    justify-content: flex-start;
    margin-left: 0;
  }
}

/* =======================================================================
   Homepage section tab rail — sticks just below the primary nav.
   Anchors to in-page <section id> wrappers added in Phase 3.
   ======================================================================= */
.vi-tab-rail {
  position: sticky;
  top: var(--nav-h);
  z-index: 100;
  background: #fff;
  background-image: linear-gradient(96.15deg, rgba(118, 79, 245, 0.08) 12%, rgba(63, 108, 233, 0.08) 39%, rgba(32, 187, 198, 0.08) 96%);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}
.vi-tab-rail-inner {
  display: flex;
  align-items: center;
  gap: 4px;
  max-width: var(--rail-max);
  margin: 0 auto;
  padding: 0 24px;
  overflow-x: auto;
  height: var(--home-tab-h);
  scrollbar-width: thin;
}
.vi-tab {
  position: relative;
  display: inline-flex;
  align-items: center;
  height: 100%;
  padding: 0 12px;
  font-size: 14px;
  color: var(--muted);
  text-decoration: none;
  white-space: nowrap;
  font-family: inherit;
}
.vi-tab:hover { color: var(--ink); }
.vi-tab.is-active { color: var(--ink); font-weight: 600; }
.vi-tab.is-active::after {
  content: "";
  position: absolute;
  left: 8px;
  right: 8px;
  bottom: 0;
  height: 3px;
  border-radius: 9999px;
  background: var(--primary);
}

/* ---- Headings accent ----
   H2 keeps a subtle bottom rule for in-content section separation;
   colour comes from the new --ink token, set above. */
.page-content h2 {
  border-bottom: 1px solid var(--rule);
  padding-bottom: 0.3rem;
}

/* ---- Site name in Minima header (legacy fallback, header hidden site-wide) ---- */
.site-title, .site-title:visited { color: var(--vi-purple) !important; }

/* ---- Floating TOC active state uses brand colour ---- */
.floating-toc #toc-list a:hover,
.floating-toc #toc-list a.active {
  border-left-color: var(--vi-purple) !important;
  color: var(--vi-purple) !important;
  background-color: var(--vi-purple-tint) !important;
}

/* ---- Tables — softer borders, generous padding, identity-purple header
   (kept as a brand moment per the Phase 1 colour-role split). */
.page-content table {
  border-collapse: collapse;
  width: 100%;
  font-size: 14px;
  line-height: 1.5;
  margin: 1.25rem 0 1.5rem;
}
.page-content table th,
.page-content table td {
  padding: 10px 14px;
  border-bottom: 1px solid var(--rule);
  text-align: left;
  vertical-align: top;
}
.page-content table th {
  background: var(--vi-purple-tint);
  color: var(--vi-purple-dark);
  font-weight: 600;
  border-bottom: 1px solid var(--vi-border);
}
.page-content table tbody tr:nth-child(2n) td {
  background: rgba(0, 0, 0, 0.015);
}
.page-content table tbody tr:hover td {
  background: var(--primary-tint);
}

/* ---- Inner-page title block (legacy selector retained for any page
   that doesn't go through the .vi-page layout). The .vi-page-title
   block below has its own treatment. */
body:not(:has(.home)) .page-content > .wrapper > h1:first-child,
body:not(:has(.home)) .page-content > .wrapper > h1.page-heading:first-child {
  font-size: clamp(30px, 4.4vw, 40px);
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 8px 0 18px;
  padding-bottom: 14px;
  position: relative;
}
body:not(:has(.home)) .page-content > .wrapper > h1:first-child::after,
body:not(:has(.home)) .page-content > .wrapper > h1.page-heading:first-child::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 64px;
  height: 3px;
  border-radius: 2px;
  background: var(--grad-cool);
}

/* =======================================================================
   Inner page editorial system (.vi-page) — applied by _layouts/page.html.
   Gives every inner page a Labs-style hero (eyebrow + title + lede),
   soft section dividers, card-like script blocks, and grouped related-
   links lists, without requiring per-page markdown rewrites.
   ======================================================================= */

.vi-page { display: block; }

/* ---- Hero block ---- */
.vi-page-header {
  margin: 8px 0 36px;
  padding-bottom: 28px;
  border-bottom: 1px solid var(--rule);
  position: relative;
}
.vi-page-header::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -1.5px;
  width: 96px;
  height: 3px;
  border-radius: 2px;
  background: var(--grad-cool);
}
.vi-page-eyebrow {
  margin: 0 0 10px;
  font: 600 12px/1.2 "Segoe UI", system-ui, sans-serif;
  color: var(--primary);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.vi-page-title {
  margin: 0 0 14px !important;
  font-size: clamp(32px, 4.6vw, 44px);
  line-height: 1.12;
  letter-spacing: -0.02em;
  font-weight: 700;
  color: var(--ink);
  padding-bottom: 0 !important;
}
/* Suppress the gradient rule from the legacy selector since the hero
   has its own rule. */
.vi-page-title::after { display: none !important; }
.vi-page-lede {
  margin: 0;
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--muted);
  max-width: 68ch;
}

/* Hide the redundant markdown H1 — most pages repeat the front-matter
   title as the first markdown heading. The hero renders it canonically. */
.vi-page-body > h1:first-of-type,
.vi-page-body > p + h1:first-of-type {
  display: none;
}

/* ---- Section rhythm ---- */
.vi-page-body h2 {
  margin-top: 2.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--rule);
  font-size: clamp(22px, 2.6vw, 28px);
  letter-spacing: -0.015em;
  color: var(--ink);
}
.vi-page-body h2:first-child,
.vi-page-body > h1 + h2,
.vi-page-body > p + h2:first-of-type {
  /* don't double up the top rule on the very first H2 after the hero */
}
.vi-page-body h3 {
  margin-top: 1.75rem;
  font-size: 1.125rem;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--ink);
  padding-left: 12px;
  border-left: 3px solid var(--primary);
  line-height: 1.3;
}

/* ---- Soft horizontal rules (the `---` separator pattern used heavily) ---- */
.vi-page-body hr {
  border: 0;
  height: 1px;
  background: var(--rule);
  margin: 2rem 0;
  opacity: 0.6;
}

/* ---- "Script card" pattern: H3 + paragraph leading with a strong link.
   Style the paragraph as the card body, with the strong-link as a
   prominent primary link. */
.vi-page-body h3 + p {
  margin-top: 0.5rem;
  font-size: 1rem;
}
.vi-page-body h3 + p > strong:first-child > a:first-child {
  color: var(--primary);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid rgba(51, 92, 204, 0.3);
}
.vi-page-body h3 + p > strong:first-child > a:first-child:hover {
  border-bottom-color: var(--primary);
}

/* ---- Definition-style lists (the "**Purpose**: ..." pattern).
   These bullets render as <ul><li><strong>Key</strong>: value</li>.
   Soften the bullet, indent the values, give the keys a subtle weight. */
.vi-page-body h3 + p + ul,
.vi-page-body h3 + ul {
  margin: 0.6rem 0 1.25rem;
  padding-left: 1.25rem;
  list-style: none;
}
.vi-page-body h3 + p + ul > li,
.vi-page-body h3 + ul > li {
  position: relative;
  padding: 2px 0 2px 14px;
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--text);
}
.vi-page-body h3 + p + ul > li::before,
.vi-page-body h3 + ul > li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.7em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--primary);
  opacity: 0.55;
}
.vi-page-body h3 + p + ul > li > strong:first-child,
.vi-page-body h3 + ul > li > strong:first-child {
  color: var(--ink);
}

/* ---- "Related pages" / "Need help?" sections — when an H2 is followed
   directly by a bullet list of links, treat the list as a tinted panel. */
.vi-page-body h2:has(+ ul) + ul {
  list-style: none;
  margin: 0.8rem 0 1.5rem;
  padding: 18px 20px;
  background: var(--primary-tint);
  border: 1px solid rgba(51, 92, 204, 0.12);
  border-radius: 12px;
  display: grid;
  gap: 6px;
}
.vi-page-body h2:has(+ ul) + ul > li {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.5;
}
.vi-page-body h2:has(+ ul) + ul > li::before { display: none; }
.vi-page-body h2:has(+ ul) + ul > li > a:first-child {
  font-weight: 600;
  color: var(--primary);
}

/* ---- Homepage hero ---- */
/* Minima's home layout emits its own <h1 class="page-heading"> from page.title;
   the hero below replaces it, so hide it to avoid a duplicate H1. */
.home > .page-heading { display: none; }

.vi-hero {
  background: var(--vi-grad);
  color: #fff;
  border-radius: 14px;
  padding: 2.6rem 2rem;
  margin: 1.5rem 0 2.2rem;
  text-align: center;
}
.vi-hero h1 {
  color: #fff;
  margin: 0 0 0.6rem;
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  line-height: 1.15;
}
.vi-hero p {
  margin: 0 auto 1.4rem;
  max-width: 46rem;
  font-size: 1.12rem;
  color: rgba(255, 255, 255, 0.92);
}
.vi-cta-row {
  display: flex;
  gap: 0.8rem;
  justify-content: center;
  flex-wrap: wrap;
}
.vi-cta,
.vi-cta-secondary {
  display: inline-block;
  padding: 0.7rem 1.4rem;
  border-radius: 8px;
  font-weight: 600;
  text-decoration: none !important;
  transition: transform 0.12s ease, box-shadow 0.12s ease, background 0.12s ease;
}
.page-content a.vi-cta {
  background: #fff;
  color: var(--vi-purple-dark) !important;
}
.page-content a.vi-cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
}
.page-content a.vi-cta-secondary {
  background: rgba(255, 255, 255, 0.12);
  color: #fff !important;
  border: 1px solid rgba(255, 255, 255, 0.7);
}
.page-content a.vi-cta-secondary:hover {
  background: rgba(255, 255, 255, 0.22);
  transform: translateY(-2px);
}

/* ---- Category card grid (refreshed in Phase 4) ---- */
.vi-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 24px;
  margin: 1.5rem 0 2rem;
}
.page-content a.vi-card {
  display: flex;
  flex-direction: column;
  padding: 24px;
  border: none;
  border-radius: var(--radius-card);
  background: #fff;
  color: var(--text) !important;
  text-decoration: none !important;
  box-shadow: var(--shadow-card);
  transition: transform 0.14s ease, box-shadow 0.14s ease;
}
.page-content a.vi-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-card-hover);
}
.page-content a.vi-card:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

/* ---- Homepage v2 — white hero with decorative ribbon, frosted-glass values
   panel, and three full-bleed sections (Overview / Sample Code / Research)
   anchored by the sticky tab rail introduced in Phase 2.
   ======================================================================= */

.vi-home-hero {
  position: relative;
  overflow: hidden;
  background: #fff;
  padding: 64px 24px 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
}
.vi-home-hero-ribbon {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}
.vi-home-hero-ribbon svg {
  width: 100%;
  height: 100%;
  display: block;
}
.vi-home-hero-inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 760px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  text-align: center;
}
.vi-home-hero-inner h1 {
  margin: 0;
  color: var(--ink);
  font-size: clamp(28px, 5vw, 44px);
  line-height: 1.15;
  font-weight: 600;
  letter-spacing: -0.02em;
}
.vi-home-hero-inner p.vi-hero-lede {
  margin: 0;
  max-width: 640px;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.45;
}

.vi-cta-row-v2 {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 4px;
}
.page-content a.vi-cta-primary,
.page-content a.vi-cta-on-light {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 8px 18px;
  font-size: 14px;
  font-weight: 600;
  border-radius: 6px;
  text-decoration: none !important;
  transition: background-color 0.12s ease, border-color 0.12s ease, transform 0.12s ease;
}
.page-content a.vi-cta-primary {
  background: var(--primary);
  color: #fff !important;
  border: 1px solid var(--primary);
}
.page-content a.vi-cta-primary:hover {
  background: var(--primary-h);
  border-color: var(--primary-h);
}
.page-content a.vi-cta-on-light {
  background: #fff;
  color: var(--text) !important;
  border: 1px solid #D1D1D1;
}
.page-content a.vi-cta-on-light:hover {
  background: #F7F7F7;
}

.vi-values {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 928px;
  padding: 16px;
  border-radius: 24px;
  background: rgba(210, 225, 255, 0.5);
  box-sizing: border-box;
}
.vi-values-panel {
  background: rgba(255, 255, 255, 0.7);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-radius: 16px;
  padding: 24px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}
@media (max-width: 900px) {
  .vi-values-panel { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .vi-home-hero { padding: 40px 16px 16px; gap: 20px; }
  .vi-values { border-radius: 16px; padding: 10px; }
  .vi-values-panel { grid-template-columns: 1fr; gap: 16px; padding: 16px; }
}
.vi-value {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 8px;
}
.vi-value-icon {
  width: 56px;
  height: 56px;
  flex: 0 0 auto;
}
.vi-value h3 {
  margin: 0;
  padding: 0;
  border: none;
  font-size: 16px;
  line-height: 22px;
  font-weight: 600;
  color: var(--ink);
}
.vi-value p {
  margin: 0;
  font-size: 13px;
  line-height: 18px;
  color: var(--muted);
}

/* Section wrappers — sticky-tab-rail anchors. */
section.vi-section {
  padding: 56px 24px;
  scroll-margin-top: var(--sticky-offset);
}
.vi-section-inner {
  max-width: var(--rail-max);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.vi-section-lav { background: var(--grad-section-lav); }
.vi-section-warm { background: var(--grad-section-warm); }

.vi-eyebrow {
  width: fit-content;
  font-size: 13px;
  line-height: 20px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background-image: var(--grad-cool);
  color: transparent;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.vi-eyebrow-warm { background-image: var(--grad-warm); }

.vi-section h2.vi-section-heading {
  margin: 0;
  padding-bottom: 0;
  border-bottom: none;
  font-size: clamp(24px, 3.4vw, 32px);
  line-height: 1.2;
  color: var(--ink);
}
.vi-section .vi-section-desc {
  margin: 0;
  max-width: 720px;
  font-size: 16px;
  line-height: 1.5;
  color: var(--text);
}
.vi-section h3 {
  margin-top: 1.4rem;
  color: var(--ink);
}
.vi-section ul, .vi-section ol { padding-left: 1.4rem; }

/* =======================================================================
   Badges — small pill tags for cards, list items, and the featured card.
   Tone tokens defined in :root (Phase 1).
   ======================================================================= */
.vi-badge-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 4px;
}
.vi-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  line-height: 16px;
  font-weight: 500;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  white-space: nowrap;
}
.vi-badge-green  { color: var(--tone-green-fg); background: var(--tone-green-bg); }
.vi-badge-rose   { color: var(--tone-rose-fg);  background: var(--tone-rose-bg); }
.vi-badge-blue   { color: var(--tone-blue-fg);  background: var(--tone-blue-bg); }
.vi-badge-purple { color: var(--vi-purple-dark); background: var(--vi-purple-tint); }

/* =======================================================================
   Featured card — 2-column variant with side illustration. Used at the
   top of the Sample Code section to spotlight the highest-value template.
   ======================================================================= */
.page-content a.vi-featured-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 42%);
  gap: 28px;
  align-items: stretch;
  background: #fff;
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: 28px;
  margin: 0 0 24px;
  text-decoration: none !important;
  color: var(--text) !important;
  transition: box-shadow 0.14s ease, transform 0.14s ease;
}
.page-content a.vi-featured-card:hover {
  box-shadow: var(--shadow-card-hover);
  transform: translateY(-2px);
}
.vi-featured-card-body {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}
.vi-featured-card-body h3.vi-featured-card-title {
  margin: 0;
  padding: 0;
  border: none;
  font-size: 20px;
  line-height: 1.25;
  color: var(--ink);
  font-weight: 600;
}
.vi-featured-card-body p {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.5;
}
.vi-featured-card-cta {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-weight: 600;
  color: var(--primary);
  font-size: 14px;
  margin-top: auto;
}
.vi-featured-art {
  position: relative;
  border-radius: 12px;
  background: linear-gradient(135deg, #EEF2FF 0%, #F3EEFA 60%, #E7F8FA 100%);
  min-height: 200px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.vi-featured-art svg {
  width: 78%;
  height: auto;
  display: block;
}
@media (max-width: 700px) {
  .page-content a.vi-featured-card {
    grid-template-columns: 1fr;
    padding: 20px;
    gap: 20px;
  }
  .vi-featured-art { min-height: 160px; }
}
.vi-card .vi-card-icon {
  font-size: 1.8rem;
  line-height: 1;
  margin-bottom: 0.6rem;
}
.vi-card .vi-card-title {
  font-weight: 700;
  font-size: 1.12rem;
  color: var(--ink);
  margin-bottom: 0.35rem;
}
.vi-card .vi-card-desc {
  font-size: 0.95rem;
  color: var(--muted);
  flex: 1;
  margin: 0;
}
.vi-card .vi-card-more {
  margin-top: 0.8rem;
  font-weight: 600;
  color: var(--primary);
  font-size: 0.9rem;
}

/* ---- Search page ---- */
.vi-search {
  max-width: 46rem;
  margin: 0.5rem 0 2.5rem;
}
.vi-search-lede {
  margin: 0 0 1.25rem;
  font-size: 1.0625rem;
  line-height: 1.55;
  color: var(--muted);
}
.vi-search-field {
  position: relative;
}
.vi-search-field svg {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--muted);
  pointer-events: none;
}
.vi-search-kbd {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  font: 600 11px "Segoe UI", system-ui, sans-serif;
  color: var(--muted);
  background: #fff;
  border: 1px solid var(--rule);
  border-radius: 6px;
  padding: 2px 7px;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.04);
  pointer-events: none;
  user-select: none;
}
.vi-search-input {
  width: 100%;
  padding: 0.85rem 3.25rem 0.85rem 2.6rem;
  font: 400 1.0625rem/1.4 "Segoe UI", system-ui, sans-serif;
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--rule);
  border-radius: 12px;
  box-sizing: border-box;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.vi-search-input::placeholder { color: var(--muted); }
.vi-search-input:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: var(--focus-ring);
}
.vi-search-input:focus ~ .vi-search-kbd { display: none; }
.vi-search-status {
  margin: 1rem 0 0;
  color: var(--muted);
  font-size: 0.9rem;
}
.vi-search-results {
  list-style: none !important;
  margin: 1rem 0 0 !important;
  padding: 0 !important;
  display: grid;
  gap: 8px;
}
.vi-search-result {
  padding: 14px 16px;
  border: 1px solid var(--rule);
  border-radius: 12px;
  background: #fff;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}
.vi-search-result:hover {
  border-color: var(--primary);
  box-shadow: var(--shadow-card);
}
.page-content a.vi-search-link {
  font-weight: 600;
  font-size: 1.0625rem;
  color: var(--primary) !important;
  text-decoration: none !important;
}
.page-content a.vi-search-link:hover { text-decoration: underline !important; }
.vi-search-snippet {
  margin: 0.3rem 0 0;
  color: var(--text);
  font-size: 0.9375rem;
  line-height: 1.5;
}

/* ---- Per-page freshness signals (last updated + edit on GitHub) ---- */
.page-meta {
  margin-top: 3rem;
  padding-top: 1rem;
  border-top: 1px solid var(--rule);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 1.5rem;
  font-size: 0.875rem;
  color: var(--muted);
}
.page-meta-updated {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}
.page-content a.page-meta-edit,
.page-meta-edit {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  color: var(--primary) !important;
  font-weight: 500;
  text-decoration: none;
}
.page-content a.page-meta-edit:hover,
.page-meta-edit:hover {
  color: var(--primary-h) !important;
  text-decoration: underline;
}
.page-meta svg {
  flex: 0 0 auto;
  opacity: 0.85;
}