/* Figma brand tokens, from unfairly.ai/brand-guidelines/figma (checked 2026-10-29).
   Sizes, spacing and components were measured on https://www.figma.com/ (computed styles, bounding boxes and hover/focus states at 1440 and 390 in headless Chromium with a desktop Chrome user agent, 2026-10-29; each section scrolled into the viewport and held 2.5s before measuring (lazy Vimeo media).).
   Fonts: --font-* use the open stand-ins (load them from Google Fonts); --font-*-original name Figma's own faces, which you may only use if you have a licence. */
:root {
  --color-paper: #FFFFFF;
  --color-surface: #F5F5F5;
  --color-ink: #000000;
  --color-ink-muted: #757575;
  --color-accent: #000000;
  --color-on-accent: #FFFFFF;
  --color-accent-secondary: #874FFF;
  --color-night: #000000;
  --color-on-night: #FFFFFF;
  --color-figma-red: #FF3737;
  --color-figma-purple: #874FFF;
  --color-figma-green: #24CB71;
  --color-figma-orange: #FF7237;
  --color-figma-blue: #00B6FF;
  --color-ink: #000000;
  --color-paper: #FFFFFF;
  --color-muted: #757575;
  --color-hairline: #D6D6D6;
  --color-hover-ring: #999999;
  --color-hover-fill: #262626;
  --color-wash-4: #F5F5F5;
  --color-wash-8: #EBEBEB;
  --color-footer-social: #3D3D3D;
  --color-footer-badge: #292929;
  --color-make-video-ground: #CAFFF9;
  --color-canvas-video-ground: #D0D0D0;
  --color-workspace-video-ground: #F3FFE3;
  --color-nav-cta-fill: #000000;
  --color-nav-cta-text: #FFFFFF;
  --color-nav-secondary-text: #000000;
  --color-nav-link-text: #000000;
  --color-hero-button-fill: #000000;
  --color-hero-button-text: #FFFFFF;
  --color-outro-bar-fill: #000000;
  --color-outro-bar-text: #FFFFFF;
  --color-text-link-text: #000000;
  --color-media-pause-fill: #000000;
  --color-media-pause-text: #FFFFFF;
  --color-carousel-button-text: #000000;
  --color-marquee-pause-fill: #F5F5F5;
  --color-marquee-pause-text: #000000;
  --color-footer-social-fill: #3D3D3D;
  --color-footer-social-text: #FFFFFF;
  --color-footer-badge-fill: #292929;
  --color-footer-badge-text: #FFFFFF;
  --color-footer-link-text: #FFFFFF;
  --color-feature-item-text: #000000;
  --color-quote-text: #000000;
  --color-stat-text: #000000;
  --color-template-card-text: #000000;
  --font-display: Inter, "SF Pro Display", system-ui, helvetica, sans-serif;
  --font-display-original: "Figma Sans", Inter, "SF Pro Display", system-ui, helvetica, sans-serif;
  --font-body: Inter, system-ui, helvetica, sans-serif;
  --font-body-original: "Figma Sans", Inter, system-ui, helvetica, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;
  --font-mono-original: "Figma Mono", "IBM Plex Mono", ui-monospace, Menlo, monospace;
  --page-margin: 40px;
  --section-padding: 80px;
  --container-max: 1360px;
  --nav-height: 78px;
  --grid-gutter: 16px;
  --grid-columns: 12;
  --text-hero-headline-h1-size: 56px;
  --text-hero-headline-h1-line: 1;
  --text-hero-headline-h1-weight: 350;
  --text-hero-headline-h1-tracking: -1.7px;
  --text-stat-numeral-size: 88px;
  --text-stat-numeral-line: 1;
  --text-stat-numeral-weight: 350;
  --text-stat-numeral-tracking: -2.7px;
  --text-outro-bar-label-size: 56px;
  --text-outro-bar-label-line: 1;
  --text-outro-bar-label-weight: 350;
  --text-outro-bar-label-tracking: -1.7px;
  --text-section-headline-large-h2-size: 44px;
  --text-section-headline-large-h2-line: 1.1;
  --text-section-headline-large-h2-weight: 340;
  --text-section-headline-large-h2-tracking: -0.66px;
  --text-section-headline-h2-two-tone-size: 30px;
  --text-section-headline-h2-two-tone-line: 1.2;
  --text-section-headline-h2-two-tone-weight: 330;
  --text-section-headline-h2-two-tone-tracking: -0.45px;
  --text-hero-button-label-size: 30px;
  --text-hero-button-label-line: 1.2;
  --text-hero-button-label-weight: 330;
  --text-hero-button-label-tracking: -0.45px;
  --text-dropdown-big-link-size: 24px;
  --text-dropdown-big-link-line: 1.3;
  --text-dropdown-big-link-weight: 320;
  --text-dropdown-big-link-tracking: -0.3px;
  --text-body-feature-title-link-size: 16px;
  --text-body-feature-title-link-line: 1.4;
  --text-body-feature-title-link-weight: 300;
  --text-body-feature-title-link-tracking: -0.12px;
  --text-small-size: 14px;
  --text-small-line: 1.45;
  --text-small-weight: 300;
  --text-footer-link-size: 16px;
  --text-footer-link-line: 1.45;
  --text-footer-link-weight: 300;
  --text-footer-link-tracking: -0.5px;
  --text-mono-label-size: 16px;
  --text-mono-label-line: 1.3;
  --text-mono-label-weight: 400;
  --text-mono-label-tracking: 0.48px;
  --text-badge-size: 12px;
  --text-badge-line: 1;
  --text-badge-weight: 400;
  --text-badge-tracking: 0.6px;
  --radius-nav-cta: 8px;
  --radius-nav-secondary: 8px;
  --radius-nav-link: 0px;
  --radius-hero-button: 16px;
  --radius-outro-bar: 24px;
  --radius-text-link: 2px;
  --radius-media-pause: 999px;
  --radius-carousel-button: 999px;
  --radius-marquee-pause: 999px;
  --radius-footer-social: 999px;
  --radius-footer-badge: 4px;
  --radius-footer-link: 0px;
  --radius-feature-item: 0px;
  --radius-quote: 0px;
  --radius-stat: 0px;
  --radius-template-card: 0px;
  --ease-button-hover: ease-out;
  --duration-button-hover: 180ms;
  --ease-link-arrow-nudge: ease-out;
  --duration-link-arrow-nudge: 180ms;
}
/* Phone values measured at 390px; Figma's CSS switches at 559px. */
@media (max-width: 559px) {
  :root {
    --page-margin: 16px;
    --section-padding: 40px;
    --text-hero-headline-h1-size: 36px;
    --text-stat-numeral-size: 72px;
    --text-outro-bar-label-size: 36px;
    --text-section-headline-large-h2-size: 32px;
    --text-section-headline-h2-two-tone-size: 24px;
    --text-hero-button-label-size: 24px;
    --text-footer-link-size: 22px;
  }
}
.hero-button {
  box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center;
  border: 0; cursor: pointer; text-decoration: none;
  height: 84px; padding: 0 32px; border-radius: 16px;
  background: #000000; color: #FFFFFF;
  font: 400 30px/1 var(--font-body);
}
.hero-button:hover { background-color: #262626; } /* observed */
.hero-button:focus-visible { outline: 2px dashed #000000; outline-offset: 4px; } /* observed */
.carousel-button {
  box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center;
  border: 0; cursor: pointer; text-decoration: none;
  height: 36px; padding: 0 8px; border-radius: 999px;
  background: transparent; color: #000000;
  font: 400 16px/1 var(--font-body);
}
.carousel-button:hover { box-shadow: inset 0 0 0 1px #999999; } /* observed */