/* Developer Intelligence — section layouts. Desktop matches the 1440 canvas; the
   responsive pass lives in responsive.css. */

:is(.leaddev-page, .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) {
  --di-indigo-900: #1a1560;
  --di-indigo-800: #241e7a;
  --di-indigo-700: #312aa0;
  --di-indigo-600: #4038b8;
  --di-accent: #4C45C0;
  --di-accent-deep: #3B359A;
  --di-highlight: #c9c4ff;
  --di-ink: #1b242c;
  --di-body: #4a545e;
  --di-muted: #6b7585;
  --di-tint: #f6f8fc;
  --di-hairline: #e0e4ec;
}

/* -- Header on this page: same overlay treatment as Home V4, plus the CTA trio -- */
:is(.leaddev-page, .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__signin { padding: 0 8px; color: rgba(255, 255, 255, 0.85); font-size: var(--text-secondary); font-weight: 500; }
:is(.leaddev-page, .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__signin:hover { color: #ffffff; }
@media (min-width: 901px) { :is(.leaddev-page, .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 { display: flex; align-items: center; gap: 12px; } }
:is(.leaddev-page, .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 { padding: 10px 20px; border-radius: 0; }
:is(.leaddev-page, .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--inverse { background: #ffffff; border-color: #ffffff; color: var(--di-indigo-600); }
:is(.leaddev-page, .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--inverse:hover { background: #eeedfe; opacity: 1; }
:is(.leaddev-page, .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 svg { margin-left: 8px; }

/* -- Shared pieces -- */
.di-texture { position: absolute; inset: 0; background-image: url('/assets/img/home-v4/hero-grid.svg'); background-size: cover; background-position: center; pointer-events: none; z-index: 0; }
.di-texture--cta { background-image: url('/assets/img/home-v4/cta-grid.svg'); }
.di-section { padding-top: 80px; padding-bottom: 80px; }
.di-section--traces { padding-top: 88px; }
:is(.leaddev-page, .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) .feature-title.feature-title--xl { font-size: var(--text-section); letter-spacing: -0.7px; }
:is(.leaddev-page, .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) .feature-title.feature-title--md { font-size: var(--text-metric); line-height: var(--leading-metric); letter-spacing: -0.5px; }
:is(.leaddev-page, .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) .feature-title.feature-title--inverse { color: #ffffff; }
:is(.leaddev-page, .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) .travel { position: absolute; top: 15px; left: 8%; width: 12px; height: 12px; opacity: 0; }
.di-head2 { display: grid; grid-template-columns: minmax(0, 560px) minmax(0, 1fr); gap: 64px; align-items: end; }
.di-center-head { position: relative; display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; }
.di-center-head--inverse { gap: 14px; max-width: 860px; margin: 0 auto; }
.page-dev-intel .panel { width: 100%; max-width: 1200px; height: 560px; margin-top: 40px; }
.page-dev-intel .panel--impact { height: 640px; }
.page-dev-intel .panel--traces { height: 780px; }
.page-dev-intel .panel--ask { height: 560px; }
.page-dev-intel .panel--router { max-width: 696px; height: 696px; margin: 0 0 0 auto; }
.page-dev-intel .panel--dept { max-width: 660px; height: 760px; margin: 0; }
.page-dev-intel .tbl-wrap { width: 100%; min-width: 0; max-width: 100%; }

/* -- Hero -- */
.di-hero { position: relative; isolation: isolate; overflow: hidden; padding: 148px 0 132px; background: radial-gradient(ellipse 1364px 815px at 50% 105%, rgba(142, 135, 254, 0.34) 0%, rgba(142, 135, 254, 0) 100%), linear-gradient(180deg, var(--di-indigo-900) 0%, var(--di-indigo-800) 50%, var(--di-indigo-600) 100%); }
.di-hero__inner { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 695px) minmax(0, 448px); justify-content: space-between; align-items: start; gap: 48px; }
.di-hero__copy { display: flex; flex-direction: column; align-items: flex-start; gap: 26px; padding-top: 20px; }
.di-hero__eyebrow { display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; border: 1px solid rgba(255, 255, 255, 0.16); background: rgba(255, 255, 255, 0.10); color: rgba(255, 255, 255, 0.92); font-size: var(--text-secondary); line-height: var(--leading-secondary); font-weight: 500; }
.di-hero__eyebrow-dot { width: 6px; height: 6px; background: #8e87fe; }
.di-hero__title { max-width: 695px; color: #ffffff; font-size: var(--text-hero); line-height: var(--leading-hero); font-weight: 400; letter-spacing: var(--tracking-display); font-family: var(--font-display); }
.di-hero__title em { color: var(--di-highlight); font-style: normal; }
.di-hero__sub { max-width: 600px; color: rgba(255, 255, 255, 0.82); font-size: var(--text-lead); line-height: var(--leading-lead); letter-spacing: var(--tracking-body); }
.di-hero__actions { display: flex; flex-wrap: wrap; gap: 12px; }
.di-hero__ticker { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; color: rgba(255, 255, 255, 0.6); font-size: var(--text-secondary); line-height: var(--leading-secondary); }
.di-hero__ticker-dot { width: 7px; height: 7px; background: #75cc9e; }
.di-hero__ticker-sep { padding: 0 4px; }
.di-hero__card { width: 100%; max-width: 448px; padding: 20px 20px 18px; background: #ffffff; box-shadow: 0 24px 60px rgba(10, 13, 40, 0.28); display: flex; flex-direction: column; gap: 14px; justify-self: end; }
.di-hero__card svg { display: block; }

/* -- Trusted by -- */
.di-logos { padding: 64px 0 24px; }
.di-logos__inner { display: flex; flex-direction: column; align-items: center; gap: 32px; }
.di-logos__title { color: var(--di-ink); font-size: var(--text-secondary); line-height: var(--leading-secondary); font-weight: 500; letter-spacing: 0.5px; text-transform: uppercase; }

/* -- Overview -- */
.di-overview { display: flex; flex-direction: column; gap: 36px; padding-top: 64px; padding-bottom: 0; }
.di-overview__title { max-width: 960px; }
.di-pillars { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; }

/* -- Smart Router band -- */
.di-router { background: var(--di-tint); padding: 88px 0 80px; }
.di-router__grid { display: grid; grid-template-columns: minmax(0, 424px) minmax(0, 1fr); gap: 80px; align-items: center; }
.di-router__chart-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.di-router__legend { display: flex; gap: 12px; font-size: var(--text-caption); line-height: var(--leading-caption); color: var(--di-body); }
.di-sbars { display: flex; align-items: flex-end; justify-content: space-between; height: 104px; padding: 0 2px; }
.di-sbars .sbar { width: 30px; }

/* -- Agent Traces window -- */
.di-traces__split { flex: 1; min-height: 0; display: flex; }
.di-traces__list { flex: 1; min-width: 0; padding: 24px 26px 18px 32px; display: flex; flex-direction: column; gap: 14px; }
.di-traces__side { width: 500px; flex: none; padding: 22px 26px 20px; border-left: 1px solid var(--di-hairline); background: #fbfbfd; display: flex; flex-direction: column; gap: 12px; }
.di-ttiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border: 1px solid var(--di-hairline); background: #ffffff; }

/* -- Telemetry band -- */
.di-telemetry { position: relative; isolation: isolate; overflow: hidden; padding: 96px 0; background: radial-gradient(ellipse 1125px 520px at 50% 112%, rgba(142, 135, 254, 0.32) 0%, rgba(142, 135, 254, 0) 100%), linear-gradient(180deg, var(--di-indigo-900) 0%, var(--di-indigo-800) 60%, var(--di-indigo-700) 100%); }
.di-telemetry__inner { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 44px; }
.di-signals { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 4px; }
.page-dev-intel .win-solo { position: relative; left: auto; top: auto; width: 100%; max-width: 1200px; height: 560px; box-shadow: 0 30px 80px rgba(10, 13, 40, 0.45); }
.di-stages { position: relative; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; padding-top: 6px; }
.di-sigs { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; flex: 1; }
.page-dev-intel .band--telemetry { padding: 18px 28px; gap: 40px; align-items: center; }

/* -- Ask AI -- */
.di-ask__stage { position: relative; flex: 1; min-height: 0; }
.di-ask__works { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 26px; }

/* -- Security -- */
.di-security { display: flex; flex-direction: column; gap: 40px; padding-top: 80px; padding-bottom: 96px; border-top: 1px solid var(--di-hairline); }
.di-sec-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.di-sec-items { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; }
.page-dev-intel .sec-item--rule { padding-left: 24px; border-left: 1px solid var(--di-hairline); }
.page-dev-intel .sec-item--rule:last-child { padding-right: 0; }

/* -- Every department band -- */
.di-dept { background: var(--di-tint); border-top: 1px solid var(--di-hairline); padding: 88px 0 96px; }
.di-dept__grid { display: grid; grid-template-columns: minmax(0, 660px) minmax(0, 1fr); gap: 72px; align-items: center; }
.di-dept__copy { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.di-xsells { display: flex; flex-direction: column; align-self: stretch; margin-top: 12px; }

/* -- Split CTA -- */
.di-cta { position: relative; isolation: isolate; overflow: hidden; padding: 48px 0; background: radial-gradient(ellipse 1125px 520px at 50% 112%, rgba(142, 135, 254, 0.32) 0%, rgba(142, 135, 254, 0) 100%), linear-gradient(180deg, var(--di-indigo-700) 0%, var(--di-indigo-600) 100%); }
.di-cta__inner { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 40px; }
.di-cta__copy { display: flex; flex-direction: column; gap: 8px; max-width: 820px; }
.di-cta__title { color: #ffffff; font-size: var(--text-section); line-height: var(--leading-section); font-weight: 400; letter-spacing: var(--tracking-display); font-family: var(--font-display); }
.di-cta__sub { color: rgba(255, 255, 255, 0.82); font-size: var(--text-secondary); line-height: var(--leading-secondary); }
.di-cta__actions { display: flex; flex-wrap: wrap; gap: 12px; flex: none; }

/* -- Centered hero variant (SDLC Telemetry, Ask AI) -- */
.di-hero--center .di-hero__inner { display: flex; flex-direction: column; align-items: center; }
.di-hero--center .di-hero__copy { align-items: center; text-align: center; gap: 24px; padding-top: 0; max-width: 1000px; }
.di-hero--center .di-hero__title { max-width: 900px; font-size: var(--text-hero); letter-spacing: var(--tracking-display); font-family: var(--font-display); font-weight: 400; }
.di-hero--center .di-hero__sub { max-width: 760px; }
.di-hero--center .di-hero__actions, .di-hero--center .di-hero__ticker { justify-content: center; }