html[data-color-mode] .hero-grid {
  grid-template-columns: minmax(0, 1fr);
}

.hero-entry-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.hero-entry-actions .hero-early-access-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 52px;
  padding: 13px 20px;
  border: 1px solid #8cb6b8;
  border-radius: 4px;
  color: #e8eeee;
  background: rgba(5, 20, 26, .8);
  font-weight: 600;
  text-decoration: none;
}

.hero-early-access-button:hover {
  background: #153238;
  border-color: #b4dedc;
}

.hero-entry-actions :is(a, button):focus-visible {
  outline: 3px solid #91e1db;
  outline-offset: 3px;
}

.hero-entry-actions svg { flex: 0 0 19px; }
.hero-threshold-key--one { left: auto; right: 31%; top: 8%; }
.hero-threshold-key--two { right: 3%; top: 32%; }
.hero-threshold-key--three { left: auto; right: 17%; bottom: 7%; }
.website-app-dock { width: min(460px, calc(100% - 24px)); }
.website-app-dock a { min-width: 0; text-align: center; }

@media (max-width: 900px) {
  .hero-threshold-key--one { right: 13%; }
  .hero-threshold-key--two { right: 2%; top: 63%; }
  .hero-threshold-key--three { display: none; }
}

@media (max-width: 680px) {
  .hero-entry-actions { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .hero-entry-actions :is(.hero-preview-button, .hero-early-access-button) {
    min-height: 48px;
    padding: 12px 16px;
  }
  .hero-threshold-key--one { top: auto; bottom: 0; right: 3%; opacity: .3; }
  .hero-threshold-key--two { display: none; }
}

@media (max-height: 500px) and (orientation: landscape) {
  html[data-color-mode] .hero .hero-copy { max-width: 600px; }
  .hero-entry-actions { display: flex; }
  .hero-entry-actions :is(.hero-preview-button, .hero-early-access-button) {
    min-height: 44px;
    padding: 9px 13px;
    font-size: .8rem;
  }
  .hero-threshold-key--one { top: 16%; right: 10%; opacity: .6; }
  .hero-threshold-key--two { top: 55%; right: 3%; }
}

@media (forced-colors: active) {
  .hero-entry-actions .hero-early-access-button { border: 2px solid ButtonText; }
}