/*
 * V50 - responsive Power Bank capacity comparison.
 * Layout rule: the desktop/tablet table MUST fit its containing column.
 * Mobile switches to stacked comparison cards. No horizontal page overflow.
 */
.hippo-v50-comparison{
  width:100%;
  max-width:100%;
  box-sizing:border-box;
  background:#fff;
  color:#111;
  margin:clamp(24px,4vw,56px) 0;
  overflow:hidden;
}
.hippo-v50-comparison *{box-sizing:border-box}
.hippo-v50-comparison__inner{
  width:min(1180px,calc(100% - 32px));
  max-width:100%;
  margin:0 auto;
}
.hippo-v50-comparison__heading{
  width:100%;
  max-width:760px;
  margin:0 0 22px;
}
.hippo-v50-comparison__eyebrow{
  display:inline-block;
  max-width:100%;
  font-size:12px;
  line-height:1.35;
  font-weight:800;
  letter-spacing:.12em;
  color:#111;
  background:#ffc400;
  border-radius:999px;
  padding:7px 11px;
  overflow-wrap:anywhere;
}
.hippo-v50-comparison h2{
  margin:12px 0 8px;
  font-size:clamp(26px,3.2vw,42px);
  line-height:1.12;
  letter-spacing:-.025em;
  overflow-wrap:anywhere;
}
.hippo-v50-comparison p{
  margin:0;
  font-size:clamp(15px,1.5vw,17px);
  line-height:1.65;
  color:#555;
  overflow-wrap:anywhere;
}

/* Desktop + tablet: one complete table, no horizontal scrolling. */
.hippo-v50-comparison__table-wrap{
  width:100%;
  max-width:100%;
  overflow:hidden;
  -webkit-overflow-scrolling:touch;
  border:1px solid #e8e8e8;
  border-radius:18px;
  background:#fff;
}
.hippo-v50-comparison__table{
  width:100%;
  max-width:100%;
  min-width:0;
  table-layout:fixed;
  border-collapse:collapse;
}
.hippo-v50-comparison__table col:nth-child(1){width:20%}
.hippo-v50-comparison__table col:nth-child(2){width:26%}
.hippo-v50-comparison__table col:nth-child(3){width:38%}
.hippo-v50-comparison__table col:nth-child(4){width:16%}
.hippo-v50-comparison th,
.hippo-v50-comparison td{
  min-width:0;
  padding:16px 14px;
  text-align:left;
  vertical-align:middle;
  border-bottom:1px solid #ededed;
  line-height:1.45;
  overflow-wrap:anywhere;
  word-break:normal;
}
.hippo-v50-comparison thead th{
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.06em;
  font-weight:800;
  background:#fafafa;
  color:#555;
}
.hippo-v50-comparison tbody th{
  font-size:clamp(14px,1.45vw,16px);
  font-weight:800;
}
.hippo-v50-comparison tbody td{
  font-size:clamp(13px,1.3vw,14px);
  color:#444;
}
.hippo-v50-comparison tbody tr:last-child th,
.hippo-v50-comparison tbody tr:last-child td{border-bottom:0}
.hippo-v50-comparison td:last-child,
.hippo-v50-comparison th:last-child{text-align:center}
.hippo-v50-comparison a{
  display:inline-flex;
  width:100%;
  max-width:112px;
  min-height:40px;
  align-items:center;
  justify-content:center;
  gap:5px;
  padding:8px 8px;
  border-radius:10px;
  background:#ffc400;
  color:#111;
  text-decoration:none;
  font-weight:800;
  font-size:12px;
  line-height:1.2;
  white-space:normal;
  text-align:center;
  overflow-wrap:anywhere;
}
.hippo-v50-comparison a:hover{filter:brightness(.96)}
.hippo-v50-comparison__note{
  display:flex;
  width:100%;
  max-width:100%;
  gap:8px;
  align-items:flex-start;
  margin-top:14px;
  padding:15px 16px;
  border:1px solid #ececec;
  border-radius:14px;
  background:#fafafa;
  font-size:14px;
  line-height:1.55;
  color:#555;
  overflow-wrap:anywhere;
}
.hippo-v50-comparison__note strong{color:#111;flex:0 0 auto}

/* Medium/tablet widths: keep all four columns visible and readable. */
@media (min-width:768px) and (max-width:1024px){
  .hippo-v50-comparison__inner{width:calc(100% - 32px)}
  .hippo-v50-comparison th,
  .hippo-v50-comparison td{padding:14px 10px}
  .hippo-v50-comparison thead th{font-size:10px}
  .hippo-v50-comparison tbody th{font-size:14px}
  .hippo-v50-comparison tbody td{font-size:13px}
  .hippo-v50-comparison a{font-size:11px;min-height:38px;padding:7px 6px}
}

/* Small phones: replace the table with fully contained cards. */
@media (max-width:767px){
  .hippo-v50-comparison__inner{width:calc(100% - 24px);max-width:100%}
  .hippo-v50-comparison__heading{margin-bottom:16px}
  .hippo-v50-comparison h2{font-size:clamp(24px,7.5vw,31px)}
  .hippo-v50-comparison__table-wrap{
    overflow:visible;
    border:0;
    border-radius:0;
    background:transparent;
  }
  .hippo-v50-comparison__table{
    min-width:0;
    border:0;
    display:block;
  }
  .hippo-v50-comparison__table colgroup{display:none}
  .hippo-v50-comparison__table thead{display:none}
  .hippo-v50-comparison__table tbody{display:grid;gap:12px}
  .hippo-v50-comparison__table tr{
    display:block;
    width:100%;
    max-width:100%;
    border:1px solid #e8e8e8;
    border-radius:16px;
    background:#fff;
    overflow:hidden;
  }
  .hippo-v50-comparison__table th,
  .hippo-v50-comparison__table td{
    display:grid;
    grid-template-columns:minmax(92px,35%) minmax(0,1fr);
    gap:10px;
    width:100%;
    max-width:100%;
    padding:12px 14px;
    border-bottom:1px solid #ededed;
    text-align:left;
  }
  .hippo-v50-comparison__table tr>*:last-child{border-bottom:0}
  .hippo-v50-comparison__table th:before,
  .hippo-v50-comparison__table td:before{
    content:attr(data-label);
    min-width:0;
    font-size:10px;
    font-weight:800;
    text-transform:uppercase;
    letter-spacing:.05em;
    color:#777;
    line-height:1.4;
    overflow-wrap:anywhere;
  }
  .hippo-v50-comparison__table tbody th{font-size:15px;background:#fafafa}
  .hippo-v50-comparison__table td{font-size:13px}
  .hippo-v50-comparison__table td:last-child{
    display:block;
    padding-top:11px;
  }
  .hippo-v50-comparison__table td:last-child:before{display:block;margin-bottom:7px}
  .hippo-v50-comparison a{width:100%;max-width:none;min-height:42px;font-size:13px}
  .hippo-v50-comparison__note{display:block;font-size:13px}
  .hippo-v50-comparison__note strong{display:block;margin-bottom:3px}
}