/* ─────────────────────────────────────────────
   footer.css — styles for the shared footer

   Extracted from footer.js. It lives here rather
   than being injected by that script so a static
   <footer data-site-footer> in the HTML renders
   correctly with JavaScript disabled — which is
   how GPTBot, PerplexityBot and Claude-Web see
   the site.

   Every page that renders a footer, whether
   static or script-injected, must link this file.
   ───────────────────────────────────────────── */

footer {
  padding: 16px 16px 18px;
  font-family: "Inter", system-ui, sans-serif;
}
.f-inner {
  max-width: 1600px;
  margin: 0 auto;
  background: #ffffff;
  border: 1px solid #ebebef;
  border-radius: 28px;
  box-shadow: 0 1px 3px rgba(16,18,40,0.04), 0 14px 36px rgba(16,18,40,0.05);
  padding: 48px 48px 20px;
}
footer * { box-sizing: border-box; }
footer p, footer h4 {
  font-size: inherit; font-weight: inherit;
  line-height: inherit; letter-spacing: normal;
  color: inherit; margin: 0;
}
footer a { color: inherit; text-decoration: none; }
.f-grid {
  display: grid;
  grid-template-columns: 1.7fr 1fr 1fr 1fr 1fr 2fr;
  gap: 40px;
  padding-bottom: 48px;
}
.f-brand { display: flex; flex-direction: column; align-items: flex-start; }
.f-nameplate { display: block; margin-bottom: 16px; }
.f-nameplate img { height: 28px; width: auto; display: block; }
.f-tagline {
  font-size: 0.8rem; color: #71717a;
  line-height: 1.6; margin-bottom: 14px; max-width: 240px;
}
.f-email {
  font-size: 0.8rem; color: #71717a;
  transition: color 0.15s;
}
.f-email:hover { color: #4a4aff; }
.f-social { display: flex; gap: 10px; align-items: center; margin-bottom: 14px; }
.f-li { color: #a1a1aa; transition: color 0.15s; display: flex; }
.f-li:hover { color: #4a4aff; }
.f-col { display: flex; flex-direction: column; }
.f-heading {
  font-size: 0.65rem; font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; color: #27272a;
  margin-bottom: 12px;
}
.f-links { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 9px; }
/* The processes column carries 21 entries; two columns keep the footer square.
   Multi-column rather than grid: it flows down one column then the next, and
   does not couple row heights across the two. */
.f-col-wide .f-links {
  display: block;
  columns: 2;
  column-gap: 26px;
}
.f-col-wide .f-links li {
  break-inside: avoid;
  margin-bottom: 9px;
}
.f-links li { font-size: 0.8rem; color: #71717a; line-height: 1.4; }
.f-links a { color: #71717a; transition: color 0.15s; }
.f-links a:hover { color: #4a4aff; }
.f-bottom {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 0; border-top: 1px solid #f5f5f7;
  gap: 16px; flex-wrap: wrap;
}
.f-copy { font-size: 0.7rem; color: #a1a1aa; }
.f-privacy { font-size: 0.7rem; color: #a1a1aa; text-decoration: none; transition: color 0.15s; }
.f-privacy:hover { color: #4a4aff; }
.f-cert { display: block; opacity: 0.7; transition: opacity 0.15s; }
.f-cert:hover { opacity: 1; }
.f-cert img { height: 120px; width: auto; display: block; }
@media (max-width: 1024px) {
  .f-grid { grid-template-columns: 2fr 1fr 1fr; gap: 32px 28px; }
}
@media (max-width: 720px) {
  .f-grid { grid-template-columns: 1fr 1fr; gap: 32px 28px; }
  .f-brand { grid-column: 1 / -1; }
  .f-tagline { max-width: 100%; }
}
@media (max-width: 720px) {
  footer { padding: 12px 12px 14px; }
  .f-inner { padding: 36px 26px 14px; border-radius: 22px; }
}
@media (max-width: 540px) {
  .f-grid { grid-template-columns: 1fr 1fr; gap: 28px 20px; }
}

/* ── Affiliations row ──
   Industry associations and partners, moved out of the ecosystem band on the
   homepage into the footer so every page carries them and the marketing panels
   stay focused on customers. Greyed like the customer marquee; colour on hover.
   Heights are per logo because these range from a square crest (CNS) to a wide
   lockup (Microsoft for Startups). */
.f-affil {
  padding: 20px 0 4px;
  border-top: 1px solid #f5f5f7;
}
.f-affil-label {
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #a1a1aa;
  margin-bottom: 14px;
}
.f-affil-logos {
  display: flex;
  align-items: center;
  gap: 32px;
  flex-wrap: wrap;
}
.f-affil-logos img {
  display: block;
  width: auto;
  filter: grayscale(1);
  opacity: 0.55;
  transition: filter 0.2s, opacity 0.2s;
}
.f-affil-logos a:hover img,
.f-affil-logos span:hover img {
  filter: grayscale(0);
  opacity: 1;
}
.f-affil .a-cns img { height: 44px; }
.f-affil .a-cna img { height: 26px; }
.f-affil .a-ocni img { height: 30px; }
.f-affil .a-aihub img { height: 26px; }
.f-affil .a-vector img { height: 34px; }
.f-affil .a-msft img { height: 34px; }
.f-affil .a-google img { height: 22px; }
.f-affil .a-nvidia img { height: 32px; }
@media (max-width: 720px) {
  .f-affil-logos { gap: 22px; }
  .f-affil .a-cns img { height: 34px; }
  .f-affil .a-cna img { height: 20px; }
  .f-affil .a-ocni img { height: 23px; }
  .f-affil .a-aihub img { height: 20px; }
  .f-affil .a-vector img { height: 26px; }
  .f-affil .a-msft img { height: 26px; }
  .f-affil .a-google img { height: 17px; }
  .f-affil .a-nvidia img { height: 25px; }
}