/* Shared styling for the static SEO landing pages in /public.
   These pages are plain HTML on purpose: they must be fully readable by
   crawlers that do not execute JavaScript, so they cannot live inside the
   React app (see src/lib/seo.ts for how app routes handle their own tags). */
:root {
  --bg: #070c1b;
  --panel: #0e1630;
  --border: #1e2b52;
  --text: #e8ecf8;
  --muted: #97a3c4;
  --accent: #f5b544;
  --link: #7fb2ff;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
.wrap { max-width: 760px; margin: 0 auto; padding: 2rem 1.25rem 4rem; }
h1, h2, h3 { font-family: "Space Grotesk", Inter, system-ui, sans-serif; line-height: 1.2; }
h1 { font-size: clamp(1.9rem, 5vw, 2.7rem); margin: 0 0 .75rem; }
h2 { font-size: clamp(1.3rem, 3.5vw, 1.7rem); margin: 2.5rem 0 .75rem; }
h3 { font-size: 1.1rem; margin: 1.75rem 0 .5rem; }
p, li { color: var(--text); }
.lede { font-size: 1.12rem; color: var(--muted); }
a { color: var(--link); }
nav.top { display: flex; gap: 1rem; align-items: center; padding: 1rem 1.25rem; border-bottom: 1px solid var(--border); }
nav.top a.brand { font-family: "Space Grotesk", sans-serif; font-weight: 700; color: var(--text); text-decoration: none; font-size: 1.1rem; }
nav.top a.brand span { color: var(--accent); }
nav.top .spacer { flex: 1; }
nav.top a.nav { color: var(--muted); text-decoration: none; font-size: .92rem; }
nav.top a.nav:hover { color: var(--text); }
.cta {
  display: inline-block; margin: 1.25rem 0;
  background: var(--accent); color: #1a1204; font-weight: 700;
  padding: .8rem 1.5rem; border-radius: 999px; text-decoration: none;
  font-family: "Space Grotesk", sans-serif;
}
.cta:hover { filter: brightness(1.08); }
.panel { background: var(--panel); border: 1px solid var(--border); border-radius: 14px; padding: 1.1rem 1.25rem; margin: 1.5rem 0; }
.table-scroll { overflow-x: auto; margin: 1.5rem 0; }
table { border-collapse: collapse; width: 100%; min-width: 560px; font-size: .93rem; }
th, td { text-align: left; padding: .65rem .7rem; border-bottom: 1px solid var(--border); vertical-align: top; }
th { color: var(--accent); font-family: "Space Grotesk", sans-serif; font-weight: 600; }
td.you { color: var(--text); }
footer { border-top: 1px solid var(--border); margin-top: 3rem; padding-top: 1.25rem; color: var(--muted); font-size: .88rem; }
footer a { color: var(--muted); }