/* src/styles/fonts.css */
/* @ds-font-face-dropped: unresolvable src */
/* @ds-font-face-dropped: unresolvable src */
/* @ds-font-face-dropped: unresolvable src */
/* @ds-font-face-dropped: unresolvable src */
/* @ds-font-face-dropped: unresolvable src */
/* @ds-font-face-dropped: unresolvable src */
/* @ds-font-face-dropped: unresolvable src */
/* @ds-font-face-dropped: unresolvable src */
/* @ds-font-face-dropped: unresolvable src */
/* @ds-font-face-dropped: unresolvable src */
/* @ds-font-face-dropped: unresolvable src */
/* @ds-font-face-dropped: unresolvable src */
/* @ds-font-face-dropped: unresolvable src */
/* @ds-font-face-dropped: unresolvable src */
/* @ds-font-face-dropped: unresolvable src */
/* @ds-font-face-dropped: unresolvable src */
/* @ds-font-face-dropped: unresolvable src */
/* @ds-font-face-dropped: unresolvable src */

/* src/styles/tokens.css */
:root {
  --jem-ink-50: #f5f7fa;
  --jem-ink-100: #e7ecf2;
  --jem-ink-200: #cdd7e3;
  --jem-ink-300: #a6b6c9;
  --jem-ink-400: #7389a3;
  --jem-ink-500: #4e6580;
  --jem-ink-600: #3a4f67;
  --jem-ink-700: #2c3d51;
  --jem-ink-800: #1e2b3b;
  --jem-ink-900: #131e2b;
  --jem-ink-950: #0a131d;
  --jem-brand-50: #ecfafb;
  --jem-brand-100: #d0f2f5;
  --jem-brand-200: #a3e4ea;
  --jem-brand-300: #6acfd9;
  --jem-brand-400: #33b2c0;
  --jem-brand-500: #1594a4;
  --jem-brand-600: #0e7889;
  --jem-brand-700: #0f5f6e;
  --jem-brand-800: #114d59;
  --jem-brand-900: #12404a;
  --jem-brand-950: #062931;
  --jem-accent-50: #fdf6ed;
  --jem-accent-100: #fae9d2;
  --jem-accent-200: #f4d0a2;
  --jem-accent-300: #ebb068;
  --jem-accent-400: #e29440;
  --jem-accent-500: #d57b26;
  --jem-accent-600: #bc601d;
  --jem-accent-700: #9c481b;
  --jem-accent-800: #7f3a1c;
  --jem-accent-900: #68311a;
  --jem-accent-950: #38170b;
  --jem-success-50: #ecfaf3;
  --jem-success-100: #d1f2e2;
  --jem-success-500: #1a9a64;
  --jem-success-600: #157f52;
  --jem-success-700: #116542;
  --jem-warning-50: #fef8e7;
  --jem-warning-100: #fceec4;
  --jem-warning-500: #d19a0e;
  --jem-warning-600: #a87a0b;
  --jem-warning-700: #855f09;
  --jem-danger-50: #fdf0ef;
  --jem-danger-100: #fbdcda;
  --jem-danger-500: #d3423c;
  --jem-danger-600: #c0332e;
  --jem-danger-700: #9c2723;
  --jem-info-50: #eef4fe;
  --jem-info-100: #d9e6fd;
  --jem-info-500: #2a70d0;
  --jem-info-600: #1d5fbf;
  --jem-info-700: #184c99;
  --jem-surface-page: #ffffff;
  --jem-surface-subtle: var(--jem-ink-50);
  --jem-surface-raised: #ffffff;
  --jem-surface-sunken: var(--jem-ink-100);
  --jem-surface-inverse: var(--jem-ink-900);
  --jem-surface-brand: var(--jem-brand-700);
  --jem-surface-overlay: rgba(10, 19, 29, 0.55);
  --jem-text-primary: var(--jem-ink-900);
  --jem-text-secondary: var(--jem-ink-600);
  --jem-text-muted: var(--jem-ink-500);
  --jem-text-disabled: var(--jem-ink-400);
  --jem-text-inverse: #ffffff;
  --jem-text-on-brand: #ffffff;
  --jem-text-brand: var(--jem-brand-700);
  --jem-text-accent: var(--jem-accent-700);
  --jem-text-link: var(--jem-brand-700);
  --jem-text-link-hover: var(--jem-brand-800);
  --jem-border-subtle: var(--jem-ink-100);
  --jem-border-default: var(--jem-ink-200);
  --jem-border-strong: var(--jem-ink-300);
  --jem-border-brand: var(--jem-brand-600);
  --jem-border-inverse: rgba(255, 255, 255, 0.18);
  --jem-action-bg: var(--jem-brand-700);
  --jem-action-bg-hover: var(--jem-brand-800);
  --jem-action-bg-active: var(--jem-brand-900);
  --jem-action-fg: #ffffff;
  --jem-action-subtle-bg: var(--jem-brand-50);
  --jem-action-subtle-fg: var(--jem-brand-800);
  --jem-action-subtle-hover: var(--jem-brand-100);
  --jem-focus-ring: var(--jem-brand-500);
  --jem-focus-ring-offset: #ffffff;
  --jem-focus-ring-width: 2px;
  --jem-success-bg: var(--jem-success-50);
  --jem-success-fg: var(--jem-success-700);
  --jem-success-br: var(--jem-success-100);
  --jem-warning-bg: var(--jem-warning-50);
  --jem-warning-fg: var(--jem-warning-700);
  --jem-warning-br: var(--jem-warning-100);
  --jem-danger-bg: var(--jem-danger-50);
  --jem-danger-fg: var(--jem-danger-700);
  --jem-danger-br: var(--jem-danger-100);
  --jem-info-bg: var(--jem-info-50);
  --jem-info-fg: var(--jem-info-700);
  --jem-info-br: var(--jem-info-100);
  --jem-font-display:
    "Inter Tight",
    "Inter",
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    Helvetica,
    Arial,
    sans-serif;
  --jem-font-body:
    "Inter",
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    Helvetica,
    Arial,
    sans-serif;
  --jem-font-mono:
    "IBM Plex Mono",
    ui-monospace,
    SFMono-Regular,
    Menlo,
    Consolas,
    "Liberation Mono",
    monospace;
  --jem-weight-regular: 400;
  --jem-weight-medium: 500;
  --jem-weight-semibold: 600;
  --jem-weight-bold: 700;
  --jem-font-size-display-lg: 3.5rem;
  --jem-line-display-lg: 1.05;
  --jem-track-display-lg: -0.022em;
  --jem-font-size-display: 2.75rem;
  --jem-line-display: 1.1;
  --jem-track-display: -0.02em;
  --jem-font-size-h1: 2.25rem;
  --jem-line-h1: 1.15;
  --jem-track-h1: -0.018em;
  --jem-font-size-h2: 1.75rem;
  --jem-line-h2: 1.22;
  --jem-track-h2: -0.014em;
  --jem-font-size-h3: 1.375rem;
  --jem-line-h3: 1.3;
  --jem-track-h3: -0.01em;
  --jem-font-size-h4: 1.125rem;
  --jem-line-h4: 1.4;
  --jem-track-h4: -0.006em;
  --jem-font-size-body-lg: 1.125rem;
  --jem-line-body-lg: 1.6;
  --jem-font-size-body: 1rem;
  --jem-line-body: 1.6;
  --jem-font-size-body-sm: 0.875rem;
  --jem-line-body-sm: 1.55;
  --jem-font-size-caption: 0.8125rem;
  --jem-line-caption: 1.45;
  --jem-font-size-overline: 0.75rem;
  --jem-line-overline: 1.4;
  --jem-track-overline: 0.09em;
  --jem-space-0: 0;
  --jem-space-1: 0.25rem;
  --jem-space-2: 0.5rem;
  --jem-space-3: 0.75rem;
  --jem-space-4: 1rem;
  --jem-space-5: 1.25rem;
  --jem-space-6: 1.5rem;
  --jem-space-8: 2rem;
  --jem-space-10: 2.5rem;
  --jem-space-12: 3rem;
  --jem-space-16: 4rem;
  --jem-space-20: 5rem;
  --jem-space-24: 6rem;
  --jem-space-32: 8rem;
  --jem-radius-none: 0;
  --jem-radius-sm: 3px;
  --jem-radius-md: 6px;
  --jem-radius-lg: 10px;
  --jem-radius-xl: 16px;
  --jem-radius-2xl: 24px;
  --jem-radius-full: 9999px;
  --jem-shadow-xs: 0 1px 2px rgba(10, 19, 29, 0.06);
  --jem-shadow-sm: 0 1px 3px rgba(10, 19, 29, 0.08), 0 1px 2px rgba(10, 19, 29, 0.04);
  --jem-shadow-md: 0 4px 12px rgba(10, 19, 29, 0.08), 0 1px 3px rgba(10, 19, 29, 0.05);
  --jem-shadow-lg: 0 12px 28px rgba(10, 19, 29, 0.11), 0 2px 6px rgba(10, 19, 29, 0.05);
  --jem-shadow-xl: 0 24px 56px rgba(10, 19, 29, 0.16), 0 4px 12px rgba(10, 19, 29, 0.06);
  --jem-container-sm: 40rem;
  --jem-container-md: 52rem;
  --jem-container-lg: 66rem;
  --jem-container-xl: 78rem;
  --jem-container-full: 100%;
  --jem-gutter: var(--jem-space-6);
  --jem-duration-fast: 120ms;
  --jem-duration-base: 180ms;
  --jem-duration-slow: 280ms;
  --jem-ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --jem-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --jem-z-base: 0;
  --jem-z-sticky: 100;
  --jem-z-dropdown: 200;
  --jem-z-overlay: 300;
  --jem-z-modal: 400;
  --jem-z-toast: 500;
}
[data-jem-tone=dark] {
  --jem-surface-page: var(--jem-ink-950);
  --jem-surface-subtle: var(--jem-ink-900);
  --jem-surface-raised: var(--jem-ink-900);
  --jem-surface-sunken: #06101a;
  --jem-surface-inverse: var(--jem-ink-50);
  --jem-surface-brand: var(--jem-brand-600);
  --jem-surface-overlay: rgba(3, 8, 14, 0.7);
  --jem-text-primary: var(--jem-ink-50);
  --jem-text-secondary: var(--jem-ink-300);
  --jem-text-muted: var(--jem-ink-400);
  --jem-text-disabled: var(--jem-ink-600);
  --jem-text-inverse: var(--jem-ink-950);
  --jem-text-brand: var(--jem-brand-300);
  --jem-text-accent: var(--jem-accent-300);
  --jem-text-link: var(--jem-brand-300);
  --jem-text-link-hover: var(--jem-brand-200);
  --jem-border-subtle: rgba(255, 255, 255, 0.08);
  --jem-border-default: rgba(255, 255, 255, 0.14);
  --jem-border-strong: rgba(255, 255, 255, 0.24);
  --jem-border-brand: var(--jem-brand-400);
  --jem-border-inverse: var(--jem-ink-200);
  --jem-action-bg: var(--jem-brand-500);
  --jem-action-bg-hover: var(--jem-brand-400);
  --jem-action-bg-active: var(--jem-brand-300);
  --jem-action-fg: var(--jem-ink-950);
  --jem-action-subtle-bg: rgba(21, 148, 164, 0.16);
  --jem-action-subtle-fg: var(--jem-brand-200);
  --jem-action-subtle-hover: rgba(21, 148, 164, 0.26);
  --jem-focus-ring: var(--jem-brand-300);
  --jem-focus-ring-offset: var(--jem-ink-950);
  --jem-success-bg: rgba(26, 154, 100, 0.16);
  --jem-success-fg: #6ee0a8;
  --jem-success-br: rgba(26, 154, 100, 0.32);
  --jem-warning-bg: rgba(209, 154, 14, 0.16);
  --jem-warning-fg: #f0c85c;
  --jem-warning-br: rgba(209, 154, 14, 0.32);
  --jem-danger-bg: rgba(211, 66, 60, 0.16);
  --jem-danger-fg: #f29a95;
  --jem-danger-br: rgba(211, 66, 60, 0.32);
  --jem-info-bg: rgba(42, 112, 208, 0.16);
  --jem-info-fg: #90b6f2;
  --jem-info-br: rgba(42, 112, 208, 0.32);
  --jem-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.4);
  --jem-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.45), 0 1px 2px rgba(0, 0, 0, 0.3);
  --jem-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.5), 0 1px 3px rgba(0, 0, 0, 0.3);
  --jem-shadow-lg: 0 12px 28px rgba(0, 0, 0, 0.55), 0 2px 6px rgba(0, 0, 0, 0.35);
  --jem-shadow-xl: 0 24px 56px rgba(0, 0, 0, 0.6), 0 4px 12px rgba(0, 0, 0, 0.4);
}

/* src/styles/base.css */
.jem-root {
  font-family: var(--jem-font-body);
  font-size: var(--jem-font-size-body);
  line-height: var(--jem-line-body);
  color: var(--jem-text-primary);
  background-color: var(--jem-surface-page);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings:
    "kern" 1,
    "liga" 1,
    "cv11" 1;
  text-rendering: optimizeLegibility;
}
.jem-root *,
.jem-root *::before,
.jem-root *::after {
  box-sizing: border-box;
}
.jem-focusable:focus-visible,
.jem-root :focus-visible {
  outline: var(--jem-focus-ring-width) solid var(--jem-focus-ring);
  outline-offset: 2px;
  border-radius: var(--jem-radius-sm);
}
.jem-root ::selection {
  background: var(--jem-brand-100);
  color: var(--jem-brand-900);
}
.jem-numeric {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}
@media (prefers-reduced-motion: reduce) {
  .jem-root *,
  .jem-root *::before,
  .jem-root *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* src/styles/components/layout.css */
.jem-root--full {
  min-height: 100vh;
}
.jem-visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.jem-icon {
  display: inline-block;
  flex: none;
  vertical-align: -0.125em;
}
.jem-container {
  width: 100%;
  max-width: var(--jem-container, var(--jem-container-lg));
  margin-inline: auto;
}
.jem-container--gutter-none {
  padding-inline: 0;
}
.jem-container--gutter-sm {
  padding-inline: var(--jem-space-4);
}
.jem-container--gutter-md {
  padding-inline: var(--jem-space-6);
}
.jem-container--gutter-lg {
  padding-inline: var(--jem-space-8);
}
@media (max-width: 640px) {
  .jem-container--gutter-md,
  .jem-container--gutter-lg {
    padding-inline: var(--jem-space-5);
  }
}
.jem-section {
  width: 100%;
}
.jem-section--page {
  background: var(--jem-surface-page);
  color: var(--jem-text-primary);
}
.jem-section--subtle {
  background: var(--jem-surface-subtle);
  color: var(--jem-text-primary);
}
.jem-section--sunken {
  background: var(--jem-surface-sunken);
  color: var(--jem-text-primary);
}
.jem-section--inverse {
  background: var(--jem-ink-900);
  color: var(--jem-text-inverse);
}
.jem-section--brand {
  background: var(--jem-surface-brand);
  color: var(--jem-text-on-brand);
}
.jem-section--spacing-none {
  padding-block: 0;
}
.jem-section--spacing-sm {
  padding-block: var(--jem-space-8);
}
.jem-section--spacing-md {
  padding-block: var(--jem-space-12);
}
.jem-section--spacing-lg {
  padding-block: var(--jem-space-20);
}
.jem-section--spacing-xl {
  padding-block: var(--jem-space-24);
}
.jem-section--divided {
  border-top: 1px solid var(--jem-border-subtle);
}
.jem-section--inverse .jem-heading,
.jem-section--brand .jem-heading {
  color: var(--jem-text-inverse);
}
.jem-section--inverse .jem-text--tone-secondary,
.jem-section--brand .jem-text--tone-secondary {
  color: var(--jem-ink-300);
}
@media (max-width: 768px) {
  .jem-section--spacing-lg {
    padding-block: var(--jem-space-12);
  }
  .jem-section--spacing-xl {
    padding-block: var(--jem-space-16);
  }
}
.jem-stack {
  display: flex;
  min-width: 0;
}
.jem-stack--vertical {
  flex-direction: column;
}
.jem-stack--horizontal {
  flex-direction: row;
}
.jem-stack--wrap {
  flex-wrap: wrap;
}
.jem-stack--gap-none {
  gap: 0;
}
.jem-stack--gap-1 {
  gap: var(--jem-space-1);
}
.jem-stack--gap-2 {
  gap: var(--jem-space-2);
}
.jem-stack--gap-3 {
  gap: var(--jem-space-3);
}
.jem-stack--gap-4 {
  gap: var(--jem-space-4);
}
.jem-stack--gap-5 {
  gap: var(--jem-space-5);
}
.jem-stack--gap-6 {
  gap: var(--jem-space-6);
}
.jem-stack--gap-8 {
  gap: var(--jem-space-8);
}
.jem-stack--gap-10 {
  gap: var(--jem-space-10);
}
.jem-stack--gap-12 {
  gap: var(--jem-space-12);
}
.jem-stack--gap-16 {
  gap: var(--jem-space-16);
}
.jem-stack--align-start {
  align-items: flex-start;
}
.jem-stack--align-center {
  align-items: center;
}
.jem-stack--align-end {
  align-items: flex-end;
}
.jem-stack--align-stretch {
  align-items: stretch;
}
.jem-stack--align-baseline {
  align-items: baseline;
}
.jem-stack--justify-start {
  justify-content: flex-start;
}
.jem-stack--justify-center {
  justify-content: center;
}
.jem-stack--justify-end {
  justify-content: flex-end;
}
.jem-stack--justify-between {
  justify-content: space-between;
}
.jem-stack--justify-around {
  justify-content: space-around;
}
.jem-stack[class*=jem-stack--]:is(ul, ol) {
  list-style: none;
  margin: 0;
  padding: 0;
}
@media (max-width: 640px) {
  .jem-stack--collapse-sm {
    flex-direction: column;
    align-items: stretch;
  }
}
@media (max-width: 900px) {
  .jem-stack--collapse-md {
    flex-direction: column;
    align-items: stretch;
  }
}
.jem-grid {
  display: grid;
  min-width: 0;
}
.jem-grid:is(ul, ol) {
  list-style: none;
  margin: 0;
  padding: 0;
}
.jem-grid--cols-1 {
  grid-template-columns: repeat(1, minmax(0, 1fr));
}
.jem-grid--cols-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.jem-grid--cols-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.jem-grid--cols-4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.jem-grid--cols-6 {
  grid-template-columns: repeat(6, minmax(0, 1fr));
}
.jem-grid--gap-none {
  gap: 0;
}
.jem-grid--gap-1 {
  gap: var(--jem-space-1);
}
.jem-grid--gap-2 {
  gap: var(--jem-space-2);
}
.jem-grid--gap-3 {
  gap: var(--jem-space-3);
}
.jem-grid--gap-4 {
  gap: var(--jem-space-4);
}
.jem-grid--gap-5 {
  gap: var(--jem-space-5);
}
.jem-grid--gap-6 {
  gap: var(--jem-space-6);
}
.jem-grid--gap-8 {
  gap: var(--jem-space-8);
}
.jem-grid--gap-10 {
  gap: var(--jem-space-10);
}
.jem-grid--gap-12 {
  gap: var(--jem-space-12);
}
.jem-grid--gap-16 {
  gap: var(--jem-space-16);
}
.jem-grid--align-start {
  align-items: start;
}
.jem-grid--align-center {
  align-items: center;
}
.jem-grid--align-stretch {
  align-items: stretch;
}
@media (max-width: 980px) {
  .jem-grid--cols-4,
  .jem-grid--cols-6 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 860px) {
  .jem-grid--cols-3 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 640px) {
  .jem-grid--cols-2,
  .jem-grid--cols-3,
  .jem-grid--cols-4,
  .jem-grid--cols-6 {
    grid-template-columns: minmax(0, 1fr);
  }
}
.jem-divider {
  border: 0;
  margin: 0;
}
.jem-divider--horizontal {
  width: 100%;
  height: 1px;
}
.jem-divider--vertical {
  width: 1px;
  align-self: stretch;
  min-height: 1em;
}
.jem-divider--subtle {
  background: var(--jem-border-subtle);
}
.jem-divider--default {
  background: var(--jem-border-default);
}
.jem-divider--strong {
  background: var(--jem-border-strong);
}
.jem-divider--spacing-none {
  margin-block: 0;
}
.jem-divider--spacing-sm {
  margin-block: var(--jem-space-3);
}
.jem-divider--spacing-md {
  margin-block: var(--jem-space-6);
}
.jem-divider--spacing-lg {
  margin-block: var(--jem-space-10);
}
.jem-divider--vertical.jem-divider--spacing-sm,
.jem-divider--vertical.jem-divider--spacing-md,
.jem-divider--vertical.jem-divider--spacing-lg {
  margin-block: 0;
  margin-inline: var(--jem-space-3);
}
.jem-divider-labelled {
  display: flex;
  align-items: center;
  gap: var(--jem-space-3);
}
.jem-divider-line {
  flex: 1;
  height: 1px;
}
.jem-divider-label {
  font-size: var(--jem-font-size-caption);
  color: var(--jem-text-muted);
  text-transform: uppercase;
  letter-spacing: var(--jem-track-overline);
  font-weight: var(--jem-weight-medium);
}

/* src/styles/components/typography.css */
.jem-heading {
  font-family: var(--jem-font-display);
  color: var(--jem-text-primary);
  margin: 0;
  text-wrap: balance;
}
.jem-heading--display-lg {
  font-size: var(--jem-font-size-display-lg);
  line-height: var(--jem-line-display-lg);
  letter-spacing: var(--jem-track-display-lg);
}
.jem-heading--display {
  font-size: var(--jem-font-size-display);
  line-height: var(--jem-line-display);
  letter-spacing: var(--jem-track-display);
}
.jem-heading--h1 {
  font-size: var(--jem-font-size-h1);
  line-height: var(--jem-line-h1);
  letter-spacing: var(--jem-track-h1);
}
.jem-heading--h2 {
  font-size: var(--jem-font-size-h2);
  line-height: var(--jem-line-h2);
  letter-spacing: var(--jem-track-h2);
}
.jem-heading--h3 {
  font-size: var(--jem-font-size-h3);
  line-height: var(--jem-line-h3);
  letter-spacing: var(--jem-track-h3);
}
.jem-heading--h4 {
  font-size: var(--jem-font-size-h4);
  line-height: var(--jem-line-h4);
  letter-spacing: var(--jem-track-h4);
}
.jem-heading--weight-medium {
  font-weight: var(--jem-weight-medium);
}
.jem-heading--weight-semibold {
  font-weight: var(--jem-weight-semibold);
}
.jem-heading--weight-bold {
  font-weight: var(--jem-weight-bold);
}
.jem-heading--tone-primary {
  color: var(--jem-text-primary);
}
.jem-heading--tone-secondary {
  color: var(--jem-text-secondary);
}
.jem-heading--tone-brand {
  color: var(--jem-text-brand);
}
.jem-heading--tone-accent {
  color: var(--jem-text-accent);
}
.jem-heading--tone-inverse {
  color: var(--jem-text-inverse);
}
.jem-heading--measure-none {
  max-width: none;
}
.jem-heading--measure-tight {
  max-width: 18ch;
}
.jem-heading--measure-default {
  max-width: 28ch;
}
.jem-heading--measure-wide {
  max-width: 40ch;
}
@media (max-width: 768px) {
  .jem-heading--display-lg {
    font-size: 2.5rem;
  }
  .jem-heading--display {
    font-size: 2.125rem;
  }
  .jem-heading--h1 {
    font-size: 1.875rem;
  }
  .jem-heading--h2 {
    font-size: 1.5rem;
  }
}
.jem-text {
  margin: 0;
  font-family: var(--jem-font-body);
}
.jem-text--lg {
  font-size: var(--jem-font-size-body-lg);
  line-height: var(--jem-line-body-lg);
}
.jem-text--md {
  font-size: var(--jem-font-size-body);
  line-height: var(--jem-line-body);
}
.jem-text--sm {
  font-size: var(--jem-font-size-body-sm);
  line-height: var(--jem-line-body-sm);
}
.jem-text--caption {
  font-size: var(--jem-font-size-caption);
  line-height: var(--jem-line-caption);
}
.jem-text--weight-regular {
  font-weight: var(--jem-weight-regular);
}
.jem-text--weight-medium {
  font-weight: var(--jem-weight-medium);
}
.jem-text--weight-semibold {
  font-weight: var(--jem-weight-semibold);
}
.jem-text--weight-bold {
  font-weight: var(--jem-weight-bold);
}
.jem-text--tone-primary {
  color: var(--jem-text-primary);
}
.jem-text--tone-secondary {
  color: var(--jem-text-secondary);
}
.jem-text--tone-muted {
  color: var(--jem-text-muted);
}
.jem-text--tone-brand {
  color: var(--jem-text-brand);
}
.jem-text--tone-accent {
  color: var(--jem-text-accent);
}
.jem-text--tone-inverse {
  color: var(--jem-text-inverse);
}
.jem-text--tone-success {
  color: var(--jem-success-fg);
}
.jem-text--tone-warning {
  color: var(--jem-warning-fg);
}
.jem-text--tone-danger {
  color: var(--jem-danger-fg);
}
.jem-text--measure-none {
  max-width: none;
}
.jem-text--measure-tight {
  max-width: 44ch;
}
.jem-text--measure-default {
  max-width: 62ch;
}
.jem-text--measure-wide {
  max-width: 78ch;
}
.jem-text--align-start {
  text-align: start;
}
.jem-text--align-center {
  text-align: center;
}
.jem-text--align-end {
  text-align: end;
}
.jem-text--align-center.jem-text--measure-tight,
.jem-text--align-center.jem-text--measure-default,
.jem-text--align-center.jem-text--measure-wide,
.jem-heading--measure-tight.jem-text--align-center,
.jem-heading--measure-default.jem-text--align-center,
.jem-heading--measure-wide.jem-text--align-center {
  margin-inline: auto;
}
.jem-text--mono {
  font-family: var(--jem-font-mono);
  font-size: 0.9375em;
}
.jem-overline {
  display: flex;
  align-items: center;
  gap: var(--jem-space-3);
  margin: 0;
  font-size: var(--jem-font-size-overline);
  line-height: var(--jem-line-overline);
  letter-spacing: var(--jem-track-overline);
  text-transform: uppercase;
  font-weight: var(--jem-weight-semibold);
}
.jem-overline--brand {
  color: var(--jem-text-brand);
}
.jem-overline--accent {
  color: var(--jem-text-accent);
}
.jem-overline--muted {
  color: var(--jem-text-muted);
}
.jem-overline--inverse {
  color: var(--jem-brand-300);
}
.jem-overline-rule {
  width: 24px;
  height: 2px;
  flex: none;
  background: currentColor;
  opacity: 0.55;
  border-radius: 1px;
}
.jem-prose {
  color: var(--jem-text-primary);
}
.jem-prose--md {
  font-size: var(--jem-font-size-body);
  line-height: var(--jem-line-body);
}
.jem-prose--lg {
  font-size: var(--jem-font-size-body-lg);
  line-height: var(--jem-line-body-lg);
}
.jem-prose--measure-none {
  max-width: none;
}
.jem-prose--measure-default {
  max-width: 68ch;
}
.jem-prose--measure-wide {
  max-width: 82ch;
}
.jem-prose > * + * {
  margin-top: var(--jem-space-5);
}
.jem-prose h1,
.jem-prose h2,
.jem-prose h3,
.jem-prose h4 {
  font-family: var(--jem-font-display);
  font-weight: var(--jem-weight-semibold);
  color: var(--jem-text-primary);
  margin: var(--jem-space-10) 0 var(--jem-space-3);
  text-wrap: balance;
}
.jem-prose > :first-child {
  margin-top: 0;
}
.jem-prose h2 {
  font-size: var(--jem-font-size-h2);
  line-height: var(--jem-line-h2);
  letter-spacing: var(--jem-track-h2);
}
.jem-prose h3 {
  font-size: var(--jem-font-size-h3);
  line-height: var(--jem-line-h3);
}
.jem-prose h4 {
  font-size: var(--jem-font-size-h4);
  line-height: var(--jem-line-h4);
}
.jem-prose p {
  margin: 0;
  color: var(--jem-text-primary);
}
.jem-prose strong {
  font-weight: var(--jem-weight-semibold);
}
.jem-prose a {
  color: var(--jem-text-link);
  text-decoration: underline;
  text-underline-offset: 0.16em;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--jem-brand-300);
}
.jem-prose a:hover {
  color: var(--jem-text-link-hover);
  text-decoration-color: currentColor;
}
.jem-prose ul,
.jem-prose ol {
  margin: 0;
  padding-left: var(--jem-space-6);
}
.jem-prose li {
  margin-top: var(--jem-space-2);
}
.jem-prose li::marker {
  color: var(--jem-brand-500);
}
.jem-prose blockquote {
  margin: var(--jem-space-8) 0;
  padding-left: var(--jem-space-5);
  border-left: 3px solid var(--jem-accent-500);
  font-family: var(--jem-font-display);
  font-size: 1.125em;
  font-weight: var(--jem-weight-medium);
  line-height: 1.5;
  color: var(--jem-text-primary);
}
.jem-prose code {
  font-family: var(--jem-font-mono);
  font-size: 0.875em;
  background: var(--jem-surface-sunken);
  border-radius: var(--jem-radius-sm);
  padding: 0.15em 0.4em;
}
.jem-prose pre {
  font-family: var(--jem-font-mono);
  font-size: var(--jem-font-size-body-sm);
  background: var(--jem-ink-900);
  color: var(--jem-ink-100);
  padding: var(--jem-space-4);
  border-radius: var(--jem-radius-md);
  overflow-x: auto;
}
.jem-prose pre code {
  background: none;
  padding: 0;
  color: inherit;
}
.jem-prose hr {
  border: 0;
  height: 1px;
  background: var(--jem-border-default);
  margin: var(--jem-space-10) 0;
}
.jem-prose img {
  border-radius: var(--jem-radius-md);
}
.jem-prose table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--jem-font-size-body-sm);
}
.jem-prose th,
.jem-prose td {
  text-align: left;
  padding: var(--jem-space-3);
  border-bottom: 1px solid var(--jem-border-subtle);
}
.jem-prose th {
  font-weight: var(--jem-weight-semibold);
  color: var(--jem-text-secondary);
}
.jem-prose figcaption {
  font-size: var(--jem-font-size-caption);
  color: var(--jem-text-muted);
  margin-top: var(--jem-space-2);
}

/* src/styles/components/actions.css */
.jem-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--jem-space-2);
  font-family: var(--jem-font-body);
  font-weight: var(--jem-weight-semibold);
  line-height: 1;
  white-space: nowrap;
  text-decoration: none;
  border: 1px solid transparent;
  border-radius: var(--jem-radius-md);
  cursor: pointer;
  transition:
    background-color var(--jem-duration-fast) var(--jem-ease-standard),
    border-color var(--jem-duration-fast) var(--jem-ease-standard),
    color var(--jem-duration-fast) var(--jem-ease-standard),
    box-shadow var(--jem-duration-fast) var(--jem-ease-standard);
}
.jem-button--sm {
  font-size: var(--jem-font-size-caption);
  padding: 7px 13px;
}
.jem-button--md {
  font-size: var(--jem-font-size-body-sm);
  padding: 10px 18px;
}
.jem-button--lg {
  font-size: var(--jem-font-size-body);
  padding: 13px 24px;
}
.jem-button--full {
  width: 100%;
}
.jem-button-icon {
  flex: none;
}
.jem-button--sm .jem-button-icon {
  width: 15px;
  height: 15px;
}
.jem-button--md .jem-button-icon {
  width: 17px;
  height: 17px;
}
.jem-button--lg .jem-button-icon {
  width: 19px;
  height: 19px;
}
.jem-button--primary {
  background: var(--jem-action-bg);
  color: var(--jem-action-fg);
}
.jem-button--primary:hover {
  background: var(--jem-action-bg-hover);
}
.jem-button--primary:active {
  background: var(--jem-action-bg-active);
}
.jem-button--secondary {
  background: transparent;
  color: var(--jem-text-primary);
  border-color: var(--jem-border-strong);
}
.jem-button--secondary:hover {
  background: var(--jem-surface-subtle);
  border-color: var(--jem-ink-400);
}
.jem-button--subtle {
  background: var(--jem-action-subtle-bg);
  color: var(--jem-action-subtle-fg);
}
.jem-button--subtle:hover {
  background: var(--jem-action-subtle-hover);
}
.jem-button--ghost {
  background: transparent;
  color: var(--jem-text-primary);
}
.jem-button--ghost:hover {
  background: var(--jem-surface-subtle);
}
.jem-button--accent {
  background: var(--jem-accent-600);
  color: #fff;
}
.jem-button--accent:hover {
  background: var(--jem-accent-700);
}
.jem-button--accent:active {
  background: var(--jem-accent-800);
}
.jem-button--danger {
  background: var(--jem-danger-600);
  color: #fff;
}
.jem-button--danger:hover {
  background: var(--jem-danger-700);
}
.jem-button--disabled,
.jem-button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}
.jem-section--inverse .jem-button--secondary,
.jem-section--brand .jem-button--secondary,
.jem-hero--inverse .jem-button--secondary,
.jem-hero--brand .jem-button--secondary,
.jem-cta--inverse .jem-button--secondary,
.jem-cta--brand .jem-button--secondary,
.jem-cta--accent .jem-button--secondary,
.jem-card--inverse .jem-button--secondary,
.jem-navbar--inverse .jem-button--secondary,
.jem-navbar--transparent .jem-button--secondary {
  color: var(--jem-text-inverse);
  border-color: rgba(255, 255, 255, 0.32);
}
.jem-section--inverse .jem-button--secondary:hover,
.jem-section--brand .jem-button--secondary:hover,
.jem-hero--inverse .jem-button--secondary:hover,
.jem-hero--brand .jem-button--secondary:hover,
.jem-cta--inverse .jem-button--secondary:hover,
.jem-cta--brand .jem-button--secondary:hover,
.jem-cta--accent .jem-button--secondary:hover,
.jem-card--inverse .jem-button--secondary:hover,
.jem-navbar--inverse .jem-button--secondary:hover,
.jem-navbar--transparent .jem-button--secondary:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.5);
}
.jem-button-spinner {
  width: 1em;
  height: 1em;
  flex: none;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: var(--jem-radius-full);
  opacity: 0.85;
  animation: jem-spin 620ms linear infinite;
}
@keyframes jem-spin {
  to {
    transform: rotate(360deg);
  }
}
.jem-link {
  display: inline-flex;
  align-items: center;
  gap: var(--jem-space-1);
  font-weight: var(--jem-weight-medium);
  text-decoration: none;
  text-underline-offset: 0.16em;
  text-decoration-thickness: 1px;
  cursor: pointer;
  transition: color var(--jem-duration-fast) var(--jem-ease-standard);
}
.jem-link--brand {
  color: var(--jem-text-link);
}
.jem-link--primary {
  color: var(--jem-text-primary);
}
.jem-link--muted {
  color: var(--jem-text-muted);
}
.jem-link--inverse {
  color: var(--jem-brand-200);
}
.jem-link--brand:hover {
  color: var(--jem-text-link-hover);
}
.jem-link--primary:hover {
  color: var(--jem-text-link);
}
.jem-link--muted:hover {
  color: var(--jem-text-primary);
}
.jem-link--inverse:hover {
  color: #fff;
}
.jem-link--underline-always span:first-child {
  text-decoration: underline;
}
.jem-link--underline-hover:hover span:first-child {
  text-decoration: underline;
}
.jem-link--underline-none span:first-child {
  text-decoration: none;
}
.jem-link--size-sm {
  font-size: var(--jem-font-size-body-sm);
}
.jem-link--size-md {
  font-size: var(--jem-font-size-body);
}
.jem-link--size-lg {
  font-size: var(--jem-font-size-body-lg);
}
.jem-link-arrow {
  width: 1em;
  height: 1em;
  transition: transform var(--jem-duration-base) var(--jem-ease-out);
}
.jem-link--arrow:hover .jem-link-arrow {
  transform: translateX(3px);
}

/* src/styles/components/forms.css */
.jem-field {
  display: flex;
  flex-direction: column;
  gap: var(--jem-space-2);
}
.jem-field--full {
  width: 100%;
}
.jem-field-label {
  display: flex;
  align-items: baseline;
  gap: var(--jem-space-2);
  font-size: var(--jem-font-size-body-sm);
  font-weight: var(--jem-weight-medium);
  color: var(--jem-text-primary);
}
.jem-field-required {
  color: var(--jem-danger-600);
}
.jem-field-optional {
  font-size: var(--jem-font-size-caption);
  font-weight: var(--jem-weight-regular);
  color: var(--jem-text-muted);
}
.jem-field-hint {
  margin: -2px 0 0;
  font-size: var(--jem-font-size-caption);
  line-height: var(--jem-line-caption);
  color: var(--jem-text-muted);
}
.jem-field-error {
  margin: 0;
  display: flex;
  align-items: center;
  gap: var(--jem-space-1);
  font-size: var(--jem-font-size-caption);
  color: var(--jem-danger-fg);
  font-weight: var(--jem-weight-medium);
}
.jem-field-control {
  display: block;
}
.jem-input-shell {
  display: flex;
  align-items: center;
  gap: var(--jem-space-2);
  width: 100%;
  background: var(--jem-surface-raised);
  border: 1px solid var(--jem-border-default);
  border-radius: var(--jem-radius-md);
  transition: border-color var(--jem-duration-fast) var(--jem-ease-standard), box-shadow var(--jem-duration-fast) var(--jem-ease-standard);
}
.jem-input-shell--sm {
  padding: 6px 10px;
}
.jem-input-shell--md {
  padding: 9px 12px;
}
.jem-input-shell--lg {
  padding: 12px 14px;
}
.jem-input-shell:focus-within {
  border-color: var(--jem-border-brand);
  box-shadow: 0 0 0 3px var(--jem-brand-100);
}
.jem-input-shell--invalid {
  border-color: var(--jem-danger-500);
}
.jem-input-shell--invalid:focus-within {
  box-shadow: 0 0 0 3px var(--jem-danger-100);
}
.jem-input-shell--disabled {
  background: var(--jem-surface-sunken);
  opacity: 0.7;
}
.jem-input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: none;
  outline: none;
  font-family: inherit;
  font-size: var(--jem-font-size-body-sm);
  line-height: 1.4;
  color: var(--jem-text-primary);
}
.jem-input-shell--lg .jem-input {
  font-size: var(--jem-font-size-body);
}
.jem-input::placeholder {
  color: var(--jem-text-disabled);
}
.jem-input-icon {
  color: var(--jem-text-muted);
  width: 17px;
  height: 17px;
}
.jem-input-suffix {
  font-size: var(--jem-font-size-body-sm);
  color: var(--jem-text-muted);
  white-space: nowrap;
}
.jem-textarea {
  width: 100%;
  padding: 10px 12px;
  background: var(--jem-surface-raised);
  border: 1px solid var(--jem-border-default);
  border-radius: var(--jem-radius-md);
  font-family: inherit;
  font-size: var(--jem-font-size-body-sm);
  line-height: var(--jem-line-body-sm);
  color: var(--jem-text-primary);
  outline: none;
  transition: border-color var(--jem-duration-fast) var(--jem-ease-standard), box-shadow var(--jem-duration-fast) var(--jem-ease-standard);
}
.jem-textarea:focus {
  border-color: var(--jem-border-brand);
  box-shadow: 0 0 0 3px var(--jem-brand-100);
}
.jem-textarea--invalid {
  border-color: var(--jem-danger-500);
}
.jem-textarea:disabled {
  background: var(--jem-surface-sunken);
  opacity: 0.7;
  cursor: not-allowed;
  resize: none;
}
.jem-textarea::placeholder {
  color: var(--jem-text-disabled);
}
.jem-textarea--resize-none {
  resize: none;
}
.jem-textarea--resize-vertical {
  resize: vertical;
}
.jem-select-shell {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  background: var(--jem-surface-raised);
  border: 1px solid var(--jem-border-default);
  border-radius: var(--jem-radius-md);
  transition: border-color var(--jem-duration-fast) var(--jem-ease-standard), box-shadow var(--jem-duration-fast) var(--jem-ease-standard);
}
.jem-select-shell:focus-within {
  border-color: var(--jem-border-brand);
  box-shadow: 0 0 0 3px var(--jem-brand-100);
}
.jem-select-shell--invalid {
  border-color: var(--jem-danger-500);
}
.jem-select-shell--disabled {
  background: var(--jem-surface-sunken);
  opacity: 0.7;
}
.jem-select {
  appearance: none;
  width: 100%;
  border: 0;
  background: none;
  outline: none;
  font-family: inherit;
  font-size: var(--jem-font-size-body-sm);
  color: var(--jem-text-primary);
  cursor: pointer;
}
.jem-select-shell--sm .jem-select {
  padding: 6px 34px 6px 10px;
}
.jem-select-shell--md .jem-select {
  padding: 9px 36px 9px 12px;
}
.jem-select-shell--lg .jem-select {
  padding: 12px 38px 12px 14px;
  font-size: var(--jem-font-size-body);
}
.jem-select-chevron {
  position: absolute;
  right: 12px;
  width: 16px;
  height: 16px;
  color: var(--jem-text-muted);
  pointer-events: none;
}
.jem-choice {
  display: flex;
  align-items: flex-start;
  gap: var(--jem-space-3);
  cursor: pointer;
}
.jem-choice--disabled {
  opacity: 0.55;
  cursor: not-allowed;
}
.jem-choice-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.jem-choice-label {
  font-size: var(--jem-font-size-body-sm);
  font-weight: var(--jem-weight-medium);
  color: var(--jem-text-primary);
  line-height: 1.45;
}
.jem-choice-description {
  font-size: var(--jem-font-size-caption);
  line-height: var(--jem-line-caption);
  color: var(--jem-text-muted);
}
.jem-checkbox {
  position: relative;
  display: block;
  flex: none;
  width: 18px;
  height: 18px;
  margin-top: 1px;
}
.jem-checkbox-input {
  position: absolute;
  inset: 0;
  opacity: 0;
  margin: 0;
  cursor: inherit;
}
.jem-checkbox-box {
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  background: var(--jem-surface-raised);
  border: 1px solid var(--jem-border-strong);
  border-radius: var(--jem-radius-sm);
  transition: background-color var(--jem-duration-fast) var(--jem-ease-standard), border-color var(--jem-duration-fast) var(--jem-ease-standard);
}
.jem-checkbox-tick {
  width: 12px;
  height: 12px;
  color: #fff;
  opacity: 0;
  transform: scale(0.7);
  transition: opacity var(--jem-duration-fast), transform var(--jem-duration-fast) var(--jem-ease-out);
}
.jem-checkbox-dash {
  width: 9px;
  height: 2px;
  background: #fff;
  border-radius: 1px;
  opacity: 0;
}
.jem-checkbox-input:checked + .jem-checkbox-box {
  background: var(--jem-action-bg);
  border-color: var(--jem-action-bg);
}
.jem-checkbox-input:checked + .jem-checkbox-box .jem-checkbox-tick {
  opacity: 1;
  transform: scale(1);
}
.jem-checkbox-input[aria-checked=mixed] + .jem-checkbox-box {
  background: var(--jem-action-bg);
  border-color: var(--jem-action-bg);
}
.jem-checkbox-input[aria-checked=mixed] + .jem-checkbox-box .jem-checkbox-dash {
  opacity: 1;
}
.jem-checkbox-input:focus-visible + .jem-checkbox-box {
  outline: var(--jem-focus-ring-width) solid var(--jem-focus-ring);
  outline-offset: 2px;
}
.jem-choice--invalid .jem-checkbox-box {
  border-color: var(--jem-danger-500);
}
.jem-radio {
  position: relative;
  display: block;
  flex: none;
  width: 18px;
  height: 18px;
  margin-top: 1px;
}
.jem-radio-input {
  position: absolute;
  inset: 0;
  opacity: 0;
  margin: 0;
  cursor: inherit;
}
.jem-radio-dot {
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  background: var(--jem-surface-raised);
  border: 1px solid var(--jem-border-strong);
  border-radius: var(--jem-radius-full);
  transition: border-color var(--jem-duration-fast) var(--jem-ease-standard);
}
.jem-radio-dot::after {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: var(--jem-radius-full);
  background: var(--jem-action-bg);
  transform: scale(0);
  transition: transform var(--jem-duration-fast) var(--jem-ease-out);
}
.jem-radio-input:checked + .jem-radio-dot {
  border-color: var(--jem-action-bg);
}
.jem-radio-input:checked + .jem-radio-dot::after {
  transform: scale(1);
}
.jem-radio-input:focus-visible + .jem-radio-dot {
  outline: var(--jem-focus-ring-width) solid var(--jem-focus-ring);
  outline-offset: 2px;
}
.jem-radiogroup {
  border: 0;
  margin: 0;
  padding: 0;
  min-width: 0;
}
.jem-radiogroup-legend {
  padding: 0;
  margin-bottom: var(--jem-space-3);
  font-size: var(--jem-font-size-body-sm);
  font-weight: var(--jem-weight-medium);
  color: var(--jem-text-primary);
}
.jem-radiogroup--disabled .jem-choice {
  opacity: 0.55;
  cursor: not-allowed;
}
.jem-radiogroup--disabled .jem-radiogroup-legend {
  color: var(--jem-text-disabled);
}
.jem-radiogroup-options {
  display: flex;
  gap: var(--jem-space-3);
}
.jem-radiogroup--vertical .jem-radiogroup-options {
  flex-direction: column;
}
.jem-radiogroup--horizontal .jem-radiogroup-options {
  flex-direction: row;
  flex-wrap: wrap;
  gap: var(--jem-space-5);
}
.jem-radiogroup--card .jem-radio-option {
  padding: var(--jem-space-4);
  border: 1px solid var(--jem-border-default);
  border-radius: var(--jem-radius-md);
  background: var(--jem-surface-raised);
  transition: border-color var(--jem-duration-fast) var(--jem-ease-standard), background-color var(--jem-duration-fast) var(--jem-ease-standard);
}
.jem-radiogroup--card .jem-radio-option:hover {
  border-color: var(--jem-border-strong);
}
.jem-radiogroup--card .jem-radio-option:has(.jem-radio-input:checked) {
  border-color: var(--jem-border-brand);
  background: var(--jem-brand-50);
}
.jem-radiogroup--card.jem-radiogroup--horizontal .jem-radio-option {
  flex: 1 1 220px;
}
.jem-switch {
  position: relative;
  display: block;
  flex: none;
}
.jem-switch-input {
  position: absolute;
  inset: 0;
  opacity: 0;
  margin: 0;
  cursor: inherit;
  z-index: 1;
}
.jem-switch-track {
  display: block;
  background: var(--jem-ink-300);
  border-radius: var(--jem-radius-full);
  transition: background-color var(--jem-duration-base) var(--jem-ease-standard);
}
.jem-switch-thumb {
  display: block;
  background: #fff;
  border-radius: var(--jem-radius-full);
  box-shadow: var(--jem-shadow-sm);
  transition: transform var(--jem-duration-base) var(--jem-ease-out);
}
.jem-switch--md .jem-switch-track {
  width: 40px;
  height: 22px;
  padding: 3px;
}
.jem-switch--md .jem-switch-thumb {
  width: 16px;
  height: 16px;
}
.jem-switch--md .jem-switch-input:checked + .jem-switch-track .jem-switch-thumb {
  transform: translateX(18px);
}
.jem-switch--sm .jem-switch-track {
  width: 32px;
  height: 18px;
  padding: 2px;
}
.jem-switch--sm .jem-switch-thumb {
  width: 14px;
  height: 14px;
}
.jem-switch--sm .jem-switch-input:checked + .jem-switch-track .jem-switch-thumb {
  transform: translateX(14px);
}
.jem-switch-input:checked + .jem-switch-track {
  background: var(--jem-action-bg);
}
.jem-switch-input:focus-visible + .jem-switch-track {
  outline: var(--jem-focus-ring-width) solid var(--jem-focus-ring);
  outline-offset: 2px;
}
.jem-switch-row {
  align-items: center;
}

/* src/styles/components/data.css */
.jem-card {
  position: relative;
  display: block;
  background: var(--jem-surface-raised);
  color: inherit;
  text-decoration: none;
  transition:
    border-color var(--jem-duration-base) var(--jem-ease-standard),
    box-shadow var(--jem-duration-base) var(--jem-ease-standard),
    transform var(--jem-duration-base) var(--jem-ease-standard);
}
.jem-card--outlined {
  border: 1px solid var(--jem-border-subtle);
}
.jem-card--raised {
  border: 1px solid transparent;
  box-shadow: var(--jem-shadow-md);
}
.jem-card--filled {
  background: var(--jem-surface-subtle);
  border: 1px solid transparent;
}
.jem-card--inverse {
  background: var(--jem-ink-900);
  color: var(--jem-text-inverse);
  border: 1px solid transparent;
}
.jem-card--radius-md {
  border-radius: var(--jem-radius-md);
}
.jem-card--radius-lg {
  border-radius: var(--jem-radius-lg);
}
.jem-card--radius-xl {
  border-radius: var(--jem-radius-xl);
}
.jem-card--padding-none {
  padding: 0;
}
.jem-card--padding-sm {
  padding: var(--jem-space-4);
}
.jem-card--padding-md {
  padding: var(--jem-space-6);
}
.jem-card--padding-lg {
  padding: var(--jem-space-8);
}
.jem-card--full-height {
  height: 100%;
}
.jem-card--accent-brand,
.jem-card--accent-copper {
  overflow: hidden;
}
.jem-card--accent-brand::before,
.jem-card--accent-copper::before {
  content: "";
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  width: 3px;
}
.jem-card--accent-brand::before {
  background: var(--jem-brand-500);
}
.jem-card--accent-copper::before {
  background: var(--jem-accent-500);
}
.jem-card--interactive {
  cursor: pointer;
}
.jem-card--interactive:hover {
  border-color: var(--jem-border-strong);
  box-shadow: var(--jem-shadow-md);
  transform: translateY(-2px);
}
.jem-card--inverse .jem-heading {
  color: var(--jem-text-inverse);
}
.jem-card--inverse .jem-text--tone-secondary {
  color: var(--jem-ink-300);
}
.jem-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--jem-space-2);
  font-weight: var(--jem-weight-medium);
  line-height: 1;
  white-space: nowrap;
  border: 1px solid transparent;
}
.jem-badge--sm {
  font-size: 11px;
  padding: 3px 8px;
}
.jem-badge--md {
  font-size: var(--jem-font-size-caption);
  padding: 4px 10px;
}
.jem-badge--pill {
  border-radius: var(--jem-radius-full);
}
.jem-badge--rounded {
  border-radius: var(--jem-radius-sm);
}
.jem-badge-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  flex: none;
}
.jem-badge--soft.jem-badge--neutral {
  background: var(--jem-ink-100);
  color: var(--jem-ink-700);
  border-color: var(--jem-ink-200);
}
.jem-badge--soft.jem-badge--brand {
  background: var(--jem-brand-50);
  color: var(--jem-brand-800);
  border-color: var(--jem-brand-200);
}
.jem-badge--soft.jem-badge--accent {
  background: var(--jem-accent-50);
  color: var(--jem-accent-800);
  border-color: var(--jem-accent-200);
}
.jem-badge--soft.jem-badge--success {
  background: var(--jem-success-bg);
  color: var(--jem-success-fg);
  border-color: var(--jem-success-br);
}
.jem-badge--soft.jem-badge--warning {
  background: var(--jem-warning-bg);
  color: var(--jem-warning-fg);
  border-color: var(--jem-warning-br);
}
.jem-badge--soft.jem-badge--danger {
  background: var(--jem-danger-bg);
  color: var(--jem-danger-fg);
  border-color: var(--jem-danger-br);
}
.jem-badge--soft.jem-badge--info {
  background: var(--jem-info-bg);
  color: var(--jem-info-fg);
  border-color: var(--jem-info-br);
}
.jem-badge--solid {
  color: #fff;
}
.jem-badge--solid.jem-badge--neutral {
  background: var(--jem-ink-700);
}
.jem-badge--solid.jem-badge--brand {
  background: var(--jem-brand-700);
}
.jem-badge--solid.jem-badge--accent {
  background: var(--jem-accent-600);
}
.jem-badge--solid.jem-badge--success {
  background: var(--jem-success-600);
}
.jem-badge--solid.jem-badge--warning {
  background: var(--jem-warning-600);
}
.jem-badge--solid.jem-badge--danger {
  background: var(--jem-danger-600);
}
.jem-badge--solid.jem-badge--info {
  background: var(--jem-info-600);
}
.jem-badge--outline {
  background: transparent;
}
.jem-badge--outline.jem-badge--neutral {
  color: var(--jem-text-secondary);
  border-color: var(--jem-border-strong);
}
.jem-badge--outline.jem-badge--brand {
  color: var(--jem-brand-700);
  border-color: var(--jem-brand-300);
}
.jem-badge--outline.jem-badge--accent {
  color: var(--jem-accent-700);
  border-color: var(--jem-accent-300);
}
.jem-badge--outline.jem-badge--success {
  color: var(--jem-success-fg);
  border-color: var(--jem-success-br);
}
.jem-badge--outline.jem-badge--warning {
  color: var(--jem-warning-fg);
  border-color: var(--jem-warning-br);
}
.jem-badge--outline.jem-badge--danger {
  color: var(--jem-danger-fg);
  border-color: var(--jem-danger-br);
}
.jem-badge--outline.jem-badge--info {
  color: var(--jem-info-fg);
  border-color: var(--jem-info-br);
}
.jem-avatar {
  display: inline-grid;
  place-items: center;
  flex: none;
  overflow: hidden;
  font-family: var(--jem-font-display);
  font-weight: var(--jem-weight-semibold);
  letter-spacing: -0.01em;
  color: #fff;
  user-select: none;
}
.jem-avatar--circle {
  border-radius: var(--jem-radius-full);
}
.jem-avatar--square {
  border-radius: var(--jem-radius-md);
}
.jem-avatar--sm {
  width: 28px;
  height: 28px;
  font-size: 11px;
}
.jem-avatar--md {
  width: 40px;
  height: 40px;
  font-size: 14px;
}
.jem-avatar--lg {
  width: 56px;
  height: 56px;
  font-size: 18px;
}
.jem-avatar--xl {
  width: 80px;
  height: 80px;
  font-size: 26px;
}
.jem-avatar--ink {
  background: var(--jem-ink-700);
}
.jem-avatar--brand {
  background: var(--jem-brand-700);
}
.jem-avatar--accent {
  background: var(--jem-accent-600);
}
.jem-avatar-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.jem-stat {
  display: flex;
  flex-direction: column;
  gap: var(--jem-space-1);
  min-width: 0;
}
.jem-stat-value {
  font-family: var(--jem-font-display);
  font-weight: var(--jem-weight-semibold);
  letter-spacing: -0.02em;
  line-height: 1.05;
}
.jem-stat--md .jem-stat-value {
  font-size: 2.25rem;
}
.jem-stat--lg .jem-stat-value {
  font-size: 3rem;
}
.jem-stat-value--primary {
  color: var(--jem-text-primary);
}
.jem-stat-value--brand {
  color: var(--jem-brand-600);
}
.jem-stat-value--accent {
  color: var(--jem-accent-600);
}
.jem-stat-value--inverse {
  color: var(--jem-text-inverse);
}
.jem-stat-label {
  font-size: var(--jem-font-size-overline);
  letter-spacing: var(--jem-track-overline);
  text-transform: uppercase;
  font-weight: var(--jem-weight-semibold);
  color: var(--jem-text-muted);
}
.jem-stat-caption {
  font-size: var(--jem-font-size-caption);
  line-height: var(--jem-line-caption);
  color: var(--jem-text-muted);
}
.jem-stat-trend {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  font-size: var(--jem-font-size-caption);
  font-weight: var(--jem-weight-medium);
}
.jem-stat-trend svg {
  width: 14px;
  height: 14px;
}
.jem-stat-trend--good {
  color: var(--jem-success-fg);
}
.jem-stat-trend--bad {
  color: var(--jem-danger-fg);
}
.jem-table-wrap {
  width: 100%;
  overflow-x: auto;
  border: 1px solid var(--jem-border-subtle);
  border-radius: var(--jem-radius-lg);
  background: var(--jem-surface-raised);
}
.jem-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--jem-font-size-body-sm);
}
.jem-table-caption {
  caption-side: top;
  text-align: left;
  padding: var(--jem-space-4) var(--jem-space-5) 0;
  font-size: var(--jem-font-size-body-sm);
  font-weight: var(--jem-weight-semibold);
  color: var(--jem-text-primary);
}
.jem-table-head th {
  text-align: left;
  font-size: var(--jem-font-size-caption);
  font-weight: var(--jem-weight-semibold);
  color: var(--jem-text-secondary);
  background: var(--jem-surface-subtle);
  border-bottom: 1px solid var(--jem-border-default);
  white-space: nowrap;
}
.jem-table--sticky .jem-table-head th {
  position: sticky;
  top: 0;
  z-index: 1;
}
.jem-table-body td {
  border-bottom: 1px solid var(--jem-border-subtle);
  color: var(--jem-text-primary);
  vertical-align: middle;
}
.jem-table-body tr:last-child td {
  border-bottom: 0;
}
.jem-table--comfortable :is(th, td) {
  padding: var(--jem-space-3) var(--jem-space-5);
}
.jem-table--compact :is(th, td) {
  padding: var(--jem-space-2) var(--jem-space-4);
}
.jem-table--striped .jem-table-body tr:nth-child(even) {
  background: var(--jem-surface-subtle);
}
.jem-table-cell--start {
  text-align: left;
}
.jem-table-cell--center {
  text-align: center;
}
.jem-table-cell--end {
  text-align: right;
}
.jem-table-cell--numeric {
  font-family: var(--jem-font-mono);
  font-size: 0.9375em;
}
.jem-accordion--bordered {
  border: 1px solid var(--jem-border-subtle);
  border-radius: var(--jem-radius-lg);
  overflow: hidden;
  background: var(--jem-surface-raised);
}
.jem-accordion-item + .jem-accordion-item {
  border-top: 1px solid var(--jem-border-subtle);
}
.jem-accordion-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--jem-space-4);
  padding: var(--jem-space-4) var(--jem-space-5);
  cursor: pointer;
  list-style: none;
  transition: background-color var(--jem-duration-fast) var(--jem-ease-standard);
}
.jem-accordion-summary::-webkit-details-marker {
  display: none;
}
.jem-accordion-summary:hover {
  background: var(--jem-surface-subtle);
}
.jem-accordion--plain .jem-accordion-summary {
  padding-inline: 0;
}
.jem-accordion--plain .jem-accordion-panel {
  padding-inline: 0;
}
.jem-accordion-question {
  font-size: var(--jem-font-size-body);
  font-weight: var(--jem-weight-medium);
  color: var(--jem-text-primary);
  text-wrap: balance;
}
.jem-accordion-chevron {
  flex: none;
  width: 18px;
  height: 18px;
  color: var(--jem-text-muted);
  transition: transform var(--jem-duration-base) var(--jem-ease-standard);
}
.jem-accordion-item[open] .jem-accordion-chevron {
  transform: rotate(180deg);
}
.jem-accordion-panel {
  padding: 0 var(--jem-space-5) var(--jem-space-5);
  color: var(--jem-text-secondary);
  font-size: var(--jem-font-size-body-sm);
  line-height: var(--jem-line-body-sm);
  max-width: 68ch;
}
.jem-tablist {
  display: flex;
  gap: var(--jem-space-1);
}
.jem-tablist--full .jem-tab {
  flex: 1;
  justify-content: center;
}
.jem-tab {
  display: inline-flex;
  align-items: center;
  gap: var(--jem-space-2);
  padding: var(--jem-space-3) var(--jem-space-4);
  background: none;
  border: 0;
  font-family: inherit;
  font-size: var(--jem-font-size-body-sm);
  font-weight: var(--jem-weight-medium);
  color: var(--jem-text-secondary);
  cursor: pointer;
  white-space: nowrap;
  transition:
    color var(--jem-duration-fast),
    background-color var(--jem-duration-fast),
    border-color var(--jem-duration-fast);
}
.jem-tab:hover:not(:disabled) {
  color: var(--jem-text-primary);
}
.jem-tab:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.jem-tab-icon {
  width: 16px;
  height: 16px;
}
.jem-tab-count {
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  background: var(--jem-ink-100);
  color: var(--jem-ink-600);
  border-radius: var(--jem-radius-full);
  padding: 1px 7px;
}
.jem-tabs--underline .jem-tablist {
  border-bottom: 1px solid var(--jem-border-default);
  gap: var(--jem-space-2);
}
.jem-tabs--underline .jem-tab {
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}
.jem-tabs--underline .jem-tab--active {
  color: var(--jem-text-brand);
  border-bottom-color: var(--jem-brand-600);
}
.jem-tabs--enclosed .jem-tablist {
  border-bottom: 1px solid var(--jem-border-default);
}
.jem-tabs--enclosed .jem-tab {
  border: 1px solid transparent;
  border-bottom: 0;
  border-radius: var(--jem-radius-md) var(--jem-radius-md) 0 0;
  margin-bottom: -1px;
}
.jem-tabs--enclosed .jem-tab--active {
  background: var(--jem-surface-raised);
  border-color: var(--jem-border-default);
  color: var(--jem-text-primary);
}
.jem-tabs--pill .jem-tablist {
  background: var(--jem-surface-sunken);
  padding: 4px;
  border-radius: var(--jem-radius-md);
  display: inline-flex;
}
.jem-tabs--pill .jem-tab {
  border-radius: var(--jem-radius-sm);
  padding: var(--jem-space-2) var(--jem-space-4);
}
.jem-tabs--pill .jem-tab--active {
  background: var(--jem-surface-raised);
  color: var(--jem-text-primary);
  box-shadow: var(--jem-shadow-xs);
}
.jem-tabpanel {
  padding-top: var(--jem-space-5);
}
.jem-timeline {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
}
.jem-timeline--vertical {
  flex-direction: column;
}
.jem-timeline--horizontal {
  flex-direction: row;
  gap: var(--jem-space-6);
}
.jem-timeline-step {
  position: relative;
  display: flex;
  min-width: 0;
}
.jem-timeline--vertical .jem-timeline-step {
  gap: var(--jem-space-4);
  padding-bottom: var(--jem-space-8);
}
.jem-timeline--vertical .jem-timeline-step:last-child {
  padding-bottom: 0;
}
.jem-timeline--horizontal .jem-timeline-step {
  flex: 1;
  flex-direction: column;
  gap: var(--jem-space-4);
}
.jem-timeline--vertical .jem-timeline-step:not(:last-child)::before {
  content: "";
  position: absolute;
  left: 17px;
  top: 40px;
  bottom: 4px;
  width: 2px;
  background: var(--jem-border-default);
}
.jem-timeline--horizontal .jem-timeline-step:not(:last-child)::before {
  content: "";
  position: absolute;
  top: 17px;
  left: 44px;
  right: calc(var(--jem-space-6) * -1 + 8px);
  height: 2px;
  background: var(--jem-border-default);
}
.jem-timeline-marker {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  flex: none;
  width: 36px;
  height: 36px;
  border-radius: var(--jem-radius-full);
  background: var(--jem-surface-raised);
  border: 1px solid var(--jem-border-default);
  color: var(--jem-text-secondary);
}
.jem-timeline-marker svg {
  width: 17px;
  height: 17px;
}
.jem-timeline-number {
  font-family: var(--jem-font-mono);
  font-size: var(--jem-font-size-caption);
  font-weight: var(--jem-weight-medium);
}
.jem-timeline-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--jem-brand-500);
}
.jem-timeline-step--complete .jem-timeline-marker {
  background: var(--jem-brand-700);
  border-color: var(--jem-brand-700);
  color: #fff;
}
.jem-timeline-step--current .jem-timeline-marker {
  border-color: var(--jem-brand-600);
  color: var(--jem-brand-700);
  box-shadow: 0 0 0 4px var(--jem-brand-50);
}
.jem-timeline-step--upcoming .jem-timeline-marker {
  color: var(--jem-text-disabled);
}
.jem-timeline-body {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
  padding-top: 5px;
}
.jem-timeline--horizontal .jem-timeline-body {
  padding-top: 0;
}
.jem-timeline-meta {
  font-size: var(--jem-font-size-overline);
  letter-spacing: var(--jem-track-overline);
  text-transform: uppercase;
  font-weight: var(--jem-weight-semibold);
  color: var(--jem-text-brand);
}
.jem-timeline-title {
  font-family: var(--jem-font-display);
  font-size: var(--jem-font-size-h4);
  font-weight: var(--jem-weight-semibold);
  color: var(--jem-text-primary);
  line-height: 1.35;
}
.jem-timeline-description {
  font-size: var(--jem-font-size-body-sm);
  line-height: var(--jem-line-body-sm);
  color: var(--jem-text-secondary);
  max-width: 46ch;
}
@media (max-width: 760px) {
  .jem-timeline--horizontal {
    flex-direction: column;
    gap: 0;
  }
  .jem-timeline--horizontal .jem-timeline-step {
    flex-direction: row;
    gap: var(--jem-space-4);
    padding-bottom: var(--jem-space-8);
  }
  .jem-timeline--horizontal .jem-timeline-step:not(:last-child)::before {
    top: 40px;
    bottom: 4px;
    left: 17px;
    right: auto;
    width: 2px;
    height: auto;
  }
}

/* src/styles/components/feedback.css */
.jem-alert {
  display: flex;
  align-items: flex-start;
  gap: var(--jem-space-3);
  padding: var(--jem-space-4);
  border: 1px solid transparent;
  border-radius: var(--jem-radius-md);
  font-size: var(--jem-font-size-body-sm);
  line-height: var(--jem-line-body-sm);
}
.jem-alert-icon {
  flex: none;
  width: 18px;
  height: 18px;
  margin-top: 1px;
}
.jem-alert-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.jem-alert-title {
  margin: 0;
  font-weight: var(--jem-weight-semibold);
}
.jem-alert-message {
  margin: 0;
}
.jem-alert-message p {
  margin: 0;
}
.jem-alert-action {
  flex: none;
  align-self: center;
}
.jem-alert-dismiss {
  flex: none;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  margin: -2px -2px 0 0;
  padding: 0;
  background: none;
  border: 0;
  border-radius: var(--jem-radius-sm);
  color: currentColor;
  opacity: 0.6;
  cursor: pointer;
}
.jem-alert-dismiss:hover {
  opacity: 1;
  background: rgba(0, 0, 0, 0.06);
}
.jem-alert-dismiss svg {
  width: 15px;
  height: 15px;
}
.jem-alert--soft.jem-alert--info {
  background: var(--jem-info-bg);
  color: var(--jem-info-fg);
  border-color: var(--jem-info-br);
}
.jem-alert--soft.jem-alert--success {
  background: var(--jem-success-bg);
  color: var(--jem-success-fg);
  border-color: var(--jem-success-br);
}
.jem-alert--soft.jem-alert--warning {
  background: var(--jem-warning-bg);
  color: var(--jem-warning-fg);
  border-color: var(--jem-warning-br);
}
.jem-alert--soft.jem-alert--danger {
  background: var(--jem-danger-bg);
  color: var(--jem-danger-fg);
  border-color: var(--jem-danger-br);
}
.jem-alert--soft.jem-alert--neutral {
  background: var(--jem-ink-50);
  color: var(--jem-ink-700);
  border-color: var(--jem-ink-200);
}
.jem-alert--solid {
  color: #fff;
}
.jem-alert--solid.jem-alert--info {
  background: var(--jem-info-600);
}
.jem-alert--solid.jem-alert--success {
  background: var(--jem-success-600);
}
.jem-alert--solid.jem-alert--warning {
  background: var(--jem-warning-600);
}
.jem-alert--solid.jem-alert--danger {
  background: var(--jem-danger-600);
}
.jem-alert--solid.jem-alert--neutral {
  background: var(--jem-ink-700);
}
.jem-alert--outline {
  background: var(--jem-surface-raised);
}
.jem-alert--outline.jem-alert--info {
  color: var(--jem-info-fg);
  border-color: var(--jem-info-br);
}
.jem-alert--outline.jem-alert--success {
  color: var(--jem-success-fg);
  border-color: var(--jem-success-br);
}
.jem-alert--outline.jem-alert--warning {
  color: var(--jem-warning-fg);
  border-color: var(--jem-warning-br);
}
.jem-alert--outline.jem-alert--danger {
  color: var(--jem-danger-fg);
  border-color: var(--jem-danger-br);
}
.jem-alert--outline.jem-alert--neutral {
  color: var(--jem-text-secondary);
  border-color: var(--jem-border-default);
}
.jem-progress {
  display: flex;
  flex-direction: column;
  gap: var(--jem-space-2);
  width: 100%;
}
.jem-progress-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--jem-space-4);
}
.jem-progress-label {
  font-size: var(--jem-font-size-body-sm);
  font-weight: var(--jem-weight-medium);
  color: var(--jem-text-primary);
}
.jem-progress-value {
  font-size: var(--jem-font-size-body-sm);
  font-family: var(--jem-font-mono);
  color: var(--jem-text-secondary);
}
.jem-progress-track {
  width: 100%;
  background: var(--jem-surface-sunken);
  border-radius: var(--jem-radius-full);
  overflow: hidden;
}
.jem-progress--sm .jem-progress-track {
  height: 4px;
}
.jem-progress--md .jem-progress-track {
  height: 8px;
}
.jem-progress--lg .jem-progress-track {
  height: 12px;
}
.jem-progress-fill {
  height: 100%;
  border-radius: var(--jem-radius-full);
  transition: width var(--jem-duration-slow) var(--jem-ease-out);
}
.jem-progress-fill--brand {
  background: var(--jem-brand-600);
}
.jem-progress-fill--accent {
  background: var(--jem-accent-500);
}
.jem-progress-fill--success {
  background: var(--jem-success-500);
}
.jem-progress-fill--warning {
  background: var(--jem-warning-500);
}
.jem-progress-fill--danger {
  background: var(--jem-danger-500);
}
.jem-spinner-wrap {
  display: inline-flex;
  align-items: center;
  gap: var(--jem-space-3);
}
.jem-spinner-wrap--block {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 100%;
  padding: var(--jem-space-12) 0;
}
.jem-spinner {
  display: block;
  border-radius: 50%;
  border-style: solid;
  border-right-color: transparent !important;
  animation: jem-spin 620ms linear infinite;
}
.jem-spinner--sm {
  width: 16px;
  height: 16px;
  border-width: 2px;
}
.jem-spinner--md {
  width: 24px;
  height: 24px;
  border-width: 2.5px;
}
.jem-spinner--lg {
  width: 36px;
  height: 36px;
  border-width: 3px;
}
.jem-spinner--brand {
  border-color: var(--jem-brand-600);
}
.jem-spinner--ink {
  border-color: var(--jem-ink-400);
}
.jem-spinner--inverse {
  border-color: rgba(255, 255, 255, 0.85);
}
.jem-spinner-label {
  font-size: var(--jem-font-size-body-sm);
  color: var(--jem-text-secondary);
}
.jem-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: var(--jem-z-modal);
  display: grid;
  place-items: center;
  padding: var(--jem-space-6);
  background: var(--jem-surface-overlay);
}
.jem-modal {
  width: 100%;
  max-height: calc(100vh - var(--jem-space-12));
  display: flex;
  flex-direction: column;
  background: var(--jem-surface-raised);
  border-radius: var(--jem-radius-lg);
  box-shadow: var(--jem-shadow-xl);
  overflow: hidden;
}
.jem-modal--sm {
  max-width: 420px;
}
.jem-modal--md {
  max-width: 560px;
}
.jem-modal--lg {
  max-width: 760px;
}
.jem-modal-header {
  display: flex;
  align-items: flex-start;
  gap: var(--jem-space-4);
  padding: var(--jem-space-6) var(--jem-space-6) var(--jem-space-4);
}
.jem-modal-heading {
  flex: 1;
  min-width: 0;
}
.jem-modal-title {
  margin: 0;
  font-family: var(--jem-font-display);
  font-size: var(--jem-font-size-h3);
  line-height: var(--jem-line-h3);
  font-weight: var(--jem-weight-semibold);
  color: var(--jem-text-primary);
}
.jem-modal-description {
  margin: var(--jem-space-2) 0 0;
  font-size: var(--jem-font-size-body-sm);
  line-height: var(--jem-line-body-sm);
  color: var(--jem-text-secondary);
}
.jem-modal-close {
  flex: none;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  background: none;
  border: 0;
  border-radius: var(--jem-radius-md);
  color: var(--jem-text-muted);
  cursor: pointer;
}
.jem-modal-close:hover {
  background: var(--jem-surface-subtle);
  color: var(--jem-text-primary);
}
.jem-modal-close svg {
  width: 18px;
  height: 18px;
}
.jem-modal-body {
  padding: 0 var(--jem-space-6) var(--jem-space-6);
  overflow-y: auto;
  font-size: var(--jem-font-size-body-sm);
  line-height: var(--jem-line-body-sm);
  color: var(--jem-text-secondary);
}
.jem-modal-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--jem-space-3);
  padding: var(--jem-space-4) var(--jem-space-6);
  background: var(--jem-surface-subtle);
  border-top: 1px solid var(--jem-border-subtle);
}

/* src/styles/components/navigation.css */
.jem-navbar {
  width: 100%;
}
.jem-navbar--sticky {
  position: sticky;
  top: 0;
  z-index: var(--jem-z-sticky);
}
.jem-navbar--page {
  background: var(--jem-surface-page);
}
.jem-navbar--subtle {
  background: var(--jem-surface-subtle);
}
.jem-navbar--inverse {
  background: var(--jem-ink-900);
}
.jem-navbar--transparent {
  background: transparent;
}
.jem-navbar--bordered.jem-navbar--page,
.jem-navbar--bordered.jem-navbar--subtle {
  border-bottom: 1px solid var(--jem-border-subtle);
}
.jem-navbar--bordered.jem-navbar--inverse {
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.jem-navbar-inner {
  display: flex;
  align-items: center;
  gap: var(--jem-space-8);
  width: 100%;
  max-width: var(--jem-container-xl);
  margin-inline: auto;
  padding: var(--jem-space-4) var(--jem-space-6);
}
.jem-navbar-brand {
  display: flex;
  align-items: center;
  gap: var(--jem-space-3);
  text-decoration: none;
  flex: none;
}
.jem-navbar-mark {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: var(--jem-radius-md);
  background:
    linear-gradient(
      135deg,
      var(--jem-brand-400),
      var(--jem-brand-700));
  font-family: var(--jem-font-display);
  font-size: 12px;
  font-weight: var(--jem-weight-bold);
  letter-spacing: -0.02em;
  color: #fff;
}
.jem-navbar-wordmark {
  font-family: var(--jem-font-display);
  font-size: 1rem;
  font-weight: var(--jem-weight-semibold);
  letter-spacing: -0.012em;
  color: var(--jem-text-primary);
  white-space: nowrap;
}
.jem-navbar-wordmark-suffix {
  color: var(--jem-brand-600);
  font-weight: var(--jem-weight-medium);
}
.jem-navbar--inverse .jem-navbar-wordmark,
.jem-navbar--transparent .jem-navbar-wordmark {
  color: var(--jem-text-inverse);
}
.jem-navbar--inverse .jem-navbar-wordmark-suffix,
.jem-navbar--transparent .jem-navbar-wordmark-suffix {
  color: var(--jem-brand-300);
}
.jem-navbar-nav {
  display: flex;
  align-items: center;
  gap: var(--jem-space-6);
  flex: 1;
}
.jem-navbar-link {
  font-size: var(--jem-font-size-body-sm);
  font-weight: var(--jem-weight-medium);
  color: var(--jem-text-secondary);
  text-decoration: none;
  padding-block: var(--jem-space-2);
  border-bottom: 2px solid transparent;
  white-space: nowrap;
  transition: color var(--jem-duration-fast) var(--jem-ease-standard);
}
.jem-navbar-link:hover {
  color: var(--jem-text-primary);
}
.jem-navbar-link--active {
  color: var(--jem-text-brand);
  border-bottom-color: var(--jem-brand-600);
}
.jem-navbar--inverse .jem-navbar-link,
.jem-navbar--transparent .jem-navbar-link {
  color: var(--jem-ink-300);
}
.jem-navbar--inverse .jem-navbar-link:hover,
.jem-navbar--transparent .jem-navbar-link:hover {
  color: #fff;
}
.jem-navbar--inverse .jem-navbar-link--active,
.jem-navbar--transparent .jem-navbar-link--active {
  color: #fff;
  border-bottom-color: var(--jem-brand-400);
}
.jem-navbar-actions {
  display: flex;
  align-items: center;
  gap: var(--jem-space-3);
  flex: none;
}
.jem-navbar-toggle {
  display: none;
  place-items: center;
  width: 36px;
  height: 36px;
  background: none;
  border: 1px solid var(--jem-border-default);
  border-radius: var(--jem-radius-md);
  color: var(--jem-text-primary);
  cursor: pointer;
}
.jem-navbar--inverse .jem-navbar-toggle,
.jem-navbar--transparent .jem-navbar-toggle {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.25);
}
@media (max-width: 860px) {
  .jem-navbar-nav {
    display: none;
  }
  .jem-navbar-toggle {
    display: grid;
  }
  .jem-navbar-inner {
    gap: var(--jem-space-4);
    justify-content: space-between;
  }
}
.jem-breadcrumbs-list {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--jem-space-2);
  list-style: none;
  margin: 0;
  padding: 0;
}
.jem-breadcrumbs-item {
  display: flex;
  align-items: center;
  gap: var(--jem-space-2);
}
.jem-breadcrumbs-link,
.jem-breadcrumbs-current {
  font-size: var(--jem-font-size-caption);
  text-decoration: none;
}
.jem-breadcrumbs-link {
  color: var(--jem-text-muted);
}
.jem-breadcrumbs-link:hover {
  color: var(--jem-text-brand);
  text-decoration: underline;
  text-underline-offset: 0.16em;
}
.jem-breadcrumbs-current {
  color: var(--jem-text-primary);
  font-weight: var(--jem-weight-medium);
}
.jem-breadcrumbs-sep {
  width: 13px;
  height: 13px;
  color: var(--jem-text-disabled);
}
.jem-breadcrumbs--inverse .jem-breadcrumbs-link {
  color: var(--jem-ink-400);
}
.jem-breadcrumbs--inverse .jem-breadcrumbs-link:hover {
  color: var(--jem-brand-300);
}
.jem-breadcrumbs--inverse .jem-breadcrumbs-current {
  color: var(--jem-ink-100);
}
.jem-breadcrumbs--inverse .jem-breadcrumbs-sep {
  color: var(--jem-ink-600);
}
.jem-footer {
  width: 100%;
}
.jem-footer--inverse {
  background: var(--jem-ink-950);
  color: var(--jem-ink-300);
}
.jem-footer--subtle {
  background: var(--jem-surface-subtle);
  color: var(--jem-text-secondary);
  border-top: 1px solid var(--jem-border-subtle);
}
.jem-footer-inner {
  max-width: var(--jem-container-xl);
  margin-inline: auto;
  padding: var(--jem-space-16) var(--jem-space-6) var(--jem-space-8);
}
.jem-footer-top {
  display: flex;
  flex-wrap: wrap;
  gap: var(--jem-space-10);
  padding-bottom: var(--jem-space-10);
}
.jem-footer-brand-col {
  flex: 1 1 300px;
  min-width: 260px;
}
.jem-footer-col {
  flex: 0 1 170px;
}
.jem-footer-brand {
  display: flex;
  align-items: center;
  gap: var(--jem-space-3);
  margin-bottom: var(--jem-space-4);
}
.jem-footer-mark {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: var(--jem-radius-md);
  background:
    linear-gradient(
      135deg,
      var(--jem-brand-400),
      var(--jem-brand-700));
  font-family: var(--jem-font-display);
  font-size: 12px;
  font-weight: var(--jem-weight-bold);
  letter-spacing: -0.02em;
  color: #fff;
}
.jem-footer-wordmark {
  font-family: var(--jem-font-display);
  font-size: 1rem;
  font-weight: var(--jem-weight-semibold);
  letter-spacing: -0.012em;
}
.jem-footer--inverse .jem-footer-wordmark {
  color: #fff;
}
.jem-footer--subtle .jem-footer-wordmark {
  color: var(--jem-text-primary);
}
.jem-footer-wordmark-suffix {
  color: var(--jem-brand-400);
  font-weight: var(--jem-weight-medium);
}
.jem-footer-blurb {
  margin: 0 0 var(--jem-space-5);
  font-size: var(--jem-font-size-body-sm);
  line-height: var(--jem-line-body-sm);
  max-width: 40ch;
}
.jem-footer-contact {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--jem-space-2);
}
.jem-footer-contact-item {
  display: flex;
  align-items: center;
  gap: var(--jem-space-2);
  font-size: var(--jem-font-size-body-sm);
}
.jem-footer-contact-icon {
  width: 15px;
  height: 15px;
  opacity: 0.7;
  flex: none;
}
.jem-footer-col-title {
  margin: 0 0 var(--jem-space-4);
  font-size: var(--jem-font-size-overline);
  letter-spacing: var(--jem-track-overline);
  text-transform: uppercase;
  font-weight: var(--jem-weight-semibold);
}
.jem-footer--inverse .jem-footer-col-title {
  color: #fff;
}
.jem-footer--subtle .jem-footer-col-title {
  color: var(--jem-text-primary);
}
.jem-footer-col-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--jem-space-3);
}
.jem-footer-link {
  font-size: var(--jem-font-size-body-sm);
  color: inherit;
  text-decoration: none;
  transition: color var(--jem-duration-fast) var(--jem-ease-standard);
}
.jem-footer--inverse .jem-footer-link:hover {
  color: var(--jem-brand-300);
}
.jem-footer--subtle .jem-footer-link:hover {
  color: var(--jem-text-brand);
}
.jem-footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--jem-space-4);
  padding-top: var(--jem-space-6);
}
.jem-footer--inverse .jem-footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.jem-footer--subtle .jem-footer-bottom {
  border-top: 1px solid var(--jem-border-subtle);
}
.jem-footer-legal {
  margin: 0;
  font-size: var(--jem-font-size-caption);
  opacity: 0.8;
}
.jem-footer-legal-links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: var(--jem-space-5);
  font-size: var(--jem-font-size-caption);
}
@media (max-width: 760px) {
  .jem-footer-top {
    flex-direction: column;
    gap: var(--jem-space-8);
  }
  .jem-footer-inner {
    padding-top: var(--jem-space-12);
  }
}

/* src/styles/components/marketing.css */
.jem-hero {
  width: 100%;
}
.jem-hero--inverse {
  background: var(--jem-ink-900);
  color: var(--jem-text-inverse);
}
.jem-hero--page {
  background: var(--jem-surface-page);
}
.jem-hero--subtle {
  background: var(--jem-surface-subtle);
}
.jem-hero--brand {
  background: var(--jem-brand-800);
  color: #fff;
}
.jem-hero--inverse,
.jem-hero--brand {
  background-image:
    radial-gradient(
      120% 90% at 88% 8%,
      rgba(21, 148, 164, 0.22),
      transparent 58%),
    radial-gradient(
      80% 70% at 4% 100%,
      rgba(213, 123, 38, 0.1),
      transparent 62%);
}
.jem-hero-inner {
  max-width: var(--jem-container-xl);
  margin-inline: auto;
  padding-inline: var(--jem-space-6);
}
.jem-hero--md .jem-hero-inner {
  padding-block: var(--jem-space-16);
}
.jem-hero--lg .jem-hero-inner {
  padding-block: var(--jem-space-24);
}
.jem-hero-nav {
  position: relative;
  z-index: 1;
}
.jem-hero--has-nav.jem-hero--md .jem-hero-inner {
  padding-block-start: var(--jem-space-12);
}
.jem-hero--has-nav.jem-hero--lg .jem-hero-inner {
  padding-block-start: var(--jem-space-16);
}
.jem-hero--centered .jem-hero-inner {
  text-align: center;
}
.jem-hero--centered .jem-hero-copy {
  margin-inline: auto;
}
.jem-hero--centered .jem-hero-actions {
  justify-content: center;
}
.jem-hero--centered .jem-hero-eyebrow {
  justify-content: center;
}
.jem-hero--split .jem-hero-inner {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: var(--jem-space-16);
  align-items: center;
}
.jem-hero-copy {
  max-width: 62ch;
}
.jem-hero--centered .jem-hero-copy {
  max-width: 60ch;
}
.jem-hero-eyebrow {
  display: flex;
  align-items: center;
  gap: var(--jem-space-2);
  margin: 0 0 var(--jem-space-4);
  font-size: var(--jem-font-size-overline);
  letter-spacing: var(--jem-track-overline);
  text-transform: uppercase;
  font-weight: var(--jem-weight-semibold);
  color: var(--jem-brand-300);
}
.jem-hero--page .jem-hero-eyebrow,
.jem-hero--subtle .jem-hero-eyebrow {
  color: var(--jem-text-brand);
}
.jem-hero-title {
  margin: 0;
  font-family: var(--jem-font-display);
  font-size: var(--jem-font-size-display-lg);
  line-height: var(--jem-line-display-lg);
  letter-spacing: var(--jem-track-display-lg);
  font-weight: var(--jem-weight-semibold);
  max-width: 20ch;
  text-wrap: balance;
}
.jem-hero--centered .jem-hero-title {
  margin-inline: auto;
}
.jem-hero--md .jem-hero-title {
  font-size: var(--jem-font-size-display);
}
.jem-hero-subtitle {
  margin: var(--jem-space-5) 0 0;
  font-size: var(--jem-font-size-body-lg);
  line-height: var(--jem-line-body-lg);
  max-width: 56ch;
  color: var(--jem-text-secondary);
}
.jem-hero--inverse .jem-hero-subtitle,
.jem-hero--brand .jem-hero-subtitle {
  color: var(--jem-ink-300);
}
.jem-hero--centered .jem-hero-subtitle {
  margin-inline: auto;
}
.jem-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--jem-space-3);
  margin-top: var(--jem-space-8);
}
.jem-hero-footer {
  margin-top: var(--jem-space-12);
}
.jem-hero-media {
  min-width: 0;
}
@media (max-width: 900px) {
  .jem-hero--split .jem-hero-inner {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--jem-space-10);
  }
}
@media (max-width: 768px) {
  .jem-hero-title {
    font-size: 2.375rem;
  }
  .jem-hero--lg .jem-hero-inner {
    padding-block: var(--jem-space-16);
  }
}
.jem-pageheader--page {
  background: var(--jem-surface-page);
}
.jem-pageheader--subtle {
  background: var(--jem-surface-subtle);
}
.jem-pageheader--inverse {
  background: var(--jem-ink-900);
  color: var(--jem-text-inverse);
}
.jem-pageheader--bordered.jem-pageheader--page,
.jem-pageheader--bordered.jem-pageheader--subtle {
  border-bottom: 1px solid var(--jem-border-subtle);
}
.jem-pageheader-inner {
  max-width: var(--jem-container-xl);
  margin-inline: auto;
  padding: var(--jem-space-10) var(--jem-space-6) var(--jem-space-12);
}
.jem-pageheader-breadcrumbs {
  margin-bottom: var(--jem-space-6);
}
.jem-pageheader-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--jem-space-8);
  flex-wrap: wrap;
}
.jem-pageheader-copy {
  min-width: 0;
}
.jem-pageheader-eyebrow {
  margin: 0 0 var(--jem-space-3);
  font-size: var(--jem-font-size-overline);
  letter-spacing: var(--jem-track-overline);
  text-transform: uppercase;
  font-weight: var(--jem-weight-semibold);
  color: var(--jem-text-brand);
}
.jem-pageheader--inverse .jem-pageheader-eyebrow {
  color: var(--jem-brand-300);
}
.jem-pageheader-title {
  margin: 0;
  font-family: var(--jem-font-display);
  font-size: var(--jem-font-size-h1);
  line-height: var(--jem-line-h1);
  letter-spacing: var(--jem-track-h1);
  font-weight: var(--jem-weight-semibold);
  max-width: 24ch;
  text-wrap: balance;
}
.jem-pageheader-description {
  margin: var(--jem-space-4) 0 0;
  font-size: var(--jem-font-size-body-lg);
  line-height: var(--jem-line-body-lg);
  color: var(--jem-text-secondary);
  max-width: 62ch;
}
.jem-pageheader--inverse .jem-pageheader-description {
  color: var(--jem-ink-300);
}
.jem-pageheader-meta {
  margin-top: var(--jem-space-4);
}
.jem-pageheader-actions {
  display: flex;
  gap: var(--jem-space-3);
  flex: none;
}
.jem-service-card {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: var(--jem-space-6);
  background: var(--jem-surface-raised);
  border: 1px solid var(--jem-border-subtle);
  border-radius: var(--jem-radius-lg);
  text-decoration: none;
  color: inherit;
  transition:
    border-color var(--jem-duration-base) var(--jem-ease-standard),
    box-shadow var(--jem-duration-base) var(--jem-ease-standard),
    transform var(--jem-duration-base) var(--jem-ease-standard);
}
.jem-service-card--linked:hover {
  border-color: var(--jem-border-strong);
  box-shadow: var(--jem-shadow-md);
  transform: translateY(-2px);
}
.jem-service-card--featured {
  border-color: var(--jem-accent-200);
  background: var(--jem-accent-50);
}
.jem-service-card--featured::before {
  content: "";
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  width: 3px;
  border-radius: var(--jem-radius-lg) 0 0 var(--jem-radius-lg);
  background: var(--jem-accent-500);
}
.jem-service-card-icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin-bottom: var(--jem-space-5);
  border-radius: var(--jem-radius-md);
  background: var(--jem-brand-50);
  color: var(--jem-brand-700);
}
.jem-service-card--featured .jem-service-card-icon {
  background: var(--jem-accent-100);
  color: var(--jem-accent-700);
}
.jem-service-card-title {
  margin: 0;
  font-family: var(--jem-font-display);
  font-size: var(--jem-font-size-h3);
  line-height: var(--jem-line-h3);
  font-weight: var(--jem-weight-semibold);
  color: var(--jem-text-primary);
}
.jem-service-card-description {
  margin: var(--jem-space-3) 0 0;
  font-size: var(--jem-font-size-body-sm);
  line-height: var(--jem-line-body-sm);
  color: var(--jem-text-secondary);
}
.jem-service-card-points {
  list-style: none;
  margin: var(--jem-space-5) 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--jem-space-2);
}
.jem-service-card-point {
  display: flex;
  align-items: flex-start;
  gap: var(--jem-space-2);
  font-size: var(--jem-font-size-body-sm);
  color: var(--jem-text-secondary);
}
.jem-service-card-tick {
  width: 15px;
  height: 15px;
  margin-top: 3px;
  flex: none;
  color: var(--jem-brand-600);
}
.jem-service-card--featured .jem-service-card-tick {
  color: var(--jem-accent-600);
}
.jem-service-card-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--jem-space-4);
  margin-top: auto;
  padding-top: var(--jem-space-6);
}
.jem-service-card-meta {
  font-size: var(--jem-font-size-caption);
  color: var(--jem-text-muted);
  font-family: var(--jem-font-mono);
}
.jem-service-card-link {
  display: inline-flex;
  align-items: center;
  gap: var(--jem-space-1);
  font-size: var(--jem-font-size-body-sm);
  font-weight: var(--jem-weight-semibold);
  color: var(--jem-text-brand);
  white-space: nowrap;
}
.jem-service-card-link svg {
  width: 15px;
  height: 15px;
  transition: transform var(--jem-duration-base) var(--jem-ease-out);
}
.jem-service-card--linked:hover .jem-service-card-link svg {
  transform: translateX(3px);
}
.jem-insight-card {
  display: flex;
  height: 100%;
  background: var(--jem-surface-raised);
  border: 1px solid var(--jem-border-subtle);
  border-radius: var(--jem-radius-lg);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition:
    border-color var(--jem-duration-base) var(--jem-ease-standard),
    box-shadow var(--jem-duration-base) var(--jem-ease-standard),
    transform var(--jem-duration-base) var(--jem-ease-standard);
}
a.jem-insight-card:hover {
  border-color: var(--jem-border-strong);
  box-shadow: var(--jem-shadow-md);
  transform: translateY(-2px);
}
.jem-insight-card--vertical {
  flex-direction: column;
}
.jem-insight-card--horizontal {
  flex-direction: row;
}
.jem-insight-card-media {
  flex: none;
  background: var(--jem-surface-sunken);
}
.jem-insight-card--vertical .jem-insight-card-media {
  aspect-ratio: 16 / 9;
}
.jem-insight-card--horizontal .jem-insight-card-media {
  width: 40%;
}
.jem-insight-card-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.jem-insight-card-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
  padding: var(--jem-space-6);
}
.jem-insight-card-kicker {
  display: flex;
  align-items: center;
  gap: var(--jem-space-2);
  margin-bottom: var(--jem-space-3);
  font-size: var(--jem-font-size-overline);
  letter-spacing: var(--jem-track-overline);
  text-transform: uppercase;
  font-weight: var(--jem-weight-semibold);
}
.jem-insight-card-kind {
  color: var(--jem-text-brand);
}
.jem-insight-card-sep {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--jem-ink-300);
}
.jem-insight-card-date {
  color: var(--jem-text-muted);
}
.jem-insight-card-title {
  margin: 0;
  font-family: var(--jem-font-display);
  font-size: var(--jem-font-size-h3);
  line-height: var(--jem-line-h3);
  letter-spacing: var(--jem-track-h3);
  font-weight: var(--jem-weight-semibold);
  color: var(--jem-text-primary);
  text-wrap: balance;
}
.jem-insight-card-excerpt {
  margin: var(--jem-space-3) 0 0;
  font-size: var(--jem-font-size-body-sm);
  line-height: var(--jem-line-body-sm);
  color: var(--jem-text-secondary);
}
.jem-insight-card-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--jem-space-4);
  margin-top: auto;
  padding-top: var(--jem-space-6);
}
.jem-insight-card-byline {
  font-size: var(--jem-font-size-caption);
  color: var(--jem-text-muted);
}
.jem-insight-card-arrow {
  width: 16px;
  height: 16px;
  color: var(--jem-text-brand);
  flex: none;
}
@media (max-width: 700px) {
  .jem-insight-card--horizontal {
    flex-direction: column;
  }
  .jem-insight-card--horizontal .jem-insight-card-media {
    width: 100%;
    aspect-ratio: 16 / 9;
  }
}
.jem-quote {
  margin: 0;
}
.jem-quote--align-center {
  text-align: center;
}
.jem-quote--align-center .jem-quote-attribution {
  justify-content: center;
}
.jem-quote-text {
  margin: 0;
  font-family: var(--jem-font-display);
  font-weight: var(--jem-weight-medium);
  line-height: 1.45;
  letter-spacing: -0.01em;
  color: var(--jem-text-primary);
  text-wrap: pretty;
}
.jem-quote--md .jem-quote-text {
  font-size: var(--jem-font-size-h3);
  max-width: 44ch;
}
.jem-quote--lg .jem-quote-text {
  font-size: var(--jem-font-size-h2);
  max-width: 40ch;
}
.jem-quote--align-center .jem-quote-text {
  margin-inline: auto;
}
.jem-quote-text::before {
  content: "\201c";
}
.jem-quote-text::after {
  content: "\201d";
}
.jem-quote--rule {
  border-left: 3px solid var(--jem-accent-500);
  padding-left: var(--jem-space-6);
}
.jem-quote--rule.jem-quote--align-center {
  border-left: 0;
  padding-left: 0;
}
.jem-quote--panel {
  padding: var(--jem-space-8);
  background: var(--jem-surface-subtle);
  border-radius: var(--jem-radius-lg);
}
.jem-quote--inverse {
  color: var(--jem-text-inverse);
}
.jem-quote--inverse .jem-quote-text {
  color: var(--jem-text-inverse);
}
.jem-quote--inverse.jem-quote--panel {
  background: rgba(255, 255, 255, 0.06);
}
.jem-quote-attribution {
  display: flex;
  align-items: center;
  gap: var(--jem-space-3);
  margin-top: var(--jem-space-6);
}
.jem-quote-attribution-text {
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.jem-quote-author {
  font-size: var(--jem-font-size-body-sm);
  font-weight: var(--jem-weight-semibold);
  color: var(--jem-text-primary);
}
.jem-quote--inverse .jem-quote-author {
  color: #fff;
}
.jem-quote-role {
  font-size: var(--jem-font-size-caption);
  color: var(--jem-text-muted);
}
.jem-quote--inverse .jem-quote-role {
  color: var(--jem-ink-400);
}
.jem-cta {
  width: 100%;
}
.jem-cta--inverse {
  background: var(--jem-ink-900);
  color: var(--jem-text-inverse);
}
.jem-cta--brand {
  background: var(--jem-brand-800);
  color: #fff;
}
.jem-cta--accent {
  background: var(--jem-accent-700);
  color: #fff;
}
.jem-cta--subtle {
  background: var(--jem-surface-subtle);
}
.jem-cta--inverse,
.jem-cta--brand {
  background-image:
    radial-gradient(
      90% 120% at 78% 0%,
      rgba(21, 148, 164, 0.24),
      transparent 60%);
}
.jem-cta-inner {
  max-width: var(--jem-container-lg);
  margin-inline: auto;
  padding-inline: var(--jem-space-6);
}
.jem-cta--md .jem-cta-inner {
  padding-block: var(--jem-space-12);
}
.jem-cta--lg .jem-cta-inner {
  padding-block: var(--jem-space-20);
}
.jem-cta--centered .jem-cta-inner {
  text-align: center;
}
.jem-cta--centered .jem-cta-actions {
  justify-content: center;
}
.jem-cta--split .jem-cta-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--jem-space-10);
  flex-wrap: wrap;
  max-width: var(--jem-container-xl);
}
.jem-cta-eyebrow {
  margin: 0 0 var(--jem-space-3);
  font-size: var(--jem-font-size-overline);
  letter-spacing: var(--jem-track-overline);
  text-transform: uppercase;
  font-weight: var(--jem-weight-semibold);
  color: var(--jem-brand-300);
}
.jem-cta--subtle .jem-cta-eyebrow {
  color: var(--jem-text-brand);
}
.jem-cta--accent .jem-cta-eyebrow {
  color: var(--jem-accent-100);
}
.jem-cta-title {
  margin: 0;
  font-family: var(--jem-font-display);
  font-size: var(--jem-font-size-h1);
  line-height: var(--jem-line-h1);
  letter-spacing: var(--jem-track-h1);
  font-weight: var(--jem-weight-semibold);
  max-width: 22ch;
  text-wrap: balance;
}
.jem-cta--centered .jem-cta-title {
  margin-inline: auto;
}
.jem-cta-description {
  margin: var(--jem-space-4) 0 0;
  font-size: var(--jem-font-size-body-lg);
  line-height: var(--jem-line-body-lg);
  max-width: 54ch;
  color: var(--jem-ink-300);
}
.jem-cta--subtle .jem-cta-description {
  color: var(--jem-text-secondary);
}
.jem-cta--accent .jem-cta-description {
  color: rgba(255, 255, 255, 0.85);
}
.jem-cta--centered .jem-cta-description {
  margin-inline: auto;
}
.jem-cta-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--jem-space-3);
  flex: none;
}
.jem-cta--centered .jem-cta-actions {
  margin-top: var(--jem-space-8);
}
.jem-statband--page {
  background: var(--jem-surface-page);
}
.jem-statband--subtle {
  background: var(--jem-surface-subtle);
}
.jem-statband--inverse {
  background: var(--jem-ink-900);
  color: var(--jem-text-inverse);
}
.jem-statband--brand {
  background: var(--jem-brand-800);
  color: #fff;
}
.jem-statband--spacing-none {
  padding-block: 0;
}
.jem-statband--spacing-sm {
  padding-block: var(--jem-space-6);
}
.jem-statband--spacing-md {
  padding-block: var(--jem-space-10);
}
.jem-statband--spacing-lg {
  padding-block: var(--jem-space-16);
}
.jem-statband-inner {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--jem-space-8);
  max-width: var(--jem-container-xl);
  margin-inline: auto;
}
.jem-statband--spacing-sm .jem-statband-inner,
.jem-statband--spacing-md .jem-statband-inner,
.jem-statband--spacing-lg .jem-statband-inner {
  padding-inline: var(--jem-space-6);
}
.jem-statband--align-center .jem-statband-item {
  text-align: center;
  align-items: center;
}
.jem-statband-item {
  display: flex;
  flex-direction: column;
  gap: var(--jem-space-1);
  min-width: 0;
}
.jem-statband--divided .jem-statband-item + .jem-statband-item {
  border-left: 1px solid var(--jem-border-default);
  padding-left: var(--jem-space-8);
}
.jem-statband--inverse.jem-statband--divided .jem-statband-item + .jem-statband-item,
.jem-statband--brand.jem-statband--divided .jem-statband-item + .jem-statband-item {
  border-left-color: rgba(255, 255, 255, 0.16);
}
.jem-statband-value {
  font-family: var(--jem-font-display);
  font-size: 2.75rem;
  font-weight: var(--jem-weight-semibold);
  letter-spacing: -0.022em;
  line-height: 1.02;
}
.jem-statband-value--primary {
  color: var(--jem-text-primary);
}
.jem-statband-value--brand {
  color: var(--jem-brand-600);
}
.jem-statband-value--accent {
  color: var(--jem-accent-500);
}
.jem-statband-value--inverse {
  color: #fff;
}
.jem-statband--inverse .jem-statband-value--primary,
.jem-statband--brand .jem-statband-value--primary {
  color: #fff;
}
.jem-statband-label {
  font-size: var(--jem-font-size-overline);
  letter-spacing: var(--jem-track-overline);
  text-transform: uppercase;
  font-weight: var(--jem-weight-semibold);
  color: var(--jem-text-muted);
  margin-top: var(--jem-space-1);
}
.jem-statband--inverse .jem-statband-label,
.jem-statband--brand .jem-statband-label {
  color: var(--jem-brand-300);
}
.jem-statband-caption {
  font-size: var(--jem-font-size-caption);
  line-height: var(--jem-line-caption);
  color: var(--jem-text-muted);
}
.jem-statband--inverse .jem-statband-caption,
.jem-statband--brand .jem-statband-caption {
  color: var(--jem-ink-400);
}
@media (max-width: 640px) {
  .jem-statband--divided .jem-statband-item + .jem-statband-item {
    border-left: 0;
    padding-left: 0;
  }
}
.jem-engagement {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: var(--jem-space-8) var(--jem-space-6) var(--jem-space-6);
  background: var(--jem-surface-raised);
  border: 1px solid var(--jem-border-subtle);
  border-radius: var(--jem-radius-lg);
}
.jem-engagement--recommended {
  border-color: var(--jem-brand-600);
  box-shadow: var(--jem-shadow-md);
}
.jem-engagement-ribbon {
  position: absolute;
  top: 0;
  left: var(--jem-space-6);
  transform: translateY(-50%);
  padding: 4px 12px;
  border-radius: var(--jem-radius-full);
  background: var(--jem-brand-700);
  color: #fff;
  font-size: 11px;
  font-weight: var(--jem-weight-semibold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
}
.jem-engagement-name {
  margin: 0;
  font-family: var(--jem-font-display);
  font-size: var(--jem-font-size-h3);
  line-height: var(--jem-line-h3);
  font-weight: var(--jem-weight-semibold);
  color: var(--jem-text-primary);
}
.jem-engagement-summary {
  margin: var(--jem-space-3) 0 0;
  font-size: var(--jem-font-size-body-sm);
  line-height: var(--jem-line-body-sm);
  color: var(--jem-text-secondary);
}
.jem-engagement-price {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: var(--jem-space-6) 0 0;
  padding-bottom: var(--jem-space-6);
  border-bottom: 1px solid var(--jem-border-subtle);
}
.jem-engagement-price-value {
  font-family: var(--jem-font-display);
  font-size: var(--jem-font-size-h2);
  font-weight: var(--jem-weight-semibold);
  letter-spacing: -0.018em;
  color: var(--jem-text-primary);
  line-height: 1.1;
}
.jem-engagement-price-note {
  font-size: var(--jem-font-size-caption);
  color: var(--jem-text-muted);
}
.jem-engagement-includes {
  list-style: none;
  margin: var(--jem-space-6) 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--jem-space-3);
}
.jem-engagement-include {
  display: flex;
  align-items: flex-start;
  gap: var(--jem-space-2);
  font-size: var(--jem-font-size-body-sm);
  line-height: var(--jem-line-body-sm);
  color: var(--jem-text-secondary);
}
.jem-engagement-tick {
  width: 15px;
  height: 15px;
  margin-top: 3px;
  flex: none;
  color: var(--jem-brand-600);
}
.jem-engagement-action {
  margin-top: auto;
  padding-top: var(--jem-space-8);
}

/* src/styles/index.css */