/* Canonical footer styles, shared by every marketing page.
   Paired with scripts/partials/footer.html and injected by scripts/sync-partials.js, which
   also guarantees each page links this file. Edit here, not in a page. */

.foot { background: var(--charcoal); color: rgba(255,255,255,0.62); padding: 54px 0 26px; }
.foot a { color: rgba(255,255,255,0.72); text-decoration: none; transition: color 0.14s; }
.foot a:hover { color: #fff; }

.foot-top { display: grid; grid-template-columns: 1.15fr 2fr; gap: 48px; }

.foot-brand img { height: 26px; width: auto; opacity: 0.95; }
.foot-brand p { margin-top: 16px; font-size: 13.5px; line-height: 1.6; color: rgba(255,255,255,0.5); max-width: 300px; }

.foot-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
.foot-col { display: flex; flex-direction: column; align-items: flex-start; gap: 11px; }
.foot-col h2 { font-family: var(--font-display); font-weight: 800; font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold); margin-bottom: 3px; }
.foot-col a { font-size: 14px; font-weight: 600; }

.foot-bar { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 44px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,0.1); font-size: 12.5px; }
.foot-cr { color: rgba(255,255,255,0.45); font-weight: 700; }
.foot-note { color: rgba(255,255,255,0.35); }

@media (max-width: 860px) {
  .foot-top { grid-template-columns: 1fr; gap: 34px; }
  .foot-brand p { max-width: none; }
}
@media (max-width: 560px) {
  .foot { padding: 42px 0 22px; }
  .foot-cols { grid-template-columns: 1fr 1fr; gap: 26px; }
  .foot-cta { margin-left: 0; width: 100%; justify-content: center; }
}