.comparison-hero {
  background: #edf3f2;
}
.comparison-hero h1 {
  font-size: clamp(30px, 4vw, 50px);
  line-height: 1.45;
  color: #0b303c;
}
.comparison-entry {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  margin-top: 28px;
}
.comparison-entry > a {
  display: flex;
  flex: 1 1 300px;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  padding: 24px;
  background: #fff;
  border: 1px solid #c5d3d3;
  border-radius: 8px;
  text-decoration: none;
  color: #0b303c;
  min-height: 80px;
}
.comparison-entry strong {
  font-size: 20px;
  width: calc(100% - 36px);
}
.comparison-entry span {
  font-size: 15px;
  color: #51666d;
  flex-basis: calc(100% - 36px);
}
.comparison-entry b {
  margin-left: auto;
}
.comparison-entry a:hover,
.comparison-entry a:focus-visible {
  border-color: #b89156;
  box-shadow: 0 6px 20px #0b303c12;
}
.comparison-body {
  max-width: 1160px;
}
.comparison-body > p {
  max-width: 900px;
  line-height: 1.9;
}
.comparison-jump {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 30px 0;
}
.comparison-jump a,
.comparison-citations a {
  display: inline-flex;
  min-width: 44px;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  padding: 8px 14px;
  border: 1px solid #cbd8d8;
  border-radius: 6px;
  color: #0b303c;
}
.comparison-country {
  margin: 36px 0;
  padding: 30px;
  background: #fff;
  border: 1px solid #dbe4e4;
  border-radius: 8px;
  scroll-margin-top: 230px;
}
.comparison-country-head {
  border-bottom: 1px solid #dbe4e4;
  padding-bottom: 22px;
  margin-bottom: 20px;
}
.comparison-country-head h2 {
  margin: 8px 0;
}
.comparison-country-head p {
  line-height: 1.9;
}
.comparison-group,
.comparison-source {
  border: 1px solid #dbe4e4;
  border-radius: 8px;
  margin: 16px 0;
}
.comparison-group > summary,
.comparison-source > summary {
  padding: 16px 20px;
  min-height: 52px;
  cursor: pointer;
  font-weight: 600;
  line-height: 1.6;
}
.comparison-group > div,
.comparison-source > ol {
  padding: 0 22px 22px;
}
.comparison-group section {
  padding: 16px 0;
  border-top: 1px solid #e3ebeb;
}
.comparison-group p,
.comparison-source p {
  font-size: 16px;
  line-height: 1.9;
  overflow-wrap: anywhere;
}
.comparison-group h3 {
  font-size: 20px;
  line-height: 1.6;
  margin-bottom: 10px;
}
.comparison-citations {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 10px 0;
}
.comparison-uncertainties {
  background: #f7f3ea;
  padding: 18px 22px;
  border-radius: 8px;
}
.comparison-uncertainties li {
  line-height: 1.8;
  margin: 8px 0;
}
.comparison-source li {
  margin: 16px 0;
  scroll-margin-top: 230px;
  overflow-wrap: anywhere;
}
.comparison-source a {
  display: inline-block;
  padding: 8px 0;
  min-height: 44px;
}
.assessment-handoff-note {
  background: #edf3f2;
  border-left: 3px solid #b89156;
  border-radius: 8px;
  padding: 18px;
  margin-bottom: 24px;
}
.assessment-handoff-note p {
  margin-bottom: 14px;
  line-height: 1.8;
}
.comparison-group summary:focus-visible,
.comparison-source summary:focus-visible {
  outline: 2px solid #b89156;
  outline-offset: -4px;
}
@media (max-width: 700px) {
  .comparison-country {
    padding: 18px;
    margin: 24px 0;
  }
  .comparison-entry {
    gap: 12px;
  }
  .comparison-entry > a {
    padding: 18px;
    flex-basis: 100%;
  }
  .comparison-group > div {
    padding: 0 14px 14px;
  }
  .comparison-group > summary,
  .comparison-source > summary {
    padding: 14px;
    font-size: 16px;
  }
  .comparison-body p,
  .comparison-group p {
    font-size: 15.5px;
  }
  .comparison-group h3 {
    font-size: 18px;
  }
  .comparison-source > ol {
    padding: 0 14px 14px 34px;
  }
  .comparison-country,
  .comparison-source li {
    scroll-margin-top: 260px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .comparison-entry a {
    transition: none !important;
  }
}