.foot {
  background: #f2f5fa;
  border-top: .0625rem solid #e5eaf3;
  color: #5b6577;
}
.foot-inner {
  max-width: 70rem;
  margin: 0 auto;
  padding: 2.75rem 1.5rem 1.75rem;
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 1.75rem;
}
.foot-brand { display: flex; flex-direction: column; gap: .625rem; }
.foot-brand .brand-line {
  display: inline-flex; align-items: center; gap: .5625rem;
  color: #101828; font-weight: 700; font-size: .9375rem;
}
.foot-brand svg { width: 1.875rem; height: 1.875rem; border-radius: .5rem; }
.foot-brand p {
  margin: 0; max-width: 17.5rem;
  font-size: .7812rem; line-height: 1.8; color: #7a8497;
}
.foot-col h4 {
  margin: .125rem 0 .625rem;
  font-size: .8125rem; font-weight: 600; color: #101828;
}
.foot-col a {
  display: block; margin: .4375rem 0;
  color: #6a7487; font-size: .7812rem; text-decoration: none;
}
.foot-col a:hover { color: #1677ff; }
.foot-bottom {
  max-width: 70rem; margin: 0 auto;
  padding: .875rem 1.5rem 1.375rem;
  border-top: .0625rem solid rgba(16, 24, 40, .06);
  color: #8a93a5; font-size: .75rem;
  display: flex; justify-content: space-between; gap: .625rem; flex-wrap: wrap;
}
.foot-bottom a { color: #6a7487; text-decoration: none; }
.foot-bottom a:hover { color: #1677ff; }
.foot .icp-token { color: inherit; }
.foot .icp-token:hover { color: #1677ff; text-decoration: underline; }

@media (max-width: 760px) {
  .foot-inner { grid-template-columns: 1fr 1fr; padding: 2rem 1.125rem 1.25rem; }
  .foot-brand { grid-column: 1 / -1; }
}
@media (max-width: 420px) {
  .foot-inner { grid-template-columns: 1fr; }
}