/* Get Thrivin · website design system · tokens.css
   Generated from Figma file 3EQ3sPyrH2vQA7jc0Q8Tyu (variables and effect styles), updated 5 Nov 2026. Do not hand-edit values: change them in Figma and regenerate.
   Grounds: :root is On light. Add .th-on-dark (or data-ground="dark") to any section to switch it to On dark.
   Breakpoints: Desktop ≥1280 (default), Laptop 1024–1279, Tablet 600–1023, Phone <600. */

/* Primitives and scale */
:root {
  --th-neutral-0: #ffffff;
  --th-neutral-25: #f7f7f5;
  --th-neutral-50: #f1f1ef;
  --th-neutral-100: #e5e5e3;
  --th-neutral-150: #e6e6e1;
  --th-neutral-200: #d8d8d3;
  --th-neutral-300: #b3b4b2;
  --th-neutral-400: #8e8f91;
  --th-neutral-600: #6b6c6e;
  --th-neutral-950: #191a1c;
  --th-neutral-flag: #fcfcfa;
  --th-ground-700: #262a29;
  --th-ground-800: #191c1b;
  --th-ground-900: #101113;
  --th-ground-alpha-92: rgb(38 42 41 / 92%);
  --th-ink-alpha-75: rgb(25 26 28 / 75%);
  --th-ink-alpha-65: rgb(25 26 28 / 65%);
  --th-ink-alpha-40: rgb(25 26 28 / 40%);
  --th-ink-alpha-25: rgb(25 26 28 / 25%);
  --th-ink-alpha-8: rgb(25 26 28 / 8%);
  --th-paper-alpha-80: rgb(247 247 245 / 80%);
  --th-paper-alpha-64: rgb(247 247 245 / 64%);
  --th-paper-alpha-52: rgb(247 247 245 / 52%);
  --th-paper-alpha-40: rgb(247 247 245 / 40%);
  --th-paper-alpha-20: rgb(247 247 245 / 20%);
  --th-paper-alpha-12: rgb(247 247 245 / 12%);
  --th-paper-alpha-8: rgb(247 247 245 / 8%);
  --th-paper-alpha-5: rgb(247 247 245 / 5%);
  --th-accent-300: #e3763a;
  --th-accent-500: #bc5717;
  --th-accent-600: #a14a14;
  --th-accent-700: #8f4211;
  --th-accent-alpha-8: rgb(188 87 23 / 8%);
  --th-accent-alpha-16: rgb(227 118 58 / 16%);
  --th-accent-alpha-24: rgb(188 87 23 / 24%);
  --th-green-400: #7fc95f;
  --th-green-500: #5fa544;
  --th-green-700: #387919;
  --th-green-alpha-12: rgb(95 165 68 / 12%);
  --th-blue-400: #4fa3c9;
  --th-blue-500: #1b7fa8;
  --th-blue-700: #1c7297;
  --th-blue-alpha-12: rgb(27 127 168 / 12%);
  --th-orange-400: #e0703f;
  --th-orange-500: #cf5f33;
  --th-orange-700: #b34616;
  --th-orange-alpha-12: rgb(207 95 51 / 12%);
  --th-red-400: #e07a6b;
  --th-red-500: #ba4233;
  --th-red-700: #b73f30;
  --th-amber-500: #c49231;
  --th-amber-700: #8c661a;
  --th-olive-500: #729838;
  --th-olive-700: #587b1c;
  --th-emerald-500: #278a47;
  --th-emerald-700: #208241;
  --th-shadow-alpha-18: rgb(13 10 8 / 18%);
  --th-shadow-alpha-20: rgb(13 10 8 / 20%);
  --th-shadow-alpha-34: rgb(13 10 8 / 34%);
  --th-shadow-alpha-40: rgb(13 10 8 / 40%);
  --th-space-0: 0px;
  --th-space-2: 2px;
  --th-space-4: 4px;
  --th-space-8: 8px;
  --th-space-12: 12px;
  --th-space-16: 16px;
  --th-space-20: 20px;
  --th-space-24: 24px;
  --th-space-28: 28px;
  --th-space-32: 32px;
  --th-space-40: 40px;
  --th-space-48: 48px;
  --th-space-56: 56px;
  --th-space-64: 64px;
  --th-space-72: 72px;
  --th-space-80: 80px;
  --th-space-88: 88px;
  --th-space-96: 96px;
  --th-space-112: 112px;
  --th-space-128: 128px;
  --th-space-144: 144px;
  --th-radius-none: 0px;
  --th-radius-xs: 2px;
  --th-radius-sm: 4px;
  --th-radius-md: 8px;
  --th-radius-lg: 12px;
  --th-radius-pill: 999px;
  --th-stroke-hairline: 1px;
  --th-stroke-icon: 1.5px;
  --th-stroke-emphasis: 2px;
  --th-size-icon-sm: 18px;
  --th-size-icon-md: 22px;
  --th-size-tile-sm: 40px;
  --th-size-tile-md: 44px;
  --th-size-dot: 6px;
  --th-size-control: 48px;
  --th-size-control-sm: 40px;
  --th-size-touch-min: 44px;
  --th-opacity-disabled: 0.35;
  /* Motion. Durations follow the common industry steps (Carbon 70–700, Material 50–1000):
     short for feedback, medium for state, long only for reveals and the hero. */
  --th-motion-duration-instant: 80ms;    /* press and tap feedback */
  --th-motion-duration-fast: 150ms;      /* hover, focus, colour; the reduced-motion crossfade */
  --th-motion-duration-base: 250ms;      /* menus, toggles, small moves */
  --th-motion-duration-slow: 400ms;      /* sheets, dialogs, accordions */
  --th-motion-duration-reveal: 700ms;    /* scroll reveal, hero load */
  --th-motion-duration-long: 1200ms;     /* large fades, count-ups, bar fills */
  --th-motion-duration-ambient: 1800ms;  /* hero photo settle only */
  --th-motion-ease-out: cubic-bezier(.16,1,.3,1);        /* arriving */
  --th-motion-ease-standard: cubic-bezier(.4,0,.2,1);    /* state changes, moving within the screen */
  --th-motion-ease-in: cubic-bezier(.4,0,1,1);           /* leaving: menu and sheet close */
  --th-motion-ease-spring: cubic-bezier(.34,1.56,.64,1); /* dots and badges popping in; never layout or text */
  --th-motion-ease-linear: linear;                       /* loops: marquee, spinner, progress */
  --th-motion-stagger-tight: 40ms;       /* between words or lines in one block */
  --th-motion-stagger-loose: 90ms;       /* between items: bars, cards, rows */
  --th-motion-distance-reveal: 18px;     /* scroll reveal: each section line rises this far */
  --th-motion-stagger-reveal: 70ms;      /* scroll reveal: between section lines */
  --th-motion-stagger-grid: 55ms;        /* scroll reveal: between grid or list items (after 60ms) */
  --th-motion-duration-reveal-rise: 800ms; /* scroll reveal: rise of a section line (fade is duration-reveal) */
  --th-motion-duration-reveal-grid: 550ms; /* scroll reveal: fade and rise of a grid item */
  --th-motion-distance-rise: 14px;       /* rise while fading in */
  --th-motion-scale-settle: 1.04;        /* photo starts at 104% and settles to 100% */
  --th-motion-distance-lift: 4px;        /* card hover: rises this far */
  --th-motion-distance-nudge: 4px;       /* arrows in buttons and links move this far on hover */
  --th-motion-scale-press: 0.98;         /* buttons on press */
  --th-elevation-0-raised: 0px 4px 16px -8px rgb(13 10 8 / 18%);   /* featured card at rest: Comparison Next, Thrivin column, featured Pricing card */
  --th-elevation-hover: 0px 2px 6px -2px rgb(13 10 8 / 18%), 0px 16px 32px -16px rgb(13 10 8 / 20%);   /* any card on hover, with the 4px lift */
  --th-elevation-1-menu: 0px 8px 24px -8px rgb(13 10 8 / 18%);
  --th-elevation-2-lifted: 0px 2px 8px 0px rgb(13 10 8 / 20%), 0px 26px 80px -22px rgb(13 10 8 / 34%);
  --th-elevation-3-sheet: 0px 24px 64px -16px rgb(13 10 8 / 40%);
  --th-elevation-flag: 0px 10px 26px -8px rgb(13 10 8 / 40%);
  --th-glow-button-hover: 0px 4px 16px -4px rgb(188 87 23 / 24%);   /* primary button hover, under the darker fill */
  --th-glow-card-hover: 0px 4px 16px -8px rgb(13 10 8 / 18%), 0px 12px 32px -12px rgb(188 87 23 / 24%);   /* featured card hover; the card does not move */
  --th-blur-nav-glass: blur(18px) saturate(140%);
  --th-blur-backdrop: blur(9px);          /* phone menu scrim. Figma background blur 18 = CSS blur 9px */
}

/* Colour: On light (default) */
:root, .th-on-light, [data-ground="light"] {
  --th-color-bg-page: var(--th-neutral-25);
  --th-color-bg-surface: var(--th-neutral-0);
  --th-color-bg-recessed: var(--th-neutral-50);
  --th-color-bg-raised: var(--th-neutral-flag);
  --th-color-bg-nav: var(--th-ground-700);
  --th-color-bg-nav-glass: var(--th-ground-alpha-92);
  --th-color-bg-footer: var(--th-ground-900); /* deprecated: the footer now uses bg-page On dark */
  --th-color-bg-inverse: var(--th-ground-800);
  --th-color-bg-accent: var(--th-accent-500);
  --th-color-bg-accent-hover: var(--th-accent-600);
  --th-color-bg-accent-pressed: var(--th-accent-700);
  --th-color-bg-accent-subtle: var(--th-accent-alpha-8);
  --th-color-bg-hover: var(--th-ink-alpha-8);
  --th-color-bg-see: var(--th-green-500);
  --th-color-bg-build: var(--th-blue-500);
  --th-color-bg-grow: var(--th-orange-500);
  --th-color-bg-see-mark: var(--th-green-500);
  --th-color-bg-build-mark: var(--th-blue-500);
  --th-color-bg-grow-mark: var(--th-orange-500);
  --th-color-bg-see-subtle: var(--th-green-alpha-12);
  --th-color-bg-build-subtle: var(--th-blue-alpha-12);
  --th-color-bg-grow-subtle: var(--th-orange-alpha-12);
  --th-color-bg-tile-neutral: var(--th-ground-800);
  --th-color-bg-limited: var(--th-red-500);
  --th-color-bg-partial: var(--th-amber-500);
  --th-color-bg-emerging: var(--th-olive-500);
  --th-color-bg-clear: var(--th-emerald-500);
  --th-color-text-primary: var(--th-neutral-950);
  --th-color-text-secondary: var(--th-ink-alpha-75);
  --th-color-text-tertiary: var(--th-ink-alpha-65);
  --th-color-text-muted: var(--th-neutral-600);
  --th-color-text-disabled: var(--th-ink-alpha-40);
  --th-color-text-accent: var(--th-accent-600);
  --th-color-text-accent-display: var(--th-accent-500);
  --th-color-text-on-accent: var(--th-neutral-0);
  --th-color-text-on-raised: var(--th-neutral-950);
  --th-color-text-see: var(--th-green-700);
  --th-color-text-build: var(--th-blue-700);
  --th-color-text-grow: var(--th-orange-700);
  --th-color-text-limited: var(--th-red-700);
  --th-color-text-partial: var(--th-amber-700);
  --th-color-text-emerging: var(--th-olive-700);
  --th-color-text-clear: var(--th-emerald-700);
  --th-color-text-error: var(--th-red-700);
  --th-color-border-subtle: var(--th-neutral-100);
  --th-color-border-strong: var(--th-neutral-200);
  --th-color-border-control: var(--th-neutral-300);
  --th-color-border-warm: var(--th-neutral-150);
  --th-color-border-accent: var(--th-accent-500);
  --th-color-border-focus: var(--th-accent-500);
  --th-color-border-error: var(--th-red-500);
  --th-color-icon-primary: var(--th-neutral-950);
  --th-color-icon-secondary: var(--th-ink-alpha-65);
  --th-color-icon-on-color: var(--th-neutral-0);
  --th-color-icon-accent: var(--th-accent-600);
}

/* Colour: On dark */
.th-on-dark, [data-ground="dark"] {
  --th-color-bg-page: var(--th-ground-800);
  --th-color-bg-surface: var(--th-paper-alpha-5);
  --th-color-bg-recessed: var(--th-paper-alpha-8);
  --th-color-bg-raised: var(--th-neutral-flag);
  --th-color-bg-nav: var(--th-ground-700);
  --th-color-bg-nav-glass: var(--th-ground-alpha-92);
  --th-color-bg-footer: var(--th-ground-900);
  --th-color-bg-inverse: var(--th-neutral-25);
  --th-color-bg-accent: var(--th-accent-500);
  --th-color-bg-accent-hover: var(--th-accent-600);
  --th-color-bg-accent-pressed: var(--th-accent-700);
  --th-color-bg-accent-subtle: var(--th-accent-alpha-16);
  --th-color-bg-hover: var(--th-paper-alpha-8);
  --th-color-bg-see: var(--th-green-500);
  --th-color-bg-build: var(--th-blue-500);
  --th-color-bg-grow: var(--th-orange-500);
  --th-color-bg-see-mark: var(--th-green-400);
  --th-color-bg-build-mark: var(--th-blue-400);
  --th-color-bg-grow-mark: var(--th-orange-400);
  --th-color-bg-see-subtle: var(--th-green-alpha-12);
  --th-color-bg-build-subtle: var(--th-blue-alpha-12);
  --th-color-bg-grow-subtle: var(--th-orange-alpha-12);
  --th-color-bg-tile-neutral: var(--th-paper-alpha-12);
  --th-color-bg-limited: var(--th-red-500);
  --th-color-bg-partial: var(--th-amber-500);
  --th-color-bg-emerging: var(--th-olive-500);
  --th-color-bg-clear: var(--th-emerald-500);
  --th-color-text-primary: var(--th-neutral-25);
  --th-color-text-secondary: var(--th-paper-alpha-80);
  --th-color-text-tertiary: var(--th-paper-alpha-64);
  --th-color-text-muted: var(--th-paper-alpha-52);
  --th-color-text-disabled: var(--th-paper-alpha-40);
  --th-color-text-accent: var(--th-accent-300);
  --th-color-text-accent-display: var(--th-accent-300);
  --th-color-text-on-accent: var(--th-neutral-0);
  --th-color-text-on-raised: var(--th-neutral-950);
  --th-color-text-see: var(--th-green-400);
  --th-color-text-build: var(--th-blue-400);
  --th-color-text-grow: var(--th-orange-400);
  --th-color-text-limited: var(--th-red-700);
  --th-color-text-partial: var(--th-amber-700);
  --th-color-text-emerging: var(--th-olive-700);
  --th-color-text-clear: var(--th-emerald-700);
  --th-color-text-error: var(--th-red-400);
  --th-color-border-subtle: var(--th-paper-alpha-12);
  --th-color-border-strong: var(--th-paper-alpha-20);
  --th-color-border-control: var(--th-paper-alpha-40);
  --th-color-border-warm: var(--th-neutral-150);
  --th-color-border-accent: var(--th-accent-300);
  --th-color-border-focus: var(--th-accent-300);
  --th-color-border-error: var(--th-red-400);
  --th-color-icon-primary: var(--th-neutral-25);
  --th-color-icon-secondary: var(--th-paper-alpha-80);
  --th-color-icon-on-color: var(--th-neutral-25);
  --th-color-icon-accent: var(--th-accent-300);
}

/* Layout and type: Desktop ≥1280 (default) */
:root {
  --th-layout-page-max: 1440px;
  --th-layout-content-max: 1280px;
  --th-layout-page-gutter: var(--th-space-80);
  --th-layout-grid-columns: 12;
  --th-layout-grid-gutter: var(--th-space-40);
  --th-layout-section-y: var(--th-space-128);
  --th-layout-band-y: var(--th-space-112);
  --th-layout-closing-y: var(--th-space-144);
  --th-layout-card-padding: var(--th-space-24);
  --th-layout-card-padding-dark: var(--th-space-28);
  --th-layout-card-gap: var(--th-space-24);
  --th-layout-nav-height: 64px;
  --th-layout-nav-height-top: 72px;
  --th-layout-measure: 620px;
  --th-layout-measure-prose: 680px;
  --th-layout-measure-wide: 900px;
  --th-stack-rule-to-eyebrow: var(--th-space-32);
  --th-stack-eyebrow-to-heading: var(--th-space-48);
  --th-stack-heading-to-body: var(--th-space-40);
  --th-stack-body-to-content: var(--th-space-56);
  --th-stack-paragraph: var(--th-space-20);
  --th-stack-title-to-body: var(--th-space-8);
  --th-stack-tile-to-title: var(--th-space-28);
  --th-stack-cta-gap: var(--th-space-16);
  --th-type-family: "IBM Plex Sans", system-ui, sans-serif;
  --th-type-weight-regular: 400;
  --th-type-weight-medium: 500;
  --th-type-weight-semibold: 600;
  --th-type-display-size: 60px;
  --th-type-display-line-height: 64px;
  --th-type-display-tracking: -1.5px;
  --th-type-h1-size: 48px;
  --th-type-h1-line-height: 54px;
  --th-type-h1-tracking: -1.2px;
  --th-type-h2-size: 48px;
  --th-type-h2-line-height: 54px;
  --th-type-h2-tracking: -1.2px;
  --th-type-h2-compact-size: 36px;
  --th-type-h2-compact-line-height: 44px;
  --th-type-h2-compact-tracking: -0.9px;
  --th-type-h3-size: 28px;
  --th-type-h3-line-height: 36px;
  --th-type-stat-size: 60px;
  --th-type-stat-line-height: 60px;
  --th-type-stat-tracking: -1.5px;
  --th-type-numeral-l-size: 44px;
  --th-type-numeral-l-line-height: 44px;
  --th-type-numeral-l-tracking: -1.1px;
  --th-type-numeral-s-size: 24px;
  --th-type-numeral-s-line-height: 32px;
  --th-type-title-l-size: 20px;
  --th-type-title-l-line-height: 28px;
  --th-type-title-m-size: 18px;
  --th-type-title-m-line-height: 28px;
  --th-type-title-s-size: 16px;
  --th-type-title-s-line-height: 24px;
  --th-type-lead-size: 18px;
  --th-type-lead-line-height: 28px;
  --th-type-body-size: 16px;
  --th-type-body-line-height: 26px;
  --th-type-body-compact-size: 14px;
  --th-type-body-compact-line-height: 22px;
  --th-type-ui-size: 14px;
  --th-type-ui-line-height: 20px;
  --th-type-prose-size: 18px;
  --th-type-prose-line-height: 30px;
  --th-type-prose-h2-size: 32px;
  --th-type-prose-h2-line-height: 40px;
  --th-type-prose-h2-tracking: -0.6px;
  --th-type-prose-h3-size: 24px;
  --th-type-prose-h3-line-height: 32px;
  --th-type-pull-size: 24px;
  --th-type-pull-line-height: 34px;
  --th-type-button-size: 14px;
  --th-type-button-line-height: 20px;
  --th-type-nav-size: 14px;
  --th-type-nav-line-height: 20px;
  --th-type-eyebrow-size: 12px;
  --th-type-eyebrow-line-height: 16px;
  --th-type-eyebrow-tracking: 2.16px;
  --th-type-caption-size: 12px;
  --th-type-caption-line-height: 16px;
  --th-type-caption-tracking: 0.3px;
  --th-type-legal-size: 12px;
  --th-type-legal-line-height: 16px;
  --th-type-flag-size: 12px;
  --th-type-flag-line-height: 16px;
  --th-type-label-size: 11px;
  --th-type-label-line-height: 16px;
  --th-type-label-tracking: 1.6px;
}

@media (max-width: 1279px) { /* Laptop */
  :root {
    --th-layout-page-gutter: var(--th-space-64);
    --th-layout-grid-gutter: var(--th-space-32);
    --th-layout-section-y: var(--th-space-112);
    --th-layout-band-y: var(--th-space-96);
    --th-layout-closing-y: var(--th-space-128);
  }
}

@media (max-width: 1023px) { /* Tablet */
  :root {
    --th-layout-page-gutter: var(--th-space-40);
    --th-layout-grid-columns: 8;
    --th-layout-grid-gutter: var(--th-space-32);
    --th-layout-section-y: var(--th-space-96);
    --th-layout-band-y: var(--th-space-88);
    --th-layout-closing-y: var(--th-space-96);
    --th-layout-card-padding-dark: var(--th-space-24);
    --th-stack-rule-to-eyebrow: var(--th-space-24);
    --th-stack-eyebrow-to-heading: var(--th-space-40);
    --th-stack-heading-to-body: var(--th-space-32);
    --th-stack-body-to-content: var(--th-space-48);
    --th-stack-tile-to-title: var(--th-space-24);
    --th-type-display-size: 48px;
    --th-type-display-line-height: 54px;
    --th-type-display-tracking: -1.2px;
    --th-type-h1-size: 40px;
    --th-type-h1-line-height: 48px;
    --th-type-h1-tracking: -1px;
    --th-type-h2-size: 40px;
    --th-type-h2-line-height: 48px;
    --th-type-h2-tracking: -1px;
    --th-type-h2-compact-size: 32px;
    --th-type-h2-compact-line-height: 40px;
    --th-type-h2-compact-tracking: -0.6px;
    --th-type-h3-size: 24px;
    --th-type-h3-line-height: 32px;
    --th-type-stat-size: 48px;
    --th-type-stat-line-height: 48px;
    --th-type-stat-tracking: -1.2px;
    --th-type-numeral-l-size: 40px;
    --th-type-numeral-l-line-height: 40px;
    --th-type-numeral-l-tracking: -1px;
  }
}

@media (max-width: 599px) { /* Phone */
  :root {
    --th-layout-page-gutter: var(--th-space-20);
    --th-layout-grid-columns: 4;
    --th-layout-grid-gutter: var(--th-space-20);
    --th-layout-section-y: var(--th-space-72);
    --th-layout-band-y: var(--th-space-64);
    --th-layout-closing-y: var(--th-space-80);
    --th-layout-card-padding: var(--th-space-20);
    --th-layout-card-padding-dark: var(--th-space-20);
    --th-layout-card-gap: var(--th-space-16);
    --th-layout-nav-height: 56px;
    --th-layout-nav-height-top: 56px;
    --th-stack-rule-to-eyebrow: var(--th-space-20);
    --th-stack-eyebrow-to-heading: var(--th-space-32);
    --th-stack-heading-to-body: var(--th-space-24);
    --th-stack-body-to-content: var(--th-space-40);
    --th-stack-paragraph: var(--th-space-16);
    --th-stack-tile-to-title: var(--th-space-20);
    --th-stack-cta-gap: var(--th-space-12);
    --th-type-display-size: 36px;
    --th-type-display-line-height: 40px;
    --th-type-display-tracking: -0.9px;
    --th-type-h1-size: 32px;
    --th-type-h1-line-height: 40px;
    --th-type-h1-tracking: -0.6px;
    --th-type-h2-size: 32px;
    --th-type-h2-line-height: 40px;
    --th-type-h2-tracking: -0.6px;
    --th-type-h2-compact-size: 28px;
    --th-type-h2-compact-line-height: 36px;
    --th-type-h2-compact-tracking: -0.4px;
    --th-type-h3-size: 24px;
    --th-type-h3-line-height: 32px;
    --th-type-stat-size: 40px;
    --th-type-stat-line-height: 40px;
    --th-type-stat-tracking: -1px;
    --th-type-numeral-l-size: 36px;
    --th-type-numeral-l-line-height: 36px;
    --th-type-numeral-l-tracking: -0.9px;
    --th-type-numeral-s-size: 20px;
    --th-type-numeral-s-line-height: 28px;
    --th-type-title-l-size: 18px;
    --th-type-title-l-line-height: 26px;
    --th-type-title-m-size: 16px;
    --th-type-title-m-line-height: 24px;
    --th-type-lead-size: 16px;
    --th-type-lead-line-height: 26px;
    --th-type-prose-size: 16px;
    --th-type-prose-line-height: 28px;
    --th-type-prose-h2-size: 28px;
    --th-type-prose-h2-line-height: 36px;
    --th-type-prose-h2-tracking: -0.4px;
    --th-type-prose-h3-size: 20px;
    --th-type-prose-h3-line-height: 28px;
    --th-type-pull-size: 20px;
    --th-type-pull-line-height: 28px;
  }
}

/* Text styles: one class per Figma text style (Figma "Heading/H2" = .th-heading-h2) */
.th-display-display { font-family: var(--th-type-family); font-size: var(--th-type-display-size); line-height: var(--th-type-display-line-height); font-weight: var(--th-type-weight-regular); letter-spacing: var(--th-type-display-tracking); }
.th-display-display-emphasis { font-family: var(--th-type-family); font-size: var(--th-type-display-size); line-height: var(--th-type-display-line-height); font-weight: var(--th-type-weight-semibold); letter-spacing: var(--th-type-display-tracking); }
.th-heading-h1 { font-family: var(--th-type-family); font-size: var(--th-type-h1-size); line-height: var(--th-type-h1-line-height); font-weight: var(--th-type-weight-regular); letter-spacing: var(--th-type-h1-tracking); }
.th-heading-h1-emphasis { font-family: var(--th-type-family); font-size: var(--th-type-h1-size); line-height: var(--th-type-h1-line-height); font-weight: var(--th-type-weight-semibold); letter-spacing: var(--th-type-h1-tracking); }
.th-heading-h2 { font-family: var(--th-type-family); font-size: var(--th-type-h2-size); line-height: var(--th-type-h2-line-height); font-weight: var(--th-type-weight-regular); letter-spacing: var(--th-type-h2-tracking); }
.th-heading-h2-emphasis { font-family: var(--th-type-family); font-size: var(--th-type-h2-size); line-height: var(--th-type-h2-line-height); font-weight: var(--th-type-weight-semibold); letter-spacing: var(--th-type-h2-tracking); }
.th-heading-h2-compact { font-family: var(--th-type-family); font-size: var(--th-type-h2-compact-size); line-height: var(--th-type-h2-compact-line-height); font-weight: var(--th-type-weight-regular); letter-spacing: var(--th-type-h2-compact-tracking); }
.th-heading-h2-compact-emphasis { font-family: var(--th-type-family); font-size: var(--th-type-h2-compact-size); line-height: var(--th-type-h2-compact-line-height); font-weight: var(--th-type-weight-semibold); letter-spacing: var(--th-type-h2-compact-tracking); }
.th-heading-h3 { font-family: var(--th-type-family); font-size: var(--th-type-h3-size); line-height: var(--th-type-h3-line-height); font-weight: var(--th-type-weight-regular); letter-spacing: 0; }
.th-figure-stat { font-family: var(--th-type-family); font-size: var(--th-type-stat-size); line-height: var(--th-type-stat-line-height); font-weight: var(--th-type-weight-semibold); letter-spacing: var(--th-type-stat-tracking); }
.th-figure-numeral-l { font-family: var(--th-type-family); font-size: var(--th-type-numeral-l-size); line-height: var(--th-type-numeral-l-line-height); font-weight: var(--th-type-weight-semibold); letter-spacing: var(--th-type-numeral-l-tracking); }
.th-figure-numeral-s { font-family: var(--th-type-family); font-size: var(--th-type-numeral-s-size); line-height: var(--th-type-numeral-s-line-height); font-weight: var(--th-type-weight-semibold); letter-spacing: 0; }
.th-title-l { font-family: var(--th-type-family); font-size: var(--th-type-title-l-size); line-height: var(--th-type-title-l-line-height); font-weight: var(--th-type-weight-semibold); letter-spacing: 0; }
.th-title-m { font-family: var(--th-type-family); font-size: var(--th-type-title-m-size); line-height: var(--th-type-title-m-line-height); font-weight: var(--th-type-weight-semibold); letter-spacing: 0; }
.th-title-s { font-family: var(--th-type-family); font-size: var(--th-type-title-s-size); line-height: var(--th-type-title-s-line-height); font-weight: var(--th-type-weight-semibold); letter-spacing: 0; }
.th-body-lead { font-family: var(--th-type-family); font-size: var(--th-type-lead-size); line-height: var(--th-type-lead-line-height); font-weight: var(--th-type-weight-regular); letter-spacing: 0; }
.th-body-body { font-family: var(--th-type-family); font-size: var(--th-type-body-size); line-height: var(--th-type-body-line-height); font-weight: var(--th-type-weight-regular); letter-spacing: 0; }
.th-body-compact { font-family: var(--th-type-family); font-size: var(--th-type-body-compact-size); line-height: var(--th-type-body-compact-line-height); font-weight: var(--th-type-weight-regular); letter-spacing: 0; }
.th-body-ui { font-family: var(--th-type-family); font-size: var(--th-type-ui-size); line-height: var(--th-type-ui-line-height); font-weight: var(--th-type-weight-regular); letter-spacing: 0; }
.th-prose-body { font-family: var(--th-type-family); font-size: var(--th-type-prose-size); line-height: var(--th-type-prose-line-height); font-weight: var(--th-type-weight-regular); letter-spacing: 0; }
.th-prose-h2 { font-family: var(--th-type-family); font-size: var(--th-type-prose-h2-size); line-height: var(--th-type-prose-h2-line-height); font-weight: var(--th-type-weight-regular); letter-spacing: var(--th-type-prose-h2-tracking); }
.th-prose-h3 { font-family: var(--th-type-family); font-size: var(--th-type-prose-h3-size); line-height: var(--th-type-prose-h3-line-height); font-weight: var(--th-type-weight-semibold); letter-spacing: 0; }
.th-prose-pull-quote { font-family: var(--th-type-family); font-size: var(--th-type-pull-size); line-height: var(--th-type-pull-line-height); font-weight: var(--th-type-weight-regular); letter-spacing: 0; }
.th-control-button { font-family: var(--th-type-family); font-size: var(--th-type-button-size); line-height: var(--th-type-button-line-height); font-weight: var(--th-type-weight-semibold); letter-spacing: 0; }
.th-control-nav { font-family: var(--th-type-family); font-size: var(--th-type-nav-size); line-height: var(--th-type-nav-line-height); font-weight: var(--th-type-weight-medium); letter-spacing: 0; }
.th-control-label { font-family: var(--th-type-family); font-size: var(--th-type-nav-size); line-height: var(--th-type-nav-line-height); font-weight: var(--th-type-weight-medium); letter-spacing: 0; }
.th-small-eyebrow { font-family: var(--th-type-family); font-size: var(--th-type-eyebrow-size); line-height: var(--th-type-eyebrow-line-height); font-weight: var(--th-type-weight-semibold); letter-spacing: var(--th-type-eyebrow-tracking); text-transform: uppercase; }
.th-small-caption { font-family: var(--th-type-family); font-size: var(--th-type-caption-size); line-height: var(--th-type-caption-line-height); font-weight: var(--th-type-weight-medium); letter-spacing: var(--th-type-caption-tracking); }
.th-small-legal { font-family: var(--th-type-family); font-size: var(--th-type-legal-size); line-height: var(--th-type-legal-line-height); font-weight: var(--th-type-weight-regular); letter-spacing: 0; }
.th-small-flag { font-family: var(--th-type-family); font-size: var(--th-type-flag-size); line-height: var(--th-type-flag-line-height); font-weight: var(--th-type-weight-semibold); letter-spacing: 0; }
.th-small-label { font-family: var(--th-type-family); font-size: var(--th-type-label-size); line-height: var(--th-type-label-line-height); font-weight: var(--th-type-weight-semibold); letter-spacing: var(--th-type-label-tracking); text-transform: uppercase; }
