/* ==========================================================================
   Fixline static site — shared chrome (base + header + footer).
   Loaded by every page so the header and footer are identical everywhere.
   Page-specific styles (e.g. the legal document card) live in each page's
   own <style> block.
   ========================================================================== */

:root {
  --bg: #0F172A;
  --surface: #334155;
  --surface-alt: #1E293B;
  --band: #202C3F;
  --border: #475569;
  --accent: #818CF8;
  --cta: #4F46E5;
  --gold: #EBD58F;
  --text: #E2E8F0;
  --muted: #8A9DB7;
  --dim: #999999;
}

* { box-sizing: border-box; }

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  margin: 0;
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
}

a { color: inherit; text-decoration: none; }

.container { width: 100%; max-width: 1044px; margin: 0 auto; padding: 0 40px; }
@media (max-width: 650px) { .container { padding: 0 16px; } }

/* Brand lockup ------------------------------------------------------------- */
.brand { display: flex; align-items: center; gap: 8px; }
.brand .glyph { width: 28px; height: 32px; display: block; }
.brand .glyph img { width: 100%; height: 100%; object-fit: contain; }
.brand .word { font-size: 22px; font-weight: 700; color: #fff; }

/* Header ------------------------------------------------------------------- */
header.site { border-bottom: 1px solid rgba(255,255,255,0.07); }
header.site .row {
  display: flex; align-items: center; justify-content: space-between; padding-top: 28px; padding-bottom: 28px;
}
header.site .get-app {
  border: 1px solid var(--border); background: var(--surface); color: #fff;
  padding: 6px 16px; border-radius: 4px; font-size: 13px; font-weight: 500;
}

/* Footer ------------------------------------------------------------------- */
footer.site { margin-top: 64px; background: var(--surface); }
footer.site .inner { display: flex; justify-content: space-between; gap: 40px; padding: 48px 0 24px; }
footer.site .about { max-width: 320px; }
footer.site .about p { font-size: 14px; color: var(--text); }
footer.site .cols { display: flex; gap: 96px; }
footer.site h4 { font-size: 16px; font-weight: 600; color: #fff; margin: 0 0 12px; }
footer.site .links a { display: block; font-size: 14px; color: var(--text); padding: 4px 0; }
footer.site .links a:hover { text-decoration: underline; }
footer.site .badges { display: flex; gap: 12px; }
footer.site .badge {
  height: 40px; display: inline-flex; align-items: center; padding: 0 12px;
  border: 1px solid rgba(255,255,255,0.2); border-radius: 6px; font-size: 12px; color: #fff;
}
footer.site .legal { border-top: 1px solid var(--border); padding: 24px 0; font-size: 14px; color: var(--text); }

@media (max-width: 650px) {
  footer.site .inner { flex-direction: column; gap: 24px; }
  footer.site .cols { flex-direction: column; gap: 24px; }
}