/* Esntl identity on the DeepBook layout. Tokens and chrome only. */
:root {
  --_colors---primitives--blue: #1E88E5;
  --esntl-blue: #1E88E5;
  --esntl-blue-deep: #1565c0;
}

.navbar-logo {
  display: flex;
  align-items: center;
  max-width: none;
  width: auto;
}

.esntl-logo-lockup {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  max-width: 100%;
  min-width: 0;
}

.esntl-logo {
  display: block;
  width: 1.45em;
  height: 1.45em;
  flex-shrink: 0;
  object-fit: contain;
}

.esntl-logo-wordmark {
  color: #eff0f1;
  font-size: 1.05em;
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1;
  white-space: nowrap;
}

.esntl-footer-mark {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
  /* Blue mark on the blue footer. Keep the shape, paint it white. */
  filter: brightness(0) invert(1);
}

@media screen and (max-width: 479px) {
  .navbar-logo {
    max-width: 11.5em;
  }

  .esntl-logo-wordmark {
    font-size: 0.95em;
  }
}

/* Apply form. Scoped so the rest of the layout stays as-is. */
.esntl-apply-page .legal-hero {
  padding-bottom: 8em;
}

.esntl-apply-page .legal-hero_layout {
  align-items: center;
  width: 100%;
  text-align: center;
}

.esntl-apply-page .legal-hero_layout .h1-64px,
.esntl-apply-page .mw-520 {
  width: 100%;
}

.esntl-apply-page .mw-520 {
  margin-inline: auto;
}

.esntl-apply,
.esntl-apply-success {
  width: 100%;
  max-width: 40rem;
  margin-inline: auto;
}

.esntl-apply {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  color-scheme: dark;
  text-align: left;
}

.esntl-apply-success {
  text-align: center;
}

.esntl-apply__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
}

.esntl-apply label {
  display: block;
  margin-bottom: 0.45rem;
  color: #eff0f1;
  font-size: 0.875rem;
  line-height: 1.4;
}

.esntl-apply input,
.esntl-apply select,
.esntl-apply textarea {
  width: 100%;
  box-sizing: border-box;
  background: rgba(255, 255, 255, 0.06);
  color: #eff0f1;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 4px;
  padding: 0.85em 1em;
  font: inherit;
}

.esntl-apply textarea {
  min-height: 8rem;
  resize: vertical;
}

.esntl-apply input::placeholder,
.esntl-apply textarea::placeholder {
  color: rgba(239, 240, 241, 0.45);
}

.esntl-apply input:focus,
.esntl-apply select:focus,
.esntl-apply textarea:focus {
  outline: 2px solid #1e88e5;
  border-color: #1e88e5;
}

.esntl-apply button.cta-button {
  border: 0;
  width: fit-content;
  cursor: pointer;
}

.esntl-apply button.cta-button:disabled {
  opacity: 0.7;
  cursor: wait;
}

.esntl-apply__note,
.esntl-apply__status {
  margin: 0;
  max-width: 42ch;
  color: rgba(239, 240, 241, 0.72);
  font-size: 0.875rem;
  line-height: 1.5;
}

.esntl-apply-success h2 {
  margin: 0 0 0.75rem;
  color: #eff0f1;
  font-size: 2.5rem;
  line-height: 1.1;
  font-weight: 500;
}

.esntl-apply-success p {
  margin: 0;
  max-width: 42ch;
  color: rgba(239, 240, 241, 0.8);
}

@media screen and (max-width: 640px) {
  .esntl-apply__row {
    grid-template-columns: 1fr;
  }

  .esntl-apply button.cta-button {
    width: 100%;
  }
}

/* Header nav labels. The word animation was squeezing the spaces out of these links. */
.navbar-menu a.navbar_link-block > [global="textStagger"],
a.hamburger_link-block > [global="textStagger"] {
  display: inline-flex;
  align-items: baseline;
  gap: 0.32em;
  white-space: nowrap;
}

/* What We Build hero CTAs. The long label was wrapping beside a one-line button, and the word animation was dropping the space in "Start Here". */
.th-hero_desc-wrapper .cta-button {
  width: auto;
  flex: 0 0 auto;
  white-space: nowrap;
}

/* Category chips were written as phrases. They sit in a one-line filter, so keep each label on one line and let the row scroll. */
.th-platforms_filters-list .collection-item {
  flex: 0 0 auto;
}

.th-platforms_button,
.th-platforms_button-text {
  white-space: nowrap;
}