html {
  background-color: var(--brand-color-canvas-default);
}

body {
  margin: 0;
}

.slack-landing-page {
  position: relative;
  min-height: 100dvh;
}

@media (prefers-reduced-motion: reduce) {
  .slack-landing-page,
  .slack-landing-page *,
  .slack-landing-page *::before,
  .slack-landing-page *::after {
    animation-duration: 0s !important;
    transition-duration: 0s !important;
  }
}

.slack-landing-page :focus-visible {
  outline: var(--brand-borderWidth-thick) solid var(--brand-color-focus) !important;
  outline-offset: var(--base-size-2);
}

.slack-landing-skip-link {
  position: absolute;
  inset-block-start: var(--base-size-8);
  inset-inline-start: var(--base-size-8);
  z-index: 1;
  padding: var(--base-size-8) var(--base-size-12);
  border-radius: var(--brand-borderRadius-medium);
  background-color: var(--brand-color-canvas-default);
  color: var(--brand-color-text-default);
}

.slack-landing-skip-link:not(:focus) {
  transform: translateY(calc(-100% - var(--base-size-32)));
}

.slack-landing-nav {
  display: flex;
  align-items: center;
  gap: var(--base-size-20);
  min-block-size: var(--base-size-64);
  padding-inline: var(--base-size-20);
  border-block-end: var(--brand-borderWidth-thin) solid
    var(--brand-color-border-muted);
}

.slack-landing-nav-logo {
  display: flex;
  flex-shrink: 0;
  color: var(--brand-color-text-default);
}

.slack-landing-nav-title {
  display: flex;
  min-inline-size: 0;
  text-decoration: none;
}

.slack-landing-nav-title > span {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.slack-landing-nav-title:hover span {
  color: var(--brand-color-text-default);
}

.slack-landing-nav-action {
  flex-shrink: 0;
  margin-inline-start: auto;
  white-space: nowrap;
}

/* Below --brand-breakpoint-small, the logo and install button fill the header. */
@media screen and (max-width: 33.99rem) {
  .slack-landing-nav-title {
    display: none;
  }
}

.slack-landing-hero-frame {
  box-sizing: border-box;
  width: 100%;
  max-width: none;
  padding: var(--base-size-48) var(--base-size-20);
  background-image: url("/asset?u=https%3A%2F%2Fslack.github.com%2Fstatic%2Fimg%2Flanding-page%2Fdither.png");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.slack-landing-hero-frame.slack-landing-hero-frame > * {
  inline-size: 100%;
  max-inline-size: none;
}

.slack-landing-hero-image {
  inline-size: 100%;
  max-inline-size: none;
  object-fit: contain;
}

/* Primer squares block-end hero media's bottom corners, but our frame pads the image off the edge. */
.slack-landing-hero-frame.slack-landing-hero-frame
.slack-landing-hero-image.slack-landing-hero-image {
  border-radius: var(--brand-borderRadius-medium);
}

.slack-landing-maintenance {
  padding: var(--base-size-16) var(--base-size-20);
  border-block-end: var(--brand-borderWidth-thin) solid
    var(--brand-color-border-muted);
  text-align: center;
}

.slack-landing-river {
  width: 100%;
  scroll-margin-block-start: var(--base-size-64);
}

.slack-landing-capabilities .slack-landing-capabilities-heading {
  max-width: 100%;
  text-wrap: balance;
}

.slack-landing-page .slack-landing-river-visual {
  padding: 0;
}

.slack-landing-river-frame {
  width: 100%;
  padding: var(--base-size-20);
  background-image: url("/asset?u=https%3A%2F%2Fslack.github.com%2Fstatic%2Fimg%2Flanding-page%2Fdither.png");
  background-position: center;
  background-size: cover;
}

.slack-landing-card-grid {
  border-block: var(--brand-borderWidth-thin) solid
    var(--brand-color-border-muted);
  row-gap: 0;
}

.slack-landing-card-cell {
  padding: var(--base-size-32) var(--base-size-20);
}

.slack-landing-card-cell + .slack-landing-card-cell {
  border-block-start: var(--brand-borderWidth-thin) solid
    var(--brand-color-border-muted);
}

.slack-landing-faq {
  width: 100%;
  max-width: var(--brand-breakpoint-xlarge);
  margin-inline: auto;
  padding-inline: var(--base-size-20);
  box-sizing: border-box;
}

.slack-landing-install {
  margin-block: var(--base-size-80);
}

.slack-landing-cta-logo {
  color: var(--brand-color-text-default);
}

@media screen and (max-width: 63.24rem) {
  .slack-landing-page .slack-landing-capabilities {
    align-items: flex-start;
    text-align: left;
  }
}

@media screen and (min-width: 48rem) {
  .slack-landing-capabilities .slack-landing-capabilities-heading {
    max-width: 32ch;
  }

  .slack-landing-hero-frame {
    padding-block: var(--base-size-80);
  }

  .slack-landing-river-frame {
    padding: var(--base-size-32);
  }
}

@media screen and (min-width: 63.25rem) {
  .slack-landing-capabilities .slack-landing-capabilities-heading {
    max-width: 30ch;
  }

  .slack-landing-card-cell + .slack-landing-card-cell {
    border-block-start: none;
    border-inline-start: var(--brand-borderWidth-thin) solid
      var(--brand-color-border-muted);
  }
}