.context-help {
  margin-top: 34px;
  padding-top: 22px;
  border-top: 1px solid #e1e1e5;
}

.context-help-panel {
  padding: 20px;
  border: 1px solid #e1e1e6;
  border-radius: 20px;
  background: linear-gradient(180deg, #ffffff 0%, #fafafa 100%);
  box-shadow: 0 8px 28px rgba(0, 0, 0, .035);
}

.context-help-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
}

.context-help-heading-copy h2 {
  margin: 4px 0 0;
  color: #26262a;
  font-size: 1rem;
  font-weight: 800;
}

.context-help-kicker {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #85858c;
  font-size: .7rem;
  font-weight: 800;
  letter-spacing: .055em;
  text-transform: uppercase;
}

.context-help-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 10px;
}

.context-help-card {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 11px;
  min-height: 118px;
  padding: 13px;
  border: 1px solid #ececef;
  border-radius: 15px;
  background: #fff;
}

.context-help-icon {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 13px;
  background: #f0f0f2;
  color: #55555b;
  font-size: .95rem;
}

.context-help-copy strong {
  display: block;
  margin-top: 1px;
  color: #2d2d31;
  font-size: .82rem;
  line-height: 1.25;
}

.context-help-copy p {
  margin-top: 5px;
  color: #707077;
  font-size: .75rem;
  line-height: 1.48;
}

.help-accent-blue .context-help-icon { background: #eaf2fd; color: #2f66ad; }
.help-accent-green .context-help-icon { background: #e9f7ee; color: #287548; }
.help-accent-violet .context-help-icon { background: #f0ebfb; color: #6950a5; }
.help-accent-orange .context-help-icon { background: #fff1df; color: #b76816; }
.help-accent-red .context-help-icon { background: #fff0ef; color: #b44545; }
.help-accent-gray .context-help-icon { background: #ececee; color: #55555b; }

.context-help-restore {
  display: flex;
  justify-content: flex-start;
}

.context-help.is-help-hidden {
  padding-top: 12px;
}

.context-help.is-help-hidden .context-help-panel {
  display: none;
}

.context-help.is-help-hidden .context-help-restore {
  display: flex !important;
}

@media (max-width: 700px) {
  .context-help-panel { padding: 15px; }
  .context-help-heading { align-items: flex-start; flex-direction: column; }
  .context-help-grid { grid-template-columns: 1fr; }
  .context-help-card { min-height: 0; }
}