/* ---------------- Social Prosperity Equation page ---------------- */
.equation-main{
  background:var(--gray);
  padding:28px clamp(10px, 3vw, 40px) 12px;
}
.equation-figure{
  position:relative;
  width:100%;
  max-width:1320px;
  margin:0 auto;
  aspect-ratio:12192/6858;
}
.equation-figure > *{ position:absolute; }

.equation-home-link{
  text-align:center;
  margin:18px 0 40px;
}
.equation-home-link a{
  color:var(--blue-dark);
  font-family:var(--font-display);
  font-weight:700;
  font-size:clamp(0.95rem, 2.2vw, 1.3rem);
}
.equation-home-link a:hover{ text-decoration:underline; }

/* big light-blue rounded background */
.eq-bg{
  left:7%; top:19.5%; width:91.2%; height:78%;
  background:var(--blue-light);
  border-radius:6%/5.4%;
}

/* vertical Social Prosperity bar */
.eq-vertical{
  left:8.6%; top:21.03%; width:8.9%; height:73.3%;
  background:var(--blue-dark);
  border-radius:14px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.eq-vertical span{
  writing-mode:vertical-rl;
  transform:rotate(180deg);
  color:var(--white-neg);
  font-family:var(--font-display);
  font-weight:800;
  font-size:clamp(1.25rem, 3.6vw, 2.35rem);
  letter-spacing:.01em;
  white-space:nowrap;
}

.eq-equals{
  left:18.1%; top:53.8%; width:4.7%; height:8%;
  display:flex; align-items:center; justify-content:center;
  color:var(--blue-dark);
  font-family:var(--font-display);
  font-weight:800;
  font-size:clamp(1.3rem, 3.4vw, 2.5rem);
}

.eq-plus{
  width:4.5%; height:8%;
  left:33.6%;
  background:var(--blue-light);
  display:flex; align-items:center; justify-content:center;
  color:var(--blue-dark);
  font-family:var(--font-display);
  font-weight:800;
  font-size:clamp(1.25rem, 3.2vw, 2.3rem);
  border-radius:4px;
}
.eq-plus.p1{ top:35.0%; }
.eq-plus.p2{ top:53.75%; }
.eq-plus.p3{ top:72.2%; }

/* dark blue chevron rows */
.eq-row{
  left:19.2%; width:74.5%; height:17.05%;
  background:var(--blue-dark);
  clip-path: polygon(6% 0, 100% 0, 100% 100%, 6% 100%, 0 50%);
  border-radius:0 16px 16px 0;
}
.eq-row.r1{ top:21.03%; }
.eq-row.r2{ top:39.77%; }
.eq-row.r3{ top:58.52%; }
.eq-row.r4{ top:77.27%; }

.eq-label{
  left:26.5%; width:25.5%;
  display:flex; align-items:center;
  color:var(--pink);
  font-family:var(--font-display);
  font-weight:700;
  font-size:clamp(1.3rem, 3.6vw, 2.55rem);
  line-height:1.05;
}
.eq-label.l1{ top:25.8%; height:6.44%; }
.eq-label.l2{ top:44.86%; height:6.3%; }
.eq-label.l3{ top:64.28%; height:6.01%; }
.eq-label.l4{ top:82.36%; height:6.3%; }

/* white pill behind each green item — sized to the longest factor text
   (Economic Freedom / Libertad Económica) so every pill shares one width */
.eq-pill{
  left:53%; width:40%; height:7.35%;
  background:var(--white-neg);
  border-radius:999px;
}

/* clickable green factor buttons (icon + text), same box as the pill */
.eq-factor{
  left:53%; width:40%; height:7.35%;
  display:flex; align-items:center; gap:2%;
  padding:0 2.6%;
  color:var(--green);
  font-family:var(--font-display);
  font-weight:700;
  font-size:clamp(1rem, 2.3vw, 1.62rem);
  white-space:nowrap;
  border-radius:999px;
  transition:transform .15s ease, box-shadow .15s ease;
}
.eq-factor:hover{ transform:translateY(-2px); box-shadow:0 8px 18px rgba(0,0,0,0.15); }
.eq-factor .play-ico{
  width:clamp(18px, 3.2vw, 28px);
  height:clamp(18px, 3.2vw, 28px);
  flex:none;
}

/* top title */
.eq-title{
  left:19.5%; top:0%; width:37%; height:17.5%;
  display:flex;
  align-items:center;
  color:var(--blue-dark);
  font-family:var(--font-display);
  font-weight:800;
  font-size:clamp(1.15rem, 3.1vw, 2.15rem);
  line-height:1.12;
}

/* Start here / SPI index buttons — Start here! is the primary call to action,
   kept compact and height-symmetric with the title box next to it */
.eq-start{
  left:3.5%; top:0%; width:13.5%; height:17.5%;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:7%;
  background:var(--blue-dark);
  border-radius:16px;
  color:var(--white-neg);
  box-shadow:0 10px 22px rgba(0,0,0,0.18);
}
.eq-start .play-big{
  width:30%; height:30%;
  color:#E23B2E;
}
.eq-start span{
  font-family:var(--font-display);
  font-weight:800;
  font-size:clamp(0.8rem, 1.85vw, 1.2rem);
  line-height:1.1;
  text-align:center;
}

.eq-index{
  left:86.5%; top:2.5%; width:10.5%; height:12%;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:6%;
  background:var(--blue-dark);
  border-radius:14px;
  color:var(--white-neg);
  box-shadow:0 10px 22px rgba(0,0,0,0.18);
  text-align:center;
}
.eq-index svg{ width:30%; height:30%; }
.eq-index span{
  font-family:var(--font-display);
  font-weight:800;
  font-size:clamp(0.62rem, 1.35vw, 0.86rem);
  line-height:1.15;
}

@media (max-width: 680px){
  .equation-figure{ aspect-ratio:auto; min-height:1500px; }
  .eq-label{ font-size:1rem; }
  .eq-vertical span{ font-size:0.85rem; }
  .eq-title{ font-size:1.05rem; }
  .eq-factor{ white-space:normal; font-size:0.8rem; line-height:1.15; }
  .eq-factor .play-ico{ width:16px; height:16px; }
}