/* =========================================================
   MTD Explorer brand layer
   Load this file after stylesheets/extra.css.
   ========================================================= */

/* ---------- Brand tokens ---------- */

:root {
  --mtd-paper: #f6f1eb;
  --mtd-paper-deep: #eee6dc;
  --mtd-surface: #fffdf9;
  --mtd-surface-soft: #faf6f0;

  --mtd-navy: #082f63;
  --mtd-navy-soft: #234a76;
  --mtd-teal: #0b8389;
  --mtd-teal-dark: #086a70;
  --mtd-green: #2d7d2b;

  --mtd-a: #2d7d2b;
  --mtd-c: #2f83bd;
  --mtd-g: #ff9200;
  --mtd-tu: #ef2817;

  --mtd-text: #17324d;
  --mtd-muted: #607184;
  --mtd-line: #cfd8df;

  --md-primary-fg-color: var(--mtd-navy);
  --md-primary-fg-color--light: var(--mtd-navy-soft);
  --md-primary-fg-color--dark: #052347;
  --md-accent-fg-color: var(--mtd-teal);
  --md-default-bg-color: var(--mtd-paper);
  --md-default-fg-color: var(--mtd-text);
}


/* ---------- Page background ---------- */

body,
.md-container,
.md-main {
  background-color: var(--mtd-paper);
}

.md-main {
  background-image:
    radial-gradient(circle at 1px 1px, rgba(8, 47, 99, 0.055) 1px, transparent 0);
  background-size: 24px 24px;
}

.md-main__inner {
  max-width: 88rem;
}

.md-content__inner {
  padding-top: 1.3rem;
}


/* ---------- Header and top navigation ---------- */

.md-header {
  color: var(--mtd-navy);
  background-color: rgba(255, 253, 249, 0.97);
  border-bottom: 3px solid var(--mtd-navy);
  box-shadow: none;
  backdrop-filter: blur(10px);
}

.md-header__title,
.md-header__button,
.md-header__button:hover,
.md-header__button:focus {
  color: var(--mtd-navy);
}

.md-header__title {
  font-weight: 760;
  letter-spacing: 0.015em;
}

.md-header__button.md-logo {
  margin: 0.15rem 0.15rem 0.15rem 0;
  padding: 0.1rem;
}

.md-header__button.md-logo img,
.md-header__button.md-logo svg {
  width: 2.55rem;
  height: 2.55rem;
  object-fit: contain;
  background: transparent;
}

.md-tabs {
  color: var(--mtd-navy);
  background-color: rgba(255, 253, 249, 0.97);
  border-bottom: 1px solid var(--mtd-line);
  box-shadow: none;
}

.md-tabs__link {
  position: relative;
  color: var(--mtd-navy);
  font-weight: 700;
  opacity: 0.78;
}

.md-tabs__link:hover,
.md-tabs__link--active {
  color: var(--mtd-teal);
  opacity: 1;
}

.md-tabs__link--active::after {
  position: absolute;
  right: 0;
  bottom: -0.55rem;
  left: 0;
  height: 0.18rem;
  content: "";
  background-color: var(--mtd-teal);
  border-radius: 999px;
}


/* ---------- Search ---------- */

.md-search__form {
  background-color: #ffffff;
  border: 1px solid var(--mtd-line);
  border-radius: 0.7rem;
  box-shadow: none;
}

.md-search__form:hover,
.md-search__form:focus-within {
  border-color: var(--mtd-teal);
  box-shadow: 0 0 0 3px rgba(11, 131, 137, 0.1);
}

.md-search__input,
.md-search__icon {
  color: var(--mtd-navy);
}

.md-search__input::placeholder {
  color: #718091;
}


/* ---------- Side navigation ---------- */

.md-nav__title {
  color: var(--mtd-navy);
  font-weight: 800;
}

.md-nav__link {
  color: var(--mtd-text);
  border-radius: 0.35rem;
}

.md-nav__link:hover,
.md-nav__link:focus,
.md-nav__link--active {
  color: var(--mtd-teal);
}

.md-nav__link--active {
  font-weight: 760;
}


/* ---------- General typography ---------- */

.md-typeset {
  color: var(--mtd-text);
}

.md-typeset h1,
.md-typeset h2,
.md-typeset h3,
.md-typeset h4 {
  color: var(--mtd-navy);
  font-weight: 760;
  letter-spacing: -0.02em;
}

.md-typeset h1 {
  margin-bottom: 1.2rem;
}

.md-typeset h2 {
  padding-bottom: 0.28rem;
  border-bottom: 2px solid rgba(11, 131, 137, 0.25);
}

.md-typeset a {
  color: var(--mtd-teal);
  text-decoration-thickness: 0.08em;
  text-underline-offset: 0.16em;
}

.md-typeset a:hover {
  color: var(--mtd-teal-dark);
}


/* ---------- Homepage hero ---------- */

.mtd-hero {
  position: relative;
  background:
    linear-gradient(145deg, rgba(255, 253, 249, 0.98), rgba(250, 246, 240, 0.98));
  border: 2px solid var(--mtd-navy);
  border-radius: 1.5rem;
  box-shadow: none;
}

.mtd-hero::before {
  position: absolute;
  top: 1.1rem;
  right: 1.2rem;
  width: 5rem;
  height: 5rem;
  pointer-events: none;
  content: "";
  opacity: 0.13;
  background-image:
    radial-gradient(circle, var(--mtd-teal) 1.5px, transparent 1.7px);
  background-size: 12px 12px;
}

.mtd-hero h1 {
  color: var(--mtd-navy);
}

.mtd-eyebrow,
.mtd-section-kicker {
  color: var(--mtd-teal);
}

.mtd-hero-description,
.mtd-section-heading > p:last-child {
  color: var(--mtd-muted);
}

.mtd-logo-panel {
  padding: 0;
  overflow: hidden;
  background: transparent;
  border: 0;
  border-radius: 50%;
  box-shadow: none;
}

.mtd-main-logo {
  filter: none;
}


/* ---------- Buttons ---------- */

.mtd-home .md-button,
.md-typeset .md-button {
  border: 2px solid var(--mtd-navy);
  border-radius: 0.65rem;
  box-shadow: none;
  transition:
    transform 140ms ease,
    background-color 140ms ease,
    border-color 140ms ease;
}

.mtd-home .md-button:hover,
.md-typeset .md-button:hover {
  transform: translateY(-2px);
}

.mtd-home .md-button--primary,
.md-typeset .md-button--primary {
  color: #ffffff;
  background-color: var(--mtd-navy);
  border-color: var(--mtd-navy);
}

.mtd-home .md-button--primary:hover,
.md-typeset .md-button--primary:hover {
  color: #ffffff;
  background-color: var(--mtd-teal);
  border-color: var(--mtd-teal);
}


/* ---------- Base legend ---------- */

.mtd-base {
  background-color: var(--mtd-surface);
  border: 1px solid var(--mtd-line);
  box-shadow: none;
}

.mtd-base strong {
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08);
}


/* ---------- Development notice ---------- */

.mtd-development-notice {
  background-color: #fff8e8;
  border: 1px solid #e8c875;
  border-left: 0.35rem solid var(--mtd-g);
  box-shadow: none;
}

.mtd-development-label {
  color: #875200;
}


/* ---------- Feature cards ---------- */

.mtd-feature-grid {
  gap: 1.15rem;
}

.mtd-feature-card {
  position: relative;
  overflow: hidden;
  background-color: var(--mtd-surface);
  border: 1px solid var(--mtd-line);
  border-top-width: 0.34rem;
  border-radius: 1rem;
  box-shadow: none;
  transition:
    transform 150ms ease,
    border-color 150ms ease;
}

.mtd-feature-card:hover {
  transform: translateY(-3px);
  border-right-color: var(--mtd-navy);
  border-bottom-color: var(--mtd-navy);
  border-left-color: var(--mtd-navy);
}

.mtd-feature-card::after {
  position: absolute;
  right: -1.2rem;
  bottom: -1.2rem;
  width: 4rem;
  height: 4rem;
  content: "";
  opacity: 0.08;
  border: 0.42rem solid currentColor;
  border-radius: 50%;
}

.mtd-feature-host {
  color: var(--mtd-c);
  border-top-color: var(--mtd-c);
}

.mtd-feature-microbiome {
  color: var(--mtd-a);
  border-top-color: var(--mtd-a);
}

.mtd-feature-functional {
  color: var(--mtd-g);
  border-top-color: var(--mtd-g);
}

.mtd-feature-integrated {
  color: var(--mtd-tu);
  border-top-color: var(--mtd-tu);
}

.mtd-feature-card h3,
.mtd-feature-card p {
  color: initial;
}

.mtd-feature-card h3 {
  color: var(--mtd-navy);
}

.mtd-feature-card p {
  color: var(--mtd-muted);
}

.mtd-card-symbol {
  color: var(--mtd-navy);
  background-color: var(--mtd-surface-soft);
  border: 1px solid var(--mtd-line);
}


/* ---------- Pipeline ---------- */

.mtd-pipeline-section {
  background-color: var(--mtd-surface-soft);
  border: 2px solid var(--mtd-navy);
  border-radius: 1.25rem;
  box-shadow: none;
}

.mtd-pipeline {
  background-color: var(--mtd-surface);
  border: 1px solid var(--mtd-line);
  box-shadow: none;
}

.mtd-pipeline-step {
  background-color: var(--mtd-surface);
}

.mtd-pipeline-step:nth-child(4n + 1) {
  box-shadow: inset 0 0.26rem 0 var(--mtd-a);
}

.mtd-pipeline-step:nth-child(4n + 2) {
  box-shadow: inset 0 0.26rem 0 var(--mtd-c);
}

.mtd-pipeline-step:nth-child(4n + 3) {
  box-shadow: inset 0 0.26rem 0 var(--mtd-g);
}

.mtd-pipeline-step:nth-child(4n) {
  box-shadow: inset 0 0.26rem 0 var(--mtd-tu);
}

.mtd-step-number {
  color: var(--mtd-teal);
}

.mtd-pipeline-step strong {
  color: var(--mtd-navy);
}

.mtd-pipeline-step small {
  color: var(--mtd-muted);
}


/* ---------- Resource cards ---------- */

.mtd-resource-card {
  background-color: var(--mtd-surface);
  border: 1px solid var(--mtd-line);
  border-left: 0.28rem solid var(--mtd-teal);
  border-radius: 0.85rem;
  box-shadow: none;
  transition:
    transform 150ms ease,
    border-color 150ms ease,
    background-color 150ms ease;
}

.mtd-resource-card:hover {
  background-color: #ffffff;
  border-color: var(--mtd-teal);
  transform: translateY(-2px);
}

.mtd-resource-card:nth-child(4n + 1) {
  border-left-color: var(--mtd-a);
}

.mtd-resource-card:nth-child(4n + 2) {
  border-left-color: var(--mtd-c);
}

.mtd-resource-card:nth-child(4n + 3) {
  border-left-color: var(--mtd-g);
}

.mtd-resource-card:nth-child(4n) {
  border-left-color: var(--mtd-tu);
}

.mtd-resource-card h3 {
  color: var(--mtd-navy);
}

.mtd-resource-card p {
  color: var(--mtd-muted);
}


/* ---------- Final homepage callout ---------- */

.mtd-final-callout {
  background:
    linear-gradient(135deg, rgba(11, 131, 137, 0.1), rgba(45, 125, 43, 0.06));
  border: 2px solid var(--mtd-teal);
  border-left-width: 0.45rem;
  border-radius: 1rem;
  box-shadow: none;
}


/* ---------- Documentation elements ---------- */

.md-typeset .admonition,
.md-typeset details {
  background-color: var(--mtd-surface);
  border-width: 0;
  border-left-width: 0.28rem;
  box-shadow: none;
}

.md-typeset table:not([class]) {
  background-color: var(--mtd-surface);
  border: 1px solid var(--mtd-line);
  box-shadow: none;
}

.md-typeset table:not([class]) th {
  color: #ffffff;
  background-color: var(--mtd-navy);
}

.md-typeset code {
  border-radius: 0.25rem;
}

.md-typeset pre > code {
  border: 1px solid rgba(47, 131, 189, 0.2);
}


/* ---------- Footer ---------- */

.md-footer {
  color: #ffffff;
  background-color: var(--mtd-navy);
}

.md-footer-meta {
  background-color: #06254d;
}

.md-footer__link:hover {
  color: #ffffff;
}

.md-footer__title {
  color: #ffffff;
}


/* ---------- Dark mode ---------- */

[data-md-color-scheme="slate"] {
  --mtd-paper: #071522;
  --mtd-paper-deep: #0a1b2b;
  --mtd-surface: #0f2132;
  --mtd-surface-soft: #10283a;

  --mtd-text: #e8eff6;
  --mtd-muted: #aebdcc;
  --mtd-line: #294157;

  --md-default-bg-color: var(--mtd-paper);
  --md-default-fg-color: var(--mtd-text);
}

[data-md-color-scheme="slate"] body,
[data-md-color-scheme="slate"] .md-container,
[data-md-color-scheme="slate"] .md-main {
  background-color: var(--mtd-paper);
}

[data-md-color-scheme="slate"] .md-header,
[data-md-color-scheme="slate"] .md-tabs {
  color: #edf5ff;
  background-color: rgba(7, 21, 34, 0.97);
  border-color: #24435f;
}

[data-md-color-scheme="slate"] .md-header__title,
[data-md-color-scheme="slate"] .md-header__button,
[data-md-color-scheme="slate"] .md-tabs__link {
  color: #edf5ff;
}

[data-md-color-scheme="slate"] .md-search__form {
  background-color: #10283a;
  border-color: #294157;
}

[data-md-color-scheme="slate"] .md-search__input,
[data-md-color-scheme="slate"] .md-search__icon {
  color: #edf5ff;
}

[data-md-color-scheme="slate"] .mtd-hero {
  background: linear-gradient(145deg, #0f2132, #10283a);
  border-color: #4e7598;
}

[data-md-color-scheme="slate"] .mtd-development-notice {
  background-color: #2b2415;
  border-color: #6c5725;
}

[data-md-color-scheme="slate"] .mtd-development-label {
  color: #ffd77d;
}

[data-md-color-scheme="slate"] .mtd-feature-card h3,
[data-md-color-scheme="slate"] .mtd-resource-card h3,
[data-md-color-scheme="slate"] .mtd-pipeline-step strong,
[data-md-color-scheme="slate"] .md-typeset h1,
[data-md-color-scheme="slate"] .md-typeset h2,
[data-md-color-scheme="slate"] .md-typeset h3,
[data-md-color-scheme="slate"] .md-typeset h4 {
  color: #edf5ff;
}

[data-md-color-scheme="slate"] .mtd-base,
[data-md-color-scheme="slate"] .mtd-feature-card,
[data-md-color-scheme="slate"] .mtd-resource-card,
[data-md-color-scheme="slate"] .mtd-pipeline,
[data-md-color-scheme="slate"] .mtd-pipeline-step,
[data-md-color-scheme="slate"] .md-typeset .admonition,
[data-md-color-scheme="slate"] .md-typeset details {
  background-color: var(--mtd-surface);
}


/* ---------- Responsive ---------- */

@media screen and (max-width: 60rem) {
  .md-header {
    border-bottom-width: 2px;
  }

  .mtd-hero {
    border-radius: 1.15rem;
  }
}

@media screen and (max-width: 44rem) {
  .md-main {
    background-size: 20px 20px;
  }

  .mtd-hero {
    border-width: 1px;
    border-radius: 0.9rem;
  }

  .mtd-feature-card,
  .mtd-resource-card,
  .mtd-final-callout {
    border-radius: 0.75rem;
  }
}
/* =========================================================
   Force pure white background in light mode
   ========================================================= */

[data-md-color-scheme="default"] {
  --mtd-paper: #ffffff;
  --mtd-paper-deep: #ffffff;
  --md-default-bg-color: #ffffff;
}

body[data-md-color-scheme="default"],
[data-md-color-scheme="default"] .md-container,
[data-md-color-scheme="default"] .md-main {
  background-color: #ffffff !important;
}

[data-md-color-scheme="default"] .md-main {
  background-image: none !important;
}
[data-md-color-scheme="default"] .mtd-hero,
[data-md-color-scheme="default"] .mtd-feature-card,
[data-md-color-scheme="default"] .mtd-resource-card,
[data-md-color-scheme="default"] .mtd-pipeline-section,
[data-md-color-scheme="default"] .mtd-pipeline,
[data-md-color-scheme="default"] .mtd-pipeline-step,
[data-md-color-scheme="default"] .mtd-logo-panel {
  background-color: #ffffff !important;
}
/* =========================================================
   Permanent light theme with pure white background
   ========================================================= */

[data-md-color-scheme="default"] {
  --mtd-paper: #ffffff;
  --mtd-paper-deep: #ffffff;
  --mtd-surface: #ffffff;
  --mtd-surface-soft: #ffffff;

  --md-default-bg-color: #ffffff;
}

body[data-md-color-scheme="default"],
body[data-md-color-scheme="default"] .md-container,
body[data-md-color-scheme="default"] .md-main,
body[data-md-color-scheme="default"] .md-content,
body[data-md-color-scheme="default"] .md-content__inner {
  background-color: #ffffff !important;
}

body[data-md-color-scheme="default"] .md-main {
  background-image: none !important;
}

body[data-md-color-scheme="default"] .mtd-hero,
body[data-md-color-scheme="default"] .mtd-logo-panel,
body[data-md-color-scheme="default"] .mtd-feature-card,
body[data-md-color-scheme="default"] .mtd-resource-card,
body[data-md-color-scheme="default"] .mtd-pipeline-section,
body[data-md-color-scheme="default"] .mtd-pipeline,
body[data-md-color-scheme="default"] .mtd-pipeline-step {
  background: #ffffff !important;
  background-image: none !important;
}
/* =========================================================
   Horizontal homepage logo
   ========================================================= */

.mtd-hero {
  grid-template-columns: 1fr;
  gap: 1.6rem;
}

.mtd-hero-visual {
  order: -1;
  display: flex;
  width: 100%;
  justify-content: center;
}

.mtd-logo-panel {
  width: 100%;
  max-width: 72rem;
  padding: 0;
  margin: 0 auto;

  overflow: visible;

  background: transparent !important;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.mtd-main-logo--horizontal {
  display: block;

  width: 100%;
  max-width: 68rem;
  max-height: 17rem;
  height: auto;

  margin: 0 auto;

  object-fit: contain;
}

.mtd-read-decoration {
  display: none;
}

@media screen and (max-width: 60rem) {
  .mtd-main-logo--horizontal {
    max-height: 13rem;
  }
}

@media screen and (max-width: 44rem) {
  .mtd-main-logo--horizontal {
    max-height: 9rem;
  }
}
/* =========================================================
   Smaller horizontal homepage logo
   ========================================================= */

.mtd-hero {
  grid-template-columns: 1fr;
  gap: 1.25rem;

  padding: 2.2rem 2.8rem 2.6rem;
}

.mtd-hero-visual {
  order: 0;

  display: flex;
  justify-content: center;

  width: 100%;
  padding: 1rem 2rem 1.4rem;

  overflow: visible;
}

.mtd-logo-panel {
  width: 100%;
  max-width: 58rem;

  margin: 0 auto;
  padding: 0;

  overflow: visible;

  background: transparent !important;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.mtd-main-logo--horizontal {
  display: block;

  width: 100%;
  max-width: 58rem;
  height: auto;
  max-height: none;

  margin: 0 auto;

  object-fit: contain;
  object-position: center;
}

/* Medium screens */

@media screen and (max-width: 76rem) {

  .mtd-logo-panel,
  .mtd-main-logo--horizontal {
    max-width: 50rem;
  }

  .mtd-hero-visual {
    padding-right: 1rem;
    padding-left: 1rem;
  }

}

/* Phones */

@media screen and (max-width: 44rem) {

  .mtd-hero {
    padding: 1.35rem;
  }

  .mtd-logo-panel,
  .mtd-main-logo--horizontal {
    max-width: 100%;
  }

  .mtd-hero-visual {
    padding: 0.7rem 0 1rem;
  }

}
/* =========================================================
   Homepage v2 — mockup-inspired layout
   ========================================================= */

.mtd-home {
  max-width: 96rem;
  margin: 0 auto;
}

.mtd-hero-v2 {
  display: grid;
  grid-template-columns: 1fr 1.4fr 1fr;
  gap: 1.5rem;
  align-items: center;

  padding: 2rem 1rem 1rem;
  margin-bottom: 1.5rem;
}

.mtd-hero-v2-side {
  min-height: 22rem;
  position: relative;
}

.mtd-hero-v2-center {
  text-align: center;
}

.mtd-main-logo-v2 {
  display: block;
  width: 100%;
  max-width: 42rem;
  height: auto;
  margin: 0 auto 1.2rem;
}

.mtd-hero-v2-title {
  max-width: 44rem;
  margin: 0 auto 1rem;
  color: var(--mtd-navy);
  font-size: 2.1rem;
  line-height: 1.2;
  font-weight: 800;
}

.mtd-hero-v2-description {
  max-width: 42rem;
  margin: 0 auto 1.3rem;
  color: var(--mtd-muted);
  font-size: 1rem;
  line-height: 1.65;
}

.mtd-hero-v2-actions {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 1.2rem;
}

.mtd-base-legend-v2 {
  display: flex;
  justify-content: center;
  gap: 1.4rem;
  flex-wrap: wrap;
  font-size: 0.95rem;
  color: var(--mtd-text);
}

.mtd-base-v2 {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
}

.mtd-base-dot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.45rem;
  height: 1.45rem;
  border-radius: 999px;
  color: #fff;
  font-style: normal;
  font-size: 0.68rem;
  font-weight: 800;
}

.mtd-base-dot-a { background: var(--mtd-a); }
.mtd-base-dot-c { background: var(--mtd-c); }
.mtd-base-dot-g { background: var(--mtd-g); }
.mtd-base-dot-t { background: var(--mtd-tu); }

/* left side visual */

.mtd-protein-shape {
  position: absolute;
  left: 1rem;
  top: 1rem;
  width: 14rem;
  height: 12rem;
  opacity: 0.22;
  border-radius: 45% 55% 58% 42% / 41% 43% 57% 59%;
  background:
    radial-gradient(circle at 30% 30%, rgba(118, 194, 214, 0.65), transparent 45%),
    radial-gradient(circle at 60% 60%, rgba(120, 135, 255, 0.55), transparent 40%),
    radial-gradient(circle at 70% 25%, rgba(140, 205, 229, 0.45), transparent 42%);
  filter: blur(2px);
}

.mtd-rna-wave {
  position: absolute;
  left: 1.5rem;
  bottom: 1.5rem;
  width: 20rem;
  height: 8rem;
}

.mtd-rna-wave::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 0% 60%, transparent 0 0.9rem, var(--mtd-teal) 1rem 1.08rem, transparent 1.12rem),
    radial-gradient(circle at 25% 35%, transparent 0 0.9rem, var(--mtd-teal) 1rem 1.08rem, transparent 1.12rem),
    radial-gradient(circle at 50% 62%, transparent 0 0.9rem, var(--mtd-teal) 1rem 1.08rem, transparent 1.12rem),
    radial-gradient(circle at 75% 30%, transparent 0 0.9rem, var(--mtd-teal) 1rem 1.08rem, transparent 1.12rem),
    radial-gradient(circle at 100% 52%, transparent 0 0.9rem, var(--mtd-teal) 1rem 1.08rem, transparent 1.12rem);
  opacity: 0.95;
}

.mtd-rna-wave span {
  position: absolute;
  width: 100%;
  height: 100%;
  border-bottom: 4px solid var(--mtd-teal);
  border-radius: 50%;
  opacity: 0.9;
}

.mtd-rna-wave span:nth-child(1) { transform: translateY(0.2rem) scaleX(1); }
.mtd-rna-wave span:nth-child(2) { transform: translateY(1rem) scaleX(0.8); width: 80%; left: 10%; }
.mtd-rna-wave span:nth-child(3) { transform: translateY(1.8rem) scaleX(0.6); width: 60%; left: 20%; }
.mtd-rna-wave span:nth-child(4) { transform: translateY(2.6rem) scaleX(0.4); width: 40%; left: 30%; }

/* right side visual */

.mtd-umap-cloud {
  position: absolute;
  right: 1rem;
  top: 1rem;
  width: 18rem;
  height: 18rem;
  background:
    radial-gradient(circle at 20% 40%, rgba(90, 220, 140, 0.8) 0 2.2rem, transparent 2.3rem),
    radial-gradient(circle at 42% 52%, rgba(108, 198, 228, 0.78) 0 2.6rem, transparent 2.7rem),
    radial-gradient(circle at 58% 30%, rgba(120, 160, 255, 0.75) 0 2.8rem, transparent 2.9rem),
    radial-gradient(circle at 72% 36%, rgba(143, 120, 255, 0.75) 0 1.8rem, transparent 1.9rem),
    radial-gradient(circle at 62% 72%, rgba(255, 170, 80, 0.85) 0 2.4rem, transparent 2.5rem),
    radial-gradient(circle at 82% 58%, rgba(255, 115, 120, 0.8) 0 2.5rem, transparent 2.6rem),
    radial-gradient(circle at 88% 28%, rgba(200, 200, 200, 0.6) 0 1.3rem, transparent 1.4rem),
    radial-gradient(circle at 28% 78%, rgba(195, 205, 220, 0.6) 0 1.2rem, transparent 1.3rem);
  filter: saturate(1.1);
  opacity: 0.9;
}

/* cards */

.mtd-cards-v2 {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
  margin: 0 0 1.5rem;
}

.mtd-card-v2 {
  display: flex;
  gap: 1rem;
  align-items: flex-start;

  background: #fff;
  border: 1px solid var(--mtd-line);
  border-radius: 1rem;
  padding: 1.25rem;

  box-shadow: 0 8px 22px rgba(8, 47, 99, 0.04);
}

.mtd-card-v2 h3 {
  margin: 0 0 0.45rem;
  color: var(--mtd-navy);
  font-size: 1.05rem;
}

.mtd-card-v2 p {
  margin: 0 0 0.55rem;
  color: var(--mtd-muted);
  font-size: 0.95rem;
  line-height: 1.55;
}

.mtd-card-v2 a {
  font-weight: 700;
  text-decoration: none;
}

.mtd-card-v2-icon {
  flex: 0 0 auto;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.45rem;
  font-weight: 700;
}

.mtd-card-v2-icon-teal {
  color: var(--mtd-teal);
  background: rgba(11, 131, 137, 0.10);
}

.mtd-card-v2-icon-blue {
  color: #597dff;
  background: rgba(89, 125, 255, 0.10);
}

.mtd-card-v2-icon-orange {
  color: var(--mtd-g);
  background: rgba(255, 146, 0, 0.10);
}

.mtd-card-v2-icon-red {
  color: #ff6d6d;
  background: rgba(255, 109, 109, 0.10);
}

/* workflow */

.mtd-workflow-v2 {
  display: grid;
  grid-template-columns: 18rem 1fr;
  gap: 1.25rem;
  align-items: center;

  background: #fff;
  border: 1px solid var(--mtd-line);
  border-radius: 1rem;
  padding: 1.2rem 1.3rem 1.1rem;
  margin-bottom: 1rem;

  box-shadow: 0 8px 22px rgba(8, 47, 99, 0.04);
}

.mtd-workflow-v2-intro h2 {
  margin: 0 0 0.45rem;
  border: 0;
  padding: 0;
  color: var(--mtd-navy);
  font-size: 1.35rem;
}

.mtd-workflow-v2-intro p {
  margin: 0;
  color: var(--mtd-muted);
}

.mtd-workflow-v2-steps {
  display: grid;
  grid-template-columns: repeat(9, auto);
  gap: 0.9rem;
  align-items: center;
}

.mtd-step-v2 {
  min-width: 8rem;
}

.mtd-step-v2-num {
  width: 2rem;
  height: 2rem;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0.45rem;

  background: rgba(11, 131, 137, 0.10);
  color: var(--mtd-teal);
  font-weight: 800;
}

.mtd-step-v2 strong {
  display: block;
  color: var(--mtd-navy);
  margin-bottom: 0.2rem;
  font-size: 0.95rem;
}

.mtd-step-v2 small {
  display: block;
  color: var(--mtd-muted);
  line-height: 1.4;
}

.mtd-step-v2-arrow {
  color: var(--mtd-navy);
  font-size: 1.7rem;
  font-weight: 700;
}

/* responsiveness */

@media screen and (max-width: 82rem) {
  .mtd-hero-v2 {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .mtd-hero-v2-side {
    display: none;
  }

  .mtd-cards-v2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .mtd-workflow-v2 {
    grid-template-columns: 1fr;
  }

  .mtd-workflow-v2-steps {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  .mtd-step-v2-arrow {
    display: none;
  }
}

@media screen and (max-width: 52rem) {
  .mtd-main-logo-v2 {
    max-width: 100%;
  }

  .mtd-hero-v2-title {
    font-size: 1.55rem;
  }

  .mtd-cards-v2 {
    grid-template-columns: 1fr;
  }

  .mtd-workflow-v2-steps {
    grid-template-columns: 1fr;
  }

  .mtd-step-v2 {
    min-width: auto;
  }
}

/* =========================================================
   MTD Explorer homepage card image icons
   ========================================================= */

.mtd-card-v2-icon {
  flex: 0 0 auto;
  width: 4.25rem;
  height: 4.25rem;
  padding: 0;
  overflow: hidden;
  background: transparent;
  border: 0;
  border-radius: 50%;
}

.mtd-card-v2-icon-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.mtd-card-glyph {
  display: none !important;
}

@media screen and (max-width: 44rem) {
  .mtd-card-v2-icon {
    width: 3.8rem;
    height: 3.8rem;
  }
}
/* =========================================================
   Hero side illustrations
   ========================================================= */

.mtd-hero-side-art {
  display: block;
  width: 100%;
  max-width: 25rem;
  height: auto;
  margin: 0 auto;
  object-fit: contain;
}

.mtd-hero-v2-side-left {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.mtd-hero-v2-side-right {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.mtd-hero-side-art-left {
  max-width: 24rem;
}

.mtd-hero-side-art-right {
  max-width: 22rem;
}

/* =========================================================
   Workflow image icons
   ========================================================= */

.mtd-step-v2-icon-image {
  display: block;
  width: 4.5rem;
  height: 4.5rem;
  object-fit: contain;
  margin: 0 auto 0.75rem auto;
}

.mtd-step-v2 {
  text-align: center;
}

.mtd-step-v2 strong {
  display: block;
  margin-bottom: 0.25rem;
}

.mtd-step-v2 small {
  display: block;
  line-height: 1.4;
}

/* =========================================================
   Responsive adjustments
   ========================================================= */

@media screen and (max-width: 76rem) {
  .mtd-hero-side-art-left,
  .mtd-hero-side-art-right {
    max-width: 18rem;
  }
}

@media screen and (max-width: 60rem) {
  .mtd-hero-v2-side {
    justify-content: center;
  }

  .mtd-hero-side-art-left,
  .mtd-hero-side-art-right {
    max-width: 16rem;
  }

  .mtd-step-v2-icon-image {
    width: 4rem;
    height: 4rem;
  }
}
/* =========================================================
   Fix hero layout after removing nucleotide legend
   ========================================================= */

.mtd-hero-v2 {
  display: grid;

  grid-template-columns:
    minmax(16rem, 0.9fr)
    minmax(32rem, 1.4fr)
    minmax(16rem, 0.9fr);

  column-gap: 1.5rem;
  align-items: start;

  padding: 2rem 1rem 1.5rem;
}

/* Keep every hero element in a fixed grid position */

.mtd-hero-v2-side-left {
  grid-column: 1;
  grid-row: 1;

  align-self: start;
  justify-content: center;

  min-height: 0;
  padding-top: 3.5rem;
}

.mtd-hero-v2-center {
  grid-column: 2;
  grid-row: 1;

  align-self: start;
}

.mtd-hero-v2-side-right {
  grid-column: 3;
  grid-row: 1;

  align-self: start;
  justify-content: center;

  min-height: 0;
  padding-top: 3rem;
}

/* Prevent the images from controlling the hero height */

.mtd-hero-side-art {
  display: block;

  width: 100%;
  height: auto;
  margin: 0 auto;

  object-fit: contain;
}

.mtd-hero-side-art-left {
  max-width: 22rem;
  max-height: 21rem;
}

.mtd-hero-side-art-right {
  max-width: 20rem;
  max-height: 21rem;
}

/* Keep the central logo and text compact */

.mtd-main-logo-v2 {
  margin-bottom: 0.8rem;
}

.mtd-hero-v2-title {
  margin-bottom: 0.8rem;
}

.mtd-hero-v2-description {
  margin-bottom: 1.15rem;
}

.mtd-hero-v2-actions {
  margin-bottom: 0;
}

/* Tablet */

@media screen and (max-width: 82rem) {
  .mtd-hero-v2 {
    grid-template-columns:
      minmax(12rem, 0.8fr)
      minmax(28rem, 1.4fr)
      minmax(12rem, 0.8fr);

    column-gap: 0.8rem;
  }

  .mtd-hero-side-art-left,
  .mtd-hero-side-art-right {
    max-width: 16rem;
  }
}

/* Smaller screens */

@media screen and (max-width: 60rem) {
  .mtd-hero-v2 {
    grid-template-columns: 1fr;
  }

  .mtd-hero-v2-center {
    grid-column: 1;
    grid-row: 1;
  }

  .mtd-hero-v2-side-left,
  .mtd-hero-v2-side-right {
    display: none;
  }
}
/* =========================================================
   FINAL HERO LAYOUT OVERRIDE
   Keep left artwork, content and right artwork on one row
   ========================================================= */

@media screen and (min-width: 70.01rem) {

  .mtd-home .mtd-hero-v2 {
    display: grid !important;

    grid-template-columns:
      minmax(15rem, 0.9fr)
      minmax(34rem, 1.45fr)
      minmax(15rem, 0.9fr) !important;

    grid-template-areas:
      "hero-left hero-center hero-right" !important;

    align-items: center !important;
    justify-items: stretch;

    gap: 1.5rem !important;

    width: 100%;
    padding: 2.2rem 1rem 1.8rem !important;
  }

  .mtd-home .mtd-hero-v2-side-left {
    grid-area: hero-left !important;

    display: flex !important;
    position: static !important;

    align-items: center;
    justify-content: center;

    width: 100%;
    min-height: 0 !important;

    margin: 0 !important;
    padding: 0 !important;
  }

  .mtd-home .mtd-hero-v2-center {
    grid-area: hero-center !important;

    position: static !important;
    align-self: center;

    width: 100%;
    margin: 0 auto !important;
  }

  .mtd-home .mtd-hero-v2-side-right {
    grid-area: hero-right !important;

    display: flex !important;
    position: static !important;

    align-items: center;
    justify-content: center;

    width: 100%;
    min-height: 0 !important;

    margin: 0 !important;
    padding: 0 !important;
  }

  .mtd-home .mtd-hero-side-art {
    display: block;

    width: 100%;
    height: auto;

    margin: 0 auto !important;

    object-fit: contain;
    object-position: center;
  }

  .mtd-home .mtd-hero-side-art-left {
    max-width: 23rem !important;
    max-height: 23rem !important;
  }

  .mtd-home .mtd-hero-side-art-right {
    max-width: 21rem !important;
    max-height: 23rem !important;
  }

}
/* Tablet and mobile */

@media screen and (max-width: 70rem) {

  .mtd-home .mtd-hero-v2 {
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-template-areas:
      "hero-center"
      "hero-left"
      "hero-right" !important;

    gap: 1.5rem;
  }

  .mtd-home .mtd-hero-v2-center {
    grid-area: hero-center !important;
  }

  .mtd-home .mtd-hero-v2-side-left {
    grid-area: hero-left !important;
  }

  .mtd-home .mtd-hero-v2-side-right {
    grid-area: hero-right !important;
  }

  .mtd-home .mtd-hero-v2-side-left,
  .mtd-home .mtd-hero-v2-side-right {
    display: none !important;
  }

}
/* =========================================================
   Definitive three-column homepage hero
   ========================================================= */

@media screen and (min-width: 70.01rem) {

  .mtd-home .mtd-hero-v2 {
    display: grid !important;

    grid-template-columns:
      minmax(15rem, 0.85fr)
      minmax(34rem, 1.5fr)
      minmax(15rem, 0.85fr) !important;

    grid-template-areas:
      "left center right" !important;

    align-items: center !important;
    gap: 1.5rem !important;

    width: 100%;
    margin: 0 auto 1.5rem;
    padding: 2.4rem 1rem 1.8rem !important;
  }

  .mtd-home .mtd-hero-v2 > .mtd-hero-v2-side-left {
    grid-area: left !important;

    display: flex !important;
    align-items: center;
    justify-content: center;

    position: static !important;

    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .mtd-home .mtd-hero-v2 > .mtd-hero-v2-center {
    grid-area: center !important;

    position: static !important;

    width: 100%;
    margin: 0 auto !important;

    text-align: center;
  }

  .mtd-home .mtd-hero-v2 > .mtd-hero-v2-side-right {
    grid-area: right !important;

    display: flex !important;
    align-items: center;
    justify-content: center;

    position: static !important;

    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .mtd-home .mtd-hero-side-art {
    display: block;

    width: 100%;
    height: auto;

    margin: 0 auto !important;

    object-fit: contain;
    object-position: center;
  }

  .mtd-home .mtd-hero-side-art-left {
    max-width: 23rem !important;
    max-height: 23rem !important;
  }

  .mtd-home .mtd-hero-side-art-right {
    max-width: 21rem !important;
    max-height: 23rem !important;
  }

  .mtd-home .mtd-main-logo-v2 {
    width: 100%;
    max-width: 40rem;
    margin: 0 auto 0.8rem;
  }

}


/* Tablet and mobile */

@media screen and (max-width: 70rem) {

  .mtd-home .mtd-hero-v2 {
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-template-areas: "center" !important;

    padding: 1.5rem 1rem !important;
  }

  .mtd-home .mtd-hero-v2 > .mtd-hero-v2-center {
    grid-area: center !important;
  }

  .mtd-home .mtd-hero-v2 > .mtd-hero-v2-side-left,
  .mtd-home .mtd-hero-v2 > .mtd-hero-v2-side-right {
    display: none !important;
  }

}
/* Original MTD attribution */

.mtd-origin-credit {
  max-width: 42rem;
  margin: -0.45rem auto 1.2rem;

  color: var(--mtd-muted);
  font-size: 0.78rem;
  line-height: 1.5;
  text-align: center;
}

.mtd-origin-credit a {
  color: var(--mtd-teal);
  font-weight: 700;
  text-decoration: none;
}

.mtd-origin-credit a:hover {
  text-decoration: underline;
  text-underline-offset: 0.15rem;
}
/* =========================================================
   Original MTD citation
   ========================================================= */

.mtd-origin-citation {
  max-width: 46rem;
  margin: 0.9rem auto 1.25rem;
  padding: 0.75rem 1rem;

  color: var(--mtd-muted);
  font-size: 0.78rem;
  line-height: 1.55;
  text-align: center;

  background: rgba(11, 131, 137, 0.045);
  border: 1px solid rgba(11, 131, 137, 0.16);
  border-radius: 0.65rem;
}

.mtd-origin-label {
  color: var(--mtd-navy);
  font-weight: 750;
}

.mtd-origin-citation a {
  color: var(--mtd-teal);
  text-decoration: none;
}

.mtd-origin-citation a:hover {
  text-decoration: underline;
  text-underline-offset: 0.15rem;
}

.mtd-origin-links {
  display: inline-flex;
  gap: 0.45rem;
  margin-left: 0.35rem;
  white-space: nowrap;
}

.mtd-origin-links a {
  font-weight: 700;
}

@media screen and (max-width: 44rem) {
  .mtd-origin-citation {
    font-size: 0.74rem;
  }

  .mtd-origin-links {
    display: flex;
    justify-content: center;
    margin: 0.4rem 0 0;
  }
}