[data-md-color-scheme="vector"] {
    /* // Default color shades */
    --md-default-fg-color:               hsla(0, 0%, 0%, 0.87);
    --md-default-fg-color--light:        hsla(0, 0%, 0%, 0.54);
    --md-default-fg-color--lighter:      hsla(0, 0%, 0%, 0.32);
    --md-default-fg-color--lightest:     hsla(0, 0%, 0%, 0.07);
    --md-default-bg-color:               hsla(0, 0%, 100%, 1);
    --md-default-bg-color--light:        hsla(0, 0%, 100%, 0.7);
    --md-default-bg-color--lighter:      hsla(0, 0%, 100%, 0.3);
    --md-default-bg-color--lightest:     hsla(0, 0%, 100%, 0.12);

    /* // Primary color shades */
    --md-primary-fg-color:               #B70032;
    --md-primary-fg-color--light:        #848B8E;
    --md-primary-fg-color--dark:         #565C5E;
    --md-primary-bg-color:               hsla(0, 0%, 100%, 1);
    --md-primary-bg-color--light:        hsla(0, 0%, 100%, 0.7);

    /* // Accent color shades */
    --md-accent-fg-color:                #B70032;
    --md-accent-fg-color--transparent:   #b7003119;
    --md-accent-bg-color:                hsla(0, 0%, 100%, 1);
    --md-accent-bg-color--light:         hsla(0, 0%, 100%, 0.7);

    /* // Light theme (default) */
    /* // Code color shades */
      --md-code-fg-color:                hsla(200, 18%, 26%, 1);
      --md-code-bg-color:                hsla(0, 0%, 96%, 1);

      /* // Code highlighting color shades */
      --md-code-hl-color:                #ffff007f;
      --md-code-hl-number-color:         hsla(0, 67%, 50%, 1);
      --md-code-hl-special-color:        hsla(340, 83%, 47%, 1);
      --md-code-hl-function-color:       hsla(291, 45%, 50%, 1);
      --md-code-hl-constant-color:       hsla(250, 63%, 60%, 1);
      --md-code-hl-keyword-color:        hsla(219, 54%, 51%, 1);
      --md-code-hl-string-color:         hsla(150, 63%, 30%, 1);
      --md-code-hl-name-color:           var(--md-code-fg-color);
      --md-code-hl-operator-color:       var(--md-default-fg-color--light);
      --md-code-hl-punctuation-color:    var(--md-default-fg-color--light);
      --md-code-hl-comment-color:        var(--md-default-fg-color--light);
      --md-code-hl-generic-color:        var(--md-default-fg-color--light);
      --md-code-hl-variable-color:       var(--md-default-fg-color--light);

      /* // Typeset color shades */
      --md-typeset-color:                var(--md-default-fg-color);

      /* // Typeset `a` color shades */
      --md-typeset-a-color:              var(--md-primary-fg-color);

      /* // Typeset `mark` color shades */
      --md-typeset-mark-color:           hsla(#{hex2hsl($clr-yellow-a200)}, 0.5);

      /* // Typeset `del` and `ins` color shades */
      --md-typeset-del-color:            hsla(6, 90%, 60%, 0.15);
      --md-typeset-ins-color:            hsla(150, 90%, 44%, 0.15);

      /* // Typeset `kbd` color shades */
      --md-typeset-kbd-color:            hsla(0, 0%, 98%, 1);
      --md-typeset-kbd-accent-color:     hsla(0, 100%, 100%, 1);
      --md-typeset-kbd-border-color:     hsla(0, 0%, 72%, 1);

      /* // Typeset `table` color shades */
      --md-typeset-table-color:          hsla(0, 0%, 0%, 0.12);

      /* // Admonition color shades */
      --md-admonition-fg-color:          var(--md-default-fg-color);
      --md-admonition-bg-color:          var(--md-default-bg-color);

      /* // Footer color shades */
      --md-footer-fg-color:              hsla(0, 0%, 100%, 1);
      --md-footer-fg-color--light:       hsla(0, 0%, 100%, 0.7);
      --md-footer-fg-color--lighter:     hsla(0, 0%, 100%, 0.3);
      --md-footer-bg-color:              hsla(195, 4%, 35%, 1); /* #565C5E*/
      --md-footer-bg-color--dark:        #848B8E;
  }

  [data-md-color-scheme="vector-by-night"] {


    /* // Default color shades */
    --md-default-fg-color:               hsla(0, 0%, 100%, 0.87);
    --md-default-fg-color--light:        hsla(0, 0%, 98%, 0.54);
    --md-default-fg-color--lighter:      hsla(0, 0%, 100%, 0.32);
    --md-default-fg-color--lightest:     hsla(0, 0%, 86%, 0.07);
    --md-default-bg-color:               rgb(37, 37, 41);
    --md-default-bg-color--light:        hsla(0, 0%, 66%, 0.7);
    --md-default-bg-color--lighter:      hsla(0, 0%, 99%, 0.3);
    --md-default-bg-color--lightest:     hsla(0, 0%, 98%, 0.12);

    /* // Primary color shades */
    --md-primary-fg-color:               #808080;
    --md-primary-fg-color--light:        #dadada;
    --md-primary-fg-color--dark:         #a8b6ba;
    --md-primary-bg-color:               rgb(206, 206, 206);
    --md-primary-bg-color--light:        hsla(0, 0%, 88%, 0.7);

    /* // Accent color shades */
    --md-accent-fg-color:                #B70032;
    --md-accent-fg-color--transparent:   #b7003119;
    --md-accent-bg-color:                hsla(0, 0%, 100%, 1);
    --md-accent-bg-color--light:         hsla(0, 0%, 100%, 0.7);

    /* // Light theme (default) */
    /* // Code color shades */
      --md-code-fg-color:                rgb(235, 235, 235);
      --md-code-bg-color:                rgb(58, 58, 58);

      /* // Code highlighting color shades */
      --md-code-hl-color:                #ffff007f;
      --md-code-hl-number-color:         hsla(0, 67%, 50%, 1);
      --md-code-hl-special-color:        hsla(340, 83%, 47%, 1);
      --md-code-hl-function-color:       hsla(291, 45%, 50%, 1);
      --md-code-hl-constant-color:       hsla(250, 63%, 60%, 1);
      --md-code-hl-keyword-color:        hsla(219, 54%, 51%, 1);
      --md-code-hl-string-color:         hsla(150, 63%, 30%, 1);
      --md-code-hl-name-color:           var(--md-code-fg-color);
      --md-code-hl-operator-color:       var(--md-default-fg-color--light);
      --md-code-hl-punctuation-color:    var(--md-default-fg-color--light);
      --md-code-hl-comment-color:        var(--md-default-fg-color--light);
      --md-code-hl-generic-color:        var(--md-default-fg-color--light);
      --md-code-hl-variable-color:       var(--md-default-fg-color--light);

      /* // Typeset color shades */
      --md-typeset-color:                var(--md-default-fg-color);

      /* // Typeset `a` color shades */
      --md-typeset-a-color:              var(--md-primary-fg-color);

      /* // Typeset `mark` color shades */
      --md-typeset-mark-color:           hsla(#{hex2hsl($clr-yellow-a200)}, 0.5);

      /* // Typeset `del` and `ins` color shades */
      --md-typeset-del-color:            hsla(6, 90%, 60%, 0.15);
      --md-typeset-ins-color:            hsla(150, 90%, 44%, 0.15);

      /* // Typeset `kbd` color shades */
      --md-typeset-kbd-color:            hsla(0, 0%, 98%, 1);
      --md-typeset-kbd-accent-color:     hsla(0, 100%, 100%, 1);
      --md-typeset-kbd-border-color:     hsla(0, 0%, 72%, 1);

      /* // Typeset `table` color shades */
      --md-typeset-table-color:          hsla(0, 0%, 0%, 0.12);

      /* // Admonition color shades */
      --md-admonition-fg-color:          var(--md-default-fg-color);
      --md-admonition-bg-color:          var(--md-default-bg-color);

      /* // Footer color shades */
      --md-footer-fg-color:              rgb(212, 212, 212);
      --md-footer-fg-color--light:       hsla(0, 0%, 61%, 0.7);
      --md-footer-fg-color--lighter:     hsla(0, 0%, 85%, 0.3);
      --md-footer-bg-color:              rgb(195, 195, 195); /* #565C5E*/
      --md-footer-bg-color--dark:        hsla(0, 0%, 0%, 1) /*#848B8E; */
  }

/* ============================================================
   Landing page (home.md) — full-bleed sections
   ============================================================ */

.vhome-hero,
.vhome-features,
.vhome-steps,
.vhome-quicklinks {
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  box-sizing: border-box;
}

/* Remove Material's default article top padding when the hero is present */
.md-content__inner:has(> .vhome-hero:first-child) {
  padding-top: 0 !important;
}

/* ---- Hero ---- */
.vhome-hero {
  background-color: #252529;
  color: #fff;
  padding-bottom: 72px;
}

.vhome-hero__accent {
  height: 4px;
  background-color: #B70032;
  width: 100%;
}

.vhome-hero__inner {
  max-width: 860px;
  margin: 0 auto;
  padding: 64px 32px 0;
}

.vhome-hero__logo {
  height: 20px;
  width: auto;
  /* Make the SVG white in both themes */
  filter: brightness(0) invert(1);
  margin-bottom: 32px;
  display: block;
}

.vhome-hero__title {
  font-size: 2.6rem;
  font-weight: 700;
  line-height: 1.15;
  color: #fff !important;
  margin: 0 0 20px;
  border: none !important;
}

.vhome-hero__subtitle {
  font-size: 1.1rem;
  line-height: 1.7;
  color: rgba(255,255,255,0.75);
  max-width: 620px;
  margin: 0 0 36px;
}

.vhome-hero__actions {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

/* ---- CTA buttons ---- */
.vhome-btn {
  display: inline-block;
  padding: 12px 28px;
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: none !important;
  border-radius: 2px;
  transition: opacity 0.15s ease;
}

.vhome-btn:hover {
  opacity: 0.85;
  text-decoration: none !important;
}

.vhome-btn--primary {
  background-color: #B70032;
  color: #fff !important;
  border: 2px solid #B70032;
}

.vhome-btn--outline {
  background-color: transparent;
  color: #fff !important;
  border: 2px solid rgba(255,255,255,0.55);
}

.vhome-btn--outline:hover {
  border-color: #fff;
}

/* ---- Feature cards ---- */
.vhome-features {
  background-color: #f5f5f5;
  padding: 64px 0;
}

[data-md-color-scheme="vector-by-night"] .vhome-features {
  background-color: #1e1e22;
}

.vhome-features__inner {
  max-width: 1040px;
  margin: 0 auto;
  padding: 0 32px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.vhome-card {
  background-color: #fff;
  display: flex;
  flex-direction: row;
  overflow: hidden;
}

[data-md-color-scheme="vector-by-night"] .vhome-card {
  background-color: #2c2c30;
}

.vhome-card__accent {
  width: 4px;
  flex-shrink: 0;
  background-color: #B70032;
}

.vhome-card__body {
  padding: 28px 24px;
}

.vhome-card__title {
  font-size: 1rem;
  font-weight: 700;
  margin: 0 0 10px;
  color: inherit;
  border: none !important;
}

.vhome-card__text {
  font-size: 0.875rem;
  line-height: 1.65;
  color: var(--md-default-fg-color--light);
  margin: 0 0 16px;
}

.vhome-card__link {
  font-size: 0.875rem;
  font-weight: 600;
  color: #B70032 !important;
  text-decoration: none !important;
}

.vhome-card__link:hover {
  text-decoration: underline !important;
}

/* ---- How it works steps ---- */
.vhome-steps {
  background-color: #fff;
  padding: 64px 0;
}

[data-md-color-scheme="vector-by-night"] .vhome-steps {
  background-color: #252529;
}

.vhome-steps__inner {
  max-width: 1040px;
  margin: 0 auto;
  padding: 0 32px;
}

.vhome-steps__heading {
  font-size: 1.4rem;
  font-weight: 700;
  margin: 0 0 40px;
  color: inherit;
  border: none !important;
}

.vhome-steps__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
}

.vhome-step__number {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: #B70032;
  color: #fff;
  font-size: 1rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
  flex-shrink: 0;
}

.vhome-step__title {
  font-size: 1rem;
  font-weight: 700;
  margin: 0 0 10px;
  border: none !important;
}

.vhome-step__text {
  font-size: 0.875rem;
  line-height: 1.65;
  color: var(--md-default-fg-color--light);
  margin: 0;
}

/* ---- Quick links strip ---- */
.vhome-quicklinks {
  background-color: #252529;
  padding: 0;
}

.vhome-quicklinks__inner {
  max-width: 1040px;
  margin: 0 auto;
  padding: 0 32px;
  display: flex;
  flex-wrap: wrap;
}

.vhome-ql {
  flex: 1 1 200px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 28px 24px;
  color: rgba(255,255,255,0.8) !important;
  text-decoration: none !important;
  border-right: 1px solid rgba(255,255,255,0.1);
  transition: background-color 0.15s ease, color 0.15s ease;
}

.vhome-ql:last-child {
  border-right: none;
}

.vhome-ql:hover {
  background-color: rgba(183,0,50,0.15);
  color: #fff !important;
}

.vhome-ql__label {
  font-size: 0.9rem;
  font-weight: 600;
}

.vhome-ql__arrow {
  font-size: 1.2rem;
  color: #B70032;
}

/* ---- Capabilities table ---- */
.vhome-capabilities,
.vhome-problems,
.vhome-usecases {
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  box-sizing: border-box;
}

.vhome-capabilities {
  background-color: #fff;
  padding: 64px 0;
}

[data-md-color-scheme="vector-by-night"] .vhome-capabilities {
  background-color: #252529;
}

.vhome-capabilities__inner {
  max-width: 1040px;
  margin: 0 auto;
  padding: 0 32px;
}

.vhome-capabilities__heading {
  font-size: 1.4rem;
  font-weight: 700;
  margin: 0 0 32px;
  border: none !important;
}

/* ---- Problem list ---- */
.vhome-problems {
  background-color: #f5f5f5;
  padding: 64px 0;
}

[data-md-color-scheme="vector-by-night"] .vhome-problems {
  background-color: #1e1e22;
}

.vhome-problems__inner {
  max-width: 1040px;
  margin: 0 auto;
  padding: 0 32px;
}

.vhome-problems__heading {
  font-size: 1.4rem;
  font-weight: 700;
  margin: 0 0 24px;
  border: none !important;
}

.vhome-problems__inner ul {
  padding-left: 1.25rem;
  margin: 16px 0 24px;
}

.vhome-problems__inner li {
  font-size: 0.9rem;
  line-height: 1.7;
  margin-bottom: 8px;
}

/* ---- Use cases ---- */
.vhome-usecases {
  background-color: #fff;
  padding: 64px 0;
}

[data-md-color-scheme="vector-by-night"] .vhome-usecases {
  background-color: #252529;
}

.vhome-usecases__inner {
  max-width: 1040px;
  margin: 0 auto;
  padding: 0 32px;
}

.vhome-usecases__heading {
  font-size: 1.4rem;
  font-weight: 700;
  margin: 0 0 40px;
  border: none !important;
}

/* ---- Responsive ---- */
@media (max-width: 860px) {
  .vhome-hero__title {
    font-size: 2rem;
  }
}

@media (max-width: 768px) {
  .vhome-features__inner,
  .vhome-steps__grid {
    grid-template-columns: 1fr;
  }

  .vhome-quicklinks__inner {
    flex-direction: column;
  }

  .vhome-ql {
    border-right: none;
    border-bottom: 1px solid rgba(255,255,255,0.1);
  }

  .vhome-ql:last-child {
    border-bottom: none;
  }
}

/* ============================================================
   Screenshots — 2px black border
   ============================================================ */
.md-typeset img:not(.twemoji):not([class*="md-"]) {
    border: 2px solid #000000;
}

.md-typeset img.no-border {
    border: none !important;
}

/* ============================================================
   Custom admonitions */
:root {
  --md-admonition-icon--options: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--><path d="M470.6 278.6c12.5-12.5 12.5-32.8 0-45.3l-160-160c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L402.7 256 265.4 393.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l160-160zm-352 160l160-160c12.5-12.5 12.5-32.8 0-45.3l-160-160c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L210.7 256 73.4 393.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0z"/></svg>')
}
.md-typeset .admonition.options,
.md-typeset details.options {
  border-color: var(--md-default-fg-color--lightest);
}
.md-typeset .options > .admonition-title,
.md-typeset .options > summary {
  background-color: var(--md-default-fg-color--lightest);
}
.md-typeset .options > .admonition-title::before,
.md-typeset .options > summary::before {
  background-color: var(--md-primary-fg-color);
  -webkit-mask-image: var(--md-admonition-icon--options);
          mask-image: var(--md-admonition-icon--options);
  }