.public-modes-section {
  background: var(--public-dark);
  color: var(--public-dark-text);
}

.public-section-copy-light p {
  color: var(--public-dark-soft);
}

.mode-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 58px;
}

.mode-card {
  padding: 24px;
  border: 1px solid var(--public-dark-border);
  border-radius: var(--public-radius-lg);
  background: var(--public-dark-surface);
}

.mode-card-featured {
  border-color: #3766a1;
  background: #10233a;
}

.mode-card-top {
  display: flex;
  justify-content: space-between;
  margin-bottom: 17px;
}

.mode-card-top span {
  font-size: 13px;
  font-weight: 700;
}

.mode-card-top i {
  color: #6e849c;
  font-size: 10px;
  font-style: normal;
}

.mode-mini-nav {
  display: flex;
  gap: 5px;
  margin-bottom: 7px;
}

.mode-mini-nav span {
  padding: 5px 7px;
  border: 1px solid var(--public-dark-border);
  border-radius: 5px;
  color: #71879f;
  font-size: 6px;
}

.mode-mini-nav .is-active {
  border-color: #386fb6;
  color: #dbe9ff;
}

.mode-table-preview {
  display: grid;
  gap: 4px;
}

.mode-table-preview div {
  display: grid;
  grid-template-columns:
    1.4fr
    0.7fr
    0.8fr;
  min-height: 27px;
  align-items: center;
  border: 1px solid var(--public-dark-border);
  background: #09192b;
}

.mode-table-preview span {
  height: 5px;
  margin: 0 7px;
  border-radius: 4px;
  background: #243b56;
}

.mode-table-preview .is-active {
  background: #16345f;
}

.mode-table-preview .is-active span {
  background: #789dcb;
}

.mode-prospect-preview {
  display: grid;
  grid-template-columns:
    0.65fr
    1.4fr
    0.75fr;
  height: 124px;
  border: 1px solid var(--public-dark-border);
}

.mode-prospect-preview aside {
  padding: 7px;
  background: #0b192a;
}

.mode-prospect-preview aside span {
  display: block;
  height: 7px;
  margin-bottom: 7px;
  border-radius: 3px;
  background: #233a54;
}

.mode-prospect-preview > div {
  display: grid;
  align-content: start;
  border-inline: 1px solid var(--public-dark-border);
}

.mode-prospect-preview > div span {
  height: 32px;
  border-bottom: 1px solid var(--public-dark-border);
}

.mode-prospect-preview > div .is-active {
  background: #16345f;
}

.mode-kanban-preview {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  min-height: 124px;
  gap: 5px;
}

.mode-kanban-preview > div {
  padding: 7px;
  border: 1px solid var(--public-dark-border);
  background: #09192b;
}

.mode-kanban-preview small {
  color: #71879f;
  font-size: 7px;
}

.mode-kanban-preview span {
  display: block;
  height: 28px;
  margin-top: 6px;
  border: 1px solid var(--public-dark-border);
  border-radius: 5px;
  background: #10233a;
}

.mode-kanban-preview .is-active {
  border-color: #386fb6;
  background: #16345f;
}

.mode-card > strong {
  display: block;
  margin-top: 23px;
  font-size: 17px;
}

.mode-card > p {
  margin: 8px 0 0;
  color: var(--public-dark-soft);
  font-size: 12px;
  line-height: 1.55;
}