/* The home hero uses the same light neutral surface as the editorial sections. */
.hero.hero--light {
  --rdc-accent: #0754b5;
  color: #031858;
  background: #f8fafc;
}

.hero.hero--light::before {
  opacity: .32;
  background-image: linear-gradient(#0318580d 1px, transparent 1px),
    linear-gradient(90deg, #0318580d 1px, transparent 1px);
}

.hero--light .eyebrow,
.hero--light .network-kicker {
  color: #415575;
}

.hero.hero--light h1 em {
  color: #0754b5;
  background: none;
}

.hero--light .hero-content {
  container-type: inline-size;
  max-width: 790px;
}

.hero.hero--light h1 {
  max-width: none;
  font-size: clamp(2.5rem, var(--hero-title-size, 13cqi), 6rem);
  letter-spacing: -.035em;
  word-spacing: .025em;
  line-height: 1.06;
  text-wrap: initial;
}

.hero.hero--light h1 .hero-title-line {
  display: block;
  white-space: nowrap;
}

html[lang="fr"] .hero.hero--light {
  --hero-title-size: 12.25cqi;
}

@media (min-width: 981px) {
  .hero.hero--light {
    grid-template-columns: minmax(0, 1.12fr) minmax(400px, .88fr);
    column-gap: 24px;
  }

  .hero--light .hero-content {
    padding-right: 32px;
  }
}

@media (max-width: 680px) {
  .hero.hero--light h1 {
    font-size: clamp(2rem, var(--hero-title-size, 13cqi), 4.35rem);
  }

  .hero.hero--light h1 .hero-title-line {
    white-space: normal;
  }
}

.hero--light .hero-lead,
.hero--light .hero-proof dd {
  color: #4b5c75;
}

.hero--light .hero-proof dt {
  color: #031858;
}

.hero--light .button-ghost {
  color: #031858;
  border-color: #8291aa;
}

.hero--light .button-ghost:hover {
  background: #e7edf5;
  border-color: #0754b5;
}

.hero--light .button-primary:hover {
  color: #fff;
  background: #0754b5;
}

.unified-header.unified-header--home-light {
  --rdc-accent: #0754b5;
  --rdc-header-background: #f8fafc;
  color: #031858;
  border-color: #03185826;
}

.unified-header--home-light .unified-header-cta {
  color: #00123e;
  background: var(--button-cyan);
}

.unified-header--home-light .unified-header-cta:hover {
  color: #fff;
  background: #0754b5;
}

/* Keep the existing Mexico network, with a restrained palette for light paper. */
.hero--light [id^="network-country-"] stop:nth-child(1) { stop-color: #e7edf5; }
.hero--light [id^="network-country-"] stop:nth-child(2) { stop-color: #d9e3f0; }
.hero--light [id^="network-country-"] stop:nth-child(3) { stop-color: #edf1f6; }
.hero--light [id^="network-dots-"] circle { fill: #7187a7; }

.hero--light .network-country-base {
  filter: drop-shadow(0 16px 24px #0318580d);
}

.hero--light .network-country-outline { stroke: #7187a7; }
.hero--light .network-primary-lines path { stroke: #7187a7; }
.hero--light .network-sweep { opacity: .25; }
.hero--light .network-svg-node { color: #0754b5; }
.hero--light .network-svg-node.node-4,
.hero--light .network-svg-node.node-5 { color: #031858; }
.hero--light .network-svg-node .node-dot { filter: none; stroke: #f8fafc; }

.hero--light .network-svg-node text {
  fill: #031858;
  stroke: #f8fafc;
  stroke-width: 4px;
}

.hero--light .network-svg-core-face .core-fill {
  fill: #031858;
  stroke: #f8fafc;
  filter: none;
}

.hero--light .network-svg-core .core-ring { stroke: #0754b5; }
.hero--light .network-svg-core-label .core-country { fill: #fff; }
.hero--light .network-packets circle { fill: #0754b5; filter: none; }

@media (forced-colors: active) {
  .hero.hero--light { color: CanvasText; background: Canvas; }
  .hero.hero--light h1 em,
  .hero--light .eyebrow,
  .hero--light .hero-lead,
  .hero--light .hero-proof dt,
  .hero--light .hero-proof dd { color: CanvasText; }
  .hero--light .hero-network { visibility: hidden; }
}