/* Site footer. Self-contained (no Tailwind), so static pages and Next.js routes render it the same.
   Markup source: content/chrome/footer.html → python scripts/sync_footer.py */
.lsf {
  --lsf-bg: #020617; --lsf-line: rgba(148, 163, 184, .14); --lsf-ink: #f8fafc; --lsf-dim: #94a3b8; --lsf-mute: #64748b; --lsf-acc: #22d3ee;
  position: relative; overflow: hidden; background: var(--lsf-bg); color: var(--lsf-dim);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; font-size: 15px; line-height: 1.55;
  border-top: 1px solid var(--lsf-line); isolation: isolate;
}
.lsf::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(60% 80% at 50% 110%, rgba(6, 182, 212, .13), transparent 70%),
              radial-gradient(40% 50% at 100% 0%, rgba(88, 28, 135, .12), transparent 70%);
}
.lsf *, .lsf *::before, .lsf *::after { box-sizing: border-box; }
.lsf a { color: inherit; text-decoration: none; }
.lsf ul { list-style: none; margin: 0; padding: 0; }
.lsf h3 { margin: 0 0 14px; color: var(--lsf-ink); font-size: 13px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.lsf__beam { position: absolute; top: 0; left: -50%; width: 50%; height: 1px; background: linear-gradient(90deg, transparent, var(--lsf-acc), transparent); box-shadow: 0 0 14px rgba(6, 182, 212, .55); animation: lsf-beam 5s linear infinite; }
@keyframes lsf-beam { to { left: 150%; } }
@media (prefers-reduced-motion: reduce) { .lsf__beam { animation: none; left: 25%; opacity: .5; } }

.lsf__in { max-width: 1200px; margin: 0 auto; padding: 64px 24px 28px; }
.lsf__grid { display: grid; gap: 40px 32px; grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr)); }
.lsf .lsf__logo { display: inline-block; color: var(--lsf-ink); font-size: 24px; font-weight: 900; font-style: italic; letter-spacing: -.04em; }
.lsf__logo sup { font-size: 10px; font-style: normal; font-weight: 500; color: var(--lsf-mute); margin-left: 2px; }
.lsf__pitch { margin: 14px 0 18px; max-width: 34ch; }
.lsf__meta li { font-size: 14px; margin: 4px 0; }
.lsf__meta a:hover, .lsf__col a:hover, .lsf__bar a:hover, .lsf__link:hover { color: var(--lsf-acc); }
.lsf__cta {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 20px; padding: 11px 20px; border-radius: 999px;
  background: var(--lsf-ink); color: #020617 !important; font-weight: 600; font-size: 14px; transition: transform .2s, box-shadow .2s;
}
.lsf__cta:hover { transform: translateY(-1px); box-shadow: 0 8px 24px rgba(34, 211, 238, .25); }
.lsf__promise { display: flex; align-items: center; gap: 7px; margin-top: 14px; font-size: 13px; font-weight: 600; color: #34d399 !important; }
.lsf__promise u { color: var(--lsf-mute); font-weight: 500; text-underline-offset: 3px; }
.lsf__promise:hover u { color: var(--lsf-acc); }
.lsf__col li { margin: 0 0 10px; }
.lsf__col a, .lsf__link { font-size: 14.5px; transition: color .15s; }
.lsf__link { all: unset; cursor: pointer; font-size: 14.5px; color: var(--lsf-dim); }
.lsf__link:focus-visible, .lsf a:focus-visible { outline: 2px solid var(--lsf-acc); outline-offset: 3px; border-radius: 4px; }

.lsf__bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; margin-top: 48px; padding-top: 22px; border-top: 1px solid var(--lsf-line); font-size: 13px; color: var(--lsf-mute); }
.lsf__bar p { margin: 0; }
.lsf__bar-r { display: flex; align-items: center; gap: 18px; }
.lsf__social { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--lsf-line); background: rgba(15, 23, 42, .7); color: var(--lsf-dim); }
.lsf__social:hover { border-color: rgba(34, 211, 238, .5); color: var(--lsf-ink) !important; }

@media (max-width: 900px) {
  .lsf__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .lsf__brand { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
  .lsf__in { padding: 48px 16px 24px; }
  .lsf__grid { grid-template-columns: 1fr 1fr; gap: 32px 20px; }
  .lsf__col:last-child { grid-column: 1 / -1; }
  .lsf__bar { flex-direction: column; align-items: flex-start; }
  .lsf__bar-r { flex-wrap: wrap; }
}