:root {
  --etp-blue: #0878ff;
  --etp-cyan: #20c7f4;
  --etp-ink: #20242e;
  --etp-muted: #667085;
  --etp-line: #dbe7f5;
  --md-primary-fg-color: #0878ff;
  --md-primary-fg-color--light: #48a4ff;
  --md-primary-fg-color--dark: #075ac2;
  --md-accent-fg-color: #0878ff;
}

.md-header {
  background: linear-gradient(110deg, #075ac2 0%, #0878ff 52%, #20bce8 100%);
  box-shadow: 0 1px 0 rgb(255 255 255 / 14%);
}

.md-header__button.md-logo img,
.md-header__button.md-logo svg {
  height: 1.8rem;
  width: 1.8rem;
}

.md-tabs {
  background: #075ac2;
}

.md-search__form {
  border: 1px solid rgb(255 255 255 / 20%);
  border-radius: 0.55rem;
  background: rgb(255 255 255 / 15%);
}

.md-typeset h1,
.md-typeset h2,
.md-typeset h3 {
  color: var(--etp-ink);
  font-weight: 720;
  letter-spacing: -0.025em;
}

[data-md-color-scheme="slate"] .md-typeset h1,
[data-md-color-scheme="slate"] .md-typeset h2,
[data-md-color-scheme="slate"] .md-typeset h3 {
  color: #f7f9fc;
}

.portal-hero {
  position: relative;
  overflow: hidden;
  padding: clamp(1.5rem, 4vw, 3.2rem);
  margin: 0 0 2rem;
  border: 1px solid color-mix(in srgb, var(--etp-blue) 25%, transparent);
  border-radius: 1.1rem;
  background:
    radial-gradient(circle at 86% 18%, rgb(32 199 244 / 30%), transparent 28%),
    linear-gradient(135deg, rgb(8 120 255 / 12%), transparent 58%),
    linear-gradient(90deg, rgb(255 255 255 / 92%), rgb(247 252 255 / 96%));
  box-shadow: 0 24px 70px rgb(24 98 181 / 11%);
}

.portal-hero::after {
  position: absolute;
  right: -3rem;
  bottom: -5.5rem;
  width: 15rem;
  height: 15rem;
  border: 2.3rem solid rgb(8 120 255 / 7%);
  border-radius: 50%;
  content: "";
  pointer-events: none;
}

.portal-hero--merchant {
  background:
    radial-gradient(circle at 86% 18%, rgb(87 111 255 / 25%), transparent 28%),
    linear-gradient(135deg, rgb(8 120 255 / 12%), transparent 58%),
    linear-gradient(90deg, rgb(255 255 255 / 92%), rgb(248 249 255 / 96%));
}

[data-md-color-scheme="slate"] .portal-hero,
[data-md-color-scheme="slate"] .portal-hero--merchant {
  background:
    radial-gradient(circle at 86% 18%, rgb(32 199 244 / 22%), transparent 28%),
    linear-gradient(135deg, rgb(8 120 255 / 20%), transparent 58%),
    #171b24;
}

.portal-hero h1 {
  max-width: 15ch;
  margin: 0.7rem 0 0.8rem;
  font-size: clamp(2rem, 5vw, 3.6rem);
  line-height: 1.02;
}

.portal-hero > p:not(:last-child) {
  max-width: 47rem;
  color: var(--etp-muted);
  font-size: 1.05rem;
}

[data-md-color-scheme="slate"] .portal-hero > p:not(:last-child) {
  color: #b8c2d3;
}

.contract-badge {
  display: inline-flex;
  align-items: center;
  min-height: 1.65rem;
  padding: 0.25rem 0.62rem;
  border-radius: 999px;
  font-size: 0.69rem;
  font-weight: 800;
  letter-spacing: 0.06em;
}

.contract-badge--live {
  color: #08734f;
  background: #e5f8ef;
}

.contract-badge--draft {
  color: #075ac2;
  background: #e7f2ff;
}

.contract-badge--neutral {
  color: #475467;
  background: #eef2f6;
}

.md-typeset .grid.cards > ul > li {
  border-color: var(--etp-line);
  border-radius: 0.85rem;
  box-shadow: 0 10px 30px rgb(31 92 156 / 6%);
  transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.md-typeset .grid.cards > ul > li:hover {
  border-color: color-mix(in srgb, var(--etp-blue) 55%, transparent);
  box-shadow: 0 16px 38px rgb(31 92 156 / 12%);
  transform: translateY(-2px);
}

.md-typeset .md-button {
  border-radius: 0.55rem;
}

.md-typeset .md-button--primary {
  border-color: var(--etp-blue);
  background: linear-gradient(115deg, #0878ff, #0a66de);
}

.md-typeset code {
  border-radius: 0.3rem;
}

.md-typeset pre > code {
  border-radius: 0.65rem;
}

.md-typeset table:not([class]) {
  display: table;
  width: 100%;
}

.md-typeset .mermaid {
  overflow-x: auto;
  padding: 1rem;
  border: 1px solid var(--etp-line);
  border-radius: 0.75rem;
  background: rgb(247 251 255 / 55%);
  text-align: center;
}

.md-typeset .mermaid svg {
  height: auto;
  max-width: 100%;
}

[data-md-color-scheme="slate"] .md-typeset .mermaid {
  border-color: #303b4d;
  background: rgb(20 25 34 / 70%);
}

@media screen and (max-width: 44.984375em) {
  .portal-hero {
    padding: 1.25rem;
    border-radius: 0.8rem;
  }

  .portal-hero h1 {
    font-size: 2.15rem;
  }

  .portal-hero .md-button {
    display: block;
    margin: 0.55rem 0 0;
    text-align: center;
  }

  .md-typeset table:not([class]) {
    display: block;
  }
}

@media (prefers-reduced-motion: reduce) {
  .md-typeset .grid.cards > ul > li {
    transition: none;
  }
}