/* ════════════════════════════════════════════════════════════════════
   quicklineanalytics.com — one stylesheet, no build step.

   The company site is LIGHT (paper ground, navy ink, the letterhead's
   bronze as the accent) so it reads as the firm's stationery, while
   companycodex.com stays the dark product site. Every color is a
   variable here; never hard-code a hex mid-file.
   ════════════════════════════════════════════════════════════════════ */

:root {
  --bg: #faf6f0;              /* the letterhead paper */
  --card: #ffffff;
  --border: #e3dbcf;
  --ink: #121826;             /* the letterhead navy */
  --body: #3a3f4d;
  --muted: #6b7083;
  --soft: #8f94a6;
  --bronze: #8a5a0c;          /* the letterhead bronze — accent + links */
  --bronze-bg: #f3e8d3;
  --green: #0f6e56;           /* buttons: the app's green on a light ground */
  --green-hover: #0c5a46;
  --btn-ink: #ffffff;
  --navy-card: #121826;       /* the one dark block: the product card */
  --navy-card-border: #2c3854;
  --navy-ink: #f5efe7;
  --navy-muted: #a7aec2;
  --navy-accent: #3cbd91;
  --shadow: 0 10px 28px rgba(18, 24, 38, .08);
}

/* ─── base ─────────────────────────────────────────────────────────── */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--body);
  font-family: system-ui, -apple-system, 'Segoe UI', sans-serif;
}
a:focus-visible, .btn:focus-visible {
  outline: 2px solid var(--green);
  outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}
.shell { max-width: 960px; margin: 0 auto; padding: 0 28px; }
.spacer { flex: 1; }

/* ─── nav ──────────────────────────────────────────────────────────── */
nav { display: flex; align-items: center; gap: 26px; padding: 20px 0; border-bottom: 1px solid var(--border); }
.logo { font-weight: 800; font-size: 17px; letter-spacing: -.01em; color: var(--ink); text-decoration: none; }
.logo .dot { color: var(--bronze); }
nav a { color: var(--muted); text-decoration: none; font-size: 14px; }
nav a:hover { color: var(--ink); }

/* ─── buttons ──────────────────────────────────────────────────────── */
.btn {
  display: inline-block;
  background: var(--green);
  color: var(--btn-ink);
  border: none;
  border-radius: 8px;
  padding: 12px 22px;
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  font-family: inherit;
}
.btn:hover { background: var(--green-hover); color: var(--btn-ink); }
.btn-ghost { background: transparent; color: var(--ink); border: 1px solid var(--border); }
.btn-ghost:hover { background: var(--card); color: var(--ink); border-color: var(--soft); }

/* ─── hero ─────────────────────────────────────────────────────────── */
.hero { padding: 72px 0 40px; max-width: 760px; }
.kicker {
  display: inline-block;
  background: var(--bronze-bg);
  color: var(--bronze);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  border-radius: 99px;
  padding: 6px 14px;
  margin: 0 0 22px;
}
h1 { font-size: 50px; font-weight: 800; letter-spacing: -.025em; line-height: 1.05; margin: 0 0 20px; color: var(--ink); text-wrap: balance; }
h1 .g { color: var(--bronze); }
.lede { font-size: 18px; line-height: 1.65; color: var(--body); max-width: 34em; margin: 0 0 28px; }
.lede b { color: var(--ink); }
.actions { display: flex; gap: 12px; flex-wrap: wrap; }

/* ─── sections ─────────────────────────────────────────────────────── */
section { padding: 56px 0; border-top: 1px solid var(--border); }
h2 { font-size: 30px; font-weight: 800; letter-spacing: -.02em; line-height: 1.12; margin: 0 0 12px; color: var(--ink); text-wrap: balance; }
.sec-lede { font-size: 16px; line-height: 1.65; color: var(--body); max-width: 40em; margin: 0 0 32px; }
p a, li a, .legal a { color: var(--bronze); text-decoration: none; }
p a:hover, li a:hover, .legal a:hover { text-decoration: underline; }

/* ─── the product card (the one dark block — the product's own ground) ─ */
.product {
  background: var(--navy-card);
  border: 1px solid var(--navy-card-border);
  color: var(--navy-ink);
  border-radius: 16px;
  padding: 40px 44px;
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 36px;
  box-shadow: var(--shadow);
}
.product h3 { font-size: 26px; font-weight: 800; letter-spacing: -.02em; margin: 0 0 10px; color: var(--navy-ink); }
.product h3 .dot { color: var(--navy-accent); }
.product p { font-size: 15px; line-height: 1.65; color: var(--navy-muted); margin: 0 0 14px; }
.product p b { color: var(--navy-ink); }
.product a.btn { background: var(--navy-accent); color: var(--navy-card); }
.product a.btn:hover { filter: brightness(1.08); }
.product ul { margin: 0; padding: 0; list-style: none; }
.product li { padding: 10px 0; border-bottom: 1px dashed var(--navy-card-border); font-size: 14px; line-height: 1.5; color: var(--navy-muted); }
.product li:last-child { border-bottom: none; }
.product li b { color: var(--navy-ink); display: block; margin-bottom: 2px; }

/* ─── fact cards (how it's sold · who we are) ─────────────────────── */
.facts { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.fcard { background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 24px; }
.fcard h3 { font-size: 17px; font-weight: 700; margin: 0 0 8px; color: var(--ink); }
.fcard p, .fcard li { font-size: 14.5px; line-height: 1.65; color: var(--body); margin: 0; }
.fcard p + p { margin-top: 10px; }
.fcard ul { padding-left: 20px; margin: 0; }
.fcard li { margin: 0 0 6px; }
.fcard b { color: var(--ink); }

/* ─── definition rows (the contact block) ──────────────────────────── */
.rows { display: grid; grid-template-columns: 180px 1fr; row-gap: 12px; column-gap: 20px; font-size: 15px; line-height: 1.6; max-width: 640px; }
.rows dt { color: var(--muted); margin: 0; }
.rows dd { color: var(--ink); margin: 0; }

/* ─── legal pages (terms.html, privacy.html) ───────────────────────── */
.legal { max-width: 720px; padding: 56px 0 72px; }
.legal h1 { font-size: 40px; margin-bottom: 10px; }
.legal-meta { font-size: 13px; color: var(--soft); margin: 0 0 28px; }
.legal-lede { font-size: 17px; line-height: 1.65; color: var(--body); margin: 0 0 8px; }
.legal h2 { font-size: 20px; margin: 40px 0 10px; }
.legal p, .legal li { font-size: 15px; line-height: 1.7; color: var(--body); }
.legal p { margin: 0 0 14px; }
.legal ul { padding-left: 22px; margin: 0 0 14px; }
.legal li { margin: 0 0 8px; }
.legal b { color: var(--ink); }

/* ─── footer ───────────────────────────────────────────────────────── */
footer { border-top: 1px solid var(--border); padding: 24px 0 40px; display: flex; gap: 20px; font-size: 13px; color: var(--soft); flex-wrap: wrap; }
footer a { color: var(--soft); text-decoration: none; }
footer a:hover { color: var(--ink); }

/* ─── small screens ────────────────────────────────────────────────── */
@media (max-width: 860px) {
  .product { grid-template-columns: 1fr; padding: 28px 24px; }
  .facts { grid-template-columns: 1fr; }
  h1 { font-size: 36px; }
  h2 { font-size: 26px; }
  .legal h1 { font-size: 30px; }
  .rows { grid-template-columns: 1fr; row-gap: 4px; }
  .rows dd { margin-bottom: 12px; }
  nav { gap: 16px; }
  nav a { white-space: nowrap; }
}
@media (max-width: 560px) {
  /* phones: logo + contact button only */
  nav a:not(.logo):not(.btn) { display: none; }
}