@property --type-w { syntax: ""; inherits: true; initial-value: 1280; } @property --type-t { syntax: ""; inherits: true; initial-value: 1; } @property --type-scale { syntax: ""; inherits: true; initial-value: 1; } @property --type-fluid-f { syntax: ""; inherits: true; initial-value: 1; } @property --type-anchor { syntax: ""; inherits: true; initial-value: 16px; } @property --type-s0 { syntax: ""; inherits: true; initial-value: 1; } @property --type-s1 { syntax: ""; inherits: true; initial-value: 1; } @property --space-xl { syntax: ""; inherits: true; initial-value: 0px; } @property --space-2xl { syntax: ""; inherits: true; initial-value: 0px; } @property --space-3xl { syntax: ""; inherits: true; initial-value: 0px; } @property --space-4xl { syntax: ""; inherits: true; initial-value: 0px; } @property --space-5xl { syntax: ""; inherits: true; initial-value: 0px; } @property --space-6xl { syntax: ""; inherits: true; initial-value: 0px; } html { --background: oklch(0 0 133.18819072222303); --foreground: oklch(0.9467041015625 0 133.18819072222303); --primary: oklch(0.7749267578125 0.1759811046511628 133.18819072222303); --primary-foreground: oklch(0.15 0.005 133.18819072222303); --secondary: oklch(0.9299560546875 0 0); --secondary-foreground: oklch(0.15 0.005 0); --accent: oklch(0.85 0.16924440872710209 133.83207579261614); --accent-foreground: oklch(0.15 0.005 133.83207579261614); --muted: oklch(0.20217285156249998 0 133.18819072222303); --muted-foreground: oklch(0.6583984375 0.032636870155038765 133.18819072222303); --border: oklch(0.9 0.01 133.18819072222303); --input: oklch(0.9 0.01 133.18819072222303); --ring: oklch(0.6 0.1698226726854411 133.18819072222303); --destructive: oklch(0.55 0.2 25); --destructive-foreground: oklch(0.97 0.005 25); --card: oklch(0 0 133.18819072222303); --card-foreground: oklch(0.9467041015625 0 133.18819072222303); --popover: oklch(0 0 133.18819072222303); --popover-foreground: oklch(0.9467041015625 0 133.18819072222303); --color-background: oklch(0 0 133.18819072222303); --color-foreground: oklch(0.9467041015625 0 133.18819072222303); --color-primary: oklch(0.7749267578125 0.1759811046511628 133.18819072222303); --color-primary-foreground: oklch(0.15 0.005 133.18819072222303); --color-secondary: oklch(0.9299560546875 0 0); --color-secondary-foreground: oklch(0.15 0.005 0); --color-accent: oklch(0.85 0.16924440872710209 133.83207579261614); --color-accent-foreground: oklch(0.15 0.005 133.83207579261614); --color-muted: oklch(0.20217285156249998 0 133.18819072222303); --color-muted-foreground: oklch(0.6583984375 0.032636870155038765 133.18819072222303); --color-border: oklch(0.9 0.01 133.18819072222303); --color-input: oklch(0.9 0.01 133.18819072222303); --color-ring: oklch(0.6 0.1698226726854411 133.18819072222303); --color-destructive: oklch(0.55 0.2 25); --color-destructive-foreground: oklch(0.97 0.005 25); --color-card: oklch(0 0 133.18819072222303); --color-card-foreground: oklch(0.9467041015625 0 133.18819072222303); --color-popover: oklch(0 0 133.18819072222303); --color-popover-foreground: oklch(0.9467041015625 0 133.18819072222303); --safe-top: env(safe-area-inset-top, 0px); --safe-bottom: env(safe-area-inset-bottom, 0px); --safe-left: env(safe-area-inset-left, 0px); --safe-right: env(safe-area-inset-right, 0px); --screen-height: min(100lvh, calc(100svh + var(--safe-top, 0px) + var(--safe-bottom, 0px))); background-color:var(--background) } body { background-color: transparent; } body > [data-state-layout], body > .public-site { overflow-x: clip; } [data-state-layout] { min-height: var(--screen-height, 100svh); } [data-state-layout] .public-site { min-height: 0; } body > .public-site { padding-top:var(--safe-top, 0px);padding-bottom:var(--safe-bottom, 0px) } [data-state-layout], .public-site { --background: oklch(0 0 133.18819072222303); --foreground: oklch(0.9467041015625 0 133.18819072222303); --primary: oklch(0.7749267578125 0.1759811046511628 133.18819072222303); --primary-foreground: oklch(0.15 0.005 133.18819072222303); --secondary: oklch(0.9299560546875 0 0); --secondary-foreground: oklch(0.15 0.005 0); --accent: oklch(0.85 0.16924440872710209 133.83207579261614); --accent-foreground: oklch(0.15 0.005 133.83207579261614); --muted: oklch(0.20217285156249998 0 133.18819072222303); --muted-foreground: oklch(0.6583984375 0.032636870155038765 133.18819072222303); --border: oklch(0.9 0.01 133.18819072222303); --input: oklch(0.9 0.01 133.18819072222303); --ring: oklch(0.6 0.1698226726854411 133.18819072222303); --destructive: oklch(0.55 0.2 25); --destructive-foreground: oklch(0.97 0.005 25); --card: oklch(0 0 133.18819072222303); --card-foreground: oklch(0.9467041015625 0 133.18819072222303); --popover: oklch(0 0 133.18819072222303); --popover-foreground: oklch(0.9467041015625 0 133.18819072222303); --color-background: oklch(0 0 133.18819072222303); --color-foreground: oklch(0.9467041015625 0 133.18819072222303); --color-primary: oklch(0.7749267578125 0.1759811046511628 133.18819072222303); --color-primary-foreground: oklch(0.15 0.005 133.18819072222303); --color-secondary: oklch(0.9299560546875 0 0); --color-secondary-foreground: oklch(0.15 0.005 0); --color-accent: oklch(0.85 0.16924440872710209 133.83207579261614); --color-accent-foreground: oklch(0.15 0.005 133.83207579261614); --color-muted: oklch(0.20217285156249998 0 133.18819072222303); --color-muted-foreground: oklch(0.6583984375 0.032636870155038765 133.18819072222303); --color-border: oklch(0.9 0.01 133.18819072222303); --color-input: oklch(0.9 0.01 133.18819072222303); --color-ring: oklch(0.6 0.1698226726854411 133.18819072222303); --color-destructive: oklch(0.55 0.2 25); --color-destructive-foreground: oklch(0.97 0.005 25); --color-card: oklch(0 0 133.18819072222303); --color-card-foreground: oklch(0.9467041015625 0 133.18819072222303); --color-popover: oklch(0 0 133.18819072222303); --color-popover-foreground: oklch(0.9467041015625 0 133.18819072222303); --font-heading: "DM Sans", "DM Sans Fallback", "DM Sans Fallback Android", system-ui, sans-serif; --font-body: "Lato", "Lato Fallback", "Lato Fallback Android", system-ui, sans-serif; --type-w: 375; --type-t: clamp(0, calc((var(--type-w) - 375) / 905), 1); --type-scale: calc((18 + (20 - 18) * var(--type-t)) / 16); --type-s0: 1.125; --type-s1: 1.25; --type-fluid-f: calc(0.65 + 0.35 * var(--type-t)); --type-anchor: calc(1rem * var(--type-scale)); font-size: calc(1rem * var(--type-scale)); --radius: 0; --radius-pill: 0; --density-scale: 1; --shadow-scale: 1; --border-treatment: subtle; --control-border-width: 1px; --content-gutter: 0.5rem; --type-poster-font: var(--font-heading); --type-poster-size: 6rem; --type-poster-weight: 800; --type-poster-line-height: 0.9; --type-poster-tracking: -0.03em; --type-display-font: var(--font-heading); --type-display-size: 3rem; --type-display-weight: 850; --type-display-line-height: 1.05; --type-display-tracking: -0.02em; --type-heading-font: var(--font-heading); --type-heading-size: 2rem; --type-heading-weight: 700; --type-heading-line-height: 1.2; --type-heading-tracking: -0.012em; --type-subhead-font: var(--font-heading); --type-subhead-size: 1.5625rem; --type-subhead-weight: 600; --type-subhead-line-height: 1.3; --type-subhead-tracking: 0; --type-eyebrow-font: var(--font-body); --type-eyebrow-size: 0.8125rem; --type-eyebrow-weight: 600; --type-eyebrow-line-height: 1.4; --type-eyebrow-tracking: 0.1em; --type-lead-font: var(--font-body); --type-lead-size: 1.25rem; --type-lead-weight: 400; --type-lead-line-height: 1.5; --type-lead-tracking: 0; --type-lead-measure: 34.8em; --type-quote-font: var(--font-body); --type-quote-size: 1.25rem; --type-quote-weight: 400; --type-quote-line-height: 1.5; --type-quote-tracking: 0; --type-quote-measure: 34.8em; --type-body-font: var(--font-body); --type-body-size: 1rem; --type-body-weight: 400; --type-body-line-height: 1.6; --type-body-tracking: 0.04px; --type-body-measure: 37.7em; --type-caption-font: var(--font-body); --type-caption-size: 0.8125rem; --type-caption-weight: 500; --type-caption-line-height: 1.5; --type-caption-tracking: 0; --type-Logo-font: var(--font-heading); --type-Logo-size: 1.5rem; --type-Logo-weight: 900; --type-Logo-line-height: 1.4; --type-Logo-tracking: 0.1em; --type-Menu-font: var(--font-heading); --type-Menu-size: 1.52rem; --type-Menu-weight: 600; --type-Menu-line-height: 1.2; --type-Menu-tracking: 0.1em; --type-Signature-font: var(--font-heading); --type-Signature-size: 0.8125rem; --type-Signature-weight: 700; --type-Signature-line-height: 1.4; --type-Signature-tracking: 0.1em; --shadow-none: none; --shadow-ring: 0 0 0 2px var(--primary); --shadow-insetRing: 0 0 0 2px var(--primary) inset; --shadow-offsetRing: 0 0 0 2px var(--background), 0 0 0 4px var(--primary); --shadow-soft: 0 1px 3px 0 oklch(from var(--foreground) l c h / 0.1); --shadow-raised: 0 4px 8px 0 oklch(from var(--foreground) l c h / 0.12); --shadow-floating: 0 10px 20px -3px oklch(from var(--foreground) l c h / 0.15), 0 4px 6px -4px oklch(from var(--foreground) l c h / 0.1); --shadow-modal: 0 25px 50px -12px oklch(from var(--foreground) l c h / 0.25); --space-none: 0; --space-xs: 0.25rem; --space-s: 0.5rem; --space-m: 0.75rem; --space-l: 1rem; --space-xl: calc(1rem * (1.3973 + (1.5 - 1.3973) * var(--type-t))); --space-2xl: calc(1rem * (1.7715 + (2 - 1.7715) * var(--type-t))); --space-3xl: calc(1rem * (2.4753 + (3 - 2.4753) * var(--type-t))); --space-4xl: calc(1rem * (3.1383 + (4 - 3.1383) * var(--type-t))); --space-5xl: calc(1rem * (4.3851 + (6 - 4.3851) * var(--type-t))); --space-6xl: calc(1rem * (5.5597 + (8 - 5.5597) * var(--type-t))); color: var(--foreground); font-family: var(--font-body); color-scheme: dark; } [data-state-layout] h4, [data-state-layout] h5, [data-state-layout] h6, .public-site h4, .public-site h5, .public-site h6 { font-family: var(--font-heading); } :where([data-state-layout], .public-site) h1 { font-family: var(--type-display-font); font-size: calc(var(--type-s0) * 2.4753rem + (var(--type-display-size) * var(--type-s1) - var(--type-s0) * 2.4753rem) * var(--type-t)); font-weight: var(--type-display-weight); line-height: calc(var(--type-display-line-height) + 0.0583 * (1 - var(--type-t))); letter-spacing: var(--type-display-tracking); } :where([data-state-layout], .public-site) h2 { font-family: var(--type-heading-font); font-size: calc(var(--type-s0) * 1.7715rem + (var(--type-heading-size) * var(--type-s1) - var(--type-s0) * 1.7715rem) * var(--type-t)); font-weight: var(--type-heading-weight); line-height: calc(var(--type-heading-line-height) + 0.0548 * (1 - var(--type-t))); letter-spacing: var(--type-heading-tracking); } :where([data-state-layout], .public-site) h3 { font-family: var(--type-subhead-font); font-size: calc(var(--type-s0) * 1.4451rem + (var(--type-subhead-size) * var(--type-s1) - var(--type-s0) * 1.4451rem) * var(--type-t)); font-weight: var(--type-subhead-weight); line-height: calc(var(--type-subhead-line-height) + 0.0426 * (1 - var(--type-t))); letter-spacing: var(--type-subhead-tracking); } :where([data-state-layout], .public-site) blockquote { font-family: var(--type-quote-font); font-size: calc(var(--type-s0) * 1.2021rem + (var(--type-quote-size) * var(--type-s1) - var(--type-s0) * 1.2021rem) * var(--type-t)); font-weight: var(--type-quote-weight); line-height: calc(var(--type-quote-line-height) + 0.0289 * (1 - var(--type-t))); letter-spacing: var(--type-quote-tracking); font-style: italic; max-width: var(--type-quote-measure); margin-left: var(--measure-left, 0); margin-right: var(--measure-right, 0); } :where([data-state-layout], .public-site) p { font-family: var(--type-body-font); font-size: calc(var(--type-s0) * 1rem + (var(--type-body-size) * var(--type-s1) - var(--type-s0) * 1rem) * var(--type-t)); font-weight: var(--type-body-weight); line-height: var(--type-body-line-height); letter-spacing: var(--type-body-tracking); max-width: var(--type-body-measure); margin-left: var(--measure-left, 0); margin-right: var(--measure-right, 0); } :where([data-state-layout], .public-site) .type-poster { font-family: var(--type-poster-font); font-size: calc(var(--type-s0) * 4.3851rem + (var(--type-poster-size) * var(--type-s1) - var(--type-s0) * 4.3851rem) * var(--type-t)); font-weight: var(--type-poster-weight); line-height: calc(var(--type-poster-line-height) + 0.046 * (1 - var(--type-t))); letter-spacing: var(--type-poster-tracking); } :where([data-state-layout], .public-site) :where(p, blockquote, h1, h2, h3, h4, h5, h6).type-poster { max-width: none; margin-left: 0; margin-right: 0; } :where([data-state-layout], .public-site) .type-display { font-family: var(--type-display-font); font-size: calc(var(--type-s0) * 2.4753rem + (var(--type-display-size) * var(--type-s1) - var(--type-s0) * 2.4753rem) * var(--type-t)); font-weight: var(--type-display-weight); line-height: calc(var(--type-display-line-height) + 0.0583 * (1 - var(--type-t))); letter-spacing: var(--type-display-tracking); } :where([data-state-layout], .public-site) :where(p, blockquote, h1, h2, h3, h4, h5, h6).type-display { max-width: none; margin-left: 0; margin-right: 0; } :where([data-state-layout], .public-site) .type-heading { font-family: var(--type-heading-font); font-size: calc(var(--type-s0) * 1.7715rem + (var(--type-heading-size) * var(--type-s1) - var(--type-s0) * 1.7715rem) * var(--type-t)); font-weight: var(--type-heading-weight); line-height: calc(var(--type-heading-line-height) + 0.0548 * (1 - var(--type-t))); letter-spacing: var(--type-heading-tracking); } :where([data-state-layout], .public-site) :where(p, blockquote, h1, h2, h3, h4, h5, h6).type-heading { max-width: none; margin-left: 0; margin-right: 0; } :where([data-state-layout], .public-site) .type-subhead { font-family: var(--type-subhead-font); font-size: calc(var(--type-s0) * 1.4451rem + (var(--type-subhead-size) * var(--type-s1) - var(--type-s0) * 1.4451rem) * var(--type-t)); font-weight: var(--type-subhead-weight); line-height: calc(var(--type-subhead-line-height) + 0.0426 * (1 - var(--type-t))); letter-spacing: var(--type-subhead-tracking); } :where([data-state-layout], .public-site) :where(p, blockquote, h1, h2, h3, h4, h5, h6).type-subhead { max-width: none; margin-left: 0; margin-right: 0; } :where([data-state-layout], .public-site) .type-eyebrow { font-family: var(--type-eyebrow-font); font-size: calc(var(--type-s0) * 0.8125rem + (var(--type-eyebrow-size) * var(--type-s1) - var(--type-s0) * 0.8125rem) * var(--type-t)); font-weight: var(--type-eyebrow-weight); line-height: var(--type-eyebrow-line-height); letter-spacing: var(--type-eyebrow-tracking); text-transform: uppercase; } :where([data-state-layout], .public-site) :where(p, blockquote, h1, h2, h3, h4, h5, h6).type-eyebrow { max-width: none; margin-left: 0; margin-right: 0; } :where([data-state-layout], .public-site) .type-lead { font-family: var(--type-lead-font); font-size: calc(var(--type-s0) * 1.2021rem + (var(--type-lead-size) * var(--type-s1) - var(--type-s0) * 1.2021rem) * var(--type-t)); font-weight: var(--type-lead-weight); line-height: calc(var(--type-lead-line-height) + 0.0289 * (1 - var(--type-t))); letter-spacing: var(--type-lead-tracking); } :where([data-state-layout], .public-site) :where(p, blockquote, h1, h2, h3, h4, h5, h6).type-lead { max-width: var(--type-lead-measure); margin-left: var(--measure-left, 0); margin-right: var(--measure-right, 0); } :where([data-state-layout], .public-site) .type-quote { font-family: var(--type-quote-font); font-size: calc(var(--type-s0) * 1.2021rem + (var(--type-quote-size) * var(--type-s1) - var(--type-s0) * 1.2021rem) * var(--type-t)); font-weight: var(--type-quote-weight); line-height: calc(var(--type-quote-line-height) + 0.0289 * (1 - var(--type-t))); letter-spacing: var(--type-quote-tracking); font-style: italic; } :where([data-state-layout], .public-site) :where(p, blockquote, h1, h2, h3, h4, h5, h6).type-quote { max-width: var(--type-quote-measure); margin-left: var(--measure-left, 0); margin-right: var(--measure-right, 0); } :where([data-state-layout], .public-site) .type-body { font-family: var(--type-body-font); font-size: calc(var(--type-s0) * 1rem + (var(--type-body-size) * var(--type-s1) - var(--type-s0) * 1rem) * var(--type-t)); font-weight: var(--type-body-weight); line-height: var(--type-body-line-height); letter-spacing: var(--type-body-tracking); } :where([data-state-layout], .public-site) :where(p, blockquote, h1, h2, h3, h4, h5, h6).type-body { max-width: var(--type-body-measure); margin-left: var(--measure-left, 0); margin-right: var(--measure-right, 0); } :where([data-state-layout], .public-site) .type-caption { font-family: var(--type-caption-font); font-size: calc(var(--type-s0) * 0.8125rem + (var(--type-caption-size) * var(--type-s1) - var(--type-s0) * 0.8125rem) * var(--type-t)); font-weight: var(--type-caption-weight); line-height: var(--type-caption-line-height); letter-spacing: var(--type-caption-tracking); } :where([data-state-layout], .public-site) :where(p, blockquote, h1, h2, h3, h4, h5, h6).type-caption { max-width: none; margin-left: 0; margin-right: 0; } :where([data-state-layout], .public-site) .type-Logo { font-family: var(--type-Logo-font); font-size: calc(var(--type-s0) * 1.3973rem + (var(--type-Logo-size) * var(--type-s1) - var(--type-s0) * 1.3973rem) * var(--type-t)); font-weight: var(--type-Logo-weight); line-height: calc(var(--type-Logo-line-height) + 0.046 * (1 - var(--type-t))); letter-spacing: var(--type-Logo-tracking); } :where([data-state-layout], .public-site) :where(p, blockquote, h1, h2, h3, h4, h5, h6).type-Logo { max-width: none; margin-left: 0; margin-right: 0; } :where([data-state-layout], .public-site) .type-Menu { font-family: var(--type-Menu-font); font-size: calc(var(--type-s0) * 1.4126rem + (var(--type-Menu-size) * var(--type-s1) - var(--type-s0) * 1.4126rem) * var(--type-t)); font-weight: var(--type-Menu-weight); line-height: calc(var(--type-Menu-line-height) + 0.0323 * (1 - var(--type-t))); letter-spacing: var(--type-Menu-tracking); } :where([data-state-layout], .public-site) :where(p, blockquote, h1, h2, h3, h4, h5, h6).type-Menu { max-width: none; margin-left: 0; margin-right: 0; } :where([data-state-layout], .public-site) .type-Signature { font-family: var(--type-Signature-font); font-size: calc(var(--type-s0) * 0.8125rem + (var(--type-Signature-size) * var(--type-s1) - var(--type-s0) * 0.8125rem) * var(--type-t)); font-weight: var(--type-Signature-weight); line-height: var(--type-Signature-line-height); letter-spacing: var(--type-Signature-tracking); text-transform: uppercase; } :where([data-state-layout], .public-site) :where(p, blockquote, h1, h2, h3, h4, h5, h6).type-Signature { max-width: none; margin-left: 0; margin-right: 0; } :where([data-state-layout], .public-site) .layout-stack { display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; } :where([data-state-layout], .public-site) .layout-centered { display: flex; flex-direction: column; justify-content: center; align-items: center; } :where([data-state-layout], .public-site) .layout-split { display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start; } :where([data-state-layout], .public-site) .layout-row { display: flex; flex-direction: row; justify-content: flex-start; align-items: center; } :where([data-state-layout], .public-site) .layout-cluster { display: flex; flex-direction: row; justify-content: center; align-items: center; } :where([data-state-layout], .public-site) .layout-spread { display: flex; flex-direction: row; justify-content: space-between; align-items: center; } :where([data-state-layout], .public-site) .layout-grid-2 { display: grid; justify-items: start; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: flex-start; } :where([data-state-layout], .public-site) .layout-grid-3 { display: grid; justify-items: start; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: flex-start; } :where([data-state-layout], .public-site) .layout-grid-4 { display: grid; justify-items: start; grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: flex-start; } :where([data-state-layout], .public-site) .layout-sidebar { display: grid; justify-items: start; grid-template-columns: 240px 1fr; align-items: flex-start; } :where([data-state-layout], .public-site) .layout-rail { display: grid; justify-items: start; grid-template-columns: 1fr 240px; align-items: flex-start; } @layer components { :where([data-state-layout], .public-site) button[data-component-id], :where([data-state-layout], .public-site) a[data-component-id]:where(.button-primary, .button-secondary, .button-outline, .button-quiet, .button-link, .button-danger), :where([data-state-layout], .public-site) [data-ck-button], :where([data-state-layout], .public-site) input:is([type="submit"], [type="reset"])[data-component-id] { font: inherit; color: inherit; transition: color 150ms, background-color 150ms, border-color 150ms; } :where([data-state-layout], .public-site) button[data-component-id]:where(:active), :where([data-state-layout], .public-site) a[data-component-id]:where(.button-primary, .button-secondary, .button-outline, .button-quiet, .button-link, .button-danger):where(:active), :where([data-state-layout], .public-site) [data-ck-button]:where(:active), :where([data-state-layout], .public-site) input:is([type="submit"], [type="reset"])[data-component-id]:where(:active) { transform: translateY(1px); } :where([data-state-layout], .public-site) button[data-component-id]:where(:focus-visible), :where([data-state-layout], .public-site) a[data-component-id]:where(.button-primary, .button-secondary, .button-outline, .button-quiet, .button-link, .button-danger):where(:focus-visible), :where([data-state-layout], .public-site) [data-ck-button]:where(:focus-visible), :where([data-state-layout], .public-site) input:is([type="submit"], [type="reset"])[data-component-id]:where(:focus-visible) { outline: 2px solid var(--ring); outline-offset: 2px; } :where([data-state-layout], .public-site) button[data-component-id]:where(:disabled, [aria-disabled="true"]), :where([data-state-layout], .public-site) a[data-component-id]:where(.button-primary, .button-secondary, .button-outline, .button-quiet, .button-link, .button-danger):where(:disabled, [aria-disabled="true"]), :where([data-state-layout], .public-site) [data-ck-button]:where(:disabled, [aria-disabled="true"]), :where([data-state-layout], .public-site) input:is([type="submit"], [type="reset"])[data-component-id]:where(:disabled, [aria-disabled="true"]) { opacity: 0.5; cursor: not-allowed; } :where([data-state-layout], .public-site) :is(button, a)[data-component-id]:is(.button-primary, .button-secondary, .button-outline, .button-quiet, .button-link, .button-danger), :where([data-state-layout], .public-site) [data-ck-button], :where([data-state-layout], .public-site) input[type="submit"][data-component-id]:where(:not([data-ck-own])), :where([data-state-layout], .public-site) input[type="reset"][data-component-id]:where(:not([data-ck-own])) { display: inline-flex; align-items: center; justify-content: center; gap: 0.5em; white-space: nowrap; border: 1px solid transparent; border-radius: var(--radius-pill, 0.5rem); font-weight: 500; text-decoration: none; min-height: calc(2.25rem * var(--density-scale, 1)); padding-inline: calc(1rem * var(--density-scale, 1)); transition: color 150ms, background-color 150ms, border-color 150ms; } :where([data-state-layout], .public-site) :is(button, a)[data-component-id].control-sm { min-height: calc(2rem * var(--density-scale, 1)); padding-inline: calc(0.75rem * var(--density-scale, 1)); } :where([data-state-layout], .public-site) :is(button, a)[data-component-id].control-md { min-height: calc(2.25rem * var(--density-scale, 1)); padding-inline: calc(1rem * var(--density-scale, 1)); } :where([data-state-layout], .public-site) :is(button, a)[data-component-id].control-lg { min-height: calc(2.5rem * var(--density-scale, 1)); padding-inline: calc(1.5rem * var(--density-scale, 1)); } :where([data-state-layout], .public-site) :is(button, a)[data-component-id].button-primary, :where([data-state-layout], .public-site) [data-ck-button="primary"], :where([data-state-layout], .public-site) input[type="submit"][data-component-id]:where(:not([data-ck-own])) { background: var(--primary); color: var(--primary-foreground); } @media (hover: hover) { :where([data-state-layout], .public-site) :is(button, a)[data-component-id].button-primary:where(:hover), :where([data-state-layout], .public-site) [data-ck-button="primary"]:where(:hover), :where([data-state-layout], .public-site) input[type="submit"][data-component-id]:where(:not([data-ck-own])):where(:hover) { background: color-mix(in oklab, var(--primary) 90%, transparent); } } :where([data-state-layout], .public-site) :is(button, a)[data-component-id].button-secondary, :where([data-state-layout], .public-site) [data-ck-button="secondary"] { background: var(--secondary); color: var(--secondary-foreground); } @media (hover: hover) { :where([data-state-layout], .public-site) :is(button, a)[data-component-id].button-secondary:where(:hover), :where([data-state-layout], .public-site) [data-ck-button="secondary"]:where(:hover) { background: color-mix(in oklab, var(--secondary) 80%, transparent); } } :where([data-state-layout], .public-site) :is(button, a)[data-component-id].button-outline, :where([data-state-layout], .public-site) [data-ck-button="outline"], :where([data-state-layout], .public-site) input[type="reset"][data-component-id]:where(:not([data-ck-own])) { background: var(--background); border-color: var(--input); color: var(--foreground); } @media (hover: hover) { :where([data-state-layout], .public-site) :is(button, a)[data-component-id].button-outline:where(:hover), :where([data-state-layout], .public-site) [data-ck-button="outline"]:where(:hover), :where([data-state-layout], .public-site) input[type="reset"][data-component-id]:where(:not([data-ck-own])):where(:hover) { background: var(--accent); color: var(--accent-foreground); } } :where([data-state-layout], .public-site) :is(button, a)[data-component-id].button-quiet, :where([data-state-layout], .public-site) [data-ck-button="quiet"] { background: transparent; } @media (hover: hover) { :where([data-state-layout], .public-site) :is(button, a)[data-component-id].button-quiet:where(:hover), :where([data-state-layout], .public-site) [data-ck-button="quiet"]:where(:hover) { background: var(--accent); color: var(--accent-foreground); } } :where([data-state-layout], .public-site) :is(button, a)[data-component-id].button-link, :where([data-state-layout], .public-site) [data-ck-button="link"] { background: transparent; color: var(--primary); text-underline-offset: 4px; padding-inline: 0; min-height: 0; } @media (hover: hover) { :where([data-state-layout], .public-site) :is(button, a)[data-component-id].button-link:where(:hover), :where([data-state-layout], .public-site) [data-ck-button="link"]:where(:hover) { text-decoration: underline; } } :where([data-state-layout], .public-site) :is(button, a)[data-component-id].button-danger, :where([data-state-layout], .public-site) [data-ck-button="danger"] { background: var(--destructive); color: var(--destructive-foreground); } @media (hover: hover) { :where([data-state-layout], .public-site) :is(button, a)[data-component-id].button-danger:where(:hover), :where([data-state-layout], .public-site) [data-ck-button="danger"]:where(:hover) { background: color-mix(in oklab, var(--destructive) 90%, transparent); } } :where([data-state-layout], .public-site) :where(textarea, select, input:not([type]), input[type="text"], input[type="email"], input[type="password"], input[type="number"], input[type="tel"], input[type="url"], input[type="search"], input[type="date"], input[type="time"], input[type="datetime-local"], input[type="month"], input[type="week"])[data-component-id], :where([data-state-layout], .public-site) [data-ck-field] { font: inherit; color: inherit; min-width: 0; transition: color 150ms, background-color 150ms, border-color 150ms; } :where([data-state-layout], .public-site) :where(textarea, select, input:not([type]), input[type="text"], input[type="email"], input[type="password"], input[type="number"], input[type="tel"], input[type="url"], input[type="search"], input[type="date"], input[type="time"], input[type="datetime-local"], input[type="month"], input[type="week"])[data-component-id]:where(:not([data-ck-own])), :where([data-state-layout], .public-site) [data-ck-field] { background: transparent; min-height: calc(2.25rem * var(--density-scale, 1)); padding: calc(0.25rem * var(--density-scale, 1)) calc(0.75rem * var(--density-scale, 1)); border: var(--control-border-width, 1px) solid var(--input); border-radius: var(--radius-pill, 0.5rem); } :where([data-state-layout], .public-site) textarea[data-component-id]:where(:not([data-ck-own])) { min-height: calc(4rem * var(--density-scale, 1)); padding-block: calc(0.5rem * var(--density-scale, 1)); border-radius: var(--radius, 0.5rem); } :where([data-state-layout], .public-site) select[multiple][data-component-id]:where(:not([data-ck-own])) { border-radius: var(--radius, 0.5rem); } :where([data-state-layout], .public-site) :where(textarea, select, input:not([type]), input[type="text"], input[type="email"], input[type="password"], input[type="number"], input[type="tel"], input[type="url"], input[type="search"], input[type="date"], input[type="time"], input[type="datetime-local"], input[type="month"], input[type="week"])[data-component-id].control-sm, :where([data-state-layout], .public-site) [data-ck-field].control-sm { min-height: calc(2rem * var(--density-scale, 1)); padding-inline: calc(0.5rem * var(--density-scale, 1)); } :where([data-state-layout], .public-site) :where(textarea, select, input:not([type]), input[type="text"], input[type="email"], input[type="password"], input[type="number"], input[type="tel"], input[type="url"], input[type="search"], input[type="date"], input[type="time"], input[type="datetime-local"], input[type="month"], input[type="week"])[data-component-id].control-md, :where([data-state-layout], .public-site) [data-ck-field].control-md { min-height: calc(2.25rem * var(--density-scale, 1)); padding-inline: calc(0.75rem * var(--density-scale, 1)); } :where([data-state-layout], .public-site) :where(textarea, select, input:not([type]), input[type="text"], input[type="email"], input[type="password"], input[type="number"], input[type="tel"], input[type="url"], input[type="search"], input[type="date"], input[type="time"], input[type="datetime-local"], input[type="month"], input[type="week"])[data-component-id].control-lg, :where([data-state-layout], .public-site) [data-ck-field].control-lg { min-height: calc(2.5rem * var(--density-scale, 1)); padding-inline: calc(1rem * var(--density-scale, 1)); } :where([data-state-layout], .public-site) :where(textarea, select, input:not([type]), input[type="text"], input[type="email"], input[type="password"], input[type="number"], input[type="tel"], input[type="url"], input[type="search"], input[type="date"], input[type="time"], input[type="datetime-local"], input[type="month"], input[type="week"])[data-component-id]::placeholder, :where([data-state-layout], .public-site) [data-ck-field]::placeholder { color: var(--muted-foreground); opacity: 1; } :where([data-state-layout], .public-site) :where(textarea, select, input:not([type]), input[type="text"], input[type="email"], input[type="password"], input[type="number"], input[type="tel"], input[type="url"], input[type="search"], input[type="date"], input[type="time"], input[type="datetime-local"], input[type="month"], input[type="week"])[data-component-id]:where([aria-invalid="true"], :user-invalid), :where([data-state-layout], .public-site) [data-ck-field]:where([aria-invalid="true"], :user-invalid) { border-color: var(--destructive); } :where([data-state-layout], .public-site) :where(textarea, select, input:not([type]), input[type="text"], input[type="email"], input[type="password"], input[type="number"], input[type="tel"], input[type="url"], input[type="search"], input[type="date"], input[type="time"], input[type="datetime-local"], input[type="month"], input[type="week"])[data-component-id]:where(:focus-visible), :where([data-state-layout], .public-site) [data-ck-field]:where(:focus-visible) { outline: 2px solid var(--ring); outline-offset: 2px; border-color: var(--ring); } :where([data-state-layout], .public-site) :where(textarea, select, input:not([type]), input[type="text"], input[type="email"], input[type="password"], input[type="number"], input[type="tel"], input[type="url"], input[type="search"], input[type="date"], input[type="time"], input[type="datetime-local"], input[type="month"], input[type="week"])[data-component-id]:where(:disabled, [aria-disabled="true"]), :where([data-state-layout], .public-site) [data-ck-field]:where(:disabled, [aria-disabled="true"]) { opacity: 0.5; cursor: not-allowed; } :where([data-state-layout], .public-site) select:not([multiple]):is([data-component-id], [data-ck-field]) { appearance: none; background-image: linear-gradient(45deg, transparent calc(50% - 1.1px), currentColor calc(50% - 0.6px) calc(50% + 0.6px), transparent calc(50% + 1.1px)), linear-gradient(135deg, transparent calc(50% - 1.1px), currentColor calc(50% - 0.6px) calc(50% + 0.6px), transparent calc(50% + 1.1px)); background-repeat: no-repeat; background-size: 0.3125rem 0.3125rem; background-position: right 1.0625rem center, right 0.75rem center; } :where([data-state-layout], .public-site) select:not([multiple]):is([data-component-id], [data-ck-field]):where(:dir(rtl)) { background-position: left 0.75rem center, left 1.0625rem center; } :where([data-state-layout], .public-site) select:not([multiple])[data-component-id]:where(:not([data-ck-own])), :where([data-state-layout], .public-site) select:not([multiple])[data-ck-field] { padding-inline-end: calc(calc(0.75rem * var(--density-scale, 1)) + 1.25rem); } :where([data-state-layout], .public-site) input:is([type="checkbox"], [type="radio"])[data-component-id], :where([data-state-layout], .public-site) input[data-ck-check] { accent-color: var(--primary); width: 1rem; height: 1rem; } :where([data-state-layout], .public-site) input[type="checkbox"][data-component-id]:where(:not([data-ck-own])), :where([data-state-layout], .public-site) input[type="checkbox"][data-ck-check], :where([data-state-layout], .public-site) input[type="radio"][data-component-id]:where(:not([data-ck-own])), :where([data-state-layout], .public-site) input[type="radio"][data-ck-check] { appearance: none; display: inline-grid; place-content: center; flex-shrink: 0; border: var(--control-border-width, 1px) solid var(--input); border-radius: min(var(--radius, 0.5rem), 0.25rem); background: transparent; color: var(--primary-foreground); cursor: pointer; transition: color 150ms, background-color 150ms, border-color 150ms; } :where([data-state-layout], .public-site) input[type="radio"][data-component-id]:where(:not([data-ck-own])), :where([data-state-layout], .public-site) input[type="radio"][data-ck-check] { border-radius: 50%; } :where([data-state-layout], .public-site) input[type="checkbox"][data-component-id]:where(:not([data-ck-own])):where([aria-invalid="true"], :user-invalid), :where([data-state-layout], .public-site) input[type="checkbox"][data-ck-check]:where([aria-invalid="true"], :user-invalid), :where([data-state-layout], .public-site) input[type="radio"][data-component-id]:where(:not([data-ck-own])):where([aria-invalid="true"], :user-invalid), :where([data-state-layout], .public-site) input[type="radio"][data-ck-check]:where([aria-invalid="true"], :user-invalid) { border-color: var(--destructive); } :where([data-state-layout], .public-site) input[type="checkbox"][data-component-id]:where(:not([data-ck-own])):where(:checked), :where([data-state-layout], .public-site) input[type="checkbox"][data-ck-check]:where(:checked), :where([data-state-layout], .public-site) input[type="radio"][data-component-id]:where(:not([data-ck-own])):where(:checked), :where([data-state-layout], .public-site) input[type="radio"][data-ck-check]:where(:checked) { background: var(--primary); border-color: var(--primary); } :where([data-state-layout], .public-site) input[type="checkbox"][data-component-id]:where(:not([data-ck-own])):where(:checked)::after, :where([data-state-layout], .public-site) input[type="checkbox"][data-ck-check]:where(:checked)::after { content: ""; width: 0.875rem; height: 0.875rem; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 0.875rem no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 0.875rem no-repeat; } :where([data-state-layout], .public-site) input[type="radio"][data-component-id]:where(:not([data-ck-own])):where(:checked)::after, :where([data-state-layout], .public-site) input[type="radio"][data-ck-check]:where(:checked)::after { content: ""; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: currentColor; } :where([data-state-layout], .public-site) input:is([type="checkbox"], [type="radio"])[data-component-id]:where(:focus-visible), :where([data-state-layout], .public-site) input[data-ck-check]:where(:focus-visible) { outline: 2px solid var(--ring); outline-offset: 2px; } :where([data-state-layout], .public-site) input:is([type="checkbox"], [type="radio"])[data-component-id]:where(:disabled, [aria-disabled="true"]), :where([data-state-layout], .public-site) input[data-ck-check]:where(:disabled, [aria-disabled="true"]) { opacity: 0.5; cursor: not-allowed; } :where([data-state-layout], .public-site) input[type="range"][data-component-id]:where(:not([data-ck-own])) { appearance: none; width: 100%; height: 1.5rem; padding: 0; background: transparent; overflow: clip; cursor: pointer; } :where([data-state-layout], .public-site) input[type="range"][data-component-id]:where(:not([data-ck-own]))::-webkit-slider-runnable-track { height: 100%; background: transparent; } :where([data-state-layout], .public-site) input[type="range"][data-component-id]:where(:not([data-ck-own]))::-webkit-slider-thumb { appearance: none; width: 1rem; height: 1rem; border-radius: 50%; background: var(--background); box-shadow: inset 0 0 0 1px var(--primary); transition: box-shadow 150ms; margin-top: 0.25rem; border-image: linear-gradient(90deg, var(--primary) 50%, var(--muted) 0) 0 1 / calc(50% - 0.375rem / 2) 100vw / 0 100vw; } :where([data-state-layout], .public-site) input[type="range"][data-component-id]:where(:not([data-ck-own]))::-moz-range-track { height: 0.375rem; border-radius: 9999px; background: var(--muted); } :where([data-state-layout], .public-site) input[type="range"][data-component-id]:where(:not([data-ck-own]))::-moz-range-progress { height: 0.375rem; border-radius: 9999px; background: var(--primary); } :where([data-state-layout], .public-site) input[type="range"][data-component-id]:where(:not([data-ck-own]))::-moz-range-thumb { appearance: none; width: 1rem; height: 1rem; border-radius: 50%; background: var(--background); box-shadow: inset 0 0 0 1px var(--primary); transition: box-shadow 150ms; border: none; } :where([data-state-layout], .public-site) input[type="range"][data-component-id]:where(:not([data-ck-own])):where(:focus-visible) { outline: none; } :where([data-state-layout], .public-site) input[type="range"][data-component-id]:where(:not([data-ck-own])):where(:focus-visible)::-webkit-slider-thumb { box-shadow: inset 0 0 0 1px var(--primary), 0 0 0 3px color-mix(in oklab, var(--ring) 50%, transparent); } :where([data-state-layout], .public-site) input[type="range"][data-component-id]:where(:not([data-ck-own])):where(:focus-visible)::-moz-range-thumb { box-shadow: inset 0 0 0 1px var(--primary), 0 0 0 3px color-mix(in oklab, var(--ring) 50%, transparent); } :where([data-state-layout], .public-site) input[type="range"][data-component-id]:where(:not([data-ck-own])):where(:disabled) { opacity: 0.5; cursor: not-allowed; } :where([data-state-layout], .public-site) input[type="color"][data-component-id]:where(:not([data-ck-own])) { appearance: none; width: calc(2.25rem * var(--density-scale, 1)); height: calc(2.25rem * var(--density-scale, 1)); padding: 0.1875rem; border: var(--control-border-width, 1px) solid var(--input); border-radius: var(--radius-pill, 0.5rem); background: transparent; cursor: pointer; } :where([data-state-layout], .public-site) input[type="color"][data-component-id]:where(:not([data-ck-own]))::-webkit-color-swatch-wrapper { padding: 0; } :where([data-state-layout], .public-site) input[type="color"][data-component-id]:where(:not([data-ck-own]))::-webkit-color-swatch { border: none; border-radius: calc(var(--radius-pill, 0.5rem) - 0.1875rem); } :where([data-state-layout], .public-site) input[type="color"][data-component-id]:where(:not([data-ck-own]))::-moz-color-swatch { border: none; border-radius: calc(var(--radius-pill, 0.5rem) - 0.1875rem); } :where([data-state-layout], .public-site) input[type="color"][data-component-id]:where(:not([data-ck-own])):where(:focus-visible) { outline: 2px solid var(--ring); outline-offset: 2px; } :where([data-state-layout], .public-site) input[type="color"][data-component-id]:where(:not([data-ck-own])):where(:disabled, [aria-disabled="true"]) { opacity: 0.5; cursor: not-allowed; } :where([data-state-layout], .public-site) [data-ck-chip] { display: inline-flex; align-items: center; justify-content: center; gap: 0.5em; white-space: nowrap; font: inherit; font-weight: 500; min-height: calc(2rem * var(--density-scale, 1)); padding-inline: calc(0.75rem * var(--density-scale, 1)); border: 1px solid var(--input); border-radius: var(--radius-pill, 0.5rem); background: var(--background); color: var(--foreground); cursor: pointer; transition: color 150ms, background-color 150ms, border-color 150ms; } @media (hover: hover) { :where([data-state-layout], .public-site) [data-ck-chip]:where(:hover) { background: var(--accent); color: var(--accent-foreground); } } :where([data-state-layout], .public-site) [data-ck-chip][aria-pressed="true"] { background: var(--primary); border-color: var(--primary); color: var(--primary-foreground); } @media (hover: hover) { :where([data-state-layout], .public-site) [data-ck-chip][aria-pressed="true"]:where(:hover) { background: color-mix(in oklab, var(--primary) 90%, transparent); } } :where([data-state-layout], .public-site) [data-ck-chip]:where(:active) { transform: translateY(1px); } :where([data-state-layout], .public-site) [data-ck-chip]:where(:focus-visible) { outline: 2px solid var(--ring); outline-offset: 2px; } :where([data-state-layout], .public-site) [data-ck-chip]:where(:disabled, [aria-disabled="true"]) { opacity: 0.5; cursor: not-allowed; } } @media (min-width: 407px) { [data-state-layout], .public-site { --type-w: 407; } } @media (min-width: 439px) { [data-state-layout], .public-site { --type-w: 439; } } @media (min-width: 471px) { [data-state-layout], .public-site { --type-w: 471; } } @media (min-width: 503px) { [data-state-layout], .public-site { --type-w: 503; } } @media (min-width: 535px) { [data-state-layout], .public-site { --type-w: 535; } } @media (min-width: 567px) { [data-state-layout], .public-site { --type-w: 567; } } @media (min-width: 599px) { [data-state-layout], .public-site { --type-w: 599; } } @media (min-width: 631px) { [data-state-layout], .public-site { --type-w: 631; } } @media (min-width: 663px) { [data-state-layout], .public-site { --type-w: 663; } } @media (min-width: 695px) { [data-state-layout], .public-site { --type-w: 695; } } @media (min-width: 727px) { [data-state-layout], .public-site { --type-w: 727; } } @media (min-width: 759px) { [data-state-layout], .public-site { --type-w: 759; } } @media (min-width: 791px) { [data-state-layout], .public-site { --type-w: 791; } } @media (min-width: 823px) { [data-state-layout], .public-site { --type-w: 823; } } @media (min-width: 855px) { [data-state-layout], .public-site { --type-w: 855; } } @media (min-width: 887px) { [data-state-layout], .public-site { --type-w: 887; } } @media (min-width: 919px) { [data-state-layout], .public-site { --type-w: 919; } } @media (min-width: 951px) { [data-state-layout], .public-site { --type-w: 951; } } @media (min-width: 983px) { [data-state-layout], .public-site { --type-w: 983; } } @media (min-width: 1015px) { [data-state-layout], .public-site { --type-w: 1015; } } @media (min-width: 1047px) { [data-state-layout], .public-site { --type-w: 1047; } } @media (min-width: 1079px) { [data-state-layout], .public-site { --type-w: 1079; } } @media (min-width: 1111px) { [data-state-layout], .public-site { --type-w: 1111; } } @media (min-width: 1143px) { [data-state-layout], .public-site { --type-w: 1143; } } @media (min-width: 1175px) { [data-state-layout], .public-site { --type-w: 1175; } } @media (min-width: 1207px) { [data-state-layout], .public-site { --type-w: 1207; } } @media (min-width: 1239px) { [data-state-layout], .public-site { --type-w: 1239; } } @media (min-width: 1271px) { [data-state-layout], .public-site { --type-w: 1271; } } @media (min-width: 1280px) { [data-state-layout], .public-site { --type-w: 1280; } }

We'd love to hear from you.

Welcome