/* ============================================================
 * ergi-styles.css — Consolidated ERGI stylesheet for DAM clientlib
 * ============================================================
 * Upload this single file to E-DAM and attach to the EGRI Homepage
 * template's page-head clientlib. Covers BOTH rendering paths:
 *
 *   - .v5-* / .v3-* / .v1-2-* classes from the v1-2 prototype DOM
 *     (used by lem-embed-pages-clientlib/ pages)
 *   - .ergi-* augmentations for the canonical DOM
 *     (used by lem-embed-pages/ pages)
 *
 * Concatenation order (matches original cascade):
 *   1. shared/tokens.css       — CSS custom properties (--li-blue-70, etc.)
 *   2. shared/base.css         — reset + base typography
 *   3. economic-graph-v3/styles.css   — v3 components (kpi, cardstack, chart)
 *   4. economic-graph-v1-2/styles.css — v1-2 page-specific (hero, nav, ticker)
 *   5. _clientlib/augment.css  — sanitizer-bypass rules for canonical pages
 *
 * Last regenerated: 2026-06-22
 * To regenerate: python3 lem-embed-pages/_clientlib/build-ergi-styles.py
 * ============================================================ */

/* ===== tokens.css ===== */
/* LEM Design Tokens — Our Community Design System_Web UX
   Semantic tokens only. Never hard-code values; reference these. */

:root {
  /* ─── Brand primitives ─── */
  --li-blue-70: #0a66c2;
  --li-blue-80: #004182;
  --li-blue-60: #2a7bd2;  /* placeholder — interpolation between 50 and 70; verify */
  --li-blue-50: #4a90e2;
  --li-blue-40: #8ebcf0;  /* placeholder — interpolation between 30 and 50; verify */
  --li-blue-30: #d2e9ff;  /* aka "blue-strong" in the LEM primitive ramp */
  --li-blue-10: #e8f1fb;

  --li-black: #000000;
  --li-white: #ffffff;
  --li-gray-90: #1d1d1d;
  --li-gray-70: #404040;
  --li-gray-60: #595959;
  --li-gray-40: #949494;
  --li-gray-30: #b3b3b3;
  --li-gray-20: #d9d9d9;
  --li-gray-10: #ebebeb;
  --li-gray-05: #f5f5f5;

  --li-tan-100: #f4ede4;
  --li-tan-200: #e8dcc8;
  /* Warm/yellow — "attention yellow" primitive from Our Community DS.
     Reference via --accent-attention, never directly. */
  --li-yellow-warm: #fece02;

  --li-green-dark: #057642;
  --li-green-light: #ddf5e5;
  --li-red-dark: #b53924;
  --li-red-light: #fde7e9;
  --li-yellow-dark: #915907;
  --li-yellow-light: #fdf0d4;

  /* ═════ SEMANTIC TOKENS ═════ */

  --surface-default:    var(--li-white);
  --surface-card:       var(--li-white);
  --surface-gray-light: var(--li-gray-05);
  --surface-gray-mid:   var(--li-gray-10);
  --surface-warm:       var(--li-tan-100);
  --surface-warm-hover: var(--li-tan-200);
  --surface-blue-mid:   var(--li-blue-10);
  --surface-blue-bold:  var(--li-blue-70);
  --surface-brand:      var(--li-blue-70);
  --surface-dark:       var(--li-gray-90);
  --surface-dark-subtle:var(--li-gray-70);
  --surface-hover:      var(--li-gray-05);
  --surface-pressed:    var(--li-gray-10);
  --surface-disabled:   var(--li-gray-10);

  --text-high-emphasis:    rgba(0, 0, 0, 0.9);
  --text-medium-emphasis:  rgba(0, 0, 0, 0.6);
  --text-disabled:         rgba(0, 0, 0, 0.3);
  --text-placeholder:      rgba(0, 0, 0, 0.45);
  --text-link:             var(--li-blue-70);
  --text-link-hover:       var(--li-blue-80);
  --text-inverse-high-emphasis:   rgba(255, 255, 255, 0.95);
  --text-inverse-medium-emphasis: rgba(255, 255, 255, 0.7);
  --text-inverse-link:       #82b4f0;
  --text-inverse-link-hover: #c3d9f0;
  --text-inverse-blue-bold:  var(--li-blue-50);
  --text-inverse-blue-strong: var(--li-blue-30);

  --border-gray-light:   var(--li-gray-10);
  --border-gray-default: var(--li-gray-30);
  --border-gray-hover:   var(--li-gray-40);
  --border-gray-active:  var(--li-gray-60);
  --border-blue:         var(--li-blue-30);
  --border-blue-featured:var(--li-blue-70);
  --border-blue-focus:   var(--li-blue-70);
  --border-warm:         var(--li-tan-200);
  --border-warm-light:   #ede4d3;

  --interactive-primary:       var(--li-blue-70);
  --interactive-primary-hover: var(--li-blue-80);
  --interactive-secondary:     var(--li-blue-70);
  --interactive-tertiary:      var(--li-blue-70);
  --interactive-inverse:       var(--li-white);
  --interactive-inverse-hover: var(--li-gray-05);

  --system-success:        var(--li-green-dark);
  --system-success-subtle: var(--li-green-light);
  --system-warning:        var(--li-yellow-dark);
  --system-warning-subtle: var(--li-yellow-light);
  --system-error:          var(--li-red-dark);
  --system-error-subtle:   var(--li-red-light);

  /* Accent — decorative emphasis. Use sparingly (1–3 per page). */
  --accent-attention: var(--li-yellow-warm);   /* "Most popular" badges, urgency banners, big display numerals */
  --accent-warm:      var(--li-tan-200);       /* Tag fills on editorial, avatar placeholders, quote marks */

  /* Spacing (8px base) */
  --space-1: 4px;   --space-2: 8px;   --space-3: 12px;
  --space-4: 16px;  --space-5: 20px;  --space-6: 24px;
  --space-8: 32px;  --space-10: 40px; --space-12: 48px;
  --space-16: 64px; --space-20: 80px; --space-24: 96px;

  /* Radii */
  --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px;
  --radius-xl: 16px; --radius-2xl: 24px; --radius-full: 9999px;

  /* Type — LEM display = Community Pro (LinkedIn brand sans). Body = SF Pro
     via the system-font stack (-apple-system resolves to SF Pro Text on
     macOS/iOS; Segoe UI / Roboto on Windows / Android; then the classic
     web-safe stack). Community Pro stays the display primary; if it
     doesn't land, body and display both fall back to the same SF
     Pro-led system stack. */
  --font-sans: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-display: 'Community Pro', 'Community', -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-mono: 'Inconsolata', ui-monospace, SFMono-Regular, Menlo, monospace;

  --type-h1-size: 48px;  --type-h2-size: 36px;
  --type-h3-size: 28px;  --type-h4-size: 22px; --type-h5-size: 18px;
  --type-body-lg-size: 18px; --type-body-md-size: 16px; --type-body-sm-size: 14px;
  --type-caption-size: 12px;

  /* Title scale — LEM's Title/Title-01..06 styles from the Figma design
     system. 04/05/06 values verified from Figma; 01/02/03 still placeholders. */
  --type-title-01-size: 48px; --type-title-01-lh: 1.2;   --type-title-01-weight: 400;
  --type-title-02-size: 40px; --type-title-02-lh: 1.2;   --type-title-02-weight: 400;
  --type-title-03-size: 36px; --type-title-03-lh: 1.25;  --type-title-03-weight: 400;
  --type-title-04-size: 32px; --type-title-04-lh: 1.25;  --type-title-04-weight: 400;
  --type-title-05-size: 24px; --type-title-05-lh: 1.25;  --type-title-05-weight: 400;
  --type-title-06-size: 20px; --type-title-06-lh: 1.25;  --type-title-06-weight: 400;

  /* Elevation */
  --elevation-1: 0 1px 2px rgba(0, 0, 0, 0.08);
  --elevation-2: 0 2px 8px rgba(0, 0, 0, 0.08);
  --elevation-3: 0 8px 24px rgba(0, 0, 0, 0.12);
  --elevation-4: 0 16px 48px rgba(0, 0, 0, 0.16);

  /* Layout */
  --container-max: 1280px;
  --container-narrow: 880px;
  --container-wide: 1440px;
  --grid-gutter: 24px;
}


/* ===== base.css ===== */
/* LEM base — shared LEM component CSS used by all examples.
   Pair with ../shared/tokens.css. Page-specific styles go in each example's
   own styles.css. Never duplicate this file per example. */

/* ═══ Community Pro — LinkedIn brand display font ═══
   Served by LEM's base clientlib (family "Community"). We do NOT declare
   @font-face here: this clientlib ships no font binaries, so local
   ./fonts/CommunityPro-* @font-face rules would 404. --font-display below
   prefers "Community Pro", then LEM's loaded "Community", then a system stack. */

*, *::before, *::after { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font-sans);
  font-size: var(--type-body-md-size);
  line-height: 1.5;
  color: var(--text-high-emphasis);
  background: var(--surface-default);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img { max-width: 100%; height: auto; display: block; }

a { color: var(--text-link); }
a:hover { color: var(--text-link-hover); }

:focus-visible {
  outline: 2px solid var(--border-blue-focus);
  outline-offset: 2px;
}

/* ═══ BUTTON ═══ */
.lem-button {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--space-2);
  font-family: var(--font-sans); font-weight: 600;
  border-radius: var(--radius-full);
  border: 1px solid transparent;
  cursor: pointer;
  transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease, transform 120ms;
  transform-origin: center;
  text-decoration: none; white-space: nowrap;
}
.lem-button:disabled, .lem-button[aria-disabled="true"] {
  background: var(--surface-disabled); color: var(--text-disabled);
  border-color: var(--border-gray-light); cursor: not-allowed;
}
.lem-button:hover { transform: scale(1.03); }
.lem-button:disabled:hover,
.lem-button[aria-disabled="true"]:hover { transform: none; }
.lem-button--sm { font-size: 14px; line-height: 20px; padding: 6px 16px;  min-height: 32px; }
.lem-button--md { font-size: 16px; line-height: 24px; padding: 10px 24px; min-height: 44px; }
.lem-button--lg { font-size: 18px; line-height: 24px; padding: 14px 28px; min-height: 52px; }

.lem-button--primary {
  background: var(--interactive-primary);
  color: var(--text-inverse-high-emphasis);
}
.lem-button--primary:hover { background: var(--interactive-primary-hover); color: var(--text-inverse-high-emphasis); }

.lem-button--secondary {
  background: transparent;
  color: var(--interactive-secondary);
  border-color: var(--interactive-secondary);
}
.lem-button--secondary:hover { background: var(--surface-blue-mid); }

.lem-button--tertiary {
  background: transparent;
  color: var(--interactive-tertiary);
  padding-inline: var(--space-2);
}
.lem-button--tertiary:hover { background: var(--surface-hover); }

.lem-button--ghost {
  background: transparent;
  color: var(--text-high-emphasis);
}
.lem-button--ghost:hover { background: var(--surface-hover); }

.lem-button--inverse {
  background: var(--interactive-inverse);
  color: var(--text-high-emphasis);
}
.lem-button--inverse:hover { background: var(--interactive-inverse-hover); }

.lem-button--icon { padding: 10px; aspect-ratio: 1; min-width: 44px; }
.lem-button__icon { width: 1em; height: 1em; flex-shrink: 0; }

/* ═══ ICON ═══ */
.lem-icon { display: inline-block; flex-shrink: 0; vertical-align: middle; }
.lem-icon--sm { width: 16px; height: 16px; }
.lem-icon--md { width: 24px; height: 24px; }
.lem-icon--lg { width: 32px; height: 32px; }

/* ═══ NAV ═══ */
.lem-nav {
  position: sticky; top: 0; z-index: 20;
  background: var(--surface-default);
  border-bottom: 1px solid var(--border-gray-light);
}
.lem-nav__inner {
  max-width: var(--container-wide); margin-inline: auto;
  padding: var(--space-3) clamp(16px, 4vw, 48px);
  display: flex; align-items: center; gap: var(--space-6);
}
.lem-nav__logo {
  color: var(--interactive-primary); flex-shrink: 0;
  display: inline-flex; align-items: center; gap: 6px; text-decoration: none;
}
.lem-nav__logo-text {
  font-weight: 700; font-size: 20px;
  color: var(--text-high-emphasis); letter-spacing: -0.01em;
}
.lem-nav__logo svg { width: 22px; height: 22px; }

.lem-nav__primary { display: none; flex: 1; gap: var(--space-2); list-style: none; padding: 0; margin: 0; }
.lem-nav__utility { display: none; gap: var(--space-2); margin-left: auto; }
.lem-nav__menu { display: inline-flex; margin-left: auto; }

.lem-nav__link {
  padding: var(--space-2) var(--space-3);
  font-size: var(--type-body-sm-size); font-weight: 600;
  color: var(--text-high-emphasis); text-decoration: none;
  border-radius: var(--radius-md);
}
.lem-nav__link:hover { background: var(--surface-hover); color: var(--text-high-emphasis); }
.lem-nav__link--active { color: var(--interactive-primary); }

@media (min-width: 1024px) {
  .lem-nav__primary, .lem-nav__utility { display: inline-flex; }
  .lem-nav__menu { display: none; }
}

/* ═══ ANNOUNCEMENT BANNER ═══ */
.lem-announce {
  background: var(--surface-blue-mid);
  color: var(--text-high-emphasis);
  border-bottom: 1px solid var(--border-blue);
}
.lem-announce--dark { background: var(--surface-dark); color: var(--text-inverse-high-emphasis); border-bottom-color: transparent; }
.lem-announce--brand { background: var(--surface-brand); color: var(--text-inverse-high-emphasis); border-bottom-color: transparent; }
.lem-announce__inner {
  max-width: var(--container-wide); margin-inline: auto;
  padding: var(--space-3) clamp(16px, 4vw, 48px);
  display: flex; align-items: center; justify-content: center; gap: var(--space-4);
  font-size: var(--type-body-sm-size);
}
.lem-announce__link { color: var(--text-link); text-decoration: underline; font-weight: 600; }
.lem-announce--dark .lem-announce__link,
.lem-announce--brand .lem-announce__link { color: var(--text-inverse-link); }

/* ═══ SECTION wrapper ═══ */
.lem-section { padding-block: clamp(64px, 9vw, 120px); }
.lem-section--default    { background: var(--surface-default);    color: var(--text-high-emphasis); }
.lem-section--warm       { background: var(--surface-warm);       color: var(--text-high-emphasis); }
.lem-section--gray-light { background: var(--surface-gray-light); color: var(--text-high-emphasis); }
.lem-section--dark       { background: var(--surface-dark);       color: var(--text-inverse-high-emphasis); }
.lem-section--brand      { background: var(--surface-brand);      color: var(--text-inverse-high-emphasis); }

.lem-section__inner {
  max-width: var(--container-max); margin-inline: auto;
  padding-inline: clamp(16px, 4vw, 48px);
}
.lem-section__header { max-width: 64ch; margin-bottom: var(--space-12); }
.lem-section__header--center { margin-inline: auto; text-align: center; }
.lem-section__eyebrow {
  font-size: var(--type-body-sm-size); font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--interactive-primary); margin: 0 0 var(--space-3);
}
.lem-section--dark .lem-section__eyebrow,
.lem-section--brand .lem-section__eyebrow { color: var(--text-inverse-blue-strong); }

.lem-section__title {
  font-family: var(--font-display);
  font-size: clamp(28px, 4vw, var(--type-h1-size));
  line-height: 1.15; font-weight: 700; letter-spacing: -0.02em;
  margin: 0 0 var(--space-4);
}
.lem-section__title em { font-style: normal; font-weight: 400; color: var(--text-medium-emphasis); }
.lem-section__lede {
  font-size: var(--type-body-lg-size); line-height: 1.5;
  color: inherit; opacity: 0.85; margin: 0;
}

/* ═══ HERO (Core Banner) ═══ */
.lem-banner { padding-block: clamp(48px, 8vw, 96px); position: relative; overflow: hidden; }
.lem-banner--default { background: var(--surface-default); color: var(--text-high-emphasis); }
.lem-banner--dark    { background: var(--surface-dark);    color: var(--text-inverse-high-emphasis); }
.lem-banner--brand   { background: var(--surface-brand);   color: var(--text-inverse-high-emphasis); }
.lem-banner--warm    { background: var(--surface-warm);    color: var(--text-high-emphasis); }

.lem-banner__inner {
  max-width: var(--container-max); margin-inline: auto;
  padding-inline: clamp(16px, 4vw, 48px);
  position: relative; z-index: 1;
}
.lem-banner__eyebrow {
  font-size: var(--type-body-sm-size); font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--interactive-primary); margin: 0 0 var(--space-4);
}
.lem-banner--dark .lem-banner__eyebrow,
.lem-banner--brand .lem-banner__eyebrow { color: var(--text-inverse-blue-strong); }

.lem-banner__headline {
  font-family: var(--font-display);
  font-size: clamp(40px, 6vw, 60px);
  line-height: 1.1; font-weight: 700; letter-spacing: -0.02em;
  margin: 0 0 var(--space-5);
}
.lem-banner__headline em { font-style: normal; font-weight: 400; color: var(--text-medium-emphasis); }
.lem-banner--dark .lem-banner__headline em,
.lem-banner--brand .lem-banner__headline em { color: var(--text-inverse-medium-emphasis); }

.lem-banner__lede {
  font-size: clamp(18px, 2vw, var(--type-body-lg-size));
  line-height: 1.5; color: inherit; opacity: 0.85;
  margin: 0 0 var(--space-8); max-width: 56ch;
}
.lem-banner__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); }

/* Center alignment variant */
.lem-banner--center .lem-banner__inner { text-align: center; }
.lem-banner--center .lem-banner__headline,
.lem-banner--center .lem-banner__lede { margin-inline: auto; }
.lem-banner--center .lem-banner__lede { max-width: 56ch; }
.lem-banner--center .lem-banner__actions { justify-content: center; }

/* ═══ ACCORDION ═══ */
.lem-accordion { border-top: 1px solid var(--border-gray-light); max-width: var(--container-narrow); margin-inline: auto; }
.lem-accordion__item { border-bottom: 1px solid var(--border-gray-light); }
.lem-accordion__summary {
  display: flex; justify-content: space-between; align-items: center; gap: var(--space-4);
  padding: var(--space-5) 0;
  font-size: var(--type-h5-size); font-weight: 600;
  color: var(--text-high-emphasis); cursor: pointer; list-style: none;
}
.lem-accordion__summary::-webkit-details-marker { display: none; }
.lem-accordion__chevron { transition: transform 200ms ease; width: 20px; height: 20px; flex-shrink: 0; }
.lem-accordion__item[open] .lem-accordion__chevron { transform: rotate(180deg); }
.lem-accordion__panel {
  padding: 0 0 var(--space-5);
  font-size: var(--type-body-md-size); line-height: 1.6;
  color: var(--text-medium-emphasis); max-width: 70ch;
}

/* ═══ CALLOUT ═══ */
.lem-callout { padding-block: clamp(64px, 10vw, 128px); }
.lem-callout--warm  { background: var(--surface-warm); }
.lem-callout--dark  { background: var(--surface-dark); color: var(--text-inverse-high-emphasis); }
.lem-callout--brand { background: var(--surface-brand); color: var(--text-inverse-high-emphasis); }
.lem-callout__inner {
  max-width: var(--container-narrow); margin-inline: auto;
  padding-inline: clamp(16px, 4vw, 48px);
  text-align: center;
}
.lem-callout__title {
  font-family: var(--font-display);
  font-size: clamp(32px, 4.5vw, var(--type-h1-size));
  line-height: 1.15; font-weight: 700; letter-spacing: -0.02em;
  margin: 0 0 var(--space-5);
}
.lem-callout__body {
  font-size: var(--type-body-lg-size); line-height: 1.5;
  margin: 0 auto var(--space-8); max-width: 56ch; opacity: 0.9;
}
.lem-callout__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-3); }
.lem-callout--brand .lem-button--secondary,
.lem-callout--brand .lem-button--inverse,
.lem-callout--dark .lem-button--secondary,
.lem-callout--dark .lem-button--inverse {
  color: var(--text-inverse-high-emphasis);
  border-color: var(--text-inverse-high-emphasis);
}
.lem-callout--brand .lem-button--inverse,
.lem-callout--dark .lem-button--inverse {
  background: var(--interactive-inverse); color: var(--text-high-emphasis);
  border-color: transparent;
}
.lem-callout--brand .lem-button--inverse:hover,
.lem-callout--dark .lem-button--inverse:hover { background: var(--interactive-inverse-hover); }

/* ═══ STATS ═══ */
.lem-stats {
  list-style: none; padding: 0; margin: 0;
  display: grid; gap: var(--space-8);
  grid-template-columns: 1fr;
  text-align: center;
}
@media (min-width: 640px) { .lem-stats { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .lem-stats { grid-template-columns: repeat(4, 1fr); text-align: left; } }
.lem-stats__item { display: flex; flex-direction: column; gap: var(--space-2); }
.lem-stats__value {
  font-family: var(--font-display);
  font-size: clamp(48px, 6vw, 80px); line-height: 1; font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--interactive-primary);
}
.lem-stats--inverse .lem-stats__value { color: var(--text-inverse-blue-strong); }
.lem-stats__label {
  font-size: var(--type-body-md-size); font-weight: 600;
  color: var(--text-medium-emphasis);
}
.lem-stats--inverse .lem-stats__label { color: var(--text-inverse-medium-emphasis); }

/* ═══ CARD ═══ */
.lem-card {
  display: flex; flex-direction: column;
  background: var(--surface-card);
  border: 1px solid var(--border-gray-light);
  border-radius: var(--radius-xl);
  overflow: hidden;
  transition: border-color 120ms ease, box-shadow 120ms ease, transform 120ms;
  transform-origin: center;
}
.lem-card:hover { border-color: var(--border-gray-hover); box-shadow: var(--elevation-2); transform: scale(1.03); }

.lem-card__media { aspect-ratio: 16 / 9; overflow: hidden; background: var(--surface-gray-light); }
.lem-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; }

.lem-card__body { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-6); flex: 1; }

.lem-card__eyebrow {
  font-size: var(--type-caption-size); line-height: var(--type-caption-lh);
  font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--text-medium-emphasis); margin: 0;
}
.lem-card__title {
  font-size: var(--type-h4-size); line-height: var(--type-h4-lh); font-weight: 600;
  color: var(--text-high-emphasis); margin: 0;
}
.lem-card__description {
  font-size: var(--type-body-md-size); line-height: var(--type-body-md-lh);
  color: var(--text-medium-emphasis); margin: 0;
}
.lem-card__actions { margin-top: auto; padding-top: var(--space-2); }

/* ═══ CHECKLIST ═══ */
.lem-checklist {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: var(--space-3);
}
.lem-checklist__item {
  display: flex; align-items: flex-start; gap: var(--space-3);
  font-size: var(--type-body-md-size); line-height: 1.5;
  color: var(--text-high-emphasis);
}
.lem-checklist__icon {
  flex-shrink: 0; width: 20px; height: 20px; margin-top: 2px;
  color: var(--system-success);
}

/* ═══ GRID ═══ */
.lem-grid { display: grid; gap: var(--grid-gutter); grid-template-columns: 1fr; }
@media (min-width: 768px)  { .lem-grid--2, .lem-grid--3, .lem-grid--4 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) {
  .lem-grid--3 { grid-template-columns: repeat(3, 1fr); }
  .lem-grid--4 { grid-template-columns: repeat(4, 1fr); }
}

/* ═══ FOOTER ═══ */
.lem-footer {
  background: var(--surface-dark);
  color: var(--text-inverse-medium-emphasis);
}
.lem-footer a { color: var(--text-inverse-medium-emphasis); text-decoration: none; }
.lem-footer a:hover { color: var(--text-inverse-high-emphasis); text-decoration: underline; }

.lem-footer__inner {
  max-width: var(--container-max); margin-inline: auto;
  padding: var(--space-16) clamp(16px, 4vw, 48px) var(--space-12);
  display: grid; gap: var(--space-12);
}
@media (min-width: 1024px) {
  .lem-footer__inner { grid-template-columns: 1fr 2fr; gap: var(--space-16); }
}
.lem-footer__logo {
  color: var(--text-inverse-high-emphasis);
  display: inline-flex; align-items: center; gap: 6px;
  margin-bottom: var(--space-4); text-decoration: none;
}
.lem-footer__logo-text { font-weight: 700; font-size: 20px; color: var(--text-inverse-high-emphasis); }
.lem-footer__logo svg { width: 22px; height: 22px; }
.lem-footer__tag { margin: 0; font-size: var(--type-body-sm-size); max-width: 28ch; }

.lem-footer__cols { display: grid; gap: var(--space-8); grid-template-columns: 1fr; }
@media (min-width: 640px) { .lem-footer__cols { grid-template-columns: repeat(3, 1fr); } }
.lem-footer__col ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--space-2); font-size: var(--type-body-sm-size); }
.lem-footer__heading {
  font-size: var(--type-body-sm-size); font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--text-inverse-high-emphasis);
  margin: 0 0 var(--space-3);
}
.lem-footer__legal { border-top: 1px solid rgba(255, 255, 255, 0.15); }
.lem-footer__legal-inner {
  max-width: var(--container-max); margin-inline: auto;
  padding: var(--space-5) clamp(16px, 4vw, 48px);
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-4);
  font-size: var(--type-caption-size);
}
.lem-footer__legal-inner ul {
  list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: var(--space-4);
}


/* ===== v3/styles.css ===== */
/* Economic Graph v3 — Proposed Homepage (editorial / research-publication)
   Page-specific styles only. Shared LEM tokens + components live in
   ../shared/tokens.css and ../shared/base.css. */

/* ═══ NAV overrides ═══ */
.v3-nav__logo { display: inline-flex; align-items: center; gap: var(--space-3); }
.v3-nav__logo-linkedin { height: 22px; width: auto; display: block; }
.v3-nav__logo-eg       { height: 14px; width: auto; display: block; }
.v3-nav__logo-divider  { width: 1px; height: 22px; background: var(--border-gray-default); }
.v3-nav__primary { gap: var(--space-4); justify-content: center; }
.v3-nav__primary .lem-nav__link { font-weight: 400; color: var(--text-medium-emphasis); }
.v3-nav__primary .lem-nav__link:hover { color: var(--text-high-emphasis); background: transparent; }

/* ═══ PILL — shared chip style ═══ */
.v3-pill {
  display: inline-flex; align-items: center;
  padding: 4px 10px;
  font-size: var(--type-caption-size); font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.08em;
  border-radius: var(--radius-full);
  margin: 0;
}
.v3-pill--attention { background: var(--accent-attention); color: var(--text-high-emphasis); }
.v3-pill--flagship  { background: var(--surface-blue-mid); color: var(--interactive-primary); }
.v3-pill--new       { background: var(--li-green-light); color: var(--li-green-dark); }
.v3-pill--monthly   { background: var(--surface-gray-mid); color: var(--text-high-emphasis); }
.v3-pill--tool      { background: var(--surface-warm); color: var(--text-high-emphasis); }
.v3-pill--live      { background: var(--li-green-light); color: var(--li-green-dark); }
.v3-pill--index     { background: var(--accent-attention); color: var(--text-high-emphasis); }
.v3-pill--docs      { background: var(--surface-gray-mid); color: var(--text-high-emphasis); }
.v3-pill--neutral   { background: var(--surface-gray-mid); color: var(--text-high-emphasis); }

/* ═══ HERO ═══ */
.v3-hero {
  background-color: #000;  /* matches the halftone map's true-black background */
  color: var(--text-inverse-high-emphasis);
  /* Vertical padding only — horizontal padding is on .v3-hero__inner so the
     content aligns with .v3-section__inner below. */
  padding-block: clamp(72px, 9vw, 128px);
  position: relative;
  overflow: hidden;  /* clips the oversized bg as it parallaxes */
  /* Taller hero so more parallax motion is visible while scrolling. */
  min-height: clamp(620px, 78vh, 820px);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* "Plain" hero — used on sub-pages, no map background, shorter height. */
.v3-hero--plain { min-height: clamp(260px, 32vh, 360px); padding-block: clamp(40px, 5vw, 72px); }

/* Background image lives on its own absolutely-positioned layer so JS can
   translate it independently of the hero's foreground. The -40% inset gives
   the parallax plenty of headroom; size + position restored to the prior
   smaller right-anchored treatment. */
.v3-hero__bg {
  position: absolute;
  inset: -40% 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;  /* right-anchored, matches prior background-position */
  will-change: transform;
  pointer-events: none;
  z-index: 0;
}
/* World-map SVG is injected by the parallax/animation script. Size + position
   replicate the prior background-size: 60% auto / background-position: right center. */
.v3-hero__bg svg {
  width: 60%;
  height: auto;
  display: block;
}
/* Dot fade — paths transition smoothly when the blink class is toggled. */
.v3-hero__bg svg path {
  transition: fill 1600ms ease-in-out;
}
.v3-hero__bg svg path.eg-dot-blink {
  fill: var(--li-blue-30);  /* #d2e9ff */
}
@media (prefers-reduced-motion: reduce) {
  .v3-hero__bg svg path { transition: none; }
}

.v3-hero__inner {
  max-width: var(--container-max); margin-inline: auto;
  /* Matches .v3-section__inner padding so hero text + buttons line up with
     section content below. */
  padding-inline: clamp(16px, 4vw, 96px);
  width: 100%;
  position: relative; z-index: 1;
}
.v3-hero__title {
  font-family: var(--font-display);
  font-size: clamp(40px, 6vw, 72px); line-height: 1.05;
  font-weight: 700; letter-spacing: -0.03em;
  margin: var(--space-5) 0 var(--space-6);
  max-width: 22ch;
}
.v3-hero__title em {
  font-style: normal; font-weight: 400;
  color: var(--text-inverse-medium-emphasis);
}
.v3-hero__lede {
  font-size: clamp(18px, 1.6vw, 22px); line-height: 1.5;
  color: var(--text-inverse-medium-emphasis);
  margin: 0 0 var(--space-8); max-width: 56ch;
}
.v3-hero__ctas { display: flex; flex-wrap: wrap; gap: var(--space-3); }

/* CTA variants */
.v3-btn-attention {
  background: var(--accent-attention);
  color: var(--text-high-emphasis);
  border-color: transparent;
}
.v3-btn-attention:hover { background: #e8b800; color: var(--text-high-emphasis); }
.v3-btn-on-dark {
  background: transparent;
  color: var(--text-inverse-high-emphasis);
  border-color: var(--text-inverse-medium-emphasis);
}
.v3-btn-on-dark:hover { background: rgba(255, 255, 255, 0.08); border-color: var(--text-inverse-high-emphasis); color: var(--text-inverse-high-emphasis); }

/* ═══ SECTION ═══ */
.v3-section {
  padding-block: clamp(56px, 7vw, 96px);
  background: var(--surface-default);
  color: var(--text-high-emphasis);
}
.v3-section--gray { background: var(--surface-gray-light); }
.v3-section--blue { background: var(--surface-blue-mid); }
.v3-section--blue-30 { background: var(--li-blue-30); }  /* light tint — dark text inherits */
/* Direct primitive reference: blue-50 is the requested shade and there is
   no semantic token in the LEM set that maps to it specifically. */
.v3-section--blue-50 { background: var(--li-blue-50); }
/* blue-70 (LinkedIn Blue) on a content section. Strictly speaking the LEM
   rule says --surface-brand is "stats banners only, not content" — using the
   primitive directly here is an intentional override at the user's request. */
.v3-section--blue-70 {
  background: var(--li-blue-70);
  color: var(--text-inverse-high-emphasis);
}
.v3-section--blue-70 .v3-eyebrow,
.v3-section--blue-70 .v3-eyebrow__new,
.v3-section--blue-70 .v3-section__title,
.v3-section--blue-70 .v3-closer__title { color: var(--text-inverse-high-emphasis); }
.v3-section--blue-70 .v3-section__lede,
.v3-section--blue-70 .v3-closer__lede { color: var(--text-inverse-medium-emphasis); }
.v3-section--blue-70 .v3-closer__alt { color: var(--text-inverse-high-emphasis); }
.v3-section--blue-70 .v3-closer__alt:hover { color: var(--text-inverse-link); text-decoration: underline; }

/* blue-80 is the deepest LinkedIn blue. Same inverse treatment as blue-70. */
.v3-section--blue-80 {
  background: var(--li-blue-80);
  color: var(--text-inverse-high-emphasis);
}
.v3-section--blue-80 .v3-eyebrow,
.v3-section--blue-80 .v3-eyebrow__new,
.v3-section--blue-80 .v3-section__title,
.v3-section--blue-80 .v3-closer__title { color: var(--text-inverse-high-emphasis); }
.v3-section--blue-80 .v3-section__lede,
.v3-section--blue-80 .v3-closer__lede { color: var(--text-inverse-medium-emphasis); }
.v3-section--blue-80 .v3-closer__alt { color: var(--text-inverse-high-emphasis); }
.v3-section--blue-80 .v3-closer__alt:hover { color: var(--text-inverse-link); text-decoration: underline; }
.v3-section--blue-50 { color: var(--text-inverse-high-emphasis); }
.v3-section--blue-50 .v3-eyebrow,
.v3-section--blue-50 .v3-eyebrow__new { color: var(--text-inverse-high-emphasis); }
.v3-section--blue-50 .v3-section__title { color: var(--text-inverse-high-emphasis); }
.v3-section--blue-50 .v3-section__lede { color: var(--text-inverse-medium-emphasis); }
.v3-section--black {
  background: #000;  /* matches the hero */
  color: var(--text-inverse-high-emphasis);
}
.v3-section--black .v3-section__title,
.v3-section--black .v3-closer__title { color: var(--text-inverse-high-emphasis); }
.v3-section--black .v3-section__lede,
.v3-section--black .v3-closer__lede { color: var(--text-inverse-medium-emphasis); }
.v3-section--black .v3-eyebrow,
.v3-section--black .v3-eyebrow__new { color: var(--text-inverse-high-emphasis); }
/* Subscribe form link on dark surface — white, not the default LEM blue. */
.v3-section--black .v3-closer__alt { color: var(--text-inverse-high-emphasis); }
.v3-section--black .v3-closer__alt:hover { color: var(--text-inverse-link); text-decoration: underline; }

/* Program cards on the black Research Institute section: blue-30 fill,
   no border. Text stays dark because blue-30 is a light tint.
   Direct primitive reference — no semantic surface token maps to blue-30. */
.v3-section--black .v3-program {
  background: var(--li-blue-30);
  border-color: transparent;
}
.v3-section--black .v3-program__attribution {
  border-top-color: rgba(0, 0, 0, 0.12);  /* matches the warm surface contrast */
}

/* Topics section — same parallax + dot-blink animation pattern as the hero,
   but the inline world-map SVG is sized full-width / centered (distinct from
   the hero's 60% right-anchored treatment) and the dots are recolored so
   they're visible against the blue-80 surface. */
.v3-topics { position: relative; overflow: hidden; }
.v3-topics__bg {
  position: absolute;
  inset: -40% 0;
  display: flex; align-items: center; justify-content: center;
  pointer-events: none;
  will-change: transform;
  z-index: 0;
}
.v3-topics__bg svg {
  width: 100%; height: auto;
  display: block;
}
/* On blue-80 the original blue-80 dots would vanish; re-color them lighter. */
.v3-topics__bg svg path {
  fill: var(--li-blue-30);
  transition: fill 1600ms ease-in-out;
  opacity: 0.4;  /* keep it subtle so the topic cards stay the focus */
}
.v3-topics__bg svg path.eg-dot-blink {
  fill: #ffffff;
}
@media (prefers-reduced-motion: reduce) {
  .v3-topics__bg svg path { transition: none; }
}
.v3-topics > .v3-section__inner { position: relative; z-index: 1; }

/* Rounded "panel" behind the section header (eyebrow + title + lede) — gives
   the heading block visual weight on top of the animated dot field. */
.v3-topics .v3-section__head {
  background: var(--li-blue-30);
  padding: var(--space-6) var(--space-8);
  border-radius: var(--radius-xl);
  max-width: none;  /* span the full grid width — same as the cards below */
}
/* Force dark text on the light blue-30 panel, overriding the blue-80 inverse
   text rules that would otherwise make everything white. */
.v3-topics .v3-section__head .v3-eyebrow,
.v3-topics .v3-section__head .v3-eyebrow__new,
.v3-topics .v3-section__head .v3-section__title { color: var(--text-high-emphasis); }
.v3-topics .v3-section__head .v3-section__lede { color: var(--text-medium-emphasis); }
.v3-section__inner {
  max-width: var(--container-max); margin-inline: auto;
  padding-inline: clamp(16px, 4vw, 96px);
}
.v3-section__head { max-width: 900px; margin-bottom: var(--space-10); }
.v3-eyebrow {
  font-size: var(--type-body-sm-size); font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--text-medium-emphasis);
  margin: 0 0 var(--space-4);
}
.v3-eyebrow__new {
  color: var(--interactive-primary);
}
.v3-section__title {
  font-family: var(--font-display);
  font-size: clamp(30px, 3.6vw, 44px); line-height: 1.15;
  font-weight: 700; letter-spacing: -0.02em;
  color: var(--text-high-emphasis);
  margin: 0 0 var(--space-3);
}
.v3-section__lede {
  font-size: var(--type-body-lg-size); line-height: 1.5;
  color: var(--text-medium-emphasis);
  margin: 0; max-width: 60ch;
}

/* ═══ GRID ═══ */
.v3-grid { display: grid; gap: var(--space-6); grid-template-columns: 1fr; }
@media (min-width: 700px) {
  .v3-grid--2, .v3-grid--3, .v3-grid--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .v3-grid--3 { grid-template-columns: repeat(3, 1fr); }
  .v3-grid--4 { grid-template-columns: repeat(4, 1fr); }
}

/* ═══ LINK ARROW ═══ */
.v3-link {
  display: inline-flex; align-items: center; gap: var(--space-2);
  color: var(--interactive-primary); font-weight: 600;
  text-decoration: none; margin-top: auto;
}
.v3-link svg { width: 16px; height: 16px; transition: transform 120ms; }
.v3-link .eg-glyph { display: inline-block; transition: transform 120ms; }
.v3-link:hover { color: var(--interactive-primary-hover); text-decoration: underline; }
.v3-link:hover svg { transform: translateX(3px); }
.v3-link:hover .eg-glyph { transform: translateX(3px); }

/* ═══ REPORT CARD ═══ */
.v3-card {
  background: var(--surface-card);
  border: 1px solid var(--border-gray-light);
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: flex; flex-direction: column;
  transition: border-color 120ms ease, box-shadow 200ms ease, transform 120ms;
  transform-origin: center;
}
.v3-card:hover { border-color: var(--border-gray-hover); box-shadow: var(--elevation-2); transform: scale(1.03); }

/* Unified hover lift + scale across every card type on the page.
   position + z-index keeps the hovered card above its neighbors. */
.v3-card--report,
.v3-topic,
.v3-tool,
.v3-program,
.v3-partner {
  position: relative;
  z-index: 0;
  transition: border-color 120ms ease, box-shadow 200ms ease, transform 120ms;
  transform-origin: center;
}
.v3-card--report:hover,
.v3-topic:hover,
.v3-tool:hover,
.v3-program:hover,
.v3-partner:hover {
  transform: scale(1.03);
  box-shadow: var(--elevation-3);
  z-index: 1;
}

@media (prefers-reduced-motion: reduce) {
  .v3-card--report,
  .v3-topic,
  .v3-tool,
  .v3-program,
  .v3-partner { transition: none; }
  .v3-card--report:hover,
  .v3-topic:hover,
  .v3-tool:hover,
  .v3-program:hover,
  .v3-partner:hover { transform: none; }
}
.v3-card__thumb {
  aspect-ratio: 352 / 140;
  margin: var(--space-3) var(--space-3) 0;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--surface-gray-light);
}
.v3-card__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.v3-card__body {
  padding: var(--space-5) var(--space-6) var(--space-6);
  display: flex; flex-direction: column; gap: var(--space-3);
  flex: 1;
}
.v3-card__title {
  font-family: var(--font-display);
  font-size: var(--type-h5-size); line-height: 1.25;
  font-weight: 700; color: var(--text-high-emphasis);
  margin: 0;
}
.v3-card__copy {
  font-size: var(--type-body-md-size); line-height: 1.5;
  color: var(--text-medium-emphasis); margin: 0;
  flex: 1;
}

/* ═══ TOPIC CARD ═══ */
.v3-topic {
  background: var(--surface-card);
  border: 1px solid var(--border-gray-light);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  display: flex; flex-direction: column; gap: var(--space-3);
  text-decoration: none;
  transition: border-color 120ms ease, box-shadow 120ms ease;
}
.v3-topic:hover { border-color: var(--border-gray-hover); box-shadow: var(--elevation-2); }
.v3-topic__icon {
  display: block;
  width: 88px; height: 88px;
  margin-bottom: var(--space-2);
}
.v3-topic__title {
  font-family: var(--font-sans);
  font-size: var(--type-h5-size); line-height: 1.25;
  font-weight: 700; color: var(--text-high-emphasis);
  margin: 0;
}
.v3-topic__copy {
  font-size: var(--type-body-md-size); line-height: 1.5;
  color: var(--text-medium-emphasis); margin: 0;
  flex: 1;
}

/* ═══ TOOL CARD ═══ */
.v3-tool {
  background: var(--surface-card);
  border: 1px solid var(--border-gray-light);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  display: flex; flex-direction: column; gap: var(--space-3);
  text-decoration: none;
  transition: border-color 120ms ease, box-shadow 120ms ease;
}
.v3-tool:hover { border-color: var(--border-gray-hover); box-shadow: var(--elevation-2); }
.v3-tool__thumb {
  aspect-ratio: 252 / 100;
  border-radius: var(--radius-md);
  background: var(--accent-attention);   /* Warm/yellow #FECE02 */
}
.v3-tool__title {
  font-family: var(--font-sans);
  font-size: var(--type-body-lg-size); line-height: 1.25;
  font-weight: 700; color: var(--text-high-emphasis);
  margin: 0;
}
.v3-tool__copy {
  font-size: var(--type-body-sm-size); line-height: 1.5;
  color: var(--text-medium-emphasis); margin: 0;
  flex: 1;
}

/* ═══ PROGRAM CARD (Research Institute) ═══ */
.v3-program {
  background: var(--surface-card);
  border: 1px solid var(--border-gray-light);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  display: flex; flex-direction: column; gap: var(--space-3);
}
.v3-program__title {
  /* Title/Title-05-Bold from the LEM design system. */
  font-family: var(--font-sans);
  font-size: var(--type-title-05-size);
  line-height: var(--type-title-05-lh);
  font-weight: 700;
  color: var(--text-high-emphasis);
  margin: 0;
}
.v3-program__copy {
  font-size: var(--type-body-md-size); line-height: 1.5;
  color: var(--text-medium-emphasis); margin: 0;
  flex: 1;   /* pushes the attribution to the bottom */
}
.v3-program__attribution {
  display: flex; align-items: center; gap: var(--space-3);
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid var(--border-gray-light);
}
.v3-program__avatar {
  width: 40px; height: 40px;
  border-radius: var(--radius-full);
  object-fit: cover;
  background: var(--surface-gray-light);
  flex-shrink: 0;
}
.v3-program__lead {
  font-size: var(--type-body-sm-size); font-weight: 600;
  color: var(--text-high-emphasis); margin: 0;
  line-height: 1.3;
}
.v3-program__lead-link {
  color: var(--text-link);
  text-decoration: none;
}
.v3-program__lead-link:hover {
  color: var(--text-link-hover);
  text-decoration: underline;
}

/* ═══ PARTNER CARD ═══ */
.v3-partner {
  background: var(--surface-card);
  border: 1px solid var(--border-gray-light);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  display: flex; flex-direction: column; gap: var(--space-3);
}
.v3-partner__icon {
  display: block;
  width: 88px; height: 88px;
  margin-bottom: var(--space-2);
}
.v3-partner__eyebrow {
  font-size: var(--type-body-sm-size);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-high-emphasis);
  margin: 0;
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--border-gray-default);
}
.v3-partner__copy {
  font-size: var(--type-body-md-size); line-height: 1.5;
  color: var(--text-high-emphasis); margin: 0;
  flex: 1;  /* pushes the "Get in touch →" link to the bottom */
}

/* ═══ NEWSLETTER CLOSER ═══ */
.v3-closer__inner {
  display: grid; gap: var(--space-8);
  grid-template-columns: 1fr;
  align-items: center;
}
@media (min-width: 900px) {
  .v3-closer__inner { grid-template-columns: 1fr 1fr; gap: var(--space-12); }
}
.v3-closer__title {
  font-family: var(--font-display);
  font-size: clamp(28px, 3vw, 36px); line-height: 1.2;
  font-weight: 700; letter-spacing: -0.02em;
  margin: 0 0 var(--space-3);
}
.v3-closer__lede {
  font-size: var(--type-body-md-size); line-height: 1.5;
  color: var(--text-medium-emphasis); margin: 0;
}
.v3-closer__form { display: flex; flex-direction: column; gap: var(--space-3); }
.v3-input {
  font-family: var(--font-sans); font-size: var(--type-body-md-size);
  padding: 10px 14px; min-height: 44px;
  background: var(--surface-default);
  color: var(--text-high-emphasis);
  border: 1px solid var(--border-gray-default);
  border-radius: var(--radius-md);
  width: 100%;
}
.v3-input::placeholder { color: var(--text-placeholder); }
.v3-input:focus-visible {
  border-color: var(--border-blue-focus);
  outline: 2px solid var(--border-blue-focus); outline-offset: 0;
}
.v3-closer__form > .v3-input { max-width: 380px; }
.v3-closer__form > .lem-button { align-self: flex-start; }
.v3-closer__alt {
  display: inline-flex; align-items: center; gap: var(--space-2);
  font-size: var(--type-body-sm-size); font-weight: 600;
  color: var(--text-link); text-decoration: none;
  margin-top: var(--space-3);
}
.v3-closer__alt svg { width: 14px; height: 14px; }
.v3-closer__alt:hover { color: var(--text-link-hover); }

/* Visually hidden label */
.v3-visually-hidden {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* ═══ FOOTER ═══ */
.v3-footer {
  background: var(--surface-default);
  border-top: 1px solid var(--border-gray-light);
  color: var(--text-medium-emphasis);
}
.v3-footer__inner {
  max-width: var(--container-max); margin-inline: auto;
  padding: var(--space-12) clamp(16px, 4vw, 96px) var(--space-8);
}
.v3-footer__cols {
  display: grid; gap: var(--space-8);
  grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 700px)  { .v3-footer__cols { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px) { .v3-footer__cols { grid-template-columns: repeat(6, 1fr); } }

.v3-footer__heading {
  font-size: var(--type-body-sm-size); font-weight: 700;
  color: var(--text-high-emphasis);
  margin: 0 0 var(--space-3);
}
.v3-footer__col ul {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: var(--space-2);
  font-size: var(--type-body-sm-size);
}
.v3-footer__col a {
  color: var(--text-medium-emphasis); text-decoration: none;
}
.v3-footer__col a:hover { color: var(--text-high-emphasis); }

.v3-footer__legal {
  margin-top: var(--space-12);
  padding-top: var(--space-5);
  border-top: 1px solid var(--border-gray-light);
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-4);
  font-size: var(--type-caption-size);
  color: var(--text-medium-emphasis);
}
.v3-footer__legal p { margin: 0; }
.v3-footer__legal ul {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-wrap: wrap; gap: var(--space-4);
}
.v3-footer__legal a { color: var(--text-medium-emphasis); text-decoration: none; }
.v3-footer__legal a:hover { color: var(--text-high-emphasis); }

/* ═══ REGION CARD (Reports → By region) ═══ */
.v3-region-grid { display: grid; gap: var(--space-4); grid-template-columns: repeat(2, 1fr); }
@media (min-width: 700px)  { .v3-region-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px) { .v3-region-grid { grid-template-columns: repeat(4, 1fr); } }
.v3-region {
  background: var(--surface-card);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  display: flex; flex-direction: column; gap: var(--space-2);
  text-decoration: none;
  transition: transform 120ms, box-shadow 200ms ease;
  transform-origin: center;
}
.v3-region:hover { transform: scale(1.03); box-shadow: var(--elevation-3); }
.v3-region__code {
  font-family: var(--font-display);
  font-size: 28px; font-weight: 700;
  color: var(--interactive-primary);
  letter-spacing: -0.02em;
}
.v3-region__name {
  font-size: var(--type-body-md-size); font-weight: 600;
  color: var(--text-high-emphasis);
}

/* ═══ ARCHIVE LIST (Reports → Archive, Working papers, Press) ═══ */
.v3-archive {
  list-style: none; padding: 0; margin: 0;
  border-top: 1px solid var(--border-gray-light);
}
.v3-archive__item {
  display: grid;
  grid-template-columns: 72px 1fr auto;
  gap: var(--space-5);
  align-items: center;
  padding: var(--space-5) 0;
  border-bottom: 1px solid var(--border-gray-light);
}
@media (max-width: 640px) {
  .v3-archive__item { grid-template-columns: 56px 1fr; }
  .v3-archive__item .v3-link { grid-column: 1 / -1; }
}
.v3-archive__year {
  font-family: var(--font-display);
  font-size: var(--type-h5-size); font-weight: 700;
  color: var(--text-medium-emphasis);
}
.v3-archive__title {
  font-size: var(--type-body-md-size); line-height: 1.4;
  color: var(--text-high-emphasis);
}
.v3-archive__more { margin-top: var(--space-6); text-align: center; }

/* ═══ PEOPLE GRID (Research Institute → Researchers, Leadership) ═══ */
.v3-people-grid {
  display: grid; gap: var(--space-6);
  grid-template-columns: 1fr;
}
@media (min-width: 700px)  { .v3-people-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .v3-people-grid { grid-template-columns: repeat(3, 1fr); } }
.v3-person {
  display: flex; flex-direction: column; gap: var(--space-2);
}
.v3-person__avatar {
  width: 88px; height: 88px;
  border-radius: var(--radius-full);
  object-fit: cover;
  margin-bottom: var(--space-3);
  background: var(--surface-gray-light);
}
.v3-person__name {
  font-family: var(--font-sans);
  font-size: var(--type-h5-size); font-weight: 700;
  color: var(--text-high-emphasis); margin: 0;
}
.v3-person__role {
  font-size: var(--type-body-sm-size); font-weight: 600;
  color: var(--interactive-primary); margin: 0;
}
.v3-person__bio {
  font-size: var(--type-body-md-size); line-height: 1.5;
  color: var(--text-medium-emphasis); margin: var(--space-1) 0 0;
}

/* ═══ CONTACT CALLOUT (Partnerships → Apply, About → Mission) ═══ */
.v3-contact {
  background: var(--surface-card);
  border: 1px solid var(--border-gray-light);
  border-radius: var(--radius-xl);
  padding: var(--space-8);
  display: grid; gap: var(--space-4);
}
.v3-contact__title {
  font-family: var(--font-display);
  font-size: clamp(24px, 2.5vw, 32px); line-height: 1.2;
  font-weight: 700; letter-spacing: -0.02em;
  margin: 0;
}
.v3-contact__copy {
  font-size: var(--type-body-md-size); line-height: 1.5;
  color: var(--text-medium-emphasis); margin: 0;
}

/* ═══ ABOUT PAGE — body copy + pull quote ═══ */
.v3-about__body {
  max-width: 64ch;
  font-size: var(--type-body-lg-size);
  line-height: 1.6;
  color: var(--text-high-emphasis);
}
.v3-about__body p { margin: 0; }
.v3-about__body p + p { margin-top: var(--space-5); }

.v3-pullquote {
  max-width: 820px;
  margin: 0 auto;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: var(--space-8);
  text-align: left;
}
@media (max-width: 640px) {
  .v3-pullquote { flex-direction: column; align-items: center; text-align: center; }
}
.v3-pullquote__body { display: flex; flex-direction: column; gap: var(--space-5); flex: 1; min-width: 0; }
/* Wrap the avatar in a clipped container so the inner img can be scaled
   up slightly to crop out the photo's white background corners. */
.v3-pullquote__avatar-wrap {
  width: 176px; height: 176px;     /* 2× prior 88px */
  border-radius: var(--radius-full);
  overflow: hidden;
  flex-shrink: 0;
  background: var(--surface-gray-mid);
}
.v3-pullquote__avatar {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transform: scale(1.18);  /* zoom inside the clip to trim the photo's white edges */
}
.v3-pullquote__text {
  /* Title/Title-03-Bold from the LEM design system (Community Pro, 36px / 1.25, weight 700). */
  font-family: var(--font-display);
  font-size: var(--type-title-03-size);
  line-height: var(--type-title-03-lh);
  font-weight: 700;
  color: var(--text-high-emphasis);
  margin: 0;
  position: relative;  /* anchor for the hanging opening quote mark */
}
/* Opening curly quote hangs OUTSIDE the left edge of the text column —
   classic editorial "hanging punctuation" treatment. */
.v3-pullquote__text::before {
  content: "\201C";
  position: absolute;
  right: 100%;
  top: 0;
  padding-right: 0.12em;
  line-height: inherit;
}
.v3-pullquote__text::after { content: "\201D"; margin-left: 0.05em; }
.v3-pullquote__cite {
  display: flex; flex-direction: column; gap: 2px;
  font-size: var(--type-body-md-size);
  text-align: left;
}
@media (max-width: 640px) {
  .v3-pullquote__cite { text-align: center; }
}
.v3-pullquote__name { font-weight: 700; color: var(--text-high-emphasis); }
.v3-pullquote__role { color: var(--text-medium-emphasis); }

/* ═══ FULL WIDTH QUOTE — from Our Community DS Web UX "Full Width Quote"
       (Figma file Ndoy2mlC4QdGMqjTs5yGfD, component ea045781…)
   Gray-20 surface band with text on the left, photo on the right. ═══ */
.v3-fwquote-section {
  background: #f2f2f2;  /* system-gray-20 from the DS — slightly cooler than --li-gray-05 */
  width: 100%;
}
.v3-fwquote {
  max-width: 1440px;
  margin-inline: auto;
  display: flex;
  align-items: stretch;
  gap: 0;
}
.v3-fwquote__content {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-8);                                /* 32px between lockup and cite */
  padding-block: clamp(48px, 6vw, 96px);
  padding-inline: clamp(24px, 8vw, 120px);
  color: #070707;
}
.v3-fwquote__lockup {
  display: flex; flex-direction: column;
  gap: var(--space-3);                                /* 12px between mark and text */
}
.v3-fwquote__mark {
  width: 86px; height: 74px;
  display: block;
}
.v3-fwquote__text {
  font-family: var(--font-display);                   /* Community Pro */
  font-size: var(--type-title-04-size);               /* 32px */
  line-height: var(--type-title-04-lh);               /* 1.25 */
  font-weight: var(--type-title-04-weight);           /* 400 */
  color: #070707;
  margin: 0;
  max-width: 489px;
}
.v3-fwquote__cite {
  display: flex; flex-direction: column; gap: 2px;
  font-size: var(--type-body-md-size);                /* 16px */
  line-height: 1.4;
  max-width: 489px;
}
.v3-fwquote__name { font-weight: 600; color: #070707; }
.v3-fwquote__role { font-weight: 400; color: #070707; }
.v3-fwquote__media {
  flex-shrink: 0;
  width: 620px;
  height: 465px;
}
.v3-fwquote__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}

@media (max-width: 900px) {
  .v3-fwquote { flex-direction: column; }
  .v3-fwquote__content { padding-block: var(--space-10); padding-inline: var(--space-6); }
  .v3-fwquote__media { width: 100%; height: auto; aspect-ratio: 4 / 3; }
  .v3-fwquote__mark { width: 64px; height: 54px; }
  .v3-fwquote__text { font-size: var(--type-title-06-size); }  /* 20px on mobile */
}


/* ===== v1-2/styles.css ===== */
/* Economic Graph v4 — V1 content with V3 visual treatment.
   The v3 stylesheet is loaded by index.html via a <link>. This file only
   adds the V1-specific sections that v3 doesn't already cover (stats,
   video overview, partner logo grid, V1 footer). */

/* ═══ HERO — base dots blue-60, blink color yellow (overrides v3's defaults) ═══ */
.v3-hero__bg svg path {
  fill: var(--li-blue-60);
  transform-box: fill-box;
  transform-origin: center;
  transition: fill 1600ms ease-in-out, transform 800ms ease-out;
}
.v3-hero__bg svg path.eg-dot-blink {
  fill: var(--accent-attention);
  transform: scale(1.8);
}
/* Shrink the hero map and keep it anchored to the right edge.
   v3's default is 60% width; v4 trims to 40% so the map reads as a
   right-side accent rather than a full-bleed background. */
.v3-hero__bg svg { width: 60%; }

/* Featured-blog card thumbnail: the "AI has arrived at work" hero shows
   four people in a wide group shot — zoom the right side so the framing
   reads as one or two figures around the laptop instead of a crowd. */
.v3-card__thumb img[src*="ai-at-work"] {
  transform: scale(1.8);
  transform-origin: 80% 55%;
}

/* Byline row inside a v3-card body — sits between the title and the body
   copy, carries "Author • Date" in caption-size muted grey so it reads as
   metadata, not body. */
.v3-card__meta {
  margin: 0;
  font-size: var(--type-body-sm-size);
  color: var(--text-medium-emphasis);
  letter-spacing: 0.02em;
}
.v3-card__meta-author { font-weight: 600; color: var(--text-high-emphasis); }
.v3-card__meta-sep { margin: 0 0.5em; color: var(--text-medium-emphasis); }

/* Editor's picks rollover — mirrors the homepage's Reports/Interactive
   yellow card hover: the entire card fills with --accent-attention yellow
   alongside the existing scale lift. Scoped to .v4-featured-picks so the
   archive grid below keeps its standard hover. */
.v4-featured-picks .v3-card--report {
  transition: border-color 120ms ease, box-shadow 200ms ease,
              transform 200ms ease, background-color 200ms ease;
}
.v4-featured-picks .v3-card--report:hover {
  background-color: var(--accent-attention);
  border-color: var(--accent-attention);
}

/* ─── Blog archive header + search ───
   Section header and the keyword search field sit side-by-side: heading on
   the left, search field on the right. Wraps to a stacked layout on narrow
   viewports. */
.v4-archive-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
  flex-wrap: wrap;
  margin-bottom: var(--space-8);
  /* Headroom for scrollIntoView from the pagination — keeps the archive
     header from butting against the very top of the viewport. */
  scroll-margin-top: 96px;
}

/* Headroom for any anchor-scrolled section. Right now it's used by the
   partnership-program hero's "Become a partner" CTA → #how-to-partner. */
#how-to-partner { scroll-margin-top: 96px; }
.v4-archive-head__title { margin-bottom: 0; }   /* override the section-head's default trailing space */

.v4-blog-search {
  flex: 0 1 560px;
  min-width: 280px;
  margin: 0;
}
/* Inner wrapper around just the icon + input so the icon's vertical
   centring is measured against the input height, not the whole search
   block (which also contains a status line below the input). */
.v4-blog-search__field {
  position: relative;
}
.v4-blog-search__input {
  width: 100%;
  box-sizing: border-box;
  padding: 12px 16px 12px 44px;
  font-family: inherit;
  font-size: var(--type-body-md-size);
  color: var(--text-high-emphasis);
  background: var(--surface-card);
  /* Keep border-width constant across resting and focus states so the
     content area doesn't jitter on focus — only border-color changes,
     and on focus a 1px box-shadow ring is added outside to thicken the
     effective stroke without affecting layout. */
  border: 2px solid var(--border-gray-default);
  border-radius: var(--radius-full);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.v4-blog-search__input::placeholder { color: var(--text-placeholder); }
.v4-blog-search__input:focus {
  outline: none;
  border-color: var(--border-blue-focus);
  /* Box-shadow adds a 1px ring outside the 2px border — together they
     read as a 3px thick stroke on focus, without changing the layout. */
  box-shadow: 0 0 0 1px var(--border-blue-focus);
}
/* Magnifying-glass icon turns blue-70 when the input is focused so the
   left-side affordance matches the border stroke. */
.v4-blog-search__field:focus-within .v4-blog-search__icon {
  color: #0a66c2;
}
.v4-blog-search__icon {
  position: absolute;
  left: 16px; top: 50%;
  width: 20px; height: 20px;
  transform: translateY(-50%);
  color: var(--text-medium-emphasis);
  pointer-events: none;
}
.v4-blog-search__status {
  margin: var(--space-3) 4px 0;
  font-size: var(--type-body-sm-size);
  color: var(--text-medium-emphasis);
  min-height: 1.2em;
}
.v4-visually-hidden {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* ─── Pagination (blog archive) ───
   Centered row of square-ish buttons. Active page is filled blue;
   prev/next are wider so the arrow + label has room. */
.v4-pagination {
  display: flex; justify-content: center; align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-12);
}
.v4-pagination__btn {
  min-width: 40px;
  padding: 8px 14px;
  background: var(--surface-card);
  color: var(--text-link);
  border: 1px solid var(--border-gray-light);
  border-radius: var(--radius-sm);
  font-family: inherit;
  font-size: var(--type-body-sm-size);
  font-weight: 600;
  cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.v4-pagination__btn:hover:not(:disabled):not(.v4-pagination__btn--active) {
  background: var(--surface-hover);
  border-color: var(--border-gray-default);
  color: var(--text-link-hover);
}
.v4-pagination__btn--active {
  background: var(--surface-blue-bold);
  border-color: var(--surface-blue-bold);
  color: var(--text-inverse-high-emphasis);
  cursor: default;
}
.v4-pagination__btn:disabled { opacity: 0.4; cursor: not-allowed; }
.v4-pagination__btn--nav { min-width: 0; }
.v4-pagination__ellipsis {
  padding: 8px 4px;
  color: var(--text-medium-emphasis);
  font-weight: 600;
}

/* Widen the pullquote column on v4 so the partner quote on the About page
   reads as a fuller-bleed editorial moment instead of the v3 default 820px. */
.v3-pullquote { max-width: 1100px; }
/* Name in the cite block is now an anchor (LinkedIn profile). Match the
   non-underlined bold-blue treatment used elsewhere across the site. */
a.v3-pullquote__name {
  color: var(--text-link);
  text-decoration: none;
}
a.v3-pullquote__name:hover { color: var(--text-link-hover); text-decoration: underline; }


/* Hero — full v3 height, blue-80 to match the newsletter section. */
.v3-hero {
  background-color: var(--li-blue-80);
  padding-block: clamp(72px, 9vw, 128px);
}
.v3-hero:not(.v3-hero--plain) {
  min-height: clamp(680px, 88vh, 900px);
}
.v3-hero--plain {
  min-height: clamp(260px, 32vh, 360px);
  padding-block: clamp(40px, 5vw, 72px);
}

/* ═══ ANNOUNCEMENT — yellow background with black text ═══ */
.v4-announce {
  background: var(--accent-attention);
  color: var(--text-high-emphasis);
}
.v4-announce .lem-announce__link {
  color: var(--text-high-emphasis);
  text-decoration: underline;
}
.v4-announce .lem-announce__link:hover { color: var(--text-medium-emphasis); }

/* ═══ TICKER — horizontal stock-style marquee inside the announcement banner.
       JS (ticker.js) clones the first .v4-ticker__item enough times to fill
       the viewport, then duplicates the whole group so a translateX(0 → -50%)
       animation loops seamlessly. ═══ */
.v4-ticker { padding: 0; overflow: hidden; }
.v4-ticker__track {
  display: flex;
  align-items: center;
  width: max-content;
  gap: 40px;                          /* matches .v4-ticker__item gap so the rhythm is even across cycles */
  padding-block: var(--space-3);
  animation: v4-ticker-scroll 40s linear infinite;
  will-change: transform;
}
.v4-ticker:hover .v4-ticker__track { animation-play-state: paused; }
.v4-ticker__item {
  flex-shrink: 0;
  white-space: nowrap;
  font-family: var(--font-display);
  font-size: var(--type-body-sm-size);
  line-height: 1.25;
  font-weight: 700;
  /* When the item contains multiple <span> stats, lay them out with a
     fixed 40px gap. Single-text items render normally. */
  display: inline-flex;
  align-items: center;
  gap: 40px;
}
.v4-ticker__item .lem-announce__link { margin-left: 0.5em; }
@keyframes v4-ticker-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .v4-ticker__track { animation: none; }
}

/* ═══ REPORTS — mirror the hero's blue-80 + world-map + yellow blink bg ═══ */
.v4-reports {
  background: var(--li-blue-80);
  color: var(--text-inverse-high-emphasis);
  position: relative;
  overflow: hidden;
}
.v4-reports > .v3-section__inner { position: relative; z-index: 1; }
.v4-reports__bg {
  position: absolute;
  inset: -40% 0;
  display: flex; align-items: center; justify-content: flex-end;
  will-change: transform;
  pointer-events: none;
  z-index: 0;
}
.v4-reports__bg svg { width: 60%; height: auto; display: block; }
.v4-reports__bg svg path {
  fill: var(--li-blue-60);
}
/* No blink animation in the reports section — map stays static. */
/* Header copy on the dark blue panel uses inverse text. */
.v4-reports .v3-eyebrow,
.v4-reports .v3-section__title { color: var(--text-inverse-high-emphasis); }
.v4-reports .v3-section__lede  { color: var(--text-inverse-medium-emphasis); }

/* Larger eyebrow for the three section headers — body-sm (14px) →
   body-md (16px). v3's default reads small; bumping matches the bigger
   type scale we're using throughout the prototypes. */
.v4-overview .v3-eyebrow,
.v4-reports  .v3-eyebrow,
.v4-partners .v3-eyebrow { font-size: var(--type-body-md-size); }
/* "Explore all reports" CTA centered under the report cards. The button
   reuses .v4-jump-btn from the hero (white pill, blue circle, yellow
   arrow) — only the icon differs (right arrow here vs down arrow there). */
.v4-reports__cta {
  display: flex; justify-content: center;
  margin-top: clamp(40px, 5vw, 72px);
}

/* Canonical report-card hover lift: scale from center while the card
   body turns brand yellow inside the dark blue Reports section. */
.v4-reports .v3-card--report {
  transition: border-color 120ms ease, box-shadow 200ms ease,
              transform 200ms ease, background-color 200ms ease;
}
.v4-reports .v3-card--report:hover {
  transform: scale(1.06);
}
/* The centre (active) card in the cardstack is always yellow — even at
   rest. Side cards keep the white surface so the carousel still reads as
   a stack of distinct cards, and the hover state on the centre card just
   stays yellow. */
.v4-reports .v5-cardstack__card[data-pos="0"],
.v4-reports .v5-cardstack__card[data-pos="0"]:hover {
  background-color: var(--accent-attention);
  border-color: var(--accent-attention);
}

/* Partners section CTA — centered below the logo grid on the homepage.
   Keep the jump-btn pill white with high-emphasis text/border to match
   the partnership hero CTA treatment. */
.v4-partners__cta {
  display: flex;
  justify-content: center;
  margin-top: clamp(72px, 9vw, 120px);
}
.v4-partners__cta .v4-jump-btn {
  background: #fff;
  color: var(--text-high-emphasis);
  border: 1px solid var(--text-high-emphasis);
}
.v4-partners__cta .v4-jump-btn:hover {
  background: #f3f3f3;
  color: var(--text-high-emphasis);
  border-color: var(--text-high-emphasis);
}
.v4-partners__cta .v4-jump-btn__icon {
  background: #001a3c;                  /* dark navy circle keeps the yellow arrow legible on the bright blue pill */
}

/* "Learn more about our partners" CTA on the Data for Impact intro
   section: paint its label the same dark navy as the icon circle next
   to it (#001a3c — the V7 brand surface). Scoped to .v4-data-impact so
   other v4-section-cta uses (Research Institute, etc.) stay blue. */
.v4-data-impact .v4-jump-btn.v4-section-cta,
.v4-data-impact .v4-jump-btn.v4-section-cta:hover {
  color: #001a3c;
}
@media (prefers-reduced-motion: reduce) {
  .v4-reports .v3-card--report:hover { transform: none; }
}

/* Taller report-card thumbs — v3's default 352/140 reads short next to
   the bigger surrounding type. Bumped to 352/260 so the cardstack
   thumbnails get noticeably more vertical room for the report cover
   art (about a 60% taller image area than the prior 352/160). */
.v4-reports .v3-card__thumb { aspect-ratio: 352 / 260; }

/* Per-image crop biases — each cardstack image gets an object-position
   tuned so the subjects' faces land in the visible window of the now-
   taller thumb. Default object-fit:cover keeps the image filling the
   frame; we just nudge which slice is shown. */
.v5-cardstack__card .v3-card__thumb img[src$="report-green-skills.png"]    { object-position: 30% 40%; }   /* woman left-of-centre */
/* UK Green Skills 2026 cover (PNG 736x904) ships with a small white
   margin on the LEFT side. Scale the image up a touch and pin the
   transform origin to the right edge so the magnification pushes the
   white strip off-canvas on the left. */
.v5-cardstack__card .v3-card__thumb img[src$="report-uk-green-skills-2026.png"] {
  transform: scale(1.08);
  transform-origin: 100% 50%;
}
.v5-cardstack__card .v3-card__thumb img[src$="report-small-business.png"]  { object-position: 50% 30%; }   /* two faces upper-centre */
.v5-cardstack__card .v3-card__thumb img[src$="report-us-workforce.png"]    { object-position: 25% 35%; }   /* bias to the woman on the left */
.v5-cardstack__card .v3-card__thumb img[src$="report-ai-skills-v2.jpeg"]   { object-position: 35% 30%; }   /* two women, faces upper-left */
.v5-cardstack__card .v3-card__thumb img[src$="report-skills-signal-v2.jpg"]{ object-position: 50% 50%; }   /* hands + laptop, no face */
.v5-cardstack__card .v3-card__thumb img[src$="report-green-skills-v2.jpg"] { object-position: 50% 30%; }   /* presenter upper-centre */
.v5-cardstack__card .v3-card__thumb img[src$="report-gender-equity-new.jpg"] { object-position: 60% 25%; } /* portrait, face upper-right */
.v5-cardstack__card .v3-card__thumb img[src$="report-future-of-skills.jpg"]  { object-position: 40% 25%; } /* face upper-left */


/* Mirror of .v4-reports' yellow card hover for the Interactive Data &
   Insights section on featured-research. Scoped via .v4-interactive so
   it doesn't bleed onto other v3-section--gray blocks. */
.v4-interactive .v3-section__title {
  position: relative;
  z-index: 2;
}
.v4-interactive .v3-card--report {
  transition: border-color 120ms ease, box-shadow 200ms ease,
              transform 200ms ease, background-color 200ms ease;
}
.v4-interactive .v3-card--report:hover {
  transform: scale(1.06);
  background-color: var(--accent-attention);
  border-color: var(--accent-attention);
}
@media (prefers-reduced-motion: reduce) {
  .v4-interactive .v3-card--report:hover { transform: none; }
}

/* ═══ NAV — "Economic Graph" as live text instead of a logo image, and
       bump primary nav links from weight 400 → 600. ═══ */
.v3-nav__logo-eg {
  height: auto;
  font-family: var(--font-display);
  font-size: 16px;
  line-height: 1;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--text-medium-emphasis);
  white-space: nowrap;
}
/* Top-nav primary links — match the dropdown's type ramp (XBU Figma:
   SF Pro Text Semibold, derived from /1.25 / rgba(0,0,0,0.75)) so the
   trigger and the menu agree on type. Overrides the 14px default from
   shared/base.css and the v3 weight override. align-items:center on the
   list makes the chevron-bearing dropdown item line up with the plain
   links beside it. */
.v3-nav__primary {
  align-items: center;
}
.v3-nav__primary .lem-nav__link {
  font-family: 'SF Pro Text', -apple-system, BlinkMacSystemFont, 'Source Sans 3', sans-serif;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.28px;
  color: rgba(0, 0, 0, 0.75);
}
.v3-nav__primary .lem-nav__link:hover {
  color: var(--text-link);                     /* all top-nav links turn blue on hover */
}

/* ═══ NAV — slightly different follow pill on light surface ═══ */
.v4-follow-pill {
  border: 1px solid var(--border-gray-default);
  color: var(--text-inverse-high-emphasis);
  background: transparent;
  /* Match the nav's type ramp (SF Pro Text Semibold) — size stays at the
     button default so the pill keeps its current chip dimensions. */
  font-family: 'SF Pro Text', -apple-system, BlinkMacSystemFont, 'Source Sans 3', sans-serif;
  font-weight: 600;
  letter-spacing: -0.28px;
  /* Override lem-button--sm's 6px 16px so the pill has roomier internal
     padding and reads as a wider chip in the nav. */
  padding: 10px 24px;
  min-height: 40px;
  gap: var(--space-2);
}
.v4-follow-pill:hover {
  background: #ffffff;
  border-color: #ffffff;
}

/* ═══ HERO overrides — V1 has no CTAs and uses a giant single-word headline,
       so widen the title and trim the bottom margin where the CTAs would be. */
.v4-hero__inner .v3-hero__eyebrow {
  font-family: var(--font-display);
  font-size: var(--type-title-05-size);
  line-height: var(--type-title-05-lh);
  font-weight: 700;
  color: var(--text-inverse-high-emphasis);
  margin: 0;
}
.v4-hero__title {
  font-size: clamp(80px, 12vw, 180px);
  line-height: 1;
  letter-spacing: -0.04em;
  max-width: none;
  margin-bottom: var(--space-5);
}
.v4-hero__inner .v3-hero__lede {
  font-family: var(--font-display);
  font-size: var(--type-title-05-size);
  line-height: var(--type-title-05-lh);
  font-weight: 700;
  color: var(--accent-attention);
  margin-bottom: 0;
  max-width: none;
}
.v4-hero__ctas { margin-top: clamp(32px, 4vw, 56px); }

/* ═══ JUMP BUTTON — white pill with a blue-70 circle around a yellow arrow.
       Used for the hero's "Explore reports" anchor jump. */
.v4-jump-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  padding: 8px 8px 8px 20px;
  background: #fff;
  color: var(--text-high-emphasis);
  border: 1px solid var(--text-high-emphasis);
  border-radius: var(--radius-full, 999px);
  text-decoration: none;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--type-body-md-size);
  line-height: 1;
  /* Unified CTA hover: every .v4-jump-btn enlarges symmetrically from its
     center. Bouncy overshoot easing keeps the small "boing" feel. */
  transform-origin: center center;
  transition: background-color 200ms ease,
              transform 360ms cubic-bezier(0.34, 1.56, 0.64, 1),
              box-shadow 360ms ease;
}
.v4-jump-btn:hover {
  background: #f3f3f3;
  color: var(--text-high-emphasis);
  transform: scale(1.06);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.22);
}
.v4-jump-btn:focus-visible {
  outline: 2px solid var(--accent-attention);
  outline-offset: 3px;
}
.v4-jump-btn__icon {
  width: 32px; height: 32px;
  border-radius: var(--radius-full, 999px);
  background: var(--li-blue-70);
  color: var(--accent-attention);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: transform 360ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
.v4-jump-btn:hover .v4-jump-btn__icon { transform: scale(1.12); }
.v4-jump-btn__icon svg {
  width: 16px; height: 16px;
  stroke: currentColor;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
@media (prefers-reduced-motion: reduce) {
  .v4-jump-btn { transition: none; }
  .v4-jump-btn:hover { transform: none; }
}

/* ═══ STATS — 4-up grid on a default surface, large display numbers in LI blue.
       Echoes V1's eg-stats treatment but spaced and typed like V3 section heads. */
.v4-stats { padding-block: clamp(56px, 7vw, 96px); }
.v4-stats__eyebrow { margin: 0 0 var(--space-3); }
.v4-stats__subhead {
  font-family: var(--font-display);
  font-size: var(--type-title-02-size);
  line-height: var(--type-title-02-lh);
  font-weight: 700;
  color: var(--text-high-emphasis);
  max-width: 60ch;
  margin: 0 0 clamp(40px, 5vw, 72px);
}
.v4-stats__grid {
  list-style: none; padding: 0; margin: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-8);
}
@media (min-width: 640px)  { .v4-stats__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .v4-stats__grid { grid-template-columns: repeat(4, 1fr); gap: var(--space-12); } }
.v4-stat {
  display: flex; flex-direction: column; gap: var(--space-2);
  padding-block: var(--space-3);
}
.v4-stat__icon {
  display: block;
  width: 96px; height: 96px;
  margin-bottom: var(--space-3);
}
.v4-stat__value {
  font-family: var(--font-display);
  font-size: clamp(64px, 7vw, 104px);
  line-height: 1;
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--li-blue-80);
}
.v4-stat__label {
  font-size: var(--type-title-06-size);
  font-weight: 700;
  color: var(--text-medium-emphasis);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
/* YoY trend indicator (mirrored from v5's hero counters). */
.v4-stat__trend {
  font-size: var(--type-body-md-size);
  font-weight: 700;
  letter-spacing: 0.01em;
  margin-top: var(--space-1, 4px);
}
.v4-stat__trend--up   { color: #1f7a3d; }
.v4-stat__trend--down { color: #b22a2a; }

/* ═══ OVERVIEW — video thumb + text, two-up on desktop ═══ */
.v4-overview__grid {
  display: grid; gap: var(--space-10);
  grid-template-columns: 1fr;
  align-items: center;
}
@media (min-width: 1024px) {
  .v4-overview__grid { grid-template-columns: 634fr 569fr; gap: var(--space-12); }
}
.v4-overview__video {
  display: block;
  aspect-ratio: 634 / 358;
  border-radius: var(--radius-xl);
  overflow: hidden;
  position: relative;
  cursor: pointer;
  background: var(--surface-gray-mid);
  /* Reset button defaults — we use a <button> so it's a real native
     control (keyboard-focusable, no accidental # hash on click). */
  border: 0;
  padding: 0;
  font: inherit;
  color: inherit;
  width: 100%;
}
.v4-overview__video iframe {
  width: 100%; height: 100%;
  border: 0; display: block;
}
.v4-overview__video-thumb {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
}
.v4-overview__video:hover .v4-overview__play {
  transform: translate(-50%, -50%) scale(1.05);
}
.v4-overview__play {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 72px; height: 72px; border-radius: var(--radius-full);
  background: rgba(255, 255, 255, 0.95);
  display: flex; align-items: center; justify-content: center;
  color: var(--text-high-emphasis);
  transition: transform 200ms ease;
  box-shadow: var(--elevation-2);
}
.v4-overview__play svg { width: 32px; height: 32px; margin-left: 4px; }
.v4-overview__text .v3-eyebrow { margin-bottom: var(--space-3); }
.v4-overview__text .v3-section__title { margin-bottom: var(--space-4); }

/* ═══ PARTNERS — 9 logos as a clean 3 × 3 grid on desktop. Cards scale
       up to fill the wider columns so each logo gets more presence. */
.v4-partners__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
  margin-top: var(--space-8);
  justify-content: center;
}
@media (min-width: 480px) { .v4-partners__grid--even { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 720px) { .v4-partners__grid--even { grid-template-columns: repeat(4, 1fr); gap: var(--space-6); } }
.v4-partner {
  position: relative;
  background: var(--surface-card);
  border: 1px solid var(--border-gray-light);
  border-radius: var(--radius-lg);
  /* Shorter, wider cards (5:3) so horizontal-format logos like
     eurostat, NASWA, OECD, NLC fill more of the tile when sized
     via object-fit: contain. */
  aspect-ratio: 5 / 3;
  display: flex; align-items: center; justify-content: center;
  /* Minimal padding so the logo dominates the card. */
  padding: var(--space-2);
  overflow: hidden;
  transition: background-color 200ms ease, border-color 200ms ease,
              box-shadow 200ms ease, transform 120ms;
  transform-origin: center;
}
.v4-partner__logo {
  /* Fill the tile — uniform across logos via object-fit: contain.
     Most source PNGs ship with internal whitespace baked in, which
     visually shrinks the logo even after contain. Apply a transform
     scale to push them up to read at full card size; cards have
     overflow: hidden so any horizontal-logo spillover is clipped. */
  width: 100%; height: 100%;
  object-fit: contain; display: block;
  transform: scale(1.55);
  transition: opacity 200ms ease;
}
/* World Bank and ILO logos have more internal whitespace than the others,
   so they need a higher cap to look the same visual weight in the grid. */
/* All logos render at the uniform .v4-partner__logo height above so
   every card reads the same visual weight. Prior per-logo height
   overrides (world-bank, ilo, logo-02, logo-08) have been removed. */
/* Caption (name + description) sits on top of the logo, hidden until hover.
   On hover the logo fades out and the caption fades in. */
.v4-partner__caption {
  position: absolute;
  inset: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-5);
  text-align: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 200ms ease;
}
.v4-partner__name {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--type-title-05-size);
  line-height: var(--type-title-05-lh);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--text-inverse-high-emphasis);
}
.v4-partner__desc {
  margin: 0;
  font-size: var(--type-body-lg-size);
  line-height: 1.45;
  font-weight: 500;
  color: var(--text-inverse-medium-emphasis);
}
/* On hover the whole card flips to li-blue-70 and the caption appears. */
.v4-partner:hover {
  background: var(--li-blue-70);
  border-color: var(--li-blue-70);
  box-shadow: var(--elevation-3);
  transform: scale(1.03);
}
.v4-partner:hover .v4-partner__logo { opacity: 0; }
.v4-partner:hover .v4-partner__caption { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .v4-partner,
  .v4-partner__logo,
  .v4-partner__caption { transition: none; }
  .v4-partner:hover { transform: none; }
}

/* ═══ NEWSLETTER closer — V1 two-button actions, surface-dark background ═══ */
#newsletter.v3-section--blue-80 { background: var(--surface-dark); }
.v4-closer__actions {
  display: flex; flex-wrap: wrap; gap: var(--space-3);
}

/* ═══ SUB-PAGE prose — long-form copy block for sub-page bodies ═══ */
.v4-prose {
  max-width: 64ch;
  font-size: var(--type-body-lg-size);
  line-height: 1.6;
  color: var(--text-high-emphasis);
}
.v4-prose p { margin: 0; }
.v4-prose p + p { margin-top: var(--space-5); }

/* Blog post list — single column of post links ═══ */
.v4-postlist { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--border-gray-light); }
.v4-postlist__item {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--space-5);
  align-items: baseline;
  padding: var(--space-5) 0;
  border-bottom: 1px solid var(--border-gray-light);
}
.v4-postlist__title {
  font-family: var(--font-display);
  font-size: var(--type-h5-size); line-height: 1.25;
  font-weight: 700;
  color: var(--text-high-emphasis);
  margin: 0;
}
.v4-postlist__title a { color: inherit; text-decoration: none; }
.v4-postlist__title a:hover { color: var(--interactive-primary); }
.v4-postlist__date {
  font-size: var(--type-body-sm-size);
  color: var(--text-medium-emphasis);
  white-space: nowrap;
}

/* ═══ FOOTER — V1's single-row footer, white surface / black text ═══ */
.v4-footer {
  background: var(--surface-default);
  border-top: 1px solid var(--border-gray-light);
}
.v4-footer__inner {
  max-width: var(--container-max); margin-inline: auto;
  padding: var(--space-8) clamp(16px, 4vw, 96px);
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center;
  gap: var(--space-6);
}
.v4-footer__brand {
  display: flex; align-items: center; gap: var(--space-4);
  color: var(--text-high-emphasis);
  font-size: var(--type-body-sm-size);
}
.v4-footer__brand p { margin: 0; }
.v4-footer__logo { width: 22px; height: 22px; color: var(--interactive-primary); }
.v4-footer__links {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-wrap: wrap; gap: var(--space-6);
  font-size: var(--type-body-sm-size);
}
.v4-footer__links a { color: var(--text-high-emphasis); text-decoration: none; }
.v4-footer__links a:hover { color: var(--text-high-emphasis); text-decoration: none; }


/* ═══════════════════════════════════════════════════════════════════════════
   Workforce-data page — quick-link cards, filter chips, archives
   ═══════════════════════════════════════════════════════════════════════════ */

/* Featured-research quick-link cards: large anchor blocks that scroll to
   the deeper sections (Workforce Report archive, Confidence Index,
   Publications, Working papers). */
.v4-quick-cards {
  list-style: none; padding: 0; margin: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
}
/* Featured-research Explore CTAs match the wider gap of the .v3-grid--3
   cards above them, so column widths line up exactly. */
.v4-quick-cards--gap-lg { gap: var(--space-6); }
@media (max-width: 900px) {
  .v4-quick-cards { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 520px) {
  .v4-quick-cards { grid-template-columns: 1fr; }
}
.v4-quick-card {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-6) var(--space-6);
  background: var(--surface-card);
  border: 1px solid var(--border-gray-light);
  border-radius: var(--radius-lg);
  text-decoration: none;
  color: var(--text-high-emphasis);
  transition: border-color .15s ease, transform .15s ease;
  min-height: 96px;
}
.v4-quick-card:hover {
  border-color: var(--border-blue-featured);
  transform: translateY(-1px);
}
.v4-quick-card__label {
  font-size: var(--type-body-lg-size);
  font-weight: 600;
  line-height: 1.3;
}
.v4-quick-card__arrow {
  width: 20px; height: 20px;
  flex-shrink: 0;
  color: var(--interactive-primary);
}

/* Placeholder thumb for cards without a local image (e.g. Career Explorer).
   Uses a warm-tinted gradient so it sits between the v3-card photo cards
   without looking broken. */
.v4-card-thumb-placeholder {
  display: flex; align-items: center; justify-content: center;
  aspect-ratio: 352 / 160;
  background: linear-gradient(135deg, var(--surface-warm) 0%, var(--surface-warm-hover) 100%);
  color: var(--text-medium-emphasis);
  font-weight: 600;
  font-size: var(--type-body-lg-size);
  letter-spacing: -0.01em;
}

/* Filter chips — used by both the Workforce Report archive and the
   Publications list. Two-axis composition (e.g. country + year) is
   handled in JS; each axis is one .v4-chips row. */
.v4-filter {
  display: flex; flex-direction: column;
  gap: var(--space-3);
  margin-bottom: var(--space-8);
  /* Headroom for scrollIntoView when arriving from a deep-link like
     publications/#equity — keeps the chip row from butting against the
     viewport top so the category chips are clearly visible. */
  scroll-margin-top: 96px;
}
.v4-filter__row {
  display: flex; align-items: center;
  gap: var(--space-4);
  flex-wrap: wrap;
}
.v4-filter__label {
  font-size: var(--type-body-sm-size);
  font-weight: 600;
  color: var(--text-medium-emphasis);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  min-width: 80px;
}
.v4-chips {
  display: flex; flex-wrap: wrap;
  gap: var(--space-2);
}
.v4-chip {
  display: inline-flex; align-items: center;
  padding: 6px 14px;
  background: var(--surface-default);
  border: 1px solid var(--border-gray-default);
  border-radius: var(--radius-full);
  font: inherit;
  font-size: var(--type-body-sm-size);
  font-weight: 600;
  color: var(--text-medium-emphasis);
  cursor: pointer;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.v4-chip:hover {
  background: var(--surface-hover);
  color: var(--text-high-emphasis);
}
.v4-chip:focus-visible {
  outline: 2px solid var(--border-blue-focus);
  outline-offset: 2px;
}
.v4-chip--active {
  background: var(--text-high-emphasis);
  border-color: var(--text-high-emphasis);
  color: var(--surface-default);
}
.v4-chip--active:hover {
  background: var(--text-high-emphasis);
  color: var(--surface-default);
}

/* Workforce report archive — 3-column grid of compact text cards.
   Each card shows country tag + month/year + headline + read link. */
.v4-report-grid {
  list-style: none; padding: 0; margin: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
}
@media (max-width: 900px) {
  .v4-report-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .v4-report-grid { grid-template-columns: 1fr; }
}
.v4-report {
  display: flex; flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-6);
  background: var(--surface-card);
  border: 1px solid var(--border-gray-light);
  border-radius: var(--radius-md);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.v4-report:hover {
  border-color: var(--border-gray-hover);
  box-shadow: var(--elevation-1);
}
.v4-report__country {
  /* Country tag matches the Publications-card tag treatment: 4px 12px
     padding, body-sm font. Per-country background colours land via the
     modifier classes below. */
  display: inline-block;
  align-self: flex-start;
  padding: 4px 12px;
  background: var(--surface-blue-mid);
  color: var(--text-high-emphasis);
  border-radius: var(--radius-sm);
  font-size: var(--type-body-sm-size);
  font-weight: 600;
  letter-spacing: 0.02em;
}
/* Per-country tint, each from the LEM ramp. Chosen so the four countries
   read at a glance without leaning on national-flag hue beyond what the
   palette naturally offers (pink-red is close enough for Canada). */
.v4-report__country--us     { background: var(--surface-blue-mid); }       /* pale blue */
.v4-report__country--uk     { background: var(--li-tan-200); }             /* warm tan */
.v4-report__country--india  { background: var(--system-warning-subtle); }  /* soft yellow / saffron */
.v4-report__country--canada { background: var(--system-error-subtle); }    /* soft pink / red */
.v4-report__date {
  /* Mirrors the Publications-card date: body-md, weight 500, high-emphasis. */
  font-size: var(--type-body-md-size);
  font-weight: 500;
  color: var(--text-high-emphasis);
  letter-spacing: 0.02em;
}
.v4-report__copy {
  margin: 0;
  /* The summary line on a Workforce Report card acts as the headline since
     there's no separate title — render it in LEM Title-06 Bold so it sits
     at the same visual level as a Publications-card title. */
  font-family: var(--font-display);
  font-size: var(--type-title-06-size);
  line-height: var(--type-title-06-lh);
  font-weight: 700;
  color: var(--text-high-emphasis);
  flex-grow: 1;
}
.v4-report__link {
  margin-top: var(--space-2);
  font-size: var(--type-body-sm-size);
  font-weight: 600;
  color: var(--text-link);
  text-decoration: none;
}
.v4-report__link:hover { color: var(--text-link-hover); text-decoration: underline; }

/* ─── Consistent card text-link rollover across the whole v1-3 site ─── */
.v4-report__link,
.v4-pub__link,
.v4-paper__link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}
.v4-report__link svg,
.v4-pub__link svg,
.v4-paper__link svg {
  width: 16px;
  height: 16px;
  transition: transform 120ms ease;
}
.v4-report__link:hover svg,
.v4-pub__link:hover svg,
.v4-paper__link:hover svg {
  transform: translateX(3px);
}

/* Publications list — 3-col compact cards, single-axis category filter */
.v4-pub-grid {
  list-style: none; padding: 0; margin: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
}
@media (max-width: 900px) {
  .v4-pub-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .v4-pub-grid { grid-template-columns: 1fr; }
}
.v4-pub {
  display: flex; flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-6);
  background: var(--surface-card);
  border: 1px solid var(--border-gray-light);
  border-radius: var(--radius-md);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.v4-pub:hover {
  border-color: var(--border-gray-hover);
  box-shadow: var(--elevation-1);
}
.v4-pub__cat {
  display: inline-block;
  align-self: flex-start;
  padding: 4px 12px;
  background: var(--surface-warm);
  color: var(--text-high-emphasis);
  border-radius: var(--radius-sm);
  font-size: var(--type-body-sm-size);
  font-weight: 600;
  letter-spacing: 0.02em;
}
/* Container for publications that carry more than one category — wraps the
   pills onto the same row, gracefully overflows to a second row on narrow
   cards. align-self lets the container sit left-aligned at the top of the
   card flex column, just like a lone pill. */
.v4-pub__cats {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-self: flex-start;
}
/* Category-coded pill backgrounds — each maps to a tint from the LEM ramp
   (blues, tans, the system success/warning/error subtle pairs) so the
   categories can be scanned at a glance. Text stays high-emphasis on every
   tint since each pastel is bright enough to support it. */
.v4-pub__cat--ai          { background: var(--li-blue-30); }      /* tech reads blue */
.v4-pub__cat--skills      { background: var(--li-blue-10); }      /* lighter blue — skills as a softer tech-adjacent tint */
.v4-pub__cat--equity      { background: var(--system-error-subtle); }   /* soft pink */
.v4-pub__cat--green       { background: var(--system-success-subtle); } /* literal green */
.v4-pub__cat--macro       { background: var(--surface-warm); }    /* warm tan keeps the biggest bucket grounded */
.v4-pub__cat--methodology { background: var(--li-gray-10); }      /* analytical / neutral */
.v4-pub__cat--networks    { background: var(--system-warning-subtle); } /* warm yellow — community */
.v4-pub__cat--remote      { background: var(--li-tan-200); }      /* darker tan — workplace */
.v4-pub__title {
  margin: 0;
  /* LEM Title/Title-06 Bold — 20px / 1.25, display font (Community Pro),
     weight 700. */
  font-family: var(--font-display);
  font-size: var(--type-title-06-size);
  line-height: var(--type-title-06-lh);
  font-weight: 700;
  color: var(--text-high-emphasis);
  flex-grow: 1;
}
/* Publication date — sits between the title and the link. Body-md size,
   high-emphasis colour so the date reads cleanly; weight stays at 500 so
   the bold title above still anchors the card hierarchy. */
.v4-pub__date {
  font-size: var(--type-body-md-size);
  font-weight: 500;
  color: var(--text-high-emphasis);
  letter-spacing: 0.02em;
}
/* Two-line description blurb, clamped via -webkit-line-clamp. Sits between
   the title and the link in the card stack. Source: the live publications
   listing on economicgraph.linkedin.com. */
.v4-pub__desc {
  margin: 0;
  font-size: var(--type-body-sm-size);
  line-height: 1.45;
  color: var(--text-medium-emphasis);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.v4-pub__link {
  font-size: var(--type-body-sm-size);
  font-weight: 600;
  color: var(--text-link);
  text-decoration: none;
}
.v4-pub__link:hover { color: var(--text-link-hover); text-decoration: underline; }

/* "View all on linkedin.com" footer link under each archive */
.v4-archive-more {
  margin: var(--space-10) 0 0;
  text-align: center;
}
.v4-archive-more a {
  display: inline-flex; align-items: center;
  gap: var(--space-2);
  color: var(--text-link);
  font-weight: 600;
  text-decoration: none;
}
.v4-archive-more a:hover { color: var(--text-link-hover); text-decoration: underline; }
.v4-archive-more svg { width: 18px; height: 18px; }

/* Workforce Confidence Index — short section, just a CTA button under the head */
.v4-confidence-cta {
  margin: var(--space-8) 0 0;
}

/* Tight section spacing — used to bring two adjacent v3-sections close
   together when they're part of the same conceptual block (e.g.
   Publications intro paired with the Categories filter section). */
.v3-section--tight-bottom { padding-bottom: var(--space-4); }
.v3-section--tight-top    { padding-top:    var(--space-6); }

/* Note variant of v4-prose — wider column + italic. Used for editorial
   disclaimers like the working-papers intro. */
.v4-prose--note {
  max-width: 96ch;
  margin-inline: auto;
  font-size: var(--type-body-sm-size);
  color: var(--text-medium-emphasis);
  font-style: italic;
}

/* Data for Impact / "Our Impact" section — unify all body copy on the
   darker var(--text-high-emphasis) tone (the section lede, stat labels,
   and accordion panel/bullets). */
.v4-data-impact .v3-section__lede,
.v4-data-impact .v4-stat__label,
.v4-data-impact .lem-accordion__panel,
.v4-data-impact .lem-accordion__panel li {
  color: var(--text-high-emphasis);
}
/* Spacing between two stacked ledes (Our Impact section now uses two). */
.v4-data-impact .v3-section__lede + .v3-section__lede {
  margin-top: var(--space-5);
}
/* Widen the lede column in the Data for Impact sections beyond the default
   60ch so longer policy-style copy fits comfortably. */
.v4-data-impact .v3-section__lede {
  max-width: 84ch;
}
/* Section-level CTA — strips the v4-jump-btn pill so only the label
   (as a blue text link, no underline) + the blue circle + yellow arrow
   remain. The icon's bounce-on-hover is kept. */
.v4-section-cta {
  margin-top: var(--space-6);
  align-self: flex-start;
}
.v4-jump-btn.v4-section-cta {
  /* Force block-level flow so the CTA always sits on its own line above the
     program-lead chip (both .v4-jump-btn and .v4-program-lead default to
     inline-flex and would otherwise pack side-by-side in normal block flow). */
  display: flex;
  width: fit-content;
  background: transparent;
  padding: 0;
  border: 0;
  border-radius: 0;
  color: var(--text-link);
  text-decoration: none;
}
.v4-jump-btn.v4-section-cta:hover {
  background: transparent;
  color: var(--text-link-hover);
  /* Same unified action as every other CTA: enlarge from the center. */
  transform: scale(1.06);
  box-shadow: none;
}
.v4-jump-btn.v4-section-cta--right:hover .v4-jump-btn__icon {
  transform: scale(1.12) translateX(2px);
}

/* Outlined secondary-CTA variant of the section CTA: restores the pill shape
   with the community design system's secondary-button outline treatment
   (1px border in --interactive-secondary, blue-tint hover) so it reads as a
   secondary button rather than a plain text link. */
.v4-jump-btn.v4-section-cta--outline {
  padding: 8px 8px 8px 20px;
  border: 1px solid var(--interactive-secondary);
  border-radius: var(--radius-full, 999px);
}
.v4-jump-btn.v4-section-cta--outline:hover {
  background: var(--surface-blue-mid);
}

/* When the partner card is itself a link (clickable wrapper), strip the
   default underline/inherited colors so the inner caption keeps its styling. */
a.v4-partner {
  text-decoration: none;
  color: inherit;
}

/* Research Institute — expanded program sections. Wider prose column and
   a clickable program-lead chip (avatar + name) that links to the lead's
   LinkedIn profile. */
.v4-program-section .v4-prose {
  max-width: 88ch;
}
.v4-program-lead {
  display: inline-flex;
  align-items: center;
  gap: var(--space-4);
  margin-top: var(--space-8);
  padding: var(--space-3) var(--space-5) var(--space-3) var(--space-3);
  border: 1px solid var(--border-gray-light);
  border-radius: var(--radius-full);
  text-decoration: none;
  color: var(--text-high-emphasis);
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.v4-program-lead:hover {
  border-color: var(--border-blue-featured);
  box-shadow: var(--elevation-1);
  transform: translateY(-1px);
}
.v4-program-lead__avatar {
  width: 56px; height: 56px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  display: block;
}
.v4-program-lead__text {
  display: flex; flex-direction: column;
  gap: 2px;
}
.v4-program-lead__label {
  font-size: var(--type-body-sm-size);
  font-weight: 600;
  color: var(--text-medium-emphasis);
}
.v4-program-lead__name {
  font-size: var(--type-body-lg-size);
  font-weight: 700;
  color: var(--text-link);
}
.v4-program-lead:hover .v4-program-lead__name {
  text-decoration: underline;
}

/* Research Institute — body copy that sits below the program jump-cards
   instead of above them. */
.v4-program-grid-body {
  margin-top: var(--space-12);
}
/* Section header icon — stacked between the eyebrow and the h2 title. */
.v4-section-icon {
  width: 72px; height: 72px;
  display: block;
  margin: var(--space-3) 0;
}

/* Research Institute — turn the three Program cards into a jump-link menu
   that scrolls down to the expanded program sections (#macroeconomics,
   #ai-skills, #economic-opportunity). Icon at top, title in middle,
   blue-circle + yellow down-arrow at the bottom (mirrors v4-jump-btn). */
.v4-program-jump {
  display: flex; flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-4);
  text-decoration: none;
  color: var(--text-high-emphasis);
  cursor: pointer;
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.v4-program-jump:hover {
  border-color: var(--border-blue-featured);
  box-shadow: var(--elevation-1);
  transform: translateY(-1px);
}
.v4-program-jump__icon {
  width: 88px; height: 88px;
  display: block;
}
.v4-program-jump__label {
  font-size: var(--type-caption-size);
  font-weight: 700;
  color: var(--text-medium-emphasis);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.v4-program-jump .v3-program__title {
  margin: 0;
}
.v4-program-jump__arrow {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px;
  border-radius: var(--radius-full);
  background: var(--li-blue-70);
  color: var(--accent-attention);
  transition: transform 360ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
.v4-program-jump:hover .v4-program-jump__arrow {
  transform: scale(1.12) translateY(2px);
}
.v4-program-jump__arrow svg {
  width: 18px; height: 18px;
  stroke: currentColor;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
@media (prefers-reduced-motion: reduce) {
  .v4-program-jump:hover { transform: none; }
  .v4-program-jump:hover .v4-program-jump__arrow { transform: none; }
}

/* Placeholder treatment for partner cards where we don't yet have a logo
   asset. Renders the acronym at the same cap height as a real logo would. */
.v4-partner__logo--placeholder {
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: 120px;
  font-family: var(--font-display);
  font-size: clamp(28px, 3vw, 40px);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--text-medium-emphasis);
  transition: opacity 200ms ease;
}

/* Single-image fallback for the partner section — used when there isn't yet
   a grid of individual transparent logo files. */
.v4-partners__image {
  margin-top: var(--space-10);
  text-align: center;
}
.v4-partners__image img {
  max-width: 100%;
  height: auto;
  display: block;
  margin-inline: auto;
}

/* Partnership-program "Our Impact" accordions — styled to match
   "Our Community Design System_Web UX" accordion section (45px row,
   30% black bottom border, body title that turns LinkedIn blue on hover,
   chevron flips from down → up between closed and expanded). */
.v4-impact-accordion {
  margin-top: var(--space-12);
  border-top: none;
  max-width: none;
  margin-inline: 0;
}
.v4-impact-accordion .lem-accordion__item {
  border-bottom: 1px solid rgba(0, 0, 0, 0.3);
}
.v4-impact-accordion .lem-accordion__summary {
  padding: 16px 0;
  font-size: var(--type-title-05-size);         /* Title/Title-05 — 24px heading treatment */
  line-height: var(--type-title-05-lh);
  font-weight: 600;
  color: rgba(0, 0, 0, 0.9);
  transition: color 150ms ease;
}
.v4-impact-accordion .lem-accordion__item:hover > .lem-accordion__summary,
.v4-impact-accordion .lem-accordion__summary:focus-visible {
  color: var(--text-link);
}
.v4-impact-accordion .lem-accordion__chevron {
  width: 20px; height: 10px;
  transform: rotate(180deg);                  /* asset points up; flip down when closed */
  transition: transform 200ms ease;
}
.v4-impact-accordion .lem-accordion__item[open] > .lem-accordion__summary > .lem-accordion__chevron {
  transform: rotate(0deg);                    /* point up when expanded */
}
.v4-impact-accordion .lem-accordion__panel {
  padding: 0 0 var(--space-5);
  max-width: none;
  font-size: var(--type-body-lg-size);          /* Body/Body-Large per LEM tokens */
  line-height: 1.55;
}
.v4-impact-accordion .lem-accordion__panel ul {
  margin: 0; padding-left: var(--space-5);
  display: flex; flex-direction: column; gap: var(--space-3);
}
.v4-impact-accordion .lem-accordion__panel li {
  list-style: disc;
}
.v4-impact-accordion .lem-accordion__panel a,
.v4-data-impact .v3-section__lede a {
  color: var(--text-link);          /* LinkedIn blue */
  font-weight: 700;
  text-decoration: none;
}
.v4-impact-accordion .lem-accordion__panel a:hover,
.v4-data-impact .v3-section__lede a:hover {
  color: var(--text-link-hover);
}

/* Small release-date line above each v3-card title. */
.v3-card__date {
  margin: 0 0 var(--space-2);
  font-size: var(--type-body-sm-size);
  font-weight: 600;
  color: var(--text-medium-emphasis);
  letter-spacing: -0.01em;
}

/* Badge overlay for v3-card thumbs — used to flag a freshly published card
   (e.g. "New report" on the January Labor Market Report). The pill sits
   centered on the card's top edge: half above, half on top of the thumb. */
.v3-card { position: relative; overflow: visible; }
.v3-card__thumb { position: relative; }
.v4-card__badge {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%);   /* centered horizontally, half above the top edge */
  z-index: 2;
  padding: 10px 24px;
  background: #0a1929;                /* near-black navy — noticeably darker than the closer banner's --li-blue-80 */
  color: var(--accent-attention);     /* yellow */
  border-radius: var(--radius-full);
  font-size: var(--type-body-sm-size);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1.4;
  white-space: nowrap;
}

/* ─── Topic tag inside a v3-card body (used on Featured Research) ───
   Same colour ramp as the Publications-card categories so the colour code
   is consistent site-wide. Drops into the card body above the date. */
.v4-card__tag {
  display: inline-block;
  align-self: flex-start;
  padding: 4px 12px;
  background: var(--surface-warm);
  color: var(--text-high-emphasis);
  border-radius: var(--radius-sm);
  font-size: var(--type-body-sm-size);
  font-weight: 600;
  letter-spacing: 0.02em;
}
.v4-card__tag--ai          { background: var(--li-blue-30); }
.v4-card__tag--skills      { background: var(--li-blue-10); }
.v4-card__tag--equity      { background: var(--system-error-subtle); }
.v4-card__tag--green       { background: var(--system-success-subtle); }
.v4-card__tag--macro       { background: var(--surface-warm); }
.v4-card__tag--methodology { background: var(--li-gray-10); }
.v4-card__tag--networks    { background: var(--system-warning-subtle); }
.v4-card__tag--remote      { background: var(--li-tan-200); }


/* Working papers — denser, three-column card layout. Cards are taller than
   Publications cards because each carries a full abstract paragraph, not
   just a title. Distinct .v4-paper classes so the two patterns can evolve
   independently. */
.v4-paper-grid {
  list-style: none; padding: 0; margin: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-4);
}
@media (max-width: 720px) {
  .v4-paper-grid { grid-template-columns: 1fr; }
}
.v4-paper {
  display: flex; flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-8);
  background: var(--surface-card);
  border: 1px solid var(--border-gray-light);
  border-radius: var(--radius-md);
  /* overflow:hidden so the negative-margin thumb bleeds cleanly to the
     rounded corners without escaping the card. */
  overflow: hidden;
  transition: border-color .15s ease, box-shadow .15s ease;
}
/* Hero image at the top of a working-paper card. Floats inside the card
   padding with its own rounded corners (radius-md) instead of bleeding to
   the card edges, so each image reads as a discrete illustration. */
.v4-paper__thumb {
  aspect-ratio: 744 / 360;
  margin: 0 0 var(--space-2);
  background: var(--surface-gray-light);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.v4-paper__thumb img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.v4-paper:hover {
  border-color: var(--border-gray-hover);
  box-shadow: var(--elevation-1);
}
.v4-paper__tag {
  display: inline-block; align-self: flex-start;
  padding: 4px 12px;
  background: var(--surface-warm);
  color: var(--text-high-emphasis);
  border-radius: var(--radius-sm);
  font-size: var(--type-body-sm-size);
  font-weight: 600;
  letter-spacing: 0.02em;
}
/* Date metadata — sits between the tag and the title, matches the
   Publications-card date treatment so the two grids feel like one system. */
.v4-paper__date {
  font-size: var(--type-body-md-size);
  font-weight: 500;
  color: var(--text-high-emphasis);
  letter-spacing: 0.02em;
}
.v4-paper__title {
  margin: 0;
  /* LEM Title/Title-06 Bold — matches the Publications card title. */
  font-family: var(--font-display);
  font-size: var(--type-title-06-size);
  line-height: var(--type-title-06-lh);
  font-weight: 700;
  color: var(--text-high-emphasis);
}
.v4-paper__abstract {
  margin: 0;
  font-size: var(--type-body-sm-size);
  line-height: 1.45;
  color: var(--text-medium-emphasis);
  /* Two-line clamp so working-paper cards stay uniform height, matching
     the Publications-card description treatment. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  flex-grow: 1;
}
.v4-paper__link {
  margin-top: var(--space-2);
  font-size: var(--type-body-sm-size);
  font-weight: 600;
  color: var(--text-link);
  text-decoration: none;
}
.v4-paper__link:hover { color: var(--text-link-hover); text-decoration: underline; }


/* ═══════════════════════════════════════════════════════════════════════════
   Top-nav dropdown — used by "Workforce data and research" item to reveal
   sub-pages (Reports, Confidence Index, Publications). Pattern: link stays
   a normal link; an adjacent chevron button toggles the menu.
   ═══════════════════════════════════════════════════════════════════════════ */

.lem-nav__item--has-dropdown {
  position: relative;
  display: flex; align-items: center;
  gap: 0;                                      /* chevron sits flush against the link */
}
/* The trigger link has no href (rollover-only category), so the default
   browser cursor is the I-beam. Force pointer to signal interactivity. */
.lem-nav__item--has-dropdown > .lem-nav__link {
  cursor: pointer;
}
/* Link inside the dropdown item turns blue whenever the item is hovered,
   keyboard-focused, or click-locked open. */
.lem-nav__item--has-dropdown:hover > .lem-nav__link,
.lem-nav__item--has-dropdown:focus-within > .lem-nav__link,
.lem-nav__item--has-dropdown.is-open > .lem-nav__link {
  color: var(--text-link);
}
/* Chevron — decorative span next to the dropdown trigger link. Hover state
   is driven by the parent .lem-nav__item--has-dropdown:hover; the span has
   no click handler and isn't focusable, so the link remains the only
   interactive nav target. */
.lem-nav__chevron {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px;
  margin-left: -2px;
  color: rgba(0, 0, 0, 0.75);                  /* matches the nav text grey */
  transition: color .15s ease;
}
.lem-nav__chevron svg {
  width: 14px; height: 8px;                    /* preserves Figma 11:6 ratio */
  transform: rotate(180deg);                   /* asset points up natively, flip to down when closed */
  transition: transform .2s ease;
}
.lem-nav__item--has-dropdown:hover .lem-nav__chevron,
.lem-nav__item--has-dropdown:focus-within .lem-nav__chevron {
  color: var(--text-link);                     /* blue on hover, in sync with the link */
}
.lem-nav__item--has-dropdown:hover .lem-nav__chevron svg,
.lem-nav__item--has-dropdown:focus-within .lem-nav__chevron svg {
  transform: rotate(0deg);                     /* point up when the menu is visible */
}

/* Dropdown panel — styles match "Menu DD_Single Column" from the
   XBU | Navigation Figma file (iwwU0JZu8VeEeVinApIOHo, node 3773:15309).
   Values are intentionally raw rather than mapped to LEM semantic
   tokens because XBU navigation is its own spec; the closest LEM
   tokens (border-warm-light, text-medium-emphasis) differ slightly. */
.lem-nav__dropdown {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  width: 360px;
  list-style: none; margin: 0;
  padding: 24px;
  background: #ffffff;
  border: 1px solid #eae6df;                      /* warm-gray/warm-gray-30 */
  border-radius: 12px;
  box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.1);    /* Elevation/Broad-Raised */
  display: none;
  flex-direction: column;
  gap: 4px;
  z-index: 100;
  box-sizing: border-box;
}
/* Invisible bridge spanning the 8px gap so moving the cursor from trigger to
   menu doesn't break the hover state. */
.lem-nav__dropdown::before {
  content: "";
  position: absolute;
  top: -8px; left: 0; right: 0;
  height: 8px;
}
/* Show on hover, on keyboard focus anywhere inside the item, or when click
   has explicitly opened (.is-open). */
.lem-nav__item--has-dropdown:hover > .lem-nav__dropdown,
.lem-nav__item--has-dropdown:focus-within > .lem-nav__dropdown,
.lem-nav__item--has-dropdown.is-open > .lem-nav__dropdown {
  display: flex;
}
.lem-nav__dropdown li {
  margin: 0;
  width: 100%;
}
.lem-nav__dropdown a {
  display: flex; flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  width: 100%;
  padding: 12px;
  border-radius: 8px;
  font-family: 'SF Pro Text', -apple-system, BlinkMacSystemFont, 'Source Sans 3', sans-serif;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.28px;
  color: rgba(0, 0, 0, 0.75);                     /* Text/medium-emphasis (XBU) */
  text-decoration: none;
  box-sizing: border-box;
  transition: background .12s ease, color .12s ease;
}
.lem-nav__dropdown-desc {
  font-size: 12px;
  font-weight: 400;
  line-height: 1.35;
  letter-spacing: -0.1px;
  color: rgba(0, 0, 0, 0.55);
}
.lem-nav__dropdown a:hover {
  background: var(--surface-hover);
  color: rgba(0, 0, 0, 0.9);
}
.lem-nav__dropdown a:focus-visible {
  outline: 2px solid var(--border-blue-focus);
  outline-offset: -2px;
}
.lem-nav__dropdown a[aria-current="page"] {
  background: var(--surface-blue-mid);
  color: var(--text-link);
}

/* ══════════════════════���═════════════════════════════════════════════════
   RESPONSIVE — phone + tablet adjustments. Every rule below is additive
   (inside @media (max-width: N)) so desktop layouts are untouched.
   ──────────────────────────────────────────────────────────────────────── */

/* ─── Mobile navigation menu (≤1023px) ───
   nav.js toggles .is-mobile-open on the .lem-nav when the hamburger is
   tapped. The primary list defaults to display:none in base.css; we reveal
   it as a stacked panel below the header when open. */
@media (max-width: 1023px) {
  .lem-nav.is-mobile-open .lem-nav__primary,
  .v3-nav.is-mobile-open .lem-nav__primary {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    position: absolute;
    top: 100%;
    left: 0; right: 0;
    /* Match the nav's navy so the expanded panel reads as a continuation
       of the header, not a separate light dropdown. */
    background: var(--li-blue-80, #001a3c);
    color: #ffffff;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    padding: var(--space-3) clamp(16px, 4vw, 96px) var(--space-5);
    box-shadow: var(--elevation-2);
    z-index: 50;
  }
  .lem-nav.is-mobile-open .lem-nav__primary > li,
  .v3-nav.is-mobile-open .lem-nav__primary > li {
    border-bottom: 1px solid rgba(255, 255, 255, 0.10);
  }
  /* All link/text inside the expanded panel inherits white on navy. */
  .lem-nav.is-mobile-open .lem-nav__primary a,
  .v3-nav.is-mobile-open .lem-nav__primary a {
    color: #ffffff;
  }
  .lem-nav.is-mobile-open .lem-nav__primary .lem-nav__dropdown-desc,
  .v3-nav.is-mobile-open .lem-nav__primary .lem-nav__dropdown-desc {
    color: rgba(255, 255, 255, 0.72);
  }
  .lem-nav.is-mobile-open .lem-nav__primary .lem-nav__chevron,
  .v3-nav.is-mobile-open .lem-nav__primary .lem-nav__chevron {
    color: #ffffff;
  }
  /* On hover the existing .lem-nav__dropdown a:hover rule flips the
     dropdown item to a light gray background with dark text, but our
     mobile descriptor span color (white-translucent) outranks the
     parent <a>'s hover color and stays unreadable on light gray.
     Force the title + descriptor to dark when the item is hovered
     or keyboard-focused. */
  .lem-nav.is-mobile-open .lem-nav__primary .lem-nav__dropdown a:hover,
  .lem-nav.is-mobile-open .lem-nav__primary .lem-nav__dropdown a:focus-visible,
  .v3-nav.is-mobile-open .lem-nav__primary .lem-nav__dropdown a:hover,
  .v3-nav.is-mobile-open .lem-nav__primary .lem-nav__dropdown a:focus-visible {
    color: rgba(0, 0, 0, 0.9);
  }
  .lem-nav.is-mobile-open .lem-nav__primary .lem-nav__dropdown a:hover .lem-nav__dropdown-title,
  .lem-nav.is-mobile-open .lem-nav__primary .lem-nav__dropdown a:focus-visible .lem-nav__dropdown-title,
  .lem-nav.is-mobile-open .lem-nav__primary .lem-nav__dropdown a:hover .lem-nav__dropdown-desc,
  .lem-nav.is-mobile-open .lem-nav__primary .lem-nav__dropdown a:focus-visible .lem-nav__dropdown-desc,
  .v3-nav.is-mobile-open .lem-nav__primary .lem-nav__dropdown a:hover .lem-nav__dropdown-title,
  .v3-nav.is-mobile-open .lem-nav__primary .lem-nav__dropdown a:focus-visible .lem-nav__dropdown-title,
  .v3-nav.is-mobile-open .lem-nav__primary .lem-nav__dropdown a:hover .lem-nav__dropdown-desc,
  .v3-nav.is-mobile-open .lem-nav__primary .lem-nav__dropdown a:focus-visible .lem-nav__dropdown-desc {
    color: rgba(0, 0, 0, 0.78);
  }
  .lem-nav.is-mobile-open .lem-nav__primary > li:last-child,
  .v3-nav.is-mobile-open .lem-nav__primary > li:last-child {
    border-bottom: 0;
  }
  .lem-nav.is-mobile-open .lem-nav__primary .lem-nav__link,
  .v3-nav.is-mobile-open .lem-nav__primary .lem-nav__link {
    display: block;
    padding: var(--space-4) 0;
  }
  /* Dropdown inside the mobile menu — drop the floating panel chrome and
     render the sub-items inline beneath the parent link. */
  .lem-nav.is-mobile-open .lem-nav__dropdown,
  .v3-nav.is-mobile-open .lem-nav__dropdown {
    position: static;
    width: auto;
    padding: 0 0 var(--space-3) var(--space-5);
    background: transparent;
    border: 0;
    box-shadow: none;
    display: none;
  }
  .lem-nav.is-mobile-open .lem-nav__item--has-dropdown.is-open > .lem-nav__dropdown,
  .v3-nav.is-mobile-open .lem-nav__item--has-dropdown.is-open > .lem-nav__dropdown {
    display: block;
  }
  /* Cap the desktop dropdown so it never overflows narrow tablet viewports
     even when the hover state fires. */
  .lem-nav__dropdown {
    max-width: calc(100vw - 16px);
  }
}

/* Homepage 'Explore all featured research' CTA — sits below the
   cardstack carousel. The pager dots are absolutely positioned at
   bottom: -36px inside the cardstack, so the default v4-partners__cta
   margin-top (space-12 == 48px) crowds them. Override here to give
   the dots room to breathe before the CTA. */
.v4-reports .v4-partners__cta {
  margin-top: clamp(72px, 9vw, 120px);
}

/* ─── Filter chip row — stack label + chips below 480px ─── */
@media (max-width: 480px) {
  .v4-filter__row {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-2);
  }
}

/* ─── Blog archive: header + search stack vertically on phone ─── */
@media (max-width: 720px) {
  .v4-archive-head {
    flex-direction: column;
    align-items: stretch;
  }
  .v4-blog-search {
    flex: 1 1 100%;
    min-width: 0;
    max-width: none;
  }
}

/* ─── Pagination — tighter on phones so 10 buttons don't span the page ─── */
@media (max-width: 480px) {
  .v4-pagination { gap: var(--space-1); }
  .v4-pagination__btn {
    min-width: 32px;
    padding: 6px 10px;
  }
  .v4-pagination__btn--nav { padding: 6px 12px; }
}

/* ─── Newsletter / closer block — stack copy + form below 900px ─── */
@media (max-width: 900px) {
  .v3-closer__inner {
    grid-template-columns: 1fr !important;
    gap: var(--space-6);
  }
}

/* ─── Footer — stack brand + links column on phone ─── */
@media (max-width: 640px) {
  .v4-footer__inner {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-5);
  }
  .v4-footer__links {
    gap: var(--space-3) var(--space-5);
  }
}

/* ─── Workforce-data wayfinder cards — collapse 3-col earlier ─── */
@media (max-width: 900px) {
  .v4-quick-cards { grid-template-columns: repeat(2, 1fr); }
}

/* ─── Research-institute jump-cards — collapse 3-col earlier ─── */
@media (max-width: 720px) {
  .v4-program-jump-grid { grid-template-columns: 1fr; }
}

/* ─── Card padding — trim on phones so 24px×2 doesn't eat the column ─── */
@media (max-width: 480px) {
  .v4-pub,
  .v4-paper,
  .v4-report { padding: var(--space-5); }
}

/* ─── Accordion body text — body-md (not body-lg) on phone for readability ─── */
@media (max-width: 480px) {
  .v4-impact-accordion .lem-accordion__panel {
    font-size: var(--type-body-md-size);
    overflow-wrap: break-word;
    word-wrap: break-word;
  }
}

/* ─── Pullquote — smaller avatar so the body has more room on phones ─── */
@media (max-width: 480px) {
  .v3-pullquote__avatar-wrap {
    width: 120px; height: 120px;
  }
  /* The quote defaults to Title/03 (36px), which reads oversized on a phone.
     Step it down toward Title/05 so it sits comfortably in the column. */
  .v3-pullquote__text {
    font-size: clamp(20px, 5.6vw, 24px);
  }
}

/* ─── Partner logo grid — bring a 3-col tier between 820 and 1024 so cards
   don't stretch on landscape tablets. Scoped to non-even grids so the
   partnership-program's 4-col --even override wins. ─── */
@media (min-width: 820px) and (max-width: 1023px) {
  .v4-partners__grid:not(.v4-partners__grid--even) { grid-template-columns: repeat(3, 1fr); }
}

/* ─── Hero CTA row — wrap so the down-arrow button doesn't push the page ─── */
.v3-hero__ctas { flex-wrap: wrap; gap: var(--space-3); }
/* Economic Graph v4 — V1 content with V3 visual treatment.
   The v3 stylesheet is loaded by index.html via a <link>. This file only
   adds the V1-specific sections that v3 doesn't already cover (stats,
   video overview, partner logo grid, V1 footer). */

/* ═══ HERO — base dots blue-60, blink color yellow (overrides v3's defaults) ═══ */
.v3-hero__bg svg path {
  fill: var(--li-blue-60);
  transform-box: fill-box;
  transform-origin: center;
  transition: fill 1600ms ease-in-out, transform 800ms ease-out;
}
.v3-hero__bg svg path.eg-dot-blink {
  fill: var(--accent-attention);
  transform: scale(1.8);
}
/* Shrink the hero map and keep it anchored to the right edge.
   v3's default is 60% width; v4 trims to 40% so the map reads as a
   right-side accent rather than a full-bleed background. */
.v3-hero__bg svg { width: 60%; }


/* Hero — full v3 height, blue-80 to match the newsletter section. */
.v3-hero {
  background-color: var(--li-blue-80);
  padding-block: clamp(72px, 9vw, 128px);
}
.v3-hero:not(.v3-hero--plain) {
  min-height: clamp(680px, 88vh, 900px);
}
.v3-hero--plain {
  min-height: clamp(260px, 32vh, 360px);
  padding-block: clamp(40px, 5vw, 72px);
}

/* ═══ ANNOUNCEMENT — yellow background with black text ═══ */
.v4-announce {
  background: var(--accent-attention);
  color: var(--text-high-emphasis);
}
.v4-announce .lem-announce__link {
  color: var(--text-high-emphasis);
  text-decoration: underline;
}
.v4-announce .lem-announce__link:hover { color: var(--text-medium-emphasis); }

/* ═══ TICKER — horizontal stock-style marquee inside the announcement banner.
       JS (ticker.js) clones the first .v4-ticker__item enough times to fill
       the viewport, then duplicates the whole group so a translateX(0 → -50%)
       animation loops seamlessly. ═══ */
.v4-ticker { padding: 0; overflow: hidden; }
.v4-ticker__track {
  display: flex;
  align-items: center;
  width: max-content;
  gap: clamp(32px, 5vw, 80px);
  padding-block: var(--space-3);
  animation: v4-ticker-scroll 40s linear infinite;
  will-change: transform;
}
.v4-ticker:hover .v4-ticker__track { animation-play-state: paused; }
.v4-ticker__item {
  flex-shrink: 0;
  white-space: nowrap;
  font-family: var(--font-display);
  font-size: var(--type-body-sm-size);
  line-height: 1.25;
  font-weight: 700;
}
.v4-ticker__item .lem-announce__link { margin-left: 0.5em; }
@keyframes v4-ticker-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .v4-ticker__track { animation: none; }
}

/* ═══ REPORTS — mirror the hero's blue-80 + world-map + yellow blink bg ═══ */
.v4-reports {
  background: var(--li-blue-80);
  color: var(--text-inverse-high-emphasis);
  position: relative;
  overflow: hidden;
}
.v4-reports > .v3-section__inner { position: relative; z-index: 1; }
.v4-reports__bg {
  position: absolute;
  inset: -40% 0;
  display: flex; align-items: center; justify-content: flex-end;
  will-change: transform;
  pointer-events: none;
  z-index: 0;
}
.v4-reports__bg svg { width: 60%; height: auto; display: block; }
.v4-reports__bg svg path {
  fill: var(--li-blue-60);
}
/* No blink animation in the reports section — map stays static. */
/* Header copy on the dark blue panel uses inverse text. */
.v4-reports .v3-eyebrow,
.v4-reports .v3-section__title { color: var(--text-inverse-high-emphasis); }
.v4-reports .v3-section__lede  { color: var(--text-inverse-medium-emphasis); }

/* ═══ NAV — "Economic Graph" as live text instead of a logo image, and
       bump primary nav links from weight 400 → 600. ═══ */
.v3-nav__logo-eg {
  height: auto;
  font-family: var(--font-display);
  font-size: 16px;
  line-height: 1;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--text-high-emphasis);
  white-space: nowrap;
}
.v3-nav__primary .lem-nav__link { font-weight: 600; }

/* ═══ Hamburger menu button — the .lem-button--ghost base color
   resolves to dark text on light surfaces; on the V1.2 navy nav the
   icon all but disappears. Force the button + its SVG to white. */
.lem-nav__menu,
.lem-nav__menu:hover,
.lem-nav__menu:focus-visible {
  color: #ffffff;
}
.lem-nav__menu .lem-icon,
.lem-nav__menu svg {
  color: #ffffff;
  stroke: #ffffff;
}
.lem-nav__menu:hover {
  background: rgba(255, 255, 255, 0.10);
}
.lem-nav__menu:focus-visible {
  outline: 2px solid var(--accent-attention, #f5c518);
  outline-offset: 2px;
}

/* ═══ Skip link — visible only on keyboard focus. WCAG 2.4.1 (Bypass
   Blocks). Pairs with the <main id="main"> wrapper added to every page
   so Tab + Enter jumps over the nav + ticker straight into content. */
.lem-skip {
  position: absolute;
  top: -100px;
  left: var(--space-3, 12px);
  z-index: 1000;
  background: #001a3c;
  color: var(--text-inverse-high-emphasis);
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--type-body-md-size);
  padding: 10px 16px;
  border-radius: var(--radius-md, 8px);
  text-decoration: none;
  transition: top 150ms ease;
}
.lem-skip:focus,
.lem-skip:focus-visible {
  top: var(--space-3, 12px);
  outline: 2px solid var(--accent-attention, #f5c518);
  outline-offset: 2px;
}
/* The <main> wrapper needs to be focusable so the skip target receives
   focus, but should never show its own outline on programmatic focus. */
main#main:focus { outline: none; }

/* ═══ NAV — sticky, dark blue-black across all scroll positions. Blends
       into the hero at the top of the page and stays dark as the user
       scrolls. ═══ */
.lem-nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background-color: #001a3c;
  border-bottom: 0;
}
.lem-nav .v3-nav__logo-eg { color: var(--text-inverse-high-emphasis); }
.lem-nav .v3-nav__logo-linkedin { filter: brightness(0) invert(1); }
.lem-nav .v3-nav__logo-divider { background: rgba(255, 255, 255, 0.3); }
.lem-nav .lem-nav__link { color: var(--text-inverse-medium-emphasis); }
.lem-nav .lem-nav__link:hover { color: var(--text-inverse-high-emphasis); background: transparent; }
.lem-nav .v4-follow-pill {
  border: 1px solid var(--border-gray-default);
  color: var(--text-inverse-high-emphasis);
  background: transparent;
}
.lem-nav .v4-follow-pill:hover {
  background: #ffffff;
  border-color: #ffffff;
}

/* ═══ NAV — slightly different follow pill on light surface ═══ */
.v4-follow-pill {
  border: 1px solid var(--border-gray-default);
  color: var(--text-inverse-high-emphasis);
  background: transparent;
  /* Override lem-button--sm's 6px 16px so the pill has roomier internal
     padding and reads as a wider chip in the nav. */
  padding: 10px 24px;
  min-height: 40px;
  gap: var(--space-2);
}
.v4-follow-pill:hover {
  background: #ffffff;
  border-color: #ffffff;
}

/* ═══ HERO overrides — V1 has no CTAs and uses a giant single-word headline,
       so widen the title and trim the bottom margin where the CTAs would be. */
.v4-hero__inner .v3-hero__eyebrow {
  font-family: var(--font-display);
  font-size: var(--type-title-06-size);
  line-height: var(--type-title-06-lh);
  font-weight: 700;
  color: var(--text-inverse-high-emphasis);
  margin: 0;
}
.v4-hero__title {
  font-size: clamp(80px, 12vw, 180px);
  line-height: 1;
  letter-spacing: -0.04em;
  max-width: none;
  margin-bottom: var(--space-5);
}
.v4-hero__inner .v3-hero__lede {
  font-family: var(--font-display);
  font-size: var(--type-title-05-size);
  line-height: var(--type-title-05-lh);
  font-weight: 700;
  color: var(--accent-attention);
  margin-bottom: 0;
  max-width: none;
}
.v4-hero__ctas { margin-top: clamp(40px, 4vw, 56px); }

/* ═══ JUMP BUTTON — white pill with a blue-70 circle around a yellow arrow.
       Used for the hero's "Explore reports" anchor jump. */
.v4-jump-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  padding: 8px 8px 8px 20px;
  background: #fff;
  color: var(--text-high-emphasis);
  border: 1px solid var(--text-high-emphasis);
  border-radius: var(--radius-full, 999px);
  text-decoration: none;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--type-body-md-size);
  line-height: 1;
  /* Unified CTA hover: every .v4-jump-btn enlarges symmetrically from its
     center. Bouncy overshoot easing keeps the small "boing" feel. */
  transform-origin: center center;
  transition: background-color 200ms ease,
              transform 360ms cubic-bezier(0.34, 1.56, 0.64, 1),
              box-shadow 360ms ease;
}
.v4-jump-btn:hover {
  background: #f3f3f3;
  color: var(--text-high-emphasis);
  transform: scale(1.06);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.22);
}
.v4-jump-btn:focus-visible {
  outline: 2px solid var(--accent-attention);
  outline-offset: 3px;
}
.v4-jump-btn__icon {
  width: 32px; height: 32px;
  border-radius: var(--radius-full, 999px);
  background: #001a3c;
  color: var(--accent-attention);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: transform 360ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
.v4-jump-btn:hover .v4-jump-btn__icon {
  transform: scale(1.12);
}
.v4-jump-btn__icon svg {
  width: 16px; height: 16px;
  stroke: currentColor;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
@media (prefers-reduced-motion: reduce) {
  .v4-jump-btn { transition: none; }
  .v4-jump-btn:hover { transform: none; }
}

/* ═══ STATS — 4-up grid on a default surface, large display numbers in LI blue.
       Echoes V1's eg-stats treatment but spaced and typed like V3 section heads. */
.v4-stats { padding-block: clamp(56px, 7vw, 96px); }
.v4-stats__grid {
  list-style: none; padding: 0; margin: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-8);
}
@media (min-width: 640px)  { .v4-stats__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .v4-stats__grid { grid-template-columns: repeat(4, 1fr); gap: var(--space-12); } }
.v4-stat {
  display: flex; flex-direction: column; gap: var(--space-2);
  padding-block: var(--space-3);
}
.v4-stat__icon {
  display: block;
  width: 96px; height: 96px;
  margin-bottom: var(--space-3);
}
.v4-stat__value {
  font-family: var(--font-display);
  font-size: clamp(48px, 5.5vw, 72px);
  line-height: 1;
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--li-blue-80);
}
.v4-stat__label {
  font-size: var(--type-body-md-size);
  font-weight: 600;
  color: var(--text-medium-emphasis);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* ═══ OVERVIEW — video thumb + text, two-up on desktop. The YouTube
       iframe fills the 634:358 rounded frame and plays an autoplaying,
       muted loop of the opening 15s as an ambient preview. ═══ */
.v4-overview__grid {
  display: grid; gap: var(--space-10);
  grid-template-columns: 1fr;
  align-items: center;
}
@media (min-width: 1024px) {
  /* Give the video roughly 2× the column width of the text block so it
     reads as the dominant element of the section. */
  .v4-overview__grid { grid-template-columns: 2fr 1fr; gap: var(--space-12); }
}
.v4-overview__video {
  display: block;
  aspect-ratio: 634 / 358;
  border-radius: var(--radius-xl);
  overflow: hidden;
  position: relative;
  background: #000;
}
.v4-overview__iframe {
  width: 100%; height: 100%;
  display: block;
  border: 0;
}
/* Play/pause toggle covers the iframe so clicking anywhere on the video
   plays or pauses. The button fades in on hover with a darkening tint
   over the video; the SVG inside it is the actual play/pause icon. */
.v4-overview__play-toggle {
  position: absolute;
  inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
  opacity: 0;
  transition: opacity 200ms ease, background-color 200ms ease;
}
.v4-overview__video:hover .v4-overview__play-toggle,
.v4-overview__play-toggle:focus-visible {
  opacity: 1;
  background: rgba(0, 0, 0, 0.25);
}
.v4-overview__play-toggle svg {
  width: 72px; height: 72px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.95);
  padding: 18px;
  color: var(--text-high-emphasis);
  box-shadow: var(--elevation-2);
  transition: transform 200ms ease;
  fill: currentColor;
}
.v4-overview__play-toggle:hover svg { transform: scale(1.05); }

/* Swap which icon (play vs pause) is visible based on the toggle's
   data-playing attribute. */
.v4-overview__play-toggle[data-playing="true"]  .v4-overview__icon-play  { display: none; }
.v4-overview__play-toggle[data-playing="false"] .v4-overview__icon-pause { display: none; }

/* Mute / unmute toggle — small chip in the bottom-right of the video,
   layered above .v4-overview__play-toggle so it intercepts its own clicks
   instead of triggering play/pause. */
.v4-overview__sound-toggle {
  position: absolute;
  bottom: 14px; right: 14px;
  z-index: 2;
  width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  border: 0;
  border-radius: 50%;
  padding: 0;
  background: rgba(0, 0, 0, 0.5);
  color: #fff;
  cursor: pointer;
  opacity: 0;
  transition: opacity 200ms ease, background-color 180ms ease;
}
.v4-overview__video:hover .v4-overview__sound-toggle,
.v4-overview__sound-toggle:focus-visible {
  opacity: 1;
}
.v4-overview__sound-toggle:hover { background: rgba(0, 0, 0, 0.7); }
.v4-overview__sound-toggle svg { width: 22px; height: 22px; fill: currentColor; }
.v4-overview__sound-toggle[data-muted="false"] .v4-overview__icon-sound-off { display: none; }
.v4-overview__sound-toggle[data-muted="true"]  .v4-overview__icon-sound-on  { display: none; }

.v4-overview__text .v3-eyebrow { margin-bottom: var(--space-3); }
.v4-overview__text .v3-section__title { margin-bottom: var(--space-4); }

/* ═══ PARTNERS — 9 logos in 2 rows (5 + 4 centered) with v4's hover-flip
       card design: logos render at full size by default, and on hover
       the card flips to li-blue-70 with the partner name (title-05 bold)
       above a short description (body-lg). ═══ */
.v4-partners__grid:not(.v4-partners__grid--even) {
  display: grid;
  /* Mobile baseline: 2-column grid so the logos read as a tidy 5x2
     stack instead of a long single-column scroll. Default
     justify-items: stretch lets each card grow to fill its column. */
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-4);
}
@media (min-width: 640px)  {
  /* Scoped via :not so the partnership-program grid (which uses --even)
     can fall through to its own rule defined earlier in the file. */
  .v4-partners__grid:not(.v4-partners__grid--even) { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  /* 3 cards per row — 9 partners lays out as a clean 3 x 3 grid with
     larger tiles than the prior 5 + 4 centered arrangement. Scoped via
     :not so the partnership-program grid (which has 11 partners and
     uses the --even modifier) keeps its own column rule. */
  .v4-partners__grid:not(.v4-partners__grid--even) {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-5);
  }
  .v4-partners__grid:not(.v4-partners__grid--even) > .v4-partner {
    grid-column: auto;
  }
}
.v4-partner {
  position: relative;
  background: var(--surface-card);
  border: 1px solid var(--border-gray-light);
  border-radius: var(--radius-lg);
  /* Taller cards (was 2:1) so each tile reads bigger around the
     unchanged 120px-tall logo. */
  aspect-ratio: 8 / 7;
  display: flex; align-items: center; justify-content: center;
  padding: var(--space-6) var(--space-6);
  overflow: hidden;
  transition: background-color 200ms ease, border-color 200ms ease,
              box-shadow 200ms ease, transform 120ms;
  transform-origin: center;
}
.v4-partner__logo {
  width: auto; height: 56px; max-width: 100%;
  object-fit: contain; display: block;
  transition: opacity 200ms ease;
}
/* Caption (name + desc) sits on top of the logo, hidden until hover. */
.v4-partner__caption {
  position: absolute;
  inset: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-5);
  text-align: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 200ms ease;
}
.v4-partner__name {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--type-title-05-size);
  line-height: var(--type-title-05-lh);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--text-inverse-high-emphasis);
}
.v4-partner__desc {
  margin: 0;
  font-size: var(--type-body-lg-size);
  line-height: 1.45;
  font-weight: 500;
  color: var(--text-inverse-medium-emphasis);
}
.v4-partner:hover {
  background: var(--li-blue-70);
  border-color: var(--li-blue-70);
  box-shadow: var(--elevation-3);
  transform: scale(1.03);
}
.v4-partner:hover .v4-partner__logo { opacity: 0; }
.v4-partner:hover .v4-partner__caption { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .v4-partner,
  .v4-partner__logo,
  .v4-partner__caption { transition: none; }
  .v4-partner:hover { transform: none; }
}

/* ═══ NEWSLETTER closer — V1 two-button actions, surface-dark background ═══ */
#newsletter.v3-section--blue-80 { background: var(--surface-dark); }
.v4-closer__actions {
  display: flex; flex-wrap: wrap; gap: var(--space-3);
}

/* Program icons for the "Four programs, one mission" section. The cards
   have a white surface, so the LinkedIn-blue SVGs render at native
   color — no filter needed. */
.v5-program__icon {
  display: block;
  width: 56px; height: 56px;
  margin-bottom: var(--space-4);
}
/* Bigger program-lead avatars inside the Four Programs cards (v3's
   default is 40px). */
.v3-section--blue-50 .v3-program__avatar { width: 64px; height: 64px; }

/* Full-white section lede inside the Four Programs section. v3's default
   on blue-50 is inverse-medium-emphasis; we want it full white. */
.v3-section--blue-50 .v3-section__lede { color: var(--text-inverse-high-emphasis); }

/* Bigger "Program lead: <name>" text inside the Four Programs cards
   (v3's default is body-sm — too small now that the cards carry more
   weight). */
.v3-section--blue-50 .v3-program__lead { font-size: var(--type-body-md-size); }

/* ═══ V5 FOLLOW CLOSER — its own section on the blue-black bg that the
       hero uses, so the page bookends with matching dark color. Inner is
       a two-column grid: copy on the left, CTAs on the right. */
.v5-follow-closer {
  background: #001a3c;
  color: var(--text-inverse-high-emphasis);
}
.v5-follow-closer__inner {
  display: grid;
  gap: clamp(24px, 3vw, 48px);
  grid-template-columns: 1fr;
  align-items: center;
}
@media (min-width: 720px) {
  .v5-follow-closer__inner { grid-template-columns: 1fr auto; }
}
.v5-follow-closer__title {
  font-family: var(--font-display);
  font-size: clamp(28px, 3vw, 40px);
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--text-inverse-high-emphasis);
  margin: 0 0 var(--space-3);
}
.v5-follow-closer__lede {
  font-size: var(--type-body-lg-size);
  line-height: 1.5;
  color: var(--text-inverse-high-emphasis);
  margin: 0;
  max-width: 56ch;
}

/* ═══ SUB-PAGE prose — long-form copy block for sub-page bodies ═══ */
.v4-prose {
  max-width: 64ch;
  font-size: var(--type-body-lg-size);
  line-height: 1.6;
  color: var(--text-high-emphasis);
}
.v4-prose p { margin: 0; }
.v4-prose p + p { margin-top: var(--space-5); }

/* Blog post list — single column of post links ═══ */
.v4-postlist { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--border-gray-light); }
.v4-postlist__item {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--space-5);
  align-items: baseline;
  padding: var(--space-5) 0;
  border-bottom: 1px solid var(--border-gray-light);
}
.v4-postlist__title {
  font-family: var(--font-display);
  font-size: var(--type-h5-size); line-height: 1.25;
  font-weight: 700;
  color: var(--text-high-emphasis);
  margin: 0;
}
.v4-postlist__title a { color: inherit; text-decoration: none; }
.v4-postlist__title a:hover { color: var(--interactive-primary); }
.v4-postlist__date {
  font-size: var(--type-body-sm-size);
  color: var(--text-medium-emphasis);
  white-space: nowrap;
}

/* ═══ FOOTER — V1's single-row footer, white surface / black text ═══ */
.v4-footer {
  background: var(--surface-default);
  border-top: 1px solid var(--border-gray-light);
}
.v4-footer__inner {
  max-width: var(--container-max); margin-inline: auto;
  padding: var(--space-8) clamp(16px, 4vw, 96px);
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center;
  gap: var(--space-6);
}
.v4-footer__brand {
  display: flex; align-items: center; gap: var(--space-4);
  color: var(--text-high-emphasis);
  font-size: var(--type-body-sm-size);
}
.v4-footer__brand p { margin: 0; }
.v4-footer__logo { width: 22px; height: 22px; color: var(--interactive-primary); }
.v4-footer__links {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-wrap: wrap; gap: var(--space-6);
  font-size: var(--type-body-sm-size);
}
.v4-footer__links a { color: var(--text-high-emphasis); text-decoration: none; }
.v4-footer__links a:hover { color: var(--text-high-emphasis); text-decoration: none; }

/* ═══════════════════════════════════════════════════════════════════════════
   V5 — Data-first concept overrides
   The hero, stats grid, and "Labor Market Report" teaser are all v5-specific.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ═══ ANNOUNCEMENT — yellow rounded pill floating on the blue hero.
       - .v5-announce-bg paints the same dark blue as .v5-hero so the strip
         between the nav and the hero content visually merges with the hero
         (no visible seam).
       - .v5-announce-wrap mirrors .lem-nav__inner's width/padding so the
         pill's left/right edges line up with the LinkedIn logo and the
         Follow button.
       - .v4-announce (yellow ticker) gets a generous border-radius. ═══ */
.v5-announce-bg {
  background: var(--li-blue-80);
  padding-block: clamp(12px, 1.5vw, 20px);
}
.v5-announce-wrap {
  max-width: var(--container-wide);
  margin-inline: auto;
  padding: 0 clamp(16px, 4vw, 48px);
}
.v4-announce {
  border-radius: var(--radius-2xl);
  overflow: hidden;
}

/* ═══ HERO — blue-black full-bleed background. Headline content sits
       directly on the bg; the 4 stats sit in an outlined rounded rectangle
       below. Horizontal padding on the inner mirrors .v3-section__inner
       so the headline lines up with the dashboard text below. */
.v5-hero {
  background-color: #001a3c;
  color: var(--text-inverse-high-emphasis);
  padding-top: clamp(36px, 4.5vw, 64px);
  padding-bottom: clamp(56px, 7vw, 96px);
  position: relative;
  overflow: hidden;
}
.v5-hero__inner {
  max-width: var(--container-max); margin-inline: auto;
  padding-inline: clamp(16px, 4vw, 96px);
  display: flex; flex-direction: column;
  gap: clamp(48px, 6vw, 96px);
  position: relative;
  z-index: 1;
}

/* Decorative chart-line background — two jagged polylines sweeping from
   bottom-left to upper-right. Yellow and light-blue strokes echo the
   palette of the Labor Report chart. Lines draw in via stroke-dashoffset
   on page load (then settle). Full-width across the hero. */
.v5-hero__head { max-width: 960px; }
.v5-hero__chart-bg {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  width: 100%;
  /* Anchor the chart to the hero floor as a band whose ratio matches the
     1200×600 viewBox (2:1). Because the box ratio equals the viewBox, the
     lines render undistorted AND full-width with no cropping at every
     screen size — so it never squeezes (the old preserveAspectRatio:none
     problem) or fragments on tall/portrait screens (the slice problem).
     The lines stay in the lower band, clear of the headline + subhead. */
  aspect-ratio: 2 / 1;
  height: auto;
  max-height: 100%;
  z-index: 0;
  pointer-events: none;
}
.v5-hero__chart-line {
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  /* pathLength="100" on the <path> normalizes dash math regardless of
     how the SVG is stretched. dasharray="100 100" puts a single dash
     across the whole path with a single full-path gap after it, so the
     pattern never repeats inside the visible path. Dashoffset animates
     100 → 0 on load to reveal left → right. */
  stroke-dasharray: 100 100;
  stroke-dashoffset: 100;
  animation: v5-hero-line-draw 2800ms cubic-bezier(0.22, 0.65, 0.25, 1) 400ms forwards;
}
/* Tablet + phone: the chart scales down enough that a scaling stroke turns
   light/hairline. Switch to non-scaling-stroke for these sizes (desktop
   ≥1024 keeps its proportional scaling stroke) so the weight stays a
   constant, readable pixel value. */
@media (max-width: 1023px) {
  .v5-hero__chart-line {
    vector-effect: non-scaling-stroke;
    stroke-width: 3.5;
  }
}
/* Phones: tone the lines down slightly and lift them up off the very
   bottom edge so they read within the hero instead of hugging the floor. */
@media (max-width: 720px) {
  .v5-hero__chart-line { opacity: 0.85; }
  .v5-hero__chart-bg { bottom: clamp(56px, 16vw, 120px); }
}
.v5-hero__chart-line--yellow { stroke: var(--accent-attention); }
.v5-hero__chart-line--blue {
  stroke: var(--li-blue-50);
  animation-delay: 800ms;
}
@keyframes v5-hero-line-draw { to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) {
  .v5-hero__chart-line {
    stroke-dasharray: none;
    stroke-dashoffset: 0;
    animation: none;
  }
}
.v5-hero__head {
  /* No card treatment — headline content sits directly on the dark hero. */
  max-width: 960px;
}
.v5-hero__head { max-width: 960px; }
.v5-hero__eyebrow {
  font-family: var(--font-display);
  font-size: var(--type-body-lg-size);
  line-height: 1.25;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--li-blue-40);
  margin: 0 0 var(--space-8);
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
}
/* Normalize every other eyebrow on this page to 16px / body-md too. */
/* On mobile the title clamps down to 32px, so the fixed 18px uppercase eyebrow
   started to feel oversized next to it — scale it down and tighten tracking so
   it stays clearly subordinate to the headline. */
@media (max-width: 640px) {
  .v5-hero__eyebrow {
    font-size: var(--type-body-sm-size);
    letter-spacing: 0.08em;
  }
}
.v3-eyebrow { font-size: var(--type-body-md-size); }
.v5-hero__eyebrow-icon {
  width: 40px; height: 40px;
  display: block;
  flex-shrink: 0;
}
.v5-hero__title {
  font-family: var(--font-display);
  font-size: clamp(32px, 5.5vw, 64px);
  line-height: 1.15;
  letter-spacing: -0.02em;
  font-weight: 700;
  margin: 0 0 var(--space-5);
}
.v5-hero__lede {
  font-size: var(--type-body-lg-size);
  line-height: 1.5;
  color: #ffffff;
  margin: 0;
  max-width: 60ch;
}
.v5-hero__lede strong {
  color: #ffffff;
  font-weight: 400;
}

/* Counter card — rounded rectangle filled with the hero's blue-black so
   the chart-line graphic behind the hero is blocked here (chart visible
   beside/above the stats only). */
.v5-hero__counters {
  list-style: none; margin: 0;
  margin-top: -20px;
  background-color: #001a3c;
  border: 3px solid var(--li-blue-70);
  border-radius: clamp(20px, 2.5vw, 40px);
  padding: clamp(18px, 2.2vw, 36px) clamp(40px, 5vw, 80px);
  display: grid; gap: var(--space-6);
  grid-template-columns: 1fr;
  position: relative;
}
/* 640–767px: still 2 columns, but cap + center the card so the stats
   don't stretch across the full width with big gaps. */
@media (min-width: 640px) and (max-width: 767px) {
  .v5-hero__counters { grid-template-columns: repeat(2, 1fr); max-width: 520px; margin-inline: auto; }
}
/* ≥768px (tablet up): all four stats in one tidy row. */
@media (min-width: 768px) { .v5-hero__counters { grid-template-columns: repeat(4, 1fr); gap: var(--space-8); } }
/* Mobile: 2x2 grid for the four counters so the card reads as a
   compact stat panel instead of a single long stack. Cap the card
   width, center it under the headline, tighten padding + counter
   number size so two columns fit comfortably on a 320px viewport. */
@media (max-width: 639px) {
  .v5-hero__counters {
    grid-template-columns: repeat(2, 1fr);
    column-gap: var(--space-5);
    row-gap: var(--space-4);
    max-width: 380px;
    margin-inline: auto;
    padding: var(--space-5) var(--space-5);
    border-radius: 20px;
    border-width: 2px;
  }
  .v5-hero__counter-value {
    font-size: clamp(24px, 7vw, 34px);
    min-width: 0;
  }
  .v5-hero__counter-label {
    font-size: 11px;
    letter-spacing: 0.06em;
  }
}

.v5-hero__counter {
  display: flex; flex-direction: column; gap: var(--space-2);
}
.v5-hero__counter-label {
  font-size: var(--type-title-06-size);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-inverse-medium-emphasis);
}
.v5-hero__counter-value {
  font-family: var(--font-display);
  font-size: clamp(50px, 6.2vw, 86px);
  line-height: 1;
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--text-inverse-high-emphasis);
  min-width: 4ch;
}
.v5-hero__counter-trend {
  font-size: var(--type-body-lg-size);
  font-weight: 700;
}
.v5-hero__counter-trend--up   { color: var(--accent-attention); }
.v5-hero__counter-trend--down { color: #ff7a7a; }

/* ═══ DASHBOARD — beefed-up stat cards on a default surface ═══ */
.v5-dashboard { padding-block: clamp(64px, 8vw, 112px); }

/* "Live" indicator — small yellow dot next to the Live dashboard eyebrow.
   Inner dot stays solid; a pseudo-element halo pulses outward to suggest
   a live data feed. Honors prefers-reduced-motion. */
.v5-eyebrow-live { display: inline-flex; align-items: center; gap: 10px; }
.v5-live-dot {
  position: relative;
  display: inline-block;
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--accent-attention);
  flex-shrink: 0;
}
.v5-live-dot::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--accent-attention);
  animation: v5-live-pulse 1.6s ease-out infinite;
}
@keyframes v5-live-pulse {
  0%   { transform: scale(1);   opacity: 0.7; }
  100% { transform: scale(2.6); opacity: 0;   }
}
@media (prefers-reduced-motion: reduce) {
  .v5-live-dot::after { animation: none; opacity: 0; }
}
.v5-dashboard__head { max-width: 720px; margin-bottom: clamp(32px, 4vw, 56px); }
.v5-dashboard__head .v3-eyebrow { margin-bottom: var(--space-3); }
.v5-dashboard__head .v3-section__title { margin-bottom: var(--space-4); }

.v5-dashboard__grid {
  list-style: none; padding: 0; margin: 0;
  display: grid; gap: var(--space-5);
  grid-template-columns: 1fr;
}
@media (min-width: 720px)  { .v5-dashboard__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .v5-dashboard__grid { grid-template-columns: repeat(3, 1fr); gap: var(--space-6); } }

.v5-metric {
  display: flex; flex-direction: column; gap: var(--space-4);
  padding: var(--space-6);
  background: var(--surface-card, #fff);
  border: 1px solid var(--border-gray-light);
  border-radius: var(--radius-lg, 12px);
  transition: border-color 120ms ease, box-shadow 200ms ease, transform 200ms ease;
}
.v5-metric:hover {
  border-color: var(--border-gray-hover);
  box-shadow: var(--elevation-2);
  transform: translateY(-2px);
}
.v5-metric__head {
  display: flex; align-items: center; gap: var(--space-3);
  color: var(--text-medium-emphasis);
}
.v5-metric__icon { width: 32px; height: 32px; display: block; }
.v5-metric__label {
  font-size: var(--type-body-md-size);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.v5-metric__value-row {
  display: flex; align-items: baseline; gap: 2px;
  margin-top: var(--space-2, 8px);
}
/* First metric (Hiring rate) — kill the flex gap AND pull the "%" back
   with a negative margin so it sits flush against the "2.3" with no
   visible whitespace between them. */
.v5-dashboard__grid > .v5-metric:first-child .v5-metric__value-row {
  gap: 0;
}
.v5-dashboard__grid > .v5-metric:first-child .v5-metric__unit {
  margin-left: -0.18em;
}
.v5-metric__value {
  font-family: var(--font-display);
  font-size: clamp(64px, 6.5vw, 96px);
  line-height: 1;
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--li-blue-80);
  min-width: 3ch;
}
.v5-metric__unit {
  font-family: var(--font-display);
  font-size: clamp(32px, 3.5vw, 48px);
  font-weight: 700;
  color: var(--li-blue-80);
}
.v5-metric__trend {
  font-size: var(--type-body-md-size);
  font-weight: 700;
  letter-spacing: 0.01em;
}
.v5-metric__trend--up   { color: #1f7a3d; }
.v5-metric__trend--down { color: #b22a2a; }
.v5-metric__spark {
  width: 100%; height: 36px; display: block;
  margin-top: var(--space-2, 8px);
}
.v5-metric__spark-line {
  stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
  fill: none;
}
.v5-metric__spark-line--up   { stroke: #1f7a3d; }
.v5-metric__spark-line--down { stroke: #b22a2a; }
.v5-metric__compare {
  font-size: var(--type-body-md-size);
  color: var(--text-medium-emphasis);
  margin: 0;
  line-height: 1.45;
}
@media (prefers-reduced-motion: reduce) {
  .v5-metric { transition: none; }
  .v5-metric:hover { transform: none; }
}

/* ═══ LABOR REPORT TEASER — dark blue background, white chart card on top.
       Text block is inverted (white-on-blue); chart card stays light. ═══ */
.v5-labor {
  background: var(--li-blue-80);
  color: var(--text-inverse-high-emphasis);
  padding-block: clamp(64px, 8vw, 112px);
}
.v5-labor__grid {
  /* Stacked at all sizes — text on top, chart full-width below — so the
     chart can read as large as the section allows. */
  display: grid; gap: clamp(16px, 2vw, 28px);
  grid-template-columns: 1fr;
  align-items: start;
}
.v5-labor__text .v3-eyebrow { margin-bottom: var(--space-3); color: var(--accent-attention); }
.v5-labor__text .v3-section__title { margin-bottom: var(--space-4); color: var(--text-inverse-high-emphasis); }
/* Override v3's 60ch lede cap so the description spans the section width
   and breaks across fewer lines. */
.v5-labor__text .v3-section__lede  { color: var(--text-inverse-high-emphasis); max-width: 72ch; }
.v5-labor__cta {
  margin-top: var(--space-5);
  font-weight: 700;
  color: var(--accent-attention);
}
.v5-labor__cta:hover { color: #fff; }

/* Chart card (white box) sits left; the greek/support text sits to its
   right directly on the blue section background. */
.v5-labor__body {
  display: grid;
  grid-template-columns: minmax(0, 2.4fr) minmax(0, 1fr);
  gap: clamp(24px, 3vw, 48px);
  align-items: start;
}
.v5-labor__chart-wrap {
  background: var(--surface-card, #fff);
  border: 1px solid var(--border-gray-light);
  border-radius: var(--radius-xl, 16px);
  padding: clamp(20px, 2.5vw, 32px);
  min-width: 0;
}
.v5-labor__chart-aside {
  min-width: 0;
  align-self: center;
  display: flex; flex-direction: column; gap: var(--space-3);
}
.v5-labor__chart-aside p {
  margin: 0;
  font-size: var(--type-body-md-size);
  line-height: 1.5;
  font-weight: 700;
  color: #ffffff;
}
.v5-labor__chart-aside p.v5-labor__chart-aside-sub {
  font-weight: 400;
  font-size: 18px;
}
.v5-labor__chart-aside p.v5-labor__chart-aside-lead {
  font-size: var(--type-title-06-size);
  line-height: var(--type-title-06-lh);
}
.v5-labor__aside-cta { align-self: flex-start; margin-top: var(--space-2); }
@media (max-width: 767px) {
  .v5-labor__body { grid-template-columns: 1fr; }
}
.v5-labor__chart-header {
  display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-between; gap: var(--space-3);
  margin-bottom: var(--space-4);
}
.v5-labor__chart-title {
  font-family: var(--font-display);
  font-size: var(--type-title-05-size);
  line-height: var(--type-title-05-lh);
  font-weight: 700;
  color: var(--text-high-emphasis);
}
/* Title + interaction hint stack in a column so the hint sits directly
   under the chart headline while the legend stays on the right. */
.v5-labor__chart-titlewrap {
  display: flex; flex-direction: column; gap: var(--space-1);
}
.v5-labor__chart-hint {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-display);
  font-size: var(--type-body-sm-size);
  font-weight: 600;
  color: var(--text-medium-emphasis);
}
.v5-labor__chart-hint svg {
  width: 24px; height: 24px; flex-shrink: 0;
  fill: currentColor;
}
/* Legend — one item per country, color swatch + label. */
.v5-labor__legend { display: inline-flex; gap: 16px; flex-wrap: wrap; }
.v5-labor__legend-item {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-display);
  font-size: var(--type-body-md-size); font-weight: 700;
  color: var(--text-medium-emphasis);
  letter-spacing: 0.02em;
}
.v5-labor__legend-swatch {
  width: 12px; height: 12px; border-radius: 50%; flex-shrink: 0;
}
.v5-labor__legend-item--india .v5-labor__legend-swatch { background: var(--li-blue-80); }
.v5-labor__legend-item--uk    .v5-labor__legend-swatch { background: var(--accent-attention); }
.v5-labor__legend-item--us    .v5-labor__legend-swatch { background: var(--li-blue-50); }

/* Chart stage — relative parent for the absolute-positioned tooltip.
   Negative side margins let only the plotted chart stretch wider toward
   the white box edges, while the header/legend above and caption below
   keep the box's normal horizontal padding. */
.v5-labor__chart-stage {
  position: relative;
  margin-inline: calc(-1 * clamp(12px, 1.6vw, 22px));
}
.v5-labor__chart {
  width: 100%;
  /* Match the SVG's viewBox aspect (800:440) so labels + lines scale
     uniformly and aren't stretched or letterboxed. The chart fills the
     available width and the height is derived from that at every size. */
  aspect-ratio: 800 / 440;
  height: auto;
  display: block;
  font-family: var(--font-display);
  cursor: crosshair;
  /* Let the browser handle vertical scrolling over the chart on touch
     devices, while horizontal drags are used to scrub the tooltip. */
  touch-action: pan-y;
}

/* Grid + axis */
.v5-labor__grid-lines line {
  stroke: var(--border-gray-light);
  stroke-width: 1;
}
.v5-labor__grid-baseline { stroke: var(--border-gray-default); }
.v5-labor__y-labels text,
.v5-labor__x-labels text {
  fill: var(--text-medium-emphasis);
  /* Axis numbers use SF Pro (Apple system font), falling back to the
     platform UI font on non-Apple systems. */
  font-family: "SF Pro Display", "SF Pro Text", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  font-size: 13px;
  font-weight: 600;
}

/* Lines */
.v5-labor__line {
  fill: none;
  stroke-width: 2.5;
  stroke-linecap: round; stroke-linejoin: round;
  /* pathLength="1" is set on each polyline in chart.js, so a normalized
     dash of 1 fully hides the line and animates to 0 regardless of its
     actual on-screen length — gives the draw-in effect on scroll. */
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}
.v5-labor__chart-wrap--in-view .v5-labor__line {
  animation: v5-line-draw 1600ms ease-out forwards;
}
.v5-labor__chart-wrap--in-view .v5-labor__line--india { animation-delay: 0ms; }
.v5-labor__chart-wrap--in-view .v5-labor__line--uk    { animation-delay: 150ms; }
.v5-labor__chart-wrap--in-view .v5-labor__line--us    { animation-delay: 300ms; }

@keyframes v5-line-draw { to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) {
  .v5-labor__line { stroke-dasharray: none; stroke-dashoffset: 0; animation: none; }
}

/* Per-country line colors — kept distinct (no two greens / similar hues):
   blue-black, yellow, and a lighter blue. All three share the same stroke
   weight (set on .v5-labor__line above). */
.v5-labor__line--india { stroke: var(--li-blue-80); }
.v5-labor__line--uk    { stroke: var(--accent-attention); }
.v5-labor__line--us    { stroke: var(--li-blue-50); }

/* Hover indicator */
.v5-labor__hover-line {
  stroke: var(--text-high-emphasis);
  stroke-width: 1;
  stroke-dasharray: 3 3;
  opacity: 0.4;
}
.v5-labor__hover-dot {
  /* Radius set in CSS (overrides the r="4" attribute) so it can grow on
     rollover and scale up further on mobile. The white outline uses
     non-scaling-stroke so the ring stays crisp at any chart size. */
  r: 5.5;
  stroke: #fff;
  stroke-width: 2;
  vector-effect: non-scaling-stroke;
}
.v5-labor__hover-dot--india { fill: var(--li-blue-80); }
.v5-labor__hover-dot--uk    { fill: var(--accent-attention); }
.v5-labor__hover-dot--us    { fill: var(--li-blue-50); }
/* Bigger touch-friendly indicators on phones/tablets, where the chart
   (and therefore the dots' user-unit radius) renders much smaller. */
@media (max-width: 1023px) { .v5-labor__hover-dot { r: 8; } }
@media (max-width: 720px)  { .v5-labor__hover-dot { r: 11; stroke-width: 2.5; } }

/* Tooltip */
.v5-labor__tooltip {
  position: absolute;
  /* Pin the callout just below the 3.0 gridline (the top of the plot, at
     ~6.8% of the chart height) and hang it downward, so it always stays
     inside the chart instead of floating up over the header. */
  top: 9%;
  transform: translate(-50%, 0);
  background: var(--li-blue-80);
  color: #fff;
  padding: 10px 12px;
  border-radius: 8px;
  font-size: 13px;
  line-height: 1.4;
  pointer-events: none;
  white-space: nowrap;
  /* Sit clearly above the white chart: soft drop shadow for separation
     and a high stacking order over the SVG + hover dots. */
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.28);
  z-index: 5;
}
.v5-labor__tooltip-head { margin-bottom: 4px; font-size: 12px; opacity: 0.85; font-weight: 700; }
.v5-labor__tooltip-row {
  display: flex; align-items: baseline; gap: 8px;
  font-weight: 500;
}
/* Name fills the row so the value is pushed to a right-aligned column —
   the values line up under each other across all three rows. */
.v5-labor__tooltip-label { flex: 1; }
.v5-labor__tooltip-value {
  margin-left: 16px;
  font-weight: 700;
  font-variant-numeric: tabular-nums; /* equal-width digits stay aligned */
}
/* Keep the swatch centered on the text rather than dropping to the baseline. */
.v5-labor__tooltip-row .v5-labor__tooltip-swatch { align-self: center; }
.v5-labor__tooltip-swatch {
  width: 10px; height: 10px; border-radius: 50%; display: inline-block;
  flex-shrink: 0;
  /* Crisp white ring so every swatch — including India, whose color is the
     same blue-80 as the tooltip background — reads as a distinct dot. */
  box-shadow: 0 0 0 1.5px rgba(255, 255, 255, 0.95);
}
.v5-labor__tooltip-row--india .v5-labor__tooltip-swatch { background: var(--li-blue-80); }
.v5-labor__tooltip-row--uk    .v5-labor__tooltip-swatch { background: var(--accent-attention); }
.v5-labor__tooltip-row--us    .v5-labor__tooltip-swatch { background: var(--li-blue-50); }

.v5-labor__caption {
  margin: var(--space-3) 0 0;
  font-size: var(--type-caption-size);
  color: var(--text-medium-emphasis);
}

/* ── Responsive: the SVG scales to its container width, so on narrow
   screens the whole drawing (including axis text) shrinks. Compensate by
   enlarging the axis numbers in user units and thinning the year ticks to
   every other year so they don't overlap. Two steps keeps it readable from
   tablet down to small phones. */
@media (max-width: 720px) {
  .v5-labor__chart-wrap { padding: 16px; }
  .v5-labor__y-labels text,
  .v5-labor__x-labels text { font-size: 17px; }
  .v5-labor__x-tick--minor { display: none; }
}
@media (max-width: 460px) {
  .v5-labor__y-labels text,
  .v5-labor__x-labels text { font-size: 21px; }
}

/* ═══ "OUR LATEST RESEARCH" — gray surface, dark text. (V4 painted this
       section dark blue with inverse text + a world-map bg; the v5 version
       drops all that.) Flows immediately after the blue Labor section. */
.v4-reports {
  background: var(--surface-gray-light, #f4f2ee);
  color: var(--text-high-emphasis);
  overflow: visible;
}
.v4-reports .v3-eyebrow,
.v4-reports .v3-section__title { color: var(--text-high-emphasis); }
.v4-reports .v3-section__lede  { color: var(--text-medium-emphasis); }

/* ═══ CARD STACK — swipeable carousel for the reports.
       Active card sits in the center; prev/next peek to the sides at a
       smaller scale and lower opacity. cardstack.js sets data-pos on
       each card; CSS handles all the visual states. ═══ */
.v5-cardstack {
  position: relative;
  min-height: clamp(420px, 50vw, 560px);
  display: flex; align-items: center; justify-content: center;
  user-select: none;
  outline: none;
  touch-action: pan-y;
  margin-bottom: clamp(32px, 4vw, 56px);
}

/* Diagonal "needs update" watermark — used on stack cards that point
   to a stale or missing source (e.g., the U.S. Workforce Report when
   the latest month hasn't been built yet). Sits above the thumb at
   low opacity so the underlying card stays legible. */
.v5-watermark {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  color: var(--accent-attention, #f5c518);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(20px, 2.4vw, 32px);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  transform: rotate(-18deg);
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
  opacity: 0.92;
}
.v5-card--watermarked .v3-card__thumb img {
  /* Knock the image back a bit so the watermark reads cleanly. */
  filter: brightness(0.78) saturate(0.85);
}
/* Two-line watermark variant — title + dated sub-line ('→ June 2026').
   Smaller text since two lines need to fit; same diagonal rotation
   and yellow color as the single-line variant. */
.v5-watermark--stacked {
  flex-direction: column;
  gap: var(--space-1, 4px);
  text-transform: none;
  font-size: clamp(15px, 1.6vw, 22px);
  letter-spacing: 0;
  line-height: 1.2;
  text-align: center;
  padding: 0 var(--space-3, 12px);
}
.v5-watermark--stacked .v5-watermark__arrow {
  font-size: 0.92em;
  font-weight: 700;
}

.v5-cardstack__card {
  position: absolute;
  top: 50%; left: 50%;
  /* Slightly narrower cards across all breakpoints — pulls the centre
     card in by ~10% so the whole stack feels lighter. */
  width: clamp(216px, 34vw, 414px);
  max-width: 100%;
  margin: 0;
  cursor: pointer;
  overflow: hidden; /* clip diagonal watermark to card bounds */
  transition: transform 450ms cubic-bezier(0.2, 0.8, 0.2, 1),
              opacity   350ms ease,
              box-shadow 350ms ease;
  will-change: transform, opacity;
}
/* Active — full size, centered, on top. */
.v5-cardstack__card[data-pos="0"] {
  transform: translate(-50%, -50%) scale(1);
  opacity: 1;
  z-index: 3;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.18);
  cursor: default;
}
/* Next — peeking from the right, overlapping the centre card. Side
   cards stay fully opaque so they read as complete cards rather than
   faded ghosts behind the active one. */
.v5-cardstack__card[data-pos="1"] {
  transform: translate(calc(-50% + 45%), -50%) scale(0.86);
  opacity: 1;
  z-index: 2;
}
/* Prev — peeking from the left. */
.v5-cardstack__card[data-pos="-1"] {
  transform: translate(calc(-50% - 45%), -50%) scale(0.86);
  opacity: 1;
  z-index: 2;
}
/* Second-next — further right, smaller but still fully opaque. */
.v5-cardstack__card[data-pos="2"] {
  transform: translate(calc(-50% + 85%), -50%) scale(0.72);
  opacity: 1;
  z-index: 1;
}
/* Second-prev — further left, smaller but still fully opaque. */
.v5-cardstack__card[data-pos="-2"] {
  transform: translate(calc(-50% - 85%), -50%) scale(0.72);
  opacity: 1;
  z-index: 1;
}
/* Off-stack — everything beyond ±2. */
.v5-cardstack__card[data-pos="x"] {
  transform: translate(-50%, -50%) scale(0.6);
  opacity: 0;
  z-index: 0;
  pointer-events: none;
}
/* Cancel the default card hover scale (from v3) — we own the transform. */
.v5-cardstack__card.v3-card--report:hover { transform: translate(-50%, -50%) scale(1); }
.v5-cardstack__card[data-pos="1"].v3-card--report:hover  { transform: translate(calc(-50% + 45%), -50%) scale(0.9);  opacity: 1; }
.v5-cardstack__card[data-pos="-1"].v3-card--report:hover { transform: translate(calc(-50% - 45%), -50%) scale(0.9);  opacity: 1; }
.v5-cardstack__card[data-pos="2"].v3-card--report:hover  { transform: translate(calc(-50% + 85%), -50%) scale(0.76); opacity: 1; }
.v5-cardstack__card[data-pos="-2"].v3-card--report:hover { transform: translate(calc(-50% - 85%), -50%) scale(0.76); opacity: 1; }

/* ── Mobile carousel: a clean stacked deck. Every card is the SAME size
   (fixed height, no per-position scale-down) and the neighbours tuck
   tightly behind the active card so they just peek — far more overlap than
   the spread-out desktop fan. ── */
@media (max-width: 640px) {
  .v5-cardstack { min-height: clamp(444px, 124vw, 500px); }
  .v5-cardstack__card {
    /* Narrow enough that the peeking neighbour edge sits inside the nav
       arrows rather than tucking under them. */
    width: clamp(208px, 57vw, 296px);
    height: clamp(404px, 112vw, 448px);   /* fixed height → uniform card size */
  }
  /* Clamp the copy so text-heavy cards still fit the fixed height. */
  .v5-cardstack__card .v3-card__copy {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  /* Same size everywhere; small staggered offsets = a heavily-overlapped
     deck where the edges of the ±1 AND ±2 cards both peek out, while the
     outermost (±2) edge still stays just inside the nav arrows. */
  .v5-cardstack__card[data-pos="0"]  { transform: translate(-50%, -50%) scale(1); }
  .v5-cardstack__card[data-pos="1"]  { transform: translate(calc(-50% + 5%),  -50%) scale(1); opacity: 1; }
  .v5-cardstack__card[data-pos="-1"] { transform: translate(calc(-50% - 5%),  -50%) scale(1); opacity: 1; }
  .v5-cardstack__card[data-pos="2"]  { transform: translate(calc(-50% + 10%), -50%) scale(1); opacity: 1; }
  .v5-cardstack__card[data-pos="-2"] { transform: translate(calc(-50% - 10%), -50%) scale(1); opacity: 1; }
  /* Keep size + positions constant on tap (cancel the hover scale tweaks). */
  .v5-cardstack__card[data-pos="0"].v3-card--report:hover  { transform: translate(-50%, -50%) scale(1); }
  .v5-cardstack__card[data-pos="1"].v3-card--report:hover  { transform: translate(calc(-50% + 5%),  -50%) scale(1); opacity: 1; }
  .v5-cardstack__card[data-pos="-1"].v3-card--report:hover { transform: translate(calc(-50% - 5%),  -50%) scale(1); opacity: 1; }
  .v5-cardstack__card[data-pos="2"].v3-card--report:hover  { transform: translate(calc(-50% + 10%), -50%) scale(1); opacity: 1; }
  .v5-cardstack__card[data-pos="-2"].v3-card--report:hover { transform: translate(calc(-50% - 10%), -50%) scale(1); opacity: 1; }
}

/* Pager dots — bumped to 12px so the affordance reads clearly even on
   busy report covers behind the card stack. */
.v5-cardstack__dots {
  position: absolute;
  bottom: -36px; left: 50%;
  transform: translateX(-50%);
  display: flex; gap: 20px;
  z-index: 4;
}
.v5-cardstack__dot {
  width: 12px; height: 12px;
  border-radius: 50%;
  border: 0;
  background: var(--border-gray-default);
  padding: 0;
  cursor: pointer;
  transition: background-color 180ms ease, transform 180ms ease;
}
.v5-cardstack__dot:hover { background: var(--text-medium-emphasis); }
.v5-cardstack__dot--active {
  background: #001a3c;                       /* dark navy — matches the cardstack arrow buttons */
  transform: scale(1.3);
}

/* Prev / next nav buttons — sit at the left and right edges of the card
   stack so the carousel affordance is unmissable. The arrow svg uses
   #i-arrow-right; the prev button mirrors it via CSS rotation. */
/* Cardstack prev/next buttons — match the hero v4-jump-btn icon palette:
   dark navy circle (#001a3c, the V7 brand surface) with a yellow arrow
   (--accent-attention) inside. Pushed further out so they sit clearly
   outside the stack edges. */
.v5-cardstack__nav {
  position: absolute;
  top: 50%;
  z-index: 5;
  width: 48px; height: 48px;
  display: flex; align-items: center; justify-content: center;
  background: #001a3c;
  color: var(--accent-attention);
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  box-shadow: var(--elevation-2);
  transform: translateY(-50%);
  transition: background-color 150ms ease, transform 150ms ease;
}
.v5-cardstack__nav:hover {
  background: #002a5c;
  transform: translateY(-50%) scale(1.12);
}
/* Click bounce — single tiny squish-and-return. No rebound, no
   overshoot, just enough to register as a tactile blink. */
.v5-cardstack__nav.is-bouncing {
  animation: v5-cardstack-nav-bounce 180ms ease-out;
}
@keyframes v5-cardstack-nav-bounce {
  0%   { transform: translateY(-50%) scale(1); }
  50%  { transform: translateY(-50%) scale(0.98); }   /* 2% dip */
  100% { transform: translateY(-50%) scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .v5-cardstack__nav.is-bouncing { animation: none; }
}
.v5-cardstack__nav:focus-visible {
  outline: 2px solid var(--accent-attention);
  outline-offset: 2px;
}
.v5-cardstack__nav svg {
  width: 22px; height: 22px;
  stroke: currentColor; fill: none;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.v5-cardstack__nav--prev {
  left: -48px;                /* pushed out so the button sits clearly outside the stack */
}
.v5-cardstack__nav--prev svg {
  transform: rotate(180deg);
}
.v5-cardstack__nav--next {
  right: -48px;
}
@media (max-width: 640px) {
  .v5-cardstack__nav { width: 40px; height: 40px; }
  .v5-cardstack__nav svg { width: 18px; height: 18px; }
  .v5-cardstack__nav--prev { left: -28px; }
  .v5-cardstack__nav--next { right: -28px; }
}

/* ─── Follow pill rollover — matches the v3-card--report hover lift
   (scale 1.06) AND adds a 90° clockwise spin to the plus glyph. Applies
   to every .v4-follow-pill instance (top-nav follow, closer follow,
   any other follow button across V7). ─── */
.v4-follow-pill {
  /* Inherit whatever background/border transitions the pill already has
     and layer transform on top so the scale lift is smooth. */
  transition: background-color 150ms ease, border-color 150ms ease,
              color 150ms ease, transform 220ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
.v4-follow-pill:hover {
  transform: scale(1.06);
}
.v4-follow-pill svg,
.v4-follow-pill .lem-icon {
  transition: transform 240ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
.v4-follow-pill:hover svg,
.v4-follow-pill:hover .lem-icon {
  transform: rotate(90deg);
}

/* Same scale lift on the Subscribe (primary) and inverse closer buttons,
   so every CTA in the bottom banner reads with the same tactile pop.
   No plus glyph on the Subscribe button, so it gets the scale only. */
.lem-button--primary,
.lem-button--inverse {
  transition: background-color 150ms ease, border-color 150ms ease,
              color 150ms ease, transform 220ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
.lem-button--primary:hover,
.lem-button--inverse:hover {
  transform: scale(1.06);
}

/* ─── Follow pill text colour: white at rest, fills white on hover with
   black text + black plus glyph (currentColor). Applies to both the
   top-nav Follow and the closer Follow. Specificity bumped above the
   earlier .lem-nav .v4-follow-pill rule so it wins everywhere. ─── */
.v4-follow-pill,
.lem-nav .v4-follow-pill,
.lem-button--inverse.v4-follow-pill {
  color: #ffffff;
}
.v4-follow-pill:hover,
.lem-nav .v4-follow-pill:hover,
.lem-button--inverse.v4-follow-pill:hover {
  background: #ffffff;
  color: #000000;
  border-color: #ffffff;
}

/* ─── Body-text hyperlinks (outside buttons / nav / structured components):
   bright blue-70, bold, no underline at rest or on hover. Scoped to the
   common body contexts (prose, section ledes, accordion panels, card
   bodies, list items inside articles) so navigation and the various
   .lem-button classes keep their own treatment. ─── */
.v4-prose a:not(.lem-button),
.v3-prose a:not(.lem-button),
.v3-section__lede a:not(.lem-button),
.v3-pullquote__text a:not(.lem-button),
.v4-impact-accordion .lem-accordion__panel a:not(.lem-button),
.v3-card__copy a:not(.lem-button),
p > a:not([class]),
li > a:not([class]) {
  color: #0a66c2;
  font-weight: 700;
  text-decoration: none;
}
.v4-prose a:not(.lem-button):hover,
.v3-prose a:not(.lem-button):hover,
.v3-section__lede a:not(.lem-button):hover,
.v3-pullquote__text a:not(.lem-button):hover,
.v4-impact-accordion .lem-accordion__panel a:hover,
.v3-card__copy a:hover,
p > a:not([class]):hover,
li > a:not([class]):hover {
  color: #2a7bd2;
  text-decoration: none;
}

.v3-section__lede a:not(.lem-button):hover,
.v4-prose a:not(.lem-button):hover,
.v4-impact-accordion .lem-accordion__panel a:not(.lem-button):hover,
.v3-card__copy a:not(.lem-button):hover,
.lem-section p > a:not([class]):hover,
.lem-section li > a:not([class]):hover { text-decoration: underline; }

/* Nav-dropdown items shouldn't pick up the body-text hyperlink blue —
   restore the XBU near-black at rest, slightly darker on hover. */
.lem-nav__dropdown a:not([class]),
.lem-nav__dropdown a:not([class]):hover {
  color: rgba(0, 0, 0, 0.75);
  font-weight: 600;
}
.lem-nav__dropdown a:not([class]):hover {
  color: rgba(0, 0, 0, 0.9);
  background: var(--li-gray-10);                /* midway between --surface-hover (#f5f5f5) and gray-20 (#d9d9d9) */
}

/* Active-page dropdown item stays blue at rest AND on hover so the user's
   current location remains visually pinned. The base rule earlier in
   styles.css paints background var(--surface-blue-mid) + color
   var(--text-link); this override re-asserts both for the hover state
   above. */
.lem-nav__dropdown a[aria-current="page"],
.lem-nav__dropdown a[aria-current="page"]:hover {
  background: var(--surface-blue-mid);
  color: var(--text-link);
}

/* Footer links: black, normal weight at rest. On hover use underline and
   color only so link widths do not jump. Overrides the body-text
   hyperlink rule above which was painting them blue + bold + always. */
.v4-footer__links a:not([class]) {
  color: var(--text-high-emphasis);
  font-weight: 400;
  text-decoration: none;
}
.v4-footer__links a:not([class]):hover {
  color: var(--text-high-emphasis);
  text-decoration: none;
}

/* ─── Blog hero: paint the world-map dots in blue-80 (#004182, original
   LinkedIn) instead of the inherited blue-60, so they read against the
   hero's dark navy background. Scope via .v4-hero--static-map so the
   override only fires where opted in. ─── */
.v4-hero--static-map .v3-hero__bg svg path {
  fill: #004182;
}
/* Shrink the map ~10% relative to the inherited 60% width. */
.v4-hero--static-map .v3-hero__bg svg { width: 54%; }
/* Randomly highlighted dots — JS in hero-map.js tags ~25% of the map's
   path nodes after injection. The accent class is still named
   .eg-dot-yellow for backwards compatibility but it paints the original
   LinkedIn blue-70 (#0a66c2) — hardcoded because the V7 recolor flattens
   the --li-blue-70 token to #001a3c which would melt into the blue-80
   base dots. */
.v4-hero--static-map .v3-hero__bg svg path.eg-dot-yellow {
  fill: #0a66c2;
}
/* On narrow layouts the right-anchored map shrinks to a small corner motif.
   Scale it up so it reads as a proper backdrop behind the hero copy. */
@media (max-width: 720px) {
  .v4-hero--static-map .v3-hero__bg svg { width: 82%; }
}
@media (max-width: 480px) {
  .v4-hero--static-map .v3-hero__bg svg { width: 96%; }
}

/* ─── Featured Research hero: replace the world map with the V5 chart-
   lines art, sized for the shorter v3-hero--plain proportions. Holds
   still on scroll (data-no-parallax) and skips the homepage's stroke-
   dashoffset draw animation so the lines render statically. ─── */
.v4-hero--chart-lines .v3-hero__bg {
  /* The chart-lines SVG uses preserveAspectRatio="none" so it stretches
     to fill — make sure the bg layer itself spans the hero. */
  inset: 0;
}
.v4-hero--chart-lines .v3-hero__bg svg {
  width: 100%;
  height: 100%;
}
.v4-hero--chart-lines .v3-hero__bg .v5-hero__chart-line {
  fill: none;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  /* Keep stroke thickness pixel-constant regardless of viewBox scaling
     so the lines don't smear on small viewports. */
  vector-effect: non-scaling-stroke;
  /* Kill the homepage's dashoffset draw animation so the lines just
     appear, statically, when the page loads. */
  stroke-dasharray: none;
  stroke-dashoffset: 0;
  animation: none;
}
@media (max-width: 720px) {
  .v4-hero--chart-lines .v3-hero__bg .v5-hero__chart-line {
    stroke-width: 3.5;
    opacity: 0.85;
  }
}
/* Horizontal grid lines sitting behind the data lines — light grey
   so they read as faint chart axes without competing with the foreground. */
.v4-hero--chart-lines .v3-hero__bg .v5-hero__chart-grid line {
  stroke: rgba(255, 255, 255, 0.12);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}
/* .v3-hero__inner stays as the standard container-max centered wrapper
   — no overrides — so the inner left edge lines up with the
   .v3-section__inner of every section below. Inside that wrapper we
   anchor a fit-content plate to the start, so the eyebrow + title + lede
   sit at the same horizontal x as the section content below the hero.
   Shared between the chart-lines and connect-dots hero variants. */
.v4-hero--chart-lines .v3-hero__inner,
.v4-hero--connect-dots .v3-hero__inner {
  position: relative;
  z-index: 1;
}
.v4-hero--chart-lines .v4-hero__plate,
.v4-hero--connect-dots .v4-hero__plate {
  background: #001a3c;
  border-radius: var(--radius-md);
  padding: var(--space-6) var(--space-8);
  width: fit-content;
  max-width: 100%;
}
.v4-hero--connect-dots .v3-hero__lede a:not(.lem-button) {
  color: var(--text-inverse-link);
  text-decoration: underline;
}
.v4-hero--connect-dots .v3-hero__lede a:not(.lem-button):focus-visible {
  outline: 2px solid var(--text-inverse-high-emphasis);
  outline-offset: 2px;
}

/* ─── Connect-the-dots hero (Research Institute). Five pulsing yellow
   dots positioned across the bg layer, threaded together by a light-grey
   polyline so the eye reads them as a chart-style data trail. The dots
   reuse the .v5-live-dot class (and therefore its existing pulse
   animation) from the homepage dashboard. ─── */
.v4-hero--connect-dots .v3-hero__bg {
  inset: 0;
}
/* Pin the grid-lines SVG to fill the hero bg exactly (overriding the
   .v5-hero__chart-bg aspect-ratio band + the ≤720px bottom-lift) so its
   stretched lines land at the same fixed y-percentages as the dots. */
.v4-hero--connect-dots .v3-hero__bg svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  max-height: none;
}
.v4-hero--connect-dots .v3-hero__bg .v4-hero__connect-lines {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  /* Allow polyline points beyond the 0–100 viewBox to render — the hero's
     own overflow:hidden clips them at the hero edge, so they look like
     they bleed off the page. */
  overflow: visible;
}
.v4-hero__connect-lines polyline {
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
}
.v4-hero__connect-line--primary {
  stroke: rgba(255, 255, 255, 0.28);
}
.v4-hero__connect-line--secondary {
  stroke: rgba(255, 255, 255, 0.18);
  /* Dashed so the two lines read as distinct when they overlap. */
  stroke-dasharray: 3 2.5;
}
.v4-hero__dot {
  position: absolute;
  transform: translate(-50%, -50%);
  z-index: 1;
}
/* Chase dots use the same v5-live-pulse keyframe but each carries its
   own --pulse-delay variable so the pulses cascade left → right. */
.v4-hero__dot--chase::after {
  animation-delay: var(--pulse-delay, 0s);
}


@media (prefers-reduced-motion: reduce) {
  .v4-follow-pill,
  .v4-follow-pill svg,
  .v4-follow-pill .lem-icon,
  .lem-button--primary,
  .lem-button--inverse { transition: none; }
  .v4-follow-pill:hover,
  .v4-follow-pill:hover svg,
  .v4-follow-pill:hover .lem-icon,
  .lem-button--primary:hover,
  .lem-button--inverse:hover { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .v5-cardstack__card { transition: opacity 200ms ease; }
}

/* ════════════════════════════════════════════════════════════════════════
   V7 RECOLOR — the V5 hero dark navy (#001a3c) becomes the dominant
   accent across the whole site. Both --li-blue-70 and --li-blue-80 are
   remapped so anywhere V4/V5 used those tokens (heroes, primary buttons,
   links, blue surfaces, dark sections) now picks up the V5 hero shade.
   These overrides live after all the inherited rules so they win without
   touching the canonical V4/V5 stylesheets.
   ──────────────────────────────────────────────────────────────────────── */
:root {
  /* Fill the missing step in the LEM space scale. The shared tokens.css
     defines space-1..6 (4-24px) and space-8..12 (32-48px) but skips
     space-7. Several v1-2 rules (v4-article-back, v4-article__footnote,
     v4-lmr-lede bottom margin) reference var(--space-7), which without
     a definition resolves to 0 — collapsing breathing room above the
     blog-article 'Back' link's grey rule. Defining it here, scoped to
     V1.2, restores ~28px of margin without modifying the shared
     tokens.css (which V7 also depends on). */
  --space-7: 28px;
  --li-blue-70: #001a3c;
  --li-blue-80: #001a3c;
  /* Hyperlinked text uses the original LinkedIn blue so inline links pop
     on light surfaces. The blue-70 / blue-80 brand surface tokens above
     still resolve to the V5 dark navy — only the link / interactive
     accent tokens are brighter. */
  --text-link:                 #0a66c2;
  --text-link-hover:           #2a7bd2;
  --interactive-primary:       #0a66c2;     /* used by .v3-link "Learn more" CTAs in card bodies */
  --interactive-primary-hover: #2a7bd2;
  --surface-blue-bold:         #0a66c2;     /* fills the active blog-pagination button */
  --border-blue-focus:         #0a66c2;     /* search-input focus stroke + other focus rings */
}
/* The .v3-pullquote name + .v4-pub__link etc. all resolve through
   --text-link, so no per-component override is needed for inline links. */

/* ─── V7 TICKER — dark navy band sitting below the nav site-wide.
   Full-width band so the navy color extends to the viewport edges
   (no white bars on the sides). The track inside still constrains
   to the nav's content max-width so the text aligns visually. ─── */
.v4-announce,
.lem-announce--brand {
  background: #001a3c;
  color: var(--text-inverse-high-emphasis);
  border-radius: 0;
  /* Slim breathing room between the nav text and the ticker text — added
     as padding-top so the navy band fills the gap instead of exposing
     the white page background that a margin-top would create. */
  padding-top: var(--space-2);
}

/* Sub-page hero banners (.v3-hero--plain) use the compact plain-hero
   spacing so text headers don't feel oversized. */
.v3-hero.v3-hero--plain {
  padding-block: clamp(40px, 5vw, 72px);
}
.v4-announce .lem-announce__link,
.v4-ticker__item,
.v4-ticker__item span {
  color: var(--text-inverse-high-emphasis);
}
/* Step the ticker weight down from the inherited 700 (bold) to 600
   (semibold) — easier to read on the navy bar without losing emphasis. */
.v4-ticker__item,
.v4-ticker__item span { font-weight: 600; }

/* Even out the horizontal rhythm of the marquee — both between adjacent
   stats AND between the marquee's looped cycles. Same gap value on the
   .v4-ticker__item (between stats) and .v4-ticker__track (between
   cycles) so the spacing reads identically wherever a gap appears. */
.v4-ticker__item { gap: 64px; }
.v4-ticker__track { gap: 64px; }
/* Inside each stat, give the label, value, arrow, and change span a
   uniform inline rhythm — display as inline-flex so the words and the
   wrapped change span share a single gap value instead of variable text
   spaces. */
.v4-ticker__item > span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

/* The label + the current value + the arrow all read white (inherited
   from .v4-ticker__item). Only the change value with its +/− sign and
   the "MoM" suffix read in lighter blue, so the delta number is the only
   bit pulled out by colour. */
.v4-ticker__item .v4-ticker__change,
.v4-announce .v4-ticker__change {
  color: #82b4f0;                          /* --text-inverse-link */
}

/* ─── V5 hero counters — restore the LinkedIn-blue stroke (the
   --li-blue-70 → #001a3c recolor erased it). Keep the V5 rounded-corner
   treatment intact. ─── */
.v5-hero__counters {
  border-color: #0a66c2;
}

/* ─── Top-nav text colour — full white at rest, lighter blue on hover.
   Overrides the inherited grey ".v3-nav__primary .lem-nav__link" rule
   (which was rgba(0,0,0,0.75)) and the chevron's matching grey. The
   hover blue uses --li-blue-50 (#4a90e2) for visible contrast against
   the navy nav bar. ─── */
.lem-nav .v3-nav__primary .lem-nav__link,
.lem-nav__chevron {
  color: #ffffff;
}
.lem-nav .v3-nav__primary .lem-nav__link:hover,
.lem-nav .lem-nav__item--has-dropdown:hover > .lem-nav__link,
.lem-nav .lem-nav__item--has-dropdown:focus-within > .lem-nav__link,
.lem-nav .lem-nav__item--has-dropdown.is-open > .lem-nav__link,
.lem-nav .lem-nav__item--has-dropdown:hover .lem-nav__chevron,
.lem-nav .lem-nav__item--has-dropdown:focus-within .lem-nav__chevron {
  color: #4a90e2;                          /* --li-blue-50 — lighter blue accent */
}

/* Active-section indicator on the top nav — bolder weight + blue
   underline accent on the link with aria-current="page". The :has()
   selector also lights up the dropdown trigger ("Workforce data and
   research") whenever any of its sub-pages is current. */
.lem-nav .v3-nav__primary .lem-nav__link[aria-current="page"],
.lem-nav .v3-nav__primary .lem-nav__item--has-dropdown:has(a[aria-current="page"]) > .lem-nav__link {
  font-weight: 700;
  text-decoration: underline;
  text-decoration-color: #4a90e2;
  text-decoration-thickness: 2px;
  text-underline-offset: 6px;
}

/* ─── Primary button — uses a brighter LinkedIn blue so it doesn't melt
   into the navy closer banners. The recolor above flattened the LEM
   primary token to #001a3c (same as the banner), so override explicitly. */
.lem-button--primary {
  background: #0a66c2;                     /* original LinkedIn blue */
  border-color: #0a66c2;
  color: #ffffff;
}
.lem-button--primary:hover {
  background: #2a7bd2;                     /* a step brighter on hover */
  border-color: #2a7bd2;
}

/* ─── Restore the original LinkedIn-blue (#0a66c2) on the Labor Market
   Report block (.v5-labor) and the partner-card hover state. The site-
   wide recolor flattens those to #001a3c (matching the hero/nav), but
   we want them to read as the brighter blue so they don't melt into the
   surrounding dark sections. .v4-reports stays untouched so "Our latest
   research" keeps its inherited gray background. ─── */
.v5-labor {
  background: #0a66c2;
}
.v4-partner:hover {
  background: #0a66c2;
  border-color: #0a66c2;
}

/* "Learn more →" affordance on the partner-card hover state. Sits below
   the description inside .v4-partner__caption. The whole .v4-partner is
   already a clickable <a>, so this is a visual cue only (the span is
   aria-hidden in markup). */
.v4-partner__cta {
  margin-top: var(--space-3);
  display: inline-block;
  font-family: var(--font-display);
  font-size: var(--type-body-md-size);
  font-weight: 700;
  color: #ffffff;
  letter-spacing: 0.02em;
}

/* Blog hero — pulsing yellow dot replaces the natural tittle (the dot)
   above the lowercase "i" in "Economic". The "i" is wrapped in a
   relatively-positioned span so the yellow dot can sit absolutely
   centered above the stem. Sizing is in em so the dot scales with the
   responsive heading. The dot is rendered slightly larger than the
   natural tittle so it visually replaces it. */
.v4-hero__title-i {
  position: relative;
  display: inline-block;
}
.v4-hero__title-i-dot {
  position: absolute;
  width: 0.26em;
  height: 0.26em;
  top: 0.04em;
  left: 50%;
  transform: translateX(-50%);
}

/* Shorter blog hero — pulls the lede + title closer to the ticker and
   trims the bottom padding so the hero feels like a tight intro rather
   than a full landing banner. Overrides .v3-hero--plain defaults. */
.v3-hero.v3-hero--plain.v4-hero--blog {
  min-height: 0;
  padding-top: clamp(40px, 4vw, 64px);
  padding-bottom: clamp(32px, 3.5vw, 56px);
}

/* Blog article hero — eyebrow + long headline + byline lede. Uses the
   same compact .v4-hero--blog padding as the blog index hero. */
.v4-hero--article .v4-hero__article-eyebrow {
  color: var(--li-blue-30);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: var(--space-3);
}
.v4-hero--article .v4-hero__article-title {
  max-width: 26ch;
}
/* Article meta row — sits between the hero and the prose body. Author
   byline on the left (avatar + name + role/date), share dropdown on the
   right. Thin bottom rule separates the row from the article body. */
.v4-article-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  /* Font-size set explicitly so the 84ch max-width resolves to the same
     pixel width as the prose body below (which is body-lg). Without this,
     the meta row's ch unit is computed at the default body size and the
     separator's right edge lands inside the image/body right edge. */
  font-size: var(--type-body-lg-size);
  max-width: 84ch;
  padding-bottom: var(--space-5);
  margin: 0 0 var(--space-8);
  border-bottom: 1px solid var(--border-gray-light);
}
.v4-article-meta__name a {
  color: inherit;
  text-decoration: none;
}
.v4-article-meta__name a:hover {
  text-decoration: underline;
}
.v4-article-meta__author {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
.v4-article-meta__avatar {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}
.v4-article-meta__text { display: flex; flex-direction: column; gap: 2px; }
.v4-article-meta__name {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--type-body-lg-size);
  color: var(--text-high-emphasis);
}
.v4-article-meta__role {
  margin: 0;
  font-size: var(--type-body-md-size);
  font-weight: 600;
  color: var(--text-medium-emphasis);
}

/* Share dropdown — native <details>/<summary>. No JS needed. */
.v4-article-share {
  position: relative;
}
.v4-article-share__btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 8px 16px;
  border: 1px solid var(--border-gray-light);
  border-radius: var(--radius-full, 999px);
  background: var(--surface-default, #fff);
  font-family: var(--font-display);
  font-size: var(--type-body-md-size);
  font-weight: 600;
  color: var(--text-high-emphasis);
  cursor: pointer;
  list-style: none;
  transition: background-color 150ms ease, border-color 150ms ease;
}
.v4-article-share__btn::-webkit-details-marker { display: none; }
.v4-article-share__btn:hover {
  background: var(--surface-gray-mid, #f3f6f8);
  border-color: var(--text-medium-emphasis);
}
.v4-article-share[open] .v4-article-share__btn {
  background: var(--surface-gray-mid, #f3f6f8);
}
.v4-article-share__menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  list-style: none;
  margin: 0;
  padding: 6px 0;
  min-width: 180px;
  background: #fff;
  border: 1px solid var(--border-gray-light);
  border-radius: var(--radius-md);
  box-shadow: 0 8px 24px rgba(0, 26, 60, 0.08);
  z-index: 10;
}
.v4-article-share__menu li { margin: 0; }
.v4-article-share__menu a {
  display: block;
  padding: 10px 16px;
  color: var(--text-high-emphasis);
  font-size: var(--type-body-md-size);
  text-decoration: none;
}
.v4-article-share__menu a:hover {
  background: var(--surface-gray-mid, #f3f6f8);
  color: var(--text-link);
}

/* Blog article images — hero-image sits at the top of the article body
   (full container width) and inline-images break up the prose between
   sections. Both have rounded corners and a subtle border. */
.v4-article__hero-image {
  /* Match the prose-body font-size so 84ch resolves to the same pixel
     width as the body and meta row beneath it. Without this, ch is
     computed at the inherited (smaller) default body size and the
     image's right edge sits inside the column's right edge. */
  font-size: var(--type-body-lg-size);
  max-width: 84ch;
  margin: 0 0 var(--space-8);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.v4-article__hero-image img {
  display: block;
  width: 100%;
  height: auto;
}
.v4-article__inline-image {
  max-width: 84ch;
  /* Equal breathing room above and below — large enough that, after margin
     collapse with an adjacent H2 (which also has space-8 top), the spacing
     above and below the image reads identical. */
  margin: var(--space-8) 0;
  border-radius: var(--radius-md);
  overflow: hidden;
}
.v4-article__inline-image img {
  display: block;
  width: 100%;
  height: auto;
}

/* Article section — partially tightened top padding so the byline sits
   closer to the hero (but not as close as v3-section--tight-top). Lands
   roughly halfway between the default 56–96px clamp and the tight-top
   ~32px value. */
.v3-section.v4-article {
  padding-top: clamp(44px, 5vw, 64px);
}

/* Blog article body — prose container with H2 styling, plus a featured
   CTA card and a "back to blog" link below the prose. Wider than the
   default .v4-prose 64ch column so long-form copy reads less cramped. */
.v4-article__body {
  max-width: 84ch;
}
.v4-article__body h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(24px, 2.4vw, 30px);
  line-height: 1.25;
  letter-spacing: -0.02em;
  color: var(--text-high-emphasis);
  margin: var(--space-8) 0 var(--space-4);
}
.v4-article__body em { font-style: italic; }
/* Originally-published footnote — small italic line under the closing
   paragraph, separated by a thin top rule. */
.v4-article__footnote {
  margin-top: var(--space-7);
  padding-top: var(--space-5);
  border-top: 1px solid var(--border-gray-light);
  font-size: var(--type-body-md-size);
  font-style: italic;
  color: var(--text-medium-emphasis);
}

.v4-article-cta {
  max-width: 84ch;
  margin-top: var(--space-8);
  padding: var(--space-6);
  background: var(--surface-gray-mid, #f3f6f8);
  border-radius: var(--radius-lg);
}
.v4-article-cta__eyebrow {
  font-family: var(--font-display);
  font-size: var(--type-body-sm-size);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-medium-emphasis);
  margin: 0 0 var(--space-2);
}
.v4-article-cta__title {
  font-family: var(--font-display);
  font-size: clamp(22px, 2vw, 26px);
  line-height: 1.25;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 0 0 var(--space-3);
}
.v4-article-cta__lede {
  margin: 0 0 var(--space-4);
  color: var(--text-medium-emphasis);
}

.v4-article-back {
  max-width: 84ch;
  margin-top: var(--space-7);
  padding-top: var(--space-5);
  border-top: 1px solid var(--border-gray-light);
}
.v4-article-back .v3-link svg { width: 16px; height: 16px; }

/* Workforce data and research hub-page eyebrows ("WORKFORCE DATA AND
   RESEARCH" above the section title): match the report-page breadcrumb's
   semibold (600) weight so the two share the same visual weight across
   the section. */
.v3-hero__eyebrow {
  font-weight: 600;
}

/* Breadcrumb at the top of the report hero — light text + left-chevron
   "back" link that returns to the Workforce Reports hub. Sits above the
   navy plate. */
.v4-hero__breadcrumb {
  margin-bottom: var(--space-5);
}
.v4-hero__breadcrumb a {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--li-blue-30);
  font-family: var(--font-sans);
  font-size: var(--type-body-md-size);
  font-weight: 600;
  letter-spacing: 0.02em;
  text-decoration: none;
}
.v4-hero__breadcrumb a:hover,
.v4-hero__breadcrumb a:focus-visible {
  color: #ffffff;
  text-decoration: underline;
  outline: none;
}
.v4-hero__breadcrumb svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

/* Report-page hero tags — wraps the pale-blue country pill and the
   month/year date side-by-side above the title. Mirrors the
   .v4-report__country / .v4-report__date treatment used on the
   Workforce Reports hub cards. Date color is overridden to inverse
   high-emphasis so it stays legible against the navy hero. */
.v4-hero__report-tags {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}
/* Date below the report headline — LEM title-04 size, bold, in the
   yellow accent so it pops against the navy hero. */
.v4-hero__report-date {
  margin: var(--space-3) 0 0;
  font-family: var(--font-display);
  font-size: var(--type-title-04-size);
  line-height: var(--type-title-04-lh);
  font-weight: 700;
  color: var(--accent-attention);
}

/* SVG line chart used in workforce reports — mirrors the look of the
   PNG version (United States header, in-logo, blue/black year-over-year
   lines, blue annotation boxes, methodology footer) but as scalable
   vectors. WCAG: <title>/<desc> via aria-labelledby/describedby on the
   parent <figure>, all decorative chrome aria-hidden, line and annotation
   contrast > 4.5:1, plain-text data labels in annotations so it's not
   colour-dependent. */
.v4-chart-figure {
  max-width: 96ch;
  margin: var(--space-8) 0;
}
.v4-chart-svg {
  display: block;
  width: 100%;
  height: auto;
  background: #ffffff;
  border-radius: var(--radius-md);
}
/* Each data point is a <g class="v4-chart-svg__point"> containing a
   circle plus an opaque-on-hover tooltip box. Hovering the dot expands
   it (yellow ring) AND reveals the value label above. */
.v4-chart-svg__dots .v4-chart-svg__point circle {
  cursor: pointer;
  transition: r 150ms ease, stroke-width 150ms ease;
}
.v4-chart-svg__dots .v4-chart-svg__point:hover circle {
  r: 8;
  stroke: var(--accent-attention);
  stroke-width: 3;
}
.v4-chart-svg__tip {
  opacity: 0;
  pointer-events: none;
  transition: opacity 150ms ease;
}
.v4-chart-svg__point:hover .v4-chart-svg__tip {
  opacity: 1;
}

/* "Key insights" — full-width light-gray band that sits as a direct
   child of the article <section> (between two v3-section__inner blocks),
   so it naturally spans the section's full container width.
   Inner content matches the article column's prose typography and
   horizontal alignment so the text inside reads at the same size as
   the rest of the article. Top padding is lighter than bottom — gray
   sits closer above the text. */
.v4-key-insights {
  margin-block: var(--space-8);
  padding-top: clamp(24px, 3vw, 40px);
  padding-bottom: clamp(32px, 4vw, 56px);
  background: var(--surface-gray-light);
}
.v4-key-insights__inner {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: clamp(16px, 4vw, 96px);
  font-size: var(--type-body-lg-size);
  line-height: 1.6;
  color: var(--text-high-emphasis);
}
.v4-key-insights__title {
  margin: 0 0 var(--space-4);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(24px, 2.4vw, 30px);
  line-height: 1.25;
  letter-spacing: -0.02em;
  color: var(--text-high-emphasis);
}
.v4-key-insights ul {
  margin: 0;
  padding-left: var(--space-6);
}
.v4-key-insights li + li {
  margin-top: var(--space-4);
}
.v4-key-insights__title {
  margin-top: 0;
}
.v4-key-insights ul {
  margin-bottom: 0;
}

/* Visible caption under data charts on report pages. Mirrors the
   editorial caption treatment found on most data publications. */
.v4-article__chart-caption {
  margin-top: var(--space-3);
  padding: 0 var(--space-4);
  font-size: var(--type-body-md-size);
  line-height: 1.5;
  color: var(--text-medium-emphasis);
  font-style: italic;
}

/* Spacing between a block-level element in the article body (data
   table, figure) and the paragraph that follows it. .v4-prose's
   default p+p adjacency rule doesn't cover this, so without it the
   Methodology footnote butts right up against the bottom of the
   industry table. */
.v4-article__body .v4-report-table-wrap + p,
.v4-article__body figure + p,
.v4-article__body table + p {
  margin-top: var(--space-6);
}

/* Labor Market Report 2026 hero — branded full-bleed banner that
   mirrors the live page's hero treatment: dark navy left half with
   the report title + Download Now CTA, photo composition on the
   right half. Reflows to stacked-on-mobile so the image sits below
   the copy when there's no width to share. */
.v4-hero--labor-market {
  background: var(--li-blue-80);
  color: var(--text-inverse-high-emphasis);
  overflow: hidden;
}
/* Override the sub-page-specific .v3-hero.v3-hero--plain rule with
   tighter top padding so the breadcrumb sits close to the ticker. Needs
   the same compound selector as the source rule to win specificity. */
.v3-hero.v3-hero--plain.v4-hero--labor-market {
  padding-top: clamp(28px, 3vw, 48px);
}
/* Two-column hero layout: copy block on the left, the LMR cover image
   on the right. .v3-hero--plain on the section provides the height
   and padding-block envelope. */
.v4-hero--labor-market__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(24px, 4vw, 64px);
}
.v4-hero--labor-market__visual {
  margin: 0;
  background: #ffffff;
  padding: clamp(12px, 1.5vw, 20px);
  border-radius: var(--radius-lg);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
}
.v4-hero--labor-market__visual img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-md);
}
@media (max-width: 820px) {
  .v4-hero--labor-market__inner { grid-template-columns: minmax(0, 1fr); }
}
.v4-hero--labor-market__copy {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  min-width: 0;
}
.v4-hero--labor-market__copy .v4-hero__breadcrumb {
  margin-bottom: var(--space-2);
}
/* Eyebrow + title on the LMR hero use the standard v3-hero__eyebrow /
   v3-hero__title classes so they share the same typography as the
   Featured Research hub hero. The selectors below only tighten the
   default v3-hero__title bottom margin so the title sits closer to
   the Download CTA on this hero (which has no separate lede). */
.v4-hero--labor-market .v3-hero__title {
  margin-block: var(--space-3) var(--space-4);
}
.v4-hero--labor-market__lede {
  margin: 0;
  max-width: 50ch;
  font-size: clamp(16px, 1.5vw, 19px);
  line-height: 1.55;
  color: var(--text-inverse-medium-emphasis);
}
.v4-hero--labor-market__cta {
  align-self: flex-start;
  margin-top: var(--space-3);
}
.v4-hero--labor-market__visual {
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
  /* Crop the dark navy left half of the source banner so only the
     dotted-blue pattern + photo show inside the framed card. Use the
     image's natural aspect so the dots + photo composition reads
     uncropped vertically. */
}
.v4-hero--labor-market__visual img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
  object-position: right center;
}
@media (max-width: 820px) {
  .v4-hero--labor-market__inner {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Labor Market Report 2026 — intro title sits above the article-body
   intro paragraphs (the live page's "What is the state of the global
   labor market in 2026?" question). */
.v4-lmr__intro-title {
  margin: 0 0 var(--space-5);
  font-family: var(--font-display);
  font-size: clamp(28px, 3vw, 40px);
  line-height: 1.15;
  letter-spacing: -0.02em;
  font-weight: 700;
  color: var(--text-high-emphasis);
}

/* Wider full-width lede block — pulls the H2 + opening paragraph out
   of the 60/40 intro grid so the scene-setting copy reads as a magazine
   lede instead of a column paragraph. */
.v4-lmr-lede {
  max-width: none;
  margin: var(--space-6) 0 var(--space-7);
}
.v4-lmr__lede-text {
  margin: 0;
  max-width: none;
  font-family: var(--font-sans);
  font-size: var(--type-body-lg-size);
  line-height: 1.55;
  font-weight: 400;
  color: var(--text-high-emphasis);
}

/* Bulleted list of the three trends — custom small blue dot marker
   (cleaner than browser-default disc), bolder leading phrase, generous
   spacing between items. */
.v4-lmr-trends {
  list-style: none;
  padding: 0;
  margin: var(--space-6) 0;
}
.v4-lmr-trends > li {
  position: relative;
  padding-left: 24px;
  margin-top: var(--space-5);
}
.v4-lmr-trends > li:first-child { margin-top: 0; }
.v4-lmr-trends > li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 0.7em;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--li-blue-70);
}
.v4-lmr-trends > li > p {
  margin: 0;
  font-size: var(--type-body-lg-size);
  line-height: 1.55;
}

/* Two-column intro layout: article text on the left at 60%, pic01
   photo on the right at 40%. The image sits inside the right column
   and aligns vertically with the start of the numbered trend list
   (sticky-top + a slight margin offset for visual balance). Stacks
   to one column on viewports below 820px. */
.v4-lmr-intro-grid {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
  align-items: start;
  gap: clamp(24px, 4vw, 64px);
  margin: var(--space-6) 0;
}
.v4-lmr-intro-grid__text {
  min-width: 0;
}
.v4-lmr-intro-grid__visual {
  margin: 0;
  border-radius: var(--radius-lg);
  overflow: hidden;
  /* Push the image down so its top edge aligns with the top of the
     first bullet's text ("Sluggish hiring…"). The trends list itself
     has margin-top: var(--space-6) on the left side, so we match
     that here to keep the top edges flush. */
  margin-top: var(--space-6);
}
.v4-lmr-intro-grid__visual img {
  display: block;
  width: 100%;
  height: auto;
}
@media (max-width: 820px) {
  .v4-lmr-intro-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .v4-lmr-intro-grid__visual {
    margin-top: 0;
  }
}

/* Karin pullquote on the LMR page — two steps smaller than the default
   title-03 (36px) sizing used elsewhere; uses title-05 (24px) so it
   reads as featured-body emphasis, not a section headline. */
.v4-lmr__pullquote .v3-pullquote__text {
  font-size: var(--type-title-05-size);
  line-height: var(--type-title-05-lh);
}

/* Labor Market Report 2026 — full-bleed stats band. Four key trend
   numbers in a responsive grid, each with a big display percent and
   a short supporting paragraph. */
.v4-lmr-stats {
  background: var(--surface-gray-light);
  margin-block: var(--space-8);
  padding-block: clamp(48px, 6vw, 80px);
}
.v4-lmr-stats__inner {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: clamp(16px, 4vw, 96px);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-6);
}
.v4-lmr-stat {
  background: var(--li-blue-80);
  color: var(--text-inverse-high-emphasis);
  padding: var(--space-6);
  border-radius: var(--radius-lg);
}
/* Match the homepage hero counter typography (.v5-hero__counter-value):
   display font, weight 700, big clamped size, tight tracking. Number
   uses the accent yellow now that the cards sit on a navy fill, so the
   percentage pops against the dark background. */
.v4-lmr-stat__number {
  margin: 0 0 var(--space-3);
  font-family: var(--font-display);
  font-size: clamp(50px, 6.2vw, 86px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--accent-attention);
  min-width: 4ch;
}
/* % sign renders at the same size as the digits (matching how the
   homepage counters render their unit suffix inline at full size). */
.v4-lmr-stat__number span {
  font-size: inherit;
  font-weight: inherit;
  letter-spacing: inherit;
}
.v4-lmr-stat__text {
  margin: 0;
  font-size: var(--type-body-md-size);
  line-height: 1.5;
  color: var(--text-inverse-high-emphasis);
}

/* Pullquote sits below the intro grid — generous breathing room above
   so the Download CTA in the grid has plenty of space before the
   quote starts. */
.v4-lmr__pullquote {
  margin-top: clamp(64px, 7vw, 104px);
  margin-bottom: var(--space-8);
}

/* Lede sentence under the More resources heading on featured reports. */
.v4-related-topics__lede {
  margin: 0 0 var(--space-5);
  max-width: 70ch;
  font-size: var(--type-body-md-size);
  line-height: 1.5;
  color: var(--text-medium-emphasis);
}

/* "Related Topics" card grid at the bottom of each workforce-report.
   Responsive grid that lays out side-by-side on desktop (3-4 cards
   per row) and reflows to fewer columns on tablet/mobile. */
.v4-related-topics {
  max-width: 96ch;
  margin: var(--space-8) 0 var(--space-6);
  padding-top: var(--space-7);
  border-top: 1px solid var(--border-gray-light);
}
/* "--bare" modifier strips the separator + heading spacing when a page
   wants the card grid to flow directly out of the section above
   (e.g., the Labor Market Report 2026 page which already has a
   full-width stats band right above the resources). */
.v4-related-topics--bare {
  border-top: 0;
  padding-top: 0;
  /* Match the page's container-max so the resource cards fill the
     same width as the stats band above (rather than being capped at
     the article column's 96ch). */
  max-width: none;
  /* Extra breathing room above the "More resources" heading so the
     stats band and this section don't feel glued together. */
  margin-top: clamp(48px, 6vw, 80px);
}
/* On the bare variant, force exactly 4 evenly-spaced columns on desktop
   so the four featured-research resource cards always sit side-by-side
   (the default auto-fit 220px min lets them wrap to 3+1 at the 96ch
   container width). Drops to 2 on tablet, 1 on mobile. */
.v4-related-topics--bare .v4-related-topics__grid {
  grid-template-columns: repeat(4, 1fr);
}
@media (max-width: 900px) {
  .v4-related-topics--bare .v4-related-topics__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 540px) {
  .v4-related-topics--bare .v4-related-topics__grid {
    grid-template-columns: 1fr;
  }
}
.v4-related-topics__title {
  margin: 0 0 var(--space-5);
  font-family: var(--font-display);
  font-size: clamp(22px, 2.2vw, 26px);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--text-high-emphasis);
}
.v4-related-topics__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-4);
}
.v4-related-topics__card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border-gray-light);
  border-radius: var(--radius-md);
  background: #ffffff;
  overflow: hidden;
  transition: border-color 150ms ease, box-shadow 150ms ease, transform 120ms;
  transform-origin: center;
}
.v4-related-topics__card:hover {
  border-color: var(--text-link);
  box-shadow: 0 4px 12px rgba(0, 26, 60, 0.06);
  transform: scale(1.03);
}
.v4-related-topics__card-thumb {
  display: block;
  aspect-ratio: 16 / 9;
  background: var(--surface-gray-light);
  overflow: hidden;
}
.v4-related-topics__card-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 250ms ease;
}
.v4-related-topics__card:hover .v4-related-topics__card-thumb img {
  transform: scale(1.03);
}
.v4-related-topics__card-title {
  margin: 0;
  padding: var(--space-4) var(--space-4) var(--space-3);
  font-family: var(--font-display);
  font-size: var(--type-body-md-size);
  font-weight: 700;
  line-height: 1.3;
  color: var(--text-high-emphasis);
}
.v4-related-topics__card-link {
  align-self: flex-start;
  /* margin-top: auto pushes the link to the bottom of the card so the
     CTAs line up at the same height across cards with different
     title lengths. */
  margin: auto var(--space-4) var(--space-4);
  padding: 6px 16px;
  border: 1px solid var(--text-link);
  border-radius: var(--radius-full, 999px);
  color: var(--text-link);
  font-family: var(--font-display);
  font-size: var(--type-body-sm-size);
  font-weight: 600;
  text-decoration: none;
  transition: background-color 150ms ease, color 150ms ease;
}
.v4-related-topics__card-link:hover,
.v4-related-topics__card-link:focus-visible {
  background: var(--text-link);
  color: #ffffff;
  outline: none;
}

/* Workforce-report article variant — wider column than the default
   blog article (84ch → 96ch) so dense data-table rows and stat-heavy
   prose breathe more. Scoped via .v4-article--report so blog articles
   keep their existing width. */
.v4-article--report .v4-article-meta,
.v4-article--report .v4-article__body,
.v4-article--report .v4-article__inline-image,
.v4-article--report .v4-article__hero-image,
.v4-article--report .v4-article-back,
.v4-article--report .v4-report-table-wrap {
  max-width: 96ch;
}

/* Workforce-report data table — wide industry/month tables that won't
   fit in the article column. Wrap in a horizontal-scroll region so the
   reader can pan across without breaking page layout. */
.v4-report-table-wrap {
  max-width: 84ch;
  margin: var(--space-7) 0;
  overflow-x: auto;
  border: 1px solid var(--border-gray-light);
  border-radius: var(--radius-md);
}
.v4-report-table {
  width: 100%;
  min-width: 720px;
  border-collapse: collapse;
  font-size: var(--type-body-md-size);
  font-family: var(--font-sans);
}
.v4-report-table th,
.v4-report-table td {
  padding: 10px 14px;
  text-align: right;
  border-bottom: 1px solid var(--border-gray-light);
  white-space: nowrap;
}
.v4-report-table thead th {
  background: var(--surface-gray-mid, #f3f6f8);
  font-weight: 700;
  font-family: var(--font-display);
  border-bottom-width: 2px;
}
.v4-report-table tbody th {
  text-align: left;
  font-weight: 600;
  white-space: normal;
  min-width: 200px;
}
.v4-report-table tbody tr:last-child th,
.v4-report-table tbody tr:last-child td {
  border-bottom: 0;
}
.v4-report-table tbody tr:hover {
  background: var(--li-blue-10);
}
.v4-report-table tbody tr:hover th {
  background: var(--li-blue-10);
  color: var(--li-blue-70);
}

/* "Editor's pick" badge on the top 3 cards of the blog archive — small
   yellow pill that sits at the top of the card body, above the title. */
.v3-card__badge--pick {
  align-self: flex-start;
  padding: 4px 12px;
  border-radius: var(--radius-sm);
  background: var(--accent-attention);
  color: var(--text-high-emphasis);
  font-family: var(--font-display);
  font-size: var(--type-body-sm-size);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* Homepage partner logos sit inside wider tiles (10-col layout, 2 cols
   per card) than the partnership-program page (4 cols even). Bump the
   logo size so they fill the tile better. Every logo gets the SAME
   height — equal-weight reading across the row. */
.v4-partners__grid:not(.v4-partners__grid--even) .v4-partner__logo {
  /* Homepage partner row — push logos large enough to dominate their
     tiles. Most source PNGs ship with internal whitespace so the
     scale-up compensates and the artwork itself reads big. */
  transform: scale(2.15);
}
/* World Bank, ILO, and NLC PNGs have noticeably more internal
   whitespace than the rest, so they read smaller at the shared scale.
   Bump each of them an extra notch so the artwork matches the visual
   weight of the other six logos. */
.v4-partners__grid:not(.v4-partners__grid--even) .v4-partner__logo[src*="world-bank"],
.v4-partners__grid:not(.v4-partners__grid--even) .v4-partner__logo[src*="ilo"],
.v4-partners__grid:not(.v4-partners__grid--even) .v4-partner__logo[src*="nlc"] {
  transform: scale(2.6);
}
.v4-partners__grid:not(.v4-partners__grid--even) .v4-partner {
  /* Taller tiles so the hover caption — partner name +
     full-sentence description — has room and isn't clipped by the card's
     overflow:hidden. Zero padding still lets the logo claim the width. */
  aspect-ratio: 20 / 9;
  padding: 0;
}
/* Narrow 2-column cards on phones wrap the description to several lines,
   so give them near-square tiles and a more compact caption so the
   rollover text fits inside the container. */
@media (max-width: 639px) {
  .v4-partners__grid:not(.v4-partners__grid--even) .v4-partner {
    aspect-ratio: 5 / 6;
  }
  .v4-partners__grid:not(.v4-partners__grid--even) .v4-partner__name {
    font-size: var(--type-body-lg-size);
    line-height: 1.2;
  }
  .v4-partners__grid:not(.v4-partners__grid--even) .v4-partner__desc {
    font-size: var(--type-body-sm-size);
    line-height: 1.35;
  }
  .v4-partners__grid:not(.v4-partners__grid--even) .v4-partner__caption {
    padding: var(--space-2) var(--space-3);
    gap: var(--space-1);
  }
}

/* Ticker (site-wide) — recolor the stat labels + values from inverse-high
   (white) to --li-blue-30. .v4-ticker__change pill keeps its existing
   lighter accent blue. */
.v4-ticker .v4-ticker__item,
.v4-ticker .v4-ticker__item span:not(.v4-ticker__change) {
  color: var(--li-blue-30);
}


/* ===== ergi-augment.css ===== */
/* ============================================================
 * augment.css — ERGI sanitizer-bypass augmentation
 * ============================================================
 * Loaded via DAM + page-template clientlib (Pablo's path).
 * Targets the `.ergi-*` classes already in the canonical embed
 * pages at github.com/linkedin-sandbox/Web-UX-ERGI-concepts/
 * tree/justin/lem-embed-pages-wip/lem-embed-pages/
 *
 * Purpose: restore the small set of CSS features the LEM HTML
 * Embed sanitizer strips — position, z-index, @keyframes,
 * @media, transitions, transform — without re-shipping the
 * full 212 KB prototype stylesheet.
 *
 * Last tested in browser: 2026-06-22
 * ============================================================ */


/* ============================================================
 * 1. NAVIGATION — dropdown overlay (replaces push-down behavior)
 * ============================================================
 * Today the .ergi-nav-dd dropdown pushes the hero down on hover
 * because position:absolute is stripped from inline <style>.
 * Restored here. .ergi-nav-shell already exists in nav.html
 * partial and wraps both the bar and the dropdown.
 * ============================================================ */
.ergi-nav-shell {
  position: relative;
  z-index: 50;
}

.ergi-nav-dd {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 100;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
}

/* Smooth fade on dropdown open */
.ergi-nav-dd {
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity 160ms ease-out, transform 160ms ease-out;
  pointer-events: none;
}
.ergi-nav-shell:hover .ergi-nav-dd {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* Trigger arrow rotation on hover */
.ergi-nav-trigger {
  display: inline-block;
  transition: color 160ms ease-out;
}


/* ============================================================
 * 2. TICKER — horizontal marquee scroll
 * ============================================================
 * Requires DOM hook: wrap the inline ticker contents in
 *   <div class="ergi-ticker"><div class="ergi-ticker-track">...</div></div>
 * The track should duplicate its content twice so the loop
 * is seamless. Sanitizer drops display:flex on the track
 * but inline display:inline-block on each <span> child works.
 * ============================================================ */
.ergi-ticker {
  overflow: hidden;
  white-space: nowrap;
}

.ergi-ticker-track {
  display: inline-block;
  animation: ergi-ticker-scroll 45s linear infinite;
  will-change: transform;
}

.ergi-ticker:hover .ergi-ticker-track {
  animation-play-state: paused;
}

@keyframes ergi-ticker-scroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}


/* ============================================================
 * 3. CARD GRID — flex layout (replaces <table> fallback)
 * ============================================================
 * Requires DOM hook: wrap the existing card row in
 *   <div class="ergi-card-grid">…</div>
 * and give each card .ergi-card. The current <table> layout
 * still works as a graceful fallback if this CSS doesn't load.
 * ============================================================ */
.ergi-card-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  align-items: stretch;
  justify-content: flex-start;
}

.ergi-card {
  flex: 1 1 calc(33.333% - 16px);
  min-width: 280px;
  max-width: 360px;
  transition: transform 200ms ease-out, box-shadow 200ms ease-out;
}

.ergi-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
}


/* ============================================================
 * 4. KPI COUNTER — count-up easing
 * ============================================================
 * Requires DOM hook: each KPI number wrapped in
 *   <span class="ergi-kpi-num" data-target="1300000000">0</span>
 * bundle.js handles the actual count animation; this just
 * makes the final-state number feel emphasized.
 * ============================================================ */
.ergi-kpi-num {
  display: inline-block;
  transition: color 240ms ease-out;
}


/* ============================================================
 * 5. RESPONSIVE BREAKPOINTS
 * ============================================================
 * Sanitizer strips @media inline; restored here.
 * ============================================================ */

/* Tablet — drop nav to single line, shrink hero */
@media (max-width: 960px) {
  .ergi-nav-dd {
    position: static;
    box-shadow: none;
    opacity: 1;
    transform: none;
    pointer-events: auto;
  }
  .ergi-card {
    flex: 1 1 calc(50% - 12px);
  }
}

/* Mobile — single column for everything */
@media (max-width: 640px) {
  .ergi-card-grid {
    flex-direction: column;
    gap: 16px;
  }
  .ergi-card {
    flex: 1 1 100%;
    max-width: 100%;
  }
  .ergi-ticker-track {
    animation-duration: 25s;
  }
}


/* ============================================================
 * 6. cmp-button hover polish
 * ============================================================
 * LEM's clientlib gives us padding & base styles for cmp-button.
 * We add the subtle hover lift.
 * ============================================================ */
.cmp-button {
  transition: transform 120ms ease-out, box-shadow 120ms ease-out, background-color 120ms ease-out;
}
.cmp-button:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}


/* ============================================================
 * 7. Hero subtle reveal on load
 * ============================================================
 * Requires DOM hook: hero outer <div class="ergi-hero">
 * Animation is one-shot, runs on page load.
 * ============================================================ */
.ergi-hero {
  animation: ergi-hero-fade-in 600ms ease-out 100ms both;
}

@keyframes ergi-hero-fade-in {
  0%   { opacity: 0; transform: translateY(8px); }
  100% { opacity: 1; transform: translateY(0); }
}


/* ============================================================
 * 8. HOMEPAGE CTA / LINK / CAROUSEL-ARROW OVERRIDES (v1-3 design)
 * ============================================================
 * Enforces the v1-3 homepage design: CTA pills are solid LinkedIn blue
 * with no outline, anchor CTAs and inline links never show a hover
 * underline (LEM's platform stylesheet injects one on every <a>), and the
 * carousel arrow is sized correctly on the sanitized text-glyph path.
 * Placed at end of file so these win the cascade against the earlier
 * generated/duplicated selectors without editing those blocks. */

/* Partner / section CTA pills -> solid LinkedIn blue (v1-3), no border */
.v4-partners__cta .v4-jump-btn {
  background: #0a66c2;
  color: #ffffff;
  border: none;
}
.v4-partners__cta .v4-jump-btn:hover {
  background: #2a7bd2;
  color: #ffffff;
}
.v4-partners__cta .v4-jump-btn__icon {
  background: #001a3c;
}

/* All jump-btn CTAs: drop the 1px outline (v1-3 has none) */
.v4-jump-btn {
  border: none;
}
/* The secondary "Learn more" CTA is borderless in v1-3. This 0,2,0
   selector is required to beat the earlier .v4-section-cta--outline rule
   that sets a 1px outline; --outline is used only on that one CTA
   (partnership-program), so this does not affect other buttons. */
.v4-jump-btn.v4-section-cta--outline,
.v4-jump-btn.v4-section-cta--outline:hover {
  border: none;
}

/* Remove hover underlines LEM's platform CSS injects on anchor CTAs and
   inline links (v1-3 uses a color change only, never an underline) */
.v4-jump-btn:hover,
.v3-link:hover,
.lem-footer a:hover,
.lem-nav__link:hover,
.v4-follow-pill:hover,
.lem-button:hover {
  text-decoration: none;
}

/* Carousel arrows: the embed sanitizer strips the inline <svg> glyph, so
   the .eg-glyph text-arrow fallback renders at the inherited 16px and
   looks too small. Size it to match the prototype's 22px SVG arrow. */
.v5-cardstack__nav .eg-glyph {
  font-size: 22px;
  line-height: 1;
}
/* Match the 640px carousel breakpoint (SVG arrows shrink to 18px there) so
   the text-glyph fallback isn't oversized on mobile. */
@media (max-width: 640px) {
  .v5-cardstack__nav .eg-glyph {
    font-size: 18px;
  }
}


/* ============================================================
 * 9. ACCORDION (button variant), QUICK-CARD GRID, MOBILE NAV
 * ============================================================
 * Overrides that layer on top of the generated blocks above; scoping
 * rationale is documented inline per rule group. */

/* --- Button-based accordions (Partnership Program) -----------------------
 * Where the LEM embed sanitizer strips native <details>/<summary>, the
 * accordion is authored as <div class="lem-accordion__item"> +
 * <button class="lem-accordion__summary"> and toggled by bundle.js via an
 * .is-open class on the item. Every selector below is scoped to
 * `button.lem-accordion__summary` so the clientlib's native
 * <details>/<summary> accordions (which reflect open state through the
 * [open] attribute) keep their own styling and toggle behavior. The panel
 * collapses only when it follows our button, so markup with no such button
 * (e.g. orphaned panels left after the sanitizer strips <details>) stays
 * expanded rather than hidden with no way to open it. */
button.lem-accordion__summary {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  margin: 0;
  background: transparent;
  border: 0;
  font-family: inherit;
  text-align: left;
}
button.lem-accordion__summary ~ .lem-accordion__panel {
  display: none;
}
.lem-accordion__item.is-open > .lem-accordion__panel {
  display: block;
}
button.lem-accordion__summary .eg-glyph {
  transition: transform 200ms ease;
}
.lem-accordion__item.is-open > button.lem-accordion__summary .eg-glyph {
  transform: rotate(180deg);
}

/* --- Workforce "Explore what's next" quick-cards -------------------------
 * Walter: card text should be ONE dark color, turning blue on hover; and the
 * card menu must single-stack on mobile. A later "@media (max-width:900px)
 * { repeat(2,1fr) }" rule was overriding the earlier "@media (max-width:520px)
 * { 1fr }" rule, leaving two cramped columns on phones (cards cut off on the
 * right). Being last, this restores the single column below 600px. */
.v4-quick-card,
.v4-quick-card .v4-quick-card__label,
.v4-quick-card .eg-glyph {
  color: rgba(0, 0, 0, 0.9);
}
.v4-quick-card:hover .v4-quick-card__label,
.v4-quick-card:hover .eg-glyph {
  color: #0a66c2;
}
@media (max-width: 600px) {
  .v4-quick-cards { grid-template-columns: 1fr; }
}

/* --- Mobile nav hamburger -------------------------------------------------
 * Walter: the hamburger glyph looks too small on mobile. The button only
 * shows below 1024px; bump the ☰ glyph size there. */
@media (max-width: 1023px) {
  .lem-nav__menu .eg-glyph {
    font-size: 28px;
    line-height: 1;
  }
}