.package-grid.auto-mode {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.toggle button:focus-visible {
  outline: 3px solid #9e6b21;
  outline-offset: 4px;
}

.bundle-options {
  padding: 16px;
  border: 1px solid #e3d9c5;
  border-radius: 10px;
  background: #fcf8ef;
  margin-top: 18px;
}

.bundle-options p {
  margin: 0 0 10px;
  font-size: .78rem;
  color: #70594a;
}

.bundle-options > div {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 12px;
  padding: 7px 0;
  font-size: .88rem;
}

.bundle-options span {
  margin-right: auto;
  font-weight: 700;
}

.bundle-options del {
  color: #786e64;
  font-size: .8rem;
}

.bundle-options strong {
  color: #541712;
}

.partner-steps {
  background: #fffaf0;
}

.joining-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
  list-style: none;
  padding: 0;
  counter-reset: joining;
}

.joining-grid li {
  counter-increment: joining;
  border-top: 1px solid #d9b97b;
  padding-top: 20px;
}

.joining-grid li::before {
  content: counter(joining, decimal-leading-zero);
  display: block;
  color: #95631d;
  font-size: 1.8rem;
  margin-bottom: 14px;
}

.joining-grid h3 {
  font-size: 1.05rem;
  margin-bottom: 10px;
}

.joining-grid p, .partner-requirements p {
  font-size: .9rem;
  line-height: 1.8;
}

.partner-requirements {
  padding: 24px;
  margin-top: 32px;
  border-radius: 12px;
  background: #541712;
  color: #fff7e3;
}

.partner-requirements h3 {
  color: #edc879;
  margin-bottom: 10px;
}

.partner-requirements p {
  margin: 0;
}

@media (max-width: 1000px) {
  .joining-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 800px) {
  .package-grid.auto-mode {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 480px) {
  .joining-grid {
    grid-template-columns: 1fr;
    gap: 18px;
  }
}