/* ==========================================================================
   Growth Tech 360 - Internal page design system
   --------------------------------------------------------------------------
   Loaded ONLY on non-home routes (see components/PageShell.tsx) and scoped
   entirely under `.vt-inner`, so the home page is untouched by every rule in
   this file. Brand tokens (cyan, Sora/Manrope, dark surfaces) are inherited
   from premium/variables.css so internal pages stay in the same visual family
   as the home page.

   Contents
     1  Tokens + base
     2  Layout primitives
     3  Reveal system
     4  Breadcrumbs
     5  Eyebrow / section headers / buttons
     6  Heroes (per family)
     7  Cards + compositions
     8  Process / timeline
     9  Metrics + data visuals
    10  Diagrams (architecture, workflow, funnel)
    11  Product UI mockups
    12  Editorial / resource hub
    13  Testimonials, logos, FAQ
    14  Forms + contact
    15  CTA
    16  Legal / prose
    17  Responsive + motion
   ========================================================================== */

.vt-inner {
  /* ---- surfaces ------------------------------------------------------- */
  --i-bg: #0b0e13;
  --i-bg-alt: #0d1118;
  --i-surface: rgba(255, 255, 255, 0.028);
  --i-surface-2: rgba(255, 255, 255, 0.05);
  --i-surface-3: rgba(255, 255, 255, 0.075);
  --i-ink: #080b10;

  /* ---- lines ---------------------------------------------------------- */
  --i-line: rgba(255, 255, 255, 0.08);
  --i-line-strong: rgba(255, 255, 255, 0.16);

  /* ---- text ----------------------------------------------------------- */
  --i-text: #f2f5f9;
  --i-text-2: #b9c2ce;
  --i-text-3: #8b95a3;

  /* ---- accents -------------------------------------------------------- */
  --i-brand: #01dbff;
  --i-accent: var(--vt-family-accent, #01dbff);
  --i-accent-soft: color-mix(in srgb, var(--i-accent) 14%, transparent);
  --i-accent-line: color-mix(in srgb, var(--i-accent) 32%, transparent);
  --i-accent-glow: color-mix(in srgb, var(--i-accent) 45%, transparent);
  --i-brand-soft: rgba(1, 219, 255, 0.12);
  --i-success: #3dffb5;
  --i-warning: #ffb457;

  /* ---- type ----------------------------------------------------------- */
  --i-display: var(--vt-font-display, "Sora", system-ui, sans-serif);
  --i-body: var(--vt-font-body, "Manrope", system-ui, sans-serif);

  --i-h1: clamp(2.35rem, 1.3rem + 3.6vw, 4.4rem);
  --i-h2: clamp(1.8rem, 1.18rem + 2.05vw, 2.95rem);
  --i-h3: clamp(1.18rem, 1.02rem + 0.55vw, 1.45rem);
  --i-h4: clamp(1rem, 0.94rem + 0.28vw, 1.15rem);
  --i-body-lg: clamp(1.02rem, 0.97rem + 0.24vw, 1.16rem);
  --i-body-md: clamp(0.94rem, 0.91rem + 0.16vw, 1.02rem);
  --i-body-sm: 0.875rem;
  --i-micro: 0.72rem;

  /* ---- space ---------------------------------------------------------- */
  --i-s1: 0.375rem;
  --i-s2: 0.75rem;
  --i-s3: 1.125rem;
  --i-s4: 1.75rem;
  --i-s5: 2.5rem;
  --i-s6: clamp(2.25rem, 1.6rem + 2.6vw, 3.75rem);
  --i-section-y: clamp(3.25rem, 1.6rem + 6vw, 7.25rem);

  /* ---- shape ---------------------------------------------------------- */
  --i-r-sm: 10px;
  --i-r: 16px;
  --i-r-lg: 24px;
  --i-r-xl: 32px;
  --i-shadow: 0 24px 60px -32px rgba(0, 0, 0, 0.9);
  --i-shadow-lift: 0 34px 80px -34px rgba(0, 0, 0, 0.95);

  /* ---- motion --------------------------------------------------------- */
  --i-ease: cubic-bezier(0.16, 1, 0.3, 1);
  --i-fast: 0.22s;
  --i-med: 0.42s;

  /* ---- layout --------------------------------------------------------- */
  --i-max: 1240px;
  --i-max-wide: 1420px;
  --i-gutter: clamp(1rem, 4.5vw, 2.75rem);

  padding-top: var(--vt-header-offset, var(--vt-header-h, 5.5rem));
  position: relative;
  display: block;
  min-width: 0;
  max-width: 100%;
  color: var(--i-text);
  font-family: var(--i-body);
  background: var(--i-bg);
  isolation: isolate;

  /* The template sets `body { text-transform: uppercase }`, which is why every
     internal page shouted its body copy. Reset it once here; the few places
     that genuinely want caps (eyebrows, labels, micro text) opt back in. */
  text-transform: none;
}

/* Ambient page field - one restrained wash, not neon glow per section. */
.vt-inner::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: min(1100px, 130vh);
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(58% 40% at 80% 2%, var(--i-accent-soft), transparent 68%),
    radial-gradient(46% 32% at 2% 0%, rgba(1, 219, 255, 0.06), transparent 72%);
}

.vt-inner > * {
  position: relative;
  z-index: 1;
}

/* ==========================================================================
   1 - Base typography
   ========================================================================== */

.vt-inner h1,
.vt-inner h2,
.vt-inner h3,
.vt-inner h4,
.vt-inner h5 {
  font-family: var(--i-display);
  color: var(--i-text);
  margin: 0;
  text-wrap: balance;
}

.vt-inner p,
.vt-inner li,
.vt-inner dd,
.vt-inner dt {
  font-family: var(--i-body);
  color: var(--i-text-2);
  /* The old template shouted body copy in caps - undo that everywhere. */
  text-transform: none;
  letter-spacing: normal;
}

.vt-inner p {
  margin: 0;
  font-size: var(--i-body-md);
  line-height: 1.68;
}

.vt-inner strong {
  color: var(--i-text);
  font-weight: 700;
}

.vt-inner a {
  color: inherit;
  text-decoration: none;
}

.vt-inner ul,
.vt-inner ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

.vt-inner :is(a, button, summary, input, textarea, select, [tabindex]):focus-visible {
  outline: 2px solid var(--i-brand);
  outline-offset: 3px;
  border-radius: 6px;
}

/* Sticky header must never clip an anchored heading. */
.vt-inner section[id],
.vt-inner [id] {
  scroll-margin-top: 7.5rem;
}

.vt-inner img,
.vt-inner svg,
.vt-inner iframe {
  max-width: 100%;
  min-width: 0;
}

/* ==========================================================================
   2 - Layout primitives
   ========================================================================== */

.vt-inner .vt-shell {
  width: 100%;
  max-width: var(--i-max);
  margin-inline: auto;
  padding-inline: var(--i-gutter);
}

.vt-inner .vt-shell--wide {
  max-width: var(--i-max-wide);
}

.vt-inner .vt-shell--narrow {
  max-width: 940px;
}

.vt-inner .vt-sec {
  padding-block: var(--i-section-y);
  position: relative;
}

/* Alternating ground: a raised plate rather than a repeated flat tint. */
.vt-inner .vt-sec--plate {
  background: linear-gradient(180deg, var(--i-bg-alt), rgba(11, 14, 19, 0.4));
  border-block: 1px solid var(--i-line);
}

.vt-inner .vt-sec--ink {
  background: var(--i-ink);
  border-block: 1px solid var(--i-line);
}

.vt-inner .vt-sec--tight {
  padding-block: clamp(2.25rem, 1.2rem + 3.4vw, 4.25rem);
}

/* A hairline rule that reads as structure between narrative beats. */
.vt-inner .vt-sec--seam::before {
  content: "";
  position: absolute;
  inset-inline: var(--i-gutter);
  top: 0;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    var(--i-line-strong) 18%,
    var(--i-line-strong) 82%,
    transparent
  );
}

/* Faint technical grid, used sparingly on system/architecture sections. */
.vt-inner .vt-sec--grid::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0.5;
  background-image:
    linear-gradient(var(--i-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--i-line) 1px, transparent 1px);
  background-size: 76px 76px;
  mask-image: radial-gradient(70% 60% at 50% 40%, #000 20%, transparent 78%);
  -webkit-mask-image: radial-gradient(70% 60% at 50% 40%, #000 20%, transparent 78%);
}

.vt-inner .vt-sec--grid > * {
  position: relative;
  z-index: 1;
}

/* ==========================================================================
   3 - Reveal system (replaces wow.js + animate.css on internal pages)
   ========================================================================== */

.vt-inner [data-reveal] {
  opacity: 0;
  transform: translate3d(0, 18px, 0);
  transition:
    opacity 0.7s var(--i-ease),
    transform 0.7s var(--i-ease);
  transition-delay: var(--reveal-delay, 0ms);
  /* Failsafe: if the reveal script never runs, content still appears. The
     script normally adds .is-in long before this delay elapses. */
  animation: vt-reveal-failsafe 0.01s linear 2.5s forwards;
}

.vt-inner [data-reveal].is-in {
  opacity: 1;
  transform: none;
}

@keyframes vt-reveal-failsafe {
  to {
    opacity: 1;
    transform: none;
  }
}

/* ==========================================================================
   4 - Breadcrumbs
   ========================================================================== */

.vt-inner .vt-crumbs {
  padding-top: 0.85rem;
  padding-bottom: 0.15rem;
}

.vt-inner .vt-crumbs__list {
  width: 100%;
  max-width: var(--i-max);
  margin-inline: auto;
  padding-inline: var(--i-gutter);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.3rem 0.55rem;
}

.vt-inner .vt-crumbs__item {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  font-size: var(--i-micro);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--i-text-3);
  font-weight: 600;
  overflow-wrap: anywhere;
}

.vt-inner .vt-crumbs__item + .vt-crumbs__item::before {
  content: "";
  flex: none;
  width: 12px;
  height: 1px;
  background: var(--i-line-strong);
}

.vt-inner .vt-crumbs__item a {
  color: var(--i-text-3);
  transition: color var(--i-fast) var(--i-ease);
}

.vt-inner .vt-crumbs__item a:hover {
  color: var(--i-brand);
}

.vt-inner .vt-crumbs__item [aria-current="page"] {
  color: var(--i-text);
}

/* ==========================================================================
   5 - Eyebrow / section header / buttons
   ========================================================================== */

.vt-inner .vt-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-family: var(--i-body);
  font-size: var(--i-micro);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--i-accent);
}

.vt-inner .vt-eyebrow::before {
  content: "";
  flex: none;
  width: 22px;
  height: 1px;
  background: currentColor;
  opacity: 0.65;
}

.vt-inner .vt-eyebrow i {
  font-size: 0.9em;
}

.vt-inner .vt-eyebrow--chip {
  align-items: baseline;
  padding: 0.5rem 0.95rem;
  border: 1px solid var(--i-accent-line);
  border-radius: 999px;
  background: var(--i-accent-soft);
  line-height: 1.5;
  text-wrap: balance;
}

.vt-inner .vt-eyebrow--chip::before {
  display: none;
}

.vt-inner .vt-head {
  display: grid;
  gap: var(--i-s3);
  margin-bottom: var(--i-s6);
  max-width: 62ch;
}

.vt-inner .vt-head__title {
  font-size: var(--i-h2);
  line-height: 1.06;
  letter-spacing: -0.025em;
  font-weight: 700;
}

.vt-inner .vt-head__sub {
  font-size: var(--i-body-lg);
  line-height: 1.62;
  color: var(--i-text-2);
  max-width: 56ch;
}

.vt-inner .vt-head--center {
  margin-inline: auto;
  justify-items: center;
  text-align: center;
}

.vt-inner .vt-head--center .vt-head__sub {
  margin-inline: auto;
}

/* Split header: title left, supporting copy right - breaks the centred rhythm. */
.vt-inner .vt-head--split {
  max-width: none;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.9fr);
  align-items: end;
  gap: var(--i-s4) var(--i-s6);
}

.vt-inner .vt-head--split .vt-eyebrow {
  grid-column: 1 / -1;
}

.vt-inner .vt-head--split .vt-head__sub {
  max-width: 46ch;
  padding-bottom: 0.4rem;
}

@media (max-width: 900px) {
  .vt-inner .vt-head--split {
    grid-template-columns: 1fr;
  }
}

/* Numbered section marker for narrative pages. */
.vt-inner .vt-head__index {
  font-family: var(--i-display);
  font-size: var(--i-micro);
  font-weight: 700;
  letter-spacing: 0.22em;
  color: var(--i-text-3);
}

/* --- Buttons --- */

.vt-inner .vt-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  min-height: 50px;
  padding: 0.8rem 1.5rem;
  border-radius: 999px;
  border: 1px solid transparent;
  font-family: var(--i-body);
  font-size: 0.92rem;
  font-weight: 700;
  line-height: 1.2;
  cursor: pointer;
  text-align: center;
  transition:
    transform var(--i-fast) var(--i-ease),
    box-shadow var(--i-fast) var(--i-ease),
    background-color var(--i-fast) var(--i-ease),
    border-color var(--i-fast) var(--i-ease),
    color var(--i-fast) var(--i-ease);
}

.vt-inner .vt-btn--primary {
  background: var(--i-brand);
  color: #04161c;
  box-shadow: 0 18px 42px -22px rgba(1, 219, 255, 0.55);
}

.vt-inner .vt-btn--primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 26px 54px -20px rgba(1, 219, 255, 0.6);
}

.vt-inner .vt-btn--ghost {
  background: var(--i-surface);
  border-color: var(--i-line-strong);
  color: var(--i-text);
}

.vt-inner .vt-btn--ghost:hover {
  transform: translateY(-2px);
  border-color: var(--i-brand);
  color: var(--i-brand);
  background: var(--i-surface-2);
}

.vt-inner .vt-btn--quiet {
  min-height: 0;
  padding: 0.3rem 0;
  border-radius: 4px;
  background: none;
  color: var(--i-brand);
}

.vt-inner .vt-btn--quiet i {
  transition: transform var(--i-fast) var(--i-ease);
}

.vt-inner .vt-btn--quiet:hover i {
  transform: translateX(4px);
}

.vt-inner .vt-btn-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
}

@media (max-width: 420px) {
  .vt-inner .vt-btn-row .vt-btn {
    width: 100%;
  }
}
/* ==========================================================================
   6 - Heroes
   Each family gets its own composition. They share type, colour and button
   language with the home page, but never the same layout twice in a row.
   ========================================================================== */

.vt-inner .vt-hero {
  position: relative;
  padding-top: clamp(0.85rem, 0.5rem + 1.1vw, 1.65rem);
  padding-bottom: var(--i-section-y);
  overflow: clip;
}

.vt-inner .vt-hero__grid {
  display: grid;
  gap: clamp(2rem, 1rem + 4vw, 4.5rem);
  align-items: center;
}

.vt-inner .vt-hero__content {
  display: grid;
  gap: var(--i-s4);
  justify-items: start;
  min-width: 0;
  max-width: 100%;
}

.vt-inner .vt-hero__content > * {
  min-width: 0;
  max-width: 100%;
}

.vt-inner .vt-hero__title {
  font-size: var(--i-h1);
  line-height: 1.02;
  letter-spacing: -0.035em;
  font-weight: 700;
}

.vt-inner .vt-hero__title em {
  font-style: normal;
  color: var(--i-brand);
}

/* Highlighted phrase inside a headline. It must stay wrappable: several pages
   mark up a whole clause, and nowrap pushed those headlines over the hero
   visual in the next column. */
.vt-inner .vt-hero__title .vt-mark,
.vt-inner .vt-head__title .vt-mark {
  color: var(--i-brand);
}

.vt-inner .vt-hero__lede {
  font-size: var(--i-body-lg);
  line-height: 1.62;
  color: var(--i-text-2);
  max-width: 54ch;
}

.vt-inner .vt-hero__checks {
  display: grid;
  gap: 0.7rem;
  width: 100%;
}

.vt-inner .vt-hero__checks li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: 0.7rem;
  font-size: var(--i-body-md);
  color: var(--i-text-2);
  line-height: 1.5;
}

.vt-inner .vt-hero__checks i {
  margin-top: 0.28em;
  font-size: 0.8rem;
  color: var(--i-brand);
}

/* Two columns of checks when there are enough of them and room to show them. */
@media (min-width: 620px) {
  .vt-inner .vt-hero__checks--split {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 1.5rem;
  }
}

/* --- 6.1 Service hero: editorial split + capability stack ---------------- */

.vt-inner[data-page-family="service"] .vt-hero__grid {
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
}

/* --- 6.2 Solution / platform hero: text + system diagram ---------------- */

.vt-inner[data-page-family="solution"] .vt-hero__grid,
.vt-inner[data-page-family="platform"] .vt-hero__grid {
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.95fr);
}

/* --- 6.3 Product hero: centred masthead over a wide UI mockup ----------- */

.vt-inner[data-page-family="product"] .vt-hero__grid {
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
  text-align: center;
  gap: clamp(2.5rem, 1.5rem + 3vw, 4rem);
}

.vt-inner[data-page-family="product"] .vt-hero__content {
  justify-items: center;
  max-width: 60ch;
}

.vt-inner[data-page-family="product"] .vt-hero__lede {
  margin-inline: auto;
}

.vt-inner[data-page-family="product"] .vt-hero__visual {
  width: 100%;
}

/* --- 6.4 Industry hero: asymmetric with a vertical family rail ---------- */

.vt-inner[data-page-family="industry"] .vt-hero__grid {
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
}

/* --- 6.5 About hero: statement type, no card --------------------------- */

.vt-inner[data-page-family="about"] .vt-hero__grid {
  grid-template-columns: minmax(0, 1fr);
}

.vt-inner[data-page-family="about"] .vt-hero__content {
  max-width: 22ch;
}

.vt-inner[data-page-family="about"] .vt-hero__title {
  font-size: clamp(2.6rem, 1.2rem + 5.2vw, 5.5rem);
}

.vt-inner[data-page-family="about"] .vt-hero__lede {
  max-width: 52ch;
}

.vt-inner[data-page-family="about"] .vt-hero__content {
  max-width: none;
}

/* --- 6.6 Contact hero: compact, the form is the page ------------------- */

.vt-inner[data-page-family="contact"] .vt-hero {
  padding-bottom: clamp(2rem, 1rem + 3vw, 3.5rem);
}

.vt-inner[data-page-family="contact"] .vt-hero__grid {
  grid-template-columns: minmax(0, 1fr);
}

.vt-inner[data-page-family="contact"] .vt-hero__title {
  font-size: clamp(2.2rem, 1.3rem + 3.2vw, 3.9rem);
  max-width: 18ch;
}

/* --- 6.7 Resource hero: editorial masthead ----------------------------- */

.vt-inner[data-page-family="resource"] .vt-hero__grid {
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr);
  align-items: end;
}

.vt-inner[data-page-family="resource"] .vt-hero__title {
  font-size: clamp(2.5rem, 1.2rem + 4.6vw, 5rem);
  letter-spacing: -0.04em;
}

/* --- 6.8 Legal hero: document header ----------------------------------- */

.vt-inner[data-page-family="legal"] .vt-hero {
  padding-bottom: clamp(1.5rem, 1rem + 2vw, 2.75rem);
}

.vt-inner[data-page-family="legal"] .vt-hero__grid {
  grid-template-columns: minmax(0, 1fr);
}

.vt-inner[data-page-family="legal"] .vt-hero__title {
  font-size: clamp(2rem, 1.3rem + 2.6vw, 3.2rem);
}

/* --- 6.9 Local hero: place-led ----------------------------------------- */

.vt-inner[data-page-family="local"] .vt-hero__grid {
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
}

@media (max-width: 992px) {
  .vt-inner .vt-hero__grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  .vt-inner .vt-hero__visual {
    order: 2;
  }
}

/* --- Hero side panel: the capability stack ------------------------------ */

.vt-inner .vt-panel {
  position: relative;
  border: 1px solid var(--i-line);
  border-radius: var(--i-r-lg);
  background:
    linear-gradient(160deg, var(--i-surface-2), rgba(255, 255, 255, 0.012));
  box-shadow: var(--i-shadow);
  overflow: hidden;
}

.vt-inner .vt-panel::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  top: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--i-accent-line), transparent);
}

.vt-inner .vt-panel__bar {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.85rem 1.1rem;
  border-bottom: 1px solid var(--i-line);
  background: rgba(255, 255, 255, 0.02);
}

.vt-inner .vt-panel__dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--i-line-strong);
}

.vt-inner .vt-panel__dot:first-child {
  background: var(--i-accent);
}

.vt-inner .vt-panel__label {
  margin-left: auto;
  font-size: var(--i-micro);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--i-text-3);
}

.vt-inner .vt-panel__body {
  padding: clamp(1.1rem, 0.8rem + 1vw, 1.6rem);
  display: grid;
  gap: 0.7rem;
}

/* Stacked rows inside the hero panel - reads as a system, not a card grid. */
.vt-inner .vt-stack-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.85rem;
  padding: 0.85rem 0.95rem;
  border: 1px solid var(--i-line);
  border-radius: var(--i-r);
  background: rgba(255, 255, 255, 0.02);
  transition:
    border-color var(--i-fast) var(--i-ease),
    background-color var(--i-fast) var(--i-ease),
    transform var(--i-fast) var(--i-ease);
}

.vt-inner .vt-stack-row:hover {
  transform: translateX(3px);
  border-color: var(--i-accent-line);
  background: var(--i-surface-2);
}

.vt-inner .vt-stack-row__icon {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: var(--i-accent-soft);
  border: 1px solid var(--i-accent-line);
  color: var(--i-accent);
  font-size: 0.85rem;
}

.vt-inner .vt-stack-row__text {
  min-width: 0;
}

.vt-inner .vt-stack-row__title {
  font-family: var(--i-display);
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--i-text);
  line-height: 1.3;
}

.vt-inner .vt-stack-row__meta {
  font-size: var(--i-micro);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--i-text-3);
  margin-top: 0.2rem;
}

.vt-inner .vt-stack-row__state {
  font-size: var(--i-micro);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--i-success);
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.vt-inner .vt-stack-row__state::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--i-success) 18%, transparent);
}

/* Hero trust strip below the fold line. */
.vt-inner .vt-hero__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem 1.5rem;
  padding-top: var(--i-s3);
  border-top: 1px solid var(--i-line);
  width: 100%;
}

.vt-inner .vt-hero__meta-item {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: var(--i-micro);
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--i-text-3);
  overflow-wrap: anywhere;
  min-width: 0;
}

.vt-inner .vt-hero__meta-item i {
  color: var(--i-accent);
  font-size: 0.9em;
}

/* Live availability pip. */
.vt-inner .vt-pip {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--i-success);
  box-shadow: 0 0 0 0 color-mix(in srgb, var(--i-success) 55%, transparent);
  animation: vt-pip 2.6s var(--i-ease) infinite;
}

@keyframes vt-pip {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--i-success) 50%, transparent); }
  70% { box-shadow: 0 0 0 8px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}

/* Vertical family rail used on industry + local heroes. */
.vt-inner .vt-rail {
  position: absolute;
  left: calc(var(--i-gutter) * -1 + 0.35rem);
  top: 0;
  display: none;
  writing-mode: vertical-rl;
  font-size: var(--i-micro);
  font-weight: 700;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--i-text-3);
}

@media (min-width: 1360px) {
  .vt-inner .vt-rail {
    display: block;
  }
}
/* ==========================================================================
   7 - Card compositions
   The old internal site repeated one bordered card ~1500 times. These are
   seven distinct ways to present the same content; the page generator rotates
   through them so no page stacks the same shape twice.
   ========================================================================== */

/* --- 7.1 Feature grid: the refined default ----------------------------- */

.vt-inner .vt-grid {
  display: grid;
  gap: clamp(0.9rem, 0.6rem + 1vw, 1.35rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 270px), 1fr));
}

.vt-inner .vt-grid--2 {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr));
}

.vt-inner .vt-grid--4 {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
}

.vt-inner .vt-feature {
  position: relative;
  display: grid;
  gap: 0.85rem;
  align-content: start;
  padding: clamp(1.35rem, 1rem + 1vw, 1.9rem);
  border: 1px solid var(--i-line);
  border-radius: var(--i-r-lg);
  background: var(--i-surface);
  overflow: hidden;
  transition:
    border-color var(--i-med) var(--i-ease),
    background-color var(--i-med) var(--i-ease),
    transform var(--i-med) var(--i-ease);
}

/* Accent seam that draws in on hover - restrained, no glow blocks. */
.vt-inner .vt-feature::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg, var(--i-accent), transparent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--i-med) var(--i-ease);
}

.vt-inner .vt-feature:hover {
  transform: translateY(-4px);
  border-color: var(--i-line-strong);
  background: var(--i-surface-2);
}

.vt-inner .vt-feature:hover::after {
  transform: scaleX(1);
}

.vt-inner .vt-feature__icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 13px;
  border: 1px solid var(--i-accent-line);
  background: var(--i-accent-soft);
  color: var(--i-accent);
  font-size: 1.02rem;
}

.vt-inner .vt-feature__title {
  font-size: var(--i-h4);
  font-weight: 600;
  line-height: 1.32;
  letter-spacing: -0.01em;
}

.vt-inner .vt-feature__text {
  font-size: var(--i-body-md);
  line-height: 1.62;
  color: var(--i-text-2);
}

/* --- 7.2 Mosaic: one dominant panel, supporting tiles around it -------- */

.vt-inner .vt-mosaic {
  display: grid;
  gap: clamp(0.9rem, 0.6rem + 1vw, 1.35rem);
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.vt-inner .vt-mosaic > :first-child {
  grid-column: span 2;
  grid-row: span 2;
  padding: clamp(1.75rem, 1.2rem + 1.8vw, 2.75rem);
  background:
    radial-gradient(120% 90% at 100% 0%, var(--i-accent-soft), transparent 62%),
    var(--i-surface-2);
}

.vt-inner .vt-mosaic > :first-child .vt-feature__title {
  font-size: var(--i-h3);
}

.vt-inner .vt-mosaic > :first-child .vt-feature__icon {
  width: 54px;
  height: 54px;
  font-size: 1.25rem;
}

.vt-inner .vt-mosaic > :first-child .vt-feature__text {
  font-size: var(--i-body-lg);
  max-width: 44ch;
}

@media (max-width: 900px) {
  .vt-inner .vt-mosaic {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .vt-inner .vt-mosaic > :first-child {
    grid-column: span 2;
    grid-row: auto;
  }
}

@media (max-width: 560px) {
  .vt-inner .vt-mosaic {
    grid-template-columns: minmax(0, 1fr);
  }
  .vt-inner .vt-mosaic > :first-child {
    grid-column: auto;
  }
}

/* --- 7.3 Rows: editorial, borderless, index-led ------------------------ */

.vt-inner .vt-rows {
  display: grid;
  border-top: 1px solid var(--i-line);
}

.vt-inner .vt-row {
  display: grid;
  grid-template-columns: 4.5rem minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(1rem, 0.5rem + 1.6vw, 2.5rem);
  align-items: start;
  padding-block: clamp(1.4rem, 1rem + 1.4vw, 2.25rem);
  border-bottom: 1px solid var(--i-line);
  transition: background-color var(--i-med) var(--i-ease);
}

.vt-inner .vt-row:hover {
  background: rgba(255, 255, 255, 0.018);
}

.vt-inner .vt-row__index {
  font-family: var(--i-display);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--i-text-3);
  padding-top: 0.35rem;
}

.vt-inner .vt-row:hover .vt-row__index {
  color: var(--i-accent);
}

.vt-inner .vt-row__title {
  font-size: clamp(1.15rem, 1rem + 0.7vw, 1.6rem);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.02em;
  display: flex;
  align-items: baseline;
  gap: 0.7rem;
}

.vt-inner .vt-row__title i {
  font-size: 0.72em;
  color: var(--i-accent);
  flex: none;
}

.vt-inner .vt-row__text {
  font-size: var(--i-body-md);
  line-height: 1.68;
  color: var(--i-text-2);
  max-width: 62ch;
}

@media (max-width: 780px) {
  .vt-inner .vt-row {
    grid-template-columns: 2.6rem minmax(0, 1fr);
  }
  .vt-inner .vt-row__text {
    grid-column: 2;
  }
}

/* --- 7.4 Ledger: two-column hairline list, zero boxes ------------------ */

.vt-inner .vt-ledger {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 clamp(2rem, 1rem + 4vw, 5rem);
}

.vt-inner .vt-ledger__item {
  display: grid;
  gap: 0.5rem;
  padding-block: clamp(1.1rem, 0.85rem + 0.9vw, 1.6rem);
  border-top: 1px solid var(--i-line);
}

.vt-inner .vt-ledger__term {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  font-family: var(--i-display);
  font-size: var(--i-h4);
  font-weight: 600;
  color: var(--i-text);
  line-height: 1.32;
}

.vt-inner .vt-ledger__term i {
  flex: none;
  color: var(--i-accent);
  font-size: 0.82em;
}

.vt-inner .vt-ledger__def {
  font-size: var(--i-body-md);
  line-height: 1.66;
  color: var(--i-text-2);
}

/* --- 7.4b People: studio directory, not empty portrait cards ----------- */

.vt-inner .vt-people {
  display: grid;
  gap: clamp(1.75rem, 1.1rem + 1.8vw, 2.75rem);
}

.vt-inner .vt-people__label {
  margin: 0 0 0.75rem;
  color: var(--i-accent);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.vt-inner .vt-people__list,
.vt-inner ol.vt-people {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
  overflow: hidden;
  border: 1px solid var(--i-line);
  border-radius: 18px;
  background: var(--i-surface);
}

.vt-inner .vt-person {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-template-rows: auto 1fr;
  grid-template-areas:
    "index . sig"
    "copy copy copy";
  align-items: start;
  gap: 0.2rem 0.85rem;
  min-height: 13.25rem;
  padding: 1.35rem 1.45rem 1.4rem;
  overflow: hidden;
  border: 0;
  border-right: 1px solid var(--i-line);
  border-radius: 0;
  background:
    radial-gradient(120% 90% at 100% 0%, var(--i-accent-soft), transparent 58%);
  transition: background-color var(--i-fast) var(--i-ease);
}

.vt-inner .vt-person:nth-child(2n) {
  border-right: 0;
}

.vt-inner .vt-person__index {
  grid-area: index;
  padding-top: 0.35rem;
  color: var(--i-text-3);
  font-family: var(--i-display);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.14em;
}

.vt-inner .vt-person__copy {
  grid-area: copy;
  align-self: end;
  min-width: 0;
}

.vt-inner .vt-person__name {
  margin: 0;
  color: var(--i-text);
  font-family: var(--i-display);
  font-size: clamp(1.55rem, 1.05rem + 1.5vw, 2.15rem);
  font-weight: 650;
  letter-spacing: -0.035em;
  line-height: 1.1;
  text-transform: none;
}

.vt-inner .vt-person--lead .vt-person__name {
  font-size: clamp(1.7rem, 1.1rem + 1.7vw, 2.35rem);
}

.vt-inner .vt-person__role {
  margin: 0.45rem 0 0;
  color: var(--i-accent);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.vt-inner .vt-person__sig {
  grid-area: sig;
  color: color-mix(in srgb, var(--i-accent) 34%, transparent);
  font-family: var(--i-display);
  font-size: clamp(1.7rem, 1.15rem + 1.6vw, 2.4rem);
  font-weight: 700;
  letter-spacing: -0.05em;
  line-height: 0.9;
  user-select: none;
  transition: color var(--i-fast) var(--i-ease);
}

.vt-inner .vt-person:hover,
.vt-inner .vt-person:focus-within {
  background:
    radial-gradient(120% 90% at 100% 0%, var(--i-accent-soft), transparent 58%),
    var(--i-surface-2);
}

.vt-inner .vt-person:hover .vt-person__index,
.vt-inner .vt-person:focus-within .vt-person__index {
  color: var(--i-accent);
}

.vt-inner .vt-person:hover .vt-person__sig,
.vt-inner .vt-person:focus-within .vt-person__sig {
  color: color-mix(in srgb, var(--i-accent) 72%, transparent);
}

@media (max-width: 760px) {
  .vt-inner .vt-people__list,
  .vt-inner ol.vt-people {
    grid-template-columns: minmax(0, 1fr);
  }

  .vt-inner .vt-person {
    grid-template-columns: 2.4rem minmax(0, 1fr) auto;
    grid-template-rows: auto;
    grid-template-areas: "index copy sig";
    align-items: center;
    min-height: 0;
    border-right: 0;
    border-bottom: 1px solid var(--i-line);
    padding: 1.05rem 1.05rem;
  }

  .vt-inner .vt-person:last-child {
    border-bottom: 0;
  }

  .vt-inner .vt-person__index {
    padding-top: 0;
  }

  .vt-inner .vt-person__sig {
    font-size: 1.35rem;
  }

  .vt-inner .vt-person__name,
  .vt-inner .vt-person--lead .vt-person__name {
    font-size: 1.28rem;
  }
}

.vt-inner[data-page-slug="about-leadership"] .vt-hero {
  padding-bottom: clamp(2.25rem, 1.1rem + 3vw, 3.75rem);
}

.vt-inner[data-page-slug="about-leadership"] .vt-hero__title {
  max-width: 11ch;
}

@media (max-width: 760px) {
  .vt-inner .vt-ledger {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* --- 7.5 Slabs: large alternating panels ------------------------------- */

.vt-inner .vt-slabs {
  display: grid;
  gap: clamp(1rem, 0.6rem + 1.2vw, 1.6rem);
}

.vt-inner .vt-slab {
  display: grid;
  grid-template-columns: auto minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(1rem, 0.6rem + 1.6vw, 2.5rem);
  align-items: center;
  padding: clamp(1.35rem, 1rem + 1.4vw, 2.15rem) clamp(1.5rem, 1.1rem + 1.6vw, 2.5rem);
  border: 1px solid var(--i-line);
  border-radius: var(--i-r-lg);
  background: var(--i-surface);
  transition:
    border-color var(--i-med) var(--i-ease),
    background-color var(--i-med) var(--i-ease);
}

.vt-inner .vt-slab:hover {
  border-color: var(--i-line-strong);
  background: var(--i-surface-2);
}

.vt-inner .vt-slab__lead {
  display: contents;
}

.vt-inner .vt-slab__num {
  font-family: var(--i-display);
  font-size: clamp(2rem, 1.4rem + 1.9vw, 3rem);
  font-weight: 700;
  line-height: 0.9;
  letter-spacing: -0.05em;
  color: transparent;
  -webkit-text-stroke: 1px var(--i-line-strong);
  font-variant-numeric: tabular-nums;
}

.vt-inner .vt-slab:hover .vt-slab__num {
  -webkit-text-stroke-color: var(--i-accent-line);
}

.vt-inner .vt-slab__title {
  font-size: var(--i-h3);
  font-weight: 600;
  line-height: 1.24;
  letter-spacing: -0.02em;
}

.vt-inner .vt-slab__text {
  font-size: var(--i-body-md);
  line-height: 1.7;
  max-width: 62ch;
}

@media (max-width: 820px) {
  .vt-inner .vt-slab {
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
    gap: 0.5rem 1rem;
  }
  .vt-inner .vt-slab__num {
    grid-row: span 2;
  }
}

/* --- 7.6 Split feature: sticky headline, scrolling list ---------------- */

.vt-inner .vt-split {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(1.75rem, 1rem + 3vw, 4.5rem);
  align-items: start;
}

.vt-inner .vt-split__aside {
  display: grid;
  gap: var(--i-s3);
  justify-items: start;
}

@media (min-width: 1000px) {
  .vt-inner .vt-split__aside {
    position: sticky;
    top: 8rem;
  }
}

.vt-inner .vt-split__list {
  display: grid;
  gap: 0.75rem;
}

.vt-inner .vt-split-item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 1rem;
  padding: clamp(1rem, 0.8rem + 0.7vw, 1.4rem);
  border: 1px solid var(--i-line);
  border-radius: var(--i-r);
  background: var(--i-surface);
  transition:
    border-color var(--i-fast) var(--i-ease),
    transform var(--i-fast) var(--i-ease);
}

.vt-inner .vt-split-item:hover {
  transform: translateX(4px);
  border-color: var(--i-accent-line);
}

.vt-inner .vt-split-item__icon {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 11px;
  background: var(--i-surface-2);
  border: 1px solid var(--i-line);
  color: var(--i-accent);
  font-size: 0.9rem;
}

.vt-inner .vt-split-item__title {
  font-size: var(--i-h4);
  font-weight: 600;
  line-height: 1.35;
  margin-bottom: 0.3rem;
}

.vt-inner .vt-split-item__text {
  font-size: var(--i-body-md);
  line-height: 1.62;
}

@media (max-width: 900px) {
  .vt-inner .vt-split {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* --- 7.7 Tiles: compact, for tools / capabilities at a glance ---------- */

.vt-inner .vt-tiles {
  display: grid;
  gap: 0.7rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
}

.vt-inner .vt-tile {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 0.75rem;
  padding: 0.9rem 1rem;
  border: 1px solid var(--i-line);
  border-radius: var(--i-r);
  background: var(--i-surface);
  font-size: var(--i-body-sm);
  font-weight: 600;
  color: var(--i-text);
  transition:
    border-color var(--i-fast) var(--i-ease),
    background-color var(--i-fast) var(--i-ease);
}

.vt-inner .vt-tile:hover {
  border-color: var(--i-accent-line);
  background: var(--i-surface-2);
}

.vt-inner .vt-tile i {
  color: var(--i-accent);
  font-size: 0.9rem;
}

/* --- 7.8 Link cards: section index navigation -------------------------- */

.vt-inner .vt-linkgrid {
  display: grid;
  gap: clamp(0.9rem, 0.6rem + 1vw, 1.3rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
}

.vt-inner .vt-linkcard {
  position: relative;
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 0.85rem;
  padding: clamp(1.35rem, 1rem + 1vw, 1.85rem);
  border: 1px solid var(--i-line);
  border-radius: var(--i-r-lg);
  background: var(--i-surface);
  overflow: hidden;
  transition:
    border-color var(--i-med) var(--i-ease),
    background-color var(--i-med) var(--i-ease),
    transform var(--i-med) var(--i-ease);
}

.vt-inner .vt-linkcard::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(80% 60% at 100% 0%, var(--i-accent-soft), transparent 60%);
  opacity: 0;
  transition: opacity var(--i-med) var(--i-ease);
}

.vt-inner .vt-linkcard:hover {
  transform: translateY(-4px);
  border-color: var(--i-line-strong);
  background: var(--i-surface-2);
}

.vt-inner .vt-linkcard:hover::before {
  opacity: 1;
}

.vt-inner .vt-linkcard > * {
  position: relative;
}

.vt-inner .vt-linkcard__head {
  display: flex;
  align-items: center;
  gap: 0.85rem;
}

.vt-inner .vt-linkcard__icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  border: 1px solid var(--i-accent-line);
  background: var(--i-accent-soft);
  color: var(--i-accent);
  font-size: 0.95rem;
}

.vt-inner .vt-linkcard__title {
  font-size: var(--i-h4);
  font-weight: 600;
  line-height: 1.3;
}

/* The whole card is the hit target; the anchor covers it. */
.vt-inner .vt-linkcard__link::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
}

.vt-inner .vt-linkcard__text {
  font-size: var(--i-body-md);
  line-height: 1.62;
}

.vt-inner .vt-linkcard__cue {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: var(--i-micro);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--i-brand);
}

.vt-inner .vt-linkcard__cue i {
  transition: transform var(--i-fast) var(--i-ease);
}

.vt-inner .vt-linkcard:hover .vt-linkcard__cue i {
  transform: translateX(5px);
}

/* --- 7.9 Pull statement: one large idea, no box ------------------------ */

.vt-inner .vt-statement {
  display: grid;
  gap: var(--i-s4);
  max-width: 24ch;
}

.vt-inner .vt-statement__text {
  font-family: var(--i-display);
  font-size: clamp(1.6rem, 1rem + 2.6vw, 3rem);
  font-weight: 600;
  line-height: 1.14;
  letter-spacing: -0.03em;
  color: var(--i-text);
  text-wrap: balance;
}

.vt-inner .vt-statement__text b {
  color: var(--i-brand);
  font-weight: inherit;
}
/* ==========================================================================
   8 - Process / timeline
   ========================================================================== */

/* --- 8.1 Rail: numbered nodes on a connected line ---------------------- */

.vt-inner .vt-rail-steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr));
  gap: clamp(1.25rem, 0.8rem + 1.6vw, 2rem) clamp(0.75rem, 0.5rem + 1vw, 1.25rem);
  position: relative;
  counter-reset: vt-step;
}

.vt-inner .vt-step {
  position: relative;
  display: grid;
  gap: 0.7rem;
  align-content: start;
  padding-top: 2.9rem;
}

/* The connecting line lives on each step so it wraps correctly. */
.vt-inner .vt-step::before {
  content: "";
  position: absolute;
  top: 21px;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--i-line);
}

.vt-inner .vt-step:first-child::before {
  left: 21px;
}

.vt-inner .vt-step:last-child::before {
  right: calc(100% - 22px);
}

.vt-inner .vt-step__node {
  position: absolute;
  top: 0;
  left: 0;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--i-line-strong);
  background: var(--i-bg);
  color: var(--i-accent);
  font-family: var(--i-display);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  transition:
    border-color var(--i-med) var(--i-ease),
    box-shadow var(--i-med) var(--i-ease),
    color var(--i-med) var(--i-ease);
}

.vt-inner .vt-step:hover .vt-step__node {
  border-color: var(--i-accent);
  box-shadow: 0 0 0 5px var(--i-accent-soft);
}

.vt-inner .vt-step__title {
  font-size: var(--i-h4);
  font-weight: 600;
  line-height: 1.32;
}

.vt-inner .vt-step__text {
  font-size: var(--i-body-sm);
  line-height: 1.6;
  color: var(--i-text-2);
}

@media (max-width: 640px) {
  .vt-inner .vt-rail-steps {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }
  .vt-inner .vt-step {
    padding: 0 0 1.5rem 3.5rem;
  }
  .vt-inner .vt-step::before {
    top: 44px;
    bottom: 0;
    left: 21px;
    right: auto;
    width: 1px;
    height: auto;
  }
  .vt-inner .vt-step:last-child::before {
    display: none;
  }
}

/* --- 8.2 Spine: vertical phase timeline (used on longer processes) ----- */

.vt-inner .vt-spine {
  position: relative;
  display: grid;
  gap: clamp(1.25rem, 0.9rem + 1.4vw, 2.25rem);
  padding-left: clamp(2.5rem, 2rem + 2vw, 4rem);
}

.vt-inner .vt-spine::before {
  content: "";
  position: absolute;
  left: clamp(0.9rem, 0.7rem + 0.7vw, 1.4rem);
  top: 0.6rem;
  bottom: 0.6rem;
  width: 1px;
  background: linear-gradient(180deg, var(--i-accent-line), var(--i-line) 45%, transparent);
}

.vt-inner .vt-phase {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 0.75fr) minmax(0, 1.25fr);
  gap: clamp(0.75rem, 0.5rem + 1.4vw, 2.25rem);
  align-items: baseline;
}

.vt-inner .vt-phase::before {
  content: "";
  position: absolute;
  left: calc(clamp(2.5rem, 2rem + 2vw, 4rem) * -1 + clamp(0.9rem, 0.7rem + 0.7vw, 1.4rem) - 4px);
  top: 0.55rem;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--i-bg);
  border: 1px solid var(--i-accent);
}

.vt-inner .vt-phase__label {
  display: grid;
  gap: 0.35rem;
}

.vt-inner .vt-phase__num {
  font-family: var(--i-display);
  font-size: var(--i-micro);
  font-weight: 700;
  letter-spacing: 0.2em;
  color: var(--i-accent);
}

.vt-inner .vt-phase__title {
  font-size: var(--i-h3);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.02em;
}

.vt-inner .vt-phase__text {
  font-size: var(--i-body-md);
  line-height: 1.7;
  max-width: 60ch;
}

@media (max-width: 720px) {
  .vt-inner .vt-phase {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.5rem;
  }
}

/* ==========================================================================
   9 - Metrics and data
   ========================================================================== */

/* --- 9.1 Stat strip: hairline-separated, no boxes ---------------------- */

.vt-inner .vt-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
  border: 1px solid var(--i-line);
  border-radius: var(--i-r-lg);
  background: linear-gradient(160deg, var(--i-surface-2), rgba(255, 255, 255, 0.01));
  overflow: hidden;
}

.vt-inner .vt-stat {
  display: grid;
  gap: 0.45rem;
  align-content: start;
  padding: clamp(1.25rem, 1rem + 1vw, 1.9rem);
  border-right: 1px solid var(--i-line);
  border-bottom: 1px solid var(--i-line);
}

.vt-inner .vt-stat__icon {
  color: var(--i-accent);
  font-size: 0.95rem;
  margin-bottom: 0.15rem;
}

.vt-inner .vt-stat__value {
  font-family: var(--i-display);
  font-size: clamp(1.35rem, 1.05rem + 1.1vw, 2rem);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.03em;
  color: var(--i-text);
}

.vt-inner .vt-stat__label {
  font-size: var(--i-body-sm);
  line-height: 1.5;
  color: var(--i-text-3);
}

/* --- 9.2 KPI board: a compact analytics panel -------------------------- */

.vt-inner .vt-kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr));
  gap: 0.7rem;
}

.vt-inner .vt-kpi {
  display: grid;
  gap: 0.3rem;
  padding: 0.95rem 1.05rem;
  border: 1px solid var(--i-line);
  border-radius: var(--i-r);
  background: rgba(255, 255, 255, 0.02);
}

.vt-inner .vt-kpi__label {
  font-size: var(--i-micro);
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--i-text-3);
}

.vt-inner .vt-kpi__value {
  font-family: var(--i-display);
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--i-text);
}

.vt-inner .vt-kpi__delta {
  font-size: var(--i-micro);
  font-weight: 700;
  color: var(--i-success);
}

/* --- 9.3 Bar chart (pure CSS, illustrative) ---------------------------- */

.vt-inner .vt-chart {
  display: grid;
  gap: 0.75rem;
}

.vt-inner .vt-chart__plot {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: clamp(0.3rem, 0.15rem + 0.6vw, 0.6rem);
  height: 128px;
  padding-top: 0.5rem;
  border-bottom: 1px solid var(--i-line);
}

.vt-inner .vt-chart__bar {
  flex: 1 1 0;
  min-width: 0;
  max-width: 58px;
  border-radius: 5px 5px 0 0;
  background: linear-gradient(180deg, var(--i-accent), color-mix(in srgb, var(--i-accent) 22%, transparent));
  height: var(--h, 40%);
  transform-origin: bottom;
}

/* Bars grow once their revealed ancestor enters the viewport. Drawn at full
   height otherwise, so a chart is never left collapsed when JS is absent. */
.vt-inner [data-reveal].is-in .vt-chart__bar {
  animation: vt-bar 0.9s var(--i-ease) both;
  animation-delay: var(--d, 0ms);
}

/* The final column is the "now" reading — brighter, but not a white slab. */
.vt-inner .vt-chart__bar:last-child {
  background: linear-gradient(180deg, #e7eef6, rgba(231, 238, 246, 0.14));
}

@keyframes vt-bar {
  from { transform: scaleY(0); }
  to { transform: scaleY(1); }
}

.vt-inner .vt-chart__axis {
  display: flex;
  justify-content: space-between;
  font-size: var(--i-micro);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--i-text-3);
}

/* --- 9.4 Progress meters ---------------------------------------------- */

.vt-inner .vt-meters {
  display: grid;
  gap: 0.85rem;
}

.vt-inner .vt-meter__top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.75rem;
  font-size: var(--i-body-sm);
  margin-bottom: 0.4rem;
}

.vt-inner .vt-meter__name {
  color: var(--i-text-2);
}

.vt-inner .vt-meter__val {
  font-family: var(--i-display);
  font-weight: 700;
  color: var(--i-text);
}

.vt-inner .vt-meter__track {
  height: 6px;
  border-radius: 999px;
  background: var(--i-surface-3);
  overflow: hidden;
}

.vt-inner .vt-meter__fill {
  height: 100%;
  border-radius: inherit;
  width: var(--w, 50%);
  background: linear-gradient(90deg, var(--i-brand), var(--i-accent));
  transform-origin: left;
}

.vt-inner [data-reveal].is-in .vt-meter__fill {
  animation: vt-fill 1s var(--i-ease) both;
  animation-delay: var(--d, 0ms);
}

@keyframes vt-fill {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

/* ==========================================================================
   10 - Diagrams
   ========================================================================== */

/* --- 10.1 Layered architecture (platform + solution pages) ------------- */

.vt-inner .vt-arch {
  display: grid;
  gap: 0;
  border: 1px solid var(--i-line);
  border-radius: var(--i-r-lg);
  background: linear-gradient(170deg, var(--i-surface-2), rgba(255, 255, 255, 0.01));
  padding: clamp(1.1rem, 0.85rem + 1vw, 1.75rem);
  box-shadow: var(--i-shadow);
}

.vt-inner .vt-arch__layer {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 0.9rem;
  padding: 0.95rem 1rem;
  border: 1px solid var(--i-line);
  border-radius: var(--i-r);
  background: rgba(255, 255, 255, 0.025);
}

/* Connector between layers. */
.vt-inner .vt-arch__layer + .vt-arch__layer {
  margin-top: 1.65rem;
}

.vt-inner .vt-arch__layer + .vt-arch__layer::before {
  content: "";
  position: absolute;
  left: 50%;
  top: -1.65rem;
  width: 1px;
  height: 1.65rem;
  background: linear-gradient(180deg, transparent, var(--i-accent-line));
}

.vt-inner .vt-arch__layer + .vt-arch__layer::after {
  content: "";
  position: absolute;
  left: 50%;
  top: -0.42rem;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  transform: translateX(-50%);
  background: var(--i-accent);
}

/* The Growth Tech layer is the emphasised one. */
.vt-inner .vt-arch__layer--core {
  border-color: var(--i-accent-line);
  background:
    linear-gradient(120deg, var(--i-accent-soft), rgba(255, 255, 255, 0.02));
  box-shadow: 0 14px 40px -26px var(--i-accent-glow);
}

.vt-inner .vt-arch__icon {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 11px;
  background: var(--i-surface-3);
  border: 1px solid var(--i-line);
  color: var(--i-accent);
  font-size: 0.88rem;
}

.vt-inner .vt-arch__layer--core .vt-arch__icon {
  background: var(--i-accent);
  border-color: transparent;
  color: #05161b;
}

.vt-inner .vt-arch__name {
  font-family: var(--i-display);
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--i-text);
  line-height: 1.3;
}

.vt-inner .vt-arch__note {
  font-size: var(--i-micro);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--i-text-3);
  margin-top: 0.2rem;
}

/* --- 10.2 Workflow: node chain with connectors ------------------------- */

.vt-inner .vt-flow {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 0.65rem;
}

.vt-inner .vt-flow__node {
  position: relative;
  flex: 1 1 150px;
  min-width: 0;
  display: grid;
  gap: 0.5rem;
  align-content: start;
  padding: 1rem;
  border: 1px solid var(--i-line);
  border-radius: var(--i-r);
  background: var(--i-surface);
  transition: border-color var(--i-fast) var(--i-ease), transform var(--i-fast) var(--i-ease);
}

.vt-inner .vt-flow__node:hover {
  transform: translateY(-3px);
  border-color: var(--i-accent-line);
}

.vt-inner .vt-flow__node::after {
  content: "\f061"; /* fa-arrow-right */
  font-family: "Font Awesome 6 Free", "Font Awesome 5 Free";
  font-weight: 900;
  position: absolute;
  right: -0.62rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.55rem;
  color: var(--i-text-3);
  z-index: 2;
}

.vt-inner .vt-flow__node:last-child::after {
  display: none;
}

.vt-inner .vt-flow__icon {
  color: var(--i-accent);
  font-size: 0.95rem;
}

.vt-inner .vt-flow__title {
  font-family: var(--i-display);
  font-size: var(--i-body-sm);
  font-weight: 600;
  color: var(--i-text);
  line-height: 1.35;
}

.vt-inner .vt-flow__text {
  font-size: var(--i-micro);
  line-height: 1.5;
  color: var(--i-text-3);
  text-transform: none;
  letter-spacing: normal;
}

@media (max-width: 620px) {
  .vt-inner .vt-flow__node::after {
    right: 50%;
    top: auto;
    bottom: -0.62rem;
    transform: translateX(50%) rotate(90deg);
  }
}

/* --- 10.3 Funnel ------------------------------------------------------- */

.vt-inner .vt-funnel {
  display: grid;
  gap: 0.5rem;
}

.vt-inner .vt-funnel__stage {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 1rem;
  padding: 0.8rem 1.05rem;
  border: 1px solid var(--i-line);
  border-radius: var(--i-r-sm);
  background: linear-gradient(
    90deg,
    color-mix(in srgb, var(--i-accent) 16%, transparent),
    rgba(255, 255, 255, 0.02)
  );
  width: var(--w, 100%);
  margin-inline: auto;
  transition: transform var(--i-fast) var(--i-ease);
}

.vt-inner .vt-funnel__stage:hover {
  transform: scale(1.012);
}

.vt-inner .vt-funnel__name {
  font-family: var(--i-display);
  font-size: var(--i-body-sm);
  font-weight: 600;
  color: var(--i-text);
}

.vt-inner .vt-funnel__val {
  font-size: var(--i-micro);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--i-text-3);
}

/* --- 10.4 Pipeline board ---------------------------------------------- */

.vt-inner .vt-pipeline {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 148px), 1fr));
  gap: 0.6rem;
}

.vt-inner .vt-pipeline__col {
  display: grid;
  gap: 0.45rem;
  align-content: start;
  padding: 0.75rem;
  border: 1px solid var(--i-line);
  border-radius: var(--i-r);
  background: rgba(255, 255, 255, 0.018);
}

.vt-inner .vt-pipeline__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
  font-size: var(--i-micro);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--i-text-3);
  padding-bottom: 0.45rem;
  border-bottom: 1px solid var(--i-line);
}

.vt-inner .vt-pipeline__name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.vt-inner .vt-pipeline__count {
  flex: none;
  color: var(--i-accent);
}

.vt-inner .vt-pipeline__card {
  padding: 0.5rem 0.6rem;
  border-radius: 8px;
  background: var(--i-surface-2);
  border: 1px solid var(--i-line);
  font-size: var(--i-micro);
  color: var(--i-text-2);
}

.vt-inner .vt-pipeline__card span {
  display: block;
  height: 5px;
  border-radius: 999px;
  background: var(--i-line-strong);
  margin-top: 0.4rem;
  width: var(--w, 70%);
}

.vt-inner .vt-pipeline__card:first-of-type span {
  background: var(--i-accent);
}

/* ==========================================================================
   11 - Product UI mockups
   ========================================================================== */

.vt-inner .vt-app {
  border: 1px solid var(--i-line-strong);
  border-radius: var(--i-r-lg);
  background: linear-gradient(180deg, #10151d, #0a0e14);
  box-shadow: var(--i-shadow-lift);
  overflow: hidden;
  overflow-x: clip;
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

.vt-inner .vt-app__chrome {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.7rem 0.9rem;
  border-bottom: 1px solid var(--i-line);
  background: rgba(255, 255, 255, 0.03);
}

.vt-inner .vt-app__dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--i-line-strong);
}

.vt-inner .vt-app__url {
  flex: 1;
  margin-left: 0.6rem;
  padding: 0.28rem 0.7rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
  font-size: var(--i-micro);
  color: var(--i-text-3);
  letter-spacing: 0.04em;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.vt-inner .vt-app__body {
  display: grid;
  grid-template-columns: 190px minmax(0, 1fr);
  min-height: 300px;
}

.vt-inner .vt-app__nav {
  display: grid;
  gap: 0.3rem;
  align-content: start;
  padding: 1rem 0.8rem;
  border-right: 1px solid var(--i-line);
  background: rgba(255, 255, 255, 0.015);
}

.vt-inner .vt-app__navitem {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.45rem 0.6rem;
  border-radius: 8px;
  font-size: var(--i-micro);
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--i-text-3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.vt-inner .vt-app__navitem i {
  flex: none;
  width: 13px;
  text-align: center;
}

.vt-inner .vt-app__navitem.is-active {
  background: var(--i-accent-soft);
  color: var(--i-accent);
}

.vt-inner .vt-app__main {
  display: grid;
  gap: 0.85rem;
  align-content: start;
  padding: clamp(0.9rem, 0.7rem + 0.8vw, 1.35rem);
}

.vt-inner .vt-app__title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.75rem;
  font-family: var(--i-display);
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--i-text);
}

.vt-inner .vt-app__badge {
  font-size: var(--i-micro);
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--i-text-3);
  padding: 0.25rem 0.6rem;
  border: 1px solid var(--i-line);
  border-radius: 999px;
}

.vt-inner .vt-app__panel {
  padding: 0.9rem;
  border: 1px solid var(--i-line);
  border-radius: var(--i-r);
  background: rgba(255, 255, 255, 0.02);
}

.vt-inner .vt-app__feed {
  display: grid;
  gap: 0.5rem;
}

.vt-inner .vt-app__event {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.6rem;
  font-size: var(--i-micro);
  color: var(--i-text-2);
  padding: 0.45rem 0;
  border-bottom: 1px solid var(--i-line);
}

.vt-inner .vt-app__event:last-child {
  border-bottom: 0;
}

.vt-inner .vt-app__event i {
  color: var(--i-accent);
  font-size: 0.78rem;
}

.vt-inner .vt-app__time {
  color: var(--i-text-3);
  font-variant-numeric: tabular-nums;
}

@media (max-width: 620px) {
  .vt-inner .vt-app__body {
    grid-template-columns: minmax(0, 1fr);
  }
  .vt-inner .vt-app__nav {
    display: flex;
    flex-wrap: nowrap;
    gap: 0.3rem;
    max-width: 100%;
    min-width: 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-right: 0;
    border-bottom: 1px solid var(--i-line);
    padding: 0.6rem;
    grid-auto-flow: unset;
    grid-auto-columns: unset;
  }
  .vt-inner .vt-app__navitem {
    flex: 0 0 auto;
  }
}

/* A caption that keeps illustrative UI honest. */
.vt-inner .vt-figcaption {
  display: block;
  margin-top: 0.7rem;
  font-size: var(--i-micro);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--i-text-3);
}
/* ==========================================================================
   12 - Editorial / resource hub
   ========================================================================== */

.vt-inner .vt-featured {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: clamp(1.25rem, 0.8rem + 2vw, 2.75rem);
  align-items: center;
  padding: clamp(1.5rem, 1.1rem + 1.8vw, 2.75rem);
  border: 1px solid var(--i-line);
  border-radius: var(--i-r-xl);
  background:
    radial-gradient(90% 130% at 100% 0%, var(--i-accent-soft), transparent 58%),
    var(--i-surface-2);
}

.vt-inner .vt-featured__body {
  display: grid;
  gap: var(--i-s3);
  justify-items: start;
}

.vt-inner .vt-featured__title {
  font-size: clamp(1.5rem, 1.15rem + 1.5vw, 2.3rem);
  font-weight: 700;
  line-height: 1.14;
  letter-spacing: -0.03em;
}

@media (max-width: 860px) {
  .vt-inner .vt-featured {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Editorial cards: type-forward, thumbnail is a generated glyph plate. */
.vt-inner .vt-posts {
  display: grid;
  gap: clamp(0.9rem, 0.6rem + 1vw, 1.4rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr));
}

.vt-inner .vt-post {
  position: relative;
  display: grid;
  grid-template-rows: auto auto 1fr auto;
  gap: 0.75rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--i-line);
  transition: border-color var(--i-med) var(--i-ease);
}

.vt-inner .vt-post:hover {
  border-color: var(--i-accent-line);
}

.vt-inner .vt-post__plate {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 16 / 9;
  border-radius: var(--i-r);
  border: 1px solid var(--i-line);
  background:
    linear-gradient(140deg, var(--i-accent-soft), rgba(255, 255, 255, 0.02)),
    var(--i-surface);
  color: var(--i-accent);
  font-size: 1.5rem;
  overflow: hidden;
}

.vt-inner .vt-post__plate::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(var(--i-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--i-line) 1px, transparent 1px);
  background-size: 26px 26px;
  opacity: 0.6;
}

.vt-inner .vt-post__plate i {
  position: relative;
  z-index: 1;
}

.vt-inner .vt-post__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 0.8rem;
  font-size: var(--i-micro);
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--i-text-3);
}

.vt-inner .vt-post__meta .vt-post__kicker {
  color: var(--i-accent);
}

.vt-inner .vt-post__title {
  font-size: var(--i-h3);
  font-weight: 600;
  line-height: 1.28;
  letter-spacing: -0.02em;
}

.vt-inner .vt-post__title a::after {
  content: "";
  position: absolute;
  inset: 0;
}

.vt-inner .vt-post__excerpt {
  font-size: var(--i-body-md);
  line-height: 1.65;
}

/* Filter / category chips for the hub. */
.vt-inner .vt-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.vt-inner .vt-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.5rem 0.95rem;
  border: 1px solid var(--i-line);
  border-radius: 999px;
  background: var(--i-surface);
  font-size: var(--i-body-sm);
  font-weight: 600;
  color: var(--i-text-2);
  cursor: pointer;
  transition:
    border-color var(--i-fast) var(--i-ease),
    color var(--i-fast) var(--i-ease),
    background-color var(--i-fast) var(--i-ease);
}

.vt-inner .vt-chip i {
  font-size: 0.8em;
  color: var(--i-accent);
}

.vt-inner .vt-chip:hover {
  border-color: var(--i-line-strong);
  color: var(--i-text);
}

.vt-inner .vt-chip.is-active {
  border-color: var(--i-accent-line);
  background: var(--i-accent-soft);
  color: var(--i-text);
}

/* Article prose (resource detail bodies). */
.vt-inner .vt-prose {
  max-width: 72ch;
  display: grid;
  gap: var(--i-s4);
}

.vt-inner .vt-prose h2 {
  font-size: clamp(1.4rem, 1.15rem + 1.1vw, 2rem);
  letter-spacing: -0.025em;
  line-height: 1.2;
  margin-top: var(--i-s3);
}

.vt-inner .vt-prose h3 {
  font-size: var(--i-h3);
  line-height: 1.3;
}

.vt-inner .vt-prose p {
  font-size: var(--i-body-lg);
  line-height: 1.78;
}

.vt-inner .vt-prose ul {
  display: grid;
  gap: 0.7rem;
}

.vt-inner .vt-prose ul li {
  position: relative;
  padding-left: 1.5rem;
  font-size: var(--i-body-md);
  line-height: 1.68;
}

.vt-inner .vt-prose ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.72em;
  width: 7px;
  height: 1px;
  background: var(--i-accent);
}

/* ==========================================================================
   13 - Testimonials, logos, FAQ
   ========================================================================== */

.vt-inner .vt-quotes {
  display: grid;
  gap: clamp(0.9rem, 0.6rem + 1vw, 1.35rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
}

.vt-inner .vt-quote {
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 1rem;
  padding: clamp(1.35rem, 1rem + 1vw, 1.85rem);
  border: 1px solid var(--i-line);
  border-radius: var(--i-r-lg);
  background: var(--i-surface);
  transition: border-color var(--i-med) var(--i-ease), background-color var(--i-med) var(--i-ease);
}

.vt-inner .vt-quote:hover {
  border-color: var(--i-line-strong);
  background: var(--i-surface-2);
}

/* First quote reads as the lead testimonial. */
.vt-inner .vt-quotes .vt-quote:first-child {
  background:
    radial-gradient(110% 80% at 0% 0%, var(--i-accent-soft), transparent 60%),
    var(--i-surface-2);
}

.vt-inner .vt-quote__mark {
  font-family: var(--i-display);
  font-size: 2rem;
  line-height: 0.6;
  color: var(--i-accent);
  opacity: 0.55;
}

.vt-inner .vt-quote__text {
  font-size: var(--i-body-lg);
  line-height: 1.62;
  color: var(--i-text);
}

.vt-inner .vt-quote__by {
  display: grid;
  gap: 0.15rem;
  padding-top: 0.9rem;
  border-top: 1px solid var(--i-line);
}

.vt-inner .vt-quote__name {
  font-family: var(--i-display);
  font-size: var(--i-body-sm);
  font-weight: 600;
  color: var(--i-text);
}

.vt-inner .vt-quote__role {
  font-size: var(--i-micro);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--i-text-3);
}

/* Logo / tool row. */
.vt-inner .vt-logos {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}

.vt-inner .vt-logo {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.65rem 1.1rem;
  border: 1px solid var(--i-line);
  border-radius: 999px;
  background: var(--i-surface);
  font-size: var(--i-body-sm);
  font-weight: 600;
  color: var(--i-text-2);
  transition:
    border-color var(--i-fast) var(--i-ease),
    color var(--i-fast) var(--i-ease),
    transform var(--i-fast) var(--i-ease);
}

.vt-inner .vt-logo i {
  font-size: 0.75rem;
  color: var(--i-accent);
}

.vt-inner .vt-logo:hover {
  transform: translateY(-2px);
  border-color: var(--i-accent-line);
  color: var(--i-text);
}

/* FAQ: native <details> disclosure. */
.vt-inner .vt-faq {
  display: grid;
  border-top: 1px solid var(--i-line);
}

.vt-inner .vt-faq__item {
  border-bottom: 1px solid var(--i-line);
}

.vt-inner .vt-faq__trigger {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 1rem;
  min-height: 56px;
  padding: 1.15rem 0;
  cursor: pointer;
  list-style: none;
  color: var(--i-text);
  transition: color var(--i-fast) var(--i-ease);
}

/* Hide the default disclosure triangle in every engine. */
.vt-inner .vt-faq__trigger::-webkit-details-marker {
  display: none;
}

.vt-inner .vt-faq__trigger::marker {
  content: "";
}

.vt-inner .vt-faq__trigger:hover,
.vt-inner .vt-faq__item[open] > .vt-faq__trigger {
  color: var(--i-brand);
}

.vt-inner .vt-faq__q {
  font-family: var(--i-display);
  font-size: var(--i-h4);
  font-weight: 600;
  line-height: 1.4;
  color: inherit;
  margin: 0;
}

.vt-inner .vt-faq__num {
  font-family: var(--i-display);
  font-size: var(--i-micro);
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--i-text-3);
}

.vt-inner .vt-faq__icon {
  position: relative;
  flex: none;
  width: 22px;
  height: 22px;
}

.vt-inner .vt-faq__icon::before,
.vt-inner .vt-faq__icon::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 13px;
  height: 1.5px;
  background: currentColor;
  transform: translate(-50%, -50%);
  transition:
    transform var(--i-med) var(--i-ease),
    opacity var(--i-med) var(--i-ease);
}

.vt-inner .vt-faq__icon::after {
  transform: translate(-50%, -50%) rotate(90deg);
}

.vt-inner .vt-faq__item[open] .vt-faq__icon::after {
  transform: translate(-50%, -50%) rotate(0deg);
  opacity: 0;
}

.vt-inner .vt-faq__answer {
  padding: 0 0 1.4rem calc(1rem + 2.1rem);
  font-size: var(--i-body-md);
  line-height: 1.72;
  color: var(--i-text-2);
  max-width: 72ch;
  animation: vt-faq-open var(--i-med) var(--i-ease) both;
}

@keyframes vt-faq-open {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
}

@media (max-width: 560px) {
  .vt-inner .vt-faq__answer {
    padding-left: 0;
  }
}

/* ==========================================================================
   14 - Forms and contact
   ========================================================================== */

.vt-inner .vt-contact {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(1.5rem, 1rem + 2.5vw, 3.5rem);
  align-items: start;
}

@media (max-width: 940px) {
  .vt-inner .vt-contact {
    grid-template-columns: minmax(0, 1fr);
  }
}

.vt-inner .vt-contact__aside {
  display: grid;
  gap: var(--i-s4);
  align-content: start;
}

@media (min-width: 1000px) {
  .vt-inner .vt-contact__aside {
    position: sticky;
    top: 8rem;
  }
}

.vt-inner .vt-deets {
  display: grid;
  gap: 0;
  border: 1px solid var(--i-line);
  border-radius: var(--i-r-lg);
  background: var(--i-surface);
  overflow: hidden;
}

.vt-inner .vt-deet {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.9rem;
  align-items: start;
  padding: 1.05rem 1.2rem;
  border-bottom: 1px solid var(--i-line);
}

.vt-inner .vt-deet:last-child {
  border-bottom: 0;
}

.vt-inner .vt-deet__icon {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: var(--i-accent-soft);
  border: 1px solid var(--i-accent-line);
  color: var(--i-accent);
  font-size: 0.82rem;
}

.vt-inner .vt-deet__label {
  font-size: var(--i-micro);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--i-text-3);
  margin-bottom: 0.25rem;
}

.vt-inner .vt-deet__value,
.vt-inner .vt-deet__value a {
  font-size: var(--i-body-sm);
  line-height: 1.55;
  color: var(--i-text-2);
  overflow-wrap: anywhere;
}

.vt-inner .vt-deet__value a:hover {
  color: var(--i-brand);
}

/* Form panel. */
.vt-inner .vt-formpanel {
  border: 1px solid var(--i-line);
  border-radius: var(--i-r-xl);
  background:
    radial-gradient(100% 60% at 100% 0%, var(--i-accent-soft), transparent 55%),
    var(--i-surface-2);
  box-shadow: var(--i-shadow);
  overflow-x: clip;
  overflow-y: visible;
}

.vt-inner .vt-formpanel__head {
  display: grid;
  gap: 0.5rem;
  padding: clamp(1.35rem, 1rem + 1.2vw, 2rem);
  border-bottom: 1px solid var(--i-line);
}

.vt-inner .vt-formpanel__title {
  font-size: var(--i-h3);
  font-weight: 600;
  letter-spacing: -0.02em;
}

.vt-inner .vt-formpanel__body {
  padding: clamp(0.75rem, 0.5rem + 0.8vw, 1.25rem);
  overflow-x: auto;
  max-width: 100%;
  min-width: 0;
  -webkit-overflow-scrolling: touch;
}

.vt-inner .vt-formpanel iframe {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  min-height: 28rem;
  height: auto;
  border: 0;
  border-radius: var(--i-r);
  background: transparent;
  display: block;
}

/* Native form controls, when a page uses them. */
.vt-inner .vt-field {
  display: grid;
  gap: 0.45rem;
  margin-bottom: 1rem;
}

.vt-inner .vt-field label {
  font-size: var(--i-micro);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--i-text-3);
}

.vt-inner .vt-field :is(input, textarea, select) {
  width: 100%;
  min-height: 50px;
  padding: 0.8rem 1rem;
  border: 1px solid var(--i-line-strong);
  border-radius: var(--i-r-sm);
  background: rgba(255, 255, 255, 0.035);
  color: var(--i-text);
  font-family: var(--i-body);
  font-size: max(16px, 1rem);
  transition: border-color var(--i-fast) var(--i-ease), background-color var(--i-fast) var(--i-ease);
}

.vt-inner .vt-field :is(input, textarea, select)::placeholder {
  color: var(--i-text-3);
}

.vt-inner .vt-field :is(input, textarea, select):focus {
  border-color: var(--i-brand);
  background: rgba(255, 255, 255, 0.055);
  outline: none;
}

.vt-inner .vt-field textarea {
  min-height: 140px;
  resize: vertical;
}

/* ==========================================================================
   15 - CTA
   ========================================================================== */

.vt-inner .vt-cta {
  position: relative;
  overflow: clip;
  padding-block: clamp(3rem, 1.8rem + 5vw, 6rem);
  border-top: 1px solid var(--i-line);
  background:
    radial-gradient(70% 120% at 50% 110%, var(--i-accent-soft), transparent 62%),
    linear-gradient(180deg, rgba(11, 14, 19, 0), var(--i-bg-alt));
}

.vt-inner .vt-cta__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: clamp(1.5rem, 1rem + 2.5vw, 3.5rem);
  align-items: center;
}

.vt-inner .vt-cta__title {
  font-size: clamp(1.85rem, 1.2rem + 2.4vw, 3.2rem);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.035em;
  max-width: 20ch;
}

.vt-inner .vt-cta__text {
  font-size: var(--i-body-lg);
  line-height: 1.62;
  margin-top: var(--i-s3);
  max-width: 52ch;
}

.vt-inner .vt-cta__actions {
  display: grid;
  gap: 0.75rem;
  justify-items: stretch;
}

.vt-inner .vt-cta__email {
  margin: 0.85rem 0 0;
  font-size: var(--i-body);
  color: var(--i-muted, inherit);
}

.vt-inner .vt-cta__email a {
  color: inherit;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 0.18em;
}

@media (min-width: 861px) {
  .vt-inner .vt-cta__actions {
    justify-items: end;
  }
}

@media (max-width: 860px) {
  .vt-inner .vt-cta__inner {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ==========================================================================
   16 - Legal / long-form documents
   ========================================================================== */

.vt-inner .vt-doc {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  gap: clamp(1.5rem, 1rem + 3vw, 4rem);
  align-items: start;
}

@media (max-width: 940px) {
  .vt-inner .vt-doc {
    grid-template-columns: minmax(0, 1fr);
  }
}

.vt-inner .vt-toc {
  display: grid;
  gap: 0.15rem;
  align-content: start;
  padding: 1.1rem;
  border: 1px solid var(--i-line);
  border-radius: var(--i-r-lg);
  background: var(--i-surface);
}

@media (min-width: 941px) {
  .vt-inner .vt-toc {
    position: sticky;
    top: 8rem;
    max-height: calc(100vh - 10rem);
    overflow-y: auto;
  }
}

.vt-inner .vt-toc__label {
  font-size: var(--i-micro);
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--i-text-3);
  padding: 0.3rem 0.6rem 0.7rem;
}

.vt-inner .vt-toc a {
  display: block;
  padding: 0.5rem 0.6rem;
  border-radius: 8px;
  font-size: var(--i-body-sm);
  line-height: 1.45;
  color: var(--i-text-3);
  transition: color var(--i-fast) var(--i-ease), background-color var(--i-fast) var(--i-ease);
}

.vt-inner .vt-toc a:hover,
.vt-inner .vt-toc a.is-current {
  color: var(--i-text);
  background: var(--i-surface-2);
}

.vt-inner .vt-doc__body {
  display: grid;
  gap: var(--i-s5);
  max-width: 78ch;
}

.vt-inner .vt-doc__section {
  display: grid;
  gap: var(--i-s3);
  padding-top: var(--i-s4);
  border-top: 1px solid var(--i-line);
}

.vt-inner .vt-doc__section:first-child {
  border-top: 0;
  padding-top: 0;
}

.vt-inner .vt-doc__section h2 {
  font-size: clamp(1.25rem, 1.1rem + 0.8vw, 1.7rem);
  line-height: 1.25;
  letter-spacing: -0.02em;
}

.vt-inner .vt-doc__section h3 {
  font-size: var(--i-h4);
}

.vt-inner .vt-doc__section p {
  font-size: var(--i-body-md);
  line-height: 1.78;
}

.vt-inner .vt-doc__section ul {
  display: grid;
  gap: 0.6rem;
}

.vt-inner .vt-doc__section ul li {
  position: relative;
  padding-left: 1.4rem;
  font-size: var(--i-body-md);
  line-height: 1.7;
}

.vt-inner .vt-doc__section ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.75em;
  width: 6px;
  height: 1px;
  background: var(--i-accent);
}

/* ==========================================================================
   17 - Utilities and overrides
   ========================================================================== */

/* Neutralise leftover template chrome inside internal pages. */
.vt-inner .section-padding {
  padding-block: 0;
}

.vt-inner .wow {
  visibility: visible !important;
  animation: none !important;
}

.vt-inner .vt-hide {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.vt-inner .vt-nowrap {
  white-space: nowrap;
}

/* Related content strip. */
.vt-inner .vt-related {
  display: grid;
  gap: 0.7rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
}

.vt-inner .vt-related__item {
  position: relative;
  display: grid;
  gap: 0.4rem;
  padding: 1rem 1.15rem;
  border: 1px solid var(--i-line);
  border-radius: var(--i-r);
  background: var(--i-surface);
  transition: border-color var(--i-fast) var(--i-ease), transform var(--i-fast) var(--i-ease);
}

.vt-inner .vt-related__item:hover {
  transform: translateY(-3px);
  border-color: var(--i-accent-line);
}

.vt-inner .vt-related__kicker {
  font-size: var(--i-micro);
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--i-text-3);
}

.vt-inner .vt-related__title {
  font-size: var(--i-body-sm);
  font-weight: 600;
  color: var(--i-text);
  line-height: 1.4;
}

.vt-inner .vt-related__title a::after {
  content: "";
  position: absolute;
  inset: 0;
}

/* Comparison: before / after. */
.vt-inner .vt-compare {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: clamp(0.9rem, 0.6rem + 1vw, 1.35rem);
}

.vt-inner .vt-compare__col {
  display: grid;
  gap: 0.85rem;
  align-content: start;
  padding: clamp(1.25rem, 1rem + 1vw, 1.75rem);
  border: 1px solid var(--i-line);
  border-radius: var(--i-r-lg);
  background: var(--i-surface);
}

.vt-inner .vt-compare__col--after {
  border-color: var(--i-accent-line);
  background:
    radial-gradient(100% 80% at 100% 0%, var(--i-accent-soft), transparent 62%),
    var(--i-surface-2);
}

.vt-inner .vt-compare__label {
  font-size: var(--i-micro);
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--i-text-3);
}

.vt-inner .vt-compare__col--after .vt-compare__label {
  color: var(--i-accent);
}

.vt-inner .vt-compare__list {
  display: grid;
  gap: 0.6rem;
}

.vt-inner .vt-compare__list li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.65rem;
  align-items: start;
  font-size: var(--i-body-md);
  line-height: 1.6;
}

.vt-inner .vt-compare__list i {
  margin-top: 0.3em;
  font-size: 0.75rem;
  color: var(--i-text-3);
}

.vt-inner .vt-compare__col--after .vt-compare__list i {
  color: var(--i-success);
}

/* Region / location chips. */
.vt-inner .vt-regions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.vt-inner .vt-region {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.5rem 0.9rem;
  border: 1px solid var(--i-line);
  border-radius: var(--i-r-sm);
  background: var(--i-surface);
  font-size: var(--i-body-sm);
  color: var(--i-text-2);
}

.vt-inner .vt-region i {
  color: var(--i-accent);
  font-size: 0.75rem;
}

/* ==========================================================================
   Responsive tail
   ========================================================================== */

@media (max-width: 480px) {
  .vt-inner .vt-stat {
    border-right: 0;
  }
  .vt-inner .vt-featured,
  .vt-inner .vt-formpanel {
    border-radius: var(--i-r-lg);
  }
}

@media (max-height: 430px) {
  .vt-inner .vt-hero {
    padding-bottom: clamp(2rem, 12vh, 3.25rem);
  }
}

@media (prefers-reduced-motion: reduce) {
  .vt-inner [data-reveal],
  .vt-inner [data-reveal].is-in {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  .vt-inner *,
  .vt-inner *::before,
  .vt-inner *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}


/* ==========================================================================
   19 - Resource hub bar
   ========================================================================== */

.vt-inner .vt-hub__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin: var(--i-s5) 0 var(--i-s4);
  padding-bottom: var(--i-s3);
  border-bottom: 1px solid var(--i-line);
}

.vt-inner .vt-hub__empty {
  margin-top: var(--i-s4);
  padding: 1.25rem;
  border: 1px dashed var(--i-line-strong);
  border-radius: var(--i-r);
  text-align: center;
  color: var(--i-text-3);
}

.vt-inner .vt-featured .vt-post__plate {
  aspect-ratio: 4 / 3;
  font-size: 2.4rem;
}

/* Chips are real buttons in the hub, so give them a button reset. */
.vt-inner button.vt-chip {
  font-family: var(--i-body);
  appearance: none;
}

/* ==========================================================================
   20 - Badges, partners, document lead
   ========================================================================== */

.vt-inner .vt-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  align-self: start;
  margin-top: 0.15rem;
  padding: 0.28rem 0.65rem;
  border: 1px solid var(--i-accent-line);
  border-radius: 999px;
  background: var(--i-accent-soft);
  font-family: var(--i-body);
  font-size: var(--i-micro);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--i-accent);
  white-space: nowrap;
}

.vt-inner .vt-row__title .vt-badge,
.vt-inner .vt-ledger__term .vt-badge {
  margin-left: 0.65rem;
}

/* --- Partner roster ---------------------------------------------------- */

.vt-inner .vt-partners {
  display: grid;
  gap: clamp(0.9rem, 0.6rem + 1vw, 1.35rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
}

.vt-inner .vt-partner {
  display: grid;
  grid-template-rows: auto auto 1fr auto;
  gap: 0.85rem;
  align-content: start;
  padding: clamp(1.35rem, 1rem + 1vw, 1.85rem);
  border: 1px solid var(--i-line);
  border-radius: var(--i-r-lg);
  background: var(--i-surface);
  transition:
    border-color var(--i-med) var(--i-ease),
    background-color var(--i-med) var(--i-ease),
    transform var(--i-med) var(--i-ease);
}

.vt-inner .vt-partner:hover {
  transform: translateY(-4px);
  border-color: var(--i-line-strong);
  background: var(--i-surface-2);
}

.vt-inner .vt-partner__icon {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 1px solid var(--i-accent-line);
  background: var(--i-accent-soft);
  color: var(--i-accent);
}

.vt-inner .vt-partner__name {
  font-size: var(--i-h3);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.02em;
}

.vt-inner .vt-partner__text {
  font-size: var(--i-body-md);
  line-height: 1.65;
}

.vt-inner .vt-partner__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  padding-top: 0.85rem;
  border-top: 1px solid var(--i-line);
}

.vt-inner .vt-tag {
  padding: 0.28rem 0.6rem;
  border: 1px solid var(--i-line);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.03);
  font-size: var(--i-micro);
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--i-text-3);
}

/* --- Legal document lead ----------------------------------------------- */

.vt-inner .vt-doc__lead {
  display: grid;
  gap: var(--i-s3);
  padding: clamp(1.25rem, 1rem + 1vw, 1.75rem);
  border: 1px solid var(--i-line);
  border-left: 2px solid var(--i-accent-line);
  border-radius: var(--i-r);
  background: var(--i-surface);
}

.vt-inner .vt-doc__lead p {
  font-size: var(--i-body-md);
  line-height: 1.75;
}

/* --- Embedded third-party forms ---------------------------------------- */

.vt-inner .vt-embed {
  width: 100%;
  max-width: 100%;
  min-height: 28rem;
  height: auto;
  border: 0;
  border-radius: var(--i-r);
  background: transparent;
  display: block;
}
/* ==========================================================================
   21 - Signature editorial moments
   Oversized statements, large numbers, corner accents and section grounds.
   These exist so an internal page reads as a designed sequence rather than a
   document: hero, statement, system, capability, proof, action.
   ========================================================================== */

/* --- 21.1 Statement band ------------------------------------------------ */

.vt-inner .vt-statement-band {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.65fr);
  gap: clamp(1.5rem, 0.8rem + 3vw, 4.5rem);
  align-items: end;
}

.vt-inner .vt-statement-band > div:first-child {
  display: grid;
  gap: var(--i-s3);
  justify-items: start;
  min-width: 0;
}

.vt-inner .vt-statement-band__lead {
  font-family: var(--i-display);
  font-size: clamp(1.9rem, 1rem + 3.9vw, 4.25rem);
  font-weight: 700;
  line-height: 1.03;
  letter-spacing: -0.04em;
  color: var(--i-text);
  text-wrap: balance;
  margin: 0;
}

/* The clause that carries the idea gets the accent; the rest recedes. */
.vt-inner .vt-statement-band__lead .vt-dim {
  color: var(--i-text-3);
}

.vt-inner .vt-statement-band__lead .vt-lit {
  color: var(--i-brand);
}

.vt-inner .vt-statement-band__aside {
  display: grid;
  gap: var(--i-s3);
  padding-bottom: 0.6rem;
  border-left: 1px solid var(--i-line);
  padding-left: clamp(1rem, 0.6rem + 1.4vw, 2rem);
}

.vt-inner .vt-statement-band__aside p {
  font-size: var(--i-body-lg);
  line-height: 1.62;
  color: var(--i-text-2);
}

@media (max-width: 900px) {
  .vt-inner .vt-statement-band {
    grid-template-columns: minmax(0, 1fr);
  }
  .vt-inner .vt-statement-band__aside {
    border-left: 0;
    border-top: 1px solid var(--i-line);
    padding-left: 0;
    padding-top: var(--i-s3);
  }
}

/* --- 21.2 Large-number process ------------------------------------------ */

.vt-inner .vt-numbers {
  display: grid;
  gap: 0;
  border-top: 1px solid var(--i-line);
}

.vt-inner .vt-number {
  position: relative;
  display: grid;
  grid-template-columns: minmax(5.5rem, 9vw) minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: clamp(1rem, 0.4rem + 2vw, 3rem);
  align-items: start;
  padding-block: clamp(1.5rem, 0.9rem + 2vw, 2.75rem);
  border-bottom: 1px solid var(--i-line);
  transition: background-color var(--i-med) var(--i-ease);
}

.vt-inner .vt-number::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  bottom: -1px;
  height: 1px;
  background: linear-gradient(90deg, var(--i-accent), transparent 60%);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--i-med) var(--i-ease);
}

.vt-inner .vt-number:hover {
  background: rgba(255, 255, 255, 0.016);
}

.vt-inner .vt-number:hover::before {
  transform: scaleX(1);
}

.vt-inner .vt-number__index {
  font-family: var(--i-display);
  font-size: clamp(2.5rem, 1.4rem + 3.4vw, 4.75rem);
  font-weight: 700;
  line-height: 0.82;
  letter-spacing: -0.06em;
  color: transparent;
  -webkit-text-stroke: 1px var(--i-line-strong);
  font-variant-numeric: tabular-nums;
  transition: -webkit-text-stroke-color var(--i-med) var(--i-ease), color var(--i-med) var(--i-ease);
}

.vt-inner .vt-number:hover .vt-number__index {
  -webkit-text-stroke-color: var(--i-accent);
}

.vt-inner .vt-number__title {
  font-size: clamp(1.15rem, 1rem + 0.75vw, 1.65rem);
  font-weight: 600;
  line-height: 1.22;
  letter-spacing: -0.02em;
  display: flex;
  align-items: baseline;
  gap: 0.7rem;
}

.vt-inner .vt-number__title i {
  flex: none;
  font-size: 0.62em;
  color: var(--i-accent);
}

.vt-inner .vt-number__text {
  font-size: var(--i-body-md);
  line-height: 1.7;
  color: var(--i-text-2);
  max-width: 58ch;
}

@media (max-width: 780px) {
  .vt-inner .vt-number {
    grid-template-columns: 3.75rem minmax(0, 1fr);
    gap: 0.35rem 1rem;
    padding-block: 1.35rem;
  }
  .vt-inner .vt-number__index {
    grid-row: span 2;
    font-size: 2.4rem;
  }
  .vt-inner .vt-number__text {
    grid-column: 2;
  }
}

/* --- 21.3 Corner accents ------------------------------------------------ */

/* Bracket marks that frame a premium component without a full box. */
.vt-inner .vt-framed {
  position: relative;
}

.vt-inner .vt-framed::before,
.vt-inner .vt-framed::after {
  content: "";
  position: absolute;
  width: 18px;
  height: 18px;
  border: 1px solid var(--i-accent-line);
  pointer-events: none;
}

.vt-inner .vt-framed::before {
  top: -10px;
  left: -10px;
  border-right: 0;
  border-bottom: 0;
}

.vt-inner .vt-framed::after {
  right: -10px;
  bottom: -10px;
  border-left: 0;
  border-top: 0;
}

@media (max-width: 640px) {
  .vt-inner .vt-framed::before,
  .vt-inner .vt-framed::after {
    display: none;
  }
}

/* --- 21.4 Section grounds ----------------------------------------------- */

/* Elevated plate: reads as a raised surface, used for system sections. */
.vt-inner .vt-sec--raised {
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(255, 255, 255, 0.035), transparent 62%),
    var(--i-ink);
  border-block: 1px solid var(--i-line);
}

/* Accent ground: a single wash tied to the page family. */
.vt-inner .vt-sec--accent {
  background:
    radial-gradient(75% 100% at 15% 0%, var(--i-accent-soft), transparent 60%),
    linear-gradient(180deg, var(--i-bg-alt), var(--i-bg));
  border-block: 1px solid var(--i-line);
}

/* Blueprint ground: fine engineering grid, for architecture sections. */
.vt-inner .vt-sec--blueprint {
  background: var(--i-ink);
  border-block: 1px solid var(--i-line);
}

.vt-inner .vt-sec--blueprint::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0.55;
  background-image:
    linear-gradient(var(--i-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--i-line) 1px, transparent 1px),
    radial-gradient(circle at center, var(--i-line-strong) 1px, transparent 1px);
  background-size: 96px 96px, 96px 96px, 96px 96px;
  mask-image: radial-gradient(80% 70% at 50% 45%, #000 10%, transparent 80%);
  -webkit-mask-image: radial-gradient(80% 70% at 50% 45%, #000 10%, transparent 80%);
}

.vt-inner .vt-sec--blueprint > * {
  position: relative;
  z-index: 1;
}

/* A hairline that visually "hands off" from one section to the next. */
.vt-inner .vt-sec--handoff::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: calc(var(--i-section-y) * -0.5);
  width: 1px;
  height: calc(var(--i-section-y) * 0.7);
  background: linear-gradient(180deg, var(--i-line-strong), transparent);
  pointer-events: none;
}

/* --- 21.5 Section label rail -------------------------------------------- */

/* A small fixed-width label column that turns a heading into a composition. */
.vt-inner .vt-head--rail {
  max-width: none;
  grid-template-columns: minmax(8rem, 13%) minmax(0, 1fr);
  align-items: start;
  gap: var(--i-s3) clamp(1.25rem, 0.6rem + 2.4vw, 3.5rem);
}

.vt-inner .vt-head--rail .vt-eyebrow {
  grid-column: 1;
  grid-row: 1 / span 2;
  align-self: start;
  padding-top: 0.55rem;
  line-height: 1.5;
}

/* In the rail the label is the whole column — the leading dash only steals
   the width the words need. */
@media (min-width: 821px) {
  .vt-inner .vt-head--rail .vt-eyebrow::before {
    display: none;
  }
}

.vt-inner .vt-head--rail .vt-head__title,
.vt-inner .vt-head--rail .vt-head__sub {
  grid-column: 2;
}

@media (max-width: 820px) {
  .vt-inner .vt-head--rail {
    grid-template-columns: minmax(0, 1fr);
  }
  .vt-inner .vt-head--rail .vt-eyebrow {
    grid-column: 1;
    grid-row: auto;
    padding-top: 0;
  }
  .vt-inner .vt-head--rail .vt-head__title,
  .vt-inner .vt-head--rail .vt-head__sub {
    grid-column: 1;
  }
}
/* ==========================================================================
   22 - System visuals
   The signature Growth Tech 360 components: architecture graphs, workflow chains,
   the chaos-to-system transformation and the integration ecosystem.
   Every one of them degrades to a readable vertical list on small screens.
   ========================================================================== */

/* --- 22.1 Architecture graph -------------------------------------------- */

.vt-inner .vt-graph {
  --node-gap: clamp(1.75rem, 1rem + 2.4vw, 3rem);
  display: grid;
  justify-items: center;
  gap: var(--node-gap);
  position: relative;
}

.vt-inner .vt-graph__row {
  display: grid;
  gap: clamp(0.6rem, 0.3rem + 1.2vw, 1.1rem);
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  width: 100%;
  position: relative;
}

/* Vertical connector between rows, with a pulse travelling down it. */
.vt-inner .vt-graph__row + .vt-graph__row::before {
  content: "";
  position: absolute;
  left: 50%;
  top: calc(var(--node-gap) * -1);
  width: 1px;
  height: var(--node-gap);
  background: linear-gradient(180deg, var(--i-line-strong), var(--i-accent-line));
}

.vt-inner .vt-graph__row + .vt-graph__row::after {
  content: "";
  position: absolute;
  left: 50%;
  top: calc(var(--node-gap) * -1);
  width: 5px;
  height: 5px;
  margin-left: -2px;
  border-radius: 50%;
  background: var(--i-accent);
  box-shadow: 0 0 10px 1px var(--i-accent-glow);
  animation: vt-graph-pulse 2.8s var(--i-ease) infinite;
  animation-delay: var(--pulse-delay, 0ms);
}

@keyframes vt-graph-pulse {
  0% { transform: translateY(0); opacity: 0; }
  12% { opacity: 1; }
  70% { opacity: 1; }
  100% { transform: translateY(var(--node-gap)); opacity: 0; }
}

.vt-inner .vt-node {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 0.75rem;
  padding: 0.9rem 1.05rem;
  border: 1px solid var(--i-line);
  border-radius: var(--i-r);
  background: linear-gradient(150deg, var(--i-surface-2), rgba(255, 255, 255, 0.012));
  transition:
    border-color var(--i-med) var(--i-ease),
    transform var(--i-med) var(--i-ease),
    box-shadow var(--i-med) var(--i-ease);
}

.vt-inner .vt-node:hover {
  transform: translateY(-3px);
  border-color: var(--i-accent-line);
}

.vt-inner .vt-node__icon {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: var(--i-surface-3);
  border: 1px solid var(--i-line);
  color: var(--i-accent);
  font-size: 0.85rem;
}

.vt-inner .vt-node__name {
  font-family: var(--i-display);
  font-size: 0.92rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--i-text);
}

.vt-inner .vt-node__meta {
  margin-top: 0.15rem;
  font-size: var(--i-micro);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--i-text-3);
}

/* The Growth Tech 360 layer is the emphasised band in the middle of the graph. */
.vt-inner .vt-node--core {
  grid-column: 1 / -1;
  justify-content: center;
  padding: clamp(1.1rem, 0.8rem + 1vw, 1.6rem) clamp(1.25rem, 1rem + 1.4vw, 2.25rem);
  border-color: var(--i-accent-line);
  background:
    radial-gradient(120% 180% at 50% 0%, var(--i-accent-soft), transparent 62%),
    var(--i-surface-2);
  box-shadow: 0 22px 60px -34px var(--i-accent-glow);
}

.vt-inner .vt-node--core .vt-node__icon {
  width: 42px;
  height: 42px;
  background: var(--i-accent);
  border-color: transparent;
  color: #05161b;
  font-size: 1rem;
}

.vt-inner .vt-node--core .vt-node__name {
  font-size: clamp(1rem, 0.92rem + 0.35vw, 1.2rem);
}

.vt-inner .vt-node--muted {
  background: rgba(255, 255, 255, 0.016);
}

@media (max-width: 700px) {
  .vt-inner .vt-graph__row {
    grid-auto-flow: row;
  }
  .vt-inner .vt-node--core {
    grid-column: auto;
  }
}

/* --- 22.2 Workflow chain ------------------------------------------------ */

.vt-inner .vt-chain {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: clamp(1.5rem, 0.8rem + 2.4vw, 2.75rem);
  position: relative;
}

.vt-inner .vt-chain__step {
  position: relative;
  display: grid;
  gap: 0.65rem;
  align-content: start;
  padding: clamp(1rem, 0.8rem + 0.8vw, 1.4rem);
  border: 1px solid var(--i-line);
  border-radius: var(--i-r);
  background: var(--i-surface);
  cursor: default;
  transition:
    border-color var(--i-med) var(--i-ease),
    background-color var(--i-med) var(--i-ease),
    transform var(--i-med) var(--i-ease),
    opacity var(--i-med) var(--i-ease);
}

/* Connector between steps, with a travelling dash. */
.vt-inner .vt-chain__step + .vt-chain__step::before {
  content: "";
  position: absolute;
  top: 2.05rem;
  left: calc(clamp(1.5rem, 0.8rem + 2.4vw, 2.75rem) * -1);
  width: clamp(1.5rem, 0.8rem + 2.4vw, 2.75rem);
  height: 1px;
  background:
    repeating-linear-gradient(90deg, var(--i-line-strong) 0 5px, transparent 5px 10px);
}

.vt-inner .vt-chain__step + .vt-chain__step::after {
  content: "";
  position: absolute;
  top: calc(2.05rem - 2px);
  left: calc(clamp(1.5rem, 0.8rem + 2.4vw, 2.75rem) * -1);
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--i-accent);
  opacity: 0;
  animation: vt-chain-flow 3.2s var(--i-ease) infinite;
  animation-delay: var(--flow-delay, 0ms);
}

@keyframes vt-chain-flow {
  0% { transform: translateX(0); opacity: 0; }
  15% { opacity: 1; }
  85% { opacity: 1; }
  100% { transform: translateX(clamp(1.5rem, 0.8rem + 2.4vw, 2.75rem)); opacity: 0; }
}

.vt-inner .vt-chain__step:hover,
.vt-inner .vt-chain__step:focus-within {
  transform: translateY(-4px);
  border-color: var(--i-accent-line);
  background: var(--i-surface-2);
}

/* Dim the rest of the chain so the hovered step reads as the active stage. */
.vt-inner .vt-chain:hover .vt-chain__step:not(:hover) {
  opacity: 0.55;
}

.vt-inner .vt-chain__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.vt-inner .vt-chain__icon {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: var(--i-accent-soft);
  border: 1px solid var(--i-accent-line);
  color: var(--i-accent);
  font-size: 0.85rem;
}

.vt-inner .vt-chain__num {
  font-family: var(--i-display);
  font-size: var(--i-micro);
  font-weight: 700;
  letter-spacing: 0.16em;
  color: var(--i-text-3);
}

.vt-inner .vt-chain__title {
  font-family: var(--i-display);
  font-size: var(--i-h4);
  font-weight: 600;
  line-height: 1.32;
  color: var(--i-text);
}

.vt-inner .vt-chain__text {
  font-size: var(--i-body-sm);
  line-height: 1.6;
  color: var(--i-text-2);
}

@media (max-width: 900px) {
  .vt-inner .vt-chain {
    grid-auto-flow: row;
    gap: 1.5rem;
  }
  .vt-inner .vt-chain__step + .vt-chain__step::before {
    top: -1.5rem;
    left: 1.9rem;
    width: 1px;
    height: 1.5rem;
    background: repeating-linear-gradient(180deg, var(--i-line-strong) 0 5px, transparent 5px 10px);
  }
  .vt-inner .vt-chain__step + .vt-chain__step::after {
    top: -1.5rem;
    left: calc(1.9rem - 2px);
    animation-name: vt-chain-flow-v;
  }
  @keyframes vt-chain-flow-v {
    0% { transform: translateY(0); opacity: 0; }
    15% { opacity: 1; }
    85% { opacity: 1; }
    100% { transform: translateY(1.5rem); opacity: 0; }
  }
}

/* --- 22.3 Chaos to system ----------------------------------------------- */

.vt-inner .vt-transform {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  gap: clamp(1rem, 0.4rem + 2.4vw, 3rem);
  align-items: center;
}

.vt-inner .vt-transform__side {
  display: grid;
  gap: var(--i-s3);
}

.vt-inner .vt-transform__label {
  font-size: var(--i-micro);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--i-text-3);
}

/* Scattered tool chips: deliberately mis-aligned to read as fragmentation. */
.vt-inner .vt-scatter {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  padding: clamp(1rem, 0.8rem + 0.8vw, 1.5rem);
  border: 1px dashed var(--i-line-strong);
  border-radius: var(--i-r-lg);
  background: rgba(255, 255, 255, 0.012);
}

.vt-inner .vt-scatter__chip {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.5rem 0.85rem;
  border: 1px solid var(--i-line);
  border-radius: var(--i-r-sm);
  background: var(--i-surface);
  font-size: var(--i-body-sm);
  color: var(--i-text-3);
  transform: rotate(var(--tilt, 0deg));
  transition: transform var(--i-med) var(--i-ease), color var(--i-med) var(--i-ease);
}

.vt-inner .vt-scatter__chip i {
  font-size: 0.75rem;
  opacity: 0.8;
}

.vt-inner .vt-transform:hover .vt-scatter__chip {
  transform: rotate(0deg);
  color: var(--i-text-2);
}

/* Converging arrow between the two sides. */
.vt-inner .vt-transform__arrow {
  display: grid;
  place-items: center;
  gap: 0.4rem;
  color: var(--i-accent);
  font-size: 0.9rem;
}

.vt-inner .vt-transform__arrow span {
  display: block;
  width: clamp(1.5rem, 4vw, 3.5rem);
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--i-accent));
}

/* The single connected system. */
.vt-inner .vt-unified {
  display: grid;
  gap: 0.6rem;
  padding: clamp(1rem, 0.8rem + 0.8vw, 1.5rem);
  border: 1px solid var(--i-accent-line);
  border-radius: var(--i-r-lg);
  background:
    radial-gradient(100% 120% at 50% 0%, var(--i-accent-soft), transparent 65%),
    var(--i-surface-2);
  box-shadow: 0 24px 64px -38px var(--i-accent-glow);
}

.vt-inner .vt-unified__row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.7rem;
  padding: 0.65rem 0.8rem;
  border-radius: var(--i-r-sm);
  background: rgba(255, 255, 255, 0.03);
  font-size: var(--i-body-sm);
  color: var(--i-text);
}

.vt-inner .vt-unified__row i:first-child {
  color: var(--i-accent);
  font-size: 0.8rem;
}

.vt-inner .vt-unified__tick {
  font-size: var(--i-micro);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--i-success);
}

@media (max-width: 860px) {
  .vt-inner .vt-transform {
    grid-template-columns: minmax(0, 1fr);
  }
  .vt-inner .vt-transform__arrow {
    transform: rotate(90deg);
    justify-self: center;
    padding-block: 0.5rem;
  }
}

/* --- 22.4 Integration ecosystem ----------------------------------------- */

.vt-inner .vt-orbit {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 1 / 1;
  width: min(100%, 560px);
  max-width: 100%;
  margin-inline: auto;
  overflow: hidden;
  /* Satellites are placed with container units: a percentage translate would
     resolve against the chip's own box and pile everything on the centre. */
  container-type: size;
}

.vt-inner .vt-orbit__rings {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.vt-inner .vt-orbit__ring {
  position: absolute;
  inset: var(--inset, 0);
  border: 1px solid var(--i-line);
  border-radius: 50%;
}

.vt-inner .vt-orbit__ring--spin {
  border-style: dashed;
  border-color: var(--i-line-strong);
  animation: vt-orbit-spin 48s linear infinite;
}

@keyframes vt-orbit-spin {
  to { transform: rotate(360deg); }
}

.vt-inner .vt-orbit__core {
  position: relative;
  z-index: 2;
  display: grid;
  place-items: center;
  gap: 0.3rem;
  width: clamp(110px, 30%, 160px);
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  border: 1px solid var(--i-accent-line);
  background:
    radial-gradient(circle at 50% 30%, var(--i-accent-soft), transparent 70%),
    var(--i-ink);
  box-shadow: 0 0 0 8px rgba(255, 255, 255, 0.015), 0 26px 70px -34px var(--i-accent-glow);
  text-align: center;
  padding: 0.5rem;
}

.vt-inner .vt-orbit__core strong {
  font-family: var(--i-display);
  font-size: clamp(0.72rem, 0.62rem + 0.35vw, 0.9rem);
  line-height: 1.2;
  color: var(--i-text);
}

.vt-inner .vt-orbit__core span {
  font-size: var(--i-micro);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--i-text-3);
}

/* Each satellite is placed on the ring by angle, set inline by the generator. */
.vt-inner .vt-orbit__sat {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.42rem 0.7rem;
  border: 1px solid var(--i-line);
  border-radius: 999px;
  background: var(--i-ink);
  font-size: var(--i-micro);
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--i-text-2);
  white-space: nowrap;
  transform: translate(-50%, -50%) rotate(var(--a)) translate(var(--r)) rotate(calc(var(--a) * -1));
  transform-origin: center;
  transition: border-color var(--i-fast) var(--i-ease), color var(--i-fast) var(--i-ease);
}

.vt-inner .vt-orbit__sat i {
  color: var(--i-accent);
  font-size: 0.7rem;
}

.vt-inner .vt-orbit__sat:hover {
  border-color: var(--i-accent-line);
  color: var(--i-text);
}

/* Spokes from the core to each satellite. */
.vt-inner .vt-orbit__spoke {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 1;
  height: 1px;
  width: var(--r);
  transform-origin: left center;
  transform: rotate(var(--a));
  background: linear-gradient(90deg, var(--i-accent-line), transparent 85%);
  pointer-events: none;
}

/* Below the ring breakpoint the ecosystem becomes a plain, readable grid. */
@media (max-width: 620px) {
  .vt-inner .vt-orbit {
    aspect-ratio: auto;
    display: block;
    width: 100%;
  }
  .vt-inner .vt-orbit__rings,
  .vt-inner .vt-orbit__spoke {
    display: none;
  }
  .vt-inner .vt-orbit__core {
    width: 100%;
    aspect-ratio: auto;
    border-radius: var(--i-r-lg);
    padding: 1.1rem;
    margin-bottom: 0.75rem;
  }
  .vt-inner .vt-orbit__sats {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
  }
  .vt-inner .vt-orbit__sat {
    position: static;
    transform: none;
  }
}
/* ==========================================================================
   23 - Interactive compositions
   Feature explorer, product showcase, sticky story and the metrics command
   centre. All of them are usable with the keyboard and readable without JS.
   ========================================================================== */

/* --- 23.1 Feature explorer ---------------------------------------------- */

.vt-inner .vt-explorer {
  display: grid;
  grid-template-columns: minmax(0, 0.42fr) minmax(0, 0.58fr);
  gap: clamp(1.25rem, 0.6rem + 2.4vw, 3rem);
  align-items: start;
}

.vt-inner .vt-explorer__rail {
  display: grid;
  gap: 0.25rem;
  border-left: 1px solid var(--i-line);
}

.vt-inner .vt-explorer__tab {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 0.85rem;
  width: 100%;
  padding: 0.95rem 1rem;
  border: 0;
  background: none;
  text-align: left;
  cursor: pointer;
  color: var(--i-text-3);
  font-family: var(--i-display);
  font-size: var(--i-h4);
  font-weight: 600;
  line-height: 1.35;
  transition: color var(--i-med) var(--i-ease), background-color var(--i-med) var(--i-ease);
}

/* The moving active indicator lives on the rail's left edge. */
.vt-inner .vt-explorer__tab::before {
  content: "";
  position: absolute;
  left: -1px;
  top: 0.5rem;
  bottom: 0.5rem;
  width: 2px;
  background: var(--i-accent);
  transform: scaleY(0);
  transform-origin: center;
  transition: transform var(--i-med) var(--i-ease);
}

.vt-inner .vt-explorer__tab:hover {
  color: var(--i-text-2);
  background: rgba(255, 255, 255, 0.016);
}

.vt-inner .vt-explorer__tab[aria-selected="true"] {
  color: var(--i-text);
  background: rgba(255, 255, 255, 0.028);
}

.vt-inner .vt-explorer__tab[aria-selected="true"]::before {
  transform: scaleY(1);
}

.vt-inner .vt-explorer__tabicon {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 9px;
  border: 1px solid var(--i-line);
  background: var(--i-surface);
  color: var(--i-text-3);
  font-size: 0.78rem;
  transition: color var(--i-med) var(--i-ease), border-color var(--i-med) var(--i-ease);
}

.vt-inner .vt-explorer__tab[aria-selected="true"] .vt-explorer__tabicon {
  color: var(--i-accent);
  border-color: var(--i-accent-line);
  background: var(--i-accent-soft);
}

.vt-inner .vt-explorer__panels {
  position: relative;
  min-height: 260px;
}

.vt-inner .vt-explorer__panel {
  display: grid;
  gap: var(--i-s3);
  align-content: start;
  padding: clamp(1.35rem, 1rem + 1.4vw, 2.15rem);
  border: 1px solid var(--i-line);
  border-radius: var(--i-r-lg);
  background:
    radial-gradient(110% 120% at 100% 0%, var(--i-accent-soft), transparent 58%),
    var(--i-surface-2);
}

.vt-inner .vt-explorer__panel[hidden] {
  display: none;
}

.vt-inner .vt-explorer__panel:not([hidden]) {
  animation: vt-panel-in 0.42s var(--i-ease) both;
}

@keyframes vt-panel-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
}

.vt-inner .vt-explorer__step {
  font-size: var(--i-micro);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--i-accent);
}

.vt-inner .vt-explorer__title {
  font-size: clamp(1.2rem, 1.05rem + 0.8vw, 1.75rem);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.02em;
}

.vt-inner .vt-explorer__text {
  font-size: var(--i-body-lg);
  line-height: 1.65;
  max-width: 52ch;
}

.vt-inner .vt-explorer__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding-top: var(--i-s3);
  border-top: 1px solid var(--i-line);
}

@media (max-width: 880px) {
  .vt-inner .vt-explorer {
    grid-template-columns: minmax(0, 1fr);
    max-width: 100%;
    min-width: 0;
  }
  .vt-inner .vt-explorer__rail {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    max-width: 100%;
    min-width: 0;
    overflow: visible;
    border-left: 0;
    border-bottom: 1px solid var(--i-line);
    padding-bottom: 0.5rem;
    grid-auto-flow: unset;
    grid-auto-columns: unset;
  }
  .vt-inner .vt-explorer__tab {
    font-size: var(--i-body-sm);
    padding: 0.6rem 0.85rem;
    border: 1px solid var(--i-line);
    border-radius: 999px;
    white-space: normal;
    max-width: 100%;
    min-height: 44px;
  }
  .vt-inner .vt-explorer__tab::before {
    display: none;
  }
  .vt-inner .vt-explorer__tab[aria-selected="true"] {
    border-color: var(--i-accent-line);
    background: var(--i-accent-soft);
  }
  .vt-inner .vt-explorer__tabicon {
    width: 22px;
    height: 22px;
    border: 0;
    background: none;
  }
}

/* --- 23.2 Product showcase ---------------------------------------------- */

.vt-inner .vt-showcase {
  display: grid;
  gap: clamp(1.25rem, 0.7rem + 2vw, 2.5rem);
  max-width: 100%;
  min-width: 0;
  overflow-x: clip;
}

.vt-inner .vt-showcase__stage {
  position: relative;
  perspective: 1600px;
  max-width: 100%;
  min-width: 0;
  overflow-x: clip;
  /* Room for the floating panels to break the frame without being clipped. */
  padding-block: clamp(0.75rem, 0.5rem + 1vw, 1.5rem);
}

/* A slight tilt gives the interface presence without a 3D scene. */
.vt-inner .vt-showcase__stage .vt-app {
  transform: rotateX(3deg) translateZ(0);
  transform-origin: top center;
  transition: transform var(--i-med) var(--i-ease);
}

.vt-inner .vt-showcase__stage:hover .vt-app {
  transform: rotateX(0deg);
}

/* Floating side panels that overlap the main interface. */
.vt-inner .vt-float {
  position: absolute;
  z-index: 3;
  display: grid;
  gap: 0.35rem;
  padding: 0.8rem 0.95rem;
  border: 1px solid var(--i-line-strong);
  border-radius: var(--i-r);
  background: rgba(16, 21, 29, 0.92);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: var(--i-shadow-lift);
  animation: vt-float 7s ease-in-out infinite;
}

/* The panels straddle the frame's top-left and bottom-right corners, where the
   interface has nothing to hide, rather than sitting over the sidebar. */
.vt-inner .vt-float--tl {
  top: 0;
  left: clamp(1.5rem, 6%, 5rem);
  animation-delay: -1.5s;
}

.vt-inner .vt-float--br {
  right: clamp(1.5rem, 6%, 5rem);
  bottom: 0;
  animation-delay: -3.5s;
}

@keyframes vt-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-7px); }
}

.vt-inner .vt-float__label {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: var(--i-micro);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--i-text-3);
}

.vt-inner .vt-float__label i {
  color: var(--i-accent);
}

.vt-inner .vt-float__value {
  font-family: var(--i-display);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--i-text);
}

@media (max-width: 900px) {
  .vt-inner .vt-float {
    position: static;
    animation: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  .vt-inner .vt-showcase__floats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 160px), 1fr));
    gap: 0.6rem;
    margin-top: 0.75rem;
  }
  .vt-inner .vt-showcase__stage .vt-app {
    transform: none;
  }
}

/* Feature list under the interface; selecting one highlights a UI region. */
.vt-inner .vt-showcase__features {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  gap: 0.7rem;
}

.vt-inner .vt-spot {
  display: grid;
  gap: 0.4rem;
  align-content: start;
  padding: 1rem 1.1rem;
  border: 1px solid var(--i-line);
  border-radius: var(--i-r);
  background: var(--i-surface);
  text-align: left;
  cursor: pointer;
  font-family: inherit;
  transition:
    border-color var(--i-med) var(--i-ease),
    background-color var(--i-med) var(--i-ease),
    transform var(--i-med) var(--i-ease);
}

.vt-inner .vt-spot:hover {
  transform: translateY(-3px);
  border-color: var(--i-line-strong);
}

.vt-inner .vt-spot[aria-pressed="true"] {
  border-color: var(--i-accent-line);
  background:
    radial-gradient(100% 120% at 0% 0%, var(--i-accent-soft), transparent 60%),
    var(--i-surface-2);
}

.vt-inner .vt-spot__top {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  font-family: var(--i-display);
  font-size: var(--i-body-sm);
  font-weight: 600;
  color: var(--i-text);
}

.vt-inner .vt-spot__top i {
  color: var(--i-accent);
  font-size: 0.82rem;
}

.vt-inner .vt-spot__text {
  font-size: var(--i-micro);
  line-height: 1.55;
  color: var(--i-text-3);
  text-transform: none;
  letter-spacing: normal;
}

/* Highlight ring drawn over the region a selected feature maps to. */
.vt-inner .vt-app [data-region] {
  transition: box-shadow var(--i-med) var(--i-ease), border-color var(--i-med) var(--i-ease);
}

.vt-inner .vt-app [data-region].is-lit {
  border-color: var(--i-accent);
  box-shadow: 0 0 0 1px var(--i-accent), 0 0 28px -6px var(--i-accent-glow);
}

/* --- 23.3 Sticky story --------------------------------------------------- */

.vt-inner .vt-story {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(1.5rem, 0.8rem + 3vw, 4rem);
  align-items: start;
}

.vt-inner .vt-story__stage {
  display: grid;
  gap: var(--i-s3);
}

@media (min-width: 1000px) {
  .vt-inner .vt-story__stage {
    position: sticky;
    top: 7.5rem;
  }
}

.vt-inner .vt-story__visual {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 300px;
  padding: clamp(1.25rem, 1rem + 1.4vw, 2rem);
  border: 1px solid var(--i-line);
  border-radius: var(--i-r-xl);
  background:
    radial-gradient(90% 90% at 50% 0%, var(--i-accent-soft), transparent 62%),
    var(--i-ink);
  overflow: hidden;
}

.vt-inner .vt-story__frame {
  display: grid;
  gap: 0.5rem;
  width: 100%;
}

.vt-inner .vt-story__frame[hidden] {
  display: none;
}

.vt-inner .vt-story__frame:not([hidden]) {
  animation: vt-panel-in 0.45s var(--i-ease) both;
}

.vt-inner .vt-story__steps {
  display: grid;
}

.vt-inner .vt-story__step {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.5rem 1.1rem;
  padding-block: clamp(1.5rem, 1rem + 2.4vw, 3.25rem);
  border-bottom: 1px solid var(--i-line);
  opacity: 0.42;
  transition: opacity var(--i-med) var(--i-ease);
}

.vt-inner .vt-story__step.is-active {
  opacity: 1;
}

.vt-inner .vt-story__step:last-child {
  border-bottom: 0;
}

.vt-inner .vt-story__num {
  font-family: var(--i-display);
  font-size: var(--i-micro);
  font-weight: 700;
  letter-spacing: 0.2em;
  color: var(--i-accent);
  padding-top: 0.4rem;
}

.vt-inner .vt-story__title {
  font-size: clamp(1.2rem, 1.05rem + 0.9vw, 1.85rem);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.025em;
}

.vt-inner .vt-story__text {
  grid-column: 2;
  font-size: var(--i-body-md);
  line-height: 1.7;
  max-width: 56ch;
}

@media (max-width: 999px) {
  .vt-inner .vt-story {
    grid-template-columns: minmax(0, 1fr);
  }
  .vt-inner .vt-story__step {
    opacity: 1;
  }
  .vt-inner .vt-story__stage {
    order: -1;
  }
}

/* --- 23.4 Metrics command centre ---------------------------------------- */

.vt-inner .vt-command {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: clamp(0.7rem, 0.5rem + 0.8vw, 1rem);
}

.vt-inner .vt-command__tile {
  position: relative;
  display: grid;
  gap: 0.45rem;
  align-content: start;
  padding: clamp(1rem, 0.85rem + 0.7vw, 1.4rem);
  border: 1px solid var(--i-line);
  border-radius: var(--i-r);
  background: var(--i-surface);
}

.vt-inner .vt-command__tile--kpi {
  grid-column: span 3;
}

.vt-inner .vt-command__tile--chart {
  grid-column: span 7;
  background:
    radial-gradient(90% 120% at 100% 0%, var(--i-accent-soft), transparent 60%),
    var(--i-surface);
}

.vt-inner .vt-command__tile--feed {
  grid-column: span 5;
}

.vt-inner .vt-command__tile--wide {
  grid-column: span 12;
}

.vt-inner .vt-command__label {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  font-size: var(--i-micro);
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--i-text-3);
}

.vt-inner .vt-command__label i {
  color: var(--i-accent);
}

.vt-inner .vt-command__value {
  font-family: var(--i-display);
  font-size: clamp(1.5rem, 1.15rem + 1.5vw, 2.35rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.035em;
  color: var(--i-text);
  font-variant-numeric: tabular-nums;
}

/* Metric name, used when the page has no figure to show. */
.vt-inner .vt-command__metric {
  font-family: var(--i-display);
  font-size: clamp(1rem, 0.92rem + 0.4vw, 1.2rem);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.015em;
  color: var(--i-text);
}

.vt-inner .vt-command__tile .vt-meters {
  margin-block: 0.35rem 0.15rem;
}

.vt-inner .vt-command__note {
  font-size: var(--i-micro);
  color: var(--i-text-3);
}

@media (max-width: 1000px) {
  .vt-inner .vt-command__tile--kpi {
    grid-column: span 6;
  }
  .vt-inner .vt-command__tile--chart,
  .vt-inner .vt-command__tile--feed {
    grid-column: span 12;
  }
}

@media (max-width: 520px) {
  .vt-inner .vt-command__tile--kpi {
    grid-column: span 12;
  }
}
/* ==========================================================================
   24 - Finishing layer
   Technology stack wall, lead testimonial, split FAQ, destination CTA and the
   micro-interactions that make the whole thing feel considered.
   ========================================================================== */

/* --- 24.1 Technology stack wall ----------------------------------------- */

.vt-inner .vt-stackwall {
  display: grid;
  gap: 1px;
  border: 1px solid var(--i-line);
  border-radius: var(--i-r-lg);
  background: var(--i-line);
  overflow: hidden;
}

.vt-inner .vt-stackwall__layer {
  display: grid;
  grid-template-columns: minmax(8rem, 18%) minmax(0, 1fr);
  gap: clamp(0.75rem, 0.4rem + 1.4vw, 2rem);
  align-items: center;
  padding: clamp(0.9rem, 0.7rem + 0.8vw, 1.35rem) clamp(1rem, 0.8rem + 1vw, 1.6rem);
  background: var(--i-bg-alt);
  transition: background-color var(--i-med) var(--i-ease);
}

.vt-inner .vt-stackwall__layer:hover {
  background: var(--i-surface-2);
}

.vt-inner .vt-stackwall__name {
  font-family: var(--i-display);
  font-size: var(--i-micro);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--i-accent);
}

.vt-inner .vt-stackwall__items {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.vt-inner .vt-stackwall__item {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.42rem 0.8rem;
  border: 1px solid var(--i-line);
  border-radius: var(--i-r-sm);
  background: rgba(255, 255, 255, 0.022);
  font-size: var(--i-body-sm);
  font-weight: 600;
  color: var(--i-text-2);
  transition: border-color var(--i-fast) var(--i-ease), color var(--i-fast) var(--i-ease);
}

.vt-inner .vt-stackwall__item i {
  font-size: 0.7rem;
  color: var(--i-accent);
}

.vt-inner .vt-stackwall__item:hover {
  border-color: var(--i-accent-line);
  color: var(--i-text);
}

@media (max-width: 700px) {
  .vt-inner .vt-stackwall__layer {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.6rem;
  }
}

/* --- 24.2 Lead testimonial ---------------------------------------------- */

.vt-inner .vt-lead-quote {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 0.6fr);
  gap: clamp(1.5rem, 0.8rem + 3vw, 4rem);
  align-items: center;
}

.vt-inner .vt-lead-quote__body {
  display: grid;
  gap: var(--i-s4);
}

.vt-inner .vt-lead-quote__text {
  font-family: var(--i-display);
  font-size: clamp(1.35rem, 1rem + 1.9vw, 2.4rem);
  font-weight: 500;
  line-height: 1.28;
  letter-spacing: -0.025em;
  color: var(--i-text);
  text-wrap: balance;
  margin: 0;
}

.vt-inner .vt-lead-quote__by {
  display: flex;
  align-items: center;
  gap: 0.9rem;
}

.vt-inner .vt-lead-quote__mark {
  display: grid;
  place-items: center;
  flex: none;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1px solid var(--i-accent-line);
  background: var(--i-accent-soft);
  color: var(--i-accent);
  font-family: var(--i-display);
  font-weight: 700;
  font-size: 0.9rem;
}

.vt-inner .vt-lead-quote__name {
  font-family: var(--i-display);
  font-size: var(--i-body-md);
  font-weight: 600;
  color: var(--i-text);
}

.vt-inner .vt-lead-quote__role {
  font-size: var(--i-micro);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--i-text-3);
}

/* Remaining quotes sit beside the lead as compact supporting cards. */
.vt-inner .vt-lead-quote__more {
  display: grid;
  gap: 0.7rem;
}

.vt-inner .vt-mini-quote {
  display: grid;
  gap: 0.6rem;
  padding: 1rem 1.15rem;
  border: 1px solid var(--i-line);
  border-left: 2px solid var(--i-accent-line);
  border-radius: 0 var(--i-r) var(--i-r) 0;
  background: var(--i-surface);
  transition: border-color var(--i-fast) var(--i-ease), transform var(--i-fast) var(--i-ease);
}

.vt-inner .vt-mini-quote:hover {
  transform: translateX(3px);
  border-left-color: var(--i-accent);
}

.vt-inner .vt-mini-quote__text {
  font-size: var(--i-body-sm);
  line-height: 1.6;
  color: var(--i-text-2);
  margin: 0;
}

.vt-inner .vt-mini-quote__name {
  font-size: var(--i-micro);
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--i-text-3);
}

@media (max-width: 900px) {
  .vt-inner .vt-lead-quote {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* --- 24.3 Split FAQ ------------------------------------------------------ */

.vt-inner .vt-faq--split {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  gap: clamp(1.25rem, 0.6rem + 2.6vw, 3.5rem);
  align-items: start;
  border-top: 0;
}

@media (min-width: 921px) {
  /* Desktop: a question list on the left, one persistent answer panel right. */
  .vt-inner .vt-faq--split .vt-faq__item {
    border-bottom: 1px solid var(--i-line);
  }

  .vt-inner .vt-faq--split .vt-faq__list {
    display: grid;
    border-top: 1px solid var(--i-line);
  }

  /* Answers move into the stage panel only once the script is running, so a
     no-JS visitor still reads them inline. */
  .vt-inner .vt-faq--split.is-live .vt-faq__answer {
    display: none;
  }

  .vt-inner .vt-faq--split .vt-faq__icon::before,
  .vt-inner .vt-faq--split .vt-faq__icon::after {
    display: none;
  }

  .vt-inner .vt-faq--split .vt-faq__icon {
    width: 16px;
    height: 16px;
    background: none;
    border-right: 1px solid currentColor;
    border-top: 1px solid currentColor;
    transform: rotate(45deg);
    opacity: 0.5;
    transition: opacity var(--i-fast) var(--i-ease), transform var(--i-fast) var(--i-ease);
  }

  .vt-inner .vt-faq--split .vt-faq__item[open] .vt-faq__icon {
    opacity: 1;
    transform: rotate(45deg) translate(2px, -2px);
  }

  .vt-inner .vt-faq__stage {
    position: sticky;
    top: 7.5rem;
    display: grid;
    gap: var(--i-s3);
    align-content: start;
    padding: clamp(1.35rem, 1rem + 1.4vw, 2.25rem);
    border: 1px solid var(--i-line);
    border-radius: var(--i-r-lg);
    background:
      radial-gradient(110% 110% at 100% 0%, var(--i-accent-soft), transparent 58%),
      var(--i-surface-2);
    min-height: 220px;
  }

  .vt-inner .vt-faq__stage-q {
    font-family: var(--i-display);
    font-size: clamp(1.1rem, 1rem + 0.7vw, 1.5rem);
    font-weight: 600;
    line-height: 1.28;
    letter-spacing: -0.02em;
    color: var(--i-text);
  }

  .vt-inner .vt-faq__stage-a {
    font-size: var(--i-body-lg);
    line-height: 1.72;
    color: var(--i-text-2);
    max-width: 52ch;
  }
}

@media (max-width: 920px) {
  /* Mobile: fall back to the plain accordion, answers inline. */
  .vt-inner .vt-faq--split {
    grid-template-columns: minmax(0, 1fr);
  }
  .vt-inner .vt-faq--split .vt-faq__list {
    border-top: 1px solid var(--i-line);
  }
  .vt-inner .vt-faq__stage {
    display: none;
  }
}

/* --- 24.4 Destination CTA ------------------------------------------------ */

.vt-inner .vt-cta--destination {
  padding-block: clamp(4rem, 2.2rem + 7vw, 8.5rem);
  border-top: 1px solid var(--i-line);
  background: var(--i-ink);
}

.vt-inner .vt-cta--destination .vt-cta__inner {
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
  text-align: center;
  gap: var(--i-s4);
}

.vt-inner .vt-cta--destination .vt-cta__title {
  font-size: clamp(2.1rem, 1.2rem + 3.6vw, 4.25rem);
  line-height: 1.02;
  letter-spacing: -0.04em;
  max-width: 16ch;
}

.vt-inner .vt-cta--destination .vt-cta__text {
  max-width: 52ch;
  margin-inline: auto;
}

.vt-inner .vt-cta--destination .vt-cta__email {
  text-align: center;
}

.vt-inner .vt-cta--destination .vt-cta__actions {
  justify-items: center;
  grid-auto-flow: column;
  gap: 0.75rem;
}

@media (max-width: 560px) {
  .vt-inner .vt-cta--destination .vt-cta__actions {
    grid-auto-flow: row;
    width: 100%;
  }
}

/* A quiet network field behind the closing statement. */
.vt-inner .vt-cta__field {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.6;
  background-image:
    linear-gradient(var(--i-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--i-line) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(60% 70% at 50% 55%, #000 5%, transparent 75%);
  -webkit-mask-image: radial-gradient(60% 70% at 50% 55%, #000 5%, transparent 75%);
}

.vt-inner .vt-cta__field::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(45% 55% at 50% 100%, var(--i-accent-soft), transparent 70%);
}

.vt-inner .vt-cta--destination .vt-shell {
  position: relative;
  z-index: 1;
}

/* --- 24.5 Micro-interactions -------------------------------------------- */

/* Magnetic CTA: JS sets --mx/--my within a small radius on fine pointers. */
.vt-inner .vt-btn[data-magnetic] {
  transform: translate3d(var(--mx, 0), var(--my, 0), 0);
  transition:
    transform 0.28s var(--i-ease),
    box-shadow var(--i-fast) var(--i-ease),
    background-color var(--i-fast) var(--i-ease),
    border-color var(--i-fast) var(--i-ease),
    color var(--i-fast) var(--i-ease);
}

.vt-inner .vt-btn[data-magnetic]:hover {
  transform: translate3d(var(--mx, 0), calc(var(--my, 0px) - 2px), 0);
}

/* Arrow nudge shared by every "forward" affordance. */
.vt-inner .vt-btn i.fa-arrow-right,
.vt-inner .vt-linkcard__cue i,
.vt-inner .vt-btn--quiet i {
  transition: transform var(--i-fast) var(--i-ease);
}

.vt-inner .vt-btn:hover i.fa-arrow-right {
  transform: translateX(4px);
}

/* Animated underline for inline links inside prose. */
.vt-inner .vt-prose a:not(.vt-btn),
.vt-inner .vt-doc__section a:not(.vt-btn) {
  color: var(--i-brand);
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 0% 1px;
  background-repeat: no-repeat;
  background-position: 0 100%;
  transition: background-size var(--i-med) var(--i-ease);
}

.vt-inner .vt-prose a:not(.vt-btn):hover,
.vt-inner .vt-doc__section a:not(.vt-btn):hover {
  background-size: 100% 1px;
}

/* --- 24.6 Motion guards -------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .vt-inner .vt-graph__row + .vt-graph__row::after,
  .vt-inner .vt-chain__step + .vt-chain__step::after,
  .vt-inner .vt-orbit__ring--spin,
  .vt-inner .vt-float,
  .vt-inner .vt-pip {
    animation: none !important;
  }

  .vt-inner .vt-graph__row + .vt-graph__row::after {
    opacity: 1;
  }

  .vt-inner .vt-showcase__stage .vt-app {
    transform: none !important;
  }

  .vt-inner .vt-btn[data-magnetic] {
    transform: none !important;
  }
}

/* Touch devices get no magnetic drift and no hover-only dimming. */
@media (hover: none), (pointer: coarse) {
  .vt-inner .vt-btn[data-magnetic] {
    transform: none !important;
  }

  .vt-inner .vt-chain:hover .vt-chain__step:not(:hover) {
    opacity: 1;
  }
}

/* ==========================================================================
   25 - Section directories
   A long index leads with three feature cards, then drops to a compact list.
   ========================================================================== */

.vt-inner .vt-linkgrid--lead {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  margin-bottom: clamp(1rem, 0.6rem + 1.4vw, 1.75rem);
}

.vt-inner .vt-linkcard--lead {
  padding: clamp(1.6rem, 1.2rem + 1.4vw, 2.35rem);
  background:
    radial-gradient(110% 90% at 100% 0%, var(--i-accent-soft), transparent 60%),
    var(--i-surface-2);
}

.vt-inner .vt-linkcard--lead .vt-linkcard__title {
  font-size: clamp(1.15rem, 1.02rem + 0.7vw, 1.5rem);
}

.vt-inner .vt-linkcard--lead .vt-linkcard__icon {
  width: 48px;
  height: 48px;
  font-size: 1.05rem;
}

.vt-inner .vt-index {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: 0;
  border-top: 1px solid var(--i-line);
}

.vt-inner .vt-index__row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.85rem;
  padding: 0.95rem 0.85rem;
  border-bottom: 1px solid var(--i-line);
  transition: background-color var(--i-fast) var(--i-ease), padding-left var(--i-fast) var(--i-ease);
}

.vt-inner .vt-index__row:hover {
  background: rgba(255, 255, 255, 0.02);
  padding-left: 1.15rem;
}

.vt-inner .vt-index__icon {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 9px;
  border: 1px solid var(--i-line);
  background: var(--i-surface);
  color: var(--i-accent);
  font-size: 0.75rem;
}

.vt-inner .vt-index__name {
  font-family: var(--i-display);
  font-size: var(--i-body-sm);
  font-weight: 600;
  color: var(--i-text);
  line-height: 1.35;
}

.vt-inner .vt-index__cue {
  color: var(--i-text-3);
  font-size: 0.72rem;
  transition: transform var(--i-fast) var(--i-ease), color var(--i-fast) var(--i-ease);
}

.vt-inner .vt-index__row:hover .vt-index__cue {
  transform: translateX(3px);
  color: var(--i-brand);
}

.vt-inner .vt-sitemap__files {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem 0.75rem;
  margin: 0 0 2rem;
  padding: 0;
  list-style: none;
}

.vt-inner .vt-sitemap__files a {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0.35rem 0.8rem;
  border: 1px solid var(--i-line);
  border-radius: 999px;
  color: var(--i-text);
  font-size: 0.85rem;
  font-weight: 600;
  text-decoration: none;
}

.vt-inner .vt-sitemap__files a:hover,
.vt-inner .vt-sitemap__files a:focus-visible {
  border-color: var(--i-brand);
  color: var(--i-brand);
}

.vt-inner .vt-sitemap {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: 1.75rem 2rem;
}

.vt-inner .vt-sitemap__group h2 {
  margin: 0 0 0.7rem;
  color: var(--i-text);
  font-family: var(--i-display);
  font-size: 1.05rem;
  font-weight: 650;
}

.vt-inner .vt-sitemap__group ul {
  display: grid;
  gap: 0.4rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.vt-inner .vt-sitemap__group a {
  color: var(--i-text-2);
  font-size: 0.92rem;
  text-decoration: none;
}

.vt-inner .vt-sitemap__group a:hover,
.vt-inner .vt-sitemap__group a:focus-visible {
  color: var(--i-brand);
}