/* The footer, following the marketing site's conventions rather than inventing
   its own: a call to action, then a column grid — wordmark and description in
   the wide first column, link lists beside it.
   
   Two details taken from techfabric.com specifically. Its footer links sit at
   17px and lift to the brand tint on hover, not at the 13px small-print size a
   footer invites; and its small labels use the mono, uppercase, 0.14em treatment
   that `.t-label` defines there. Both are reproduced here in tokens. */

.footer {
  border-top: 1px solid var(--border);
  background: var(--surface-raised);
  margin-top: auto;
}

/* --- the ask --------------------------------------------------------------- */

.footer__cta {
  max-width: var(--page-max);
  margin: 0 auto;
  padding: var(--space-8) var(--space-5);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-4);
  border-bottom: 1px solid var(--border);
}

.footer__eyebrow,
.footer__label {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 400;
  /* 0.14em, matching .t-label on techfabric.com rather than the manual's own
     --tracking-wide, so a label reads the same on both properties. */
  letter-spacing: 0.14em;
  text-transform: uppercase;
  line-height: 1.4;
  margin: 0;
}

.footer__eyebrow { color: var(--accent); }
.footer__label { color: var(--ink-faint); margin-bottom: var(--space-2); }

.footer__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-2xl);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-heading);
  color: var(--ink);
  margin: 0;
  max-width: 22ch;
}

.footer__lede {
  font-size: var(--text-body);
  line-height: var(--leading-body);
  color: var(--ink-muted);
  max-width: var(--measure);
  margin: 0;
}

/* --- the columns ----------------------------------------------------------- */

.footer__inner {
  max-width: var(--page-max);
  margin: 0 auto;
  padding: var(--space-8) var(--space-5);
  display: grid;
  gap: var(--space-7) var(--space-6);
  /* The brand column is wider, the way the marketing site's is. Explicit tracks
     rather than auto-fit: repeat(auto-fit, …) may not be combined with another
     flexible track, and doing so invalidates the whole template — the grid then
     silently collapses to a single column. */
  grid-template-columns: 1.6fr 1fr 1fr;
  align-items: start;
}

.footer__brand { max-width: 44ch; }

.footer__wordmark {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-lg);
  letter-spacing: var(--tracking-subheading);
  color: var(--ink);
  margin: 0 0 var(--space-3);
}

.footer__note {
  font-size: var(--text-base);
  line-height: var(--leading-body);
  color: var(--ink-muted);
  margin: 0;
}

.footer__column {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-3);
}

.footer__column a {
  font-size: var(--text-base);
  line-height: var(--leading-snug);
  color: var(--ink-muted);
  text-decoration: none;
}

.footer__column a:hover {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}

@media (max-width: 55rem) {
  .footer__inner { grid-template-columns: 1fr 1fr; }
  .footer__brand { grid-column: 1 / -1; }
}

@media (max-width: 45rem) {
  .footer__cta,
  .footer__inner { padding: var(--space-7) var(--space-5); }
}