/* ── palette ─────────────────────────────────────────────────────────── */
:root,[data-md-color-scheme="default"]{
  --omx-green:#0d8b88; --omx-gold:#d4af37; --omx-ink:#0a1f1e;
  --md-primary-fg-color:#ffffff;
  --md-primary-fg-color--light:#ffffff;
  --md-primary-fg-color--dark:#ffffff;
  --md-primary-bg-color:var(--omx-ink);
  --md-primary-bg-color--light:#5b7575;
  --md-accent-fg-color:var(--omx-green);
  --md-typeset-a-color:var(--omx-green);
  --md-default-bg-color:#ffffff;
}
[data-md-color-scheme="slate"]{
  --md-primary-fg-color:#07110f; --md-primary-bg-color:#e8f4f4;
  --md-default-bg-color:#07110f;
  --md-typeset-a-color:#3fc9c5; --md-accent-fg-color:#3fc9c5;
}

/* ── header: white, quiet, a hairline under it ───────────────────────── */
.md-header{
  background:var(--md-default-bg-color);
  color:var(--md-primary-bg-color);
  box-shadow:none; border-bottom:1px solid rgba(10,31,30,.1);
}
[data-md-color-scheme="slate"] .md-header{border-bottom-color:rgba(255,255,255,.12)}
.md-header__title{font-weight:700;letter-spacing:-.01em}
.md-header__topic:first-child{font-weight:700}
.md-tabs{
  background:var(--md-default-bg-color);
  color:var(--md-primary-bg-color);
  border-bottom:1px solid rgba(10,31,30,.1);
}
[data-md-color-scheme="slate"] .md-tabs{border-bottom-color:rgba(255,255,255,.12)}
.md-tabs__link{opacity:.72;font-weight:500}
.md-tabs__link--active,.md-tabs__link:hover{opacity:1;color:var(--omx-green)}
.md-search__form{
  background:rgba(10,31,30,.05); border:1px solid rgba(10,31,30,.12); border-radius:10px;
}
.md-search__form:hover{background:rgba(10,31,30,.07)}
[data-md-color-scheme="slate"] .md-search__form{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.16)}
.md-search__input{color:var(--md-primary-bg-color)}
.md-search__input::placeholder{color:var(--md-primary-bg-color);opacity:.5}

/* ── typography ──────────────────────────────────────────────────────── */
.md-typeset h1{font-weight:800;letter-spacing:-.03em;color:var(--md-primary-bg-color)}
.md-typeset h2{font-weight:700;letter-spacing:-.02em;margin-top:2.2em}
.md-typeset{font-size:.78rem}
.md-content__inner{padding-top:.6rem}

/* ── the dotted gradient field, Stripe's signature ───────────────────── */
/* the field bleeds past the content column; clip it at the page edge so nothing scrolls sideways (clip, not hidden: keeps the sticky header) */
.md-container{overflow-x:clip}
.omx-hero{position:relative;margin:0 0 3.2rem;padding:3.4rem 0 0;isolation:isolate}
.omx-hero::before{
  content:"";position:absolute;inset:-3.4rem -40vw 40% -40vw;z-index:-1;
  background-image:radial-gradient(currentColor 1.1px,transparent 1.1px);
  background-size:13px 13px;
  color:var(--omx-green);
  opacity:.35;
  -webkit-mask-image:linear-gradient(105deg,#000 0%,rgba(0,0,0,.65) 26%,transparent 62%);
  mask-image:linear-gradient(105deg,#000 0%,rgba(0,0,0,.65) 26%,transparent 62%);
}
.omx-hero h1{font-size:2.9rem;line-height:1.05;margin:0 0 .5rem}
.omx-hero p.lede{font-size:1.05rem;opacity:.72;margin:0 0 1.6rem;max-width:30rem}
.omx-actions{display:flex;flex-wrap:wrap;gap:1.4rem;align-items:center}
.md-typeset .omx-btn{
  display:inline-flex;align-items:center;gap:.5rem;
  background:var(--omx-green);color:#fff;font-weight:700;
  padding:.72rem 1.3rem;border-radius:10px;text-decoration:none;
  box-shadow:0 10px 22px -10px rgba(13,139,136,.7);
  transition:transform .18s cubic-bezier(.34,1.56,.64,1),box-shadow .2s ease;
}
.md-typeset .omx-btn:hover{transform:translateY(-2px);box-shadow:0 16px 28px -12px rgba(13,139,136,.8)}
.md-typeset .omx-link{font-weight:600;text-decoration:none}
.md-typeset .omx-link:hover{text-decoration:underline}

/* ── three columns of links, like the product lists ──────────────────── */
.omx-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:2.4rem;margin:2.6rem 0}
@media (max-width:1000px){.omx-cols{grid-template-columns:1fr 1fr}}
@media (max-width:600px){.omx-cols{grid-template-columns:1fr}}
.omx-cols h3{font-size:1.05rem;font-weight:700;margin:0 0 .7rem;letter-spacing:-.01em}
.omx-cols ul{list-style:none;margin:0;padding:0}
.omx-cols li{margin:0 0 .46rem}
.omx-cols a{text-decoration:none;font-weight:500}
.omx-cols a:hover{text-decoration:underline}

/* ── panels ──────────────────────────────────────────────────────────── */
.md-typeset .admonition{border-radius:12px;border-left-width:3px;box-shadow:none;
  border:1px solid rgba(10,31,30,.1);border-left:3px solid var(--omx-green)}
.md-typeset code{border-radius:5px}
.md-typeset table:not([class]){border-radius:10px;overflow:hidden;box-shadow:none;
  border:1px solid rgba(10,31,30,.1)}
.md-typeset table:not([class]) th{background:rgba(13,139,136,.07);font-weight:700}
/* footer: dark band, light text (the theme took its text colour from the dark primary, so it vanished) */
.md-footer,.md-footer-meta{--md-footer-fg-color:#fff;--md-footer-fg-color--light:rgba(255,255,255,.72);
  --md-footer-fg-color--lighter:rgba(255,255,255,.5);color:#fff}
.md-footer{background:var(--omx-ink)}
.md-footer-meta{background:rgba(0,0,0,.35)}
.md-footer a,.md-footer-meta a,.md-footer__title,.md-footer__direction,.md-copyright,.md-copyright a{color:inherit}
.md-footer__direction,.md-copyright{opacity:.72}
.md-footer-meta{--md-default-fg-color:rgba(255,255,255,.72)} /* Zensical paints the footer link in body ink */
.md-copyright__highlight{color:#fff}

/* ── Zensical overrides (its typeset rules outrank the plain selectors above) ── */
.md-typeset .omx-actions p{display:flex;flex-wrap:wrap;gap:1.4rem;align-items:center;margin:0}
.md-typeset .omx-cols ul:not([hidden]),.md-typeset .omx-cols ul li{margin-left:0;padding-left:0}
@media (max-width:600px){.md-typeset .omx-hero h1{font-size:2.1rem}}

/* primary button: the theme's primary colour is white (for the header), so give it the brand green */
.md-typeset .md-button--primary{background:var(--omx-green);border-color:var(--omx-green);color:#fff}
.md-typeset .md-button--primary:focus,.md-typeset .md-button--primary:hover{background:#0a7472;border-color:#0a7472;color:#fff}

/* Endpoint paths stay whole on wide screens; phones wrap them. */
@media (min-width: 60em) { .md-typeset td:nth-child(2) code { white-space: nowrap; } }
/* phones: long code in a table cell (marked .omx-long by omxus.js, which also adds break points
   after / . _ - ? & =) wraps at those points; short code stays whole. A table still too wide
   (data-omx-squeeze, set by omxus.js) lets long code break anywhere rather than scroll sideways. */
@media (max-width: 59.99em) {
  .md-typeset td code { word-break: normal; overflow-wrap: normal; }
  .md-typeset td code.omx-long { overflow-wrap: break-word; }
  .md-typeset table[data-omx-squeeze] td code.omx-long { overflow-wrap: anywhere; }
}
/* phones: tighter cells so four-column route tables fit without cutting off the last column */
@media (max-width: 44.99em) { .md-typeset table:not([class]) :is(th, td) { padding: .75em .5em; min-width: 0; } }