:root{
  --bg:#fbfbfd; --panel:#fff; --ink:#16181d; --muted:#5b6270; --line:#e3e6ec;
  --accent:#4f46e5; --accent-ink:#fff; --good:#0f7b4f; --code:#f4f5f8;
}
@media (prefers-color-scheme:dark){
  :root{ --bg:#0d0f14; --panel:#14171e; --ink:#eceef3; --muted:#9aa3b2; --line:#242833;
         --accent:#8b85ff; --accent-ink:#0d0f14; --good:#4ade80; --code:#1a1e27; }
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);
  font:16px/1.65 ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased}
.skip{position:absolute;left:-9999px}
.skip:focus{left:8px;top:8px;background:var(--accent);color:var(--accent-ink);padding:8px 12px;border-radius:8px;z-index:10}
header.site{display:flex;flex-wrap:wrap;gap:12px 18px;align-items:center;justify-content:space-between;
  padding:16px 24px;border-bottom:1px solid var(--line);background:var(--panel);position:sticky;top:0;z-index:5}
.brand{display:flex;align-items:center;gap:10px;font-weight:650;color:var(--ink);text-decoration:none;font-size:17px}
.store-cta{display:inline-block;background:var(--accent);color:var(--accent-ink);text-decoration:none;
  padding:8px 16px;border-radius:9px;font-weight:600;font-size:14px;white-space:nowrap}
.store-cta:hover{filter:brightness(1.08)}
.mark{display:grid;place-items:center;width:28px;height:28px;border-radius:8px;background:var(--accent);color:var(--accent-ink);font-size:13px;font-weight:700}
header nav{display:flex;flex-wrap:wrap;gap:4px}
header nav a{color:var(--muted);text-decoration:none;padding:6px 10px;border-radius:8px;font-size:14.5px}
header nav a:hover{background:var(--code);color:var(--ink)}
header nav a[aria-current=page]{color:var(--accent);font-weight:600}
main{max-width:1080px;margin:0 auto;padding:8px 24px 64px}
section{margin:48px 0}
h1{font-size:clamp(28px,4.5vw,44px);line-height:1.15;letter-spacing:-.02em;margin:.4em 0}
h2{font-size:clamp(21px,2.6vw,28px);letter-spacing:-.01em;margin:1.6em 0 .5em}
h3{font-size:18px;margin:1.4em 0 .4em}
p{margin:.7em 0}
a{color:var(--accent)}
.lead{font-size:18px;color:var(--muted);max-width:70ch}
.fine{font-size:13.5px;color:var(--muted)}
.eyebrow{font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:0}
.hero{padding:32px 0 8px}
.hero .lead{font-size:19px;color:var(--ink);opacity:.85}
.cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:24px}
.button{display:inline-block;background:var(--accent);color:var(--accent-ink);text-decoration:none;
  padding:11px 20px;border-radius:10px;font-weight:600}
.button.ghost{background:transparent;color:var(--accent);border:1px solid var(--line)}
.cols{display:grid;gap:24px;grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.grid{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.tile{display:block;background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:18px;text-decoration:none;color:var(--ink)}
.tile:hover{border-color:var(--accent)}
.tile h3{margin:0 0 6px}
.tile p{margin:0;color:var(--muted);font-size:14.5px}
.feature{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:22px 24px;margin:20px 0}
.feature ul{padding-left:20px}
.feature li{margin:.45em 0}
.tools{margin-top:14px;padding-top:12px;border-top:1px solid var(--line);font-size:13px;color:var(--muted)}
.tools span{text-transform:uppercase;letter-spacing:.07em;margin-right:8px}
code{background:var(--code);padding:1px 6px;border-radius:6px;font-size:.88em;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
pre{background:var(--code);border:1px solid var(--line);border-radius:12px;padding:16px;overflow-x:auto}
pre code{background:none;padding:0}
table{width:100%;border-collapse:collapse;margin:14px 0;font-size:14.5px}
th,td{text-align:left;padding:9px 12px;border-bottom:1px solid var(--line);vertical-align:top}
thead th{font-size:13px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted)}
tbody th{font-weight:550}
.scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.compare{min-width:760px}
.compare .us{background:color-mix(in srgb,var(--accent) 9%,transparent);font-weight:600}
.keys kbd{background:var(--code);border:1px solid var(--line);border-bottom-width:2px;border-radius:6px;
  padding:2px 8px;font-family:ui-monospace,monospace;font-size:13px;white-space:nowrap}
.callout{background:var(--panel);border:1px solid var(--line);border-left:3px solid var(--accent);
  border-radius:12px;padding:20px 24px}
.callout h2,.callout h3{margin-top:0}
.toolgrid{display:flex;flex-wrap:wrap;gap:7px;margin:16px 0}
.toolgrid code{font-size:12.5px;padding:4px 9px}
.tiers{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));margin-top:24px}
.tier{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:24px}
.tier.featured{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}
.tier h2{margin-top:0}
.price{font-size:32px;font-weight:700;margin:.2em 0}
.price span{font-size:15px;font-weight:400;color:var(--muted)}
.tier ul{padding-left:20px}
.tier li{margin:.35em 0}
.release{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:22px 24px}
.release h2{margin-top:0}
.date{font-size:14px;font-weight:400;color:var(--muted);margin-left:10px}
footer.site{border-top:1px solid var(--line);padding:28px 24px 48px;color:var(--muted);
  max-width:1080px;margin:0 auto;font-size:14px}
footer.site a{color:var(--muted)}
@media (max-width:620px){ header.site{position:static} .compare{min-width:640px} }