:root { color-scheme: light dark; --fg: #1a1a1a; --dim: #555; --bg: #fff; --line: #ddd; --accent: #2b5cff; }
@media (prefers-color-scheme: dark) { :root { --fg: #e8e8e8; --dim: #9a9a9a; --bg: #111; --line: #2a2a2a; --accent: #7d9bff; } }
body { margin: 0; background: var(--bg); color: var(--fg); font: 16px/1.6 system-ui, -apple-system, "Segoe UI", sans-serif; }
main { max-width: 42rem; margin: 0 auto; padding: 2rem 1.25rem 4rem; }
nav { max-width: 42rem; margin: 0 auto; padding: 1rem 1.25rem 0; display: flex; gap: 1rem; flex-wrap: wrap; font-size: 14px; }
nav a:first-child { font-weight: 700; margin-right: auto; }
a { color: var(--accent); }
h1 { font-size: 1.8rem; margin: 1rem 0 .25rem; }
h2 { font-size: 1.15rem; margin: 2rem 0 .25rem; }
.updated { color: var(--dim); font-size: 14px; margin: 0 0 1.5rem; }
ul { padding-left: 1.25rem; }
li { margin: .25rem 0; }
footer { border-top: 1px solid var(--line); margin-top: 3rem; padding-top: 1rem; color: var(--dim); font-size: 14px; }
.hero { margin: 1.5rem 0 2rem; }
.cta { display: flex; gap: .75rem; flex-wrap: wrap; margin: 1.25rem 0 .5rem; }
.btn { display: inline-block; background: var(--accent); color: #fff; padding: .6rem 1.25rem; border-radius: .5rem; text-decoration: none; font-weight: 600; }
.btn.ghost { background: transparent; color: var(--accent); border: 1px solid var(--accent); }
.small { color: var(--dim); font-size: 14px; }
.placeholder { border: 1px dashed var(--line); padding: 1rem; color: var(--dim); }
table { border-collapse: collapse; width: 100%; margin: 1rem 0; font-size: 15px; }
th, td { border: 1px solid var(--line); padding: .5rem .6rem; text-align: left; }
section { margin-top: 2.5rem; }

/* --- marketing pages (home, pricing, faq, thanks) --- */
.wide main, .wide nav { max-width: 62rem; }
nav a { text-decoration: none; }
nav a:hover { text-decoration: underline; }
.hero h1 { font-size: 2.3rem; line-height: 1.15; margin: 1rem 0 .75rem; }
.lead { font-size: 1.15rem; max-width: 46rem; }
.btn.disabled { opacity: .55; pointer-events: none; }
.hero-video, .clip video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; background: #0b0d12; }
.hero-video { border: 1px solid var(--line); border-radius: .75rem; margin: 1.5rem 0 .4rem; }
.clip { margin: 0; }
.clip video { border: 1px solid var(--line); border-radius: .5rem; }
.clip figcaption, .caption { color: var(--dim); font-size: 14px; margin-top: .35rem; }
.grid2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); gap: 1rem; }
.card { border: 1px solid var(--line); border-radius: .75rem; padding: 1rem 1.1rem; }
.card h3 { margin: 0 0 .25rem; font-size: 1.05rem; }
.card.pro { border-color: var(--accent); }
.price { font-size: 2.1rem; font-weight: 700; line-height: 1.2; margin: .2rem 0; }
.pricebox { border: 1px solid var(--accent); border-radius: .75rem; padding: 1rem 1.25rem; margin: 1rem 0; }
.pricebox p { margin: .25rem 0; }
.yes { color: #1a9a4a; font-weight: 600; }
.no { color: var(--dim); }
tr.now td { background: rgba(43, 92, 255, .12); font-weight: 600; }
details { border: 1px solid var(--line); border-radius: .5rem; padding: .6rem .9rem; margin: .6rem 0; }
summary { cursor: pointer; font-weight: 600; }
details[open] summary { margin-bottom: .4rem; }
.keybox { border: 1px solid var(--accent); border-radius: .5rem; padding: .9rem 1rem; margin: 1rem 0; }
.keybox code { display: block; font-size: 1.05rem; word-break: break-all; margin: .4rem 0 .6rem; }
ol.steps { padding-left: 1.25rem; }
ol.steps li { margin: .6rem 0; }
@media (max-width: 34rem) { .hero h1 { font-size: 1.75rem; } th, td { font-size: 14px; padding: .4rem; } }
.demo { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 40rem) { .demo { grid-template-columns: 1fr; } }