/* Mastercard brand tokens, from unfairly.ai/brand-guidelines/mastercard (checked 2026-10-31).
   Sizes, spacing and components were measured on https://www.mastercard.com/us/en.html (computed styles and bounding boxes read with Playwright (Chrome, 1440x900 and 390x844) on 2026-10-31, plus the published Brand Center requirements).
   Fonts: --font-* use the open stand-ins (load them from Google Fonts); --font-*-original name Mastercard's own faces, which you may only use if you have a licence. */
:root {
  --color-paper: #F3F0EE;
  --color-surface: #FCFBFA;
  --color-ink: #141413;
  --color-ink-muted: #141413;
  --color-accent: #F37338;
  --color-on-accent: #141413;
  --color-accent-secondary: #FF5F00;
  --color-night: #141413;
  --color-on-night: #FFFFFF;
  --color-mastercard-red: #EB001B;
  --color-mastercard-orange: #FF5F00;
  --color-mastercard-yellow: #F79E1B;
  --color-warm-canvas: #F3F0EE;
  --color-ink: #141413;
  --color-panel: #FCFBFA;
  --color-signal-orange: #F37338;
  --color-footer-muted: #D1CDC7;
  --color-icon-ring: #333333;
  --color-white: #FFFFFF;
  --color-black: #000000;
  --color-button-primary-fill: #141413;
  --color-button-primary-text: #F3F0EE;
  --color-button-outline-text: #141413;
  --color-button-outline-ring: #141413;
  --color-round-arrow-button-fill: #F3F0EE;
  --color-round-arrow-button-ring: #141413;
  --color-photo-arrow-fill: #FFFFFF;
  --color-photo-arrow-text: #141413;
  --color-eyebrow-text: #141413;
  --color-label-pill-fill: #FFFFFF;
  --color-label-pill-text: #141413;
  --color-outline-row-ring: #F37338;
  --color-nav-bar-fill: #FFFFFF;
  --color-country-select-fill: #141413;
  --color-country-select-ring: #D1CDC7;
  --font-display: "Kumbh Sans", "Kumbh Sans", "Helvetica Neue", Arial, sans-serif;
  --font-display-original: "FF Mark", "Kumbh Sans", "Kumbh Sans", "Helvetica Neue", Arial, sans-serif;
  --font-body: "Kumbh Sans", "Kumbh Sans", "Helvetica Neue", Arial, sans-serif;
  --font-body-original: "FF Mark", "Kumbh Sans", "Kumbh Sans", "Helvetica Neue", Arial, sans-serif;
  --page-margin: 100px;
  --section-padding: 120px;
  --container-max: 1240px;
  --hero-text-max: 608px;
  --card-gap: 80px;
  --nav-height: 88px;
  --grid-gutter: 234px;
  --grid-columns: 2;
  --text-display-xl-size: 120px;
  --text-display-xl-line: 1;
  --text-display-xl-weight: 500;
  --text-display-l-size: 64px;
  --text-display-l-line: 1;
  --text-display-l-weight: 500;
  --text-title-size: 36px;
  --text-title-line: 1.2;
  --text-title-weight: 500;
  --text-pill-title-size: 36px;
  --text-pill-title-line: 2;
  --text-pill-title-weight: 500;
  --text-lead-size: 20px;
  --text-lead-line: 1.3;
  --text-lead-weight: 400;
  --text-lead-tracking: 0.4px;
  --text-body-size: 16px;
  --text-body-line: 1.4;
  --text-body-weight: 400;
  --text-body-tracking: 0.32px;
  --text-button-size: 16px;
  --text-button-line: 1;
  --text-button-weight: 500;
  --text-nav-size: 16px;
  --text-nav-line: 1;
  --text-nav-weight: 500;
  --text-eyebrow-size: 14px;
  --text-eyebrow-line: 1;
  --text-eyebrow-weight: 700;
  --text-eyebrow-tracking: 0.84px;
  --text-chip-size: 16px;
  --text-chip-line: 1;
  --text-chip-weight: 500;
  --text-footer-lead-size: 20px;
  --text-footer-lead-line: 1.2;
  --text-footer-lead-weight: 500;
  --text-footer-link-size: 14px;
  --text-footer-link-line: 1;
  --text-footer-link-weight: 500;
  --radius-button-primary: 20px;
  --radius-button-outline: 20px;
  --radius-round-arrow-button: 999px;
  --radius-photo-arrow: 999px;
  --radius-label-pill: 40px;
  --radius-photo-stadium: 999px;
  --radius-outline-row: 999px;
  --radius-nav-bar: 99px;
  --radius-country-select: 20px;
  --ease-fill-reveal: ease-in-out;
  --duration-fill-reveal: 500ms;
  --ease-dot: cubic-bezier(0.25, 0.1, 0.25, 1);
  --duration-dot: 400ms;
  --icon-inline: 16px;
  --icon-photo-arrow: 32px;
}
/* Phone values measured at 390px; Mastercard's CSS switches at 600px. */
@media (max-width: 600px) {
  :root {
    --page-margin: 20px;
    --section-padding: 64px;
    --text-display-xl-size: 48px;
    --text-display-l-size: 48px;
    --text-title-size: 24px;
    --text-pill-title-size: 24px;
    --text-eyebrow-size: 12px;
    --text-chip-size: 14px;
  }
}
.button-primary {
  box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center;
  border: 0; cursor: pointer; text-decoration: none;
  height: 40px; padding: 0 24px; border-radius: 20px;
  background: #141413; color: #F3F0EE;
  font: 500 16px/1 var(--font-body);
}
.button-primary:hover { background-color: #F37338; color: #141413; transition: background-color 0.5s ease-in-out; } /* our reading */
.button-outline {
  box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center;
  border: 0; cursor: pointer; text-decoration: none;
  height: 40px; padding: 0 24px; border-radius: 20px;
  background: transparent; color: #141413;
  box-shadow: inset 0 0 0 1px #141413;
  font: 500 16px/1 var(--font-body);
}