/* ──────────────────────────────────────────────────────────────────────────
   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 transparent hero nav; this footer is a pixel match to the landing's
   so the two read as one system.
   ────────────────────────────────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Saira:wght@600;700;800&family=Titillium+Web:wght@400;600&display=swap');

/* Kinetic palette, inlined so the chrome never depends on a page's tokens. */
:root {
  --sc-accent: #FD7524;
  --sc-ink: #ffffff;
  --sc-bar-bg: #09090A; /* kinetic --surface-darker — same surface as guides/tutorials */
  --sc-foot-bg: #15151a;
}

/* ── Header ─────────────────────────────────────────────────────────────── */
/* Matches the landing's .site-nav exactly: same 880px column, same paddings,
   and it sits in flow (scrolls away with the page) rather than pinned. The
   landing's bar is transparent over its dark hero; here the bar carries the
   same near-black itself so it reads identically on the dark subpages and
   still holds up over the light onboarding/login surfaces. */
.sc-header {
  background: var(--sc-bar-bg);
  box-sizing: border-box;
}
.sc-inner {
  max-width: 880px; margin: 0 auto;
  padding: 0.85rem 32px;
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
}
.sc-logo {
  display: inline-flex; align-items: center; min-height: 44px;
  /* Bebas Neue ships ONLY at weight 400 — an inherited bold weight makes Safari
     fall back to Saira (wide). Pin 400 so it always renders true Bebas, and
     thicken with a text-stroke for the bold wordmark look. */
  font-family: 'Bebas Neue', 'Saira', sans-serif; font-weight: 400;
  font-size: 1.5rem; letter-spacing: 0.04em; line-height: 1;
  text-decoration: none; white-space: nowrap; flex-shrink: 0;
  -webkit-text-stroke: 0.7px currentColor;
}
.sc-kw-entry { color: var(--sc-ink); }
.sc-kw-lane  { color: var(--sc-accent); margin-left: 0.04em; }

.sc-links { display: flex; align-items: center; gap: 1.9rem; }
.sc-links a {
  font-family: 'Saira', sans-serif; font-weight: 700; font-size: 0.78rem;
  letter-spacing: 0.14em; text-transform: uppercase; text-decoration: none;
  color: rgba(255, 255, 255, 0.82); white-space: nowrap;
  transition: color 0.15s ease;
}
.sc-links a:hover { 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.5rem;
  background: var(--sc-accent); color: #ffffff;
  /* Platform-wide button scheme: Titillium sentence case, not Saira caps. */
  font-family: 'Titillium Web', 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;
}
.sc-cta:hover { filter: brightness(1.08); }
.sc-cta:active { transform: scale(0.97); }
.sc-cta--ghost {
  background: transparent; color: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.25);
}
.sc-cta--ghost:hover { border-color: var(--sc-accent); color: var(--sc-accent); filter: none; }

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

/* ── Footer (rich 4-column — pixel match to the landing's .kfooter--rich) ─── */
.sc-footer {
  display: block;
  background: var(--sc-foot-bg);
  border-top: 0;
  padding: 4.5rem 3rem 3.5rem;
  font-family: 'Titillium Web', sans-serif;
}
.sc-footer-grid {
  max-width: 1180px; 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: 'Bebas Neue', 'Saira', sans-serif;
  font-size: 1.6rem; letter-spacing: 0.06em; margin-bottom: 0.9rem;
}
.sc-footer-tag {
  color: rgba(255, 255, 255, 0.55); font-size: 0.92rem; line-height: 1.55;
  margin: 0 0 1rem; max-width: 380px;
}
.sc-footer-copy {
  font-family: 'Saira', sans-serif; font-size: 0.7rem; letter-spacing: 0.12em;
  text-transform: uppercase;
  /* 0.55 white clears AA on the #15151a footer (matches the landing's fix). */
  color: rgba(255, 255, 255, 0.55); margin: 0;
}
.sc-footer-col { display: flex; flex-direction: column; gap: 0.55rem; }
.sc-footer-col-head {
  font-family: 'Saira', sans-serif; font-size: 0.7rem; font-weight: 700;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--sc-accent);
  margin-bottom: 0.4rem;
}
.sc-footer-col a {
  color: rgba(255, 255, 255, 0.78); text-decoration: none;
  font-size: 0.92rem; font-weight: 500; letter-spacing: 0.02em;
  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.5rem 2rem; }
}
@media (max-width: 480px) {
  .sc-footer-grid { grid-template-columns: 1fr; }
}