:root {
  --ergo-red: #bf1629;
  --ergo-red-dark: #9a1020;
  --ergo-ink: #242424;
  --md-primary-fg-color: #bf1629;
  --md-primary-fg-color--light: #d7414f;
  --md-primary-fg-color--dark: #9a1020;
  --md-accent-fg-color: #9a1020;
  --md-typeset-a-color: #bf1629;
}

.md-header { background: var(--ergo-red); }
.md-tabs { background: var(--ergo-ink); }
.md-header__button.md-logo img { height: 1.7rem; width: auto; }
.md-header__title { font-weight: 700; }

.md-typeset h1 { color: var(--ergo-ink); font-weight: 800; }
.md-typeset h2 { font-weight: 750; border-bottom: 2px solid #f0d0d4; padding-bottom: .2em; }
.md-typeset h3 { font-weight: 700; }

.md-typeset .md-button { border-radius: 999px; }
.md-typeset .md-button--primary { background: var(--ergo-red); border-color: var(--ergo-red); }

/* Home: two clear paths */
.paths { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; margin: 1.6rem 0; }
.path {
  display: block; border: 1px solid #e3e3e3; border-top: 6px solid var(--ergo-red);
  border-radius: 10px; padding: 1.2rem 1.3rem; color: inherit !important;
  transition: box-shadow .15s ease, transform .15s ease;
}
.path:hover { box-shadow: 0 8px 24px rgba(0,0,0,.12); transform: translateY(-2px); }
.path .code { display: inline-block; background: var(--ergo-red); color: #fff; font-weight: 800; padding: .1rem .55rem; border-radius: 4px; }
.path .app { font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; color: #6b6b6b; margin-left: .4rem; }
.path h3 { margin: .7rem 0 .35rem !important; }
.path p { margin: 0 0 .5rem; }
.path img { border-radius: 6px; border: 1px solid #e3e3e3; margin-bottom: .6rem; }
.path .go { font-weight: 700; color: var(--ergo-red); }

.cobrand { display: flex; align-items: center; gap: 1.2rem; margin: .4rem 0 1.2rem; }
.cobrand img { height: 34px; width: auto; }
.cobrand span { color: #9a9a9a; font-size: 1.2rem; }

.md-typeset video { width: 100%; border-radius: 8px; background: #111; }
.md-typeset figure img { border: 1px solid #e3e3e3; border-radius: 6px; }
.md-typeset figure.narrow img { max-height: 460px; width: auto; }

@media screen and (max-width: 44.9375em) {
  .paths { grid-template-columns: 1fr; }
}