/* =============================
   Fullpage (Scalar/Redoc) pages
   ============================= */
/* Hide the sidebar only where it actually is a docked column. The old
   pair of rules hid it at every width and then put it back under
   @media (max-width: 900px) with !important - but Material's drawer
   breakpoint is 76.25em (1220px), so between 901px and 1220px the page
   was in drawer mode with the sidebar still display: none and the
   hamburger had nothing to open. Scoping the hide to the docked range
   leaves Material's mobile drawer untouched and needs no !important. */
@media screen and (min-width: 76.25em) {
  body.fullpage .md-sidebar--primary {
    display: none;
  }
}

body.fullpage .md-footer {
  display: none;
}

body.fullpage #scalar-container {
  min-height: 100vh;
  position: relative;
  z-index: 0;
}

.api-reference-version-selector {
  align-items: center;
  background-color: var(--kz-color-surface-page);
  border-bottom: var(--kz-border-width-stroke-thin) solid
    var(--kz-color-stroke-divider);
  display: flex;
  gap: var(--kz-spacing-xs);
  justify-content: flex-end;
  padding: var(--kz-spacing-xs) var(--kz-spacing-md);
  position: relative;
  z-index: 1;
}

.api-reference-version-selector label {
  color: var(--kz-color-onsurface-weak);
  font-size: var(--kz-font-size-body-sm);
  font-weight: var(--kz-font-weight-stronger);
}

.api-reference-version-selector select {
  background-color: var(--kz-color-surface-action-default-elevated-rest);
  border: var(--kz-border-width-stroke-thin) solid
    var(--kz-color-stroke-action-default-rest);
  border-radius: var(--kz-border-radius-md);
  color: var(--kz-color-onsurface-default);
  font: inherit;
  min-height: var(--kz-dimension-action-md);
  min-width: 5rem;
  padding-inline: var(--kz-spacing-xs);
}

.api-reference-version-selector select:hover {
  background-color: var(--kz-color-surface-action-default-elevated-hovered);
  border-color: var(--kz-color-stroke-action-default-hovered);
}

.api-reference-version-selector select:focus-visible {
  border-color: var(--kz-color-stroke-action-main-selected);
  box-shadow: 0 0 0 var(--kz-dimension-stroke-bold)
    var(--kz-color-base-transparent-bsport-turquoise-150);
  outline: none;
}

/* Keep the header/tabs above embedded apps */
body.fullpage .md-header {
  position: relative;
  top: 0;
  z-index: 1000;
}

body.fullpage .md-tabs {
  z-index: 1000;
}


/* =============================
   Design tokens + theme bridge
   ============================= */
:root {
  --md-primary-fg-color: var(--kz-color-surface-main-strong);
  --md-primary-fg-color--light: var(--kz-color-bsport-turquoise-300);
  --md-accent-fg-color: var(--kz-color-bsport-turquoise-400);
  --md-accent-fg-color--transparent: var(
    --kz-color-base-transparent-bsport-turquoise-150
  );
  --md-default-bg-color: var(--kz-color-surface-page);
  --md-default-bg-color--light: var(--kz-color-surface-default-weaker);
  --md-default-bg-color--lighter: var(--kz-color-surface-default-weakest);
  --md-default-fg-color: var(--kz-color-onsurface-default);
  --md-default-fg-color--light: var(--kz-color-onsurface-weak);
  --md-default-fg-color--lighter: var(--kz-color-onsurface-weaker);
  --md-default-fg-color--lightest: var(
    --kz-color-base-transparent-luna-grey-150
  );
  --md-typeset-a-color: var(--kz-color-onsurface-link-rest);
  --md-code-bg-color: var(--kz-color-surface-default-weakest);
  --md-code-fg-color: var(--kz-color-onsurface-default);
  --md-code-hl-color: var(--kz-color-base-transparent-bsport-turquoise-80);
  --md-footer-bg-color: var(--kz-color-surface-page-navigation);
  /* Material paints .md-footer-meta on --md-footer-bg-color--dark, which
     defaults to rgba(0,0,0,.32). Leaving it unmapped put our light grey
     foregrounds on a mid-grey band: 3.0:1 for the meta text and 1.01:1
     for its links. Keep the meta bar on the same light surface as the
     rest of the footer and separate the two with a divider instead. */
  --md-footer-bg-color--dark: var(--kz-color-surface-page-navigation);
  --md-footer-fg-color: var(--kz-color-onsurface-default);
  --md-footer-fg-color--light: var(--kz-color-onsurface-weak);
  --md-footer-fg-color--lighter: var(--kz-color-onsurface-weak);
  --md-shadow-z1: var(--kz-shadow-sm);
  --md-shadow-z2: var(--kz-shadow-md);
  --md-shadow-z3: var(--kz-shadow-lg);
}

/* =============================
   Add white header and tabs
   ============================= */
.md-header {
  background: var(--kz-color-surface-page-top-navigation);
  color: var(--kz-color-onsurface-default);
}

.md-tabs {
  background: var(--kz-color-surface-page-top-navigation);
  color: var(--kz-color-onsurface-default);
  box-shadow: 0 1px 0 var(--kz-color-stroke-divider);
}

.md-header__title,
.md-header__topic,
.md-header__button,
.md-header__button .md-icon,
.md-tabs__link,
.md-tabs__link--active {
  color: var(--kz-color-onsurface-default);
}

.md-tabs__link:hover {
  color: var(--kz-color-onsurface-link-hovered);
}

.md-tabs__item--active > .md-tabs__link {
  color: var(--kz-color-onsurface-action-main-selected);
  font-weight: var(--kz-font-weight-stronger);
}


/* =============================
   Search: kaizen text field
   (default, size md)

   Material treats .md-search__form as the field container - it is the
   element that owns the hover state - and leaves .md-search__input
   transparent, so the surface, border and focus ring belong on the
   form. Styling the input instead left Material's own translucent
   form background (#ffffff1f) sitting invisibly behind it.

   Sizes use the --kz-dimension-* px tokens rather than their rem
   twins: Material sets html { font-size: 125% }, so 1rem is 20px here
   and every rem-based kz token renders 25% larger than it was drawn.
   ============================= */
@media screen and (min-width: 60em) {
  .md-header__inner .md-search {
    flex: 0 1 auto;
    max-width: 17rem;
  }

  .md-search__form {
    background-color: var(--kz-color-surface-default-weakest);
    border: var(--kz-border-width-stroke-thin) solid
      var(--kz-color-stroke-action-default-rest);
    border-radius: var(--kz-border-radius-md);
    height: var(--kz-dimension-action-md);
    transition: background-color var(--kz-transition-duration-default) ease-out,
      border-color var(--kz-transition-duration-default) ease-out,
      box-shadow var(--kz-transition-duration-default) ease-out;
  }

  .md-search__form:hover {
    background-color: var(--kz-color-surface-action-default-elevated-hovered);
    border-color: var(--kz-color-stroke-action-default-hovered);
  }

  /* focus-within rather than :focus so the ring tracks the whole field
     while the caret is in the input */
  .md-search__form:focus-within {
    background-color: var(--kz-color-surface-action-default-elevated-rest);
    border-color: var(--kz-color-stroke-action-main-selected);
    box-shadow: 0 0 0 var(--kz-dimension-stroke-bold)
      var(--kz-color-base-transparent-bsport-turquoise-150);
  }

  .md-search__input {
    background: transparent;
    border: none;
    border-radius: inherit;
    box-shadow: none;
    color: var(--kz-color-onsurface-default);
    font-size: var(--kz-dimension-font-size-body-md);
  }

  /* [dir] only to outweigh Material's own [dir=ltr] .md-search__input
     padding, which is specificity (0,2,0); one logical rule covers both
     directions. 8px gutter + 24px icon + 8px gap on each side. */
  [dir] .md-search__input {
    padding-inline: calc(
      var(--kz-dimension-element-xs) * 2 + var(--kz-dimension-icon-md)
    );
  }

  [dir="ltr"] .md-search__icon[for="__search"] {
    left: var(--kz-dimension-element-xs);
  }
}

.md-search__input::placeholder {
  color: var(--kz-color-onsurface-weaker);
  opacity: 1;
}

.md-search__icon,
.md-search__input + .md-search__icon {
  color: var(--kz-color-onsurface-weak);
  opacity: 1;
}

/* =============================
   Merge header and tabs into one
   bar: overrides/partials/header.html
   renders the tab list inline inside
   .md-header__inner instead of as a
   separate .md-tabs row underneath.

   76.234375em is Material's own
   .md-tabs breakpoint. Above it the
   list renders inline and the rules
   below reshape the bar around it;
   below it navigation moves to the
   drawer and Material's stock header
   behaviour is left untouched. Keep
   the two values in step.
   ============================= */

/* The header is now the only bar, so it owns the 1px divider that
   .md-tabs used to draw (that rule styles an element which no longer
   exists in the DOM). inset rather than border-bottom so the header
   stays exactly 2.4rem tall and .md-main does not shift down. And
   Material's JS toggles md-header--shadow on scroll independently of
   the server-rendered class list, so both states are pinned here -
   otherwise the white bar meets the white page with no boundary. */
.md-header,
.md-header--shadow {
  box-shadow: inset 0 -1px 0 var(--kz-color-stroke-divider);
}

/* Separate the meta bar from the footer navigation now that both sit
   on the same light surface (see --md-footer-bg-color--dark above). */
.md-footer-meta {
  box-shadow: inset 0 1px 0 var(--kz-color-stroke-divider);
}

@media screen and (min-width: 76.234375em) {
  /* Material gives .md-header__title flex-grow: 1, so it swallowed
     every spare pixel and pushed the tab list flush against the
     search field (measured 0px gap at both 1225px and 1440px). Size
     it to its content instead and let the tab list's auto end-margin
     collect the slack.

     Its two .md-header__topic children are position: absolute, so on
     their own they give the title zero content width and the wordmark
     disappears - the ellipsis wrapper has to come out of the absolute
     flow for flex-basis: auto to measure the text. */
  .md-header__inner .md-header__title {
    flex: 0 0 auto;
    max-width: 16rem;
    min-width: 0;
  }

  .md-header__inner .md-header__ellipsis,
  .md-header__inner .md-header__topic:first-child {
    position: static;
  }

  /* Material swaps the site name for the page title once the h1
     scrolls out of view. In a merged bar that title has nowhere to go
     without shoving the tabs sideways, and the breadcrumbs and the h1
     already name the page - so keep the wordmark and drop the swap.
     Below the breakpoint the swap is left alone, where it is the only
     thing naming the current page once you scroll. */
  .md-header__inner .md-header__topic[data-md-component="header-topic"] {
    display: none;
  }

  .md-header__inner .md-header__title--active .md-header__topic:first-child {
    opacity: 1;
    pointer-events: auto;
    transform: none;
    z-index: auto;
  }

  /* Tabs read as one group next to the wordmark, with the remaining
     space collected on their right. Swap the two values (auto 0) to
     centre the group in the bar instead. */
  .md-header__inner .md-tabs__list {
    margin-inline: var(--kz-spacing-md) auto;
    min-width: 0;
  }

  /* Guarantees the gap once the slack runs out: the six current tabs
     already take 568px of a 1220px bar, and Material hides the list's
     scrollbar (scrollbar-width: none), so without this a new nav
     section would collide with the search field instead of scrolling
     inside the list. */
  .md-header__inner .md-search {
    margin-inline-start: var(--kz-spacing-lg);
  }

  /* .md-tabs__item is a 2.4rem-tall list-item, so the 16px-tall link
     inside it had nothing centring it once Material's magic
     margin-top: .8rem was removed: the labels sat on the top edge of
     the bar while the logo, title and search field were all centred.
     Centre it properly rather than restoring the magic number. */
  .md-header__inner .md-tabs__item {
    align-items: center;
    display: flex;
    position: relative;
  }

  /* Token-driven rest/hover/active states instead of Material's
     blanket opacity: .7 on the link. */
  .md-header__inner .md-tabs__link {
    align-items: center;
    color: var(--kz-color-onsurface-weak);
    margin-top: 0;
    opacity: 1;
    transition: color var(--kz-transition-duration-default) ease-out;
  }

  .md-header__inner .md-tabs__link:hover {
    color: var(--kz-color-onsurface-link-hovered);
  }

  .md-header__inner .md-tabs__item--active > .md-tabs__link {
    color: var(--kz-color-onsurface-action-main-selected);
    font-weight: var(--kz-font-weight-stronger);
  }

  .md-header__inner .md-tabs__link:focus-visible {
    border-radius: var(--kz-border-radius-xs);
    outline: var(--kz-border-width-stroke-regular) solid
      var(--kz-color-stroke-action-main-selected);
    outline-offset: var(--kz-spacing-2xs);
  }

  /* Underline anchored to the bottom of the bar: colour and weight
     alone were the only cue for the current section, which reads as
     six labels of slightly different colours once the tabs lose their
     own row. Drawn inside the item box so Material's contain: content
     on the list cannot clip it, and inset by the item's own 0.6rem
     padding so it spans the label rather than the padding. */
  .md-header__inner .md-tabs__item--active::after {
    background: var(--kz-color-stroke-main);
    border-radius: var(--kz-border-radius-xs) var(--kz-border-radius-xs) 0 0;
    bottom: 0;
    content: "";
    height: var(--kz-border-width-stroke-regular);
    inset-inline: 0.6rem;
    position: absolute;
  }
}

/* Below the breakpoint navigation lives in the sidebar drawer - keep
   the inline tab list out of the header entirely. */
@media screen and (max-width: 76.234375em) {
  .md-header__inner .md-tabs__list {
    display: none;
  }
}

/* =============================
   Tables and code: match body text
   ============================= */
.md-typeset code,
.md-typeset pre {
  font-size: var(--kz-font-size-body-xs);
}

/* =============================
   Tables: kaizen surface/divider
   tokens instead of Material's
   boxed default
   ============================= */
.md-typeset table:not([class]) {
  border: 1px solid var(--kz-color-stroke-divider);
  border-radius: var(--kz-border-radius-md);
  font-size: var(--kz-font-size-body-sm);
  overflow: hidden;
}

.md-typeset table:not([class]) th {
  background-color: var(--kz-color-surface-default-weakest);
  color: var(--kz-color-onsurface-default);
  font-weight: var(--kz-font-weight-stronger);
  padding: var(--kz-spacing-sm) var(--kz-spacing-md);
  border-bottom: 1px solid var(--kz-color-stroke-divider);
}

.md-typeset table:not([class]) td {
  border-top: 1px solid var(--kz-color-stroke-divider);
  padding: var(--kz-spacing-sm) var(--kz-spacing-md);
}

.md-typeset table:not([class]) tr:hover {
  background-color: var(--kz-color-surface-action-default-weak-rest);
}

/* =============================
   Makes content more compact:
   paragraphs default to a large
   browser margin (1em top/bottom)
   which stacks with the list's own
   top margin instead of collapsing
   cleanly at our larger heading
   sizes, so pin both explicitly
   ============================= */
.md-typeset p {
  margin: 0 0 var(--kz-spacing-xs);
}

.md-typeset ul,
.md-typeset ol {
  margin: var(--kz-spacing-2xs) 0 var(--kz-spacing-xs);
}

.md-typeset ul li,
.md-typeset ol li {
  margin: var(--kz-spacing-2xs) 0;
}

/* =============================
   Webhook overview
   ============================= */
.webhook-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--kz-spacing-sm);
  margin: var(--kz-spacing-lg) 0 var(--kz-spacing-xl);
}

.webhook-step-grid,
.webhook-resource-grid {
  display: grid;
  gap: var(--kz-spacing-md);
  margin: var(--kz-spacing-lg) 0 var(--kz-spacing-xl);
}

.webhook-step-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.webhook-step-card,
.webhook-resource-grid a {
  background: var(--kz-color-surface-action-default-elevated-rest);
  border: none;
  border-radius: var(--kz-border-radius-md);
  box-shadow: var(--kz-shadow-action-default-rest);
  color: var(--kz-color-onsurface-default);
  padding: var(--kz-spacing-lg);
  transition: box-shadow var(--kz-transition-duration-default) ease-out;
}

.webhook-step-card h3 {
  margin: var(--kz-spacing-sm) 0 var(--kz-spacing-xs);
}

.webhook-step-card p,
.webhook-resource-grid span {
  color: var(--kz-color-onsurface-weak);
  margin: 0;
}

.webhook-step-number {
  align-items: center;
  background: var(--kz-color-surface-action-main-selected-rest);
  border-radius: 50%;
  color: var(--kz-color-onsurface-action-main-selected);
  display: inline-flex;
  font-size: 0.72rem;
  font-weight: var(--kz-font-weight-stronger);
  height: 2rem;
  justify-content: center;
  width: 2rem;
}

.webhook-resource-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.webhook-resource-grid a {
  display: flex;
  flex-direction: column;
  gap: var(--kz-spacing-xs);
  text-decoration: none;
}

.webhook-step-card:hover,
.webhook-resource-grid a:hover {
  box-shadow: var(--kz-shadow-action-default-hovered);
}

.webhook-resource-grid a:active {
  box-shadow: var(--kz-shadow-action-default-pressed);
}

/* =============================
   Buttons: match kaizen Button
   call-to-action/main (primary)
   and default/main (secondary)
   ============================= */
.md-typeset .md-button {
  border: none;
  border-radius: var(--kz-border-radius-md);
  font-weight: var(--kz-font-weight-weak);
  font-size: var(--kz-font-size-body-md);
  padding: var(--kz-spacing-xs) var(--kz-spacing-sm);
  transition: background-color var(--kz-transition-duration-default) ease-out,
    box-shadow var(--kz-transition-duration-default) ease-out;
}

.md-typeset .md-button:not(.md-button--primary) {
  background-color: var(--kz-color-surface-action-default-elevated-rest);
  box-shadow: var(--kz-shadow-action-default-rest);
  color: var(--kz-color-onsurface-action-main-rest);
}

.md-typeset .md-button:not(.md-button--primary):hover {
  background-color: var(--kz-color-surface-action-default-elevated-hovered);
  box-shadow: var(--kz-shadow-action-default-hovered);
  color: var(--kz-color-onsurface-action-main-hovered);
}

.md-typeset .md-button:not(.md-button--primary):active {
  background-color: var(--kz-color-surface-action-default-elevated-pressed);
  box-shadow: var(--kz-shadow-action-default-pressed);
  color: var(--kz-color-onsurface-action-main-pressed);
}

.md-typeset .md-button--primary {
  background-color: var(--kz-color-surface-action-main-strong-rest);
  box-shadow: var(--kz-shadow-action-call-to-action-rest);
  color: var(--kz-color-onsurface-default-onstrong);
}

.md-typeset .md-button--primary:hover {
  background-color: var(--kz-color-surface-action-main-strong-hovered);
  box-shadow: var(--kz-shadow-action-call-to-action-hovered);
  color: var(--kz-color-onsurface-default-onstrong);
}

.md-typeset .md-button--primary:active {
  background-color: var(--kz-color-surface-action-main-strong-pressed);
  box-shadow: var(--kz-shadow-action-call-to-action-pressed);
  color: var(--kz-color-onsurface-default-onstrong);
}

/* =============================
   Sidebar navigation: make group
   titles (Public API, Webhooks, MCP)
   stand out from the page links
   below them
   ============================= */
.md-nav__item--nested > .md-nav__link,
.md-nav__link--index {
  color: var(--kz-color-onsurface-default);
  font-weight: var(--kz-font-weight-stronger);
}

.md-nav__item--nested {
  margin-top: var(--kz-spacing-sm);
}

.md-nav__link--active {
  color: var(--kz-color-onsurface-action-main-selected);
  font-weight: var(--kz-font-weight-strong);
}

.md-nav__link--passed {
  color: var(--kz-color-onsurface-weaker);
}

/* =============================
   Callouts: match kaizen Alert
   "weak" styling
   note -> default, info -> info,
   tip/success -> positive,
   warning -> warning, danger -> critical
   ============================= */
.md-typeset .admonition,
.md-typeset details {
  border-width: 0;
  border-radius: var(--kz-border-radius-md);
  padding: var(--kz-spacing-sm);
  font-size: var(--kz-font-size-body-sm);
}

.md-typeset .admonition > .admonition-title,
.md-typeset .admonition > summary,
.md-typeset details > .admonition-title,
.md-typeset details > summary {
  border: none;
  border-radius: 0;
  margin: 0 calc(-1 * var(--kz-spacing-sm)) var(--kz-spacing-2xs) !important;
  padding: 0 var(--kz-spacing-sm) 0 calc(var(--kz-spacing-sm) * 2 + var(--kz-dimension-icon-md)) !important;
  font-weight: var(--kz-font-weight-stronger);
  font-size: var(--kz-font-size-body-sm);
  min-height: var(--kz-dimension-icon-md);
  display: flex;
  align-items: center;
}

.md-typeset .admonition > .admonition-title:before,
.md-typeset .admonition > summary:before,
.md-typeset details > .admonition-title:before,
.md-typeset details > summary:before {
  left: var(--kz-spacing-sm) !important;
  top: 50%;
  width: var(--kz-dimension-icon-md);
  height: var(--kz-dimension-icon-md);
  transform: translateY(-50%);
}

.md-typeset .admonition :last-child,
.md-typeset details :last-child {
  margin-bottom: 0;
}

.md-typeset .note > .admonition-title,
.md-typeset .note > summary,
.md-typeset .info > .admonition-title,
.md-typeset .info > summary,
.md-typeset .tip > .admonition-title,
.md-typeset .tip > summary,
.md-typeset .success > .admonition-title,
.md-typeset .success > summary,
.md-typeset .warning > .admonition-title,
.md-typeset .warning > summary,
.md-typeset .danger > .admonition-title,
.md-typeset .danger > summary {
  background-color: transparent;
}

.md-typeset .note > .admonition-title:before,
.md-typeset .note > summary:before,
.md-typeset .info > .admonition-title:before,
.md-typeset .info > summary:before,
.md-typeset .tip > .admonition-title:before,
.md-typeset .tip > summary:before,
.md-typeset .success > .admonition-title:before,
.md-typeset .success > summary:before,
.md-typeset .warning > .admonition-title:before,
.md-typeset .warning > summary:before,
.md-typeset .danger > .admonition-title:before,
.md-typeset .danger > summary:before {
  background-color: currentColor;
}

.md-typeset .note {
  background-color: var(--kz-color-surface-default-weakest);
  box-shadow: var(--kz-shadow-border-thin-default);
  color: var(--kz-color-onsurface-default);
}

.md-typeset .info {
  background-color: var(--kz-color-surface-status-info-weak);
  box-shadow: var(--kz-shadow-border-thin-info);
  color: var(--kz-color-onsurface-status-info-strong);
}

.md-typeset .tip,
.md-typeset .success {
  background-color: var(--kz-color-surface-status-positive-weak);
  box-shadow: var(--kz-shadow-border-thin-positive);
  color: var(--kz-color-onsurface-status-positive-strong);
}

.md-typeset .warning {
  background-color: var(--kz-color-surface-status-warning-weak);
  box-shadow: var(--kz-shadow-border-thin-warning);
  color: var(--kz-color-onsurface-status-warning-strong);
}

.md-typeset .danger {
  background-color: var(--kz-color-surface-status-critical-weak);
  box-shadow: var(--kz-shadow-border-thin-critical);
  color: var(--kz-color-onsurface-status-critical-strong);
}

/* =============================
   MCP landing page
   ============================= */
.mcp-hero {
  background: linear-gradient(
    135deg,
    var(--kz-color-surface-main-weak),
    var(--kz-color-surface-page) 72%
  );
  border: 1px solid var(--kz-color-stroke-main);
  border-radius: var(--kz-border-radius-xl);
  margin: var(--kz-spacing-lg) 0 var(--kz-spacing-2xl);
  overflow: hidden;
  padding: clamp(var(--kz-spacing-xl), 7vw, var(--kz-spacing-2xl));
  position: relative;
}

.mcp-hero::after {
  background: var(--kz-color-base-transparent-bsport-turquoise-80);
  border-radius: 50%;
  content: "";
  height: 16rem;
  position: absolute;
  right: -6rem;
  top: -7rem;
  width: 16rem;
}

.mcp-hero > * {
  max-width: 45rem;
  position: relative;
  z-index: 1;
}

.mcp-hero h1 {
  font-size: clamp(2rem, 7vw, 3.75rem);
  letter-spacing: -0.035em;
  line-height: 1.05;
  margin: var(--kz-spacing-xs) 0 var(--kz-spacing-lg);
}

.mcp-eyebrow,
.mcp-card-label {
  color: var(--kz-color-onsurface-main-strong);
  font-size: var(--kz-font-size-body-sm);
  font-weight: var(--kz-font-weight-stronger);
  letter-spacing: 0.08em;
  margin: 0;
  text-transform: uppercase;
}

.mcp-lead {
  color: var(--kz-color-onsurface-weak);
  font-size: 1.08rem;
  line-height: 1.65;
}

.mcp-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--kz-spacing-sm);
  margin-top: var(--kz-spacing-xl);
}

.mcp-card-grid {
  display: grid;
  gap: var(--kz-spacing-md);
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: var(--kz-spacing-lg) 0 var(--kz-spacing-xl);
}

.mcp-card {
  background: var(--kz-color-surface-page);
  border: 1px solid var(--kz-color-stroke-divider);
  border-radius: var(--kz-border-radius-md);
  box-shadow: var(--kz-shadow-sm);
  padding: var(--kz-spacing-lg);
}

.mcp-card h3 {
  margin: var(--kz-spacing-sm) 0 var(--kz-spacing-xs);
}

.mcp-card p,
.mcp-final-cta p {
  color: var(--kz-color-onsurface-weak);
  margin-bottom: 0;
}

.mcp-final-cta {
  align-items: center;
  background: var(--kz-color-surface-default-weaker);
  border: 1px solid var(--kz-color-stroke-divider);
  border-radius: var(--kz-border-radius-lg);
  display: flex;
  gap: var(--kz-spacing-xl);
  justify-content: space-between;
  margin: var(--kz-spacing-2xl) 0 var(--kz-spacing-xl);
  padding: var(--kz-spacing-xl);
}

.mcp-final-cta h2 {
  margin: var(--kz-spacing-xs) 0;
}

.mcp-final-cta .mcp-hero-actions {
  flex: 0 0 auto;
  margin-top: 0;
}

@media (max-width: 760px) {
  .mcp-card-grid {
    grid-template-columns: 1fr;
  }

  .mcp-final-cta {
    align-items: stretch;
    flex-direction: column;
  }

  .mcp-final-cta .mcp-hero-actions,
  .mcp-final-cta .md-button {
    width: 100%;
  }
}

/* =============================
   Headings: kaizen Title scale
   ============================= */
.md-typeset h1,
.md-typeset h2,
.md-typeset h3,
.md-typeset h4,
.md-typeset h5 {
  font-weight: var(--kz-font-weight-stronger);
  letter-spacing: normal;
}

/* onsurface-default, not onsurface-link-rest: an h1 in the link colour
   measures the exact same turquoise as a body link, so page titles
   read as clickable. Turquoise stays reserved for actual links. */
.md-typeset h1 {
  color: var(--kz-color-onsurface-default);
  font-size: var(--kz-font-size-title-lg);
  line-height: var(--kz-line-height-lg);
}

.md-typeset h2 {
  font-size: var(--kz-font-size-title-md);
  line-height: var(--kz-line-height-md);
}

.md-typeset h3 {
  font-size: var(--kz-font-size-title-sm);
  line-height: var(--kz-line-height-md);
}

.md-typeset h4 {
  font-size: var(--kz-font-size-title-xs);
  line-height: var(--kz-line-height-sm);
}

.md-typeset h5 {
  font-size: var(--kz-font-size-body-lg);
  line-height: var(--kz-line-height-sm);
  text-transform: none;
}

/* Mermaid diagrams: brand colors for Material's mermaid variables */
.md-typeset .mermaid {
  --md-mermaid-node-bg-color: var(--kz-color-bsport-turquoise-100);
  --md-mermaid-node-fg-color: var(--kz-color-bsport-turquoise-700);
  --md-mermaid-edge-color: var(--kz-color-onsurface-weak);
  --md-mermaid-label-bg-color: var(--kz-color-surface-page);
  --md-mermaid-label-fg-color: var(--kz-color-onsurface-default);
  margin: 1.5em 0;
  text-align: center;
}