/* MarketPulse site theme — the one place the marketing site's colors and type
   live (2026-09-07 retheme: black ground, royal blue, cool greys, one family).
   Every public page links this AFTER its own <style> block, so these tokens
   and the shared chrome win; page stylesheets only carry page-specific layout.
   The app (public/app) has its own theme and is a separate pass.

   Blue is the accent — buttons, links, the beam, the italic word — never a
   field and never small text (#4169e1 on black is 4.1:1; --accent-text is the
   text blue). Tony picked this over the deep-blue-fields variant, 2026-09-07. */

:root {
  /* ground → surface ramp, all blue-tinted near-blacks (never a pure grey) */
  --bg-deep: #07080b;
  --bg-base: #0b0d12;
  --bg-raised: #10131a;
  --bg-elevated: #161a23;
  --border: #1e2330;
  --border-strong: #2b3242;

  /* ink ramp — every tier clears 6:1 on the ground and 4.5:1 on a raised card */
  --text-primary: #f3f5f9;
  --text-secondary: #c3c9d6;
  --text-muted: #8e97a8;

  /* the blue ramp — one hue, four jobs */
  --accent: #4169e1;          /* royal blue: fills, borders, the beam, large accents (white text 4.9:1) */
  --accent-light: #5b7cf0;    /* hover fill */
  --accent-bright: #5d80f5;   /* large accent text on the ground (5.5:1) — the italic word, big numbers */
  --accent-text: #7f9dff;     /* small accent text and links on the ground (7.6:1) */
  --accent-deep: #1d3a9e;     /* a field: white and near-white text sit on it (≥5.9:1) */
  --accent-dim: rgba(65, 105, 225, 0.12);
  --accent-glow: rgba(65, 105, 225, 0.45);
  --on-accent: #ffffff;

  --accent-warm: #e8865b;     /* the one warm note: the problem list's marks */
  --green: #4ad17a;           /* semantic success only */

  /* one family. --serif is kept as a name because every page's headings ask
     for it; it now resolves to the same face at display weights. */
  --sans: 'Archivo', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  --serif: 'Archivo', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  --mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* the "field" — the pricing card, the closing band, the platform card.
     Palette A: a raised panel with a blue hairline. Palette B: solid deep blue. */
  --field: var(--bg-raised);
  --field-border: var(--border-strong);
  --field-ink: var(--text-primary);
  --field-ink-soft: var(--text-secondary);
  --field-muted: var(--text-muted);
  --field-label: var(--accent-text);
  --field-rule: var(--border);
  --field-check: var(--accent-text);
  --field-btn: var(--accent);
  --field-btn-ink: #ffffff;
  --field-btn-hover: var(--accent-light);
  --field-input: var(--bg-base);
  --field-line: linear-gradient(90deg, transparent, var(--accent), transparent);
  --field-num: var(--accent-bright);
  --band-bg: radial-gradient(ellipse 60% 70% at 50% 0%, rgba(65, 105, 225, 0.16), transparent 70%), var(--bg-deep);
  --band-border: var(--border);
  --em-color: var(--accent-bright);
}

/* ── ground ─────────────────────────────────────────────────────────── */
html { background: var(--bg-deep); color-scheme: dark; }
body { background: var(--bg-deep); color: var(--text-primary); font-family: var(--sans); font-synthesis: none; }
/* the drafting grid: fixed, behind everything, faint enough to read as texture */
body::before {
  content: '';
  position: fixed; inset: 0;
  background-image:
    linear-gradient(rgba(127, 157, 255, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(127, 157, 255, 0.035) 1px, transparent 1px);
  background-size: 64px 64px;
  pointer-events: none;
  z-index: 0;
}
/* everything sits above the grid (a negative z-index would paint under the
   body's own background and vanish — the grid has to be a positioned layer) */
body > * { position: relative; z-index: 1; }
::selection { background: var(--accent); color: #ffffff; }
a { color: var(--accent-text); }
a:hover { color: #a6bbff; }
:focus-visible { outline: 2px solid var(--accent-text); outline-offset: 3px; }
h1, h2, h3 { text-wrap: balance; }
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: var(--bg-deep); }
::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 4px; }

/* ── shared chrome: the bar, the buttons, the footer ─────────────────── */
.nav { background: rgba(7, 8, 11, 0.78); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); border-bottom: 1px solid var(--border); }
/* The wordmark is a link home on every page — top-left and footer alike (Tony 2026-09-17). */
.nav-brand, .footer-brand { color: var(--text-primary); text-decoration: none; }
.nav-brand:hover, .footer-brand:hover { color: var(--text-primary); }
.nav-brand:focus-visible, .footer-brand:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 6px; }
.nav-name { font-family: var(--sans); font-weight: 800; letter-spacing: -0.02em; }
.nav-by { color: var(--text-muted); font-weight: 600; letter-spacing: 0.1em; }
.nav-cta-btn, .sample-link, .btn-cta, .way.primary, .pricing-cta, .brandme-form button, .brandbar-form button, .copy-btn {
  background: var(--accent); color: #ffffff; border-radius: 999px; border: 0;
  font-family: var(--sans); font-weight: 700;
  box-shadow: 0 0 36px rgba(65, 105, 225, 0.22);
  transition: background-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}
.nav-cta-btn:hover, .sample-link:hover, .btn-cta:hover, .way.primary:hover, .pricing-cta:hover, .brandme-form button:hover, .brandbar-form button:hover, .copy-btn:hover {
  background: var(--accent-light); color: #ffffff; text-decoration: none;
  box-shadow: 0 0 48px rgba(65, 105, 225, 0.38);
}
.way { background: var(--bg-raised); border-color: var(--border-strong); color: var(--text-primary); }
.way:hover { border-color: var(--accent); color: var(--accent-text); }
.footer { border-top: 1px solid var(--border); }
.footer-name { font-family: var(--sans); font-weight: 800; letter-spacing: -0.01em; }
.footer-copy, .footer-link, .footer-links a { color: var(--text-muted); }
.footer-link:hover, .footer-links a:hover { color: var(--accent-text); }
.skip-link { background: var(--accent); color: #ffffff; }

/* the label system: small caps, sans, tracked — no mono on the site */
.eyebrow, .sample-meta, .kit-group-label, .badge, .updated, .code, .stat-label, .screen-meta, .crumbs, .key-label {
  font-family: var(--sans); font-weight: 600;
}
.eyebrow, .badge, .code { color: var(--accent-text); }
.eyebrow { display: inline-block; padding: 7px 16px; border: 1px solid rgba(65, 105, 225, 0.45); border-radius: 999px; background: var(--accent-dim); font-size: 11.5px; letter-spacing: 0.16em; }
.badge { background: var(--accent-dim); border: 1px solid rgba(65, 105, 225, 0.45); }

/* fields on dark: inputs are recessed, never white */
input[type="text"], input[type="email"], input[type="tel"], input[type="number"], textarea {
  background: var(--bg-base); color: var(--text-primary); border-color: var(--border-strong);
}
input::placeholder, textarea::placeholder { color: var(--text-muted); }

/* the artifacts stay paper: a sample email or a kit sheet is a white document
   on a dark desk, and its own inline styles carry its ink. */
.email-frame, .sheet { border-color: rgba(255, 255, 255, 0.12); box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55), 0 2px 8px rgba(0, 0, 0, 0.4); }

@media (prefers-reduced-motion: reduce) {
  .nav-cta-btn, .sample-link, .btn-cta, .way.primary, .pricing-cta { transition: none; }
}

/* display weights: every page's h1 asks for the old serif at 900; the family
   resemblance is the heavy, tight cut */
h1 { font-weight: 800; letter-spacing: -0.03em; }
h2 { letter-spacing: -0.02em; }