/* Monzo brand tokens, from unfairly.ai/brand-guidelines/monzo (checked 2026-10-29).
   Sizes, spacing and components were measured on https://monzo.com/ (2026-10-29) (computed styles read with Playwright at 1440x900 and 390x844, cookies rejected, geo locale banner closed, scrolled to top).
   Fonts: --font-* use the open stand-ins (load them from Google Fonts); --font-*-original name Monzo's own faces, which you may only use if you have a licence. */
:root {
  --color-paper: #F2F8F3;
  --color-surface: #FFFFFF;
  --color-ink: #091723;
  --color-ink-muted: #09172399;
  --color-accent: #FF4F40;
  --color-on-accent: #FFFFFF;
  --color-night: #112231;
  --color-on-night: #FFFFFF;
  --color-hot-coral: #FF4F40;
  --color-soft-white: #F2F8F3;
  --color-deep-navy: #112231;
  --color-mid-orange: #FE6B1B;
  --color-pale-pink: #FFD7F0;
  --color-neon-yellow: #C3FF34;
  --color-mid-teal: #016B83;
  --color-pale-blue: #BBF6E2;
  --color-deep-khaki: #3A4920;
  --color-white: #FFFFFF;
  --color-black: #000000;
  --color-soft-white-1: #E3EBE4;
  --color-grey-3: #C9D0C6;
  --color-grey-2: #AEB5A7;
  --color-grey-1: #75817E;
  --color-navy-2: #2C3A43;
  --color-navy-3: #3B4C54;
  --color-deep-orange: #ED5E11;
  --color-pale-orange: #FF945A;
  --color-deep-pink: #F365BF;
  --color-mid-pink: #FFA9DF;
  --color-deep-neon: #A3DC1A;
  --color-pale-neon: #D9FF6F;
  --color-deep-teal: #004E60;
  --color-pale-teal: #2EAFC0;
  --color-deep-blue: #68CDB5;
  --color-mid-blue: #8CE6D1;
  --color-mid-khaki: #61763D;
  --color-pale-khaki: #99AF73;
  --color-positive-green-1: #5AC87F;
  --color-positive-green-2: #348A51;
  --color-destructive-red-1: #F5430B;
  --color-destructive-red-2: #C9390C;
  --color-yellow-1: #FFC328;
  --color-yellow-2: #D26E28;
  --color-action-blue: #218FB7;
  --color-live-navy-900: #091723;
  --color-blue-accent: #009ACE;
  --color-nav-focus: #00A4DB;
  --color-navy-60-on-white: #6B747B;
  --color-button-primary-fill: #091723;
  --color-button-primary-text: #FFFFFF;
  --color-button-white-fill: #FFFFFF;
  --color-button-white-text: #091723;
  --color-button-secondary-outline-fill: #FFFFFF00;
  --color-button-secondary-outline-text: #091723;
  --color-button-secondary-outline-ring: #091723;
  --color-carousel-arrow-ring: #091723;
  --color-account-card-arrow-ring: #091723;
  --font-display: Raleway, "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
  --font-display-original: MonzoSansDisplay, Raleway, "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
  --font-body: Onest, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-body-original: "Monzo Sans", Onest, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --page-margin: 64px;
  --section-padding: 64px;
  --container-max: 1440px;
  --card-gap: 24px;
  --nav-height: 87px;
  --text-hero-headline-size: 48.83px;
  --text-hero-headline-line: 1.2;
  --text-hero-headline-weight: 900;
  --text-section-headline-h2-size: 39.06px;
  --text-section-headline-h2-line: 1.2;
  --text-section-headline-h2-weight: 900;
  --text-regulatory-headline-size: 44px;
  --text-regulatory-headline-line: 1.2;
  --text-regulatory-headline-weight: 900;
  --text-step-numeral-size: 61.04px;
  --text-step-numeral-line: 1.2;
  --text-step-numeral-weight: 900;
  --text-slide-title-size: 31.25px;
  --text-slide-title-line: 1.2;
  --text-slide-title-weight: 750;
  --text-slide-title-tracking: -0.63px;
  --text-carousel-card-title-size: 25px;
  --text-carousel-card-title-line: 1.4;
  --text-carousel-card-title-weight: 750;
  --text-carousel-card-title-tracking: -0.5px;
  --text-account-footer-title-size: 25px;
  --text-account-footer-title-line: 1.2;
  --text-account-footer-title-weight: 750;
  --text-account-footer-title-tracking: -0.5px;
  --text-spotlight-item-title-size: 20px;
  --text-spotlight-item-title-line: 1.4;
  --text-spotlight-item-title-weight: 675;
  --text-spotlight-item-title-tracking: -0.4px;
  --text-lead-intro-size: 20px;
  --text-lead-intro-line: 1.4;
  --text-lead-intro-weight: 350;
  --text-body-size: 16px;
  --text-body-line: 1.4;
  --text-body-weight: 350;
  --text-emphasis-body-size: 16px;
  --text-emphasis-body-line: 1.4;
  --text-emphasis-body-weight: 550;
  --text-emphasis-body-tracking: 0.16px;
  --text-button-label-size: 16px;
  --text-button-label-line: 1.4;
  --text-button-label-weight: 550;
  --text-button-label-tracking: 0.16px;
  --text-mega-menu-group-size: 20px;
  --text-mega-menu-group-line: 1.15;
  --text-mega-menu-group-weight: 550;
  --text-mega-menu-group-tracking: 0.2px;
  --text-ranking-subtitle-size: 24px;
  --text-ranking-subtitle-line: 1.4;
  --text-ranking-subtitle-weight: 550;
  --text-ranking-subtitle-tracking: 0.24px;
  --text-legal-small-print-size: 12.8px;
  --text-legal-small-print-line: 1.4;
  --text-legal-small-print-weight: 350;
  --radius-button-primary: 999px;
  --radius-button-white: 999px;
  --radius-button-secondary-outline: 999px;
  --radius-carousel-arrow: 999px;
  --radius-account-card-arrow: 999px;
  --ease-button-primary: ease-in-out;
  --duration-button-primary: 300ms;
  --ease-button-outline: linear;
  --duration-button-outline: 300ms;
  --ease-white-button-and-links: ease;
  --duration-white-button-and-links: 200ms;
}
/* Phone values measured at 390px; Monzo's CSS switches at 767px. */
@media (max-width: 767px) {
  :root {
    --page-margin: 16px;
    --section-padding: 32px;
    --text-hero-headline-size: 40.67px;
    --text-section-headline-h2-size: 33.73px;
    --text-regulatory-headline-size: 32px;
    --text-slide-title-size: 27.99px;
    --text-carousel-card-title-size: 23.23px;
    --text-account-footer-title-size: 23.23px;
    --text-spotlight-item-title-size: 19.28px;
    --text-lead-intro-size: 19.28px;
    --text-ranking-subtitle-size: 20px;
    --text-legal-small-print-size: 13.28px;
  }
}
.button-primary {
  box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center;
  border: 0; cursor: pointer; text-decoration: none;
  height: 48px; padding: 0 24px; border-radius: 999px;
  background: #091723; color: #FFFFFF;
  font: 550 16px/1 var(--font-body);
}
.button-white {
  box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center;
  border: 0; cursor: pointer; text-decoration: none;
  height: 48px; padding: 0 24px; border-radius: 999px;
  background: #FFFFFF; color: #091723;
  font: 550 16px/1 var(--font-body);
}
.button-secondary-outline {
  box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center;
  border: 0; cursor: pointer; text-decoration: none;
  height: 48px; padding: 0 24px; border-radius: 999px;
  background: #FFFFFF00; color: #091723;
  box-shadow: inset 0 0 0 2px #091723;
  font: 550 16px/1 var(--font-body);
}