/*fern-site-stylesheet*/:root {
  --header-height: 64px;
  --header-height-real: 64px;
  --mobile-header-height-real: 64px;
  --content-width: 800px;
  --sidebar-width: 272px;
  --page-width: 100vw;
  --logo-height: 30px;
  --font-body: ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
  --font-heading: ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
  --font-code: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
}

:root {
  --typography-body-font-family: var(--font-body);
  --typography-heading-font-family: var(--font-heading);
  --typography-code-font-family: var(--font-code);
}


:root {
  --accent-1: #fbfdfe;
  --accent-2: #f5fafe;
  --accent-3: #e9f2f9;
  --accent-4: #dbebf7;
  --accent-5: #cee5f4;
  --accent-6: #beddf2;
  --accent-7: #abd1eb;
  --accent-8: #8cbedf;
  --accent-9: #062638;
  --accent-10: #1d3c4f;
  --accent-11: #3a6a88;
  --accent-12: #072739;

  --accent-a1: #0080c004;
  --accent-a2: #0080e60a;
  --accent-a3: #0069ba16;
  --accent-a4: #0072c724;
  --accent-a5: #0078c631;
  --accent-a6: #007acc41;
  --accent-a7: #0074c354;
  --accent-a8: #006fb973;
  --accent-a9: #002133f9;
  --accent-a10: #002338e2;
  --accent-a11: #003e65c5;
  --accent-a12: #002133f8;

  --accent-contrast: #fff;
  --accent-surface: #f3f9fecc;
  --accent-indicator: #062638;
  --accent-track: #062638;
}

@supports (color: color(display-p3 1 1 1)) {
  @media (color-gamut: p3) {
    :root {
      --accent-1: oklch(99.2% 0.0027 238);
      --accent-2: oklch(98.3% 0.0076 238);
      --accent-3: oklch(95.7% 0.0137 238);
      --accent-4: oklch(93.2% 0.023 238);
      --accent-5: oklch(90.8% 0.0327 238);
      --accent-6: oklch(88.2% 0.0437 238);
      --accent-7: oklch(84.2% 0.0537 238);
      --accent-8: oklch(77.8% 0.071 238);
      --accent-9: oklch(25.6% 0.0497 238);
      --accent-10: oklch(34% 0.0497 238);
      --accent-11: oklch(50.4% 0.071 238);
      --accent-12: oklch(25.8% 0.0497 238);

      --accent-a1: color(display-p3 0.0235 0.5137 0.7569 / 0.016);
      --accent-a2: color(display-p3 0.0235 0.4588 0.8941 / 0.036);
      --accent-a3: color(display-p3 0.0078 0.3569 0.6549 / 0.079);
      --accent-a4: color(display-p3 0.0078 0.3686 0.7294 / 0.13);
      --accent-a5: color(display-p3 0.0039 0.4039 0.7137 / 0.177);
      --accent-a6: color(display-p3 0.0039 0.4118 0.749 / 0.232);
      --accent-a7: color(display-p3 0.0039 0.3843 0.698 / 0.299);
      --accent-a8: color(display-p3 0.0039 0.3725 0.6706 / 0.412);
      --accent-a9: color(display-p3 0 0.0902 0.1608 / 0.942);
      --accent-a10: color(display-p3 0 0.102 0.1843 / 0.855);
      --accent-a11: color(display-p3 0 0.1882 0.3412 / 0.726);
      --accent-a12: color(display-p3 0 0.0902 0.1647 / 0.938);

      --accent-contrast: #fff;
      --accent-surface: color(display-p3 0.9569 0.9765 0.9961 / 0.8);
      --accent-indicator: oklch(25.6% 0.0497 238);
      --accent-track: oklch(25.6% 0.0497 238);
    }
  }
}


:root {
  --grayscale-1: #fcfcfd;
  --grayscale-2: #f9f9fb;
  --grayscale-3: #f0f0f3;
  --grayscale-4: #e8e8ec;
  --grayscale-5: #e0e1e6;
  --grayscale-6: #d9d9e0;
  --grayscale-7: #cdced6;
  --grayscale-8: #b9bbc6;
  --grayscale-9: #8b8d98;
  --grayscale-10: #80838d;
  --grayscale-11: #60646c;
  --grayscale-12: #1c2024;

  --grayscale-a1: #00005503;
  --grayscale-a2: #00005506;
  --grayscale-a3: #0000330f;
  --grayscale-a4: #00002d17;
  --grayscale-a5: #0009321f;
  --grayscale-a6: #00002f26;
  --grayscale-a7: #00062e32;
  --grayscale-a8: #00083046;
  --grayscale-a9: #00051d74;
  --grayscale-a10: #00071b7f;
  --grayscale-a11: #0007149f;
  --grayscale-a12: #000509e3;

  --grayscale-contrast: #000;
  --grayscale-surface: #ffffffcc;
  --grayscale-indicator: #8b8d98;
  --grayscale-track: #8b8d98;
}

@supports (color: color(display-p3 1 1 1)) {
  @media (color-gamut: p3) {
    :root {
      --grayscale-1: color(display-p3 0.988 0.988 0.992);
      --grayscale-2: color(display-p3 0.976 0.976 0.984);
      --grayscale-3: color(display-p3 0.94 0.941 0.953);
      --grayscale-4: color(display-p3 0.908 0.909 0.925);
      --grayscale-5: color(display-p3 0.88 0.881 0.901);
      --grayscale-6: color(display-p3 0.85 0.852 0.876);
      --grayscale-7: color(display-p3 0.805 0.808 0.838);
      --grayscale-8: color(display-p3 0.727 0.733 0.773);
      --grayscale-9: color(display-p3 0.547 0.553 0.592);
      --grayscale-10: color(display-p3 0.503 0.512 0.549);
      --grayscale-11: color(display-p3 0.379 0.392 0.421);
      --grayscale-12: color(display-p3 0.113 0.125 0.14);

      --grayscale-a1: #00005503;
      --grayscale-a2: #00005506;
      --grayscale-a3: #0000330f;
      --grayscale-a4: #00002d17;
      --grayscale-a5: #0009321f;
      --grayscale-a6: #00002f26;
      --grayscale-a7: #00062e32;
      --grayscale-a8: #00083046;
      --grayscale-a9: #00051d74;
      --grayscale-a10: #00071b7f;
      --grayscale-a11: #0007149f;
      --grayscale-a12: #000509e3;

      --grayscale-contrast: #000;
      --grayscale-surface: color(display-p3 1 1 1 / 80%);
      --grayscale-indicator: color(display-p3 0.547 0.553 0.592);
      --grayscale-track: color(display-p3 0.547 0.553 0.592);
    }
  }
}


.dark {
  --accent-1: #000;
  --accent-2: #121211;
  --accent-3: #1f1f1d;
  --accent-4: #282826;
  --accent-5: #30302e;
  --accent-6: #3a3a37;
  --accent-7: #484845;
  --accent-8: #60605e;
  --accent-9: #fff;
  --accent-10: #f6f6f4;
  --accent-11: #b3b3b0;
  --accent-12: #eeeeec;

  --accent-a1: #00000000;
  --accent-a2: #fffff112;
  --accent-a3: #ffffef1f;
  --accent-a4: #fffff328;
  --accent-a5: #fffff530;
  --accent-a6: #fffff23a;
  --accent-a7: #fffff548;
  --accent-a8: #fffffa60;
  --accent-a9: #ffffff;
  --accent-a10: #fffffdf6;
  --accent-a11: #fffffbb3;
  --accent-a12: #fffffdee;

  --accent-contrast: #311921;
  --accent-surface: #24242280;
  --accent-indicator: #fff;
  --accent-track: #fff;
}

@supports (color: color(display-p3 1 1 1)) {
  @media (color-gamut: p3) {
    .dark {
      --accent-1: oklch(0% 0.0023 106.5);
      --accent-2: oklch(18.3% 0.0022 106.5);
      --accent-3: oklch(23.9% 0.0032 106.5);
      --accent-4: oklch(27.5% 0.0036 106.5);
      --accent-5: oklch(30.8% 0.004 106.5);
      --accent-6: oklch(34.7% 0.004 106.5);
      --accent-7: oklch(40% 0.004 106.5);
      --accent-8: oklch(49% 0.004 106.5);
      --accent-9: oklch(100% 0 none);
      --accent-10: oklch(97.3% 0.0027 106.5);
      --accent-11: oklch(76.7% 0.004 106.5);
      --accent-12: oklch(94.8% 0.0027 106.5);

      --accent-a1: color(display-p3 0 0 0 / 0);
      --accent-a2: color(display-p3 0.9961 0.9961 0.9412 / 0.071);
      --accent-a3: color(display-p3 1 1 0.9333 / 0.122);
      --accent-a4: color(display-p3 1 1 0.9529 / 0.157);
      --accent-a5: color(display-p3 0.9961 0.9961 0.9569 / 0.189);
      --accent-a6: color(display-p3 1 1 0.949 / 0.228);
      --accent-a7: color(display-p3 1 1 0.9569 / 0.283);
      --accent-a8: color(display-p3 1 1 0.9804 / 0.377);
      --accent-a9: color(display-p3 1 1 1);
      --accent-a10: color(display-p3 1 1 0.9922 / 0.965);
      --accent-a11: color(display-p3 1 1 0.9843 / 0.702);
      --accent-a12: color(display-p3 1 1 0.9922 / 0.934);

      --accent-contrast: #311921;
      --accent-surface: color(display-p3 0.1412 0.1412 0.1333 / 0.5);
      --accent-indicator: oklch(100% 0 none);
      --accent-track: oklch(100% 0 none);
    }
  }
}


.dark {
  --grayscale-1: #111110;
  --grayscale-2: #191918;
  --grayscale-3: #222221;
  --grayscale-4: #2a2a28;
  --grayscale-5: #31312e;
  --grayscale-6: #3b3a37;
  --grayscale-7: #494844;
  --grayscale-8: #62605b;
  --grayscale-9: #6f6d66;
  --grayscale-10: #7c7b74;
  --grayscale-11: #b5b3ad;
  --grayscale-12: #eeeeec;

  --grayscale-a1: #00000000;
  --grayscale-a2: #f4f4f309;
  --grayscale-a3: #f6f6f513;
  --grayscale-a4: #fefef31b;
  --grayscale-a5: #fbfbeb23;
  --grayscale-a6: #fffaed2d;
  --grayscale-a7: #fffbed3c;
  --grayscale-a8: #fff9eb57;
  --grayscale-a9: #fffae965;
  --grayscale-a10: #fffdee73;
  --grayscale-a11: #fffcf4b0;
  --grayscale-a12: #fffffded;

  --grayscale-contrast: #fff;
  --grayscale-surface: rgba(0, 0, 0, 0.05);
  --grayscale-indicator: #6f6d66;
  --grayscale-track: #6f6d66;
}

@supports (color: color(display-p3 1 1 1)) {
  @media (color-gamut: p3) {
    .dark {
      --grayscale-1: color(display-p3 0.067 0.067 0.063);
      --grayscale-2: color(display-p3 0.098 0.098 0.094);
      --grayscale-3: color(display-p3 0.135 0.135 0.129);
      --grayscale-4: color(display-p3 0.164 0.163 0.156);
      --grayscale-5: color(display-p3 0.193 0.192 0.183);
      --grayscale-6: color(display-p3 0.23 0.229 0.217);
      --grayscale-7: color(display-p3 0.285 0.282 0.267);
      --grayscale-8: color(display-p3 0.384 0.378 0.357);
      --grayscale-9: color(display-p3 0.434 0.428 0.403);
      --grayscale-10: color(display-p3 0.487 0.481 0.456);
      --grayscale-11: color(display-p3 0.707 0.703 0.68);
      --grayscale-12: color(display-p3 0.933 0.933 0.926);

      --grayscale-a1: #00000000;
      --grayscale-a2: #f4f4f309;
      --grayscale-a3: #f6f6f513;
      --grayscale-a4: #fefef31b;
      --grayscale-a5: #fbfbeb23;
      --grayscale-a6: #fffaed2d;
      --grayscale-a7: #fffbed3c;
      --grayscale-a8: #fff9eb57;
      --grayscale-a9: #fffae965;
      --grayscale-a10: #fffdee73;
      --grayscale-a11: #fffcf4b0;
      --grayscale-a12: #fffffded;

      --grayscale-contrast: #fff;
      --grayscale-surface: color(display-p3 0 0 0 / 5%);
      --grayscale-indicator: color(display-p3 0.434 0.428 0.403);
      --grayscale-track: color(display-p3 0.434 0.428 0.403);
    }
  }
}

:root {
  color-scheme: light;
  --accent: rgba(6, 38, 56, 1);
  --background: rgba(255, 255, 255, 1);
  --border: rgba(226, 226, 222, 1);
  --sidebar-background: rgba(255, 255, 255, 1);
  --header-background: rgba(255, 255, 255, 1);
  --card-background: rgba(255, 255, 255, 1);
  --theme-color: #fff;
}

.dark {
  color-scheme: light;
  --background: #000000;
  --accent: #ffffff;
}

@import url("https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap");

/* ---------------------------------------------------------------------------
   Mitu docs theme.

   Values are taken from the `Mitu API Docs` artboards rather than rounded to a
   scale: the dashboard and the docs are meant to look like one product, and
   the dashboard already ships these exact numbers.
   --------------------------------------------------------------------------- */

:root {
  /* Brand. #062638 is the artboards' dark green — CLAUDE.md says #062a1e, but
     every Mitu screen uses this one. */
  --mitu-ink: #0b1f2e;
  --mitu-deep: #062638;
  --mitu-body: #4a5a4f;
  --mitu-muted: #6b7a70;
  --mitu-line: #e2e2de;
  --mitu-active: #f1f3ee;
  --mitu-hover: #f6f6f3;
  --mitu-green: #1ccc50;
  --mitu-green-hover: #17b446;
  /* The brand green as TEXT is 2.14:1 on white - bright, and barely legible at
     14px. This is the same hue scaled until it clears 4.5:1. Fills keep the
     brand value; only type uses this. */
  --mitu-green-text: #128434;

  /* The 272px sidebar and 800px column are set in docs.yml, which has real
     keys for both — no need to fight the theme from here. */
}

body {
  -webkit-font-smoothing: antialiased;
}

/* Headings carry the artboards' tight tracking; body copy does not. */
h1 {
  letter-spacing: -1.4px;
  line-height: 1.08;
  color: var(--mitu-ink);
}
h2 {
  letter-spacing: -0.5px;
  color: var(--mitu-ink);
}
h3 {
  letter-spacing: -0.3px;
  color: var(--mitu-ink);
}

/* The lead paragraph under a page title, 17px in the design. */
.fern-page-subtitle {
  font-size: 17px;
  line-height: 1.6;
  color: var(--mitu-body);
  text-wrap: pretty;
}

/* Sidebar: 14px, 500 until current, then 700 on the pale green ground. */
.fern-sidebar-link-text {
  font-size: 14px;
  font-weight: 500;
  color: #3a4a40;
}
.fern-sidebar-link:hover {
  background: var(--mitu-hover);
}
.fern-sidebar-link:focus-visible {
  background: var(--mitu-hover);
}
.fern-sidebar-link[data-state="active"] {
  background: var(--mitu-active);
}
.fern-sidebar-link[data-state="active"] .fern-sidebar-link-text {
  font-weight: 700;
  color: var(--mitu-ink);
}

/* Group headings, and the smaller sub-headings inside them. */
.fern-sidebar-heading {
  font-size: 13px;
  font-weight: 700;
  color: var(--mitu-ink);
}
.fern-sidebar-group .fern-sidebar-heading {
  font-size: 12px;
  font-weight: 600;
  color: var(--mitu-muted);
}

/* Cards: square-ish corners and a dark border on hover, not a shadow. */
.fern-card {
  border: 1px solid var(--mitu-line);
  border-radius: 8px;
  transition: border-color 0.15s ease;
}
.fern-card:hover {
  border-color: var(--mitu-ink);
  box-shadow: none;
}
.fern-card:focus-visible {
  border-color: var(--mitu-ink);
  box-shadow: none;
}
.fern-card-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--mitu-ink);
}

/* Code blocks sit on the brand ink rather than a neutral grey. */
.fern-code-block,
pre {
  border-radius: 8px;
}

/* Inline code: the pale green chip from the artboards. */
:not(pre) > code {
  font-family: "JetBrains Mono", ui-monospace, Menlo, monospace;
  font-size: 13.5px;
  background: var(--mitu-active);
  color: var(--mitu-ink);
  padding: 2px 6px;
  border-radius: 5px;
  border: 0;
}

/* Links in prose: deep green, underlined, offset.

   Scoped to links inside a paragraph or a list item. Applied to every anchor
   it also caught the cards and the rows below, which underlined a whole page
   of headings and body copy. */
.fern-prose p > a,
.fern-prose li > a {
  color: var(--mitu-deep);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Header: the filled Dashboard button. */
.fern-navbar-link[data-variant="filled"] {
  background: var(--mitu-green);
  color: #fff;
  border-radius: 8px;
  font-weight: 700;
}
.fern-navbar-link[data-variant="filled"]:hover {
  background: var(--mitu-green-hover);
}
.fern-navbar-link[data-variant="filled"]:focus-visible {
  background: var(--mitu-green-hover);
}

/* Table of contents, hidden below 1180px exactly as the design does. */
@media (max-width: 1180px) {

  .fern-table-of-contents {
    display: none !important;
  }

}

/* ---------------------------------------------------------------------------
   The row list from the home artboard.

   Not cards: a rule above the first row and below each one, with the title in
   a fixed 220px column, the description filling the rest, and an arrow at the
   end. Cards were the wrong shape and made six boxes of what the design shows
   as one list.
   --------------------------------------------------------------------------- */

.mitu-list {
  margin-top: 16px;
  border-top: 1px solid var(--mitu-line);
}

.mitu-row {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr) 16px;
  gap: 16px;
  padding: 16px 0;
  border-bottom: 1px solid var(--mitu-line);
  align-items: baseline;
  text-decoration: none;
}

.mitu-row-title {
  font-size: 15.5px;
  font-weight: 700;
  color: var(--mitu-ink);
}

.mitu-row-body {
  font-size: 15px;
  line-height: 1.55;
  color: #3a4a40;
}

.mitu-row-arrow {
  align-self: center;
  color: var(--mitu-muted);
}

.mitu-row:hover .mitu-row-arrow {
  color: var(--mitu-ink);
}
.mitu-row:focus-within .mitu-row-arrow {
  color: var(--mitu-ink);
}

/* One column once the fixed title column stops fitting. */
@media (max-width: 900px) {

  .mitu-row {
    grid-template-columns: minmax(0, 1fr) 16px;
  }
  .mitu-row-title {
    grid-column: 1 / -1;
  }

}

/* ---------------------------------------------------------------------------
   The Home tab cover.

   `layout: custom` renders no title, no prose styles and no column — which is
   what lets the eyebrow sit ABOVE the H1; every other layout puts the
   frontmatter title first and nothing can precede it. So the page declares
   everything it needs here, from the same tokens as the rest of the docs.
   --------------------------------------------------------------------------- */

/* Sampled from the reference render, except the button: that measured as a
   dark forest green, and the brand green is the one to use. The rest stands -
   the cover runs cooler than the other pages, with a cool grey card line
   rather than the warm one. */
.mitu-cover {
  --cover-btn: var(--mitu-green);
  --cover-line: #e8ebee;
  --cover-band: #f1f4f3;
  --cover-cta: #f1f4f3;

  max-width: 1080px;
  margin: 0 auto;
  padding: 56px clamp(20px, 4vw, 48px) 96px;
}


.mitu-title {
  margin: 0;
  font-size: clamp(32px, 3.4vw, 40px);
  font-weight: 800;
  letter-spacing: -1.1px;
  line-height: 1.1;
  color: var(--mitu-ink);
}


.mitu-p {
  margin: 14px 0 0;
  font-size: 16.5px;
  font-weight: 400;
  line-height: 1.65;
  color: var(--mitu-body);
}

.mitu-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 30px;
}
.mitu-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 42px;
  padding: 0 18px;
  border-radius: 8px;
  font-size: 14.5px;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}
/* Fern wraps a link's label in a <p>, which arrives with prose colour, size
   and line-height: the label turns dark on a green button and sits off-centre
   beside the arrow. Hand all four back to the anchor. */
.mitu-btn p,
.mitu-sec-link p,
.mitu-card > a p,
.mitu-step a p {
  margin: 0;
  padding: 0;
  font-size: inherit;
  font-weight: inherit;
  line-height: 1;
  color: inherit;
}

/* Fern's .fern-mdx-link sets a colour at the same specificity as ours and its
   stylesheet loads later, so the label took the accent navy. An element+class
   selector outranks it; the injected <p> then inherits white as it should. */
a.mitu-btn-primary {
  background: var(--cover-btn);
  border: 1px solid var(--cover-btn);
}
a.mitu-btn-primary,
a.mitu-btn-primary p {
  color: #fff;
}
/* The border darkens with the fill - left at the resting green it reads as a
   bright ring around a duller button. */
a.mitu-btn-primary:hover {
  background: var(--mitu-green-hover);
  border-color: var(--mitu-green-hover);
}
a.mitu-btn-primary:focus-visible {
  background: var(--mitu-green-hover);
  border-color: var(--mitu-green-hover);
}
a.mitu-btn-primary:hover,
a.mitu-btn-primary:hover p {
  color: #fff;
}
a.mitu-btn-primary:focus-visible,
a.mitu-btn-primary:focus-within p {
  color: #fff;
}

.mitu-btn-ghost {
  background: #fff;
  color: var(--mitu-ink);
  border: 1px solid var(--cover-line);
}
.mitu-btn-ghost:hover {
  border-color: var(--mitu-ink);
}
.mitu-btn-ghost:focus-visible {
  border-color: var(--mitu-ink);
}

/* A section heading with its "view all" on the same baseline. */
.mitu-sec-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin: 28px 0 14px;
}
/* The first section sits under the hero's buttons and wants more air than the
   run-on gaps between sections further down. */
.mitu-hero-actions + .mitu-sec-head {
  margin-top: 58px;
}
.mitu-sec-head h2 {
  margin: 0;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.5px;
  color: var(--mitu-ink);
}
.mitu-sec-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: none;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--mitu-muted);
  text-decoration: none;
}
.mitu-sec-link:hover {
  color: var(--mitu-ink);
}
.mitu-sec-link:focus-visible {
  color: var(--mitu-ink);
}

.mitu-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.mitu-card {
  border: 1px solid var(--cover-line);
  border-radius: 10px;
  padding: 22px;
  transition: border-color 0.15s ease;
}
.mitu-card:hover {
  border-color: #d3d9df;
}
.mitu-card:focus-visible {
  border-color: #d3d9df;
}
.mitu-card h3 {
  margin: 14px 0 0;
  font-size: 16.5px;
  font-weight: 700;
  letter-spacing: -0.2px;
  color: var(--mitu-ink);
}
.mitu-card p {
  margin: 8px 0 0;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--mitu-body);
}
.mitu-card > a,
.mitu-step a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 16px;
  font-size: 14px;
  color: var(--mitu-green-text);
  text-decoration: none;
}
.mitu-card > a:hover,
.mitu-step a:hover {
  color: #0e6628;
}
.mitu-card > a:focus-visible,
.mitu-step a:focus-visible {
  color: #0e6628;
}
.mitu-arrow {
  transition: transform 0.15s ease;
}
.mitu-card > a:hover .mitu-arrow,
.mitu-step a:hover .mitu-arrow {
  transform: translateX(3px);
}
.mitu-card > a:focus-within .mitu-arrow,
.mitu-step a:focus-within .mitu-arrow {
  transform: translateX(3px);
}

/* A bare green line icon, no tinted square behind it. */
.mitu-cardicon {
  display: block;
  color: var(--mitu-green);
}

.mitu-band {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  flex-wrap: wrap;
  margin-top: 24px;
  padding: 22px 24px;
  border-radius: 10px;
  background: var(--cover-band);
}
.mitu-band-text {
  min-width: 0;
  flex: 1 1 380px;
}
.mitu-band h2 {
  margin: 0;
  font-size: 16px;
  letter-spacing: -0.2px;
  color: var(--mitu-ink);
}
.mitu-band p {
  margin: 7px 0 0;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--mitu-body);
}
/* The clients, lifted straight out of the design. */
.mitu-clients {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
}
/* Every client sits in a tile of the same size. The marks that came without
   one get a white tile with a hairline border, so the row reads as one set
   rather than as two black squares and three loose glyphs. */
.mitu-client-mark,
.mitu-client-tile,
.mitu-client-more {
  box-sizing: border-box;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  object-fit: contain;
}
.mitu-client-mark,
.mitu-client-more {
  background: #fff;
  border: 1px solid var(--cover-line);
}
.mitu-client-mark {
  padding: 5px;
}
.mitu-client-more {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding-bottom: 5px;
  font-size: 15px;
  line-height: 1;
  color: var(--mitu-muted);
}

.mitu-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.mitu-step {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  border: 1px solid var(--cover-line);
  border-radius: 10px;
  padding: 20px;
}
.mitu-step-body {
  min-width: 0;
}
.mitu-step-n {
  /* Optically level with the title's first line: the circle is 26px against a
     21px line box, so it rides 2px higher than a flex-start edge would put it. */
  flex: none;
  margin-top: -2px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 999px;
  background: var(--cover-band);
  font-size: 12.5px;
  font-weight: 700;
  color: var(--mitu-ink);
}
.mitu-step h3 {
  margin: 0;
  font-size: 15px;
  line-height: 1.4;
  font-weight: 700;
  color: var(--mitu-ink);
}
.mitu-step p {
  margin: 6px 0 0;
  font-size: 14px;
  line-height: 1.55;
  color: var(--mitu-body);
}

.mitu-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  margin-top: 28px;
  padding: 22px 24px;
  border-radius: 10px;
  background: var(--cover-cta);
}
.mitu-cta h2 {
  margin: 0;
  font-size: 18px;
  font-weight: 800;
  color: var(--mitu-ink);
}
.mitu-cta p {
  margin: 6px 0 0;
  font-size: 14.5px;
  color: var(--mitu-body);
}

@media (max-width: 900px) {

  .mitu-grid,
  .mitu-steps {
    grid-template-columns: 1fr;
  }
  .mitu-cover {
    padding-top: 36px;
  }

}

/* Only the title carries weight. Everything else on the cover - section
   headings, card titles, buttons, the eyebrow - sits at 500/600, so the page
   reads as one voice rather than a stack of shouts. */
.mitu-cover h2,
.mitu-cover h3 {
  font-weight: 600;
}
.mitu-cover .mitu-btn,
.mitu-cover .mitu-sec-link,
.mitu-cover .mitu-step-n,
.mitu-cover .mitu-card > a,
.mitu-cover .mitu-step a {
  font-weight: 600;
}
.mitu-cover strong {
  font-weight: 500;
}

/* A section call-to-action on an ordinary docs page, matching the "Explore"
   links on the cover. Element+class, because Fern's .fern-mdx-link sets a
   colour and an underline at the same specificity and loads after this. */
a.mitu-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 600;
  color: var(--mitu-green-text);
  text-decoration: none;
}
a.mitu-link:hover {
  color: #0e6628;
  text-decoration: none;
}
a.mitu-link:focus-visible {
  color: #0e6628;
  text-decoration: none;
}
a.mitu-link .mitu-arrow {
  transition: transform 0.15s ease;
}
a.mitu-link:hover .mitu-arrow {
  transform: translateX(2px);
}
a.mitu-link:focus-within .mitu-arrow {
  transform: translateX(2px);
}
/* Fern wraps a link's label in a <p>; hand its colour and metrics back. */
a.mitu-link p {
  margin: 0;
  font-size: inherit;
  font-weight: inherit;
  line-height: 1;
  color: inherit;
}

/* Overview capabilities. Each stands on its own, so they need more air between
   them than an article's headings would normally get, and a clear break before
   whatever follows the group. */
.mitu-caps > h3 {
  margin-top: 56px;
}
.mitu-caps > h3:first-child {
  margin-top: 28px;
}
.mitu-next {
  margin-top: 64px;
  border-top: 1px solid var(--mitu-line);
}