/* Small helpers shared by several Why Hong Kong sections. */

.list-lb{font-size:15px;font-weight:700;letter-spacing:.06em;color:var(--muted);margin:0 0 16px}
.tiles{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:12px}
.tiles li{background:var(--paper);border:1px solid var(--rule);border-radius:12px;padding:20px 20px;font-weight:700;color:var(--ink);font-size:16.5px;line-height:1.3;display:flex;gap:14px;align-items:center}
.tiles li::before{content:"";flex:none;width:10px;height:10px;border-radius:50%;background:var(--violet)}
.tiles li:last-child{grid-column:1/-1}
.quote{margin-top:28px;font-weight:800;font-stretch:80%;font-variation-settings:'wdth' 80;text-transform:uppercase;color:var(--violet);font-size:clamp(24px,2.4vw,34px)!important;line-height:1.05}
.pairs{list-style:none;margin:0;padding:0}
.pairs li{display:grid;grid-template-columns:1fr 56px 1fr;align-items:center;gap:10px;padding:22px 0;border-top:1px solid var(--rule);font-weight:800;font-stretch:80%;font-variation-settings:'wdth' 80;text-transform:uppercase;color:var(--ink);font-size:clamp(18px,1.7vw,24px);line-height:1.05}
.pairs li:last-child{border-bottom:1px solid var(--rule)}
.pairs li span:last-child{text-align:right}
.pairs i{height:14px;position:relative}
.pairs i::before{content:"";position:absolute;left:4px;right:4px;top:6px;height:2px;background:var(--tide)}
.pairs i::after{content:"";position:absolute;left:50%;top:0;width:14px;height:14px;margin-left:-7px;border-radius:50%;background:var(--paper);border:2px solid var(--tide);box-sizing:border-box}
.equation{margin-top:clamp(40px,5vw,64px);background:var(--indigo);border-radius:18px;padding:clamp(28px,3.4vw,44px);text-align:center}
.equation p{color:var(--on-d2);font-size:17px;margin:0 0 18px}
.eq{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:10px 18px}
.eq span{color:#fff;font-weight:800;font-stretch:78%;font-variation-settings:'wdth' 78;text-transform:uppercase;font-size:clamp(28px,3.6vw,54px);line-height:1}
.eq b{color:var(--tide);font-size:clamp(28px,3.4vw,48px);font-weight:400;line-height:1}

@media (max-width:640px){
  .tiles{grid-template-columns:1fr}
  .tiles li:last-child{grid-column:auto}
  .pairs li{grid-template-columns:1fr 36px 1fr;font-size:16px}
}
