:root {
  --vp-c-brand-1: #0f766e;
  --vp-c-brand-2: #0d9488;
  --vp-c-brand-3: #14b8a6;
  --vp-c-brand-soft: rgba(20, 184, 166, 0.14);
  --vp-c-bg: #ffffff;
  --vp-c-bg-alt: #f3f8fb;
  --vp-c-bg-soft: #f2fbf8;
  --vp-c-border: #d7e3e0;
  --vp-c-text-1: #1f2933;
  --vp-c-text-2: #52616b;
  --vp-button-brand-bg: #0f766e;
  --vp-button-brand-hover-bg: #0d9488;
  --vp-button-alt-bg: #e7f0ef;
  --vp-button-alt-hover-bg: #d9e8e6;
  --vp-home-hero-name-color: transparent;
  --vp-home-hero-name-background: linear-gradient(110deg, #0f766e 10%, #b45309 55%, #be123c);
}

.dark {
  --vp-c-bg: #101417;
  --vp-c-bg-alt: #151c20;
  --vp-c-bg-soft: #182421;
  --vp-c-border: #2e4540;
  --vp-c-text-1: #eef7f5;
  --vp-c-text-2: #b7c8c4;
  --vp-button-alt-bg: #22302f;
  --vp-button-alt-hover-bg: #2b3c3a;
}

.VPFeature,
.VPButton,
.VPNavBarSearch,
.DocSearch-Button {
  border-radius: 8px !important;
}

.VPHomeHero {
  padding-bottom: 40px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.97), rgba(243, 248, 251, 0.82)),
    url("/spec-flow.png") center bottom / min(1020px, 94vw) auto no-repeat;
}

.dark .VPHomeHero {
  background:
    linear-gradient(180deg, rgba(16, 20, 23, 0.96), rgba(21, 28, 32, 0.88)),
    url("/spec-flow.png") center bottom / min(1020px, 94vw) auto no-repeat;
}

.VPHomeHero .container {
  min-height: 560px;
}

.VPHomeHero .main {
  max-width: 760px;
}

.VPHomeHero .tagline {
  max-width: 700px;
  line-height: 1.8;
}

.vp-doc h2 {
  margin-top: 48px;
}

.vp-doc table {
  display: table;
  width: 100%;
}

.home-section {
  margin: 48px auto 0;
  max-width: 1120px;
  padding: 0 24px;
}

.home-section h2 {
  margin: 0 0 12px;
  font-size: 28px;
  line-height: 1.25;
}

.home-section p {
  color: var(--vp-c-text-2);
  line-height: 1.8;
}

.workflow-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-top: 20px;
}

.workflow-step {
  min-height: 150px;
  padding: 18px;
  border: 1px solid var(--vp-c-border);
  border-radius: 8px;
  background: var(--vp-c-bg-soft);
}

.workflow-step strong {
  display: block;
  margin-bottom: 8px;
  color: var(--vp-c-text-1);
}

.install-panel {
  margin-top: 24px;
  padding: 20px;
  border: 1px solid var(--vp-c-border);
  border-radius: 8px;
  background: #1f211c;
  color: #f2fbf8;
  overflow-x: auto;
}

.install-panel code {
  color: #f2fbf8;
}

@media (max-width: 900px) {
  .VPHomeHero .container {
    min-height: 620px;
  }

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

@media (max-width: 640px) {
  .VPHomeHero {
    background-size: min(680px, 120vw) auto;
  }

  .VPHomeHero .container {
    min-height: 680px;
  }

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