@font-face {
  font-family:'Marketing Footer Sans';
  src:url("../fonts/space-grotesk-300-latin.25ea4a783c12.woff2") format('woff2');
  font-style:normal;
  font-weight:400;
  font-display:swap;
}

@font-face {
  font-family:'Marketing Footer Mono';
  src:url("../fonts/geist-mono-latin.a15f9d568fb0.woff2") format('woff2');
  font-style:normal;
  font-weight:400 500;
  font-display:swap;
}

footer.site {
  --paper:oklch(0.985 0.004 95);
  --rule:oklch(0.88 0.008 95);
  --ink:oklch(0.18 0.025 250);
  --ink-2:oklch(0.42 0.025 250);
  --ink-3:oklch(0.58 0.018 250);
  --f-sans:'Marketing Footer Sans',ui-sans-serif,system-ui,sans-serif;
  --f-mono:'Marketing Footer Mono',ui-monospace,'SFMono-Regular',monospace;
  font-family:var(--f-sans);
  font-size:17px;
  font-weight:400;
  line-height:1.55;
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
  font-feature-settings:'ss01';
}

footer.site>.container {
  width:100%;
  max-width:1280px;
  margin:0 auto;
  padding:0 56px;
}

/* ---------- Footer ---------- */
footer.site {
  background: var(--paper);
  padding: 72px 0 28px;
  border-top: 1px solid var(--rule);
}

.footer-top {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr 1.2fr;
  gap: 48px;
  padding-bottom: 56px;
  border-bottom: 1px solid var(--rule);
}

.footer-brand img {
  display: block;
  max-width: 100%;
  width: auto;
  height: 26px;
  margin-bottom: 18px;
}

.footer-brand .product {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 18px;
}

.footer-brand p {
  font-size: 13px;
  color: var(--ink-2);
  line-height: 1.6;
  max-width: 30ch;
  margin-bottom: 14px;
}

.footer-brand .email {
  font-family: var(--f-mono);
  font-size: 12px;
  color: var(--ink);
  border-bottom: 1px solid var(--ink-3);
  padding-bottom: 1px;
}

.footer-col h5 {
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin: 0 0 16px;
  font-weight: 500;
}

.footer-col ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 11px;
}

.footer-col a {
  font-size: 13px;
  color: var(--ink-2);
}

.footer-col a:hover {
  color: var(--ink);
}

.footer-bot {
  padding-top: 22px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
  flex-wrap: wrap;
  gap: 14px;
}

.footer-bot a {
  color: var(--ink-2);
}

.footer-bot a:hover {
  color: var(--ink);
}

.footer-bot .legal {
  display: flex;
  gap: 22px;
}

@media(max-width:1100px) {
  footer.site>.container {
    padding-inline:32px;
  }
  .footer-top {
    grid-template-columns:1fr 1fr;
    gap:36px;
  }
}

@media(max-width:600px) {
  footer.site>.container {
    padding-inline:16px;
  }
  .footer-top {
    grid-template-columns:1fr;
  }
}