:root { color-scheme: light dark; }
* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, sans-serif;
  line-height: 1.55;
  color: #1a1a1a;
  background: #fff;
}
@media (prefers-color-scheme: dark) {
  body { color: #e8e8e8; background: #0e0e10; }
  .card { background: #161618; border-color: #2a2a2e; }
  a { color: #76aaff; }
}
a { color: #1f6feb; text-decoration: none; }
a:hover { text-decoration: underline; }
header {
  max-width: 960px;
  margin: 0 auto;
  padding: 1.25rem 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.brand { display: flex; align-items: center; gap: 0.6rem; }
.brand img { height: 28px; }
.brand-text { font-weight: 600; font-size: 1.05rem; }
.brand-text .sub { color: #888; font-weight: 400; }
nav a { margin-left: 1.25rem; font-size: 0.95rem; }
main { max-width: 960px; margin: 0 auto; padding: 1rem 1.5rem 4rem; }
.hero { padding: 3rem 0 2.5rem; }
.hero h1 {
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  line-height: 1.15;
  margin: 0 0 1rem;
  letter-spacing: -0.02em;
}
.hero p.lead {
  font-size: 1.15rem;
  color: #555;
  max-width: 640px;
  margin: 0 0 1.75rem;
}
@media (prefers-color-scheme: dark) {
  .hero p.lead { color: #b0b0b0; }
}
.cta {
  display: inline-block;
  padding: 0.7rem 1.4rem;
  background: #1f6feb;
  color: #fff !important;
  font-weight: 500;
  border-radius: 6px;
  margin-right: 0.6rem;
}
.cta:hover { background: #1a5bc8; text-decoration: none; }
.cta.secondary {
  background: transparent;
  color: #1f6feb !important;
  border: 1px solid #1f6feb;
}
.cta.secondary:hover { background: rgba(31, 111, 235, 0.08); }
.features {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.25rem;
  margin: 2.5rem 0;
}
.card {
  padding: 1.4rem;
  border: 1px solid #e6e6e6;
  border-radius: 8px;
  background: #fafafa;
}
.card h3 { margin: 0 0 0.5rem; font-size: 1.05rem; }
.card p { margin: 0; color: #555; font-size: 0.95rem; }
@media (prefers-color-scheme: dark) {
  .card p { color: #b0b0b0; }
}
.pricing,
.legal {
  margin: 2.5rem 0;
  padding: 1.5rem;
  border: 1px solid #e6e6e6;
  border-radius: 8px;
}
@media (prefers-color-scheme: dark) {
  .pricing, .legal { border-color: #2a2a2e; }
}
.pricing h2, .legal h2 { margin-top: 0; }
.legal { max-width: 780px; }
.legal h3 { margin-top: 1.5rem; }
.legal p, .legal li { color: #444; }
@media (prefers-color-scheme: dark) {
  .legal p, .legal li { color: #c8c8c8; }
}
code, pre {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.9rem;
}
pre {
  background: #f4f4f6;
  border: 1px solid #e6e6e6;
  border-radius: 6px;
  padding: 0.9rem 1rem;
  overflow-x: auto;
}
@media (prefers-color-scheme: dark) {
  pre { background: #161618; border-color: #2a2a2e; }
}
footer {
  max-width: 960px;
  margin: 0 auto;
  padding: 2rem 1.5rem 3rem;
  border-top: 1px solid #e6e6e6;
  color: #888;
  font-size: 0.9rem;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 1.5rem;
  align-items: center;
  justify-content: space-between;
}
@media (prefers-color-scheme: dark) {
  footer { border-color: #2a2a2e; }
}
footer a { color: inherit; }