/* site-footer.css — ONE footer for every public page.
   ═══════════════════════════════════════════════════════════════════
   Companion to site-header.css, same distribution: nginx serves /css/*
   from capraseo-demo-live for every path on capraseo.com, so the
   landing, the blog, the feature pages and the legal documents all link
   this one file. No copies.

   Its real job is INTERNAL LINKING. The 12 feature pages were built as
   SEO landing pages, and until today the homepage linked to none of
   them — the only way in was from 10 of 21 blog posts. A grouped footer
   puts all 12 one hop from every page on the site, with descriptive
   anchor text, which is the cheapest ranking work available to us.

   That is also why the markup is server-rendered on each surface rather
   than injected by script: links a crawler cannot see do not do this
   job at all.

   Colours are literals, for the reason written out at length in
   site-header.css: the three host stylesheets define --panel/--accent
   with different values and, in one case, a different ROLE. */

.sf-foot {
  --sf-bg:     #0b0b12;
  --sf-line:   rgba(255, 255, 255, 0.07);
  --sf-text:   #eeeef5;
  --sf-muted:  #a3a4b6;
  --sf-dim:    #6f7188;

  margin-top: 64px;
  padding: 52px 24px 34px;
  background: var(--sf-bg);
  border-top: 1px solid var(--sf-line);
  color: var(--sf-muted);
  font-size: 13.5px;
  line-height: 1.6;
}

.sf-inner {
  max-width: 1100px;
  margin: 0 auto;
}

/* Brand sits on its own row above the columns: at four groups plus a
   company column, squeezing it in as a fifth made every column too
   narrow for its longest label ("Competitor gap", "AI video generator")
   and they wrapped raggedly. */
.sf-brand {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 30px;
  color: var(--sf-text);
  text-decoration: none;
  font-weight: 600;
  font-size: 15px;
  letter-spacing: -0.01em;
}
.sf-brand img { width: 24px; height: 24px; border-radius: 6px; display: block; }

.sf-cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(158px, 1fr));
  gap: 30px 26px;
}

/* Group headings. Same treatment as the legal pages' contents heading —
   small, uppercase, tracked — so a reader scans the groups before the
   links rather than meeting 12 undifferentiated URLs. */
.sf-col h3 {
  margin: 0 0 11px;
  font-size: 11.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--sf-dim);
}
.sf-col ul { margin: 0; padding: 0; list-style: none; }
.sf-col li { margin-bottom: 8px; }
.sf-col a {
  color: var(--sf-muted);
  text-decoration: none;
  transition: color 0.15s ease;
}
.sf-col a:hover { color: var(--sf-text); }

.sf-base {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 20px;
  margin-top: 38px;
  padding-top: 20px;
  border-top: 1px solid var(--sf-line);
  font-size: 12.5px;
  color: var(--sf-dim);
}
.sf-base a { color: var(--sf-dim); text-decoration: none; }
.sf-base a:hover { color: var(--sf-muted); }
.sf-copy { margin-right: auto; }

@media (max-width: 760px) {
  .sf-foot { margin-top: 48px; padding: 38px 18px 28px; }
  /* Two columns rather than one: 12 links stacked single-file makes the
     footer taller than most of the pages it sits under.

     CSS columns, not a 2-track grid. The groups are uneven (5, 2, 2, 3, 5)
     and in a grid every row is as tall as its tallest cell, so a
     two-item group sitting beside a five-item one left a hole the height
     of three links. Columns flow instead of aligning, and
     `break-inside: avoid` stops a group being split across the gap. */
  .sf-cols {
    display: block;
    columns: 2;
    column-gap: 18px;
  }
  .sf-col {
    break-inside: avoid;
    -webkit-column-break-inside: avoid;
    margin: 0 0 24px;
  }
  .sf-base { margin-top: 30px; }
}