/* 51 Intel colour scheme: a steel-blue dark ground, ice-blue accents, one saturated blue for the primary action.
   Loaded last on every 51 Intel page. Layout stays in the other intel-*.css files; this file only sets colour. */
:root {
  --paper: #080b11;
  --soft: #0d1219;
  --raised: #151c28;
  --well: #07090e;
  --ink: #eef1f6;
  --muted: #a1aaba;
  --line: rgba(160, 186, 226, 0.14);
  --steel: #4a6fa5;
  --ice: #a0bae2;
  --action: #2f5bea;
  --action-top: #3562ee;
  --action-bottom: #2a54e2;
  --blue: var(--steel);
  --blue-hover: #3d68f0;
  --royal: var(--ink);
  --navy: var(--ink);
  --header-height: 77px;
}
body {
  background: var(--paper) !important;
  color: var(--ink);
}
/* A fixed, very faint diagonal wash so the ground is never a flat fill: lighter steel top left, deeper navy bottom right. */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 60;
  pointer-events: none;
  background: linear-gradient(
    165deg,
    rgba(96, 134, 190, 0.085) 0%,
    rgba(96, 134, 190, 0.02) 42%,
    rgba(20, 38, 84, 0) 58%,
    rgba(20, 38, 84, 0.16) 100%
  );
}
::selection {
  background: var(--action);
  color: #fff;
}
:focus-visible {
  outline: 2px solid var(--ice) !important;
  outline-offset: 3px;
}

/* Header: no bar and no rule at the top of the page; a solid ground once the page has scrolled.
   The transparent state is opt-in (set by intel-header.js) so the header stays readable without JavaScript.
   These are the fallback states. On the homepage css/intel-motion.css scrubs the same values against scroll
   position (0-120px) with a scroll timeline, which beats these rules because none of them is !important.
   `html` plus the is-over-hero variant keeps specificity above the per-page header rules. */
html .site-header,
html .site-header.is-over-hero {
  z-index: 70; /* above the fixed colour wash (body::after, 60) so the wash never tints the header */
  background-color: rgba(8, 11, 17, 0.86);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  border-bottom: 1px solid transparent;
  box-shadow: 0 1px 0 rgba(160, 186, 226, 0.1);
  transition:
    background-color var(--dur-3, 320ms) var(--ease-standard, cubic-bezier(0.2, 0, 0, 1)),
    backdrop-filter var(--dur-3, 320ms) var(--ease-standard, cubic-bezier(0.2, 0, 0, 1)),
    -webkit-backdrop-filter var(--dur-3, 320ms) var(--ease-standard, cubic-bezier(0.2, 0, 0, 1)),
    box-shadow var(--dur-3, 320ms) var(--ease-standard, cubic-bezier(0.2, 0, 0, 1));
}
html.is-at-top .site-header,
html.is-at-top .site-header.is-over-hero {
  background-color: rgba(8, 11, 17, 0);
  backdrop-filter: blur(0) saturate(100%);
  -webkit-backdrop-filter: blur(0) saturate(100%);
  box-shadow: 0 1px 0 rgba(160, 186, 226, 0);
}
.site-header .button-dark {
  background: var(--ink) !important;
  border-color: var(--ink) !important;
  color: #07101f !important;
  box-shadow: none !important;
}
.site-header .button-dark:hover {
  background: #fff !important;
  border-color: #fff !important;
  color: #07101f !important;
}

/* Hero: runs up behind the header so the number field and the light continue to the top edge. */
.hero-orbit {
  margin-top: calc(-1 * var(--header-height)) !important;
  padding-top: var(--header-height) !important;
  background: var(--paper) !important;
}
.hero-orbit .globe-stage {
  top: calc(-1 * var(--header-height));
}
.hero-orbit .hero-aura {
  background:
    radial-gradient(ellipse 62% 70% at 53% 30%, rgba(74, 111, 165, 0.11), transparent 74%),
    radial-gradient(ellipse 110% 80% at 53% -20%, rgba(24, 42, 84, 0.26), transparent 72%) !important;
}
.hero-orbit h1,
.hero-orbit h1 span,
.hero-orbit h1 span:last-child {
  color: var(--ink) !important;
}
.hero-orbit .hero-summary-mark,
.hero-index .arrow-icon,
.section-heading .text-link .arrow-icon,
.outcome-link .arrow-icon {
  color: var(--ice);
}

/* Primary action: the only saturated blue on the page, with a barely visible top-to-bottom gradient.
   Hover fades a lighter gradient in over the button (a ::before overlay, because gradients cannot be
   transitioned directly). No overflow clipping, so focus rings are never cut off. */
.hero-orbit .hero-actions .button-dark,
.closing-actions .button-dark,
.contact-content .button-dark,
.button-white,
.intel-subpage .btn-primary,
.intel-subpage .about-primary,
.intel-subpage .campaign-main :is(.campaign-hero, .campaign-final) .btn-primary,
.fv-claim {
  position: relative;
  isolation: isolate;
  background: linear-gradient(180deg, var(--action-top), var(--action-bottom)) !important;
  border: 1px solid var(--action-top) !important;
  color: #fff !important;
  box-shadow: none !important;
}
.hero-orbit .hero-actions .button-dark::before,
.closing-actions .button-dark::before,
.contact-content .button-dark::before,
.button-white::before,
.intel-subpage .btn-primary::before,
.intel-subpage .about-primary::before,
.intel-subpage .campaign-main :is(.campaign-hero, .campaign-final) .btn-primary::before,
.fv-claim::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: linear-gradient(180deg, #3f6bf0, #3059e6);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-2, 200ms) var(--ease-standard, cubic-bezier(0.2, 0, 0, 1));
}
.hero-orbit .hero-actions .button-dark:hover::before,
.closing-actions .button-dark:hover::before,
.contact-content .button-dark:hover::before,
.button-white:hover::before,
.intel-subpage .btn-primary:hover::before,
.intel-subpage .about-primary:hover::before,
.intel-subpage .campaign-main :is(.campaign-hero, .campaign-final) .btn-primary:hover::before,
.fv-claim:hover::before {
  opacity: 1;
}
.hero-orbit .hero-actions .button-dark:hover,
.closing-actions .button-dark:hover,
.contact-content .button-dark:hover,
.button-white:hover,
.intel-subpage .btn-primary:hover,
.intel-subpage .about-primary:hover,
.intel-subpage .campaign-main :is(.campaign-hero, .campaign-final) .btn-primary:hover,
.fv-claim:hover {
  border-color: #3f6bf0 !important;
  color: #fff !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    0 10px 28px -12px rgba(47, 91, 234, 0.7) !important;
}
.button-outline {
  border-color: rgba(160, 186, 226, 0.28) !important;
  background: transparent !important;
}
.button-outline:hover {
  border-color: var(--ice) !important;
  background: rgba(160, 186, 226, 0.1) !important;
}

/* Coverage strip: a quiet instrument panel with one lit edge. */
.intel-scale .coverage-metrics {
  position: relative;
  border: 1px solid var(--line) !important;
  border-bottom: 0 !important;
  background: rgba(74, 111, 165, 0.07) !important;
}
.intel-scale .coverage-metrics::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: -1px;
  height: 1px;
  background: rgba(160, 186, 226, 0.55);
}
.intel-scale .coverage-metrics > div {
  border-color: var(--line) !important;
}
.intel-scale .coverage-metrics dd,
.intel-scale .coverage-metrics dd span {
  color: var(--ink) !important;
  font-variant-numeric: tabular-nums;
}
.intel-scale .coverage-metrics dt {
  color: var(--muted) !important;
}

/* Accents. */
.eyebrow,
.research-guests-title {
  color: var(--ice) !important;
}
.eyebrow::before {
  background: var(--ice) !important;
}
.line-symbol {
  color: var(--ice) !important;
}
.carousel-dot[aria-current='true'] > span {
  background: var(--ice) !important;
}
.outcome-carousel[data-autoplay='true'] .carousel-dot[aria-current='true'] > span::after {
  background: var(--steel) !important;
}
.outcome-link:hover,
.footer-column a:hover,
.footer-column button:hover {
  color: var(--ice) !important;
}

/* Closing call to action: steel light from above, dissolving into the ground. */
.closing-section {
  position: relative;
  overflow: clip;
  background:
    radial-gradient(ellipse 90% 80% at 50% -14%, rgba(74, 111, 165, 0.26), transparent 72%),
    linear-gradient(180deg, #142544 0%, var(--paper) 64%) !important;
}
.closing-section .closing-inner {
  background: transparent !important;
  border-color: transparent !important;
}
.closing-inner h2,
.closing-inner h2 span {
  color: var(--ink) !important;
}
.closing-mark {
  color: rgba(160, 186, 226, 0.06) !important;
}

/* Surfaces: the neutral greys move onto the same steel scale, in three steps. */
.ai-section {
  background: #0a0e15 !important;
}
.outcome-card,
.research-grid-simple .research-card .research-image,
.ai-card,
.ai-connected {
  background: var(--soft) !important;
  border-color: var(--line) !important;
}
.outcome-card:hover {
  border-color: rgba(160, 186, 226, 0.34) !important;
}
.carousel-pagination,
.carousel-autoplay,
.ask-composer,
.demo-ready .native-demo-input,
.contact-content :is(input:not(.contact-trap), select, textarea) {
  background: var(--raised) !important;
}
.product-window,
.demo-ready .native-demo-answer {
  background: var(--well) !important;
}
#contact-dialog,
.contact-topbar,
.contact-content .dialog-close,
.site-header .site-menu:not([hidden]) {
  background: var(--soft) !important;
}