/* The payment integrations page (services/pages/payment-integrations.html), after its own design (2026-10-28:
   "payment-integrations PAGE DESIGN"). Until then the page was drawn to the landing design (css/pages/landing.css), which has no
   rule for it now. Its hero is a sample checkout drawn in HTML, which a visitor may try; the company's picture of a card of the
   ways to pay, which the page had, is Malipo's hero still.

   Its type is typography.md's: every text takes one of its roles, set in the Type roles block below and nowhere else, and its
   sizes are the tokens', in rem, not the design's (which sets its checkout in 10 to 12px and its titles in 36 to 75px with a
   tracking of -0.07em: the checkout is set in the roles' sizes, so it is larger, and it gives way where its own width is short).
   Mobile first: one column, the checkout under the hero's words and beside them from 64rem, a heading beside what it heads from
   64rem. Where the page asks for a script (the checkout, the choice of a stage) every answer is in the markup, and what chooses is
   a link to what it means until site.js makes it work; the accordion and the questions need none.

   The space between rows, columns and items is 20px at the most (--gap-max, site.css); a painted band or card has the room it
   needs inside itself. Everything is scoped to .pay; its colours are the --pay-* tokens, set again for the dark theme, and its
   text takes typography.md's two text colours through them. The deep blue bands are deep blue on both themes, as the design draws
   them. */

:root {
    --pay-surface: #ffffff;
    /* the text: headings and body text in typography.md's primary colour, small text in its secondary */
    --pay-ink: var(--text-primary);
    --pay-muted: var(--text-secondary);
    --pay-eyebrow: #0a4ce9;
    --pay-caption: #0a40c8;
    --pay-crumb-chevron: #8790a8;
    --pay-blue: #0154e5;
    --pay-blue-hover: #0043bd;
    --pay-on-blue: #ffffff;
    --pay-blue-soft: #e8f1ff;
    --pay-blue-soft-edge: #cbdcff;
    --pay-outline: #b4c9e8;
    --pay-outline-ink: #0f47a8;
    --pay-outline-bg: rgb(255 255 255 / 0.74);
    --pay-outline-hover: #eef6ff;
    --pay-line: #e2eaf4;
    --pay-line-strong: #d3deec;
    --pay-green: #0b7a57;
    --pay-green-dot: #17b982;
    --pay-wash: #f4f8fe;
    --pay-faq-band: #f9fbfd;
    /* the hero: a pale sky with a light at its right and a ring, and a blue glow round the checkout */
    --pay-hero-bg: radial-gradient(circle at 86% 10%, #d4e8ff 0, transparent 33%), linear-gradient(122deg, #fafdff 0%, #f5f9ff 48%, #e9f3ff 100%);
    --pay-hero-ring: #b6d7ff;
    --pay-glow: radial-gradient(ellipse 55% 47% at 55% 53%, rgb(15 103 238 / 0.18), transparent 80%);
    /* the sample checkout: a white card, its result on a pale ground */
    --pay-card: #ffffff;
    --pay-card-edge: #e0eaf8;
    --pay-card-shadow: 0 35px 90px rgb(11 61 139 / 0.13), 0 8px 22px rgb(12 69 129 / 0.09);
    --pay-card-rule: #ecf0f7;
    --pay-tag-bg: #f1f7ff;
    --pay-tag-edge: #d5e7fc;
    --pay-tag-ink: #1f5fb8;
    --pay-input-edge: #c9d8ee;
    --pay-channel-edge: #d5e1f1;
    --pay-channel-on-bg: #eef5ff;
    --pay-channel-on-edge: #2474f2;
    --pay-channel-on-ring: #d9e9ff;
    --pay-channel-on-ink: #08377c;
    --pay-result-bg: linear-gradient(165deg, #f7fbff, #eef6ff);
    --pay-result-rule: #e0ebf7;
    --pay-idle-bg: #e3edff;
    --pay-idle-ink: #125ef0;
    --pay-run-bg: #fff1dc;
    --pay-run-ink: #a85a00;
    --pay-done-bg: #dff8ed;
    --pay-done-ink: #067a54;
    --pay-step-off: #c3cfe2;
    --pay-step-on: #12b77d;
    --pay-step-now: #1467da;
    --pay-step-now-ring: #dceaff;
    --pay-step-now-ink: #0a4ce9;
    --pay-note-bg: #092451;
    --pay-note-ink: #ffffff;
    --pay-note-sub: #b6d4ff;
    --pay-note-shadow: 0 15px 35px rgb(0 43 125 / 0.2);
    --pay-pulse: #1ddeaa;
    /* the marks of the ways to pay: a tint behind each, and the colour of its mark */
    --pay-mark-face: #ffffff;
    --pay-mark-mpesa-bg: #e9f6e8;
    --pay-mark-mpesa: #2f8f2b;
    --pay-mark-mpesa-red: #d91f17;
    --pay-mark-airtel-bg: #fdecec;
    --pay-mark-airtel: #d60000;
    --pay-mark-card-bg: #e7efff;
    --pay-mark-card: #145dea;
    --pay-mark-bank-bg: #e8ebf2;
    --pay-mark-bank: #172b51;
    /* the deep blue bands, and what is on them */
    --pay-night: #071c40;
    --pay-night-ring: rgb(125 165 255 / 0.3);
    --pay-night-eyebrow: #8fbcff;
    --pay-night-text: #b9c9e3;
    --pay-night-accent: #77b2ff;
    --pay-night-rule: #355079;
    --pay-night-num: #8db8f5;
    --pay-night-tick: #44d8ae;
    --pay-light-ink: #0643be;
    --pay-light-hover: #dbe8ff;
    --pay-closing: linear-gradient(103deg, #071f50 8%, #07318f 65%, #0864ee 110%);
    --pay-closing-ring: rgb(255 255 255 / 0.2);
    --pay-closing-text: #d3e2fd;
    --pay-closing-eyebrow: #c4dcff;
    --pay-code-bg: #0a1d40;
    --pay-code-ink: #c9dafa;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --pay-surface: #131314;
        --pay-eyebrow: #a8c7fa;
        --pay-caption: #a8c7fa;
        --pay-crumb-chevron: #7f889c;
        --pay-blue: #a8c7fa;
        --pay-blue-hover: #c2d7fb;
        --pay-on-blue: #062e6f;
        --pay-blue-soft: rgb(168 199 250 / 0.14);
        --pay-blue-soft-edge: rgb(168 199 250 / 0.3);
        --pay-outline: rgb(255 255 255 / 0.2);
        --pay-outline-ink: #a8c7fa;
        --pay-outline-bg: rgb(255 255 255 / 0.04);
        --pay-outline-hover: rgb(168 199 250 / 0.12);
        --pay-line: rgb(255 255 255 / 0.08);
        --pay-line-strong: rgb(255 255 255 / 0.14);
        --pay-green: #6dd5a8;
        --pay-green-dot: #4cd9a0;
        --pay-wash: #17181b;
        --pay-faq-band: #161719;
        --pay-hero-bg: radial-gradient(circle at 86% 10%, #1b2a47 0, transparent 33%), linear-gradient(122deg, #131722 0%, #131720 48%, #121a2b 100%);
        --pay-hero-ring: rgb(168 199 250 / 0.2);
        --pay-glow: radial-gradient(ellipse 55% 47% at 55% 53%, rgb(60 120 240 / 0.2), transparent 80%);
        --pay-card: #1c1f25;
        --pay-card-edge: rgb(255 255 255 / 0.12);
        --pay-card-shadow: 0 35px 90px rgb(0 0 0 / 0.5), 0 8px 22px rgb(0 0 0 / 0.35);
        --pay-card-rule: rgb(255 255 255 / 0.08);
        --pay-tag-bg: rgb(168 199 250 / 0.12);
        --pay-tag-edge: rgb(168 199 250 / 0.28);
        --pay-tag-ink: #a8c7fa;
        --pay-input-edge: rgb(255 255 255 / 0.22);
        --pay-channel-edge: rgb(255 255 255 / 0.16);
        --pay-channel-on-bg: rgb(168 199 250 / 0.14);
        --pay-channel-on-edge: #7fa8f7;
        --pay-channel-on-ring: rgb(127 168 247 / 0.25);
        --pay-channel-on-ink: #d6e5ff;
        --pay-result-bg: linear-gradient(165deg, #20252d, #1c222c);
        --pay-result-rule: rgb(255 255 255 / 0.1);
        --pay-idle-bg: rgb(127 168 247 / 0.2);
        --pay-idle-ink: #a8c7fa;
        --pay-run-bg: rgb(255 184 77 / 0.18);
        --pay-run-ink: #ffcc80;
        --pay-done-bg: rgb(109 213 168 / 0.18);
        --pay-done-ink: #6dd5a8;
        --pay-step-off: #4a5365;
        --pay-step-now: #7fa8f7;
        --pay-step-now-ring: rgb(127 168 247 / 0.28);
        --pay-step-now-ink: #a8c7fa;
        --pay-note-bg: #0e1a33;
        --pay-note-shadow: 0 15px 35px rgb(0 0 0 / 0.45);
        --pay-mark-face: #1c1f25;
        --pay-mark-mpesa-bg: rgb(76 175 70 / 0.18);
        --pay-mark-mpesa: #6fd069;
        --pay-mark-mpesa-red: #ff6b61;
        --pay-mark-airtel-bg: rgb(255 82 82 / 0.16);
        --pay-mark-airtel: #ff6b6b;
        --pay-mark-card-bg: rgb(127 168 247 / 0.18);
        --pay-mark-card: #a8c7fa;
        --pay-mark-bank-bg: rgb(190 205 235 / 0.14);
        --pay-mark-bank: #c9d6ee;
    }
}

:root[data-theme="dark"] {
    --pay-surface: #131314;
    --pay-eyebrow: #a8c7fa;
    --pay-caption: #a8c7fa;
    --pay-crumb-chevron: #7f889c;
    --pay-blue: #a8c7fa;
    --pay-blue-hover: #c2d7fb;
    --pay-on-blue: #062e6f;
    --pay-blue-soft: rgb(168 199 250 / 0.14);
    --pay-blue-soft-edge: rgb(168 199 250 / 0.3);
    --pay-outline: rgb(255 255 255 / 0.2);
    --pay-outline-ink: #a8c7fa;
    --pay-outline-bg: rgb(255 255 255 / 0.04);
    --pay-outline-hover: rgb(168 199 250 / 0.12);
    --pay-line: rgb(255 255 255 / 0.08);
    --pay-line-strong: rgb(255 255 255 / 0.14);
    --pay-green: #6dd5a8;
    --pay-green-dot: #4cd9a0;
    --pay-wash: #17181b;
    --pay-faq-band: #161719;
    --pay-hero-bg: radial-gradient(circle at 86% 10%, #1b2a47 0, transparent 33%), linear-gradient(122deg, #131722 0%, #131720 48%, #121a2b 100%);
    --pay-hero-ring: rgb(168 199 250 / 0.2);
    --pay-glow: radial-gradient(ellipse 55% 47% at 55% 53%, rgb(60 120 240 / 0.2), transparent 80%);
    --pay-card: #1c1f25;
    --pay-card-edge: rgb(255 255 255 / 0.12);
    --pay-card-shadow: 0 35px 90px rgb(0 0 0 / 0.5), 0 8px 22px rgb(0 0 0 / 0.35);
    --pay-card-rule: rgb(255 255 255 / 0.08);
    --pay-tag-bg: rgb(168 199 250 / 0.12);
    --pay-tag-edge: rgb(168 199 250 / 0.28);
    --pay-tag-ink: #a8c7fa;
    --pay-input-edge: rgb(255 255 255 / 0.22);
    --pay-channel-edge: rgb(255 255 255 / 0.16);
    --pay-channel-on-bg: rgb(168 199 250 / 0.14);
    --pay-channel-on-edge: #7fa8f7;
    --pay-channel-on-ring: rgb(127 168 247 / 0.25);
    --pay-channel-on-ink: #d6e5ff;
    --pay-result-bg: linear-gradient(165deg, #20252d, #1c222c);
    --pay-result-rule: rgb(255 255 255 / 0.1);
    --pay-idle-bg: rgb(127 168 247 / 0.2);
    --pay-idle-ink: #a8c7fa;
    --pay-run-bg: rgb(255 184 77 / 0.18);
    --pay-run-ink: #ffcc80;
    --pay-done-bg: rgb(109 213 168 / 0.18);
    --pay-done-ink: #6dd5a8;
    --pay-step-off: #4a5365;
    --pay-step-now: #7fa8f7;
    --pay-step-now-ring: rgb(127 168 247 / 0.28);
    --pay-step-now-ink: #a8c7fa;
    --pay-note-bg: #0e1a33;
    --pay-note-shadow: 0 15px 35px rgb(0 0 0 / 0.45);
    --pay-mark-face: #1c1f25;
    --pay-mark-mpesa-bg: rgb(76 175 70 / 0.18);
    --pay-mark-mpesa: #6fd069;
    --pay-mark-mpesa-red: #ff6b61;
    --pay-mark-airtel-bg: rgb(255 82 82 / 0.16);
    --pay-mark-airtel: #ff6b6b;
    --pay-mark-card-bg: rgb(127 168 247 / 0.18);
    --pay-mark-card: #a8c7fa;
    --pay-mark-bank-bg: rgb(190 205 235 / 0.14);
    --pay-mark-bank: #c9d6ee;
}

/* ------------------------------------------------------------------ */
/* Type roles (typography.md, 3)                                        */
/* ------------------------------------------------------------------ */

/* The page's texts take typography.md's roles (section 3) here, and only here: the rules below set none of their family, size,
   weight, line height, letter spacing or case. A heading's tag gives it its role (site.css's base) unless it is listed here,
   taking another level's style; the rest are listed by their roles; an input is typography.md's form input by site.css's base,
   and the examples of the stages' code are its code. */

/* H4 (card title): sans 500 */
.pay-acc__name,
.pay-faq__question,
.pay-story__name,
.pay-result__title {
    font-family: var(--font-sans);
    font-size: var(--fs-h4);
    font-weight: var(--fw-medium);
    line-height: var(--lh-h4);
    letter-spacing: 0;
}

/* Stat: mono 700 (the amount of the sample checkout) */
.pay-checkout__figure {
    font-family: var(--font-mono);
    font-size: var(--fs-stat);
    font-weight: var(--fw-bold);
    line-height: var(--lh-stat);
    font-variant-numeric: tabular-nums;
}

/* Body: sans 400 */
.pay-lead,
.pay-hero__lead,
.pay-guide__body,
.pay-story__text,
.pay-story__line,
.pay-acc__text,
.pay-faq__answer,
.pay-eco__text,
.pay-closing__text {
    font-family: var(--font-sans);
    font-size: var(--fs-body);
    font-weight: var(--fw-regular);
    line-height: var(--lh-body);
    letter-spacing: 0;
}

/* Small, captions: sans 400 */
.pay-notes,
.pay-checkout__currency,
.pay-checkout__safe,
.pay-result__copy,
.pay-live__step,
.pay-result__foot,
.pay-guide__note,
.pay-stage__note-sub {
    font-family: var(--font-sans);
    font-size: var(--fs-small);
    font-weight: var(--fw-regular);
    line-height: var(--lh-small);
    letter-spacing: 0;
}

/* Form labels: sans 500 (the sample checkout's names and choices, the strip's lines, the tools) */
.pay-checkout__brand,
.pay-checkout__label,
.pay-channel,
.pay-stage__note-name,
.pay-assure__item,
.pay-eco__item {
    font-family: var(--font-sans);
    font-size: var(--fs-small);
    font-weight: var(--fw-medium);
    line-height: var(--lh-small);
    letter-spacing: 0;
}

/* Buttons and navigation links: sans 500 */
.pay-btn,
.pay-crumbs__list,
.pay-link,
.pay-guide__tab,
.pay-next {
    font-family: var(--font-sans);
    font-size: var(--fs-button);
    font-weight: var(--fw-medium);
    line-height: var(--lh-button);
    letter-spacing: 0;
}

/* Eyebrow labels and tags: mono 500, uppercase */
.pay-eyebrow,
.pay-tag {
    font-family: var(--font-mono);
    font-size: var(--fs-eyebrow);
    font-weight: var(--fw-medium);
    line-height: var(--lh-eyebrow);
    letter-spacing: var(--ls-eyebrow);
    text-transform: uppercase;
}

/* ------------------------------------------------------------------ */
/* The page                                                            */
/* ------------------------------------------------------------------ */

.pay {
    background: var(--pay-surface);
    color: var(--pay-ink);
}

.pay-eyebrow,
.pay-tag {
    margin: 0;
}

.pay-eyebrow {
    color: var(--pay-eyebrow);
}

.pay-eyebrow--night {
    color: var(--pay-night-eyebrow);
}

/* a section's heading (an h2, the H2 role), its lines balanced */
.pay-title {
    margin: 0.5rem 0 0;
    color: var(--pay-ink);
    text-wrap: balance;
}

.pay-title--night {
    color: #ffffff;
}

.pay-accent {
    color: var(--pay-eyebrow);
}

.pay-accent--night {
    color: var(--pay-night-accent);
}

.pay-lead {
    margin: 0.75rem 0 0;
    max-width: 36rem;
    color: var(--pay-muted);
    text-wrap: pretty;
}

/* a link of its own, in the blue, with its arrow; a long word in its words breaks rather than widen it past its column,
   at 200% text on a small screen */
.pay-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 2.75rem;
    color: var(--pay-eyebrow);
    text-decoration: none;
    transition: gap var(--spring) var(--ease-spring);
}

.pay-link > span {
    min-width: 0;
    overflow-wrap: anywhere;
}

.pay-link:hover {
    text-decoration: underline;
    text-underline-offset: 0.2em;
}

.pay-link--night {
    color: #ffffff;
}

/* a section has its room over it and none under it (--gap-max); a band has the room it needs inside itself */
.pay-section {
    padding-top: var(--gap-max);
}

.pay .icon {
    width: 1.25rem;
    height: 1.25rem;
}

/* this page's icons are lines (site.css's .icon fills with currentColor); the marks of the ways to pay, which are the landing
   design's and the site's, are shapes, and keep their fill */
.pay .pay-icon {
    fill: none;
}

/* paragraphs that are rows of their own words are as wide as their rows, not as the base's 70ch */
.pay-notes,
.pay-checkout__brand,
.pay-checkout__safe,
.pay-result__copy,
.pay-result__foot,
.pay-guide__note,
.pay-stage__note-sub,
.pay-assure__label {
    max-width: none;
}

/* ------------------------------------------------------------------ */
/* Buttons: pills that answer the press itself                         */
/* ------------------------------------------------------------------ */

.pay-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.625rem;
    min-height: 3rem;
    padding: 0.625rem 1.5rem;
    border: 1px solid transparent;
    max-width: 100%;
    border-radius: 999px;
    overflow-wrap: anywhere;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 200ms var(--ease-standard), border-color 200ms var(--ease-standard),
        color 200ms var(--ease-standard), box-shadow 250ms var(--ease-standard),
        scale var(--spring-quick) var(--ease-spring);
}

.pay-btn .icon {
    width: 1.125rem;
    height: 1.125rem;
    flex: none;
    transition: translate var(--spring) var(--ease-spring);
}

.pay-btn--filled {
    background: var(--pay-blue);
    color: var(--pay-on-blue);
    box-shadow: 0 11px 20px -13px var(--pay-blue);
}

.pay-btn--filled:hover {
    background: var(--pay-blue-hover);
    color: var(--pay-on-blue);
}

.pay-btn--outlined {
    border-color: var(--pay-outline);
    background: var(--pay-outline-bg);
    color: var(--pay-outline-ink);
}

.pay-btn--outlined:hover {
    background: var(--pay-outline-hover);
    color: var(--pay-outline-ink);
}

/* on the closing card: a white pill, and one outlined in white */
.pay-btn--light {
    background: #ffffff;
    color: var(--pay-light-ink);
}

.pay-btn--light:hover {
    background: var(--pay-light-hover);
    color: var(--pay-light-ink);
}

.pay-btn--ghost {
    border-color: rgb(255 255 255 / 0.55);
    background: transparent;
    color: #ffffff;
}

.pay-btn--ghost:hover {
    background: rgb(255 255 255 / 0.12);
    color: #ffffff;
}

.pay-btn:active {
    scale: var(--press-scale);
    transition-duration: 200ms, 200ms, 200ms, 250ms, var(--press-in);
}

@media (hover: hover) and (pointer: fine) {
    /* an arrow moves the way it points */
    .pay-btn:hover .pay-icon--arrow-up-right,
    .pay-link:hover .pay-icon--arrow-up-right {
        translate: 2px -2px;
    }

    .pay-btn:hover .pay-icon--arrow-down {
        translate: 0 3px;
    }

    .pay-btn:hover .pay-icon--arrow-right,
    .pay-next:hover .pay-icon--arrow-right {
        translate: 3px 0;
    }
}

/* ------------------------------------------------------------------ */
/* Hero                                                                */
/* ------------------------------------------------------------------ */

.pay-hero {
    position: relative;
    overflow: clip;
    isolation: isolate;
    background: var(--pay-hero-bg);
}

/* a ring, from the foot at the right, as the design draws it */
.pay-hero::before {
    content: "";
    position: absolute;
    z-index: -1;
    right: -8%;
    bottom: -64%;
    width: 70rem;
    height: 57rem;
    border: 1px solid var(--pay-hero-ring);
    border-radius: 48% 52% 33% 67%;
    opacity: 0.6;
    rotate: -21deg;
    pointer-events: none;
}

.pay-hero__inner {
    display: grid;
    gap: var(--gap-max);
    align-items: center;
    padding-block: 0.75rem 1.75rem;
}

.pay-hero__words {
    min-width: 0;
}

.pay-crumbs__list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.125rem 0.25rem;
    margin: 0;
    padding: 0;
    list-style: none;
    color: var(--pay-muted);
}

.pay-crumbs__list li {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

.pay-crumbs__list .icon {
    width: 1rem;
    height: 1rem;
    color: var(--pay-crumb-chevron);
}

/* a target as tall as a fingertip */
.pay-crumbs__link {
    display: inline-flex;
    align-items: center;
    min-height: 2.5rem;
    padding-inline: 0.125rem;
    color: inherit;
    text-decoration: none;
}

.pay-crumbs__link:hover {
    color: var(--pay-ink);
    text-decoration: underline;
    text-underline-offset: 0.2em;
}

.pay-crumbs__current {
    color: var(--pay-ink);
}

.pay-hero__words > .pay-eyebrow {
    margin-top: 0.5rem;
}

.pay-hero__title {
    margin: 0.75rem 0 0;
    color: var(--pay-ink);
}

.pay-hero__lead {
    margin: 1rem 0 0;
    max-width: 34rem;
    color: var(--pay-muted);
    text-wrap: pretty;
}

.pay-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 1.25rem;
}

/* what it stands for: three short notes, each after a green dot */
.pay-notes {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 1.25rem;
    margin: 1rem 0 0;
    padding: 0;
    list-style: none;
    color: var(--pay-muted);
}

.pay-notes__item {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.pay-notes__item::before {
    content: "";
    flex: none;
    width: 0.4375rem;
    height: 0.4375rem;
    border-radius: 50%;
    background: var(--pay-green-dot);
}

/* ------------------------------------------------------------------ */
/* The sample checkout in the hero                                     */
/* ------------------------------------------------------------------ */

/* The stage: a blue glow behind the card, its caption over it at the right, and a note under it at the right, which from 40rem
   hangs over the card's foot corner (it lies over the card's bottom padding and no text). */
.pay-stage {
    position: relative;
    min-width: 0;
}

.pay-stage::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: -2.5rem -1.5rem -0.5rem;
    background: var(--pay-glow);
    pointer-events: none;
}

.pay-stage__caption {
    margin: 0 0 0.5rem;
    color: var(--pay-caption);
    text-align: right;
}

.pay-stage__note {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: max-content;
    max-width: calc(100% - 1rem);
    margin: 0.75rem 0.5rem 0 auto;
    padding: 0.625rem 1rem;
    border-radius: 0.875rem;
    background: var(--pay-note-bg);
    color: var(--pay-note-ink);
    box-shadow: var(--pay-note-shadow);
}

.pay-stage__note p {
    display: grid;
    margin: 0;
    max-width: none;
}

.pay-stage__note-sub {
    color: var(--pay-note-sub);
}

.pay-stage__pulse {
    flex: none;
    width: 0.625rem;
    height: 0.625rem;
    border-radius: 50%;
    background: var(--pay-pulse);
    box-shadow: 0 0 0 4px rgb(29 222 170 / 0.16);
}

/* the card: a size container, so that what it holds follows its own width and not the page's (the sizes are in rem, so that
   they follow the text) */
.pay-checkout {
    container: pay-checkout / inline-size;
    max-width: 44rem;
    overflow: hidden;
    border: 1px solid var(--pay-card-edge);
    border-radius: 1.5rem;
    background: var(--pay-card);
    box-shadow: var(--pay-card-shadow);
}

.pay-checkout__top {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem 0.75rem;
    padding: 0.875rem 1.25rem;
    border-bottom: 1px solid var(--pay-card-rule);
}

.pay-checkout__brand {
    margin: 0;
    color: var(--pay-ink);
}

.pay-checkout__brand span {
    color: var(--pay-eyebrow);
}

/* a tag that wraps on a narrow card is a rounded box, not a pill: the ends of a pill cut into the words of its two lines */
.pay-checkout__tag {
    padding: 0.25rem 0.75rem;
    border: 1px solid var(--pay-tag-edge);
    border-radius: 0.625rem;
    background: var(--pay-tag-bg);
    color: var(--pay-tag-ink);
}

.pay-checkout__grid {
    display: grid;
}

.pay-checkout__left {
    min-width: 0;
    padding: 1.25rem;
}

.pay-checkout__mini {
    margin: 0;
    color: var(--pay-muted);
}

/* a long amount breaks rather than push the card out of the page, at 200% text on a small screen */
.pay-checkout__amount {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0 0.5rem;
    margin: 0.5rem 0 0;
    max-width: none;
    color: var(--pay-ink);
}

.pay-checkout__figure {
    min-width: 0;
    overflow-wrap: anywhere;
}

.pay-checkout__currency {
    color: var(--pay-muted);
}

.pay-checkout__control {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem 0.75rem;
    margin-top: 0.75rem;
}

.pay-checkout__label {
    color: var(--pay-muted);
}

.pay-checkout__input {
    width: 7.5rem;
    max-width: 100%;
    min-height: 2.75rem;
    padding: 0.25rem 0.75rem;
    border: 1px solid var(--pay-input-edge);
    border-radius: 0.625rem;
    background: var(--pay-card);
    color: var(--pay-ink);
}

/* the ways to pay: two by two, each a mark on its tint and its name */
.pay-channels {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.5rem;
    margin-top: 0.75rem;
}

.pay-channel {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
    min-height: 3rem;
    padding: 0.25rem 0.5rem;
    border: 1px solid var(--pay-channel-edge);
    border-radius: 0.625rem;
    background: var(--pay-card);
    color: var(--pay-ink);
    text-align: left;
    cursor: pointer;
    overflow-wrap: anywhere;
    transition: border-color 180ms var(--ease-standard), background-color 180ms var(--ease-standard),
        box-shadow 180ms var(--ease-standard), scale var(--spring-quick) var(--ease-spring);
}

.pay-channel:hover:not(:disabled) {
    border-color: var(--pay-channel-on-edge);
}

.pay-channel:active:not(:disabled) {
    scale: var(--press-scale);
    transition-duration: 180ms, 180ms, 180ms, var(--press-in);
}

.pay-channel:disabled {
    cursor: default;
}

.pay-channel[aria-pressed="true"] {
    border-color: var(--pay-channel-on-edge);
    background: var(--pay-channel-on-bg);
    box-shadow: inset 0 0 0 2px var(--pay-channel-on-ring);
    color: var(--pay-channel-on-ink);
}

.pay-channel__mark {
    display: grid;
    place-items: center;
    flex: none;
    width: 1.875rem;
    height: 1.875rem;
    border-radius: 0.5rem;
    background: var(--pay-mark-bg);
    color: var(--pay-mark);
}

.pay-channel__mark .icon {
    width: 1.25rem;
    height: 1.25rem;
    fill: currentColor;
}

.pay-mark--mpesa {
    --pay-mark-bg: var(--pay-mark-mpesa-bg);
    --pay-mark: var(--pay-mark-mpesa);
}

.pay-mark--airtel {
    --pay-mark-bg: var(--pay-mark-airtel-bg);
    --pay-mark: var(--pay-mark-airtel);
}

.pay-mark--card {
    --pay-mark-bg: var(--pay-mark-card-bg);
    --pay-mark: var(--pay-mark-card);
}

.pay-mark--bank {
    --pay-mark-bg: var(--pay-mark-bank-bg);
    --pay-mark: var(--pay-mark-bank);
}

/* the parts of M-Pesa's mark that are not its colour: the screen, which is the card's, and the swoosh, which is red */
.pay .lp-b--white {
    fill: var(--pay-mark-face);
}

.pay .lp-b--mpesa-red {
    fill: var(--pay-mark-mpesa-red);
}

/* a block of its own in the left column: as wide as it, one under the choice */
.pay-checkout__run {
    display: flex;
    width: 100%;
    margin-top: 0.75rem;
    --pay-when-display: inline-flex;
}

.pay-checkout__run .pay-when {
    align-items: center;
    gap: 0.625rem;
}

.pay-checkout__run[aria-disabled="true"] {
    cursor: progress;
    opacity: 0.75;
}

/* what the script makes work is `hidden` until it has: a rule that gives these a display would show them all the same */
.pay-checkout__control[hidden],
.pay-checkout__run[hidden] {
    display: none;
}

.pay-checkout__safe {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0.75rem 0 0;
    color: var(--pay-muted);
}

.pay-checkout__safe .icon {
    flex: none;
    width: 1rem;
    height: 1rem;
    color: var(--pay-green);
}

/* what the checkout says: an icon, a title and a line, the three steps and the foot; in a narrow card the icon is beside the
   words and the steps are in a row, in a wide one they are one under another */
.pay-checkout__right {
    display: grid;
    grid-template-columns: 3rem minmax(0, 1fr);
    align-content: start;
    gap: 0.75rem 1rem;
    min-width: 0;
    padding: 1.25rem;
    border-top: 1px solid var(--pay-card-rule);
    background: var(--pay-result-bg);
}

.pay-result__icon {
    --pay-when-display: grid;
    display: grid;
    place-items: center;
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    transition: background-color 200ms var(--ease-standard), color 200ms var(--ease-standard);
}

.pay-result__icon .icon {
    width: 1.5rem;
    height: 1.5rem;
}

.pay-result__words {
    min-width: 0;
}

/* a long word breaks rather than push the card out of the page, at 200% text on a small screen */
.pay-result__title {
    margin: 0;
    color: var(--pay-ink);
    overflow-wrap: anywhere;
}

.pay-result__copy {
    margin: 0.25rem 0 0;
    color: var(--pay-muted);
    overflow-wrap: anywhere;
}

.pay-live {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.pay-live__step {
    --pay-dot: var(--pay-step-off);
    --pay-dot-ring: transparent;
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    color: var(--pay-muted);
}

.pay-live__step::before {
    content: "";
    flex: none;
    width: 0.5rem;
    height: 0.5rem;
    margin-top: 0.4375rem;
    border-radius: 50%;
    background: var(--pay-dot);
    box-shadow: 0 0 0 3px var(--pay-dot-ring);
    transition: background-color 200ms var(--ease-standard), box-shadow 200ms var(--ease-standard);
}

.pay-live__step {
    min-width: 0;
    overflow-wrap: anywhere;
}

.pay-result__foot {
    grid-column: 1 / -1;
    margin: 0;
    padding-top: 0.75rem;
    border-top: 1px solid var(--pay-result-rule);
    color: var(--pay-muted);
    overflow-wrap: anywhere;
}

/* The state: the checkout's three states (waiting, running, done) of what it says, one over another in the page, and data-state
   says which holds; the way to pay chosen is data-channel, which says which of the waiting words is shown. A page without a
   script shows it as it ends, with no choice and no button. */
.pay-when {
    display: none;
}

.pay-checkout[data-state="idle"] .pay-when--idle,
.pay-checkout[data-state="running"] .pay-when--running,
.pay-checkout[data-state="done"] .pay-when--done {
    display: var(--pay-when-display, inline);
}

.pay-msg {
    display: none;
}

.pay-checkout[data-channel="mpesa"] .pay-msg[data-msg="mpesa"],
.pay-checkout[data-channel="airtel"] .pay-msg[data-msg="airtel"],
.pay-checkout[data-channel="card"] .pay-msg[data-msg="card"],
.pay-checkout[data-channel="bank"] .pay-msg[data-msg="bank"] {
    display: inline;
}

.pay-checkout[data-state="idle"] .pay-result__icon {
    background: var(--pay-idle-bg);
    color: var(--pay-idle-ink);
}

.pay-checkout[data-state="running"] .pay-result__icon {
    background: var(--pay-run-bg);
    color: var(--pay-run-ink);
}

.pay-checkout[data-state="done"] .pay-result__icon {
    background: var(--pay-done-bg);
    color: var(--pay-done-ink);
}

/* the steps: the first is the one it is at while it waits, the second while it runs, and all are done when it has */
.pay-checkout[data-state="idle"] .pay-live__step:nth-child(1),
.pay-checkout[data-state="running"] .pay-live__step:nth-child(2) {
    --pay-dot: var(--pay-step-now);
    --pay-dot-ring: var(--pay-step-now-ring);
    color: var(--pay-step-now-ink);
}

.pay-checkout[data-state="running"] .pay-live__step:nth-child(1),
.pay-checkout[data-state="done"] .pay-live__step {
    --pay-dot: var(--pay-step-on);
    color: var(--pay-ink);
}

@media (scripting: none) {
    .pay-checkout[data-state] .pay-when--idle,
    .pay-checkout[data-state] .pay-when--running {
        display: none;
    }

    .pay-checkout[data-state] .pay-when--done {
        display: var(--pay-when-display, inline);
    }

    .pay-checkout[data-state] .pay-result__icon {
        background: var(--pay-done-bg);
        color: var(--pay-done-ink);
    }

    .pay-checkout[data-state] .pay-live__step:nth-child(n) {
        --pay-dot: var(--pay-step-on);
        --pay-dot-ring: transparent;
        color: var(--pay-ink);
    }
}

/* in a card as wide as two columns need, what it asks is at the left and what it says at the right */
@container pay-checkout (min-width: 34rem) {
    .pay-checkout__grid {
        grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr);
    }

    .pay-checkout__left {
        padding: 1.25rem 1.25rem 1.25rem 1.5rem;
    }

    /* its words are together in the middle of the panel, which is as high as the left column: the room that leaves is over them
       and under them, in the card, and not between them (items are not spread across a column) */
    .pay-checkout__right {
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 0.75rem;
        border-top: 0;
        border-left: 1px solid var(--pay-card-rule);
    }

    .pay-live {
        grid-template-columns: minmax(0, 1fr);
        gap: 0.625rem;
    }

    .pay-checkout__run {
        width: 100%;
    }
}

/* where the card is narrower than its two ways to pay need, they are one under another, and so is what is typed */
@container pay-checkout (max-width: 21rem) {
    .pay-channels {
        grid-template-columns: minmax(0, 1fr);
    }

    .pay-live {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* ------------------------------------------------------------------ */
/* What it is designed for: a strip                                     */
/* ------------------------------------------------------------------ */

.pay-assure {
    border-bottom: 1px solid var(--pay-line);
    background: var(--pay-surface);
}

.pay-assure__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.25rem var(--gap-max);
    padding-block: 0.75rem;
}

.pay-assure__label {
    color: var(--pay-muted);
}

.pay-assure__list {
    display: flex;
    flex-wrap: wrap;
    gap: 0 1.25rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.pay-assure__item {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 2rem;
    color: var(--pay-ink);
}

.pay-assure__item .icon {
    flex: none;
    width: 1rem;
    height: 1rem;
    color: var(--pay-eyebrow);
}

/* ------------------------------------------------------------------ */
/* A heading beside what it heads                                       */
/* ------------------------------------------------------------------ */

.pay-split {
    display: grid;
    gap: var(--gap-max);
    align-items: start;
}

.pay-split__head {
    min-width: 0;
}

/* ------------------------------------------------------------------ */
/* Follow the money: four stages and the example each shows             */
/* ------------------------------------------------------------------ */

.pay-guide {
    display: grid;
    min-width: 0;
    border-block: 1px solid var(--pay-line-strong);
}

/* the choice: four links, a number over a word, in a row; as many to a row as the words need, which at 200% text is two */
.pay-guide__nav {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(4.5rem, 1fr));
    gap: 0.25rem;
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--pay-line-strong);
}

.pay-guide__tab {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.125rem;
    min-width: 0;
    min-height: 3.5rem;
    padding: 0.375rem 0.25rem;
    border-radius: 0.5rem;
    color: var(--pay-muted);
    text-align: center;
    text-decoration: none;
    overflow-wrap: anywhere;
    transition: background-color 200ms var(--ease-standard), color 200ms var(--ease-standard),
        scale var(--spring-quick) var(--ease-spring);
}

.pay-guide__tab:hover {
    color: var(--pay-eyebrow);
}

.pay-guide__tab[aria-selected="true"] {
    background: var(--pay-blue-soft);
    color: var(--pay-eyebrow);
}

.pay-guide__tab:active {
    scale: var(--press-scale);
    transition-duration: 200ms, 200ms, var(--press-in);
}

.pay-guide__panels {
    min-width: 0;
}

.pay-guide__panel {
    min-width: 0;
    padding-block: 1.25rem;
}

.pay-guide__panel + .pay-guide__panel {
    border-top: 1px solid var(--pay-line);
}

.pay-guide__status {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--pay-green);
}

.pay-guide__status::before {
    content: "";
    flex: none;
    width: 0.4375rem;
    height: 0.4375rem;
    border-radius: 50%;
    background: var(--pay-green-dot);
}

.pay-guide__title {
    margin: 0.5rem 0 0;
    color: var(--pay-ink);
    text-wrap: balance;
}

.pay-guide__body {
    margin: 0.75rem 0 0;
    max-width: 32rem;
    color: var(--pay-muted);
    text-wrap: pretty;
}

/* the example: not a production API specification, and said so under it */
.pay-code {
    margin: 1rem 0 0;
    padding: 1rem 1.25rem;
    border-radius: 0.75rem;
    background: var(--pay-code-bg);
    color: var(--pay-code-ink);
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

/* the site's own code has a pale ground and padding; here the whole block is the ground */
.pay-code code {
    padding: 0;
    border-radius: 0;
    background: none;
    color: inherit;
}

.pay-guide__foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0 1rem;
    margin-top: 0.5rem;
}

.pay-guide__note {
    margin: 0;
    color: var(--pay-muted);
}

.pay-next {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 2.75rem;
    padding: 0 0.25rem;
    border: 0;
    background: none;
    color: var(--pay-eyebrow);
    cursor: pointer;
    overflow-wrap: anywhere;
    transition: scale var(--spring-quick) var(--ease-spring);
}

.pay-next:hover {
    text-decoration: underline;
    text-underline-offset: 0.2em;
}

.pay-next:active {
    scale: var(--press-scale);
    transition-duration: var(--press-in);
}

.pay-next .icon {
    width: 1.125rem;
    height: 1.125rem;
    flex: none;
    transition: translate var(--spring) var(--ease-spring);
}

/* ------------------------------------------------------------------ */
/* The work behind every payment: a deep blue band                      */
/* ------------------------------------------------------------------ */

.pay-story {
    position: relative;
    isolation: isolate;
    margin-top: var(--gap-max);
    padding-block: 1.75rem;
    overflow: hidden;
    background: var(--pay-night);
    color: #ffffff;
}

/* a ring at its right, from 72rem: on a narrower band its words reach across it */
.pay-story::before {
    content: "";
    display: none;
    position: absolute;
    z-index: -1;
    top: -19rem;
    right: -21rem;
    width: 47rem;
    height: 47rem;
    border: 1px solid var(--pay-night-ring);
    border-radius: 50%;
    pointer-events: none;
}

.pay-story__inner {
    display: grid;
    gap: var(--gap-max);
    align-items: center;
}

.pay-story__words {
    min-width: 0;
}

.pay-story__text {
    margin: 0.75rem 0 0;
    max-width: 32rem;
    color: var(--pay-night-text);
    text-wrap: pretty;
}

.pay-story__words > .pay-link {
    margin-top: 0.5rem;
    border-bottom: 1px solid rgb(255 255 255 / 0.5);
}

.pay-story__list {
    min-width: 0;
    margin: 0;
    padding: 0;
    list-style: none;
    border-top: 1px solid var(--pay-night-rule);
}

.pay-story__row {
    display: grid;
    grid-template-columns: 2.25rem minmax(0, 1fr) 1.5rem;
    align-items: center;
    gap: 0 0.75rem;
    padding-block: 0.875rem;
    border-bottom: 1px solid var(--pay-night-rule);
}

.pay-story__no {
    color: var(--pay-night-num);
}

.pay-story__name {
    margin: 0;
    color: #ffffff;
}

.pay-story__line {
    margin: 0.25rem 0 0;
    color: var(--pay-night-text);
    overflow-wrap: anywhere;
}

.pay-story__tick {
    display: grid;
    place-items: center;
    color: var(--pay-night-tick);
}

/* ------------------------------------------------------------------ */
/* What it engineers: six things that open                              */
/* ------------------------------------------------------------------ */

.pay-acc {
    min-width: 0;
    border-top: 1px solid var(--pay-line-strong);
}

.pay-acc__item {
    border-bottom: 1px solid var(--pay-line-strong);
}

.pay-acc__summary {
    display: grid;
    grid-template-columns: 2.25rem minmax(0, 1fr) 2rem;
    align-items: center;
    column-gap: 0.75rem;
    min-height: 4rem;
    padding: 1rem 0.125rem;
    list-style: none;
    cursor: pointer;
}

.pay-acc__summary::-webkit-details-marker {
    display: none;
}

.pay-acc__no {
    color: var(--pay-eyebrow);
}

.pay-acc__name {
    color: var(--pay-ink);
    overflow-wrap: anywhere;
    transition: color 200ms var(--ease-standard);
}

.pay-acc__plus {
    display: grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    border: 1px solid var(--pay-line-strong);
    border-radius: 50%;
    color: var(--pay-eyebrow);
    transition: rotate var(--spring) var(--ease-spring), background-color 200ms var(--ease-standard),
        border-color 200ms var(--ease-standard);
}

.pay-acc__plus .icon {
    width: 1rem;
    height: 1rem;
}

.pay-acc__item[open] > .pay-acc__summary .pay-acc__plus {
    border-color: var(--pay-blue-soft-edge);
    background: var(--pay-blue-soft);
    rotate: 45deg;
}

.pay-acc__item[open] > .pay-acc__summary .pay-acc__name {
    color: var(--pay-eyebrow);
}

@media (hover: hover) {
    .pay-acc__item:not([open]) > .pay-acc__summary:hover .pay-acc__name {
        color: var(--pay-eyebrow);
    }
}

.pay-acc__detail {
    max-width: 62rem;
    padding: 0 0.125rem 1rem 3rem;
}

/* a long word breaks rather than push the page sideways, at 200% text on a small screen */
.pay-acc__text {
    min-width: 0;
    margin: 0;
    max-width: 40rem;
    overflow-wrap: anywhere;
    color: var(--pay-muted);
    text-wrap: pretty;
}

/* where the browser can animate a disclosure's content, a thing opens to its height and closes back, on the site's spring */
@supports (interpolate-size: allow-keywords) {
    .pay-acc__item,
    .pay-faq__item {
        interpolate-size: allow-keywords;
    }

    .pay-acc__item::details-content,
    .pay-faq__item::details-content {
        block-size: 0;
        overflow: clip;
        opacity: 0;
        transition: block-size var(--spring) var(--ease-spring), opacity 250ms var(--ease-standard),
            content-visibility var(--spring) allow-discrete;
    }

    .pay-acc__item[open]::details-content,
    .pay-faq__item[open]::details-content {
        block-size: auto;
        opacity: 1;
    }
}

/* ------------------------------------------------------------------ */
/* Your ecosystem: the tools it works with                              */
/* ------------------------------------------------------------------ */

.pay-eco {
    margin-top: var(--gap-max);
    padding-block: 1.75rem;
    border-block: 1px solid var(--pay-line);
    background: var(--pay-wash);
}

.pay-eco__inner {
    display: grid;
    gap: var(--gap-max);
    align-items: center;
}

.pay-eco__words {
    min-width: 0;
}

.pay-eco__text {
    margin: 0.75rem 0 0;
    max-width: 30rem;
    color: var(--pay-muted);
    text-wrap: pretty;
}

.pay-eco__list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 1rem;
    min-width: 0;
    margin: 0;
    padding: 0;
    list-style: none;
}

.pay-eco__item {
    display: inline-flex;
    align-items: center;
    gap: 0.625rem;
    min-height: 2.75rem;
    padding: 0.25rem;
    border-bottom: 1px solid var(--pay-outline);
    color: var(--pay-ink);
    overflow-wrap: anywhere;
}

.pay-eco__dot {
    flex: none;
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background: var(--pay-eyebrow);
}

/* ------------------------------------------------------------------ */
/* The questions                                                       */
/* ------------------------------------------------------------------ */

.pay-faq__inner {
    display: grid;
    gap: var(--gap-max);
    align-items: start;
}

.pay-faq__head {
    min-width: 0;
}

.pay-faq__head > .pay-link {
    margin-top: 0.5rem;
}

.pay-faq__list {
    min-width: 0;
    border-top: 1px solid var(--pay-line-strong);
}

.pay-faq__item {
    border-bottom: 1px solid var(--pay-line-strong);
}

.pay-faq__question {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    min-height: 3.5rem;
    padding-block: 1rem;
    color: var(--pay-ink);
    list-style: none;
    cursor: pointer;
    transition: color 200ms var(--ease-standard);
}

.pay-faq__question::-webkit-details-marker {
    display: none;
}

/* a long word breaks rather than push the plus out of the page, at 200% text on a small screen */
.pay-faq__question > span {
    min-width: 0;
    overflow-wrap: anywhere;
}

.pay-faq__question .icon {
    flex: none;
    color: var(--pay-eyebrow);
    transition: rotate var(--spring) var(--ease-spring);
}

.pay-faq__item[open] > .pay-faq__question .icon {
    rotate: 45deg;
}

@media (hover: hover) {
    .pay-faq__item:not([open]) > .pay-faq__question:hover {
        color: var(--pay-eyebrow);
    }
}

.pay-faq__answer {
    padding-bottom: 1.25rem;
    color: var(--pay-muted);
}

.pay-faq__answer p {
    max-width: 44rem;
    margin: 0;
}

/* ------------------------------------------------------------------ */
/* The closing call: a card in the column                               */
/* ------------------------------------------------------------------ */

.pay-closing-wrap {
    padding-block: var(--gap-max);
}

.pay-closing {
    position: relative;
    isolation: isolate;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--gap-max);
    padding: 1.75rem 1.25rem;
    overflow: hidden;
    border-radius: clamp(1rem, 1.5vw, 1.5rem);
    background: var(--pay-closing);
    color: #ffffff;
}

/* a ring at its right, from 72rem: on a narrower card its words reach across it, and a ring's line lay over them */
.pay-closing::before {
    content: "";
    display: none;
    position: absolute;
    z-index: -1;
    top: -26rem;
    right: 8%;
    width: 35rem;
    height: 35rem;
    border: 1px solid var(--pay-closing-ring);
    border-radius: 50%;
    pointer-events: none;
}

/* the words are as wide as their words, in a column of the card: a long word breaks (`anywhere`, which the heading's own
   `break-word` is not: it does not shorten what the words ask for) rather than push the card out of the page, at 200% text on a
   small screen */
.pay-closing__words,
.pay-closing__words > * {
    min-width: 0;
    overflow-wrap: anywhere;
}

.pay-closing .pay-eyebrow--night {
    color: var(--pay-closing-eyebrow);
}

.pay-closing__title {
    max-width: 40rem;
    margin: 0.5rem 0 0;
    color: #ffffff;
    text-wrap: balance;
}

.pay-closing__text {
    max-width: 38rem;
    margin: 0.75rem 0 0;
    color: var(--pay-closing-text);
    text-wrap: pretty;
}

.pay-closing__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

/* ------------------------------------------------------------------ */
/* Where a script chooses                                              */
/* ------------------------------------------------------------------ */

/* a page without a script has every stage one after another; where a script will make the choice, only the first, until it has
   (the markup has no `hidden` on them, which a page without a script could not undo) */
@media (scripting: enabled) {
    [data-tabs]:not(.is-ready) .pay-guide__panel ~ .pay-guide__panel {
        display: none;
    }
}

/* ------------------------------------------------------------------ */
/* From 40rem                                                          */
/* ------------------------------------------------------------------ */

@media (min-width: 40rem) {
    /* the note hangs over the card's foot corner, over its bottom padding and no text */
    .pay-stage {
        padding-bottom: 3.5rem;
    }

    .pay-stage__note {
        position: absolute;
        right: 0.75rem;
        bottom: 0;
        margin: 0;
        width: auto;
        max-width: none;
    }

    .pay-guide {
        grid-template-columns: 11rem minmax(0, 1fr);
    }

    .pay-guide__nav {
        grid-template-columns: minmax(0, 1fr);
        align-content: center;
        padding: 1rem 0.75rem 1rem 0;
        border-right: 1px solid var(--pay-line-strong);
        border-bottom: 0;
    }

    .pay-guide__tab {
        flex-direction: row;
        justify-content: flex-start;
        gap: 0.75rem;
        min-height: 2.75rem;
        padding-inline: 0.75rem;
        text-align: left;
    }

    .pay-guide__panel {
        padding-inline: 1.25rem 0;
    }

    .pay-checkout__top {
        padding-inline: 1.5rem;
    }
}

/* ------------------------------------------------------------------ */
/* From 48rem                                                          */
/* ------------------------------------------------------------------ */

@media (min-width: 48rem) {
    .pay-eco__inner {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
    }
}

/* ------------------------------------------------------------------ */
/* From 64rem: the checkout is beside the words, a heading beside what it heads */
/* ------------------------------------------------------------------ */

@media (min-width: 64rem) {
    .pay-hero__inner {
        grid-template-columns: minmax(0, 0.96fr) minmax(0, 1.04fr);
        padding-block: 0.75rem 2.25rem;
    }

    /* beside the words the card is as wide as its two columns need, at the right */
    .pay-checkout {
        max-width: 38rem;
        margin-left: auto;
    }

    .pay-split {
        grid-template-columns: minmax(0, 0.78fr) minmax(0, 1.22fr);
    }

    /* the heading stays in view while what it heads goes by */
    .pay-split__head {
        position: sticky;
        top: calc(var(--top-bar-h) + var(--gap-max));
    }

    .pay-story__inner {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    }

    .pay-faq__inner {
        grid-template-columns: minmax(0, 0.72fr) minmax(0, 1.28fr);
    }

    .pay-closing {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        padding-inline: 2rem;
    }
}

/* ------------------------------------------------------------------ */
/* From 72rem                                                          */
/* ------------------------------------------------------------------ */

@media (min-width: 72rem) {
    .pay-story::before,
    .pay-closing::before {
        display: block;
    }
}

/* ------------------------------------------------------------------ */
/* Contrast and transparency                                           */
/* ------------------------------------------------------------------ */

@media (prefers-contrast: more) {
    .pay-hero::before,
    .pay-stage::before {
        display: none;
    }

    .pay-checkout,
    .pay-channel,
    .pay-checkout__input {
        border-color: var(--md-outline);
    }
}

/* ------------------------------------------------------------------ */
/* Motion                                                              */
/* ------------------------------------------------------------------ */

/* As the page opens the hero's words settle (the title and the lead only rise, so that they are painted at once), the rest comes
   in after them, and the checkout last. */
@media (prefers-reduced-motion: no-preference) {
    .pay-hero__title,
    .pay-hero__lead {
        animation: hero-settle var(--spring-slow) var(--ease-spring) both;
    }

    .pay-hero__lead {
        animation-delay: 60ms;
    }

    .pay-crumbs,
    .pay-hero__words > .pay-eyebrow,
    .pay-hero__actions,
    .pay-notes {
        animation: hero-enter var(--spring-slow) var(--ease-spring) both;
    }

    .pay-hero__actions {
        animation-delay: 140ms;
    }

    .pay-notes {
        animation-delay: 220ms;
    }

    .pay-stage {
        animation: hero-enter var(--spring-slow) var(--ease-spring) 180ms both;
    }

    .pay-guide__panel:not([hidden]) .pay-guide__status,
    .pay-guide__panel:not([hidden]) .pay-guide__title,
    .pay-guide__panel:not([hidden]) .pay-guide__body,
    .pay-guide__panel:not([hidden]) .pay-code {
        animation: pay-swap var(--spring) var(--ease-spring) both;
    }
}

@keyframes pay-swap {
    from {
        opacity: 0;
        translate: 0 0.5rem;
    }
    to {
        opacity: 1;
        translate: 0 0;
    }
}

@media print {
    .pay-hero,
    .pay-assure,
    .pay-eco {
        background: none;
    }

    .pay-story,
    .pay-closing {
        background: none;
        color: inherit;
    }

    .pay-hero::before,
    .pay-stage::before,
    .pay-story::before,
    .pay-closing::before {
        display: none;
    }
}