:root {
  --md-primary-fg-color: #6558e8;
  --md-primary-fg-color--light: #857bf0;
  --md-primary-fg-color--dark: #4b3ec8;
  --md-accent-fg-color: #16aaa5;
}

.md-header {
  background: linear-gradient(100deg, #312e81 0%, #6558e8 52%, #0f9f9a 100%);
}

.hero {
  padding: 2.25rem 2rem;
  margin: 0 0 1.5rem;
  border-radius: 1.15rem;
  color: #fff;
  background:
    radial-gradient(circle at 86% 18%, rgba(255,255,255,.22), transparent 24%),
    linear-gradient(135deg, #252161 0%, #6558e8 55%, #0b8c88 100%);
  box-shadow: 0 18px 50px rgba(62, 55, 150, .22);
}

.hero h1 { color: #fff; margin: 0 0 .55rem; font-weight: 760; }
.hero p { max-width: 44rem; font-size: 1.05rem; opacity: .94; }
.hero .md-button { margin: .35rem .45rem 0 0; }
.hero .md-button--primary { background: #fff; border-color: #fff; color: #34307e; }
.hero .md-button:not(.md-button--primary) { border-color: rgba(255,255,255,.75); color: #fff; }
.hero .md-button:not(.md-button--primary):hover { background: rgba(255,255,255,.12); border-color: #fff; }

.cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .9rem; margin: 1.2rem 0; }
.card { border: 1px solid var(--md-default-fg-color--lightest); border-radius: .8rem; padding: 1rem; background: var(--md-default-bg-color); }
.card strong { display: block; margin-bottom: .3rem; }

.endpoint { display: flex; gap: .65rem; align-items: center; padding: .75rem .85rem; border-radius: .6rem; background: var(--md-code-bg-color); margin: .6rem 0; overflow-x: auto; }
.method { font: 700 .72rem/1 ui-monospace, SFMono-Regular, Menlo, monospace; padding: .3rem .45rem; border-radius: .35rem; color: #fff; }
.method.post { background: #0d9488; }
.method.get { background: #2563eb; }
.endpoint code { white-space: nowrap; }

.price-table td:nth-child(n+2), .price-table th:nth-child(n+2) { text-align: right; }
.muted { color: var(--md-default-fg-color--light); font-size: .85rem; }

@media (max-width: 760px) {
  .hero { padding: 1.4rem 1.1rem; }
  .cards { grid-template-columns: 1fr; }
}