/* The site footer, shared by every landing page (homepage, /demo, /docs, /faq,
   /terms, /privacy), like the header in /nav.css. Pages link it
   (<link rel="stylesheet" href="/footer.css">) and must not restyle footer or
   .footer-* themselves (a test enforces it). Values are written in, and text
   metrics pinned, so each page's own body / p / a rules can't change it. */

footer {
  background: #1A1A2E; color: rgba(255,255,255,0.55); padding: 64px 0 32px; margin: 0;
  box-sizing: border-box;
  font-family: 'DM Sans', sans-serif; font-size: 16px; font-weight: 300;
  line-height: 1.6; letter-spacing: normal; text-align: left;
  -webkit-font-smoothing: antialiased;
}
/* Rules are scoped under footer (specificity 0,1,1+) so a page's element rules
   (/docs' p:last-child, terms' p and a:hover) can't outrank them. */
/* Same content grid as the header and the homepage (1120px, 32px gutters) */
footer .footer-inner { max-width: 1120px; margin: 0 auto; padding: 0 32px; }
footer .footer-cols { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 48px; margin: 0 0 48px; }
footer .footer-col-label { font-size: 12px; font-weight: 500; line-height: 1.6; color: rgba(255,255,255,0.35); text-transform: uppercase; letter-spacing: 0.08em; margin: 0 0 14px; }
footer .footer-wordmark { font-family: 'DM Serif Display', serif; font-size: 20px; font-weight: 400; color: #fff; margin: 0 0 8px; display: flex; align-items: center; gap: 4px; }
footer .footer-wordmark-dot { width: 6px; height: 6px; background: #3D3BF3; border-radius: 50%; display: inline-block; animation: footer-pulse 2.5s infinite; }
@keyframes footer-pulse { 0%,100%{opacity:1} 50%{opacity:0.35} }
footer .footer-tagline { font-size: 14px; font-weight: 300; line-height: 1.6; color: rgba(255,255,255,0.55); margin: 0 0 16px; }
footer .footer-links { display: flex; flex-direction: column; gap: 10px; }
footer .footer-link { font-size: 14px; color: rgba(255,255,255,0.55); text-decoration: none; transition: color 0.15s; }
/* pages with a global a:hover underline must not underline the footer */
footer .footer-link:hover { color: #fff; text-decoration: none; }
footer .footer-social { display: flex; gap: 10px; margin: 4px 0 0; }
footer .footer-social-icon { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border: 1px solid rgba(255,255,255,0.15); border-radius: 8px; color: rgba(255,255,255,0.55); text-decoration: none; transition: color 0.15s, border-color 0.15s; }
footer .footer-social-icon:hover { color: #fff; border-color: rgba(255,255,255,0.4); text-decoration: none; }
footer .footer-social-icon img { display: block; }
/* visible keyboard focus on the navy background (the browser default ring is dark) */
footer .footer-link:focus-visible, footer .footer-social-icon:focus-visible { outline: 2px solid #fff; outline-offset: 3px; border-radius: 4px; }
footer .footer-social-icon:focus-visible { border-radius: 8px; }
footer .footer-bottom { border-top: 1px solid rgba(255,255,255,0.08); padding-top: 20px; display: flex; align-items: center; }
footer .footer-copy { font-size: 13px; color: rgba(255,255,255,0.55); }
@media (max-width: 640px) {
  footer .footer-inner { padding: 0 16px; }
  footer .footer-cols { grid-template-columns: 1fr 1fr; gap: 32px; }
}
@media (max-width: 400px) { footer .footer-cols { grid-template-columns: 1fr; } }
/* site.css has a page-wide reduced-motion switch, but only the homepage and /demo load it */
@media (prefers-reduced-motion: reduce) {
  footer .footer-wordmark-dot { animation: none; }
  footer .footer-link, footer .footer-social-icon { transition: none; }
}