/* common.css — shared shell for customer-facing pages.
 *
 * Extracted from the per-page <style> blocks (they had drifted; this is the
 * majority/canonical version). Loaded BEFORE each page's own <style>, so a
 * page can still override any of these — the two dark-themed pages
 * (finisher-pro, os) override body/nav here, and any page can special-case a
 * rule in its own block.
 *
 * Scope is deliberately the low-risk, high-consensus shell: design tokens, the
 * reset, base typography, and the (uniform, dark) footer. Nav and body base
 * styles stay per-page for now because they carry theme differences that
 * aren't safe to collapse into one rule.
 */

:root {
  --ink: #0A0A0A;
  --paper: #F5F2EB;
  --acid: #D4F24A;
  --acid-deep: #5a7300;          /* acid as TEXT on light backgrounds */
  --muted: #888880;
  --muted-deep: #6a6a62;         /* AA on paper */
  --line: rgba(10,10,10,0.12);
  --line-dark: rgba(245,242,235,0.2);
  --sans: 'Inter', system-ui, sans-serif;
  --serif: 'Fraunces', Georgia, serif;
  --mono: 'IBM Plex Mono', ui-monospace, monospace;
  --warn: #b23a3a;
  --nav-h: 71px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

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

/* Wordmark dot is always acid, in nav and footer alike. */
.wordmark .dot { color: var(--acid); }

/* ── Footer (uniform + dark on every page) ─────────────────────────────── */
footer {
  background: var(--ink);
  color: var(--paper);
  padding: 64px 48px 32px;
}
.footer-inner {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  max-width: 1200px;
  flex-wrap: wrap;
  gap: 48px;
}
@media (min-width: 1441px) {
  .footer-inner { max-width: 1440px; }
}
.footer-brand .wordmark { font-size: 18px; color: var(--paper); }
.footer-tag {
  font-family: var(--serif);
  font-style: italic;
  font-size: 14px;
  color: rgba(245,242,235,0.6);
  margin-top: 8px;
}
.footer-links {
  display: flex;
  gap: 48px;
  flex-wrap: wrap;
  justify-content: flex-end;
  /* The footer columns live in a <nav> (a11y landmark), so every page's bare
     `nav { ... }` top-navigation rule also matches this element. Explicitly
     neutralize each property those rules set, or the footer nav inherits the
     top bar's chrome (paper background, sticky positioning, padding, border).
     This class out-specifies the bare element selector. */
  align-items: flex-start;
  padding: 0;
  border-bottom: none;
  background: transparent;
  position: static;
  z-index: auto;
}
/* Company + Follow group pushed right, separated from Products + Tools. */
.footer-col:nth-child(3) { margin-left: 64px; }
@media (max-width: 768px) {
  .footer-links { justify-content: flex-start; gap: 32px 40px; }
  .footer-col:nth-child(3) { margin-left: 0; }
}
.footer-col .footer-col-label {
  margin-top: 0;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--acid);
  margin-bottom: 16px;
}
.footer-col ul {
  list-style: none;
  /* The footer columns live inside a <nav> (the a11y landmark), so the pages'
     top-navigation `nav ul { display: flex }` rule would otherwise catch these
     lists and flow each column's links horizontally — the July 11 footer
     breakage. .footer-col ul out-specifies nav ul; keep these vertical. */
  display: block;
}
.footer-col li { margin-bottom: 8px; }
.footer-col a {
  font-size: 14px;
  color: rgba(245,242,235,0.7);
  transition: color 0.15s;
}
.footer-col a:hover { color: var(--paper); }
.legal {
  border-top: 0.5px solid rgba(245,242,235,0.15);
  margin-top: 48px;
  padding-top: 24px;
  font-size: 12px;
  color: rgba(245,242,235,0.4);
  max-width: 1200px;
}