/* Josh Lamb Systems design system: fonts + tokens + base layer. Generated by `npm run build`; do not edit. */
/* Josh Lamb Systems webfonts. Poppins (display), Source Sans 3 (body) and IBM Plex Mono (utility), all SIL Open Font License 1.1. */
@font-face {
  font-family: "Poppins";
  src: url("./fonts/poppins-400-latin.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Poppins";
  src: url("./fonts/poppins-400-latin-ext.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Poppins";
  src: url("./fonts/poppins-500-latin.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Poppins";
  src: url("./fonts/poppins-500-latin-ext.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Poppins";
  src: url("./fonts/poppins-600-latin.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Poppins";
  src: url("./fonts/poppins-600-latin-ext.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Poppins";
  src: url("./fonts/poppins-700-latin.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Poppins";
  src: url("./fonts/poppins-700-latin-ext.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Poppins";
  src: url("./fonts/poppins-800-latin.woff2") format("woff2");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Poppins";
  src: url("./fonts/poppins-800-latin-ext.woff2") format("woff2");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Source Sans 3 is a variable font: one file covers every weight. */
@font-face {
  font-family: "Source Sans 3";
  src: url("./fonts/source-sans-3-latin.woff2") format("woff2");
  font-weight: 200 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* IBM Plex Mono (utility face: labels, data, big numbers), SIL Open Font License 1.1. Latin subset. */
@font-face {
  font-family: "IBM Plex Mono";
  src: url("./fonts/ibm-plex-mono-500-latin.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("./fonts/ibm-plex-mono-600-latin.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* -------------------------------------------
 *  Autogenerated by ⛋ Terrazzo. DO NOT EDIT!
 * ------------------------------------------- */

:root {
  color-scheme: light;
/* Secondary buttons, focused inputs */
  --jls-border-width-thick: 1.5px;
  --jls-border-width-thin: 1px;
  /* Brand blue fills: primary buttons, highlights */
  --jls-color-accent: var(--jls-palette-blue-500);
  --jls-color-accent-hover: var(--jls-palette-blue-600);
  /* Tinted backgrounds behind accent content */
  --jls-color-accent-soft: var(--jls-palette-blue-50);
  /* Links and accent-colored text */
  --jls-color-accent-text: var(--jls-palette-blue-500);
  /* Paper: the page background */
  --jls-color-bg: var(--jls-palette-navy-50);
  /* Alternating section background */
  --jls-color-bg-alt: var(--jls-palette-navy-100);
  /* Hairline rules, dividers, dashed separators */
  --jls-color-border: var(--jls-palette-navy-200);
  /* Ink outlines: cards, panels, inputs, secondary buttons */
  --jls-color-border-strong: var(--jls-palette-navy-800);
  --jls-color-danger: var(--jls-palette-red-700);
  --jls-color-danger-soft: var(--jls-palette-red-50);
  /* Focus rings */
  --jls-color-focus: var(--jls-palette-blue-400);
  /* Graph-paper lines on bg */
  --jls-color-grid: #064ef224;
  /* Highlighter: the one key phrase, one plotted cell, the CTA band button shadow */
  --jls-color-highlight: var(--jls-palette-yellow-300);
  /* Highlighter stroke behind text (a translucent stroke in dark mode) */
  --jls-color-highlight-mark: var(--jls-palette-yellow-300);
  /* Links and accent text on inverse-bg */
  --jls-color-inverse-accent-text: var(--jls-palette-blue-300);
  /* Navy ink sections: closing CTAs, section-break slides. */
  --jls-color-inverse-bg: var(--jls-palette-navy-900);
  /* Hairlines on inverse-bg */
  --jls-color-inverse-border: var(--jls-palette-navy-700);
  /* Graph-paper lines on inverse-bg */
  --jls-color-inverse-grid: #85abff24;
  /* Headings on inverse-bg */
  --jls-color-inverse-text: var(--jls-palette-white);
  /* Captions and meta on inverse-bg */
  --jls-color-inverse-text-faint: var(--jls-palette-navy-400);
  /* Body copy on inverse-bg */
  --jls-color-inverse-text-soft: var(--jls-palette-navy-300);
  /* Text and icons on accent fills and the gradient */
  --jls-color-on-accent: var(--jls-palette-white);
  /* Filled (plotted) grid cells */
  --jls-color-plot: #064ef21f;
  --jls-color-success: var(--jls-palette-green-700);
  --jls-color-success-soft: var(--jls-palette-green-50);
  /* Cards, panels, inputs */
  --jls-color-surface: var(--jls-palette-white);
  /* Headings and primary text (navy ink) */
  --jls-color-text: var(--jls-palette-navy-900);
  /* Captions, meta, eyebrows (still AA) */
  --jls-color-text-faint: var(--jls-palette-navy-500);
  /* Body copy, descriptions */
  --jls-color-text-soft: var(--jls-palette-navy-600);
  --jls-color-warning: var(--jls-palette-amber-700);
  --jls-color-warning-soft: var(--jls-palette-amber-50);
  --jls-duration-base: 200ms;
  --jls-duration-fast: 150ms;
  --jls-duration-slow: 320ms;
  --jls-easing-out: cubic-bezier(0.16, 1, 0.3, 1);
  --jls-easing-standard: cubic-bezier(0.2, 0, 0, 1);
  /* Paragraphs, lists, form text, long reading. */
  --jls-font-family-body: "Source Sans 3", system-ui, -apple-system, "Segoe UI", "Helvetica Neue", "Arial", sans-serif;
  /* Headings, buttons, labels, numbers (brandbook face). */
  --jls-font-family-display: "Poppins", system-ui, -apple-system, "Segoe UI", "Helvetica Neue", "Arial", sans-serif;
  /* Utility face: eyebrows, labels, tags, scores and big numbers. */
  --jls-font-family-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", "Menlo", "Consolas", monospace;
  --jls-font-line-height-normal: 1.45;
  --jls-font-line-height-relaxed: 1.6;
  --jls-font-line-height-snug: 1.25;
  --jls-font-line-height-tight: 1.1;
  /* 30px */
  --jls-font-size-2xl: 1.875rem;
  /* 38px */
  --jls-font-size-3xl: 2.375rem;
  /* 48px */
  --jls-font-size-4xl: 3rem;
  /* 60px */
  --jls-font-size-5xl: 3.75rem;
  /* 72px */
  --jls-font-size-6xl: 4.5rem;
  /* 96px: slide numbers */
  --jls-font-size-7xl: 6rem;
  /* 20px */
  --jls-font-size-lg: 1.25rem;
  /* 17px: body text */
  --jls-font-size-md: 1.0625rem;
  /* 15px */
  --jls-font-size-sm: 0.9375rem;
  /* 24px */
  --jls-font-size-xl: 1.5rem;
  /* 13px */
  --jls-font-size-xs: 0.8125rem;
  --jls-font-weight-bold: 700;
  --jls-font-weight-extrabold: 800;
  --jls-font-weight-medium: 500;
  --jls-font-weight-regular: 400;
  --jls-font-weight-semibold: 600;
  /* Brand gradient (brandbook): light blue to blue, drawn at 135deg. Primary buttons, hero accents, the logo symbol. */
  --jls-gradient-brand: linear-gradient(135deg, #2c6dff 0%, #064ef2 100%);
  /* Grid cell: 6 × the 8px baseline. */
  --jls-grid-cell: 48px;
  --jls-grid-line: 1px;
  /* Opacity of the grid layer. */
  --jls-grid-strength: 0.8;
  /* Max width of page content */
  --jls-layout-content: 1120px;
  /* Minimum safe margin on letterheads and print (brandbook) */
  --jls-layout-print-margin: 48px;
  /* Max width of running text */
  --jls-layout-prose: 720px;
  --jls-palette-amber-50: #fffaeb;
  --jls-palette-amber-300: #fdb022;
  --jls-palette-amber-500: #f79009;
  --jls-palette-amber-700: #b54708;
  --jls-palette-amber-950: #2e1f05;
  /* Brand black (brandbook) */
  --jls-palette-black: #000;
  --jls-palette-blue-50: #eef3ff;
  --jls-palette-blue-100: #dbe6ff;
  --jls-palette-blue-200: #b8ceff;
  --jls-palette-blue-300: #85abff;
  /* Brand light blue (brandbook). Fills and gradients only: 4.4:1 on white, too low for small text. */
  --jls-palette-blue-400: #2c6dff;
  /* Brand blue (brandbook). The primary brand color: 6.2:1 on white. */
  --jls-palette-blue-500: #064ef2;
  --jls-palette-blue-600: #0540c4;
  --jls-palette-blue-700: #04339c;
  --jls-palette-blue-800: #032675;
  --jls-palette-blue-900: #021a52;
  --jls-palette-green-50: #ecfdf3;
  --jls-palette-green-300: #47cd89;
  --jls-palette-green-500: #12b76a;
  --jls-palette-green-700: #067647;
  --jls-palette-green-950: #0b2a1c;
  /* Paper: the page ground in light mode. */
  --jls-palette-navy-50: #f5f7fb;
  --jls-palette-navy-100: #edf1f8;
  /* Hairline rules on paper. */
  --jls-palette-navy-200: #d5dcea;
  --jls-palette-navy-300: #bcc8e6;
  --jls-palette-navy-400: #93a2c8;
  --jls-palette-navy-500: #56627e;
  --jls-palette-navy-600: #38445e;
  /* Blueprint rules in dark mode. */
  --jls-palette-navy-700: #243769;
  /* Ink rules: card and input outlines. */
  --jls-palette-navy-800: #1b2a4a;
  /* Blueprint surface. */
  --jls-palette-navy-850: #0f1d44;
  /* Brand ink (navy). Headings and text; replaces pure black. */
  --jls-palette-navy-900: #0b1530;
  /* Blueprint: the page ground in dark mode. */
  --jls-palette-navy-925: #0a1532;
  --jls-palette-navy-950: #050b1f;
  --jls-palette-neutral-50: #f7f9fc;
  --jls-palette-neutral-100: #f2f4f7;
  --jls-palette-neutral-200: #eaecf0;
  --jls-palette-neutral-300: #d0d5dd;
  --jls-palette-neutral-400: #8a92a3;
  --jls-palette-neutral-500: #667085;
  --jls-palette-neutral-600: #3d4451;
  --jls-palette-neutral-700: #2a2f3a;
  --jls-palette-neutral-800: #1d2230;
  --jls-palette-neutral-900: #101828;
  --jls-palette-neutral-950: #0b0e14;
  --jls-palette-red-50: #fef3f2;
  --jls-palette-red-300: #f97066;
  --jls-palette-red-500: #f04438;
  --jls-palette-red-700: #b42318;
  --jls-palette-red-950: #2d0f0d;
  /* Brand white (brandbook) */
  --jls-palette-white: #fff;
  /* Highlighter. One phrase or one plotted cell per view, always under ink text. */
  --jls-palette-yellow-300: #ffe36e;
  /* Large panels, slide frames, modals */
  --jls-radius-lg: 8px;
  /* Buttons, inputs, cards (notebook corners) */
  --jls-radius-md: 4px;
  /* Avatars only */
  --jls-radius-pill: 9999px;
  /* Tags, plotted cells */
  --jls-radius-sm: 2px;
  /* Primary button glow (site) */
  --jls-shadow-accent: 0px 2px 6px #064ef240;
  /* Popovers, modals, floating mockups */
  --jls-shadow-lg: 0px 20px 48px #1018281f;
  /* Card hover (site) */
  --jls-shadow-md: 0px 8px 24px #1018280f;
  /* Interactive cards and focused inputs */
  --jls-shadow-offset-accent: 4px 4px #064ef2;
  /* Featured panels (scorecards, the hero visual) */
  --jls-shadow-offset-md: 6px 6px #d5dcea;
  /* Primary buttons at rest: a hard ink offset */
  --jls-shadow-offset-sm: 3px 3px #1b2a4a;
  --jls-shadow-sm: 0px 1px 2px #1018280d;
  --jls-space-2xl: 48px;
  --jls-space-3xl: 64px;
  --jls-space-4xl: 96px;
  --jls-space-5xl: 128px;
  --jls-space-lg: 24px;
  --jls-space-md: 16px;
  --jls-space-sm: 12px;
  --jls-space-xl: 32px;
  --jls-space-xs: 8px;
  --jls-space-xxs: 4px;
  --jls-typography-body: var(--jls-typography-body-font-weight) var(--jls-typography-body-font-size)/var(--jls-typography-body-line-height) var(--jls-typography-body-font-family);
  --jls-typography-body-font-family: var(--jls-font-family-body);
  --jls-typography-body-font-size: var(--jls-font-size-md);
  --jls-typography-body-font-weight: var(--jls-font-weight-regular);
  --jls-typography-body-letter-spacing: 0rem;
  --jls-typography-body-line-height: var(--jls-font-line-height-relaxed);
  --jls-typography-button: var(--jls-typography-button-font-weight) var(--jls-typography-button-font-size)/var(--jls-typography-button-line-height) var(--jls-typography-button-font-family);
  --jls-typography-button-font-family: var(--jls-font-family-display);
  --jls-typography-button-font-size: var(--jls-font-size-sm);
  --jls-typography-button-font-weight: var(--jls-font-weight-semibold);
  --jls-typography-button-letter-spacing: 0rem;
  --jls-typography-button-line-height: 1;
  /* Inline data: values in tables, scorecards, the meta line under CTAs. */
  --jls-typography-data: var(--jls-typography-data-font-weight) var(--jls-typography-data-font-size)/var(--jls-typography-data-line-height) var(--jls-typography-data-font-family);
  /* Inline data: values in tables, scorecards, the meta line under CTAs. */
  --jls-typography-data-font-family: var(--jls-font-family-mono);
  /* Inline data: values in tables, scorecards, the meta line under CTAs. */
  --jls-typography-data-font-size: var(--jls-font-size-xs);
  /* Inline data: values in tables, scorecards, the meta line under CTAs. */
  --jls-typography-data-font-weight: var(--jls-font-weight-medium);
  /* Inline data: values in tables, scorecards, the meta line under CTAs. */
  --jls-typography-data-letter-spacing: 0.0125rem;
  /* Inline data: values in tables, scorecards, the meta line under CTAs. */
  --jls-typography-data-line-height: var(--jls-font-line-height-normal);
  --jls-typography-display: var(--jls-typography-display-font-weight) var(--jls-typography-display-font-size)/var(--jls-typography-display-line-height) var(--jls-typography-display-font-family);
  --jls-typography-display-font-family: var(--jls-font-family-display);
  --jls-typography-display-font-size: var(--jls-font-size-6xl);
  --jls-typography-display-font-weight: var(--jls-font-weight-extrabold);
  --jls-typography-display-letter-spacing: -0.135rem;
  --jls-typography-display-line-height: var(--jls-font-line-height-tight);
  /* Small uppercase mono label above headings, on tags and card meta. Set text-transform: uppercase. */
  --jls-typography-eyebrow: var(--jls-typography-eyebrow-font-weight) var(--jls-typography-eyebrow-font-size)/var(--jls-typography-eyebrow-line-height) var(--jls-typography-eyebrow-font-family);
  /* Small uppercase mono label above headings, on tags and card meta. Set text-transform: uppercase. */
  --jls-typography-eyebrow-font-family: var(--jls-font-family-mono);
  /* Small uppercase mono label above headings, on tags and card meta. Set text-transform: uppercase. */
  --jls-typography-eyebrow-font-size: var(--jls-font-size-xs);
  /* Small uppercase mono label above headings, on tags and card meta. Set text-transform: uppercase. */
  --jls-typography-eyebrow-font-weight: var(--jls-font-weight-semibold);
  /* Small uppercase mono label above headings, on tags and card meta. Set text-transform: uppercase. */
  --jls-typography-eyebrow-letter-spacing: 0.05rem;
  /* Small uppercase mono label above headings, on tags and card meta. Set text-transform: uppercase. */
  --jls-typography-eyebrow-line-height: var(--jls-font-line-height-normal);
  --jls-typography-h1: var(--jls-typography-h1-font-weight) var(--jls-typography-h1-font-size)/var(--jls-typography-h1-line-height) var(--jls-typography-h1-font-family);
  --jls-typography-h1-font-family: var(--jls-font-family-display);
  --jls-typography-h1-font-size: var(--jls-font-size-4xl);
  --jls-typography-h1-font-weight: var(--jls-font-weight-bold);
  --jls-typography-h1-letter-spacing: -0.09rem;
  --jls-typography-h1-line-height: var(--jls-font-line-height-tight);
  --jls-typography-h2: var(--jls-typography-h2-font-weight) var(--jls-typography-h2-font-size)/var(--jls-typography-h2-line-height) var(--jls-typography-h2-font-family);
  --jls-typography-h2-font-family: var(--jls-font-family-display);
  --jls-typography-h2-font-size: var(--jls-font-size-3xl);
  --jls-typography-h2-font-weight: var(--jls-font-weight-bold);
  --jls-typography-h2-letter-spacing: -0.05rem;
  --jls-typography-h2-line-height: var(--jls-font-line-height-snug);
  --jls-typography-h3: var(--jls-typography-h3-font-weight) var(--jls-typography-h3-font-size)/var(--jls-typography-h3-line-height) var(--jls-typography-h3-font-family);
  --jls-typography-h3-font-family: var(--jls-font-family-display);
  --jls-typography-h3-font-size: var(--jls-font-size-xl);
  --jls-typography-h3-font-weight: var(--jls-font-weight-bold);
  --jls-typography-h3-letter-spacing: -0.015rem;
  --jls-typography-h3-line-height: var(--jls-font-line-height-snug);
  --jls-typography-h4: var(--jls-typography-h4-font-weight) var(--jls-typography-h4-font-size)/var(--jls-typography-h4-line-height) var(--jls-typography-h4-font-family);
  --jls-typography-h4-font-family: var(--jls-font-family-display);
  --jls-typography-h4-font-size: var(--jls-font-size-lg);
  --jls-typography-h4-font-weight: var(--jls-font-weight-semibold);
  --jls-typography-h4-letter-spacing: 0rem;
  --jls-typography-h4-line-height: var(--jls-font-line-height-snug);
  --jls-typography-lead: var(--jls-typography-lead-font-weight) var(--jls-typography-lead-font-size)/var(--jls-typography-lead-line-height) var(--jls-typography-lead-font-family);
  --jls-typography-lead-font-family: var(--jls-font-family-body);
  --jls-typography-lead-font-size: var(--jls-font-size-lg);
  --jls-typography-lead-font-weight: var(--jls-font-weight-regular);
  --jls-typography-lead-letter-spacing: 0rem;
  --jls-typography-lead-line-height: var(--jls-font-line-height-relaxed);
  /* Big numbers: prices, hours saved, ROI scores. Mono so digits line up. */
  --jls-typography-number: var(--jls-typography-number-font-weight) var(--jls-typography-number-font-size)/var(--jls-typography-number-line-height) var(--jls-typography-number-font-family);
  /* Big numbers: prices, hours saved, ROI scores. Mono so digits line up. */
  --jls-typography-number-font-family: var(--jls-font-family-mono);
  /* Big numbers: prices, hours saved, ROI scores. Mono so digits line up. */
  --jls-typography-number-font-size: var(--jls-font-size-4xl);
  /* Big numbers: prices, hours saved, ROI scores. Mono so digits line up. */
  --jls-typography-number-font-weight: var(--jls-font-weight-semibold);
  /* Big numbers: prices, hours saved, ROI scores. Mono so digits line up. */
  --jls-typography-number-letter-spacing: -0.09rem;
  /* Big numbers: prices, hours saved, ROI scores. Mono so digits line up. */
  --jls-typography-number-line-height: 1;
  --jls-typography-small: var(--jls-typography-small-font-weight) var(--jls-typography-small-font-size)/var(--jls-typography-small-line-height) var(--jls-typography-small-font-family);
  --jls-typography-small-font-family: var(--jls-font-family-body);
  --jls-typography-small-font-size: var(--jls-font-size-sm);
  --jls-typography-small-font-weight: var(--jls-font-weight-regular);
  --jls-typography-small-letter-spacing: 0rem;
  --jls-typography-small-line-height: var(--jls-font-line-height-normal);
}

.jls-dark,
[data-theme='dark'] {
  color-scheme: dark;
/* Secondary buttons, focused inputs */
  --jls-border-width-thick: 1.5px;
  --jls-border-width-thin: 1px;
  /* Brand blue fills: primary buttons, highlights */
  --jls-color-accent: var(--jls-palette-blue-500);
  --jls-color-accent-hover: var(--jls-palette-blue-600);
  /* Tinted backgrounds behind accent content */
  --jls-color-accent-soft: var(--jls-palette-blue-900);
  /* Links and accent-colored text */
  --jls-color-accent-text: var(--jls-palette-blue-200);
  /* Blueprint: the page background */
  --jls-color-bg: var(--jls-palette-navy-925);
  /* Alternating section background */
  --jls-color-bg-alt: var(--jls-palette-navy-950);
  /* Hairlines, card borders, dividers */
  --jls-color-border: var(--jls-palette-navy-700);
  /* Hovered borders, input outlines */
  --jls-color-border-strong: var(--jls-palette-blue-300);
  --jls-color-danger: var(--jls-palette-red-300);
  --jls-color-danger-soft: var(--jls-palette-red-950);
  /* Focus rings */
  --jls-color-focus: var(--jls-palette-blue-400);
  /* Graph-paper lines on bg */
  --jls-color-grid: #85abff2e;
  /* Highlighter: the one key phrase, one plotted cell, the CTA band button shadow */
  --jls-color-highlight: var(--jls-palette-yellow-300);
  /* Highlighter stroke behind text (a translucent stroke in dark mode) */
  --jls-color-highlight-mark: #ffe36e61;
  /* Links and accent text on inverse-bg */
  --jls-color-inverse-accent-text: var(--jls-palette-blue-300);
  /* Brand black sections: closing CTAs, section-break slides. Stays black in both themes. */
  --jls-color-inverse-bg: var(--jls-palette-navy-950);
  /* Hairlines on inverse-bg */
  --jls-color-inverse-border: var(--jls-palette-navy-700);
  /* Graph-paper lines on inverse-bg */
  --jls-color-inverse-grid: #85abff24;
  /* Headings on inverse-bg */
  --jls-color-inverse-text: var(--jls-palette-white);
  /* Captions and meta on inverse-bg */
  --jls-color-inverse-text-faint: var(--jls-palette-navy-400);
  /* Body copy on inverse-bg */
  --jls-color-inverse-text-soft: var(--jls-palette-navy-300);
  /* Text and icons on accent fills and the gradient */
  --jls-color-on-accent: var(--jls-palette-white);
  /* Filled (plotted) grid cells */
  --jls-color-plot: #85abff2e;
  --jls-color-success: var(--jls-palette-green-300);
  --jls-color-success-soft: var(--jls-palette-green-950);
  /* Cards, panels, inputs */
  --jls-color-surface: var(--jls-palette-navy-850);
  /* Headings and primary text */
  --jls-color-text: var(--jls-palette-blue-50);
  /* Captions, meta, eyebrows (still AA) */
  --jls-color-text-faint: var(--jls-palette-navy-400);
  /* Body copy, descriptions */
  --jls-color-text-soft: var(--jls-palette-navy-300);
  --jls-color-warning: var(--jls-palette-amber-300);
  --jls-color-warning-soft: var(--jls-palette-amber-950);
  --jls-duration-base: 200ms;
  --jls-duration-fast: 150ms;
  --jls-duration-slow: 320ms;
  --jls-easing-out: cubic-bezier(0.16, 1, 0.3, 1);
  --jls-easing-standard: cubic-bezier(0.2, 0, 0, 1);
  /* Paragraphs, lists, form text, long reading. */
  --jls-font-family-body: "Source Sans 3", system-ui, -apple-system, "Segoe UI", "Helvetica Neue", "Arial", sans-serif;
  /* Headings, buttons, labels, numbers (brandbook face). */
  --jls-font-family-display: "Poppins", system-ui, -apple-system, "Segoe UI", "Helvetica Neue", "Arial", sans-serif;
  /* Utility face: eyebrows, labels, tags, scores and big numbers. */
  --jls-font-family-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", "Menlo", "Consolas", monospace;
  --jls-font-line-height-normal: 1.45;
  --jls-font-line-height-relaxed: 1.6;
  --jls-font-line-height-snug: 1.25;
  --jls-font-line-height-tight: 1.1;
  /* 30px */
  --jls-font-size-2xl: 1.875rem;
  /* 38px */
  --jls-font-size-3xl: 2.375rem;
  /* 48px */
  --jls-font-size-4xl: 3rem;
  /* 60px */
  --jls-font-size-5xl: 3.75rem;
  /* 72px */
  --jls-font-size-6xl: 4.5rem;
  /* 96px: slide numbers */
  --jls-font-size-7xl: 6rem;
  /* 20px */
  --jls-font-size-lg: 1.25rem;
  /* 17px: body text */
  --jls-font-size-md: 1.0625rem;
  /* 15px */
  --jls-font-size-sm: 0.9375rem;
  /* 24px */
  --jls-font-size-xl: 1.5rem;
  /* 13px */
  --jls-font-size-xs: 0.8125rem;
  --jls-font-weight-bold: 700;
  --jls-font-weight-extrabold: 800;
  --jls-font-weight-medium: 500;
  --jls-font-weight-regular: 400;
  --jls-font-weight-semibold: 600;
  /* Brand gradient (brandbook): light blue to blue, drawn at 135deg. Primary buttons, hero accents, the logo symbol. */
  --jls-gradient-brand: linear-gradient(135deg, #2c6dff 0%, #064ef2 100%);
  /* Grid cell: 6 × the 8px baseline. */
  --jls-grid-cell: 48px;
  --jls-grid-line: 1px;
  /* Opacity of the grid layer. */
  --jls-grid-strength: 0.8;
  /* Max width of page content */
  --jls-layout-content: 1120px;
  /* Minimum safe margin on letterheads and print (brandbook) */
  --jls-layout-print-margin: 48px;
  /* Max width of running text */
  --jls-layout-prose: 720px;
  --jls-palette-amber-50: #fffaeb;
  --jls-palette-amber-300: #fdb022;
  --jls-palette-amber-500: #f79009;
  --jls-palette-amber-700: #b54708;
  --jls-palette-amber-950: #2e1f05;
  /* Brand black (brandbook) */
  --jls-palette-black: #000;
  --jls-palette-blue-50: #eef3ff;
  --jls-palette-blue-100: #dbe6ff;
  --jls-palette-blue-200: #b8ceff;
  --jls-palette-blue-300: #85abff;
  /* Brand light blue (brandbook). Fills and gradients only: 4.4:1 on white, too low for small text. */
  --jls-palette-blue-400: #2c6dff;
  /* Brand blue (brandbook). The primary brand color: 6.2:1 on white. */
  --jls-palette-blue-500: #064ef2;
  --jls-palette-blue-600: #0540c4;
  --jls-palette-blue-700: #04339c;
  --jls-palette-blue-800: #032675;
  --jls-palette-blue-900: #021a52;
  --jls-palette-green-50: #ecfdf3;
  --jls-palette-green-300: #47cd89;
  --jls-palette-green-500: #12b76a;
  --jls-palette-green-700: #067647;
  --jls-palette-green-950: #0b2a1c;
  /* Paper: the page ground in light mode. */
  --jls-palette-navy-50: #f5f7fb;
  --jls-palette-navy-100: #edf1f8;
  /* Hairline rules on paper. */
  --jls-palette-navy-200: #d5dcea;
  --jls-palette-navy-300: #bcc8e6;
  --jls-palette-navy-400: #93a2c8;
  --jls-palette-navy-500: #56627e;
  --jls-palette-navy-600: #38445e;
  /* Blueprint rules in dark mode. */
  --jls-palette-navy-700: #243769;
  /* Ink rules: card and input outlines. */
  --jls-palette-navy-800: #1b2a4a;
  /* Blueprint surface. */
  --jls-palette-navy-850: #0f1d44;
  /* Brand ink (navy). Headings and text; replaces pure black. */
  --jls-palette-navy-900: #0b1530;
  /* Blueprint: the page ground in dark mode. */
  --jls-palette-navy-925: #0a1532;
  --jls-palette-navy-950: #050b1f;
  --jls-palette-neutral-50: #f7f9fc;
  --jls-palette-neutral-100: #f2f4f7;
  --jls-palette-neutral-200: #eaecf0;
  --jls-palette-neutral-300: #d0d5dd;
  --jls-palette-neutral-400: #8a92a3;
  --jls-palette-neutral-500: #667085;
  --jls-palette-neutral-600: #3d4451;
  --jls-palette-neutral-700: #2a2f3a;
  --jls-palette-neutral-800: #1d2230;
  --jls-palette-neutral-900: #101828;
  --jls-palette-neutral-950: #0b0e14;
  --jls-palette-red-50: #fef3f2;
  --jls-palette-red-300: #f97066;
  --jls-palette-red-500: #f04438;
  --jls-palette-red-700: #b42318;
  --jls-palette-red-950: #2d0f0d;
  /* Brand white (brandbook) */
  --jls-palette-white: #fff;
  /* Highlighter. One phrase or one plotted cell per view, always under ink text. */
  --jls-palette-yellow-300: #ffe36e;
  /* Large panels, slide frames, modals */
  --jls-radius-lg: 8px;
  /* Buttons, inputs, cards (notebook corners) */
  --jls-radius-md: 4px;
  /* Avatars only */
  --jls-radius-pill: 9999px;
  /* Tags, plotted cells */
  --jls-radius-sm: 2px;
  /* Primary button glow (site) */
  --jls-shadow-accent: 0px 2px 6px #064ef266;
  /* Popovers, modals, floating mockups */
  --jls-shadow-lg: 0px 20px 48px #10182899;
  /* Card hover (site) */
  --jls-shadow-md: 0px 8px 24px #10182880;
  /* Interactive cards and focused inputs */
  --jls-shadow-offset-accent: 4px 4px #2c6dff;
  /* Featured panels (scorecards, the hero visual) */
  --jls-shadow-offset-md: 6px 6px #243769;
  /* Primary buttons at rest: a hard ink offset */
  --jls-shadow-offset-sm: 3px 3px #85abff;
  --jls-shadow-sm: 0px 1px 2px #10182866;
  --jls-space-2xl: 48px;
  --jls-space-3xl: 64px;
  --jls-space-4xl: 96px;
  --jls-space-5xl: 128px;
  --jls-space-lg: 24px;
  --jls-space-md: 16px;
  --jls-space-sm: 12px;
  --jls-space-xl: 32px;
  --jls-space-xs: 8px;
  --jls-space-xxs: 4px;
  --jls-typography-body: var(--jls-typography-body-font-weight) var(--jls-typography-body-font-size)/var(--jls-typography-body-line-height) var(--jls-typography-body-font-family);
  --jls-typography-body-font-family: var(--jls-font-family-body);
  --jls-typography-body-font-size: var(--jls-font-size-md);
  --jls-typography-body-font-weight: var(--jls-font-weight-regular);
  --jls-typography-body-letter-spacing: 0rem;
  --jls-typography-body-line-height: var(--jls-font-line-height-relaxed);
  --jls-typography-button: var(--jls-typography-button-font-weight) var(--jls-typography-button-font-size)/var(--jls-typography-button-line-height) var(--jls-typography-button-font-family);
  --jls-typography-button-font-family: var(--jls-font-family-display);
  --jls-typography-button-font-size: var(--jls-font-size-sm);
  --jls-typography-button-font-weight: var(--jls-font-weight-semibold);
  --jls-typography-button-letter-spacing: 0rem;
  --jls-typography-button-line-height: 1;
  /* Inline data: values in tables, scorecards, the meta line under CTAs. */
  --jls-typography-data: var(--jls-typography-data-font-weight) var(--jls-typography-data-font-size)/var(--jls-typography-data-line-height) var(--jls-typography-data-font-family);
  /* Inline data: values in tables, scorecards, the meta line under CTAs. */
  --jls-typography-data-font-family: var(--jls-font-family-mono);
  /* Inline data: values in tables, scorecards, the meta line under CTAs. */
  --jls-typography-data-font-size: var(--jls-font-size-xs);
  /* Inline data: values in tables, scorecards, the meta line under CTAs. */
  --jls-typography-data-font-weight: var(--jls-font-weight-medium);
  /* Inline data: values in tables, scorecards, the meta line under CTAs. */
  --jls-typography-data-letter-spacing: 0.0125rem;
  /* Inline data: values in tables, scorecards, the meta line under CTAs. */
  --jls-typography-data-line-height: var(--jls-font-line-height-normal);
  --jls-typography-display: var(--jls-typography-display-font-weight) var(--jls-typography-display-font-size)/var(--jls-typography-display-line-height) var(--jls-typography-display-font-family);
  --jls-typography-display-font-family: var(--jls-font-family-display);
  --jls-typography-display-font-size: var(--jls-font-size-6xl);
  --jls-typography-display-font-weight: var(--jls-font-weight-extrabold);
  --jls-typography-display-letter-spacing: -0.135rem;
  --jls-typography-display-line-height: var(--jls-font-line-height-tight);
  /* Small uppercase mono label above headings, on tags and card meta. Set text-transform: uppercase. */
  --jls-typography-eyebrow: var(--jls-typography-eyebrow-font-weight) var(--jls-typography-eyebrow-font-size)/var(--jls-typography-eyebrow-line-height) var(--jls-typography-eyebrow-font-family);
  /* Small uppercase mono label above headings, on tags and card meta. Set text-transform: uppercase. */
  --jls-typography-eyebrow-font-family: var(--jls-font-family-mono);
  /* Small uppercase mono label above headings, on tags and card meta. Set text-transform: uppercase. */
  --jls-typography-eyebrow-font-size: var(--jls-font-size-xs);
  /* Small uppercase mono label above headings, on tags and card meta. Set text-transform: uppercase. */
  --jls-typography-eyebrow-font-weight: var(--jls-font-weight-semibold);
  /* Small uppercase mono label above headings, on tags and card meta. Set text-transform: uppercase. */
  --jls-typography-eyebrow-letter-spacing: 0.05rem;
  /* Small uppercase mono label above headings, on tags and card meta. Set text-transform: uppercase. */
  --jls-typography-eyebrow-line-height: var(--jls-font-line-height-normal);
  --jls-typography-h1: var(--jls-typography-h1-font-weight) var(--jls-typography-h1-font-size)/var(--jls-typography-h1-line-height) var(--jls-typography-h1-font-family);
  --jls-typography-h1-font-family: var(--jls-font-family-display);
  --jls-typography-h1-font-size: var(--jls-font-size-4xl);
  --jls-typography-h1-font-weight: var(--jls-font-weight-bold);
  --jls-typography-h1-letter-spacing: -0.09rem;
  --jls-typography-h1-line-height: var(--jls-font-line-height-tight);
  --jls-typography-h2: var(--jls-typography-h2-font-weight) var(--jls-typography-h2-font-size)/var(--jls-typography-h2-line-height) var(--jls-typography-h2-font-family);
  --jls-typography-h2-font-family: var(--jls-font-family-display);
  --jls-typography-h2-font-size: var(--jls-font-size-3xl);
  --jls-typography-h2-font-weight: var(--jls-font-weight-bold);
  --jls-typography-h2-letter-spacing: -0.05rem;
  --jls-typography-h2-line-height: var(--jls-font-line-height-snug);
  --jls-typography-h3: var(--jls-typography-h3-font-weight) var(--jls-typography-h3-font-size)/var(--jls-typography-h3-line-height) var(--jls-typography-h3-font-family);
  --jls-typography-h3-font-family: var(--jls-font-family-display);
  --jls-typography-h3-font-size: var(--jls-font-size-xl);
  --jls-typography-h3-font-weight: var(--jls-font-weight-bold);
  --jls-typography-h3-letter-spacing: -0.015rem;
  --jls-typography-h3-line-height: var(--jls-font-line-height-snug);
  --jls-typography-h4: var(--jls-typography-h4-font-weight) var(--jls-typography-h4-font-size)/var(--jls-typography-h4-line-height) var(--jls-typography-h4-font-family);
  --jls-typography-h4-font-family: var(--jls-font-family-display);
  --jls-typography-h4-font-size: var(--jls-font-size-lg);
  --jls-typography-h4-font-weight: var(--jls-font-weight-semibold);
  --jls-typography-h4-letter-spacing: 0rem;
  --jls-typography-h4-line-height: var(--jls-font-line-height-snug);
  --jls-typography-lead: var(--jls-typography-lead-font-weight) var(--jls-typography-lead-font-size)/var(--jls-typography-lead-line-height) var(--jls-typography-lead-font-family);
  --jls-typography-lead-font-family: var(--jls-font-family-body);
  --jls-typography-lead-font-size: var(--jls-font-size-lg);
  --jls-typography-lead-font-weight: var(--jls-font-weight-regular);
  --jls-typography-lead-letter-spacing: 0rem;
  --jls-typography-lead-line-height: var(--jls-font-line-height-relaxed);
  /* Big numbers: prices, hours saved, ROI scores. Mono so digits line up. */
  --jls-typography-number: var(--jls-typography-number-font-weight) var(--jls-typography-number-font-size)/var(--jls-typography-number-line-height) var(--jls-typography-number-font-family);
  /* Big numbers: prices, hours saved, ROI scores. Mono so digits line up. */
  --jls-typography-number-font-family: var(--jls-font-family-mono);
  /* Big numbers: prices, hours saved, ROI scores. Mono so digits line up. */
  --jls-typography-number-font-size: var(--jls-font-size-4xl);
  /* Big numbers: prices, hours saved, ROI scores. Mono so digits line up. */
  --jls-typography-number-font-weight: var(--jls-font-weight-semibold);
  /* Big numbers: prices, hours saved, ROI scores. Mono so digits line up. */
  --jls-typography-number-letter-spacing: -0.09rem;
  /* Big numbers: prices, hours saved, ROI scores. Mono so digits line up. */
  --jls-typography-number-line-height: 1;
  --jls-typography-small: var(--jls-typography-small-font-weight) var(--jls-typography-small-font-size)/var(--jls-typography-small-line-height) var(--jls-typography-small-font-family);
  --jls-typography-small-font-family: var(--jls-font-family-body);
  --jls-typography-small-font-size: var(--jls-font-size-sm);
  --jls-typography-small-font-weight: var(--jls-font-weight-regular);
  --jls-typography-small-letter-spacing: 0rem;
  --jls-typography-small-line-height: var(--jls-font-line-height-normal);
}

/* Josh Lamb Systems: base layer ("Field Notebook").
 * Optional element defaults and brand components, built only from --jls-* tokens.
 * Everything sits inside :where() or a single class so any page's own CSS wins without a specificity fight. */

:where(.jls, .jls *, .jls *::before, .jls *::after) {
  box-sizing: border-box;
}

:where(.jls) {
  margin: 0;
  background: var(--jls-color-bg);
  color: var(--jls-color-text-soft);
  font: var(--jls-typography-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

:where(.jls) :where(h1, h2, h3, h4) {
  margin: 0 0 var(--jls-space-sm);
  color: var(--jls-color-text);
  text-wrap: balance;
}
:where(.jls) :where(h1) {
  font: var(--jls-typography-h1);
  font-size: clamp(var(--jls-font-size-3xl), 5vw, var(--jls-font-size-4xl));
  letter-spacing: var(--jls-typography-h1-letter-spacing);
}
:where(.jls) :where(h2) {
  font: var(--jls-typography-h2);
  font-size: clamp(var(--jls-font-size-2xl), 3.6vw, var(--jls-font-size-3xl));
  letter-spacing: var(--jls-typography-h2-letter-spacing);
}
:where(.jls) :where(h3) {
  font: var(--jls-typography-h3);
  letter-spacing: var(--jls-typography-h3-letter-spacing);
}
:where(.jls) :where(h4) {
  font: var(--jls-typography-h4);
}
:where(.jls) :where(p, ul, ol) {
  margin: 0 0 var(--jls-space-md);
  text-wrap: pretty;
}
:where(.jls) :where(a) {
  color: var(--jls-color-accent-text);
  text-underline-offset: 0.18em;
}
:where(.jls) :where(strong, b) {
  color: var(--jls-color-text);
  font-weight: var(--jls-font-weight-semibold);
}
:where(.jls) :where(img, svg) {
  display: block;
  max-width: 100%;
}
:where(.jls) :where(:focus-visible) {
  outline: 2px solid var(--jls-color-focus);
  outline-offset: 2px;
}

/* ---- layout ---- */

.jls-container {
  width: 100%;
  max-width: calc(var(--jls-layout-content) + 2 * var(--jls-space-lg));
  margin-inline: auto;
  padding-inline: var(--jls-space-lg);
}
.jls-prose {
  max-width: var(--jls-layout-prose);
}
.jls-section {
  position: relative;
  isolation: isolate;
  padding-block: var(--jls-space-4xl);
}
.jls-section--alt {
  background: var(--jls-color-bg-alt);
}
.jls-section--inverse {
  --jls-grid-line-color: var(--jls-color-inverse-grid);
  background: var(--jls-color-inverse-bg);
  color: var(--jls-color-inverse-text-soft);
}
.jls-section--inverse :where(h1, h2, h3, h4, strong) {
  color: var(--jls-color-inverse-text);
}
.jls-section--inverse :where(a:not(.jls-btn)) {
  color: var(--jls-color-inverse-accent-text);
}
@media (max-width: 720px) {
  .jls-section {
    padding-block: var(--jls-space-3xl);
  }
}

/* ---- logo: the brandbook's minimum widths (150px phones, 250px tablets, 350px desktop) ---- */

.jls-logo {
  display: block;
  width: 150px;
  height: auto;
}
@media (min-width: 720px) {
  .jls-logo {
    width: 250px;
  }
}
@media (min-width: 1120px) {
  .jls-logo {
    width: 350px;
  }
}

/* ---- graph paper ("Rhythm"): one fade per section, from alternating corners ----
 * Add .jls-grid plus one direction to any positioned section. The grid sits behind the content,
 * is 48px cells (6 x the 8px baseline) at 80% strength, and fades into plain paper. */

.jls-grid {
  position: relative;
  isolation: isolate;
}
.jls-grid::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: var(--jls-grid-strength);
  background-image:
    linear-gradient(var(--jls-grid-line-color, var(--jls-color-grid)) var(--jls-grid-line), transparent var(--jls-grid-line)),
    linear-gradient(90deg, var(--jls-grid-line-color, var(--jls-color-grid)) var(--jls-grid-line), transparent var(--jls-grid-line));
  background-size: var(--jls-grid-cell) var(--jls-grid-cell);
  background-position: -1px -1px;
  -webkit-mask-image: var(--jls-grid-mask);
  mask-image: var(--jls-grid-mask);
}
.jls-grid--top-right {
  --jls-grid-mask: radial-gradient(ellipse 60% 120% at 100% 0%, #000 10%, transparent 70%);
}
.jls-grid--bottom-left {
  --jls-grid-mask: radial-gradient(ellipse 55% 90% at 0% 100%, #000 15%, transparent 70%);
}
.jls-grid--right {
  --jls-grid-mask: linear-gradient(100deg, transparent 35%, #000 85%);
}
.jls-grid--left {
  --jls-grid-mask: linear-gradient(260deg, transparent 35%, #000 85%);
}
.jls-grid--full {
  --jls-grid-mask: none;
}

/* ---- type helpers ---- */

.jls-eyebrow {
  display: block;
  margin-bottom: var(--jls-space-sm);
  color: var(--jls-color-accent-text);
  font: var(--jls-typography-eyebrow);
  letter-spacing: var(--jls-typography-eyebrow-letter-spacing);
  text-transform: uppercase;
}
.jls-lead {
  font: var(--jls-typography-lead);
  color: var(--jls-color-text-soft);
}
.jls-small {
  font: var(--jls-typography-small);
  color: var(--jls-color-text-faint);
}
.jls-data {
  font: var(--jls-typography-data);
  letter-spacing: var(--jls-typography-data-letter-spacing);
  color: var(--jls-color-text-faint);
  font-variant-numeric: tabular-nums;
}
/* the highlighter: one phrase per view, never on a whole sentence */
.jls-mark {
  padding: 0 0.08em;
  color: inherit;
  background: linear-gradient(transparent 52%, var(--jls-color-highlight-mark) 52%, var(--jls-color-highlight-mark) 92%, transparent 92%);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
.jls-gradient-text {
  background: var(--jls-gradient-brand);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ---- buttons ---- */

.jls-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--jls-space-xs);
  padding: 14px 28px;
  border: var(--jls-border-width-thin) solid transparent;
  border-radius: var(--jls-radius-md);
  font: var(--jls-typography-button);
  line-height: var(--jls-font-line-height-snug);
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition:
    transform var(--jls-duration-fast) var(--jls-easing-standard),
    box-shadow var(--jls-duration-fast) var(--jls-easing-standard),
    background-color var(--jls-duration-fast) var(--jls-easing-standard),
    border-color var(--jls-duration-fast) var(--jls-easing-standard);
}
.jls-btn svg {
  width: 1em;
  height: 1em;
  flex: none;
}
.jls-btn--primary {
  background: var(--jls-color-accent);
  color: var(--jls-color-on-accent);
  box-shadow: var(--jls-shadow-offset-sm);
}
.jls-btn--primary:hover {
  background: var(--jls-color-accent-hover);
  transform: translate(-1px, -1px);
  box-shadow: 4px 4px 0 var(--jls-color-border-strong);
}
.jls-btn--primary:active {
  transform: translate(2px, 2px);
  box-shadow: 1px 1px 0 var(--jls-color-border-strong);
}
.jls-section--inverse .jls-btn--primary {
  box-shadow: 3px 3px 0 var(--jls-color-highlight);
}
.jls-section--inverse .jls-btn--primary:hover {
  box-shadow: 4px 4px 0 var(--jls-color-highlight);
}
.jls-btn--secondary {
  background: var(--jls-color-surface);
  color: var(--jls-color-text);
  border-color: var(--jls-color-border-strong);
}
.jls-btn--secondary:hover {
  background: var(--jls-color-bg-alt);
}
.jls-btn--secondary:active {
  transform: translate(1px, 1px);
}
.jls-btn:disabled,
.jls-btn[aria-disabled='true'] {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}
.jls-btn--sm {
  padding: 10px 20px;
  font-size: var(--jls-font-size-xs);
}
.jls-btn--lg {
  padding: 17px 36px;
  font-size: var(--jls-font-size-md);
}

/* ---- surfaces ---- */

.jls-card {
  padding: var(--jls-space-lg);
  background: var(--jls-color-surface);
  border: var(--jls-border-width-thin) solid var(--jls-color-border-strong);
  border-radius: var(--jls-radius-md);
  transition:
    transform var(--jls-duration-fast) var(--jls-easing-standard),
    box-shadow var(--jls-duration-fast) var(--jls-easing-standard);
}
a.jls-card {
  display: block;
  color: inherit;
  text-decoration: none;
}
.jls-card--interactive:hover,
.jls-card--interactive:focus-visible {
  transform: translate(-2px, -2px);
  box-shadow: var(--jls-shadow-offset-accent);
}
/* featured panels (a scorecard, the hero visual): heavier offset, flush header */
.jls-card--featured {
  padding: 0;
  box-shadow: var(--jls-shadow-offset-md);
}
.jls-card__meta {
  display: flex;
  gap: var(--jls-space-xs);
  align-items: baseline;
  margin-bottom: var(--jls-space-md);
  padding-bottom: var(--jls-space-sm);
  border-bottom: var(--jls-border-width-thin) dashed var(--jls-color-border-strong);
  color: var(--jls-color-text-faint);
  font: var(--jls-typography-eyebrow);
  letter-spacing: var(--jls-typography-eyebrow-letter-spacing);
  text-transform: uppercase;
}
.jls-card__meta > :first-child {
  color: var(--jls-color-accent-text);
}
.jls-card__meta > :last-child:not(:first-child) {
  margin-left: auto;
}
.jls-card--featured > .jls-card__meta {
  margin: 0;
  padding: 14px var(--jls-space-md);
}

.jls-tag {
  display: inline-flex;
  align-items: center;
  gap: var(--jls-space-xxs);
  padding: 4px 6px;
  border: var(--jls-border-width-thin) solid currentColor;
  border-radius: var(--jls-radius-sm);
  background: var(--jls-color-accent-soft);
  color: var(--jls-color-accent-text);
  font: var(--jls-typography-eyebrow);
  font-size: 11px;
  line-height: 1;
  letter-spacing: var(--jls-typography-eyebrow-letter-spacing);
  text-transform: uppercase;
  white-space: nowrap;
}
.jls-tag--success {
  background: var(--jls-color-success-soft);
  color: var(--jls-color-success);
}
.jls-tag--neutral {
  background: var(--jls-color-surface);
  color: var(--jls-color-text-soft);
}
.jls-tag--warning {
  background: var(--jls-color-warning-soft);
  color: var(--jls-color-warning);
}

/* ---- data ---- */

/* big numbers: a row of stats on a white band between ink rules */
.jls-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  background: var(--jls-color-surface);
  border-block: var(--jls-border-width-thin) solid var(--jls-color-border-strong);
}
.jls-stat {
  padding: var(--jls-space-xl) var(--jls-space-lg);
  border-right: var(--jls-border-width-thin) solid var(--jls-color-border);
  color: var(--jls-color-text-soft);
}
.jls-stat:last-child {
  border-right: 0;
}
.jls-number {
  display: block;
  margin-bottom: var(--jls-space-xs);
  color: var(--jls-color-text);
  font: var(--jls-typography-number);
  letter-spacing: var(--jls-typography-number-letter-spacing);
  font-variant-numeric: tabular-nums;
  word-spacing: -0.3em;
  white-space: nowrap;
}
/* segmented meter: a score out of 100, drawn in 8px blocks */
.jls-meter {
  --value: 50;
  position: relative;
  height: 10px;
  background: repeating-linear-gradient(90deg, var(--jls-color-border) 0 8px, transparent 8px 10px);
}
.jls-meter::after {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  width: calc(var(--value) * 1%);
  background: repeating-linear-gradient(90deg, var(--jls-color-accent) 0 8px, transparent 8px 10px);
}

/* ---- forms ---- */

.jls-field {
  display: grid;
  gap: var(--jls-space-xs);
}
.jls-label {
  color: var(--jls-color-text);
  font-family: var(--jls-font-family-display);
  font-size: var(--jls-font-size-sm);
  font-weight: var(--jls-font-weight-semibold);
}
.jls-input {
  width: 100%;
  padding: 12px 14px;
  background: var(--jls-color-surface);
  border: var(--jls-border-width-thin) solid var(--jls-color-border-strong);
  border-radius: var(--jls-radius-md);
  color: var(--jls-color-text);
  font: var(--jls-typography-body);
  transition: box-shadow var(--jls-duration-fast) var(--jls-easing-standard);
}
.jls-input:focus {
  outline: none;
  box-shadow: var(--jls-shadow-offset-accent);
}
.jls-input:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
textarea.jls-input {
  min-height: 136px;
  resize: vertical;
}
select.jls-input {
  appearance: none;
  padding-right: var(--jls-space-2xl);
  cursor: pointer;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--jls-color-text-soft) 50%),
    linear-gradient(135deg, var(--jls-color-text-soft) 50%, transparent 50%);
  background-position:
    calc(100% - 21px) 50%,
    calc(100% - 16px) 50%;
  background-size: 5px 5px;
  background-repeat: no-repeat;
}
.jls-input[aria-invalid='true'] {
  border-color: var(--jls-color-danger);
  box-shadow: 3px 3px 0 var(--jls-color-danger);
}
.jls-error {
  display: flex;
  align-items: flex-start;
  gap: var(--jls-space-xs);
  margin: 0;
  color: var(--jls-color-danger);
  font: var(--jls-typography-small);
  font-weight: var(--jls-font-weight-semibold);
}
.jls-error::before {
  content: '!';
  flex: none;
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  margin-top: 2px;
  border-radius: var(--jls-radius-pill);
  background: var(--jls-color-danger);
  color: var(--jls-color-bg);
  font-family: var(--jls-font-family-display);
  font-size: var(--jls-font-size-xs);
  font-weight: var(--jls-font-weight-bold);
}
.jls-hint {
  color: var(--jls-color-text-faint);
  font: var(--jls-typography-small);
}

@media (prefers-reduced-motion: reduce) {
  .jls-btn,
  .jls-card,
  .jls-input {
    transition: none;
  }
  .jls-btn:hover,
  .jls-btn:active,
  .jls-card--interactive:hover {
    transform: none;
  }
}