/* Nyvo site styles.

   Deliberately self-contained: no web fonts, no CDN, no analytics, no
   third-party requests of any kind. That is partly speed, but mostly so the
   privacy policy can say "this site sets no cookies and sends nothing to
   anyone" and have it be true — a Google Fonts request alone would put an
   EU visitor's IP address in someone else's logs and make that claim false. */

:root {
  --bg: #17181c;
  --bg-raised: #1f2126;
  --bg-hover: #262930;
  --border: #33363d;
  --text: #e6e7ea;
  --text-dim: #9a9daa;
  --accent: #3d8a63;
  --accent-hover: #47a074;
  --max: 940px;
}

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 16px/1.65 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
        "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; }

/* ── Header ─────────────────────────────────────────────── */

.site-head {
  max-width: var(--max);
  margin: 0 auto;
  padding: 28px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}

.wordmark {
  font-weight: 700;
  font-size: 20px;
  letter-spacing: 0.18em;
  text-decoration: none;
}

.site-head nav { display: flex; gap: 24px; flex-wrap: wrap; }

.site-head nav a {
  color: var(--text-dim);
  text-decoration: none;
  font-size: 15px;
}

.site-head nav a:hover { color: var(--text); }

/* ── Hero ───────────────────────────────────────────────── */

main { max-width: var(--max); margin: 0 auto; padding: 0 24px; }

.hero { padding: 72px 0 88px; max-width: 42rem; }

h1 {
  font-size: clamp(2.1rem, 6vw, 3.2rem);
  line-height: 1.12;
  letter-spacing: -0.02em;
  margin: 0 0 24px;
}

.lede {
  font-size: 1.18rem;
  color: var(--text-dim);
  margin: 0 0 36px;
}

.cta-row { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }

.btn {
  display: inline-block;
  padding: 13px 26px;
  border-radius: 7px;
  font-weight: 600;
  text-decoration: none;
  border: 1px solid transparent;
}

.btn-primary { background: var(--accent); color: #f2fbf6; }
.btn-primary:hover { background: var(--accent-hover); }

.btn-secondary {
  background: transparent;
  color: var(--text);
  border-color: var(--border);
}
.btn-secondary:hover { background: var(--bg-hover); }

/* Not a link until there is something to link to. Styled as clearly inert
   rather than hidden, so the page is honest about the product's stage. */
.btn.is-disabled {
  background: var(--bg-raised);
  color: var(--text-dim);
  border-color: var(--border);
  cursor: default;
}

.note { color: var(--text-dim); font-size: 14px; }
.note a { color: var(--text); }

/* ── Sections ───────────────────────────────────────────── */

h2 {
  font-size: 1.5rem;
  letter-spacing: -0.01em;
  margin: 0 0 32px;
  padding-top: 56px;
  border-top: 1px solid var(--border);
}

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 32px 40px;
  padding-bottom: 32px;
}

.grid h3 { font-size: 1.02rem; margin: 0 0 10px; }
.grid p { margin: 0; color: var(--text-dim); font-size: 15px; }

/* ── Pricing ────────────────────────────────────────────── */

.tiers {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
}

.tier {
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-radius: 11px;
  padding: 28px;
}

.tier-paid { border-color: var(--accent); }

.tier h3 { margin: 0 0 6px; font-size: 1.05rem; }

.price { font-size: 2.1rem; font-weight: 700; margin: 0 0 20px; }
.price span { font-size: 1rem; font-weight: 400; color: var(--text-dim); }

.tier ul { list-style: none; margin: 0 0 24px; padding: 0; }

.tier li {
  padding: 7px 0 7px 24px;
  position: relative;
  font-size: 15px;
  color: var(--text-dim);
}

.tier li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 15px;
  width: 9px;
  height: 5px;
  border-left: 2px solid var(--accent);
  border-bottom: 2px solid var(--accent);
  transform: rotate(-45deg);
}

/* Limitations get a dash rather than a tick — a checkmark next to "exports
   carry a watermark" reads as a feature and is quietly dishonest. */
.tier li.limit::before {
  border-left: none;
  border-bottom: 2px solid var(--text-dim);
  transform: none;
  top: 18px;
  width: 10px;
}

.fineprint {
  color: var(--text-dim);
  font-size: 14px;
  margin: 28px 0 0;
  max-width: 46rem;
}

/* ── Footer ─────────────────────────────────────────────── */

.site-foot {
  max-width: var(--max);
  margin: 88px auto 0;
  padding: 28px 24px 56px;
  border-top: 1px solid var(--border);
  display: flex;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  color: var(--text-dim);
  font-size: 14px;
}

.entity { margin: 0; }
.site-foot nav { display: flex; gap: 22px; flex-wrap: wrap; }
.site-foot a { color: var(--text-dim); text-decoration: none; }
.site-foot a:hover { color: var(--text); }

/* ── Long-form documents (terms, privacy) ───────────────── */

.doc { max-width: 44rem; padding-bottom: 40px; }
.doc h1 { font-size: 2rem; margin-bottom: 8px; }
.doc .updated { color: var(--text-dim); font-size: 14px; margin: 0 0 40px; }
.doc h2 { font-size: 1.15rem; padding-top: 36px; margin-bottom: 14px; }
.doc h2:first-of-type { border-top: none; padding-top: 0; }
.doc p, .doc li { color: var(--text-dim); }
.doc li { margin-bottom: 8px; }

.callout {
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: 7px;
  padding: 18px 22px;
  margin: 28px 0;
}

.callout p { margin: 0; color: var(--text); }