.usage-intro {
  min-height: 560px;
}

.usage-flow li:nth-child(1) { border-left-color: #61d6ee; }
.usage-flow li:nth-child(2) { border-left-color: #ec9b5d; }
.usage-flow li:nth-child(3) { border-left-color: #84c590; }
.usage-flow li:nth-child(4) { border-left-color: #e48cad; }

.usage-index {
  width: min(1180px, calc(100% - 40px));
  margin: -28px auto 42px;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  border: 1px solid #3c474a;
  border-radius: 6px;
  overflow: hidden;
  background: #101516;
}

.usage-index a {
  min-height: 66px;
  padding: 10px 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border-right: 1px solid #3c474a;
  color: #dce4e6;
  font-size: 12px;
  font-weight: 850;
  text-decoration: none;
}

.usage-index a:last-child { border-right: 0; }
.usage-index a:hover { background: #17313a; color: #bceefb; }
.usage-index span { color: #70d9ed; font-size: 9px; }

.usage-action-grid {
  margin-top: 22px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border: 1px solid #3d474a;
  border-radius: 6px;
  overflow: hidden;
}

.usage-action-grid article {
  min-height: 180px;
  padding: 22px;
  display: grid;
  align-content: start;
  gap: 10px;
  border-right: 1px solid #3d474a;
  background: #111718;
}

.usage-action-grid article:last-child { border-right: 0; }
.usage-action-grid span { color: #7ddbef; font-size: 9px; font-weight: 900; }
.usage-action-grid strong { color: #edf3f4; font-size: 16px; }
.usage-action-grid p { margin: 0; color: #aab5b8; font-size: 12px; line-height: 1.8; }

.shift-guide-preview small {
  display: block;
  margin-top: 12px;
  color: #829095;
  font-size: 9px;
}

@media (max-width: 820px) {
  .usage-index {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .usage-index a:nth-child(3) { border-right: 0; }
  .usage-index a:nth-child(-n + 3) { border-bottom: 1px solid #3c474a; }

  .usage-action-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .usage-action-grid article {
    min-height: 0;
    border-right: 0;
    border-bottom: 1px solid #3d474a;
  }

  .usage-action-grid article:last-child { border-bottom: 0; }
}

@media (max-width: 540px) {
  .usage-index {
    width: calc(100% - 24px);
    margin-top: -18px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .usage-index a,
  .usage-index a:nth-child(3) {
    min-height: 56px;
    border-right: 1px solid #3c474a;
    border-bottom: 1px solid #3c474a;
    font-size: 10px;
  }

  .usage-index a:nth-child(2n) { border-right: 0; }
  .usage-index a:nth-last-child(-n + 2) { border-bottom: 0; }
}