/** Shopify CDN: Minification failed

Line 252:0 All "@import" rules must come first

**/
/* Generated from Figma Variables. First mode = :host default.
   FLOAT tokens are unitless — multiply by 1px in calc() where a length is needed. */

:host {
  --b400: rgb(11,74,211); /* @kind color */
  --b500-t3: rgba(18,84,227,0.03); /* @kind color */
  --b500: rgb(18,84,227); /* @kind color */
  --b600: rgb(60,121,252); /* @kind color */
  --border-radiuses-border-radius-0px: 0; /* @kind radius */
  --border-radiuses-border-radius-12px: 12; /* @kind radius */
  --border-radiuses-border-radius-16px-default: 16; /* @kind radius */
  --border-radiuses-border-radius-24px: 24; /* @kind radius */
  --border-radiuses-border-radius-4px: 4; /* @kind radius */
  --border-radiuses-border-radius-8px: 8; /* @kind radius */
  --border-radiuses-border-radius-pill: 500; /* @kind radius */
  --color-n000: rgb(0,0,0); /* @kind color */
  --color-n300: rgb(57,57,67); /* @kind color */
  --colors-green: rgb(61,165,40); /* @kind color */
  --colors-n-500: rgb(142,142,142); /* @kind color */
  --colors-n-900: rgb(246,250,255); /* @kind color */
  --colors-neutral-00: rgb(0,0,0); /* @kind color */
  --colors-neutral-100: rgb(255,255,255); /* @kind color */
  --colors-neutral-10: rgb(34,34,34); /* @kind color */
  --colors-neutral-20: rgb(74,74,74); /* @kind color */
  --colors-neutral-60: rgb(142,142,142); /* @kind color */
  --colors-neutral-80: rgb(223,223,223); /* @kind color */
  --colors-purple-50: rgb(131,55,223); /* @kind color */
  --colors-purple-60: rgb(139,52,244); /* @kind color */
  --colors-yellow-50: rgb(255,210,28); /* @kind color */
  --container-size-container-max-width: 1140; /* @kind spacing */
  --depth-200: 8; /* @kind shadow */
  --font-families-font-family-1: "Montserrat"; /* @kind font */
  --font-families-font-family-2: "Segoe UI"; /* @kind font */
  --font-family-brand-font: "Plus Jakarta Sans"; /* @kind font */
  --miscellaneous-buttons-label-destructive-disabled: rgba(255,56,60,0.5); /* @kind color */
  --n-100: rgb(33,36,41); /* @kind color */
  --n-10: rgb(34,34,34); /* @kind color */
  --n-500: rgb(104,110,119); /* @kind color */
  --n000-t5: rgba(0,0,0,0.05); /* @kind color */
  --n000: rgb(0,0,0); /* @kind color */
  --n1000-2: rgb(255,255,255); /* @kind color */
  --n1000-t50: rgba(255,255,255,0.5); /* @kind color */
  --n1000: rgb(255,255,255); /* @kind color */
  --n100: rgb(24,32,44); /* @kind color */
  --n200: rgb(27,40,58); /* @kind color */
  --n300: rgb(90,106,130); /* @kind color */
  --n700: rgb(162,168,176); /* @kind color */
  --n800: rgb(215,221,229); /* @kind color */
  --n900: rgb(244,246,248); /* @kind color */
  --n950: rgb(252,252,252); /* @kind color */
  --r500: rgb(228,35,35); /* @kind color */
  --radius-pill: 1000; /* @kind radius */
  --spaces-s-10: 64; /* @kind spacing */
  --spaces-s-2: 8; /* @kind spacing */
  --spaces-s-4: 16; /* @kind spacing */
  --spaces-s-5: 20; /* @kind spacing */
  --spaces-s-7: 28; /* @kind spacing */
  --spaces-s-8: 32; /* @kind spacing */
  --spaces-s-9: 48; /* @kind spacing */
  --spaces-space-0px: 0; /* @kind spacing */
  --spaces-space-12px: 12; /* @kind spacing */
  --spaces-space-16px-2: 16; /* @kind spacing */
  --spaces-space-16px: 16; /* @kind spacing */
  --spaces-space-20px: 20; /* @kind spacing */
  --spaces-space-24px-2: 24; /* @kind spacing */
  --spaces-space-24px: 24; /* @kind spacing */
  --spaces-space-28px: 28; /* @kind spacing */
  --spaces-space-32px: 32; /* @kind spacing */
  --spaces-space-40px: 40; /* @kind spacing */
  --spaces-space-48px: 48; /* @kind spacing */
  --spaces-space-4px: 4; /* @kind spacing */
  --spaces-space-60px: 60; /* @kind spacing */
  --spaces-space-80px: 80; /* @kind spacing */
  --spaces-space-8px: 8; /* @kind spacing */
  --stroke-stroke-2px: 2; /* @kind spacing */
  --stroke-stroke-4px: 4; /* @kind spacing */
  --text-sizes-text-size-14px: 14; /* @kind font */
  --text-sizes-text-size-16px: 16; /* @kind font */
  --website-width-desktop-container-width: 1200; /* @kind spacing */
  --website-width-min-body-hight: 600; /* @kind spacing */
  --website-width-mobile-container-paddings: var(--spaces-space-16px); /* @kind spacing */
  --website-width-mobile-container-width: 360; /* @kind spacing */
}

:host[data-mode="mode-2"] {
  --b400: rgb(11,74,211); /* @kind color */
  --b500-t3: rgba(18,84,227,0.03); /* @kind color */
  --b500: rgb(18,84,227); /* @kind color */
  --b600: rgb(60,121,252); /* @kind color */
  --border-radiuses-border-radius-0px: 4; /* @kind radius */
  --border-radiuses-border-radius-12px: 0; /* @kind radius */
  --border-radiuses-border-radius-16px-default: 16; /* @kind radius */
  --border-radiuses-border-radius-24px: 24; /* @kind radius */
  --border-radiuses-border-radius-4px: 4; /* @kind radius */
  --border-radiuses-border-radius-8px: 8; /* @kind radius */
  --border-radiuses-border-radius-pill: 500; /* @kind radius */
  --font-families-font-family-1: "Montserrat"; /* @kind font */
  --font-families-font-family-2: "Segoe UI"; /* @kind font */
  --n000-t5: rgba(0,0,0,0.05); /* @kind color */
  --n000: rgb(24,32,44); /* @kind color */
  --n1000-2: rgb(255,255,255); /* @kind color */
  --n1000-t50: rgba(255,255,255,0.5); /* @kind color */
  --n100: rgb(24,32,44); /* @kind color */
  --n200: rgb(27,40,58); /* @kind color */
  --n300: rgb(90,106,130); /* @kind color */
  --n700: rgb(162,168,176); /* @kind color */
  --n800: rgb(215,221,229); /* @kind color */
  --n900: rgb(244,246,248); /* @kind color */
  --n950: rgb(252,252,252); /* @kind color */
  --r500: rgb(228,35,35); /* @kind color */
  --spaces-space-0px: 0; /* @kind spacing */
  --spaces-space-12px: 12; /* @kind spacing */
  --spaces-space-16px: 16; /* @kind spacing */
  --spaces-space-20px: 20; /* @kind spacing */
  --spaces-space-24px: 24; /* @kind spacing */
  --spaces-space-28px: 28; /* @kind spacing */
  --spaces-space-32px: 32; /* @kind spacing */
  --spaces-space-40px: 40; /* @kind spacing */
  --spaces-space-48px: 48; /* @kind spacing */
  --spaces-space-4px: 4; /* @kind spacing */
  --spaces-space-60px: 60; /* @kind spacing */
  --spaces-space-80px: 80; /* @kind spacing */
  --spaces-space-8px: 8; /* @kind spacing */
  --stroke-stroke-2px: 2; /* @kind spacing */
  --stroke-stroke-4px: 4; /* @kind spacing */
  --text-sizes-text-size-14px: 14; /* @kind font */
  --text-sizes-text-size-16px: 16; /* @kind font */
  --website-width-desktop-container-width: 1200; /* @kind spacing */
  --website-width-min-body-hight: 600; /* @kind spacing */
  --website-width-mobile-container-paddings: var(--spaces-space-16px); /* @kind spacing */
  --website-width-mobile-container-width: 360; /* @kind spacing */
}

:host[data-mode="12"] {
  --b400: rgb(11,74,211); /* @kind color */
  --b500-t3: rgba(18,84,227,0.03); /* @kind color */
  --b500: rgb(18,84,227); /* @kind color */
  --b600: rgb(60,121,252); /* @kind color */
  --border-radiuses-border-radius-0px: 4; /* @kind radius */
  --border-radiuses-border-radius-12px: 0; /* @kind radius */
  --border-radiuses-border-radius-16px-default: 16; /* @kind radius */
  --border-radiuses-border-radius-24px: 24; /* @kind radius */
  --border-radiuses-border-radius-4px: 4; /* @kind radius */
  --border-radiuses-border-radius-8px: 8; /* @kind radius */
  --border-radiuses-border-radius-pill: 500; /* @kind radius */
  --font-families-font-family-1: "Montserrat"; /* @kind font */
  --font-families-font-family-2: "Segoe UI"; /* @kind font */
  --n000-t5: rgba(0,0,0,0.05); /* @kind color */
  --n000: rgb(24,32,44); /* @kind color */
  --n1000-2: rgb(255,255,255); /* @kind color */
  --n1000-t50: rgba(255,255,255,0.5); /* @kind color */
  --n100: rgb(24,32,44); /* @kind color */
  --n200: rgb(27,40,58); /* @kind color */
  --n300: rgb(90,106,130); /* @kind color */
  --n700: rgb(162,168,176); /* @kind color */
  --n800: rgb(215,221,229); /* @kind color */
  --n900: rgb(244,246,248); /* @kind color */
  --n950: rgb(252,252,252); /* @kind color */
  --r500: rgb(228,35,35); /* @kind color */
  --spaces-space-0px: 0; /* @kind spacing */
  --spaces-space-12px: 12; /* @kind spacing */
  --spaces-space-16px: 16; /* @kind spacing */
  --spaces-space-20px: 20; /* @kind spacing */
  --spaces-space-24px: 24; /* @kind spacing */
  --spaces-space-28px: 28; /* @kind spacing */
  --spaces-space-32px: 32; /* @kind spacing */
  --spaces-space-40px: 40; /* @kind spacing */
  --spaces-space-48px: 48; /* @kind spacing */
  --spaces-space-4px: 4; /* @kind spacing */
  --spaces-space-60px: 60; /* @kind spacing */
  --spaces-space-80px: 80; /* @kind spacing */
  --spaces-space-8px: 8; /* @kind spacing */
  --stroke-stroke-2px: 2; /* @kind spacing */
  --stroke-stroke-4px: 4; /* @kind spacing */
  --text-sizes-text-size-14px: 14; /* @kind font */
  --text-sizes-text-size-16px: 16; /* @kind font */
  --website-width-desktop-container-width: 1200; /* @kind spacing */
  --website-width-min-body-hight: 600; /* @kind spacing */
  --website-width-mobile-container-paddings: var(--spaces-space-16px); /* @kind spacing */
  --website-width-mobile-container-width: 360; /* @kind spacing */
}

:host[data-mode="mode-3"] {
  --b400: rgb(11,74,211); /* @kind color */
  --b500-t3: rgba(18,84,227,0.03); /* @kind color */
  --b500: rgb(18,84,227); /* @kind color */
  --b600: rgb(60,121,252); /* @kind color */
  --border-radiuses-border-radius-0px: 4; /* @kind radius */
  --border-radiuses-border-radius-12px: 0; /* @kind radius */
  --border-radiuses-border-radius-16px-default: 16; /* @kind radius */
  --border-radiuses-border-radius-24px: 24; /* @kind radius */
  --border-radiuses-border-radius-4px: 4; /* @kind radius */
  --border-radiuses-border-radius-8px: 8; /* @kind radius */
  --border-radiuses-border-radius-pill: 500; /* @kind radius */
  --font-families-font-family-1: "Montserrat"; /* @kind font */
  --font-families-font-family-2: "Segoe UI"; /* @kind font */
  --n000-t5: rgba(0,0,0,0.05); /* @kind color */
  --n000: rgb(24,32,44); /* @kind color */
  --n1000-2: rgb(255,255,255); /* @kind color */
  --n1000-t50: rgba(255,255,255,0.5); /* @kind color */
  --n100: rgb(24,32,44); /* @kind color */
  --n200: rgb(27,40,58); /* @kind color */
  --n300: rgb(90,106,130); /* @kind color */
  --n700: rgb(162,168,176); /* @kind color */
  --n800: rgb(215,221,229); /* @kind color */
  --n900: rgb(244,246,248); /* @kind color */
  --n950: rgb(252,252,252); /* @kind color */
  --r500: rgb(228,35,35); /* @kind color */
  --spaces-space-0px: 0; /* @kind spacing */
  --spaces-space-12px: 12; /* @kind spacing */
  --spaces-space-16px: 16; /* @kind spacing */
  --spaces-space-20px: 20; /* @kind spacing */
  --spaces-space-24px: 24; /* @kind spacing */
  --spaces-space-28px: 28; /* @kind spacing */
  --spaces-space-32px: 32; /* @kind spacing */
  --spaces-space-40px: 40; /* @kind spacing */
  --spaces-space-48px: 48; /* @kind spacing */
  --spaces-space-4px: 4; /* @kind spacing */
  --spaces-space-60px: 60; /* @kind spacing */
  --spaces-space-80px: 80; /* @kind spacing */
  --spaces-space-8px: 8; /* @kind spacing */
  --stroke-stroke-2px: 2; /* @kind spacing */
  --stroke-stroke-4px: 4; /* @kind spacing */
  --text-sizes-text-size-14px: 14; /* @kind font */
  --text-sizes-text-size-16px: 16; /* @kind font */
  --website-width-desktop-container-width: 1200; /* @kind spacing */
  --website-width-min-body-hight: 600; /* @kind spacing */
  --website-width-mobile-container-paddings: var(--spaces-space-16px); /* @kind spacing */
  --website-width-mobile-container-width: 360; /* @kind spacing */
}

:host[data-theme="dark"], .dark {
  --miscellaneous-buttons-label-destructive-disabled: rgba(255,66,69,0.5); /* @kind color */
  --miscellaneous-buttons-label-destructive-disabled: rgba(255,97,101,0.5); /* @kind color */
}

:host[data-theme="light"], .light {
  --miscellaneous-buttons-label-destructive-disabled: rgba(233,21,45,0.5); /* @kind color */
}

/* No TEXT/EFFECT styles in this file. */

/* Knoxlabs webfonts. Montserrat is the core brand face (all product + deck copy).
   Plus Jakarta Sans and Inter appear in the source file on a small number of
   dense UI surfaces (table rows, form labels). Segoe UI is a legacy fallback only.
   Served from Google Fonts — no binaries ship with the .fig source. */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=Plus+Jakarta+Sans:ital,wght@0,200..800;1,200..800&family=Inter:wght@100..900&family=Permanent+Marker&display=swap');

/* Semantic colour aliases over the raw Figma Variables in fig-tokens.css. */
:host{
  /* Brand blue ramp (raw: --b400/--b500/--b600) */
  --knox-blue-600:#3C79FC;--knox-blue-500:#1254E3;--knox-blue-400:#0B4AD3;
  --knox-blue-a12:rgba(18,84,227,0.12);--knox-blue-a20:rgba(18,84,227,0.2);--knox-blue-a03:rgba(18,84,227,0.03);
  /* Neutral ramp, dark → light (raw: --n000 … --n1000) */
  --knox-n000:#000000;--knox-n100:#18202C;--knox-n200:#1B283A;--knox-n300:#5A6A82;
  --knox-n700:#A2A8B0;--knox-n800:#D7DDE5;--knox-n900:#F4F6F8;--knox-n950:#FCFCFC;--knox-n1000:#FFFFFF;
  /* Semantic */
  --knox-red-500:#E42323;--knox-error:#FF0000;--knox-error-a50:rgba(255,56,60,0.5);
  --knox-green-500:#3DA528;--knox-yellow-500:#FFD21C;--knox-purple-500:#8337DF;--knox-purple-600:#8B34F4;
  /* Signature brand gradient — the headset mark, deck washes, accent rules */
  --knox-gradient:linear-gradient(146.793deg,#0095FF 19.87%,#1512C0 54.35%,#BF00FF 88.84%); /* @kind color */
  --knox-gradient-stop-1:#0095FF; /* @kind color */--knox-gradient-stop-2:#1512C0;--knox-gradient-stop-3:#BF00FF;
  /* Roles */
  --text-primary:var(--knox-n100);--text-secondary:var(--knox-n300);--text-disabled:var(--knox-n700);
  --text-inverse:var(--knox-n1000);--text-link:var(--knox-blue-500);--text-error:var(--knox-error);
  --surface-page:var(--knox-n1000);--surface-subtle:var(--knox-n900);--surface-card:var(--knox-n1000);
  --surface-raised:var(--knox-n950);--surface-dark:var(--knox-n100);
  --border-default:var(--knox-n800);--border-subtle:var(--knox-n900);--border-strong:var(--knox-blue-400);
  --border-hairline:rgba(0,0,0,0.05);
  --focus-ring:var(--knox-blue-500);
  /* Deck / dark surfaces */
  --deck-bg:#18202C;--deck-wash-blue:rgba(60,121,252,0.5);--deck-wash-violet:rgba(200,81,255,0.5);
  --deck-card-border:rgba(255,255,255,0.12);--deck-text-muted:#D7DDE5;
}
a{color:var(--text-link);text-decoration:none}
a:hover{color:var(--knox-blue-400);text-decoration:underline}

/* Type. The source file defines no named Figma text styles — the ladder below is
   transcribed from the literal values used across the Design-system page,
   the website frames and the deck masters. */
:host{
  --font-core:"Montserrat",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --font-ui:"Plus Jakarta Sans",var(--font-core);
  --font-form:"Inter",var(--font-core);
  --font-marker:"Permanent Marker",var(--font-core);
  /* Deck scale (1920×1080) */
  --type-deck-display:60px;--type-deck-title:48px;--type-deck-lead:32px;--type-deck-body:24px;
  /* Product scale */
  --type-h1:35.64px;--type-h2:28px;--type-h3:24px;--type-h4:21px;--type-body-lg:18px;
  --type-body:16px;--type-body-sm:15px;--type-label:14px;--type-caption:13px;--type-micro:11px;
  /* Line heights, verbatim from source */
  --lh-tight:1.2; /* @kind font */--lh-heading:1.3; /* @kind font */--lh-body:1.5; /* @kind font */--lh-flat:100%; /* @kind font */
  /* Weights in use */
  --fw-light:300; /* @kind font */--fw-regular:400; /* @kind font */--fw-medium:500; /* @kind font */--fw-semibold:600; /* @kind font */--fw-bold:700; /* @kind font */--fw-extrabold:800; /* @kind font */--fw-black:900; /* @kind font */
  --ls-button:0.020em; /* @kind font */
}

/* Spacing, radii, elevation, motion. Spacing + radius scales are the Figma
   Variables (fig-tokens.css) expressed as ready-to-use lengths. */
:host{
  --space-0:0px;--space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:20px;
  --space-6:24px;--space-7:28px;--space-8:32px;--space-9:40px;--space-10:48px;--space-11:60px;
  --space-12:64px;--space-13:80px;
  --radius-0:0px;--radius-xs:4px;--radius-sm:5px;--radius-md:8px;--radius-lg:12px;
  --radius-xl:16px;--radius-2xl:20px;--radius-3xl:24px;--radius-pill:500px;--radius-full:1000px;
  --stroke-1:1px;--stroke-2:2px;--stroke-4:4px;
  --container-desktop:1200px;--container-narrow:1140px;--container-mobile:360px;--mobile-gutter:16px;
  /* Elevation — the source uses inset hairlines far more than drop shadows */
  --hairline:0 0 0 1px rgba(0,0,0,0.05); /* @kind shadow */
  --hairline-border:inset 0 0 0 1px #D7DDE5; /* @kind shadow */
  --ring-brand:inset 0 0 0 2px #1254E3; /* @kind shadow */
  --shadow-xs:0 1px 2px rgba(0,0,0,0.02);
  --shadow-sm:0 2px 8px rgba(0,0,0,0.08);
  --shadow-md:0 4px 16px rgba(0,0,0,0.1);
  --shadow-lg:0 12px 32px rgba(0,0,0,0.15);
  --shadow-brand:0 8px 24px rgba(15,13,122,0.25);
  --ease-standard:cubic-bezier(0.4,0,0.2,1); /* @kind other */
  --duration-fast:120ms; /* @kind other */--duration-base:180ms; /* @kind other */--duration-slow:280ms; /* @kind other */
}