/* Netflix brand tokens, from unfairly.ai/brand-guidelines/netflix (checked 2026-10-29).
   Sizes, spacing and components were measured on https://www.netflix.com/ (computed styles, pseudo-elements and bounding boxes at 390, 768, 1024 and 1440px wide on 2026-10-29 (signed-out US page, Chromium); hover and focus states by hovering in Playwright).
   Fonts: --font-* use the open stand-ins (load them from Google Fonts); --font-*-original name Netflix's own faces, which you may only use if you have a licence. */
:root {
  --color-paper: #000000;
  --color-surface: #2D2D2D;
  --color-ink: #FFFFFF;
  --color-ink-muted: #B3B3B3;
  --color-accent: #E50914;
  --color-on-accent: #FFFFFF;
  --color-accent-secondary: #B20710;
  --color-night: #000000;
  --color-on-night: #FFFFFF;
  --color-netflix-red: #E50914;
  --color-symbol-dark-red: #B20710;
  --color-red-hover: #C11119;
  --color-black: #000000;
  --color-poster-well: #232323;
  --color-arrow-tab: #1A1A1A;
  --color-faq-grey: #2D2D2D;
  --color-rank-fill: #414141;
  --color-muted-text: #B3B3B3;
  --color-legal-text: #808080;
  --color-field-fill: #161616;
  --color-promo-from: #261733;
  --color-promo-to: #151A3F;
  --color-promo-edge-from: #482566;
  --color-promo-edge-to: #161D52;
  --color-card-from: #192247;
  --color-card-to: #210E17;
  --color-arc-edge: #210D16;
  --color-arc-magenta: #B82869;
  --color-arc-glow-blue: #4061E7;
  --color-specimen-black: #101010;
  --color-button-primary-fill: #E50914;
  --color-button-primary-text: #FFFFFF;
  --color-button-small-fill: #E50914;
  --color-button-small-text: #FFFFFF;
  --color-button-secondary-text: #FFFFFF;
  --color-title-card-fill: #232323;
  --color-rank-numeral-fill: #414141;
  --color-carousel-arrow-fill: #232323;
  --font-display: Geist, "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-display-original: "Netflix Sans", Geist, "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-body: Geist, "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-body-original: "Netflix Sans", Geist, "Helvetica Neue", Helvetica, Arial, sans-serif;
  --page-margin: 148px;
  --section-padding: 64px;
  --container-max: 1144px;
  --hero-text-max: 588px;
  --card-gap: 16px;
  --nav-height: 88px;
  --grid-gutter: 32px;
  --grid-columns: 4;
  --text-hero-headline-size: 56px;
  --text-hero-headline-line: 1.25;
  --text-hero-headline-weight: 700;
  --text-hero-headline-tracking: -0.56px;
  --text-hero-subline-size: 20px;
  --text-hero-subline-line: 1.25;
  --text-hero-subline-weight: 560;
  --text-form-prompt-size: 16px;
  --text-form-prompt-line: 1.5;
  --text-form-prompt-weight: 400;
  --text-section-headline-size: 24px;
  --text-section-headline-line: 1.25;
  --text-section-headline-weight: 560;
  --text-promo-title-size: 20px;
  --text-promo-title-line: 1.25;
  --text-promo-title-weight: 560;
  --text-card-title-size: 24px;
  --text-card-title-line: 1.25;
  --text-card-title-weight: 560;
  --text-card-body-size: 16px;
  --text-card-body-line: 1.25;
  --text-card-body-weight: 400;
  --text-faq-question-size: 24px;
  --text-faq-question-line: 1.25;
  --text-faq-question-weight: 400;
  --text-faq-answer-size: 24px;
  --text-faq-answer-line: 1.25;
  --text-faq-answer-weight: 400;
  --text-rank-numeral-size: 100px;
  --text-rank-numeral-line: 1;
  --text-rank-numeral-weight: 700;
  --text-button-large-size: 24px;
  --text-button-large-line: 1;
  --text-button-large-weight: 560;
  --text-button-small-size: 14px;
  --text-button-small-line: 1;
  --text-button-small-weight: 560;
  --text-button-medium-size: 16px;
  --text-button-medium-line: 1;
  --text-button-medium-weight: 560;
  --text-footer-phone-line-size: 16px;
  --text-footer-phone-line-line: 1.25;
  --text-footer-phone-line-weight: 400;
  --text-footer-link-size: 14px;
  --text-footer-link-line: 1.5;
  --text-footer-link-weight: 400;
  --text-legal-note-size: 13px;
  --text-legal-note-line: 1.5;
  --text-legal-note-weight: 400;
  --radius-button-primary: 4px;
  --radius-button-small: 4px;
  --radius-button-secondary: 4px;
  --radius-email-field: 4px;
  --radius-language-select: 4px;
  --radius-title-card: 8px;
  --radius-reason-card: 16px;
  --radius-promo-banner: 16px;
  --radius-footer-link: 2px;
  --radius-carousel-arrow: 8px;
  --ease-button-hover-in: cubic-bezier(0.32, 0.94, 0.6, 1);
  --duration-button-hover-in: 250ms;
  --ease-button-hover-out: cubic-bezier(0.4, 0, 0.68, 0.06);
  --duration-button-hover-out: 250ms;
  --ease-poster-lift: ease-in-out;
  --duration-poster-lift: 200ms;
}
/* Phone values measured at 390px; Netflix's CSS switches at 599px. */
@media (max-width: 599px) {
  :root {
    --page-margin: 24px;
    --section-padding: 48px;
    --text-hero-headline-size: 32px;
    --text-hero-subline-size: 16px;
    --text-section-headline-size: 18px;
    --text-card-title-size: 20px;
    --text-faq-question-size: 18px;
    --text-faq-answer-size: 18px;
    --text-rank-numeral-size: 64px;
    --text-button-large-size: 18px;
  }
}
.button-primary {
  box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center;
  border: 0; cursor: pointer; text-decoration: none;
  height: 56px; padding: 0 24px; border-radius: 4px;
  background: #E50914; color: #FFFFFF;
  font: 560 24px/1 var(--font-body);
}
.button-primary:hover { background-color: #C11119; } /* observed */
.button-primary:focus-visible { background-color: #C11119; outline: 2px solid #FFFFFF; } /* observed */
.button-small {
  box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center;
  border: 0; cursor: pointer; text-decoration: none;
  height: 32px; padding: 0 16px; border-radius: 4px;
  background: #E50914; color: #FFFFFF;
  font: 560 14px/1 var(--font-body);
}
.button-small:hover { background-color: #C11119; } /* observed */