/* Home V4 — shared primitives: page tokens, header overlay, buttons, section heads,
   inline links, episode cards and stat pairs used across several sections.
   The page tokens and the header-over-indigo-hero treatment are shared with the
   Developer Intelligence page (.page-dev-intel). */

:is(.leaddev-page, .page-home-v4, .page-dev-intel, .page-router, .page-readiness, .page-effectiveness, .page-telemetry, .page-askai, .page-workgraph, .page-aiimpact, .page-homepage, .page-wfi, .page-spend-insights, .page-ai-impact, .page-ai-adoption, .page-ai-fluency) {
  --v4-indigo-900: #1a1560;
  --v4-indigo-800: #241e7a;
  --v4-indigo-700: #312aa0;
  --v4-indigo-600: #4038b8;
  --v4-highlight: #c9c4ff;
  --v4-glow: rgba(142, 135, 254, 0.34);
  --v4-ink: #1b242c;
  --v4-body: #4a545e;
  --v4-muted: #6b7585;
  --v4-tint: #f6f8fc;
  --v4-hairline: #e0e4ec;
  --v4-accent: var(--color-purple-600);

  background: var(--color-white);
}

/* -- Header overlays the indigo hero on this page --------------------------- */

:is(.leaddev-page, .page-home-v4, .page-dev-intel, .page-router, .page-readiness, .page-effectiveness, .page-telemetry, .page-askai, .page-workgraph, .page-aiimpact, .page-homepage, .page-wfi, .page-spend-insights, .page-ai-impact, .page-ai-adoption, .page-ai-fluency) .site-header {
  position: absolute;
  inset: 0 0 auto;
  background: transparent;
  border-bottom: 0;
}

/* The design has no announcement bar above the hero. */
:is(.leaddev-page, .page-home-v4, .page-dev-intel, .page-router, .page-readiness, .page-effectiveness, .page-telemetry, .page-askai, .page-workgraph, .page-aiimpact, .page-homepage, .page-wfi, .page-spend-insights, .page-ai-impact, .page-ai-adoption, .page-ai-fluency) .header-announcement {
  display: none;
}

:is(.leaddev-page, .page-home-v4, .page-dev-intel, .page-router, .page-readiness, .page-effectiveness, .page-telemetry, .page-askai, .page-workgraph, .page-aiimpact, .page-homepage, .page-wfi, .page-spend-insights, .page-ai-impact, .page-ai-adoption, .page-ai-fluency) .navbar {
  min-height: 60px;
}

:is(.leaddev-page, .page-home-v4, .page-dev-intel, .page-router, .page-readiness, .page-effectiveness, .page-telemetry, .page-askai, .page-workgraph, .page-aiimpact, .page-homepage, .page-wfi, .page-spend-insights, .page-ai-impact, .page-ai-adoption, .page-ai-fluency) .navbar__logo-img {
  content: url('/assets/img/logo-footer.webp');
}

:is(.leaddev-page, .page-home-v4, .page-dev-intel, .page-router, .page-readiness, .page-effectiveness, .page-telemetry, .page-askai, .page-workgraph, .page-aiimpact, .page-homepage, .page-wfi, .page-spend-insights, .page-ai-impact, .page-ai-adoption, .page-ai-fluency) .navbar__trigger,
:is(.leaddev-page, .page-home-v4, .page-dev-intel, .page-router, .page-readiness, .page-effectiveness, .page-telemetry, .page-askai, .page-workgraph, .page-aiimpact, .page-homepage, .page-wfi, .page-spend-insights, .page-ai-impact, .page-ai-adoption, .page-ai-fluency) .navbar__nav--desktop a {
  color: var(--color-white);
}

:is(.leaddev-page, .page-home-v4, .page-dev-intel, .page-router, .page-readiness, .page-effectiveness, .page-telemetry, .page-askai, .page-workgraph, .page-aiimpact, .page-homepage, .page-wfi, .page-spend-insights, .page-ai-impact, .page-ai-adoption, .page-ai-fluency) .navbar__trigger:hover,
:is(.leaddev-page, .page-home-v4, .page-dev-intel, .page-router, .page-readiness, .page-effectiveness, .page-telemetry, .page-askai, .page-workgraph, .page-aiimpact, .page-homepage, .page-wfi, .page-spend-insights, .page-ai-impact, .page-ai-adoption, .page-ai-fluency) .navbar__item--open .navbar__trigger {
  background: transparent;
  color: var(--v4-highlight);
}

:is(.leaddev-page, .page-home-v4, .page-dev-intel, .page-router, .page-readiness, .page-effectiveness, .page-telemetry, .page-askai, .page-workgraph, .page-aiimpact, .page-homepage, .page-wfi, .page-spend-insights, .page-ai-impact, .page-ai-adoption, .page-ai-fluency) .navbar__chevron {
  color: currentColor;
}

:is(.leaddev-page, .page-home-v4, .page-dev-intel, .page-router, .page-readiness, .page-effectiveness, .page-telemetry, .page-askai, .page-workgraph, .page-aiimpact, .page-homepage, .page-wfi, .page-spend-insights, .page-ai-impact, .page-ai-adoption, .page-ai-fluency) .navbar__menu-toggle {
  color: var(--color-white);
}

:is(.leaddev-page, .page-home-v4, .page-dev-intel, .page-router, .page-readiness, .page-effectiveness, .page-telemetry, .page-askai, .page-workgraph, .page-aiimpact, .page-homepage, .page-wfi, .page-spend-insights, .page-ai-impact, .page-ai-adoption, .page-ai-fluency) .navbar__cta--desktop .btn {
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.22);
  color: var(--color-white);
}

:is(.leaddev-page, .page-home-v4, .page-dev-intel, .page-router, .page-readiness, .page-effectiveness, .page-telemetry, .page-askai, .page-workgraph, .page-aiimpact, .page-homepage, .page-wfi, .page-spend-insights, .page-ai-impact, .page-ai-adoption, .page-ai-fluency) .navbar__cta--desktop .btn:hover {
  background: rgba(255, 255, 255, 0.2);
}

/* Submenus and the mobile drawer keep their light treatment for legibility. */
:is(.leaddev-page, .page-home-v4, .page-dev-intel, .page-router, .page-readiness, .page-effectiveness, .page-telemetry, .page-askai, .page-workgraph, .page-aiimpact, .page-homepage, .page-wfi, .page-spend-insights, .page-ai-impact, .page-ai-adoption, .page-ai-fluency) .navbar__submenu,
:is(.leaddev-page, .page-home-v4, .page-dev-intel, .page-router, .page-readiness, .page-effectiveness, .page-telemetry, .page-askai, .page-workgraph, .page-aiimpact, .page-homepage, .page-wfi, .page-spend-insights, .page-ai-impact, .page-ai-adoption, .page-ai-fluency) .navbar__drawer {
  color: var(--v4-ink);
}

:is(.leaddev-page, .page-home-v4, .page-dev-intel, .page-router, .page-readiness, .page-effectiveness, .page-telemetry, .page-askai, .page-workgraph, .page-aiimpact, .page-homepage, .page-wfi, .page-spend-insights, .page-ai-impact, .page-ai-adoption, .page-ai-fluency) .navbar__nav--desktop .navbar__submenu-link,
:is(.leaddev-page, .page-home-v4, .page-dev-intel, .page-router, .page-readiness, .page-effectiveness, .page-telemetry, .page-askai, .page-workgraph, .page-aiimpact, .page-homepage, .page-wfi, .page-spend-insights, .page-ai-impact, .page-ai-adoption, .page-ai-fluency) .navbar__nav--desktop .navbar__mega-item,
:is(.leaddev-page, .page-home-v4, .page-dev-intel, .page-router, .page-readiness, .page-effectiveness, .page-telemetry, .page-askai, .page-workgraph, .page-aiimpact, .page-homepage, .page-wfi, .page-spend-insights, .page-ai-impact, .page-ai-adoption, .page-ai-fluency) .navbar__nav--desktop .navbar__mega-header,
:is(.leaddev-page, .page-home-v4, .page-dev-intel, .page-router, .page-readiness, .page-effectiveness, .page-telemetry, .page-askai, .page-workgraph, .page-aiimpact, .page-homepage, .page-wfi, .page-spend-insights, .page-ai-impact, .page-ai-adoption, .page-ai-fluency) .navbar__nav--desktop .navbar__mega-footer,
:is(.leaddev-page, .page-home-v4, .page-dev-intel, .page-router, .page-readiness, .page-effectiveness, .page-telemetry, .page-askai, .page-workgraph, .page-aiimpact, .page-homepage, .page-wfi, .page-spend-insights, .page-ai-impact, .page-ai-adoption, .page-ai-fluency) .navbar__mobile-trigger,
:is(.leaddev-page, .page-home-v4, .page-dev-intel, .page-router, .page-readiness, .page-effectiveness, .page-telemetry, .page-askai, .page-workgraph, .page-aiimpact, .page-homepage, .page-wfi, .page-spend-insights, .page-ai-impact, .page-ai-adoption, .page-ai-fluency) .navbar__mobile-link,
:is(.leaddev-page, .page-home-v4, .page-dev-intel, .page-router, .page-readiness, .page-effectiveness, .page-telemetry, .page-askai, .page-workgraph, .page-aiimpact, .page-homepage, .page-wfi, .page-spend-insights, .page-ai-impact, .page-ai-adoption, .page-ai-fluency) .navbar__mobile-back,
:is(.leaddev-page, .page-home-v4, .page-dev-intel, .page-router, .page-readiness, .page-effectiveness, .page-telemetry, .page-askai, .page-workgraph, .page-aiimpact, .page-homepage, .page-wfi, .page-spend-insights, .page-ai-impact, .page-ai-adoption, .page-ai-fluency) .navbar__drawer-close {
  color: var(--v4-ink);
}

/* -- Buttons ---------------------------------------------------------------- */

.v4btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 24px;
  border-radius: 10px;
  font-size: var(--text-ui);
  font-weight: 500;
  line-height: var(--leading-ui);
  text-decoration: none;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

.v4btn--inverse {
  background: var(--color-white);
  color: var(--v4-indigo-600);
}

.v4btn--inverse:hover {
  background: #eeedfe;
}

.v4btn--ghost {
  border: 1px solid rgba(255, 255, 255, 0.28);
  color: var(--color-white);
}

.v4btn--ghost:hover {
  border-color: rgba(255, 255, 255, 0.6);
  background: rgba(255, 255, 255, 0.08);
}

.v4btn--lg {
  padding: 15px 26px;
  font-size: var(--text-ui);
}

/* -- Section header --------------------------------------------------------- */

.v4head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  text-align: center;
}

.v4head__eyebrow {
  margin: 0;
  color: var(--v4-accent);
  font-size: var(--text-caption);
  font-weight: 500;
  letter-spacing: 0.96px;
}

.v4head__title {
  margin: 0;
  max-width: 720px;
  color: var(--v4-ink);
  font-size: var(--text-section);
  font-weight: 400;
  line-height: var(--leading-section);
  letter-spacing: var(--tracking-display); font-family: var(--font-display); }

.v4head__title em {
  color: var(--v4-accent);
  font-style: normal;
}

.v4head__sub {
  margin: 0;
  max-width: 620px;
  color: var(--v4-body);
  font-size: var(--text-body);
  line-height: var(--leading-body);
}

/* -- Inline "Explore …" link ------------------------------------------------ */

.v4story__link,
.v4pillar__link,
.v4persona__link {
  color: var(--v4-accent);
  font-size: var(--text-secondary);
  font-weight: 500;
  text-decoration: none;
}

.v4story__link:hover,
.v4pillar__link:hover,
.v4persona__link:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* -- Episode card ----------------------------------------------------------- */

.v4episode {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 12px;
  border-radius: 12px;
  background: var(--v4-tint);
  text-decoration: none;
  transition: background-color 0.15s ease;
}

.v4episode:hover {
  background: #eef1f7;
}

.v4episode--list {
  background: var(--v4-tint);
}

.v4episode__thumb {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 96px;
  height: 60px;
  border-radius: 8px;
  background: linear-gradient(228.7deg, #fdf2f9 5.7%, #dbeafe 41%, #dfddff 68.4%, #fdf2f8 96.3%);
}

.v4episode__meta {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.v4episode__kicker {
  color: var(--v4-muted);
  font-size: var(--text-caption);
  font-weight: 500;
  letter-spacing: 0.6px;
}

.v4episode__title {
  color: var(--v4-ink);
  font-size: var(--text-secondary);
  font-weight: 500;
}

.v4episode__guest {
  color: #4348ef;
  font-size: var(--text-secondary);
  font-weight: 500;
}

/* -- Stat pair -------------------------------------------------------------- */

.v4stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.v4stat--left {
  align-items: flex-start;
  text-align: left;
}

.v4stat__value {
  color: var(--color-blue-600);
  font-size: var(--text-section);
  font-weight: 600;
  line-height: var(--leading-section);
  letter-spacing: -0.96px;
}

.v4stat__label {
  margin: 0;
  max-width: 214px;
  color: var(--v4-ink);
  font-size: var(--text-body);
  line-height: var(--leading-body);
}

@media (max-width: 768px) {
  .v4head__title {
    font-size: var(--text-section);
    letter-spacing: var(--tracking-display); font-family: var(--font-display); font-weight: 400; }

  .v4stat__value {
    font-size: var(--text-section);
    line-height: var(--leading-section);
  }
}