/* Styling for the static content pages in public/ (vs-bumpmesh, vs-hueforge,
   bambu-studio-textures). Those pages are plain HTML served straight off
   Cloudflare Pages — they never load the app bundle, so they can't use
   Tailwind. Colors mirror the app's theme so the pages and the tool look like
   one product. Served from the same origin, so `default-src 'self'` allows it. */

:root {
  --bg: #161a30;
  --panel: #1a1f3a;
  --border: #2a2f52;
  --accent: #00aeef;
  --accent-soft: #7ec8e3;
  --text: #cbd5e1;
  --bright: #e2e8f0;
  --muted: #94a3b8;
}

* { box-sizing: border-box }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

.wrap { max-width: 46rem; margin: 0 auto; padding: 0 24px }

/* Header ------------------------------------------------------------------ */

.site-head {
  border-bottom: 1px solid var(--border);
  background: var(--panel);
}
.site-head .wrap {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding-top: 14px; padding-bottom: 14px;
}
.brand { color: #fff; font-weight: 700; text-decoration: none; font-size: 17px }
.brand span { display: block; font-size: 11px; font-weight: 500; color: var(--muted) }

.btn {
  display: inline-block; padding: 9px 18px; border-radius: 8px;
  background: var(--accent); color: #04121c; font-weight: 600; font-size: 14px;
  text-decoration: none; white-space: nowrap;
}
.btn:hover { background: var(--accent-soft) }
.btn-lg { padding: 12px 24px; font-size: 16px }

/* Article ----------------------------------------------------------------- */

main { padding: 40px 0 24px }
h1 { margin: 0 0 18px; font-size: 32px; line-height: 1.2; color: #fff; letter-spacing: -0.01em }
h2 { margin: 36px 0 10px; font-size: 21px; color: var(--accent-soft) }
h3 { margin: 24px 0 6px; font-size: 17px; color: #fff }
p, li { margin: 0 0 14px }
ul, ol { padding-left: 22px }
strong { color: #fff }
code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.9em; background: #0f1225; border: 1px solid var(--border);
  border-radius: 4px; padding: 1px 5px;
}
a { color: var(--accent-soft) }

.lede { font-size: 18px; color: var(--bright) }

/* Comparison table -------------------------------------------------------- */

.table-scroll { overflow-x: auto; margin: 0 0 20px }
table { border-collapse: collapse; width: 100%; min-width: 32rem; font-size: 15px }
th, td { text-align: left; padding: 10px 14px; border-bottom: 1px solid var(--border); vertical-align: top }
thead th { color: #fff; font-size: 13px; text-transform: uppercase; letter-spacing: 0.05em }
tbody th { color: var(--muted); font-weight: 500 }

/* Callout + footer -------------------------------------------------------- */

.cta {
  margin: 36px 0 8px; padding: 22px 24px; border-radius: 14px;
  background: var(--panel); border: 1px solid var(--border);
}
.cta p { margin: 0 0 16px }
.cta p:last-of-type { margin-bottom: 0 }

.note {
  border-left: 3px solid var(--accent); padding: 2px 0 2px 16px;
  color: var(--muted); font-size: 15px;
}

.site-foot {
  margin-top: 48px; border-top: 1px solid var(--border);
  padding: 22px 0 40px; font-size: 14px; color: var(--muted);
}
.site-foot .wrap { display: flex; flex-wrap: wrap; gap: 8px 20px; align-items: center }
.site-foot a { color: var(--muted) }

@media (max-width: 640px) {
  h1 { font-size: 26px }
  main { padding-top: 28px }
}