:root {
  --home-badge-space: 12px;
  --home-intro-space: 28px;
  --home-copy-width: 880px;
  --home-editorial-space: 56px;
  --home-essay-space: 40px;
  --home-essay-gap: 48px;
  --home-label-width: 240px;
  --home-platform-icon: 24px;
  --home-platform-gap: 14px;
  --home-platform-copy-space: 20px;
  --home-platform-title-space: 24px;
  --home-link-space: 32px;
  --home-dark-copy-width: 920px;
  --home-dark-line-height: 1.85;
}
.home-badges {
  justify-content: center;
  margin-top: var(--home-badge-space);
}
.home-intro {
  max-width: var(--home-copy-width);
  margin-top: var(--home-intro-space);
}
.home-features > .tabpanel {
  grid-column: 2;
  grid-row: 1;
}
.home-editorial {
  max-width: var(--home-copy-width);
  margin-top: var(--home-editorial-space);
}
.home-editorial h3:first-child {
  margin-top: 0;
}
.home-platform-name {
  display: inline-flex;
  align-items: center;
  gap: var(--home-platform-gap);
  margin-bottom: var(--home-platform-title-space);
  max-width: 100%;
  text-decoration: none;
}
.home-platform-name svg {
  width: var(--home-platform-icon);
  height: var(--home-platform-icon);
}
.home-platform-name h3 {
  margin: 0;
}
.home-platform-name:hover h3 {
  text-decoration: underline;
  text-underline-offset: .2em;
}
.home-platform p {
  color: var(--text-muted);
}
.home-platform .pill-btn {
  margin-top: var(--home-platform-copy-space);
}
.home-section-link {
  margin-top: var(--home-link-space);
  margin-bottom: 0;
  font-weight: var(--weight-bold);
}
.home-ecosystem > p:not(.settings-path) {
  max-width: var(--home-dark-copy-width);
  line-height: var(--home-dark-line-height);
}
.home-essays {
  margin-top: var(--home-editorial-space);
}
.home-essay {
  display: grid;
  grid-template-columns: var(--home-label-width) minmax(0, 1fr);
  gap: var(--home-essay-gap);
  padding-top: var(--home-essay-space);
  padding-bottom: var(--home-essay-space);
  border-top: 1px solid var(--border);
}
.home-essay h3 {
  margin-top: 0;
}
.home-essay p:last-child {
  margin-bottom: 0;
}
@media (max-width: 940px) {
  :root {
    --home-label-width: 200px;
    --home-essay-gap: 32px;
  }
}
@media (max-width: 768px) {
  .home-features > .tabpanel {
    grid-column: auto;
    grid-row: auto;
  }
  .home-essay {
    display: block;
  }
}
@media (max-width: 360px) {
  .home-badges {
    gap: var(--home-badge-space);
  }
}