:root {
  --bdq-card-border: color-mix(in srgb, var(--md-primary-fg-color) 28%, transparent);
}

.md-grid {
  max-width: 78rem;
}

.bdq-hero {
  padding: 1.5rem 0 0.5rem;
}

.bdq-hero > p:first-of-type {
  max-width: 46rem;
  font-size: 1.1rem;
}

.grid.cards > ul > li {
  border-color: var(--bdq-card-border);
}

.bdq-checkpoint {
  border-left: 0.2rem solid var(--md-accent-fg-color);
  padding-left: 1rem;
}

.bdq-feedback {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.25rem;
  margin-top: 3rem;
  padding-top: 1rem;
  border-top: 0.05rem solid var(--md-default-fg-color--lightest);
  font-size: 0.75rem;
}

.bdq-feedback a:focus-visible,
.md-typeset a:focus-visible,
.md-header a:focus-visible,
.md-tabs a:focus-visible {
  outline: 0.15rem solid var(--md-accent-fg-color);
  outline-offset: 0.15rem;
  border-radius: 0.1rem;
}

.md-typeset table:not([class]) th {
  min-width: 7rem;
}

@media screen and (max-width: 44.984375em) {
  .bdq-hero {
    padding-top: 0.5rem;
  }
}