/* PostHog brand tokens, from unfairly.ai/brand-guidelines/posthog (checked 2026-10-30).
   Sizes, spacing and components were measured on https://posthog.com/handbook/brand/overview (PostHog's public handbook brand pages (read from their Markdown source in PostHog/posthog.com, branch master, contents/handbook) and embedded images, plus brand.posthog.com and the PostHog/brand package (logos, colors, RoundHog), and posthog.com's tailwind.config.js, Fonts.css, global.css and CallToAction for code tokens; fetched 2026-10-30).
   Fonts: --font-* use the open stand-ins (load them from Google Fonts); --font-*-original name PostHog's own faces, which you may only use if you have a licence. */
:root {
  --color-paper: #EEEFE9;
  --color-surface: #E5E7E0;
  --color-ink: #151515;
  --color-ink-muted: #65675E;
  --color-accent: #F54E00;
  --color-on-accent: #FFFFFF;
  --color-accent-secondary: #1D4AFF;
  --color-highlight: #DC9300;
  --color-border: #D0D1C9;
  --color-night: #151515;
  --color-on-night: #EEEFE9;
  --color-accent-on-night: #F54E00;
  --color-background-light: #EEEFE9;
  --color-text-light: #151515;
  --color-accent-light: #E5E7E0;
  --color-accent-dark: #2C2C2C;
  --color-dashed-divider-light: #D0D1C9;
  --color-dashed-divider-dark: #4B4B4B;
  --color-red: #F54E00;
  --color-yellow-light: #DC9300;
  --color-yellow-dark: #F1A82C;
  --color-blue: #1D4AFF;
  --color-gray: #BFBFBC;
  --color-blue-brand-package: #1490E8;
  --color-cobalt-brand-package: #0457FF;
  --color-coral-brand-package: #FF474D;
  --color-corn-blue-brand-package: #2BB3DF;
  --color-green-brand-package: #47C861;
  --color-lemon-brand-package: #FFCE1C;
  --color-lime-brand-package: #A0CA21;
  --color-purple-brand-package: #A737D2;
  --color-tangerine-brand-package: #FF5C1C;
  --color-teal-brand-package: #43DAB3;
  --color-violet-brand-package: #6D4FFF;
  --color-yellow-brand-package: #FFA81C;
  --color-logo-print-blue: #0054FF;
  --color-logo-print-orange: #FF5506;
  --color-logo-print-yellow: #FFB70F;
  --color-wordmark-ink: #111111;
  --color-window-white: #FDFDF8;
  --color-text-secondary: #65675E;
  --color-text-muted: #9EA096;
  --color-ink-deep: #23251D;
  --color-button-orange: #EB9D2A;
  --color-button-shadow: #CD8407;
  --color-button-border: #B17816;
  --color-site-yellow: #F7A501;
  --color-window-top-shade: #C6CCBA;
  --color-window-top-shade-2: #CDD4C1;
  --color-menu-bar: #CBD5B9;
  --color-window-ground: #D3DAC6;
  --color-window-ground-rendered: #D1D7C4;
  --color-os-muted: #73756B;
  --color-wallpaper-base-top: #FDEECD;
  --color-wallpaper-base-bottom: #FFFEF4;
  --color-wallpaper-sample: #95AC70;
  --color-wallpaper-sample-dark: #80995B;
  --color-border: #BFC1B7;
  --color-border-soft: #D2D3CC;
  --color-heading: #111827;
  --color-body: #374151;
  --color-blue: #2F80FA;
  --color-blue-chip-rendered: #C2D1CB;
  --color-purple: #B62AD9;
  --color-highlight-rendered: #DDCC90;
  --color-highlight-rendered-on-card: #FBE8BD;
  --color-input-focus: #F6A503;
  --color-green: #6AA84F;
  --color-demo-frame: #F3F4EE;
  --color-toast-shadow: #0E1216;
  --color-icon-green: #36C46F;
  --color-icon-teal: #30ABC6;
  --color-icon-coral: #F35454;
  --color-icon-cyan: #2EA2D3;
  --color-icon-mint: #29DBBB;
  --color-white: #FFFFFF;
  --color-black: #000000;
  --color-button-3d-primary-fill: #EB9D2A;
  --color-button-3d-primary-text: #000000;
  --color-button-3d-secondary-fill: #FFFFFF;
  --color-button-3d-secondary-text: #111111;
  --color-button-3d-small-fill: #EB9D2A;
  --color-button-3d-small-text: #000000;
  --color-menu-item-text: #23251D;
  --color-window-fill: #D3DAC6;
  --color-setup-card-fill: #FDFDF8;
  --color-highlight-chip-fill: #2F80FA at 10% opacity;
  --color-highlight-chip-text: #2F80FA;
  --color-pill-chip-fill: #FDFDF8;
  --color-toast-fill: #FFFFFF;
  --color-text-link-text: #111827;
  --font-display: Figtree, "Avenir Next", Avenir, "Segoe UI", Helvetica, Arial, sans-serif;
  --font-display-original: RoundHog, Figtree, "Avenir Next", Avenir, "Segoe UI", Helvetica, Arial, sans-serif;
  --font-body: Figtree, "Avenir Next", Avenir, "Segoe UI", Helvetica, Arial, sans-serif;
  --font-body-original: RoundHog, Figtree, "Avenir Next", Avenir, "Segoe UI", Helvetica, Arial, sans-serif;
  --font-mono: "Source Code Pro", Menlo, Consolas, Monaco, monospace;
  --page-margin: 8px;
  --container-max: 979px;
  --hero-text-max: 474px;
  --grid-gutter: 32px;
  --grid-columns: 2;
  --text-display-l-size: 36px;
  --text-display-l-line: 40px (phone 36px);
  --text-display-l-weight: 800;
  --text-display-l-tracking: -0.9px;
  --text-h2-size: 30px;
  --text-h2-line: 40px;
  --text-h2-weight: 700;
  --text-h2-tracking: -0.75px;
  --text-h2-panel-size: 24px;
  --text-h2-panel-line: 32px;
  --text-h2-panel-weight: 700;
  --text-h2-panel-tracking: -0.6px;
  --text-lead-size: 17px;
  --text-lead-line: 25.5px;
  --text-lead-weight: 500;
  --text-body-size: 18px;
  --text-body-line: 27px;
  --text-body-weight: 500;
  --text-body-muted-size: 18px;
  --text-body-muted-line: 27px;
  --text-body-muted-weight: 500;
  --text-title-s-size: 18px;
  --text-title-s-line: 28px;
  --text-title-s-weight: 700;
  --text-ui-14-size: 14px;
  --text-ui-14-line: 20px;
  --text-ui-14-weight: 500;
  --text-toast-title-size: 15px;
  --text-toast-title-line: 18.75px;
  --text-toast-title-weight: 600;
  --text-toast-body-size: 14px;
  --text-toast-body-line: 20px;
  --text-toast-body-weight: 400;
  --text-os-13-size: 13px;
  --text-os-13-line: 13px menu / 16.25px icon labels;
  --text-os-13-weight: 500;
  --text-button-size: 15px;
  --text-button-line: 26.67px (small 13px/19.5px);
  --text-button-weight: 700;
  --text-link-12-size: 12px;
  --text-link-12-line: 16px;
  --text-link-12-weight: 600;
  --radius-button-3d-primary: 8px;
  --radius-button-3d-secondary: 8px;
  --radius-button-3d-small: 6px;
  --radius-menu-item: 4px;
  --radius-icon-button-ghost: 4px;
  --radius-window: 20px;
  --radius-setup-card: 6px;
  --radius-highlight-chip: 6px;
  --radius-pill-chip: 5.65px;
  --radius-toast: 6px;
  --radius-data-table: 6px;
  --ease-hover-enter: none (instant);
  --ease-animate-in: ease-out to a still final frame;
}
/* Phone values measured at 390px. PostHog's breakpoint wasn't measured: 600px is our default. */
@media (max-width: 600px) {
  :root {
    --page-margin: 0px;
    --text-display-l-size: 30px;
  }
}
.button-3d-primary {
  box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center;
  border: 0; cursor: pointer; text-decoration: none;
  height: 47px; padding: 0 20px; border-radius: 8px;
  background: #EB9D2A; color: #000000;
  font: 700 15px/1 var(--font-body);
}
.button-3d-primary:hover { transform: translateY(-6px); } /* observed */
.button-3d-primary:active { transform: translateY(-2px); } /* observed */
.button-3d-secondary {
  box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center;
  border: 0; cursor: pointer; text-decoration: none;
  height: 47px; padding: 0 20px; border-radius: 8px;
  background: #FFFFFF; color: #111111;
  font: 700 15px/1 var(--font-body);
}
.button-3d-secondary:hover { transform: translateY(-6px); } /* observed */
.button-3d-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 10px; border-radius: 6px;
  background: #EB9D2A; color: #000000;
  font: 700 13px/1 var(--font-body);
}