/* Per-app feature sections: marketplace, Preener (dark band) and the keyboard (teal band). */
.app-section {
  padding-block: var(--space-9);
}

.app-grid {
  display: grid;
  gap: var(--space-7);
  align-items: center;
}

.app-copy {
  display: grid;
  gap: var(--space-5);
  justify-items: start;
}

.app-label {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0.375rem 0.875rem 0.375rem 0.5rem;
  border-radius: var(--radius-pill);
  border: 1px solid var(--color-line);
  font-size: 0.875rem;
  font-weight: 700;
  justify-self: start;
}

.app-label img {
  width: auto;
  height: 1.25rem;
}

.app-label-dark {
  border-color: var(--color-night-line);
  color: var(--color-on-dark);
}

.check-list {
  display: grid;
  gap: var(--space-3);
}

.check-list li {
  display: flex;
  gap: var(--space-3);
  color: var(--color-ink-soft);
}

.check-list li::before {
  content: "";
  flex: none;
  width: 1.25rem;
  height: 1.25rem;
  margin-top: 0.2rem;
  border-radius: 50%;
  background: var(--color-teal-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23007b82' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center / 0.75rem no-repeat;
}

.check-list-dark li {
  color: var(--color-on-dark-soft);
}

.check-list-dark li::before {
  background: var(--color-on-dark) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23005f66' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center / 0.75rem no-repeat;
}

.stage-web {
  padding: var(--space-6) var(--space-4) var(--space-8);
}

.stage-web .browser {
  width: 100%;
}

.phone-float {
  position: absolute;
  right: var(--space-4);
  bottom: var(--space-5);
  width: min(9.5rem, 30%);
  padding: 0.3rem;
  border-radius: 1.6rem;
}

.phone-float img {
  border-radius: 1.3rem;
}

.night {
  padding-block: var(--space-9);
  background: var(--color-night);
  color: var(--color-on-dark);
}

.night-head {
  display: grid;
  gap: var(--space-5);
  margin-bottom: var(--space-7);
}

.night-head .section-head {
  margin-bottom: 0;
}

.night .lede,
.keyboard-band .lede {
  color: var(--color-on-dark-soft);
}

.tile-grid {
  display: grid;
  gap: var(--space-5);
}

.tile {
  display: grid;
  gap: var(--space-3);
  align-content: start;
}

.tile p {
  color: var(--color-on-dark-soft);
  font-size: 0.9375rem;
}

.tile-media {
  position: relative;
  display: flex;
  justify-content: center;
  height: 20rem;
  margin-bottom: var(--space-3);
  overflow: hidden;
  border-radius: var(--radius-card);
}

.tile-media .phone {
  margin-top: var(--space-6);
}

.tile-browser {
  position: absolute;
  top: var(--space-6);
  left: var(--space-5);
  width: 135%;
  max-width: none;
}

.fact-strip {
  display: grid;
  gap: var(--space-3);
  margin-top: var(--space-7);
  padding-top: var(--space-5);
  border-top: 1px solid var(--color-night-line);
  color: var(--color-on-dark-soft);
  font-size: 0.9375rem;
}

.fact-strip li::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-right: var(--space-3);
  border-radius: 50%;
  background: var(--color-teal);
  vertical-align: middle;
}

.keyboard-band {
  position: relative;
  padding-block: var(--space-9);
  background: var(--color-teal-deep);
  color: var(--color-on-dark);
}

.keyboard-band .arrow-link {
  color: var(--color-on-dark);
}

.keyboard-stack {
  display: grid;
  gap: var(--space-4);
}

.night .arrow-link {
  color: var(--color-on-dark);
}

@media (min-width: 40rem) {
  .fact-strip {
    grid-template-columns: repeat(2, 1fr);
  }

  .keyboard-stack {
    grid-template-columns: repeat(2, 1fr);
    align-items: start;
  }

  .keyboard-stack .keyboard-card:last-child {
    margin-top: var(--space-8);
  }
}

@media (min-width: 56rem) {
  .app-grid {
    grid-template-columns: 0.9fr 1.1fr;
    gap: var(--space-8);
  }

  .night-head {
    grid-template-columns: 1.4fr 1fr;
    align-items: end;
  }

  .night-head .button-row {
    justify-content: flex-end;
  }

  .tile-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .fact-strip {
    grid-template-columns: repeat(4, 1fr);
  }
}