/*
 * TRUE design tokens as CSS custom properties.
 *
 * GENERATED FILE. Do not edit.
 * Source:    tokens/true-tokens.json
 * Generator: generators/emit-css.mjs
 * Rebuild:   node generators/build.mjs
 * Version:   1.0.0
 *
 * Every value here was read out of a file listed under `sources` in the
 * token JSON. Tokens marked `legacy` in the JSON are NOT emitted: they are
 * Webflow starter leftovers and authoring accidents that still render on
 * live pages. They stay documented in the JSON and in DRIFT.md.
 */

/* ==========================================================
   @font-face
   The brand faces are served from the trueoriginal.com origin, not from
   a CDN and not from Google Fonts. Paths below are absolute against that
   origin so a product on another domain can use them directly. Self host
   instead if you can: rewrite the url() and keep everything else.
   ========================================================== */
@font-face {
  font-family: 'Marcellus SC';
  src: url('https://www.trueoriginal.com/assets/cdn.prod.website-files.com/67c07336c94b9f0854f4062f/67e921a42b04b4cf713861e8_MarcellusSC-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Marcellus';
  src: url('https://www.trueoriginal.com/assets/cdn.prod.website-files.com/67c07336c94b9f0854f4062f/67e920bba68b82145bdfd92d_Marcellus-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Helvetica Neue Updated';
  src: url('https://www.trueoriginal.com/assets/cdn.prod.website-files.com/67c07336c94b9f0854f4062f/67f2fb9cebce38c643381514_HelveticaNeue-Roman.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Helvetica Neue Updated';
  src: url('https://www.trueoriginal.com/assets/cdn.prod.website-files.com/67c07336c94b9f0854f4062f/67f2fb9c3f990d0c17eeac10_HelveticaNeue-Medium.otf') format('opentype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ==========================================================
     FROZEN CONTRACT
     These ten names are what the style guide site and the TRUE
     products code against. Never rename them.
     ========================================================== */
  --true-blue: #7dcade;
  --true-pink: #d82a80;
  --true-gradient: linear-gradient(90deg, #7dcade, #d82a80);
  --true-dark: #1c1c1e;
  --true-gray: #636366;
  --true-surface: #f8f8fb;
  --true-border: #e5e5ea;
  --font-display-sc: 'Marcellus SC', Georgia, serif;
  --font-display: 'Marcellus', Georgia, serif;
  --font-body: 'Helvetica Neue Updated', 'Helveticaneue', Helvetica, Arial, sans-serif;

  /* ---------- color ---------- */
  --true-color-brand-blue: #7dcade;
  --true-color-brand-pink: #d82a80;
  --true-color-ink: #1c1c1e;
  --true-color-body: #636366;
  --true-color-surface: #f8f8fb;
  --true-color-border: #e5e5ea;
  --true-color-white: #ffffff;
  --true-color-black: #000000;
  --true-color-nav-text-light: #2d2d2f;  /* narrow */
  --true-color-footer-micro: #a1a1a1;  /* narrow */
  --true-color-hero-photo-fallback: #470505;  /* narrow */
  --true-color-semantic-success: #1ca800;
  --true-color-semantic-focus: #0050bd;
  --true-color-semantic-focus-on-dark: #7dcade;
  --true-color-alpha-white-8: rgba(255,255,255,0.08);  /* narrow */
  --true-color-alpha-white-10: rgba(255,255,255,0.10);  /* narrow */
  --true-color-alpha-white-15: rgba(255,255,255,0.15);  /* narrow */
  --true-color-alpha-white-16: rgba(255,255,255,0.16);
  --true-color-alpha-white-24: rgba(255,255,255,0.24);
  --true-color-alpha-white-40: rgba(255,255,255,0.4);
  --true-color-alpha-white-45: rgba(255,255,255,0.45);  /* narrow */
  --true-color-alpha-white-48: rgba(255,255,255,0.48);  /* narrow */
  --true-color-alpha-white-56: rgba(255,255,255,0.56);
  --true-color-alpha-white-64: rgba(255,255,255,0.64);  /* narrow */
  --true-color-alpha-white-80: rgba(255,255,255,0.8);
  --true-color-alpha-white-92: rgba(255,255,255,0.92);  /* narrow */
  --true-color-alpha-black-5: rgba(0,0,0,0.05);
  --true-color-alpha-black-10: rgba(0,0,0,0.10);  /* narrow */
  --true-color-alpha-black-12: rgba(0,0,0,0.12);  /* narrow */
  --true-color-alpha-black-20: rgba(0,0,0,0.2);
  --true-color-alpha-black-24: rgba(0,0,0,0.24);  /* narrow */
  --true-color-alpha-black-40: rgba(0,0,0,0.4);
  --true-color-alpha-black-48: rgba(0,0,0,0.48);
  --true-color-alpha-black-60: rgba(0,0,0,0.6);
  --true-color-alpha-black-64: rgba(0,0,0,0.64);  /* narrow */
  --true-color-alpha-ink-40: rgba(28,28,30,0.4);
  --true-color-alpha-ink-72: rgba(28,28,30,0.72);  /* narrow */
  --true-color-alpha-border-on-dark: rgba(229,229,234,0.4);
  --true-color-resources-blue: #7dcade;
  --true-color-resources-pink: #d82a80;
  --true-color-resources-ink: #1c1c1e;
  --true-color-resources-surface: #f8f8fb;
  --true-color-resources-line: #e5e5ea;
  --true-color-resources-code-text: #f2f2f4;  /* narrow */

  /* ---------- gradient ---------- */
  --true-gradient-brand: linear-gradient(90deg, #7dcade, #d82a80);
  --true-gradient-brand-var: linear-gradient(90deg, var(--true-blue), var(--true-pink));
  --true-gradient-brand-text: linear-gradient(90deg, #7dcade, #d82a80);
  --true-gradient-brand-top: linear-gradient(180deg, #7dcade, #ffffff);  /* narrow */
  --true-gradient-brand-over-ink: linear-gradient(180deg, #1c1c1c, rgba(255,255,255,0) 30%), linear-gradient(90deg, #7dcade, #d82a80);  /* narrow */
  --true-gradient-hero-scrim: linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.4));
  --true-gradient-card-scrim: linear-gradient(rgba(0,0,0,0) 50%, rgba(0,0,0,0.48));
  --true-gradient-ticker-mask-horizontal: linear-gradient(90deg, rgba(0,0,0,0), #000 10% 90%, rgba(0,0,0,0));
  --true-gradient-ticker-mask-vertical: linear-gradient(rgba(0,0,0,0), #000 10% 90%, rgba(0,0,0,0));
  --true-gradient-product-hero-wash: radial-gradient(1100px 480px at 85% 10%, rgba(125,202,222,0.24), transparent 60%), radial-gradient(700px 420px at 100% 85%, rgba(216,42,128,0.10), transparent 60%), #f8f8fb;
  --true-gradient-top-strip: linear-gradient(90deg, #7dcade, #d82a80);
  --true-gradient-pill-border: linear-gradient(90deg, #7dcade, #d82a80);

  /* ---------- typography ---------- */
  --true-type-family-display-sc: 'Marcellus SC', Georgia, serif;
  --true-type-family-display: 'Marcellus', Georgia, serif;
  --true-type-family-body: 'Helvetica Neue Updated', 'Helveticaneue', Helvetica, Arial, sans-serif;
  --true-type-family-mono: 'SF Mono', ui-monospace, Menlo, Consolas, monospace;
  --true-type-weight-regular: 400;
  --true-type-weight-medium: 500;
  --true-type-size-10: 10px;  /* narrow */
  --true-type-size-12: 12px;
  --true-type-size-14: 14px;
  --true-type-size-15: 15px;  /* narrow */
  --true-type-size-16: 16px;
  --true-type-size-17: 17px;  /* narrow */
  --true-type-size-18: 18px;  /* narrow */
  --true-type-size-20: 20px;
  --true-type-size-21: 21px;  /* narrow */
  --true-type-size-22: 22px;  /* narrow */
  --true-type-size-24: 24px;
  --true-type-size-32: 32px;
  --true-type-size-36: 36px;  /* narrow */
  --true-type-size-40: 40px;
  --true-type-size-48: 48px;
  --true-type-size-56: 56px;  /* narrow */
  --true-type-size-72: 72px;
  --true-type-size-hero-fluid: 6vh;
  --true-type-size-em1: 1em;  /* narrow */
  --true-type-size-fluid14vh: 1.4vh;  /* narrow */
  --true-type-line-height-16: 16px;
  --true-type-line-height-18: 18px;
  --true-type-line-height-20: 20px;
  --true-type-line-height-21: 21px;
  --true-type-line-height-22: 22px;
  --true-type-line-height-24: 24px;
  --true-type-line-height-28: 28px;
  --true-type-line-height-32: 32px;
  --true-type-line-height-40: 40px;
  --true-type-line-height-48: 48px;
  --true-type-line-height-56: 56px;
  --true-type-line-height-64: 64px;
  --true-type-line-height-72: 72px;
  --true-type-line-height-ratio160: 160%;  /* narrow */
  --true-type-line-height-hero-fluid: 6vh;
  --true-type-letter-spacing-eyebrow: 0.08em;
  --true-type-letter-spacing-table-head: 0.06em;  /* narrow */
  --true-type-letter-spacing-lockup: 0.02em;
  --true-type-letter-spacing-trust-logo: 0.04em;  /* narrow */
  --true-type-letter-spacing-display-tight: -0.02em;
  --true-type-letter-spacing-display-tight-sm: -0.01em;

  /* ---------- spacing ---------- */
  --true-space-2: 2px;  /* narrow */
  --true-space-4: 4px;  /* narrow */
  --true-space-8: 8px;
  --true-space-12: 12px;
  --true-space-16: 16px;
  --true-space-20: 20px;
  --true-space-24: 24px;
  --true-space-32: 32px;
  --true-space-40: 40px;
  --true-space-48: 48px;
  --true-space-64: 64px;
  --true-space-80: 80px;
  --true-space-88: 88px;  /* narrow */
  --true-space-104: 104px;
  --true-space-120: 120px;
  --true-space-144: 144px;  /* narrow */
  --true-space-160: 160px;
  --true-space-200: 200px;
  --true-space-em3: 3em;  /* narrow */
  --true-space-em4: 4em;  /* narrow */
  --true-space-gap-8: 8px;
  --true-space-gap-16: 16px;
  --true-space-gap-24: 24px;
  --true-space-gap-32: 32px;
  --true-space-gap-40: 40px;
  --true-space-gap-80: 80px;
  --true-space-gap-em15: 1.5em;
  --true-space-gap-em4: 4em;
  --true-space-section-website-rhythm: 160px;
  --true-space-section-resources: 96px;
  --true-space-section-product: 84px;

  /* ---------- container ---------- */
  --true-container-product: 1180px;
  --true-container-resources: 1160px;
  --true-container-webflow-default: 940px;
  --true-container-webflow-tablet: 728px;
  --true-container-regular: 1260px;  /* narrow */
  --true-container-grid12: 1440px;  /* narrow */
  --true-container-wide: 1420px;
  --true-container-wide-centred: 1468px;  /* narrow */
  --true-container-narrow: 1200px;
  --true-container-panel: 1360px;  /* narrow */
  --true-container-navbar: 1000px;
  --true-container-prose: 80%;
  --true-container-hero-copy: 800px;
  --true-container-hero-copy-wide: 830px;  /* narrow */
  --true-container-section-head: 640px;
  --true-container-hero-sub: 520px;
  --true-container-measure-h1: 16ch;
  --true-container-measure-h2: 24ch;

  /* ---------- radius ---------- */
  --true-radius-none: 0;
  --true-radius-sm: 4px;  /* narrow */
  --true-radius-badge: 5px;  /* narrow */
  --true-radius-yes: 7px;  /* narrow */
  --true-radius-input: 8px;
  --true-radius-md: 12px;
  --true-radius-lg: 16px;
  --true-radius-xl: 24px;  /* narrow */
  --true-radius-xxl: 32px;  /* narrow */
  --true-radius-circle-button: 80px;
  --true-radius-pill: 999px;
  --true-radius-circle: 50%;
  --true-radius-resources-card: 16px;
  --true-radius-resources-code: 14px;
  --true-radius-resources-linkcard: 14px;
  --true-radius-resources-rule: 2px;

  /* ---------- shadow ---------- */
  --true-shadow-card: 0 2px 5px rgba(0,0,0,0.2);
  --true-shadow-dropdown: 0 8px 50px rgba(0,0,0,0.05);
  --true-shadow-soft: 0 4px 24px rgba(150,163,181,0.078);
  --true-shadow-video: 0 4px 12px rgba(0,0,0,0.2);
  --true-shadow-link-hover: 0 3px 8px 3px rgba(0,0,0,0.2);
  --true-shadow-product-chip: 0 14px 34px rgba(28,28,30,0.12);
  --true-shadow-product-card-hover: 0 14px 30px rgba(28,28,30,0.12);
  --true-shadow-product-mini: 0 8px 22px rgba(0,0,0,0.08);
  --true-shadow-product-doc: 0 4px 14px rgba(0,0,0,0.06);
  --true-shadow-product-on-dark: 0 30px 70px rgba(0,0,0,0.4);
  --true-shadow-product-pink-glow: 0 8px 20px rgba(216,42,128,0.4);
  --true-shadow-product-device: 0 40px 80px rgba(28,28,30,0.28), 0 12px 28px rgba(28,28,30,0.16);
  --true-shadow-backdrop-blur-8: blur(8px);
  --true-shadow-backdrop-blur-16: blur(16px);
  --true-shadow-backdrop-blur-20: blur(20px);
  --true-shadow-backdrop-blur-40: blur(40px);
  --true-shadow-backdrop-blur-80: blur(80px);
  --true-shadow-backdrop-blur-drop-shadow: drop-shadow(0 4px 10px rgba(0,0,0,0.6));

  /* ---------- motion ---------- */
  --true-motion-duration-instant: 100ms;
  --true-motion-duration-fast: 150ms;
  --true-motion-duration-base: 200ms;
  --true-motion-duration-slow: 300ms;
  --true-motion-easing-standard: ease;
  --true-motion-easing-linear: linear;
  --true-motion-easing-slam: cubic-bezier(0.5, 0, 0.7, 0.2);
  --true-motion-keyframes-spin: 0.8s linear infinite;
  --true-motion-keyframes-float: 5.5s ease-in-out infinite, translateY(0) to translateY(-9px) at 50%;
  --true-motion-keyframes-pulse: 2.4s ease infinite, opacity 0.75 to 1;
  --true-motion-keyframes-draw: 3s ease infinite, stroke-dashoffset 120 to 0;  /* narrow */
  --true-motion-keyframes-slam: 3s cubic-bezier(.5,0,.7,.2) infinite;  /* narrow */
  --true-motion-keyframes-pop: 3s ease infinite, scale 0.85 to 1 with opacity;
  --true-motion-hover-lift: translateY(-1px);
  --true-motion-hover-lift-card: translateY(-3px);
  --true-motion-hover-fade: opacity 0.85;

  /* ---------- breakpoint ---------- */
  --true-bp-desktop: 991px;
  --true-bp-tablet: 767px;
  --true-bp-mobile: 479px;
  --true-bp-product: 960px;  /* narrow */

  /* ---------- zIndex ---------- */
  --true-z-below: -1;
  --true-z-base: 0;
  --true-z-raised: 1;
  --true-z-content: 2;
  --true-z-overlay: 5;
  --true-z-nav: 10;
  --true-z-far-below: -100;  /* narrow */

  /* ---------- icon ---------- */
  --true-icon-size-xs: 16px;
  --true-icon-size-sm: 24px;
  --true-icon-size-md: 26px;
  --true-icon-size-lockup: 30px;
  --true-icon-size-lg: 32px;
  --true-icon-size-xl: 48px;
  --true-icon-size-glyph: 20px;
  --true-icon-size-tick: 15px;
  --true-icon-size-dot: 7px;
  --true-icon-size-separator: 2px;
  --true-icon-tile: 42px;
  --true-icon-logo-nav: 100px x 32px;
  --true-icon-logo-footer: 110px x 32px;  /* narrow */
  --true-icon-logo-partner: 160px x 40px;  /* narrow */
  --true-icon-logo-clear-space: 12px;

  /* ---------- border ---------- */
  --true-border-hairline: 1px solid #e5e5ea;
  --true-border-hairline-on-dark: 1px solid rgba(255,255,255,0.4);
  --true-border-hairline-on-light: 1px solid rgba(28,28,30,0.4);
  --true-border-focus: 2px solid #0050bd;
  --true-border-dashed: 1.5px dashed #7dcade;  /* narrow */
  --true-border-field: 1.5px solid #d82a80;  /* narrow */
  --true-border-gradient-top: 6px solid transparent with border-image:linear-gradient(90deg,#7dcade,#d82a80) 1;
  --true-border-underline: 1px solid currentColor;

  /* ---------- typography roles ---------- */
  /* The real, class driven type scale of trueoriginal.com. Each role is a
     bundle: family, size, line height, weight and sometimes colour. */
  --true-type-hero-center-family: var(--font-display-sc);
  --true-type-hero-center-size: 72px;
  --true-type-hero-center-line: 72px;
  --true-type-hero-center-weight: 400;
  --true-type-hero-center-color: #ffffff;
  --true-type-hero-left-family: var(--font-display-sc);
  --true-type-hero-left-size: 6vh;
  --true-type-hero-left-line: 6vh;
  --true-type-hero-left-weight: 400;
  --true-type-hero-left-color: #ffffff;
  --true-type-page-heading-family: var(--font-display);
  --true-type-page-heading-size: 48px;
  --true-type-page-heading-line: 56px;
  --true-type-page-heading-weight: 400;
  --true-type-stat-heading-family: var(--font-display-sc);
  --true-type-stat-heading-size: 48px;
  --true-type-stat-heading-line: 48px;
  --true-type-stat-heading-weight: 400;
  --true-type-stat-heading-color: #ffffff;
  --true-type-article-heading-family: var(--font-display);
  --true-type-article-heading-size: 40px;
  --true-type-article-heading-line: 48px;
  --true-type-article-heading-weight: 400;
  --true-type-section-heading-family: var(--font-display);
  --true-type-section-heading-size: 32px;
  --true-type-section-heading-line: 40px;
  --true-type-section-heading-weight: 400;
  --true-type-sub-heading-family: var(--font-display);
  --true-type-sub-heading-size: 24px;
  --true-type-sub-heading-line: 32px;
  --true-type-sub-heading-weight: 400;
  --true-type-card-title-family: var(--font-body);
  --true-type-card-title-size: 20px;
  --true-type-card-title-line: 28px;
  --true-type-card-title-weight: 500;
  --true-type-body-family: var(--font-body);
  --true-type-body-size: 16px;
  --true-type-body-line: 24px;
  --true-type-body-weight: 400;
  --true-type-body-color: #636366;
  --true-type-rte-body-family: var(--font-body);
  --true-type-rte-body-size: 14px;
  --true-type-rte-body-line: 24px;
  --true-type-rte-body-weight: 400;
  --true-type-rte-body-color: #1c1c1e;
  --true-type-nav-link-family: var(--font-body);
  --true-type-nav-link-size: 14px;
  --true-type-nav-link-line: 20px;
  --true-type-nav-link-weight: 400;
  --true-type-nav-link-color: #1a1b1f;
  --true-type-nav-link-tracking: 0.25px;
  --true-type-micro-family: var(--font-body);
  --true-type-micro-size: 12px;
  --true-type-micro-weight: 400;
  --true-type-micro-color: #a1a1a1;
  --true-type-button-large-family: var(--font-body);
  --true-type-button-large-size: 24px;
  --true-type-button-large-line: 32px;
  --true-type-button-large-weight: 400;
}