/* ClayTrack marketing site — shared stylesheet.
 *
 * Everything here was previously inlined into all 29 pages. It is the site chrome: type,
 * design tokens, base elements, nav, footer. Change it HERE and it changes everywhere —
 * that is the whole point. Page-specific rules stay in each page's own <style>, which is
 * loaded after this file and therefore still wins on equal specificity.
 *
 * A rule only belongs here if EVERY page that uses that selector agrees on it. Selectors
 * the pages deliberately disagree on stay inline — e.g. `a` is var(--orange) on articles
 * but `inherit` on index.html and blog/index.html, where whole cards are links.
 *
 * See docs/adr/0013-shared-stylesheet.md.
 */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root {
      --orange: #F2622A;
      --orange-hover: #D9511C;
      --orange-tint: #FF9E73;
      --on-accent: #14171C;
      --bg: #101317;
      --bg-card: #191D23;
      --border: #2B313A;
      --text: #EDEFF2;
      --text-secondary: #C6CBD3;
      --text-tertiary: #8A93A1;
      --hit: #4FA65E;
      --miss: #F0566A;
      --font-display: 'Barlow Condensed', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
      --content-width: 740px;
      --bg-card-hover: #212630;
    }
/* Display face application — headings, buttons, big numbers. Body copy stays
       on the system stack; the contrast is deliberate (brand.md §3). Condensed type
       dislikes the negative tracking the system stack wore, so headings reset to 0. */
    h1, h2, h3, h4 { font-family: var(--font-display); letter-spacing: 0; }
.nav-cta, .app-cta-btn, .btn-primary { font-family: var(--font-display); letter-spacing: 0.02em; }
html { scroll-behavior: smooth; }
body {
      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
      background: var(--bg);
      color: var(--text);
      line-height: 1.6;
      -webkit-font-smoothing: antialiased;
    }
.nav-logo img { height: 36px; display: block; }
/* Secondary nav action. Outlined so it reads as a button without competing with
       the filled primary CTA — brand.md §4: secondary sits on transparent ground with a
       border, primary gets the fill. !important on colour to beat `.nav-links a`. */
    .nav-signin {
      border: 1px solid var(--border);
      color: var(--text) !important;
      padding: 8px 18px;
      border-radius: 8px;
      font-size: 14px;
      font-weight: 600;
      font-family: var(--font-display);
      letter-spacing: 0.02em;
      transition: border-color 0.2s, background 0.2s;
    }
.nav-signin:hover {
      border-color: rgba(255,255,255,0.28);
      background: rgba(255,255,255,0.05);
      text-decoration: none;
    }
@media (max-width: 960px) {
  .nav-links .nav-signin { border-width: 0 0 1px 0 !important; }
}
.hamburger {
      display: none; flex-direction: column; gap: 5px;
      background: none; border: none; cursor: pointer; padding: 6px; z-index: 101;
    }
.hamburger span { display: block; width: 22px; height: 2px; background: white; border-radius: 2px; transition: transform 0.25s, opacity 0.2s; }
.hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity: 0; }
.hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
@media (max-width: 960px) {
  .hamburger { display: flex; }
  .nav-links.open { display: flex; }
  .nav-links li { width: 100%; }
  .nav-links li:last-child a { border-bottom: none; }
}
.footer-logo img { height: 28px; display: block; }
.footer-links { display: flex; gap: 28px; list-style: none; flex-wrap: wrap; }
.footer-copy { font-size: 13px; color: var(--text-tertiary); width: 100%; }
.footer-cols { display: flex; flex-wrap: wrap; gap: 48px; }
.footer-col h4 { font-size: 12px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--text-secondary); margin-bottom: 14px; }
.footer-col ul { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.footer-col a { font-size: 14px; color: var(--text-tertiary); text-decoration: none; transition: color 0.2s; }
.footer-col a:hover { color: var(--text-secondary); }
@media (max-width: 820px) {
  .footer-cols { gap: 32px; }
}
/* Display face — Barlow Condensed (SIL OFL, self-hosted in /fonts/).
       Mirrors claytrack-app/public/theme.css. CSP is font-src 'self' — never a CDN.
       Weights 600/700 only; heavier requests (our 800 headings) clamp to 700. */
    @font-face {
      font-family: 'Barlow Condensed';
      font-style: normal;
      font-weight: 600;
      font-display: swap;
      src: url('/fonts/barlow-condensed-600.woff2') format('woff2');
    }
@font-face {
      font-family: 'Barlow Condensed';
      font-style: normal;
      font-weight: 700;
      font-display: swap;
      src: url('/fonts/barlow-condensed-700.woff2') format('woff2');
    }