/* The footer every page shares, laid out like subtitles-live.com's and
   layland.app's: the name, columns of links, then the maker and a note under
   a rule. Colors come from the page's own tokens (--line, --ink, --muted,
   --faint), which the home page, the guide and the privacy page all define.
   Every page puts it outside its own column, across the window (its rule
   edge to edge); its content is in the home page's column. */
.site-footer { border-top: 1px solid var(--line); padding-block: 40px 56px; font-size: 14px; }
.footer-inner {
  display: flex; flex-direction: column; gap: 28px;
  box-sizing: border-box; width: 100%; max-width: 68rem; margin-inline: auto; padding-inline: 20px;
}
.footer-brand { display: inline-flex; align-items: center; gap: 9px; margin: 0; font-weight: 600; font-size: 15px; color: var(--ink); }
.footer-brand img { display: block; border-radius: 22.5%; }
.footer-cols { display: flex; flex-wrap: wrap; gap: 28px 64px; }
.footer-col { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.footer-h { margin: 0 0 2px; font-size: 11.5px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--faint); }
.footer-col a { color: var(--muted); text-decoration: none; }
.footer-col a:hover { color: var(--ink); text-decoration: underline; }
.footer-app { display: inline-flex; align-items: center; gap: 8px; }
/* Each icon carries its own background, so it reads on either theme. */
.footer-app img { display: block; flex: none; border-radius: 22.5%; }
.footer-about {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 32px;
  padding-top: 24px; border-top: 1px solid var(--line);
}
.footer-maker { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--faint); text-decoration: none; }
.footer-maker:hover { color: var(--ink); }
.footer-maker img { display: block; border-radius: 50%; }
.footer-note { margin: 0; max-width: 68ch; font-size: 13px; color: var(--faint); }
.footer-note a { color: inherit; }
.footer-note a:hover { color: var(--ink); }