.footer {
  --fg-fine: color-mix(in srgb, var(--fg-2) 50%, var(--fg-3));
  padding-block: clamp(40px, 1.5rem + 2.5vw, 64px) clamp(32px, 1.25rem + 1.5vw, 48px);
  font-size: var(--fs-fine);
  line-height: 1.5;
  color: var(--fg-2);
}

.footer .footer__top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px 40px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--line);
}

.footer .footer__brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-weight: 600;
  letter-spacing: -0.012em;
  color: var(--fg);
}
.footer .footer__logo {
  width: 32px; height: 32px; flex: none;
  padding: 2px; border-radius: 7.5px;
  background: #fff;
}
.footer .footer__logo img { width: 100%; height: 100%; object-fit: contain; }

.footer .footer__links {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 28px;
}

.footer .footer__links a,
.footer .footer__docs a {
  display: inline-block;
  padding-block: 6px;
  color: var(--fg-2);
  transition: color var(--dur) var(--ease);
}
.footer .footer__links a { font-size: var(--fs-small); }
.footer .footer__links a:hover,
.footer .footer__docs a:hover {
  color: var(--fg);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}

.footer .footer__bottom {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px 40px;
  padding-top: 24px;
}
.footer .footer__copy { color: var(--fg-fine); max-width: 46rem; }
.footer .footer__nobr { white-space: nowrap; }

.footer .footer__docs { display: flex; flex-wrap: wrap; align-items: center; }
.footer .footer__docs a + a { position: relative; margin-left: 25px; }
.footer .footer__docs a + a::before {
  content: ""; position: absolute; left: -13px; top: 50%;
  width: 1px; height: 12px; margin-top: -6px; background: var(--line-strong);
}

.footer .footer__pay {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: var(--fs-fine);
  color: var(--fg-fine);
}
.footer .footer__pay img {
  box-sizing: content-box;
  height: 18px;
  width: auto;
  padding: 7px 11px;
  border-radius: var(--r-sm);
  background: var(--ink-950);
}

@media (max-width: 560px) {
  .footer .footer__links {
    display: grid;
    grid-template-rows: repeat(3, auto);
    grid-auto-flow: column;
    grid-auto-columns: max-content;
    gap: 0 56px;
  }
}

@media (min-width: 900px) {
  .footer .footer__bottom {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "copy pay" "docs pay";
    align-items: center;
  }
  .footer .footer__copy { grid-area: copy; }
  .footer .footer__docs { grid-area: docs; }
  .footer .footer__pay { grid-area: pay; justify-self: end; }
}