/* ============================================================
   Jazzedge Academy Product UI — Design Tokens
   Source: design-spec/design-tokens.json (meta.version 1.0.0)
   Scoped to .jelms — do not declare on :root.
   ============================================================ */

.jelms {
  font-family: var(--font-family-ui);
  --border-hairline: 1px;
  --border-none: 0;
  --border-strong: 2px;
  /* Breakpoint tokens — for layout math in declarations only. Custom properties are NOT
     evaluated in @media conditions; use these literal px values in media queries by hand:
     sm 480, md 768, lg 960, xl 1200, xxl 1440 (max-width md−1 → 767px, sm−1 → 479px, xl−1 → 1199px). */
  --breakpoint-lg: 960px;
  --breakpoint-md: 768px;
  --breakpoint-sm: 480px;
  --breakpoint-xl: 1200px;
  --breakpoint-xs: 0px;
  --breakpoint-xxl: 1440px;
  --focus-high-contrast-fallback: Highlight;
  --focus-offset: 2px;
  --focus-style: solid;
  --focus-width: 2px;
  --font-family-system-fallback: "Segoe UI", Arial, sans-serif;
  --font-family-ui: "Open Sans", "Segoe UI", Arial, sans-serif;
  --font-feature-numeric: "tnum" 1, "lnum" 1;
  --font-weight-bold: 700;
  --font-weight-regular: 400;
  --font-weight-semibold: 600;
  --meta-base-unit: 4px;
  --meta-name: "Jazzedge Academy Product UI";
  --meta-shared-token-prefixes: "font., type., space., radius., border., size., z., breakpoint., motion., opacity.";
  --meta-theme-rule: "Use the matching .light or .dark token for every color. All non-color tokens are shared.";
  --meta-themed-token-prefixes: "color., focus.color., shadow.popover., shadow.modal.";
  --meta-version: 1.0.0;
  --motion-duration-fast: 120ms;
  --motion-duration-instant: 0ms;
  --motion-duration-slow: 240ms;
  --motion-duration-standard: 180ms;
  --motion-easing-exit: cubic-bezier(0.4, 0, 1, 1);
  --motion-easing-standard: cubic-bezier(0.2, 0, 0, 1);
  --opacity-disabled: 0.48;
  --opacity-muted-icon: 0.72;
  --radius-card: 12px;
  --radius-control: 8px;
  --radius-large: 16px;
  --radius-none: 0;
  --radius-pill: 999px;
  --radius-small: 4px;
  --shadow-none: none;
  --size-control-large: 44px;
  --size-control-medium: 40px;
  --size-control-small: 32px;
  --size-header-desktop: 72px;
  --size-header-mobile: 56px;
  --size-icon-large: 24px;
  --size-icon-medium: 20px;
  --size-icon-small: 16px;
  --size-icon-xlarge: 32px;
  --size-sidebar-desktop: 451px;
  --size-tap-target-minimum: 44px;
  --size-progress-bar: 6px;
  --size-progress-bar-video: 4px;
  --size-play-button: 52px;
  --size-hero-video-col: 430px;
  --size-pa-step-strip: 64px;
  --size-pa-step-well: 26px;
  --size-badge-medallion-sm: 56px;
  --size-badge-medallion-lg: 88px;
  --size-badge-icon-sm: 24px;
  --size-badge-icon-lg: 36px;
  --size-badge-ring-width: 3px;
  --size-event-date-block-width: 64px;
  --size-event-date-block-height: 72px;
  --size-continue-card-width: 216px;
  --size-tag-height: 24px;
  --size-community-avatar: 32px;
  --size-page-content-max: 1440px;
  --size-jpc-journey-height: 112px;
  --size-jpc-journey-col-start: 270px;
  --size-jpc-journey-col-end: 280px;
  --size-jpc-journey-gap: 28px;
  --size-jpc-band-chip-min: 86px;
  --size-jpc-band-chip-mobile: 52px;
  --size-jpc-band-chip-mobile-active: 150px;
  --size-jpc-recommended-panel: 320px;
  --size-jpc-key-chip: 48px;
  --size-jpc-key-chip-mobile: 52px;
  --size-jpc-level-state: 170px;
  --size-jpc-level-row-min: 70px;
  --size-jpc-level-row-min-mobile: 96px;
  --size-jpc-collapsed-band-min: 72px;
  --size-jpc-current-header-min: 92px;
  --size-jpc-progress-ring: 48px;
  --size-jpc-rail: 4px;
  --size-jpc-stat-icon: 44px;
  --size-jpc-first-run-min: 176px;
  --size-jpc-band-complete-min: 112px;
  --size-jpc-progress-track: 8px;
  --size-jpc-ring-stroke: 5px;
  --radius-poster-top: 11px;
  --color-video-fallback: #0a0c0d;
  /* Text on photography or video, which stays dark in every theme. Never redefine per theme. */
  --color-text-on-media: #FFFFFF;
  --space-0: 0;
  --space-1: 4px;
  --space-10: 40px;
  --space-12: 48px;
  --space-14: 56px;
  --space-16: 64px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 28px;
  --space-8: 32px;
  --space-9: 36px;
  --type-body-font-size: 16px;
  --type-body-font-weight: 400;
  --type-body-letter-spacing: 0;
  --type-body-line-height: 24px;
  --type-body-small-font-size: 14px;
  --type-body-small-font-weight: 400;
  --type-body-small-letter-spacing: 0;
  --type-body-small-line-height: 20px;
  --type-button-font-size: 14px;
  --type-button-font-weight: 600;
  --type-button-letter-spacing: 0;
  --type-button-line-height: 20px;
  --type-button-large-font-size: 16px;
  --type-button-large-font-weight: 600;
  --type-button-large-letter-spacing: 0;
  --type-button-large-line-height: 24px;
  --type-card-title-font-size: 18px;
  --type-card-title-font-weight: 600;
  --type-card-title-letter-spacing: -0.01em;
  --type-card-title-line-height: 24px;
  --type-certificate-body-font-size: 18px;
  --type-certificate-body-font-weight: 400;
  --type-certificate-body-letter-spacing: 0;
  --type-certificate-body-line-height: 28px;
  --type-certificate-program-font-size: 28px;
  --type-certificate-program-font-weight: 700;
  --type-certificate-program-letter-spacing: -0.02em;
  --type-certificate-program-line-height: 36px;
  --type-certificate-recipient-font-size: 40px;
  --type-certificate-recipient-font-weight: 700;
  --type-certificate-recipient-letter-spacing: -0.02em;
  --type-certificate-recipient-line-height: 48px;
  --type-event-date-font-size: 28px;
  --type-event-date-font-weight: 700;
  --type-event-date-letter-spacing: -0.02em;
  --type-event-date-line-height: 32px;
  --type-eyebrow-font-size: 14px;
  --type-eyebrow-font-weight: 700;
  --type-eyebrow-letter-spacing: 0.08em;
  --type-eyebrow-line-height: 20px;
  --type-label-font-size: 14px;
  --type-label-font-weight: 600;
  --type-label-letter-spacing: 0;
  --type-label-line-height: 20px;
  --type-meta-font-size: 14px;
  --type-meta-font-weight: 400;
  --type-meta-letter-spacing: 0.01em;
  --type-meta-line-height: 20px;
  --type-micro-font-size: 14px;
  --type-micro-font-weight: 700;
  --type-micro-letter-spacing: 0.06em;
  --type-micro-line-height: 20px;
  /* Build/version chrome only — intentionally below the 14px content floor (JA-LMS-63). */
  --type-build-font-size: 11px;
  --type-build-font-weight: 400;
  --type-build-letter-spacing: 0.02em;
  --type-build-line-height: 16px;
  /* Build stamp in LMS footer — below --type-build (JA-LMS-503). */
  --type-stamp-font-size: 10px;
  --type-stamp-font-weight: 400;
  --type-stamp-letter-spacing: 0.02em;
  --type-stamp-line-height: 14px;
  /* Deliberate sub-14px exception for numeric chrome inside the JPC progress ring (see version footer). */
  --type-jpc-ring-count-font-size: 12px;
  --type-page-title-font-size: 32px;
  --type-page-title-font-weight: 700;
  --type-page-title-letter-spacing: -0.02em;
  --type-page-title-line-height: 40px;
  --type-section-title-font-size: 22px;
  --type-section-title-font-weight: 700;
  --type-section-title-letter-spacing: -0.015em;
  --type-section-title-line-height: 28px;
  --type-stat-font-size: 24px;
  --type-stat-font-weight: 700;
  --type-stat-letter-spacing: -0.02em;
  --type-stat-line-height: 32px;
  --z-base: 0;
  --z-dropdown: 200;
  --z-modal: 400;
  --z-overlay: 300;
  --z-sticky: 100;
  --z-toast: 500;
  --z-tooltip: 600;
  --color-action-primary: #C63D18;
  --color-action-primary-active: #942A11;
  --color-action-primary-hover: #AE3213;
  --color-action-primary-text: #FFFFFF;
  --color-border-hairline: #DDD8CC;
  --color-border-interactive: #0B6F68;
  --color-border-strong: #7F8B88;
  --color-brand-orange: #F04E23;
  --color-brand-teal: #1F9488;
  --color-brand-teal-active: #074D49;
  --color-brand-teal-hover: #095E58;
  --color-brand-teal-interactive: #0B6F68;
  --color-category-coaching: #147A72;
  --color-category-collection: #3F6F78;
  --color-category-intensive: #8A5A00;
  --color-category-membership: #6B4B91;
  --color-category-practice-curriculum: #0B6F68;
  --color-category-practice-focus: #5B65A5;
  --color-jpc-band-1: #5B65A5;
  --color-jpc-band-2: #8E4585;
  --color-jpc-band-3: #286B42;
  --color-jpc-band-4: #655812;
  --color-jpc-band-5: #3D6280;
  --color-jpc-band-1-on: #FFFFFF;
  --color-jpc-band-1-on-muted: rgba(255, 255, 255, 0.861);
  --color-jpc-band-2-on: #FFFFFF;
  --color-jpc-band-2-on-muted: rgba(255, 255, 255, 0.777);
  --color-jpc-band-3-on: #FFFFFF;
  --color-jpc-band-3-on-muted: rgba(255, 255, 255, 0.767);
  --color-jpc-band-4-on: #FFFFFF;
  --color-jpc-band-4-on-muted: rgba(255, 255, 255, 0.710);
  --color-jpc-band-5-on: #FFFFFF;
  --color-jpc-band-5-on-muted: rgba(255, 255, 255, 0.761);
  --journey-jpc-band-1: var(--color-jpc-band-1);
  --journey-jpc-band-2: var(--color-jpc-band-2);
  --journey-jpc-band-3: var(--color-jpc-band-3);
  --journey-jpc-band-4: var(--color-jpc-band-4);
  --journey-jpc-band-5: var(--color-jpc-band-5);
  --color-certificate-plate-navy: #073F46;
  --color-progress-track: #E5E1D7;
  --color-badge-tier-1-surface: #1F9488;
  --color-badge-tier-1-icon: #FFFFFF;
  --color-badge-tier-1-ring: #0B6F68;
  --color-badge-tier-2-surface: #1F9488;
  --color-badge-tier-2-icon: #FFFFFF;
  --color-badge-tier-2-ring: #0B6F68;
  --color-badge-tier-3-surface: #1F9488;
  --color-badge-tier-3-icon: #FFFFFF;
  --color-badge-tier-3-ring: #0B6F68;
  --color-badge-tier-4-surface: #1F9488;
  --color-badge-tier-4-icon: #FFFFFF;
  --color-badge-tier-4-ring: #0B6F68;
  --color-badge-locked-surface: #EEEBE4;
  --color-badge-locked-icon: #A8A296;
  --color-badge-locked-ring: #D8D4CA;
  --color-badge-card-locked-surface: #EDEAE3;
  --color-badge-card-locked-border: #E0DCD4;
  --color-badge-medallion-muted-surface: #D4D0C8;
  --color-badge-medallion-muted-icon: #5F676B;
  --color-badge-medallion-muted-ring: #BAB6AE;
  --color-semantic-danger: #B42318;
  --color-semantic-danger-surface: #FDECEA;
  --color-semantic-info: #1261A0;
  --color-semantic-info-surface: #EAF3FB;
  --color-semantic-success: #18794E;
  --color-semantic-success-surface: #E8F5EE;
  --color-semantic-warning: #8A5A00;
  --color-semantic-warning-surface: #FFF4D6;
  --color-surface-canvas: #F7F4EC;
  --color-surface-card: #FFFFFF;
  --color-surface-elevated: #FFFFFF;
  --color-surface-header: #073F46;
  --color-header-overlay-subtle: rgba(255, 255, 255, 0.10);
  --color-header-overlay-strong: rgba(255, 255, 255, 0.16);
  --color-header-overlay-border: rgba(255, 255, 255, 0.32);
  --color-header-text-muted: rgba(255, 255, 255, 0.76);
  --color-header-text: #FFFFFF;
  --color-overlay-text-primary-40: rgba(30, 42, 50, 0.40);
  --color-overlay-text-primary-45: rgba(30, 42, 50, 0.45);
  --color-overlay-text-primary-68: rgba(30, 42, 50, 0.68);
  --color-overlay-on-brand-14: rgba(255, 255, 255, 0.14);
  --color-overlay-on-dark-80: rgba(255, 255, 255, 0.80);
  --color-overlay-focus-35: rgba(11, 111, 104, 0.35);
  --color-overlay-video-45: rgba(10, 12, 13, 0.45);
  --color-overlay-video-55: rgba(10, 12, 13, 0.55);
  --color-overlay-video-88: rgba(10, 12, 13, 0.88);
  --color-overlay-teal-14: rgba(11, 111, 104, 0.14);
  --color-overlay-teal-35: rgba(11, 111, 104, 0.35);
  --color-overlay-teal-45: rgba(11, 111, 104, 0.45);
  --color-overlay-orange-18: rgba(240, 78, 35, 0.18);
  --color-overlay-orange-32: rgba(240, 78, 35, 0.32);
  --color-overlay-orange-35: rgba(240, 78, 35, 0.35);
  --color-overlay-success-22: rgba(24, 121, 78, 0.22);
  --color-overlay-success-45: rgba(24, 121, 78, 0.45);
  --color-overlay-warning-14: rgba(138, 90, 0, 0.14);
  --color-overlay-coaching-14: rgba(20, 122, 114, 0.14);
  --color-overlay-border-25: rgba(221, 216, 204, 0.25);
  --color-overlay-border-60: rgba(221, 216, 204, 0.60);
  --color-overlay-border-70: rgba(221, 216, 204, 0.70);
  --color-overlay-border-80: rgba(221, 216, 204, 0.80);
  --color-overlay-practice-focus-10: rgba(91, 101, 165, 0.10);
  --color-certificate-plate-navy-muted: rgba(7, 63, 70, 0.72);
  --color-surface-scrim: rgba(7, 28, 31, 0.56);
  --color-surface-selected: #E8F3F1;
  --color-surface-sunken: #F1EEE6;
  --color-text-disabled: #7D888B;
  --color-text-inverse: #FFFFFF;
  --color-text-link: #0B6F68;
  --color-text-muted: #647175;
  --color-text-primary: #1E2A32;
  --color-text-secondary: #53636A;
  --color-weekday-complete: #0B6F68;
  --color-weekday-inactive: #D8D3C8;
  --color-weekday-today-ring: #C63D18;
  --focus-color: #0B6F68;
  --shadow-modal: 0 20px 56px rgba(16, 23, 25, 0.20);
  --shadow-popover: 0 8px 24px rgba(16, 23, 25, 0.14);
}

@media (prefers-color-scheme: dark) {
  .jelms:not([data-theme="light"]) {
  --color-action-primary: #FF6842;
  --color-action-primary-active: #E95434;
  --color-action-primary-hover: #FF7B5B;
  --color-action-primary-text: #172124;
  --color-border-hairline: #344245;
  --color-border-interactive: #43B8AB;
  --color-border-strong: #63716E;
  --color-brand-orange: #FF6842;
  --color-brand-teal: #43B8AB;
  --color-brand-teal-active: #2F9E93;
  --color-brand-teal-hover: #62C9BE;
  --color-brand-teal-interactive: #43B8AB;
  --color-category-coaching: #69C9BE;
  --color-category-collection: #79AAB4;
  --color-category-intensive: #D8AF58;
  --color-category-membership: #B69AD8;
  --color-category-practice-curriculum: #43B8AB;
  --color-category-practice-focus: #91A0D0;
  --color-jpc-band-1: #91A0D0;
  --color-jpc-band-2: #E090C8;
  --color-jpc-band-3: #62B070;
  --color-jpc-band-4: #A8B030;
  --color-jpc-band-5: #5E95D8;
  --color-jpc-band-1-on: #101719;
  --color-jpc-band-1-on-muted: rgba(16, 23, 25, 0.752);
  --color-jpc-band-2-on: #101719;
  --color-jpc-band-2-on-muted: rgba(16, 23, 25, 0.715);
  --color-jpc-band-3-on: #101719;
  --color-jpc-band-3-on-muted: rgba(16, 23, 25, 0.755);
  --color-jpc-band-4-on: #101719;
  --color-jpc-band-4-on-muted: rgba(16, 23, 25, 0.723);
  --color-jpc-band-5-on: #101719;
  --color-jpc-band-5-on-muted: rgba(16, 23, 25, 0.822);
  --journey-jpc-band-1: var(--color-jpc-band-1);
  --journey-jpc-band-2: var(--color-jpc-band-2);
  --journey-jpc-band-3: var(--color-jpc-band-3);
  --journey-jpc-band-4: var(--color-jpc-band-4);
  --journey-jpc-band-5: var(--color-jpc-band-5);
  --color-progress-track: #324044;
  --color-badge-tier-1-surface: #43B8AB;
  --color-badge-tier-1-icon: #101719;
  --color-badge-tier-1-ring: #62C9BE;
  --color-badge-tier-2-surface: #43B8AB;
  --color-badge-tier-2-icon: #101719;
  --color-badge-tier-2-ring: #62C9BE;
  --color-badge-tier-3-surface: #43B8AB;
  --color-badge-tier-3-icon: #101719;
  --color-badge-tier-3-ring: #62C9BE;
  --color-badge-tier-4-surface: #43B8AB;
  --color-badge-tier-4-icon: #101719;
  --color-badge-tier-4-ring: #62C9BE;
  --color-badge-locked-surface: #252E30;
  --color-badge-locked-icon: #63716E;
  --color-badge-locked-ring: #344245;
  --color-badge-card-locked-surface: #141A1C;
  --color-badge-card-locked-border: #252E30;
  --color-badge-medallion-muted-surface: #2A3234;
  --color-badge-medallion-muted-icon: #8A9693;
  --color-badge-medallion-muted-ring: #3E4A4C;
  --color-semantic-danger: #FF8A80;
  --color-semantic-danger-surface: #462320;
  --color-semantic-info: #7CB7E8;
  --color-semantic-info-surface: #18344A;
  --color-semantic-success: #64C88A;
  --color-semantic-success-surface: #17392A;
  --color-semantic-warning: #F2C15C;
  --color-semantic-warning-surface: #3A2E15;
  --color-surface-canvas: #101719;
  --color-surface-card: #172124;
  --color-surface-elevated: #1C292C;
  --color-surface-header: #082F34;
  --color-header-overlay-subtle: rgba(255, 255, 255, 0.10);
  --color-header-overlay-strong: rgba(255, 255, 255, 0.16);
  --color-header-overlay-border: rgba(255, 255, 255, 0.32);
  --color-header-text-muted: rgba(255, 255, 255, 0.76);
  --color-header-text: #FFFFFF;
  --color-overlay-text-primary-40: rgba(242, 244, 241, 0.40);
  --color-overlay-text-primary-45: rgba(242, 244, 241, 0.45);
  --color-overlay-text-primary-68: rgba(242, 244, 241, 0.68);
  --color-overlay-on-brand-14: rgba(16, 23, 25, 0.14);
  --color-overlay-on-dark-80: rgba(255, 255, 255, 0.80);
  --color-overlay-focus-35: rgba(67, 184, 171, 0.35);
  --color-overlay-video-45: rgba(10, 12, 13, 0.45);
  --color-overlay-video-55: rgba(10, 12, 13, 0.55);
  --color-overlay-video-88: rgba(10, 12, 13, 0.88);
  --color-overlay-teal-14: rgba(67, 184, 171, 0.14);
  --color-overlay-teal-35: rgba(67, 184, 171, 0.35);
  --color-overlay-teal-45: rgba(67, 184, 171, 0.45);
  --color-overlay-orange-18: rgba(255, 104, 66, 0.18);
  --color-overlay-orange-32: rgba(255, 104, 66, 0.32);
  --color-overlay-orange-35: rgba(255, 104, 66, 0.35);
  --color-overlay-success-22: rgba(100, 200, 138, 0.22);
  --color-overlay-success-45: rgba(100, 200, 138, 0.45);
  --color-overlay-warning-14: rgba(242, 193, 92, 0.14);
  --color-overlay-coaching-14: rgba(105, 201, 190, 0.14);
  --color-overlay-border-25: rgba(52, 66, 69, 0.25);
  --color-overlay-border-60: rgba(52, 66, 69, 0.60);
  --color-overlay-border-70: rgba(52, 66, 69, 0.70);
  --color-overlay-border-80: rgba(52, 66, 69, 0.80);
  --color-overlay-practice-focus-10: rgba(145, 160, 208, 0.10);
  --color-certificate-plate-navy-muted: rgba(7, 63, 70, 0.72);
  --color-surface-scrim: rgba(0, 0, 0, 0.72);
  --color-surface-selected: #203734;
  --color-surface-sunken: #0D1315;
  --color-text-disabled: #788581;
  --color-text-inverse: #101719;
  --color-text-link: #43B8AB;
  --color-text-muted: #93A19E;
  --color-text-primary: #F2F4F1;
  --color-text-secondary: #B8C3C0;
  --color-weekday-complete: #43B8AB;
  --color-weekday-inactive: #465256;
  --color-weekday-today-ring: #FF6842;
  --focus-color: #43B8AB;
  --shadow-modal: 0 24px 64px rgba(0, 0, 0, 0.56);
  --shadow-popover: 0 12px 32px rgba(0, 0, 0, 0.44);
  }
}

.jelms[data-theme="dark"] {
  --color-action-primary: #FF6842;
  --color-action-primary-active: #E95434;
  --color-action-primary-hover: #FF7B5B;
  --color-action-primary-text: #172124;
  --color-border-hairline: #344245;
  --color-border-interactive: #43B8AB;
  --color-border-strong: #63716E;
  --color-brand-orange: #FF6842;
  --color-brand-teal: #43B8AB;
  --color-brand-teal-active: #2F9E93;
  --color-brand-teal-hover: #62C9BE;
  --color-brand-teal-interactive: #43B8AB;
  --color-category-coaching: #69C9BE;
  --color-category-collection: #79AAB4;
  --color-category-intensive: #D8AF58;
  --color-category-membership: #B69AD8;
  --color-category-practice-curriculum: #43B8AB;
  --color-category-practice-focus: #91A0D0;
  --color-jpc-band-1: #91A0D0;
  --color-jpc-band-2: #E090C8;
  --color-jpc-band-3: #62B070;
  --color-jpc-band-4: #A8B030;
  --color-jpc-band-5: #5E95D8;
  --color-jpc-band-1-on: #101719;
  --color-jpc-band-1-on-muted: rgba(16, 23, 25, 0.752);
  --color-jpc-band-2-on: #101719;
  --color-jpc-band-2-on-muted: rgba(16, 23, 25, 0.715);
  --color-jpc-band-3-on: #101719;
  --color-jpc-band-3-on-muted: rgba(16, 23, 25, 0.755);
  --color-jpc-band-4-on: #101719;
  --color-jpc-band-4-on-muted: rgba(16, 23, 25, 0.723);
  --color-jpc-band-5-on: #101719;
  --color-jpc-band-5-on-muted: rgba(16, 23, 25, 0.822);
  --journey-jpc-band-1: var(--color-jpc-band-1);
  --journey-jpc-band-2: var(--color-jpc-band-2);
  --journey-jpc-band-3: var(--color-jpc-band-3);
  --journey-jpc-band-4: var(--color-jpc-band-4);
  --journey-jpc-band-5: var(--color-jpc-band-5);
  --color-progress-track: #324044;
  --color-badge-tier-1-surface: #43B8AB;
  --color-badge-tier-1-icon: #101719;
  --color-badge-tier-1-ring: #62C9BE;
  --color-badge-tier-2-surface: #43B8AB;
  --color-badge-tier-2-icon: #101719;
  --color-badge-tier-2-ring: #62C9BE;
  --color-badge-tier-3-surface: #43B8AB;
  --color-badge-tier-3-icon: #101719;
  --color-badge-tier-3-ring: #62C9BE;
  --color-badge-tier-4-surface: #43B8AB;
  --color-badge-tier-4-icon: #101719;
  --color-badge-tier-4-ring: #62C9BE;
  --color-badge-locked-surface: #252E30;
  --color-badge-locked-icon: #63716E;
  --color-badge-locked-ring: #344245;
  --color-badge-card-locked-surface: #141A1C;
  --color-badge-card-locked-border: #252E30;
  --color-badge-medallion-muted-surface: #2A3234;
  --color-badge-medallion-muted-icon: #8A9693;
  --color-badge-medallion-muted-ring: #3E4A4C;
  --color-semantic-danger: #FF8A80;
  --color-semantic-danger-surface: #462320;
  --color-semantic-info: #7CB7E8;
  --color-semantic-info-surface: #18344A;
  --color-semantic-success: #64C88A;
  --color-semantic-success-surface: #17392A;
  --color-semantic-warning: #F2C15C;
  --color-semantic-warning-surface: #3A2E15;
  --color-surface-canvas: #101719;
  --color-surface-card: #172124;
  --color-surface-elevated: #1C292C;
  --color-surface-header: #082F34;
  --color-header-overlay-subtle: rgba(255, 255, 255, 0.10);
  --color-header-overlay-strong: rgba(255, 255, 255, 0.16);
  --color-header-overlay-border: rgba(255, 255, 255, 0.32);
  --color-header-text-muted: rgba(255, 255, 255, 0.76);
  --color-header-text: #FFFFFF;
  --color-overlay-text-primary-40: rgba(242, 244, 241, 0.40);
  --color-overlay-text-primary-45: rgba(242, 244, 241, 0.45);
  --color-overlay-text-primary-68: rgba(242, 244, 241, 0.68);
  --color-overlay-on-brand-14: rgba(16, 23, 25, 0.14);
  --color-overlay-on-dark-80: rgba(255, 255, 255, 0.80);
  --color-overlay-focus-35: rgba(67, 184, 171, 0.35);
  --color-overlay-video-45: rgba(10, 12, 13, 0.45);
  --color-overlay-video-55: rgba(10, 12, 13, 0.55);
  --color-overlay-video-88: rgba(10, 12, 13, 0.88);
  --color-overlay-teal-14: rgba(67, 184, 171, 0.14);
  --color-overlay-teal-35: rgba(67, 184, 171, 0.35);
  --color-overlay-teal-45: rgba(67, 184, 171, 0.45);
  --color-overlay-orange-18: rgba(255, 104, 66, 0.18);
  --color-overlay-orange-32: rgba(255, 104, 66, 0.32);
  --color-overlay-orange-35: rgba(255, 104, 66, 0.35);
  --color-overlay-success-22: rgba(100, 200, 138, 0.22);
  --color-overlay-success-45: rgba(100, 200, 138, 0.45);
  --color-overlay-warning-14: rgba(242, 193, 92, 0.14);
  --color-overlay-coaching-14: rgba(105, 201, 190, 0.14);
  --color-overlay-border-25: rgba(52, 66, 69, 0.25);
  --color-overlay-border-60: rgba(52, 66, 69, 0.60);
  --color-overlay-border-70: rgba(52, 66, 69, 0.70);
  --color-overlay-border-80: rgba(52, 66, 69, 0.80);
  --color-overlay-practice-focus-10: rgba(145, 160, 208, 0.10);
  --color-certificate-plate-navy-muted: rgba(7, 63, 70, 0.72);
  --color-surface-scrim: rgba(0, 0, 0, 0.72);
  --color-surface-selected: #203734;
  --color-surface-sunken: #0D1315;
  --color-text-disabled: #788581;
  --color-text-inverse: #101719;
  --color-text-link: #43B8AB;
  --color-text-muted: #93A19E;
  --color-text-primary: #F2F4F1;
  --color-text-secondary: #B8C3C0;
  --color-weekday-complete: #43B8AB;
  --color-weekday-inactive: #465256;
  --color-weekday-today-ring: #FF6842;
  --focus-color: #43B8AB;
  --shadow-modal: 0 24px 64px rgba(0, 0, 0, 0.56);
  --shadow-popover: 0 12px 32px rgba(0, 0, 0, 0.44);
}

.jelms[data-theme="light"] {
  --color-action-primary: #C63D18;
  --color-action-primary-active: #942A11;
  --color-action-primary-hover: #AE3213;
  --color-action-primary-text: #FFFFFF;
  --color-border-hairline: #DDD8CC;
  --color-border-interactive: #0B6F68;
  --color-border-strong: #7F8B88;
  --color-brand-orange: #F04E23;
  --color-brand-teal: #1F9488;
  --color-brand-teal-active: #074D49;
  --color-brand-teal-hover: #095E58;
  --color-brand-teal-interactive: #0B6F68;
  --color-category-coaching: #147A72;
  --color-category-collection: #3F6F78;
  --color-category-intensive: #8A5A00;
  --color-category-membership: #6B4B91;
  --color-category-practice-curriculum: #0B6F68;
  --color-category-practice-focus: #5B65A5;
  --color-jpc-band-1: #5B65A5;
  --color-jpc-band-2: #8E4585;
  --color-jpc-band-3: #286B42;
  --color-jpc-band-4: #655812;
  --color-jpc-band-5: #3D6280;
  --color-jpc-band-1-on: #FFFFFF;
  --color-jpc-band-1-on-muted: rgba(255, 255, 255, 0.861);
  --color-jpc-band-2-on: #FFFFFF;
  --color-jpc-band-2-on-muted: rgba(255, 255, 255, 0.777);
  --color-jpc-band-3-on: #FFFFFF;
  --color-jpc-band-3-on-muted: rgba(255, 255, 255, 0.767);
  --color-jpc-band-4-on: #FFFFFF;
  --color-jpc-band-4-on-muted: rgba(255, 255, 255, 0.710);
  --color-jpc-band-5-on: #FFFFFF;
  --color-jpc-band-5-on-muted: rgba(255, 255, 255, 0.761);
  --journey-jpc-band-1: var(--color-jpc-band-1);
  --journey-jpc-band-2: var(--color-jpc-band-2);
  --journey-jpc-band-3: var(--color-jpc-band-3);
  --journey-jpc-band-4: var(--color-jpc-band-4);
  --journey-jpc-band-5: var(--color-jpc-band-5);
  --color-certificate-plate-navy: #073F46;
  --color-progress-track: #E5E1D7;
  --color-badge-tier-1-surface: #1F9488;
  --color-badge-tier-1-icon: #FFFFFF;
  --color-badge-tier-1-ring: #0B6F68;
  --color-badge-tier-2-surface: #1F9488;
  --color-badge-tier-2-icon: #FFFFFF;
  --color-badge-tier-2-ring: #0B6F68;
  --color-badge-tier-3-surface: #1F9488;
  --color-badge-tier-3-icon: #FFFFFF;
  --color-badge-tier-3-ring: #0B6F68;
  --color-badge-tier-4-surface: #1F9488;
  --color-badge-tier-4-icon: #FFFFFF;
  --color-badge-tier-4-ring: #0B6F68;
  --color-badge-locked-surface: #EEEBE4;
  --color-badge-locked-icon: #A8A296;
  --color-badge-locked-ring: #D8D4CA;
  --color-badge-card-locked-surface: #EDEAE3;
  --color-badge-card-locked-border: #E0DCD4;
  --color-badge-medallion-muted-surface: #D4D0C8;
  --color-badge-medallion-muted-icon: #5F676B;
  --color-badge-medallion-muted-ring: #BAB6AE;
  --color-semantic-danger: #B42318;
  --color-semantic-danger-surface: #FDECEA;
  --color-semantic-info: #1261A0;
  --color-semantic-info-surface: #EAF3FB;
  --color-semantic-success: #18794E;
  --color-semantic-success-surface: #E8F5EE;
  --color-semantic-warning: #8A5A00;
  --color-semantic-warning-surface: #FFF4D6;
  --color-surface-canvas: #F7F4EC;
  --color-surface-card: #FFFFFF;
  --color-surface-elevated: #FFFFFF;
  --color-surface-header: #073F46;
  --color-header-overlay-subtle: rgba(255, 255, 255, 0.10);
  --color-header-overlay-strong: rgba(255, 255, 255, 0.16);
  --color-header-overlay-border: rgba(255, 255, 255, 0.32);
  --color-header-text-muted: rgba(255, 255, 255, 0.76);
  --color-header-text: #FFFFFF;
  --color-overlay-text-primary-40: rgba(30, 42, 50, 0.40);
  --color-overlay-text-primary-45: rgba(30, 42, 50, 0.45);
  --color-overlay-text-primary-68: rgba(30, 42, 50, 0.68);
  --color-overlay-on-brand-14: rgba(255, 255, 255, 0.14);
  --color-overlay-on-dark-80: rgba(255, 255, 255, 0.80);
  --color-overlay-focus-35: rgba(11, 111, 104, 0.35);
  --color-overlay-video-45: rgba(10, 12, 13, 0.45);
  --color-overlay-video-55: rgba(10, 12, 13, 0.55);
  --color-overlay-video-88: rgba(10, 12, 13, 0.88);
  --color-overlay-teal-14: rgba(11, 111, 104, 0.14);
  --color-overlay-teal-35: rgba(11, 111, 104, 0.35);
  --color-overlay-teal-45: rgba(11, 111, 104, 0.45);
  --color-overlay-orange-18: rgba(240, 78, 35, 0.18);
  --color-overlay-orange-32: rgba(240, 78, 35, 0.32);
  --color-overlay-orange-35: rgba(240, 78, 35, 0.35);
  --color-overlay-success-22: rgba(24, 121, 78, 0.22);
  --color-overlay-success-45: rgba(24, 121, 78, 0.45);
  --color-overlay-warning-14: rgba(138, 90, 0, 0.14);
  --color-overlay-coaching-14: rgba(20, 122, 114, 0.14);
  --color-overlay-border-25: rgba(221, 216, 204, 0.25);
  --color-overlay-border-60: rgba(221, 216, 204, 0.60);
  --color-overlay-border-70: rgba(221, 216, 204, 0.70);
  --color-overlay-border-80: rgba(221, 216, 204, 0.80);
  --color-overlay-practice-focus-10: rgba(91, 101, 165, 0.10);
  --color-certificate-plate-navy-muted: rgba(7, 63, 70, 0.72);
  --color-surface-scrim: rgba(7, 28, 31, 0.56);
  --color-surface-selected: #E8F3F1;
  --color-surface-sunken: #F1EEE6;
  --color-text-disabled: #7D888B;
  --color-text-inverse: #FFFFFF;
  --color-text-link: #0B6F68;
  --color-text-muted: #647175;
  --color-text-primary: #1E2A32;
  --color-text-secondary: #53636A;
  --color-weekday-complete: #0B6F68;
  --color-weekday-inactive: #D8D3C8;
  --color-weekday-today-ring: #C63D18;
  --focus-color: #0B6F68;
  --shadow-modal: 0 20px 56px rgba(16, 23, 25, 0.20);
  --shadow-popover: 0 8px 24px rgba(16, 23, 25, 0.14);
}

.jelms-num {
  font-feature-settings: var(--font-feature-numeric);
}

.jelms-t-page-title {
  font-size: var(--type-page-title-font-size);
  line-height: var(--type-page-title-line-height);
  font-weight: var(--type-page-title-font-weight);
  letter-spacing: var(--type-page-title-letter-spacing);
}

.jelms-t-section-title {
  font-size: var(--type-section-title-font-size);
  line-height: var(--type-section-title-line-height);
  font-weight: var(--type-section-title-font-weight);
  letter-spacing: var(--type-section-title-letter-spacing);
}

.jelms-t-card-title {
  font-size: var(--type-card-title-font-size);
  line-height: var(--type-card-title-line-height);
  font-weight: var(--type-card-title-font-weight);
  letter-spacing: var(--type-card-title-letter-spacing);
}

.jelms-t-body {
  font-size: var(--type-body-font-size);
  line-height: var(--type-body-line-height);
  font-weight: var(--type-body-font-weight);
  letter-spacing: var(--type-body-letter-spacing);
}

.jelms-t-body-small {
  font-size: var(--type-body-small-font-size);
  line-height: var(--type-body-small-line-height);
  font-weight: var(--type-body-small-font-weight);
  letter-spacing: var(--type-body-small-letter-spacing);
}

.jelms-t-label {
  font-size: var(--type-label-font-size);
  line-height: var(--type-label-line-height);
  font-weight: var(--type-label-font-weight);
  letter-spacing: var(--type-label-letter-spacing);
}

.jelms-t-eyebrow {
  font-size: var(--type-eyebrow-font-size);
  line-height: var(--type-eyebrow-line-height);
  font-weight: var(--type-eyebrow-font-weight);
  letter-spacing: var(--type-eyebrow-letter-spacing);
  text-transform: uppercase;
  color: var(--color-text-secondary);
}

.jelms-t-meta {
  font-size: var(--type-meta-font-size);
  line-height: var(--type-meta-line-height);
  font-weight: var(--type-meta-font-weight);
  letter-spacing: var(--type-meta-letter-spacing);
}

.jelms-t-micro {
  font-size: var(--type-micro-font-size);
  line-height: var(--type-micro-line-height);
  font-weight: var(--type-micro-font-weight);
  letter-spacing: var(--type-micro-letter-spacing);
}

.jelms-t-build {
  font-size: var(--type-build-font-size);
  line-height: var(--type-build-line-height);
  font-weight: var(--type-build-font-weight);
  letter-spacing: var(--type-build-letter-spacing);
}

.jelms-t-stamp {
  font-size: var(--type-stamp-font-size);
  line-height: var(--type-stamp-line-height);
  font-weight: var(--type-stamp-font-weight);
  letter-spacing: var(--type-stamp-letter-spacing);
}

.jelms-t-button {
  font-size: var(--type-button-font-size);
  line-height: var(--type-button-line-height);
  font-weight: var(--type-button-font-weight);
  letter-spacing: var(--type-button-letter-spacing);
}

.jelms-t-button-large {
  font-size: var(--type-button-large-font-size);
  line-height: var(--type-button-large-line-height);
  font-weight: var(--type-button-large-font-weight);
  letter-spacing: var(--type-button-large-letter-spacing);
}

.jelms-t-stat {
  font-size: var(--type-stat-font-size);
  line-height: var(--type-stat-line-height);
  font-weight: var(--type-stat-font-weight);
  letter-spacing: var(--type-stat-letter-spacing);
  font-feature-settings: var(--font-feature-numeric);
}

.jelms-t-event-date {
  font-size: var(--type-event-date-font-size);
  line-height: var(--type-event-date-line-height);
  font-weight: var(--type-event-date-font-weight);
  letter-spacing: var(--type-event-date-letter-spacing);
  font-feature-settings: var(--font-feature-numeric);
}

.jelms-t-certificate-recipient {
  font-size: var(--type-certificate-recipient-font-size);
  line-height: var(--type-certificate-recipient-line-height);
  font-weight: var(--type-certificate-recipient-font-weight);
  letter-spacing: var(--type-certificate-recipient-letter-spacing);
  font-feature-settings: var(--font-feature-numeric);
}

.jelms-t-certificate-program {
  font-size: var(--type-certificate-program-font-size);
  line-height: var(--type-certificate-program-line-height);
  font-weight: var(--type-certificate-program-font-weight);
  letter-spacing: var(--type-certificate-program-letter-spacing);
  font-feature-settings: var(--font-feature-numeric);
}

.jelms-t-certificate-body {
  font-size: var(--type-certificate-body-font-size);
  line-height: var(--type-certificate-body-line-height);
  font-weight: var(--type-certificate-body-font-weight);
  letter-spacing: var(--type-certificate-body-letter-spacing);
  font-feature-settings: var(--font-feature-numeric);
}

/* --- Layout grid (design-spec/component-specifications.md) --- */

.jelms-page-wrap {
  width: 100%;
  max-width: var(--size-page-content-max);
  margin-inline: auto;
}

@media (min-width: 1200px) and (max-width: 1311px) {
  .jelms-page-wrap { width: calc(100% - var(--space-12)); }
}

@media (min-width: 960px) and (max-width: 1199px) {
  .jelms-page-wrap { width: calc(100% - var(--space-12)); }
}

@media (min-width: 768px) and (max-width: 959px) {
  .jelms-page-wrap { width: calc(100% - var(--space-12)); }
}

@media (max-width: calc(768px - 1px)) {
  .jelms-page-wrap { width: calc(100% - var(--space-8)); }
}

@media (min-width: 1312px) {
  .jelms-page-wrap { width: var(--size-page-content-max); }
}

.jelms-page-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--space-6);
}

.jelms-page-main { grid-column: span 8; }
.jelms-page-rail { grid-column: span 4; }

@media (min-width: 960px) and (max-width: 1199px) {
  .jelms-page-main { grid-column: span 7; }
  .jelms-page-rail { grid-column: span 5; }
}

@media (max-width: calc(960px - 1px)) {
  .jelms-page-main,
  .jelms-page-rail { grid-column: span 12; }
}