/* ==========================================================================
   Shared site chrome: the navigation bar + footer, matched to the home
   landing page (src/styles.css). Linked LAST on About / Curriculum / Blog /
   Contact so it overrides whatever nav/footer rules those pages already ship.
   Tokens are referenced with fallbacks so the file is self-sufficient.
   ========================================================================== */

/* ---------- nav CTA pill (same as the home "Try for free" button) ---------- */
.nav .btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-family: var(--font-body, 'Nunito', system-ui, sans-serif);
  font-weight: 700; font-size: 13.5px; text-transform: none; letter-spacing: normal;
  padding: 13px 26px; border-radius: 999px; border: none; cursor: pointer;
  text-decoration: none; position: relative; transition: transform 0.16s, filter 0.2s;
}
.nav .btn-primary { color: #fff; background: #8B7FD9; border-bottom: 3px solid #6B5FB8; }
.nav .btn-primary:hover { transform: translateY(-1px); filter: brightness(1.08); }
.nav .btn:active { transform: translateY(2px); border-bottom-width: 1px !important; }

/* ---------- nav ---------- */
.nav {
  position: sticky; top: 0; left: 0; right: 0; z-index: 100;
  padding: 0; border: none; background: transparent;
}
.nav .nav-inner {
  max-width: 1280px; margin: 0 auto; padding: 14px 24px;
  display: flex; align-items: center; gap: 22px;
}
.nav .nav-logo {
  font-family: var(--font-display, 'Space Grotesk', sans-serif); font-weight: 700; font-size: 20px;
  color: var(--ink, #1F2937); text-decoration: none; letter-spacing: 0.02em;
  display: flex; align-items: center; gap: 8px;
}
.nav .nav-logo .spark { color: var(--neon, #8B7FD9); }
.nav .nav-links { display: flex; gap: 34px; margin: 0 auto; align-items: center; }
.nav .nav-links a {
  font-family: var(--font-body, 'Nunito', system-ui, sans-serif); font-weight: 600; font-size: 14.5px;
  color: var(--ink-soft, rgba(31, 41, 55, 0.72)); text-decoration: none; transition: color 0.2s;
}
.nav .nav-links a:hover, .nav .nav-links a.active { color: var(--ink, #1F2937); }
.nav .nav-links a.btn, .nav .nav-links a.btn:hover { color: #fff; }

/* Untinted frosted glass on scroll (static pages hardcode .scrolled.on-light).
   No bottom hairline; the unprefixed backdrop-filter lives in @supports so the
   CSS minifier can't strip it (see the home-page nav fix). */
.nav.scrolled { -webkit-backdrop-filter: blur(18px) saturate(1.5); box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12); }
@supports (backdrop-filter: blur(1px)) { .nav.scrolled { backdrop-filter: blur(18px) saturate(1.5); } }
.nav.scrolled.on-light { box-shadow: 0 8px 30px rgba(0, 0, 0, 0.06); }

@media (max-width: 860px) { .nav .nav-links a:not(.nav-keep) { display: none; } }

/* ---------- footer ---------- */
.footer {
  background: #07091B; color: var(--night-soft, #9FAAD0);
  padding: 56px 0 40px; font-size: 14.5px; border: none;
}
.footer .wrap { max-width: 1280px; margin: 0 auto; padding: 0 24px; }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 36px; }
.footer .nav-logo {
  color: var(--night-ink, #E7ECF8); font-family: var(--font-display, 'Space Grotesk', sans-serif);
  font-weight: 700; font-size: 16px; text-decoration: none;
}
.footer p { font-size: 14.5px; color: var(--night-soft, #9FAAD0); line-height: 1.6; }
.footer h4 {
  font-family: var(--font-body, 'Nunito', sans-serif); color: var(--night-ink, #E7ECF8);
  font-size: 14px; margin: 0 0 12px; text-transform: uppercase; letter-spacing: 0.08em; font-weight: 700;
}
.footer a { color: var(--night-soft, #9FAAD0); text-decoration: none; }
.footer a:hover { color: var(--night-ink, #E7ECF8); }
.footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.footer-bottom {
  margin-top: 40px; padding-top: 22px; border-top: 1px solid rgba(255, 255, 255, 0.08);
  display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; font-size: 13px;
}
@media (max-width: 720px) { .footer-grid { grid-template-columns: 1fr; } }