:root { color-scheme: light dark; --ink:#15243a; --muted:#53647c; --bg:#f5f8fc; --panel:#ffffff; --edge:#d5e0ee; --blue:#2c6bd3; --deep:#1b4f9e; --sky:#2f7be8; --code:#eaf0f8; --on-blue:#ffffff; }
@media (prefers-color-scheme: dark) { :root { --ink:#e2eaf5; --muted:#9badc4; --bg:#0b1321; --panel:#121d2f; --edge:#26384f; --blue:#5b98f2; --deep:#a6c6f4; --sky:#78acf6; --code:#0e1828; --on-blue:#07111f; } }
* { box-sizing: border-box; }
body { margin:0; background:var(--bg); color:var(--ink); font:17px/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
main { max-width:760px; margin:auto; padding:56px 24px 80px; }
nav { display:flex; gap:16px; flex-wrap:wrap; margin-bottom:44px; }
a { color:var(--blue); text-underline-offset:3px; }
h1 { font-size:clamp(2.2rem,7vw,3.6rem); line-height:1.05; margin:.2em 0; font-weight:700; letter-spacing:-.02em; }
h2 { margin-top:2.2em; line-height:1.2; font-weight:700; color:var(--deep); }
h3 { margin:1.6em 0 .4em; font-size:1.05rem; }
p, li { color:var(--ink); }
.lede { color:var(--muted); font-size:1.1rem; }
.eyebrow { color:var(--sky); font-weight:800; letter-spacing:.08em; text-transform:uppercase; font-size:.85rem; }
.icon { width:112px; height:112px; border-radius:24px; display:block; margin-bottom:12px; }
.card { background:var(--panel); border:1px solid var(--edge); border-radius:18px; padding:24px; margin:20px 0; }
.card > :first-child { margin-top:0; }
.card > :last-child { margin-bottom:0; }
.button { display:inline-block; padding:10px 18px; border-radius:999px; background:var(--blue); color:var(--on-blue); text-decoration:none; font-weight:700; }
.note { color:var(--muted); font-size:.95rem; }
.plans { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:16px; margin:20px 0; }
.plans .card { margin:0; }
.price { font-size:1.5rem; font-weight:700; margin:.2em 0; }
.shot { margin:28px 0; border:2px dashed var(--edge); border-radius:18px; aspect-ratio:16/10; display:flex; align-items:center; justify-content:center; padding:24px; text-align:center; color:var(--muted); background:var(--panel); }
code, pre { font:.88em/1.5 ui-monospace,"SF Mono",Menlo,monospace; }
code { background:var(--code); border-radius:6px; padding:.1em .35em; overflow-wrap:anywhere; }
pre { background:var(--code); border:1px solid var(--edge); border-radius:12px; padding:14px 16px; overflow-x:auto; }
pre code { background:none; padding:0; overflow-wrap:normal; }
.table { overflow-x:auto; }
table { border-collapse:collapse; width:100%; }
th, td { text-align:left; padding:8px 12px; border-bottom:1px solid var(--edge); vertical-align:top; }
th { color:var(--muted); font-size:.85rem; text-transform:uppercase; letter-spacing:.06em; }
footer { border-top:1px solid var(--edge); margin-top:50px; padding-top:20px; font-size:.9rem; color:var(--muted); }
@media (max-width:520px) { main { padding:40px 16px 64px; } .card { padding:18px; } }