:root {
  --sim2bot-brand: #5b8aea;
  --sim2bot-brand-soft: rgba(91, 138, 234, 0.12);
}

[data-md-color-scheme="default"] {
  --md-primary-fg-color: #5b8aea;
  --md-accent-fg-color: #4778d7;
}

[data-md-color-scheme="slate"] {
  --md-primary-fg-color: #5b8aea;
  --md-accent-fg-color: #7ba2f3;
}

.sim2bot-hero {
  margin: 1.2rem 0 2rem;
  padding: clamp(1.5rem, 4vw, 3rem);
  border: 1px solid color-mix(in srgb, var(--sim2bot-brand) 32%, transparent);
  border-radius: 1rem;
  background:
    radial-gradient(circle at 88% 12%, rgba(91, 138, 234, 0.24), transparent 35%),
    linear-gradient(145deg, var(--sim2bot-brand-soft), transparent 66%);
}

.sim2bot-hero h1 {
  margin: 0 0 0.65rem;
  font-size: clamp(2rem, 5vw, 3.4rem);
  line-height: 1.05;
  letter-spacing: -0.035em;
}

.sim2bot-hero p {
  max-width: 48rem;
  font-size: 1.05rem;
}

.sim2bot-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
  margin-top: 1.2rem;
}

.sim2bot-actions .md-button {
  margin: 0;
}

.grid.cards > ul > li {
  transition: border-color 120ms ease, transform 120ms ease, box-shadow 120ms ease;
}

.grid.cards > ul > li:hover {
  border-color: var(--sim2bot-brand);
  transform: translateY(-2px);
  box-shadow: 0 0.45rem 1.3rem rgba(21, 31, 48, 0.09);
}

.audience-paths td:first-child {
  white-space: nowrap;
  font-weight: 700;
}

@media (max-width: 600px) {
  .audience-paths td:first-child {
    white-space: normal;
  }
}