@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500&family=Pixelify+Sans:wght@500;600;700&family=Instrument+Serif:ital@0;1&display=swap');

:root {

  --color-primary:           #cb4a1b;
  --color-primary-hover:     #e0561f;
  --color-primary-focus:     #f9682b;
  --color-brand-secure:      #7a7fad;
  --color-on-primary:        #ffffff;

  --color-canvas:            #010102;
  --color-surface-1:         #0c0d0f;
  --color-surface-2:         #131418;
  --color-surface-3:         #1a1c20;
  --color-surface-4:         #21242a;

  --color-hairline:          #23252a;
  --color-hairline-strong:   #2e3036;
  --color-hairline-tertiary: #3a3d44;

  --color-inverse-canvas:    #ffffff;
  --color-inverse-surface-1: #f4f5f8;
  --color-inverse-surface-2: #e9eaef;
  --color-inverse-ink:       #08090a;

  --color-ink:               #f7f8f8;
  --color-ink-muted:         #d0d6e0;
  --color-ink-subtle:        #8a8f98;
  --color-ink-tertiary:      #62666d;

  --color-semantic-success:  #27a644;
  --color-semantic-overlay:  rgba(0,0,0,0.7);

  --font-display: 'Inter', 'SF Pro Display', -apple-system, system-ui, 'Segoe UI', Roboto, sans-serif;
  --font-text:    'Inter', 'SF Pro Display', -apple-system, system-ui, 'Segoe UI', Roboto, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --font-serif:   'Instrument Serif', 'Georgia', serif;
  --font-accent:  'Pixelify Sans', ui-monospace, monospace;

  --type-display-xl-size:    80px;  --type-display-xl-weight:   600; --type-display-xl-lh:   1.05; --type-display-xl-track: -3.0px;
  --type-display-lg-size:    56px;  --type-display-lg-weight:   600; --type-display-lg-lh:   1.10; --type-display-lg-track: -1.8px;
  --type-display-md-size:    40px;  --type-display-md-weight:   600; --type-display-md-lh:   1.15; --type-display-md-track: -1.0px;
  --type-headline-size:      28px;  --type-headline-weight:     600; --type-headline-lh:     1.20; --type-headline-track:   -0.6px;
  --type-card-title-size:    22px;  --type-card-title-weight:   500; --type-card-title-lh:   1.25; --type-card-title-track: -0.4px;
  --type-subhead-size:       20px;  --type-subhead-weight:      400; --type-subhead-lh:      1.40; --type-subhead-track:    -0.2px;
  --type-body-lg-size:       18px;  --type-body-lg-weight:      400; --type-body-lg-lh:      1.50; --type-body-lg-track:    -0.1px;
  --type-body-size:          16px;  --type-body-weight:         400; --type-body-lh:         1.50; --type-body-track:       -0.05px;
  --type-body-sm-size:       14px;  --type-body-sm-weight:      400; --type-body-sm-lh:      1.50; --type-body-sm-track:    0;
  --type-caption-size:       12px;  --type-caption-weight:      400; --type-caption-lh:      1.40; --type-caption-track:    0;
  --type-button-size:        14px;  --type-button-weight:       500; --type-button-lh:       1.20; --type-button-track:     0;
  --type-eyebrow-size:       13px;  --type-eyebrow-weight:      500; --type-eyebrow-lh:      1.30; --type-eyebrow-track:    0.4px;
  --type-mono-size:          13px;  --type-mono-weight:         400; --type-mono-lh:         1.50; --type-mono-track:       0;

  --space-xxs: 4px;
  --space-xs:  8px;
  --space-sm:  12px;
  --space-md:  16px;
  --space-lg:  24px;
  --space-xl:  32px;
  --space-xxl: 48px;
  --space-section: 96px;

  --radius-xs:   4px;
  --radius-sm:   6px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   16px;
  --radius-xxl:  24px;
  --radius-pill: 9999px;
  --radius-full: 9999px;

  --elev-1-bg: var(--color-surface-1); --elev-1-border: 1px solid var(--color-hairline);
  --elev-2-bg: var(--color-surface-2); --elev-2-border: 1px solid var(--color-hairline-strong);
  --elev-3-bg: var(--color-surface-3); --elev-3-border: 1px solid var(--color-hairline-tertiary);
  --focus-ring: 2px solid rgba(94, 105, 209, 0.5);

  --edge-highlight-top: inset 0 1px 0 0 rgba(255,255,255,0.04);

  --content-max: 1280px;
}

.ph-root {
  background: var(--color-canvas);
  color: var(--color-ink);
  font-family: var(--font-text);
  font-size: var(--type-body-size);
  line-height: var(--type-body-lh);
  letter-spacing: var(--type-body-track);
  font-weight: var(--type-body-weight);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.ph-display-xl, .ph-root h1.display {
  font-family: var(--font-display);
  font-size: var(--type-display-xl-size);
  font-weight: var(--type-display-xl-weight);
  line-height: var(--type-display-xl-lh);
  letter-spacing: var(--type-display-xl-track);
}
.ph-display-lg, .ph-root h1 {
  font-family: var(--font-display);
  font-size: var(--type-display-lg-size);
  font-weight: var(--type-display-lg-weight);
  line-height: var(--type-display-lg-lh);
  letter-spacing: var(--type-display-lg-track);
}
.ph-display-md, .ph-root h2 {
  font-family: var(--font-display);
  font-size: var(--type-display-md-size);
  font-weight: var(--type-display-md-weight);
  line-height: var(--type-display-md-lh);
  letter-spacing: var(--type-display-md-track);
}
.ph-headline, .ph-root h3 {
  font-family: var(--font-display);
  font-size: var(--type-headline-size);
  font-weight: var(--type-headline-weight);
  line-height: var(--type-headline-lh);
  letter-spacing: var(--type-headline-track);
}
.ph-card-title, .ph-root h4 {
  font-family: var(--font-display);
  font-size: var(--type-card-title-size);
  font-weight: var(--type-card-title-weight);
  line-height: var(--type-card-title-lh);
  letter-spacing: var(--type-card-title-track);
}
.ph-subhead {
  font-size: var(--type-subhead-size);
  font-weight: var(--type-subhead-weight);
  line-height: var(--type-subhead-lh);
  letter-spacing: var(--type-subhead-track);
}
.ph-body-lg, .ph-root p.lead {
  font-size: var(--type-body-lg-size);
  font-weight: var(--type-body-lg-weight);
  line-height: var(--type-body-lg-lh);
  letter-spacing: var(--type-body-lg-track);
  color: var(--color-ink-muted);
}
.ph-body, .ph-root p {
  font-size: var(--type-body-size);
  line-height: var(--type-body-lh);
  letter-spacing: var(--type-body-track);
  color: var(--color-ink-muted);
}
.ph-body-sm, .ph-root small {
  font-size: var(--type-body-sm-size);
  line-height: var(--type-body-sm-lh);
  color: var(--color-ink-subtle);
}
.ph-caption {
  font-size: var(--type-caption-size);
  line-height: var(--type-caption-lh);
  color: var(--color-ink-subtle);
}
.ph-eyebrow {
  font-size: var(--type-eyebrow-size);
  font-weight: var(--type-eyebrow-weight);
  line-height: var(--type-eyebrow-lh);
  letter-spacing: var(--type-eyebrow-track);
  text-transform: none;
  color: var(--color-ink-subtle);
}
.ph-mono, .ph-root code {
  font-family: var(--font-mono);
  font-size: var(--type-mono-size);
  line-height: var(--type-mono-lh);
}
.ph-root a {
  color: var(--color-primary);
  text-decoration: none;
}
.ph-root a:hover { color: var(--color-primary-hover); }
.ph-root a:focus-visible { outline: var(--focus-ring); outline-offset: 2px; border-radius: 2px; }