/* Meta brand tokens, from unfairly.ai/brand-guidelines/meta (checked 2026-10-31).
   Sizes, spacing and components were measured on https://www.meta.com/ (measured with Playwright at 1440x900 and 390x844 from computed styles and bounding boxes, plus rendered font calibration).
   Fonts: --font-* use the open stand-ins (load them from Google Fonts); --font-*-original name Meta's own faces, which you may only use if you have a licence. */
:root {
  --color-paper: #FFFFFF;
  --color-surface: #F1F4F7;
  --color-ink: #0A1317;
  --color-ink-muted: #5D6C7B;
  --color-accent: #0457CB;
  --color-on-accent: #FFFFFF;
  --color-accent-secondary: #0082FB;
  --color-night: #1C2B33;
  --color-on-night: #FFFFFF;
  --color-meta-blue-cta: #0457CB;
  --color-meta-symbol-blue-light-end: #0082FB;
  --color-meta-symbol-blue-deep-end: #0064E0;
  --color-wordmark-ink: #1C2B33;
  --color-text-ink: #0A1317;
  --color-muted-ink: #5D6C7B;
  --color-gray-surface: #F1F4F7;
  --color-locale-ink: #1C1E21;
  --color-social-icon-gray: #465A69;
  --color-placeholder-gray: #647685;
  --color-disabled-ink: #445664;
  --color-footer-hairline: #E1E2E3;
  --color-glass-slate: #2B3D46;
  --color-white: #FFFFFF;
  --color-button-primary-fill: #0457CB;
  --color-button-primary-text: #FFFFFF;
  --color-button-primary-hero-fill: #0457CB;
  --color-button-primary-hero-text: #FFFFFF;
  --color-glass-pill-text: #0A1317;
  --color-button-outline-text: #445664;
  --color-nav-link-text: #FFFFFF;
  --color-category-tile-fill: #F1F4F7;
  --color-feature-card-fill: #FFFFFF;
  --color-email-input-fill: #FFFFFF;
  --font-display: Archivo, "Arial Narrow", Arial, sans-serif;
  --font-display-original: "Optimistic VF", Archivo, "Arial Narrow", Arial, sans-serif;
  --font-body: Figtree, Arial, sans-serif;
  --font-body-original: "Optimistic VF", Figtree, Arial, sans-serif;
  --font-mono: "JetBrains Mono", Menlo, monospace;
  --font-mono-original: "Optimistic Mono VF", "JetBrains Mono", Menlo, monospace;
  --page-margin: 32px;
  --section-padding: 80px;
  --container-max: 1376px;
  --card-gap: 32px;
  --nav-height: 64px;
  --grid-gutter: 32px;
  --grid-columns: 4;
  --text-hero-display-size: 130px;
  --text-hero-display-line: 1;
  --text-hero-display-weight: 700;
  --text-hero-display-tracking: -6.5px;
  --text-hero-display-width: 88;
  --text-card-title-size: 48px;
  --text-card-title-line: 1.1667;
  --text-card-title-weight: 600;
  --text-card-title-tracking: 1.7px;
  --text-store-title-size: 36px;
  --text-store-title-line: 1.278;
  --text-store-title-weight: 600;
  --text-store-title-tracking: 1px;
  --text-feature-title-size: 28px;
  --text-feature-title-line: 1.214;
  --text-feature-title-weight: 400;
  --text-feature-title-tracking: 1px;
  --text-hero-lead-size: 24px;
  --text-hero-lead-line: 1.25;
  --text-hero-lead-weight: 600;
  --text-hero-lead-tracking: 0.85px;
  --text-news-title-size: 24px;
  --text-news-title-line: 1.25;
  --text-news-title-weight: 400;
  --text-news-title-tracking: 0.85px;
  --text-eyebrow-size: 18px;
  --text-eyebrow-line: 1.444;
  --text-eyebrow-weight: 500;
  --text-eyebrow-tracking: 0.6px;
  --text-body-size: 16px;
  --text-body-line: 1.5;
  --text-body-weight: 500;
  --text-body-tracking: 0.3px;
  --text-link-size: 14px;
  --text-link-line: 1.4286;
  --text-link-weight: 500;
  --text-link-tracking: 0.35px;
  --text-button-size: 14px;
  --text-button-line: 1.4286;
  --text-button-weight: 800;
  --text-button-tracking: 0.4px;
  --text-legal-size: 12px;
  --text-legal-line: 1.333;
  --text-legal-weight: 500;
  --text-legal-tracking: 0.35px;
  --radius-button-primary: 999px;
  --radius-button-primary-hero: 999px;
  --radius-glass-pill: 999px;
  --radius-button-outline: 999px;
  --radius-nav-link: 24px;
  --radius-category-tile: 24px;
  --radius-product-card: 24px;
  --radius-feature-card: 24px;
  --radius-email-input: 12px;
  --duration-button-hover: 100ms;
  --icon-nav: 24px;
  --icon-feature: 48px;
  --icon-social: 24px;
}
/* Phone values measured at 390px. Meta's breakpoint wasn't measured: 600px is our default. */
@media (max-width: 600px) {
  :root {
    --page-margin: 16px;
    --section-padding: 48px;
    --text-hero-display-size: 66px;
    --text-card-title-size: 32px;
    --text-store-title-size: 28px;
    --text-feature-title-size: 24px;
    --text-hero-lead-size: 20px;
    --text-news-title-size: 20px;
  }
}
.button-primary {
  box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center;
  border: 0; cursor: pointer; text-decoration: none;
  height: 44px; padding: 0 22px; border-radius: 999px;
  background: #0457CB; color: #FFFFFF;
  font: 800 14px/1 var(--font-body);
}
.button-primary-hero {
  box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center;
  border: 0; cursor: pointer; text-decoration: none;
  height: 52px; padding: 0 30px; border-radius: 999px;
  background: #0457CB; color: #FFFFFF;
  font: 800 14px/1 var(--font-body);
}
.button-outline {
  box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center;
  border: 0; cursor: pointer; text-decoration: none;
  height: 44px; padding: 0 22px; border-radius: 999px;
  background: transparent; color: #445664;
  font: 800 14px/1 var(--font-body);
}