/* =========================================================================
   Site footer (node 1:2978) — kibu logo, link columns, copyright
   ========================================================================= */
.sft {
  height: 507px;
  background: #fbfbfb;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
  display: flex;
  justify-content: center;
}

/* 1056px centered container with left/right hairline borders */
.sft-container {
  width: 1056px;
  border-left: 1px solid rgba(0, 0, 0, 0.1);
  border-right: 1px solid rgba(0, 0, 0, 0.1);
}

.sft-inner {
  display: flex;
  flex-direction: column;
  gap: 70px;
  padding: 80px 65px;
}

/* ---- Row 1 ---------------------------------------------------------------- */
.sft-row { width: 100%; }

.sft-cols {
  display: flex;
  gap: 32px;
  align-items: flex-start;
}

/* Brand column (175px) */
.sft-brand {
  width: 175px;
  height: 256px;
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: 14px;
  align-items: flex-start;
}

.sft-wordmark {
  font-family: 'Asap', sans-serif;
  font-weight: 700;
  font-size: 24px;
  line-height: 33.6px;
  letter-spacing: -0.4px;
  color: #222;
  white-space: nowrap;
}
img.sft-wordmark { height: 28px; width: auto; display: block; }

.sft-logo {
  width: 126px;
  height: 24.836px;
  display: block;
}

.sft-social {
  display: flex;
  gap: 12px;
  align-items: flex-end;
}

.sft-social-link {
  width: 18px;
  height: 18px;
  display: flex;
  opacity: 0.6;
}

.sft-social-link img {
  width: 18px;
  height: 18px;
  display: block;
}

/* X icon is 17x17 */
.sft-social-link--x,
.sft-social-link--x img {
  width: 17px;
  height: 17px;
}

.sft-address {
  font-family: 'Inter', sans-serif;
  font-weight: 400;
  font-size: 12px;
  line-height: 16.8px;
  letter-spacing: -0.4px;
  color: #3f3f3f;
  width: 175px;
}

/* Link columns area: 3 columns laid out at fixed x-offsets */
.sft-links {
  flex: 1 1 0;
  min-width: 0;
  height: 256px;
  position: relative;
}

.sft-col {
  position: absolute;
  top: 0;
  display: flex;
  flex-direction: column;
  gap: 15px;
  align-items: center;
}
.sft-col--1 { left: 0; }
.sft-col--2 { left: 249.66px; }
.sft-col--3 { left: 499.33px; }

.sft-col-head {
  width: 219.664px;
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  font-size: 14px;
  line-height: 21px;
  letter-spacing: -0.16px;
  color: rgba(0, 0, 0, 0.75);
  white-space: nowrap;
}

.sft-col-list {
  width: 219.664px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: flex-start;
}

.sft-link {
  font-family: 'Inter', sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  color: #777;
  white-space: nowrap;
}

.sft-link--wrap {
  white-space: normal;
  width: 220px;
}

/* ---- Row 2: copyright ----------------------------------------------------- */
.sft-copyrow {
  width: 926px;
  display: flex;
  justify-content: center;
}

.sft-copy {
  font-family: 'Inter', sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  color: rgba(0, 0, 0, 0.6);
  text-align: center;
  white-space: nowrap;
}

/* =========================================================================
   Responsive — append-only overrides (desktop rules above unchanged)
   ========================================================================= */
@media (max-width: 1024px) {
  .sft {
    height: auto;
    padding: 64px 40px;
  }

  /* Container goes fluid; drop fixed width so it can't overflow */
  .sft-container {
    width: 100%;
    box-sizing: border-box;
  }

  .sft-inner {
    padding: 0;
    gap: 48px;
  }

  /* Stack brand above link columns */
  .sft-cols {
    flex-direction: column;
    gap: 40px;
  }

  .sft-brand {
    width: 100%;
    height: auto;
  }

  /* De-absolute the link columns: wrapper becomes a normal flex row */
  .sft-links {
    position: static;
    width: 100%;
    height: auto;
    display: flex;
    flex-wrap: wrap;
    gap: 40px;
  }

  .sft-col {
    position: static !important;
    left: auto !important;
    width: auto;
    flex: 0 1 auto;
  }

  /* Free the rigid widths so columns size to content / wrap cleanly */
  .sft-col-head,
  .sft-col-list {
    width: auto;
  }

  .sft-link--wrap {
    width: auto;
  }

  /* Keep copyright centered along the full fluid width */
  .sft-copyrow {
    width: 100%;
  }
}

@media (max-width: 600px) {
  .sft {
    padding: 48px 24px;
  }

  .sft-inner {
    gap: 40px;
  }

  /* Stack the 3 link columns vertically */
  .sft-links {
    flex-direction: column;
    gap: 32px;
  }

  .sft-col {
    width: 100%;
  }

  .sft-copyrow {
    width: 100%;
  }

  .sft-copy {
    white-space: normal;
  }
}