/* ──────────────────────────────────────────────────────────────────────────
   SITE CHROME — the single source of truth for the marketing site's shared
   header + footer. Injected by /js/site-chrome.js into every public subpage
   (tutorials, guides, privacy, terms, onboarding, admin-login) so they all
   carry an IDENTICAL top bar and footer. Edit here once; every page updates.

   Self-contained on purpose: literal colors + its own font import, so the
   chrome looks the same no matter which stylesheet the host page loads
   (guide.css, kinetic.css, or page-inline styles). The landing page keeps its
   bespoke fixed glass bar (landing.css); this bar + footer are a match to it
   so the two read as one system.
   ────────────────────────────────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Archivo+Black&family=Archivo:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600;700&display=swap');

/* EntryLane palette, inlined so the chrome never depends on a page's tokens. */
:root {
  --sc-accent: #58A0D8;
  --sc-accent-soft: #CFE4F8;
  --sc-ink: #F3EFE8;         /* cream, from the wordmark */
  --sc-ink-70: rgba(243, 239, 232, 0.74);
  --sc-ink-55: rgba(243, 239, 232, 0.56);
  --sc-line: rgba(243, 239, 232, 0.09);
  --sc-line-strong: rgba(243, 239, 232, 0.18);
  --sc-bar-bg: rgba(17, 17, 19, 0.86);
  --sc-foot-bg: #111113;
}

/* ── Header ─────────────────────────────────────────────────────────────── */
/* Sticky glass bar: same height, wordmark, link voice, and CTAs as the
   landing's fixed bar. Sticky (not fixed) so host pages need no top padding. */
.sc-header {
  position: sticky; top: 0; z-index: 100;
  background: var(--sc-bar-bg);
  -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
  border-bottom: 1px solid var(--sc-line);
  box-sizing: border-box;
}
.sc-inner {
  max-width: 1280px; margin: 0 auto; height: 64px;
  padding: 0 clamp(1rem, 4vw, 2.5rem);
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
}
.sc-logo {
  display: inline-flex; align-items: center; min-height: 44px;
  font-family: 'Archivo Black', 'Archivo', sans-serif; font-weight: 400;
  font-size: 1.55rem; letter-spacing: 0.01em; line-height: 1;
  text-decoration: none; white-space: nowrap; flex-shrink: 0;
}
.sc-kw-entry { color: var(--sc-ink); }
.sc-kw-lane   { color: var(--sc-accent); }
.sc-kw-lane::after { content: "."; } /* ENTRYLANE. — blue period */

.sc-links { display: flex; align-items: center; gap: 1.75rem; }
.sc-links a {
  font-family: 'Archivo', sans-serif; font-weight: 700; font-size: 0.74rem;
  letter-spacing: 0.14em; text-transform: uppercase; text-decoration: none;
  color: var(--sc-ink-70); white-space: nowrap;
  display: inline-flex; align-items: center; min-height: 44px;
  transition: color 0.15s ease;
}
.sc-links a:hover { color: var(--sc-accent); }
.sc-links a[aria-current="page"] { color: var(--sc-accent); }

.sc-actions { display: flex; align-items: center; gap: 0.6rem; flex-shrink: 0; }
.sc-cta {
  display: inline-flex; align-items: center; min-height: 44px;
  padding: 0.6rem 1.35rem;
  /* On-accent face is near-black platform-wide (kinetic --on-primary). */
  background: var(--sc-accent); color: #0D0D12;
  font-family: 'Archivo', sans-serif; font-weight: 600; font-size: 0.9rem;
  letter-spacing: 0.01em; text-decoration: none; white-space: nowrap;
  transition: filter 0.12s ease, transform 0.12s ease, border-color 0.12s, color 0.12s;
}
.sc-cta:hover { filter: brightness(1.08); }
.sc-cta:active { transform: scale(0.97); }
.sc-cta--ghost {
  background: transparent; color: var(--sc-ink);
  border: 1px solid var(--sc-line-strong);
}
.sc-cta--ghost:hover { border-color: var(--sc-accent); color: var(--sc-accent); filter: none; }

/* The full link row + CTAs need ~1064px; below that the links fold and the
   CTAs carry the nav (links repeat in the rich footer). */
@media (max-width: 1080px) {
  .sc-links { display: none; }
  .sc-cta { padding: 0.55rem 1rem; font-size: 0.85rem; }
  .sc-actions { gap: 0.5rem; }
}

/* ── Footer (rich 4-column — match to the landing's .kfooter--rich) ─────── */
.sc-footer {
  display: block;
  background: var(--sc-foot-bg);
  border-top: 1px solid var(--sc-line);
  padding: 4rem clamp(1rem, 4vw, 2.5rem) 3rem;
  font-family: 'Archivo', sans-serif;
  color: var(--sc-ink);
}
.sc-footer-grid {
  max-width: 1280px; margin: 0 auto;
  display: grid; grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 3rem 2.5rem; align-items: start;
}
.sc-footer-brand .sc-footer-logo {
  font-family: 'Archivo Black', 'Archivo', sans-serif;
  font-size: 1.7rem; letter-spacing: 0.01em; margin-bottom: 0.9rem;
}
.sc-footer-tag {
  color: var(--sc-ink-55); font-size: 0.92rem; line-height: 1.55;
  margin: 0 0 1rem; max-width: 380px;
}
.sc-footer-copy {
  font-family: 'JetBrains Mono', monospace; font-size: 0.68rem; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--sc-ink-55); margin: 0;
}
.sc-footer-col { display: flex; flex-direction: column; gap: 0.45rem; }
.sc-footer-col-head {
  font-family: 'JetBrains Mono', monospace; font-size: 0.68rem; font-weight: 700;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--sc-accent);
  margin-bottom: 0.4rem;
}
.sc-footer-col a {
  color: var(--sc-ink-70); text-decoration: none;
  font-size: 0.92rem; font-weight: 400; letter-spacing: 0.01em;
  transition: color 0.15s ease;
}
.sc-footer-col a:hover { color: var(--sc-accent); }

@media (max-width: 960px) {
  .sc-footer-grid { grid-template-columns: 1fr 1fr; row-gap: 2rem; }
  .sc-footer-brand { grid-column: 1 / -1; }
  .sc-footer-col { gap: 0.15rem; }
  .sc-footer-col a { min-height: 44px; display: flex; align-items: center; }
}
@media (max-width: 760px) {
  .sc-footer { padding: 3rem 1.25rem 2rem; }
}
@media (max-width: 480px) {
  .sc-footer-grid { grid-template-columns: 1fr; }
}