/* ──────────────────────────────────────────────────────────────────────────
   SITE CHROME — the single source of truth for the marketing site's shared
   header (and, on pages without the bottom dock, 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('/css/fonts-bebas.css');
@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 ─────────────────────────────────────────────────────────────── */
/* The homepage bar (landing-tarmac.css .hdr), on the Tarmac tokens with
   literal fallbacks for the one page that loads none. Sticky rather than
   fixed so host pages need no top padding. */
html { scroll-padding-top: calc(var(--hdr, 76px) + 12px); }
.sc-header {
  position: sticky; top: 0; z-index: 100;
  background-color: var(--lowest, #0e0e10);
  background-image: linear-gradient(var(--hdr-bg, rgba(14,14,16,0.95)), var(--hdr-bg, rgba(14,14,16,0.95)));
  box-shadow: 0 4px 20px rgba(0,0,0,0.65);
  transform: translateZ(0); backface-visibility: hidden; isolation: isolate;
  box-sizing: border-box;
}
.sc-inner {
  max-width: var(--wrap, 1280px); margin: 0 auto; height: var(--hdr, 76px);
  padding: 0 var(--pad, clamp(16px, 3vw, 32px));
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.sc-logo {
  display: inline-flex; align-items: center; min-height: 44px;
  font-family: 'Bebas Neue', 'Bebas Fallback', 'Archivo Black', sans-serif; font-weight: 400;
  font-size: 29px; letter-spacing: 0.02em; line-height: 1;
  text-decoration: none; white-space: nowrap; flex-shrink: 0;
}
.sc-kw-entry { color: var(--text, var(--sc-ink)); }
.sc-kw-lane   { color: var(--accent, var(--sc-accent)); }
.sc-kw-lane::after { content: "."; }

.sc-links { display: flex; align-items: center; gap: 2px; }
.sc-links a, .sc-quiet {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px;
  font-family: 'Chivo', 'Archivo', system-ui, sans-serif; font-weight: 600; font-size: 15px; letter-spacing: 0.01em;
  color: var(--variant, var(--sc-ink-70)); text-decoration: none; white-space: nowrap;
  border-radius: var(--r-sm, 4px); transition: background 0.15s, color 0.15s;
}
.sc-links a:hover, .sc-quiet:hover { color: var(--text, var(--sc-ink)); background: var(--high, rgba(255,255,255,0.08)); }
.sc-links a[aria-current="page"], .sc-quiet[aria-current="page"] { color: var(--text, var(--sc-ink)); background: var(--cont, rgba(255,255,255,0.12)); }

.sc-actions { display: flex; align-items: center; gap: 4px; flex-shrink: 0; }
.sc-mi { display: inline-block; width: 20px; height: 20px; flex: none; }
.sc-cta {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 44px;
  margin-left: 8px; padding: 0 16px; border: 0; border-radius: 0;
  background: var(--accent, var(--sc-accent)); color: var(--on-accent, #fff);
  font-family: 'Bebas Neue', 'Bebas Fallback', 'Archivo Black', sans-serif; font-weight: 400; font-size: 18px;
  letter-spacing: 0.06em; text-transform: uppercase; text-decoration: none; white-space: nowrap;
  transition: filter 0.15s, box-shadow 0.2s, transform 0.12s;
}
.sc-cta:hover { filter: brightness(1.1); }
.sc-cta:active { transform: scale(0.97); }
.sc-cta--ghost { background: transparent; color: var(--text, var(--sc-ink)); border: 1px solid rgba(255,255,255,0.18); }
.sc-cta--ghost:hover { border-color: var(--accent, var(--sc-accent)); filter: none; }
.sc-cta .sc-lbl-short { display: none; }

.sc-menu { display: none; width: 44px; height: 44px; border: 0; border-radius: var(--r-sm, 4px); background: var(--high, rgba(255,255,255,0.08)); color: var(--text, var(--sc-ink)); cursor: pointer; align-items: center; justify-content: center; }
.sc-drawer { display: none; }
/* Same breakpoints as the homepage: below 1340px the quiet links move
   into the drawer and the menu appears; below 1080px the nav joins them. */
@media (max-width: 1340px) {
  .sc-quiet:not(.sc-quiet--always) { display: none; }
  .sc-menu { display: inline-flex; }
  .sc-drawer { display: block; position: fixed; z-index: 99; inset: var(--hdr, 76px) 0 auto 0; background: var(--lowest, #0e0e10); box-shadow: 0 20px 40px rgba(0,0,0,0.6); padding: 8px var(--pad, clamp(16px, 3vw, 32px)) 16px; transform: translateY(-110%); visibility: hidden; transition: transform 0.3s cubic-bezier(0.22,1,0.36,1), visibility 0.3s; }
  .sc-drawer.is-open { transform: none; visibility: visible; }
  .sc-drawer a { display: flex; align-items: center; min-height: 52px; padding: 0 12px; color: var(--text, var(--sc-ink)); text-decoration: none; border-radius: var(--r-sm, 4px); font-family: 'Bebas Neue', 'Bebas Fallback', 'Archivo Black', sans-serif; font-weight: 400; font-size: 24px; letter-spacing: 0.04em; text-transform: uppercase; }
  .sc-drawer a:hover { background: var(--high, rgba(255,255,255,0.08)); }
}
@media (max-width: 1080px) { .sc-links { display: none; } }
@media (min-width: 1081px) { .sc-drawer .sc-dr-nav { display: none !important; } }
@media (max-width: 600px) { .sc-cta { font-size: 20px; } }
@media (max-width: 480px) {
  .sc-cta .sc-lbl-long { display: none; } .sc-cta .sc-lbl-short { display: inline; } .sc-cta { padding: 0 14px; }
}
@media (prefers-reduced-motion: reduce) { .sc-drawer { transition: none; } }

/* ── 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: 'Bebas Neue', 'Archivo Black', 'Archivo', sans-serif; font-weight: 400;
  font-size: 2.2rem; letter-spacing: 0.02em; 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; }
}

/* Phones: the wordmark + two CTAs overflowed 390px viewports and gave every
   subpage a 25px sideways scroll. Tighten the gutter, the wordmark and the
   CTA faces — min-height stays 44px so the tap targets don't shrink. */
@media (max-width: 480px) {
  .sc-footer-grid { grid-template-columns: 1fr; }
}