/* Palette: near-black header, blue accent; the logo is monochrome so the site sets the tone. */
[data-md-color-primary="custom"] {
  --md-primary-fg-color: #111827;
  --md-primary-fg-color--light: #374151;
  --md-primary-fg-color--dark: #0b1220;
  --md-primary-bg-color: #ffffff;
  --md-primary-bg-color--light: rgba(255, 255, 255, .7);
}
[data-md-color-accent="custom"] {
  --md-accent-fg-color: #2563eb;
  --md-accent-fg-color--transparent: rgba(37, 99, 235, .1);
  --md-accent-bg-color: #ffffff;
  --md-accent-bg-color--light: rgba(255, 255, 255, .7);
}
[data-md-color-scheme="default"] {
  --md-typeset-a-color: #1d4ed8;
}
[data-md-color-scheme="slate"][data-md-color-primary="custom"] {
  --md-primary-fg-color: #0b1220;
  --md-primary-fg-color--light: #1f2937;
  --md-primary-fg-color--dark: #050a14;
  --md-default-bg-color: #0f1317;
  --md-code-bg-color: #161c22;
}
[data-md-color-scheme="slate"][data-md-color-accent="custom"] {
  --md-accent-fg-color: #60a5fa;
  --md-accent-fg-color--transparent: rgba(96, 165, 250, .12);
}
[data-md-color-scheme="slate"] {
  --md-typeset-a-color: #7ab4ff;
}
.md-header { box-shadow: none; border-bottom: 1px solid rgba(255, 255, 255, .08); }
.md-header__button.md-logo img { height: 1.5rem; width: auto; }
.md-header__topic:first-child { font-weight: 600; }
.md-typeset h1 { font-weight: 600; letter-spacing: -.01em; color: var(--md-default-fg-color); }
.md-typeset h2 { font-weight: 600; }
.md-typeset .eyebrow {
  font-family: var(--md-code-font-family); font-size: .66rem; letter-spacing: .07em;
  text-transform: uppercase; color: var(--md-default-fg-color--light); margin: 0 0 .4rem;
}
.md-typeset .lead { font-size: .9rem; max-width: 40rem; }
.md-typeset .grid.cards > ul > li { border-radius: .5rem; transition: border-color .15s; }
.md-typeset .grid.cards > ul > li:hover { border-color: var(--md-accent-fg-color); }
.md-typeset table:not([class]) th { font-weight: 600; }
.md-footer-meta { font-size: .66rem; }

/* Landing page */
.md-typeset .hero { padding: 1.5rem 0 1rem; }
.md-typeset .hero h1 { font-size: clamp(1.8rem, 3.6vw, 2.6rem); line-height: 1.15; margin: 0 0 .9rem; max-width: 24ch; text-wrap: balance; }
.md-typeset .hero .lead { font-size: .95rem; max-width: 46rem; margin-bottom: 1.2rem; }
.md-typeset .hero .actions { display: flex; flex-wrap: wrap; gap: .6rem; margin: 0 0 1.6rem; }
.md-typeset .hero .actions .md-button { margin: 0; }
.md-typeset .md-button--primary { background-color: var(--md-accent-fg-color); border-color: var(--md-accent-fg-color); color: #fff; }
.md-typeset .md-button--primary:hover { background-color: var(--md-accent-fg-color); filter: brightness(1.1); }
.md-typeset .benefits { margin-bottom: 1.5rem; }
.md-typeset .grid.cards.benefits > ul > li { padding: 1rem 1.1rem; }
.md-typeset .review { background: var(--md-code-bg-color); border: 1px solid var(--md-default-fg-color--lightest); border-radius: .6rem; padding: .4rem 1.4rem 1rem; margin: 2rem 0; }
.md-typeset .review h2 { margin-top: .9rem; }
.md-typeset .review p { max-width: 46rem; }
@media (max-width: 44.9em) { .md-typeset .hero { padding-top: .5rem; } }