/*
  Qboqo Analytics - the site.

  THE COLOURS ARE THE PRODUCT'S OWN, not an approximation of them. Every token below is lifted from
  src/Qboqo.Analytics.Desktop/Theme/Light.xaml and Dark.xaml, so the page and the application agree about
  what the product looks like. If the product's theme changes, change these to match rather than guessing.

  No framework, no build step, no fonts fetched from anywhere. The product sends nothing anywhere, and a
  download page that quietly called out to a font host or an analytics service would be the first thing a
  sceptical reader found.
*/

:root {
  /* Light.xaml */
  --surface-background: #f6f7f9;
  --surface-panel: #ffffff;
  --surface-canvas: #edeff3;
  --border-subtle: #e1e4ea;
  --text-primary: #1b1f26;
  --text-secondary: #5c6473;
  --accent: #1f7a6b;
  --accent-strong: #19655a;

  /* Dark.xaml, used for the band at the top whatever the reader's preference */
  --dark-background: #15181d;
  --dark-panel: #1c2027;
  --dark-border: #2b313a;
  --dark-text: #edeff2;
  --dark-text-secondary: #9aa3b2;
  --dark-accent: #3fa896;

  --measure: 68ch;
  --radius: 10px;
  --shadow: 0 1px 2px rgba(27, 31, 38, .06), 0 8px 24px rgba(27, 31, 38, .08);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --surface-background: #15181d;
    --surface-panel: #1c2027;
    --surface-canvas: #0f1216;
    --border-subtle: #2b313a;
    --text-primary: #edeff2;
    --text-secondary: #9aa3b2;
    --accent: #3fa896;
    --accent-strong: #52bda9;
    --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 8px 24px rgba(0, 0, 0, .35);
  }
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--surface-background);
  color: var(--text-primary);
  font: 400 17px/1.65 "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  text-rendering: optimizeLegibility;
}

.wrap { width: min(1120px, 100% - 32px); margin-inline: auto; }

a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--accent-strong); }

h1, h2, h3 { line-height: 1.2; letter-spacing: -.015em; margin: 0 0 .5em; font-weight: 600; }
h1 { font-size: clamp(2.1rem, 1.3rem + 3.2vw, 3.4rem); font-weight: 300; }
h2 { font-size: clamp(1.4rem, 1.1rem + 1.1vw, 1.9rem); }
h3 { font-size: 1.08rem; }
p { margin: 0 0 1em; }
p, li { max-width: var(--measure); }

/* ---------------------------------------------------------------- the bar */
.bar {
  background: var(--dark-background);
  border-bottom: 1px solid var(--dark-border);
}
.bar .wrap { display: flex; align-items: center; gap: 20px; height: 62px; }
.brand { display: flex; align-items: center; gap: 11px; color: var(--dark-text); text-decoration: none; font-weight: 600; }
.brand img { width: 28px; height: 28px; display: block; }
.bar nav { margin-left: auto; display: flex; gap: 22px; }
.bar nav a { color: var(--dark-text-secondary); text-decoration: none; font-size: .95rem; }
.bar nav a:hover, .bar nav a[aria-current="page"] { color: var(--dark-text); }

/* ---------------------------------------------------------------- hero */
.hero {
  background: var(--dark-background);
  color: var(--dark-text);
  padding: 76px 0 0;
  position: relative;
  overflow: hidden;
}
.hero::before {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(900px 420px at 18% -8%, rgba(63, 168, 150, .22), transparent 70%);
  pointer-events: none;
}
.hero .wrap { position: relative; }
.hero h1 { color: var(--dark-text); max-width: 16ch; }
.hero .lede { color: var(--dark-text-secondary); font-size: 1.22rem; max-width: 56ch; margin-bottom: 1.6em; }
.hero .accent { color: var(--dark-accent); }

.shot {
  margin-top: 54px;
  border: 1px solid var(--dark-border);
  border-radius: var(--radius) var(--radius) 0 0;
  border-bottom: 0;
  box-shadow: 0 -2px 60px rgba(0, 0, 0, .5);
  display: block;
  width: 100%;
  height: auto;
}

/* ---------------------------------------------------------------- buttons */
.actions { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 13px 26px;
  border-radius: 8px;
  font-weight: 600; font-size: 1.02rem;
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
}
.btn-primary { background: var(--dark-accent); color: #0f1216; }
.btn-primary:hover { background: #52bda9; color: #0f1216; }
.btn-quiet { color: var(--dark-text); border-color: var(--dark-border); }
.btn-quiet:hover { border-color: var(--dark-text-secondary); color: var(--dark-text); }
.btn[aria-disabled="true"] { background: var(--dark-border); color: var(--dark-text-secondary); cursor: not-allowed; }
.btn-note { color: var(--dark-text-secondary); font-size: .9rem; }

/* ---------------------------------------------------------------- sections */
section { padding: 72px 0; }
.lede-block { max-width: var(--measure); margin-bottom: 42px; }
.lede-block p { color: var(--text-secondary); font-size: 1.1rem; }

.grid { display: grid; gap: 22px; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); }
.card {
  background: var(--surface-panel);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius);
  padding: 26px;
  box-shadow: var(--shadow);
}
.card h3 { margin-bottom: .35em; }
.card p { color: var(--text-secondary); margin: 0; font-size: .97rem; }
.card .mark { color: var(--accent); font-weight: 600; font-size: .78rem; letter-spacing: .09em; text-transform: uppercase; display: block; margin-bottom: 12px; }

.alt { background: var(--surface-canvas); }

/* ---------------------------------------------------------------- facts */
.facts { border-collapse: collapse; width: 100%; max-width: 760px; font-size: .97rem; }
.facts th, .facts td { text-align: left; padding: 13px 16px; border-bottom: 1px solid var(--border-subtle); vertical-align: top; }
.facts th { color: var(--text-secondary); font-weight: 600; white-space: nowrap; width: 34%; }
.facts td { color: var(--text-primary); }

code, .mono {
  font-family: Consolas, "SF Mono", "Cascadia Mono", ui-monospace, monospace;
  font-size: .88em;
}
.hash {
  display: block;
  background: var(--surface-canvas);
  border: 1px solid var(--border-subtle);
  border-radius: 6px;
  padding: 11px 13px;
  word-break: break-all;
  font-family: Consolas, "SF Mono", "Cascadia Mono", ui-monospace, monospace;
  font-size: .82rem;
  color: var(--text-primary);
  max-width: none;
}

.note {
  border-left: 3px solid var(--accent);
  padding: 4px 0 4px 18px;
  color: var(--text-secondary);
  margin: 26px 0;
}
.note strong { color: var(--text-primary); }

/* ---------------------------------------------------------------- agreement */
.agreement { max-width: var(--measure); }
.agreement h2 { margin-top: 2em; padding-top: .6em; border-top: 1px solid var(--border-subtle); }
.agreement h2:first-of-type { border-top: 0; padding-top: 0; }
.agreement ul { padding-left: 1.2em; }

/* ---------------------------------------------------------------- foot */
footer {
  background: var(--dark-background);
  color: var(--dark-text-secondary);
  padding: 46px 0;
  font-size: .92rem;
  border-top: 1px solid var(--dark-border);
}
footer a { color: var(--dark-text-secondary); }
footer a:hover { color: var(--dark-text); }
footer .wrap { display: flex; flex-wrap: wrap; gap: 20px 40px; justify-content: space-between; }
footer p { max-width: 46ch; margin: 0; }

@media (max-width: 640px) {
  .bar .wrap { height: auto; padding: 14px 0; flex-wrap: wrap; gap: 12px; }
  .bar nav { margin-left: 0; width: 100%; gap: 18px; }
  .hero { padding-top: 48px; }
  section { padding: 52px 0; }
  .facts th { width: auto; white-space: normal; }
}