/* =========================================================
   GLOBAL HEALTH EXPLORERS
   EXPLORE THE WORLD
   Production CSS — Shared by all 3 pages

   01 From Data to Discovery
   02 From Data to Maps
   03 Explore the Differences
========================================================= */


/* =========================================================
   ROOT
========================================================= */

:root {

  --etw-navy: #0b2d4d;
  --etw-deep: #071f35;
  --etw-blue: #176b9d;
  --etw-teal: #168a86;
  --etw-green: #3b8b61;
  --etw-gold: #e3a33a;

  --etw-ink: #10283d;
  --etw-muted: #607582;

  --etw-bg: #ffffff;
  --etw-soft: #f3f8fa;
  --etw-line: #d8e5ea;

  --etw-white: #ffffff;

  --etw-radius: 22px;

  --etw-shadow:
    0 16px 44px rgba(11, 45, 77, 0.09);

  --etw-container: 1180px;
}


/* =========================================================
   RESET
========================================================= */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--etw-bg);
  color: var(--etw-ink);

  font-family:
    Inter,
    ui-sans-serif,
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;

  line-height: 1.7;
}

img {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
}

button,
a {
  -webkit-tap-highlight-color: transparent;
}


/* =========================================================
   CONTAINER
========================================================= */

.etw-container {
  width: min(
    calc(100% - 40px),
    var(--etw-container)
  );

  margin-inline: auto;
}


/* =========================================================
   NAVIGATION
========================================================= */

.etw-nav {

  position: sticky;
  top: 0;
  z-index: 100;

  background:
    rgba(11, 45, 77, 0.97);

  backdrop-filter: blur(12px);

  box-shadow:
    0 8px 28px rgba(0, 0, 0, 0.12);
}


.etw-nav-inner {

  min-height: 68px;

  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 24px;
}


.etw-brand {

  color: #ffffff;

  text-decoration: none;

  font-size: 1rem;
  font-weight: 850;

  letter-spacing: 0.01em;

  white-space: nowrap;
}


.etw-brand span {
  color: #7dd3cf;
}


.etw-nav-links {

  display: flex;
  align-items: center;
  justify-content: center;

  flex-wrap: wrap;

  gap: 6px;
}


.etw-nav-links a {

  color: #eaf6f9;

  text-decoration: none;

  font-size: 0.82rem;
  font-weight: 750;

  padding: 9px 13px;

  border-radius: 999px;

  transition:
    background 0.2s ease,
    transform 0.2s ease;
}


.etw-nav-links a:hover,
.etw-nav-links .etw-active {

  background:
    rgba(255, 255, 255, 0.13);

  transform: translateY(-1px);
}


/* =========================================================
   PATHWAY BAR
========================================================= */

.etw-pathway {

  background: #edf6f8;

  border-bottom:
    1px solid var(--etw-line);
}


.etw-pathway-inner {

  min-height: 46px;

  display: flex;
  align-items: center;
  justify-content: center;

  flex-wrap: wrap;

  gap: 9px;

  color: #637783;

  font-size: 0.73rem;
  font-weight: 850;

  letter-spacing: 0.045em;

  text-transform: uppercase;
}


.etw-pathway a {
  text-decoration: none;
}


.etw-pathway a:hover,
.etw-pathway .etw-current {
  color: var(--etw-navy);
}


.etw-pathway span {
  color: #9aadb6;
}


/* =========================================================
   HERO
========================================================= */

.etw-hero {

  position: relative;

  min-height: 590px;

  display: flex;
  align-items: center;

  color: #ffffff;

  background:

    linear-gradient(
      90deg,
      rgba(6, 35, 59, 0.95) 0%,
      rgba(8, 50, 76, 0.82) 46%,
      rgba(8, 50, 76, 0.28) 100%
    ),

    url("images/homepage/Explore-the-World.png")
      center / cover no-repeat,

    linear-gradient(
      135deg,
      var(--etw-navy),
      var(--etw-blue)
    );
}


.etw-hero::after {

  content: "";

  position: absolute;

  left: 0;
  right: 0;
  bottom: 0;

  height: 105px;

  background:
    linear-gradient(
      transparent,
      rgba(255, 255, 255, 0.94)
    );

  pointer-events: none;
}


.etw-hero-content {

  position: relative;
  z-index: 2;

  max-width: 790px;

  padding:
    90px 0
    110px;
}


.etw-kicker {

  display: flex;
  align-items: center;

  gap: 10px;

  margin-bottom: 18px;

  color: #a6ece7;

  font-size: 0.76rem;
  font-weight: 900;

  letter-spacing: 0.13em;

  text-transform: uppercase;
}


.etw-kicker::before {

  content: "";

  width: 30px;
  height: 3px;

  background: #7dd3cf;

  border-radius: 4px;
}


.etw-hero h1 {

  margin: 0 0 20px;

  font-size:
    clamp(2.8rem, 6vw, 5.5rem);

  line-height: 1.01;

  letter-spacing: -0.05em;
}


.etw-hero h1 span {

  display: block;

  color: #8fe1db;
}


.etw-hero-lead {

  max-width: 720px;

  margin: 0 0 18px;

  color: #e7f3f7;

  font-size:
    clamp(1.12rem, 2vw, 1.4rem);

  line-height: 1.55;
}


.etw-hero-question {

  max-width: 700px;

  margin: 0;

  color: #cfe3ea;

  font-size: 1rem;

  font-weight: 650;
}


.etw-hero-tagline {

  display: inline-block;

  margin-top: 28px;

  padding:
    13px 18px;

  border-left:
    4px solid #7dd3cf;

  background:
    rgba(255, 255, 255, 0.08);

  border-radius:
    0 13px 13px 0;

  font-weight: 850;
}


/* =========================================================
   SECTIONS
========================================================= */

.etw-section {

  padding:
    86px 0;
}


.etw-section-soft {
  background: var(--etw-soft);
}


.etw-section-head {

  max-width: 820px;

  margin-bottom: 42px;
}


.etw-eyebrow {

  margin-bottom: 9px;

  color: var(--etw-teal);

  font-size: 0.76rem;
  font-weight: 900;

  letter-spacing: 0.11em;

  text-transform: uppercase;
}


.etw-section h2 {

  margin:
    0 0 15px;

  font-size:
    clamp(2rem, 4vw, 3.25rem);

  line-height: 1.1;

  letter-spacing: -0.04em;
}


.etw-section-lead {

  margin: 0;

  color: var(--etw-muted);

  font-size: 1.08rem;

  max-width: 760px;
}


/* =========================================================
   GRIDS
========================================================= */

.etw-grid {

  display: grid;

  gap: 22px;
}


.etw-grid-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}


.etw-grid-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}


.etw-grid-4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}


.etw-grid-5 {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}


/* =========================================================
   CARDS
========================================================= */

.etw-card {

  background: #ffffff;

  border:
    1px solid var(--etw-line);

  border-radius:
    var(--etw-radius);

  padding: 28px;

  box-shadow:
    0 10px 34px rgba(11, 45, 77, 0.055);
}


.etw-card-icon {

  margin-bottom: 14px;

  font-size: 2rem;

  line-height: 1;
}


.etw-card h3 {

  margin:
    0 0 9px;

  font-size: 1.17rem;

  line-height: 1.25;
}


.etw-card p {

  margin: 0;

  color: var(--etw-muted);

  font-size: 0.95rem;
}


.etw-accent-teal {
  border-top: 5px solid var(--etw-teal);
}


.etw-accent-blue {
  border-top: 5px solid var(--etw-blue);
}


.etw-accent-green {
  border-top: 5px solid var(--etw-green);
}


.etw-accent-gold {
  border-top: 5px solid var(--etw-gold);
}


/* =========================================================
   FEATURE QUOTE
========================================================= */

.etw-feature-quote {

  margin-top: 28px;

  padding:
    28px 32px;

  background: #ffffff;

  border:
    1px solid var(--etw-line);

  border-radius: 20px;

  box-shadow:
    var(--etw-shadow);

  font-size: 1.25rem;
}


.etw-feature-quote strong {

  display: block;

  color: var(--etw-teal);

  font-size: 1.45rem;
}


/* =========================================================
   PIPELINE
========================================================= */

.etw-pipeline {

  display: grid;

  grid-template-columns:
    1fr auto
    1fr auto
    1fr auto
    1fr auto
    1fr auto
    1fr;

  gap: 9px;

  align-items: stretch;
}


.etw-pipeline-step {

  padding: 22px 17px;

  background: #ffffff;

  border:
    1px solid var(--etw-line);

  border-radius: 17px;

  text-align: center;
}


.etw-pipeline-step span {

  display: block;

  margin-bottom: 8px;

  color: var(--etw-teal);

  font-size: 0.72rem;
  font-weight: 900;
}


.etw-pipeline-step strong {

  display: block;

  margin-bottom: 7px;

  font-size: 0.87rem;
}


.etw-pipeline-step small {

  display: block;

  color: var(--etw-muted);

  font-size: 0.75rem;

  line-height: 1.45;
}


.etw-pipeline-arrow {

  display: grid;

  place-items: center;

  color: var(--etw-teal);

  font-size: 1.2rem;
  font-weight: 900;
}


/* =========================================================
   JOURNEY
========================================================= */

.etw-journey {

  display: grid;

  grid-template-columns:
    repeat(6, minmax(0, 1fr));

  gap: 13px;
}


.etw-journey-card {

  min-height: 190px;

  padding: 22px 18px;

  background: #ffffff;

  border:
    1px solid var(--etw-line);

  border-radius: 18px;
}


.etw-number {

  width: 38px;
  height: 38px;

  display: grid;
  place-items: center;

  margin-bottom: 18px;

  background: var(--etw-navy);

  color: #ffffff;

  border-radius: 50%;

  font-size: 0.8rem;
  font-weight: 900;
}


.etw-journey-card h3 {

  margin:
    0 0 7px;

  font-size: 0.98rem;

  line-height: 1.25;
}


.etw-journey-card p {

  margin: 0;

  color: var(--etw-muted);

  font-size: 0.88rem;
}


/* =========================================================
   DATA RULE
========================================================= */

.etw-dark-section {

  background:
    var(--etw-navy);

  color: #ffffff;
}


.etw-light-head .etw-eyebrow {
  color: #8ee0da;
}


.etw-light-head .etw-section-lead {
  color: #c7dbe5;
}


.etw-data-rule {

  padding:
    42px;

  border-radius:
    26px;

  background:
    linear-gradient(
      135deg,
      #0b2d4d,
      #176b9d
    );

  box-shadow:
    0 18px 50px rgba(0,0,0,0.18);
}


.etw-rule-title {

  margin-bottom: 22px;

  color: #9ce8e2;

  font-size: 0.76rem;
  font-weight: 900;

  letter-spacing: 0.12em;
}


.etw-rule-line {

  display: flex;

  align-items: center;

  justify-content: center;

  flex-wrap: wrap;

  gap: 10px;

  font-size: 0.9rem;
  font-weight: 850;
}


.etw-rule-line span {

  padding:
    9px 12px;

  border:
    1px solid rgba(255,255,255,0.18);

  background:
    rgba(255,255,255,0.08);

  border-radius: 999px;
}


.etw-rule-line b {
  color: #9ce8e2;
}


.etw-dark-note {

  margin-top: 22px;

  padding:
    17px 20px;

  border-left:
    4px solid var(--etw-gold);

  background:
    rgba(255,255,255,0.06);

  border-radius:
    0 13px 13px 0;

  color: #d5e6ec;
}


.etw-dark-note strong {
  color: #ffffff;
}


/* =========================================================
   SOURCE CARDS
========================================================= */

.etw-source-grid {

  display: grid;

  grid-template-columns:
    repeat(3, minmax(0, 1fr));

  gap: 22px;
}


.etw-source-card {

  display: flex;

  flex-direction: column;

  min-height: 310px;

  padding: 28px;

  background: #ffffff;

  border:
    1px solid var(--etw-line);

  border-radius:
    var(--etw-radius);

  box-shadow:
    0 10px 34px rgba(11,45,77,0.055);
}


.etw-source-icon {

  width: 54px;
  height: 54px;

  display: grid;
  place-items: center;

  margin-bottom: 18px;

  background: #e9f6f6;

  color: var(--etw-teal);

  border-radius: 15px;

  font-size: 0.85rem;
  font-weight: 950;
}


.etw-source-hidr {
  background: #edf4fa;
  color: var(--etw-blue);
}


.etw-source-ihme {
  background: #edf7f0;
  color: var(--etw-green);
}


.etw-source-unicef {
  background: #fff6e5;
  color: #9a6b17;
}


.etw-source-worldbank {
  background: #edf4fa;
  color: var(--etw-blue);
}


.etw-source-owid {
  background: #eef2f6;
  color: var(--etw-navy);
}


.etw-source-card h3 {

  margin:
    0 0 10px;

  font-size: 1.18rem;

  line-height: 1.25;
}


.etw-source-card p {

  margin:
    0;

  color: var(--etw-muted);

  font-size: 0.93rem;
}


.etw-source-button {

  display: inline-flex;

  align-items: center;
  justify-content: center;

  align-self: flex-start;

  margin-top: auto;

  padding:
    11px 16px;

  background: var(--etw-teal);

  color: #ffffff;

  border-radius: 999px;

  text-decoration: none;

  font-size: 0.83rem;
  font-weight: 850;

  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease;
}


.etw-source-button:hover {

  transform:
    translateY(-2px);

  box-shadow:
    0 8px 18px rgba(22,138,134,0.22);
}


.etw-source-buttons {

  display: flex;

  flex-wrap: wrap;

  gap: 8px;

  margin-top: auto;
}


.etw-button-light {

  background: #ffffff;

  color: var(--etw-teal);

  border:
    1px solid var(--etw-line);
}


.etw-source-principle {

  margin-top: 24px;

  padding:
    18px 20px;

  background:
    #f5fafb;

  border:
    1px solid var(--etw-line);

  border-radius:
    15px;

  color: var(--etw-muted);

  font-size: 0.9rem;
}


/* =========================================================
   MAP PAGE
========================================================= */

.etw-map-learning {

  display: grid;

  grid-template-columns:
    1.35fr 0.65fr;

  gap: 26px;

  align-items: stretch;
}


.etw-map-illustration {

  position: relative;

  min-height: 430px;

  overflow: hidden;

  border-radius: 26px;

  background:
    radial-gradient(
      circle at 20% 25%,
      rgba(22,138,134,0.22),
      transparent 22%
    ),
    radial-gradient(
      circle at 75% 65%,
      rgba(23,107,157,0.22),
      transparent 30%
    ),
    linear-gradient(
      135deg,
      #eef8fa,
      #cfe7ec
    );

  border:
    1px solid #c6dfe6;
}


.etw-map-grid {

  position: absolute;

  inset: 0;

  background-image:
    linear-gradient(
      rgba(23,107,157,0.08) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(23,107,157,0.08) 1px,
      transparent 1px
    );

  background-size:
    50px 50px;
}


/*
  Stylized land masses.
  These are deliberately abstract.
  They are NOT intended to represent an
  authoritative geographic map.
*/

.etw-map-land {

  position: absolute;

  background:
    rgba(255,255,255,0.82);

  border:
    1px solid rgba(23,107,157,0.12);

  box-shadow:
    0 8px 20px rgba(11,45,77,0.06);
}


.etw-land-a {

  width: 36%;
  height: 31%;

  left: 11%;
  top: 25%;

  border-radius:
    58% 42% 48% 52% /
    48% 43% 57% 52%;

  transform:
    rotate(-9deg);
}


.etw-land-b {

  width: 28%;
  height: 46%;

  left: 40%;
  top: 32%;

  border-radius:
    52% 48% 58% 42% /
    42% 57% 43% 58%;

  transform:
    rotate(17deg);
}


.etw-land-c {

  width: 34%;
  height: 27%;

  right: 10%;
  top: 22%;

  border-radius:
    46% 54% 43% 57% /
    57% 45% 55% 43%;

  transform:
    rotate(8deg);
}


.etw-map-label {

  position: absolute;

  padding:
    8px 12px;

  background:
    rgba(255,255,255,0.9);

  border:
    1px solid #c9dfe5;

  border-radius:
    10px;

  color: var(--etw-navy);

  font-size: 0.72rem;
  font-weight: 900;

  box-shadow:
    0 6px 18px rgba(11,45,77,0.07);
}


.etw-map-label-a {
  left: 15%;
  top: 27%;
}


.etw-map-label-b {
  left: 45%;
  top: 53%;
}


.etw-map-label-c {
  right: 14%;
  top: 31%;
}


.etw-map-explanation {

  padding:
    30px;

  background:
    #ffffff;

  border:
    1px solid var(--etw-line);

  border-radius:
    24px;

  box-shadow:
    var(--etw-shadow);
}


.etw-map-explanation h3 {

  margin:
    0 0 20px;

  font-size: 1.35rem;
}


.etw-map-explanation p {

  margin:
    0 0 11px;

  color: var(--etw-muted);
}


.etw-map-warning {

  margin-top: 22px;

  padding:
    15px 17px;

  background:
    #fff7e8;

  border-left:
    4px solid var(--etw-gold);

  border-radius:
    0 12px 12px 0;

  color: #665027;

  font-size: 0.86rem;
}


/* =========================================================
   MAP QUESTIONS
========================================================= */

.etw-question-card {

  padding:
    24px 18px;

  background:
    #ffffff;

  border:
    1px solid var(--etw-line);

  border-radius:
    18px;

  text-align:
    center;
}


.etw-question-card span {

  display: grid;

  width: 34px;
  height: 34px;

  place-items: center;

  margin:
    0 auto 13px;

  background:
    var(--etw-navy);

  color:
    #ffffff;

  border-radius:
    50%;

  font-size:
    0.75rem;

  font-weight:
    900;
}


.etw-question-card h3 {

  margin:
    0 0 7px;

  font-size:
    1rem;
}


.etw-question-card p {

  margin:
    0;

  color:
    var(--etw-muted);

  font-size:
    0.87rem;
}


/* =========================================================
   TRANSFORMATION
========================================================= */

.etw-transformation {

  display: grid;

  grid-template-columns:
    1fr auto
    1fr auto
    1fr auto
    1fr;

  gap: 12px;

  align-items: stretch;
}


.etw-transformation article {

  padding:
    28px 22px;

  background:
    #ffffff;

  border:
    1px solid var(--etw-line);

  border-radius:
    20px;
}


.etw-transformation-number {

  margin-bottom:
    12px;

  color:
    var(--etw-teal);

  font-size:
    0.76rem;

  font-weight:
    900;
}


.etw-transformation h3 {

  margin:
    0 0 8px;

  font-size:
    1.05rem;
}


.etw-transformation p {

  margin:
    0;

  color:
    var(--etw-muted);

  font-size:
    0.9rem;
}


.etw-transform-arrow {

  display:
    grid;

  place-items:
    center;

  color:
    var(--etw-teal);

  font-size:
    1.25rem;

  font-weight:
    900;
}


/* =========================================================
   DARK CARDS
========================================================= */

.etw-dark-card {

  padding:
    30px;

  background:
    rgba(255,255,255,0.06);

  border:
    1px solid rgba(255,255,255,0.12);

  border-radius:
    22px;
}


.etw-dark-card h3 {

  margin:
    0 0 15px;

  font-size:
    1.25rem;
}


.etw-dark-card ul {

  margin:
    0;

  padding-left:
    20px;

  color:
    #c7dbe5;
}


.etw-dark-card li {
  margin-bottom:
    7px;
}


/* =========================================================
   SCALE
========================================================= */

.etw-scale {

  display:
    grid;

  grid-template-columns:
    1fr auto
    1fr auto
    1fr auto
    1fr auto
    1fr;

  align-items:
    center;

  gap:
    10px;
}


.etw-scale-step {

  padding:
    22px 14px;

  text-align:
    center;

  background:
    #ffffff;

  border:
    1px solid var(--etw-line);

  border-radius:
    18px;
}


.etw-scale-step strong {

  display:
    block;

  color:
    var(--etw-navy);

  font-size:
    0.82rem;
}


.etw-scale-step span {

  display:
    block;

  margin-top:
    5px;

  color:
    var(--etw-muted);

  font-size:
    0.78rem;
}


/* =========================================================
   DIFFERENCES PAGE
========================================================= */

.etw-feature-message {

  max-width:
    920px;

  margin:
    0 auto;

  padding:
    52px;

  text-align:
    center;

  background:
    linear-gradient(
      135deg,
      #f0faf9,
      #edf7fb
    );

  border:
    1px solid #d4e8e8;

  border-radius:
    30px;

  box-shadow:
    var(--etw-shadow);
}


.etw-feature-message-kicker {

  margin-bottom:
    14px;

  color:
    var(--etw-teal);

  font-size:
    0.75rem;

  font-weight:
    900;

  letter-spacing:
    0.12em;
}


.etw-feature-message h2 {

  margin:
    0 0 16px;

  font-size:
    clamp(2rem,4vw,3.5rem);

  line-height:
    1.08;
}


.etw-feature-message h2 span {

  display:
    block;

  color:
    var(--etw-teal);
}


.etw-feature-message p {

  max-width:
    720px;

  margin:
    0 auto;

  color:
    var(--etw-muted);

  font-size:
    1.05rem;
}


/* =========================================================
   INEQUALITY SEQUENCE
========================================================= */

.etw-inequality-sequence {

  display:
    grid;

  grid-template-columns:
    repeat(3,minmax(0,1fr));

  gap:
    18px;
}


.etw-inequality-sequence article {

  position:
    relative;

  padding:
    30px;

  background:
    #ffffff;

  border:
    1px solid var(--etw-line);

  border-radius:
    20px;

  overflow:
    hidden;
}


.etw-inequality-sequence article::after {

  content:
    "";

  position:
    absolute;

  width:
    100px;

  height:
    100px;

  right:
    -50px;

  bottom:
    -50px;

  background:
    rgba(22,138,134,0.07);

  border-radius:
    50%;
}


.etw-inequality-sequence span {

  display:
    inline-grid;

  width:
    38px;

  height:
    38px;

  place-items:
    center;

  margin-bottom:
    17px;

  background:
    var(--etw-navy);

  color:
    #ffffff;

  border-radius:
    50%;

  font-size:
    0.75rem;

  font-weight:
    900;
}


.etw-inequality-sequence h3 {

  margin:
    0 0 8px;

  font-size:
    1rem;

  line-height:
    1.25;
}


.etw-inequality-sequence p {

  margin:
    0;

  color:
    var(--etw-muted);

  font-size:
    0.9rem;
}


/* =========================================================
   DATA DETECTIVE
========================================================= */

.etw-detective {

  overflow:
    hidden;

  background:
    #ffffff;

  color:
    var(--etw-ink);

  border:
    1px solid var(--etw-line);

  border-radius:
    25px;

  box-shadow:
    0 18px 50px rgba(0,0,0,0.16);
}


.etw-detective-intro {

  padding:
    27px 30px;

  background:
    #edf7f8;

  border-bottom:
    1px solid var(--etw-line);

  color:
    var(--etw-muted);
}


.etw-detective-intro strong {
  color:
    var(--etw-navy);
}


.etw-detective-grid {

  display:
    grid;

  grid-template-columns:
    repeat(2,minmax(0,1fr));

  gap:
    0;
}


.etw-detective-question {

  padding:
    25px 28px;

  border-bottom:
    1px solid var(--etw-line);
}


.etw-detective-question:nth-child(odd) {
  border-right:
    1px solid var(--etw-line);
}


.etw-detective-question span {

  display:
    block;

  margin-bottom:
    7px;

  color:
    var(--etw-teal);

  font-size:
    0.72rem;

  font-weight:
    900;
}


.etw-detective-question h3 {

  margin:
    0 0 6px;

  font-size:
    1.05rem;
}


.etw-detective-question p {

  margin:
    0;

  color:
    var(--etw-muted);

  font-size:
    0.88rem;
}


/* =========================================================
   EVIDENCE CARDS
========================================================= */

.etw-evidence-card {

  padding:
    34px;

  background:
    #ffffff;

  border:
    1px solid var(--etw-line);

  border-radius:
    24px;

  box-shadow:
    0 10px 34px rgba(11,45,77,0.055);
}


.etw-evidence-logo {

  width:
    58px;

  height:
    58px;

  display:
    grid;

  place-items:
    center;

  margin-bottom:
    20px;

  background:
    #eaf6f6;

  color:
    var(--etw-teal);

  border-radius:
    16px;

  font-weight:
    950;
}


.etw-ihme-logo {

  background:
    #edf7f0;

  color:
    var(--etw-green);
}


.etw-evidence-card h3 {

  margin:
    0 0 12px;

  font-size:
    1.3rem;
}


.etw-evidence-card p {

  margin:
    0 0 12px;

  color:
    var(--etw-muted);
}


.etw-important-note {

  margin-top:
    24px;

  padding:
    19px 21px;

  background:
    #fff7e8;

  border-left:
    4px solid var(--etw-gold);

  border-radius:
    0 14px 14px 0;

  color:
    #654e25;
}


/* =========================================================
   MCQ
========================================================= */

.etw-mcq details {

  margin-bottom:
    12px;

  padding:
    19px 21px;

  background:
    #ffffff;

  border:
    1px solid var(--etw-line);

  border-radius:
    17px;
}


.etw-mcq summary {

  cursor:
    pointer;

  font-weight:
    850;
}


.etw-answer {

  margin-top:
    13px;

  padding:
    15px 17px;

  background:
    #eef7f3;

  border-radius:
    12px;

  color:
    #315b48;

  font-size:
    0.92rem;
}


/* =========================================================
   SOURCE ACTIONS
========================================================= */

.etw-source-actions {

  display:
    flex;

  flex-wrap:
    wrap;

  gap:
    11px;

  margin-top:
    27px;
}


.etw-outline-button {

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  padding:
    11px 17px;

  color:
    var(--etw-navy);

  background:
    #ffffff;

  border:
    1px solid var(--etw-line);

  border-radius:
    999px;

  text-decoration:
    none;

  font-size:
    0.85rem;

  font-weight:
    850;
}


/* =========================================================
   NEXT / FINAL
========================================================= */

.etw-next-section {

  padding:
    78px 0;

  background:
    linear-gradient(
      135deg,
      #edf8f7,
      #eef6fa
    );

  border-top:
    1px solid var(--etw-line);
}


.etw-next-content {

  text-align:
    center;
}


.etw-next-content h2 {

  max-width:
    850px;

  margin:
    0 auto 15px;

  font-size:
    clamp(2rem,4vw,3.25rem);

  line-height:
    1.1;
}


.etw-next-content p {

  max-width:
    690px;

  margin:
    0 auto 26px;

  color:
    var(--etw-muted);

  font-size:
    1.05rem;
}


.etw-next-button {

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  padding:
    13px 20px;

  background:
    var(--etw-teal);

  color:
    #ffffff;

  border-radius:
    999px;

  text-decoration:
    none;

  font-size:
    0.87rem;

  font-weight:
    900;

  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease;
}


.etw-next-button:hover {

  transform:
    translateY(-2px);

  box-shadow:
    0 9px 20px rgba(22,138,134,0.22);
}


.etw-final-section {

  padding:
    90px 0;

  background:
    #ffffff;
}


.etw-final-message {

  max-width:
    850px;

  margin:
    auto;

  text-align:
    center;
}


.etw-final-message h2 {

  margin:
    0 0 17px;

  font-size:
    clamp(2.3rem,5vw,4rem);

  line-height:
    1.05;
}


.etw-final-message h2 span {

  display:
    block;

  color:
    var(--etw-teal);
}


.etw-final-message p {

  max-width:
    720px;

  margin:
    0 auto 27px;

  color:
    var(--etw-muted);

  font-size:
    1.06rem;
}


/* =========================================================
   FOOTER
========================================================= */

.etw-footer {

  padding:
    40px 0;

  background:
    var(--etw-deep);

  color:
    #d7e6ec;

  font-size:
    0.82rem;
}


.etw-footer-inner {

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    28px;
}


.etw-footer strong {

  display:
    block;

  margin-bottom:
    4px;

  color:
    #ffffff;
}


.etw-footer span {

  display:
    block;

  color:
    #a9c3ce;
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 1100px) {

  .etw-grid-5 {
    grid-template-columns:
      repeat(3,minmax(0,1fr));
  }

  .etw-journey {
    grid-template-columns:
      repeat(3,minmax(0,1fr));
  }

  .etw-pipeline {
    grid-template-columns:
      repeat(3,minmax(0,1fr));
  }

  .etw-pipeline-arrow {
    display: none;
  }

  .etw-map-learning {
    grid-template-columns:
      1fr;
  }

  .etw-source-grid {
    grid-template-columns:
      repeat(2,minmax(0,1fr));
  }

  .etw-scale {
    grid-template-columns:
      repeat(3,minmax(0,1fr));
  }

}


@media (max-width: 820px) {

  .etw-nav-inner {
    flex-direction:
      column;

    padding:
      12px 0;
  }

  .etw-nav-links {
    width:
      100%;
  }

  .etw-grid-4,
  .etw-grid-3,
  .etw-grid-2 {
    grid-template-columns:
      repeat(2,minmax(0,1fr));
  }

  .etw-grid-5 {
    grid-template-columns:
      repeat(2,minmax(0,1fr));
  }

  .etw-journey {
    grid-template-columns:
      repeat(2,minmax(0,1fr));
  }

  .etw-transformation {
    grid-template-columns:
      repeat(2,minmax(0,1fr));
  }

  .etw-transform-arrow {
    display:
      none;
  }

  .etw-inequality-sequence {
    grid-template-columns:
      repeat(2,minmax(0,1fr));
  }

  .etw-detective-grid {
    grid-template-columns:
      1fr;
  }

  .etw-detective-question:nth-child(odd) {
    border-right:
      0;
  }

  .etw-scale {
    grid-template-columns:
      1fr 1fr;
  }

}


@media (max-width: 620px) {

  .etw-container {
    width:
      min(
        calc(100% - 28px),
        var(--etw-container)
      );
  }

  .etw-hero {
    min-height:
      570px;
  }

  .etw-hero-content {
    padding:
      70px 0 100px;
  }

  .etw-section {
    padding:
      64px 0;
  }

  .etw-grid-5,
  .etw-grid-4,
  .etw-grid-3,
  .etw-grid-2 {
    grid-template-columns:
      1fr;
  }

  .etw-journey {
    grid-template-columns:
      1fr;
  }

  .etw-pipeline {
    grid-template-columns:
      1fr;
  }

  .etw-transformation {
    grid-template-columns:
      1fr;
  }

  .etw-inequality-sequence {
    grid-template-columns:
      1fr;
  }

  .etw-source-grid {
    grid-template-columns:
      1fr;
  }

  .etw-scale {
    grid-template-columns:
      1fr;
  }

  .etw-scale > div:not(.etw-scale-step) {
    display:
      none;
  }

  .etw-data-rule {
    padding:
      30px 22px;
  }

  .etw-rule-line {
    justify-content:
      flex-start;
  }

  .etw-rule-line b {
    display:
      none;
  }

  .etw-feature-message {
    padding:
      36px 24px;
  }

  .etw-footer-inner {
    flex-direction:
      column;

    align-items:
      flex-start;
  }

}


@media (max-width: 420px) {

  .etw-nav-links a {
    font-size:
      0.72rem;

    padding:
      8px 9px;
  }

  .etw-pathway-inner {
    font-size:
      0.62rem;

    gap:
      5px;
  }

  .etw-hero h1 {
    font-size:
      2.65rem;
  }

  .etw-hero-lead {
    font-size:
      1.05rem;
  }

}