/* ========================================================================================================== AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY. The ONE file the preview Worker serves and the CDN receives as pubwebpay-pay.css: the main page, then the card frame. It is built by `pnpm build:css` (scripts/build-figma-css.js) from the source files below, in this order, and any edit made here is overwritten the next time it runs (`pnpm dev`, both deploy commands and `pnpm copy:cdn` run it). Edit the source files in site/Content/pay/ instead, then run `pnpm build:css`. See site/Content/CLAUDE.md. main-page/theme/light.css main-page/layout/page.css main-page/layout/panels-and-field-order.css main-page/layout/desktop-grid.css main-page/payment/methods/order-and-spacing.css main-page/payment/methods/row-and-radio.css main-page/payment/methods/logos-and-labels.css main-page/payment/methods/card-brand-logo-tile.css main-page/payment/methods/apple-pay-and-google-pay.css main-page/layout/spacing-resets.css main-page/payment/methods/card-expanded.css main-page/payment/fields.css main-page/payment/methods/payto-expanded.css main-page/header/guest-menu.css main-page/header/merchant-logo-and-heading.css main-page/payment/amount.css main-page/layout/hide-section-titles.css main-page/footer/secure-payment.css main-page/review/page.css main-page/confirmation/success.css main-page/confirmation/failure.css main-page/payment/methods/unionpay.css main-page/header/hide-top-bar.css main-page/review/alipay-dialog.css main-page/dialogs/loading.css main-page/dialogs/tooltip.css main-page/dialogs/three-ds-popup.css card-frame/theme/light.css card-frame/accessibility/reduced-motion.css card-frame/layout/page-and-form.css card-frame/fields/inputs-and-labels.css card-frame/fields/card-number-brand-icon.css card-frame/validation/errors-and-summary.css card-frame/buttons/validate.css unionpay-frame/layout/page-and-form.css unionpay-frame/fields/inputs-and-labels.css unionpay-frame/buttons/validate.css ========================================================================================================== */ /* main-page/theme/light.css — the light colour and size variables of the payment page and its Review step (the main document, which holds the card frame). The other files in main-page/ use them. The hosted card inputs use card-frame/theme/light.css inside their iframe. */ :root { --f-bg: #fff; --f-surface: #fff; --f-ink: #1f2a56; --f-navy: #27346e; --f-navy-hover: #1d2858; --f-on-navy: #fff; --f-label: #2e3a66; --f-muted: #5f6880; --f-placeholder: #737a8f; --f-line: #dde1ea; --f-line-strong: #b4bccc; --f-field: #fff; --f-soft: #f5f7fb; --f-chip: #e4e8f1; --f-ring: rgba(39, 52, 110, .18); --f-logo-tile: #111827; --f-selected: #08a35c; /* the Figma's green radio dot (#00d072), darkened to reach 3:1 against white */ --f-green: #08804a; /* Review's PAY NOW: the Figma's #00d072 reaches only 2:1 with white text, darkened to 5:1 */ --f-green-hover: #066b3e; --f-on-green: #fff; --f-danger: #d92d20; --f-danger-bg: #fef3f2; --f-danger-line: #fecdca; --f-radius: 8px; --f-radius-row: 10px; --f-radius-card: 20px; --f-shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 2px 8px rgba(16, 24, 40, .05); --f-drop-shadow: drop-shadow(0 1px 2px rgba(16, 24, 40, .04)) drop-shadow(0 2px 8px rgba(16, 24, 40, .05)); /* --f-shadow as a filter, for the card drawn from many grid items */ --f-btn-h: 52px; --f-font: "Open Sans", "Segoe UI", Arial, sans-serif; color-scheme: light; } /* the page itself: body type and theme background, the container width (two 590px cards with a 30px gap), the Ace page-content resets. */ body { font-family: var(--f-font); -webkit-font-smoothing: antialiased; background: var(--f-bg); color: var(--f-ink); font-size: 14px; line-height: 1.5; } .container { max-width: 1240px; /* two cards of about 590px with a 30px gap, as in the Figma's 1440px frame */ width: 100%; padding: 0 24px 56px; } body:has(form.payment-form) .container { padding-bottom: 40px; } /* less blank space under the footer on the payment page (56px on the other steps) */ .page-content.layout-page-content { background: transparent; border: 0; padding: 0; } .page-content > .row { margin: 0; } .page-content > .row > .col-lg-12 { padding: 0; } .page-content > .row > .col-lg-12 > .row { margin: 0; } /* header row: logo + title */ .page-content > .row > .col-lg-12 > .row > .col-lg-12 { padding: 0; } @media (max-width: 767px) { .container { padding: 0 12px 40px; } body:has(form.payment-form) .container { padding-bottom: 24px; } } @media (prefers-reduced-motion: reduce) { * { transition: none !important; } } /* ---------- the two cards: one under the other, side by side from 992px ---------- */ form.payment-form { background: transparent; border: 0; box-shadow: none; margin: 0; } form.payment-form::after { content: ""; display: table; clear: both; } form.payment-form > .row, form.payment-form > .col-lg-12 { margin-left: 0; margin-right: 0; } form.payment-form > .row:first-of-type { display: grid; grid-template-columns: minmax(0, 1fr); align-items: start; } form.payment-form > .row:first-of-type::before, form.payment-form > .row:first-of-type::after { display: none; } /* Bootstrap's clearfix pseudo-elements would become grid items */ form.payment-form > .row:first-of-type > .col-lg-12 { grid-column: 1 / -1; grid-row: 1; float: none; width: auto; padding: 0; } /* the validation strip sits above both cards */ form.payment-form > .row:first-of-type > .col-lg-6 { float: none; width: auto; min-width: 0; margin: 0 0 20px; padding: 28px 28px 18px; background: var(--f-surface); border-radius: var(--f-radius-card); box-shadow: var(--f-shadow); } /* card title: "Your Details"; the right card has none in the Figma (it opens on the payment methods) */ form.payment-form .align-center.padding-10 { text-align: left !important; padding: 0; margin-bottom: 20px; } form.payment-form .align-center.padding-10 > span { display: block; margin: 0; /* the page gives the span class "h4": Bootstrap's 10px top and bottom margins would add 20px round the title */ text-align: left !important; font-size: 24px; line-height: 1.3; font-weight: 700; letter-spacing: -.01em; color: var(--f-ink); /* .text-muted */ } /* the Figma's order in "Your Details": the customer's name, email and contact number first, then the business name and ABN, then the references and anything else (the page writes Company Name and ABN first). Order only moves fields the page has; a merchant without one simply skips it. */ form.payment-form > .row:first-of-type > .col-lg-6 > * { order: 7; } form.payment-form > .row:first-of-type > .col-lg-6 > .align-center.padding-10 { order: 1; } form.payment-form > .row:first-of-type > .col-lg-6 > .form-group:has(#CustomerName) { order: 2; } form.payment-form > .row:first-of-type > .col-lg-6 > .form-group:has(#CustomerEmail) { order: 3; } form.payment-form > .row:first-of-type > .col-lg-6 > .form-group:has(#ContactNumber) { order: 4; } form.payment-form > .row:first-of-type > .col-lg-6 > .form-group:has(#CompanyName) { order: 5; } form.payment-form > .row:first-of-type > .col-lg-6 > .form-group:has(#AustralianBusinessNumber) { order: 6; } @media (max-width: 991px) { form.payment-form > .row:first-of-type > .col-lg-6:has(+ .col-lg-6) { display: flex; flex-direction: column; } /* order needs a flex column below 992px (from 992px the form's grid applies it) */ } @media (max-width: 767px) { form.payment-form > .row:first-of-type > .col-lg-6 { padding: 22px 16px 18px; border-radius: 16px; } } /* From 992px the Figma's grouping: Customer Reference and Additional Reference (and b2bpay's Departure Date and References 1 and 2) join the customer's details in the left card, and the right card holds only the payment methods. Those fields are children of the right-hand column, so both columns are dissolved (display: contents) and every child is placed in the form's grid: fields in the left track, methods in the right, each with the card's side padding (the right column's hidden title is moved after the fields, and its ::before and ::after are the method card's title and bottom spacing); the white, rounded cards behind them are drawn by the row's own ::before and ::after (end of this block). The rows are 1px tracks, so the two cards do not share heights: an item spans as many rows as it is pixels high (a field 97, a method 60: its 50px control and the 10px gap below it), which keeps the methods exactly 10px apart whatever the fields beside them measure; an item taller than its span (a longer label) stretches the rows it covers. "dense" fills each track from the top on its own. */ @media (min-width: 992px) { form.payment-form > .row:first-of-type { grid-template-columns: minmax(0, 1fr) 30px minmax(0, 1fr); grid-auto-flow: row dense; align-items: stretch; } form.payment-form > .row:first-of-type > .col-lg-6 { display: contents; } form.payment-form > .row:first-of-type { filter: var(--f-drop-shadow); } /* the cards are strips of white items, so no box-shadow can wrap them: one shadow around the whole grid's outline gives each card its shadow */ form.payment-form > .row:first-of-type > .col-lg-6 > *, form.payment-form > .row:first-of-type > .col-lg-6 ~ .col-lg-6::after { grid-column: 1; grid-row-end: span 97; margin: 0; padding: 0 30px 18px; } form.payment-form > .row:first-of-type > .col-lg-6 > .align-center.padding-10 { grid-row-end: span 1; padding-top: 15px; padding-bottom: 15px; } /* one row; the right card's own title ("Payment Details") sits level with "Your Details" */ form.payment-form > .row:first-of-type > .col-lg-6 ~ .col-lg-6 > .align-center.padding-10 { grid-column: 3; order: -1; } form.payment-form > .row:first-of-type > .col-lg-6 ~ .col-lg-6 > :is(#CardDetail, .apple-div, .payto-div, .alipay-plus-div, .wechat-div, .slicepay-div, .latpay-div) { grid-column: 3; margin: 0; padding: 0 30px 10px; } form.payment-form > .row:first-of-type > .col-lg-6 ~ .col-lg-6 > :where(#CardDetail, .apple-div, .payto-div, .alipay-plus-div, .wechat-div, .slicepay-div, .latpay-div) { grid-row-end: span 60; } /* :where() keeps the id out of the specificity, so the spans below can override */ form.payment-form > .row:first-of-type > .col-lg-6 ~ .col-lg-6 > .latpay-div { grid-row-end: span 260; text-align: center; } /* b2bpay's TravelPay Later text (about 260px): after the methods (order, below) */ form.payment-form > .row:first-of-type > .col-lg-6 ~ .col-lg-6 > #CardDetail:has(#AuthoriseCard) { grid-row-end: span 433; } /* the open Card row with the card frame */ form.payment-form > .row:first-of-type > .col-lg-6 ~ .col-lg-6 > .payto-div:has(input:not([type="hidden"])) { grid-row-end: span 412; } /* Pay with Bank, expanded: account fields and Validate Bank */ form.payment-form > .row:first-of-type > .col-lg-6 ~ .col-lg-6::after { content: ""; display: block; grid-column: 3; order: 99; grid-row-end: span 1; min-height: 0; padding: 0; } form.payment-form > .row:first-of-type > .col-lg-6 ~ .col-lg-6::before { content: ""; display: block; grid-column: 3; order: 50; grid-row-end: span 1; min-height: 0; margin: 0; padding: 0; } /* the card's bottom space is the last control's own 10px, less the 4px the card's bottom edge is raised (below): the last control ends 6px above the edge */ /* the two white cards themselves: one box per column from the first card row to the bottom of the grid, so they are always as tall as the taller column. Absolutely positioned (inside the grid they would push the strips below them, as grid items cannot overlap); each needs both column lines, because an auto end line means the container's edge; behind the strips (z-index in the row's own stacking context, which the filter above creates). */ form.payment-form > .row:first-of-type::before, form.payment-form > .row:first-of-type::after { content: ""; display: block; position: absolute; inset: 0 0 4px; grid-row: 2; z-index: -1; background: var(--f-surface); border-radius: var(--f-radius-card); } /* 4px short of the grid's bottom: the last control's 10px gap, less 4px, is the 6px under it */ form.payment-form > .row:first-of-type::before { grid-column: 1 / 2; } form.payment-form > .row:first-of-type::after { grid-column: 3 / 4; } } /* Keep fields from both HTML columns inside the details card when the cards stack. Empty rows collapse for fields a merchant does not show. */ @media (width < 992px) { form#InitiatePayment.payment-form > .row:first-of-type { grid-template-rows: auto repeat(12, auto) 8px repeat(11, auto); align-items: stretch; filter: var(--f-drop-shadow); --stacked-panel-padding: 28px; } form#InitiatePayment.payment-form > .row:first-of-type > .col-lg-6 { display: contents; } form#InitiatePayment.payment-form .form-group:has(> .input-group > #PaymentAmount) { top: -128px; } /* The filtered row starts below the form's 136px amount space, as on desktop. */ form#InitiatePayment.payment-form > .row:first-of-type > .col-lg-6 > :not(.form-group:has(#PaymentAmount), #payment-amount-threshold-warning) { grid-column: 1; margin: 0; padding: 0 var(--stacked-panel-padding) var(--stacked-pad-bottom, 18px); } form#InitiatePayment.payment-form :is(.apple-div, .payto-div, .alipay-plus-div, .wechat-div, .slicepay-div) { --stacked-pad-bottom: 10px; } /* the method controls are 10px apart (the fields keep 18px) */ form#InitiatePayment.payment-form > .row:first-of-type > .col-lg-6 > .align-center.padding-10 { grid-row: 2; padding-top: 28px; padding-bottom: 20px; } form#InitiatePayment.payment-form > .row:first-of-type > .col-lg-6 > .form-group:has(#CustomerName) { grid-row: 3; } form#InitiatePayment.payment-form > .row:first-of-type > .col-lg-6 > .form-group:has(#CustomerEmail) { grid-row: 4; } form#InitiatePayment.payment-form > .row:first-of-type > .col-lg-6 > .form-group:has(#ContactNumber) { grid-row: 5; } form#InitiatePayment.payment-form > .row:first-of-type > .col-lg-6 > .form-group:has(#CompanyName) { grid-row: 6; } form#InitiatePayment.payment-form > .row:first-of-type > .col-lg-6 > .form-group:has(#AustralianBusinessNumber) { grid-row: 7; } form#InitiatePayment.payment-form > .row:first-of-type > .col-lg-6 > .form-group:has(#CustomerReference) { grid-row: 8; } form#InitiatePayment.payment-form > .row:first-of-type > .col-lg-6 > .form-group:has(#AdditionalReference) { grid-row: 9; } form#InitiatePayment.payment-form > .row:first-of-type > .col-lg-6 > .form-group:has(#Reference1) { grid-row: 10; } form#InitiatePayment.payment-form > .row:first-of-type > .col-lg-6 > .form-group:has(#DepartureDate) { grid-row: 11; } form#InitiatePayment.payment-form > .row:first-of-type > .col-lg-6 > .form-group:has(#Reference2) { grid-row: 12; } form#InitiatePayment.payment-form > .row:first-of-type > .col-lg-6 ~ .col-lg-6 > .align-center.padding-10 { grid-row: 15; margin: 0; padding-top: 28px; } form#InitiatePayment.payment-form > .row:first-of-type > .col-lg-6 ~ .col-lg-6 > .apple-div:has(apple-pay-button) { grid-row: 16; } form#InitiatePayment.payment-form > .row:first-of-type > .col-lg-6 ~ .col-lg-6 > .apple-div:has(#google-pay-div) { grid-row: 17; } form#InitiatePayment.payment-form > .row:first-of-type > .col-lg-6 ~ .col-lg-6 > #CardDetail { grid-row: 18; } form#InitiatePayment.payment-form :is(#CardDetail:has(#AuthoriseCard), .payto-div:has(input:not([type="hidden"]), #PayToAccountName)) { margin-bottom: 10px; } /* the open Card block comes after the wallets: a gap before the rows under it */ form#InitiatePayment.payment-form #CardDetail:not(:has(#AuthoriseCard)) [data-paymentmethod="Card"] { grid-column: 1; grid-row: 18; width: auto; margin: 0 var(--stacked-panel-padding) 10px; } form#InitiatePayment.payment-form #CardDetail:not(:has(#AuthoriseCard)) [data-paymentmethod="UnionPay"] { grid-column: 1; grid-row: 19; width: auto !important; margin: 0 var(--stacked-panel-padding) 10px !important; } form#InitiatePayment.payment-form > .row:first-of-type > .col-lg-6 ~ .col-lg-6 > .payto-div { grid-row: 20; } form#InitiatePayment.payment-form > .row:first-of-type > .col-lg-6 ~ .col-lg-6 > .alipay-plus-div { grid-row: 21; } form#InitiatePayment.payment-form > .row:first-of-type > .col-lg-6 ~ .col-lg-6 > .wechat-div { grid-row: 22; } form#InitiatePayment.payment-form > .row:first-of-type > .col-lg-6 ~ .col-lg-6 > .slicepay-div { grid-row: 23; } form#InitiatePayment.payment-form > .row:first-of-type > .col-lg-6 ~ .col-lg-6 > .latpay-div { grid-row: 24; margin: 0; } form#InitiatePayment.payment-form > .row:first-of-type > .col-lg-6::after { content: ""; display: block; grid-column: 1; grid-row: 13; min-height: 0; } form#InitiatePayment.payment-form > .row:first-of-type > .col-lg-6 ~ .col-lg-6::after { grid-row: 25; } form#InitiatePayment.payment-form > .row:first-of-type::before, form#InitiatePayment.payment-form > .row:first-of-type::after { content: ""; display: block; position: absolute; inset: 0 0 12px; grid-column: 1; grid-row: 2 / 14; z-index: -1; background: var(--f-surface); border-radius: var(--f-radius-card); } /* the last field's 18px bottom padding, less 12px: the field ends 6px above the card's edge; the 8px row 14 plus the 12px keeps the old 20px between the cards */ form#InitiatePayment.payment-form > .row:first-of-type::after { grid-row: 15 / 26; inset: 0 0 4px; } /* the last method's 10px, less 4px: 6px under it */ } @media (width < 768px) { form#InitiatePayment.payment-form > .row:first-of-type { --stacked-panel-padding: 16px; } form#InitiatePayment.payment-form > .row:first-of-type > .col-lg-6 > .align-center.padding-10 { padding-top: 22px; } form#InitiatePayment.payment-form > .row:first-of-type::before, form#InitiatePayment.payment-form > .row:first-of-type::after { border-radius: 16px; } } /* ---------- payment methods: a list of white rows in the Payment Details card ---------- */ /* The methods are siblings of the payment fields inside the right-hand card. The card becomes a column so the methods can be put in the Figma's order (Apple Pay, Google Pay, Card, UnionPay, bank, Alipay+, WeChat) under the fields, whatever order the page writes them in. */ @media (max-width: 991px) { form.payment-form > .row:first-of-type > .col-lg-6 ~ .col-lg-6 { display: flex; flex-direction: column; } /* from 992px the column is dissolved into the form's grid instead (above) */ form.payment-form > .row:first-of-type > .col-lg-6 ~ .col-lg-6 > #CardDetail { margin-top: 8px; } } form.payment-form > .row:first-of-type > .col-lg-6 ~ .col-lg-6 > .apple-div:has(apple-pay-button) { order: 9; } form.payment-form > .row:first-of-type > .col-lg-6 ~ .col-lg-6 > .apple-div:has(#google-pay-div) { order: 10; } form.payment-form > .row:first-of-type > .col-lg-6 ~ .col-lg-6 > #CardDetail { order: 11; } form.payment-form > .row:first-of-type > .col-lg-6 ~ .col-lg-6 > .payto-div { order: 13; } form.payment-form > .row:first-of-type > .col-lg-6 ~ .col-lg-6 > .alipay-plus-div { order: 14; } form.payment-form > .row:first-of-type > .col-lg-6 ~ .col-lg-6 > .wechat-div { order: 15; } form.payment-form > .row:first-of-type > .col-lg-6 ~ .col-lg-6 > .slicepay-div { order: 16; } form.payment-form :is(#CardDetail, .apple-div, .payto-div, .alipay-plus-div, .wechat-div, .slicepay-div) { margin-bottom: 10px; padding-top: 0; } /* every control in the method list is 50px tall with 10px between them: the wallet buttons, the method rows and the fields and buttons of an opened method (Pay with Bank's account fields and Validate). The variable is set on the method blocks only, so the customer's fields in the left card keep the shared 52px. */ form.payment-form :is(#CardDetail, .apple-div, .payto-div, .alipay-plus-div, .wechat-div, .slicepay-div) { --f-btn-h: 50px; } /* b2bpay's TravelPay Later (Latitude) promotion: after the methods; below 992px a soft panel between the fields and the method list */ form.payment-form > .row:first-of-type > .col-lg-6 ~ .col-lg-6 > .latpay-div { order: 17; } @media (max-width: 991px) { form.payment-form > .row:first-of-type > .col-lg-6 ~ .col-lg-6 > .latpay-div { order: 8; margin: 8px 0 8px; padding: 14px 16px; background: var(--f-soft); border-radius: 12px; } /* The Initiate form overrides this with its shared stacked grid; other payment forms keep their fields before the methods title. */ form.payment-form > .row:first-of-type > .col-lg-6 ~ .col-lg-6 > .align-center.padding-10 { order: 9; margin: 12px 0 16px; padding: 0; } form.payment-form > .row:first-of-type > .col-lg-6 ~ .col-lg-6 > .align-center.padding-10 > span { margin: 0; font-size: 22px; } /* Bootstrap's .h4 margins would add 20px */ } form.payment-form :is(#CardDetail, .apple-div, .payto-div, .alipay-plus-div, .wechat-div, .slicepay-div)::after { content: ""; display: table; clear: both; } /* the list has no "OR" lines */ form.payment-form .separator { display: none; } /* nested columns double the padding around each method: flatten */ form.payment-form :is(.apple-div, .payto-div, .slicepay-div, .alipay-plus-div, .wechat-div, #CardDetail) .col-xs-12 { float: none; width: 100%; padding-left: 0; padding-right: 0; } form.payment-form :is(.apple-div, .payto-div, .alipay-plus-div, .wechat-div, #CardDetail) .form-group.text-center { margin-bottom: 0; } /* the button wrappers; Pay with Bank's account fields keep their spacing */ form.payment-form .clearfix { display: none; } /* "Pay with PayTo" repeats the Bank row's own label (the sandbox's stylesheet also moves it under the row): not needed */ form.payment-form .payto-div > .col-xs-12 > .col-xs-12:has(> p:only-child) { display: none; } /* the WeChat text snippet above its row: small muted text, left-aligned */ form.payment-form .wechat-div > .col-xs-12 > .col-xs-12 { margin: 0 0 6px; font-size: 12px; color: var(--f-muted); text-align: left !important; } /* inline text-align:center */ form.payment-form .wechat-div > .col-xs-12 > .col-xs-12:empty, form.payment-form .wechat-div > .col-xs-12 > .col-xs-12:has(> p:only-child > span[style*="#ffffff"]) { display: none; } /* the empty snippet, or the white "." spacer paragraph (hidden, but its column still took 7px above the row) */ form.payment-form :is(.alipay-plus-div, .wechat-div) > .col-xs-12 > .col-xs-12 { min-height: 0; } /* Bootstrap's 1px column minimum: an empty spacer column pushed the row 1px down */ /* a row: white, bordered, the label left-aligned after a radio ring */ form.payment-form .btn-recaptcha { position: relative; display: flex; align-items: center; justify-content: flex-start; gap: 8px; width: 100%; min-width: 0; max-width: none; height: var(--f-btn-h); margin: 0; padding: 0 16px 0 46px !important; /* inline padding:0 on the Card button */ background: var(--f-surface) !important; color: var(--f-ink) !important; border: 1px solid var(--f-line) !important; outline: 0 !important; /* .btn-black draws a 1px grey outline */ border-radius: var(--f-radius-row) !important; font-family: var(--f-font); font-size: 14px; font-weight: 600; white-space: nowrap; cursor: pointer; box-shadow: none; transition: box-shadow .12s ease; } form.payment-form .btn-recaptcha::before { content: ""; position: absolute; left: 16px; top: 50%; width: 18px; height: 18px; margin-top: -9px; border: 1.5px solid var(--f-line-strong); border-radius: 50%; background: var(--f-field); transition: border-color .12s ease, box-shadow .12s ease; } form.payment-form .btn-recaptcha:hover:not(:disabled) { background: var(--f-surface) !important; box-shadow: 0 0 0 3px var(--f-ring); } form.payment-form .btn-recaptcha:active::before { border-color: var(--f-navy); box-shadow: inset 0 0 0 4px var(--f-surface), inset 0 0 0 9px var(--f-navy); } form.payment-form .btn-recaptcha:focus-visible { box-shadow: 0 0 0 3px var(--f-ring); border-color: var(--f-navy) !important; } @media (max-width: 767px) { form.payment-form .btn-recaptcha { padding: 0 10px 0 40px !important; gap: 6px; } form.payment-form .btn-recaptcha::before { left: 12px; } } /* the method logos: the logos are white artwork for a black button, so each sits on a small dark tile, as the Figma's logo tiles do. The Card row is the four brand logos alone (card-brand-logo-tile.css). */ form.payment-form .btn-recaptcha img { box-sizing: border-box; height: 30px !important; /* inline sizes */ width: 92px !important; /* one size for every logo tile: each logo sets its own width inline (the PayTo mark is narrow, Alipay+ and WeChat wide), and object-fit centres it in the tile */ margin: 0 4px 0 0 !important; /* inline offsets */ padding: 4px 8px; object-fit: contain; background: var(--f-logo-tile); border-radius: 6px; } form.payment-form .btn-recaptcha:is([data-paymentmethod="PayTo"], [data-paymentmethod="UnionPay"], [data-paymentmethod="AliPayPlus"]) img { padding: 2px 8px; } /* the Figma's brand-coloured tiles where the brand has one (the logos are white artwork, so they read on their brand colour) */ form.payment-form .btn-recaptcha[data-paymentmethod="AliPayPlus"] img { background: #1677ff; } form.payment-form .btn-recaptcha[data-paymentmethod="WeChat"] img { background: #07c160; } /* The real pages serve a different set (/Content/Images/PaymentMethodLogos/): UnionPay, PayTo and Alipay+ are 1500 x 1500 squares with an opaque white background (measured: the mark is only 51%, 37% and 20% of the height), and WeChat Pay is a transparent green and grey wordmark. On a dark or brand-colour tile that reads as a small white box inside a frame, or green on green, so these four sit on a plain white tile with no outline and the white squares melt into it. Matched by the files' folder, so the sandbox's own white artwork above is untouched. */ form.payment-form .btn-recaptcha[data-paymentmethod] img[src*="/PaymentMethodLogos/"] { padding: 3px 10px; background: #fff; box-shadow: none; } /* no grey outline on the tiles (removed 2026-10-21 at the reviewers' request: PayTo, UnionPay, Alipay+ and WeChat Pay all match) */ form.payment-form .btn-recaptcha:is([data-paymentmethod="PayTo"], [data-paymentmethod="UnionPay"], [data-paymentmethod="AliPayPlus"]) img[src*="/PaymentMethodLogos/"] { padding: 2px 6px; } /* Where the browser supports object-view-box (Chrome and Edge; limited elsewhere), each square is cropped to its mark so the mark fills the tile; the other browsers keep the whole square, which is smaller but just as clean on the white tile. The insets leave a little white round each mark. */ @supports (object-view-box: inset(0)) { form.payment-form .btn-recaptcha img[src$="/PaymentMethodLogos/AliPay.svg"] { object-view-box: inset(38% 6% 38% 6%); } form.payment-form .btn-recaptcha img[src$="/PaymentMethodLogos/PayTo.svg"] { object-view-box: inset(30% 8% 30% 8%); } form.payment-form .btn-recaptcha img[src$="/PaymentMethodLogos/UnionPay.svg"] { object-view-box: inset(23% 6% 23% 6%); } } /* Firefox and Safari have no object-view-box, and the whole square drawn in the tile left the marks a few pixels tall (Alipay+ barely readable). There: Alipay+, a thin wide mark, is shown with object-fit: cover, which crops the white square to the band the mark sits in; PayTo and UnionPay, too tall for that, are swapped (content: url()) for the same artwork cut to its mark and inlined (the PayTo wordmark as a 107 x 52 PNG, the UnionPay mark as a cropped SVG, as on the registration page: the page's PayTo file is a 185KB embedded photo). A swap is only made in browsers that cannot crop, so Chrome and Edge keep the page's own files. */ @supports not (object-view-box: inset(0)) { form.payment-form .btn-recaptcha img[src$="/PaymentMethodLogos/AliPay.svg"] { object-fit: cover !important; } /* !important: the page writes object-fit: contain inline on this image */ form.payment-form .btn-recaptcha img[src$="/PaymentMethodLogos/PayTo.svg"] { content: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGsAAAA0CAMAAAC6uTYcAAAAXVBMVEX///8VERL+/f7FxMQmIiMYExX8/PwjHyAkICEdGRorJyiHhYU2MjPAv7+Zl5cPCwxFQkOioKHZ2Njl5eX39/dUUFHv7++ysbFeW1yQjY7My8tpZmd0cXKrqqt7eXno/jJUAAAACXBIWXMAAAsTAAALEwEAmpwYAAAFMElEQVRYw7WY24KiMAyG29JTyvkkCML7P+YmLSgw6jLjTC52R0G+JvmTpjD2iQktfuGWsyRRD9EbG2rxKzSh2aVsHag3BklbXtjHMCFYl3AF9q2B4klH937IijlIa81bs1aCitlnLMHi/H+gFZd/BtNsUvIUimCq+wAm2CWBkyiEQXL5OUyzjEtz2iQv8Sc/9qtV9jzLqvbHfglWO/gOC1z9U5hmw3dQBBuIJR72DVak5PdY0cGv051ry7LyhPYXVnNZrCGlnKNtWFbl+et42j3rKpPF2rE8mcEHy8KYZf1LTcLSWhZWnBuAcIFzl51K24MleYfLzV8lL4Hg2sri0iIFDaSEc61rZVnpFLG4k2Q2NNuHwZRxD3uwoIjRbgWgyyo9AVtYuEaVTxQaRWulvEnj/wym8pJNFuSG5fjNP19MEmMyBtbbGggsC0WWXSvGhmtGVo7GcNnO2d38xQSzuWM1Gg2DgT5qEj/pMfxL/2n9KAv6MrCk6jcxECxKAObqsETN6hbDdfTLP4Faskfoxhf6/Ulf/dqxBEsNT6IvCcBBoT+wNIasYWlgMR3FfVG0Y9dQO8rKbGqWn3b4oXrEsKRPdAdaopKKNeySlneji1XBDzFEFn4YlVQFY1GLAwsAzgot3hxxxVVoZ9hycw7Vc20Y6BDVFYs48jznqI3UqSfa0NUNrOQx61D9SmG5oVKSmrEenJpp/6HN2KmRJqivmncYUc1KBUH+rm3bRHWTArnXfDL2fV9YhYMIPrwuOPRlmsYJuHzGuIXIkuM9Ot4x/ayWLaQYTTAy9CY7MFZyKqNjLdMoh04Z7iJcXNWm/smVMwRpCvRzIsXU+EXRPPzasPw+z8Z1t5YcF1k5dehReBnAZ4fLsSKIaBYJzehp5WNEksMIYbxj/P4ZC7fezRBiqXZwkdYcWDidovVzWXlx40NZU0XdVPYg8SZyx0hSBDZZS6t5wpKYRwrE/eEJLvg+KHyprzDMUsdIb4UjP0NhaHbDe67+UaGknrJ6tpkMAqt4ykLN66VNsMuI2cNuBstNWGIUkwZD6PP2lOWDJu5B8+htSA/1tdS/6ElWfdalA9Ybsbz+UGatMmHQO7Iw5dY4zEC27i4kVxbBYa/cxZAek1ICI5+VObA0yZ7PtbTc19mONZFftKdglHXT5lhbVtr8Rj+/z5CvWJkXW6MbLdrVL1QUbjy4zOHRORdWTHnExmGoNCn+XCkOM04UlTT2BGv29VWu2vA7AJ5wVCsOLMoj5nPs4wJQiZjy9Nb384ALbDbj6ssYUluNqyqazcrys+dmVN7NNhk5HlrKLNZRGotr3Ix1Kwtb3G27N5A2sF05w6GwPob07Y3aS7LMPluWMROVCbHQ72rZadlQbCfI+2wD+bjb8+oW9Y7lBddrrvI0sAZya13Tbj40MKZ1HZHcpbLjVNV1NfUA8ut8mMbXeHc8QiV0Y1EUt4hFeG11BZsipE9YdLxSzimvb2twg3AO9xpj38+9j5MwqldvdmXqwzK03WczNmZ1HQSNpO5qjifOhbX2i92srZc3CuEa9hQvoesj84ezw+7ZT462y9nh1clb7M9AOFW66t42/+xMJOpLPSrHx61av3/WE2fOdU2R0NCwDcO3z7DZqTOsjx9mfDd9/9HZHCUIOVfuulMQjjncnn/nMJ3MFrtMWdYdcyvYnMu/epdyKAwU6kzviP5LksDj8+djP9CLJxU/JdQf3hoeW5Lp43df/p1ehu/03pprs194pxfCqushfWNDrT936ifvYP8BTohshw3lgXsAAAAASUVORK5CYII="); } form.payment-form .btn-recaptcha img[src$="/PaymentMethodLogos/UnionPay.svg"] { content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' viewBox='120 350 1260 800'%3E%3Cdefs%3E%3CclipPath id='7e34e23fa9'%3E%3Cpath d='M 130 363.1 L 744 363.1 L 744 1137 L 130 1137 Z M 130 363.1 ' clip-rule='nonzero'/%3E%3C/clipPath%3E%3CclipPath id='807ac706ec'%3E%3Cpath d='M 413 363.1 L 1038 363.1 L 1038 1137 L 413 1137 Z M 413 363.1 ' clip-rule='nonzero'/%3E%3C/clipPath%3E%3CclipPath id='567c2dcf78'%3E%3Cpath d='M 754 363.1 L 1367 363.1 L 1367 1137 L 754 1137 Z M 754 363.1 ' clip-rule='nonzero'/%3E%3C/clipPath%3E%3C/defs%3E%3Cg clip-path='url(%237e34e23fa9)'%3E%3Cpath fill='%23e21836' d='M 372.9 363.1 L 681.3 363.1 C 724.4 363.1 751.1 398.2 741.1 441.4 L 597.5 1058.1 C 587.4 1101.2 544.3 1136.3 501.2 1136.3 L 192.9 1136.3 C 149.9 1136.3 123.1 1101.2 133.1 1058.1 L 276.7 441.4 C 286.8 398.2 329.8 363.1 372.9 363.1 ' fill-opacity='1' fill-rule='nonzero'/%3E%3C/g%3E%3Cg clip-path='url(%23807ac706ec)'%3E%3Cpath fill='%2300447c' d='M 655.7 363.1 L 1010.3 363.1 C 1053.3 363.1 1033.9 398.2 1023.8 441.4 L 880.2 1058.1 C 870.2 1101.2 873.3 1136.3 830.2 1136.3 L 475.6 1136.3 C 432.4 1136.3 405.7 1101.2 415.9 1058.1 L 559.4 441.4 C 569.6 398.2 612.6 363.1 655.7 363.1 ' fill-opacity='1' fill-rule='nonzero'/%3E%3C/g%3E%3Cg clip-path='url(%23567c2dcf78)'%3E%3Cpath fill='%23007b84' d='M 996.2 363.1 L 1304.6 363.1 C 1347.7 363.1 1374.5 398.2 1364.4 441.4 L 1220.8 1058.1 C 1210.7 1101.2 1167.5 1136.3 1124.4 1136.3 L 816.2 1136.3 C 773.1 1136.3 746.3 1101.2 756.4 1058.1 L 900 441.4 C 910 398.2 953.1 363.1 996.2 363.1 ' fill-opacity='1' fill-rule='nonzero'/%3E%3C/g%3E%3Cpath fill='%23fefefe' d='M 453.5 560.8 C 421.8 561.1 412.4 560.8 409.4 560.1 C 408.3 565.5 386.9 664.3 386.8 664.4 C 382.2 684.3 378.8 698.6 367.5 707.8 C 361 713.1 353.4 715.7 344.7 715.7 C 330.6 715.7 322.4 708.7 321.1 695.5 L 320.8 690.9 C 320.8 690.9 325.1 664.2 325.1 664 C 325.1 664 347.5 574 351.6 562.1 C 351.8 561.4 351.8 561.1 351.9 560.8 C 308.2 561.1 300.4 560.8 299.9 560.1 C 299.6 561 298.5 566.6 298.5 566.6 L 275.6 668 L 273.6 676.6 L 269.8 704.8 C 269.8 713.1 271.4 719.9 274.7 725.7 C 285.2 744 315 746.7 331.8 746.7 C 353.5 746.7 373.9 742.1 387.7 733.7 C 411.6 719.5 417.8 697.4 423.4 677.8 L 426 667.7 C 426 667.7 449.1 574.3 453.1 562.1 C 453.2 561.4 453.3 561.1 453.5 560.8 Z M 532.2 636.2 C 526.6 636.2 516.4 637.5 507.3 642 C 504 643.7 500.8 645.7 497.5 647.6 L 500.5 636.8 L 498.8 635 C 479.4 639 475.1 639.5 457.2 642 L 455.7 643 C 453.6 660.3 451.7 673.3 444 707.2 C 441.1 719.7 438 732.4 435 744.9 L 435.8 746.4 C 454.2 745.5 459.7 745.5 475.7 745.7 L 477 744.3 C 479 733.9 479.3 731.5 483.8 710.4 C 485.9 700.4 490.3 678.5 492.5 670.7 C 496.5 668.8 500.4 667 504.2 667 C 513.1 667 512 674.8 511.7 677.9 C 511.3 683.2 508 700.2 504.7 714.9 L 502.5 724.4 C 500.9 731.3 499.2 738.1 497.6 745.1 L 498.3 746.4 C 516.4 745.5 522 745.5 537.4 745.7 L 539.2 744.3 C 542 728.1 542.9 723.7 547.8 700.1 L 550.3 689.2 C 555.2 668 557.6 657.2 553.9 648.4 C 550.1 638.5 540.7 636.2 532.2 636.2 Z M 620.1 658.4 C 610.5 660.3 604.4 661.5 598.3 662.3 C 592.2 663.3 586.3 664.2 577 665.5 L 576.3 666.1 L 575.6 666.7 C 574.6 673.6 573.9 679.6 572.7 686.6 C 571.6 693.9 569.9 702.2 567.2 714.1 C 565.1 723.2 564 726.4 562.8 729.6 C 561.6 732.8 560.3 735.9 557.9 744.9 L 558.5 745.7 L 558.9 746.4 C 567.6 746 573.3 745.7 579.2 745.7 C 585 745.5 591.1 745.7 600.4 745.7 L 601.3 745.1 L 602.1 744.3 C 603.5 736.2 603.7 734.1 604.5 730.1 C 605.3 725.9 606.8 720.1 610.2 704.4 C 611.9 697.1 613.7 689.8 615.4 682.3 C 617.1 674.8 619 667.5 620.8 660.1 L 620.5 659.2 Z M 620.3 628.4 C 611.6 623.2 596.2 624.9 585.9 632 C 575.6 639 574.4 648.9 583.1 654.2 C 591.7 659.2 607.2 657.7 617.4 650.5 C 627.7 643.4 629 633.5 620.3 628.4 Z M 673.3 748.1 C 691 748.1 709.1 743.2 722.8 728.7 C 733.3 716.9 738.1 699.5 739.8 692.3 C 745.2 668.4 741 657.3 735.6 650.5 C 727.6 640.2 713.3 636.8 698.5 636.8 C 689.6 636.8 668.4 637.7 651.8 653 C 640 664 634.5 679 631.1 693.3 C 627.8 707.9 624 734.2 648.1 744 C 655.6 747.2 666.3 748.1 673.3 748.1 Z M 671.9 694.4 C 675.9 676.3 680.8 661.2 693.1 661.2 C 702.7 661.2 703.4 672.4 699.1 690.6 C 698.4 694.6 694.8 709.5 690.1 715.9 C 686.8 720.6 682.8 723.5 678.5 723.5 C 677.2 723.5 669.5 723.5 669.4 712 C 669.3 706.4 670.5 700.6 671.9 694.4 Z M 784 745.7 L 785.4 744.3 C 787.3 733.9 787.7 731.5 792 710.4 C 794.2 700.4 798.7 678.5 800.8 670.7 C 804.8 668.8 808.7 667 812.5 667 C 821.4 667 820.3 674.8 820 677.9 C 819.7 683.2 816.4 700.2 813 714.9 L 810.9 724.3 C 809.3 731.3 807.5 738.1 806 745.1 L 806.6 746.4 C 824.8 745.5 830.1 745.5 845.7 745.7 L 847.6 744.3 C 850.3 728.1 851 723.7 856.1 700.1 L 858.6 689.2 C 863.4 667.9 865.9 657.2 862.3 648.4 C 858.3 638.5 848.9 636.2 840.5 636.2 C 834.9 636.2 824.7 637.5 815.6 642 C 812.3 643.7 809.1 645.7 805.9 647.7 L 808.7 636.8 L 807.2 635 C 787.8 639 783.3 639.5 765.4 642 L 764 643 C 761.9 660.3 760.1 673.3 752.4 707.2 C 749.4 719.7 746.4 732.4 743.3 744.9 L 744.2 746.4 C 762.6 745.5 768.1 745.5 784 745.7 Z M 917.5 746.4 C 918.7 740.9 925.5 707.8 925.5 707.8 C 925.5 707.8 931.3 683.5 931.7 682.6 C 931.7 682.6 933.5 680.1 935.3 679.1 L 938 679.1 C 963.2 679.1 991.7 679.1 1014.1 662.7 C 1029.3 651.4 1039.7 634.7 1044.3 614.5 C 1045.5 609.5 1046.4 603.6 1046.4 597.7 C 1046.4 590 1044.8 582.3 1040.4 576.3 C 1029 560.3 1006.3 560.1 980.1 559.9 C 980 559.9 967.2 560.1 967.2 560.1 C 933.6 560.5 920.2 560.3 914.7 559.7 C 914.2 562.1 913.3 566.5 913.3 566.5 C 913.3 566.5 901.3 622.2 901.3 622.2 C 901.3 622.2 872.6 740.7 871.2 746.2 C 900.5 745.9 912.5 745.9 917.5 746.4 Z M 939.8 647.5 C 939.8 647.5 952.6 591.9 952.5 592.1 L 952.9 589.3 L 953.1 587.1 L 958.2 587.6 C 958.2 587.6 984.5 589.9 985.2 590 C 995.5 594 999.8 604.4 996.8 617.9 C 994.1 630.3 986.1 640.7 975.8 645.7 C 967.3 649.9 956.9 650.3 946.2 650.3 L 939.3 650.3 Z M 1019.3 695.4 C 1015.9 709.8 1012 736.1 1036.1 745.5 C 1043.8 748.7 1050.6 749.7 1057.6 749.4 C 1065 749 1071.8 745.3 1078.1 739.9 C 1077.6 742.1 1077 744.3 1076.4 746.5 L 1077.5 747.9 C 1094.8 747.2 1100.2 747.2 1118.9 747.3 L 1120.6 746 C 1123.4 729.9 1125.9 714.3 1133 683.5 C 1136.5 668.8 1140 654.2 1143.5 639.5 L 1143 637.9 C 1123.6 641.5 1118.4 642.2 1099.8 644.9 L 1098.4 646 C 1098.2 647.5 1098 648.9 1097.9 650.4 C 1095 645.7 1090.8 641.7 1084.3 639.2 C 1076 636 1056.6 640.2 1039.9 655.4 C 1028.1 666.2 1022.5 681.1 1019.3 695.4 Z M 1059.9 696.3 C 1064.1 678.6 1068.8 663.5 1081.2 663.5 C 1089 663.5 1093.1 670.7 1092.2 683 C 1091.6 686.1 1090.9 689.3 1090 692.9 C 1088.8 698.2 1087.4 703.4 1086.1 708.7 C 1084.8 712.3 1083.3 715.6 1081.6 717.9 C 1078.4 722.4 1070.9 725.2 1066.5 725.2 C 1065.3 725.2 1057.7 725.2 1057.4 714 C 1057.4 708.4 1058.5 702.6 1059.9 696.3 Z M 1272.1 637.7 L 1270.6 636 C 1251.5 639.9 1248 640.5 1230.4 642.9 L 1229.1 644.2 C 1229.1 644.4 1229 644.7 1228.9 645 L 1228.9 644.7 C 1215.8 674.9 1216.2 668.4 1205.5 692.2 C 1205.4 691.1 1205.4 690.5 1205.4 689.3 L 1202.7 637.7 L 1201 636 C 1181 639.9 1180.5 640.5 1162 642.9 L 1160.6 644.2 C 1160.4 644.8 1160.4 645.5 1160.2 646.2 L 1160.4 646.5 C 1162.7 658.3 1162.1 655.7 1164.4 674.4 C 1165.5 683.5 1167 692.7 1168 701.8 C 1169.9 716.9 1170.9 724.4 1173.1 747.5 C 1160.6 768.2 1157.7 776 1145.6 794.1 L 1145.7 794.3 L 1137.2 807.7 C 1136.2 809.1 1135.4 810.1 1134.1 810.5 C 1132.8 811.2 1131 811.3 1128.6 811.3 L 1123.9 811.3 L 1116.9 834.5 L 1140.9 835 C 1154.9 834.9 1163.8 828.3 1168.5 819.5 L 1183.6 793.6 L 1183.3 793.6 L 1184.9 791.8 C 1195.1 770 1272.1 637.7 1272.1 637.7 Z M 1019.3 942.9 L 1009.1 942.9 L 1046.8 818.4 L 1059.2 818.4 L 1063.2 805.6 L 1063.6 819.9 C 1063.1 828.7 1070 836.5 1088.2 835.2 L 1109.3 835.2 L 1116.5 811.2 L 1108.6 811.2 C 1104.1 811.2 1102 810.1 1102.2 807.6 L 1101.8 793.1 L 1062.8 793.1 L 1062.8 793.2 C 1050.2 793.5 1012.6 794.4 1005 796.4 C 995.8 798.8 986 805.8 986 805.8 L 989.9 793 L 953.4 793 L 945.8 818.4 L 907.7 944.8 L 900.3 944.8 L 893 968.6 L 965.7 968.6 L 963.2 976.5 L 999 976.5 L 1001.4 968.6 L 1011.4 968.6 Z M 989.5 843.7 C 983.7 845.3 972.8 850.3 972.8 850.3 L 982.5 818.4 L 1011.4 818.4 L 1004.4 841.6 C 1004.4 841.6 995.5 842.1 989.5 843.7 Z M 990.1 889.2 C 990.1 889.2 981 890.3 975 891.7 C 969.1 893.5 958 899.1 958 899.1 L 968 866 L 997.1 866 Z M 973.8 943.2 L 944.8 943.2 L 953.2 915.3 L 982.2 915.3 Z M 1043.8 866 L 1085.7 866 L 1079.7 885.5 L 1037.2 885.5 L 1030.9 906.8 L 1068 906.8 L 1039.9 946.5 C 1037.9 949.4 1036.1 950.4 1034.2 951.2 C 1032.2 952.2 1029.6 953.4 1026.6 953.4 L 1016.3 953.4 L 1009.3 976.8 L 1036.2 976.8 C 1050.2 976.8 1058.5 970.4 1064.6 962 L 1083.9 935.6 L 1088 962.4 C 1088.9 967.4 1092.5 970.4 1095 971.5 C 1097.7 972.9 1100.5 975.2 1104.4 975.5 C 1108.6 975.7 1111.7 975.9 1113.7 975.9 L 1126.9 975.9 L 1134.9 949.7 L 1129.7 949.7 C 1126.7 949.7 1121.5 949.2 1120.6 948.3 C 1119.7 947.1 1119.7 945.4 1119.3 942.7 L 1115.1 915.8 L 1097.9 915.8 L 1105.4 906.8 L 1147.8 906.8 L 1154.3 885.5 L 1115.1 885.5 L 1121.2 866 L 1160.3 866 L 1167.5 841.9 L 1050.9 841.9 Z M 690 948.6 L 699.7 916.1 L 739.9 916.1 L 747.3 891.9 L 707 891.9 L 713.2 871.8 L 752.5 871.8 L 759.8 848.4 L 661.4 848.4 L 654.3 871.8 L 676.6 871.8 L 670.7 891.9 L 648.3 891.9 L 640.8 916.5 L 663.2 916.5 L 650.1 959.6 C 648.4 965.3 651 967.4 652.6 970.1 C 654.3 972.7 656 974.4 659.8 975.3 C 663.7 976.2 666.4 976.7 670.1 976.7 L 715.4 976.7 L 723.5 949.9 L 703.4 952.7 C 699.5 952.7 688.8 952.2 690 948.6 Z M 694.6 792.8 L 684.4 811.2 C 682.2 815.3 680.2 817.8 678.5 818.9 C 676.9 819.9 673.8 820.3 669.4 820.3 L 664.1 820.3 L 657 843.8 L 674.6 843.8 C 683.1 843.8 689.6 840.7 692.7 839.2 C 696.1 837.4 696.9 838.4 699.5 835.9 L 705.5 830.8 L 760.6 830.8 L 767.9 806.2 L 727.6 806.2 L 734.6 792.8 Z M 775.9 949.1 C 775 947.8 775.7 945.4 777.1 940.4 L 792.2 890.5 L 845.7 890.5 C 853.6 890.4 859.2 890.3 862.9 890.1 C 866.8 889.6 871.1 888.2 875.8 885.7 C 880.6 883.1 883 880.3 885.1 877.1 C 887.4 873.9 891.2 866.9 894.4 856.1 L 913.3 793 L 857.7 793.3 C 857.7 793.3 840.6 795.8 833 798.6 C 825.4 801.7 814.6 810.4 814.6 810.4 L 819.6 793.1 L 785.2 793.1 L 737.1 952.7 C 735.4 958.9 734.3 963.4 734 966.1 C 733.9 969 737.7 971.9 740.1 974 C 743 976.2 747.3 975.9 751.3 976.2 C 755.6 976.5 761.7 976.7 770.2 976.7 L 796.6 976.7 L 804.7 949.4 L 781 951.6 C 778.5 951.6 776.7 950.2 775.9 949.1 Z M 801.9 856.8 L 858.2 856.8 L 854.6 868.1 C 854.1 868.3 852.9 867.5 847.2 868.2 L 798.4 868.2 Z M 813.2 819.2 L 869.9 819.2 L 865.8 832.7 C 865.8 832.7 839.1 832.5 834.8 833.2 C 815.9 836.5 804.9 846.6 804.9 846.6 Z M 855.8 905.6 C 855.4 907.3 854.6 908.3 853.6 909.1 C 852.5 909.8 850.6 910.1 847.9 910.1 L 839.8 910.1 L 840.3 896.4 L 807 896.4 L 805.6 963.2 C 805.6 968.1 806 970.8 809.5 973.1 C 813.1 975.9 823.9 976.2 838.6 976.2 L 859.5 976.2 L 867 951.2 L 848.8 952.2 L 842.8 952.6 C 841.9 952.2 841.1 951.9 840.3 951 C 839.5 950.2 838.2 950.7 838.4 945.9 L 838.6 928.8 L 857.6 928 C 867.9 928 872.3 924.6 876.1 921.4 C 879.7 918.4 880.9 914.9 882.2 910.1 L 885.4 894.9 L 859.2 894.9 Z M 855.8 905.6 ' fill-opacity='1' fill-rule='nonzero'/%3E%3C/svg%3E"); } } /* the Figma's row labels: the method's name after its logo ("PayTo", "Alipay+", "WeChat Pay", "UnionPay") instead of the page's "Pay with … |". The page's words are hidden (font-size 0; screen readers still read them) and the name drawn as ::after; the logos and icons keep their own px sizes. The Card row has no name: it is the four brand logos alone (card-brand-logo-tile.css), the page's words hidden the same way. */ form.payment-form .btn-recaptcha:is([data-paymentmethod="Card"], [data-paymentmethod="PayTo"], [data-paymentmethod="AliPayPlus"], [data-paymentmethod="WeChat"], [data-paymentmethod="UnionPay"]) { font-size: 0; gap: 10px; } form.payment-form .btn-recaptcha:is([data-paymentmethod="PayTo"], [data-paymentmethod="AliPayPlus"], [data-paymentmethod="WeChat"], [data-paymentmethod="UnionPay"])::after { font: 600 15px/1 var(--f-font); color: var(--f-ink); white-space: nowrap; } form.payment-form .btn-recaptcha[data-paymentmethod="PayTo"]::after { content: "PayTo"; } form.payment-form .btn-recaptcha[data-paymentmethod="AliPayPlus"]::after { content: "Alipay+"; } form.payment-form .btn-recaptcha[data-paymentmethod="WeChat"]::after { content: "WeChat Pay"; } form.payment-form .btn-recaptcha[data-paymentmethod="UnionPay"]::after { content: "UnionPay"; } /* The Card row is the four brand logos centred, as the Apple Pay and Google Pay buttons are, with the radio mark (the row's ::before, taken out of the flow) at the left edge: no icon tile and no drawn word. The page's own words ("Pay with ... |") stay in the button for screen readers, at font-size 0 (logos-and-labels.css; the radio is drawn in px, so it keeps its size). The row has no side padding of its own here, or the logos would be centred in the space left of the padding, not in the row. The four logos are 28.5px wide with 8.7px between them: the same 113px strip as the open Card block's header, drawn about 140px wide. */ form.payment-form .btn-recaptcha[data-paymentmethod="Card"] { justify-content: center; gap: 0; padding: 0 !important; } /* inline padding:0 and the rows' left padding are !important */ form.payment-form .btn-recaptcha[data-paymentmethod="Card"] > .fa:is(.fa-cc-visa, .fa-cc-mastercard, .fa-cc-amex, .fa-cc-jcb) { margin: 0 4.35px; } /* the logos' spacing as margins, not a gap: the page's words are a zero-width flex item, and a gap would count it */ /* The page's brand icons are Font Awesome glyphs (one flat colour); each is replaced, in a 28.5 x 21px box, by its real full-colour logo drawn as a white hairline card with the logo inside (Visa, Mastercard, American Express and JCB, embedded as data: images because a stylesheet loaded from the CDN cannot reach the page's images). Discover has no logo here and keeps its glyph. */ form.payment-form .btn-recaptcha[data-paymentmethod="Card"] > .fa:is(.fa-cc-visa, .fa-cc-mastercard, .fa-cc-amex, .fa-cc-jcb) { display: block; box-sizing: border-box; width: 28.5px; height: 21px; border-radius: 3.5px; background-color: #fff; background-position: center; background-repeat: no-repeat; box-shadow: inset 0 0 0 1px var(--f-line); } form.payment-form .btn-recaptcha[data-paymentmethod="Card"] > .fa:is(.fa-cc-visa, .fa-cc-mastercard, .fa-cc-amex, .fa-cc-jcb)::before { content: none; } form.payment-form .btn-recaptcha[data-paymentmethod="Card"] > .fa-cc-visa { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%201000%20324.68%22%3E%3Cpath%20fill%3D%22%231434cb%22%20d%3D%22m651.19.5c-70.93%2C0-134.32%2C36.77-134.32%2C104.69%2C0%2C77.9%2C112.42%2C83.28%2C112.42%2C122.42%2C0%2C16.48-18.88%2C31.23-51.14%2C31.23-45.77%2C0-79.98-20.61-79.98-20.61l-14.64%2C68.55s39.41%2C17.41%2C91.73%2C17.41c77.55%2C0%2C138.58-38.57%2C138.58-107.66%2C0-82.32-112.89-87.54-112.89-123.86%2C0-12.91%2C15.5-27.05%2C47.66-27.05%2C36.29%2C0%2C65.89%2C14.99%2C65.89%2C14.99l14.33-66.2S696.61.5%2C651.18.5h0ZM2.22%2C5.5L.5%2C15.49s29.84%2C5.46%2C56.72%2C16.36c34.61%2C12.49%2C37.07%2C19.77%2C42.9%2C42.35l63.51%2C244.83h85.14L379.93%2C5.5h-84.94l-84.28%2C213.17-34.39-180.7c-3.15-20.68-19.13-32.48-38.68-32.48%2C0%2C0-135.41%2C0-135.41%2C0Zm411.87%2C0l-66.63%2C313.53h81L494.85%2C5.5h-80.76Zm451.76%2C0c-19.53%2C0-29.88%2C10.46-37.47%2C28.73l-118.67%2C284.8h84.94l16.43-47.47h103.48l9.99%2C47.47h74.95L934.12%2C5.5h-68.27Zm11.05%2C84.71l25.18%2C117.65h-67.45l42.28-117.65h0Z%22%2F%3E%3C%2Fsvg%3E"); background-size: 78% auto; } form.payment-form .btn-recaptcha[data-paymentmethod="Card"] > .fa-cc-mastercard { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20height%3D%22618%22%20width%3D%221000%22%3E%3Cpath%20fill%3D%22%23EB001B%22%20d%3D%22m308%2C0a309%2C309%200%201%2C0%202%2C0z%22%2F%3E%3Cpath%20fill%3D%22%23F79E1B%22%20d%3D%22m690%2C0a309%2C309%200%201%2C0%202%2C0z%22%2F%3E%3Cpath%20fill%3D%22%23FF5F00%22%20d%3D%22m500%2C66a309%2C309%200%200%2C0%200%2C486%20309%2C309%200%200%2C0%200-486%22%2F%3E%3C%2Fsvg%3E"); background-size: 70% auto; } form.payment-form .btn-recaptcha[data-paymentmethod="Card"] > .fa-cc-amex { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%221000%22%20height%3D%22997.51703%22%20id%3D%22svg2%22%20version%3D%221.1%22%20%3E%3Cdefs%20id%3D%22defs4%22%2F%3E%3Cg%20id%3D%22layer1%22%20transform%3D%22translate(-55.5%2C-1002.3452)%22%3E%3Cpath%20id%3D%22path3078%22%20d%3D%22m%2055.5%2C1002.3454%20997.5168%2C0%200%2C538.4893%20-49.3744%2C77.1475%2049.3744%2C68.6613%200%2C313.2187%20-997.5168%2C0%200%2C-507.6304%20L%2086.358989%2C1456.744%2055.5%2C1422.7991%20Z%22%20style%3D%22fill%3A%23016fd0%3Bfill-opacity%3A1%3Bstroke%3Anone%22%2F%3E%3Cpath%20id%3D%22path3082%22%20d%3D%22m%20249.14015%2C1697.4441%200%2C-156.6094%20165.82027%2C0%2017.79072%2C23.1924%2018.37901%2C-23.1924%20601.88665%2C0%200%2C145.8088%20c%200%2C0%20-15.7404%2C10.644%20-33.9449%2C10.8006%20l%20-333.27706%2C0%20-20.05834%2C-24.6872%200%2C24.6872%20-65.72965%2C0%200%2C-42.1418%20c%200%2C0%20-8.97877%2C5.8825%20-28.39026%2C5.8825%20l%20-22.37277%2C0%200%2C36.2593%20-99.52024%2C0%20-17.7653%2C-23.6898%20-18.03807%2C23.6898%20z%22%20style%3D%22fill%3A%23ffffff%3Bstroke%3Anone%22%2F%3E%3Cpath%20id%3D%22path3080%22%20d%3D%22m%2055.5%2C1422.7991%2037.393125%2C-87.1766%2064.667505%2C0%2021.22103%2C48.8328%200%2C-48.8328%2080.38767%2C0%2012.63289%2C35.2949%2012.24716%2C-35.2949%20360.8573%2C0%200%2C17.7439%20c%200%2C0%2018.96995%2C-17.7439%2050.14586%2C-17.7439%20l%20117.08499%2C0.4092%2020.85469%2C48.1937%200%2C-48.6029%2067.27259%2C0%2018.5154%2C27.6834%200%2C-27.6834%2067.88977%2C0%200%2C156.6093%20-67.88977%2C0%20-17.74392%2C-27.7731%200%2C27.7731%20-98.83835%2C0%20-9.93959%2C-24.6872%20-26.57108%2C0%20-9.77781%2C24.6872%20-67.02872%2C0%20c%20-26.82589%2C0%20-43.97406%2C-17.3816%20-43.97406%2C-17.3816%20l%200%2C17.3816%20-101.06318%2C0%20-20.05835%2C-24.6872%200%2C24.6872%20-375.80462%2C0%20-9.93274%2C-24.6872%20-26.48635%2C0%20-9.86254%2C24.6872%20-46.1989%2C0%20z%22%20style%3D%22fill%3A%23ffffff%3Bstroke%3Anone%22%2F%3E%3Cpath%20id%3D%22path3046%22%20d%3D%22m%20106.12803%2C1354.9291%20-50.435161%2C117.2641%2032.835892%2C0%209.305914%2C-23.4816%2054.099665%2C0%209.2577%2C23.4816%2033.55915%2C0%20-50.38695%2C-117.2641%20-38.23621%2C0%20z%20m%2018.66004%2C27.2909%2016.49028%2C41.0329%20-33.02877%2C0%2016.53849%2C-41.0329%20z%22%20style%3D%22fill%3A%23016fd0%3Bfill-opacity%3A1%3Bstroke%3Anone%22%2F%3E%3Cpath%20id%3D%22path3048%22%20d%3D%22m%20198.22282%2C1472.1735%200%2C-117.2642%2046.66163%2C0.1733%2027.13999%2C75.6045%2026.4901%2C-75.7778%2046.28848%2C0%200%2C117.2642%20-29.31604%2C0%200%2C-86.4052%20-31.07562%2C86.4052%20-25.71023%2C0%20-31.16227%2C-86.4052%200%2C86.4052%20z%22%20style%3D%22fill%3A%23016fd0%3Bfill-opacity%3A1%3Bstroke%3Anone%22%2F%3E%3Cpath%20id%3D%22path3050%22%20d%3D%22m%20364.86136%2C1472.1735%200%2C-117.2642%2095.66287%2C0%200%2C26.2302%20-66.03824%2C0%200%2C20.0583%2064.49529%2C0%200%2C24.6872%20-64.49529%2C0%200%2C20.8298%2066.03824%2C0%200%2C25.4587%20z%22%20style%3D%22fill%3A%23016fd0%3Bfill-opacity%3A1%3Bstroke%3Anone%22%2F%3E%3Cpath%20id%3D%22path3052%22%20d%3D%22m%20477.49667%2C1354.9291%200%2C117.2641%2029.31604%2C0%200%2C-41.6596%2012.34359%2C0%2035.15032%2C41.6596%2035.82536%2C0%20-38.57374%2C-43.2025%20c%2015.8309%2C-1.3359%2032.16085%2C-14.9233%2032.16085%2C-36.0182%200%2C-24.6765%20-19.36827%2C-38.0434%20-40.98459%2C-38.0434%20l%20-65.23783%2C0%20z%20m%2029.31604%2C26.2301%2033.51093%2C0%20c%208.03881%2C0%2013.88655%2C6.2882%2013.88655%2C12.3436%200%2C7.7905%20-7.57673%2C12.3436%20-13.45259%2C12.3436%20l%20-33.94489%2C0%200%2C-24.6872%20z%22%20style%3D%22fill%3A%23016fd0%3Bfill-opacity%3A1%3Bstroke%3Anone%22%2F%3E%3Cpath%20id%3D%22path3054%22%20d%3D%22m%20625.61982%2C1472.1735%20-29.93322%2C0%200%2C-117.2642%2029.93322%2C0%20z%22%20style%3D%22fill%3A%23016fd0%3Bfill-opacity%3A1%3Bstroke%3Anone%22%2F%3E%3Cpath%20id%3D%22path3056%22%20d%3D%22m%20696.59549%2C1472.1735%20-6.4611%2C0%20c%20-31.26172%2C0%20-50.24229%2C-24.6292%20-50.24229%2C-58.1499%200%2C-34.3488%2018.76806%2C-59.1143%2058.24634%2C-59.1143%20l%2032.40194%2C0%200%2C27.7731%20-33.58657%2C0%20c%20-16.026%2C0%20-27.35994%2C12.5067%20-27.35994%2C31.6305%200%2C22.7096%2012.95987%2C32.2476%2031.63047%2C32.2476%20l%207.71474%2C0%20z%22%20style%3D%22fill%3A%23016fd0%3Bfill-opacity%3A1%3Bstroke%3Anone%22%2F%3E%3Cpath%20style%3D%22fill%3A%23016fd0%3Bfill-opacity%3A1%3Bstroke%3Anone%22%20d%3D%22m%20760.3868%2C1354.9291%20-50.43515%2C117.2641%2032.83589%2C0%209.30591%2C-23.4816%2054.09967%2C0%209.25769%2C23.4816%2033.55915%2C0%20-50.38694%2C-117.2641%20-38.23622%2C0%20z%20m%2018.66005%2C27.2909%2016.49027%2C41.0329%20-33.02876%2C0%2016.53849%2C-41.0329%20z%22%20id%3D%22path3058%22%2F%3E%3Cpath%20id%3D%22path3060%22%20d%3D%22m%20852.43338%2C1472.1735%200%2C-117.2642%2037.27187%2C0%2047.59035%2C73.6759%200%2C-73.6759%2029.31604%2C0%200%2C117.2642%20-36.06644%2C0%20-48.79578%2C-75.6045%200%2C75.6045%20z%22%20style%3D%22fill%3A%23016fd0%3Bfill-opacity%3A1%3Bstroke%3Anone%22%2F%3E%3Cpath%20style%3D%22fill%3A%23016fd0%3Bfill-opacity%3A1%3Bstroke%3Anone%22%20d%3D%22m%20269.1985%2C1677.3858%200%2C-117.2642%2095.66286%2C0%200%2C26.2302%20-66.03823%2C0%200%2C20.0583%2064.49528%2C0%200%2C24.6872%20-64.49528%2C0%200%2C20.8298%2066.03823%2C0%200%2C25.4587%20z%22%20id%3D%22path3062%22%2F%3E%3Cpath%20id%3D%22path3064%22%20d%3D%22m%20737.94653%2C1677.3858%200%2C-117.2642%2095.66287%2C0%200%2C26.2302%20-66.03824%2C0%200%2C20.0583%2064.1867%2C0%200%2C24.6872%20-64.1867%2C0%200%2C20.8298%2066.03824%2C0%200%2C25.4587%20z%22%20style%3D%22fill%3A%23016fd0%3Bfill-opacity%3A1%3Bstroke%3Anone%22%2F%3E%3Cpath%20id%3D%22path3066%22%20d%3D%22m%20368.57408%2C1677.3858%2046.57779%2C-57.9089%20-47.68678%2C-59.3553%2036.93435%2C0%2028.39991%2C36.6932%2028.49635%2C-36.6932%2035.48784%2C0%20-47.05996%2C58.6321%2046.66353%2C58.6321%20-36.92851%2C0%20-27.57537%2C-36.1148%20-26.90518%2C36.1148%20z%22%20style%3D%22fill%3A%23016fd0%3Bfill-opacity%3A1%3Bstroke%3Anone%22%2F%3E%3Cpath%20style%3D%22fill%3A%23016fd0%3Bfill-opacity%3A1%3Bstroke%3Anone%22%20d%3D%22m%20499.86944%2C1560.1414%200%2C117.2641%2030.08751%2C0%200%2C-37.0308%2030.85899%2C0%20c%2026.11107%2C0%2045.90274%2C-13.8524%2045.90274%2C-40.7917%200%2C-22.3164%20-15.52271%2C-39.4416%20-42.09358%2C-39.4416%20l%20-64.75566%2C0%20z%20m%2030.08751%2C26.5194%2032.49837%2C0%20c%208.43546%2C0%2014.46515%2C5.1701%2014.46515%2C13.5008%200%2C7.8262%20-5.99925%2C13.5008%20-14.56158%2C13.5008%20l%20-32.40194%2C0%200%2C-27.0016%20z%22%20id%3D%22path3068%22%2F%3E%3Cpath%20style%3D%22fill%3A%23016fd0%3Bfill-opacity%3A1%3Bstroke%3Anone%22%20d%3D%22m%20619.44802%2C1560.1216%200%2C117.2642%2029.31604%2C0%200%2C-41.6597%2012.34359%2C0%2035.15032%2C41.6597%2035.82536%2C0%20-38.57374%2C-43.2026%20c%2015.83089%2C-1.3361%2032.16085%2C-14.9233%2032.16085%2C-36.0183%200%2C-24.6764%20-19.36827%2C-38.0433%20-40.98459%2C-38.0433%20l%20-65.23783%2C0%20z%20m%2029.31604%2C26.2302%2033.51093%2C0%20c%208.03881%2C0%2013.88654%2C6.2881%2013.88654%2C12.3435%200%2C7.7906%20-7.57673%2C12.3436%20-13.45259%2C12.3436%20l%20-33.94488%2C0%200%2C-24.6871%20z%22%20id%3D%22path3072%22%2F%3E%3Cpath%20id%3D%22path3074%22%20d%3D%22m%20847.18735%2C1677.3858%200%2C-25.4587%2058.67066%2C0%20c%208.68115%2C0%2012.44003%2C-4.6912%2012.44003%2C-9.8363%200%2C-4.9296%20-3.74703%2C-9.9134%20-12.44003%2C-9.9134%20l%20-26.5126%2C0%20c%20-23.04571%2C0%20-35.88042%2C-14.0409%20-35.88042%2C-35.1214%200%2C-18.8023%2011.75348%2C-36.9344%2045.99918%2C-36.9344%20l%2057.08913%2C0%20-12.3436%2C26.3844%20-49.37438%2C0%20c%20-9.43821%2C0%20-12.3436%2C4.9526%20-12.3436%2C9.6821%200%2C4.8612%203.59036%2C10.222%2010.80065%2C10.222%20l%2027.77309%2C0%20c%2025.69029%2C0%2036.83792%2C14.5724%2036.83792%2C33.6556%200%2C20.5163%20-12.42212%2C37.3201%20-38.23646%2C37.3201%20z%22%20style%3D%22fill%3A%23016fd0%3Bfill-opacity%3A1%3Bstroke%3Anone%22%2F%3E%3Cpath%20style%3D%22fill%3A%23016fd0%3Bfill-opacity%3A1%3Bstroke%3Anone%22%20d%3D%22m%20954.78398%2C1677.3858%200%2C-25.4587%2058.67062%2C0%20c%208.6812%2C0%2012.4401%2C-4.6912%2012.4401%2C-9.8363%200%2C-4.9296%20-3.7471%2C-9.9134%20-12.4401%2C-9.9134%20l%20-26.51256%2C0%20c%20-23.04571%2C0%20-35.88043%2C-14.0409%20-35.88043%2C-35.1214%200%2C-18.8023%2011.75348%2C-36.9344%2045.99918%2C-36.9344%20l%2057.08911%2C0%20-12.3436%2C26.3844%20-49.37436%2C0%20c%20-9.4382%2C0%20-12.34359%2C4.9526%20-12.34359%2C9.6821%200%2C4.8612%203.59035%2C10.222%2010.80064%2C10.222%20l%2027.77311%2C0%20c%2025.6903%2C0%2036.8379%2C14.5724%2036.8379%2C33.6556%200%2C20.5163%20-12.4221%2C37.3201%20-38.2365%2C37.3201%20z%22%20id%3D%22path3076%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"); background-size: cover; } form.payment-form .btn-recaptcha[data-paymentmethod="Card"] > .fa-cc-jcb { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20height%3D%22231.511%22%20width%3D%22300%22%20xml%3Aspace%3D%22preserve%22%20viewBox%3D%220%200%20300.00001%20231.511%22%20y%3D%220px%22%20x%3D%220px%22%20id%3D%22%E3%83%AC%E3%82%A4%E3%83%A4%E3%83%BC_1%22%20version%3D%221.1%22%3E%3Cdefs%20id%3D%22defs6422%22%2F%3E%3Cstyle%20id%3D%22style6319%22%20type%3D%22text%2Fcss%22%3E%20.st0%7Bfill%3A%23FFFFFF%3B%7D%20.st1%7Bfill%3Aurl(%23SVGID_1_)%3B%7D%20.st2%7Bfill%3Aurl(%23SVGID_2_)%3B%7D%20.st3%7Bfill%3Aurl(%23SVGID_3_)%3B%7D%20.st4%7Bfill%3Aurl(%23SVGID_4_)%3B%7D%20.st5%7Bfill%3Aurl(%23SVGID_5_)%3B%7D%20%3C%2Fstyle%3E%3Cg%20transform%3D%22translate(-9.4000001%2C96.810998)%22%20id%3D%22g6321%22%3E%3Cg%20transform%3D%22matrix(1.8215159%2C0%2C0%2C1.8215159%2C-8.5437653%2C-109.83667)%22%20id%3D%22g6323%22%3E%3Cpath%20style%3D%22fill%3A%23ffffff%22%20id%3D%22path6325%22%20d%3D%22m%20174%2C108.3%20c%200%2C14%20-11.4%2C25.4%20-25.4%2C25.4%20l%20-138.2%2C0%200%2C-100.6%20c%200%2C-14%2011.4%2C-25.4%2025.4%2C-25.4%20l%20138.2%2C0%200%2C100.6%20z%22%20class%3D%22st0%22%2F%3E%3Cg%20id%3D%22g6327%22%3E%3ClinearGradient%20gradientTransform%3D%22matrix(1.125%2C0%2C0%2C1.125%2C-11.9755%2C-13.8615)%22%20y2%3D%2281.398598%22%20x2%3D%22157.3299%22%20y1%3D%2281.398598%22%20x1%3D%22117.3856%22%20gradientUnits%3D%22userSpaceOnUse%22%20id%3D%22SVGID_1_%22%3E%3Cstop%20id%3D%22stop6330%22%20style%3D%22stop-color%3A%23007940%22%20offset%3D%220%22%2F%3E%3Cstop%20id%3D%22stop6332%22%20style%3D%22stop-color%3A%2300873F%22%20offset%3D%220.2285%22%2F%3E%3Cstop%20id%3D%22stop6334%22%20style%3D%22stop-color%3A%2340A737%22%20offset%3D%220.7433%22%2F%3E%3Cstop%20id%3D%22stop6336%22%20style%3D%22stop-color%3A%235CB531%22%20offset%3D%221%22%2F%3E%3C%2FlinearGradient%3E%3Cpath%20style%3D%22fill%3Aurl(%23SVGID_1_)%22%20id%3D%22path6338%22%20d%3D%22m%20129%2C82.5%2010.5%2C0%20c%200.3%2C0%201%2C-0.1%201.3%2C-0.1%202%2C-0.4%203.7%2C-2.2%203.7%2C-4.7%200%2C-2.4%20-1.7%2C-4.2%20-3.7%2C-4.7%20-0.3%2C-0.1%20-0.9%2C-0.1%20-1.3%2C-0.1%20l%20-10.5%2C0%200%2C9.6%20z%22%20class%3D%22st1%22%2F%3E%3ClinearGradient%20gradientTransform%3D%22matrix(1.125%2C0%2C0%2C1.125%2C-11.9755%2C-13.8615)%22%20y2%3D%2275.171402%22%20x2%3D%22157.3318%22%20y1%3D%2275.171402%22%20x1%3D%22117.3844%22%20gradientUnits%3D%22userSpaceOnUse%22%20id%3D%22SVGID_2_%22%3E%3Cstop%20id%3D%22stop6341%22%20style%3D%22stop-color%3A%23007940%22%20offset%3D%220%22%2F%3E%3Cstop%20id%3D%22stop6343%22%20style%3D%22stop-color%3A%2300873F%22%20offset%3D%220.2285%22%2F%3E%3Cstop%20id%3D%22stop6345%22%20style%3D%22stop-color%3A%2340A737%22%20offset%3D%220.7433%22%2F%3E%3Cstop%20id%3D%22stop6347%22%20style%3D%22stop-color%3A%235CB531%22%20offset%3D%221%22%2F%3E%3C%2FlinearGradient%3E%3Cpath%20style%3D%22fill%3Aurl(%23SVGID_2_)%22%20id%3D%22path6349%22%20d%3D%22m%20138.3%2C16.2%20c%20-10%2C0%20-18.2%2C8.1%20-18.2%2C18.2%20l%200%2C18.9%2025.7%2C0%20c%200.6%2C0%201.3%2C0%201.8%2C0.1%205.8%2C0.3%2010.1%2C3.3%2010.1%2C8.5%200%2C4.1%20-2.9%2C7.6%20-8.3%2C8.3%20l%200%2C0.2%20c%205.9%2C0.4%2010.4%2C3.7%2010.4%2C8.8%200%2C5.5%20-5%2C9.1%20-11.6%2C9.1%20l%20-28.2%2C0%200%2C37%2026.7%2C0%20c%2010%2C0%2018.2%2C-8.1%2018.2%2C-18.2%20l%200%2C-90.9%20-26.6%2C0%20z%22%20class%3D%22st2%22%2F%3E%3ClinearGradient%20gradientTransform%3D%22matrix(1.125%2C0%2C0%2C1.125%2C-11.9755%2C-13.8615)%22%20y2%3D%2268.399101%22%20x2%3D%22157.33051%22%20y1%3D%2268.399101%22%20x1%3D%22117.3846%22%20gradientUnits%3D%22userSpaceOnUse%22%20id%3D%22SVGID_3_%22%3E%3Cstop%20id%3D%22stop6352%22%20style%3D%22stop-color%3A%23007940%22%20offset%3D%220%22%2F%3E%3Cstop%20id%3D%22stop6354%22%20style%3D%22stop-color%3A%2300873F%22%20offset%3D%220.2285%22%2F%3E%3Cstop%20id%3D%22stop6356%22%20style%3D%22stop-color%3A%2340A737%22%20offset%3D%220.7433%22%2F%3E%3Cstop%20id%3D%22stop6358%22%20style%3D%22stop-color%3A%235CB531%22%20offset%3D%221%22%2F%3E%3C%2FlinearGradient%3E%3Cpath%20style%3D%22fill%3Aurl(%23SVGID_3_)%22%20id%3D%22path6360%22%20d%3D%22m%20143.2%2C63.1%20c%200%2C-2.4%20-1.7%2C-4%20-3.7%2C-4.3%20-0.2%2C0%20-0.7%2C-0.1%20-1%2C-0.1%20l%20-9.5%2C0%200%2C8.8%209.5%2C0%20c%200.3%2C0%200.9%2C0%201%2C-0.1%202%2C-0.3%203.7%2C-1.9%203.7%2C-4.3%20z%22%20class%3D%22st3%22%2F%3E%3C%2Fg%3E%3ClinearGradient%20gradientTransform%3D%22matrix(1.125%2C0%2C0%2C1.125%2C-11.9755%2C-13.8615)%22%20y2%3D%2275.171402%22%20x2%3D%2268.522102%22%20y1%3D%2275.171402%22%20x1%3D%2227.9594%22%20gradientUnits%3D%22userSpaceOnUse%22%20id%3D%22SVGID_4_%22%3E%3Cstop%20id%3D%22stop6363%22%20style%3D%22stop-color%3A%231F286F%22%20offset%3D%220%22%2F%3E%3Cstop%20id%3D%22stop6365%22%20style%3D%22stop-color%3A%23004E94%22%20offset%3D%220.4751%22%2F%3E%3Cstop%20id%3D%22stop6367%22%20style%3D%22stop-color%3A%230066B1%22%20offset%3D%220.8261%22%2F%3E%3Cstop%20id%3D%22stop6369%22%20style%3D%22stop-color%3A%23006FBC%22%20offset%3D%221%22%2F%3E%3C%2FlinearGradient%3E%3Cpath%20style%3D%22fill%3Aurl(%23SVGID_4_)%22%20id%3D%22path6371%22%20d%3D%22m%2037.7%2C16.2%20c%20-10%2C0%20-18.2%2C8.1%20-18.2%2C18.2%20l%200%2C44.9%20c%205.1%2C2.5%2010.4%2C4.1%2015.7%2C4.1%206.3%2C0%209.7%2C-3.8%209.7%2C-9%20l%200%2C-21.2%2015.6%2C0%200%2C21.1%20c%200%2C8.2%20-5.1%2C14.9%20-22.4%2C14.9%20-10.5%2C0%20-18.7%2C-2.3%20-18.7%2C-2.3%20l%200%2C38.3%2026.7%2C0%20c%2010%2C0%2018.2%2C-8.1%2018.2%2C-18.2%20l%200%2C-90.8%20-26.6%2C0%20z%22%20class%3D%22st4%22%2F%3E%3ClinearGradient%20gradientTransform%3D%22matrix(1.125%2C0%2C0%2C1.125%2C-11.9755%2C-13.8615)%22%20y2%3D%2275.171402%22%20x2%3D%22111.8553%22%20y1%3D%2275.171402%22%20x1%3D%2272.459503%22%20gradientUnits%3D%22userSpaceOnUse%22%20id%3D%22SVGID_5_%22%3E%3Cstop%20id%3D%22stop6374%22%20style%3D%22stop-color%3A%236C2C2F%22%20offset%3D%220%22%2F%3E%3Cstop%20id%3D%22stop6376%22%20style%3D%22stop-color%3A%23882730%22%20offset%3D%220.1735%22%2F%3E%3Cstop%20id%3D%22stop6378%22%20style%3D%22stop-color%3A%23BE1833%22%20offset%3D%220.5731%22%2F%3E%3Cstop%20id%3D%22stop6380%22%20style%3D%22stop-color%3A%23DC0436%22%20offset%3D%220.8585%22%2F%3E%3Cstop%20id%3D%22stop6382%22%20style%3D%22stop-color%3A%23E60039%22%20offset%3D%221%22%2F%3E%3C%2FlinearGradient%3E%3Cpath%20style%3D%22fill%3Aurl(%23SVGID_5_)%22%20id%3D%22path6384%22%20d%3D%22m%2088%2C16.2%20c%20-10%2C0%20-18.2%2C8.1%20-18.2%2C18.2%20l%200%2C23.8%20c%204.6%2C-3.9%2012.6%2C-6.4%2025.5%2C-5.8%206.9%2C0.3%2014.3%2C2.2%2014.3%2C2.2%20l%200%2C7.7%20c%20-3.7%2C-1.9%20-8.1%2C-3.6%20-13.8%2C-4%20-9.8%2C-0.7%20-15.7%2C4.1%20-15.7%2C12.5%200%2C8.5%205.9%2C13.3%2015.7%2C12.5%205.7%2C-0.4%2010.1%2C-2.2%2013.8%2C-4%20l%200%2C7.7%20c%200%2C0%20-7.3%2C1.9%20-14.3%2C2.2%20-12.9%2C0.6%20-20.9%2C-1.9%20-25.5%2C-5.8%20l%200%2C42%2026.7%2C0%20c%2010%2C0%2018.2%2C-8.1%2018.2%2C-18.2%20l%200%2C-91%20-26.7%2C0%20z%22%20class%3D%22st5%22%2F%3E%3C%2Fg%3E%3Cg%20id%3D%22g6386%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"); background-size: cover; } /* Apple Pay and Google Pay retain their native artwork; sizing and hover follow the rows. */ apple-pay-button { display: block; width: 100%; } /* Apple's script writes its own inline