/* =====================================================================
   Section 8: footer. Layout measured from the reference at 1440 and 390:
   solid brand ground, 64 top / 32 bottom, 32px page gutter (24 on mobile),
   246px link columns on a 294px pitch, 16px caps headings, 16px links,
   brand wordmark under the columns, 20px tagline, 14px legal line.
   Ground is Live Pulse blue (#006CE0): white on it is 4.98:1 (AA).
   ===================================================================== */
.ft {
  background: var(--blue);
  color: #fff;
  padding: 64px 0 32px;
  font-family: 'Outfit', -apple-system, BlinkMacSystemFont, sans-serif;
  position: relative;
  z-index: 1;
  overflow: hidden;            /* wordmark never adds page width */
}
.ft-wrap {
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 32px;
}

/* Link columns */
.ft-cols {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  column-gap: 32px;
  row-gap: 48px;
  align-items: start;
}
.ft-col h3 {
  margin: 0 0 16px;
  font-size: 16px;
  font-weight: 500;
  line-height: 16px;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: #fff;
}
.ft-col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.ft-col a {
  display: inline-block;
  font-size: 16px;
  font-weight: 400;
  line-height: 20.8px;
  color: #fff;
  transition: opacity .15s cubic-bezier(.4, 0, .2, 1);
}
.ft-col a:hover, .ft-legal a:hover { opacity: .85; }
.ft a:focus-visible { outline: 2px solid #fff; outline-offset: 3px; border-radius: 4px; }

/* Wordmark: live Outfit 700 text, same height as the reference mark (about 150px) */
.ft-mark {
  display: block;
  margin: 64px 0 0;
  font-size: clamp(56px, 11vw, 158px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.035em;
  color: #fff;
  white-space: nowrap;
  user-select: none;
}

/* Tagline */
.ft-tag {
  margin: 64px 0 0;
  font-size: 20px;
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: 0.01em;
  color: #fff;
  text-wrap: balance;
}

/* Legal */
.ft-legal { margin-top: 64px; font-size: 14px; line-height: 18.2px; color: #fff; }
.ft-legal p { margin: 0; }
.ft-legal ul { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 16px; }
.ft-legal a { color: #fff; transition: opacity .15s cubic-bezier(.4, 0, .2, 1); }

/* Ask AI row */
.ft-ask { margin-top: 48px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
.ft-ask-label { margin: 0; font-size: 14px; font-weight: 500; letter-spacing: 0.01em; text-transform: uppercase; color: #fff; }
.ft-ask ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 16px; }
.ft-ask a { color: #fff; }
.ft-ask a:hover { text-decoration: underline; }

/* Tablet: three columns fit, keep pitch */
@media (max-width: 1100px) {
  .ft-cols { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 32px; }
}

/* Mobile: one column, 24px gutter */
@media (max-width: 640px) {
  .ft { padding: 64px 0 32px; }
  .ft-wrap { padding: 0 24px; }
  .ft-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 32px; }
  .ft-mark { margin-top: 48px; }
  .ft-tag { margin-top: 32px; }
  .ft-legal { margin-top: 32px; }
}

@media (prefers-reduced-motion: reduce) {
  .ft-col a, .ft-legal a { transition: none; }
}

/* Phone (Fyxer proportions @390): 16px gutter */
@media (max-width: 640px) {
  .ft-wrap { padding: 0 16px; }
}