/* Mozilla brand tokens, from unfairly.ai/brand-guidelines/mozilla (checked 2026-10-29).
   Sizes, spacing and components were measured on https://www.mozilla.org/en-US/ (computed styles, stylesheet rules and bounding boxes at 1440 and 390 px wide, on 2026-10-28 and 2026-10-29 (consent banner not shown in this region)).
   Fonts: --font-* use the open stand-ins (load them from Google Fonts); --font-*-original name Mozilla's own faces, which you may only use if you have a licence. */
:root {
  --color-paper: #FAFAFA;
  --color-surface: #FFF1F8;
  --color-ink: #000000;
  --color-ink-muted: #414141;
  --color-accent: #00D230;
  --color-on-accent: #000000;
  --color-accent-secondary: #FF97E2;
  --color-night: #161616;
  --color-on-night: #FFFFFF;
  --color-strong-white: #FFFFFF;
  --color-orange: #FF9456;
  --color-orange-plus-1: #FAF0E6;
  --color-green-plus-1: #D6FFCD;
  --color-green-minus-1: #28733F;
  --color-green-minus-2: #022611;
  --color-pink-minus-1: #AE49EC;
  --color-pink-minus-2: #210340;
  --color-orange-minus-1: #FF453F;
  --color-orange-minus-2: #330505;
  --color-light-mid-gray: #E8E8E8;
  --color-mid-gray: #B3B3B3;
  --color-dark-mid-gray: #6D6D6D;
  --color-report-yellow: #FEFEBB;
  --color-footer-icon-gray: #7F7F7F;
  --color-pause-button-ring: #414141;
  --font-display: "Mozilla Headline", "Helvetica Neue", Arial, sans-serif;
  --font-body: "Mozilla Text", "Helvetica Neue", Arial, sans-serif;
  --page-margin: 32px;
  --section-padding: 64px;
  --container-max: 1440px;
  --hero-text-max: 912px;
  --card-gap: 16px;
  --nav-height: 56px;
  --grid-gutter: 16px;
  --grid-columns: 12;
  --text-hero-headline-size: 128px;
  --text-hero-headline-line: 1;
  --text-hero-headline-weight: 600;
  --text-hero-headline-tracking: -1.28px;
  --text-section-headline-size: 80px;
  --text-section-headline-line: 1;
  --text-section-headline-weight: 600;
  --text-section-headline-tracking: -0.8px;
  --text-card-title-size: 32px;
  --text-card-title-line: 1.1;
  --text-card-title-weight: 600;
  --text-card-title-tracking: -0.32px;
  --text-year-label-size: 48px;
  --text-year-label-line: 1.25;
  --text-year-label-weight: 600;
  --text-call-to-action-link-size: 32px;
  --text-call-to-action-link-line: 1.1;
  --text-call-to-action-link-weight: 600;
  --text-lead-size: 24px;
  --text-lead-line: 1.25;
  --text-lead-weight: 400;
  --text-section-intro-size: 24px;
  --text-section-intro-line: 1.25;
  --text-section-intro-weight: 400;
  --text-product-name-size: 24px;
  --text-product-name-line: 1;
  --text-product-name-weight: 600;
  --text-nav-link-size: 18px;
  --text-nav-link-line: 1.25;
  --text-nav-link-weight: 600;
  --text-body-size: 18px;
  --text-body-line: 1.25;
  --text-body-weight: 400;
  --text-muted-description-size: 18px;
  --text-muted-description-line: 1.25;
  --text-muted-description-weight: 400;
  --text-tile-description-size: 16px;
  --text-tile-description-line: 1.25;
  --text-tile-description-weight: 400;
  --text-text-link-size: 18px;
  --text-text-link-line: 1.25;
  --text-text-link-weight: 600;
  --text-tag-size: 14px;
  --text-tag-line: 1.25;
  --text-tag-weight: 700;
  --text-footer-heading-size: 16px;
  --text-footer-heading-line: 1.1;
  --text-footer-heading-weight: 600;
  --text-footer-heading-tracking: -0.16px;
  --text-legal-size: 14px;
  --text-legal-line: 1.5;
  --text-legal-weight: 400;
  --radius-button-primary: 0px;
  --radius-pill-label: 0px;
  --radius-card: 0px;
  --radius-button-secondary: 0px;
  --radius-button-on-dark: 0px;
  --radius-media-frame: 0px;
  --radius-pause-button: 0px;
  --radius-newsletter-field: 0px;
  --radius-language-select: 0px;
  --ease-global: cubic-bezier(0.68, 0, 0.12, 1);
  --duration-global: 800ms;
  --ease-ui-hover: cubic-bezier(0.5, 0, 0, 1);
  --duration-ui-hover: 300ms;
  --ease-flag-wave: linear;
  --duration-flag-wave: 1200ms;
  --ease-fearless-in: cubic-bezier(0.59, 0, 0.59, 0);
  --duration-fearless-in: 400ms;
  --ease-fearless-out: cubic-bezier(0, 0.66, 0.33, 1);
  --ease-insightful-in: cubic-bezier(0.22, 1, 0.36, 1);
  --duration-insightful-in: 330ms;
  --ease-insightful-out: cubic-bezier(0.64, 0, 0.78, 0);
  --icon-s: 16px;
  --icon-m: 24px;
  --icon-l: 32px;
  --icon-xl: 40px;
}
/* Phone values measured at 390px; Mozilla's CSS switches at 767px. */
@media (max-width: 767px) {
  :root {
    --page-margin: 16px;
    --section-padding: 32px;
    --text-hero-headline-size: 48px;
    --text-section-headline-size: 32px;
    --text-card-title-size: 24px;
    --text-year-label-size: 24px;
    --text-call-to-action-link-size: 18px;
    --text-lead-size: 18px;
    --text-section-intro-size: 18px;
    --text-product-name-size: 18px;
    --text-nav-link-size: 16px;
    --text-body-size: 16px;
    --text-muted-description-size: 14px;
    --text-tile-description-size: 14px;
    --text-text-link-size: 14px;
    --text-footer-heading-size: 14px;
    --text-legal-size: 12px;
  }
}
.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 16px; border-radius: 0px;
  background: var(--color-night); color: var(--color-on-night);
  box-shadow: inset 0 0 0 2px var(--color-ink);
  font: 600 16px/1 var(--font-body);
}
.button-primary:hover { background-color: #FFFFFF; color: #000000; } /* observed */
.button-primary:focus-visible { background-color: #FFFFFF; color: #000000; box-shadow: 0 0 0 2px rgba(0, 144, 237, 0.5); outline-offset: 4px; } /* observed */
.button-primary:active { background-color: #FFFFFF; color: #000000; } /* observed */
.button-primary:disabled { opacity: 0.6; pointer-events: none; } /* observed */
.button-on-dark {
  box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center;
  border: 0; cursor: pointer; text-decoration: none;
  height: 40px; padding: 0 16px; border-radius: 0px;
  background: var(--color-night); color: var(--color-on-night);
  box-shadow: inset 0 0 0 2px var(--color-on-night);
  font: 600 16px/1 var(--font-body);
}
.button-on-dark:hover { background-color: #FFFFFF; color: #000000; } /* observed */
.pause-button {
  box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center;
  border: 0; cursor: pointer; text-decoration: none;
  height: 32px; padding: 0 8px; border-radius: 0px;
  background: var(--color-night); color: var(--color-on-night);
  box-shadow: inset 0 0 0 1px #414141;
  font: 600 12px/1 var(--font-body);
}
.pause-button:hover { background-color: #FFFFFF; color: #000000; } /* observed */