/* Homepage: use one continuous horizontal science background treatment. */
body.home .vv-home-vivodart-workflow,
body.home .vv-home-dart-overview,
body.home .vv-home-transparent-science,
body.home .vv-home-enabling,
body.home .vv-home-latest,
body.home .vv-resources-latest,
body.home .vv-home-cta,
body.home .vv-cta{
  background:linear-gradient(90deg,#081d3b 0%,#0b365a 58%,#0a6075 100%)!important;
  border-top-color:transparent!important;
  border-bottom-color:transparent!important;
  color:#fff!important;
}

body.home .vv-home-vivodart-workflow::before,
body.home .vv-home-dart-overview::before,
body.home .vv-home-enabling::before,
body.home .vv-home-latest::before,
body.home .vv-resources-latest::before,
body.home .vv-home-cta::before,
body.home .vv-cta::before{
  background:none!important;
}

body.home .vv-home-vivodart-workflow .vv-dart-workflow-title,
body.home .vv-home-dart-overview .vv-home-dart-overview-title,
body.home .vv-home-enabling .vv-home-enabling-title,
body.home .vv-home-enabling .vv-home-enabling-title a,
body.home .vv-home-enabling .vv-home-enabling-title-link,
body.home .vv-home-latest h2,
body.home .vv-resources-latest h2,
body.home .vv-home-cta h2,
body.home .vv-cta h2{
  color:#fff!important;
}

body.home .vv-home-vivodart-workflow .vv-dart-workflow-intro,
body.home .vv-home-vivodart-workflow .vv-dart-workflow-kicker,
body.home .vv-home-dart-overview .vv-home-dart-intro,
body.home .vv-home-enabling p,
body.home .vv-home-cta p,
body.home .vv-cta p{
  color:#dff5fa!important;
}

body.home .vv-home-dart-overview .vv-home-dart-kicker,
body.home .vv-home-dart-overview .vv-home-text-link a,
body.home .vv-home-enabling a,
body.home .vv-home-cta a,
body.home .vv-cta a{
  color:#7fe3ef!important;
}

/* Keep the linked Enabling Technologies heading white, including hover/focus states. */
body.home .vv-home-enabling .vv-home-enabling-title a,
body.home .vv-home-enabling .vv-home-enabling-title-link,
body.home .vv-home-enabling .vv-home-enabling-title-link:hover,
body.home .vv-home-enabling .vv-home-enabling-title-link:focus{
  color:#fff!important;
}

/* From Chemical Exposure to Toxicity Insights: subdued gray-blue card surfaces. */
body.home .vv-home-vivodart-workflow .vv-dart-workflow-card{
  background:#b8cad4!important;
  border-color:#96acb8!important;
  box-shadow:0 14px 36px rgba(0,15,35,.16)!important;
}

body.home .vv-home-vivodart-workflow .vv-dart-workflow-image{
  background:#aabec9!important;
  border-color:#8fa7b4!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.20),0 10px 25px rgba(0,15,35,.10)!important;
}

/* The workflow artwork itself stays transparent so the matching gray-blue surface shows through. */
body.home .vv-home-vivodart-workflow .vv-dart-workflow-image img{
  background:transparent!important;
}

/* Match each card caption to its card title size. */
body.home .vv-home-vivodart-workflow .vv-dart-step-copy{
  font-size:clamp(17.1px,1.215vw,20.7px)!important;
}

/* Desktop/tablet: reserve a true gap column and center the line-and-circle entirely inside it. */
@media(min-width:681px){
  body.home .vv-home-vivodart-workflow .vv-dart-workflow-grid{
    grid-template-columns:minmax(0,1fr) 64px minmax(0,1fr) 64px minmax(0,1fr) 64px minmax(0,1fr)!important;
    column-gap:0!important;
    align-items:stretch!important;
  }

  body.home .vv-home-vivodart-workflow .vv-dart-workflow-connector{
    position:relative!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    align-self:stretch!important;
    min-width:64px!important;
    width:64px!important;
    max-width:64px!important;
    flex-basis:64px!important;
    padding:0!important;
    margin:0!important;
    overflow:visible!important;
  }

  body.home .vv-home-vivodart-workflow .vv-dart-workflow-connector::before{
    content:none!important;
  }

  body.home .vv-home-vivodart-workflow .vv-dart-connector-arrow{
    position:absolute!important;
    left:50%!important;
    top:50%!important;
    width:32px!important;
    max-width:32px!important;
    height:2px!important;
    margin:0!important;
    background:#7fd8e8!important;
    clip-path:none!important;
    filter:none!important;
    opacity:1!important;
    transform:translate(-50%,-50%)!important;
    overflow:visible!important;
  }

  body.home .vv-home-vivodart-workflow .vv-dart-connector-arrow::after{
    content:""!important;
    position:absolute!important;
    right:-5px!important;
    top:50%!important;
    width:10px!important;
    height:10px!important;
    border:2px solid #7fd8e8!important;
    border-radius:50%!important;
    background:#0b365a!important;
    transform:translateY(-50%)!important;
    box-sizing:border-box!important;
  }
}

/* Two-column tablet layout: keep the visible connectors centered in their own gap column. */
@media(min-width:681px) and (max-width:980px){
  body.home .vv-home-vivodart-workflow .vv-dart-workflow-grid{
    grid-template-columns:minmax(0,1fr) 64px minmax(0,1fr)!important;
    row-gap:30px!important;
  }

  body.home .vv-home-vivodart-workflow .vv-dart-workflow-connector{
    min-width:64px!important;
    width:64px!important;
    max-width:64px!important;
    flex-basis:64px!important;
  }
}

/* Mobile: stack cards and center a vertical line-and-circle in the open space between them. */
@media(max-width:680px){
  body.home .vv-home-vivodart-workflow .vv-dart-workflow-grid{
    display:flex!important;
    flex-direction:column!important;
    gap:0!important;
  }

  body.home .vv-home-vivodart-workflow .vv-dart-workflow-connector{
    position:relative!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    width:100%!important;
    min-width:0!important;
    height:56px!important;
    min-height:56px!important;
    flex-basis:56px!important;
    padding:0!important;
    margin:0!important;
    overflow:visible!important;
  }

  body.home .vv-home-vivodart-workflow .vv-dart-workflow-connector::before{
    content:none!important;
  }

  body.home .vv-home-vivodart-workflow .vv-dart-connector-arrow{
    position:absolute!important;
    left:50%!important;
    top:50%!important;
    width:2px!important;
    max-width:none!important;
    height:28px!important;
    margin:0!important;
    background:#7fd8e8!important;
    clip-path:none!important;
    filter:none!important;
    opacity:1!important;
    transform:translate(-50%,-50%)!important;
    overflow:visible!important;
  }

  body.home .vv-home-vivodart-workflow .vv-dart-connector-arrow::after{
    content:""!important;
    position:absolute!important;
    left:50%!important;
    bottom:-5px!important;
    top:auto!important;
    right:auto!important;
    width:10px!important;
    height:10px!important;
    border:2px solid #7fd8e8!important;
    border-radius:50%!important;
    background:#0b365a!important;
    transform:translateX(-50%)!important;
    box-sizing:border-box!important;
  }
}

/* Keep other existing light content cards readable against the darker sections. */
body.home .vv-home-enabling .vv-home-enabling-card,
body.home .vv-home-latest .vv-latest-card,
body.home .vv-resources-latest .vv-latest-card{
  background:rgba(255,255,255,.92)!important;
  border-color:rgba(255,255,255,.28)!important;
  box-shadow:0 18px 46px rgba(0,15,35,.20)!important;
}

body.home .vv-home-enabling .vv-home-enabling-card{
  background:#b8cad4!important;
}

/* Preserve dark text inside the light cards. */
body.home .vv-home-enabling .vv-home-enabling-card,
body.home .vv-home-enabling .vv-home-enabling-card p,
body.home .vv-home-enabling .vv-home-enabling-card h3,
body.home .vv-home-enabling .vv-home-enabling-card a,
body.home .vv-home-latest .vv-latest-card,
body.home .vv-home-latest .vv-latest-card h3,
body.home .vv-home-latest .vv-latest-card time,
body.home .vv-resources-latest .vv-latest-card,
body.home .vv-resources-latest .vv-latest-card h3,
body.home .vv-resources-latest .vv-latest-card time{
  color:#122041!important;
}