/* 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. */

/* Archivo arrives from Google Fonts after first paint. Until it does, text
   sets in Arial with each weight scaled to Archivo's measured width, so the
   swap moves nothing — the header used to wrap in the fallback and un-wrap
   when the real face landed (measured 2026-09-22, canvas, per weight). */
@font-face { font-family: 'Archivo Fallback'; src: local('Arial'); font-weight: 400; size-adjust: 98.24%; }
@font-face { font-family: 'Archivo Fallback'; src: local('Arial'); font-weight: 500; size-adjust: 99.83%; }
@font-face { font-family: 'Archivo Fallback'; src: local('Arial Bold'), local('Arial-BoldMT'); font-weight: 600; size-adjust: 94.89%; }
@font-face { font-family: 'Archivo Fallback'; src: local('Arial Bold'), local('Arial-BoldMT'); font-weight: 700; size-adjust: 97.94%; }
@font-face { font-family: 'Archivo Fallback'; src: local('Arial Bold'), local('Arial-BoldMT'); font-weight: 800 900; size-adjust: 102.51%; }

: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', 'Archivo Fallback', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  --serif: 'Archivo', 'Archivo Fallback', -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; }
/* A link inside a sentence needs more than color: blue beside grey body text
   is only about 1.5:1 apart. Prose links carry a soft underline that firms
   up on hover. Nav, footer and button links are classed, so they are not
   touched. Table cells and breadcrumbs sit in running text too. */
:where(p, li, dd, td, .faq-a, .crumbs) > a:not([class]) {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-color: color-mix(in srgb, currentColor 55%, transparent);
}
:where(p, li, dd, td, .faq-a, .crumbs) > a:not([class]):hover { text-decoration-color: currentColor; }
: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; }
/* The wordmark (Tony 2026-10-07): the house, then the name on TWO stacked lines
   and "by Command Module" small beneath. This block is the one source for every
   page's nav lockup. The selectors are `.nav-brand .nav-name` on purpose: each
   page (and every published, frozen blog post) still carries an older `.nav-name`
   rule in its own <style>, and the extra class outranks it without touching 35
   files. The two lines are real spans with a real space between them, so the
   text reads "Get The Listing, Keep The Listing" to a screen reader and a copy. */
.nav-brand { display: flex; align-items: center; gap: 12px; min-width: 0; }
.nav-brand .nav-logo { width: 40px; height: 40px; flex: none; }
.nav-brand .nav-name { font-family: var(--sans); font-size: 16px; font-weight: 800; letter-spacing: -0.01em; line-height: 1.05; color: var(--text-primary); }
.nav-brand .nav-name > span { display: block; white-space: nowrap; }
/* Line two is the TEXT blue: --accent on black is 4.1:1, a fill colour, never small type. */
.nav-brand .nav-name > .nm-b { color: var(--accent-text); }
.nav-brand .nav-by { margin-top: 4px; color: var(--text-muted); font-size: 10.5px; font-weight: 600; line-height: 1; letter-spacing: 0.1em; text-transform: uppercase; }
.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); }
/* The nav's Sign in / Dashboard link (its inline before-paint script lives on
   every page that carries it) — one definition so every page that adds the
   link reads the same, rather than a copy per page. */
.nav-actions { display: flex; align-items: center; gap: 20px; }
.nav-signin {
  font-size: 14px; font-weight: 600; color: var(--text-secondary); text-decoration: none;
  padding: 4px 1px; border-bottom: 2px solid transparent; transition: color 0.2s, border-color 0.2s;
  white-space: nowrap;
}
.nav-signin:hover { color: var(--text-primary); border-bottom-color: var(--accent); text-decoration: none; }
.footer { border-top: 1px solid var(--border); }
/* Footer: the name on one line (it may wrap on a phone), "by Command Module" under it. */
.footer-brand { display: flex; align-items: center; gap: 10px; min-width: 0; }
.footer-brand .footer-logo { width: 28px; height: 28px; flex: none; border-radius: 6px; }
.footer-id { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.footer-name { font-family: var(--sans); font-size: 15px; font-weight: 800; letter-spacing: -0.01em; line-height: 1.2; }
.footer-by { color: var(--text-muted); font-size: 11px; font-weight: 600; line-height: 1; letter-spacing: 0.1em; text-transform: uppercase; }
.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, .post-date, .steps li::before {
  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); }
th { font-family: var(--sans); }

/* 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; }

/* Keyboard focus and in-page jumps clear the sticky bar (a11y-perf-5, 2026-09-30):
   Shift+Tab used to park the focused link under the nav. The bar is ~72px at
   its tallest, so 88px leaves the focused element in clear view. */
html { scroll-padding-top: 88px; }

/* 320px — a small phone (a11y-perf-4, 2026-09-30). Brand, Sign in and Get
   Started summed to 324-360px against a 264px bar, so the button clipped and
   every page scrolled sideways. Same words and same three controls, sized so
   they fit: a tighter gutter, a smaller wordmark, and an actions group that is
   allowed to shrink instead of pushing past the edge. */
.nav-actions { flex-shrink: 1; min-width: 0; }
/* 761-900: the guide pages still show their four section links beside the
   wordmark, and the wordmark is a little wider than it was. Tighten the link
   row so Get Started clears the gutter instead of leaning into it. */
@media (min-width: 761px) and (max-width: 900px) {
  .nav-links { gap: 16px; margin-right: 12px; }
}

/* The wordmark on a phone. The name is now two lines of heavy type, so the bar
   steps it down in stages (measured at 560, 414, 390, 360 and 320 in a real
   browser) rather than once: at every width Sign in and Get Started stay whole
   and the page never scrolls sideways. "by Command Module" drops out at 560,
   as it always did. */
@media (max-width: 560px) {
  .nav-inner { padding-left: 18px; padding-right: 18px; }
  .nav-brand { gap: 9px; }
  .nav-brand .nav-logo { width: 34px; height: 34px; }
  .nav-brand .nav-name { font-size: 14.5px; }
  .nav-brand .nav-by { display: none; }
  .nav-actions { gap: 12px; }
}
/* 385-440 is the tightest band that still carries the landing's short "Demo" link. */
@media (max-width: 440px) {
  .nav-brand { gap: 8px; }
  .nav-brand .nav-logo { width: 30px; height: 30px; }
  .nav-brand .nav-name { font-size: 13px; }
  .nav-actions { gap: 9px; }
}
@media (max-width: 360px) {
  .nav-brand { gap: 6px; }
  .nav-brand .nav-logo { width: 26px; height: 26px; }
  .nav-brand .nav-name { font-size: 13px; letter-spacing: -0.015em; }
  .nav-inner { padding-left: 16px; padding-right: 16px; gap: 8px; }
  .nav-actions { gap: 10px; }
  .nav-signin { font-size: 13px; }
  .nav-cta-btn { padding: 9px 12px; font-size: 13px; white-space: nowrap; }
  /* The rest of the same sweep: two more things that were wider than a 320px
     screen. The landing's overlapped sample thumbnails (292px against 264)
     scale down a step, and the legal pages' tables share the column instead
     of sizing to their longest word. */
  .ledger-group > * { min-width: 0; }
  .ledger-thumbs img { height: 96px; }
  /* .legal only: site.css is also linked by the sample pages, whose tables are
     the seller-facing pieces themselves — a bare `table` rule here re-laid
     every one of them out at 320 (H-B1, 2026-09-30). */
  .legal table { table-layout: fixed; }
  .legal th, .legal td { overflow-wrap: anywhere; padding-right: 8px; }
}
@media (max-width: 330px) {
  .nav-brand .nav-logo { width: 24px; height: 24px; }
  .nav-brand .nav-name { font-size: 12px; }
}