/*
 * Landing-page components for every brand (brand book §9.4, §8.7 segmented control, §8.8 stepper).
 *
 * Markup lives in docs/overrides/partials/ds-*.html (hero and its panels) and in the landing pages
 * themselves (md_in_html blocks). Colours are roles from css/tokens.css; the customer previews keep a
 * palette of their own (--pv-*) because they depict the merchant's payment page, not the docs.
 */

/* Default colours of the customer previews (Finrelay's hosted page); a brand sheet may set its own. */
:root {
  --pv-brand-from:   #2429CC;
  --pv-brand-to:     #5512C2;
  --pv-brand-accent: #2956EC;
}

:root,
[data-md-color-scheme] {
  --ds-pci-outer: var(--ds-surface);
  --ds-pci-ring:  rgb(34 41 42 / 10%);
  --ds-pci-bg:    #E6F4E5;
  --ds-pci-fg:    var(--green-700);
  --ds-marker-bg: var(--brand-950);
  --ds-marker-fg: #FFFFFF;
}

[data-md-color-scheme="slate"] {
  --ds-pci-ring:  rgb(161 213 160 / 28%);
  --ds-pci-bg:    rgb(48 101 48 / 45%);
  --ds-pci-fg:    var(--green-300);
  --ds-marker-bg: var(--neutral-50);
  --ds-marker-fg: var(--brand-950);
}

/* ─── Icons (SVG files as masks, so they take the current text colour) ───── */
.ds-icon {
  display: inline-block;
  flex-shrink: 0;
  width: 1em;
  height: 1em;
  background-color: currentcolor;
  -webkit-mask: center / contain no-repeat;
  mask: center / contain no-repeat;
  vertical-align: -.125em;
}

.ds-icon-arrow        { -webkit-mask-image: url("../icons/arrow-right.svg"); mask-image: url("../icons/arrow-right.svg"); }
.ds-icon-arrow-left   { -webkit-mask-image: url("../icons/arrow-left.svg"); mask-image: url("../icons/arrow-left.svg"); }
.ds-icon-shield       { -webkit-mask-image: url("../icons/shield.svg"); mask-image: url("../icons/shield.svg"); }
.ds-icon-lock         { -webkit-mask-image: url("../icons/lock.svg"); mask-image: url("../icons/lock.svg"); }
.ds-icon-check        { -webkit-mask-image: url("../icons/check.svg"); mask-image: url("../icons/check.svg"); }
.ds-icon-image        { -webkit-mask-image: url("../icons/image.svg"); mask-image: url("../icons/image.svg"); }
.ds-icon-card         { -webkit-mask-image: url("../icons/card.svg"); mask-image: url("../icons/card.svg"); }
.ds-icon-chevron-down { -webkit-mask-image: url("../icons/chevron-down.svg"); mask-image: url("../icons/chevron-down.svg"); }
.ds-icon-chevron      { -webkit-mask-image: url("../icons/chevron-right.svg"); mask-image: url("../icons/chevron-right.svg"); }
.ds-icon-alert        { -webkit-mask-image: url("../icons/alert.svg"); mask-image: url("../icons/alert.svg"); }
.ds-icon-loop         { -webkit-mask-image: url("../icons/loop.svg"); mask-image: url("../icons/loop.svg"); }
.ds-icon-info         { -webkit-mask-image: url("../icons/info.svg"); mask-image: url("../icons/info.svg"); }

/* Read by screen readers, not shown. */
.ds-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* "Read guide →" */
.ds-link-arrow,
.md-typeset .ds-link-arrow {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  font-size: .7rem;
  font-weight: 600;
  color: var(--ds-brand-text);
}

.ds-link-arrow::after,
.ds-button-arrow::after {
  content: "";
  width: .8rem;
  height: .8rem;
  background-color: currentcolor;
  -webkit-mask: url("../icons/arrow-right.svg") center / contain no-repeat;
  mask: url("../icons/arrow-right.svg") center / contain no-repeat;
}

/* ─── Hero band ──────────────────────────────────────────────────────────── */
.ds-hero {
  border-bottom: 1px solid var(--ds-border);
  background-color: var(--ds-surface-2);
}

.ds-hero-grid {
  display: flex;
  align-items: center;
  gap: 3.2rem;
  padding: 2.8rem .8rem 3.2rem;
}

.ds-hero-text {
  flex: 1 1 auto;
  min-width: 0;
}

.ds-eyebrow {
  margin: 0;
  font-size: .65rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ds-brand-text);
}

.ds-hero h1 {
  margin: .7rem 0 0;
  font-size: 2.6rem;
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -.02em;
  color: var(--ds-heading);
}

.ds-lede {
  max-width: 31rem;
  margin: .9rem 0 0;
  font-size: .9rem;
  font-weight: 500;
  line-height: 1.6;
  color: var(--ds-body);
}

.ds-lede code {
  font-family: var(--md-code-font-family);
  font-size: .8rem;
}

.ds-hero .ds-callout {
  display: block;
  max-width: 31rem;
  margin: 1.2rem 0 0;
  padding: .7rem .8rem .7rem 2.2rem;
  border-radius: var(--ds-radius-md);
  font-size: .7rem;
  font-weight: 500;
  line-height: 1.5;
  position: relative;
}

.ds-hero .ds-callout::before {
  content: "";
  position: absolute;
  top: .8rem;
  left: .8rem;
  width: .9rem;
  height: .9rem;
  background-color: currentcolor;
  -webkit-mask: url("../icons/alert.svg") center / contain no-repeat;
  mask: url("../icons/alert.svg") center / contain no-repeat;
}

.ds-callout-warning {
  color: var(--ds-warn-fg);
  background-color: var(--ds-warn-bg);
}

.ds-callout strong {
  font-weight: 700;
  color: inherit;
}

.ds-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
  margin-top: 1.4rem;
}

.ds-hero-actions .md-button {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  height: 2.4rem;
  padding: 0 1.1rem;
  border: 1px solid var(--ds-border-strong);
  border-radius: var(--ds-radius-xl);
  font-size: .75rem;
  font-weight: 600;
  color: var(--ds-heading);
  background-color: var(--ds-surface);
}

.ds-hero-actions .md-button:hover {
  border-color: var(--ds-brand);
  color: var(--ds-brand-text);
}

.ds-hero-actions .md-button--primary,
.ds-hero-actions .md-button--primary:hover {
  border-color: var(--ds-brand-strong);
  color: var(--ds-on-brand);
  background-color: var(--ds-brand-strong);
}

.ds-hero-actions .md-button--primary:hover {
  border-color: var(--ds-button-hover);
  background-color: var(--ds-button-hover);
}

.ds-hero-panel {
  flex: 0 0 var(--ds-hero-panel);
  width: var(--ds-hero-panel);
  padding: 1.2rem;
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-lg);
  background-color: var(--ds-surface);
  box-shadow: var(--ds-card-shadow);
}

.ds-panel-title {
  font-size: .75rem;
  font-weight: 700;
  color: var(--ds-heading);
}

.ds-panel-foot {
  margin: .9rem 0 0;
  padding-top: .7rem;
  border-top: 1px solid var(--ds-border);
  font-size: .6rem;
  font-weight: 500;
  color: var(--ds-muted);
}

/* The hero replaces the page's top margin. */
.md-container:has(> .ds-hero) .md-main__inner {
  margin-top: 0;
}

/* On desktop a hero with a panel is at least as tall as a four-step flow card, so the section bar
   below it stays put as the reader moves between pages. */
@media screen and (min-width: 60em) {
  .ds-hero-grid:has(> .ds-hero-panel) {
    min-height: 28rem;
  }
}

@media screen and (max-width: 59.984375em) {
  .ds-hero-grid {
    flex-direction: column;
    align-items: stretch;
    gap: 1.6rem;
    padding: 1.6rem .8rem 2rem;
  }

  .ds-hero h1 {
    font-size: 1.7rem;
  }

  .ds-hero-panel {
    flex-basis: auto;
    width: auto;
  }
}

/* ─── Flow card: who does what ───────────────────────────────────────────── */
.ds-flow {
  display: flex;
  flex-direction: column;
}

.ds-flow-step {
  display: flex;
  align-items: center;
  gap: .7rem;
  padding: .7rem;
  border: 1.5px dashed var(--ds-dash);
  border-radius: var(--ds-radius-md);
}

.ds-flow-number {
  display: grid;
  flex-shrink: 0;
  place-items: center;
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 50%;
  font-size: .7rem;
  font-weight: 700;
  color: var(--ds-text-strong);
  background-color: var(--ds-subtle);
}

.ds-flow-text {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-width: 0;
}

.ds-flow-title {
  font-size: .75rem;
  font-weight: 700;
  line-height: 1.35;
  color: var(--ds-heading);
}

.ds-flow-note {
  font-size: .65rem;
  font-weight: 500;
  line-height: 1.4;
  color: var(--ds-muted);
}

.ds-flow-note code {
  font-family: var(--md-code-font-family);
  font-size: .6rem;
  overflow-wrap: anywhere;
}

.ds-flow-step[data-owner="brand"] {
  border-style: solid;
  border-color: var(--ds-brand);
  background-color: var(--ds-brand-tint);
}

.ds-flow-step[data-owner="brand"] .ds-flow-number {
  color: var(--ds-on-brand);
  background-color: var(--ds-brand-fill);
}

.ds-flow-step[data-owner="brand"] .ds-flow-title {
  color: var(--ds-brand-deep);
}

.ds-flow-step[data-owner="brand"] .ds-flow-note {
  color: var(--ds-brand-text);
}

.ds-flow-step[data-owner="third-party"] {
  border-style: solid;
  border-color: var(--ds-border);
  background-color: var(--ds-subtle);
}

.ds-flow-step:is([data-owner="third-party"], [data-nested]) .ds-flow-note {
  color: var(--ds-muted-on-subtle);
}

.ds-flow-step[data-owner="third-party"] .ds-flow-number,
.ds-flow-step[data-nested][data-owner="merchant"] .ds-flow-number {
  background-color: var(--ds-surface);
}

.ds-flow-step[data-nested][data-owner="merchant"] {
  padding: .6rem .7rem;
  border: 0;
  background-color: var(--ds-subtle);
}

.ds-flow-link {
  display: block;
  height: 1.1rem;
  margin-left: 1.45rem;
  border-left: 2px solid var(--ds-border-strong);
}

.ds-flow-group {
  display: flex;
  flex-direction: column;
  gap: .6rem;
  padding: .7rem;
  border: 1.5px dashed var(--ds-dash);
  border-radius: var(--ds-radius-md);
}

.ds-flow-group-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .6rem;
}

.ds-pci {
  display: flex;
  flex-shrink: 0;
  padding: .2rem;
  border-radius: var(--ds-radius-pill);
  background-color: var(--ds-pci-outer);
  box-shadow: 0 0 0 1px var(--ds-pci-ring);
}

.ds-pci-inner {
  display: flex;
  align-items: center;
  gap: .25rem;
  padding: .2rem .5rem;
  border-radius: var(--ds-radius-pill);
  font-size: .6rem;
  font-weight: 700;
  white-space: nowrap;
  color: var(--ds-pci-fg);
  background-color: var(--ds-pci-bg);
}

.ds-scope {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: .2rem;
  padding: .15rem .45rem;
  border: 1px solid var(--ds-border-strong);
  border-radius: var(--ds-radius-pill);
  font-size: .55rem;
  font-weight: 700;
  white-space: nowrap;
  color: var(--ds-text-strong);
}

/* Owner legend — shared by the flow card and the sequence diagrams */
.ds-legend {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem 1rem;
  margin: .9rem 0 0;
  padding-top: .7rem;
  border-top: 1px solid var(--ds-border);
  font-size: .6rem;
  font-weight: 500;
  color: var(--ds-muted);
}

.ds-legend-item {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
}

.ds-legend-item:not([data-owner="pci"])::before {
  content: "";
  width: .7rem;
  height: .7rem;
  border-radius: .2rem;
  border: 1.5px solid var(--ds-border-strong);
  background-color: var(--ds-surface);
}

.ds-legend-item[data-owner="brand"]::before {
  border-color: var(--ds-brand);
  background-color: var(--ds-brand-tint);
}

.ds-legend-item[data-owner="merchant"]::before {
  border-style: dashed;
  border-color: var(--ds-dash);
  background-color: transparent;
}

.ds-legend-item[data-owner="third-party"]::before {
  border-color: var(--ds-border);
  background-color: var(--ds-subtle);
}

.ds-legend-item[data-owner="pci"] .ds-icon {
  width: .8rem;
  height: .8rem;
  color: var(--ds-pci-fg);
}

/* ─── Environment card ───────────────────────────────────────────────────── */
.ds-env-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .6rem;
}

.ds-env-values {
  margin: 0;
}

.ds-env-values dt {
  margin-top: .9rem;
  font-size: .65rem;
  font-weight: 500;
  color: var(--ds-muted);
}

.ds-env-values dd {
  margin: .3rem 0 0;
}

.ds-env-values code {
  display: block;
  padding: .55rem .7rem;
  border-radius: var(--ds-radius-sm);
  font-family: var(--md-code-font-family);
  font-size: .6rem;
  line-height: 1.5;
  word-break: break-all;
  color: var(--ds-text-strong);
  background-color: var(--ds-subtle);
}

.ds-env:has(#ds-env-uat:checked) .ds-env-values[data-env="prod"],
.ds-env:has(#ds-env-prod:checked) .ds-env-values[data-env="uat"] {
  display: none;
}

/* ─── Segmented control (§8.7): a pill that slides between options ───────── */
.ds-segmented {
  --ds-seg-count: 2;
  --ds-seg-index: 0;

  position: relative;
  display: inline-grid;
  grid-auto-columns: 1fr;
  grid-auto-flow: column;
  padding: .15rem;
  border-radius: var(--ds-radius-xxl);
  background-color: var(--ds-subtle);
}

.ds-segmented:has(> input:nth-of-type(3)) { --ds-seg-count: 3; }
.ds-segmented:has(> input:nth-of-type(2):checked) { --ds-seg-index: 1; }
.ds-segmented:has(> input:nth-of-type(3):checked) { --ds-seg-index: 2; }

.ds-segmented::before {
  content: "";
  position: absolute;
  top: .15rem;
  bottom: .15rem;
  left: .15rem;
  width: calc((100% - .3rem) / var(--ds-seg-count));
  border-radius: var(--ds-radius-xxl);
  background-color: var(--ds-surface);
  box-shadow: 0 1px 3px rgb(34 41 42 / 14%);
  transform: translateX(calc(100% * var(--ds-seg-index)));
}

.ds-segmented > input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.ds-segmented > label {
  position: relative;
  display: grid;
  place-items: center;
  height: 1.8rem;
  padding: 0 .7rem;
  border-radius: var(--ds-radius-xxl);
  font-size: .65rem;
  font-weight: 600;
  white-space: nowrap;
  color: var(--ds-muted-on-subtle);
  cursor: pointer;
}

.ds-segmented > label:hover,
.ds-segmented > input:checked + label {
  color: var(--ds-heading);
}

.ds-segmented > input:focus-visible + label {
  outline: 2px solid var(--ds-focus);
  outline-offset: 2px;
}

/* ─── Operations card ────────────────────────────────────────────────────── */
.ds-ops-list {
  margin: .7rem 0 0;
  padding: 0;
  list-style: none;
}

.ds-ops-list li {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .6rem 0;
  border-bottom: 1px solid var(--ds-border);
}

.ds-ops-list li:last-child {
  border-bottom: 0;
}

.ds-op {
  padding: .15rem .45rem;
  border-radius: var(--ds-radius-pill);
  font-family: var(--md-code-font-family);
  font-size: .55rem;
  font-weight: 600;
  color: var(--ds-text-strong);
  background-color: var(--ds-subtle);
}

.ds-op[data-brand] {
  color: var(--ds-brand-text);
  background-color: var(--ds-brand-tint);
}

.ds-ops-list .ds-icon {
  width: .7rem;
  height: .7rem;
  color: var(--ds-muted);
}

.ds-ops-text {
  margin-left: auto;
  font-size: .62rem;
  font-weight: 500;
  color: var(--ds-muted);
}

/* ─── Landing-page sections ──────────────────────────────────────────────── */
/* The hero carries the H1, so the article starts right under the section bar. */
.md-container:has(> .ds-hero) .md-content__inner {
  padding-top: 0;
}

/* The section bar already sets the first section off from the hero. */
.md-container:has(> .ds-hero) .md-content__inner > :first-child {
  margin-top: 1.6rem;
}

/* Landing pages (`landing: true`, main.html): wider section rhythm, intro paragraphs under each h2. */
.md-typeset.ds-landing h2 {
  margin: 3.2rem 0 0;
}

/* Landing-page tables span the column, as in the design; Material sizes them to their content. */
.md-typeset.ds-landing .md-typeset__table {
  display: block;
}

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

.md-typeset .ds-section-intro,
.md-typeset.ds-landing h2 + p {
  max-width: 36rem;
  margin: .5rem 0 0;
  font-size: .8rem;
  line-height: 1.6;
}

.md-typeset .ds-section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: .8rem;
}

/* Two columns: a list beside a code panel */
.md-typeset .ds-split {
  display: grid;
  grid-template-columns: minmax(0, 23rem) minmax(0, 1fr);
  gap: 2rem;
  align-items: start;
  margin-top: 1.4rem;
}

.md-typeset .ds-split > * {
  min-width: 0;
}

.md-typeset .ds-split > :first-child > :first-child,
.md-typeset .ds-split .highlight:first-child,
.md-typeset .ds-split .tabbed-set:first-child {
  margin-top: 0;
}

@media screen and (max-width: 59.984375em) {
  .md-typeset .ds-split {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ─── Stepper (§8.8) ─────────────────────────────────────────────────────── */
.md-typeset .ds-steps {
  display: flex;
  flex-direction: column;
  gap: .2rem;
  counter-reset: ds-step;
}

.md-typeset .ds-step {
  position: relative;
  padding: .7rem .7rem .7rem 2.9rem;
  border-radius: var(--ds-radius-md);
  counter-increment: ds-step;
}

.md-typeset .ds-step::before {
  content: counter(ds-step);
  position: absolute;
  top: .75rem;
  left: .7rem;
  display: grid;
  place-items: center;
  width: 1.6rem;
  height: 1.6rem;
  border: 1.5px solid var(--ds-border-strong);
  border-radius: 50%;
  font-size: .65rem;
  font-weight: 700;
  color: var(--ds-muted);
  background-color: var(--ds-surface);
}

.md-typeset .ds-step > p {
  margin: 0;
  font-size: .7rem;
  line-height: 1.55;
  color: var(--ds-muted);
}

.md-typeset .ds-step > p:first-child {
  margin-bottom: .15rem;
  font-size: .8rem;
  font-weight: 700;
  color: var(--ds-heading);
}

.md-typeset .ds-step > p:first-child strong {
  font-weight: 700;
  color: inherit;
}

.md-typeset .ds-step[data-state="current"] {
  background-color: var(--ds-brand-tint);
}

.md-typeset .ds-step[data-state="current"]::before {
  border-color: var(--ds-brand-fill);
  color: var(--ds-on-brand);
  background-color: var(--ds-brand-fill);
}

.md-typeset .ds-step[data-state="current"] > p:first-child {
  color: var(--ds-brand-deep);
}

.md-typeset .ds-step[data-state="current"] > p {
  color: var(--ds-brand-deep);
}

.md-typeset .ds-step[data-state="done"]::before {
  content: "";
  border-color: transparent;
  background-color: var(--ds-success-bg);
}

.md-typeset .ds-step[data-state="done"]::after {
  content: "";
  position: absolute;
  top: 1.15rem;
  left: 1.1rem;
  width: .8rem;
  height: .8rem;
  background-color: var(--ds-success-fg);
  -webkit-mask: url("../icons/check.svg") center / contain no-repeat;
  mask: url("../icons/check.svg") center / contain no-repeat;
}

/* Field names in a step are plain monospace, as in the design, not pills. */
.md-typeset .ds-step code {
  padding: 0;
  border: 0;
  font-size: .92em;
  color: var(--ds-text-strong);
  background: none;
}

.md-typeset .ds-step[data-state="current"] code {
  color: inherit;
}

/* ─── Parameter list: a table shown as name/description rows ─────────────── */
.md-typeset .ds-params > p:first-child {
  margin: 0 0 .4rem;
  font-size: .7rem;
  font-weight: 700;
  color: var(--ds-heading);
}

.md-typeset .ds-params .md-typeset__scrollwrap,
.md-typeset .ds-params .md-typeset__table {
  margin: 0;
  padding: 0;
}

.md-typeset .ds-params table:not([class]) {
  display: table;
  width: 100%;
  font-size: .65rem;
}

.md-typeset .ds-params table:not([class]) thead {
  display: none;
}

.md-typeset .ds-params table:not([class]) td {
  padding: .65rem 0;
  border-top: 0;
  border-bottom: 1px solid var(--ds-border);
  line-height: 1.55;
  color: var(--ds-muted);
}

.md-typeset .ds-params table:not([class]) td:first-child {
  width: 8.5rem;
  padding-right: .8rem;
}

.md-typeset .ds-params table:not([class]) td:first-child code {
  padding: 0;
  border: 0;
  font-size: .62rem;
  font-weight: 500;
  color: var(--ds-heading);
  background: none;
}

.md-typeset .ds-params table:not([class]) td:not(:first-child) code {
  padding: 0;
  border: 0;
  font-size: .92em;
  color: var(--ds-text-strong);
  background: none;
}

.md-typeset .ds-params table:not([class]) tbody tr:hover {
  background: none;
}

.md-typeset .ds-params + .ds-params {
  margin-top: 1rem;
}

/* Optional fields as code pills */
.md-typeset .ds-pills {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
  margin: .4rem 0 0;
}

.md-typeset .ds-pills code {
  padding: .15rem .4rem;
  font-size: .58rem;
}

.md-typeset .ds-pills-label {
  margin: 1rem 0 0;
  font-size: .62rem;
  font-weight: 500;
  color: var(--ds-muted);
}

/* ─── Cards ──────────────────────────────────────────────────────────────── */
.md-typeset .ds-cards {
  display: grid;
  grid-template-columns: repeat(var(--ds-cols, 3), minmax(0, 1fr));
  gap: .8rem;
  margin-top: 1.1rem;
}

.md-typeset .ds-cards[data-cols="5"] { --ds-cols: 5; }
.md-typeset .ds-cards[data-cols="4"] { --ds-cols: 4; }
.md-typeset .ds-cards[data-cols="2"] { --ds-cols: 2; }

@media screen and (max-width: 59.984375em) {
  .md-typeset .ds-cards {
    --ds-cols: 2;
  }

  .md-typeset .ds-cards[data-cols] {
    --ds-cols: 2;
  }
}

@media screen and (max-width: 37.484375em) {
  .md-typeset .ds-cards,
  .md-typeset .ds-cards[data-cols] {
    --ds-cols: 1;
  }
}

.md-typeset .ds-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: .3rem;
  padding: 1rem 1.1rem;
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-md);
  background-color: var(--ds-surface);
}

.md-typeset .ds-card > p {
  margin: 0;
  font-size: .7rem;
  line-height: 1.5;
  color: var(--ds-muted);
}

.md-typeset .ds-card > p:first-child {
  font-size: .85rem;
  font-weight: 700;
  color: var(--ds-heading);
}

.md-typeset .ds-card > p:first-child strong {
  font-weight: 700;
  color: inherit;
}

.md-typeset .ds-card > p:last-child {
  margin-top: auto;
  padding-top: .5rem;
}

.md-typeset .ds-card .ds-meta {
  font-size: .65rem;
  color: var(--ds-muted);
}

.md-typeset .ds-card .ds-meta strong {
  margin-left: .3rem;
  font-weight: 600;
  color: var(--ds-heading);
}

/* The card's link covers the whole card. */
.md-typeset .ds-card a.ds-link-arrow::before,
.md-typeset .ds-card a.ds-card-link::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
}

.md-typeset .ds-card a.ds-card-link {
  color: inherit;
}

.md-typeset .ds-card:hover {
  border-color: var(--ds-brand);
}

.md-typeset .ds-card:has(a:focus-visible) {
  outline: 2px solid var(--ds-focus);
  outline-offset: 2px;
}

.md-typeset .ds-card a:focus-visible {
  outline: none;
}

/* Compact link cards ("More payment methods") with a trailing arrow */
.md-typeset .ds-cards[data-variant="compact"] .ds-card {
  padding: .8rem 2.4rem .8rem 1rem;
}

.md-typeset .ds-cards[data-variant="compact"] .ds-card > p:first-child {
  font-size: .75rem;
}

.md-typeset .ds-cards[data-variant="compact"] .ds-card > p:last-child {
  padding-top: 0;
  font-size: .62rem;
}

.md-typeset .ds-cards[data-variant="compact"] .ds-card::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 1rem;
  width: .8rem;
  height: .8rem;
  margin-top: -.4rem;
  background-color: var(--ds-muted);
  -webkit-mask: url("../icons/arrow-right.svg") center / contain no-repeat;
  mask: url("../icons/arrow-right.svg") center / contain no-repeat;
}

.md-typeset .ds-cards[data-variant="compact"] .ds-card:hover::after {
  background-color: var(--ds-brand-text);
}

/* ─── Picker: radio options that switch the panels below them ────────────── */
.md-typeset .ds-picker-options {
  display: grid;
  grid-template-columns: repeat(var(--ds-cols, 5), minmax(0, 1fr));
  gap: .8rem;
  margin-top: 1.1rem;
}

@media screen and (max-width: 59.984375em) {
  .md-typeset .ds-picker-options {
    --ds-cols: 2;
  }
}

.md-typeset .ds-picker-options > input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.md-typeset .ds-picker-options > label {
  display: flex;
  flex-direction: column;
  gap: .35rem;
  padding: 1rem;
  border: 1.5px solid var(--ds-border);
  border-radius: var(--ds-radius-md);
  background-color: var(--ds-surface);
  cursor: pointer;
}

.md-typeset .ds-picker-options > label:hover {
  border-color: var(--ds-brand);
}

.md-typeset .ds-picker-options > input:checked + label {
  border-color: var(--ds-brand);
  background-color: var(--ds-brand-tint);
}

.md-typeset .ds-picker-options > input:focus-visible + label {
  outline: 2px solid var(--ds-focus);
  outline-offset: 2px;
}

.md-typeset .ds-picker-title {
  font-size: .8rem;
  font-weight: 700;
  color: var(--ds-heading);
}

.md-typeset .ds-picker-options code {
  align-self: flex-start;
  padding: 0;
  border: 0;
  font-size: .6rem;
  color: var(--ds-brand-text);
  background: none;
}

.md-typeset .ds-picker-text {
  font-size: .65rem;
  line-height: 1.45;
  color: var(--ds-muted);
}

/* Segmented variant (Capture / Refund / Void) */
.md-typeset .ds-picker-options.ds-segmented {
  display: inline-grid;
  grid-template-columns: none;
  gap: 0;
  margin-top: 0;
}

.md-typeset .ds-picker-options.ds-segmented > label {
  display: grid;
  gap: 0;
  padding: 0 .9rem;
  border: 0;
  background: none;
}

.md-typeset .ds-picker-options.ds-segmented > input:checked + label {
  background: none;
}

/* Show the panel that matches the checked option (up to six). */
.md-typeset .ds-picker:has(.ds-picker-options > input:nth-of-type(1):checked) .ds-picker-panels > :not(:nth-child(1)),
.md-typeset .ds-picker:has(.ds-picker-options > input:nth-of-type(2):checked) .ds-picker-panels > :not(:nth-child(2)),
.md-typeset .ds-picker:has(.ds-picker-options > input:nth-of-type(3):checked) .ds-picker-panels > :not(:nth-child(3)),
.md-typeset .ds-picker:has(.ds-picker-options > input:nth-of-type(4):checked) .ds-picker-panels > :not(:nth-child(4)),
.md-typeset .ds-picker:has(.ds-picker-options > input:nth-of-type(5):checked) .ds-picker-panels > :not(:nth-child(5)),
.md-typeset .ds-picker:has(.ds-picker-options > input:nth-of-type(6):checked) .ds-picker-panels > :not(:nth-child(6)) {
  display: none;
}

/* A split keeps its own top margin, so it clears the section head above the panels. */
.md-typeset .ds-picker-panels > * > :first-child:not(.ds-split) {
  margin-top: 0;
}

/* Operation badge above the operation's description */
.md-typeset .ds-op-line {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin: 0 0 .5rem;
  font-size: .65rem;
  color: var(--ds-muted);
}

/* ─── Checklist ("Before you go live") ───────────────────────────────────── */
.md-typeset .ds-checklist > p:first-child {
  margin: 0 0 .4rem;
  font-size: .75rem;
  font-weight: 700;
  color: var(--ds-heading);
}

.md-typeset .ds-checklist ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.md-typeset .ds-checklist li {
  position: relative;
  margin: 0;
  padding: .45rem 0 .45rem 1.5rem;
  font-size: .7rem;
  line-height: 1.5;
}

.md-typeset .ds-checklist li::before {
  content: "";
  position: absolute;
  top: .55rem;
  left: 0;
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  background-color: var(--ds-success-bg);
}

.md-typeset .ds-checklist li::after {
  content: "";
  position: absolute;
  top: .75rem;
  left: .2rem;
  width: .6rem;
  height: .6rem;
  background-color: var(--ds-success-fg);
  -webkit-mask: url("../icons/check.svg") center / contain no-repeat;
  mask: url("../icons/check.svg") center / contain no-repeat;
}

/* ─── Status flow (PENDING → APPROVED / DECLINED) ────────────────────────── */
.md-typeset .ds-status-flow {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  gap: .8rem;
  align-items: center;
}

.md-typeset .ds-status-flow .ds-status-branch {
  display: flex;
  flex-direction: column;
  gap: .6rem;
}

.md-typeset .ds-status-box {
  padding: .8rem .9rem;
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-md);
  font-size: .65rem;
  line-height: 1.5;
  color: var(--ds-muted);
  background-color: var(--ds-surface);
}

.md-typeset .ds-status-box code {
  display: inline-block;
  margin-bottom: .3rem;
}

.md-typeset .ds-status-flow > .ds-icon {
  width: .8rem;
  height: .8rem;
  color: var(--ds-muted);
}

/* ─── Page end: "Full API reference for this page →" ─────────────────────── */
/* Landing pages end with previous / next cards between the nav sections (partials/ds-pager.html). */
.md-typeset .ds-pager {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .8rem;
  margin-top: 2.4rem;
  padding-top: 2rem;
  border-top: 1px solid var(--ds-border);
}

.md-typeset .ds-pager-link {
  display: flex;
  flex-direction: column;
  gap: .2rem;
  padding: .8rem 1rem;
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-md);
  background-color: var(--ds-surface);
  color: inherit;
  transition: border-color var(--ds-dur-fast) var(--ds-ease-standard);
}

.md-typeset .ds-pager-link[data-direction="next"] {
  grid-column: 2;
  align-items: flex-end;
  text-align: right;
}

.md-typeset .ds-pager-link:hover {
  border-color: var(--ds-brand);
}

.md-typeset .ds-pager-direction {
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  font-size: .6rem;
  font-weight: 500;
  color: var(--ds-muted);
}

.md-typeset .ds-pager-direction .ds-icon {
  width: .7rem;
  height: .7rem;
}

.md-typeset .ds-pager-title {
  font-size: .75rem;
  font-weight: 700;
  color: var(--ds-heading);
}

.ds-page-end {
  display: flex;
  justify-content: flex-end;
  margin-top: 2.4rem;
  padding-top: 1rem;
  border-top: 1px solid var(--ds-border);
}

.md-typeset .ds-pager + .ds-page-end {
  margin-top: 1.2rem;
}

/* ─── Not found (overrides/404.html) ─────────────────────────────────────── */
.md-typeset .ds-not-found {
  padding: 2rem 0 4rem;
}

.md-typeset .ds-not-found h1 {
  margin: .7rem 0 0;
  font-size: 2.6rem;
  line-height: 1.08;
}

/* ─── Switch: radio options that show one of the panels after them ───────── */
/* The payment methods browser nests switches: category → method → section → diagram. Every selector
   goes through child combinators, so a switch inside another's panel keeps its own state. The variant
   only styles the options: tabs (categories), tabs-small (a method's sections), pills (methods),
   chips (diagram and flow choices) and cards (a list beside its panel). The section bar's tabs
   (.ds-section-tabs) share the tabs rules, with links in place of radios. */
.md-typeset .ds-switch-options,
.md-typeset .ds-section-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
}

.md-typeset .ds-switch-options > input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.md-typeset .ds-switch-options > label {
  cursor: pointer;
}

.md-typeset .ds-switch-options > input:focus-visible + label,
.md-typeset .ds-section-tabs > a:focus-visible,
.md-typeset .ds-jump a:focus-visible {
  outline: 2px solid var(--ds-focus);
  outline-offset: 2px;
}

.md-typeset .ds-switch:has(> .ds-switch-options > input:nth-of-type(1):checked) > .ds-switch-panels > :not(:nth-child(1)),
.md-typeset .ds-switch:has(> .ds-switch-options > input:nth-of-type(2):checked) > .ds-switch-panels > :not(:nth-child(2)),
.md-typeset .ds-switch:has(> .ds-switch-options > input:nth-of-type(3):checked) > .ds-switch-panels > :not(:nth-child(3)),
.md-typeset .ds-switch:has(> .ds-switch-options > input:nth-of-type(4):checked) > .ds-switch-panels > :not(:nth-child(4)),
.md-typeset .ds-switch:has(> .ds-switch-options > input:nth-of-type(5):checked) > .ds-switch-panels > :not(:nth-child(5)),
.md-typeset .ds-switch:has(> .ds-switch-options > input:nth-of-type(6):checked) > .ds-switch-panels > :not(:nth-child(6)),
.md-typeset .ds-switch:has(> .ds-switch-options > input:nth-of-type(7):checked) > .ds-switch-panels > :not(:nth-child(7)),
.md-typeset .ds-switch:has(> .ds-switch-options > input:nth-of-type(8):checked) > .ds-switch-panels > :not(:nth-child(8)) {
  display: none;
}

/* A code block or diagram card opening a panel sits right under the options. A method and a Jump to
   row keep their margin, so they stay clear of the tabs. */
.md-typeset .ds-switch-panels > * > :first-child:not(.ds-method, .ds-jump) {
  margin-top: 0;
}

/* tabs and tabs-small: underlined, on a rule across the full width. They stay on one row and scroll
   sideways when the row is too narrow, so the focus ring goes inside the label, clear of the clip. */
.md-typeset .ds-switch[data-variant^="tabs"] > .ds-switch-options,
.md-typeset .ds-section-tabs {
  flex-wrap: nowrap;
  gap: 1.4rem;
  overflow-x: auto;
  border-bottom: 1px solid var(--ds-border);
  scrollbar-width: none;
}

.md-typeset .ds-switch[data-variant^="tabs"] > .ds-switch-options > input:focus-visible + label,
.md-typeset .ds-section-tabs > a:focus-visible {
  outline-offset: -2px;
}

.md-typeset .ds-switch[data-variant^="tabs"] > .ds-switch-options > label,
.md-typeset .ds-section-tabs > a {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  gap: .4rem;
  height: 2.2rem;
  white-space: nowrap;
  font-size: .75rem;
  font-weight: 700;
  color: var(--ds-muted);
  transition: color var(--ds-dur-fast) var(--ds-ease-standard), box-shadow var(--ds-dur-fast) var(--ds-ease-standard);
}

.md-typeset .ds-switch[data-variant="tabs-small"] > .ds-switch-options {
  gap: 1.2rem;
}

.md-typeset .ds-switch[data-variant="tabs-small"] > .ds-switch-options > label {
  height: 2rem;
  font-size: .7rem;
  font-weight: 600;
}

.md-typeset .ds-switch[data-variant^="tabs"] > .ds-switch-options > label:hover,
.md-typeset .ds-section-tabs > a:hover {
  color: var(--ds-brand-text);
}

.md-typeset .ds-switch[data-variant^="tabs"] > .ds-switch-options > input:checked + label,
.md-typeset .ds-section-tabs > a[aria-current] {
  color: var(--ds-brand-text);
  box-shadow: inset 0 -2px 0 var(--ds-brand);
}

/* pills and chips: rounded buttons. A pill fills with the brand when selected, a chip is tinted. */
.md-typeset .ds-switch:is([data-variant="pills"], [data-variant="chips"]) > .ds-switch-options > label {
  display: inline-flex;
  align-items: center;
  height: 1.7rem;
  box-sizing: border-box;
  padding: 0 .7rem;
  border: 1px solid var(--ds-border-strong);
  border-radius: var(--ds-radius-pill);
  background-color: var(--ds-surface);
  font-size: .65rem;
  font-weight: 600;
  white-space: nowrap;
  color: var(--ds-heading);
  transition:
    color var(--ds-dur-fast) var(--ds-ease-standard),
    background-color var(--ds-dur-fast) var(--ds-ease-standard),
    border-color var(--ds-dur-fast) var(--ds-ease-standard);
}

.md-typeset .ds-switch:is([data-variant="pills"], [data-variant="chips"]) > .ds-switch-options > label:hover {
  border-color: var(--ds-brand);
}

.md-typeset .ds-switch[data-variant="pills"] > .ds-switch-options {
  margin-top: .8rem;
}

/* The same fill as a primary button. */
.md-typeset .ds-switch[data-variant="pills"] > .ds-switch-options > input:checked + label {
  border-color: var(--ds-brand-strong);
  background-color: var(--ds-brand-strong);
  color: var(--ds-on-brand);
}

.md-typeset .ds-switch[data-variant="chips"] {
  margin-top: 1.2rem;
}

.md-typeset .ds-switch[data-variant="chips"] > .ds-switch-options > input:checked + label {
  border-color: var(--ds-brand);
  background-color: var(--ds-brand-tint);
  color: var(--ds-brand-text);
}

.md-typeset .ds-switch[data-variant="chips"] > .ds-switch-panels .ds-diagram-card {
  margin-top: .7rem;
}

/* cards: a column of options beside the selected panel */
.md-typeset .ds-switch[data-variant="cards"] {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 1.2rem;
  align-items: start;
  margin-top: 1rem;
}

@media screen and (max-width: 44.984375em) {
  .md-typeset .ds-switch[data-variant="cards"] {
    grid-template-columns: minmax(0, 1fr);
  }
}

.md-typeset .ds-switch[data-variant="cards"] > .ds-switch-options {
  flex-direction: column;
  flex-wrap: nowrap;
}

.md-typeset .ds-switch[data-variant="cards"] > .ds-switch-options > label {
  display: flex;
  flex-direction: column;
  gap: .2rem;
  padding: .6rem .8rem;
  border: 1.5px solid var(--ds-border);
  border-radius: var(--ds-radius-md);
  background-color: var(--ds-surface);
  transition: border-color var(--ds-dur-fast) var(--ds-ease-standard), background-color var(--ds-dur-fast) var(--ds-ease-standard);
}

.md-typeset .ds-switch[data-variant="cards"] > .ds-switch-options > label:hover {
  border-color: var(--ds-brand);
}

.md-typeset .ds-switch[data-variant="cards"] > .ds-switch-options > input:checked + label {
  border-color: var(--ds-brand);
  background-color: var(--ds-brand-tint);
}

.md-typeset .ds-switch-title {
  font-size: .7rem;
  font-weight: 700;
  color: var(--ds-heading);
}

.md-typeset .ds-switch[data-variant="cards"] > .ds-switch-options code {
  padding: 0;
  border: 0;
  background: none;
  font-size: .6rem;
  color: var(--ds-muted);
  overflow-wrap: anywhere;
}

/* Muted text is under 4.5:1 on the brand tint. */
.md-typeset .ds-switch[data-variant="cards"] > .ds-switch-options > input:checked + label code {
  color: var(--ds-brand-text);
}

/* ─── Section bar (partials/ds-section-nav.html) ─────────────────────────── */
/* The current tab's sections, then a Jump to row with the current section's pages, above the page in
   place of the left navigation. Same side margins as the article, and the same row → rule rhythm as
   the payment methods browser. */
.md-typeset.ds-section-nav {
  margin: 0 .8rem .8rem;
}

.md-typeset.ds-section-nav > .ds-jump {
  padding-bottom: 1.1rem;
  border-bottom: 1px solid var(--ds-border);
}

/* ─── Jump to: a label and plain links under a tab row ───────────────────── */
/* The section bar's pages, and the payment methods browser's methods (which it scrolls to). */
.md-typeset .ds-jump {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .4rem 1rem;
  margin: .8rem 0 0;
  font-size: .7rem;
  line-height: 1.5;
}

.md-typeset .ds-jump-label {
  font-size: .6rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ds-muted);
}

.md-typeset .ds-jump a {
  font-weight: 500;
  color: var(--ds-brand-text);
}

.md-typeset .ds-jump a:hover {
  color: var(--ds-brand-hover);
}

.md-typeset .ds-jump a[aria-current] {
  font-weight: 600;
  color: var(--ds-heading);
}

/* A row wider than the column scrolls sideways (docs.js marks which edge hides tabs): fade it. */
.md-typeset .ds-section-tabs[data-overflow="end"] {
  mask-image: linear-gradient(to right, black calc(100% - 2.5rem), transparent);
}

.md-typeset .ds-section-tabs[data-overflow="start"] {
  mask-image: linear-gradient(to left, black calc(100% - 2.5rem), transparent);
}

.md-typeset .ds-section-tabs[data-overflow="start end"] {
  mask-image: linear-gradient(to right, transparent, black 2.5rem, black calc(100% - 2.5rem), transparent);
}

/* ─── Payment methods browser ────────────────────────────────────────────── */
.md-typeset .ds-methods {
  margin-top: 1.1rem;
}

/* Methods stack one after another; the flow they share closes the Alternative category as its own
   block, not as part of the last method. */
.md-typeset .ds-method,
.md-typeset .ds-method-flow {
  margin-top: 1.1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--ds-border);
}

.md-typeset .ds-method-title {
  margin: 0;
  font-size: 1.2rem;
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: -.01em;
  color: var(--ds-heading);
}

.md-typeset .ds-method > .ds-switch {
  margin-top: .6rem;
}

.md-typeset .ds-method .ds-switch-panels > * > p,
.md-typeset .ds-method > p:not(.ds-method-title) {
  max-width: 36rem;
}

.md-typeset .ds-method-subtitle {
  margin: 1.6rem 0 .5rem;
  font-size: .8rem;
  font-weight: 700;
  color: var(--ds-heading);
}

.md-typeset .ds-method .ds-switch-panels > * > :first-child,
.md-typeset .ds-method > .ds-method-title + :not(.ds-switch) {
  margin-top: 1rem;
}

.md-typeset .ds-facts {
  display: grid;
  grid-template-columns: 9rem minmax(0, 1fr);
  margin: 1rem 0 0;
}

.md-typeset .ds-facts dt,
.md-typeset .ds-facts dd {
  margin: 0;
  padding: .6rem 0;
  border-bottom: 1px solid var(--ds-border);
}

.md-typeset .ds-facts dt {
  font-size: .65rem;
  font-weight: 600;
  color: var(--ds-muted);
}

.md-typeset .ds-facts dd {
  padding-left: .8rem;
  font-size: .7rem;
  font-weight: 500;
  line-height: 1.5;
  color: var(--ds-heading);
}

.md-typeset .ds-facts code {
  padding: 0;
  border: 0;
  background: none;
  font-size: .92em;
  color: var(--ds-heading);
}

.md-typeset .ds-link-pills > p {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  margin: 1.2rem 0 0;
}

.md-typeset .ds-link-pills a,
.md-typeset .ds-link-pills label {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  height: 1.7rem;
  box-sizing: border-box;
  padding: 0 .7rem;
  border: 1px solid var(--ds-border-strong);
  border-radius: var(--ds-radius-pill);
  background-color: var(--ds-surface);
  font-size: .65rem;
  font-weight: 600;
  color: var(--ds-brand-text);
  cursor: pointer;
  transition: border-color var(--ds-dur-fast) var(--ds-ease-standard);
}

.md-typeset .ds-link-pills a:hover,
.md-typeset .ds-link-pills label:hover {
  border-color: var(--ds-brand);
}

.md-typeset .ds-link-pills a::after,
.md-typeset .ds-link-pills label::after {
  content: "";
  width: .7rem;
  height: .7rem;
  background-color: currentcolor;
  -webkit-mask: url("../icons/arrow-right.svg") center / contain no-repeat;
  mask: url("../icons/arrow-right.svg") center / contain no-repeat;
}

/* 3DS "How it works": number, the action or endpoint, then what to do */
.md-typeset .ds-howto {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: ds-howto;
}

.md-typeset .ds-howto > li {
  display: grid;
  grid-template-columns: 1.1rem minmax(0, 11.5rem) minmax(0, 1fr);
  gap: .7rem;
  align-items: baseline;
  margin: 0;
  padding: .7rem 0;
  border-bottom: 1px solid var(--ds-border);
  counter-increment: ds-howto;
}

.md-typeset .ds-howto > li::before {
  content: counter(ds-howto);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.1rem;
  height: 1.1rem;
  border-radius: 50%;
  background-color: var(--ds-marker-bg);
  font-size: .55rem;
  font-weight: 700;
  color: var(--ds-marker-fg);
}

.md-typeset .ds-howto > li > code {
  padding: 0;
  border: 0;
  background: none;
  font-size: .6rem;
  color: var(--ds-brand-text);
  overflow-wrap: anywhere;
}

.md-typeset .ds-howto > li > span {
  font-size: .7rem;
  line-height: 1.5;
}

@media screen and (max-width: 44.984375em) {
  .md-typeset .ds-howto > li {
    grid-template-columns: 1.1rem minmax(0, 1fr);
  }

  .md-typeset .ds-howto > li > span {
    grid-column: 2;
  }
}

.md-typeset .ds-badge {
  display: inline-flex;
  align-items: center;
  margin-right: .4rem;
  padding: .15rem .5rem;
  border-radius: var(--ds-radius-pill);
  background-color: var(--ds-brand-tint);
  font-size: .6rem;
  font-weight: 700;
  color: var(--ds-brand-text);
}

/* ─── Diagram card: a title, a description and a source link above a diagram ─ */
.md-typeset .ds-diagram-card {
  margin-top: 1.2rem;
  padding: 1.2rem 1.2rem .9rem;
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-lg);
  background-color: var(--ds-surface);
  box-shadow: var(--ds-shadow-card);
}

[data-md-color-scheme="slate"] .md-typeset .ds-diagram-card {
  background-color: var(--ds-subtle);
}

/* Off the landing pages a diagram card lies flat, like the diagram frames around it. */
.md-content__inner:not(.ds-landing) .ds-diagram-card {
  box-shadow: none;
}

.md-typeset .ds-diagram-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.6rem;
}

.md-typeset .ds-diagram-card-head > div > p {
  max-width: 39rem;
  margin: .4rem 0 0;
  font-size: .75rem;
  line-height: 1.6;
  color: var(--ds-muted);
}

.md-typeset .ds-diagram-card-head > div > .ds-diagram-card-title {
  margin: 0;
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: -.01em;
  color: var(--ds-heading);
}

.md-typeset .ds-diagram-card-head > p {
  flex-shrink: 0;
  margin: .2rem 0 0;
}

@media screen and (max-width: 44.984375em) {
  .md-typeset .ds-diagram-card-head {
    flex-direction: column;
    gap: .6rem;
  }
}

/* The card is the diagram's frame. */
.md-typeset .ds-diagram-card .ds-diagram,
[data-md-color-scheme="slate"] .md-typeset .ds-diagram-card .ds-diagram {
  margin: 1.2rem 0 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
}

/* ─── Sequence and flow diagrams (framed by docs.js) ─────────────────────── */
/* Block, not Material's fit-content flex figure, so the frame spans the text column. */
.md-typeset .ds-diagram {
  display: block;
  width: auto;
  margin: 1.4em 0;
  padding: 1rem;
  overflow-x: auto;
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-lg);
  background-color: var(--ds-surface);
}

/* Lifted one layer in dark mode, where the page has no shadows. */
[data-md-color-scheme="slate"] .md-typeset .ds-diagram {
  background-color: var(--ds-subtle);
}

/* The drawing fills the frame (docs.js caps it at 1.5x its drawn width). Below 60em it keeps 60%
   of its drawn width (--ds-diagram-width, also set by docs.js) and the frame scrolls, so its labels
   stay readable on a phone. */
.md-typeset .ds-diagram .mermaid {
  min-width: 32rem;
  margin: 0;
}

@media screen and (max-width: 59.984375em) {
  .md-typeset .ds-diagram .mermaid {
    min-width: max(32rem, calc(var(--ds-diagram-width, 32rem) * .6));
  }
}

/* The legend is a figcaption; Material centres, narrows and italicises those. */
.md-typeset .ds-diagram .ds-legend {
  position: sticky;
  left: 0;
  max-width: none;
  margin: 1rem 0 0;
  font-style: normal;
}

/* ─── Sequence diagrams (drawn as HTML by docs.js) ───────────────────────── */
/* One grid column per participant. A lifeline runs down the centre of each column; a message spans
   the columns it joins, inset by half a column on each side, so its arrow ends on both lifelines.
   The lifelines are a background, one tile per column, so everything in a row paints over them. The
   brand's lifeline is a second tile at --ds-seq-brand-col (set by docs.js; -1 puts it off canvas). */
.md-typeset .ds-seq {
  --ds-seq-ground: var(--ds-surface);
  --ds-seq-lane: linear-gradient(to right, transparent calc(50% - 1px), var(--ds-border-strong) 0 calc(50% + 1px), transparent 0);
  --ds-seq-lane-brand: linear-gradient(to right, transparent calc(50% - 1px), var(--ds-brand) 0 calc(50% + 1px), transparent 0);

  padding: 1.2rem 1rem .9rem;
}

[data-md-color-scheme="slate"] .md-typeset .ds-seq {
  --ds-seq-ground: var(--ds-subtle);
}

/* Below this width a column's labels no longer fit, so the frame scrolls sideways instead. */
.md-typeset .ds-seq-body {
  min-width: calc(var(--ds-seq-cols) * 7.5rem);
}

.md-typeset .ds-seq-actors,
.md-typeset .ds-seq-row {
  display: grid;
  grid-template-columns: repeat(var(--ds-seq-cols), minmax(0, 1fr));
  align-items: center;
}

/* Every box the same height, with or without a subtitle. */
.md-typeset .ds-seq-actors {
  align-items: stretch;
}

.md-typeset .ds-seq-actor {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .1rem;
  margin: 0 .5rem;
  padding: .6rem .5rem;
  border: 1.5px solid var(--ds-border-strong);
  border-radius: var(--ds-radius-md);
  background-color: var(--ds-surface);
  text-align: center;
}

.md-typeset .ds-seq-actor[data-owner="brand"] {
  border-color: var(--ds-brand);
  background-color: var(--ds-brand-tint);
}

.md-typeset .ds-seq-actor[data-owner="merchant"] {
  border-style: dashed;
  border-color: var(--ds-dash);
}

.md-typeset .ds-seq-actor[data-owner="third-party"] {
  border-color: var(--ds-border);
  background-color: var(--ds-subtle);
}

.md-typeset .ds-seq-actor-name {
  font-size: .7rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--ds-heading);
}

.md-typeset .ds-seq-actor[data-owner="brand"] .ds-seq-actor-name {
  color: var(--ds-brand-deep);
}

.md-typeset .ds-seq-actor-kind {
  font-size: .6rem;
  font-weight: 500;
  color: var(--ds-muted);
}

/* Muted text is under 4.5:1 on the brand tint and the subtle ground, so those boxes use their own. */
.md-typeset .ds-seq-actor[data-owner="brand"] .ds-seq-actor-kind {
  color: var(--ds-brand-text);
}

.md-typeset .ds-seq-actor[data-owner="third-party"] .ds-seq-actor-kind {
  color: var(--ds-muted-on-subtle);
}

.md-typeset .ds-seq-rows {
  display: flex;
  flex-direction: column;
  padding: .5rem 0 .9rem;
}

/* A frame's ground covers the lifelines behind it, so its rows draw them again. */
.md-typeset .ds-seq-rows,
.md-typeset .ds-seq-frame > .ds-seq-row {
  background-image: var(--ds-seq-lane-brand), var(--ds-seq-lane);
  background-repeat: no-repeat, repeat;
  background-position: calc(var(--ds-seq-brand-col) / (var(--ds-seq-cols) - 1) * 100%) 0, 0 0;
  background-size: calc(100% / var(--ds-seq-cols)) 100%;
}

.md-typeset .ds-seq-row {
  box-sizing: border-box;
  min-height: 2.6rem;
  padding: .4rem 0;
}

.md-typeset .ds-seq-row-msg {
  min-height: 3rem;
}

.md-typeset .ds-seq-row-cond {
  min-height: 2.2rem;
}

.md-typeset .ds-seq-row-step {
  justify-items: center;
  min-height: 2.4rem;
}

.md-typeset .ds-seq-msg {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .3rem;
  margin: 0 calc(50% / var(--ds-seq-span));
}

/* The label sits on the diagram's ground, so a lifeline it crosses is hidden behind it. It stays
   within its arrow, so the lifelines at either end are never broken; paths wrap after a slash. */
.md-typeset .ds-seq-label {
  display: flex;
  align-items: center;
  gap: .4rem;
  max-width: calc(100% - .8rem);
  box-sizing: border-box;
  padding: .1rem .4rem;
  border-radius: var(--ds-radius-xs);
  background-color: var(--ds-seq-ground);
  font-size: .65rem;
  font-weight: 600;
  line-height: 1.45;
  color: var(--ds-heading);
  text-align: center;
  text-wrap: balance;
  overflow-wrap: break-word;
}

.md-typeset .ds-seq-label[data-code="true"] .ds-seq-text {
  font-family: var(--md-code-font-family);
  font-size: .6rem;
}

.md-typeset .ds-seq-n {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  min-width: 1rem;
  height: 1rem;
  box-sizing: border-box;
  padding: 0 .2rem;
  border-radius: var(--ds-radius-pill);
  background-color: var(--ds-marker-bg);
  font-family: var(--md-text-font-family);
  font-size: .55rem;
  font-weight: 700;
  line-height: 1;
  color: var(--ds-marker-fg);
}

.md-typeset .ds-seq-arrow {
  display: flex;
  align-items: center;
  width: 100%;
  color: var(--ds-text-strong);
}

.md-typeset .ds-seq-arrow::before {
  content: "";
  flex-grow: 1;
  border-top: 2px solid currentcolor;
}

.md-typeset .ds-seq-arrow::after {
  content: "";
  width: .5rem;
  height: .6rem;
  background-color: currentcolor;
  clip-path: polygon(0 0, 100% 50%, 0 100%);
}

.md-typeset .ds-seq-msg[data-dir="left"] .ds-seq-arrow {
  flex-direction: row-reverse;
}

.md-typeset .ds-seq-msg[data-dir="left"] .ds-seq-arrow::after {
  clip-path: polygon(100% 0, 0 50%, 100% 100%);
}

.md-typeset .ds-seq-msg[data-line="dashed"] .ds-seq-arrow {
  color: var(--ds-muted);
}

.md-typeset .ds-seq-msg[data-line="dashed"] .ds-seq-arrow::before {
  border-top-style: dashed;
}

/* A self-step and a note are centred on their lifeline and may be wider than one column. */
.md-typeset .ds-seq-self,
.md-typeset .ds-seq-note {
  display: flex;
  align-items: center;
  justify-self: center;
  gap: .4rem;
  width: max-content;
  max-width: max(14rem, calc(100% - 1rem));
  box-sizing: border-box;
  font-size: .65rem;
  line-height: 1.4;
  color: var(--ds-heading);
}

.md-typeset .ds-seq-self {
  padding: .3rem .7rem .3rem .3rem;
  border: 1px solid var(--ds-border-strong);
  border-radius: var(--ds-radius-pill);
  background-color: var(--ds-surface);
  font-weight: 600;
}

.md-typeset .ds-seq-self .ds-icon-loop {
  width: .7rem;
  height: .7rem;
  color: var(--ds-muted);
}

.md-typeset .ds-seq-self[data-owner="brand"] {
  border-color: var(--ds-brand);
}

.md-typeset .ds-seq-self[data-owner="brand"] .ds-icon-loop {
  color: var(--ds-brand);
}

.md-typeset .ds-seq-note {
  padding: .35rem .6rem;
  border: 1px dashed var(--ds-dash);
  border-radius: var(--ds-radius-sm);
  background-color: var(--ds-subtle);
  font-weight: 500;
  color: var(--ds-text-strong);
}

.md-typeset .ds-seq-note .ds-icon-info {
  width: .7rem;
  height: .7rem;
  color: var(--ds-muted);
}

.md-typeset .ds-seq-step {
  grid-column: 1 / -1;
  padding: .25rem .7rem;
  border-radius: var(--ds-radius-pill);
  background-color: var(--ds-brand-fill);
  font-size: .6rem;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--ds-on-brand);
  text-transform: uppercase;
}

/* An alt block: a tinted, outlined frame; each branch starts with an IF or OR condition row. */
.md-typeset .ds-seq-frame {
  --ds-seq-ground: var(--ds-surface-2);

  display: flex;
  flex-direction: column;
  margin: .3rem 0;
  border-radius: var(--ds-radius-md);
  background-color: var(--ds-seq-ground);
  box-shadow: inset 0 0 0 1.5px var(--ds-border-strong);
}

.md-typeset .ds-seq-frame > .ds-seq-row-cond:not(:first-child) {
  box-shadow: inset 0 1px 0 var(--ds-border-strong);
}

.md-typeset .ds-seq-cond {
  display: flex;
  grid-column: 1 / -1;
  align-items: center;
  gap: .4rem;
  padding: 0 .8rem;
}

.md-typeset .ds-seq-keyword {
  padding: .15rem .4rem;
  border-radius: var(--ds-radius-xs);
  background-color: var(--ds-brand-tint);
  font-size: .55rem;
  font-weight: 700;
  letter-spacing: .06em;
  color: var(--ds-brand-text);
}

.md-typeset .ds-seq-cond-text {
  padding: .1rem .3rem;
  border-radius: var(--ds-radius-xs);
  background-color: var(--ds-seq-ground);
  font-size: .7rem;
  font-weight: 700;
  color: var(--ds-heading);
}

/* Request and response line samples, after the owners, at the far end of the legend. */
.ds-legend-line {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
}

.ds-legend-line::before {
  content: "";
  width: 1.2rem;
  border-top: 2px solid var(--ds-text-strong);
}

.ds-legend-line[data-line="dashed"]::before {
  border-top-style: dashed;
  border-top-color: var(--ds-muted);
}

.ds-legend-item + .ds-legend-line {
  margin-left: auto;
}

/* ─── State diagrams (drawn by docs.js) ──────────────────────────────────── */
/* The start dot and the non-final states in columns, left to right, then the final states in a
   panel. docs.js sets each column state's top, level with its targets, and draws the transitions on
   the SVG layer. States sit above the lines, and labels above both. */
.md-typeset .ds-state {
  --ds-state-ground: var(--ds-surface);
}

[data-md-color-scheme="slate"] .md-typeset .ds-state {
  --ds-state-ground: var(--ds-subtle);
}

/* A column needs its 8rem state plus room for a label beside it. Below that width the labels no
   longer fit, so the frame scrolls sideways. */
.md-typeset .ds-state-body {
  position: relative;
  display: grid;
  grid-template-columns: 1.5rem repeat(var(--ds-state-cols), minmax(0, 1fr)) minmax(11rem, 14rem);
  min-width: calc(var(--ds-state-cols) * 16rem + 12.5rem);
  text-align: left;
}

.md-typeset .ds-state-col {
  position: relative;
}

.md-typeset .ds-state-start {
  position: absolute;
  left: 0;
  width: .6rem;
  height: .6rem;
  border-radius: 50%;
  background-color: var(--ds-muted);
}

.md-typeset .ds-state-node {
  position: relative;
  z-index: 1;
  padding: .55rem .8rem;
  border-radius: var(--ds-radius-sm);
  font-size: .7rem;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: .02em;
  color: var(--ds-text-strong);
  background-color: var(--ds-border);
}

.md-typeset .ds-state-col > .ds-state-node {
  position: absolute;
  left: 0;
  width: 8rem;
  text-align: center;
}

.md-typeset .ds-state-node[data-status="success"] {
  color: var(--ds-badge-success-fg);
  background-color: var(--ds-badge-success);
}

.md-typeset .ds-state-node[data-status="warning"] {
  color: var(--ds-badge-warn-fg);
  background-color: var(--ds-badge-warn);
}

.md-typeset .ds-state-node[data-status="danger"] {
  color: var(--ds-badge-danger-fg);
  background-color: var(--ds-badge-danger);
}

.md-typeset .ds-state-final {
  display: flex;
  flex-direction: column;
  gap: .6rem;
  padding: .8rem;
  border-radius: var(--ds-radius-md);
  background-color: var(--ds-subtle);
}

[data-md-color-scheme="slate"] .md-typeset .ds-state-final {
  background-color: var(--ds-surface);
}

.md-typeset .ds-state-final-title {
  margin: 0 0 .1rem;
  font-size: .55rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ds-muted);
}

.md-typeset .ds-state-edges {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

.md-typeset .ds-state-edges path {
  fill: none;
  stroke: var(--ds-muted);
  stroke-width: 1.5;
}

.md-typeset .ds-state-label {
  position: absolute;
  z-index: 2;
  padding: .15rem .55rem;
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-pill);
  background-color: var(--ds-state-ground);
  font-size: .6rem;
  line-height: 1.4;
  white-space: nowrap;
  color: var(--ds-body);
  transform: translate(-50%, -50%);
}

/* Status colours in a state diagram's legend: a dot instead of the owner swatch. */
.ds-legend-item[data-status]::before {
  width: .55rem;
  height: .55rem;
  border: 0;
  border-radius: 50%;
  background-color: var(--ds-muted);
}

.ds-legend-item[data-status="success"]::before {
  background-color: var(--ds-badge-success-fg);
}

.ds-legend-item[data-status="danger"]::before {
  background-color: var(--ds-badge-danger-fg);
}

.ds-legend-item[data-status="warning"]::before {
  background-color: var(--ds-badge-warn-fg);
}

/* ─── Customer previews ("What your customer sees") ──────────────────────── */
.md-typeset .ds-preview {
  --pv-from:   var(--pv-brand-from);
  --pv-to:     var(--pv-brand-to);
  --pv-accent: var(--pv-brand-accent);
  --pv-ink:    #384041;
  --pv-muted:  #607A7A;
  --pv-line:   #E3EAEA;
  --pv-field:  #F4F7F7;
  --pv-card:   #FFFFFF;
  --pv-marker: var(--brand-950);

  /* The design's 720px of 1200: three fifths for the preview, two for the notes. */
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
  gap: 2.4rem;
  align-items: start;
  margin-top: 1.4rem;
}

@media screen and (max-width: 59.984375em) {
  .md-typeset .ds-preview {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Material sizes figures to their content and centres them; a preview fills its column. */
.md-typeset .ds-preview-figure {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: .5rem;
  width: auto;
  margin: 0;
}

.md-typeset .ds-preview-figure figcaption {
  max-width: none;
  margin: 0;
  font-size: .65rem;
  font-style: normal;
  text-align: left;
  color: var(--ds-muted);
}

.md-typeset .ds-marker {
  position: absolute;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 1.2rem;
  height: 1.2rem;
  border-radius: 50%;
  font-size: .6rem;
  font-weight: 700;
  color: #FFFFFF;
  background-color: var(--pv-marker);
  box-shadow: 0 0 0 2px #FFFFFF;
}

/* Notes beside the preview, numbered like the markers */
.md-typeset .ds-preview-notes {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: ds-note;
}

/* ol in the selector outranks Material's [dir=ltr] list-item indent. */
.md-typeset ol.ds-preview-notes > li {
  position: relative;
  margin: 0;
  padding: 1rem 0 1rem 2rem;
  border-bottom: 1px solid var(--ds-border);
  counter-increment: ds-note;
}

.md-typeset .ds-preview-notes > li:first-child {
  padding-top: 0;
}

.md-typeset .ds-preview-notes > li::before {
  content: counter(ds-note);
  position: absolute;
  top: 1rem;
  left: 0;
  display: grid;
  place-items: center;
  width: 1.2rem;
  height: 1.2rem;
  border-radius: 50%;
  font-size: .6rem;
  font-weight: 700;
  color: var(--ds-marker-fg);
  background-color: var(--ds-marker-bg);
}

.md-typeset .ds-preview-notes > li:first-child::before {
  top: 0;
}

.md-typeset .ds-note-title {
  display: block;
  font-size: .8rem;
  font-weight: 700;
  color: var(--ds-heading);
}

.md-typeset .ds-note-text {
  display: block;
  margin-top: .2rem;
  font-size: .7rem;
  line-height: 1.5;
  color: var(--ds-muted);
}

/* Field names in the notes are plain monospace, as in the design, not pills. */
.md-typeset .ds-note-text code {
  padding: 0;
  border: 0;
  font-size: .92em;
  color: var(--ds-text-strong);
  background: none;
}

.md-typeset .ds-note-controls {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1rem;
  margin-top: .5rem;
}

.md-typeset .ds-check {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  min-height: 2.2rem;
  font-size: .7rem;
  font-weight: 600;
  color: var(--ds-text-strong);
  cursor: pointer;
}

/* Drawn to the design rather than left native, which differs in every browser: a softly rounded box
   that fills with the primary button's colour and shows a centred check. */
.md-typeset .ds-check input {
  display: grid;
  flex-shrink: 0;
  place-content: center;
  width: .9rem;
  height: .9rem;
  margin: 0;
  border: 1.5px solid var(--ds-border-strong);
  border-radius: var(--ds-radius-xs);
  background-color: var(--ds-surface);
  appearance: none;
  cursor: pointer;
}

.md-typeset .ds-check input::before {
  content: "";
  width: .9rem;
  height: .9rem;
  background-color: var(--ds-on-brand);
  opacity: 0;
  -webkit-mask: url("../icons/check-bold.svg") center / contain no-repeat;
  mask: url("../icons/check-bold.svg") center / contain no-repeat;
}

.md-typeset .ds-check input:not(:checked):hover {
  border-color: var(--ds-brand);
}

.md-typeset .ds-check input:checked {
  border-color: var(--ds-brand-strong);
  background-color: var(--ds-brand-strong);
}

.md-typeset .ds-check input:checked::before {
  opacity: 1;
}

.md-typeset .ds-check input:focus-visible {
  outline: 2px solid var(--ds-focus);
  outline-offset: 2px;
}

.md-typeset .ds-swatch {
  position: relative;
  display: inline-grid;
  width: 2.2rem;
  height: 2.2rem;
  padding: .2rem;
  border: 2px solid var(--ds-border);
  border-radius: 50%;
  background-color: var(--ds-surface);
  cursor: pointer;
}

.md-typeset .ds-swatch > input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.md-typeset .ds-swatch > span {
  border-radius: 50%;
  background: linear-gradient(160deg, var(--swatch-from), var(--swatch-to));
}

.md-typeset .ds-swatch:has(input:checked) {
  border-color: var(--ds-heading);
}

.md-typeset .ds-swatch:has(input:focus-visible) {
  outline: 2px solid var(--ds-focus);
  outline-offset: 2px;
}

.md-typeset .ds-swatch[data-swatch="brand"]    { --swatch-from: var(--pv-brand-from); --swatch-to: var(--pv-brand-to); }
.md-typeset .ds-swatch[data-swatch="emerald"]  { --swatch-from: #0B5C47; --swatch-to: #0E8C6A; }
.md-typeset .ds-swatch[data-swatch="coral"]    { --swatch-from: #B93A0A; --swatch-to: #C81E63; }
.md-typeset .ds-swatch[data-swatch="graphite"] { --swatch-from: #22292A; --swatch-to: #3F4A4B; }

.md-typeset .ds-preview:has([data-swatch="emerald"] input:checked) { --pv-from: #0B5C47; --pv-to: #0E8C6A; --pv-accent: #0E8C6A; }
.md-typeset .ds-preview:has([data-swatch="coral"] input:checked)   { --pv-from: #B93A0A; --pv-to: #C81E63; --pv-accent: #C2410C; }
.md-typeset .ds-preview:has([data-swatch="graphite"] input:checked) { --pv-from: #22292A; --pv-to: #3F4A4B; --pv-accent: #22292A; }

/* Hosted Payment Page mock */
.md-typeset .pv-hpp {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .9rem;
  padding: 1.6rem 2.8rem;
  overflow: hidden;
  border-radius: var(--ds-radius-lg);
  background: linear-gradient(160deg, var(--pv-from) 0%, var(--pv-to) 100%);
  user-select: none;
}

.md-typeset .pv-top {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 2.6rem;
  color: #FFFFFF;
}

.md-typeset .pv-top > .ds-icon-arrow-left {
  position: absolute;
  left: 0;
  width: 1rem;
  height: 1rem;
}

.md-typeset .pv-logo {
  position: relative;
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .6rem 1.4rem;
  border: 2px dashed rgb(255 255 255 / 85%);
  border-radius: .5rem;
  font-size: .9rem;
  font-weight: 700;
}

.md-typeset .pv-logo > .ds-marker {
  top: -.6rem;
  right: -.6rem;
}

.md-typeset .pv-hpp > .ds-marker {
  top: .8rem;
  right: .8rem;
}

.md-typeset .pv-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .9rem;
  width: 100%;
  padding: 1.4rem 1.8rem 1.2rem;
  border-radius: 1rem;
  color: var(--pv-ink);
  background-color: var(--pv-card);
}

.md-typeset .pv-order {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .1rem;
}

.md-typeset .pv-order small {
  font-size: .7rem;
  font-weight: 500;
  color: var(--pv-muted);
}

.md-typeset .pv-order b {
  font-size: 1.1rem;
  font-weight: 800;
}

.md-typeset .pv-order strong {
  font-size: 1.9rem;
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--pv-ink);
}

.md-typeset .pv-secure {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  padding: .3rem .7rem;
  border-radius: var(--ds-radius-pill);
  font-size: .7rem;
  font-weight: 600;
  color: #306530;
  background-color: #F4FAF3;
}

.md-typeset .pv-wallets {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .7rem;
  width: 100%;
}

.md-typeset .pv-wallets > .ds-marker,
.md-typeset .pv-method > .ds-marker {
  top: .7rem;
  left: -3.6rem;
}

.md-typeset .pv-wallet {
  display: grid;
  place-items: center;
  height: 2.5rem;
  overflow: hidden;
  border-radius: .5rem;
  font-size: .85rem;
  font-weight: 600;
  white-space: nowrap;
  color: #FFFFFF;
  background-color: #000000;
}

.md-typeset .ds-preview:not(:has([data-pv="apple"]:checked)) .pv-wallets { grid-template-columns: 0fr 1fr; }
.md-typeset .ds-preview:not(:has([data-pv="google"]:checked)) .pv-wallets { grid-template-columns: 1fr 0fr; }
.md-typeset .ds-preview:not(:has([data-pv="apple"]:checked)) .pv-wallet[data-wallet="apple"],
.md-typeset .ds-preview:not(:has([data-pv="google"]:checked)) .pv-wallet[data-wallet="google"] {
  opacity: 0;
}

.md-typeset .ds-preview:not(:has([data-pv="apple"]:checked)):not(:has([data-pv="google"]:checked)) .pv-wallets-block {
  grid-template-rows: 0fr;
  margin-top: -.9rem;
  opacity: 0;
}

/* Clip only while collapsed, so marker 3 can sit outside the card otherwise. */
.md-typeset .ds-preview:not(:has([data-pv="apple"]:checked)):not(:has([data-pv="google"]:checked)) .pv-wallets-block > div {
  overflow: hidden;
}

.md-typeset .pv-wallets-block {
  display: grid;
  grid-template-rows: 1fr;
  width: 100%;
}

.md-typeset .pv-wallets-block > div {
  display: flex;
  flex-direction: column;
  gap: .7rem;
  min-height: 0;
}

.md-typeset .pv-or {
  display: flex;
  align-items: center;
  gap: .8rem;
  font-size: .7rem;
  font-weight: 500;
  color: var(--pv-muted);
}

.md-typeset .pv-or::before,
.md-typeset .pv-or::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background-color: var(--pv-line);
}

.md-typeset .pv-method {
  position: relative;
  display: flex;
  align-items: center;
  gap: .9rem;
  width: 100%;
  padding: .3rem .4rem;
  font-size: .85rem;
  font-weight: 600;
}

.md-typeset .pv-method-icon {
  display: grid;
  place-items: center;
  width: 2.2rem;
  height: 2.2rem;
  border-radius: .4rem;
  color: var(--pv-accent);
  background-color: var(--pv-field);
}

.md-typeset .pv-method-icon .ds-icon {
  width: 1.1rem;
  height: 1.1rem;
}

.md-typeset .pv-method > span:nth-child(3) {
  flex: 1 1 auto;
}

.md-typeset .pv-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem;
  width: 100%;
  font-size: .7rem;
  font-weight: 500;
  color: var(--pv-muted);
}

.md-typeset .pv-foot > * {
  white-space: nowrap;
}

.md-typeset .pv-foot b {
  font-weight: 700;
  color: var(--pv-ink);
}

.md-typeset .pv-foot .ds-icon-shield {
  color: #306530;
}

.md-typeset .pv-lang {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: .2rem;
  margin-left: auto;
  font-weight: 600;
  color: var(--pv-ink);
}

.md-typeset .pv-lang > .ds-marker {
  top: -1.5rem;
  right: -.3rem;
}

/* Phones: tighter margins round the card; markers 3 and 4 stay centred in the side margin. */
@media screen and (max-width: 37.484375em) {
  .md-typeset .pv-hpp {
    padding: 1.2rem 1.8rem;
  }

  .md-typeset .pv-card {
    padding: 1.1rem 1rem 1rem;
  }

  .md-typeset .pv-wallets > .ds-marker,
  .md-typeset .pv-method > .ds-marker {
    left: -2.5rem;
  }

  .md-typeset .pv-wallet {
    font-size: .75rem;
  }
}

/* Embedded Fields and API mocks: the merchant's own checkout page */
.md-typeset .pv-page {
  overflow: hidden;
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-lg);
  color: var(--pv-ink);
  background-color: #F4F7FA;
  user-select: none;
}

.md-typeset .pv-bar {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .5rem .6rem;
  border-bottom: 1px solid var(--pv-line);
  font-size: .6rem;
  font-weight: 600;
  color: var(--pv-ink);
  background-color: #FFFFFF;
}

.md-typeset .pv-url {
  flex: 1 1 auto;
  padding: .2rem .5rem;
  border-radius: var(--ds-radius-pill);
  font-family: var(--md-code-font-family);
  font-size: .55rem;
  font-weight: 400;
  color: var(--pv-muted);
  background-color: var(--pv-field);
}

.md-typeset .pv-checkout {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: .8rem;
  padding: 1.4rem 2.6rem 1.6rem;
}

.md-typeset .pv-checkout-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
}

.md-typeset .pv-checkout-head b {
  font-size: .9rem;
  font-weight: 800;
}

.md-typeset .pv-checkout-head span {
  font-size: .65rem;
  font-weight: 700;
}

.md-typeset .pv-box {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: .55rem;
  padding: .8rem .9rem;
  border: 1px solid var(--pv-line);
  border-radius: .6rem;
  background-color: #FFFFFF;
}

.md-typeset .pv-box[data-owner="brand"] {
  border: 1.5px dashed var(--pv-accent);
}

.md-typeset .pv-box > .ds-marker {
  top: .7rem;
  left: -2rem;
}

.md-typeset .pv-box-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  font-size: .65rem;
  font-weight: 700;
}

.md-typeset .pv-box-tag {
  display: inline-flex;
  align-items: center;
  gap: .2rem;
  padding: .1rem .45rem;
  border-radius: var(--ds-radius-pill);
  font-size: .5rem;
  font-weight: 600;
  color: var(--pv-accent);
  background-color: color-mix(in srgb, var(--pv-accent) 10%, #FFFFFF);
}

.md-typeset .pv-box-tag[data-owner="merchant"] {
  color: var(--pv-muted);
  background-color: var(--pv-field);
}

.md-typeset .pv-label {
  font-size: .55rem;
  font-weight: 600;
  color: var(--pv-ink);
}

.md-typeset .pv-input {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 1.7rem;
  padding: 0 .55rem;
  border: 1px solid var(--pv-line);
  border-radius: .35rem;
  font-size: .6rem;
  color: var(--pv-muted);
  background-color: #FFFFFF;
}

.md-typeset .pv-input[data-focus] {
  border-color: var(--pv-accent);
  box-shadow: 0 0 0 1px var(--pv-accent);
}

.md-typeset .pv-field {
  display: flex;
  flex-direction: column;
  gap: .25rem;
}

.md-typeset .pv-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .55rem;
}

.md-typeset .pv-pay {
  position: relative;
  display: grid;
  place-items: center;
  height: 2rem;
  border-radius: .5rem;
  font-size: .7rem;
  font-weight: 700;
  color: #FFFFFF;
  background-color: var(--pv-accent);
}

.md-typeset .pv-pay[data-owner="merchant"] {
  background-color: var(--pv-ink);
}

.md-typeset .pv-pay > .ds-marker {
  top: .4rem;
  left: -2rem;
}

.md-typeset .pv-marker-right {
  top: 50%;
  right: -2rem;
}

/* Collapsible rows in the Embedded Fields mock (holder name, email, billing) */
.md-typeset .pv-collapse {
  display: grid;
  grid-template-rows: 1fr;
}

.md-typeset .pv-collapse > div {
  display: flex;
  flex-direction: column;
  gap: .55rem;
  min-height: 0;
}

.md-typeset .ds-preview:not(:has([data-pv="holder-name"]:checked)) [data-pv-row="holder-name"],
.md-typeset .ds-preview:not(:has([data-pv="holder-email"]:checked)) [data-pv-row="holder-email"],
.md-typeset .ds-preview:not(:has([data-pv="billing"]:checked)) [data-pv-row="billing"] {
  grid-template-rows: 0fr;
  opacity: 0;
}

.md-typeset .ds-preview:not(:has([data-pv="billing"]:checked)) [data-pv-row="billing"] {
  margin-top: -.8rem;
}

/* Clip only while collapsed, so marker 3 can sit outside the billing box otherwise. */
.md-typeset .ds-preview:not(:has([data-pv="holder-name"]:checked)) [data-pv-row="holder-name"] > div,
.md-typeset .ds-preview:not(:has([data-pv="holder-email"]:checked)) [data-pv-row="holder-email"] > div,
.md-typeset .ds-preview:not(:has([data-pv="billing"]:checked)) [data-pv-row="billing"] > div {
  overflow: hidden;
}


/* Request panel under the API mock */
.md-typeset .ds-preview-figure .highlight {
  margin: 0;
}

.md-typeset .ds-preview-caption {
  margin: 0;
  font-size: .65rem;
  color: var(--ds-muted);
}

/* Marker 2 on the API preview's request panel */
.md-typeset .ds-preview-figure .highlight span.filename {
  position: relative;
  padding-right: 2.6rem;
}

.md-typeset .ds-preview-figure .highlight span.filename::after {
  content: "2";
  position: absolute;
  top: 50%;
  right: .6rem;
  display: grid;
  place-items: center;
  width: 1.2rem;
  height: 1.2rem;
  margin-top: -.6rem;
  border-radius: 50%;
  font-family: var(--md-text-font-family);
  font-size: .6rem;
  font-weight: 700;
  color: var(--pv-marker);
  background-color: #FFFFFF;
}

.md-typeset .ds-preview-figure .highlight .md-code__nav {
  display: none;
}

.md-typeset .ds-preview-figure {
  text-align: left;
}

.md-typeset .pv-box > .ds-marker.pv-marker-right {
  top: 50%;
  right: -2rem;
  left: auto;
  margin-top: -.6rem;
}

.md-typeset .pv-box > .ds-marker.pv-marker-holder {
  top: auto;
  bottom: 1.1rem;
}