zl-site-footer {
  display: block;
}

.site-footer {
  position: relative;
  overflow: hidden;
  border-inline: 1px solid var(--zl-line);
  background: var(--zl-surface);
  color: var(--zl-body);
}

/* Two ROWS, not two columns [Arjun, 2026-08-09]: "the current layout doesn't
   provide clear diff between each column ... we will have even more pages from
   industries and competitors coming in soon."

   The brand block used to take 30% and the link columns shared the rest, so
   five columns fought over 839px and half the product names wrapped onto two
   lines. Giving the links the full width buys back a third of the space, which
   is what stops "Company Enrichment" breaking in the middle.

   It also scales. Four groups today; Industries and Compare make six, and the
   column rule below already carries the counts. */
.site-footer__grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-rows: auto 1fr;
  padding-bottom: 7rem;
}

/* Brand and the call to action share one band across the top. */
.site-footer__top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: clamp(1.5rem, 3vw, 3rem);
  /* Tightened [Arjun, 2026-08-09]: the band holds a wordmark and one line, and
     was padded as though it held a section. */
  padding: clamp(1.35rem, 2vw, 1.85rem) clamp(1.25rem, 3.4vw, 4rem);
  border-bottom: 1px solid var(--zl-line);
}
.site-footer__act { display: flex; align-items: center; gap: 1rem; }

.site-footer__brand {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .5rem;
}

.site-footer .zl-wordmark {
  color: var(--zl-ink);
  font-size: 2rem;
}

.site-footer__brand p {
  max-width: 34rem;
  color: var(--zl-body);
  line-height: var(--zl-leading-copy);
}

.site-footer__social {
  width: 2.5rem;
  height: 2.5rem;
  display: grid;
  place-items: center;
  border: 1px dashed var(--zl-line-strong);
  color: var(--zl-ink);
  transition: color 180ms var(--zl-ease-out), border-color 180ms var(--zl-ease-out);
}

.site-footer__social svg {
  width: 1.15rem;
  height: 1.15rem;
  fill: currentColor;
}

.site-footer__social:hover,
.site-footer__social:focus-visible {
  border-color: var(--zl-cobalt);
  color: var(--zl-cobalt);
}

.site-footer__demo {
  width: min(100%, 16rem);
  margin-top: auto;
}

.site-footer__links {
  min-width: 0;
  display: grid;
  /* Equal tracks, not weighted ones. A weighted set made the narrow columns
     narrower still and was the reason names wrapped; with the full width to
     share, four equal columns give every group about 280px and nothing
     breaks. Divisors only, per page-rules 2.1 — 1 / 2 / 4. */
  grid-template-columns: repeat(2, minmax(0, 1fr));
  padding: 0 clamp(0.5rem, 1.2vw, 1.25rem);
}

.site-footer__links > div {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .6rem;
  padding: clamp(1.5rem, 2.2vw, 2rem) clamp(1.25rem, 2.2vw, 2.25rem);
}

/* A hairline between groups. The complaint was that the columns did not read
   as separate things; a rule between them says so outright, and it is the same
   device the mega-menu uses between its two bays. */
.site-footer__links > div + div { border-left: 1px solid var(--zl-line); }

/* Headings in the mono label voice the rest of the site uses for column
   labels — the nav's .site-nav__col-label, the stat band, the eyebrows —
   rather than bold body text, which read as another link. */
.site-footer__links > div strong {
  margin-bottom: .45rem;
  color: var(--zl-muted);
  font-family: var(--zl-font-mono);
  font-size: var(--zl-text-xs);
  font-weight: var(--zl-weight-regular);
  letter-spacing: var(--zl-tracking-label);
  text-transform: uppercase;
}

.site-footer__links strong {
  margin-bottom: 0.8rem;
  color: var(--zl-ink);
  font-size: var(--zl-text-md);
}

.site-footer__links a {
  color: var(--zl-body);
  line-height: 1.4;
  text-decoration: none;
}

.site-footer__links a:hover,
.site-footer__links a:focus-visible {
  color: var(--zl-cobalt);
}

.site-footer__signal-field {
  position: absolute;
  z-index: 0;
  inset: auto 0 0;
  height: 7rem;
  display: grid;
  grid-template-columns: repeat(64, minmax(0, 1fr));
  grid-template-rows: repeat(5, minmax(0, 1fr));
  gap: clamp(0.14rem, 0.28vw, 0.3rem);
  align-items: end;
  padding: 0.75rem clamp(0.6rem, 1vw, 1rem) 0;
  background: linear-gradient(to bottom, transparent, var(--zl-wash));
}

.site-footer__signal-cell {
  width: 100%;
  height: var(--signal-height);
  align-self: end;
  background: var(--zl-muted);
  opacity: var(--signal-opacity);
  transform: scaleY(0.58);
  transform-origin: bottom;
  animation: footer-signal-pulse var(--signal-duration) var(--zl-ease-in-out) infinite alternate;
  animation-delay: var(--signal-delay);
}

.site-footer__legal,
.site-footer__compliance {
  position: absolute;
  z-index: 3;
  bottom: 1.2rem;
  color: var(--zl-muted-text);
  font-family: var(--zl-font-mono);
  font-size: 0.7rem;
  line-height: 1.4;
  text-transform: uppercase;
}

.site-footer__legal {
  left: clamp(1.25rem, 3.4vw, 4rem);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}
/* Privacy and Terms moved out of the link columns and into this bar
   [2026-08-09]. Two items did not justify a full column, and the bottom bar is
   where a reader looks for them anyway. */
.site-footer__legal a { color: inherit; text-decoration: none; }
.site-footer__legal a:hover,
.site-footer__legal a:focus-visible { color: var(--zl-ink); }

.site-footer__compliance {
  right: clamp(1.25rem, 3.4vw, 4rem);
  text-align: right;
}

@keyframes footer-signal-pulse {
  0% {
    opacity: var(--signal-opacity-low);
    transform: scaleY(0.45);
  }
  100% {
    opacity: var(--signal-opacity);
    transform: scaleY(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .site-footer__signal-cell {
    animation: none;
    transform: scaleY(0.76);
  }
}

@media (max-width: 52rem) {
  .site-footer__grid {
    min-height: 0;
    grid-template-columns: 1fr;
    padding-bottom: 11rem;
  }

  .site-footer__brand {
    min-height: 22rem;
    padding: 3rem 1.25rem;
    border-right: 0;
    border-bottom: 1px solid var(--zl-line);
  }

  .site-footer__links {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding: 0;
  }

  .site-footer__links > div {
    min-height: 12rem;
    padding: 2.5rem 1.25rem;
  }

  .site-footer__signal-field {
    height: 7.5rem;
    grid-template-columns: repeat(32, minmax(0, 1fr));
    grid-template-rows: repeat(5, minmax(0, 1fr));
  }

  .site-footer__signal-cell:nth-child(n + 161) {
    display: none;
  }
}

/* Six groups from 80rem: Industries split into Build and Grow when the
   directory went to twelve pages, because one column of twelve links against
   neighbours of two and five is not a column, it is a list with four labels
   next to it.

   Between 64rem and 80rem six equal tracks would be ~170px and the longer
   names would wrap, so that band takes three tracks and two rows instead --
   which means the second row's first cell would otherwise draw the vertical
   rule meant to separate columns, hence the nth-child reset. */
@media (min-width: 64rem) and (max-width: 79.999rem) {
  .site-footer__links { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .site-footer__links > div:nth-child(3n + 1) { border-left: 0; }
  .site-footer__links > div:nth-child(n + 4) { border-top: 1px solid var(--zl-line); }
}

/* The two-track band had the same fault and had it before this change: rows
   two and three drew a vertical rule down their left edge, where a vertical
   rule means "next column", and no horizontal rule where the row actually
   broke. Found while checking the three-track band above; fixed here rather
   than left as the one breakpoint that separates groups the wrong way. */
@media (min-width: 32.0625rem) and (max-width: 63.999rem) {
  .site-footer__links > div:nth-child(2n + 1) { border-left: 0; }
  .site-footer__links > div:nth-child(n + 3) { border-top: 1px solid var(--zl-line); }
}

/* Track count must equal the group count or the last group orphans onto a row
   of its own. Adding Industries took it from four groups to five and I did not
   move this, which is exactly the failure page-rules 2.1 is about
   [2026-08-09]. check-pages.py compares the two -- against THIS declaration,
   the widest breakpoint -- so the next addition fails loudly instead of
   quietly wrapping. */
@media (min-width: 80rem) {
  .site-footer__links { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}

/* The bottom bar is a left-anchored legal line and a right-anchored compliance
   line sharing one `bottom`, which only works while the two fit side by side.
   They do not below ~705px: measured drawing on top of each other at every
   width from 513 to 680 (overlap 175px at 513, still 15px at 680), on every
   page of the site. Pre-existing, found while centring the footer for mobile.
   Below that width they stack instead, compliance above legal. */
@media (max-width: 44rem) {
  .site-footer__legal,
  .site-footer__compliance {
    left: clamp(1.25rem, 3.4vw, 4rem);
    right: clamp(1.25rem, 3.4vw, 4rem);
    text-align: left;
  }

  .site-footer__compliance { bottom: 3.6rem; }
}

@media (max-width: 32rem) {
  .site-footer__links {
    grid-template-columns: 1fr;
  }
  .site-footer__links > div + div { border-left: 0; }

  .site-footer__links > div {
    min-height: auto;
    padding: 2rem 1.25rem;
    border-bottom: 1px solid var(--zl-line);
  }

  .site-footer__links > div:last-child {
    border-bottom: 0;
  }

  .site-footer__signal-field {
    grid-template-columns: repeat(16, minmax(0, 1fr));
  }

  .site-footer__signal-cell:nth-child(n + 81) {
    display: none;
  }

  .site-footer__legal,
  .site-footer__compliance {
    font-size: 0.6rem;
  }

  /* Centred once the footer is a single column [Arjun, 2026-08-11]. Only at
     this breakpoint: from 32rem up the links are two or more columns, and
     centred text inside side-by-side columns reads as a mistake rather than a
     choice. */
  .site-footer__top { justify-content: center; }

  .site-footer__brand {
    align-items: center;
    text-align: center;
  }

  .site-footer__links > div {
    align-items: center;
    text-align: center;
  }

  .site-footer__legal,
  .site-footer__compliance {
    justify-content: center;
    text-align: center;
  }
}