/* Final public homepage refinement */
.section {
  padding-top: clamp(82px, 9vw, 125px);
  padding-bottom: clamp(82px, 9vw, 125px);
}

.status-bar > span {
  color: #d8a846;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.journey-heading > p:last-child,
.player-services .section-heading > p:last-child {
  max-width: 650px;
}

.journey-grid article,
.feature-card {
  min-height: 260px;
}

.development-pill {
  color: #dcb34e;
  background: rgba(216, 168, 70, .08);
  border-color: #64502b;
}

.player-services {
  display: grid;
  grid-template-columns: minmax(260px, .72fr) minmax(0, 1.28fr);
  gap: clamp(45px, 7vw, 105px);
  align-items: start;
  background: linear-gradient(145deg, #100b0e, #080607);
  border-top: 1px solid #2e2226;
  border-bottom: 1px solid #2e2226;
}

.service-grid {
  display: grid;
  gap: 12px;
}

.service-grid > a {
  position: relative;
  display: grid;
  grid-template-columns: minmax(160px, .55fr) minmax(0, 1fr) auto;
  grid-template-rows: auto auto;
  gap: 8px 24px;
  align-items: center;
  padding: 25px 27px;
  color: inherit;
  text-decoration: none;
  background: rgba(8, 6, 7, .72);
  border: 1px solid #36292c;
  transition: border-color .18s ease, background .18s ease, transform .18s ease;
}

.service-grid > a:hover,
.service-grid > a:focus-visible {
  transform: translateX(4px);
  background: #120d0f;
  border-color: #765333;
  outline: none;
}

.service-grid small {
  grid-column: 1;
  grid-row: 1;
  color: #bd8d36;
  font-size: 8px;
  font-weight: 900;
  letter-spacing: .18em;
}

.service-grid h3 {
  grid-column: 1;
  grid-row: 2;
  margin: 0;
  color: #ece3dc;
  font: 400 20px/1.25 Georgia, serif;
}

.service-grid p {
  grid-column: 2;
  grid-row: 1 / span 2;
  margin: 0;
  color: #8d8386;
  font-size: 12px;
  line-height: 1.65;
}

.service-grid > a > span {
  grid-column: 3;
  grid-row: 1 / span 2;
  color: #dcb34e;
  font-size: 10px;
  font-weight: 800;
  white-space: nowrap;
}

@media (max-width: 1000px) {
  .player-services { grid-template-columns: 1fr; }
}

@media (max-width: 700px) {
  .service-grid > a {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
  }
  .service-grid small,
  .service-grid h3,
  .service-grid p,
  .service-grid > a > span {
    grid-column: 1;
    grid-row: auto;
  }
  .service-grid > a > span { margin-top: 7px; }
}