:root { --ink:#11283a; --muted:#5d7083; --line:#dfe6ec; --bg:#f6f8fa; --card:#fff; --navy:#0a3d5c; --accent:#0b6fa4; --ok:#1b7f4b; --bad:#b3261e; --field:#fff; --on:#fff; --code:#eef3f7; }
@media (prefers-color-scheme: dark) { :root { --ink:#e6eef5; --muted:#9db0c1; --line:#27384a; --bg:#0d1720; --card:#132331; --navy:#7cc4ec; --accent:#7cc4ec; --ok:#6fd39b; --bad:#ff8a80; --field:#0f1d29; --on:#0d1720; --code:#0f1d29; } }
* { box-sizing:border-box; }
body { margin:0; background:var(--bg); color:var(--ink); font:16px/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,sans-serif; }
a { color:var(--accent); }
nav.top { display:flex; align-items:center; justify-content:space-between; gap:14px; max-width:1080px; margin:0 auto; padding:16px 20px; flex-wrap:wrap; }
nav.top .brand { display:flex; align-items:center; gap:10px; font-weight:650; color:var(--navy); text-decoration:none; }
nav.top .brand img { width:28px; height:28px; }
nav.top .links { display:flex; gap:18px; align-items:center; font-size:15px; flex-wrap:wrap; }
nav.top .links a { text-decoration:none; color:var(--ink); }
nav.top .links a.cta { background:var(--navy); color:var(--on); padding:8px 14px; border-radius:10px; font-weight:600; }
main.page { max-width:1080px; margin:0 auto; padding:10px 20px 70px; }
main.narrow { max-width:780px; }
h1 { font-size:clamp(28px,4vw,38px); line-height:1.15; letter-spacing:-.3px; margin:24px 0 10px; }
h2 { font-size:21px; margin:36px 0 10px; }
h3 { font-size:17px; margin:24px 0 8px; }
.lead { color:var(--muted); font-size:17px; margin:0 0 26px; max-width:720px; }
.muted { color:var(--muted); }
.grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:16px; }
.plan { background:var(--card); border:1px solid var(--line); border-radius:16px; padding:22px; display:flex; flex-direction:column; gap:10px; }
.plan.best { border-color:var(--accent); box-shadow:0 0 0 1px var(--accent); }
.plan h3 { margin:0; }
.plan .price { font-size:32px; font-weight:700; letter-spacing:-.5px; }
.plan .price small { font-size:14px; font-weight:500; color:var(--muted); }
.plan ul { margin:4px 0 8px; padding-left:18px; color:var(--muted); font-size:14.5px; }
.plan button, .plan a.btn { margin-top:auto; }
button, a.btn { font:inherit; font-weight:600; border:1px solid var(--line); border-radius:10px; padding:11px 14px; background:var(--card); color:var(--ink); cursor:pointer; text-decoration:none; text-align:center; display:inline-block; }
button.primary, a.btn.primary { background:var(--navy); border-color:var(--navy); color:var(--on); }
button:disabled { opacity:.6; cursor:progress; }
.banner { background:#fff6e5; color:#7a4a00; border:1px solid #f0d199; border-radius:12px; padding:10px 14px; margin:14px 0; font-size:14.5px; }
@media (prefers-color-scheme: dark) { .banner { background:#2a2110; color:#f0c97a; border-color:#5a4520; } }
code, pre { font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:13.5px; }
pre { background:var(--code); border:1px solid var(--line); border-radius:12px; padding:14px; overflow-x:auto; line-height:1.5; }
p code, li code, td code { background:var(--code); border-radius:6px; padding:1px 6px; }
table { border-collapse:collapse; width:100%; font-size:14.5px; margin:10px 0; display:block; overflow-x:auto; }
th, td { text-align:left; padding:8px 10px; border-bottom:1px solid var(--line); vertical-align:top; }
dialog { border:1px solid var(--line); border-radius:16px; padding:24px; background:var(--card); color:var(--ink); width:min(440px,92vw); }
dialog::backdrop { background:rgba(10,30,45,.45); }
label { display:block; font-size:13.5px; font-weight:600; margin:12px 0 5px; }
input { width:100%; font:inherit; color:var(--ink); background:var(--field); border:1px solid var(--line); border-radius:10px; padding:10px 12px; }
.err { color:var(--bad); font-size:14px; min-height:1em; margin-top:10px; }
.hp { position:absolute; left:-10000px; width:1px; height:1px; overflow:hidden; }
footer.site { max-width:1080px; margin:0 auto; padding:24px 20px 40px; color:var(--muted); font-size:13.5px; border-top:1px solid var(--line); display:flex; gap:16px; flex-wrap:wrap; justify-content:space-between; }
footer.site a { color:var(--muted); }